
/**************************
*	FORM STYLES
***************************/

/*	Layout	*/

.main .form {
	border-top: 1px solid rgb(173,200,35);
}
.form-pair,
.form-section > fieldset.radio-set,
.form-section > .subset > fieldset.radio-set,
.form-section > .subset > p,
.form-section > .subset > h4,
.form-section > p,
.form-section > .next-step,
.form-section .buttons {
	margin-bottom: 0.85em;
	padding-left: 7%;
	padding-right: 7%;
}
.form-section > .radio-set > p,
.form-section > .radio-set > h4 {
	padding-left: 0;
	padding-right: 0;
}
.form-pair.highlight {
/* 	background-color: rgb(193,215,47); */
/* 	border-bottom: solid 3px rgb(190,190,190); */
	border-top: solid 3px rgb(220,220,220);
	padding: 0.5em 0;
}
fieldset {
	display: block;
	position: relative;
}
.radio-set {
	margin-bottom: 0.85em;
}
.radio-set .radio-set {
	margin: 0.5em 0 0.5em 1.5em;
}
.form-section {
	background-color: rgb(245,245,245);
	background-color: rgb(253,253,253);
	border: 0px solid rgb(225,225,225);
	margin: 0 0 3em;
	padding: 0 0 2em;
}
.js .form-step {
	display: none;
}
.js .form-step.first-step,
.js .preview .form-step {
	display: block;
}
form .subset {
	border-bottom: 1px solid rgb(220,220,220);
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.form-section > h2,
.form-section > h3,
.form h2,
.form h3 {
	background-color: rgb(173,200,35);
	color: rgb(253,253,253);
	margin-bottom: 1em;
	padding: 0.5em 7%;
}
.form-section > h3 span {
	color: rgb(120,120,120);
	font-size: 0.769em;
	font-style: italic;
	font-weight: normal;
}
.grouped {
	padding: 1em 0;
}
.radio-set.image {
	margin: 1em 0;
}

.target-editor {
	background-color: rgb(245,245,245);
	padding: 1em;
}


.form-section img {
	max-width: 100%;
}


/* 	Dialog Forms */

.dialog .form {
	float: none;
	margin-top: 0;
	text-align: left;
	width: auto;
}
.dialog .form-section {
	margin: 0;
	padding: 0 0 2em 0;
}
.dialog .form-section > h2 {
	background-color: rgb(193,215,46);
	color: rgb(255,255,255);
	left: 0;
	top: 0;
	padding: 0.5em 1em;
	text-align: center;
}
.dialog .form-section .form-pair,
.dialog .form-section .next-step {
	padding: 0 2em;
}
.dialog .add-journey {
	background-color: rgb(227,236,174);
}
.dialog .add-journey .form-section > h2 {
	
}
.dialog .add-userpost {
	background-color: rgb(236,237,237);
}
.dialog .userpost-form .form-section > h2 {
	background-color: rgb(216,210,201);
}
.dialog .photo-form .form-section > h2 {
	background-color: rgb(205,205,205);
}



/* Labels & Notes	*/

.dividing-word {
	margin: 1.6em 0;
	text-align: center;
}

p.form-note {
	font-size: 0.8em;
}
label,
.radio-set legend,
.radio-set h4,
.form-section fieldset > h4,
.form-pair dt {
	border: 0;
	display: block;
	font-size: 0.85em;
	font-weight: bold;
	margin-bottom: 0.25em;
	position: relative;
	text-transform: none;
}
.form-pair dt {
	display: inline;
}
.radio-set legend,
.radio-set h4 {
	display: block;
	margin-top: 1em;
	padding-bottom: 0.85em;
}
.radio-set label {
	border: 0;
	clear: right;
	float: none;
	font-weight: normal;
	margin-bottom: 0.25em;
	padding-bottom: 0;
	width: auto;
}
.radio-set label.indent {
	width: 70%;
}
.radio-set.full-width label {
	display: block;
	float: none;
/* 	margin-left: 0.5em; */
	padding-left: 1.5em;
	width: auto;
	zoom: 1;
}
.radio-set.full-width label input {
	margin: 0 0.5em 0 -1.5em;
}
.radio-set.checkbox label {
	display: inline;
	margin-left: 0;
	padding-left: 0;
}
.form-section div label ~ p,
.form-pair p {
	clear: both;
	color: rgb(70,70,70);
	font-size: 0.80em;
	font-style: italic;
	margin: 0 0 0 0.5em;
}
label.indent {
	padding-left: 1em;
}
.button-notice {
	color: rgb(90,90,90);
	font-size: 0.85em;
	font-style: italic;
	margin-left: 0.5em;
}
.next-step p {
	color: rgb(90,90,90);
	font-size: 0.8em;
	font-style: italic;
	margin-bottom: 0;
/* 	margin-left: 0.5em; */
}
.radio-set > p span {
	color: rgb(120,120,120);
	font-style: italic;
}
fieldset legend span {
	float: left;
	word-wrap: normal;
}

.prepended span.prep,
.appended span.app {
	font-size: 0.85em;
}

.error,
.radio-set > p .error {
	color: rgb(210,50,50);
	display: block;
	float: none;
	font-size: 0.75em;
	font-style: italic;
	font-weight: normal;
}


/*	Inputs	*/

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=file],
input[type=date],
textarea,
.form-pair dd {
	background-color: rgb(252,252,252);
	border: 1px solid rgb(220,220,220);
/* 	border-bottom-color: rgb(255,255,255); */
/* 	border-right-color: rgb(255,255,255); */
/* border: 3px solid rgb(230,230,230); */
	display: block;
	font-size: 0.85em;
/* 	margin-left: 0.5em; */
	max-width: 280px;
	padding: 0.2em;
	width: 90%;
	vertical-align: middle;
}
.form-pair dd {
/* 	background-color: rgb(235,235,235); */
	display: inline;
	border: 0;
	padding: 0;
	vertical-align: inherit;
}
.prepended input,
.appended input {
	display: inline;
}
.appended input {
	text-align: right;
	width: 40%;
}
.userpost-form textarea,
.photo-form textarea {
	height: 5em;
	max-width: none;
	width: 100%;
}
ol input[type=text] {
	display: inline;
	width: 75%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
textarea {
/* 	height: 12em; */
}
input.number,
input.date,
input[type=date] {
	max-width: 120px;
}
select {
	border: 1px solid rgb(215,215,215);
	font-size: 0.85em;
	width: 90%;
/* 	margin-left: 0.5em; */
	max-width: 280px;
}
.ie6 select, 
.ie7 select, 
.ie8 select {
	max-width: none;
	min-width: 75%;
	width: auto;
}
select.expand {
	width: auto;
}
.radio-set input {
	margin: 0 1em 0 0;
}

input[type=text].error,
input[type=password].error,
input[type=email].error,
input[type=number].error,
input[type=date].error,
textarea.error,
fieldset.error {
	background-image: url(/img/validate-error.png);
	background-position: 100% -2px;
	background-repeat: no-repeat;
}
input[type=text].valid,
input[type=password].valid,
input[type=email].valid,
input[type=number].valid,
input[type=date].valid,
textarea.valid,
fieldset.valid {
	background-image: url(/img/validate-success.png);
	background-position: 100% -2px;
	background-repeat: no-repeat;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
textarea:disabled,
fieldset:disabled {
	background-color: rgb(245,245,245);
	color: rgb(150,150,150);
}

.js #department-ext,
.js #password-ext,
.js #existing-pw-ext,
.js .car-ext,
.js #ethnicity_other_wrap,
.js #user-type-ext {
	display: none;
}


.target-editor input {
	display: inline;
	width: auto;
}
.target-editor select {
	width: auto;
}
.target-editor input.number {
	max-width: 60px;
}



/* Buttons	*/

.next-step button,
input[type=submit] {
	background-color: rgb(60,60,60);
/* 	background-color: rgb(117,151,13); */
/* 	background-color: rgb(177, 191, 63); */
/* 	background-color: rgb(141,177,222); */
/* 	border: 5px solid rgb(183,205,40); */
	border: 5px solid rgb(210,210,210);
	color: rgb(245,245,245);
/* 	color: rgb(40,40,40); */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	font-size: 0.85em;
	font-weight: bold;
	margin-bottom: 0.25em;
/* 	margin-left: 0.5em; */
	max-width: 280px;
	padding: 0.8em 0;
	width: 90%;
	-webkit-appearance: none;
}
.next-step button:hover,
input[type=submit]:hover {
	background-color: rgb(45,45,45);
/* 	background-color: rgb(117,151,13); */
/* 	background-color: rgb(112,141,23); */
	border: 5px solid rgb(200,210,195);
/* 	border: 5px solid rgb(117,151,13); */
	color: rgb(255,255,255);
}
input[type=submit].delete {
	background: rgb(235,10,10);
}
input[type=submit][disabled],
input[type=submit][disabled]:hover {
	background-color: rgb(150,150,150);
	border: 5px solid rgb(213,235,87);
}
.target-editor input[type=submit] {
	border: 5px solid rgb(193,215,47);
	padding: 0.4em 1em;
	width: auto;
}
form .buttons {
	margin-top: 1em;
}


/*	Messages	*/

.success-msg {
	background-color: rgb(225,255,235);
	background-color: rgb(193,215,47);
	border: 0px solid rgb(225,225,225);
	margin-bottom: 3em;
	padding: 1.5em 2em 2em;
}


/*	Progress Bar	*/

.progress-list {
	border-top: 1px solid rgb(255,255,255);
	bottom: 0;
	-webkit-box-shadow: -5px 0 5px rgb(120,120,120); 
	-moz-box-shadow: -5px 0 5px rgb(120,120,120);
    box-shadow: -5px 0 5px rgb(120,120,120);
	left: 0;
	list-style: none;
	margin: 0;
	overflow: hidden;
	position: fixed;
	width: 100%;
}
.no-boxshadow .progress-list {
	border-top: 3px solid rgb(40,40,40);
}
.progress-list li {
	display: block;
	float: left;
	font-weight: bold;
}
.progress-list div {
	background-color: rgb(220,220,220);
	border-right: 1px solid rgb(245,245,245);
	height: 3.5em;
	padding: 0.5em 1em;
}
.progress-list li span {
	display: block;
	font-size: 0.75em;
	font-style: italic;
	font-weight: normal;
}
.progress-list .active {
	background-color: rgb(100,143,63);
	color: rgb(250,250,250);
}
.progress-list a {
	color: rgb(150,214,94);
	display: block;
	text-decoration: none;
}
.progress-list .current a {
	color: rgb(250,250,250);
}
.progress-list a:hover {
	color: rgb(250,250,250);
}



/* 	Target creator 	*/



.target-creator p {
	margin-bottom: 0;
}
.target-anim-container {
	border: 0.5em solid rgb(173,200,35);
/* 	border-color: rgb(197,203,154); */
	margin: -4em auto 2em;
	overflow: hidden;
	width: 31.5em;
}
.target-anim-container .form {
	border: 0;
	margin: 0;
/* 	overflow: hidden; */
	position: relative;
	width: 200%;
}
.no-js .target-anim-container.metric-set .form {
	left: -100%;
}
.target-types {
	float: left;
	margin: 0;
	width: 50%;
}
.target-buttons li {
	display: block;
	list-style: none;
	position: relative;
	width: 100%;
}
.target-buttons li a {
	background-color: rgb(245,245,245);
	border-top: 1px solid rgb(220,220,220);
/* 	color: rgb(120,120,120); */
	display: block;
	font-weight: bold;
	padding: 1em;
	text-align: center;
	text-decoration: none;
	z-index: 101;
	zoom: 1;
}
.target-buttons li:first-child a {
	border-top: 0;
}
.target-buttons li a:hover {
	background-color: rgb(235,235,235);
}
.target-buttons li.active a {
	background-color: rgb(227,230,233);
	border-top-color: rgb(210,210,210);
	color: rgb(40,40,40);
}
.target-form {
	background-color: rgb(253,253,253);
	float: left;
	height: 100%;
	text-align: center;
	width: 50%;
}
/*
.js .target-form {
	display: none;
}
*/
.target-form form {
	padding: 1.15em 2em;
}
.target-form .form-pair {
/* 	text-align: center; */
}
.target-form label {
/* 	text-align: center; */
}
.target-form input {
	margin: 0 auto;
	text-align: center;
}
.target-form input.number {
	font-size: 2em;
	font-weight: bold;
	margin-top: 0.25em;
	padding: 0.125em;
}
.data-calcs {
	background-color: rgb(235,235,235);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 33.3333%;
}



/*	CMS	Forms	*/

.add-module textarea,
.edit-module textarea {
	max-width: none;
}


/**************************
*	FORM MEDIA QUERIES
***************************/


@media only screen and (max-width: 830px) {
	
/*
	.form-section {
		padding-left: 5%;
		padding-right: 5%;
	}
*/
	.form-section > h3 {
		margin-left: 0;
	}
	
	.progress-list {
		position: relative;
	}
	.progress-list li {
		width: 50%;
		margin-bottom: 1px;
	}
	.progress-list li span {
		display: inline;
		margin-left: 1em;
	}
	.progress-list div {
		height: 2em;
	}
	
	
	
}


@media only screen and (max-width: 650px) {
	
	.progress-list li {
		float: none;
		width: 100%;
	}
	
	
	.target-anim-container {
		border-left: 0;
		border-right: 0;
		width: 100%;
	}

}
