/*----------------------------------------------------------------------------
Main Style Sheet
author: Jason Hollett
___________________________________________________________________________ */



/* =Global
___________________________________________________________________________ */
body {
	background: #1b6d98 url(../img/bg.gif) repeat-x 0 0;
	font-family: arial;
	color: #333;
}

em { font-style: italic; }

strong { font-weight: bold; }

h2 {
	font-size: 131%;
	color: #d17b01;
	padding-bottom: 15px;
	font-weight: bold;
}

h3 {
	font-size: 116%;
	font-weight: bold;
	margin-bottom: 6px;
}

h4 {
	font-weight: bold;
	padding-bottom: 10px;
	margin-bottom: 15px;
	color: #12475a;
	background: url(../img/separator-secondaryContent.gif) repeat-x 0 100%;
}

a {
	color: #2580b3;
	text-decoration: underline;
}

a:hover {
	color: #76b042;
}



/* =Common Classes
___________________________________________________________________________ */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.clear { clear: both; }
.floatL { float: left; }
.floatR  { float: right; }
.align-right { text-align: right; }

.small { font-size: 85%; }
.xSmall { font-size: 77%; }

.noPadding { padding: 0 !important; }
.marginBottom { margin-bottom: 15px; }

h2 span.also {
	font-size: 138.5%;
	font-weight: normal;
}

h3 span.also {
	font-size: 138.5%;
	font-weight: normal;
}

p span.also {
	font-size: 108%;
	font-weight: bold;
}

div.hr {
	background: url(../img/bg-hr.gif) repeat-x 0 0;
	display: block;
	height: 1px;
	border: 0;
	margin: 0 0 10px 0;
	clear: both;
}

div.hr hr {
	display: none;
}

.pngfix {
	behavior: url(../styles/iepngfix.htc);
}



/* =Container
___________________________________________________________________________ */
#container-bg {
	width: 965px;
	background: url(../img/bg-container.gif) repeat-y 0 0;
	margin: 0 auto;
	padding: 0 5px;
}

#container {
	width: 955px;
}



/* =Header
___________________________________________________________________________ */
#header {
	height: 125px;
	position: relative;
	border-top: 1px solid #fff;
}

	.header-1 { background: url(../img/banners/banner-1.jpg) no-repeat 0 0; }
	.header-2 { background: url(../img/banners/banner-2.jpg) no-repeat 0 0; }
	.header-3 { background: url(../img/banners/banner-3.jpg) no-repeat 0 0; }
	.header-4 { background: url(../img/banners/banner-4.jpg) no-repeat 0 0; }
	.header-5 { background: url(../img/banners/banner-5.jpg) no-repeat 0 0; }
	.header-6 { background: url(../img/banners/banner-6.jpg) no-repeat 0 0; }
	.header-7 { background: url(../img/banners/banner-7.jpg) no-repeat 0 0; }
	.header-8 { background: url(../img/banners/banner-8.jpg) no-repeat 0 0; }
	.header-9 { background: url(../img/banners/banner-9.jpg) no-repeat 0 0; }
	.header-10 { background: url(../img/banners/banner-10.jpg) no-repeat 0 0; }


	#header .logo h1 {
		background: url(../img/logo.png) no-repeat 0 0;
		display: block;
		width: 103px;
		height: 90px;
		text-indent: -9999px;
		position: absolute;
		top: 16px;
		left: 40px;
		behavior: url(../styles/iepngfix.htc);
	}

	#header .tag h2 {
		background: url(../img/logo-tag.png) no-repeat 0 0;
		display: block;
		width: 296px;
		height: 90px;
		text-indent: -9999px;
		position: absolute;
		top: 16px;
		left: 173px;
		behavior: url(../styles/iepngfix.htc);
	}



/* =Sub Header
___________________________________________________________________________ */
#subHeader {
	position: relative;
	height: 59px;
	padding-top: 2px;
	background: url(../img/bg-subHeader.gif) no-repeat 0 0;
	color: #fff;
}

	#subHeader div {
		text-align: right;
		padding-right: 28px;
		line-height: 22px;
	}

	#subHeader .numbers {
		padding-top: 4px;
	}

	#subHeader .numbers span {
		padding: 0 10px;
	}


/* =Footer
___________________________________________________________________________ */
#footer {
	height: 12px;
	width: 965px;
	margin: 0 auto;
	background: url(../img/bg-footer.gif) no-repeat 0 0;
	text-align: right;
	padding: 0 5px 20px 5px;
	color: #333;
	font-size: 85%;
}

	.footer-home {
		background-image: url(../img/bg-footer-home.gif) !important;
	}



