@import "reset.css";

body {
	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat; 
	background-position: bottom center;
	}

#noscript {
	background-image: url(../images/backgrounds/2.jpg);
	background-repeat: no-repeat; 
	background-position: bottom center;
	width: 100%;
	height:100%;
}

#home-print {display: none; }
	
img {
	border: none; 
	margin: 0px;
	padding: 0px;
}

a:link, a:visited, a:hover, a:active {
	color:#fff;
	text-decoration: none;
	outline: none;
}

#header {
	background: transparent url(../images/home-header-bg.png) top left repeat-x;
	border-top: 6px solid #6a2176;
}

#title {
	width: 960px;
	margin: 0px auto;
	padding: 0px;
}

#container {
	position: relative;
	width: 960px;
	height: 640px;
	margin: 0px auto;
	font: 0.8em Arial, Helvetica, sans-serif;
	z-index: 10;
}
#flash {
	position: absolute;
	margin-top: -40px;
	z-index:4;
}

#player {
	position: relative;
	top: 20px;
	left: 310px;
	width: 389px;
	height: 249px;
	z-index: 5;
}

/* left */
#left {
	float: left;
	width: 400px;
	height: 640px;
	margin-top: -249px;
}

ul#nav{
	width: 270px;
 	height: 236px;
 	background: url(../images/leftnav.png) no-repeat;
	display:block;
	margin:13px 0 0 20px;
	position: relative;
	z-index: 5;
}

#nav li a{
	text-indent: -9999em;
	display: block;
	width: 270px;	
	background: url(../images/leftnav.png) top left no-repeat;
}

#nav #one a{
	height:54px;
}

#nav #one a:hover{
	background-position: 0 -236px;
}

#nav #two a{
	height:59px;
	background-position: 0 -56px;
}
#nav #two a:hover{
	background-position: 0 -292px;
}

#nav #three a{
	height:54px;
	background-position: 0 -115px;
}
#nav #three a:hover{
	background-position: 0 -351px;
}

#nav #four a{
	height:66px;
	background-position: 0 -170px;
}
#nav #four a:hover{
	background-position: 0 -406px;
}

ul#join-us {
	margin-top: 35px;
	width: 252px;
 	height: 134px;
 	background: url(../images/join-us.png);
	display:block;
	position: relative;
	z-index:1;
}

#join-us li a{
	text-indent: -9999em;
	display: block;
	height: 134px;	
	background: url(../images/join-us.png) top left no-repeat;
}

#join-us a{
	width:252px;
}
#join-us a:hover{
	background-position: -252px 0;
}

#join-kids {
	margin-top: -49px;
	position: relative;
	z-index: 10;
	background: url(../images/join-kids.png) top left no-repeat;
	width: 393px; 
	height: 271px;
}

/* right */
#right {
	float: right;
	width: 560px;
	height: 640px;
	padding: 0;
	margin-top: -249px;
}

#did-you-know {
	position: absolute; 
	z-index: 3; 
	margin: 498px 0 0 149px;
	background: url(../images/did-you-know.png) top left no-repeat;
	width: 374px; 
	height: 153px;
}


ul#dyk-button {
	background: url(../images/dyk-button.png) top left no-repeat;
	width: 200px;
	height: 60px;
}

#dyk-button li {
	text-indent: -9999em;
	display: block;
	height: 60px;	
	background: url(../images/dyk-button.png) top left no-repeat;
}

#dyk-button a{
	width:200px;
}
#dyk-button a:hover{
	background-position: -200px 0;
}

#dyk-text {
	position: relative;
	padding: 0 0 0 40px;
	width: 300px;
	color: #fff;
}

#did-you-know-kid {
	position: relative;
	z-index: 4;
	padding: 386px 0 0 46px;
	width: 130px;
}

#calculate-kid {
	position: relative;
	z-index: 2;
	margin: -340px 0 0 318px;
}

ul#calculate {
	position: relative;
	z-index: 6;
	margin: -345px 0 0 379px;
	height: 109px;	
	width: 178px;
	background: url(../images/calculate.png);
	display: block;
}

#calculate li a{
	text-indent: -9999em;
	display: block;
	height: 109px;	
	background: url(../images/calculate.png) top left no-repeat;
}

