/* bolt.forms.css
 * 
 * Some inspiration from normalize.css:
 * http://necolas.github.com/normalize.css/
 */

form,
fieldset,
label,
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;
}


form {
	/* Correct margin displayed oddly in IE6/7 */
	margin: 0;
}

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

fieldset + fieldset {
	margin-top: 1.5rem;
}

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

label,
input,
button,
select,
textarea {
	display: inline-block;
	/* Vertical align top 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: top;
	margin: 0;

	/* 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;

	/* Firefox OS adds a background gradient to things. No no no. */
	background-image: none;
}

label {
	max-width: 100%;
	width: auto;
	height: auto;
	line-height: 1.5625rem;
	border: 0;
}

label > [type="checkbox"],
label > [type="radio"] {
	/* checkboxes nested inside labels */
	margin-right: 0.5rem;
}

label.error_label {
	display: block;
}

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

input,
textarea {
	width: 100%;
}

input + label,
textarea + label,
select + label,
.select-button + label {
	margin-top: 0.3125rem;
}

.hidden + label {
	margin-top: 0;
}

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: #cccccc 1px solid;
}

textarea,
[type="tel"],
[type="url"],
[type="date"],
[type="text"],
[type="time"],
[type="week"],
[type="month"],
[type="email"],
[type="number"],
[type="search"],
[type="password"],
.select-button {
	padding-left: 0.5625rem;
	padding-right: 0.5625rem;
	background-color: white;
}

[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.375rem;
}

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: 1.125rem;
}

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) {
	input[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.625rem;
}

label[for],
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: top;
	padding-left: 0;
	padding-right: 0;
	width: auto;
	/* WebKit clips radio buttons edges slightly when not fully opaque. */
	opacity: 1;
}

input[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: ' *';
	color: #ff8833;
}

/* 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. */

label.focus,
button:focus,
input:focus,
textarea:focus,
input.error:focus,
textarea.error:focus {
	/* In Webkit, outline doesn't fit the border curves, and in FF outline
	   is ugly. Lets recreate it with box-shadow */
	outline: none;
	
	/* Old Safari doesn't do blur radius */
	-webkit-box-shadow: 0 0 12px #659DCB;
	/* but Chrome does... */
	-webkit-box-shadow: 0 0 1px 2px #659DCB, inset 0 0 1px 1px #659DCB;
	/* Create webkit-like outlines for FF */
	   -moz-box-shadow: 0 0 1px 2px #659DCB, inset 0 0 1px 1px #659DCB;
			box-shadow: 0 0 1px 2px #659DCB, inset 0 0 1px 1px #659DCB;

	border-color: #659DCB !important;
}

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

input.error,
textarea.error {
	/* \9 hack for IE8 and below. */
	outline: 2px solid #ff5500\9;
	
	-webkit-box-shadow: 0 0 12px #ff5500;
	-webkit-box-shadow: 0 0 1px 2px #ff5500, inset 0 0 1px #ff5500;
	   -moz-box-shadow: 0 0 1px 2px #ff5500, inset 0 0 1px #ff5500;
			box-shadow: 0 0 1px 2px #ff5500, inset 0 0 1px #ff5500;
}

@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: #659DCB !important;
	}

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

input::-webkit-validation-bubble-arrow,
input::-webkit-validation-bubble-message {
	background-color: #202020;
	color: #ff5500;
	border-width: 0;
	-webkit-box-shadow: 0 0 12px #ff5500;
	-webkit-box-shadow: 0 0 1px 2px #ff5500, inset 0 0 1px #ff5500;
			box-shadow: 0 0 1px 2px #ff5500, inset 0 0 1px #ff5500;
}

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 select {
	outline: #ff5500 auto 6px;
	-moz-outline-color: #ff5500; 
	outline-offset: -3px;
}

.error select:focus {
	outline: #ff5500 auto 6px;
	-moz-outline-color: #ff5500; 
	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;
}

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



/* 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.
*/

/*input[type="range"] {
  -webkit-appearance: none !important;
  
  cursor: pointer;
  
  background-color: transparent;
  
  /* Shows up in webkit, but not Opera */
  /*-webkit-border-image: url('images/range2.png') 6 5 6 5 stretch stretch;
		  border-image: url('images/range2.png') 6 5 6 5 stretch stretch;
  
  /* I don't know why this doesn't show up in Opera,
	 but it doesn't. This is going to bite us in the future, though. */
  /*border-left-width: 5px;
  border-right-width: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  
  cursor: pointer;
  
  background: -webkit-linear-gradient( rgb(247,247,247), rgb(140,140,140) );
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(247,247,247)), color-stop(100%,rgb(140,140,140)));
  
  width: 10px;
  height: 10px;
  
  -webkit-border-radius: 0.6em;
	 -moz-border-radius: 0.6em;
		  border-radius: 0.6em;
  
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
	 -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
	   -o-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
		  box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
}*/


