input:required:valid {
  background-image: url("https://169.237.99.95/themes/math2012/images/good.png"); 
  background-position: right top;
  background-repeat: no-repeat;
}


input:required:invalid {
  background-image: url("https://169.237.99.95/themes/math2012/images/bad.png"); 
  background-position: right top;
  background-repeat: no-repeat;
}


/* Because setting an input messes up the look on some browsers */
/* Because the select border is disappearing unless it's this explicit */
input[type=text], select, textarea, UL.form-section select {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}

UL.form-section {
  list-style: none;
  margin-bottom: 1em;
  /* I have no idea why this works, but it adds padding correctly */
  display: table; 
  padding-left: 0;
  width: 100%;
}

.form-example {
  font-style: italic;
  padding-left: 0.5em; /* To separate this from form fields */
}

form UL.form-section LI {
  clear: both;
}
/* Include .larger for labels that have long text? */
form UL.form-section LI label, form.form-section UL LI input {
  float: left; 
}
form UL LI.short label, form UL LI.medium label, form UL LI.long label {
  width: 9em;
}
form UL LI.tall label, form UL LI.full label {
  float: none;
}
form UL LI.short input { width: 6em; } /* Zip codes, State */
form UL LI.medium input { width: 15em; } /* Names, City */
form UL LI.long input { width: 25em; } /* Email */
.content_left form UL LI.long input { width: 20em; } /* Email */
form UL LI.full input, form UL LI.full textarea { 
/*  margin-left: auto; margin-right: auto;  */
  width: 100%;
  margin-bottom: 0.5em;
}
form UL LI.tall textarea { 
/*  margin-left: auto; margin-right: auto;  */
  width: 100%;
  height: 10em;
  margin-bottom: 0.5em;
}

form UL LI.left label { float: none; }
form UL LI.left input { float: left; }


/* Shouldn't be in use */
form UL.form-section label { padding-right: 1.5em; }


/* LOA Long/Sabbatical form hiding */
body { display: block; }
.loa_sabb, .loa_leave { display:none; }  
.optional_section { background: #ddd; padding: 1em;}