/* ============================================================ Global Screen CSS * Created by Jon Long on 2009-01-12. * Copyright (c) 2010 National Geographic. All rights reserved. Notes: ================ * 2009-01-12 - Began Styles In This CSS: ================ Structural & Visual Layout ----------------- +General +Header +Navigation +Content +Footer Web Elements ----------------- +Advertisements +Forms Conditional ----------------- +Layout Specific Everything Else ----------------- +Miscellaneaous +Testing /* ------------------------------------------------------------ +General ------------------------------------------------------------ */ a {color: #044E8E; text-decoration: none;} a:hover {text-decoration: underline;} a:active {outline: none;} a img {display: block;} button:hover {cursor: pointer;} i, em {font-style: italic; font-weight: inherit!important;} b, strong {font-weight: bold;} hr {border-color: #d5d5d5; border-style: solid; border-width: 1px 0 0; clear: both; margin: 0; height: 0;} h3, .story .dl h3 {display: block; color: #333333; font-size: 1.438em; font-weight: bold; margin-bottom: 15px;} h3.title {background: url(../i/presentation/header_icon.gif) no-repeat 0 3px; line-height: 1.3; padding-left: 17px; padding-top: 0!important; clear: both;} #content_mainA p, #content_mainB p {color: #333; line-height: 1.4;} p.headline {clear: both;} .secondary .headline, p.action {clear: both; margin-top: 15px;} .secondary .headline a {color: #333; font-weight: bold;} .topics .promo_collection .action a {color: #333; font-weight: bold; letter-spacing: 1px; margin-left: 16px;} #container, #photo_credits {color: #333; font: 0.75em/1.313em Arial, sans-serif;} #container img {border: 1px solid #ccc;} #container .MSVE_Map img {border: 0;} .promo_collection h4, .homepage .dl h4, .facebook h4, .mobile_promo h4, .pull_quote h4 {font-size: 1.188em; font-weight: bold; line-height: 1.4; margin-bottom: 3px;} h4 a:first-line {line-height: normal;} .promo_collection h4 a, .facebook h4 a, .mobile_promo h4 a {color: #333;} .credit, .publication_time, .story002 .publication_time {color: #ababab; font-size: .875em;} .credit {color: #999!important; font-style: italic; margin-bottom: 5px;} .story h3 {border: none; clear: both; margin: -5px 0 5px; padding: 0;} .story h3 a {color: #000; font-size: 1.25em; line-height: 1.125em;} .story h3 a:hover {color: #044E8E; text-decoration: none;} .story002 h3 a {font-size: 1.438em; line-height: 1.125em;} .story002 p {font-size: 1.064em; line-height: 1.375em; margin-top: 15px;} .multimedia_links li {margin-top: 15px;} .video_link a, .gallery_link a {background: url(../i/presentation/geocore_sprites.png) no-repeat -9px -26px; padding-left: 23px;} .gallery_link a {background-position: -8px 0;} #body_wrap {margin-top: -6px; position: relative; z-index: 0;} #top_stories h4 {font-size: 1em;} .archive_link {background-color: #EDEEEF; font-size: 1.25em; font-weight: bold; padding: 13px;} #container .bullets li {color: #000; list-style: disc; display: list-item; margin: 10px 0 0 15px;} #container .promo_collection li {color: #24649C;} #container .numbers li {list-style: decimal; display: list-item; margin: 0 0 10px 15px;} #container .list_hybrid .first {list-style: none; margin-left: 0;} #container .bullets li.last {margin-bottom: 0;} .timestamp {color: #999; display: inline; font-size: .875em; margin-left: 10px;} .small li h4, .small div.promo h4, #content_mainB .primary .small p.headline, #content_top .small p.headline {font-size: 1em;} #content_mainB .primary .small p.headline {clear: none; font-weight: bold;} #content_mainB .primary .small p.headline a {color: #333;} .small li p, .small div.promo p {font-size: .875em; line-height: 1.4;} h3.small {font-size: 1em; margin-bottom: 10px; padding: 0;} #content h3 + p {margin-bottom: 10px;} .search {margin-top: 20px;} p.wallpaper_link {background: url(../i/presentation/geocore_sprites.png) no-repeat -4px -454px; padding: 2px 25px;} .promo_collection .rss {float: right; margin-top: 5px;} .promo_collection .rss + h3 {clear: none;} /* ------------------------------------------------------------ +Header ------------------------------------------------------------ */ #header-logo {background: url(../i/presentation/logo_header.gif) no-repeat top left; width: 436px; height: 58px; float: left; margin: 0 20px 17px 0;} #page_head {border-bottom: 1px solid #d5d5d5; position: relative; padding: 19px 0 10px;} #page_head h1 {font-size: 3.5em; line-height: normal; clear: left; margin-top: 1px;} #advertisingModule210x50 {max-height: 50px;} #page_head img {border: none; float: right;} #page_head .promo img {float: left;} #page_head h2 {clear: left; float: left; font-size: 1.75em; margin-bottom: 8px; padding-top: 15px;} .topics #page_head .topics_head {font-size: 4.5em;} .topics .entry_counter {color: #909090; font-size: 1.1em;} .topics h1+.entry_counter {margin-top: 34px;} .article #page_head h1, .small_article #page_head h1 {font-size: 2.125em; font-weight: bold;} .article #page_head h1 {margin-bottom: 10px;} .small_article #page_head h1 {margin-top: 10px;} .article #page_head {border: none; padding-bottom: 0;} .article div.general {border-top: 1px solid #d5d5d5;} .level_3 #page_head .subtitle {color: #666; font: normal 1.375em/1.5 Georgia, "Times New Roman", serif;} .level_3 #page_head .subtitle {clear: left; float: left; margin: 0 0 10px; padding: 0; width: 600px;} #content_mainA p.subtitle {color: #666; font: normal 1em/1.7 Arial, sans-serif;} .small_article #page_head {padding: 0;} .a_z #page_head {padding-top: 0px;} #page_head h2.category_link a {color: #333;} .gallery #page_head h1 {font-size: 2.75em; margin-top: 2px;} #page_head .promo {border: 0; float: right; margin-top: -9px; padding: 0; position: absolute; right: 320px; width: 210px;} #page_head .promo .graphic_promo {float: left; margin-right: 10px;} #page_head .promo p {clear: none; margin: 0;} #page_head .promo h3 {font-weight: normal; margin: 10px 0 0;} #page_head .promo h3, #page_head .promo p {font-size: .875em; line-height: normal;} /* ------------------------------------------------------------ +Navigation ------------------------------------------------------------ */ .nav li {float: left;} .general .nav li {padding-left: 20px; letter-spacing: .05em; font-size: 1.025em;} .general .nav li:first-child {padding-left: 5px;} .general .nav li.selected a {color: #000;} .general .nav {border-bottom: 1px solid #d5d5d5; padding: 20px 0;} #nav_primary ul {margin: 20px 20px 20px 26px;} #nav_primary ul li {font-size: 1.064em; padding-left: 14px;} #nav_by_category div, #photos_by_category div {float: left; width: 237px;} #nav_by_category div ul, #photos_by_category ul {margin: 0 15px 0 12px;} #photos_by_category ul {margin: 0 20px 0 0;} #nav_by_category div ul li, #photos_by_category ul li {clear: both; float: none; margin: 5px 0 0 4px; line-height: 17px;} #photos_by_category ul li {margin-left: 13px;} #photos_by_category .promo001 {list-style: none; margin: 0 0 30px;} #photos_by_category img {float: left; margin-right: 10px;} #photos_by_category h4 {font-size: 1.125em; font-weight: bold; margin-bottom: 10px;} #nav_by_category div h3, #photos_by_category h3 {margin: 45px 0 13px;} #photo_credits ol > li:first-child, .nav > li:first-child {border-left: none; padding-left: 0;} /* CSS Fix to stop main tab backgrounds from disappearing due to mouse being in subnav - Matt Heiner */ /* Photography */ #navigation_tophat_primary + li.nav2:hover, #navigation_tophat_primary li.nav2:hover h3 a {background-color: #313B47; color: #98CCFE;} /* Animals */ #navigation_tophat_primary + li.nav3:hover, #navigation_tophat_primary li.nav3:hover h3 a {background-color: #FF9414; color: #000 !important;} /* Environment */ #navigation_tophat_primary + li.nav4:hover, #navigation_tophat_primary li.nav4:hover h3 a {background-color: #39433A; color: #C6DE6E;} /* Travel */ #navigation_tophat_primary + li.nav5:hover, #navigation_tophat_primary li.nav5:hover h3 a {background-color: #82B4D2; color: #000;} /* Adventure */ #navigation_tophat_primary + li.nav6:hover, #navigation_tophat_primary li.nav6:hover h3 a {background-color: #881F00; color: #FC0;} /* NatGeoTV */ #navigation_tophat_primary + li.nav7:hover, #navigation_tophat_primary li.nav7:hover h3 a {background-color: #393939; color: #fff;} /* Kids */ #navigation_tophat_primary + li.nav8:hover, #navigation_tophat_primary li.nav8:hover h3 a {background-color: #0072BB; color: #FC0;} /* Video */ #navigation_tophat_primary + li.nav9:hover, #navigation_tophat_primary li.nav9:hover h3 a {background-color: #82B4D2; color: #fff;} /* Shop */ #navigation_tophat_primary + li.nav10:hover, #navigation_tophat_primary li.nav10:hover h3 a {background-color: #393939; color: #fff;} /* ------------------------------------------------------------ +Content ------------------------------------------------------------ */ div.popularity_type {border-bottom: 1px solid #d5d5d5; margin: 20px 0 0 17px; padding-bottom: 20px;} .popularity_type h4 {margin: 20px 0 20px;} .popularity_type ol {list-style: decimal; margin-left: 20px;} .popularity_type ol li {padding-top: 15px; display: list-item;} .tabbed_box img {float: right;} #nav_photo_video h5 {font-weight: bold;} #photos_in_news img {float: none; margin: 0;} #photos_in_news_thumbs .promo2, #photos_in_news_thumbs .promo3 {float: left; width: 100px; margin-bottom: 0;} #photos_in_news_thumbs .promo2 h4, #photos_in_news_thumbs .promo3 h4, .carousel h4 {font-size: .938em; font-weight: normal;} #photos_in_news_thumbs .promo2 {margin-right: 5px;} #photos_in_news ul li {display: list-item; list-style: disc; margin-left: 13px;} #photos_in_news .promo1 {border-bottom: 1px solid #d5d5d5; display: block; margin-left: 0; padding-bottom: 15px;} #photos_in_news_thumbs li {list-style: none; border: none; margin-left: 0;} #news_feeds .wrap {background-color: #EDEEEF; padding: 11px 13px 0;} #news_feeds .wrap li {float: left; height: 25px;} #news_feeds .wrap .rss {background: url(../i/presentation/feed_sprites.gif) no-repeat 0 0; margin-right: 10px; width: 50px;} #news_feeds .wrap .xml {background: url(../i/presentation/feed_sprites.gif) no-repeat -51px 0; width: 38px;} #news_feeds .wrap .help {margin: 15px 0;} #news_feeds .wrap ul {float: left; margin: 10px 0; width: 115px;} #content_mainA #news_feeds .help {clear: both;} #news_blogs h4 {font-size: 1.064em;} #more_news ul li, #news_blogs ul li {margin-bottom: 20px;} #more_news li:last-child {margin-bottom: 0px;} #share_buttons p a span {float: left; margin-right: 10px;} #share_buttons p a {clear: both; display: block; margin-bottom: 5px; padding: 5px;} #share_buttons p a:hover {background-color: #eee; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #share_buttons .addthis_button_expanded span {display: none;} .dl .small img {float: none; height: 123px; margin: 0; width: 164px;} .dl .small .caption {font-weight: bold; font-size: 1.188em;} .dl .small li {float: left; margin-right: 16px; width: 164px;} #article_topics li {display: list-item; list-style: disc; margin: 0 0 5px 20px;} .tag_cloud li {display: inline; margin-right: 10px; line-height: .9;} .tag_cloud li span {display: none;} .tag_cloud li a:hover {text-decoration: none;} .tag_cloud .ultra_popular {font-size: 2.5em;} .tag_cloud .somewhat_popular {font-size: 1.75em;} .tag_cloud .not_popular {font-size: 1.25em;} .tag_cloud .not_very_popular {font-size: 1em;} #gallery_text .author {font-style: italic;} #gallery .article_text ul {list-style: disc; margin-left: 20px;} #gallery li {margin-bottom: 20px; clear: both; list-style: none;} #gallery li img {float: left; margin: 0 15px 15px 0;} #gallery li .photo_text {margin-bottom: 30px;} #gallery_text .photo_text .next_image {float: right; width: 75px;} #gallery_text .next_link {float: right; clear: right; font-weight: bold; margin-top: 5px;} #gallery_text .publication_time {font-size: 0.9em;} .gallery .credit {float: none; font-size: 1em; font-style: italic; margin: 15px 0;} #gallery .credit {margin: 0 0 15px;} #gallery_text h2 {font-size: 2em; line-height: normal;} #gallery h2 {font-size: 1.25em; font-weight: bold;} /* ------------------------------------------------------------ +Footer - Site ------------------------------------------------------------ */ #site_promotions a {color: #000; display: block;} #site_promotions a:hover {text-decoration: none;} #site_promotions h3, #site_promotions p {font-size: .875em; margin: 0 10px 0 0;} #site_promotions ul li, .homepage #footer_breadcrumb div p {float: left; width: 237px; margin: 0;} #site_promotions .promo_collection img {margin-right: 10px;} #more_from_nationalgeographic ul {background-color: #edeeef; padding: 20px 30px 20px 50px;} #footer_breadcrumb {background-color: #4B4B4B; padding: 8px;} #footer_breadcrumb li {margin-left: 10px;} #footer_breadcrumb a, #footer_breadcrumb li.selected {color: #fff;} #footer_breadcrumb a {font-weight: bold;} #footer_breadcrumb li:first-child {margin: 0;} #footer_breadcrumb ul, #footer_breadcrumb li {float: left; letter-spacing: .05em;} #footer_breadcrumb p {float: right; letter-spacing: .05em; padding-top: 4px;} #footer_breadcrumb p.nav1, #footer_breadcrumb ul {background: url(../i/presentation/geocore_sprites.png) no-repeat scroll -8px -507px; padding: 4px 20px 2px;} #footer_site {padding: 20px 0;} /* ------------------------------------------------------------ +Forms ------------------------------------------------------------ */ #newsletter form {background-color: #edeeef; padding: 13px;} #newsletter_email {width: 200px;} form label {display: block;} form .field {float: left;} form .instruction {margin-bottom: 15px;} form .error_state h4 {color: red; font-weight: bold; margin-bottom: 10px;} form .error_state ul {list-style: disc; margin: 0 0 15px 15px;} form .nav {clear: both; padding-top: 10px;} form .nav li {border-left: 1px solid #d5d5d5; padding: 0 10px;} #share_email {border-bottom: 1px solid #d5d5d5; padding: 40px 0;} #share_email form {width: 500px;} #share_email form .field {margin-bottom: 10px; width: 190px;} #share_email form .field label span {display: block;} #share_email form .button {clear: both;} .rating input {float: left; margin-right: 5px;} .rating button {margin-top: 8px;} .rating fieldset {margin-bottom: 10px;} .rating p {font-weight: bold; margin-top: 10px;} .rating p span {font-weight: normal;} .rating .user_rating {font-style: italic; font-weight: normal;} .rating .user_rating span {font-weight: bold;} #form_errors {color: red; font-style: italic;} #account_tos form .field, #sso_account form p {float: none; font-size: 1.188em; font-weight: bold; margin-bottom: 20px;} #account_tos form .field label, #sso_account form p label {display: inline; margin-right: 10px;} #account_tos form .errorlist {color: red; font-size: 0.85em; font-style: italic; margin-bottom: 4px;} #sso_account form .errorlist {color: red; font-size: 12px; font-style: italic; margin-bottom: 4px;} #account_tos form .submit, #sso_account form .submit {background: #fff url(../../common/i/presentation/button_gradient.gif) repeat-x bottom center; border: 1px solid #d5d5d5; color: #044E8E; display: inline; height: 30px; width: 129px; float: left; margin-right: 10px;} #account_tos form .btn_loginout, #sso_account .btn_loginout {background: #fff url(../../common/i/presentation/button_gradient.gif) repeat-x top center; border: 1px solid #d5d5d5; border-top: none; color: #044E8E; display: inline; height: 21px; width: 129px; float: left; padding-top: 8px; text-align: center; font-size: 0.95em;} #account_tos form #id_display_name {height: 20px; width: 200px; font-size: 0.9em; padding-top: 5px;} /* REQUIRED BUTTON STYLES: */ button {position: relative; border: 0; padding: 0; cursor: pointer; overflow: visible; /* removes extra side padding in IE */} button::-moz-focus-inner {border: none; /* overrides extra padding in Firefox */} button span {position: relative; display: block; white-space: nowrap;} @media screen and (-webkit-min-device-pixel-ratio: 0) {/* Safari and Google Chrome only - fix margins */ button span {margin-top: -1px;}} /* OPTIONAL BUTTON STYLES for applying custom look and feel: */ button.submitBtn {background: transparent url(../i/presentation/submit-buttons.gif) no-repeat scroll right -90px; font-size: 1em; margin-left: -5px; padding: 0 8px 0 0; text-align: center; vertical-align: top;} button.submitBtn span {background: transparent url(../i/presentation/submit-buttons.gif) no-repeat scroll left top; color: #044E8E; height: 18px; padding: 4px 0 0 11px;} button.submitBtn:hover {background-position: right -135px;} button.submitBtn:hover span {background-position: 0 -45px; color: #fff;} .field input {border: 1px solid #ccc; padding: 3px;} .field input:hover {border: 1px solid #ddd;} .field input: focus {border: 1px solid #aaa;} label.error {color: red; display: block !important; font-style: italic; margin-top: 5px;} /* ------------------------------------------------------------ +Advertisements ------------------------------------------------------------ */ .advertisement h3 {border: none; color: #ababab; font-size: .814em; font-weight: normal; margin: 0 0 5px; padding: 0; text-transform: uppercase;} #container .advertisement img {border: none;} #page_head .advertisement, #header_site .advertisement {float: right; max-height: 50px; margin: 0 0 0 110px; width: 210px;} /* ------------------------------------------------------------ +Layout Specific ------------------------------------------------------------ */ body, #container {background-color: #fff;} #container {margin: 0 auto; padding: 0 20px; width: 950px;} .promo_collection img, .facebook img, .mobile_promo img, .movie_tickets img {float: left; margin: 3px 15px 8px 0;} .promo_collection li {margin-top: 20px;} .promo_collection li:first-child {margin-top: 0;} .dividers li {border-top: 1px solid #d5d5d5; padding-top: 20px;} .dividers li:first-child {border: 0; padding: 0;} #content > div {border-bottom: 1px solid #d5d5d5; margin-top: 20px; padding-bottom: 20px;} #content > div:first-child {margin: 0;} #content div.general {border-bottom: 0; padding: 0; margin-top: 0;} #content #content_page_specific {margin-top: 0;} #more_from_nationalgeographic {clear: both;} #content-top object {margin: 0 auto;} /* Following non-js carousel styles related to a floating grid layout solution from Mozilla Webdev Blog: http: //blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ .thumbnail_grid li, .thumbnail_grid > div, .carousel li {display: inline-block; margin: 0 24px 10px 0; min-height: 94px; vertical-align: top; width: 100px;} .thumbnail_grid li {margin-right: 22px;} .thumbnail_grid .wide li {width: 160px; margin-left: 0; margin-right: 40px;} .thumbnail_grid .wide li:first-child {margin-left: 0;} .thumbnail_grid .wide li img {margin-right: 0;} .fatty-carousel li {min-height: 138px; width: 160px;} .carousel ul li img {float: none;} .carousel ul.magazine li a.hiddenText {background: transparent url(../i/presentation/magazine_carousel_subscribe.gif) no-repeat scroll 0 0; display: block; height: 22px; margin: 10px auto 0; width: 136px;} .carousel ul.magazine li a.hiddenText:hover, .carousel ul.magazine li a.hiddenText:active {background-position: 0 -44px;} #content_mainA > div:first-child {border: none; padding-top: 0;} #content_mainA {clear: both; float: left; margin-top: 20px; width: 610px;} .subsection > div {float: left; margin-right: 20px; width: 393px;} #content_mainA .subsection > .full_width {width: 100%;} .subsection .secondary {border-left: 1px solid #d5d5d5; width: 176px; margin: 0; padding-left: 20px;} #content_mainB .primary, #content_mainB .secondary {float: left; width: 134px} #content_mainB .primary {margin-right: 15px;} #content_mainB .secondary {border-left: 1px solid #d5d5d5; padding-left: 15px;} #content_mainA > div:first-child {border: none; padding-top: 0;} #promo_spot_slug002 {border-left: 1px solid #D5D5D5; float: right; padding-left: 16px; width: 212px;} .hub_home #content_top {padding: 20px 0;} #content_top {padding: 0 0 20px;} .level_3 #content_top {padding: 20px 0 0 0; border-bottom: 0; margin-top: 0;} .aside {border-left: 1px solid #D5D5D5; float: right; margin-top: 20px; padding-left: 20px; width: 300px;} .wallpapers .aside {border: 1px solid #d5d5d5; float: left; padding: 20px; width: 165px;} .wallpapers #content_mainA {width: 720px; float: right;} .subsection, .aside > div, .subsection > div > div {border-top: 1px solid #D5D5D5; clear: left; margin-top: 20px; padding-top: 20px;} #content_mainB .subsection > div > div {border: none; margin: 0; padding: 0;} .subsection:first-child, .aside > div:first-child, .subsection > div > div:first-child {border: none; margin: 0; padding: 0;} .story, #video_player {float: left;} .story001 {padding-right: 20px; width: 361px;} #story002_wrap {border-left: 1px solid #d5d5d5; float: left; padding-left: 20px; width: 207px;} .hub_home #story002_wrap {border-right: 1px solid #d5d5d5; padding-right: 20px;} #story002_wrap #share {clear: both; padding-top: 20px;} #video_player, #top_stories {float: left; margin-left: 20px; width: 298px;} .level_3 .subsection001 {float: right; width: 438px;} .level_3 .article_thumb {float: left; margin: 0 20px 20px 0; width: 200px;} .level_3 .article_thumb .caption {color: #ABABAB; margin: 5px 0 0 0;} .level_3 #content_mainA .aside {border-right: 1px solid #D5D5D5; border-left: none; float: left; margin-top: 0; padding: 0 20px 0 0; width: 130px;} .level_3 #content_mainB {border-left: 1px solid #D5D5D5;} #content_mainB #top_stories {border-left: none; margin-left: 0; padding: 0;} .level_3 #content_page_specific .aside {border-top: none;} .level_3 .article_body {border: none; float: right; margin: 0; padding-top: 0; width: 437px;} .subsection .primary_photo {border: none; float: none; width: 100%;} .article .caption, .primary_photo .caption {border: none; clear: both; font-weight: bold; margin-top: 10px; padding-top: 0;} .article_text p, .primary_photo .caption p, .article_body .author, .article_body .publication {color: #333!important;} .article_body .author a {font-weight: bold;} .subsection .article_body .primary_photo, .article_body .publication_time {margin-bottom: 20px;} .photo_text {border-bottom: 1px solid #d5d5d5; margin-bottom: 20px; padding-bottom: 20px;} .level_3 .article_text {border: none; padding: 0;} .article_text p, #gallery_text p {line-height: 1.6!important;} .caption p, .article_text p, #gallery_text p {margin-bottom: 10px;} .article_text h4 {font-size: 1.125em; font-weight: bold; margin-bottom: 10px;} .article .subsection:first-child {margin: 0;} .article .subsection:first-child + div {border: none; padding-top: 0;} #print_link a {background: url(../i/presentation/geocore_sprites.png) no-repeat -8px -245px; padding-left: 22px;} /*.interactive h1 {font-size: 2em; font-weight: bold; margin-bottom: 15px;}*/ .gallery .timestamp {font-size: 1em; margin: 0;} /*TEMPORARY until a better JS-related fix is developed*/ .gallery #content_mainA .aside, .pod #content_mainA .aside {border: none; margin-right: 0; padding-right: 0;} .gallery #content_mainA .article_body, .pod #content_mainA .article_body {border-left: 1px solid #d5d5d5; margin-left: 20px; padding-left: 20px;} .small_article #content_mainA .article_body .aside {border-right: 1px solid #d5d5d5; border-left: none; border-bottom: none; float: left; margin: 0 20px 20px 0; padding: 0 20px 0 0; width: 180px;} .small_article #content_mainA .article_body .extended {border-right: none; border-left: 1px solid #d5d5d5; float: right; margin: 0 0 20px 20px; padding: 0 0 0 20px;} .small_article .article_body {width: auto;} .small_article .article_text {border: none; clear: none; margin: 0px; padding: 0px;} .thumb .credit {float: none;} .a_z .subsection {margin: 0;} .a_z .subsection > div > div {border: none; margin: 0; padding: 0;} .a_z .subsection h4 {margin-bottom: 10px;} .a_z .subsection h4 a {color: #333;} .a_z .subsection ul {margin-bottom: 10px;} .special_ad_section {background-color: #f2f3f3; padding: 15px 20px 20px;} .special_ad_section h3 {margin-bottom: 7px;} .special_ad_section h3 + h4 {font-size: 1.5em; margin-bottom: 15px;} .special_ad_section a {text-decoration: none; color: inherit;} .action_series {margin-top: 20px;} .action_series li {border-left: 2px solid #D5D5D5; float: left; margin: 0 0 0 10px; padding-left: 10px;} .action_series li:first-child {border: none; margin: 0; padding: 0;} .list_hybrid li:first-child .timestamp {margin: 0;} .promo_collection .rss:first-child a {background: url(../i/presentation/feed_sprites.gif) no-repeat 0 -26px; display: block; float: right; height: 15px; width: 43px;} .vevent h4 {display: inline;} .vevent h4 + p.timestamp {display: inline; font-weight: bold; font-size: 1em;} .vevent p.description {margin-top: 5px;} .vcalendar .table_wrap {border: 1px solid #f4f4f4; clear: both; margin: 20px 0 5px; width: 100%; overflow-y: auto; overflow-x: hidden; position: relative; height: 129px;} .vcalendar table tr {height: auto;} .vcalendar table tr td {padding: 5px 0 5px 8px;} .vcalendar table {width: 100%;} .vcalendar td {width: 91px;} .vcalendar td.summary {width: 209px;} .vcalendar h3.title b {color: #999999; font-size: 12px; padding-left: 5px;} table.striped tr.striped {background-color: #F4F4F4;} .topics .topics-search {background-color: #f2f2f2;} .topics .topics-search h4 {margin: 0; padding: 15px 20px;} .topics .topics-search h4 a {color: #333333;} .topics .promo_collection.promo_100 .promo {clear: both; margin-bottom: 20px; overflow: auto} .topics .promo_collection.promo_100 .promo p {float: left;} .topics .promo_collection.promo_100 .action a {letter-spacing: 0; margin-left: 0;} /* TOPICS PAGE */ .special_ad_section {background-color: #f2f3f3; padding: 15px 20px 20px;} .special_ad_section h3 {margin-bottom: 7px;} .special_ad_section h3 + h4 {font-size: 1.5em; margin-bottom: 15px;} .video {position: relative;} .video .overlay {height: 24px; width: 24px; position: absolute;} .video .overlay img {border: none !important;} .addthis_toolbox .custom_images a {width: 60px; height: 60px; margin: 0; padding: 0;} .addthis_toolbox .custom_images a:hover img {opacity: 1;} .addthis_toolbox .custom_images a img {opacity: 0.75; border: none!important;} #follow_ng li {float: left; margin: 10px 10px 0 0;} #follow_ng .addthis_toolbox {background-color: #f0f0f0; padding: 15px 15px 15px 19px;} #follow_ng a {color: #333; font-weight: bold;} #latest_tweet .timestamp {display: block; margin: 0;} #latest_tweet h3 a {color: #333;} .article #content_top h1 {font-size: 1.875em; font-weight: bold; margin-bottom: 20px;} #content #content_mainA .article_body .extended {border-right: none; border-left: 1px solid #d5d5d5; float: right; margin: 0 0 20px 20px; padding: 0 0 0 20px; width: 180px;} #content_mainA .article_body .extended + .article_text {margin-top: 0;} .dictionary dt {clear: both; float: left; margin-right: 5px;} .dictionary dd {margin-bottom: 8px;} .dictionary dd.image {text-align: center;} .dictionary dd img {margin-top: 10px;} .dictionary dd img, .map img {border: none!important;} .graphic_map .header_set {position: relative; margin-bottom: 15px;} .graphic_map .header_set h3 {margin: 0;} #content .graphic_map .header_set p {bottom: 0; margin: 0; position: absolute; right: 0;} #content_mainB .three .jcarousel-skin-geocore .jcarousel-clip-horizontal, #content_mainB .three .jcarousel-skin-geocore .jcarousel-container-horizontal {width: 240px;} .movie_tickets li {overflow: auto; width: 100%;} .movie_tickets p {padding-top: 20px;} .pod_module h4 {float: left; font-weight: bold; font-size: 1.25em; margin: 10px 0 5px;} .pod_module p {background: url(../i/presentation/geocore_sprites.png) no-repeat -4px -115px; float: right; margin: 10px 29px 0 0; padding: 2px 0 0 24px;} .pod_module p.credit {background: none; clear: both; float: none; font-size: 1em; margin: 5px 0 0 0; padding: 0;} .pod_module p a {font-weight: bold;} div.download_link {background: url(../i/presentation/geocore_sprites.png) no-repeat -4px -454px; padding: 3px 25px; float: left; margin-bottom: 15px;} .photo_archive #content_mainA {width: 707px; float: right;} .photo_archive #content_mainB {border: 1px solid #d5d5d5; float: left; margin-right: 20px; padding: 20px; width: 180px;} .photo_archive #content_mainB .promo_collection h4 {font-size: 1.25em;} .photo_archive #content_mainB .promo_collection h4 a {color: #044E8E;} .photo_archive #content_mainA h3 {clear: both; float: left; margin-right: 10px;} .photo_archive #content_mainA h3 {font-weight: bold;} .photo_archive #search_results {clear: both;} .photo_archive #search_results img {float: left; margin: 0 13px 13px 0;} .photo_archive #search_results > div {float: left; width: 222px; margin: 0 10px 10px 0;} .photo_archive #search_results .photo_info {float: none; width: auto; margin: 0;} .photo_archive #search_results .photo_info p {font-size: .918em; margin-bottom: 5px;} .photo_archive #search_results .photo_info h4 {color: #333333; font-size: 1.125em; font-weight: bold; margin-bottom: 7px;} .photo_archive #content_mainA fieldset {border: none; clear: both; float: left; padding: 0; margin: 10px 0 0 0;} .photo_archive #content_mainA legend {line-height: 0;} .photo_archive #content_mainA .field {float: left; margin-right: 10px;} .photo_archive #content_mainA form {margin-bottom: 20px;} .photo_archive #content_mainA form > span {float: left; margin: 3px 10px 0 0;} .photo_archive #content_mainA .publication_time {color: #333;} .photo_archive .count {float: left;} .photo_archive #content_mainA button {margin-top: 10px;} .photo_archive #content_mainA button.toprow {margin-top: 0;} .photo_archive .photo_categories {margin: 0;} .photo_archive #form_errors {clear: both; float: left; margin-top: 10px;} .pull_quote {background: transparent url(../i/presentation/double_quote-close.jpg) no-repeat right 80%;} .pull_quote div {background: transparent url(../i/presentation/double_quote-open.jpg) no-repeat top left; font-style: italic; padding: 0 62px;} .pull_quote h4 {color: #333;} .search_results a {color: #333;} .search_results h4 {font-size: 1.375em; line-height: 1.4; margin-bottom: 3px;} .search_results h3 {line-height: 1.3; padding-top: 0; font-weight: normal; float: left; margin-top: -3px; margin-right: 15px;} .search_results a.modify {color: #044E8E;} .search_results .count {float: left; padding-top: 2px;} .search_results .search_again {float: right; margin: 0 auto; padding-top: 2px;} .search_results .search_again label {display: inline-block; margin-right: 10px;} .search_results #search_title {float: left; margin-right: 10px;} .search_results #results {clear: both; margin-bottom: 15px; padding-bottom: 10px;} .search_results .result_item {clear: both; padding: 15px 0 15px 0;} .search_results .result_image {float: left; margin-right: 10px;} .search_results .results_info {float: left;} .search_results #search_head {padding-bottom: 5px; margin-bottom: 10px;} .search_results .url span {color: #044E8E;} #container .graphic_promo img, #container .mobile_promo img {border: none;} .mobile_promo div {margin-left: 97px;} .mobile_promo p.action {clear: none;} /*Mobile-specific styles in here to make layout mode cooperate*/ .mobile .small_article .article_text {float: left; width: 388px;} .mobile .small_article > h2 {min-height: 1em!important;} /* "Daily Feature" (Photo of the Day style) */ .pod #container {padding: 0; width: 990px;} .pod #page_head {margin: 0 20px 20px 20px; padding: 0 0 20px; width: 950px;} .pod #content_mainA {margin-left: 20px;} .pod #content_mainB {margin-right: 20px;} .pod .primary_photo img {border: none!important; display: block; margin: 0 auto;} .pod .primary_photo {clear: both;} .pod #content_top {border-bottom: 1px solid #d5d5d5; padding: 0 0 20px 0;} .pod .publication_time {color: #666!important; font-size: 1em; margin-right: 30px; text-transform: uppercase;} #pod_bar, #fod_bar {margin: 0 20px 20px;} #pod_bar p, #fod_bar p {float: left;} #pod_nav, #fod_nav {float: right;} #pod_nav .prev, #fod_nav .prev, .pod .article_text .prev {border-right: 1px solid #d5d5d5; margin-right: 10px; padding-right: 10px;} .pod .article_text .first, #pod_nav .first, #fod_nav .first {border: none; padding: 0; margin: 0;} .todays_pod_link {margin-right: 30px;} .pod .article_text h2 {font-size: 2em; line-height: normal; margin-bottom: 10px;} .pod .article_text .credit {color: #666!important; font-size: 1em;} .pod .article_text .nav p {float: left;} .pod .article_text .nav {float: right;} .pod .article_text .publication_time {clear: both; margin-bottom: 10px!important;} .pod .buy_link {background: url(../i/presentation/photography_sprites.gif) no-repeat 1px 2px; margin-top: 30px; padding-left:25px;} /* "Daily Feature" (Photo of the Day style) */ .pod #container {padding: 0; width: 990px;} .pod #page_head {margin: 0 20px 20px 20px; padding: 0 0 20px; width: 950px;} .pod #content_mainA {margin-left: 20px;} .pod #content_mainB {margin-right: 20px;} .pod .primary_photo img {border: none!important; display: block; margin: 0 auto;} .pod .primary_photo {clear: both;} .pod #content_top {border-bottom: 1px solid #d5d5d5; padding: 0 0 20px 0;} .pod .publication_time {color: #666!important; font-size: 1em; margin-right: 30px; text-transform: uppercase;} #pod_bar, #fod_bar {margin: 0 20px 20px;} #pod_bar p, #fod_bar p {float: left;} #pod_nav, #fod_nav {float: right;} #pod_nav .prev, #fod_nav .prev, .pod .article_text .prev {border-right: 1px solid #d5d5d5; margin-right: 10px; padding-right: 10px;} .pod .article_text .first, #pod_nav .first, #fod_nav .first {border: none; padding: 0; margin: 0;} .todays_pod_link {margin-right: 30px;} .pod .article_text h2 {font-size: 2em; line-height: normal; margin-bottom: 10px;} .pod .article_text .credit {color: #666!important; font-size: 1em;} .pod .article_text .nav p {float: left;} .pod .article_text .nav {float: right;} .pod .article_text .publication_time {clear: both; margin-bottom: 10px!important;} .pod .buy_link {background: url(../i/presentation/photography_sprites.gif) no-repeat 1px 2px; margin-top: 30px; padding-left:25px;} /* ------------------------------------------------------------ +Wallpaper page-specific ------------------------------------------------------------ */ .wallpaper #content_top {border-bottom: 1px solid #DEDEDE; padding-bottom: 20px; margin-top: -10px;} .wallpaper #content_top img {border: none;} .wallpaper .primary_photo {clear: both; margin-left: -20px; padding-top: 10px;} .wallpaper .article_text h2 {font-size: 1.65em;} .wallpaper .article_text h5.credit {color: #999999; font-style: italic; margin: 10px 0 15px; font-size: 1.1em;} .wallpaper .download_link {margin-bottom: 0;} .wallpaper .photo_origin {float: right; padding-top: 3px;} .wallpaper .buy_link {background: url(../i/presentation/geocore_sprites.png) no-repeat -4px -480px; padding: 2px 25px;} .wallpaper-body {background: url(../i/presentation/photo_body.gif) repeat-x top center;} /* ------------------------------------------------------------ +Temporary ------------------------------------------------------------ */ .article #content_mainA .aside {border: none; float: left; margin: 0; padding: 0; width: 130px;} .article .article_body {border-left: 1px solid #d5d5d5; float: right; margin: 0 0 0 20px; padding: 0 0 0 20px; width: 437px;} .article #content_mainB {border: none; padding: 0;} .article #content_mainA {border-right: 1px solid #d5d5d5; padding-right: 20px;} /* ------------------------------------------------------------ +Miscellaneous ------------------------------------------------------------ */ /* Known Needed Document Flow Clears - Thanks to http: //www.positioniseverything.net/easyclearing.html */ /* #container, #content, #content_page_specific, #page_head, #share_email, #photo_credits, #news_feeds .wrap, .tag_cloud, #photos_by_category .promo001, #more_from_nationalgeographic .wrap2, form, #container ul, .section, .subsection, .nav, .carousel ul, .promo_collection, .promo_collection ul li, .tabbed_box li, #gallery_text .photo_text {display: block;} */ #container:after, #content:after, #content_page_specific:after, #page_head:after, #share_email:after, #content_top:after, #photo_credits:after, #news_feeds .wrap:after, .tag_cloud:after, #photos_by_category .promo001:after, #more_from_nationalgeographic .wrap2:after, form:after, #container ul:after, .section:after, .subsection:after, .nav:after, .carousel ul:after, .promo_collection:after, .promo_collection ol li:after, .promo_collection ul li:after, .tabbed_box li:after, #gallery_text .photo_text:after, #footer_breadcrumb:after, .graphic_map .header_set:after, #search_results:after, #header_site:after, #ng_comments .item:after {clear: both; content: "."; display: block; height: 0; visibility: hidden;} #content_mainB .subsection div.rssReader {width: 300px; margin-bottom: 20px;} #rss_loading {text-align: center;} #rss_loading img {border: none; float: none;} #virtual_earth .disclaimer {margin-top: 10px;} #retweet {margin-left: 5px;} #diggit {margin-left: -20px; margin-top: 5px;} #facebook_share {margin-bottom: 10px;} /* Fast Facts / Tips module */ .subsection .fastfact {border-top: none; position: relative; margin-top: 0; padding-top: 0;} .subsection .fastfact p.action {position: absolute; bottom: 40px; left: 30px;} .fact_box {margin-top: -20px; padding: 0 20px 0 35px;} h4.facts_description {font-size: 1.25em; padding: 20px 0; color: #044f90;} .fact_arrow {float: left; vertical-align: middle; margin: 10px 0;} .fact_arrow a {width: 10px; height: 13px; display: block; text-indent: -9999px; position: absolute; top: 95px;} a.fact_prev {background: url(../i/presentation/fastfacts_sprite.gif) no-repeat 0 -25px; left: 10px;} a.fact_prev:hover {background: url(../i/presentation/fastfacts_sprite.gif) no-repeat 0 -38px;} a.fact_next {background: url(../i/presentation/fastfacts_sprite.gif) no-repeat 0 -51px; right: 10px;} a.fact_next:hover {background: url(../i/presentation/fastfacts_sprite.gif) no-repeat 0 -64px;} div.fact_number {background: url(../i/presentation/fastfacts_sprite.gif) no-repeat 0 0; width: 24px; height: 20px; font-size: 1.25em; color: #FFFFFF; padding-top: 4px; text-align: center; float: left;} div.fact {color: #044f90; font-family: Georgia; font-size: 1.45em; line-height: 1.25em;} div.fact_numbers {margin-left: 35px;} /* Ecommerce Module Styles */ .ecommerce-section div.ecommerce_secondary li {list-style: disc;} div.ecommerce-section li span.item-price, div.ecommerce-section li span.sale-price {color: #000; font-weight: bold;} div.ecommerce-section li span.item-price-slashed {color: #8D8D8D; font-weight: bold; text-decoration: line-through;} div.ecommerce-section li span.sale-price {color: #9B0000;} #container .ecommerce-section img {border: none; margin: 0; float: none;} #container .ecommerce-section.Secondary img {margin: 0 auto 15px;} #content_mainA div.ecommerce-section.Primary div.ecommerce_first_img {float: left; margin-bottom: 15px;} #content_mainA div.ecommerce-section div.ecommerce_secondary {margin-left: 10px;} #content_mainA div.ecommerce-section.Primary div.ecommerce_secondary {float: left; width: 248px; margin-left: 20px;} #content_mainA div.ecommerce-section.Primary div.ecommerce_secondary li {margin-top: 10px;} #content_mainA div.ecommerce-section.Primary div.ecommerce_secondary li.first {margin-top: 0;} #content_mainA div.ecommerce-section.Primary p.action {margin-top: 0;} /*E-commerce module - SPLIT TOP DESIGN */ .ecommerce-section.split-design .ecommerce_first_img {width: 145px;} .ecommerce-section.split-design li:first-child {list-style: none; margin-top: 0;} .ecommerce-section.split-design .ecommerce_secondary li:first-child {margin-top: 10px;} .ecommerce-section.split-design li {margin-top: 10px;} .ecommerce-section.split-design .promo_collection {position: relative;} .ecommerce-section.split-design .split_left {width: 150px; float: left; border-right: 1px solid #CCC;} .ecommerce-section.split-design .split_right {width: 140px; float: right;} #content_mainB .ecommerce-section.Primary div.description {float: left; margin-left: 10px;} #container #content_mainB .ecommerce-section.Primary img {float: left;} div.promo_collection.carousel.ecommerce-section .jcarousel-skin-geocore .jcarousel-container {background: #fff; border: 1px solid #ccc;} /* End Ecommerce module styles */