input[type="range"] {
	-webkit-appearance: none !important;
	background-color: transparent;
	border-width: 0;
	height: 1.5625rem;
	/*required for proper track sizing in FF*/
	width: 100%;
}

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

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

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

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

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

	cursor: pointer;

	background: -webkit-linear-gradient( rgb(247,247,247), rgb(140,140,140) );
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(247,247,247)), color-stop(100%,rgb(140,140,140)));
	background: #B6B2B0;

	width: 0.875rem;
	height: 0.875rem;
	
	margin-top: -1px;
	border-width: 0;

	-webkit-border-radius: 0.4375rem;
	   -moz-border-radius: 0.4375rem;
	        border-radius: 0.4375rem;

	/*-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
	   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
	     -o-box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);
	        box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(204,204,204,1);*/
}

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

	background: -webkit-linear-gradient( rgb(247,247,247), rgb(140,140,140) );
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(247,247,247)), color-stop(100%,rgb(140,140,140)));
	background: #B6B2B0;

	width: 0.875rem;
	height: 0.875rem;
	
	margin-top: -1px;
	border-width: 0;
	border-radius: 0.4375rem;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
	outline: 0 solid transparent;
}

/*
input[type=range]:focus::-moz-range-track {
	background: #ccc;
}
*/


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

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

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

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

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

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




/* Placeholders. */
input::-webkit-input-placeholder {
	/* No worky in WebKit ~2011. It was a bug:
	 https://bugs.webkit.org/show_bug.cgi?id=54797 */
	line-height: inherit;
}

input:-moz-placeholder {
	line-height: inherit;
}

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


.text-label,
.radio-label,
.checkbox-label {
	position: relative;
	padding-left: 2.25rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	min-height: 2.5rem;
}

.right-label {
	padding-left: 0;
	padding-right: 3rem;
}

.text-label {
	display: block;
	padding-top: 0.125rem;
	padding-bottom: 0.1875rem;
	line-height: 2.5rem;
	vertical-align: baseline;
}

.text-label > .text-span,
.text-label > input {
	display: block;
}

@media all and (min-width: 40em) {
	.text-label {
		display: inline-block;
	}

	.text-label > .text-span {
		display: inline-block;
		min-width: 33.3333%;
	}

	.text-label > input {
		display: inline-block;
		width: 33.3333%;
		height: 2.5rem;
		line-height: 2.25rem;
		margin-left: 0.5rem;
	}
}

.radio-label > input,
.checkbox-label > input {
	position: absolute;
	top: 0;
	left: 0;
}

.right-label > input {
	left: auto;
	right: 0;
}

.dialog > .radio-label,
.dialog > .checkbox-label {
	display: block;
}

/* Only hide radios and checkboxes where we have JS */

.js .radio-label::before,
.js .radio-label::after,
.js .checkbox-label::before,
.js .checkbox-label::after {
	content: '';
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	box-sizing: border-box;
}

.js .right-label::before,
.js .right-label::after {
	left: auto;
	right: 0;
}

.js .radio-label::before,
.js .checkbox-label::before {
	background-color: white;
	border: 1px solid #cccccc;
}

.js .radio-label::before {
	border-radius: 1rem;
}

.js .checkbox-label::before,
.js .checkbox-label::after {
	border-radius: 0.25rem;
}

.js .radio-label::after,
.js .checkbox-label::after {
	display: none;
}

.js .radio-label.on::after,
.js .checkbox-label.on::after {
	display: block;
}

.js .radio-label::after {
	top: 0.875rem;
	left: 0.375rem;
	width: 0.75rem;
	height: 0.75rem;
	background-color: #575757;
	border-radius: 0.375rem;
}

.js .checkbox-label::after {
	content: '✓';
	text-align: center;
}

.js .radio-label > input,
.js .checkbox-label > input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

.js .yes-radio-label::before,
.js .no-radio-label::before {
	border-width: 0;
	background-color: #7B7B74;
}

.js .yes-radio-label.on::before,
.js .yes-radio-label:hover::before {
	background-color: green;
	border-color: green;
}

.js .no-radio-label.on::before,
.js .no-radio-label:hover::before {
	background-color: #C22820;
	border-color: #C22820;
}

.js .yes-radio-label::after,
.js .no-radio-label::after {
	display: block;
	top: 0.375rem;
	left: 0;
	width: 2rem;
	height: 2rem;
	background-color: transparent;
	background-image: url('/static/images/sprites.svg');
	background-size: auto;
}

.js .yes-radio-label::after {
	background-position: 5px -394px;
}

.js .no-radio-label::after {
	background-position: 8px -432px;
}


.select-button {
	text-overflow: clip;
	text-align: left;
	padding-right: 2.375rem;
	padding-top: 0;
	padding-bottom: 0;
}

.select-button::after {
	content: '▼';
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	width: 2.4375rem;
	height: 100%;
	text-align: center;
	color: #cccccc;
	border-width: 0;
	border-left-width: 1px;
	border-style: inherit;
	border-color: inherit;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
}



/* Layout */

/* .custom inputs must be followed by a styled label
   that references them by for="id". */

.custom_input {
	/* We have to take it out of the flow and make it
	   invisible, rather than adding display: none,
	   because display: none stops keyboard from being
	   able to focus it */
	opacity: 0;
	position: absolute;
	left: -10000px;
}


/* form */

.action_form {
	padding-right: 3em;
}

.action_form > input,
.action_form > .submit_button {
	vertical-align: top;
}

.action_form > input {
	position: relative;
	width: 100%;
	margin-right: -100%;
	left: 0;
}

.action_form > .submit_button {
	width: 3em;
	margin-right: -3em;
	padding-left: 0;
	padding-right: 0;
	left: 100%;
}