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

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* background for entire page */
html { height: 100%; background: #999 url(images/seamlesstexture22_500.jpg); }

/* vertically tiled background for body */
body { min-height: 100%; margin: 0; padding: 0; font-family: "Roboto-Regular"; font-size: 90%; background: url(images/660000-bg.png) center center repeat-y; }

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

strong { font-family: "robotomedium" }

#container { /*min-height: 100%;*/ min-height: 100vh; max-width: 980px; padding: 0; margin: 0 auto; background: #660000; box-shadow: 0 0 15px #333; }

#header { width: 100%; margin: 0; padding: 0; }
#header h1 { margin: 0; padding: 0; font-weight: normal; font-size: 240%; /*font-family: "roboto_condensedlight";*/ }

#header h1 a { 
	margin: 0; 
	padding: 20px 20px 20px 30px; 
	display: block; 
	color: #FFF; 
	text-decoration: none; 
	background: #7F0D0D; 
	opacity: 1.0;
	-webkit-transition: opacity 0.3s ease-in-out; 
	-chrome-transition: opacity 0.3s ease-in-out; 
	-moz-transition: opacity 0.3s ease-in-out; 
	-o-transition: opacity 0.3s ease-in-out; 
	transition: opacity 0.3s ease-in-out; 
	}

#header h1 a:hover { 
	background: #7F0D0D; 
	text-decoration: none; 
	opacity: 0.9;
	}


#topnav { width: 100%; padding: 0; margin: 0; background: #222; }
#topnav ul:after { clear: both; content: " "; height: 0; display: block; visibility: hidden; }
#topnav ul { margin: 0 0 0 20px; padding: 10px 0 9px 0; }
#topnav ul li { margin: 0; padding: 0; list-style: none; float: left; /*display: inline;*/ }

#topnav ul li a { 
	margin: 0; 
	padding: 10px 12px 9px 12px; 
	text-decoration: none; 
	color: #FFF; 
	background-color: #222;
	-webkit-transition: background-color 0.3s ease-in-out; 
	-chrome-transition: background-color 0.3s ease-in-out; 
	-moz-transition: background-color 0.3s ease-in-out; 
	-o-transition: background-color 0.3s ease-in-out; 
	transition: background-color 0.3s ease-in-out; 
	}

#topnav ul li a.onpage { background: #7F0D0D; padding: 11px 18px 13px 18px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }

#topnav ul li a:hover { background: #7F0D0D; }

#clearboth { clear: both; }

/* home page styles */
p.homepagestatement { font-size: 110%; /*text-align: justify;*/ margin-bottom: 20px; }
p.homepagestatementNEW { font-size: 110%; /*text-align: justify;*/ margin-bottom: 20px; margin-top: 0px; }

#homepageimagematrix { position: relative; width: 960px; height: 490px; margin: 25px -30px -15px -30px; /*background: #EEE;*/ }
#mainimage { position: absolute; top: 0px; left: 30px; height: 300px; width: 524px; background: #999; border-radius: 11px; border: 1px solid #999; /*box-shadow: 0 2px 7px #666;*/ }
#subimage1 { position: absolute; top: 0px; left: 565px; height: 210px; width: 362px; background: #777; border-radius: 11px; border: 1px solid #999; /*box-shadow: 0 2px 7px #666;*/ }
#subimage2 { position: absolute; top: 310px; left: 30px; height: 150px; width: 179px; background: #C60; border-radius: 11px; border: 1px solid #999; /*box-shadow: 0 2px 7px #666;*/ }
#subimage3 { position: absolute; top: 220px; left: 565px; height: 240px; width: 362px; background: #6C0; border-radius: 11px; border: 1px solid #999; /*box-shadow: 0 2px 7px #666;*/ }
#subimage4 { position: absolute; top: 310px; left: 220px; height: 150px; width: 333px; background: #06C; border-radius: 11px; border: 1px solid #999; /*box-shadow: 0 2px 7px #666;*/ }


/*#mainbody #homepageslideshow { width: 920px; height: 370px; margin: 0 0 15px 0; padding: 0; }*/
/*#mainbody #rightslides { float: right; width: 315px; height: 370px; padding: 1px; background: #DDD; }*/


#mainbody #leftslides { float: left; width: 555px; height: 370px; overflow:hidden; padding: 1px; background: #DDD; }


/* FULL WIDTH SLIDES 2020 */
#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; }


#mainbody #recentgrantrecipients { float: right; margin: 0; padding: 0; background: #EEE; }

#mainbody #recentgrantrecipientsliner { width: 305px; height: 340px; padding: 18px 15px 10px 15px; border: 1px solid #DDD; color: #333; }

