/*
   Styles for TMS forms
   $Id$

   -------------------------------------------------------------------

   The directives below expect the following markup:

   1. Each field is wrapped in a <div/> element of class 'widget'
   (note that a group of checkboxes/radio buttons is considered one
   field in this context)

   2. Except for checkboxes and radio buttons, each widget wrapper has
   the following children:

    a) a <label/> element

    b) an optional <p/> containing a field description

    c) the form control element (<input/>, <textarea/>, <select/> etc.)

   3. For groups of checkboxes and radio buttons the widget wrapper is
   structured as follows:

    a) one <label/> for the entire group

    b) a <label/> element for each checkbox/radio option which in turn
    contains the <input/> element and a <span/> holding the option
    text

*/

form {
  margin: 0;
}

form fieldset {
  padding: 10px;
  padding-top: 10px;
  margin: 0 0 1.2em 0;
  border: 1px solid #888;
}

form legend {
  color: #444;
  font-weight: bold;
  padding: 0px 4px;
}

form div.widget {
  padding: 0 0;
  margin-top: 0.6em;
  clear: left; /* clear possible floats in previous widgets */
}

/*
   Main labels for input fields and checkbox/radio groups are
   rendered as block elements above the form controls.
*/
form div.widget label {
  display: block;
  color: #444;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: .2em;
}

/*
   Special labels wrapping individual checkboxes/radio buttons
*/
form div.widget label.radio,
form div.widget label.checkbox {
  clear: left;
  color: black;
  font-weight: normal;
  white-space: normal;
}

/*
   Checkbox and radio button controls are floated to achieve
   nice indentation of associated option text spanning
   multiple lines.
*/
form div.widget label.checkbox input,
form div.widget label.radio input {
  display: block;
  float: left;
  clear: left;
}

form div.widget label.checkbox span,
form div.widget label.radio span {
  display: block;
  margin-left: 22px; /* simulate indentation */
  padding: .1em 0 .3em; /* nicer vertical alignment of text and control */
  cursor: default;
}

/*
   IE: work around for pixel bug with floats by setting a width;
   increase top padding since IE always adds a padding around checkbox
   and radio controls
*/
* html form div.widget label.checkbox span,
* html form div.widget label.radio span {
  width: 95%;
  padding-top: .2em;
}

/*
   IE: revert the previous trick for checkboxes arranged in tables
*/
* html form div.widget table label.checkbox span,
* html form div.widget table label.radio span {
  width: auto;
}


/*
   Compact checkbox/radio button groups are achieved by rendering the
   label inline; 'nowrap' is vital to prevent form control and option
   text from being separated
*/
form div.widget label.radio-compact,
form div.widget label.checkbox-compact {
  display: inline;
  color: black;
  font-weight: normal;
  white-space: nowrap;
}

/*
   Highlight checkbox/radio button control and its associated option
   text on mouseover
*/
form div.widget label.radio:hover,
form div.widget label.checkbox:hover,
form div.widget label.radio-compact:hover,
form div.widget label.checkbox-compact:hover {
  background-color: #dedede;
}

/*
   Tables for checkbox/radio button arrangement
*/
form div.widget table {
  margin-top: .3em;
  border: none;
  border-spacing: 0;
}

form div.widget table td {
  padding: 0;
}

/* field descriptions */
form div.widget p {
  margin: 0 0 .2em 0;
}

/* error messages */
form div.error label {
  color: #e00;
}

form div.buttonbar {
  padding: 5px 10px;
  border: 1px solid #888;
  text-align: right;
}

form div.buttonbar input.submit {
  float: none;
}

form div.buttonbar input.reset {
  float: left;
}

p.tms-form-fineprint {
  font-size: 11px;
  color: #444;
  margin: 1em 0;
}


/* ==== OMB number and expiry ==== */

p.tms-form-omb {
  margin: 0;
  color: #444;
  font-size: smaller;
  text-align: right;
}


/* ==== Compact fieldsets ==== */
/*
 * In compact fieldsets we float the main labels so that they appear
 * on on line with the corresponding input field.
 */

form fieldset.compact { padding-top: 1em; background-color: white;}
/* fixing space between fieldset border and top widget for IE */
* html form fieldset.compact legend { margin-bottom: .8em; }

form fieldset.compact div.widget label {
  width: 10em;
  float: left;
  padding-right: .5em;
  text-align: right;
}

form fieldset.compact div.widget input,
form fieldset.compact div.widget select {
  font-size: 11px;
}

form fieldset.compact input.submit-button {
  float: right;
  margin-top: -1.5em;
}

form fieldset.compact.w15 div.widget label {
  width: 15em;
}


/* ==== EME checkboxes ==== */

/* eme-headline, eme-tagline */
form div.widget label.checkbox span span {
  padding: 0; margin: 0;
}

form div.widget label.checkbox span span.eme-headline {
  font-weight: bold;
}

/* eme-country, eme-title, eme-description, eme-date */
form div.widget label.checkbox span span span {
  display: inline;
}

/* Note: other EME related declarations in contents.css */


/* ==== Forms Summary ==== */

table#formx-summary {
  border-top: 1px solid #aeaeae;
  border-collapse: collapse;
  margin-bottom: 1em;
}

table#formx-summary th,
table#formx-summary td {
  padding: 4px;
  vertical-align: top;
  border-bottom: 1px solid #aeaeae;
}

table#formx-summary tr {
}

table#formx-summary th {
  color: #646464;
  font-weight: bold;
  font-size: 11px;
  text-align: left;
}

table#formx-summary th.section {
  font-size: 12px;
  font-style: italic;
  padding-top: 1em;
  background-color: #dedede;
}

table#formx-summary td ul {
  margin: 0;
  padding: 0 0 0 1em;
}

table#formx-summary td ul li {
  margin: 0;
  padding: 0;
}