input[type=checkbox], input[type=radio]{ vertical-align:middle}
input[type=checkbox].check:checked+.validate,input[type=radio].check:checked+.validate{color:#FFBA00 !important}
.none{display:none;}

.validate input:focus, .validate textarea:focus, .validate select:focus {
    -moz-box-shadow: 0 0 3px #aaa; 
    -webkit-box-shadow: 0 0 3px #aaa; 
    box-shadow: 0 0 3px #aaa; 
}
.validate, .validate textarea { /* add this to the already existing style */
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
	padding: 10px;
}
/* Button Style */
::-webkit-validation-bubble-message {
    padding: 0;
}
.validate input:focus:invalid, .validate textarea:focus:invalid, .invalid { /* when a field is considered invalid by the browser */
    border-color: #b03535
}
.validate input:required:valid, .validate textarea:required:valid { /* when a field is considered valid by the browser */
    border-color: #28921f;
}

.form_hint {
    background: #333;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    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: "\25B2"; /* left point triangle in escaped unicode */
    color:#333;
    position: absolute;
    bottom:73%;
    left: 5%;
}
.validate input:focus + .form_hint {display: block;}
.validate input:required:valid + .form_hint {background: #333;} /* change form hint color when valid */
.validate input:required:valid + .form_hint::before {color:#333;} /* change form hint arrow color when valid */