/* =Main Navigation
___________________________________________________________________________ */
#mainNav {
	float: left;
	padding: 2px;
}

	#mainNav li {
	}
	
	#mainNav a {
		display: block;
		width: 190px;
		padding-left: 20px;
		height: 27px;
		line-height: 27px;
		background: url(../img/nav/bg.gif) repeat-y 0 0;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		border-top: 1px solid #6d94a8;
		border-bottom: 1px solid #0d3543;
	}

	#mainNav a:hover {
		background-position: 100% 0;
	}


	/* TEMP */
	#mainNav li.faqs { display: none; }

	#mainNav li.selected a {
		background-position: 100% 0;
	}

	
	#mainNav .subNav {
		padding: 10px 0 10px 20px;
		background-color: #19628a;
	}

		#mainNav .subNav li {
			margin-bottom: 0;
			display:inline;
		}

		#mainNav .subNav li a {
			background: url(../img/subNav-arrow.gif) no-repeat 0 6px;
			font-size: 93%;
			text-decoration: none;
			padding: 0 0 5px 10px;
			display: block;
			line-height: 16px;

			/* reset inherited mainNav styles */
			text-indent: 0;
			height: auto;
			width: 165px;
			border: 0;
			
		}

		#mainNav .subNav li a:hover {
			background-position: 0 6px; /* keep at default state, #mainNav style is inherited */
			text-decoration: underline;
		}

		#mainNav .subNav li a.selected {
			text-decoration: underline;
		}



/* =Util Navigation
___________________________________________________________________________ */
#utilNav {
	position: absolute;
	top: 2px;
	left: 0;
}

	#utilNav li {
		float: left;
	}

	#utilNav li.selected a {
		text-decoration: underline;
	}
	
	#utilNav a {
		display: block;
		height: 22px;
		line-height: 22px;
		padding: 0 28px;
		color: #fff;
		text-decoration: none;
		background: url(../img/separator-utilNav.gif) no-repeat 100% 0;
	}

	#utilNav a:hover {
		text-decoration: underline;
	}



/* =Quotes
___________________________________________________________________________ */
#quotes {
	position: relative;
	width: 182px;
	font-weight: bold;
	font-size: 93%;
	font-style: italic;
	color: #772020;

	padding: 7px;
	border: 7px solid #1b6d98;
	background-color: #3c8eb9;
}

	#quotes .quote {
		background-color: #a7c5d5;
		padding: 30px 10px 0 10px;
		border: 1px solid #134d63;
	}

	#quotes .quote p {
		text-align: right;
		color: #772020;
		padding: 10px 0;
		font-style: normal;
	}

	#quotes #quoteMask {
		position: absolute;
		z-index: 1;
		background: url(../img/quotes-bg.gif) repeat-y 0 0;
		width: 160px;
		min-height: 210px;
		height: auto !important;
		height: 210px;
	}

	#quotes #quoteText {
		min-height: 210px;
		height: auto !important;
		height: 210px;
	}



/* =Content
___________________________________________________________________________ */
#content-bg {
	background: #fff url(../img/bg-content-3col.gif) no-repeat 0 0;
}

	.twoCol { background-image: url(../img/bg-content-2col.gif) !important;	}
	.bg-home { background-image: url(../img/bg-home.gif) !important; }

#content {
	min-height: 543px;
	height: auto !important;
	height: 543px;
	padding: 5px;
}

