fieldset{
	border: none;
	padding: 0;
	margin: 0;
}

html{
	background-color: #cccccc;
}
body {
	font-family: Calibri !important;
	background-color: #cccccc;
	background-image: none;
	line-height: normal;
}

a{
	color:#000;
}

#container{
	width: 97%;
 	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
 }

/* zorgen dat we de juiste achtergrondkleur krijgen*/
.toplevel{
	background-color: #FFFFFF;
}

/* de main caption krijgt een achergrond kleur */
#maincaption{
	border-bottom: solid 2px #2e6cbc;
	background-color:#eaf0f8;
}

#headerlogo{
	background-color: #2e6cbc;
}
#headerlogo img{
	display: block;
	
						margin-left: auto;
    					margin-right: auto;
						
	margin-left: -0.9375em;
	margin-right: -0.9375em;
	
}

/* subboxen die een ander actergonrkleurtje krijgen */
.subbox{
	background-color:#eaf0f8;
	border:1px solid #5889c9;
}

/* deviderbalken met daarin text om onderdelen te schijden
	- de padding zorgt ervoor dat er ruimte boven/onder de text zit
	- ronde hoekje
	- grijs balkje eronder
*/
.deviderbalk{
	height: 3.5em;
	padding: 0.7em 0;
	text-align: center;
	border-bottom: 3px;
	border-bottom-style: solid;
	border-bottom-color: gray;
	border-radius: 0 0 10px 10px;

	background-color: #2e6cbc;
	margin: 0.3em 0;
}
.deviderbalk h2{
	color: #EEEEEE;
	font-size: 1.5em;
	margin: 0.1em 0;
}

#bottombalk{
	background-color: #2e6cbc;
	margin-top: 0.5em;
}

@media only screen and (max-width: 768px) {
	/* op een klein scherm hebben de tables geen marge links of rechts */
	div.khui.khtable{
		margin-left: -0.9375em;
		margin-right: -0.9375em;
	}

	/* zorgen dat er alleen op een groot scherm een marge links en rechts zit */
	#container{
		width: 100%;
	 	margin:0;
	 }
}

	/*
		Alle achtergronden maken we doorzichtig om maar 1 keer de kleur te hoeven zetten
		Zorgen dat ons menu een mooi rond onderkantje heeft
		Voor het vakje dat rechts uitgelijnd is moeten we nog een rond hoekje zetten anders valt hij erover
	*/
	#headermenu{
		background-color: #2e6cbc;
		border-radius: 0 0 10px 10px;
		margin: 0 -0.9375em;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
	}
	#headermenu .top-bar{
		background-color: transparent;
		margin-bottom: 0;
		height: 3.5em;
		padding-top: 0.3em;
	}
	#headermenu .top-bar.expanded {
		height: auto;
	}

	#headermenu .top-bar-section ul {
		background-color: transparent;
		padding-left: 0px;
		font-size: 1.5em;
	}
	#headermenu .top-bar-section ul.dropdown {
		background-color: #2e6cbc;
		font-size: 0.8em;
		box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	}

	/* de menu items zijn doorzichtig en */
	#headermenu .top-bar-section ul li > a {
		background-color: transparent;
		color: #EEEEEE;
	}

	/* een actief menu is bold italic */
	#headermenu .top-bar-section ul li.active > a {
		color: #FFFFFF;
		background-color: transparent;
		font-weight: bold;
		font-style: italic;
	}

	/* de hoverkleur van de text is groen */
	#headermenu .top-bar-section ul li > a:hover {
		color: #FFFFFF;
		background-color: #FF0000;
	}

	/* in het mobile menu is de titelbalk doorzichtig */
	#headermenu .top-bar.expanded .title-area{
		background-color: transparent;
	}

