/*
	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: url('/staticfiles/NGS/Field/SiteAssets/img/backgrounds/body.jpg') repeat-x;
}

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

/* Header override for Mission */
#main-header h2 a {
	color: #ffffff ! important;
	font-weight: normal;
}

#content-container-home #main-header {
	margin-top: 7px;
}

#content-container-home #main-header h2 a, #content-container-home #main-header h2 {
	color: #ffffff ! important;
	font-weight: normal;
	font-size: 34px;
}

#main-header .menu-item a {
	color: #ffffff;
}

#main-header .selected a {
	font-weight: normal;
	color: #ffce00;
}

#flashcontent, .field-az, #project-description {
	margin-bottom: 16px;
}

#article .inline-info, #project-description .inline-info {
	width: 272px;
	float: right;
	margin-left: 25px;
	margin-bottom: 16px;
}

#project-description .inline-info {
	width: 302px;
}

#project-description .project {
	width: 272px;
}

#article .inline-info p, #project-description .inline-info p {
	font-size: 11px;
	margin-top: 0px;
	margin-bottom: 5px;
}

#article .inline-info a, #project-description .inline-info a {
	margin-top: 0px;
	font-size: 11px;
}

#article .inline-info img, #project-description .inline-info img {
	float: left;
	border: 1px solid;
	margin-right: 10px;
	margin-bottom: 0px;
}

#article h2, #project-description h2 {
	margin-bottom: 10px;
}

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

#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 {
	color: #000;
	font-size: 18px;
	font-weight: normal;
}

.collection .header h2 {
	color: #000000;
	font-size: 16px;
	font-weight: bold;
}

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

.fact h2 {
	color: #000 !important;
	font-size: 16px;
	font-weight: normal;
}

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

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

.fact .caption {
	font-style: italic;
	color: #666666;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
}

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

.horizontal .promo {
	width: 45% !important;
	margin-bottom: 16px !important;
}

.horizontal .newrow {
	clear: left !important;
}

.horizontal h2 {
	color: #000000 !important;
	border: none;
	padding-bottom: 0;
}

.horizontal .promo h3 a {
	color: #333333;
	font-size: 14px;
	font-weight: bold;
}

.horizontal .action {
	font-weight: bold;
}

/* =Podcasts Right Rail Collection (for type 'podcasts')
-----------------------------------------------------------------------------*/

	#content-right-rail .right-rail .header {
		display: block !important;
		margin: 0px !important;
		padding: 0px !important;
	}

	#content-right-rail .right-rail .header h2 {
		display: block !important;
		color: #000000;
		text-align: left;
	}

	#content-right-rail .right-rail .promo h3 {
		font-size: 12px;
		font-weight: bold;
		color: #000000;
		margin: 0px;
		padding: 0px;
	}

	#content-right-rail .right-rail .promo p {
		margin: 0px;
		padding: 0px;
	}

	#content-right-rail .right-rail .promo .action {
		margin: 0px;
		padding: 0px;
	}

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

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

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

/* =project-description
-----------------------------------------------------------------------------*/
#project-description p {
	line-height: 16px;
	margin-bottom: 12px;
}

#project-description .list {
	display: block;
	padding-left: 12px;
	background: url("/staticfiles/NGS/Science/SiteAssets/img/backgrounds/art-bullet-000000.gif") 2px 6px no-repeat;
}


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

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

#content-center-well .field-home .list-container .menu-item {
	float: left;
	width: 45%;
}

#content-center-well .field-home .promo div {
	padding-left: 18px; 
	width: 100%;
}

#content-center-well .field-home .promo div li {
	margin-bottom: 0px; 
}

#content-center-well .single-column .list-container .menu-item {
	width: 90%;
}

#content-center-well .field-home .footer, #content-center-well .field-home .footer, .horizontal .footer {
	padding: 0px !important;
	margin: 0px !important;
}

#content-center-well .field-home h2 {
	color: #000000;
	border-bottom: 1px solid #d5d5d5 !important;
	padding-bottom: 4px;
}

#content-center-well .field-home h2 {
	color: #ffffff;
	border: none !important;
}

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

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

.collection {
	padding: 0px !important;
}

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

/* =Topic Pages
-----------------------------------------------------------------------------*/
.topicpage-leadparagraph {
	padding: 25px 45% 0px 32px;
	height: 255px !important;
	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;
		display: block !important;
	}

	.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;
	}

#generichtml .right-align {
	padding: 25px 32px 0px 45%;
	text-align: right;
}

#generichtml .dark-text p, #generichtml .dark-text h2 {
	color: #000 !important;
}

#generichtml .dark-text a:link,
#generichtml .dark-text a:visited,
#generichtml .dark-text a:hover,
#generichtml .dark-text a:active {
	color: #000;
}



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

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

