/***************************
 ** ACCESSIBILITY CLASSES **
 **************************/
/* Some copied from style.css */
 
fieldset{
	border:0px;
}

.accessibilityHeader,
.accessibilitySection,
.accessibilityTag
{
	/* The equivalent of 'display: none' but leaves the elements readable by some screen readers */
	/* See http://www.csszengarden.com/063/063.css */
	display: inline;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -5000em;
	overflow: hidden;
	clip: rect(0,0,0,0);/* because 'height: 0' doesn't have any fun in IE5.5 */
	height: 0;/* because clip doesn't have any fun in IE6 */
}

.desktop-only {
	display: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

img, input, textarea {
    max-width: 100%;
}

/***************************
 **       UI Styles       **
 **************************/
 
 body {
    margin: 0;
    padding: 8px;
    background-color: #f3f3f3;
    font-family: 'Lato', sans-serif;
}

#bgGradient {
    max-width: 800px;
    margin: 0 auto;
}

a {
	color: #567c8c;
}

a:hover, a:focus {
	color: #3e5964;
	text-decoration: none;
}

.banner a, #footerText a {
    color: white;
    text-decoration: none;
}

.banner a:hover, .banner a:focus, 
#footerText a:hover, #footerText a:focus {
    text-decoration: underline;
}

	#headertextMobile, #menubar, #footerText {
		background-color: #567c8c;
		color: white;
	}

	#headertextMobile {
		padding: 8px;
	}

		#headertextMobile #OfficeAbb {
			font-size: 2.5em;
			margin-left: 8px;
		}

	.mainmenunav {
		font-size: 1.2em;
	}

		.mainmenunav a:hover, .mainmenunav a:focus {
			background-color: #50e4ff;
		}

		.mainmenunav a:hover, .mainmenunav a:focus {
			background-color: #659ca6;
		}

	#footerText {
		padding: 16px 8px;
	}

		#footerText h2 {
			margin: 0;
		}
		
		#footerText .socialMediaLinks a img {
			width: 64px;
			height: auto;
		}
		
		#footerText .socialMediaLinks a:hover img, #footerText .socialMediaLinks a:focus img {
			opacity: .5;
		}
		
form.searchbox {
    display: flex;
    margin: 1em 0;
}

	form.searchbox input#mainSearchMobile {
		flex: 1 0 8em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border: none;
		padding: 0 1em;
		color: #222;
		border: 1px solid rgba(86, 124, 140, 0.66);
		border-right: none;
		border-left: none;
	}

	form.searchbox input#searchButtonMobile {
		flex: 0 0 auto;
		border: none;
		background: #567C8C;
		color: #fff;
		text-transform: uppercase;
		border-radius: 0 2px 2px 0;
	}

		form.searchbox input#searchButtonMobile:hover, form.searchbox input#searchButtonMobile:focus {
			background-color: #659ca6;
		}

		form.searchbox input#searchButtonMobile:hover {
			cursor: pointer;
		}
		
		form.searchbox input#mainSearchMobile:focus {
			border-color: #567c8c;
		}

	form.searchbox:before {
		flex: 0 0 1.2em;
		border-radius: 2px 0 0 2px;
		background: #567C8C;
		font-family: 'FontAwesome';
		font-weight: normal;
		font-style: normal;
		color: #fff;
		content: "\f002";
		font-size: 1.2em;
		padding: .4em .3em;
		text-align: center;
	}

/***************************
 **    Home Page Styles   **
 **************************/
 
.homePageContainer, #pageContent {
    background-color: #fff;
    border: 1px solid #567c8c;
    border-radius: .5em;
    padding: 1em;
    margin-top: 1em;
}

.homePageContainer h2 {
    margin: 0;
    text-align: center;
}

#pageContent h1 {
	margin: 0;
}


.contactControls {
    display: flex;
    flex-wrap: wrap;
}

.contactControls > * {
    margin-right: 2em;
}