/* === Remove input autofocus webkit === */
*:focus { outline: -webkit-focus-ring-color auto 5px; }

/* === Form Typography === */
body {  font-family: "Arial",sans; font-size: 12px; color: #333; background: #fff; position: relative; line-height: 17px; }
.contact_form h2, .contact_form label { font-family: "Arial",sans; }
.form_hint, .required_notification { font-size: 11px; }

/* === List Styles === */
.contact_form ul { width: 500px; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
.contact_form li{ padding: 12px; border-bottom: 1px solid #eee; position: relative; } 
.contact_form li:first-child, .contact_form li:last-child { border-bottom: 1px solid #777; }

/* === Form Header === */
.contact_form h2 { margin: 0; display: inline; }
.required_notification { color: #d45252; margin: 5px 0 0 0; display: inline; float: right; }

/* === Form Elements === */
.contact_form label { width: 100%; margin-top: 3px;	display: inline-block; padding: 3px; vertical-align: middle; }
.contact_form input { height: 20px; width: 220px; padding: 5px 8px;	float: right; }
.contact_form textarea { padding: 8px; width: 300px; float: right;}
.contact_form button { margin-left: 156px; }

	/* form element visual styles */
	.contact_form input, .contact_form textarea { border: 1px solid #d2d6d7; background: #fff; padding: 4px; width: 255px; }
	.contact_form input[type="radio"] { border: none; box-shadow: none;	border-radius: none; padding-right: 0; width: 20px;	height: 20px; }
	.contact_form input[type="radio"]:focus  { background: #fff; border: none; box-shadow: none; padding-right: 70px; }

	/* === 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;
	position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -190px;
    margin-bottom: 20px;
}
.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; }
/* === Button Style === */
button.submit { background: #fff; color: #000; font-size: 11px; font-weight: normal; border: 0; padding: 4px 6px; border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #d2d6d7; }
button.submit:hover, 
button.submit:focus,
button.submit:active { background: #e77918; color: #fff; cursor: pointer; }

.validation-message-box { display: none; }
.error_alert { display: block; width: 500px; min-height: 20px; padding: 20px; box-sizing: border-box; }
.validation-message-box  p { display: none; font-size: 0; }
.error_alert p.error  { display: block; border: 2px solid red; font-size: 15px; color: red; padding: 5px 10px; }
.error_alert p.no_error { display: none; }