/*IN FIELDSSETS and UL*/
/*http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/index.html*/
.required {
color:red
}
/* === Remove input autofocus webkit === */
*:focus {
outline:none;
}
/* === Form Typography === */
form {
font:14px/21px "Lucida Sans ", "Lucida Grande ", "Lucida Sans Unicode ",sans-serif;
}

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

form .form-hint,.required_notification {
font-size:11px;
}
/* === List Styles === */
form fieldset,form ul {
/*width:750px;*/
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}

form fieldset {
margin-bottom:12px;
border:2px solid #DDD;
}

form fieldset >div {
padding:10px;
border-bottom:1px solid #eee;
}

form li {
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}

form fieldset >div:last-child {
border-bottom:none;
}

form li:first-child,form li:last-child {
border-bottom:1px solid #777;
}

.buttons {
padding:6px;
}
/* === Form Header === */
form h2 {
margin:0;
display:inline;
}

.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
/* === Form Elements === */
form label {
width:150px;
margin-top:3px;
display:inline-block;
float:left;
padding:3px;
overflow-x:hidden;
}

form input {
width:180px;
padding:5px 8px;
}

form select {
padding:5px 8px;
}

form textarea {
padding:8px;
width:180px;
}

form textarea.major {
width:300px;
}

form button,form [type=submit ] {
margin-left:156px;
}
/* form element visual styles */
form input,form select,form textarea {
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;
}

form input:focus,form select:focus,form textarea:focus {
background:#fff;
border:1px solid #555;
box-shadow:0 0 3px #aaa;
padding-right:70px;
}
/* === HTML5 validation styles === */
form input:required,form select:required,form textarea:required {
background:#fff url(/static/i/red_asterisk.png) no-repeat 98% center;
}

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

form input:focus:invalid,form select:focus:invalid,form textarea:focus:invalid {
background:#fff url(/static/i/invalid2.png) no-repeat 98% center;
box-shadow:0 0 5px #d45252;
border-color:#b03535
}
/* === Form hints === */
form .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 .form-hint::before {
content: " \25C0 ";
color:#d45252;
position:absolute;
top:1px;
left:-6px;
}

form input:focus + .form-hint {
display:inline;
}

form input:required:valid + .form-hint {
background:#28921f;
}

form input:required:valid + .form-hint::before {
color:#28921f;
}

form textarea:focus + .form-hint {
display:inline;
}

form textarea:required:valid + .form-hint {
background:#28921f;
}

form textarea:required:valid + .form-hint::before {
color:#28921f;
}

form select:focus + .form-hint {
display:inline;
}

form select:required:valid + .form-hint {
background:#28921f;
}

form select:required:valid + .form-hint::before {
color:#28921f;
}
/* === Button Style === */
form [type=reset ],form [type=button ],form [type=submit ] {
width:initial;
min-height:34px;
height:initial;
}

form [type=submit ] {
width:initial;
min-height:34px;
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;
}

form [type=submit ]:hover {
opacity:.85;
cursor:pointer;
}

form [type=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;
}

form [disabled ]:active,form [disabled ] {
box-shadow:initial;
background:buttonface;
}