/* CSS reset */
*{
	font-family: Verdana, Tahoma, Arial, sans-serif;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

table, caption, tbody, tfoot, thead, tr, th, td {
	/*
	ALGEMENE TABLE STYLES UITGEZET, code uit editors leek met name hierdoor nergens meer op. nu gebruikt hij HTML attributen voor tabel-styling

	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;

	font-size: 100%;
	vertical-align: top;
	background: transparent;*/
}
html{
	/*overflow-y:scroll;*/
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Einde Reset */



/* BODY */
body{
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size: 12px;
	background: #d6dee3;
	padding-top: 20px;
}
div.content{
	width: 962px;
	margin: 0 auto;
}
.top{
	height: 60px;
	border: 1px solid darkgray;
	background: url('img/top_bg.gif') repeat-x top;
	color: #ffffff;
	margin-bottom: -1px;
	width: 960px;
}
	.top .headers{
		float: left;
		width: 735px;
		line-height: 60px;
		padding: 0 17px;
	}
	.top .controls{
		padding: 3px 6px;
		width: 120px;
		float: left;
		text-align: right;
	}

#hoofdkader{
	height: 450px;
	width: 920px;
	overflow-y: scroll;
	border: 1px solid darkgray;
	padding: 20px;
	background: white;
	float:left;
}
.navigatie{
	height: 45px;
	width: 962px;
	display: block;
 	padding-top: 20px;
 	clear: both;
}
/*rest*/
div.pager{
	float: left;
	width: 530px;
	text-align: center;
	margin-top: 5px;
}
div.pager .pagerlink {
	cursor:pointer;
	padding: 0 10px;
	display: inline-block;
	line-height: 20px;
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}
div.pager a.beantwoord, .pager b.beantwoord{
	color: #000000;
}
div.pager a.nietbeantwoord{
	color: red;
}
div.pager b.nietbeantwoord{
	color: lime;
}

div.previousbutton{
	float: left;
	display: block;
}
button#previousbutton{
	width: 200px;
}
span#previousbuttonplaceholder{
	width: 215px;
	display: block;
}
div.nextbutton{
	float: right;
}
button#nextbutton, button#endbutton, button#testendbutton, span#nextbuttonplaceholder{
	width: 200px;
	margin-right: 0px;
}

/*Timer*/
#timer{
	/*margin-top: -20px;*/
	font-weight: bold;
	line-height: 30px;
}

/*Tijd verlopen*/
span.tijdverlopen{
	font-weight: 	normal;
	font-size: 		100%;
}


h1{
	width: 100%;
	display: block;
	padding-bottom: 7px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family:arial,helvetica,sans;
 	font-size:	150%;
 	color: white;
}

h2{
 	font-size:	120%;
 	color: #2B7AAE;
 	padding-bottom: 5px;

 	border-bottom: 1px solid #2B7AAE;
 	font-weight: bold;
 	margin-top: 30px;
	font-family:arial,helvetica,sans;
 	clear: both;
}
h3{
 	color: #2B7AAE;
 	font-weight: bold;
 	border-bottom: 1px solid #2B7AAE;
}

.element{
	display: block;
 	margin-top: 19px;
 	clear: both;
}


.element .naamelement{
	float: left;
	margin-right: 5px;
	margin-bottom: 19px;

}

.element label{
	font-weight: bold;
 	color: #999999;
}

.element p{
	 margin-top: 8px;
}

li{
	padding: 3px 0;
}



/* INPUT */

/* Button */
.is_btn, .is_btn[disabled]{
	/*background: url('img/verloop_wit_20px.png') repeat-x #eee;*/
	color: #000;
	border-left:	1px solid #888;
	border-top:		1px solid #888;
	border-right:	1px solid #444;
	border-bottom:	1px solid #444;
	cursor: pointer;
	outline: none;
	padding: 3px 3px 5px 3px;
	margin: 0px;
	margin-right:	15px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 120%;
}
.is_btn:hover{
	border: 1px solid #2b7aae;
	color: #2b7aae;
}
.is_btn:focus{
	background-color: #ccc;
}
.is_btn img{
	vertical-align: middle;
}

.is_btn.down{
	background: url('img/verloop_wit_20px_du.png') bottom repeat-x #999;
}

.is_btn_top{
	padding: 0px;
	border: 1px solid #fff;
	*margin-left: 10px;
	font-size: 100%;
}
.is_btn_top:hover{
	border: 1px solid #fff;
	color: #2b7aae;
}


/* Checkbox */
input[type=checkbox]:active, input[type=checkbox]:focus, input[type=checkbox]:hover{
	outline: 2px solid #2b7aae;
}

.is_checkbox{
	vertical-align: middle;
}

/* Radio */
.is_radio{
	vertical-align: middle;
}

/* Text */
.is_text{
	border: 1px solid #888;
	padding: 4px;
	vertical-align: middle;
	background-color: #fff;
	font-size: 100%;
	outline: invert none medium;
}

.is_text.title{
	font-size: 150%;
	width: 50%;
	margin-right: 8px;
}

.is_textarea{
	border: 1px solid #888;
	padding: 4px;
	line-height: 16px;
	font-size: 100%;
	width:	450px;
	height:200px;
}

.is_textarea_code{
	font-family: "Courier New", Courier, monospace;
	font-size: 100%;
	color: #000099;
}

