/*********/
/* FORMS */
/*********/

form {
  margin: 0;
  padding: 0;
}

select.form-select,
input.form-text,
textarea.form-textarea {                                      /* default styling for all text fields */
  background: #F6F9FB url('../img/form-bg.png') left top;
  color: #666666;
  border: 1px solid #9BABB0;
  padding: 2px 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

body.layout-first-main-last select.form-select,
body.layout-first-main-last input.form-text,
body.layout-first-main-last textarea.form-textarea,
body.layout-first-main-last div.resizable-textarea,
body.layout-first-main-last div.resizable-textarea .grippie {
  max-width: 325px;
}

input.form-submit,
input.teaser-button {                                    /* default styling for all form buttons */
  background: transparent url('../img/blue-button.png') no-repeat left center;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.916em;
  font-weight: bold;
  margin: 0 4px;
  padding: 2px 4px;
  text-transform: uppercase;
  outline: 1px solid #9BABB0;
  -moz-border-radius: 4px;
  -moz-outline-radius: 4px;
  -webkit-border-radius: 4px;
}

input.form-submit:hover,
input.teaser-button:hover  {
  background-position: right center;
  cursor: pointer;
}  

fieldset {
  border: 1px solid #D6DDB9;
  margin: 15px 0;
  padding: 10px;
}

fieldset.collapsed {
}

fieldset legend {
  font-weight: bold;
}

html.js fieldset.collapsible legend a {
  font-weight: bold;
}

form#system-theme-settings select,
form#system-theme-settings input.form-text {
  width: 95%;
}

#user-login-form {
  text-align: left;    /* LTR */
}

div.form-item label {
  font-weight: normal;
}

html.js input.form-autocomplete {
  background-position: 100% 5px;    /* LTR */
}

/* prevents fields from overflowing into sidebar-last */
body.layout-main-last input.form-text {
  width: 450px;
}


/**********
 * FORMS
 **********/

