#formWrapper{overflow: hidden;}
/* === Remove input autofocus webkit === */
*:focus {outline: none;}

/* === Form Typography === */
.form_hint, .required_notification {font-size: 11px;}
#formWrapper{font-family:'CLAASCultivaWeb'; font-weight: 400;}
legend, label{font-family:'CLAASCultivaWeb'; font-weight: 700;}
legend{margin: 0 0 10px 0; font-family:'CLAASCultivaWeb'; font-weight: 700;}
#tabarrows .tabarrow, #formtabs span{font-family:'CLAASCultivaWeb'; font-weight: 700;}
#formWrapper .fieldset_checkradio legend{font-family:'CLAASCultivaWeb'; font-weight: 700;}
#formWrapper .fieldset_checkradio label,
#formWrapper .autotarget label{font-family:'CLAASCultivaWeb'; font-weight: 400;}
#formWrapper #formnavigation button,
#formWrapper #errorContainer,
#formWrapper .errorContainer,
#formWrapper #zusammenfassung span,
#formWrapper .intro{font-family:'CLAASCultivaWeb'; font-weight: 700;}

/* === Tabarrows === */
#tabarrows_container{height: 31px; overflow: hidden; width: 110%; display: block; position: relative;}
#tabarrows{
	width: 100%;
	background-color:#d8d7d7;
	height: 31px !important;
	overflow: hidden;
	margin: 0 0 10px 0;
	position: absolute;
	display: block;
}
#tabarrows .tabarrow{
	/*display: inline-block; */ float: left;
	position: relative; top:0px;
	height: 31px;
	padding: 7px 36px 0 36px;
	background: url(../images/formulare/tabarrow.gif) top right no-repeat ;
	font-family:'CLAASCultivaWeb';
  font-weight: 700;
}

#tabarrows .tabarrow1{
	background: url(../images/formulare/tabarrow_1.gif) top right no-repeat ;
	color: #ffffff;
}
#tabarrows .tabarrow2{
	background: url(../images/formulare/tabarrow_2.gif) top right no-repeat ;
	color: #ffffff;
}

#tabarrows .first{left:0px; padding-left: 20px;}
#tabarrows .last{background-image: none; padding: 7px 0 0 36px !important;}
#tabarrows .last.active {background-image: none; background-color: #b3c618}
#tabarrows.green{background-color: #b3c618}


/* === Tabs === */
#formtabs{
	background-color: #B3C618;
	margin: 10px 0 10px 0;
	position: relative;
	display: none;
}
#formtabs span{
	display: none;
	padding:  10px 10px 10px 10px;
}
#formtabs span.active{
	background-color: #B3C618;
	display: block;
}
#formtabs span.passed{
	background-color: #b3c618;
}

/* === Slides === */
#formWrapper section{ }
#formWrapper section.slide{visibility: hidden; display: none; margin: 20px 0 10px 0; background-color: #ffffff; min-height:200px;}
#formWrapper section.active{background-color: #ffffff; visibility: visible; display: inherit;}

/* === List Styles === */
#formWrapper ul {
	width:100%;
	list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}

#contentArea #formWrapper ul li{
	padding:0;
	position:relative;
	margin: 4px 0 4px 0;
	background-image: none;
}

#formWrapper .slide .ym-g33{/*margin: 0 0 9px 0;zerschiesst die spalten bei 768 */}

/* === Form Elements === */
#formWrapper input[type=text],
#formWrapper input[type=email],
#formWrapper input[type=plz],
#formWrapper input[type=url],
#formWrapper textarea{
	max-width:100%;
	min-width:80%;
	padding:5px 18px 5px 8px;
	display:block;
}
#formWrapper label {
	display: block;
	margin: 10px 0 4px 0;
	font-family: 'CLAASCultivaWeb',arial;
  font-weight: 400;
}


/* form element visual styles */
#formWrapper input[type=text],
#formWrapper input[type=email],
#formWrapper input[type=plz],
#formWrapper input[type=url],
#formWrapper textarea {
	border:1px solid #bbbbbb;
	box-shadow: 0px 0px 3px #ccc /*, 0 10px 15px #eee inset*/;
	border-radius:1px;
	background-color: #d8d7d7;
	color: #000000;
	/*-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
	-o-transition: padding .25s;
	transition: padding .25s; */
}
#formWrapper input:focus,
#formWrapper textarea:focus {
	background: #fff;
	border:1px solid #555;
	box-shadow: 0 0 3px #aaa;
}


/* === Dropdowns === */
#formWrapper .styled-select {
	width: 90%;
	height: 27px;
	overflow: hidden;
	background: url(../images/formulare/select.gif) no-repeat right #d8d7d7;
	border:1px solid #bbbbbb;
	/*box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;*/
	border-radius:1px;
	box-shadow: 0px 0px 3px #ccc
	/*-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
	-o-transition: padding .25s;
	transition: padding .25s;   */
}

#formWrapper .styled-select select {
	background: transparent;
	width: 110%;
	padding: 5px 5px 5px 5px;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 27px;
	-webkit-appearance: none;
	color: #000000;
}
#formWrapper .styled-select.disabled {
	border:1px solid #dbdbdb;
	background: url(../images/formulare/select_disabled.png) no-repeat right #efefef;
}
#formWrapper .styled-select.disabled select{
	color:#a1a1a1;
}
#formWrapper .styled-select select option{padding: 5px 5px 5px 5px; color: #000000;  line-height: 2; border: 0; min-height: 20px;}
/*
#formWrapper .styled-select select option:hover{background-color: #cc0000;}
#formWrapper .styled-select select option {background-color: #d8d7d7;}
*/