/* DE INFO POPUPS */
a.info{
	position:relative; /*this is the key*/
/*	z-index:26;*/
	text-decoration:none;
}
a.info:hover{
	/*z-index:0;*/
}
a.info span.info{
	display: none;
}
a.info:hover span.info{ /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	top:10px;
	left:1em;
	width:15em;
	border:1px solid #243958; /*donkerblauw*/
	background-color: #2e6cbc;
	color: #EEEEEE;
	text-align: center;
	padding: 5px;
	z-index:26;

}
a.info span.info a{
	color:#fff;
}


/* Override foundation css
*/

fieldset legend{
	background-color: transparent;
}
 

/*	De weergave op inline block zetten zodat de breedte gezet kan worden
	De labels krijgen altijd dezelfde breedte
	Door de hoogte op 1em te zetten waken we ervoor dat de text altijd blijft passen*/
div.khui>label.khui{
	display: inline-block;
	float:  left;
	width:  8em;
	height: 1.2em;
}
/* achter de label komt een span om de controls netjes de rest van de 100% te laten opvullen */
div.khui>span.khui{
	display: block;
	overflow: hidden;
}
/*	zorgen dat de controls de span waarin ze zitten helemaal opvullen
	moeten ze 100% breedte krijgen */
div.khui>span>input,
div.khui>span>textarea,
div.khui>span>span,
div.khui>span>select{
	width: 100%;
	margin: 0;
}

/* rechts uitlijnen van de text in de labels control */
div.khui>span>span{
	display: inline-block;
	text-align: right;
}

/* achtergrond doorschijnend met een randje */
div.khui>span>select.khui,
div.khui.khlblbtn>input,
div.khui input.khlbltxt,
div.khui textarea.khlbltxtarea,
div.khui input.khlblperiodepicker{
	border: 1px solid #a7a7a7;
	background-color: transparent;
}

