/*  Less Framework 4
    http://lessframework.com
    by Joni Korpi
    License: http://opensource.org/licenses/mit-license.php */

/*      Default Layout: 992px.
        Gutters: 24px.
        Outer margins: 48px.
        Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

/* *********************************************************** */
/* ERROR message/indicator related CSS                         */
/* *********************************************************** */

div#contact_info_section_one div.form-error,
div#personal_info_section_one div.form-error {
    margin-right: 4px;
}

/* ************************ */
/* Survey Question Numbers  */
/* ************************ */

.responsive div.survey-question-container span.survey-question-number {
  text-indent: 15px;
}

/*
Multi-input questions have div instead of span due to fieldset/legend, so float is necessary to present it like the
spanned single-input questions
*/
.responsive div.survey-question-container div.survey-number-required-container {
    float:left;
}

.responsive div.survey-question-container span.survey-textarea-container textarea {
  margin-left: 4px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  vertical-align:text-top;
  width: 680px;
  max-width: 680px;
  height: 50px;
}

.responsive div.survey-question-container span.survey-textarea-container.survey-large-text-container textarea {
  height: 160px;
}

.responsive div.survey-question-container span.survey-text-hint {
    font-size: .8em;
    font-style: italic;
    display: block;
}

.responsive div.survey-question-container span.survey-hidden,
.responsive div#cons_info_component_container .sub-section-header {
    display: none;
}

.responsive div.survey-question-container img.survey-captcha {
  vertical-align:text-top;
}

/* floats to the right even when the text size is changed */
.responsive div.survey-question-container div.required-indicator-legend {
  text-align: right;
  padding: 8px 24px 0px 8px;
}

/* Wrap the input elements */
.responsive div.survey-question-container input[type="number"],
.responsive div.survey-question-container input[type="email"],
.responsive div.survey-question-container input[type="text"],
.responsive div.survey-question-container textarea,
.responsive div.survey-question-container span.interest-category-container,
.responsive div.survey-question-container span.survey_combo_other_input_container {
  display: block;
}

.responsive div.survey-question-container span.survey_combo_other_input_container input[type="text"] {
  display: inline;
}

.responsive div.survey-question-container div.form-content .input-container {
  margin-bottom: 8px;
}

/* Survey radio and checkbox and input elements
   to ensure label wraps to the right and not under the input   */
.responsive div.survey-question-container li.input-container label {
  display: inline-block;
  zoom: 1;
  max-width: 790px;
}

/* Also prevent wrapping around checkbox/radio, but for elements in the 2-col layout */
div#email_opt_in_container label,
div#postal_mail_opt_in_container label,
div#remember_me_container label {
  display: inline-block;
  zoom: 1;
  max-width: 365px;
}

select#matchingAddresses {
  max-width: 235px;
}

/* ******************************************************************************** */
/*  Contact Info Component: cons_info_component.themed.responsive.tpt               */
/* ******************************************************************************** */

.responsive div.survey-question-container .indented-field-group {
  margin-left: 8px;
}

.responsive div.survey-question-container .input-container .ungrouped {
  display: block;
}

/* Constrain the labels to keep both inputs on the same row */
div#cons_info_suffix_container label span.input-label,
div#cons_info_prof_suffix_container label span.input-label {
  display: inline-block;
  zoom: 1;
  max-width: 110px;
}

div#cons_info_suffix_container,
div#cons_info_prof_suffix_container {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

div#cons_info_prof_suffix_container {
  padding-left: 12px;
}

div#email_optin label {
  vertical-align: top;
}

/* ******************************************************************************** */
/*  Opt-In Component: cons_info_component.themed.responsive.tpt               */
/* ******************************************************************************** */
div#email_opt_in_container+div#email_format_container {
  padding-left: 2em;
}

/* ********************************************************** */
/* Media Query Overrides                                      */
/* ********************************************************** */

/*      Tablet Layout: 768px.
        Gutters: 24px.
        Outer margins: 28px.
        Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* Survey radio and checkbox and input elements
       to ensure label wraps to the right and not under the input   */
    .mobile .responsive div.survey-question-container li.input-container label {
        display: inline-block;
        max-width: 610px;
    }

    /* Also prevent wrapping around checkbox/radio, but for elements in the 2-col layout */
    .mobile div#email_opt_in_container label,
    .mobile div#postal_mail_opt_in_container label,
    .mobile div#remember_me_container label {
        display: inline-block;
        max-width: 255px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container textarea {
        width: 588px;
        max-width: 588px;
        height: 50px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container.survey-large-text-container textarea {
        height: 120px;
    }
}

/*      Mobile Layout: 320px.
        Gutters: 24px.
        Outer margins: 34px.
        Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

    /* Survey radio and checkbox and input elements
       to ensure label wraps to the right and not under the input   */
    .mobile .responsive div.survey-question-container li.input-container label {
        display: inline-block;
        max-width: 155px;
    }

    /* Constrain the labels to keep both inputs on the same row */
    .mobile div#cons_info_suffix_container label span.input-label,
    .mobile div#cons_info_prof_suffix_container label span.input-label {
        display: inline-block;
        max-width: 60px;
    }

    /* Also prevent wrapping around checkbox/radio, but for elements in the 2-col layout */
    .mobile div#email_opt_in_container label,
    .mobile div#postal_mail_opt_in_container label,
    .mobile div#remember_me_container label {
        display: inline-block;
        max-width: 155px;
    }

    /* in smaller versions, place the "other" box under the select box */
    .mobile div.survey-question-container span.survey_combo_other_input_container {
      display: block;
    }
    .mobile div.survey-question-container span.survey_combo_other_input_container input[type="text"] {
      max-width: 135px;
    }

    .mobile select#cons_country,
    .mobile select#matchingAddresses {
      max-width: 200px;
    }

    .mobile .responsive div.survey-question-container select {
      max-width: 165px;
    }

    .mobile select#cons_occupation {
      max-width: 185px;
    }

    .mobile select#cons_email_format {
      max-width: 70px;
    }

    .mobile div#email_format_container label {
      max-width: 86px;
      display: inline-block;
    }

    /* no longer need right padding when in mobile (single-column) layouts */
    .mobile .responsive div.form-content {
        margin-right: 0px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container textarea {
        width: 174px;
        max-width: 174px;
        height: 40px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container.survey-large-text-container textarea {
        height: 60px;
    }
}

/*      Wide Mobile Layout: 480px.
        Gutters: 24px.
        Outer margins: 22px.
        Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

    /* Survey radio and checkbox and input elements
       to ensure label wraps to the right and not under the input */
    .mobile .responsive div.survey-question-container li.input-container label {
        display: inline-block;
        max-width: 330px;
    }

    /* Also prevent wrapping around checkbox/radio, but for elements in the 2-col layout */
    .mobile .responsive div#email_opt_in_container label,
    .mobile .responsive div#postal_mail_opt_in_container label,
    .mobile .responsive div#remember_me_container label {
      display: inline-block;
      max-width: 340px;
    }

    /* Constrain the labels to keep both inputs on the same row */
    .mobile .responsive div#cons_info_suffix_container label span.input-label,
    .mobile .responsive div#cons_info_prof_suffix_container label span.input-label {
      display: inline-block;
      max-width: 120px;
    }

    .mobile .responsive select#cons_country,
    .mobile .responsive select#cons_occupation,
    .mobile .responsive select#matchingAddresses {
      max-width: 380px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container textarea {
        width: 350px;
        max-width: 350px;
        height: 50px;
    }

    .mobile .responsive div.survey-question-container span.survey-textarea-container.survey-large-text-container textarea {
        height: 80px;
    }

}