/* Forms Stylesheet
	* Aanvraagformulier * Contactformulier * Aan- en afmelden nieuwsbrief
*/

/* Live validation */
.information{position: absolute; background: #fffacd; border: 1px solid #e1d678; width: 150px; padding: 5px; z-index: 99; display: none; margin-left: 410px;}
.information h4{background: url("/img/information-icon.png") no-repeat 0 50%; padding-left: 23px; border: none; color: #2d79ce; font-size: 1.2em; margin-bottom: 5px; clear: none; font-weight: bold;}
.information p{line-height: normal !important; font-size: 1.2em !important; color: #67696b; clear: left;}
.information span{display: block; width: 11px; height: 11px; left: -16px; top: 3px; float: left; background: url("/img/information-form-arrow.gif") no-repeat 0 50%;position: relative;}

span.accept, span.exclamation{visibility: visible !important; display: block; width: 16px; height: 16px; float: left; padding: 0; margin: 3px 0 0 5px; background: url("/img/sprite-validate.gif") 0 16px;}
span.exclamation{background-position: 0 0;}

input.inputError{border: 1px solid #ff0000; width: 33.8% !important; margin-bottom: 7px;}
span.errorText{clear: left; padding-top: 0; color: #ff0000; font-size: 1.1em; margin: -4px 0 3px 195px; width: 165px; font-weight: normal;}
select.inputError{border: 1px solid #ff0000; padding-right: 2px;}
/* End Live validation */

/* Formkader */
#formKader{float:left; padding: 0 2em 2em 2em; margin: 1em 0; background: #e9f6fc; border: 1px solid #afc7e3;}

/* Informatie blokken naast het formulier */
#formInfo{color:#67696b; float:left; padding: 1.5em 2em 4.9em 2em; margin:1em 2em 1em 3em; background: #E9F6FC; border: 1px solid #afc7e3; overflow: hidden;}
#formInfo .infoBlok1,
#formInfo .infoBlok2,
#formInfo .infoBlok3{background-color:#fff; border:1px solid #afc7e3; margin: 1em; margin-bottom:2em; padding:1em; width:212px;		}
#formInfo .infoBlok3{ margin-bottom: 4.2em; padding-bottom:.8em;}
#formInfo h3{font-size:16px; font-weight:bold;}
#formInfo ul{ font-size:16px;}	
#formInfo ul.formKenmerken li{background: url("/img/kenmerk-icoon.gif") no-repeat center left; border-bottom:1px solid #eaeaea; padding-left: 1.5em; padding-bottom:5px; padding-top:5px;}		
#formInfo .infoBlok2 h4{font-size:12px; font-weight:bold; padding-top:5px;}
#formInfo .infoBlok2 p{font-size:12px; line-height:normal; border-bottom:1px solid #eaeaea; padding-bottom:5px;}
#formInfo ul.formStappen li{ padding:10px 0 10px 2.5em;}	
#formInfo ul.formStappen li.stap1{ background: url(/img/stap1-icoon.gif) no-repeat center left;}	
#formInfo ul.formStappen li.stap1 span{background: url(/img/check.gif) no-repeat center right; padding-right:1.3em;}	
#formInfo ul.formStappen li.stap2{ background: url(/img/stap2-icoon.gif) no-repeat center left;}	
#formInfo ul.formStappen li.stap3{ background: url(/img/stap3-icoon.gif) no-repeat center left;}	
#formInfo ul.formStappen li.stap4{ background: url(/img/stap4-icoon.gif) no-repeat center left;}	
	
#formStappen{float:left; color:#67696b; background-color:#fff; padding:1.5em 1.5em; margin:1em 0;}		
#formStappen h3	{background: url(/img/check.gif) no-repeat center left; font-size:16px;font-weight:bold; padding-left:1.2em; margin-bottom:0;}
#formStappen p			 { line-height:normal; font-size:12px;}		
#formStappen .betrouwbaar{ border-right:1px solid #eaeaea; float:left; width:150px;	padding-left:.5em;}
#formStappen .veilig	 { padding:0 1em 0 2em; border-right:1px solid #eaeaea; float:left; width:160px;}
#formStappen .snel		 { float:left;width:150px; padding-left:2em;}
/* EINDE Informatie blokken */	

#aanvragen #formKader #frmDSBWebform{margin: 0 auto; width: 855px;}
#aanvragen #formKader fieldset{width: 835px;}
#aanvragen #formKader label{width: 33%;}
#aanvragen #formKader input{width: 33%;}
#aanvragen #formKader select{width: 34.2%;}
#aanvragen #formKader input.button, input.secondButton{left: 40.5%; width: 32.5%;}
#aanvragen #formKader textarea{height: 5em; width: 68.5%;}

h4.SummaryGroupHeading { display: none; }

/* 2. Global */
form{font: Arial, Helvetica, sans-serif;}

/* 3. Fieldset */
fieldset{display: block; border: 1px solid #2d79ce; border-top: .3em solid #2d79ce; margin: 1em 0 0 0; padding: 0 1em 1em 1em; width: 94%; background: #fff; z-index: 1;}
fieldset fieldset{width: 34.8% !important; float: left; margin: 0 0 .5em -0.3em !important; padding: 3px 0 0 0; border: none; background: none;}
fieldset legend {font-size: 1.6em; font-weight: bold; padding: 0 .3em .89em .3em; position: relative; top: -1em;}

.FieldSetHighlighted {border: 1px solid #2d79ce; border-top: .3em solid #ff0000;}

/* 4. Elements */

label{display: block; float: left; width: 34%; font-size: 1.4em; padding-top: 3px; margin-bottom: 5px; cursor: pointer; text-align: right; padding-right: 2%; clear: left;}

input{float: left; width: 33%; margin-bottom: 5px; font-size: 1.4em;}

select{float: left; width: 33.8%; margin-bottom: 6px;}

fieldset fieldset input, fieldset fieldset label{display: block; float: left;}
fieldset fieldset label{width: 80% !important; text-align: left; padding-top: 0; clear: none;}
fieldset fieldset input{width: auto !important; clear: left; margin-top: 1px; border: none !important;}

textarea{width: 73%; font: 1.2em Arial, Helvetica, sans-serif !important; height: 10em; float: left;}

input.button,
.secondButton{margin: 1em 0; position: relative; left: 35.5%; width: 32%; clear: left;}
.secondButton{ width: 44% !important; left: 40.6% !important; margin-top: 0;}

.emailConfirm{clear: left;}

/*fieldset h4{font-size: 1.4em; clear: left; font-weight: bold; border-bottom: 1px solid #2d79ce; padding-bottom: .1em; margin-bottom: 1em; color: #ff0000;}*/

fieldset span{font-size: 1.4em; float: left; padding-top: 3px; font-weight: bold;}

.SummaryFieldset{margin-bottom: 1em;}
.SummaryFieldset label{cursor: default !important;}
.SummaryFieldset h4{margin-left: .5em;}
.SummaryFieldset label{clear: left;}

/* Contactformulier */

/* 5. Notes */

.notes{
	float: right;
	width: 25%;
	background: #e7f1fa;
	border: 1px solid #afc7e3;
	font-size: 1em;
	padding: 1%;
}

.notes h4, .notes h5, .notes p{
	font-size: 1.2em !important;
	line-height: normal !important;
}

.notes h4{
	padding: 0 0 .5em 1.5em;
	margin-bottom: .5em;
	background: url("/img/information.gif") no-repeat;
	font-weight: bold;
	border-bottom: 1px solid #afc7e3;
	color: #000;
}

.notes h5{
	font-weight: bold;
	margin-bottom: .1em;
}

.notes p{
	margin-bottom: 1em;
}

/* 6. Errors */

.errorNotes{
	float: right;
	width: 25%;
	background: #ffeeeb;
	border: 1px solid #f4aca1;
	font-size: 1em;
	padding: 1%;
}

.errorNotes h4, .errorNotes h5, .errorNotes p{
	font-size: 1.2em !important;
	line-height: normal !important;
	color: #e76757;
}

.errorNotes h4{
	padding: 0 0 .5em 1.5em;
	margin-bottom: .5em;
	background: url("/img/exclamation.gif") no-repeat;
	font-weight: bold;
	border-bottom: 1px solid #f4aca1;
	color: #000 !important;
}

.errorNotes h5{
	font-weight: bold;
	margin-bottom: .1em;
}

.errorNotes p{
	margin-bottom: 1em;
}

/* 8. Misc */

.error, .nojavascript{
	color: #ff0000;
}

fieldset input.error, fieldset select.error { /* Rode rand om velden die niet of niet correct zijn ingevuld */
	border: 1px solid #ff0000;
	padding: 1px;
}

fieldset fieldset input.error{ /*  */
	border: none;
}

#FieldSetSubject select{
	width: 35%;
}

#FieldSetExplanation li{
	font-size: 120%;
}