/*
	This is the section (site) specific css for science and space.
	It contains unique elements such as color schemes and backgrounds.
	Please fewer comments in here and add more comments to the wiki at
	http://wiki.nationalgeographic.com/index.php/Site-wide_CSS_implementation
*/


/* =Body
-----------------------------------------------------------------------------*/
body {
	background: #fff url('/staticfiles/NGS/Science/SiteAssets/img/backgrounds/body.jpg') repeat-x top center;
}

/* =Content Container - page background (defaults to UL rounded corner)
-----------------------------------------------------------------------------*/
#content-container {
	background: #fff url('/staticfiles/NGS/Science/SiteAssets/img/backgrounds/content-container-inside.gif') no-repeat scroll left top;
}
	
	/* Homepage specific */
	#content-container-home {
		background: #fff url('/staticfiles/NGS/Science/SiteAssets/img/backgrounds/content-container-home.gif') no-repeat scroll left top;
	}


/* =Features skin override for science skin
-----------------------------------------------------------------------------*/
#article h3, .collection h3 {
	font-weight: normal;
}

#article h2 {
	margin-bottom: 12px;
}

#content-center-well h3 {
	border: none !important;
	padding-bottom: 0 !important;
}

.collection {
	margin-bottom: 32px;
}
	
	/* currently needed for collections within collections */
	.collection .collection {
		margin-bottom: 0;
	}

#article h3, 
#article h2, .collection h2 {
	color: #000;
	font-size: 18px;
	font-weight: normal;
}

.collection .header h2 {
	font-weight: bold;
}

.fact h2, .feature h2, .gallery h2 {
	color: #fff;
	font-size: 16px;
	font-weight: normal;
}

.fact h3, .feature h3 {
	font-weight: bold;
}

	.fact h3 {
		font-size: 14px;
	}
	
.fact .body {
	padding-bottom: 8px;
}

.collection .body {
	padding-left: 18px;
}

.horizontal .promo {
	height: 105px;
	margin-bottom: 0px !important;
}

.horizontal h2 {
	border: none;
	padding-bottom: 0;
}

.horizontal .promo h3 {
	font-weight: bold;
}

.horizontal .promo p {
	color: #666;
	font-size: 11px;
}

.horizontal .action {
	font-size: 11px;
}

.category-overview p, ul, li {
	line-height: 16px;
	margin-bottom: 12px;	
}


/* =Generic HTML Bad Code
-----------------------------------------------------------------------------*/
#generichtml {
	margin-bottom: 22px !important;
}

.generichtml, .generichtml .body {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
}


/* =Prehistoric Timeline Navigation
-----------------------------------------------------------------------------*/
.previous-next.navigation {
	margin-bottom: 6px;
}

.previous-next.navigation h3 {
	float: left;
	margin: 0 15px 0 0;
	padding: 0;
}

	.previous-next.navigation h3 a.timeline {
		background: transparent url("/staticfiles/NGS/Shared/StaticFiles/Science/Flash/profiles/images/timeline-button.jpg") 0 0 no-repeat;
		display: block;
		height: 28px;
		text-indent: -99999px;
		width: 179px;
	}

.previous-next.navigation ul {
	list-style: none;
	float: right;
	margin: 5px 0 0 0;
	padding: 0;
}

	.previous-next.navigation ul li {
		float: left;
	}
	
	.previous-next.navigation ul li a {
		text-transform: uppercase;
	}

	.previous-next.navigation a.previous {
		background: transparent url("/staticfiles/NGS/Global/ApplicationAssets/img/icons/blue-arrow-left.gif") center left no-repeat;
		border-right: 1px solid #ccc;
		margin: 0 7px 0 0;
		padding: 2px 7px 0 13px;
	}
	
	.previous-next.navigation a.next {
		background: transparent url("/staticfiles/NGS/Global/ApplicationAssets/img/icons/blue-arrow-right.gif") center right no-repeat;
		padding: 2px 13px 0 0;
	}



/* =Subtopics (Two-columns)
-----------------------------------------------------------------------------*/
/*
.subtopics .list-container .menu-item, #content-center-well .bulleted-list .two-column .menu-item, #content-center-well .bulleted-list-two-column .menu-item {
	float: left;
	width: 45%;
}
*/

