#regbutton.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
#regbutton.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;
     
}

.reg_form input:focus:invalid, .reg_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(../bilder/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}


.reg_form input:required:valid, .reg_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(../bilder/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.reg_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;
}

.reg_form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}

.reg_form input:focus + .reg_form_hint {display: inline;}
.reg_form input:required:valid + .reg_form_hint {background: #28921f;} /* change form hint color when valid */
.reg_form input:required:valid + .reg_form_hint::before {color:#28921f;} /* change form hint arrow color when valid */