.validate-tooltip{
   color: #000;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   border: 3px solid #555;
   background: #f7f7f7;
   position: absolute;
   padding: 5px;
   margin: 0;
   padding: 0;
   width: 210px;
   min-height: 24px;
   font-size: 12px;
   z-index: 100;
    display: none;
   
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   -o-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   -ms-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* tooltip arrow/pointer */
.validate-tooltip:before,
.validate-tooltip:after{
   content: '';
    position: absolute;
    top: -8px;
    left: 101px;   
   width: 0;
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 8px solid #555;
}
.validate-tooltip:after{
    left: 105px;
    top: -4px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;   
   border-bottom: 4px solid #555;    

}

/* tooltip states/type: guide or alert */

.validate-alert{   
   background: #ffdfe0;
}
.validate-alert:after{   
   border-bottom-color:#ffdfe0;
}
.validate-guide{   
   background: #efffef;
}
.validate-guide:after{   
   border-bottom-color:#efffef;
}

/* tooltip list items */

.validate-tooltip li{
   padding: 3px 3px 3px 0px;
   list-style-type: none;
   text-align: center;
}
.validate-tooltip li.bullets{
   list-style-type: disc;
   margin-left: 18px;
   text-align: left;
}

/* Input field validation states: valid and invalid */

.validate-valid{
   border: 1px solid #00dd00;
   -webkit-box-shadow: 0px 0px 2px #00dd00;
   -moz-box-shadow: 0px 0px 2px #00dd00;
   -o-box-shadow: 0px 0px 2px #00dd00;
   -ms-box-shadow: 0px 0px 2px #00dd00;
   box-shadow: 0px 0px 2px #00dd00;
}
.validate-invalid{
   border: 1px solid #dd0000 !important;
   -webkit-box-shadow: 0px 0px 2px #ff0000;
   -moz-box-shadow: 0px 0px 2px #ff0000;
   -o-box-shadow: 0px 0px 2px #ff0000;
   -ms-box-shadow: 0px 0px 2px #ff0000;
   box-shadow: 0px 0px 2px #ff0000;
}