button, input, select, textarea { margin: 0; padding: 4px 6px; border: 2px solid #ededed; border-radius: 0; background: #ededed; color: #3d3a35; font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 1.6rem; vertical-align: baseline; }

input[type="text"], input[type="url"], input[type="password"], input[type="tel"], input[type="email"], input[type="search"], textarea { /* remove mobile safari inner shadow http://zomigi.com/blog/bug-fixes-for-removing-the-inner-shadow-on-ios-inputs/ */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); }

/*Prevent Safari/Mac from rendering its own styling on search bar http://diveintohtml5.info/forms.html */
input[type="search"] { -webkit-appearance: textfield; }

.ie7 button, .ie7 input, .ie7 select, .ie7 textarea { vertical-align: middle; }

button, input { line-height: normal; }

button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }

select { max-width: 75%; cursor: pointer; }

textarea { max-width: 181px; resize: vertical; vertical-align: top; }

/*styles for placeholder as separate selectors, as browsers disregard selectors containing invalid (to them) selectors*/
input::-webkit-input-placeholder { color: #aaa; }

input:-moz-placeholder { /* Firefox 18- */ color: #aaa; }

input::-moz-placeholder { /* Firefox 19+ */ color: #aaa; }

input:-ms-input-placeholder { color: #aaa; }

/* buttons ------------------------------------------- */
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

.ie7 button, .ie7 input[type="button"], .ie7 input[type="reset"], .ie7 input[type="submit"] { overflow: visible; }

/* checkbox, radio ------------------------------------------- */
input.checkbox, input.radio { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 10px 0 0; padding: 0; background: none; vertical-align: text-top; }

input.radio { border-width: 0; /* for IE */ }

/* focus ------------------------------------------- */
input:focus, select:focus, textarea:focus { border-color: #71b43a; outline: 0; }

.error input:focus, .error select:focus, .error textarea:focus { border-color: #ededed; outline: 0; }

/* disabled ------------------------------------------- */
input.disabled, select.disabled, textarea.disabled { border-color: #cccccc; background: #cccccc; color: #827a71; cursor: default; }

/* hint ------------------------------------------- */
input.hint, textarea.hint { color: #6e6c68; }

/* search ------------------------------------------- */
input.search_input { float: left; width: 79%; max-width: 290px; }

/* form list ----------------------------------------------- //// */
div.submit, fieldset.submit { padding: 2em 0; }

legend { margin: 0 0 0.5em; font-weight: bold; }

ol.form { margin-left: 0; list-style: none; max-width: 296px; }

ol.form.mb0 { margin-bottom: 0; }

ol.form li { position: relative; margin: 0 0 1em; padding: 0 4px 4px; color: #6e6c68; }

ol.form label, ol.form .label { display: block; }

ol.form li b { color: #3d3a35; }

ol.form .note { margin: .25em 0; line-height: 1.2857; /* 18px */ }

ol.form img { margin: 2px 5px 0; vertical-align: top; }

/* fields ----------------------------------------------- */
ol.form input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 272px; }

ol.form input.checkbox, ol.form input.radio { width: auto; }

/* date ----------------------------------------------- */
ol.form .date select { display: block; margin-bottom: .5em; }

/* zip, phone, extn -------------------------------------------- */
ol.form .zip, ol.form .phone { width: 130px; }

ol.form input.extn { width: 90px; }

.js ol.form .hide { display: none; }

.js ol.form .js { min-width: 288px; }

ol.form .js { min-width: 228px; }

ol.form .rules, ol.form .meta { display: none; }

/* inline ----------------------------------------------- */
ol.form .inline.push { padding-left: 28px; }

ol.form .inline input.checkbox, ol.form .inline input.radio { position: absolute; top: 5px; left: 4px; }

ol.form .inline label, ol.form .inline .label { display: inline; color: #3d3a35; }

ol.form .inline li label { display: block; color: #6e6c68; }

/* dependant ----------------------------------------------- */
form fieldset .dependent dl { clear: both; margin-bottom: 0; }

.js form fieldset .dependent .depend { display: none; margin-top: 8px; }

form fieldset .dependent dl dt { width: 114px; padding-right: 5px; }

form fieldset .dependent dl dt label { float: none; margin-left: 8px; width: auto; text-align: left; }

form fieldset .dependent dl dd input, form fieldset .dependent dl dd textarea, form fieldset .dependent dl dd select { width: 260px; max-width: 260px; }

form fieldset .dependent p { margin-left: 6px; width: auto; }

form fieldset .dependent p a { position: static; }

/* validation errors ----------------------------------------------- //// */
p.error { margin: 0; }

ol.form li.error { color: white; background: #aa1e33; padding-top: 0; padding-bottom: 0; }

ol.form li.error label, ol.form li.error .label, ol.form li.error span.required { color: #fff; }

ol.form p.address_zip_lookup { margin: 0.5em 7px; }

ol.form li.error .note { margin: 0 7px 1em; color: white; font-style: italic; }

ol.form li.error p.error { margin: 0.5em 7px; font-weight: bold; }

ol.form li.error a { color: #fff; text-decoration: underline; }

ol.form li.error a:hover, ol.form li.error a:focus { background: #fff; color: #cf163f; text-decoration: none; }

ol.form li.error .note a { font-style: normal; }

/* validation unique check ----------------------------------------------- //// */
.validation_check { margin: 1em 0; padding: 0 0 0 30px; background-repeat: no-repeat; background-position: 0 0; }

.validation_check.invalid { background-image: url(/static/images/global/check_negative.png); color: #6e6c68; }

.validation_check.valid { background-image: url(/static/images/global/check_positive.png); }

.validation_check.loading { background: url(/static/images/global/ajax-loader.gif) no-repeat 3px 4px; }

ol.form .validation_check a:link, ol.form .validation_check a:visited { color: #2b8815; text-decoration: none; }

ol.form .validation_check a:active, ol.form .validation_check a:hover, ol.form .validation_check a:focus { color: #fff; background-color: #2B8815; }

ol.form .field_full_in_single_col { box-sizing: border-box; width: 100%; max-width: none; }

ol.form .error .field_full_in_single_col { width: 90%; min-width: 90%; margin-top: 4px; }

.hideShowPassword-wrapper { width: 100%; max-width: 272px; }

div.hideShowPassword-wrapper input { width: 100%; }

.hideShowPassword-toggle { padding: 1px 4px; outline: none; }

@media (min-width: 320px) { textarea { max-width: 257px; } }

@media (min-width: 480px) { button, input, select, textarea { font-size: 1em; /* 14px */ }
  textarea { max-width: 100%; }
  ol.form_full { width: 100%; max-width: none; }
  /* fields ----------------------------------------------- */
  ol.form input { width: 100%; max-width: 272px; }
  ol.form select { min-width: 288px; }
  ol.form textarea { width: 272px; min-height: 65px; }
  /* sizes ----------------------------------------------- (based on a 2:3 musical fifth modular scale) */
  ol.form .field_xxsmall { width: 25px; min-width: 25px; }
  ol.form .field_xsmall { width: 42px; min-width: 42px; }
  ol.form .field_small { width: 57px; min-width: 57px; }
  ol.form .field_medium { width: 84px; min-width: 84px; }
  ol.form .field_large { width: 127px; min-width: 127px; }
  ol.form .field_xlarge { width: 190px; min-width: 190px; }
  ol.form .field_xxlarge { width: 285px; min-width: 285px; }
  /* date ----------------------------------------------- */
  ol.form .date { min-width: 350px; }
  ol.form .date select { display: inline; }
  ol.form .date .year { padding-left: 230px; }
  .validation_check { position: absolute; top: 0; left: 100%; margin: 2em 0 0 5px; width: 34%; } }

/* multi/single column - if below 600px - hide item ----------------------------------------------- */
@media (max-width: 599px) { .hide_in_single_col, ol.form label.hide_in_single_col, ol.form .label.hide_in_single_col { display: none; } }

/* multi/single column - if above 600px - hide item ----------------------------------------------- */
@media (min-width: 600px) { .hide_in_multi_col, ol.form label.hide_in_multi_col, ol.form .label.hide_in_multi_col { display: none; } }

@media (max-width: 599px) { .field_full_in_single_col.button a, .field_full_in_single_col.button a:visited, .field_full_in_single_col.button button, .field_full_in_single_col.button input, .field_full_in_single_col.button span { display: inline-block; box-sizing: border-box; width: 100%; } }

@media (min-width: 600px) { /* columns ----------------------------------------------- */
  ol.form .columns { overflow: hidden; max-width: 604px; }
  ol.form .columns li { float: left; padding-right: 2%; width: 42%; }
  /* sizes ----------------------------------------------- */
  ol.form .field_full_in_single_col, ol.form .error .field_full_in_single_col { width: auto; min-width: auto; margin-top: 0; }
  /* validation unique check ----------------------------------------------- //// */
  .validation_check { margin-left: 20px; width: 66.666667%; max-width: 210px; }
  /* placeholder ----------------------------------------------- */
  /* User agents are required to ignore a rule with an unknown selector. So separate rules for each browser. Otherwise the whole group would be ignored by all browsers. */
  .field_full_in_single_col::-webkit-input-placeholder { /* WebKit browsers */ color: transparent; }
  .field_full_in_single_col:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: transparent; }
  .field_full_in_single_col::-moz-placeholder { /* Mozilla Firefox 19+ */ color: transparent; }
  .field_full_in_single_col:-ms-input-placeholder { /* Internet Explorer 10+ */ color: transparent; } }

/* ToDo Merge these styles into a global style for displaying inputs and buttons at full screen width in mobile view  Currently they only apply to the email-confirmation page form */
#PreferenceForm fieldset.submit { padding: 2em 4px; }

@media (max-width: 479px) { #PreferenceForm button { width: 286px; }
  #PreferenceForm input { width: 272px; max-width: 100%; } }

/*# sourceMappingURL=forms.css.map */