/* Forms
---------------------------------------------------------------------------------------- //// */

/* ---- TABLE OF CONTENTS ----
.form
.validation_errors
.validation_check
	.invalid
	.valid
	.loading
*/

/* form fields ------------------------------------------- //// */
button,
input,
select,
textarea {
	margin: 0;
	padding: 4px 6px;
	border: 2px solid #edeeee;
	border-radius: 0;
	background: #edeeee;
	color: #000;
	font-family: Lato, Helvetica, Arial, sans-serif; /* 16px/21px */
    font-size: 1.142857em; /* 16px/21px */
	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(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
    background-image:-webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,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: 0px; /* 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: #edeeee;
	outline: 0;
}

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

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

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

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

legend {
	margin: 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: #837870;
	}

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

	ol.form li b {
		color: #000;
	}

	ol.form .note {
		margin: .25em 0;
		line-height: 1.2857em; /* 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: #000;
}

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

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

.js form fieldset .dependent .depend {
	display: none;
}

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;
	}

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

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

ol.form li.error {
	color: #fff;
	background: #cf163f;
}

	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: .5em 7px;
}

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

ol.form li.error p.error {
	margin: .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: #837870;
	}

	.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: #2a8a15;
	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: #2a8a15;
}

ol.form .field_full_in_single_col {
	width:96%;
	min-width:96%
}
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 QUERY: 320px
---------------------------------------------------------------------------------------- //// */
@media (min-width:320px) {
	textarea {
		max-width: 257px;
	}
}


/* MEDIA QUERY: 480px
---------------------------------------------------------------------------------------- //// */
@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: 38px;
		min-width: 38px;
	}

	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;
			margin-bottom: 0;
		}

		ol.form .date .year {
			padding-left: 230px;
		}
	/* validation unique check ----------------------------------------------- //// */
	.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 QUERY: < 600px
---------------------------------------------------------------------------------------- //// */
@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;
		margin-top: 0.25em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 98%;
		text-align: center;
	}
}

/* MEDIA QUERY: 600px
---------------------------------------------------------------------------------------- //// */
@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%;
	}
}