/* ============================================================
Top Hat Navigation CSS
* Created by Brian Talbot on 2008-08-19.
* Copyright (c) 2008 National Geographic. All rights reserved.

Notes:
================
* 2008-08-19 - Added Initial Styles


In This CSS:
================

Visual Layout
-----------------
+Typography
+Colors

Structural Layout
-----------------
+Header
+Navigation
+Content
+Footer

Web Elements
-----------------
+Advertisements
+Forms
+Flash

Conditional
-----------------
+Page Hierarchy/Level Specific (level-1, level-2, level-3, etc.)
+Layout Specific

Everything Else
-----------------
+Miscellaneaous
+Testing
============================================================ */

/* ------------------------------------------------------------
+Testing
------------------------------------------------------------ */
/* div { border: 1px solid red; } */


/* ------------------------------------------------------------
+General
------------------------------------------------------------ */
body {
	margin: 0;
}


/* ------------------------------------------------------------
+Header
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Navigation
------------------------------------------------------------ */
.navigation ul, ul.navigation {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* +Top Hat Navigation
------------------------------------------------------------ */
#navigation_tophat_container {
	background-color:#070707;
	background: transparent url("/themes/tophat/i/backgrounds/tophat_background.gif") 0 0 repeat-x;
	color: #fff;
	font-family: arial, helvetica, sans-serif;
	font-size: 62.5%;
	margin: 0;
	padding-left: 10px;
}

	#navigation_tophat_container #navigation_tophat {
		margin: 0 auto;
		width: 980px;
	}
		
		#navigation_tophat_container #navigation_tophat #header_logo h1 {
			margin: 0 !important;
		}
		
			#navigation_tophat_container #navigation_tophat #header_logo h1 a {
				background: transparent url("/themes/tophat/i/backgrounds/tophat_logo.gif") 0 0 no-repeat;
				display: block;
				float: left;
				height: 28px;
				margin: 14px 15px 0 0;
				text-indent: -99999px;
				width: 89px;
			}
			
		
		/* Header Search */
		#navigation_tophat_container #navigation_tophat #header_search {
			float: right;
			margin-top: 4px;
		}
		
			#navigation_tophat_container #navigation_tophat #header_search #header_search_input {
				border: 1px solid #000;
				color: #000;
				font-size: 0.9em;
				margin: 0 5px;
				height: 13px;
				width: 136px;
			}
		
			#navigation_tophat_container #navigation_tophat #header_search label {
				margin-top: 4px;
				text-transform: uppercase;
			}

			#navigation_tophat_container #navigation_tophat #header_search #header_search_input, #navigation_tophat_container #navigation_tophat #header_search label, #navigation_tophat_container #navigation_tophat #header_search #header_search_submit {
				display: block;
				float: left;
			}
			
		/* Main Navigation */
		#navigation_tophat_container #navigation_tophat ul {
			float: right;
			margin-top: 5px;
		}
		
			#navigation_tophat_container #navigation_tophat ul li {
				float: left;
				margin: 0;
				padding: 0;
			}
			
				#navigation_tophat_container #navigation_tophat ul li a {
					border-right: 1px solid #000;
					background: transparent url("/themes/tophat/i/backgrounds/tophat_button_bg.gif") 0 0 repeat-x;
					color: #ccc;
					display: block;
					float: left;
					font-size: 1.1em;
					padding: 9px 8px 7px 9px;
					text-decoration: none;
				}

				#navigation_tophat_container #navigation_tophat ul#header_featured_links li a {
					background-image:none;
					border-right:1px solid #ffffff;
					display:block;
					font-size:1em;
					font-weight:bold;
					margin-top:4px;
					padding:0 14px;
					position:relative;
					text-transform:uppercase;
					top:-1px;
				}

				#navigation_tophat_container #navigation_tophat ul#header_featured_links li:last-child a {
					margin-right:14px;
				}
			
					#navigation_tophat_container #navigation_tophat ul li a:hover, #navigation_tophat_container #navigation_tophat ul li a:active {
						color: #fff;
						text-decoration: underline;
					}




/* +Bottom Hat Navigation
------------------------------------------------------------ */
#navigation_bottomhat_container {
	background: #000 url("/themes/tophat/i/backgrounds/bottomhat_bg.gif") 0 0 repeat-x;
	color: #666;
	clear: both;
	font-family: arial, helvetica, sans-serif;
	font-size: 62.5%;
	margin: 0;
	padding: 24px 0 10px 0;
	position: relative;
	width:100%;
}

	#navigation_bottomhat_container #navigation_bottomhat {
		margin: 0 auto;
		width: 900px;
	}
	
		#navigation_bottomhat_container #navigation_bottomhat ul {
			margin: 0 auto 7px auto;
			text-align: center;
			width: 85%;
		}
		
			#navigation_bottomhat_container #navigation_bottomhat ul li {
				display: inline;
			}
			
				#navigation_bottomhat_container #navigation_bottomhat ul li a {
					color: #ccc;
					font-size: 1.1em;
					margin-right: 7px;
					text-decoration: none;
				}
				
					#navigation_bottomhat_container #navigation_bottomhat ul li a:hover, #navigation_bottomhat_container #navigation_bottomhat ul li a:active {
						color: #fff;
						text-decoration: underline;
					}
					
			#navigation_bottomhat_container #navigation_bottomhat .copyright {
				margin: 0 auto;
				text-align: center;
			}
			
			#navigation_bottomhat_container #navigation_bottomhat #footer_logo a {
				background: transparent url("/themes/tophat/i/backgrounds/tophat_logo.gif") 0 0 no-repeat;
				display: block;
				height: 28px;
				margin: 35px auto 5px auto;
				text-indent: -99999px;
				width: 89px;
				
			}


/* +Top Hat Navigation (Sans Search-Specific)
------------------------------------------------------------ */
#navigation_tophat_container .sans_search ul {
	margin-top: 30px !important;
}




/* ------------------------------------------------------------
+Content
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Footer
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Forms
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Flash
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Advertisements
------------------------------------------------------------ */
#headerboard {
	background: transparent url("/themes/tophat/i/backgrounds/tophat_stripe_bg.gif") 0 0 repeat;
	margin: 0 auto;
	padding: 3px 0 5px 0;
}

	#headerboard .leaderboard {
		margin: 0 auto;
	}
	
	/* If two ads (leaderboard and sponsor exist) */
	#headerboard .advertisements {
		margin: 10px auto;
		width: 960px;
	}
	
		#headerboard .advertisements .leaderboard {
			float: left;
		}
		
		#headerboard .advertisements .sponsor {
			height: 50px;
			float: right;
			width: 210px;
		}

/* ------------------------------------------------------------
+Page Hierarchy/Level Specific (level-1, level-2, level-3, etc.)
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Layout Specific
------------------------------------------------------------ */




/* ------------------------------------------------------------
+Miscellaneous
------------------------------------------------------------ */
/* Known Needed Document Flow Clears - Thanks to http://www.positioniseverything.net/easyclearing.html */
	#header_search_box, #navigation_tophat_container, #navigation_bottomhat ul, #headerboard .advertisements {
		display: block;
	}
	
		#header_search_box:after, #navigation_tophat_container:after, #navigation_bottomhat ul:after, #headerboard .advertisements:after {
			clear: both;
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
		}