@charset "UTF-8";
body { 
	margin: 0; 
	padding: 0; 
	text-align: center; /* this centers the wrapper in IE 5* browsers. Left-align within wrapper */ 
	background-image: url(../images/bg.gif); 
	background-repeat: no-repeat; 
	background-color: #213452; 
	font-family: Varela, Arial, Verdana, sans-serif; text-align:right 
	color: #4b5c68; 
}

@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  src: local('Varela'), url(Varela-400.woff) format('woff');
}
	
/* ===== vertical margin control ===== */

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, address { 
	/* this zeroes out all margins */ 
	margin: 1em 0; 
	padding: 0px; 
}
h1, h2, h3, h4, h5, h6 { 
	margin-top: .7em; 
	margin-bottom: 0px; 
	/* margin is created by the top margin of the element beneath it */ 
}
blockquote { margin: 2em 10%; }
img { border: 0; }


/* ===== PRESENTATION STYLES ===== */

.form_field { 
	font-size: .7em; 
	background-color: #213e59; 
	border: 1px solid #687b8e; 
	color: #FFFFFF; 
}
h1 { 
	font-size: 1.4em; 
	color: #43545e; 
}
h2 { 
	font-size: 1.3em; 
	color: #9cabb7; 
}
h3 { 
	font-size: 1em; 
	color: #447caf; 
}
h4 { 
	font-size: .9em; 
	color:#43545e; 
}

A:link { text-decoration: none; color: #275ec3 }
A:visited { text-decoration: none; color: #275ec3 }
A:hover { text-decoration: underline; }
A:active {
	text-decoration: none;
	color: #275ec3;
	text-align: left;
}

.date { font-weight: bold; }

.hr_page_hd { 
	background: url(../images/divhr.gif) repeat-x; 
	height: 30px; background-position: center; 
	margin-top: 5px;
}

#footer p { 
	color:#868a8d; 
	font-size: 0.8em; 
}
#footer A:link { 
	text-decoration:none; 
	color:#868a8d; 
	font-size: 1em; 
	line-height:.5em; 
}
#footer A:visited { 
	text-decoration:none; 
	color:#868a8d; font-size: 1em; 
	line-height:.5em; 
}
#footer A:active { 
	text-decoration:none; 
	color:#868a8d; 
	font-size: 1em; 
	line-height:.5em; 
}
#footer A:hover { 
	text-decoration:none; 
	color:#fff; 
	font-size: 1em; 
	line-height:.5em; 
}


/* ===== ELEMENTS THAT EXIST ON ALL PAGES ===== */

/* Top JPL banner */
#wrapper_top { 
	width: 989px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ 
	text-align: left; /* this overrides the text-align: center on the body element. */ 
	margin-top: 12px; margin-bottom: 7px; border: 2px solid #1f3243; 
}
#top { 
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ 
	height: 88px; 
	background: url(../images/mast.jpg); 
}

/* nav teir 0 (NASA, JPL HOME, CalTech). Using invisible hovered links over bg */
#nav_tier_0 a {
	position: absolute;
	text-decoration: none;
	background-image: url(src/youtube_ico.gif);
}
#nav_tier_0 i { visibility:hidden; }

a#nasa { 
	margin-top: 5px; 
	margin-left: 10px; 
	width: 85px; 
	height: 80px; 
}
a#jplhome0 { 
	margin-top: 15px; 
	margin-left: 100px; 
	width: 300px; 
	height: 30px; 
}
a#caltech { 
	margin-top: 50px; 
	margin-left: 100px; 
	width: 300px; 
	height: 20px; 
}
 
/* nav tier 1 (JPL HOME, EARTH, SOLAR SYSTEM, STARS & GALAXIES, SCI/TECH) begin */
#nav_tier_1 { 
	padding: 0; 
	margin: 0; 
	width: 507px; 
	height: 10px; 
	left: 480px; 
	position: relative; 
	top: 10px; 
}
#nav_tier_1 ul#tier_1 li a { 
	/* image replacement for nav */ 
	text-indent: -9999px; 
	overflow: hidden; 
	text-decoration: none; 
}
#tier_1 { 
	width: 507px; 
	height: 10px; 
	background:url(../images/tnav1.gif); 
	margin: 0; 
	padding: 0; /* aligns tier 1 nav to the right */ 
	position: relative; 
}
#tier_1 li { 
	margin: 0; 
	padding: 0; 
	list-style:none; 
	position:absolute; 
	top: 0; 
}
#tier_1 li, #tier_1 a { 
	height: 10px; 
	display: block; 
}
#jplhome { left: 0px; width: 65px; }
#earth { left: 65px; width: 54px; }
#solarsystem { left: 119px; width: 105px; }
#starsgalaxies { left: 225px; width: 118px; }
#scitech { left: 342px; width:158px; }
#jplhome a:hover { background: transparent url(../images/tnav1.gif) 0px -10px no-repeat; } /* these negative values position the rollover image */
#earth a:hover { background: transparent url(../images/tnav1.gif) -65px -10px no-repeat; }
#solarsystem a:hover { background: transparent url(../images/tnav1.gif) -119px -10px no-repeat; }
#starsgalaxies a:hover { background: transparent url(../images/tnav1.gif) -225px -10px no-repeat; }
#scitech a:hover { background: transparent url(../images/tnav1.gif) -342px -10px no-repeat; }
/* end nav tier 1 */