.subtopics .header, .subtopics .body, #content-center-well .bulleted-list .body, #content-center-well .bulleted-list .header, .horizontal .header, .horizontal .body, .bulleted-list-two-column .header, .bulleted-list-two-column .body {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

#content-center-well .bulleted-list .list-container, #content-center-well .bulleted-list-two-column .list-container {
	width: 468px;
}

#content-center-well .bulleted-list .list-container .menu-item, /*#content-center-well .bulleted-list .promo div, */ #content-center-well .bulleted-list-two-column .list-container .menu-item {
	float: left;
	width: 45%;
}

#content-center-well .bulleted-list .promo div, #content-center-well .bulleted-list .promo-last div {
	width: 200px;
	font-weight: normal;
	padding: 0px 10px 6px;
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-000000.gif) no-repeat 0px 5px;
	line-height: 15px;
}

#content-center-well .bulleted-list .footer, #content-center-well .bulleted-list-two-column .footer, .horizontal .footer {
	padding: 0px !important;
	margin: 0px !important;
}

.horizontal, .collection {
	margin-bottom: 20px !important;
}

.horizontal .footer, .collection .footer {
	clear: both;
}

.generichtml {
	margin-bottom: 0px !important;
}

.collection {
	padding: 0px !important;
}

.news, .fact {
	margin-bottom: 5px !important;
}

/* =Topic Pages
-----------------------------------------------------------------------------*/
.topicpage-leadparagraph {
	padding: 25px 200px 0px 25px;
	height: 260px;
	background-repeat: no-repeat;
	font-size: 13px;
	margin-bottom: 10px;
	color: #fff !important;
	margin-top: 1px;
}

	.topicpage-leadparagraph h2 {
		color: #fff;
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 12px;
	}

	.topicpage-leadparagraph p {
		color: #fff;
	}

	.topicpage-leadparagraph .action { /* based on environment, but not used yet */
		border: 1px #65B749 solid;
		border-bottom-color: #215011;
		padding: 3px 10px 3px 10px;
		background-image: url('/staticfiles/NGS/Science/SiteAssets/img/buttons/button.gif');
		background-repeat: repeat-x;
		display: block;
		width: 230px;
	}

	.topicpage-leadparagraph a:link,
	.topicpage-leadparagraph a:visited,
	.topicpage-leadparagraph a:hover,
	.topicpage-leadparagraph a:active {
		color: #fff;
		font-size: 12px;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
	}

	.topicpage-leadparagraph .action a {
		background: url('/staticfiles/NGS/Science/SiteAssets/img/buttons/button-arrow-white.gif') no-repeat 0px 4px;
		display: block;
		padding-left: 8px;
	}

.article-caption {
	color: #999;
	font-size: 11px;
	font-style: italic;
	margin-right: 8px;
	margin-top: -12px !important;
	text-align: right;
}

.image-caption {
	color: #999;
	font-size: 11px;
	font-style: italic;
	margin-right: 8px;
	text-align: right;
}

.image-caption p {
	margin: 0px;
}


/* =Article
-----------------------------------------------------------------------------*/
#article .inline-container {
	margin-right: 25px;
}


/* =2-Column News Module (Currently only box-grid)
-----------------------------------------------------------------------------*/
	.news {
		padding-left: 15px;
		padding-right: 20px;
		margin-bottom: 22px !important;
		margin-top: 10px;
	}
	
	.news h2 {
		border-bottom: 1px solid #d5d5d5;
		font-size: 17px;
		font-weight: normal;
		margin: 0 0 13px 0;
		padding-bottom: 4px;
	}

	.news .feature {
		float: left;
		margin-bottom: 15px;
		margin-right: 35px;
		width: 204px;
	}
	
	.news .last {
		margin-right: 0;
	}
	
		.news .feature img {
			border: 1px solid #333;
			margin: 0 15px 20px 0;
			float: left;
		}
		
		.news .feature .p {
			float: left;
		}
		
		.news .feature a {
			font-weight: bold;
		}
	
		.news ul {
			color: #000000;
			margin: 0px 0 13px 0;
			padding-left: 14px;
		}
		
			.news ul li {
				line-height: normal !important;
				margin: 0 0 8px 0;
			}
	
	.news .action {
		margin-left: 15px;
		font-weight: bold;
	}

	.news .rss {
		margin-top: 5px;
		margin-bottom: 0px;
		margin-left: 15px;
	}

	.news .rss a {
		font-size: 11px;
		text-decoration: underline;
	}
	
	/* RSS Icon */
	.icon {
		display: block;
		text-indent: -99999px;
	}
	
	.rss-icon {
		background: transparent url('/staticfiles/NGS/Science/SiteAssets/img/buttons/rss_36x14.gif') 0 0 no-repeat;
		height: 14px;
		float: left;
		margin: 0 9px 0 0;
		width: 36px;
	}
	
