@charset "UTF-8";
/* CSS Document 
shadow gray:	#ccc
header sage:	#663
red:			#c00
gold:		#fc0
*/

.home #gestalt {
	border-top: 1px solid #fff;
}
.home #maincontent { padding: 35px; }

.home #header {
	height: 125px;
	background: #000 url(/wp-content/uploads/program.jpg)no-repeat left top;
	background-size: auto 100%;
}

#spotlight {
	width: 100%;
	background: #eee;
	margin-bottom: 1.5em;
	padding:25px;
	position: relative;
	-moz-box-shadow: 5px 5px 5px #ccc;
	box-shadow: 5px 5px 5px #ccc;
}
#spotlight img {
	max-width: 100%;
	height: auto;
}

#ongoing div {
	color: #666;
	position: relative;
	padding-left: 120px;
	height: 100px;
	margin-bottom: 1em;
}
#ongoing div p { margin-top: 0; }
#ongoing a:link img, #ongoing a:visited img {
	width: 100px;
	height: 100px;
	position: absolute;
	left:0; top:0;
	padding: 4px;
	border: 1px solid #ccc;	
}
#ongoing a:hover img { border-color: #c00; }
#ongoing a:active img { border-color: #FC0; }
#ongoing::after {
	content: " ";
	display: block;
	clear: both;
}
#contactInfo { 
	padding-left: 35px;
	margin-bottom: 3em;
}
.home h3, #contactInfo h2 {
	font: normal 28px/1em "MisoLight", "Arial Narrow", "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	color: #663;
	letter-spacing: -.04em;
	margin-top: 0;
}

@media screen and (max-width: 768px) {
	.home #nav ul {
		padding-top: 126px;
	}
}

@media screen and (min-width: 769px) {
	.home #header {
		margin-top: 100px;
		height: 335px;
		background: #fff url(images/banner.jpg)no-repeat left bottom;
		background-size: auto;
		position: relative;
	}
	.home #nav ul {
		position: absolute;
		left: 18px;
		top: 0;
	}

	#of-interest {
		width: 700px;
		float: left;
		margin-right: 50px;
		margin-bottom: 2em;
	}
	#spotlight {
		min-height: 260px;
	}
	#spotlight h2{
		text-transform: uppercase;	
		font: 16px "MisoLight", "Arial Narrow", sans-serif;
		color: #000;
		margin-top: 0;
		position: absolute;
		right: 20px;
		top: 20px;
	}
	#spotlight h3 {
		margin-top: 2em;
	}
	#spotlight img {
		float: left;
		margin-bottom: 0;
		margin-right: 20px;
		max-height: 250px;
		max-width: 400px;
		height: auto;
		width: auto;
	}
	#spotlight::after {
		content: " ";
		display: block;
		clear: both !important;
	}
	#ongoing div {
		width: 48%;
		margin-right: 2%;
		float: left;
	}
	#ongoing::after {
		content: " ";
		display: block;
		clear: both;
	}
}

@media screen and (min-width: 990px) {
	#contactInfo { 
		position: absolute;
		left: 750px;
		top: 468px;
	}
}