/* ============================================================
Top-10-specific CSS
* Created by Lauren Brandstein on 10-8-2009
* Copyright (c) 2009 National Geographic. All rights reserved.
============================================================ */

/* ------------------------------------------------------------
+General
------------------------------------------------------------ */

#body_wrap {background: url(../i/presentation/top10_body.png) repeat-x top center;}
.subtitle strong, .subtitle b {color: #333; font-family: Arial, sans-serif; font-size: 1.125em; margin-right: 2px;}
.article .smaller {font-size: .875em; margin: 0;}
.article_text h4 {margin: 20px 0 0; padding-bottom: 5px;}
/* Negative top position added because "Planning:" p's were commented out, leaving anchors without parent p tags and abutting margin-bottom on p tag from above - another solution could be to selectively find pages with anchors UNDER paragraphs and enclose them
in p tags and give p above a class for margin-bottom:0 */
.article_text p+a,
.article_text a+span.pushup,
.article_text span.pushup+a {position: relative; top: -10px;}
#container .numbers li {list-style: none; margin: 0 0 20px;}

.article_text .numbers li h4:first-child{background: url(../i/presentation/list_numbers.gif) no-repeat 0 0; margin-top: 0; padding-left: 21px;}
.article_text .numbers .item2 h4:first-child {background-position: 0 -39px;}
.article_text .numbers .item3 h4:first-child {background-position: 0 -79px;}
.article_text .numbers .item4 h4:first-child {background-position: 0 -119px;}
.article_text .numbers .item5 h4:first-child {background-position: 0 -159px;}
.article_text .numbers .item6 h4:first-child {background-position: 0 -199px;}
.article_text .numbers .item7 h4:first-child {background-position: 0 -239px;}
.article_text .numbers .item8 h4:first-child {background-position: 0 -280px;}
.article_text .numbers .item9 h4:first-child {background-position: 0 -319px;}
.article_text .numbers .item10 h4:first-child {background-position: 0 -359px;}
.article_text a.popup {font-size:0.875em;}

/* ------------------------------------------------------------
+Headers
------------------------------------------------------------ */

#page_head .advertisement {margin-left: 15px; }

/* For /water-wonders/ h1 - too long */
.article h1.smaller {font-size: 2.4em !important;}
.article h1.smaller span {padding-top: 8px;}
.article h1 a.siteid {display: block; float: left; left: -142px; position: relative; text-indent: -9999px; width: 122px;}
.article h1 span {display: block; float: left; left: -104px; position: relative;}

#page_head .geocore_head a.siteid,
.gallery #page_head h1 a.siteid
 {display: block; text-indent: -9999px; width: 430px;}

.level_2 p.subtitle {font-size:1.375em; font-family:Georgia,"Times New Roman",serif; line-height:1.5 !important;}
.level_2 #page_head h1 {display: block; text-indent: -9999px; background: url(../i/presentation/top10_header.gif) top left no-repeat; height: 51px; width: 430px;}

.gallery #page_head h1, .article #page_head h1 {border-left: 1px solid #ccc; color: #333; font-size: 36px; font-weight: normal; min-height:51px; margin: 0 0 0 142px; max-width: 576px; padding-left:15px;}
.gallery #page_head, .article #page_head {background: url(../i/presentation/top10_logo.gif) 0 20px no-repeat; border-bottom: 1px solid #D5D5D5; padding:20px 0 10px;}

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

#footer_breadcrumb {background-color: #82b4d2;}
#footer_breadcrumb li.selected a {color: #333;}
#footer_global .nav_global_tierA .nav6 a {color: #333; font-weight: bold;}

/* ------------------------------------------------------------
+Carousels
------------------------------------------------------------ */
/* Active vs. "greyed out" buttons may need to be switched/adjusted with this darker bg color */
.jcarousel-skin-geocore .jcarousel-container {background:#e7eef5; border: 1px solid #ccc;}
.seven .jcarousel-skin-geocore .jcarousel-container {background:#333; border: none;}
.jcarousel-list li p a {color:#333; font-weight:normal !important;}
.seven .jcarousel-list li p a {color: #fff;}

#content_mainB .three .jcarousel-skin-geocore .jcarousel-clip-horizontal, 
#content_mainB .three .jcarousel-skin-geocore .jcarousel-container-horizontal {width:240px;}


/* ------------------------------------------------------------
+Hub Page
------------------------------------------------------------ */
/* +Bulleted List+ */
/* JS appears to be adding min-height:669px to this .subsection creating a gap at the bottom */

.subsection .primary .top_10_outer_list h4 {font:bold 1.2em Arial, sans-serif, serif; margin:30px 0 20px;}
.subsection .primary .top_10_outer_list h4.first {margin-top:0;}
.subsection .primary .top_10_outer_list .top_10_inner_list {color: #044E8E; list-style:disc outside; overflow: auto; padding-left:13px; width: 100%;}
	/* May cause problems in IE - width 100% = 610, with padding-left 13px object enters margin of containing column */
.subsection .primary .top_10_outer_list .top_10_inner_list li {float:left; margin:10px 20px 0 0; width: 180px;}
	/* May cause problems in IE:
	li width = 180 + margin-right:20 = 200, x3 li's = 600, plus 13px padding on ol = 613px of stuff in 610px column.
	Also may need to adjust li widths in IE stylesheets to compensate for IE box model
	(IE_width = standards_width + border-left + border-right + padding-left + padding-right) */
.subsection .primary .top_10_outer_list .top_10_inner_list li.first_row {margin-top:0;}

/* Need to check all floats/containers and any item with width or padding in IE */

.advertisement.sponsored_links div {background-color: #ccc !important; color: #000 !important; font-weight: normal !important;}