#calculate a{
	width: 178px;
}
#calculate a:hover{
	background-position: -178px 0;
}

/* footer */
#footer-home {
	clear: both;
	background: #fff;
	border-top: 6px solid #6a2176;
	width: 100%;
	height: 68px;
	position: relative;
	z-index:10;
}

#footernav {
	width: 960px;
	padding: 10px;
	margin: 0px auto;
	text-align: center;
	font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #2aad54;
}

#footernav ul {
	margin: 0;
	padding: 0;
}

#footernavlist li {
	display: inline;
	border-right: 2px solid #2bad54;
	height: 10px;
	padding: 0 10px;
	list-style-type: none;
}

#footernavlist li.first {
	padding: 0 10px 0 0;
}

#footernavlist li.last {
	border-right: none;
	padding: 0 0 0 10px;
}

#footernavlist li a {
	color: #231f20;
	text-decoration: none;
	/*border-bottom: 1px solid #fff;*/
}

#footernavlist li a:hover {
	text-decoration: underline;
	/*border-bottom: 1px #939598 solid;*/
}

/* share */
#share ul#bookmarkList {
	z-index:20;
	position:absolute;
	top:20px;
	left:775px;
	padding:1px 2px 0;
	text-align:left;
	width: 120px;
	}

ul#bookmarkList li {
	display:block;
	padding:0;
	margin:5px 0;
	}
	
ul#bookmarkList li ul {
	position:static;
	margin:5px 0 0;
	padding:1px 2px 0;
	}
	
ul#bookmarkList #post.post a {
	background-image:url(../images/share.png);
	background-repeat:no-repeat;
	background-position:0 50%;
	display:block;
	height:20px;
	width:90px;
	padding:0px 0px 0px 20px;
	color: transparent;
	}

ul#bookmarkList #post.postFrame a {
	padding:0px 0px 0px 20px;
	width:90px;
	font-family: Arial, Helvetica, sans-serif;
}

ul#bookmarkList #post.post a:hover,ul#bookmarkList #post.postFrame a:hover { 
	display:block;
	color: transparent;
	}
	
ul#bookmarkList #post.post a:hover {
	background-image: url(../images/share-hover.png);
	background-repeat:no-repeat;
	display:block;
	height:20px;
	}
ul#bookmarkList #post.postFrame a {
	background-image:url(../images/share-hover.png);
	background-repeat:no-repeat;
	display:block;
	height:20px;
	}
ul#bookmarkList #post.postFrame ul#postList a {
	font-weight:normal;
	display:block;
	background-color:transparent;
	background-repeat:no-repeat;
	margin:0 2px;
	color: #000;
	/*position:relative; --for IE8 but loses transparency of hover icons/text */
	}
	
ul#bookmarkList #post.postFrame ul#postList a:hover {
	font-weight:bold;
	color: #000;
	/*position:relative;
	z-index:100; --for IE8 but loses transparency of hover icons/text*/
	}
	
ul#bookmarkList li ul#postList {
	background: #fff;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";*/
	width:120px;
}

ul#bookmarkList li ul#postList .digg a {
	background-image:url(http://www.epa.gov/epafiles/s/i/digg.gif);
	}
	
ul#bookmarkList li ul#postList .slashdot a {
	background-image:url(http://www.epa.gov/epafiles/s/i/slashdot.gif);
	}

ul#bookmarkList li ul#postList .facebook a {
	background-image:url(http://www.epa.gov/epafiles/s/i/facebook.gif);
	}

ul#bookmarkList li ul#postList .reddit a {
	background-image:url(http://www.epa.gov/epafiles/s/i/reddit.gif);
	}
	
ul#bookmarkList li ul#postList .stumble a {
	background-image:url(http://www.epa.gov/epafiles/s/i/stumble.gif);
	}
	
ul#bookmarkList li ul#postList .delicious a {
	background-image:url(http://www.epa.gov/epafiles/s/i/delicious.gif);
	}
	
ul#bookmarkList li ul#postList .whatisthis a {
	background-image:url(http://www.epa.gov/epafiles/s/i/whatisthis.gif);
	}

.show{display:block;}.hide{display:none;}
