/*Base Style Changes*/
h2 {
	text-transform: uppercase;
}
/*set header images to respond to width*/
#divHeader>a:first-of-type>img, #divHeader>img:first-of-type{
	width: 23%;
	height: auto;
	max-width:215px;
	float: left;
}
#divHeader #imgHeaderText{
	width: auto;
	height: 100%;
	left: 0px;
	top: 0px;
	position: relative;
	margin-left: 15%;
	float: left;
}
#imgHeader2Text{
	height: auto;
	width: 420px;
	position: relative;
	margin-left: 82px;
	left: 0px;
	background-color: #addff5;
}

/*text align right*/
.text-right{
	text-align: right;
}

/*footer font*/
#divCopyright p{
	font-size:11px;
	color: #b4d0c8;
}

/*splash page spacer*/
.spacer{
	height: 100px;
	display: block;
}

/*MEDIA QUERIES*/

/*Medium*/
@media only screen and (max-width: 960px) {

	/*set content width to extend to window*/
	#divContent>#divBreadcrumbs, #divHeader, #divHeader2, #divHeader2Inner, #divFooter, 
	#divContent>#divBreadcrumbs + div.divGrayGradient, div.divPadded>form>div, 
	div.divPadded>form>div>textarea, div.divPadded #txtMessage, #splashpagebuttons,
	#divContent>div.divGrayTitleBar + div.divGrayGradient, #divContent>div.divGrayTitleBar:first-of-type,
	#divContent>div.divGrayTitleBar + div.divGrayGradient .divPadded textarea{
		width: 100% !important;
	}
	#divFooter>div, #divContent{
		width: 95%;
	}
	#divContent>#divBreadcrumbs + div.divGrayGradient>div.divPadded,
	#divContent>div.divGrayTitleBar + div.divGrayGradient .divPadded{
		width: 90% !important;
	}
	#divContent>div:first-of-type{
		width: 60% !important;
	}
	#divContent>div:first-of-type + div{
		width: 38% !important;
	}



	/*set padding*/
	#divHeader, #divHeader2, #divHeader2Inner{
		clear: both;
	}
	#divContent{
		padding: 2.5%;
	}
	#divFooter>div{
		padding-left: 5px;
	}
	#divFooter{
		padding-left: 0px;
		padding-right: 0px;
	}

	/*splash page spacer*/
	.spacer{
		height: 50px;
	}
}

@media only screen and (max-width: 880px) {
	/*set breadcrumbs to extend to entire width*/
	#divBreadcrumbs table{
		width: 100%;
	}
	#divBreadcrumbs table td.tdBreadcrumbOff, #divBreadcrumbs table td.tdBreadcrumbOn{
		width: auto;
	}
}

/*Small*/
@media only screen and (max-width: 800px) {
	
	/*resize header*/
	#divHeader2Inner{
		background-image: none;
	}
	#imgHeader2Text{
		margin-left: 25%;
		width: 52.5%;
	}
	#divHeader2, #divHeader2Inner{
		height: 90px !important;
	}
	#imgHeader2Text{
		top: 19px !important;		
	}

	/*extend breadcrumb background to fit text*/
	#divBreadcrumbs, #divBreadcrumbs table td{
		height: 52px;
		background-size: auto 52px;
		padding-left: 5px;
		padding-right: 5px;
	}
	#divBreadcrumbs{
		margin-left: -5px;
	}

	/*hide breadcrumb arrow images*/
	#divBreadcrumbs table td.tdBreadcrumbLeft, #divBreadcrumbs table td.tdBreadcrumbRightOn, #divBreadcrumbs table td.tdBreadcrumbRightOff, #divBreadcrumbs table td.tdBreadcrumbDividerOffOn, #divBreadcrumbs table td.tdBreadcrumbDividerOnOff, #divBreadcrumbs table td.tdBreadcrumbDividerOffOff{
		display: none;
	}
}

/*Smaller*/
@media only screen and (max-width: 660px) {
	/*shrink header*/
	#divHeader{
		height: 130px;
	}

	/*extend content divs fully*/
	#divContent>div:first-of-type, #divContent>div:first-of-type + div, #divContent>div{
		width: 100% !important;
	}

	/*center footer text*/
	#divFooter>div{
		text-align: center;
	}
}

/*Mobile*/
@media only screen and (max-width: 460px) {
	
	/*Shrink header*/
	#imgHeader2Text{
		margin-left: 5%;
		width: 90%;
	}
	#divHeader{
		height: 96px;
	}
	#divHeader #imgHeaderText{
		margin-left: 5%;
	}

	/*decrease font of breadcrumbs*/
	#divBreadcrumbs a, #divBreadcrumbs table td{
		font-weight: normal;
		font-size: 12px;
	}

	/*splash page spacer*/
	.spacer{
		height: 10px;
	}
}

/*Mobile Small*/
@media only screen and (max-width: 400px) {
	/*shrink header*/
	#divHeader{
		height: 80px;
	}
	
	/*change header to fit text*/
	.h1GrayTitleBar{
		margin-left: -5px;
		float: left;
	}

	/*splash page buttons*/
	#splashpagebuttons{
		margin: 10px 0px;
	}
	#splashpagebuttons span{
		margin: 0px;
	}
}

/*Mobile Smallest*/
@media only screen and (max-width: 321px) {

}