#formWrapper .ym-g25 .styled-select select,
#formWrapper .ym-g33 .styled-select select {
	width: 140%;
}

/* === Checkboxen und Radiobuttons === */
#formWrapper .fieldset_checkradio{margin: 0 0 10px 0; background-color: #ffffff}
#formWrapper .fieldset_checkradio legend{margin: 0 0 14px 0; display: block;}
#formWrapper .fieldset_checkradio label {
	padding: 0;
	position: relative;
	margin: 0 0 10px 0;
}
#formWrapper .fieldset_checkradio input[type=checkbox],
#formWrapper .fieldset_checkradio input[type=radio]{
	border: 1px solid #ffffff;
	/*border-radius:2px;
	box-shadow: 0px 0px 3px #cc0000; */
	width: 16px; height: 16px;
	position: relative;
	bottom: 0px;
}
#formWrapper .fieldset_checkradio label span{display: inline-block; position: relative; bottom: 3px; left: 8px;}


.autotarget{margin: 21px 0 0 0;}


#formWrapper2 #formnavigation2,
#formWrapper #formnavigation {
	height: 55px;
	margin: 30px 0 0 0;
	position: relative;
}

#formWrapper2 #formnavigation2 button,
#formWrapper #formnavigation button, button.formbutton {
	border: 0;
	color: #ffffff;
	cursor: pointer;
	height: 29px;
	padding: 5px 20px;
}

#formWrapper2 #formnavigation2 .back,
#formWrapper #formnavigation .back {
	background: url(../images/formulare/btn_back.gif) top left no-repeat;
	left: 0;
	position: absolute;
}
#formWrapper #formnavigation .forward{
	background: url(../images/formulare/btn_forward.gif) top right no-repeat ;
	position: absolute; right: 0;
}
#formWrapper #formnavigation .submit{
	background: url(../images/formulare/btn_submit.gif) top right no-repeat ;
	position: absolute; right: 0;
}

#formWrapper .submit-button{
	background: url(../images/formulare/btn_submit.gif) top right repeat-x;
	position: absolute; right: 0;
}

#formWrapper .form-success-box {
	margin: 40px 20px 0px;
	padding: 20px;
	background: #b3c618;
}

#formWrapper .form-error-box {
	margin: 40px 20px 0px;
	padding: 20px;
	color: #aa0b25;
}
button.formbutton{
	background-color: #4a4a43;
}

/* === error message === */
#formWrapper input.error,
#formWrapper textarea.error,
#formWrapper div.error{
	background-color: #ffffff;
	border: 1px solid #aa0b25 !important;
}
#formWrapper div.styled-select.error{
	background-color: #ffffff;
}
#formWrapper label.error{background:none; color: #aa0b25;}
#formWrapper #errorContainer, #formWrapper .errorContainer {margin: 20px 0 10px 0; color: #aa0b25;}
#formWrapper #errorContainer label.error {background:none; font-weight: normal;}
#formWrapper #errorLabelContainer {display: none !important;}

#formWrapper .hide{display: none !important;}
#formWrapper .intro{margin: 10px 0 20px 0;}

#formWrapper #zusammenfassung {line-height: 1.5; margin: 0 0 20px 0;}
#formWrapper #datenschutzTarget{margin: 0 0 20px 0;}

#formWrapper input.honeypot{display: none;}



#formWrapper #formnavigation .submit[disabled] {
  background: #ccc;
  color: #666;
  cursor: auto;
}




/* === spezielle Anpassungen fÃ¼r versch EndgerÃ¤te === */
#tabarrows_container{display: block;}
#formtabs{display: none;}

#formWrapper .ym-g66{}
#formWrapper .ym-g66 .styled-select{width: 95% !important}
#formWrapper .ym-g66 input[type=text]{width:90% !important;}
#formWrapper .ym-g66 textarea{width: 90%;}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
	#formtabs{display: none !important;}
	#formWrapper .ym-g66 .input[type=text]{width:90% !important;}
	#formWrapper .ym-g66 textarea{width:90% !important;}
}


@media only screen and (max-width: 768px) {
	#tabarrows_container{display: none; height: 0px;}
	#formtabs{display: block;}

	#formWrapper .styled-select{width: 88% !important}

	#formWrapper .ym-g66{width:100%;}
	#formWrapper .ym-g66 .styled-select{width:94% !important;}
	#formWrapper .ym-g66 input[type=text]{width:90% !important;}
	#formWrapper .ym-g66 textarea{width:90% !important;}

	#formWrapper .fieldset_checkradio input[type=checkbox],
	#formWrapper .fieldset_checkradio input[type=radio]{width: 32px; height: 32px;}
}


@media only screen and (max-width: 320px) {
	#tabarrows_container{display: none; height: 0px;}
	#formtabs{display: block;}

	#formWrapper .styled-select{width: 90% !important}

	#formWrapper .ym-g66{width:100%;}
	#formWrapper .ym-g66 .styled-select{width: 90% !important}
	#formWrapper .ym-g66 input[type=text]{width:80% !important;}
	#formWrapper .ym-g66 textarea{width:80% !important;}

	.datenschutzSpan{width: 80%;}

	#formWrapper input[type=text], #formWrapper input[type=email], #formWrapper input[type=plz], #formWrapper input[type=url], #formWrapper textarea {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
}