/* =Blurb
-----------------------------------------------------------------------------*/
.blurb {
	padding-left: 15px;
	padding-right: 15px;
}

	.blurb h2 {
		font-size: 18px;
		font-weight: normal;
		margin: 15px 0 10px 0;
	}

	.blurb p {
		font-size: 12px;
		margin-bottom: 12px;
	}


/* =Video (Two-Column)
-----------------------------------------------------------------------------*/
.video-two-column .promo {
	float: left;
	margin-right: 25px;
}

.video-two-column .promo-last {
	margin-right: 0;
	width: 150px;
}

.video h3 {
	margin-bottom: 4px !important;
}

.video img {
	border: 1px solid #333;
	margin-bottom: 8px !important;
}

.video .caption {
	background: transparent url('/staticfiles/NGS/Science/SiteAssets/img/icons/video_13x9.gif') 0 3px no-repeat;
	margin-top: 6px;
	padding-left: 20px;
}



/* =Gallery Viewer & Photo Views
-----------------------------------------------------------------------------*/
.previous a {
	background: transparent url('/staticfiles/NGS/Science/SiteAssets/img/backgrounds/image-navigation-previous.gif') center left no-repeat;
	padding-left: 15px;
}

.next a {
	background: transparent url('/staticfiles/NGS/Science/SiteAssets/img/backgrounds/image-navigation-next.gif') center right no-repeat;
	padding-right: 15px;
}

.image-enlarge {
	margin-bottom: 0;
}

.image-enlarge .credit, .image-wallpaper .credit {
	margin-bottom: 40px;
}

/*	.image-wallpaper .left-side {
		width: 272px;
	}
*/	
	.image-wallpaper .credit {
		margin-top: 14px;		
	}
	
	.gallery-viewer .credit { /* Necessary because of gallery-viewer background-color */
		padding-bottom: 40px;
	}
	
.image-wallpaper .right-side .sm-wallpaper-link {
	width: 430px !important;
}


/* =A-Z Listing (based on new HTML code)
-----------------------------------------------------------------------------*/
.a-z {
	margin-top: 10px;
}

	.listing {
		border-bottom: 1px solid #ccc;
		margin: 0 0 28px 0;
		padding: 0 0 25px 0;
	}
	
	.listing h2 {
		font-size: 20px;
		font-weight: normal;
	}
	
	.listing h3 {
		font-size: 13px;
		margin: 0 0 8px 0;
	}
	
	.listing div {
		float: left;
		margin-top: 15px !important;
		padding-right: 20px;
		width: 46%;
	}
/*	
		.listing div ul {
			margin: 0 0 15px 0;
			padding-left: 12px;
			line-height: auto;
			list-style-type: disc;
		}
*/		
		
			.listing div ul li {
				line-height: auto;
				margin-bottom: 6px;
				font-weight: normal;
			}

				.listing div ul li ul {
					margin-bottom: 10px;
					margin-top: 10px;
				}

				.listing div ul li ul li {
					list-style-type: disc;
					font-weight: normal;
				}

	.a-z .last {
		border-bottom: none;
		margin-bottom: 0;
	}
	
	/* For type of content (article, video, photo gallery, etc.) */
	.a-z .type {
		color: #5d8cb5;
	}

	.a-z .lead, .listing div ul li ul li.lead {
		padding-left: 0px;
		margin-left: -20px;
		list-style-image: none;
		list-style-type: none;
		font-weight: bold !important;
	}


