@font-face {
    font-family: 'optima';
    src: url('fonts/optima-webfont.eot');
    src: url('fonts/optima-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/optima-webfont.woff') format('woff'),
         url('fonts/optima-webfont.ttf') format('truetype'),
         url('fonts/optima-webfont.svg#optima') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OptimaBold';
    src: url('fonts/OptimaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold;
}

/*html { height: 100%; }*/

body { background: #999 url(images/0B536B-bg-shadow-2.png) center center repeat-y; margin: 0; padding: 0; font-family: "optima"; }

strong { font-family: "OptimaBold"; }

#container { max-width: 1024px; min-height: 100%; padding: 0; margin: 0 auto; background: #FFF; }

#header { width: 100%; margin: 0; padding: 0; border-bottom: 0px solid #FFF; }
#header h1 { margin: 0; padding: 0; font-weight: normal; font-size: 240%; }
#header h1 a { margin: 0; padding: 25px 20px 23px 30px; display: block; color: #FFF; text-decoration: none; background: #0B536B; transition: background 0.3s ease; }
#header h1 a:hover { background: #004860; }


#topnav { padding: 0; margin: 0; background: #3F879E; border-top: 0px solid #FFF; }
#topnav ul { margin: 0; padding: 0; }
#topnav:after { content: ""; height: 0; display: block; oveflow: auto; visibility: hidden; }
#topnav ul li { margin: 0; padding: 0; list-style: none; display: inline; float: left; }
#topnav ul li a { margin: 0; padding: 12px 28px 12px 28px; text-decoration: none; color: #FFF; display: block; background: #3F879E; transition: background 0.2s ease; }
#topnav ul li a:hover { background: #0B536B; }


/* home page styles */
p.homepagestatement { font-size: 105%; text-align: justify; }

#leftslidesouter { float: left; width: 63%; margin: 0 2% 0 0; background: #999; overflow: hidden; }
#leftslidesinner { width: 100%; height: 0; padding-bottom: 66.6208791208791%; margin: 0; overflow: hidden; }

/* FULL WIDTH SLIDES */
#fullslidesouter { float: left; width: 100%; margin: 0 0% 0 0; background: #999; overflow: hidden; }
#fullslidesinner { width: 100%; height: 0; padding-bottom: 66.6208791208791%; margin: 0; overflow: hidden; }

#recentgrantrecipients { float: right; width: 34%; height: 340px; padding: 5px 0 0 0; }

#mainbody #recentgrantrecipients h3 { border-top: none; padding: 0; margin: -5px 0 12px 0; color: #0B536B; line-height: 100%; font-size: 110%; }
#mainbody #recentgrantrecipients h3 a { color: #0B536B; text-decoration: none; }
#mainbody #recentgrantrecipients h3 a:hover { text-decoration: underline; }
#mainbody #recentgrantrecipients p { font-size: 90%; line-height: 120%; padding: 0; margin: 0; }

#mainbody #recentgrantrecipients p:after { 
	content: "";
	display: block;
	height: 0px;
	clear: both; 
	}

#mainbody #recentgrantrecipients p a { text-decoration: underline; }
#mainbody #recentgrantrecipients p a:hover { text-decoration: underline; }
#mainbody #recentgrantrecipients img { float: left; margin: 0 10px 0px 0; border: 1px solid #999; }
#mainbody #recentgrantrecipients hr { margin: 12px 0 12px 0; padding: 0; background: #AAA; }


#mainbody { max-width: 964px; background: #FFF; padding: 10px 30px 15px 30px; margin: 0px; color: #333; }
#mainbody h2 { font-weight: normal; color: #555; }
#mainbody h3 { font-weight: normal; color: #444; border-top: 1px solid #CCC; padding-top: 16px; line-height: 130%; }

#mainbody p { line-height: 140%; }
#mainbody p a, td a { color: #0B536B; }
#mainbody p a:hover, td a:hover { color: #3F879E; }
#mainbody table { margin-bottom: 20px; }


#mainbody #grantrecipientthumb img { float: left; width: 60px; height: 60px; padding: 1px; border: 1px solid #CCC; margin: 0 10px 0 0; }
#mainbody #grantrecipientthumb:after { content: ""; display: block; height: 0px;clear: both; }


#featurebox { padding: 6px 20px 4px 20px; background: #DFDFDF; border-radius: 11px; line-height: 160%; }
#featurebox p { line-height: 160%; }


#mainbody ul { margin: 0 0 20px 0; padding: 0 0 0 1px; list-style: none; }
#mainbody ul li { display: block; width: 100%; /* NEEDED MISBEHAVING li */ padding: 0 0 0 13px; margin: 0; line-height: 150%; background: url(images/arrow-right2.png) 0px 8px no-repeat; }

#mainbody ul li ul { margin: 10px 0 10px 0; padding: 0 0 0 30px; }
#mainbody ul li ul li { padding: 0; margin: 0; line-height: 140%; }

#imageright { float: right; margin: 5px 0 30px 30px; }
#imageright img { padding: 8px; background: #FFF; box-shadow: 0 2px 9px #999; }

#mainbody #imagefloatright40 { float: right; margin: 0 50px 20px 0; padding: 0; width: 40%; background: #CCC; }
#mainbody #imagefloatright40 img { margin: 0; padding: 0; /*box-shadow: 0 2px 9px #999;*/ }

#thumbnails { text-align: center; margin: 0; padding: 5px 0 0px 0; }
#thumbnails img { padding: 10px; background: #FFF; box-shadow: 0px 2px 9px #999; margin: 20px; }
#thumbnails img:hover { box-shadow: 0px 2px 9px #666; }

#footer { max-width: 964px; margin: 0; padding: 10px 30px; margin: 0; color: #FFF; background: #0B536B; }
#footer p.footertitle { font-size: 140%; line-height: 100%; }
#footer p.footertitle a { color: #FFF; text-decoration: none; border-bottom: 1px solid #0B536B; }
#footer p.footertitle a:hover { border-bottom: 1px solid #FFF;  }

#footer ul { font-size: 100%; margin: 0 0 0 -12px; padding: 0; }
#footer ul li { margin: 0; padding: 0 12px 0 12px; list-style: none; display: inline; border-right: 1px solid #FFF; line-height: 150%; }
#footer ul li.hindmost { border-right: none; } 
#footer ul li a { color: #FFF; text-decoration: none; padding: 0px 0px 1px 0px; margin: 0px; border-bottom: 1px solid #0B536B; background: #0B536B; }
#footer ul li a:hover { border-bottom: 1px solid #FFF; }

#footer p.copyright { font-size: 85%; margin-top: 19px;}

#clearboth { clear: both; height: 0; }

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

hr { padding: 0; border: none; height: 1px; background: #999; }

.small { font-size: 60%; color: #0B536B; }


/* RESPSONSIVE BREAK POINTS */
@media screen and (max-width: 1024px) {

	/*body { background: #999; }*/
	
}

@media screen and (max-width: 768px) {

	body { background: #999; }

	#header h1 { font-size: 200%; }
	#header h1 a { padding: 20px 15px 18px 20px; }
	
	#topnav ul li a { padding: 10px 19px 10px 19px; font-size: 90%; }
	
	#leftslidesouter { float: none; width: 100%; margin: 0 0 20px 0; }

	#recentgrantrecipients { float: none; width: 96%; height: 340px; padding: 20px 2% 10px 2%; }
	
	#mainbody { padding: 5px 20px 10px 20px; }
	
	#footer { padding: 10px 20px; }
	#footer p.footertitle { font-size: 130%; }
	
	#footer ul { font-size: 95%; margin: 0 0 0 -8px; }
	#footer ul li { padding: 0 8px 0 8px; margin: 0 0 10px 0; }
	#footer ul li a { padding: 0; }
	
	#footer p.copyright { font-size: 80%; margin-top: 7px;}
	
}

@media screen and (max-width: 480px) {

	#header h1 { font-size: 200%; }
	#header h1 a { padding: 15px 15px 13px 15px; }
	
	#topnav ul li a { padding: 7px 15px 7px 15px; font-size: 95%; }
	
	#footer { padding: 5px 15px 10px 15px; }
	
	#footer ul { font-size: 95%; margin: 0 0 0 -8px; }
	#footer ul li { padding: 0 8px 0 8px; margin: 0 0 10px 0; line-height: 130%; }
	#footer ul li a { padding: 0; }
	
}

@media screen and (max-width: 320px) {

	#header h1 { font-size: 160%; }
	
	#imagefloatright40 { float: none; margin: 5px 0 30px 30px; width: 100%; }
	
}