.mobile-masthead-wrapper { background: #000; padding: 0 10px; } .mobile-masthead { height: 35px; margin: 0 auto; padding-top: 6px; } #navigation_tophat_container { display: none; } @media only screen and (min-width: 768px) { .mobile-masthead-wrapper { padding: 0; } .mobile-masthead { width: 746px; } } /** ============================================================ * National Geographic Global CSS * @package ngs * @see http://images.nationalgeographic.com/wpf/sites/themes/global/c/screen-cb1326794685.css * * Covers NGS header styles * =============================================================== */ @media only screen and (min-width: 1024px) { .mobile-masthead-wrapper { display: none; } #navigation_tophat_container { display: block; } .hiddenText { text-indent: -9999px; } #navigation_tophat_primary li.nav1 ul.nav li.nav2 a { color: #fff; } #navigation_tophat_primary li.nav1 h3 a { color: #FFD800; } /*.home #navigation_tophat_primary li.nav1 ul.nav, .home #navigation_tophat_primary li.nav1 ul.nav,*/ ul#navigation_tophat_primary .current ul, #navigation_tophat_primary li.nav1 ul.nav, .science #navigation_tophat_primary li.nav1 ul.nav, .news #navigation_tophat_primary li.nav1 ul.nav, .www #navigation_tophat_primary li.nav1 ul.nav, .photography #navigation_tophat_primary li.nav3 ul.nav, .animals #navigation_tophat_primary li.nav4 ul.nav, .environment #navigation_tophat_primary li.nav5 ul.nav, .travel #navigation_tophat_primary li.nav6 ul.nav, .adventure #navigation_tophat_primary li.nav7 ul.nav, .channel #navigation_tophat_primary li.nav8 ul.nav, .kids #navigation_tophat_primary li.nav9 ul.nav, .atoz #navigation_tophat_primary li.nav2 ul.nav, .shop #navigation_tophat_primary li.nav10 ul.nav, ul#navigation_tophat_primary ul li:hover ul, #navigation_tophat_primary .hover ul, ul#navigation_tophat_primary ul li.hover ul {left: 1px; top: 3.2em; /* match top ul list item height */ display: block; visibility: visible;} #navigation_tophat_primary ul li {list-style: none;} /* .home #navigation_tophat_primary li.nav1 .sneak_peek, .home #navigation_tophat_primary li.nav1 .sneak_peek, */ .science #navigation_tophat_primary li.nav1 .sneak_peek, .ngm #navigation_tophat_primary li.nav1 .sneak_peek, .news #navigation_tophat_primary li.nav1 .sneak_peek, .www #navigation_tophat_primary li.nav1 .sneak_peek, .photography #navigation_tophat_primary li.nav3 .sneak_peek, .animals #navigation_tophat_primary li.nav4 .sneak_peek, .environment #navigation_tophat_primary li.nav5 .sneak_peek, .travel #navigation_tophat_primary li.nav6 .sneak_peek, .adventure #navigation_tophat_primary li.nav7 .sneak_peek, .channel #navigation_tophat_primary li.nav8 .sneak_peek, .kids #navigation_tophat_primary li.nav9 .sneak_peek, .atoz #navigation_tophat_primary li.nav2 .sneak_peek, .shop #navigation_tophat_primary li.nav10 .sneak_peek, .intl #navigation_tophat_primary li.nav7 .sneak_peek {display: none;} #navigation_tophat_primary .current ul ul {top: -999em;} #navigation_tophat_primary li li.current > a {font-weight: bold;} #content_mainB .advertisement {z-index:9999;} #navigation_tophat_container { /* background: transparent url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/background_with_shadow.png) repeat-x scroll center bottom; */ background: #000; -moz-box-shadow: 0px 3px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.2); box-shadow: 0px 3px 4px rgba(0,0,0,.2); /* padding: 0 0 6px;*/ z-index: 10000; } /* ------------------------------------------------------------ +NG Global Nav Styles ------------------------------------------------------------ */ .photography #navigation_tophat_primary li.nav3 ul.nav li.highlighted a, .photography #navigation_tophat_primary li.nav3 ul.nav li.highlighted a:hover {color: #98ccfe; text-decoration:none;} .environment #navigation_tophat_primary li.nav5 ul.nav li.highlighted a, .environment #navigation_tophat_primary li.nav5 ul.nav li.highlighted a:hover {color: #cade6f; text-decoration:none;} .travel #navigation_tophat_primary li.nav6 ul.nav li.highlighted a, .travel #navigation_tophat_primary li.nav6 ul.nav li.highlighted a:hover {color: #000000; text-decoration:none;} .animals #navigation_tophat_primary li.nav4 ul.nav li.highlighted a, .animals #navigation_tophat_primary li.nav4 ul.nav li.highlighted a:hover {color: #000000; text-decoration:none;} .adventure #navigation_tophat_primary li.nav7 ul.nav li.highlighted a, .adventure #navigation_tophat_primary li.nav7 ul.nav li.highlighted a:hover, .movies #navigation_tophat_primary li.nav7 ul.nav li.highlighted a, .movies #navigation_tophat_primary li.nav7 ul.nav li.highlighted a:hover, {color: #ffffff; text-decoration:none;} #tophat {background: transparent url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/background_with_shadow.png) repeat-x scroll center bottom; font-size: 16px; line-height: 1; position: relative; text-align: left; z-index: 10000;} #tophat .nav {border: none;} #tophat .nav li {float: left;} #tophat .nav > li:first-child, #footer_global .nav > li:first-child {border-left: none; padding-left: 0;} #header_ads, #headerboard {background-color: transparent;} #header_ads {z-index: 2;} #headerboard {margin: 0 auto; width: 990px; height:90px;} #headerboard .secondary_ad {float: right; height: 90px; width: 257px;} #headerboard .leaderboard {float: left; height: 90px;} #headerboard .leaderboard.centered {float:none;height:90px;width:728px;margin:0 auto;} #nav_wrap {border-top: 1px solid #d5d5d5;} #navigation_tophat_primary li {position: static; float: left;} #navigation_tophat_primary a {border-top: none; display: block; position: relative; text-decoration:none;} #navigation_tophat_primary a, #navigation_tophat_primary a:visited {border: none;} #navigation_mainA, #navigation_mainB {height: auto; margin: 0 auto; position: relative; width: 990px;} #navigation_mainA {margin-bottom: 0px;} #navigation_mainB_wrap {border-top: 1px solid #222; position: relative; z-index: 10;} #navigation_tophat_container hr {border-color: #222; border-style: solid; border-width: 1px 0 0; line-height: 0; bottom: 2.25em; height: 0; left: 0; margin: 0; padding: 0; position: absolute; width: 100%;} #navigation_tophat_container { font-family: arial,sans-serif; font-size: 16px; height: auto; line-height: normal; margin-top: -1px; padding-top: 14px; position: relative; z-index: 1; } #navigation_tophat_primary ul.nav {left: 0; padding: 11px 10px 10px 15px; position: absolute; top: -999em; width:965px;} #navigation_tophat_primary > li a:hover {text-decoration: none;} #navigation_tophat_primary ul.nav li {border-left:1px solid #fff; margin-left:13px; padding-left:13px; position: relative; width: auto; float: left;} #navigation_tophat_primary > li.nav5 ul.nav li {margin-left:12px;padding-left:12px;} #navigation_tophat_primary .nav9 ul.nav li {border-left:1px solid #000;} #navigation_tophat_primary li.nav1 ul.nav li {border-left: 1px solid #777;} #navigation_tophat_primary li:hover ul, #navigation_tophat_primary li.hover ul {left: 0; top: 3.2em; /* match top ul list item height */ z-index: 99;} #navigation_tophat_primary ul.nav li:first-child, #navigation_tophat_primary li.nav1 ul.nav li:first-child {border:none; margin: 0; padding:0;} #navigation_tophat_primary > li.nav5 ul.nav li:first-child {margin-left:0px;padding-left:0px;} #navigation_tophat_primary ul.nav {font-size: .814em; margin: 0} #navigation_tophat_primary h3 {font-size: .875em; margin: 0; padding: 0;} #navigation_tophat_primary h3 a {color: #ccc; font-weight:bold; padding: 10px 16px 13px; text-transform:uppercase;} #navigation_tophat_primary {border: none; height: 2.4em; list-style: none; float: left; padding: 0 0 2.45em 0; position: relative; margin: 0 0 0 -2px; z-index: 10;} #header_logo h2 {float: left; margin: 0;} #header_logo a.fn {background: url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/ng_nav_logos.gif) no-repeat scroll 0 -32px; display: block; height: 61px; width: 207px; text-indent: -9999px} #header_logo {float: left; margin: 20px 35px 0 14px; position: static;} #account {margin: 24px 0 4px; float: right;} #account #intl_link_subscriptions {color: #fff; font-weight: bold; margin-left: 20px; text-transform: uppercase;} #account .welcome_msg, #account .action {float: left; clear: none; margin: 0;} #account .welcome_msg, #account .action a {color: #FFD800; display: block; font-size: 11px; text-decoration: none;} #account .welcome_msg a, #account #intl_link_subscriptions:hover {color: #FFD800;} #account .welcome_msg {padding: 0 10px 0 0; border-right: 1px solid #999; margin-right: 10px;} #mission_statement {color: #999; margin-left: 20px;} #mission_learn_link {border-left: 1px solid #999; margin-left: 10px; padding-left: 10px;} #mission_statement, #mission_learn_link {float: left; font-size: .825em; line-height: 1.4em; margin-top: 43px; margin-bottom: 0;} #mission_learn_link a {color: #999; text-decoration: none;} #header_search {bottom: 5px; margin-top: 4px; position: absolute; right: 0; z-index: 1;} #header_search .field {position: relative;} #header_search .search-context {clear: both; padding-top: .25em;} #header_search button {background: #fff url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/search_submit.gif) no-repeat center center; border: 0 none; cursor: pointer; height: 24px; position: absolute; right: 0; width: 22px;} #header_search input {border: 1px solid #eee; font-family: arial, sans-serif; float: left; height: 14px; padding: 4px 0 4px 4px; width: 251px;} #header_search {bottom: 5px; margin-top: 4px; position: absolute; right: 0; z-index: 1;} #header_search .field {position: relative;} #header_search button {background: #fff url(http://images.nationalgeographic.com/wpf/sites/themes/global/i/presentation/search_submit.gif) no-repeat center center; border: 0 none; cursor: pointer; height: 24px; position: absolute; right: 0; width: 22px;} #header_search input {border: 1px solid #eee; font-family: arial, sans-serif; float: left; height: 14px; padding: 4px 0 4px 4px; width: 251px;} #header_search_video { background-color: transparent; bottom: 5px; margin: 0; float: right; right: 0; z-index: 1; } #header_search_video #header_search_input { float:right; margin: 0 22px 0 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; line-height: normal; font-size: 11px; height: 14px; } #header_search_video #header_search_submit { top:0px; margin: 0; padding: 0; border-radius: 0; } #header_search_video .search-context { clear:both; padding-top:.25em;} #header_search_video .search-context label { display:block; float:left; font-size:.8em; font-weight: normal; margin-right:.25em; color:white; /*background:url('../i/presentation/radio-btn-sprite.png') transparent no-repeat;*/ height:13px; line-height:1.4; cursor:pointer; text-transform: none; width: auto; } #header_search_video .search-context label:before { content: ' '; background:url('http://images.nationalgeographic.com/wpf/sites/themes/global/i/presentation/radio-btn-sprite.png') transparent no-repeat; height:13px; width:13px; position: relative; display: inline-block; margin: 0 .25em 0 -13px; top: 2px; } #header_search_video .search-context label.selected:before { background-position:0px -13px; } #header_search_video .search-context input { /*float:left; width:13px; height:13px; padding:1px; margin-right:.25em;*/ border: none; margin: 0; visibility:hidden; } #header_search_video .field {position: relative;} #header_search_video button {background: #fff url(http://images.nationalgeographic.com/wpf/sites/themes/global/i/presentation/search_submit.gif) no-repeat center center; border: 0 none; cursor: pointer; height: 24px; position: absolute; right: 0; width: 22px;} #header_search_video input {border: 1px solid #eee; font-family: arial, sans-serif; float: left; padding: 4px 0 4px 4px; width: 251px;} #header_search_video input[type="checkbox"], #header_search_video input[type="radio"] { width: auto;} #header_search_video .next {float: right;position: relative; color: #FFD800; background: #fff} #header_search_video .previous {float: left;position: relative; color: #FFD800; background: #fff} #connect_with_us { position: relative; margin: -12px 0 13px; float: right; color: #999;} #connect_with_us > li { float: left; font-size: 11px; margin-left: 2px; list-style: none;} .inline_list li:first-child {margin-top: 2px; margin-right: 3px;} /*#connect_links {float: right;} #connect_with_us p {float: left; margin: 0; padding-top: 1px; padding-right: 4px; color: #999; font-size: .7em;}*/ #connect_with_us a { display: block;} #connect_with_us img {width: 16px;} /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; clear:both;} /* Hover States and Color Schemes */ #navigation_tophat_primary h3 a:hover {text-decoration: none;} /* .home #navigation_tophat_primary > li.nav1, .home #navigation_tophat_primary > li.nav1 h3 a,*/ .science #navigation_tophat_primary > li.nav1, #navigation_tophat_primary li.nav1 ul.nav a, #navigation_tophat_primary li.nav1 ul.nav, #navigation_tophat_primary li.nav1 h3 a:hover, #navigation_tophat_primary li.nav1.hover, #navigation_mainA ul.js li.nav1 h3 a:hover, #navigation_mainA ul.js li.nav1 h3 a.hover:hover, #navigation_mainA ul li.nav1 a:hover {background-color: #000; color: #ffd800;} .blogs #navigation_tophat_primary li.nav1 ul.nav li.nav8 a {color: #fff;} .greenguide #navigation_tophat_primary li.nav5 ul.nav li.nav8 a {color: #c6de6e;} .movies #navigation_tophat_primary li.nav1 ul.nav li.nav9 a {color: #fff;} .news #navigation_tophat_primary li.nav1 ul.nav li.nav1 a {color: #fff;} .ngm #navigation_tophat_primary li.nav1 ul.nav li.nav2 a {color: #fff;} .science #navigation_tophat_primary li.nav1 ul.nav li.nav4 a {color: #fff;} .video_player #navigation_tophat_primary > li.nav2, .video_player #navigation_tophat_primary > li.nav2 h3 a, #navigation_tophat_primary li.nav2 ul.nav, #navigation_tophat_primary li.nav2 ul.nav a, #navigation_tophat_primary li.nav2.hover h3 a, #navigation_tophat_primary li.nav2 h3 a:hover, #navigation_mainA ul.js li.nav2 h3 a:hover, #navigation_mainA ul.js li.nav2 h3 a.hover:hover, #navigation_tophat_primary li.nav2.hover, #navigation_mainA ul.js li.nav2 a.hover {background-color: #044E8E; color: #63CCFC;} #navigation_mainA ul li.nav2.hover ul.nav li a, #navigation_mainA ul.js li.nav2.hover ul.nav li a {color: #ccc;} #navigation_mainA ul li.nav2.hover h3 a.hover, #navigation_mainA ul li.nav2.hover h3 a.hover:hover {color:#63CCFC;} #navigation_mainA ul li.nav2.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav2.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav2.hover ul.nav li a.hover {background-color:#044E8E; color: #63CCFC;} .photography #navigation_tophat_primary > li.nav3, .photography #navigation_tophat_primary > li.nav3 h3 a, #navigation_tophat_primary li.nav3 ul.nav, #navigation_tophat_primary li.nav3 ul.nav a, #navigation_tophat_primary li.nav3.hover h3 a, #navigation_tophat_primary li.nav3 h3 a:hover, #navigation_mainA ul.js li.nav3 h3 a:hover, #navigation_mainA ul.js li.nav3 h3 a.hover:hover, #navigation_tophat_primary li.nav3.hover, #navigation_mainA ul.js li.nav3 a.hover{background-color: #313b47; color: #98ccfe;} #navigation_mainA ul li.nav3.hover ul.nav li a, #navigation_mainA ul.js li.nav3.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav3.hover h3 a.hover, #navigation_mainA ul li.nav3.hover h3 a.hover:hover {color:#98ccfe;} #navigation_mainA ul li.nav3.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav3.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav3.hover ul.nav li a.hover {background-color:transparent; color: #98ccfe;} .animals #navigation_tophat_primary > li.nav4, .animals #navigation_tophat_primary > li.nav4 h3 a, #navigation_tophat_primary li.nav4 ul.nav, #navigation_tophat_primary li.nav4 ul.nav a, #navigation_tophat_primary li.nav4.hover h3 a, #navigation_tophat_primary li.nav4 h3 a:hover, #navigation_mainA ul.js li.nav4 h3 a:hover, #navigation_mainA ul.js li.nav4 h3 a.hover:hover, #navigation_tophat_primary li.nav4.hover, #navigation_mainA ul.js li.nav4 a.hover {background-color: #ff9414; color: #000;} #navigation_mainA ul li.nav4.hover ul.nav li a, #navigation_mainA ul.js li.nav4.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav4.hover h3 a.hover, #navigation_mainA ul li.nav4.hover h3 a.hover:hover {color:#000;} #navigation_mainA ul li.nav4.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav4.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav4.hover ul.nav li a.hover {background-color:transparent; color: #000;} .animals #navigation_tophat_primary li.nav4 h3 a {background-color: #ff9414; color: #000;} .environment #navigation_tophat_primary > li.nav5, .environment #navigation_tophat_primary > li.nav5 h3 a, #navigation_tophat_primary li.nav5 ul.nav, #navigation_tophat_primary li.nav5 ul.nav a, #navigation_tophat_primary li.nav5.hover h3 a, #navigation_tophat_primary li.nav5 h3 a:hover, #navigation_mainA ul.js li.nav5 h3 a:hover, #navigation_mainA ul.js li.nav5 h3 a.hover:hover, #navigation_tophat_primary li.nav5.hover, #navigation_mainA ul.js li.nav5 a.hover {background-color: #39433a; color: #c6de6e;} #navigation_mainA ul li.nav5.hover ul.nav li a, #navigation_mainA ul.js li.nav5.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav5.hover h3 a.hover, #navigation_mainA ul li.nav5.hover h3 a.hover:hover {color:#c6de6e;} #navigation_mainA ul li.nav5.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav5.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav5.hover ul.nav li a.hover {background-color:transparent; color: #c6de6e;} #navigation_tophat_primary li.nav6 ul.nav, #navigation_tophat_primary li.nav6 ul.nav a, #navigation_tophat_primary li.nav6.hover h3 a, #navigation_tophat_primary li.nav6 h3 a:hover, #navigation_mainA ul.js li.nav6 h3 a:hover, #navigation_mainA ul.js li.nav6 h3 a.hover:hover, #navigation_tophat_primary li.nav6.hover, #navigation_mainA ul.js li.nav6 a.hover {background-color: #82b4d2; color:#000;} #navigation_mainA ul li.nav6.hover ul.nav li a, #navigation_mainA ul.js li.nav6.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav6.hover h3 a.hover, #navigation_mainA ul li.nav6.hover h3 a.hover:hover {color:#fff;} #navigation_mainA ul li.nav6.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav6.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav6.hover ul.nav li a.hover {background-color:transparent; color: #000;} .travel #navigation_tophat_primary li.nav6 h3 a {background-color: #82b4d2; color: #000;} /*.travel #navigation_tophat_primary > li.nav5, #navigation_tophat_primary li.nav5 ul.nav, #navigation_tophat_primary li.nav5 ul.nav a, #navigation_tophat_primary li.nav5 h3 a:hover, #navigation_mainA ul.js li.nav5 h3 a:hover, #navigation_mainA ul.js li.nav5 h3 a.hover:hover, #navigation_mainA ul.js li.nav5 a.hover {background-color: #82b4d2; color: #fff;} .travel #navigation_tophat_primary > li.nav5 h3 a {color: #000;}*/ .adventure #navigation_tophat_primary > li.nav7, .adventure #navigation_tophat_primary > li.nav7 h3 a, #navigation_tophat_primary li.nav7 ul.nav, #navigation_tophat_primary li.nav7 ul.nav a, #navigation_tophat_primary li.nav7.hover h3 a, #navigation_tophat_primary li.nav7 h3 a:hover, #navigation_mainA ul.js li.nav7 h3 a:hover, #navigation_mainA ul.js li.nav7 h3 a.hover:hover, #navigation_tophat_primary li.nav7.hover, #navigation_mainA ul.js li.nav7 a.hover {background-color: #881f00; color: #fc0;} #navigation_mainA ul li.nav7.hover ul.nav li a, #navigation_mainA ul.js li.nav7.hover ul.nav li a {color: #fc0;} #navigation_mainA ul li.nav7.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav7.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav7.hover ul.nav li a.hover {background-color:transparent; color: #fc0;} .channel #navigation_tophat_primary > li.nav8, .channel #navigation_tophat_primary > li.nav8 h3 a, #navigation_tophat_primary li.nav8 ul.nav, #navigation_tophat_primary li.nav8 ul.nav a, #navigation_tophat_primary li.nav8.hover h3 a, #navigation_tophat_primary li.nav8 h3 a:hover, #navigation_mainA ul.js li.nav8 h3 a:hover, #navigation_tophat_primary li.nav8.hover, #navigation_mainA ul.js li.nav8 h3 a.hover:hover {background-color: #06395F; color: #fff;} #navigation_mainA ul li.nav8.hover a, #navigation_mainA ul.js li.nav8.hover a {color: #fff;} #navigation_mainA ul li.nav8.hover h3 a.hover:hover, #navigation_mainA ul li.nav8.hover h3 a.hover:hover, #navigation_mainA ul.js li.nav8.hover a:hover, #navigation_mainA ul.js li.nav8.hover a.hover {background-color: #06395F; color: #fff;} .kids #navigation_tophat_primary > li.nav9, .kids #navigation_tophat_primary > li.nav9 h3 a, #navigation_tophat_primary li.nav9 ul.nav, #navigation_tophat_primary li.nav9 ul.nav a, #navigation_tophat_primary li.nav9.hover h3 a, #navigation_tophat_primary li.nav9 h3 a:hover, #navigation_mainA ul.js li.nav9 h3 a:hover, #navigation_mainA ul.js li.nav9 h3 a.hover:hover, #navigation_tophat_primary li.nav9.hover, #navigation_mainA ul.js li.nav9 a.hover {background-color: #FFD25B;color: #000;} #navigation_mainA ul li.nav9.hover ul.nav li a, #navigation_mainA ul.js li.nav9.hover ul.nav li a {color: #000;} #navigation_mainA ul li.nav9.hover h3 a.hover, #navigation_mainA ul li.nav9.hover h3 a.hover:hover {color:#000;} #navigation_mainA ul li.nav9.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav9.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav9.hover ul.nav li a.hover {background-color:#FFD25B; color: #000;} #navigation_tophat_primary li.nav3 ul.nav a, #navigation_tophat_primary li.nav4 ul.nav a, #navigation_tophat_primary li.nav5 ul.nav a, #navigation_tophat_primary li.nav6 ul.nav a { color:#fff;} .shop #navigation_tophat_primary > li.nav10, .shop #navigation_tophat_primary > li.nav10 h3 a, #navigation_tophat_primary li.nav10 ul.nav, #navigation_tophat_primary li.nav10 ul.nav a, #navigation_tophat_primary li.nav10.hover h3 a, #navigation_tophat_primary li.nav10 h3 a:hover, #navigation_mainA ul.js li.nav10 h3 a:hover, #navigation_mainA ul.js li.nav10 h3 a.hover:hover, #navigation_tophat_primary li.nav10.hover, #navigation_mainA ul.js li.nav10 a.hover {background-color: #393939; color: #fff;} #navigation_tophat_primary li.nav10 h3 a {color: #FFD800;} #navigation_mainA ul li.nav10.hover ul.nav li a, #navigation_mainA ul.js li.nav10.hover ul.nav li a {color: #ccc;} #navigation_mainA ul li.nav10.hover h3 a.hover, #navigation_mainA ul li.nav10.hover h3 a.hover:hover {color:#fff;} #navigation_mainA ul li.nav10.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav10.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav10.hover ul.nav li a.hover {background-color:transparent; color: #fff;} #navigation_tophat_primary li.nav10 ul.nav a { color:#ccc;} /* International Page exceptions */ .intl #navigation_tophat_primary > li.nav10, .intl #navigation_tophat_primary > li.nav10 h3 a {visibility:hidden;} .intl #navigation_tophat_primary li.nav7 ul.nav {height:15px;} .intl #navigation_tophat_primary li.nav7 ul.nav > li {display:none;} /* Secondary Nav Hover States */ #navigation_tophat_primary li.nav1 ul.nav a:hover, #navigation_tophat_primary li.nav2 ul.nav a:hover, #navigation_tophat_primary li.nav3 ul.nav a:hover, #navigation_tophat_primary li.nav4 ul.nav a:hover, #navigation_tophat_primary li.nav5 ul.nav a:hover, #navigation_tophat_primary li.nav6 ul.nav a:hover, #navigation_tophat_primary li.nav7 ul.nav a:hover, #navigation_tophat_primary li.nav8 ul.nav a:hover, #navigation_tophat_primary li.nav9 ul.nav a:hover, #navigation_tophat_primary li.nav10 ul.nav a:hover {text-decoration: underline;} /* Secondary Nav Home Hover State */ #navigation_tophat_primary li.nav1 ul.nav li a:hover {color:#fff;} /* Secondary Nav Video Hover State */ #navigation_tophat_primary li.nav2 ul.nav li a:hover {color:#fff;} /* Secondary Nav Photography Hover State */ #navigation_tophat_primary li.nav3 ul.nav li a:hover {color:#99ccff;} /* Secondary Nav Animals Hover State */ #navigation_tophat_primary li.nav4 ul.nav li a:hover {color:#000;} /* Secondary Nav Environment Hover State */ #navigation_tophat_primary li.nav5 ul.nav li a:hover {color:#c6de6e;} /* Secondary Nav Travel Hover State */ #navigation_tophat_primary li.nav6 ul.nav li a:hover {color:#000;} /* Secondary Nav Adventure Hover State */ #navigation_tophat_primary li.nav7 ul.nav li a:hover {color:#fc0;} /* Secondary Nav NatGeoTV Hover State */ #navigation_tophat_primary li.nav8 ul.nav li a:hover {color:#fff;} /* Secondary Nav Kids Hover State */ #navigation_tophat_primary li.nav9 ul.nav li a:hover {color:#fff;} /* Secondary Nav Shop Hover State */ #navigation_tophat_primary li.nav10 ul.nav li a:hover {color:#fff;} /* Hover States with JS enabled */ #navigation_mainA ul.js li.nav1 h3 a:hover, #navigation_mainA ul.js li.nav2 h3 a:hover, #navigation_mainA ul.js li.nav3 h3 a:hover, #navigation_mainA ul.js li.nav4 h3 a:hover, #navigation_mainA ul.js li.nav5 h3 a:hover, #navigation_mainA ul.js li.nav6 h3 a:hover, #navigation_mainA ul.js li.nav7 h3 a:hover, #navigation_mainA ul.js li.nav8 h3 a:hover, #navigation_mainA ul.js li.nav9 h3 a:hover {background-color: transparent;} /* Preview Overlay */ div.sneak_peek div.layout_a {width: 102px;} div.sneak_peek div.layout_b {width: 658px;} div.sneak_peek div.layout_c {width: 210px;} div.sneak_peek div.layout_a .promo {margin-bottom: 5px;} div.sneak_peek div.layout_a .promo p {margin-bottom: 0;} div.sneak_peek {border: 1px solid #ccc; border-top: none; position:absolute; left:-9999px;} #navigation_tophat_primary li.hover div.sneak_peek {font-size: 1em; line-height: normal; visibility: visible; left: 0; padding: 20px; position: absolute; top: 78px; width: 948px; z-index: 10500;} #navigation_tophat_primary div.sneak_peek .promo li {font-size: .75em; float: none; margin-bottom: 0; margin-top: 8px;} #navigation_tophat_primary div.sneak_peek .promo p, #navigation_tophat_primary div.sneak_peek .promo ul {background-color: transparent; margin-bottom: 15px;} #navigation_tophat_primary div.sneak_peek ul {padding: 0;} div.sneak_peek h5, div.sneak_peek h3 {background-image:none; color: #fff; font-size: 1.064em; font-weight: normal; margin-bottom: 10px; margin-top: 0;} div.sneak_peek h5 ul li a img, div.sneak_peek h3 ul li a img { margin-top : 4px; } div.sneak_peek h6 a, div.sneak_peek li a {color: #FFD800; font-size: .875em; font-weight: bold;} div.sneak_peek h6 {font-size: 1em; margin-bottom: 5px; margin-top: 0;} div.sneak_peek li.list_link {font-size:.8em;} div.sneak_peek div.promo_collection > ul > li h4 {font-size:.85em;} div.sneak_peek div.promo_collection > ul > li.list_link h6 { font-size:1.25em; font-weight:bold; } div.sneak_peek div.layout_a li.list_link.promo {margin-top:0;margin-bottom:10px;} div.sneak_peek li.list_link.promo.last, div.sneak_peek div.layout_a li.list_link.promo.last {margin-bottom: 20px;} div.sneak_peek p {color: #fff; font-size:.813em; margin: 0!important;} div.sneak_peek p.credit {font-size: .65em; margin-top: 5px;} div.sneak_peek div.pod_module {clear:both;} div.sneak_peek .layout_a li p, div.sneak_peek .layout_a li h6 {clear:both;} li.nav1 div.sneak_peek, li.nav10 div.sneak_peek {background-color: #fefefe; color: #333;} li.nav1 div.sneak_peek p, li.nav1 div.sneak_peek h5, li.nav2 div.sneak_peek p, li.nav2 div.sneak_peek h5, li.nav3 div.sneak_peek p, li.nav3 div.sneak_peek h5, li.nav4 div.sneak_peek p, li.nav4 div.sneak_peek h5, li.nav5 div.sneak_peek p, li.nav8 div.sneak_peek p, li.nav10 div.sneak_peek p, li.nav10 div.sneak_peek h5 {color: #333;} li.nav8 div.sneak_peek h5 {color: #FF8800;} li.nav1 div.sneak_peek a, li.nav2 div.sneak_peek a, li.nav5 div.sneak_peek a {color: #044E8E;} li.nav2 div.sneak_peek {background-color: #efeff1;} li.nav3 div.sneak_peek {background-color: #f7f5e0;} li.nav3 div.sneak_peek a {color: #062c08;} li.nav4 div.sneak_peek {background-color: #ecf5ec;} li.nav4 div.sneak_peek a {color: #1f6f1f;} li.nav5 div.sneak_peek {background-color: #dae6ec;} li.nav5 div.sneak_peek h5, li.nav4 div.sneak_peek h3 {color: #336699;} li.nav6 div.sneak_peek {background-color: #414141;} li.nav7 div.sneak_peek {background-color: #06395F;} li.nav8 div.sneak_peek {background-color: #FFF;} li.nav8 div.sneak_peek a {color: #04B4B1;} li.nav9 div.sneak_peek {background-color: #04B4B1;} li.nav10 div.sneak_peek a {color: #044E8E;} li.nav1 div.sneak_peek div.promo_collection, li.nav1 div.sneak_peek div.promo_collection div.sidecar, li.nav2 div.sneak_peek div.promo_collection, li.nav2 div.sneak_peek div.promo_collection div.sidecar, li.nav4 div.sneak_peek div.promo_collection, li.nav4 div.sneak_peek div.promo_collection div.sidecar, li.nav5 div.sneak_peek div.promo_collection, li.nav5 div.sneak_peek div.promo_collection div.sidecar, li.nav8 div.sneak_peek div.promo_collection, li.nav8 div.sneak_peek div.promo_collection div.sidecar, li.nav10 div.sneak_peek div.promo_collection, li.nav10 div.sneak_peek div.promo_collection div.sidecar {border-color: #ccc;} #tophat .promo_collection li {margin-top: 20px;} #tophat .promo_collection li:first-child, #tophat .promo_collection li.list_link {margin-top: 0;} #tophat .promo_collection img {float:left; margin:0 15px 8px 0;} /* For Testing #navigation_tophat_primary li.nav5 div.sneak_peek {background-color:grey; display:block; left:0; padding: 20px; position:absolute; top:99px; width: 950px; z-index:100;}*/ /* Section-Specific Styles */ div.sneak_peek img {border: 1px solid #dfdfdf; margin-bottom: 5px;} div.sneak_peek div.promo_collection {padding-right: 20px; border-right: 1px solid #8d8d8d; margin-right: 20px;} div.sneak_peek div.promo_collection li {margin-bottom: 0;width:100%;} div.sneak_peek div.promo_collection div.sidecar {border-top: 1px solid #8d8d8d; float: left; padding-top: 20px; width: 280px;} div.sneak_peek div.last_collection {padding-right: 0; border-right: none; margin-right: 0;} div.sneak_peek > div {float:left;} /* ------------------------------------------------------------ +NG Homepage Nav Styles ------------------------------------------------------------ */ /* .home #navigation_tophat_primary ul.nav {padding-bottom: 10px;} .home #headerboard {background-color: transparent; padding: 5px 0;} .home #headerboard .pushdown {float: none; margin: 0 auto;} .home #navigation_tophat_primary li.nav1 .nav a {background-color: transparent;} .home #navigation_tophat_primary li.nav1 h3 a, .home #navigation_mainA ul.js li.nav1 h3 a {background-color: transparent; color: #FFD800; padding-left: 14px;} .home #navigation_tophat_primary li.nav1 ul.nav {background-color: transparent;} .home #navigation_tophat_primary > li.nav1:hover > ul {background-color: #000;} */ /*TEMP FIXES FOR DEPLOYMENT*/ div.sneak_peek a {background-color: transparent!important;} div.sneak_peek a:hover {text-decoration: underline!important;} #navigation_tophat_primary li.nav6 div.sneak_peek a {color: #ffcc00!important;} #navigation_tophat_primary li.nav1 div.sneak_peek a:hover {color: #044E8E!important;} #atffc {display: none;} /*Get rid of residual AddThis garbage*/ /* ------------------------------------------------------------ +Footer - Global ------------------------------------------------------------ */ #footer_global {background-color: #fff; margin: 0 auto; padding: 0 20px 40px; width: 950px;} #footer_global, #copyright {color: #333; font: 16px/1em Arial, sans-serif;} #footer_global .nav_global_tierA {border-bottom: 1px solid #d5d5d5; border-top: 1px solid #d5d5d5; font-size: .938em; padding: 20px 0; text-transform: uppercase;} #footer_global .nav_global_tierA a {color: #646464;} #footer_global .nav_global_tierA a:hover {color: #000; text-decoration: none;} #footer_global .nav_global_tierA li {border: none; padding: 0 0 0 25px;} .intl #footer_global .nav_global_tierA li.nav8 a {visibility:hidden; margin-left:-75px;} #footer_global .nav_global_tierB, #footer_global .nav_global_tierC {font-size: .814em; padding-top: 15px;} #footer_global .nav_global_tierD {border-bottom: 1px solid #d5d5d5; font-size: .814em; padding: 15px 0;} /*.home #footer_global .nav_global_tierA .nav1 a {color: #333; font-weight: bold;}*/ #footer_global ul {margin: 0 auto; text-align: center;} #footer_global ul li {display: inline; float: none; font-size: 0.875em; border-left: 1px dotted #000; padding: 0 11px;} #copyright {background: url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/ng_logo_small.png) no-repeat center top; clear: both; font-size: 0.689em; margin-top: 28px; padding-top: 50px; text-align: center;} #photo_credits {color: #767777; font-size: 0.75em; margin: 10px auto 37px; text-align: center; width: 950px;} #photo_credits h2 {margin-right: 5px;} #photo_credits h2, #photo_credits ol, #photo_credits ol li {display: inline;} #photo_credits ol li {border-left: 1px solid #d5d5d5; padding: 0 7px;} #site_promotions {border-bottom: 1px solid #d5d5d5; margin-top: 30px; padding-bottom: 30px;} #site_tools .nav {clear:both; margin-top: 20px;} #site_tools .nav01 {background: url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/geocore_sprites.png) no-repeat -6px -270px; border-right: 1px solid #d5d5d5; font-weight: bold; padding: 0 10px 0 25px;} #site_tools .nav02 {padding-left: 10px;} /*iPhone and iPad-specific to fix tophat container width bug*/ @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { body {background: transparent url(http://s.ngeo.com/wpf/sites/themes/global/i/presentation/background_with_shadow.png) repeat-x scroll center -1505px;} } /* ------------------------------------------------------------ +UTILITIES from the main utilities.css made specific to tophat/footer because of non-WPF site dependencies - LB 01.11.10 ------------------------------------------------------------ */ #tophat .hidden {font-size:1px; left:-9999px; line-height:0px; margin:0; padding:0; position:absolute; width:9999px;} #tophat .hiddenText {text-indent:-9999px;} /* Thanks to http://www.positioniseverything.net/easyclearing.html */ #tophat .clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;} #tophat .clear {background:transparent;clear:both;font:1px/1px verdana, arial, helvetica, sans-serif;height:0;} /* 01.12.10 18:47 */ /* ------------------------------------------------------------ +TEMPORARY ------------------------------------------------------------ */ li.nav9 div.sneak_peek {display: none;} }