/* begin nav tier 2 (share links) */
#nav_tier_2 { 
	padding: 0; 
	margin: 0; 
	position: relative; 
	top: 15px; 
	margin-left: 480px; 
}
#tier_2 { 
	height: 10px; 
	margin: 0; 
	padding: 0; 
	position: relative; 
}
#tier_2 li { 
	margin: 0; 
	padding: 0; 
	list-style:none; 
	position:absolute; 
	top: 0; 
}
/* end nav tier 2 */

/* begin header 2 (mission-specific banner) */
#wrapper_header_2 { 
	width: 989px; 
	border: 2px solid #1f3243; 
	border-bottom: 2px; 
	margin: 0 auto; 
	height: 116px; 
	/* This is now in the html to handle ie6 transparency fix
	background: url(../images/headervoyager.png) no-repeat; */
}
/* end header 2 */

/* begin nav tier 3 (main navigation) */
#nav_tier_3 { margin: 0px; padding: 0; width: 989px; height: 26px; border-bottom: 1px solid #1f3243; }
#nav_tier_3 ul#tier_3 li a { text-indent: -9999px; overflow: hidden; text-decoration: none; }
#tier_3 { width: 989px; height: 26px; background:url(../images/pnav.gif); margin: 0; padding: 0; position: relative; }
#tier_3 li { margin: 0; padding: 0; list-style: none; position: absolute; top:0; }
#tier_3 li, #tier_3 a { height: 26px; display: block; }
#home { left: 0px; width: 98px; }
#news { left: 98px; width: 145px; }
#mission { left: 243px; width: 122px; }
#images { left: 365px; width: 143px; }
#record { left: 508px; width:170px; }
#interact { left: 678px; width:100px; }
#where { left: 778px; width:211px; }
#home a:hover { background: transparent url(../images/pnav.gif) 0px -26px no-repeat; }
#news a:hover { background: transparent url(../images/pnav.gif) -98px -26px no-repeat; }
#mission a:hover { background: transparent url(../images/pnav.gif) -243px -26px no-repeat; }
#images a:hover { background: transparent url(../images/pnav.gif) -365px -26px no-repeat; }
#record a:hover { background: transparent url(../images/pnav.gif) -508px -26px no-repeat; }
#interact a:hover { background: transparent url(../images/pnav.gif) -678px -26px no-repeat; }
#where a:hover { background: transparent url(../images/pnav.gif) -778px -26px no-repeat; }
/**** end nav tier 3 ****/

/* search box */
#form_wrap { 
	position: relative; 
	width: 280px; 
	height: 20px; 
	left: 690px; 
	top: 30px; 
	text-align: right; 
}
.searchbutton { vertical-align: middle; }

/* pnav */
#wrapper_middle_2 { 
	width: 993px; 
	margin: 0 auto; 
	text-align: left; 
	padding: 0; 
}
#middle_2_border { 
	padding: 0; 
	border: 2px solid #1f3243; 
	background-color:#FFFFFF; 
	clear: both; 
	margin: 0px 0 5px 0; 
	border-top: 0px; 
}

/* footer */
#wrapper_bottom { width: 993px; margin: 0 auto; }
#contentbox_headline p { margin: 0; }
#footer { padding: 0; margin: 0 auto; border: 2px solid #1f3243; margin-bottom: 10px; background-color: #0e171f; height: 62px; }
#footer p { margin: 0; padding: 0; }
#footer .usa_gov { width: 180px; margin-top:0px; float: left; margin-left: 5px; }
#footer .footer_credits { float:right; margin-right: 25px; margin-top: 16px; line-height: 1em; text-align: left; }
#footer .footer_nav { margin-top: 24px; }
#footer .footer_nav_inner { margin-top: 24px; margin-left: 200px; }


/* ===== MISCELLANEOUS STYLES ===== */

.clear { clear:  both; } /* use after floats so that they are contained in wrapper div */