ul#navigation_tophat_primary .current ul, #navigation_tophat_primary li.nav1 ul.nav, .homepage #navigation_tophat_primary li.nav1 ul.nav, .home #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, .animals #navigation_tophat_primary li.nav3 ul.nav, .photography #navigation_tophat_primary li.nav2 ul.nav, .environment #navigation_tophat_primary li.nav4 ul.nav, .travel #navigation_tophat_primary li.nav5 ul.nav, .adventure #navigation_tophat_primary li.nav6 ul.nav, .channel #navigation_tophat_primary li.nav7 ul.nav, .kids #navigation_tophat_primary li.nav8 ul.nav, .video_player #navigation_tophat_primary li.nav9 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: 0; top: 3.2em; /* match top ul list item height */ display: block; visibility: visible;} #navigation_tophat_primary ul li {list-style: none;} .homepage #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, .movies #navigation_tophat_primary li.nav1 .sneak_peek, .mobile #navigation_tophat_primary li.nav1 .sneak_peek, .newsletter #navigation_tophat_primary li.nav1 .sneak_peek, .maps #navigation_tophat_primary li.nav1 .sneak_peek, .blogs #navigation_tophat_primary li.nav1 .sneak_peek, .explorers #navigation_tophat_primary li.nav1 .sneak_peek, .animals #navigation_tophat_primary li.nav3 .sneak_peek, .photography #navigation_tophat_primary li.nav2 .sneak_peek, .environment #navigation_tophat_primary li.nav4 .sneak_peek, .travel #navigation_tophat_primary li.nav5 .sneak_peek, .adventure #navigation_tophat_primary li.nav6 .sneak_peek, .channel #navigation_tophat_primary li.nav7 .sneak_peek, .kids #navigation_tophat_primary li.nav8 .sneak_peek, .video_player #navigation_tophat_primary li.nav9 .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://images.nationalgeographic.com/wpf/sites/themes/global/i/presentation/background_with_shadow.png) repeat-x scroll center bottom; padding: 0; z-index: 10000;} /* ------------------------------------------------------------ +NG Global Nav Styles ------------------------------------------------------------ */ .photography #navigation_tophat_primary li.nav2 ul.nav li.highlighted a, .photography #navigation_tophat_primary li.nav2 ul.nav li.highlighted a:hover {color: #98ccfe; text-decoration:none;} .environment #navigation_tophat_primary li.nav4 ul.nav li.highlighted a, .environment #navigation_tophat_primary li.nav4 ul.nav li.highlighted a:hover {color: #cade6f; text-decoration:none;} .travel #navigation_tophat_primary li.nav5 ul.nav li.highlighted a, .travel #navigation_tophat_primary li.nav5 ul.nav li.highlighted a:hover {color: #000000; text-decoration:none;} .animals #navigation_tophat_primary li.nav3 ul.nav li.highlighted a, .animals #navigation_tophat_primary li.nav3 ul.nav li.highlighted a:hover {color: #000000; text-decoration:none;} .adventure #navigation_tophat_primary li.nav6 ul.nav li.highlighted a, .adventure #navigation_tophat_primary li.nav6 ul.nav li.highlighted a:hover, .movies #navigation_tophat_primary li.nav6 ul.nav li.highlighted a, .movies #navigation_tophat_primary li.nav6 ul.nav li.highlighted a:hover, {color: #ffffff; text-decoration:none;} .video_player #navigation_tophat_primary li.nav9 ul.nav li a { color: #fff;} .video_player #navigation_tophat_primary li.nav9 ul.nav li.highlighted a, .video_player #navigation_tophat_primary li.nav9 ul.nav li.highlighted a:hover {color: #63ccfc; text-decoration:none;} #tophat {background: transparent url(http://images.nationalgeographic.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; min-height:90px;} #headerboard .secondary_ad {float: right; height: 90px; width: 257px;} #headerboard .secondary_ad iframe {position: absolute;} #headerboard .leaderboard {float: left;} #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: 3px;} #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.6em; height: 0; left: 0; margin: 0; padding: 0; position: absolute; width: 100%;} .nirvana div#navigation_tophat_container {height: auto} #navigation_tophat_container {font-family: arial,sans-serif; font-size: 16px; height: auto; line-height: normal; position: relative; z-index: 1; padding-top: 8px; margin-top: -1px;} #navigation_tophat_primary ul.nav {left: 0; padding: 11px 10px 9px 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 .nav8 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;} #navigation_tophat_primary span {display: block;font-size: 14px;margin: 0;padding: 0;} #navigation_tophat_primary span a {color: #ccc; font-weight:bold; padding: 13px 16px; text-transform:uppercase;} #navigation_tophat_primary {border: none; height: 2.4em; list-style: none; float: left; padding-bottom: 2.45em; position: relative; margin: 0; z-index: 10;} /* ------------------------------------------------------------ +vCard ------------------------------------------------------------ */ .vcard div { position: absolute; left: -9999px; } #header_logo a.fn { float: left; background: url(http://images.nationalgeographic.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: 15px 20px 0 14px; position: static;} #account {margin: 25px 0 5px 30px; float: right;} #account #intl_link_subscriptions {color: #fff; font-weight: bold; margin-left: 20px; text-transform: uppercase;} #account #advertisingModule90x15 {float: left; clear: none;} #account .welcome_msg, #account .action {float: left; clear: none; margin: 0;} #account .action {font-size: 1em;} #account .welcome_msg, #account .action a {color: #FFD800; display: block; font-size: .7em;} #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; margin-top: 43px; margin-bottom: 0;} #mission_learn_link a {color: #999;} #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: 4px 0 0 0; float: right; right: 0; z-index: 1; } #header_search_video #header_search_input { float:right; margin-right:22px; -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; width: auto; } #header_search_video .search-context label:before { content: ' '; background:url('../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(../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 10px; float: right; color: #999;} #connect_with_us > li { float: left; font-size: 11px; margin-left: 2px; } .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;} #navigation_mainB_wrap > span, #header_search > span { position: absolute; text-indent: -9999px; } #header_search > span { *display: none; } /* 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_mainB span {display: block;} #navigation_mainB span a:hover {text-decoration: none;} .home #navigation_tophat_primary > li.nav1, .science #navigation_tophat_primary > li.nav1, .home #navigation_tophat_primary > li.nav1 span a, #navigation_tophat_primary li.nav1 ul.nav a, #navigation_tophat_primary li.nav1 ul.nav, #navigation_tophat_primary li.nav1 span a:hover, #navigation_tophat_primary li.nav1 ul.nav li, #navigation_tophat_primary li.nav1:hover, #navigation_mainA ul.js li.nav1 span a:hover, #navigation_mainA ul.js li.nav1 span 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.nav4 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;} .photography #navigation_tophat_primary > li.nav2, .photography #navigation_tophat_primary > li.nav2 span a, #navigation_tophat_primary li.nav2 ul.nav, #navigation_tophat_primary li.nav2 ul.nav a, #navigation_tophat_primary li.nav2 span a:hover, #navigation_tophat_primary li.nav2:hover, #navigation_tophat_primary li.nav2 ul.nav li, #navigation_mainA ul.js li.nav2 span a:hover, #navigation_mainA ul.js li.nav2 span a.hover:hover, #navigation_mainA ul.js li.nav2 a.hover{background-color: #313b47;color: #98ccfe;} #navigation_mainA ul li.nav2.hover ul.nav li a, #navigation_mainA ul.js li.nav2.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav2.hover span a.hover, #navigation_mainA ul li.nav2.hover span a.hover:hover {color:#98ccfe;} #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:transparent;color: #98ccfe;} .animals #navigation_tophat_primary > li.nav3, .animals #navigation_tophat_primary > li.nav3 span a, #navigation_tophat_primary li.nav3 ul.nav, #navigation_tophat_primary li.nav3 ul.nav a, #navigation_tophat_primary li.nav3 span a:hover, #navigation_tophat_primary li.nav3:hover, #navigation_tophat_primary li.nav3 ul.nav li, #navigation_mainA ul.js li.nav3 span a:hover, #navigation_mainA ul.js li.nav3 span a.hover:hover, #navigation_mainA ul.js li.nav3 a.hover {background-color: #ff9414;color: #000;} #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 span a.hover, #navigation_mainA ul li.nav3.hover span a.hover:hover {color:#000;} #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: #000;} .animals #navigation_tophat_primary li.nav3 span a {background-color: #ff9414;color: #000;} .environment #navigation_tophat_primary > li.nav4, .environment #navigation_tophat_primary > li.nav4 span a, #navigation_tophat_primary li.nav4 ul.nav, #navigation_tophat_primary li.nav4 ul.nav a, #navigation_tophat_primary li.nav4 span a:hover, #navigation_tophat_primary li.nav4:hover, #navigation_tophat_primary li.nav4 ul.nav li, #navigation_mainA ul.js li.nav4 span a:hover, #navigation_mainA ul.js li.nav4 span a.hover:hover, #navigation_mainA ul.js li.nav4 a.hover {background-color: #39433a;color: #c6de6e;} #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 span a.hover, #navigation_mainA ul li.nav4.hover span a.hover:hover {color:#c6de6e;} #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: #c6de6e;} #navigation_tophat_primary li.nav5 ul.nav, #navigation_tophat_primary li.nav5 ul.nav a, #navigation_tophat_primary li.nav5 span a:hover, #navigation_tophat_primary li.nav5:hover, #navigation_tophat_primary li.nav5 ul.nav li, #navigation_mainA ul.js li.nav5 span a:hover, #navigation_mainA ul.js li.nav5 span a.hover:hover, #navigation_mainA ul.js li.nav5 a.hover {background-color: #82b4d2;color:#000;} #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 span a.hover, #navigation_mainA ul li.nav5.hover span a.hover:hover {color:#000;} #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: #000;} .travel #navigation_tophat_primary li.nav5 span 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 span a:hover, #navigation_mainA ul.js li.nav5 span a:hover, #navigation_mainA ul.js li.nav5 span a.hover:hover, #navigation_mainA ul.js li.nav5 a.hover {background-color: #82b4d2;color: #fff;} .travel #navigation_tophat_primary > li.nav5 span a {color: #000;}*/ .adventure #navigation_tophat_primary > li.nav6, .adventure #navigation_tophat_primary > li.nav6 span a, #navigation_tophat_primary li.nav6 ul.nav, #navigation_tophat_primary li.nav6 ul.nav a, #navigation_tophat_primary li.nav6 span a:hover, #navigation_tophat_primary li.nav6:hover, #navigation_tophat_primary li.nav6 ul.nav li, #navigation_mainA ul.js li.nav6 span a:hover, #navigation_mainA ul.js li.nav6 span a.hover:hover, #navigation_mainA ul.js li.nav6 a.hover {background-color: #881f00;color: #fc0;} #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 span a.hover, #navigation_mainA ul li.nav6.hover span a.hover:hover {color:#fc0;} #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: #fc0;} .channel #navigation_tophat_primary > li.nav7, .channel #navigation_tophat_primary > li.nav7 span a, #navigation_tophat_primary li.nav7 ul.nav, #navigation_tophat_primary li.nav7 ul.nav a, #navigation_tophat_primary li.nav7 span a:hover, #navigation_tophat_primary li.nav7:hover, #navigation_tophat_primary li.nav7 ul.nav li, #navigation_mainA ul.js li.nav7 span a:hover, #navigation_mainA ul.js li.nav7 span a.hover:hover {background-color: #06395F;color: #fff;} #navigation_mainA ul li.nav7.hover a, #navigation_mainA ul.js li.nav7.hover a {color: #fff;} #navigation_mainA ul li.nav7.hover span a.hover:hover, #navigation_mainA ul li.nav7.hover span a.hover:hover, #navigation_mainA ul.js li.nav7.hover a:hover, #navigation_mainA ul.js li.nav7.hover a.hover {background-color: #06395F;color: #fff;} .kids #navigation_tophat_primary > li.nav8, .kids #navigation_tophat_primary > li.nav8 span a, #navigation_tophat_primary li.nav8 ul.nav, #navigation_tophat_primary li.nav8 ul.nav a, #navigation_tophat_primary li.nav8 span a:hover, #navigation_tophat_primary li.nav8:hover, #navigation_tophat_primary li.nav8 ul.nav li, #navigation_mainA ul.js li.nav8 span a:hover, #navigation_mainA ul.js li.nav8 span a.hover:hover, #navigation_mainA ul.js li.nav8 a.hover {background-color: #FFD25B;color: #000;} #navigation_mainA ul li.nav8.hover ul.nav li a, #navigation_mainA ul.js li.nav8.hover ul.nav li a {color: #000;} #navigation_mainA ul li.nav8.hover span a.hover, #navigation_mainA ul li.nav8.hover span a.hover:hover {color:#000;} #navigation_mainA ul li.nav8.hover ul.nav li a.hover:hover, #navigation_mainA ul.js li.nav8.hover ul.nav li a:hover, #navigation_mainA ul.js li.nav8.hover ul.nav li a.hover {background-color:transparent;color: #000;} #navigation_tophat_primary li.nav2 ul.nav a, #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.nav7 ul.nav a { color:#fff;} /*.atoz #navigation_tophat_primary > li.nav9, .atoz #navigation_tophat_primary > li.nav9 span a, #navigation_tophat_primary li.nav9 ul.nav, #navigation_tophat_primary li.nav9 ul.nav a, #navigation_tophat_primary li.nav9 span a:hover, #navigation_mainA ul.js li.nav9 span a:hover, #navigation_mainA ul.js li.nav9 span a.hover:hover{background-color: #383838;color: #ccc;} #navigation_mainA ul li.nav9.hover ul.nav li a, #navigation_mainA ul.js li.nav9.hover ul.nav li a {color: #fff;} #navigation_mainA ul li.nav9.hover span a.hover, #navigation_mainA ul li.nav9.hover span 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:transparent;color: #000;} */ .shop #navigation_tophat_primary > li.nav10, .shop #navigation_tophat_primary > li.nav10 span a, #navigation_tophat_primary li.nav10 ul.nav, #navigation_tophat_primary li.nav10 ul.nav a, #navigation_tophat_primary li.nav10 span a:hover, #navigation_tophat_primary li.nav10:hover, #navigation_tophat_primary li.nav10 ul.nav li, #navigation_mainA ul.js li.nav10 span a:hover, #navigation_mainA ul.js li.nav10 span a.hover:hover, #navigation_mainA ul.js li.nav10 a.hover {background-color: #393939;color: #fff;} #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 span a.hover, #navigation_mainA ul li.nav10.hover span 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;} .video_player #navigation_tophat_primary > li.nav9, .video_player #navigation_tophat_primary > li.nav9 span a, #navigation_tophat_primary li.nav9 ul.nav, #navigation_tophat_primary li.nav9 ul.nav a, #navigation_tophat_primary li.nav9 span a:hover, #navigation_tophat_primary li.nav9:hover, #navigation_tophat_primary li.nav9 ul.nav li, #navigation_mainA ul.js li.nav9 span a:hover, #navigation_mainA ul.js li.nav9 span a.hover:hover, #navigation_mainA ul.js li.nav9 a.hover {background-color: #054f90;color: #63ccfc;} #navigation_mainA ul li.nav9.hover ul.nav li a, #navigation_mainA ul.js li.nav9.hover ul.nav li a {color: #ccc;} #navigation_mainA ul li.nav9.hover span a.hover, #navigation_mainA ul li.nav9.hover span a.hover:hover {color:#fff;} #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:transparent;color: #fff;} /* International Page exceptions */ .intl #navigation_tophat_primary > li.nav10, .intl #navigation_tophat_primary > li.nav10 span 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 Photography Hover State */ #navigation_tophat_primary li.nav2 ul.nav li a:hover {color:#99ccff;} /* Secondary Nav Animals Hover State */ #navigation_tophat_primary li.nav3 ul.nav li a:hover {color:#000;} /* Secondary Nav Environment Hover State */ #navigation_tophat_primary li.nav4 ul.nav li a:hover {color:#c6de6e;} /* Secondary Nav Travel Hover State */ #navigation_tophat_primary li.nav5 ul.nav li a:hover {color:#000;} /* Secondary Nav Adventure Hover State */ #navigation_tophat_primary li.nav6 ul.nav li a:hover {color:#fc0;} /* Secondary Nav NatGeoTV Hover State */ #navigation_tophat_primary li.nav7 ul.nav li a:hover {color:#fff;} /* Secondary Nav Kids Hover State */ #navigation_tophat_primary li.nav8 ul.nav li a:hover {color:#fff;} /* Secondary Nav Shop 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 span a:hover, #navigation_mainA ul.js li.nav2 span a:hover, #navigation_mainA ul.js li.nav3 span a:hover, #navigation_mainA ul.js li.nav4 span a:hover, #navigation_mainA ul.js li.nav5 span a:hover, #navigation_mainA ul.js li.nav6 span a:hover, #navigation_mainA ul.js li.nav7 span a:hover, #navigation_mainA ul.js li.nav8 span a:hover, #navigation_mainA ul.js li.nav9 span 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: 77px; 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: #F80;} 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: #686767;} li.nav8 div.sneak_peek {background-color: #FFF;} li.nav8 div.sneak_peek a {color: #04B4B1;} li.nav9 div.sneak_peek {background-color: #666;} 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;} /* Nav flyout for Television *** This should be temporary *** */ .nav_panel, .nav_panel * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #navigation_tophat_primary .nav_panel { background-color: #023154; background-color: rgba(2, 49, 84, 1); -webkit-box-shadow: 0 1px 1em #000; -moz-box-shadow: 0 1px 1em #000; box-shadow: 0 1px 1em #000; color: #FFF; display: none; left: 0; line-height: 1.6; opacity: 0; padding: 10px; position: absolute; right: 0; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; top: 4.8em; white-space: normal; width: 990px; z-index: -1; } #navigation_tophat_primary li:hover .nav_panel { display: block; opacity: 1; z-index: 98; } #navigation_tophat_primary .nav_panel h2 { color: #FFF; margin-bottom: 0; } #navigation_tophat_primary .nav_panel h1 { font-size: 20px; font-weight: normal; color: #FFF; margin: 0 0 .67em 0; } #navigation_tophat_primary .nav_panel h1 object, #navigation_tophat_primary .nav_panel h1 img { display: block; height: 40px; } #navigation_tophat_primary .nav_panel > nav { background-color: #012b4b; background-color: rgba(0, 0, 0, .1); } #navigation_tophat_primary .nav_panel ul { border-top: 1px solid #111; border-bottom: 1px solid #111; margin-bottom: 0.5em; padding: 0.75em 0; font-size: .85em; } #navigation_tophat_primary .nav_panel li { float: none; } #navigation_tophat_primary .nav_panel a { color: #FFF; } #navigation_tophat_primary .nav_panel > .spotlight { float: left; margin-left: 0; padding: 15px; width: 33%; } #navigation_tophat_primary .nav_panel > .spotlight img{ max-width: 100%; } #navigation_tophat_primary .nav_panel > nav { float: left; margin-left: 1%; padding: 15px; width: 32.1%; } .spotlight figure { margin: 1em 0; } .caption_overlay { margin-bottom: 0; position: relative; } .caption_overlay > figcaption { background-color: #333; background-color: hsla(0, 0%, 0%, 0.40); bottom: 0; padding: 0.5em; position: absolute; left: 0; width: 100%; font-size: .85em; } .caption_overlay > figcaption h4 { color: #CECECE; } .caption_overlay > figcaption p, .caption_overlay > figcaption li { color: #FFF; font-weight: 800; } /* ------------------------------------------------------------ +NG Homepage Nav Styles ------------------------------------------------------------ */ .homepage #navigation_tophat_primary ul.nav {padding-bottom: 10px;} .homepage #headerboard {background-color: transparent; padding: 5px 0;} .homepage #headerboard .pushdown {float: none; margin: 0 auto;} .homepage #navigation_tophat_primary li.nav1 .nav a {background-color: transparent;} .homepage #navigation_tophat_primary li.nav1 span a, .homepage #navigation_mainA ul.js li.nav1 span a {background-color: transparent;color: #FFD800; padding-left: 14px;} .homepage #navigation_tophat_primary li.nav1 ul.nav {background-color: transparent;} .homepage #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;} .homepage #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 10px;} #copyright {background: url(http://images.nationalgeographic.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://images.nationalgeographic.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://images.nationalgeographic.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;}