/*

TO BE USED AS FOLLOWS:

<div>
    <label for="first_name">First Name:</label> <input type="text" name="first_name" id="first_name" class="input"  value="" /> 
    <span>Please enter your real name here.</span>
</div> 


*/


.sform {
  margin: 0;
  padding: 0;
  width: 95%;
  margin: auto;
}

.sform fieldset {
  clear: both;
  border: 1px solid #555
  padding: 10px;
}

.sform fieldset legend {
  font-weight: normal;
  padding: 0 5px;
}


label {
}

label u {
  font-style: normal;
  text-decoration: underline;
}

input, select, textarea {

}

textarea {
  overflow: auto;
}

#masform p textarea.textarea {
	height: 100px;
}

.sform div {
  clear: left;
  display: block;
  width: 70%;
  height: expression('1%');
  margin: 0 0 3px 0;
  padding: 5px;
  position: relative;
  overflow: visible;
  border-bottom: 1px dashed #ccc;
}

.sform div span {
    display: block;
    background: #555;
    border: 1px solid #111;
    padding: 5px;
    position: absolute; 
    left: -9999px;
    top: 2px;
    z-index: 999;
    font-size: 10px;
    color: #fff;
    width: 180px;
}
.sform div:hover span, .sform div.focus span {
    left: 96%;
}

.sform div label {
  display: block;
  float: left;
  width: 35%;
  padding: 3px 2%;
  margin: 0 0 5px 0;
  text-align: right;
}

.sform div .input, .sform div .password, .sform div .upfile,  .sform div select,  .sform div multiple, .sform div textarea {
    border: 1px solid #aaa;
    border-bottom: 1px solid #555;
    margin-top: 1px;
    background: #fdfbf5;
    width: 55%;
    padding: 1px 3px;
    }

.sform div .input:hover, .sform div .password:hover, .sform div .upfile:hover,  .sform div select:hover, .sform div textarea:hover, .sform div .input:focus, .sform div .password:focus, .sform div .upfile:focus,  .sform div select:focus, .sform div textarea:focus  {
    border: 1px solid #555;
    background: #fff;
}

.sform fieldset div.notes {
  float: right;
  width: 25%;
  height: auto;
  margin: 5px 0 5px 5px;
  padding: 5px;
  border: 1px solid #b50;
  background: #ffe;
  font-size: 88%;
}

.sform fieldset div.notes h4 {

  padding: 3px 0 3px 27px;
  border-bottom: 1px solid #b50;
  color: #b50;
  font-size: 110%;
}

.sform fieldset div.notes p {
  margin: 0 0 10px 0;
  color: #b50;
}

.sform fieldset div.notes p.last {
  margin: 0em;
}

.sform div fieldset {
  clear: none;
  border: 1px solid #bbb;
  border-top: 1px solid #888;
  margin: 0 0 5px 40%;
  padding: 10px 2% 5px 2%;
  width: 52%;
}

.sform div fieldset legend {
  padding: 0 5px;
  border: none;
  background: transparent;
}

.sform div.required fieldset legend {
  font-weight: bold;
}

.sform div.optional label, label.optional {
  font-weight: normal;
}

.sform div.required label, label.required {
  font-weight: bold;
}

.sform div label.checkbox, .sform div label.radio {
  float: none;
  display: block;
  width: 90%;
  height: expression('1%');
  padding: 0;
  margin: 0 0 5px 0;
  text-align: left;
}

.sform div fieldset label.checkbox, .sform div fieldset label.radio {
  margin: 0 0 5px 0;
  width: 90%;
}

.sform div img {
  border: 1px solid #000000;
}

.sform p.error {
  background: #e3543a;
  color: #ffffff;
  padding: 5px;
  border: 1px solid #a63c2a;
  margin: 5px auto;
}

.sform div.error {
  background: #ffffe1;
  color: #666666;
  border: 1px solid #ff0000;
}



.sform div input.upfile {

}

.sform div select.select, .sform div select.multiple {
  padding: 1px 1px;
  width: 57%;
}

.sform div input.checkbox, .sform div input.radio, input.checkbox, input.radio {
  display: inline;
  height: 14px;
  width: 14px;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0 0 0 40%;
}

.sform div.submit {
  padding: 0 0 0 40%;
}

.sform div.submit div {
  display: inline;
  float: left;
  text-align: left;
  width: auto;
  padding: 0;
  margin: 0;
}

.sform div input.submit, .sform div input.button, input.submit, input.button {
  background: white;
  color: #555;
  border: 1px solid #555;
  border-color: #999 #777 #777 #888;
  font-weight: bold;
  padding: 0 10px;
  margin: 1px;
}

.sform div.submit div input.submit, .sform div.submit div input.button {
  float: right;
  margin: 1px 1px 1px 5px;
}

.sform div small {
  display: block;
  margin: 0 0 5px 40%;
  padding: 1px 3px;
  font-size: 88%;
  height: expression('1%');
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

label img {
  behavior: url(/behaviors/label_img.htc);
}

.sform fieldset legend {
  line-height: 150%;
}

.sform input, .sform select, .sform textarea {
  background-color: #ffffff;
}

.sform textarea.expanding {
  overflow: auto;
  overflow-x: auto;
  overflow-y: visible;
}

div.optional label:before {
  content: '';
}

div.required label:before {
  content: '';
}
  
.sform div label.checkbox, .sform div label.radio, label.checkbox, label.radio {
  display: block;
  height: expression('1%');
  padding: 4px 0px 0px 18px;
  text-indent: -18px;
  line-height: 120%;
}

.sform div label.checkbox input.checkbox, .sform div label.radio input.radio, label.checkbox input.checkbox, label.radio input.radio {
  margin: 0px 0px 0px 0px;
}

.sform div label.checkbox, .sform div label.radio, label.checkbox, label.radio {
  margin: 0px 0px 0px 40%;
}

.sform div fieldset input.input, .sform div fieldset input.password, .sform div fieldset input.upfile, .sform div fieldset textarea.inputarea {
  width: 90%;
  margin: 0px 0px 0px 18px;
  margin: expression('0px 0px 0px -124px');
}

.sform div label.compact {
  display: inline;
  width: auto;
  padding: 4px 10px 0px 0px;
  text-indent: 0px;
  margin: 0px 0px 0px 0px;
}

.sform div.wide label {
  float: none;
  display: block;
}

.sform div label.wide {
  width: 98%;
}

.sform div.wide input.input, .sform div.wide input.password, .sform div.wide input.upfile, .sform div.wide select, .sform div.wide textarea {
  width: 98%;
  margin: 0px;
}

.sform div.notes p, .sform div small {
  line-height: 125%;
}

.sform div.wide small {
  margin: 0px 0px 5px 0px;
}