#mainContent {
	width: 443px;
	line-height: 16px;
	padding: 17px;
	margin: 0 0 0 5px;
	float: left;
}

	.fullPage { width: 692px !important; }
	.contactPage { width: 420px !important;	}

	#mainContent p,
	#secondaryContent p {
		padding-bottom: 15px;
	}

	#mainContent ul,
	#secondaryContent ul {
		padding-bottom: 15px;
	}

		#mainContent ul li {
			background: url(../img/list-arrow-green.gif) no-repeat 10px 5px;
			padding-left: 20px;
			margin-bottom: 3px;
		}

		#mainContent ul.check li {
			background: url(../img/list-check.gif) no-repeat 10px 3px;
			padding-left: 25px;
		}


	#mainContent blockquote {
		margin: 0 0 15px 20px;

	}

	#mainContent .organization {
		padding-bottom: 10px;
	}

		#mainContent .organization img {
			float: right;
			padding: 0 0 15px 15px;
		}

	#mainContent .photo-wrapper {
		float: right;
		background: url(../img/photo-shadow.gif) no-repeat 50% 100%;
		padding-bottom: 6px;
		margin: 0 0 10px 20px;
	}

	#mainContent .photo-wrapper-small {
		float: right;
		background: url(../img/photo-shadow-small.gif) no-repeat 50% 100%;
		padding-bottom: 4px;
		margin: 0 0 10px 20px;
	}

	#mainContent .photo-wrapper-board {
		float: left;

		background: url(../img/photo-shadow-small.gif) no-repeat 50% 100%;
		padding-bottom: 4px;
		margin-bottom: 0 0 10px;
	}

	#mainContent .board {
		float: left;
		width: 130px;
		margin: 10px 40px 20px 0;
	}

	#mainContent .photo {
		border: 1px solid #b9b9b9;
		padding: 1px;
		background-color: #fff;
		display: block;
	}

	#mainContent .photoset {
		margin-bottom: 15px;
		clear: left;
	}

	#mainContent .photoset img {
		border: 1px solid #bbb;
		padding: 3px;
		background-color: #fff;
		float: left;
		margin: 0 10px 10px 0;
	}


	/* homepage specific */
	.homepage-wrapper {
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
	}
	.homepage {
		background-color: transparent !important;
		padding: 0 !important;
		width: 477px !important;
	}


	
	#mainContent .block-wrapper {
		border: 1px solid #b9b9b9;
		padding: 1px;
		background-color: #fff;
		margin-bottom: 5px;
	}
	#mainContent .block {
		background-color: #e5e5e5;
		padding: 15px;
	}



	#mainContent #grant {
		border-top: 1px solid #b9b9b9;
		margin-top: 20px;
		padding: 10px 0 0 10px;

	}

		#mainContent #grant img {
			float: left;
			margin-right: 20px;
		}

		#mainContent #grant p {
			padding-top: 16px;
			margin-bottom: 0;
			font-size: 85%;
		}

	#mainContent #home-contact {
		padding: 20px 0 0 20px;
	}

		#mainContent .col {
			float: left;
			width: 200px;
			margin-right: 10px;
		}



/* =Secondary Content
___________________________________________________________________________ */
#secondaryContent {
	float: right;
	width: 210px;
	padding: 17px;
	line-height: 16px;
	color: #fff;
}
	#secondaryContent a {
		color: #085f90;
	}

	#secondaryContent a:hover {
		color: #053c5c;
	}

	#secondaryContent .credit {
		font-size: 85%;
		background: url(../img/separator-secondaryContent.gif) repeat-x 0 0;
		padding-top: 10px;
		color: #12475a;
	}

	#secondaryContent ul li {
		background: url(../img/list-arrow.gif) no-repeat 10px 5px;
		padding-left: 20px;
		margin-bottom: 3px;
	}

	.contactForm {
		width: 265px !important;
	}

	#secondaryContent input.field,
	#secondaryContent textarea {
		width: 200px;
		border: 1px solid #666;
		padding: 3px;
		font-family: arial;
	}

	label.error {
		color: #000;
		font-size: 85%;
		font-weight: bold;
	}

	#secondaryContent textarea {
		font-size: 93%;
	}




/* =Features
___________________________________________________________________________ */
#secondaryContent .feature {
	color: #12475a;
	margin-bottom: 15px;
	background-position: 0 100%;
	background-repeat: no-repeat;
}

#secondaryContent .feature a {
	color: #fff;
}

	.feature-bookrace {padding-bottom:70px; background-image: url(../img/feature-bookrace.gif); }
	.feature-cards {height: 130px; background-image: url(../img/feature-cards.gif); }
	.feature-donate {height: 130px; background-image: url(../img/feature-donate.gif); }


/* =News
___________________________________________________________________________ */
#news {
	display: block;
	padding: 5px 0;
	margin-top: 3px;
	color: #12475a;
}

#news a {
	color: #fff;
}

#news a:hover {
	color: #fff;
}

#news p {
	margin-bottom: 0;
}

.news-item {
}

.news-item p.date {
	font-size: 85%;
	padding-bottom: 5px !important;
}

.news-item h4 {
	padding-bottom: 10px;
	margin-bottom: 0;
	color: #333;
	font-size: 116%;
	background: none;
}



/* =Sitemap
___________________________________________________________________________ */
#sitemap div {
	width: 326px;
	float: left;
	margin-right: 20px;
}

#sitemap ul ul {
	margin-top: 10px;
}

#sitemap ul li {
	font-weight: bold;
	font-size: 108%;
	margin-top: 10px;
}

#sitemap ul li ul li {
	font-weight: normal;
	font-size: 93%;
	margin-top: 0;
}



/* =Video
___________________________________________________________________________ */
object#also-video {
	margin-left: 94px;
}

#mediaspace embed {margin-left:8px;}
.fullPage #mediaspace embed {margin-left:25px;}

#mediaspace2 embed {margin-left:8px;}
.fullPage #mediaspace2 embed {margin-left:25px;}