/*  
CSS authored by: Paul Kelley
				 web: http://paulbkelley.com
				 twitter: @paulkelley
*/

@import url("reset.css");

html {
	background: #0B1436 url(/dev/sup/img/backgrounds/html_bg.gif) repeat-x;
	padding-top: 5px;
}

body {
	background: #223466 url(/dev/sup/img/backgrounds/bg_gradient.jpg) repeat-x ;
	font-size: .85em;
}

p {
	color: #b0e2f5;	
}

p a:link,
p a:visited {
	color: #fbc004;
}

p a:focus,
p a:hover,
p a:active {
	text-decoration: underline;
}

table {
	background: rgba(0,0,0,.4);
	color: #fff;
	border: 1px solid rgba(0,0,0,.7);
}

table td {
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding: 7px;
}

#background {
	background: url(/dev/sup/img/backgrounds/texture.png) repeat;
}

#ray_of_light {
	background: url(/dev/sup/img/backgrounds/ray_of_light.png) no-repeat top left;
}

#site_container {
	width: 70.5em;
	padding: 0 1em;
	margin: 0 auto;
}

#header {
	overflow: hidden;
	width: 70.5em;
}

#logo {
	width: 243px;
	height: 143px;
	float: left;
}

#logo a {
	background: url(/dev/sup/img/backgrounds/logo.png) no-repeat;
	text-indent: -9999px;
	display: block;
	width: 243px;
	height: 143px;
}

#major_nav {
	background: transparent url(/dev/sup/img/nav/nav.png) repeat-x top left;
	height: 29px;
	width: 614px;
	list-style-type: none;
	float: right;
	position: relative;
	margin: 60px 0 0 0;
	padding: 0;
}

#major_nav li {
		float: left;
		margin: 0;
		text-indent: -99999px;
	}
	
#major_nav li a:link, #major_nav li a:visited {
	position: absolute;
	top: 0;
	height: 29px;
	text-indent: -9000px;
	overflow: hidden;
}
	#major_nav .home a:link, 
	#major_nav .home a:visited {
		left: 0px;
		width: 75px;
	}
	#major_nav .home a:hover,
	#major_nav .home a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat 0px -29px;
	}

	.nav_home, .nav_home_active {
		position: absolute;
		top: 0;
		left: 0px;
		width: 75px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat 0px -29px;
	}

	#major_nav .programs a:link, 
	#major_nav .programs a:visited {
		left: 80px;
		width: 101px;
	}
	#major_nav .programs a:hover,
	#major_nav .programs a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat -80px -29px;
	}

	.nav_programs, .nav_programs_active {
		position: absolute;
		top: 0;
		left: 80px;
		width: 101px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat -80px -29px;
	}
	
	#major_nav .coastal_monitoring a:link, 
	#major_nav .coastal_monitoring a:visited {
		left: 183px;
		width: 176px;
	}
	#major_nav .coastal_monitoring a:hover,
	#major_nav .coastal_monitoring a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat -186px -29px;
	}

	.nav_coastal_monitoring, .nav_coastal_monitoring_active {
		position: absolute;
		top: 0;
		left: 186px;
		width: 176px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat -186px -29px;
	}
	
	#major_nav .events a:link, 
	#major_nav .events a:visited {
		left: 367px;
		width: 79px;
	}
	#major_nav .events a:hover,
	#major_nav .events a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat -367px -29px;
	}

	.nav_events, .nav_events_active {
		position: absolute;
		top: 0;
		left: 367px;
		width: 79px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat -367px -29px;
	}
	
	#major_nav .support a:link, 
	#major_nav .support a:visited {
		left: 451px;
		width: 88px;
	}
	#major_nav .support a:hover,
	#major_nav .support a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat -451px -29px;
	}

	.nav_support, .nav_support_active {
		position: absolute;
		top: 0;
		left: 451px;
		width: 88px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat -451px -29px;
	}
	
	#major_nav .about a:link, 
	#major_nav .about a:visited {
		left: 544px;
		width: 70px;
	}
	#major_nav .about a:hover,
	#major_nav .about a:focus {
		background: url(/dev/sup/img/nav/nav.png) no-repeat -544px -29px;
	}

	.nav_about, .nav_about_active {
		position: absolute;
		top: 0;
		left: 544px;
		width: 70px;
		height: 29px;
		background: url(/dev/sup/img/nav/nav.png) no-repeat -544px -29px;
	}

#content {
	overflow: hidden;
}

#main_img img {
	display: block;
	border: 2px solid #fff;
}

.interior #main_img img {
	display: block;
	border: 2px solid #fff;
}

#buckets {
	overflow: hidden;
}

#buckets div {
	background: url(/dev/sup/img/backgrounds/bucket_bg.png) repeat-x bottom;
	width: 28%;
	padding: 0 2%;
	float: left;
	min-height: 269px;
}

#events,
#recent_news,
#registration {
	margin-right: 2%;
}

#buckets div h2 {
	margin: 1em 0;
}

#buckets h3 {
	margin: 0;
	line-height: .5;
	margin-bottom: .2em;
}

#buckets h3 a {
	font-size: .715em;
	color: #fff;
}

#buckets h3 a:hover {
	text-decoration: underline;
}

#buckets p,
#events div {
	border-bottom: 1px solid rgba(176,226,245, .1);
	padding-bottom: 1em;
	margin-bottom: .5em;
	font-size: .9em;
}

