/* forms */

/* 

******* FORMS - Modify as needed ******* 

Constants:
#DEFAULT_FLDSIZE = 26.65em
#HOR_INDENT = 9em
#HOR_INDENT_LVL2 = 9em

*/

.form { margin:1.5em 0; }
	fieldset {
		margin:0 0 10px 0;
		border:0;
		position:relative;
	}
		fieldset fieldset { margin:0.5em 0 0 0; }
		legend { display:none; }
		.legend { margin:0 0 0.75em 0; }
	
/* areas containing buttons and the buttons/links themselves */

fieldset.actions,
div.actions {
	margin:0 -15px -1px -15px;
	padding:0 15px .75em;
	overflow:hidden;
}
div.actions { margin-bottom:-11px; }
.actions .submit { 
	float:right; 
	margin-left:0.8em;
}
.actions a.cancel,
.actions a.action { 
	float:left;
	margin-right:1.25em;
}
	
/* labels and fields (in general: grouping a label and a form field)  */
input,
textarea,
select {
	font-size:1em;
	font-family:Arial, sans-serif;
	color:#424242;
	vertical-align:middle;
}
select { margin:-0.05em 0 0.25em 0; }
input.text,
input.password,
input.file,
textarea {
	width:26.65em; /* #DEFAULT_FLDSIZE */
	margin:0 0 0.25em 0;
	padding:0.12em 3px;
	border:1px solid #666;
	background:#fff;
}
input.replaced {
	left:-9000em;
	position:absolute;
	width:1px;
}

/* labeled fields */
input.labeled,
textarea.labeled { color:#999; }

/* disabled/readonly fields */
form .readonly,
form .disabled { opacity:0.4; }
	form .readonly  .readonly,
	form .disabled  .disabled { opacity:1; }
select { 
	width:27.3em; /* #DEFAULT_FLDSIZE + 0.65em */
	margin:0 0 0.25em 0;
	border:1px solid #666; 
}
	/* option { padding:0.12em 3px; } FF menu...? */
	
div.field {
	position:relative;
	margin:-3px -1% 6px -1%;
	padding:3px 1% 0 1%;
}
div.field:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
}
	label,
	.label,
	body .vertical label,
	body .vertical .label {
		width:auto;
		float:none;
		display:block;
		margin:0 0 0.12em 0;
		font-weight:normal;
		font-size:1em;
		text-align:right;
	}
	.inline {
		display:inline !important;
		width:auto !important;
		float:none !important;
	}
		/* reset labels within */
		.label label,		
		body .vertical .label label {
			display:inline;
			margin:0;
		}
	.labeled_value label {
		position:absolute;
		left:-3000em;
	}
	
/* form fields/menus of various widths */
/* Note: SELECT is generally about 0.65 ems longer than INPUT/TEXTAREA of the same class */

input.digit { width:1.75em; }
select.digit { width:2.4em; }
input.short { width:4.5em; }
select.short { width:5.15em; }
input.medium,
textarea.medium { width:8.55em; }
select.medium { width:9.2em; }
input.long,
textarea.long { width:12.5em; }
select.long { width:13.15em; }
input.extended,
textarea.extended { width:30.7em; }
select.extended { width:31.35em; }
input.auto,
textarea.auto,
select.auto { width:auto; }
input.full,
textarea.full { width:98.5%; }
select.full { width:99.85%; }
	
/* radios/checkboxes and lists of them */
input.radio { margin:0.2em 0.25em 0.25em 0.17em; }
input.checkbox { margin:0.18em 0.25em 0.25em 0.25em; }
input.checkboxAll { margin:0.18em 0.25em 0.25em 0.25em; }
	
div.field ul.optionlist,
body .vertical div.field ul.optionlist,
body .horizontal div.vertical ul.optionlist {
	margin:0 0 0.25em 0;
	list-style:none;
}
	div.field ul.optionlist li.option {
		position:relative;
		margin:0; 
		padding:0 0 0 1.75em;
		list-style-image:none;
	}
		div.field ul.optionlist li.option .radio,
		div.field ul.optionlist li.option .checkbox,
		div.field ul.optionlist li.option .checkboxAll {
			position:absolute;
			left:0; top:0;
		}
		div.field ul.optionlist li.option p { margin:0; }
		/*  reset labels within */
		div.field ul.optionlist label {
			float:none;
			display:inline;
			width:auto;
			margin:0;
		}
		
/* horizontal optionlist */
div.field ul.horizontal li.option {
	display:inline;
	margin:0;
	padding:0 0.75em 0 0;
	white-space:nowrap;
}
	body div.field ul.horizontal li.option .radio,
	body div.field ul.horizontal li.option .checkbox { position:static; }