.is_text:hover, .is_textarea:hover{
	border-color: #2b7aae;
	border-width: 2px;
	padding: 3px;
}
.is_text:focus, .is_text:active, .is_textarea:focus, .is_textarea:active{
	border-color: #2b7aae;
	border-width: 2px;
	padding: 3px;
}
.is_text.xsmall{
 	width: 50px;
}
.is_text.small{
 	width: 100px;
}
.is_text.medium{
 	width: 200px;
}
.is_text.large{
 	width: 300px;
}
.is_text.xlarge{
 	width: 400px;
}

/* Textarea */
.is_textarea.small{
 	width: 400px;
 	height: 50px;
}
.is_textarea.medium{
 	width: 400px;
 	height: 100px;
}
.is_textarea.large{
 	width: 400px;
 	height: 200px;
}
.is_textarea.xlarge{
 	width: 400px;
 	height: 300px;
}

.bold{
	font-weight: bold;
}

/* Select */
.is_select{
	border: 1px solid #888;
	font-size: 100%;
	padding: 1px;
}
.is_select.xsmall{
 	width: 60px;
}
.is_select.small{
 	width: 110px;
}
.is_select.medium{
 	width: 210px;
}
.is_select.large{
 	width: 310px;
}
.is_select.xlarge{
 	width: 410px;
}

.is_select:focus, .is_select:hover{
	outline: 2px solid #2b7aae;
}

/* Hyperlinks */
a{
	color: #2b7aae;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a:focus, a:active{
	color: #105887;
	text-decoration: underline;
}

/* Disabled */
.is_disabled, .is_disabled:focus, .is_disabled:active{
	border: 1px solid #888888;
	background-color: lightgrey;
}

input[disabled="disabled"],
button[disabled="disabled"],
.disabled{
	color: #999;
	border-color: #ddd;
	background: #fff;
}
input[disabled="disabled"]:hover,
button[disabled="disabled"]:hover,
.disabled:hover{
	color: #999;
	border-color: #ddd;
	background: #fff;
}


/* Errorstates */
.is_text.errorstate,
.is_textarea.errorstate{
	border-color: red;
	border-style: dashed;
	border-width: 1px;
	padding: 4px;
}

.is_text.errorstate:hover, .is_text.errorstate:focus,
.is_textarea.errorstate:hover, .is_textarea.errorstate:focus{
	border-color: red;
	border-style: dashed;
	border-width: 2px;
	padding: 3px;
}


/* Content fixes */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}


/*	TEKST */
.xxltekst{
	font-size: 250%;
}

.xltekst{
	font-size: 200%;
}

.ltekst{
	font-size: 170%;
}

.mtekst{
	font-size: 100%;
}

.stekst{
	font-size: 80%;
}

.aandacht{
	color: orange;
}

.letop{
	color: red;
}

.goed{
	color: green;
}


.pasop{
	color: #f60;
}
.pasop a{
	color: #f60;
}


/* INPUT ELEMENTEN */
input.small{
	width: 100px;
}
input.medium{
	width: 200px;
}
input.large{
	width: 300px;
}

input.xlarge{
	width: 450px;
}

/*
	Lettergrootte
*/
.lettergrootte_controls{
	font-size: 12px;
}
	.lettergrootte_controls a{
		color: #fff;
	}
.font-medium{
	font-size: 12px;
}
.font-large{
	font-size: 18px;
}
.font-huge{
	font-size: 24px;
}

/*
	jQuery Alerts
*/
#popup_title{
	font-size: 100% !important;
	height: auto !important;
	background-color: #2b7aae !important;
}
.popup_container{
	font-size: 100% !important;
}
#popup_message{
	line-height: 110% !important;
}

.content_feedback{
	width: 960px;
	background: none repeat scroll 0 0 white;
    border: 1px solid darkgray;
    margin-top: 10px;
    margin-bottom: 10px;
}
.content_feedback table{
	margin: 15px 15px 15px 15px;
}

.content_feedback .goodtekst{
	color: #00CC33;
}

.content_feedback .errortekst{
	color: #FF3300;
}


/*Speciaal voor profielgenerator*/
.kader_titel{
	margin-top: 0px;
	margin-bottom: 20px;
}
.info_blok{
	background-color: #EEEEEE;
	border: 1px solid #AAAAAA;
	margin-bottom: 20px;
	padding: 5px;
	line-height: 30px;
}
.competentie_type_titel{
	font-family: arial,helvetica,sans;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.competentie_table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.competentie_table th{
	font-weight: bold;
	border-bottom: 1px solid #E9E9E9;
	text-align: left;
	padding: 7px 5px;
}
.competentie_table td{
	border-bottom: 1px solid #E9E9E9;
	padding: 7px 5px;
}
.competentie_row:hover{
	background-color: #F5F5F5;
}
th.competentie_checkbox_titelcel{
	text-align: center;
}
.competentie_checkbox_cel{
	width: 150px;
	text-align: center;

}
.competentie_checkbox_label{
	width: 100%;
	height: 100%;
	min-height: 22px;
	display: block;
	text-align: center;
	cursor: pointer;
}

th.competentie_select_titelcel{
	text-align: center;
}
.competentie_titel_cel{
	cursor: pointer;
}
.competentie_titel_cel.strong{
	font-weight: bold;
}
.competentie_select_cel{
	width: 150px;
	text-align: center;
}
.competentie_select{
	width: 50px;
}
.infoimg{
	cursor: pointer;
}