@charset "utf-8";
/* -------------- Contact form CSS -------------
##### Change these styles at whim to match your own site layout and look #### */



/* ---------- Styles for the form element itself  ---------- */
form.validate {
	margin:0 0 2px 0;
	padding:0 0 2px 0;
}
section form.validate {
	margin:0 0 40px 0;
}


/* ---------- Shared styles for labels, input fields, textareas, select lists  ---------- */
form.validate label, form.validate input, form.validate textarea, form.validate select {	
	color:#626262;
	margin:0 0 2px 0;
	padding:2px 4px;
	width: 250px;
	/* ---- These are here for a reason - don't remove if not necessary ---- */
	display:block;
	float:left;
}

section form.validate input, section form.validate textarea, section form.validate select {
	width: 340px;
}


/* ---------- Special styles for input fields, select lists and textareas only ---------- */
form.validate input, form.validate textarea , form.validate select{
	background: transparent;
	border:1px solid #626262;
	font:1em Arial, Helvetica, sans-serif;
}

form.validate textarea {
	height:100px;
}

/* ---------- For better usability, change the look of your form fields when they are focused ---------- */
form.validate input:focus, form.validate textarea:focus {
	background:#fff;
	border:1px solid #222;	
}



/* ---------- Label styles ---------- */
form.validate label {
	margin-right:5px;
	padding:0 15px 2px 0;		
	width:80px;						
}


/* ---------- If you want to display legends, just remove the display:none here and add your own styles ---------- */
form.validate legend {
	display:none;
}


/* ---------- Fieldsets can be made visible by removing the default style here ---------- */
form.validate fieldset {
	border:none;
}



/* ---------- Radio buttons ---------- */
form.validate input.radio {
	background:transparent;
	border:none;
	width:20px;
}

form.validate label.radio {
	width:auto;
}



/* ---------- Checkboxes ---------- */
form.validate input.checkbox {
	background:transparent;
	border:none;
	width:20px;
	margin-top: 4px;
}

form.validate label.checkbox {	
	width:90px;
}


/* ---------- Select lists - make them a bit larger than your input fields ---------- */
form.validate select {
	width:286px;
}


/* ---------- Submit button ---------- */
form.validate input#submit,
form.validate input.nl-submit,
form.validate input.submit{
	background:#222;
	border:none;
	color:#fff;
	cursor:pointer;
	font-size:13px;
	font-weight:bold;
	
	/* Watch out! IE6 will double the left margin if the submit button is floated. To prevent this, either provide only half the margin value to IE6 or set the button to display:inline. */
	display:inline;
	margin:0 0 0 100px;
	
	padding:5px;
	width:12em;
}


/* ---- Won't show in IE6 - but why should everyone else miss all the fun? ---- */
form.validate input#submit:hover,
form.validate input.nl-submit:hover,
form.validate input.submit:hover {
	background:#626262;
}




/* ---------- Class for required fields - add colors, an image, or whatever you wish ---------- */
form.validate label.required {
	padding-right:15px;
	background:url(../images/icon-required.png) center right no-repeat;	
}



/* ---------- On user errors, required labels are style with these ---------- */
.error {
	color:#951717 !important;
	font-weight:bold !important;
}



/* ---------- The error message - make it huge and hard to miss! :) ---------- */
p#fehlermeldung {
	background:#fff;
	display:none;
	margin:0 0 15px 0;
	padding:20px;
	width:300px;
}



/* ---------- Since by default labels and form fields are floated, the cleared br elements are required to keep them all in place ---------- */
form.validate br {
	clear:left;
}


/* ---------- Without these styles, some browsers show a huge gap where the hidden fields are. Don't remove them unless you know what you're doing! ---------- */
form.validate fieldset.hidden, form.validate input[type=hidden] {
	display:none;
	border:0;
	padding:0;
}

.textfield {display: none !important;}



/*------------------------------------*/
/*---------- FormValidation ----------*/
/*------------------------------------*/
.formError {
	padding: 0 0 13px 0;
	display: block;
	margin: 0 0 0 -166px;
	position: absolute;
	top: 300px;
	right: 300px;
	z-index: 10;
	cursor: pointer;
}

.formError .formErrorContent {
	background: #222;
	font-size: 12px;
	color: #ffffff;
	width: 180px;
	padding: 4px 10px;
}

.formError .formErrorArrow {
	width: 15px;
	height: 15px;
	position: absolute;
	bottom: 0;
	left: 20px;
	z-index: 20;
}

.formError .formErrorArrow div {
	background: #222;
	font-size: 0.001em;
	line-height: 0.001em;
	text-indent: -5555px;
	overflow: hidden;
	display:block;
	height: 1px;
	margin: 0 auto;
}

.formError .formErrorArrow .line10 {
	width: 15px;
}

.formError .formErrorArrow .line9 {
	width: 13px;
}

.formError .formErrorArrow .line8 {
	width: 11px;
}

.formError .formErrorArrow .line7 {
	width: 9px;
}

.formError .formErrorArrow .line6 {
	width: 7px;
}

.formError .formErrorArrow .line5 {
	width: 5px;
}

.formError .formErrorArrow .line4 {
	width: 3px;
}

.formError .formErrorArrow .line3 {
	width: 1px;
}

.formError .formErrorArrow .line2 {
	background:none;
	width:3px;
}

.formError .formErrorArrow .line1 {
	background:none;
	width:1px;
}

#thxmessage {
	background: #ffffff;
	border: 1px solid #626262;
	display: none;
	margin: 0 0 15px 0;
	padding: 20px;
}

#newsletter-info {
	background: #fafafa;
	border: 1px solid #626262;
	margin: 0 0 15px 0;
	padding: 20px;
}