/* horizontal form layout variation */
.horizontal label,
.horizontal .label,
.vertical .horizontal label,
.vertical .horizontal .label {
	width:9em; /* #HOR_INDENT */
	float:left;
	padding:0 0.75em 0 0;
}

/* JWB: toevoeging ivm reageren op items. Captions worden naar links uitgelijnd ipv in het midden */
.horizontal label {
	text-align:left;
}

	/* reset labels within */
	.horizontal .label label,
	.vertical .horizontal .label label {
		width:auto;
		float:none; 
		padding:0;
		display:inline;
	}
.horizontal div.field ul.optionlist,
fieldset div.horizontal ul.optionlist,
.vertical .horizontal div.field ul.optionlist { 
	margin-left:9.75em; /* #HOR_INDENT + 0.75em */
} 
	.refine fieldset div.horizontal ul.optionlist { 
		margin-left:0; /* #HOR_INDENT + 0.75em */
	} 
fieldset div.horizontal ul.optionlist li { 
	width:166px;
	float:left;
	list-style-image:none;
} 

/* one level deeper (standard fieldsets within optionlists, optionlists within optionlists) */
div.field ul.optionlist fieldset label,
div.field ul.optionlist fieldset .label {
	width:auto;
	float:none;
	display:block;
	margin:0 0 0.12em 0;
}
	/* reset labels within */
	div.field ul.optionlist fieldset .label label {
		display:inline;
		margin:0;
	}
body div.field .horizontal .vertical ul.optionlist {
	margin:0 0 0.25em 0;
	list-style:none;
}
	body div.field ul.horizontal li.option .radio,
	body div.field ul.horizontal li.option .checkbox { position:static; }
/* horizontal variation */
div.field ul.optionlist .horizontal label,
div.field ul.optionlist .horizontal .label {
	width:9em; /* #HOR_INDENT_LVL2 */
	float:left;
	padding:0 0.75em 0 0;
}
	/* reset labels within */
	div.field div.field ul.optionlist label,
	div.field ul.optionlist .horizontal .label label {
		float:none;
		display:inline;
		width:auto;
		margin:0;
		padding:0;
	}
				
/* comments and explanations */	
label em {
	/* 'required'/'optional' note */
	color:#999;
	font-style:normal;
}
	
/* confirmation and error notes */		
.error_notification,
.confirmation {
	clear:both;	
	margin:0 0 1em 0; 
	padding:0.5em 15px 1px 15px;
	background:url('/static/images/error_bg.gif') #fff000;
	border:1px solid #ffcc00;
	color:#c00;
}
.confirmation { 
	background:#090; 
	border-color:#090;
	color:#fff;
}
	.error_notification p,
	.confirmation p { margin-bottom:0.5em; }
form .error_notification,
form .confirmation { margin:0 -1% 1em -1%; } 
	.error_notification strong,
	.confirmation strong { display:block; }
	.error_notification label {
		display:inline;
		float:none;
		width:auto;
		margin:0;
		padding:0;
		text-decoration:underline;
		cursor:pointer;
	}
	.error_notification label:hover { color:#000; }
	
/* next to, or around the form fields */
div.error {
	background:url('/static/images/error_bg.gif') #fff000;
	color:#c00;
}	
	div.error em { color:#c00; }
	div.error input,
	div.error select,
	div.error textarea { 
		border-color:#c00; 
		color:#c00;
	}
	
/* a list of what went wrong next to, or below the form fields */
ul.error_list {
	color:#c00;
	list-style:disc outside;
}

a.button {
	text-decoration:none;
	background:url('/static/images/backgrounds/button.gif') no-repeat 0 0;
	padding:10px 0 10px 10px;
	line-height:18px;
	font-size:12px;
}
	a.button span {
		color:#FFF;
		font-weight:bold;
		text-transform:uppercase;
		text-decoration:none;
		background:url('/static/images/backgrounds/button.gif') no-repeat 100% -38px;
		padding:10px 10px 10px 0;
		line-height:1;
	}
	
/* search */
.search input.button {
	margin:0.4em 0 0.4em 0.75em;
}

/* JWB 2010-04-21 overrides voor formulier kenniskaart */
textarea.kk_textarea {
width:24.7em;
}

input.kk_input {
width:24.7em;
}

select.kk_select {
width:auto;
}

select.kk_select_large {
width:25.2em;
}

/* JWB 2010-05-20 tonen kenniskaart */
.labelinfo label
 {
	color:#DF4291;
}

.labelinfob label
 {
	font-weight:bold;
}

div.divinfo
{
  display:block;
  padding-left: 125px;
}

span.textinfo 
{
  display:block;
  margin-left:125px;
}