.basic_form{ margin: 0; padding: 0; position: relative; z-index: 1; } /* reset stuff */

  /* Some generals and more resets */
  .basic_form fieldset{ border: none; margin: 0; padding: 0; }
    .basic_form fieldset legend{ margin: 0; padding: 0; }

    /* This is the main unit that contains our form elements */
    .basic_form .ctrlHolder,
    .basic_form .buttonHolder{ margin: 0; padding: 0; clear: both; }

    /* Clear all floats */ 
    .basic_form:after,
      .basic_form .buttonHolder:after, 
      .basic_form .ctrlHolder:after, 
        .basic_form .ctrlHolder .multiField:after,
          .basic_form .inlineLabel:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

    /* A class to be used on a label that contains a checkbox or a radio button */
    .basic_form .inlineLabel,
    .basic_form .inlineLabels .inlineLabel,
    .basic_form .blockLabels .inlineLabel{ width: auto; float: none; margin: 0; display: block; }
      /* IE shows borders & padding on checkboxes and radio buttons if they are declared on an input element, remove them */
      /* Legacy/Inheritance fix */
      .basic_form .inlineLabel input,
      .basic_form .inlineLabels .inlineLabel input,
      .basic_form .blockLabels .inlineLabel input{ border: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------------------ */

    /* Styles for form controls where labels are above the input elements */
    /* Set the class of the parent (preferably to a fieldset) to .blockLabels */

      .basic_form label,
      .basic_form .label,
      .basic_form .blockLabels label,
      .basic_form .blockLabels .label{ display: block; float: none; padding: 0; line-height: 100%; width: auto; cursor: pointer; }
      .basic_form p.label { cursor: auto; }
      .basic_form button{ cursor: pointer; }

      /* Float the input elements */
      .basic_form .textInput,
      .basic_form .blockLabels .textInput,
      .basic_form .blockLabels .fileUpload,
      .basic_form .selectInput,
      .basic_form .blockLabels .selectInput,
      .basic_form .blockLabels select,
      .basic_form textarea,
      .basic_form .blockLabels textarea{ float: left; }
      
      /* Postition the hints */
      .basic_form .formHint,
      .basic_form .blockLabels .formHint{ float: right; margin: 0; clear: none; }
      
      /* Position the elements inside combo boxes (multiple selects/checkboxes/radio buttons per unit) */
      .basic_form .multiField,
      .basic_form .blockLabels .multiField{ width: auto; float: left; }
        .basic_form .multiField .inlineLabel,
        .basic_form .blockLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
        .basic_form .multiField .blockLabel,
        .basic_form .blockLabels .multiField .blockLabel{ float: left; width: auto; margin: 0; }
        .basic_form .multiField .blockLabel .textInput,
        .basic_form .multiField .blockLabel .selectInput,
        .basic_form .multiField .blockLabel select,
        .basic_form .blockLabels .multiField .blockLabel .textInput,
        .basic_form .blockLabels .multiField .blockLabel .selectInput,
        .basic_form .blockLabels .multiField .blockLabel select{ width: 100%; margin: 0; }

/* ------------------------------------------------------------------------------ */

    /* Styles for form controls where labels are in line with the input elements */
    /* Set the class of the parent (preferably to a fieldset) to .inlineLabels */
        .basic_form .inlineLabels label,
        .basic_form .inlineLabels .label{ float: left; margin: 0; padding: 0; line-height: 100%; position: relative; }
        
        /* Float the input elements */
        .basic_form .inlineLabels .textInput,
        .basic_form .inlineLabels .fileUpload,        
        .basic_form .inlineLabels .selectInput,
        .basic_form .inlineLabels select,
        .basic_form .inlineLabels textarea{ float: left; }

      /* Position the hints */
      .basic_form .inlineLabels .formHint{ clear: both; float: none; }
      .basic_form .inlineLabels .multiField{ float: left; }
      .basic_form .inlineLabels .multiField .inlineLabel{}
      .basic_form .inlineLabels .multiField .blockLabel{}
        .basic_form .inlineLabels .multiField .blockLabel .textInput,
        .basic_form .inlineLabels .multiField .blockLabel .selectInput,
        .basic_form .inlineLabels .multiField .blockLabel select{ display: block; width: 100%; float: none; }
        .basic_form .inlineLabels .multiField select{ float: left; }
      
/* ------------------------------------------------------------------------------ */

    /* Required fields asterisk styling for .blockLabels */
    .basic_form label em,
    .basic_form .label em,
    .basic_form .blockLabels label em,
    .basic_form .blockLabels .label em{ }
    
    /* Required fields asterisk styling for .inlineLabels */
    .basic_form .inlineLabels label em,
    .basic_form .inlineLabels .label em{  }
    
    .basic_form .inlineLabel em,
    .basic_form .blockLabels .inlineLabel em,
    .basic_form .inlineLabels .inlineLabel em{ float: left; width: 10px; margin: 0 0 0 -27px; }
    
    .basic_form label small{ font-size: .75em; color: #777; }
    
    .basic_form .inlineLabels .noLabel .inlineLabel{ margin-left: 34%; /* <- Match to width of label + gap to field */ }

/* ------------------------------------------------------------------------------ */

    /* Messages */
    .basic_form #errorMsg,
    .basic_form .error{
    }
      .basic_form #errorMsg dt,
      .basic_form #errorMsg h3{
      }
      .basic_form #errorMsg dd{
      }
        .basic_form #errorMsg ol{
        }
          .basic_form #errorMsg ol li{
          }
      .basic_form .errorField{
      }
    
    .basic_form #OKMsg{
    }

