 
*:focus { outline: none; } 
/* === Form Typography === */
body { font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; } 
.contact_form h2, 
.contact_form label { text-align: center } 

.form_hint, 
.required_notification { font-size: 11px; } 

/* === List Styles === */ 
.contact_form ul { width: 750px; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; } 
.contact_form li { padding: 5px; position: relative; margin-bottom: -10px;} 
/*.contact_form li:first-child, .contact_form li:last-child { border-bottom: 1px solid #777; }*/


/* === Form Header === */ 
.contact_form h2 { margin: 0; display: inline; text-align: center } 
.contact_form h3 { margin: 0.5em;} 
.required_notification { color: #d45252; margin: 5px 0 0 0; display: inline; float: right; }

/* === Form Elements === */ 

.contact_form label { width: 150px; margin-top: 3px; display: inline-block; float: left; padding: 3px; } 

.contact_form input {margin-left: 10%; height: 15px; width: 500px; padding: 5px 8px;  display:inline;} 

.contact_form select {margin-left: 10%; height: 25px; width: 540px; padding: 5px 8px; } 
.contact_form input[type=date] {margin-left: 9%; height: 15px; width: 180px; padding: 5px 8px;  display:inline;}



/* form element visual styles */ 

.contact_form input, 
.contact_form textarea,select { border: 1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
                                border-radius: 2px; padding-right: 30px; -moz-transition: padding .25s;
                                -webkit-transition: padding .25s; -o-transition: padding .25s; 
                                transition: padding .25s; width: 500px; } 
.contact_form input:focus,select:focus 
.contact_form textarea:focus { background: #fff; border: 1px solid #555; box-shadow: 0 0 3px #aaa; padding-right: 70px; } 

/* === HTML5 validation styles === */ 
.contact_form select,input:required{ 
    background: #fff url(img/red_asterisk.png) no-repeat 98% center; } 

.contact_form input:required:valid, 
.contact_form textarea:required:valid { 
    background: #fff url(images/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/invalid.png) no-repeat 98% center;
                                       box-shadow: 0 0 5px #d45252; border-color: #b03535; } 

/* === Form hints === */ 
.form_hint { background: #d45252; 
             border-radius: 10px 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 select:focus + .form_hint { display: inline; } 
.contact_form input:required:valid + form_hint { background: #28921f; } 
.contact_form input:required:valid + .form_hint::before { color: #28921f; } 
.contact_form textarea:required:valid + .form_hint::before { color: #28921f; } 
.contact_form select: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; 
height: 25px;width: 200px; }
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; height: 25px; width: 200px;}

input
{
    font-family: 'Lucida Sans';
    font-size: 12px;
    /*text-transform: uppercase;*/
}
 