.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 1px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 11;
width: 220px;
}
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}


/* --- form css --- */
form {

}
label {
display:inline-block;
text-align:right;
margin:1px 1px;
width:400px;
vertical-align:middle;
padding:2px;
}
input, textarea {
display:inline-block;
margin:1px 1px;
width:300px;
vertical-align:middle;
padding:2px;
border: 1px solid;
}
input[type="checkbox"]{
	display:inline;
	width:15px;
    background:#ddd;
}
input, textarea {
border:1px solid #666;
box-shadow:0 0 4px #666;
border-radius:2px;
background:#ddd;
}

#submit {
width:160px;
background:#bed799;
cursor:pointer;
float:center;
}
/* --- error css --- */
input.error, textarea.error {
border:1px solid red;
box-shadow:0 0 4px red;
}
label.error { 
display:none !important;
}
input.error, textarea.error {
-moz-animation:glow ease-in infinite alternate 500ms;
-webkit-animation:glow ease-in infinite alternate 500ms;
-ms-animation:glow ease-in infinite alternate 500ms;
animation:glow ease-in infinite alternate 500ms;
}
@-moz-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-webkit-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-ms-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}