/* ==================================================================
Stylesheet fuer die Formulare
Datei: form.css
Media: all

Datum: 10.09.2013
Autor:	grintsch communications (mf)
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen fuer Ideal Standard: Formulare

==================================================================== */
.form {}

/* Change box model for module `.box` and content */
.form *, .form *:before, .form *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

	.form-wrap {
		background-color: #E6E7E7;
		padding: 20px;
	}
	
	
/* ======================================================

	=1. Äussere Elemente

========================================================= */
/*fieldset*/.form__box {}

/*fieldset*/.form__box--action {
	padding-top: 0.714em;
	margin-top: 0.714em;	
}

	/*legend*/.form__title {
		font-size: 1.286em;
		font-weight: normal;
		line-height: 1.1664em;
		text-transform: uppercase;

		width: 100%;
		padding-bottom: 0.357em;
		margin-bottom: 0.714em;
	}

	/*p*/.form__text {}

	/*p*/.form__text--inner { margin-bottom: 0.714em; }
	
		.form__content { margin-bottom: 1.286em; }

			/*div*/.form__item {
				position: relative;
				display: block;

				width: 100%;
				margin-bottom: 10px;
			}

/* ======================================================

	=2. Inlinelemente

========================================================= */
/*img*/.form__captcha {
	margin-left: 2%;
	border-radius: 5px;
}

/*sup*/.form__required {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 700;
	color: #525252;
}

/* ======================================================

	=3. Infoboxen

========================================================= */
.form__info {
	background: url(img/sprite/no-repeat_x.png) no-repeat;
	padding-left: 60px;
}

	.form__info--title {
		font-size: 1.286em;
		font-weight: 300;

		margin-bottom: 0.179em;
	}
	
	.form__info--text,
	.form__info--list { margin-bottom: 0.179em; }

/* ======================================================
	=3.1 Infoboxen: Fehler
========================================================= */
.form__info--error { 
	min-height: 35px;
	background-position: -11800px 0;
	padding-left: 50px;
}

	.form__info--error .form__info--title {
		color: #e20613;
		
		margin-bottom: 0.357em;
	}
	
	.form__info--error .form__info--text { margin-bottom: 0.357em; }

	.form__info--error /*sup*/.form__required { color: #e20613; }

/* ======================================================
	=3.1 Infoboxen: Success
========================================================= */
.form__info--success {
	min-height: 50px;
	background-position: -12800px 0;
}

/* ======================================================
	=3.2 Infoboxen: Email
========================================================= */
.form__info--email {
	min-height: 50px;
	background-position: -12800px 0;
}

/* ======================================================
	=3.2 Infoboxen: Info
========================================================= */
.form__info--info {
	min-height: 50px;
	background-position: -13800px 0;
}

/* ======================================================

	=4. Formularelemente

========================================================= */
/* ======================================================
	=4.1 Label
========================================================= */
.form__label {
	width: 40%;
	margin-right: 2.5%;
	
	cursor: pointer;
}

.form__label--textarea { margin-top: 3px; }

.form__label--captcha { width: 30%; }

.form__label--check { width: 90%; }

/* ======================================================
	=4.2 Inputelemente
========================================================= */
.form__input {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	
	font-family: "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	color: #686868;
	
	width: 57.5%;
	background-color: #fff;
	border: 1px solid #c0c1c2;
	border-radius: 5px;
}

	.form__input:focus { background-color: #e6e7e7; }

.form__input--text {
	line-height: 26px;
	
	padding: 5px 10px;
}

	input[type="text"] {
		line-height: 18px \0/;/*IE8 + IE9*/
	}	

	/*IE10*/
		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			input[type="text"] {
				line-height: 18px;
			}	
		
	}	

.form__input--captcha {
	line-height: 26px;
	
	width: 39%;
	padding: 5px 10px;
	margin-left: 2%;
}

.form__input--textarea {
	overflow: auto;
	resize: none;
	
	height: 150px;
	padding: 5px 0 5px 10px;
}
	
/* .form__input--submit { padding: 5px 0; } Buttons zu hoch */

.form__input--img {
	overflow: hidden;
	
	text-indent: -99999px;
	
	background: transparent;
	border: none;
}

.form__input--flex100 { width: 100%; }

.form__wrap-radio {
	overflow: hidden;
	
	width: 270px;
	background: #fff;
	border: 1px solid #c0c1c2;
	border-radius: 5px;
}

.form__wrap-radio--item {
	margin: 5px;
}

/* ======================================================

	=4.3 Select

========================================================= */
.form__wrap-select {
	overflow: hidden;
	
	width: 180px;
	background: #fff;
	border: 1px solid #c0c1c2;
	border-radius: 5px;
}

.form__wrap-select--S { width: 140px; }

	.form__select {
		font-family: "museo-sans-n5", "museo-sans", Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		color: #686868;

		width: 200px;
		background: transparent url("img/sprite/no-repeat_x.png") no-repeat;
		padding: 5px 10px;
		margin-left: -1px;

		-webkit-appearance: none;
	}
	
		.form__select--S {
			width: 175px;
			background-position: -10690px 0;
		}
		
		.form__select option { padding: 0 5px; }
	
/* ======================================================

	=5. Fehlermeldungen im Formular

========================================================= */
.form__item--error .form__label,
.form__item--error .form__label--check,
.form__item--error /*sup*/.form__required { color: #e20613; }

.form__item--error .form__input {
	color: #e20613;

	border-color: #e20613;
}

.form__text--error {
	width: 95%;
	
	color: #e20613;
}

.form__text--error.iblock--middle {
	display: inline-block;
	
	letter-spacing: normal;
	vertical-align: middle;
}
		
/* ======================================================

	=4.4 Radio-Button

========================================================= */
.form__radio {}

/* ======================================================

	=4.5 Checkbox

========================================================= */
.form__check {
	width: 10px;
	margin: 5px 2.5% 5px 0;
}