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

/* === Form Typography === */

.contact_form h2, .contact_form label 
{
    font-family:Georgia, Times, "Times New Roman", serif;
}

.form_hint, .required_notification 
{
    font-size: 100%;
}

/* === List Styles === */
.contact_form ul 
{            
    width:100%;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}

.contact_form li
{    
    margin-bottom: 5%;
    width: 100%;
} 

.contact_form li:first-child
{
    border-bottom:1px solid #777;
    margin-bottom: 5%;
}

/* === Form Header === */
.contact_form h2 
{
    margin:0;
    display: inline;
}
.required_notification 
{
	color:#ffa200; 
	margin-top:1%; 
	display:inline;

}

/* === Form Elements === */
.contact_form label 
{
    width:24%;
    margin-top: 5%;
    display:inline-block;
    float:left;
}
.contact_form input 
{
    background-color: #ffa200;
    width: 92%;
    height:5%; 
    padding:2% 6% 2% 2%;
    margin-top: 2%;
}
.contact_form textarea 
{
    padding:2%; 
    background-color: blue;
}
.contact_form button 
{
    margin-left:70%;
}

/* form element visual styles */
.contact_form input, .contact_form textarea 
{ 
        border:1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        border-radius:2px;
        -moz-transition: padding .5s; 
        -webkit-transition: padding .5s; 
        -o-transition: padding .5s;
        transition: padding .5s;
}
        
.contact_form input:focus, .contact_form textarea:focus 
{
        background: #fff; 
        border:1px solid #555; 
        box-shadow: 0 0 3px #aaa; 
        //padding-right:33%;
        margin-bottom: 1%;
}

/* === HTML5 validation styles === */	
.contact_form input:required, .contact_form textarea:required 
{
	background: #fff url(../images_contact/red_asterisk.png) no-repeat 98% center;
}

.contact_form input:required:valid, .contact_form textarea:required:valid 
{
	background: #fff url(../images_contact/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid 
{
	background: #fff url(../images_contact/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #ff7200;
	border-color: #ffa200;
}


/* === Form hints === */
.form_hint 
{
	background: #ff7200;
	border-radius: 3px 3px 3px 3px;
	color: white;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: relative; /* allows proper formatting if hint is two lines */
	display: none;
        font-size: 80%;
}

/*.form_hint::before {
	content: "\25B2";
	color:#ff7200;
	position: absolute;
	left:-8px;
        position: absolute;
        margin-top:-6%;
        margin-left: 5%;
}*/
.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-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	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 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover 
{
	opacity:.85;
	cursor: pointer; 
}

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