/* =2-Column News Module (Currently only box-grid)
-----------------------------------------------------------------------------*/
.news .header td, .news .body td {
	padding: 0px !important;
}

	.news {
		margin-bottom: 22px !important;
		margin-top: 10px;
	}
	
	.news h2 {
		color: #000000 !important;
		border-bottom: 1px solid #d5d5d5;
		font-weight: normal;
		margin: 0 0 13px 0;
		padding-bottom: 4px;
	}

	.news .feature {
		float: left;
		margin-right: 35px;
		width: 43%;
	}
	
	.news .last {
		margin-right: 0;
	}
	
		.news .feature img {
			border: 1px solid #333;
			margin: 0 15px 0px 0;
			float: left;
		}
		
		.news .feature .p {
			float: left;
		}
		
		.news .feature a {
			font-weight: normal;
		}
	
		.news ul {
			color: #707070;
			margin: -5px 0 13px 0;
			padding-left: 14px;
		}
		
			.news ul li {
				color: #000000;
				line-height: normal !important;
				margin: 0 0 8px -14px;
				padding: 0px 10px;
				background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-000000.gif) no-repeat 0px 5px;
				list-style: none;
			}
	
	.news .rss {
		font-size: 11px;
		margin-top: 16px;
		margin-bottom: 0px;
	}
	
	/* 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;
}

.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: 18px;
		font-weight: normal;
	}
	
	.listing h3 {
		font-size: 12px;
		margin: 22px 0 8px 0;
	}
	
	.listing div {
		float: left;
		padding-right: 20px;
		width: 46%;
	}
	
		.listing div ul {
			padding-left: 12px;
			line-height: auto;
			list-style-image: url("/staticfiles/NGS/Science/SiteAssets/img/backgrounds/art-bullet-000000.gif");
		}
		
			.listing div ul li {
				line-height: auto;
				margin-bottom: 6px;
			}

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


/* =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 .swoopies-right-rail .promo-last {
		border-bottom: none !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;
}

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

/* =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;
}

.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-explorer {
	float: left;
	clear: both;
	overflow: visible;
	width: 130px;
	margin-bottom: 0px;
	margin-right: 25px;
}

#article .inline-container-explorer .promo {
	border: none;
}

.XpanderContainer {
	margin: 0px !important;
}

#content-title h1 {
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
	margin-left: -2px !important;
}

	#content-title h1 .trademark {
		font-size: 13px;
		vertical-align: super;
	}

#content-title .subhead, #content-title .project-subhead {
	margin-left: 1px;
}

#content-title h2 {
	clear: both;
	color: #054f8e;
	font-size: 12px;
	font-weight: bold;
	margin-top: 0px !important;
}

#content-title {
	padding-bottom: 7px;
}

.inline-container .caption, .inline-container-explorer .caption {
	font-style: normal;
	color: #000000;
	font-size: 12px;
	margin: 0px;
	padding: 5px 0px 0px 0px;
}

.inline-container .credit, .inline-container-explorer .credit {
	font-style: italic;
	color: #666666;
	font-size: 11px;
	margin: 0px;
	padding: 5px 0px 0px 0px;
	text-align: left !important;
}

.inline-container .enlarge, .inline-container-explorer .enlarge {
	display: none;
}

.inline-container .list-container, .inline-container .inline-from-text, .inline-container .explorers .header, .inline-container .explorers .thumb,
.inline-container-explorer .list-container, .inline-container-explorer .inline-from-text, .inline-container-explorer .explorers .header, .inline-container-explorer .explorers .thumb {
	display: none;
}

.inline-container .explorers .list-container, .inline-container-explorer .explorers .list-container {
	display: block;
}

.inline-container .explorers .body, .inline-container-explorer .explorers .body {
	background: url('/staticfiles/NGS/Field/SiteAssets/img/backgrounds/inline-272-body.gif') no-repeat top left;
}

.inline-container .explorers .promo, .inline-container-explorer .explorers .promo {
	border: none !important;
	padding-top: 5px; padding-left: 10px;
}

.inline-container .explorers .footer, .inline-container-explorer .explorers .footer {
	margin-top: -4px;
	background: url('/staticfiles/NGS/Field/SiteAssets/img/backgrounds/inline-272-footer.gif') no-repeat top left;
	height: 4px;
}

.inline-container .promo h3, .inline-container-explorer .promo h3 {
	display: block;
	font-size: 12px !important;
	font-weight: bold !important;
	margin: 0px 0px 5px 0px;
	padding: 0px;
}

.inline-container .explorers h3, .inline-container-explorer .explorers h3 {
	font-size: 16px !important;
	margin: 5px 0px 5px 0px; 
	text-align: left;
}

.inline-container .promo p, .inline-container-explorer .promo p {
	margin: 0px 0px 5px 0px !important;
}

.inline-container .promo .action, .inline-container-explorer .promo .action {
	margin: 0px !important;
}

.inline-container .promo img, .inline-container-explorer .promo img {
	border: 1px solid #333;
}

#dynamic-lead {
	margin-bottom: 10px;
}

.bulleted-list-two-column .header {
	padding: 0px !important;
}

.bulleted-list-two-column h2 {
	color: #000000 !important;
	border-bottom: 1px solid #d5d5d5;
	font-weight: normal;
	margin: 0px;
	padding-bottom: 4px;
}

.field-home .body {
	padding-bottom: 12px;
}

.field-home .body .promo div {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-000000.gif) no-repeat 0px 5px;
	padding-left: 12px !important;
}

.bulleted-list .header {
	padding: 0px !important;
}

.bulleted-list .body {
	padding-bottom: 12px;
}

.bulleted-list .body .promo div {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-000000.gif) no-repeat 0px 5px;
	padding-left: 12px !important;
	padding-bottom: 5px;
}

#generichtml .topicpage-leadparagraph {
	margin-bottom: 0px;
}

#generichtml .caption, #generichtml .credit {
	text-align: right;
	margin: 0px !important;
	padding: 0px !important;
	font-size: 11px;
	font-style: italic;
}

.generichtml .promo {
	padding-bottom: 0px;
}

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

	.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;
	}

#content-title .subhead, #content-title .project-subhead {
	display: block;
	font-size: 12px;
	clear: both;
}

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

.XpanderClip {
	text-align: left;
}

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

#content-container-home #content-title {
	display: none;
}

.category-overview {
	margin-bottom: 0px;
	margin-left: 16px;
	width: 95%;
}

.expand-overview {
	margin-top: -5px;
	margin-bottom: 15px;
}

.right-rail-bulleted-list .header h2 span {
	display: block;
	font-size: 11px;
	font-weight: normal;
}

.rss-button {
	padding: 0px 5px 0px 0px !important;
}

.sponsored-links {
	margin-top: 25px;
}