/* =xpand code
-----------------------------------------------------------------------------*/
.expand-toggle {
	background: transparent url('/staticfiles/NGS/Global/ApplicationAssets/img/button-expand.gif') center left no-repeat;
	cursor: pointer;
	display: block;
	float: right;
	height: 16px;
	outline: none !important;
	text-indent: -99999px;
	width: 114px;
}

	.expand-toggle-opened {
		background: transparent url('/staticfiles/NGS/Global/ApplicationAssets/img/button-collapse.gif') center left no-repeat;
		cursor: pointer;
		height: 16px;
		outline: none !important;
		width: 73px;
	}


/* =Xpander
-----------------------------------------------------------------------------*/
.XpanderContainer {
	text-align: right;
	margin-bottom: 30px;
}

.XpanderClip {
	text-align: left;
}

.XpanderToggleImg {
	margin-bottom: 25px;
	margin-top: 8px;
	margin-right: 15px;
}


/* =Right Rail Collection (for type 'right-rail')
-----------------------------------------------------------------------------*/
#content-right-rail .collection .promo {
	border-bottom: 1px solid #d5d5d5;
}

#content-right-rail .collection .promo-last {
		border-bottom: none !important;
}

	#content-right-rail .swoopies-right-rail .promo-last {
		border-bottom: none !important;
	}

	#content-right-rail .swoopies-right-rail {
		border-top: 1px solid #d5d5d5;
		margin-top: -10px !important;
	}
	
	#content-right-rail .swoopies-right-rail .header {
		height: 16px !important;
	}
	

/* =Sponsors Right Rail Collection (for type 'sponsors-right-rail')
-----------------------------------------------------------------------------*/
#content-right-rail .sponsors-right-rail {
	background: #e9ebf2;
}

	#content-right-rail .sponsors-right-rail .header {
		padding: 5px 7px 0 7px;
	}
	
	#content-right-rail .sponsors-right-rail .body {
		padding: 0 7px;
	}

	#content-right-rail .sponsors-right-rail .footer {
		padding: 0 7px 5px 7px;
	}

	#content-right-rail .sponsors-right-rail a {
		color: #333;
		font-size: 12px;
		text-decoration: none !important;
	}

	#content-right-rail .sponsors-right-rail .promo {
		border-bottom: none;
	}
	
	#content-right-rail .sponsors-right-rail .promo-last {
		margin-bottom: 0;
	}
	
		#content-right-rail .sponsors-right-rail .promo .action {
			display: block;
			margin-top: 0;
		}

			#content-right-rail .sponsors-right-rail .promo .action a {
				color: #044E8E;
				text-decoration: underline;
			}

	#content-right-rail .sponsors-right-rail h2 {
		color: #919397;
		margin-bottom: 6px;
		margin-top: 0;
	}


/* =Swoopies/No-Border Right Rail Collection (for type 'swoopies' or 'no-border')
-----------------------------------------------------------------------------*/
#content-right-rail .no-border .promo {
	border-bottom: none;
}

#content-right-rail .no-border img {
	border: none;
}

#content-right-rail .swoopies-right-rail .body {
	padding: 0px !important;
}

#content-right-rail .right-rail {
	margin-bottom: 10px !important;
}

/* =IE 6 Fixes
-----------------------------------------------------------------------------*/
* html .listing div ul {
	margin-left: 20px;
	padding-left: 0;
}

/* =IE 7 Fixes
-----------------------------------------------------------------------------*/
*:first-child+html .listing div ul {
	margin-left: 15px;
	padding-left: 0;
}	

/* =Misc. Useful Stuff
-----------------------------------------------------------------------------*/
/* Thanks to http://www.positioniseverything.net/easyclearing.html */	
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clear {
	background: transparent;
	clear: both;
	font: 1px/1px verdana, arial, helvetica, sans-serif;
	height: 0 !important;
	margin: 0 !important;
}

.leftie { float: left; }
.rightie { float: right; }

.hidden {
	font-size: 1px;
	left: -9999px;
	line-height: 0px;
	margin: 0;
	padding: 0;	
	position: absolute;
	width: 9999px;
}

#article .inline-container .promo {
	width: 270px;
}

.XpanderContainer {
	margin: 0px !important;
}

.two-column .fact h3 {
	color: #000000 !important;
}

#article sub {
	font-size: 0.8em;
	vertical-align:baseline;
	position: relative;
	bottom: -0.2em;
}