/*
 	Button achtergrond grijs
	breedte 100%
	padding zodat hij mooi in het midden van het vak terecht komt
*/
div.khui.khlblbtn input.khlblbtn{
	background-color: #DDD;
	width: 100%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* de hoofd div een padding geven zodat er ruimte onstaat tussen de controls */
div.khui.khlbllbl,
div.khui.khlblcbo,
div.khui.khlblrdo,
div.khui.khlblchk,
div.khui.khlblbtn,
div.khui.khlbltxt,
div.khui.khlbltxtarea {
	/*padding: 0.15em 0;*/
	overflow: auto;
}


/* de muis als pointer maken zodat we zien dat er geklikt kan worden */
div.khui input.khlblbtn,
div.khui input.khlblperiodepicker,
div.khui ul.khtabbladen li{
	cursor: pointer;
}


/* Als de muis boven het vakje hangt een donkerdere kleur maken */
/* Van de radio en de checkbox licht de hele regel op */
div.khui input.khlbltxt:hover,
div.khui.khlbltxtarea:hover,
div.khui input.khlblbtn:hover,
div.khui input.khlblperiodepicker:hover,
div.khui select.khlblcbo:hover,
div.khui.khlblrdo:hover,
div.khui.khlblchk:hover,
div.khui.khtabbladen div h3:hover{
	background-color:#c0d3eb;
}

/* Een extra div rechts naast de control*/
div.khui.rightfloatdiv{
	float: right;
}

/* De textarea een grotere minimale hoogte geven */
div.khui.khlbltxtarea>span>textarea{
	min-height: 5em;
}


div.khui.khui.khlblperiodepicker>label{
	width: 40%;
}
div.khui.khui.khlblperiodepicker>span{
	padding-right: 0.2em;
}
div.khui.khui.khlblperiodepicker>span>input{
	width: 100%;
}
div.khui.khui.khlblperiodepicker>img{
	float: right;
	height: 1em;
}


/* zorgen dat datatables van links naar rechts kunnen scrollen */
div.khui.khtable,
div.khui.khgrdblock{
	overflow-x: auto;
}
table.khui.khtable,
table.khui.khgrdblock{
	background: white;
	width: 100%;
}
table.khui.khtable thead,
table.khui.khtable tfoot,
table.khui.khgrdblock thead,
table.khui.khgrdblock tfoot{
	background: #eaf0f8;
	font-weight: bold;
}

/*  inner column border */
table.khui.khtable th,
table.khui.khtable td {
	border-right:1px solid #5889c9;
}

/* text standaard rechtsuitlijnen */
table.khui.khtable td,
table.khui.khgrdblock td{
	text-align: right;
}

/* de header moet een onder streepje hebben */
table.khui.khtable th,
table.khui.khgrdblock th{
	border-bottom:1px solid #5889c9;
}
/* laatste col geen border rechts*/
table.khui.khtable .col_last {
	border-right:none;
}

/* cell padding */
table.khui.khtable tr th,
table.khui.khtable tr td {
	padding: 0.25em 0.625em;
	font-size: 0.8em;
}

table.khui.khgrdblock tr th,
table.khui.khgrdblock tr td {
	padding: 0.2em 0.625em;
	font-size: 1em;
}

/* even / oneven regel kleuring */
table.khui.khtable tr.even { background-color:#d5e2f2; } /* light blue */
table.khui.khtable tr.odd td.sorting_1 { background-color:#eaf0f8;} /* light blue sorted */
table.khui.khtable tr.even td.sorting_1 { background-color:#d5e2f2; } /* dark blue sorted */

/* zoekvakje uitzetten */
div.khui.khtable div.dataTables_filter{
	display: none;
}
/* een cursor zetten in het sorteer kolom */
table.khui.khtable th.sorting,
table.khui.khtable th.sorting_desc,
table.khui.khtable th.sorting_asc{
	cursor:pointer;
}
table.khui.khtable th.sorting_desc {
	background:url(/khweb/images/icon-arrow-dn.png) no-repeat right;
}
table.khui.khtable th.sorting_asc{
	background:url(/khweb/images/icon-arrow-up.png) no-repeat right;
}

/* column classes die gezet worden bij het aanmaken van de tabel */
table.khui.khtable td.datum{
	text-align:center;
}
table.khui.khtable td.text{
	text-align:left;
}
table.khui.khtable td.caption{
	font-weight: bold;
}

/* in een standaard grid staat de header midden uitgelijnd. Dat willen we niet */
table.khui.khgrdblock thead th{
	text-align: right;
}

table.khui.khgrdblock tbody tr td.td_caption{
	text-align: left;
	border-right:1px solid #5889c9;
	width: 20%
}

.khtabbladen {
	border-bottom: 5px solid #2e6cbc;
}
.khtabbladen .tab {
	padding-left: 0;
	margin-top: 7px;

}
.khtabbladen .tab h3{
	border-color: #A7A7A7;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	margin: 0;
	padding: 0.5em;
	text-align: center;
	font-size: 1em;
	height: 2.2em;
}


.khtabbladen .tab.selected h3{
	background-color:#2e6cbc;
}
.khtabbladen .tab.selected h3 a{
	color:#EEEEEE;
}


/* het font standaard zetten */
.ui-widget {
	font-family: inherit;
}
/* de header boven een form of popup */
.ui-widget-header {
	background-color: #d5e2f2;
	background-image: none;
	border: 1px solid #5889c9;
	color: #555;
}
/* de inhoud van een widget */
.ui-widget-content {
	background-image: none;
	background-color: #d5e2f2;
	border: 2px solid #5889c9;
	color: #555;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background-image: none;
	background-color: #F6F6F6;
	border: 1px solid #5889c9;
	color: #555;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	background-image: none;
	background-color: #F6F6F6;
	border: 1px solid #5889c9;
	color: red;
}

/** zie voor verschillen de custom stylesheets */
/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
	opacity: .5;
	filter: Alpha(Opacity=50);
}
.ui-widget-shadow {
	margin: -5px 0 0 -5px;
	padding: 5px;
	opacity: .2;
	filter: Alpha(Opacity=20);
	border-radius: 5px;
}


/* in de naw box moeten de labels links uitgelijnd worden */
#relnawbox div.khui span.khui{
	text-align: left;
	float: none;
}

#relzoek table.khui.khtable{
		font-size: 1.2em;
}