@charset "UTF-8";
/* CSS Document */
/* www.colorzilla.com has the css gradient codes generator */
/* Text formatting */

/*  do not adjust font size when rotate the mobile device screen */
html, body, form, fieldset, p, div, h1, h2, h3{  
    margin:0;  
    padding:0;  
    -webkit-text-size-adjust:none;  
    }
	
	
	
body{ font-family: Helvetica; font-size:12px; margin:0px; padding:20px 0px 0px 0px; color: #676767; background-color: #000000; background-image: url(../images/bg.jpg); background-repeat: no-repeat;}
.page { font-size: 1em;}
h1 { font-size: 2.2em; color: #276193; margin: 0px 0px .5em 0px; font-weight: normal;}
h2 { font-size: 1.6em; color: #692564; margin: 0px 0px .5em 0px;}
h3 { font-size: 1.25em; color: #8b5487; margin: 0px 0px .25em 0px;}
p { margin: 0px 0px 1em 0px; font-size: 1em; }
li {margin: 0px 0px 1em 0px;}


.content_sidebar h3 { color: #3274ad; margin-bottom: 10px; }
.content_sidebar p, .content_sidebar li { color:#3274ad; }
.content_sidebar a { color: #cc14a1; }
.content_sidebar a:hover { color: #000; }

/* Any browser that supports HTML 5 but does not support the CSS devide sensitively and see this rule will automatically default the large photo*/
/* height matches the sidebar_photo_large.jpg */


/* Layout */

/* height matches the banner_large.jpg */


.page { position:relative; margin: 0px auto 0px auto; max-width:989px; }

/* height matches the banner_large.jpg */
.page header {
	display: block;
	position: relative;
	height: 100px;
	background: url(../images/banner_large.png) no-repeat 0px 0px;
}
.page header .jplheader {visibility:hidden;}

/* width and height matches the logo slice of the image */
.page header .logo_left {
	position: absolute;
	top: 45px;
	left: 45px;
	display: block;
	width: 180px;
	height: 105px;
	background: url(../images/logo_large.png) no-repeat 0px 0px;
}



/* have to give a 1px at the top and the bottom so it will snuggle up to the top and the bottom.  Otherwise, it will have a 1px divider rule */

.page .page_content {background: #F4F4F4/* test body color = light gray */ ; 
	padding: 0px 0px 0px 0px; 	
	border-radius: 16px;
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;}
.page .page_content .page_content_container_main { 
	width: 75%;
	float: right; 
	margin: 0px; 
	padding: 0px;
	background: url(../images/main-content-top.png) no-repeat scroll right top transparent;
	/*background: url(../images/mars.jpg) no-repeat 0px 0px;*/
}

.content_bottom{margin: 170px 20px 20px 5px; font-weight:normal; font-size: 0.8em; }
.page .page_content .page_content_container_sidenav { width: 25%; float: right; margin: 0px; padding: 0px; background: url(../images/main-content-top.png) no-repeat scroll right top transparent;}

.page .page_content .content {margin: 30px 20px 20px 5px;  padding: 0px; color: #000; font-size: 1.25em;}

/* one class for each column in workshop page*/
.workshoptable1 {border:1px solid #fff; width:300px; height:50px; float:left; text-align:center; padding-top: 5px;}
.workshoptable2 {border:1px solid #fff; width:200px; height:50px; float:left; text-align:center; padding-top: 5px;}
.workshoptable3 {border:1px solid #fff; width:100px; height:50px; float:left; text-align:center; padding-top: 5px;}

.page .page_content .content a:hover {text-decoration: underline; color:#3D7492  }

.page .page_content .content_sidebar {
	margin: 15px 0px 20px 5px;
	padding: 10px 10px 10px 5px;
}

.landingsite {margin: 5px 10px 5px 10px;color: #4F5280 ; font-size: 1.15em;}

/* left navagation links */
.page nav a {
	color: #4F5280;
	padding: 7px 10px 7px 10px;
	text-decoration: none;
	font-weight: bold;
	display: block;
	margin: 0px 2px 4px 2px;
	font-size: 1.10em;
	border-radius: 16px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background: #B5BFD2 url(../images/mobile_link_arrow.png) no-repeat right 50%;
}

.page nav a:hover {background-color: rgba(44,80,117,.7); color: #fff; }

.page .footerclass {background: #0e171f;}
.page footer { padding: 0; margin: 0 auto; border: 1px solid #000; margin-bottom: 0px; height: 62px; }
.page footer p { font-size: 1.15em; margin: 3px 0px 0px 0px; padding: 0; }
.page footer .usa_gov { width: 200px; height:inherit; margin-top: 10px; float: left; margin-left: 10px; }
.page footer .usa_gov img{ border: none;}
.page footer .footer_credits { float:right; margin-right: 20px; margin-top: 10px; line-height: 1em; text-align: left; }
.page footer .footer_nav {
	margin-top: 24px;
	text-align: center;
}

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


/* Any container that has item inside of it that is floating, that container will stretch to be the total height or width of all the object inside that has the float property assigned to them */
.clear_both {clear: both; line-height: 1px; }

/****** link elements ******/
A:link { text-decoration:none; color: #3D7492 }
A:hover { text-decoration: underline; }
A:active { text-decoration: none; color: #3D7492 }
/******* end link elements ******/







/* JPL Public Header */
.wrapper_top {
	width: auto;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar.  986px plus 2px of border on each side = 990px which matches the marsnext banner */
	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: 0px;
	margin-bottom: 0px;
	position: relative;
}
.top { 
	padding: 0;
	display: block;
	position: relative;
	height: 88px;
	background: url(../images/jplmast.png) no-repeat 0px 0px;
}


.nav_tier_0 a { position: absolute; text-decoration: none; }
.nav_tier_0 i { visibility:hidden; }
a#nasa { top: 5px; left: 10px; width: 85px; height: 80px; }
a#jplhome0 { top: 15px; left: 100px; width: 300px; height: 30px; }
a#caltech { top: 50px; left: 100px; width: 300px; height: 20px; }
/* nav tier 1 (JPL HOME, EARTH, SOLAR SYSTEM, STARS & GALAXIES, SCI/TECH) begin */



.top .top_nav { position: absolute; top: 5px; right: 33px; text-align: right; border: none; }
.top .top_nav a {
	padding: 0px 0px 0px 0px;
	display: inline-block;
	margin: 0px 10px 5px 0px;
	font-size: 11px;
	font-family: Arial,Helvetica, sans-serif;
	font-weight:bold;
}

.top .top_nav a:link { text-decoration: none; color:#B8CBE7; }
.top .top_nav a:visited { text-decoration: none; color:#B8CBE7; }
.top .top_nav a:hover { text-decoration:none; color:#fff;  }
.top .top_nav a:active { text-decoration: none; color:#B8CBE7; }

/* end nav tier 1 */

/* begin nav tier 2 */
.nav_tier_2 { padding: 0; margin: 0px; position: relative; top: 22px; margin-left: 480px; display: inline-block;}
.nav_tier_2 a { margin: 0px 3px 0px 0px; }

/* end nav tier 2 */

.page footer .usa_gov { background: url(../images/logousadotgov.gif) no-repeat 0px 0px; width: 200px; margin-top: 10px; float: left; margin-left: 10px; }

}