/* 
 * Style used by the label output mode.
 * Applied to the error labels that get positioned after an input.
 */
label.error { 
    color:#fff; 
    margin-left:2px; 
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kHCBQwHSkeQj4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAADTElEQVR42u3bPU5UURzG4f8dLjqVDZ0roJnQ0tNM4ixF1gB7GDpX4CJcgDuwcgfYAiHhWBhvYowf6Mww7+F5KgsFcil+vueeGaoDbXXyqqo+VtVxAcAzNIg5AAi6mAOAoIs5AGzCLDLmy8VptYf3Yg4AoQu9LRendVAXNcyWfn0AEBh0x+wAEB50MQeAX4t4h+6dOQCEL3TvzAEgPOhiDgDhQRdzAAgPugtwAPA4e3cpzgU4AAhf6I7ZASA86GIOAOFBF3MACA+6mANAeNDFHADCgy7mABAedJ8zB4DN2vnn0H3OHADCF7pjdgAID7pjdgDYnp0cuTtmB4Dwhe6YHQDCgy7mABAedDEHgPCguwAHAOFBF3MA2L2N3nJ3mx0Awhe6ZQ4A4UEXcwAID7qYA0B40MUcAPbDP1+KcwEOAMIXumUOAOFBF3MACA+6mANAeNDFHAD2119dinMBDgDCF7plDgDhQRdzAAgPupgDQHjQxRwAsvx0Kc4FOAAIX+htuTitg7qoYbb0aAAgMOiO2QEg12xa5o7ZASB3obfVycuq+lxVrz0OAEhd6F9uX1R7eFetXXscABC60L//oa1OLqvqwiMBgOCgT1Fv7W0Nw5FHAwA5fvwc+s3duqpdOX4HgOCFXlXVzo6Pan54XjVY6gCQGnRRB4BOgi7qANBJ0Kewu/0OAHtv/OPfuLlb1/ywLHUACF7oVY7fAaCLoIs6AHQS9Cns3qkDQH7QRR0AOgm6qANAJ0EXdQDYH+N//WsfaQOA/IVuqQNAR0EXdQDoJOiiDgCdBF3UAeBpjBv/ii7KAUD+QrfUAaCjoFdVtTeLS0sdALZvttWvfnu/rmG48pgBIHihT0vd8TsAbNW4k+/iohwA5C90Sx0AeljoljoA9LPQq6ra2fFRzQ/PRR0AgoM+hd3xOwBszPhk39nxOwDkL3RLHQB6WOiWOgD0s9CrXJQDgC6CPoXd8TsA5Add1AGgk6CLOgB0EnRRB4DHGff2J3P7HQDyF3qV2+8A0EXQp7A7fgeA/KCLOgD83hjzk3qnDgD5C73KO3UA6CLoog4AnQRd1AGgk6CLOgB0EnRRB4BOgi7qAPDNLP5/JB8+Xdft/bqqXfl1AvBcfQW3IyGQZuiNgAAAAABJRU5ErkJggg==");
    background-position:left center;
    background-repeat:no-repeat;
    padding:2px;
    padding-left:18px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
}

/*
 * Styles used by the modal output mode.
 * '.validity-modal-msg' is applied to the modal boxes 
 * and '.validity-modal-msg:hover' is applied to suggest 
 * to the user that the boxes are clickable.
 */
.validity-modal-msg { 
    position:absolute; 
    z-index:2; 
    background-color:#999; 
    border:solid 1px #000; 
    padding:4px;
    cursor:pointer; 
}
.validity-modal-msg:hover { 
    background-color:#aaa; 
}

/*
 * Styles used by the summary output mode.
 * '.validity-summary-container' is a container on the page that should contain a UL 
 * which is the actual summary. The container can hold 
 * an extra bit of text (or anything really) that explains what the summary is.
 * '.validity-erroneous' is applied to every input that fails.
 */
.validity-summary-container { display:none;color: #f56600; font-weight: bold; }
.validity-summary-output ul {  }
.validity-erroneous { border:solid 2px #f56600 !important; }