/*
 * Form Styles - generic
 * expected to be loaded after general styles for a web page
 * (tom oram)
 */

  :-moz-placeholder {
    color: blue;
}
 
::-webkit-input-placeholder {
    color: blue;
}

/* remove default focus style */
*:focus {outline: none;}

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.general_form h2, .general_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

.general_form {
    width: 300px;
    margin:0px;
    padding:0px;
}
.general_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.general_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
}

/* add space after ul and before /ul */
.general_form li:first-child, .general_form li:last-child {
    border-bottom:1px solid #777;
}

/* style header */
.general_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252; 
    margin:5px 0 0 0; 
    display:inline;
    float:right;
}
.general_form label {
    width:340px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.general_form input {
    height:20px; 
    width:300px; 
    padding:5px 8px;
}
.general_form textarea {padding:8px; width:300px;}
.general_form button {margin-left:156px;}

/* Visual CSS styles and CSS3 styles */

.general_form input, .general_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.general_form input:focus, .general_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}
/* Button Style */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.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;
     
}

/* Let's add a little bit of interactivity. We'll make the field that is currently selected expand by adding some padding. */
.general_form input:focus, .general_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
}

/* Now for browsers that support it, let's make the expansion of the field a smooth transition using CSS3 */
.general_form input, .general_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}

/* style the required fields by adding padding, then place a red asterisk for required */
.general_form input, .general_form textarea {
    padding-right:30px;
}

input:required, textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}

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

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

/* Form field hints */
.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;
}
/*
Finally, we are going to use the CSS adjacent selector to show and hide our form field hints. The adjacent
selector (x + y) selects the element that is immediately preceded by the former element. Since our field
hints come right after our input fields in our HTML, we can use this selector to show/hide the tooltips   
*/
.general_form input:focus + .form_hint {display: inline;}
.general_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.general_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

/* Added by tom */
input.xread {color:red;background-color:#dddddd;border:none;font-weight:bold;text-align:right;}
.errtxt {color:yellow;background-color:red;font-weight:bold;font-size:18px;}
.nrmtxt {color:black;font-weight:bold;}