#events div {
	background: none;
	width: auto;
	min-height: 0;
	float: none;
	overflow: hidden;
	padding: 0 0 1em 0;
	margin-top: 1.5em;
}

#events div p {
	float: left;
	border: 0;
	width: 16.25em;
	font-size: 1em;
}

#events div p:first-child {
	width: 3em;
	margin-right: 1em;
	padding-right: 1em;
	border-right: 1px solid rgba(255,255,255,.2);
	padding-bottom: 0;
}

#events div:last-child {
	padding-bottom: 0;
}


#buckets p:last-child,
#events div:last-child {
	border: 0;
}

.month,
.day {
	display: block;
	text-align: center;
}

.month {
	font-family: Baskerville, "Times New Roman", serif;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #fff;
}

.day {
	font-size: 2.2em;
	line-height: .7;
}

#join_email_list p {
	border: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 1em;
}

#join_email_list form {
	margin: 0;
	padding: 0;
}

#join_email_list fieldset {
	margin: 0;
	padding: 0;
}

#join_email_list form legend {
	display: none;
}

#join_email_list input.text {
	background: #0e1a3a;
	width: 255px;
	color: #5ec5f2;
	border: 1px solid #495f8a;
	padding: .25em;
	margin-bottom: .5em;
	font-size: 1.1em;
}

#join_email_list input.button {
	background: #fbc004;
	border: 1px solid #0e1a3a;
	text-transform: uppercase;
	font-size: 1em;
	padding: .25em;
	font-weight: bold;
	float: right;
	margin-right: .25em;
	text-shadow: 1px 1px 1px rgba(255,255,255,.4);
}

#join_email_list input.button:hover {
	cursor: pointer;
}

#events h2,
#recent_news h2,
#join_email_list h2,
#registration h2 {
	height: 19px;
	text-indent: -9999px;
}

#events h2 {
	background: url(/dev/sup/img/backgrounds/events_header.png) no-repeat;
	width: 82px;
}

#recent_news h2 {
	background: url(/dev/sup/img/backgrounds/recent_news_header.png) no-repeat;
	width: 162px;
}

#buckets #registration h2 {
	background: url(/dev/sup/img/backgrounds/registration_header.png) no-repeat;
	width: 151px;
	height: 24px;
	margin-bottom: .7em;
}

#join_email_list h2 {
	background: url(/dev/sup/img/backgrounds/join_email_list_header.png) no-repeat;
	width: 240px;
}

#interior_container p,
#interior_container ul {
	color: #d9e8ef; /*rgba(255,255,255,.8);*/
	line-height: 1.5;
}

#interior_container p img {
	border: 4px solid #203562;
}

#interior_container strong {
	color: rgba(255,255,255,1);
}

#interior_container h3 {
	font-family: Tahoma, Arial, sans-serif;
	color: #fff;
	font-size: 1.9em;
	text-shadow: 1px 1px 1px rgba(0,0,0,.7);
	padding: .15em 0;
	border-top: 1px solid #8AE2F7;
	border-bottom: 1px solid #8AE2F7;
}

#interior_container h4 {
	color: #F7FC6F;
	font-size: 1.3em;
}

#interior_container ul {
	list-style-type: square;
	margin: 0 0 2em;
}

#interior_container ul li {
	margin: 0;
}

#sub_nav {
	
	float: left;
	width: 15.2em;
	margin-right: 2em;
}

#sub_nav ul {
	background: url(/dev/sup/img/backgrounds/bucket_bg.png) repeat-x bottom;
	list-style-type: none;
	margin: 0;
	padding: 0 1em;
}

#sub_nav ul li ul {
	background: none;
}

#sub_nav ul li {
	margin: 0;
	padding: 0;
}

#sub_nav ul li a {
	display: block;
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding: .5em 0 .5em 1em;
	color: #8ae2f7;
}

#sub_nav ul li.current_page_item a,
#sub_nav ul li a:hover,
#sub_nav ul li.current_page_item a:hover {
	color: #f7fc6f;
	font-weight: bold;
	cursor: pointer;
}

#sub_nav ul li:last-child a {
	border: 0;
}

.register_inside {
	margin-top: 2em;
}

#interior_container {
	width: 53em;
	float: left;
}

#interior_container h2 {
	font-size: 2.4em;
	color: #F7FC6F;
	text-shadow: 1px 1px 1px rgba(15,29,61,.9);
	font-family: "Tahoma", Arial;
	letter-spacing: 2px;
	padding-bottom: .5em;
	border-bottom: 1px solid rgba(15,29,61,.3);
}

.photos {
	float: right;
	margin-left: 1em;
	border: 4px solid #203562;
}

#footer {
	background: #0b1436;
	padding-top: 1em;
	margin-top: 2em;
}

#footer_container {
	width: 91em;
	padding: .5em 1em 1em 1em;
	margin: 0 auto;
	color: #64d2ff;
	font-size: .8em;
}

#footer_container p {
	float: left;
}

#footer_container img {
	display: inline;
}

#footer_links {
	list-style-type: square;
	float: right;
	margin: 0;
	padding: 0;
}

#footer_links li:first-child {
	list-style-type: none;
}

#footer_links li {
	float: left;
	margin: 0 1em;
}

#footer_links li a {
	color: #fff;
	text-decoration: underline;
}

#footer_links li a:hover {
	color: inherit;
	text-decoration: none;
}