#mainbody #recentgrantrecipients h3 { border-top: none; padding: 0; margin: -5px 0 12px 0; color: #333; line-height: 100%; font-size: 140%; }
#mainbody #recentgrantrecipients h3 a { color: #7F0D0D; text-decoration: none; }
#mainbody #recentgrantrecipients h3 a:hover { text-decoration: underline; }
#mainbody #recentgrantrecipients p { font-size: 90%; line-height: 140%; padding: 0; margin: 0; }
#mainbody #recentgrantrecipients p:after { 
	content: "";
	display: block;
	height: 0px;
	clear: both; 
	} /* this works */

#mainbody #recentgrantrecipients p a { color: #7F0D0D; text-decoration: none; border-bottom: 1px dotted #7F0D0D; }
#mainbody #recentgrantrecipients p a:hover { border-bottom: 1px solid #7F0D0D; }
#mainbody #recentgrantrecipients img { float: left; margin: 0 10px 10px 0; border: 1px solid #CCC; }
#mainbody #recentgrantrecipients img:hover { border: 1px solid #888; }
#mainbody #recentgrantrecipients hr { margin: 12px 0 12px 0; padding: 0; background: #DDD; }




/* RECENT GRANT RECIPIENTS NEW HOME PAGE */
#mainbody #recentgrantrecipientsNEW { /*float: right;*/ margin: 0; padding: 0; background: #EEE; }

#mainbody #recentgrantrecipientslinerNEW { /*width: 305px; height: 340px;*/ padding: 18px 15px 10px 15px; border: 1px solid #DDD; color: #333; }

#mainbody #recentgrantrecipientsNEW h3 { border-top: none; padding: 0; margin: -5px 0 12px 0; color: #333; line-height: 100%; font-size: 140%; }
#mainbody #recentgrantrecipientsNEW h3 a { color: #7F0D0D; text-decoration: none; }
#mainbody #recentgrantrecipientsNEW h3 a:hover { text-decoration: underline; }
#mainbody #recentgrantrecipientsNEW p { font-size: 100%; line-height: 140%; /*padding: 0; margin: 0;*/ }
#mainbody #recentgrantrecipientsNEW p:after { 
	content: "";
	display: block;
	height: 0px;
	clear: both; 
	} /* this works */

#mainbody #recentgrantrecipientsNEW p a { color: #7F0D0D; text-decoration: none; border-bottom: 1px dotted #7F0D0D; }
#mainbody #recentgrantrecipientsNEW p a:hover { border-bottom: 1px solid #7F0D0D; }
#mainbody #recentgrantrecipientsNEW img { float: left; margin: 0 10px 10px 0; border: 1px solid #CCC; }
#mainbody #recentgrantrecipientsNEW img:hover { border: 1px solid #888; }
#mainbody #recentgrantrecipientsNEW hr { margin: 12px 0 12px 0; padding: 0; background: #DDD; }



#spotlightred { position: absolute; top: 270px; left: 90px; height: 190px; width: 190px; background: #C60; border-radius: 100px; box-shadow: 0 2px 7px #666; }
#spotlightgreen { position: absolute; top: 350px; left: 560px; height: 200px; width: 200px; background: #6C0; border-radius: 100px; }
#spotlightblue { position: absolute; top: 190px; left: 720px; height: 200px; width: 200px; background: #06C; border-radius: 100px; }



#mainbody { /*width: 900px;*/ background: #FFF; padding: 10px 30px 15px 30px; margin: 0px; color: #000; font-size: 100%; min-height: 500px; }

#mainbody h2 { font-weight: normal; color: #333; /*font-family: "roboto_condensedregular";*/ }
#mainbody h3 { font-weight: normal; color: #222; border-top: 1px solid #CCC; padding-top: 16px; }
#mainbody h3.notopborder { font-weight: normal; color: #222; border-top: 0px solid #CCC; padding-top: none; }
#mainbody p { line-height: 140%; }
#mainbody p a, td a { color: #7F0D0D; }
#mainbody p a:hover, td a:hover { color: #9F2D2D; }
#mainbody table { margin-bottom: 20px; background: #FFF; }
/*#mainbody p strong { color: #800000; }*/
#mainbody a img { border: none; }


/* chrome bug in rendering multiple columns: bottom images are not positioned properly */
#mainbody .twocolumntext {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	}


#mainbody #grantrecipientthumb img { float: left; width: 80px; height: 80px; padding: 1px; border: 1px solid #CCC; margin: 0 10px 0 0; }
#grantrecipientthumb p { display: block; }

#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 16px; padding: 0 0 0 0px; list-style-type: square; }
#mainbody ul li { padding: 0 0 0 0px; margin: 0; line-height: 1.7; /*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; }

#thumbnails { text-align: center; margin: 0 -8px; padding: 5px 0 0px 0; /*background: #EEE;*/ }

