/*
Forms.

Styleguide: 3
*/

/* Edge fails to update styles for changed disabled properties. This rule
   targetting the attribute rather than the pseudo-selector keeps the
   pseudo-selectors up-to-date.
   https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
*/
[disabled] ~ _ {}

/*
:enabled
:disabled
:required
:optional
:checked
:valid
:invalid

Slightly less support:

:in-range
:out-of-range
*/



form,
fieldset,
legend,
input,
output,
button,
select,
textarea {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

form,
fieldset {
	/* Act as position parent */
	position: relative;
}

fieldset {
	/* Reset padding, margin, border */
	padding: 0;
	margin: auto;
	border: 0;
}

legend {
	/* Correct color not being inherited (IE6/7/8/9) */
	border: 0;
	padding: 0;
	/* Text should wrap (FF3) */
	white-space: normal;

	font-weight: bold;
	font-size: 1.1667em;
}

option {
	/* In Firefox options are partially styleable. Make sure they don't
	   become unreadable by inheriting colors. */
	color: black;
	background: white;
	padding: 0.3125rem 0.9375rem;
}


/*
input

Markup: <label>Text</label>
<input type="text" value="text" />
<label>Password</label>
<input type="password" value="password" />
<label>Number</label>
<input type="number" value="0" />
<label>Range</label>
<input type="range" value="0" />
<label>URL</label>
<input type="url" value="http://stephen.band/bolt" />

Styleguide: 3.1
*/

label,
input,
button,
select,
textarea {
	display: inline-block;
	/* Vertical align middle to stop extra line space creeping into the vertical
	   rhythm when inputs stack up. It also has the effect of removing the
	   annoying extra margin-bottom that textareas have in webkit. */
	vertical-align: middle;
	margin: auto;

	/* Font size is not automaticlly inherited in all browsers. */
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;

	/* FF and WebKit ignore line-height on inputs, automatically centring the
	   text, but IE8 needs it. */
	line-height: inherit;

	/* Make input shadows appear over the top of other elements. */
	/* But this buggers up native validation message stacking...
	   what's it for again? */
	/*z-index: 2;
	position: relative;*/
}

input,
button,
select,
textarea {
	/* iOS has padding in the UA stylesheet. */
	padding-top: 0;
	padding-bottom: 0;
	color: inherit;
}

input,
button,
textarea {
	/* Firefox OS adds a background gradient to things. No no no. Don't apply
	   to selects as it causes them to be rendered old-style in FF desktop */
	background-image: none;
}

input,
button,
select {
	height: 2.8125rem;
}

input,
textarea {
	width: 100%;
}

select,
textarea,
[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="color"],
[type="number"],
[type="search"],
[type="password"],
.select-button {
	display: block;
}

textarea,
[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="color"],
[type="number"],
[type="search"],
[type="password"],
.select-button {
	border: 1px solid #cecece;
	background-color: white;
}

[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="number"],
[type="search"],
[type="password"] {
	text-indent: 0.5625rem;
}

textarea,
.select-button > select {
	padding-left: 0.5625rem;
	padding-right: 0.5625rem;
}

[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="color"],
[type="number"],
[type="search"],
[type="password"],
.select-button {
	/* Compensate for border */
	line-height: 2.6875rem;
}

textarea,
[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="number"],
[type="search"],
[type="password"] {
	font-size: 1rem;
}

input[type='date'],
input[type='time'],
input[type='week'],
input[type='month'] {
	max-width: 12em;
}

/* Make search fields appear as other inputs in WebKit. */
@media (-webkit-min-device-pixel-ratio:0) {
	[type="search"] {
		-webkit-appearance: textfield;
		padding-left: 0.1875rem;
	}
}

textarea {
	min-height: 6.6667em;
	line-height: 1.25rem;
	padding-top: 0.625rem;
	padding-bottom: 0.3125rem;

	/* IE is set to overflow: scroll by default */
	overflow: auto;
	/* Switch off resizing (Webkit) by default */
	resize: none;
}

.resizeable-textarea {
	/* limit resize direction. */
	resize: vertical;

	/* Make sure the bottom right corner doesn't clip the resize icon */
	-webkit-border-radius-bottomright:  0 !important;
	   -moz-border-bottom-right-radius: 0 !important;
}

input + select,
input + textarea,
input + [type="tel"],
input + [type="url"],
input + [type="date"],
input + [type="text"],
input + [type="time"],
input + [type="week"],
input + [type="month"],
input + [type="email"],
input + [type="color"],
input + [type="number"],
input + [type="search"],
input + [type="password"],
input + .select-button {
	margin-top: 0.9375rem;
}

input[type="file"],
input[type="button"],
input[type="reset"],
input[type="submit"],
button,
select {
	/* Clickable stuff gets a pointer cursor... */
	cursor: pointer;
}

button[disabled],
input[disabled],
select[disabled] {
	/* ...unless it's disabled. */
	cursor: default;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	/* Corrects inability to style clickable 'input' types in iOS */
	-webkit-appearance: button;
}

input[type="checkbox"],
input[type="radio"] {
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: 1px;
	padding-left: 0;
	padding-right: 0;
	width: auto;
	height: auto;
	/* WebKit clips radio buttons edges slightly when not fully opaque. */
	opacity: 1;
}

[type="range"],
input[type="image"] {
	padding: 0;
	opacity: 1;
}

input[type="file"] {
	/* Part of the button is cut off without a little padding-left in WebKit. */
	padding-left: 1px;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	/* Removes inner padding and border in FF3+
	   www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

/* File inputs. You're on your own. Good luck. The best way to handle
   these, frankly, is to make them opacity 0, and overlay a label. You
   don't get to display the filename, but at least you get some style. */
input[type='file'] {
	color: inherit;
	background: none;
}

/* File inputs are especially problematic in FF. They
   require a wrapper to get rid of their system border. */
@-moz-document url-prefix() {
	.file_wrap {
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.file_wrap input[type='file'] {
		position: relative;
		top: -2px;
		left: -1px;
		margin-bottom: -3px;
	}
}

[type="color"] {
	padding: 0;
	/* Make color swatches square. */
	width: 2.5rem;
}

[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

[type="color"]::-webkit-color-swatch {
	border: none;
}

.required::after {
	content: '\00a0*';
	color: #e62b24;
}

/* Focus and error styles */

/* IE hates having border-color applied to select boxes. It forces
   them into a state where they have to be doubleclicked to open -
   once to focus, once to open. Even IE10. We are forced to hack
   around it with the @media screen hack, which nets Safari as well,
   unfortunately.

   Chrome doesn't like having box-shadow applied to select boxes,
   as it renders them with a bigger height. That's ok, I guess.
   It's pretty difficult to have an error on a select box anyway. */

[type="range"]:focus {
	background-color: transparent;
	box-shadow: none;
}

:root:not(.js) input:invalid,
:root:not(.js) select:invalid,
:root:not(.js) textarea:invalid,
.validated input:invalid,
.validated select:invalid,
.validated textarea:invalid,
input.validated:invalid,
select.validated:invalid,
textarea.validated:invalid {
	box-shadow: 0 0 1px 2px rgba(214,23,41,0.875), inset 0 0 1px rgba(214,23,41,0.875);
	border-color: #d61729 !important;
}


button:focus,
input:focus,
select:focus,
textarea:focus,
.validated input:focus,
.validated select:focus,
.validated textarea:focus,
input.validated:focus,
select.validated:focus,
textarea.validated:focus,
.masked:focus + .focus-label:before,
.masked:focus + .checkbox-label:before,
.masked:focus + .radio-label:before {
	/* In Webkit, outline doesn't fit the border curves, and in FF outline
	   is ugly. Lets recreate it with box-shadow */
	outline: none;
	box-shadow: 0 0 5px 2px hsla(200,56%,49%,0.8), inset 0 0 0.5rem hsla(200,65%,60%,0.6);
	border-color: #2c9bd3 !important;
}

@media screen { @media (min-width: 0px) {
	/* Hack to apply border color but avoid IE, which hates
	   having border-color applied to select boxes. Unfortunately
	   this hack also ignores Safari. But that's ok. */
	select:focus
	select.error:focus {
		border-color: #5086c5 !important;
	}

	select.error {
		border-color: #e62b24 !important;
	}
}}

select:focus {
	/* In Webkit, select boxes don't accept box-shadow. Outline-style: auto
	   kills the outline in FF, which is ok, because we re-created it (better)
	   using a box-shadow (for non-system-style select boxes. FF ignores outline
	   declarations for system-style select boxes, and uses system blue (Mac). Hey-ho.) */
	outline: #639ACA auto 6px;
	-moz-outline-color: #639ACA;
	outline-offset: -3px;
}

.error_label {
	white-space: nowrap;
	line-height: 1.6667;
	color: #dd3300;
}


/* Submit, reset and button inputs.

   Use pure attribute selectors because they are weak, and classes
   are able to override them. Pure attribute selectors are a known
   performance drag, so keep them to a minimum. */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	width: auto;
	opacity: 1;
	text-indent: 0;
	vertical-align: baseline;
	padding-top: 0;
	padding-bottom: 0;
}


/* Legacy */
.error [type="button"],
.error [type="reset"],
.error [type="submit"] {
	/* Negate error styles applied to inputs. */
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
}
/* ------ */



/* Date and time inputs. */

::-webkit-datetime-edit-text {
	/* Space the separators and make them lighter. */
	opacity: 0.333333;
	padding-left: 0.0625rem;
	padding-right: 0.0625rem;
}

[type="date"]::-webkit-inner-spin-button {
	/* Hide the increment/decrement control. */
	display: none;
}

/*
::-webkit-datetime-edit { padding: 0; }
::-webkit-datetime-edit-fields-wrapper { background: transparent; }
::-webkit-datetime-edit-month-field { color: ; }
::-webkit-datetime-edit-day-field { color: ; }
::-webkit-datetime-edit-year-field { color: ; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { }
*/

/* Range inputs.

   In WebKit, tracks and handles are styleable by setting
   -webkit-appearance, however a value of slider-horizontal on the
   input will overlay a default handle even when ::-webkit-slider-thumb
   is set to none.

   Vertical sliders are considered to be an appearance of slider-vertical,
   making them impossible to style non-natively (which requires
   -webkit-appearance: none). Another approach would be to take a
   horizontal slider and transform: rotate it. Opera correctly displays
   a vertical slider when width < height. WebKit does not like % heights
   on vertical range inputs.

   Opera styles range sliders completely differently from WebKit,
   unfortunately. Where WebKit uses the input box as the track, and
   you can style the track by styling the input, Opera renders the
   track inside the input box. That would be fine, but Opera also has
   an unchangeable overflow: hidden on the input box, so if you make it
   small to style the WebKit track, it truncates the handle in Opera.

   The clever FF4 replacement technique for making range inputs,
   http://frankyan.com/labs/html5slider/, results in a similar rendering,
   so I have come to regard it as the standard approach. Therefore,
   to style the track in WebKit I use not the input box, but a
   border-image or background-image inside the input box.

   In Opera, range inputs have a max-width of 160px when their width
   is supplied by %, a limit you can't change. In fact percentages
   other than 100% cause some odd behaviour, where the track is sized
   but the input box remains at 100%. Setting inputs to display: block
   resolves all these problems.

   Opera responds to :before and :after content on inputs where WebKit
   and FF do not. So far I haven't found that useful. I just thought
   it was worth mentioning.

   I think the overall moral of the story is: kill any designer who
   suggests applying style to range inputs.
*/

[type="range"] {
	-webkit-appearance: none !important;
	background-color: transparent;
	border-width: 0;

	/* For IE height should be big enough to accomodate the thumb. */
	height: 1.5625rem;

	/*required for proper track sizing in FF*/
	width: 100%;
}

/* [type="range"] track */

[type="range"]::-webkit-slider-runnable-track {
	height: 0.75rem;
	background: #2B3134;
	border: none;
	border-radius: 0.375rem;
}

[type="range"]::-moz-range-track {
	height: 0.75rem;
	background: #2B3134;
	border: none;
	border-radius: 0.375rem;
}

[type="range"]::-moz-range-progress {
	height: 0.75em;
	background-color: #2B3134;
	border-radius: 0.375rem;
}

[type=range]::-ms-track {
	height: 0.75rem;
	border: none;
	border-radius: 0.375rem;

    /* Remove bg colour from the track and use ms-fill-lower and
	   ms-fill-upper instead */
    background: transparent;

    /* Remove default tick marks */
    color: transparent;
}

[type=range]::-ms-fill-lower {
	background: #2B3134;
	border-radius: 0.375rem;
}

[type=range]::-ms-fill-upper {
	background: #2B3134;
	border-radius: 0.375rem;
}

/* [type="range"] thumb */

[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;

	cursor: pointer;

	width: 0.875rem;
	height: 0.875rem;

	margin-top: -1px;
	border-width: 0;
	border-radius: 0.4375rem;
	background: #B6B2B0;
	background: linear-gradient( rgb(247,247,247), rgb(140,140,140) );
}

[type="range"]::-moz-range-thumb {
	cursor: pointer;

	width: 0.875rem;
	height: 0.875rem;

	margin-top: -1px;
	border-width: 0;
	border-radius: 0.4375rem;
	background: #B6B2B0;
	background: linear-gradient( rgb(247,247,247), rgb(140,140,140) );
}

[type="range"]::-ms-thumb {
	cursor: pointer;

	width: 0.875rem;
	height: 0.875rem;

	margin-top: 1px;
	border-width: 0;
	border-radius: 0.4375rem;
	background: #B6B2B0;
	background: linear-gradient( rgb(247,247,247), rgb(140,140,140) );
}

/* [type="range"] focus */

[type="range"]:focus {
	outline: none;
	outline-width: 0 !important;
}

[type="range"]::-moz-focus-outer {
	/* Get rid of that annoying border in FF */
	border: 0;
}

[type="range"]:-moz-focusring {
	outline: 0 solid transparent;
}

/* [type="range"] classes */

[type="range"].y-input {
	-webkit-appearance: slider-vertical !important;

	width: 0.75rem;
	height: 100%;
	min-height: 32px;
	/*border-width: 0;*/
}

[type="range"].y-input::-webkit-slider-runnable-track {
	width: 0.75rem;
}

[type="range"].y-input::-moz-range-track {
	width: 0.75rem;
	height: 100%;
}

[type="range"].y-input::-webkit-slider-thumb {
	-webkit-appearance: sliderthumb-vertical !important;
	margin-left: -1px;
}

[type="range"].y-input::-moz-range-thumb {

}




/* Placeholders. */
::-webkit-input-placeholder {
	font-family: NeoSans, sans-serif;
	line-height: inherit;
	color: #BFBFBF;
	opacity: 1
}

::-moz-placeholder {
	font-family: NeoSans, sans-serif;
	line-height: inherit;
	color: #BFBFBF;
	opacity: 1
}

:-ms-input-placeholder {
	font-family: NeoSans, sans-serif;
	line-height: inherit;
	color: #BFBFBF;
	opacity: 1
}

::-ms-input-placeholder {
	font-family: NeoSans, sans-serif;
	line-height: inherit;
	color: #BFBFBF;
	opacity: 1
}

:placeholder-shown {
	font-family: NeoSans, sans-serif;
	color: #BFBFBF;
	opacity: 1
}

/* Simulate placeholder attribute with a label layered
   over the top of the inputs. */

.placeholder {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	font-weight: normal;
	opacity: 0.5;
	text-align: left;
	color: #666666;
	/* Put it above imputs. */
	z-index: 3;
}

input + .placeholder,
textarea + .placeholder,
input.empty:focus + .placeholder,
textarea.empty:focus + .placeholder {
	display: none;
}

input.empty + .placeholder,
textarea.empty + .placeholder {
	display: block;
}

.message-textarea {
	min-height: 12.5rem;
}

@media all and (min-width: 32rem) {
	.message-textarea {
		min-height: 18.75rem;
	}
}


/*
.uni-form

A form containing one single field and a button.

Markup: <form action="{{ url }}" method="post" class="uni-form">
  <input type="email" class="small-input" placeholder="arthur.dent@sc.corp" />
  <input type="submit" class="action-button button" value="Send" />
</form>

Styleguide: 3.uni-form
*/

.uni-form > input,
.uni-form > .button {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.uni-form > input {
	width: 100%;
}

.uni-form > .button {
	margin-top: 0.25rem;
	min-width: 7.5rem;
	width: auto;
}

@media screen and (min-width: 25em) {
	.uni-form {
		padding-right: 7.75rem;
	}

	.uni-form > .button,
	.uni-form > .thumb {
		position: absolute;
		right: 0;
		top: 0;
	}

	.uni-form > .button {
		width: 7.5rem;
		/* Negate last breakpoint. */
		margin-top: 0;
	}
}