/*
 Blue: #007499
 Brown: #4A3422
 Gold: #F6C04B
 White: #F6F4D5
 Cream: #FBE0A5 or #FAFAEC
 */

@import url("styles-reusables-explorers.css");
@import url("styles-typography-explorers.css");

body {
	padding: 0;
	margin: 0;
	background-image: url(body-explorers.jpg); 
	text-align: center;
	}

	#header,
	#content { text-align: left; }
	
	#header {
		background-image: url(header-background-explorers.png); background-repeat: repeat-x;
		margin-bottom: 50px; 
		}

	#header .container { position: relative; /* To allow absolute positioning of #masthead */ }
	
	#meta { 
		padding-top: 10px; height: 40px; 
		font-family: Helvetica, Arial, sans-serif; 
		position: absolute; top: 0; right: 0; 
		}

	#spotlight {
		padding-top: 475px; 
		background-image: url(header-explorers.png); background-position: top center; 
		}

		#spotlight img,
		#spotlight h3,
		#spotlight p { position: relative; float: left; left: -9999px; width: 900px; margin-right: -900px; }
		
	#masthead h1 {
		background-image: url(masthead-explorers.png); background-position: top right; 
		width: 900px; height: 140px;
		position: absolute; top: 200px; z-index: -1;
		}

	#masthead h1 a {
		display: block;
		width: 900px; height: 140px;
		z-index: 100;
		}

		#masthead h1 a span { position: relative; float: left; left: -9999px; width: 600px; margin-right: -600px; }
		
	#content { position: relative; top: -40px; }
	
		.article { padding-bottom: 60px; margin-bottom: 60px; }

		.articleheader,
		.articlefooter { width: 285px; padding: 10px; padding-right: 15px; float: right; position: relative; left: -20px; }
		
		.articleheader { background-color: #007499; color: #F6F4D5; }

			.articleheader u { text-decoration: none; }

			.articleheader a:link, .articleheader a:visited,
			.articleheader a:hover, .articleheader a:active
				{ color: #F6F4D5; }
			
			.articleheader h2,
			.articleheader h2 a:link, .articleheader h2 a:visited,
			.articleheader h2 a:hover, .articleheader h2 a:active
				{ color: #FFF; }
			
			h6.tags { font-weight: normal; }
				.articleheader h6.tags { font-family: "Lucida Grande", "Lucida Sans", sans-serif; letter-spacing: .5px; }
		
		.articlebody { width: 510px; padding: 30px 40px; float: left; margin-top: 60px; background-color: #FAFAEC; margin-bottom: 40px; color: #111; }
			.articlebody > p:first-child:first-line { font-weight: bold; font-variant: small-caps; font-size: 110%; }
			.articlebody > p:first-child:first-letter { font-size: 300%; line-height: 1; color: #007499; }
			
				.articlebody h5.continuereading a { background-color: #007499; padding: 3px; color: #F6F4D5; }
			
			.articlebody h6.tags { padding-top: 9px; margin-top: 9px; }
			
		.articlebody img { max-width: 510px; width: auto !important; width: 510px; border: 1px solid #4A3422; }	
		.articlebody img.featuremap { max-width: 860px; width: auto !important; width: 860px; }
			
		.articlebody p.imagewithcaption { padding-bottom: 9px; margin-bottom: 9px; }
			.articlebody p.imagewithcaption small.imagecaption
				{ display: block; width: 438px; padding: 6px; margin-left: 325px;
					background-color: maroon; color: #FFF; font-weight: bold; }
			.articlebody p.imagewithcaption span.imagecredit { font-size: 85%; font-weight: normal; }
			.articlebody p.imagewithcaption span.imagecredit:before { content: "("; }
			.articlebody p.imagewithcaption span.imagecredit:after { content: ")"; }
		
		.articlebody blockquote { font-style: italic; padding-left: 20px; }
		.articlebody blockquote p { font-size: 15px; }
		.articlebody blockquote p.source { font-style: normal; }
		.articlebody blockquote p span.ed { font-style: normal; font-size: 90%; } /* For editorial comments within quotes */
		
		
		/*
		.articlebody p.imagewithcaption { font-size: 90%; color: #333; padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid #999; }
		.articlebody p.imagewithcaption img { width: 860px; padding-bottom: 5px; margin-bottom: 5px; }
		*/
		
		
		.articlefooter { clear: both; background-color: #F6C04B; top: -60px; }
			.articlefooter li { padding-bottom: 3px; margin-bottom: 3px; }
		
		#index, #links, #about { margin-top: 60px; clear: both; }
		
		#index { width: 550px; padding: 20px; margin-left: 290px; background-color: #FBE0A5; }
			#index h2 { width: 290px; padding: 10px; position: relative; left: -320px; top: -50px; background-color: #4A3422; color: #FFF; float: left; margin-right: -320px; }
			#index li { display: inline; }
			#index li:after { content: "..."; }
		
		#links { width: 550px; padding: 20px; margin-right: 290px; background-color: #007499; color: #FFF; }
			#links h2 { width: 290px; padding: 10px; position: relative; right: -310px; top: -50px; background-color: #4A3422; float: right; margin-left: -300px; } 
		
		#about { }
		
		#temporarynotice { width: 510px; margin-left: 310px; text-align: left; background-color: #FBE0A5; padding: 30px 40px; }
		
		#footer { margin-top: 20px; padding-top: 40px; text-align: right; }