/* ------------------------------------------------------------------------------ */

    /* Columns */
    
    .basic_form .col{ float: left; }
    .basic_form .col.first{}
    .basic_form .col.last{}

  /* General */
  .basic_form fieldset{}
    .basic_form legend{ color: #333; font-weight: bold; font-size: 100%; margin: 0; padding: 1.5em 0; }
    
    .basic_form .ctrlHolder{ padding: 12px 12px 0 12px; }
    
    .basic_form .buttonHolder{ text-align: right; margin: 1.5em 0 0 0; }
      .basic_form .primaryAction{ font-weight: bold; }
      .basic_form .resetButton, .basic_form .secondaryAction{ float: left; text-align: left; background-color: yellow; }
      .basic_form button.secondaryAction{ background: transparent; border: none; color: #006280; margin: 0; padding: 0; text-decoration: underline; }
    
    .basic_form .focused{ background: #fffcdf; }
      
      .basic_form .inlineLabel input,
      .basic_form .inlineLabels .inlineLabel input,
      .basic_form .blockLabels .inlineLabel input{ float: none; display: inline; margin: 0; }
        .basic_form .inlineLabel span{ float: left; width: 90%; }
      
      .basic_form .buttonHolder .inlineLabel{ float: left; margin: .25em 0 0 0; text-align: left; }
      
      .basic_form .small { width: 30% !important; }
      .basic_form .medium{ width: 45% !important; }
      .basic_form .large {  }
      .basic_form .auto  { width: auto !important; }
        
/* ------------------------------------------------------------------------------ */

    .basic_form .blockLabels .ctrlHolder{}
      
      .basic_form label,
      .basic_form .blockLabels label,
      .basic_form .blockLabels .label{ margin: 0 0 .5em 0; font-size: 13px; font-weight: bold; color: #333; }
      
      .basic_form .textInput,
      .basic_form .blockLabels .textInput,
      .basic_form .blockLabels .fileUpload{ width: 53%; /* <- Required property */ }
    
      .basic_form .selectInput,
      .basic_form select,
      .basic_form .blockLabels .selectInput,
      .basic_form .blockLabels select{ width: 53.5%; /* <- Required property */ }
      .basic_form textarea,
      .basic_form .blockLabels textarea{ width: 100%; /* <- Required property */ height: 12em; }

      .basic_form .formHint,
      .basic_form .blockLabels .formHint{ width: 45%; /* <- Required property */ font-size: .9em; color: #777; }
      
      .basic_form .multiField,
      .basic_form .blockLabels .multiField{ width: 53%; }
        
        .basic_form .multiField .inlineLabel,
        .basic_form .blockLabels .multiField .inlineLabel{ display: block; clear: both; float: none; margin: 0 12px .5em 0; }
          .basic_form .multiField .inlineLabel input,
          .basic_form .blockLabels .multiField .inlineLabel input{ float: left; margin: 0 .5em 0 0; }
        .basic_form .multiField .blockLabel,
        .basic_form .blockLabels .multiField .blockLabel{ width: 30%; margin: 0 10px 0 0; }
        .basic_form .multiField .blockLabel .textInput,
        .basic_form .multiField .blockLabel .selectInput,
        .basic_form .multiField .blockLabel select,
        .basic_form .blockLabels .multiField .blockLabel .textInput,
        .basic_form .blockLabels .multiField .blockLabel .selectInput,
        .basic_form .blockLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }

/* ------------------------------------------------------------------------------ */

    .basic_form .inlineLabels .ctrlHolder{}
    
    .basic_form .inlineLabels label,
    .basic_form .inlineLabels .label{ width: 32%; /* <- Required property */ margin: .3em 2% 0 0; /* <- Required property */
           font-size: 13px; font-weight: bold; color: #333; }
    
    .basic_form .inlineLabels .textInput,
    .basic_form .inlineLabels .fileUpload,
    .basic_form .inlineLabels .selectInput,
    .basic_form .inlineLabels select,
    .basic_form .inlineLabels textarea{ width: 64%; /* <- Required property */ }
    .basic_form .inlineLabels textarea{ height: 12em; }

    .basic_form .inlineLabels .formHint{ width: auto; /* <- Required property */ margin-top: 0; margin-left: 34%; font-size: .9em; color: #777; position: static; }
    
    .basic_form .inlineLabels .multiField{ width: 66%; /* <- Required property */ margin: 0 0 .3em 0; }
      .basic_form .inlineLabels .multiField .inlineLabel{ display: block; margin: 0 0 .5em 0; }
        .basic_form .inlineLabels .multiField .inlineLabel input{ float: left; margin: 0 .5em 0 0; }
      .basic_form .inlineLabels .multiField .blockLabel{ float: left; width: 26%; margin: 0 3% 0 0; }
      .basic_form .inlineLabels .multiField .blockLabel .textInput,
      .basic_form .inlineLabels .multiField .blockLabel .selectInput,
      .basic_form .inlineLabels .multiField .blockLabel select{ width: 100%; margin: .3em 0 0 0; }

.basic_form .ctrlHolder .textInput:focus{ outline: none; }
.basic_form .ctrlHolder textarea:focus{ outline: none; }
.basic_form div.focused .formHint{ color: #333; }

.basic_form .col{ width: 47.9%; /* <- Required property */ margin: 0 2% 20px 0; }
/* Use .first and .last classes to control the layout/spacing of your columns */
.basic_form .col.first{ width: 49%; /* <- Required property */ float: left; clear: none; }
.basic_form .col.last{ width: 49%; /* <- Required property */ float: right; clear: none; margin-right: 0; }

.basic_form #errorMsg{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
.basic_form .error{ background: #ffdfdf; border: 1px solid #df7d7d; border-width: 1px 0; }

  .basic_form #errorMsg dt, .basic_form #errorMsg h3{ margin: 0 0 .5em 0; font-size: 100%; line-height: 100%; font-weight: bold; }
  .basic_form #errorMsg dd{ margin: 0; padding: 0; }
    .basic_form #errorMsg ol{ margin: 0; padding: 0; }
      .basic_form #errorMsg ol li{ margin: 0; padding: 2px; list-style-position: inside; border-bottom: 1px dotted #df7d7d; position: relative; }
    .basic_form .errorField{ color: #af4c4c; margin: 0 0 6px 0; padding: 4px; background: #ffbfbf; }

.basic_form #OKMsg{ background: #C8FFBF; border: 1px solid #A2EF95; border-width: 1px 0; margin: 0 0 1.5em 0; padding: 7px; }
  .basic_form #OKMsg p{ margin: 0; }
.basic_form .submit_btn { width: 72px; }
.basic_form em, .form-required { color: #F26617; }
.basic_form .ctrlHolder.submit { text-align: center; }
.basic_form .note { font-style: italic; font-size: 11px; }
.basic_form .multiField label { font-weight: normal; }
.basic_form .multiField .twocol { width: 420px; }
.basic_form .ctrlHolder .label { padding: 1em 0; }
.basic_form .multiField .twocol .col,
body.contact .basic_form .multiField .twocol .col 
 { width: 190px; padding-right: 10px; }
.basic_form .multiField .twocol .col.last,
body.contact .basic_form .multiField .twocol .col.last
 { padding-right: 0; }
.basic_form .multiField .twocol .col .inlineLabel span { width: 80%; }
.basic_form .primary_fields { padding: 10px; }
.basic_form .formHint, p.forgot_password, .basic_form .formHint span { font-size: 12px; line-height: normal; }
.basic_form .formHint, .basic_form .inlineLabels .formHint, 
.basic_form .blockLabels .formHint {
  font-size: 12px;
}
.basic_form .dates .multiField, .basic_form .blockLabels .dates .multiField {
  width: 53%;
}
.basic_form .dates label,
.basic_form .inlineLabels .dates .multiField .blockLabel,
.basic_form .dates .blockLabel, .basic_form .blockLabels .dates .blockLabel {
  width: auto;
}
.basic_form .multiField .blockLabel span {
  display: block;
}
.basic_form .multiField .blockLabel span.sep {
  display: inline;
}
.basic_form .inlineLabels .dates .multiField .blockLabel .textInput {
  display: inline;
}

.basic_form .file_uploads .fileUpload {
  clear: both;
}
.basic_form .file_uploads .formHint {
  clear: both;
  float: none;
}

.basic_form { padding-bottom: 10px; }