/* === Remove input autofocus webkit === */
*:focus {outline: none;}

.form_hint, .required_notification {font-size: 11px;}

/* === List Styles === */
.contact_form ul {
	list-style-type:none;
	list-style-position:outside;
}

.contact_form li{
	padding:12px 0; 
	position:relative;
} 

.contact_form ul > li:last-child {
	margin: 0; padding: 0;
	width: 100%;
}

.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

.contact_form label {
	display: inline-block;
	vertical-align: middle;
	height: 1.5em;
}

.contact_form input{
	height:20px; 
	width:94%; 
	padding:5px 3%;
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
}

.contact_form select  {
	width: 100%;
}

#checkboxes label {
	display: inline-block;
	height: 1em;
}

/* === Button Style === */
button.submit {
	background-color: #B12F2F;
	background: -webkit-gradient(linear, left top, left bottom, from(#B12F2F), to(#911E1E));
	background: -webkit-linear-gradient(top, #B12F2F, #911E1E);
	background: -moz-linear-gradient(top, #B12F2F, #911E1E);
	background: -ms-linear-gradient(top, #B12F2F, #911E1E);
	background: -o-linear-gradient(top, #B12F2F, #911E1E);
	background: linear-gradient(top, #B12F2F, #911E1E);
	border: 1px solid #911111;
	border-bottom: 1px solid #992B2B;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #D57474;
	-webkit-box-shadow: 0 1px 0 0 #D57474 inset ;
	-moz-box-shadow: 0 1px 0 0 #D57474 inset;
	-ms-box-shadow: 0 1px 0 0 #D57474 inset;
	-o-box-shadow: 0 1px 0 0 #D57474 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
	margin: 0 auto;
}

button.submit:hover {
	opacity:.85;
	cursor: pointer; 
}

button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #6B0B0B inset; 
	-webkit-box-shadow:0 0 10px 5px #6B0B0B inset ;
	-moz-box-shadow: 0 0 10px 5px #6B0B0B inset;
	-ms-box-shadow: 0 0 10px 5px #6B0B0B inset;
	-o-box-shadow: 0 0 10px 5px #6B0B0B inset;
}


@media all and (min-width: 500px) {

	html {
		overflow: scroll;
	}
	

	/* === Form Elements === */
	
	.form_element > input, .form_element > select {
		width: 100%;
		height: 2.5em;
	}
	
	.contact_form li {
		width: 40%;
		padding-left: 5%;
		padding-right: 5%; 
		display: block;
		float: left;
	}
	
	.contact_form input,  .contact_form select  {
		margin: 0 auto;
	}
	
	
	#checkboxes li {
		width: 23.33%;
	}

	.contact_form input:focus{
		background: #fff; 
		box-shadow: 0 0 3px #aaa; 
	}
	
	.contact_form input:focus {
		border:1px solid #555;
	}

	/* === HTML5 validation styles === */	
	.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
		background: #fff url(images/invalid.png) no-repeat 98% center;
		box-shadow: 0 0 5px #d45252;
		border-color: #b03535
	}

	/* === Form hints === */
	.form_hint {
		background: #d45252;
		border-radius: 3px 3px 3px 3px;
		color: white;
		margin-left:8px;
		padding: 1px 6px;
		z-index: 999; /* hints stay above all other elements */
		position: absolute; /* allows proper formatting if hint is two lines */
		display: none;
	}
	.form_hint::before {
		content: "\25C0";
		color:#d45252;
		position: absolute;
		top:1px;
		left:-6px;
	}
	.contact_form input:focus + .form_hint {display: inline;}
	.contact_form input:required:valid + .form_hint {background: #28921f;}
	.contact_form input:required:valid + .form_hint::before {color:#28921f;}
		
}