#thumbnails img { 
	padding: 8px; 
	background: #FFF; 
	box-shadow: 0px 2px 9px #777; 
	margin: 7px; 
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-chrome-transition: -chrome-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
	}

#thumbnails img:hover { 
	-webkit-transform: scale(1.2); 
	-chrome-transform: scale(1.2); 
	-moz-transform: scale(1.2); 
	-o-transform: scale(1.2); 
	transform: scale(1.2);
	}


/* gallery new - more responsive */
#thumbnail2holder { width: 102.5%; /*background: #999;*/ margin: 0 -1.25% 5px -1.25%; padding: 0; } 
#thumbnail2 { float: left; display: inline-block; margin: 0; padding: 1.5%; /*background: #EEE;*/ width: 22%; }
#thumbnail2 img { width: 100%; padding: 0; margin: 0; box-shadow: 0px 2px 7px #555; border-radius: 3px; }



/* gallery new 2020 */ 
#thumbnail3holder { width: 102.5%; /*background: #999;*/ margin: 0 -1.25% 5px -1.25%; padding: 0; }

#thumbnail3 { float: left; display: inline-block; margin: 0; padding: 1.5%; /*background: #EEE;*/ width: 30.333%; }

#thumbnail3 img { width: 100%; padding: 0; margin: 0; box-shadow: 0px 2px 7px #555; border-radius: 3px; }




#footer { /*width: 900px;*/ margin: 0; padding: 10px 30px 15px 30px; margin: 0; color: #FFF; background: #660000; }
#footer p.footertitle { font-size: 140%; line-height: 100%; }
#footer p.footertitle a { color: #FFF; text-decoration: none; }
#footer p.footertitle a:hover { text-decoration: none; }

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

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

#clearboth { clear: both; }

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


#homepagevideobox { float: right; margin: 0 0 20px 20px; }

/* responsive youtube video embeds, appears to work */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; 
	height: 0; 
	overflow: hidden;
	margin: 0px 0 20px 0; /* these margins appear to work - make sure yt embed dimensions are corret for videos */
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* embedded HTML5 audio added 20180408 */
audio { width: 50%; }



/* RESPSONSIVE STYLES */

@media screen and (max-width: 980px) {
	
	#container { box-shadow: none; }
	
	#topnav ul { padding: 0px 0 0px 0; }
	#topnav ul li { margin: 10px 0 9px 0; }
	#topnav ul li a { padding: 10px 15px 9px 15px; }
	#topnav ul li a.onpage { padding: 10px 18px 9px 18px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
	
	#mainbody #leftslides { 
	float:none;
	position:relative;
	width:100%;
	padding-bottom:66.666666667%;
	height:0;
	overflow:hidden;
	}
	
	#mainbody #recentgrantrecipients { float: none; width: 100%; margin: 20px auto; padding: 0; }
	#mainbody #recentgrantrecipientsliner { padding: 20px 15px 10px 15px; width: auto; height: auto; }
	#mainbody #recentgrantrecipients p { padding: 0; margin: 0; line-height: 170%; }
	#mainbody #recentgrantrecipients hr { visibility: hidden; height: 0; width: 0; }
	/*#mainbody #recentgrantrecipients img { visibility: hidden; height: 0; width: 0; margin: 0; border: none; }*/
	
	#header h1 { text-align: center; }
	#mainbody h2, h3 { text-align: center; }
	#footer { text-align: center; }
	audio { width: 60%; }
	
}


@media screen and (max-width: 768px) {
	
#mainbody .twocolumntext {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	}

	#thumbnail2 { width: 30%; }
	audio { width: 80%; }
	
	#thumbnail3 { width: 47%; }

}

@media screen and (max-width: 600px) {
	
	#header h1 a { padding: 15px 15px 15px 20px; }
	#topnav ul { margin: 0 0 0 6px; }
	#mainbody { padding: 5px 20px 10px 20px;  }
	#footer { padding: 10px 20px; }
	audio { width: 100%; }
}

@media screen and (max-width: 520px) {
	
	#thumbnail2 { width: 47%; }
	
}

@media screen and (max-width: 480px) {
	
	#header h1 { font-size: 190%; }
	#topnav { font-size: 90%; }
	
	#imageright { float: none; margin: 5px auto 20px auto; text-align: center; }
	
	#homepagevideobox { float: none; width: 100%; margin: 0 0 20px 0px; }
	
	#thumbnail3 { width: 97%; padding: 2.5% 1.5%; }

}


/* use this if heigher res gallery images */
/*@media screen and (max-width: 400px) {
	#thumbnail2 { width: 97%; }
}*/


@media screen and (max-width: 320px) {
	
	#header h1 { font-size: 150%; }
	#topnav { font-size: 80%; }
}