@charset "UTF-8";
/* CSS Document */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
ul,ol { list-style: none; }
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
fieldset,img { border: none; }

:focus
{
  -moz-outline-style: none;
}


body {
	font-family: "Times New Roman", Times, serif;
	font-size: 10pt;
	line-height: 1.55;
	background: #F6F6F6;
	color: #7F8083;
	
}

a{
	color: #7F8083;
	text-decoration: none;
}
p a{
	color: #000;
}
a:hover{
	background: #fff;
}

h2{
	font-size: 3em;
	line-height: .95;
	font-weight: normal;
	margin-bottom: 10px;
}
p{ margin: 0 20px 20px 0;}


#main{
	margin: 0;
	padding: 0;
	min-width: 92%;
	height: 100%;
	clear: both;
}
#main div, #main * div, #footer div{
	width: 300px;
	position: absolute;
}
div:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
}
#nav{
	position:absolute;
	display: block;
	float: left;
	z-index: 1300;
	width: 1060px;
}

.navItem{
	display: block;
	float: left;
	margin: 30px 0 0 0;
	padding: 10px;
	width: 110px;
	cursor:pointer;
	opacity: .75;
	filter: alpha(opacity=75);
	/* added by djg 20080415 */
	text-align: center;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}


.navItem:hover{
	background-color:#555;
}

#nav img{
	background-color: transparent;
/*	background: url('templates/masthead.png') no-repeat;*/
	display: block;
	float: left;
	clear: none;
	margin-right: 10px;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	text-indent: -999px;
	text-decoration: none;
	cursor:pointer;
}

#instrument{
	top: 400px;
	left: 2%;
}
#instrument_description{
	top: 455px;
	left: 5%;
}

#launch{
	bottom: 65%;
	right: 10%;
}
#launch_1{
	bottom: 45%;
	right: 12%;
}

#project{
	top: 20%;
	left: 15%;
}
#project1{
	top: 28%;
	left: 18%;
	width: 320px!important;
}
#project2{
	top: 25%;
	left: 10%;
}

#credits{
	top: 0;
	right: 40%;
	padding-bottom: 100px;
}
#sponsors a{
float: left;
clear: both;
	margin: 0 20px 10px 20px;
}
#sponsors a:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
}
#supertext{
	width: 175px;
	height: 450px;
	right: -5%;
	top: -5%;
	background: url(images/supertext.png) no-repeat top right;	
}

#shape1{
	width: 375px;
	height: 222px;
	left: 40%;
	top: 40%;
	background: url(images/shape1.png) no-repeat top left;
}

#shape2{
	width: 147px;
	height: 122px;
	left: 70%;
	bottom: 67%;
	background: url(images/shape2.png) no-repeat top left;
}
#shape3{
	width: 90px;
	height: 82px;
	right: 16%;
	top: 66%;
	background: url(images/shape3.png) no-repeat top left;
}

.shift{ margin: 20px 0 0 20px;}

#footer{
position: relative;
margin-top: 620px;
	float: left;
	clear: both;
	width: 100%;
	background: url(images/shape3.png) no-repeat top left;
}


/*PAGE SPECIFIC*/
body#project * div{
	width: 450px!important;
	position: absolute;
}

body#instrument #instrument{
	top: 110px;
	position: absolute;
}

body#instrument #instrument_description{
top: 150px;
}
body#project #project, body#project #project1{ left: 300px;}

body#project #main img{
position: absolute; 
opacity: .15; 
filter: alpha(opacity=15);
z-index: -1;
}

body#project #main img#fam{width: 250px; top:220px; left: 8%;}
body#project #main img#fam:hover{opacity: 1; z-index: 10000; width: 500px; left: 2%; top: 160px;}

body#project #main img#youth{width: 200px; top:380px; left: 4%;}
body#project #main img#youth:hover{opacity: 1; z-index: 10000; width: 300px; left: 2%; top: 340px;}


body#project #main img#buildings{width: 430px; top:100px; left: 68%;}
body#project #main img#buildings:hover{opacity: 1; z-index: 10000; width: 500px; left: 63%; top: 40px;}

body#project #main img#ceilings{width: 350px; top:350px; left: 59%;}
body#project #main img#ceilings:hover{opacity: 1; z-index: 10000; width: 500px; left: 48%; top: 280px;}

body#project #shape2{
	width: 147px;
	height: 122px;
	right: 1%;
	bottom: -2%;
	background: url(images/shape2.png) no-repeat top left;
}

body#credits * div{
	width: 450px;
	position: absolute;
}
body#credits #project1, body#credits #project{	
	left: 300px;
}
body#credits #shape1{
	left: -6%;
	bottom: -2%;
}

#video{ left: 375px; top: 200px;}