/*
   Styles to lay out forms.
   
   Sometimes Internet Explorer will not display items within a form. They ARE there, Internet
   Explorer just didn't position them correctly. Add the following HTML to any tag that
   doesn't seem to display in Internet Explorer:
   
   <tag style="position: relative;"></tag>
   
   Internet Explorer 5.x/Mac often chokes on relatively positioned elements. So always test
   it on that browser. You can always use the backslash hack to hide CSS rules from IE5/Mac.
   You would just use the backslash hack inside the style="" attribute.
   
   A class was especially made to account for this. See below ( .fixIEPositionBug )
   
   You can apply more than one class to a tag by placing a space between each class name
   inside the class="" attribute. For example: class="fixIEFloatBug inputBorder" applies both
   the fixIEFloatBug and inputBorder classes to the same tag.
*/

.errors {
  color: #900;
}

fieldset {
  margin: 1.5em 0;
  padding: 5px;
  border: 1px solid #5a1021;
}

/*
   Internet Explorer/Win has a float bug that adds a 3 pixel margin to any floated object.
   As a result, form input boxes next to the item text in the <label> tag will appear 3 more
   pixels to the right than form input elements not beside text in the <label> tag. Apply
   the class below to the affected input elements to account for this bug.
   
   EXAMPLE:
   
   <p class="formItems">
    <label>Item label is floated left.</label>
    <span><input type="text" name="text1" size="10" class="fixIEfloatBug" /></span>
    <span class="spacer">&nbsp;</span>
   </p>
*/
.fixIEfloatBug { margin-left: -3px; }

/* What standards browsers want. Geck-based browsers seem to ignore this for some reason.
   Opera is fine. */
html>body .fixIEfloatBug { margin-left: 0; }

form { margin: 0; }

.formButtons {
  text-align: center;
}

.formItems {
  margin: .75em 0;
}

.formItems label {
  display: block;
  text-align: right;
  float: left;
  width: 30%;
}

/* Once in a while IE/Win won't position text in the label tag correctly. Apply this class
   to the label tag that doesn't appear in IE/Win to fix the problem. It is hidden from
   IE5/Mac because it usually chokes on relative positioning. Try this first before using
   the inline style. */
div.formItems label.fixIEpositionBug {
  /* Begin IE5-Mac hack \*/
  position: relative;
  /* End IE5-Mac hack */
}

.formItems span.spacer, div.formItems div.spacer {
  display: block;
  clear: both;
  height: 1px;
  overflow: hidden;
}

/*
   If you just have one field input per line, then encase the elements in a paragraph. If you
   need more than one input per field, then place it in its own <fieldset> tags and use the
   <legend> tag to give that set of items a name.
   
   If you need to insert more HTML into a one-item field, encase it in <div> tags instead of
   span tags.
*/
p.formItems span, div.formItems div {
  margin-left: 30%;
  padding-left: 10px;
  display: block;
}

p.formItems span label, div.formItems div label {
  display: inline;
  float: none;
  padding: 0;
  margin: 0;
  /* Account for IE5/Win bug that keeps the same width for unfloated, inline <label> tags
     as for floated, block-level <label> tags. */
  width: auto;
}

p.formItems label span, div.formItems label span {
  display: inline;
  margin: 0;
  padding: 0;
  width: auto;
}

/* IE/Win places a top margin on block-level items and moves the form input elements
   down an equal distance as the top margin. */
div.formItems div * { margin-top: 0; }

.formTable td {
 vertical-align: top;
}

.formTable th label {
 display: block;
}

.formTable th {
 font-weight: normal;
 text-align: right;
 vertical-align: top;
}

/* Use this class on any input element that you want to have a border. */
.inputBorder {
  border: 1px solid #000;
}

label {
 cursor: pointer;
 cursor: hand;
}

legend {
  color: #5a1021;
  font-weight: 900;
}

span.required {
 color: #900;
 font-size: 1.2em;
 font-weight: bold;
 line-height: .9em;
 vertical-align: middle;
}