/* ### general ### */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body { font-family: "Arial"; font-size: 12px; color: #3e3d40; height: 100%; }
input,select,textarea { font-family: "Arial"; font-size: 12px; color: #3e3d40; }
body { background: #fff; }
img { border: 0; display: block; }
ul,li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; max-width: 1020px; position: relative; }
p { font-family: Arial""; }

/* verberg het anker */
a.mobileAnchor { display: none;}

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }


	/* ### main container ### */
	#mainCntr { width: 100%; }

	/* ### content container ### */
	#contentCntr { width: 100%; padding: 70px 0; overflow: hidden; }
	#contentCntr .inner { width: 100%; }

	/* ### left container ### */
	#leftCntr { float: left; width: 25%; }
	#leftCntr .inner { border-right: 1px solid #c61f22; }
	#leftCntr .logo { padding: 0 20px; }
	#leftCntr .logo img { max-width: 100%; }
	#leftCntr .staplogo {padding: 0 20px;}
	#leftCntr .staplogo img {max-width: 100%;}

		/* ### diploma box ### */
		.diplomaBox { width: 100%; padding: 40px 0; }
		.diplomaBox h1 { font-size: 30px; line-height: 30px; color: #646567; margin-bottom: 10px; padding: 20px; font-weight: 400; }
		.diplomaBox h1 span { font-size: 22px; }
		.diplomaBox ul { list-style: none; font-weight: 500;}
		.diplomaBox li { font-size: 16px; line-height: 18px; padding: 5px 0; }
		.diplomaBox li a { color: #c51f22; padding: 5px 20px; display: block; text-decoration: none; }
		.diplomaBox li.gray a { color: #7b7c7e; }
		.diplomaBox li a:hover,.diplomaBox li.active a { background: #c51f22; color: #fff; }

	    /* ### right container ### */
	    #rightCntr { float: right; width: 75%; }
	    #rightCntr .holder { padding: 145px 0; }
	    #rightCntr .set { min-height: 500px; background: -webkit-gradient(linear,left top,right top,color-stop(74%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,1) 74%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left,rgba(255,255,255,1) 74%,rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(74%, rgba(255,255,255,1)), to(rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 74%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 74%, rgba(255,255,255,0) 100%); background: linear-gradient(to right,rgba(255,255,255,1) 74%,rgba(255,255,255,0) 100%); }

		/* ### menu box ### */
		#rightCntr .menuBox { padding: 0 20px; overflow: hidden; }
		#rightCntr .menuBox ul { list-style: none; }
		#rightCntr .menuBox li { float: left; color: #000; background: url(../images/sep.png) no-repeat right 15px; padding: 0 10px; font-family: Arial; font-size: 11px; }
		#rightCntr .menuBox li a { display: block; padding: 12px 5px 8px; color: #000; text-decoration: none; }
		#rightCntr .menuBox li a:hover,#rightCntr .menuBox li.active a { background: #c61f22; color: #fff; }
		#rightCntr .menuBox li:last-child { background: none; }
	    #leftCntr .mobileMenu { display: none; }

		/* ### content box ### */
		.contentBox { width: 70%; padding: 30px; }
		.contentBox h2 { font-size: 20px; color: #646567; line-height: 25px; margin-bottom: 10px; font-weight: 500;}
		.contentBox h2 span { color: #c51f22; font-size: 18px; display: block; font-weight: 600; }
		.contentBox p { line-height: 20px; margin-bottom: 15px; }
		.contentBox p span { display: inline-block; padding-right: 15px; color: #c51f22; background: url(../images/arrow.png) no-repeat right; }
		.contentBox p a { color: #5a5099; }
		.contentBox p a:hover { text-decoration: none; }
		.contentBox h3 { font-size: 16px; color: #c51f22; font-weight: 600; }
        .contentBox h3 span { color: #3e3d40; font-size: 16px; font-weight: 500;}
		.contentBox li { list-style:none; color: #646567; font-weight:bold; line-height: 20px; }

        /* Instituut details */
		.contentBox p.details { padding-top: 40px; }
		.contentBox h4.details { padding-top: 15px; padding-bottom: 0px; font-size: 12px; line-height: 19px; color: #456ead;  }
		.contentBox ul.details { padding-left: 15px; float: none; overflow: hidden; }
		.contentBox li.details { padding: 0 0 0 6px; margin: 0 15px 0 0; color: #636363; line-height: 22px; width: 100%; }
		.contentBox li.details a { color: #636363; text-decoration: none; }
		.contentBox li.details a:hover { text-decoration: underline; }
		.contentBox table.details { color: #636363; line-height: 16px; }


        /* ### aanvraag box ### */
		.aanvraagBox { width: 90%; padding: 0px 30px 30px 30px; }
		.aanvraagBox h2 { font-size: 20px; color: #646567; line-height: 25px; margin-bottom: 10px; font-weight: 500; }
		.aanvraagBox h2 span { color: #c51f22; font-size: 18px; display: block; }
		.aanvraagBox p { line-height: 20px; margin-bottom: 15px; }
		.aanvraagBox p span { display: inline-block; padding-right: 15px; color: #c51f22; background: url(../images/arrow.png) no-repeat right; }
		.aanvraagBox p a { color: #5a5099; }
		.aanvraagBox p a:hover { text-decoration: none; }
		.aanvraagBox h3 { font-size: 14px; color: #c51f22; }
        .aanvraagBox h3 span { color: #3e3d40; font-size: 12px; font-weight:normal;}

        /* aanvraagformulier */
		.aanvraagBox ul { padding-left: 5px; float: left; overflow: hidden; list-style: none;}
        .aanvraagBox li { padding: 0 0 0 6px; margin: 0 15px 0 0; list-style:none; line-height: 22px; }
        .aanvraagBox li.anders { padding: 0 0 0 22px; margin: 0 45px 0 0; list-style:none; line-height: 22px;width:200px }

		.aanvraagBox fieldset {float: left; border: 0px solid #ddd; padding: 10px 10px 20px 1.4em; margin: 0 0 1.5em 0; }    
		
		/* ### option box ### */
		.optionBox { width: 100%; overflow: hidden; padding: 40px 30px; }
        .optionBox .left { float: left; width: 100%; padding-right: 20px; margin-top: 10px;}
		.optionBox .right { float: left; width: 32%; }
		.optionBox .heading { background: #cd1619; padding: 5px; overflow: hidden; margin-bottom: 5px; min-height: 40px; }
		.optionBox .heading a.link { color: #fff; font-size: 10px; font-family: Arial; text-decoration: none; float: right; }
		.optionBox .heading a.link:hover { text-decoration: underline; }
        .optionBox fieldset { border: none; background: #fff; padding: 3px; margin: 0 0 0 0; display: block; }
		.optionBox label { font-size: 14px; color: #fff; float: left; padding-top: 5px; }
		.optionBox input.field { width: 100%; float: left; height: 20px; font-size: 11px; font-family: Arial; color: #000; padding: 3px 5px; color: #000; border: none; }
		.optionBox input.button { height: 24px; background: #cd1619; color: #fff; border: none; float: right; cursor: pointer; }
		.optionBox span.info { background: #878786; padding: 5px 10px; color: #fff; display: block; margin-bottom: 10px; }
		.optionBox .holder1 { background: #fff; -webkit-box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); padding: 10px 0 10px 30px; height: 500px; overflow-y: scroll; }
		
		.optionBox .holder2 { background: #fff; -webkit-box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); padding: 10px 0 10px 30px; height: 160px; overflow-y: scroll; margin-bottom: 15px; }
		.optionBox .holder3 { background: #fff; -webkit-box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); padding: 10px 0 10px 30px; height: 84px; overflow-y: scroll; margin-bottom: 15px; }
		.optionBox .holder4 { background: #fff; -webkit-box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); box-shadow: inset 5px 3px 7px rgba(0,0,0,0.2); padding: 10px 0 10px 30px; height: 170px; overflow-y: scroll; margin-bottom: 15px; }

        .optionBox ul { list-style: none; }
		.optionBox li { color: #636363; width: 100%; overflow: hidden; float: left; }
        .optionBox li a { /*font-size: 11px;*/ line-height: 20px; color: #636363; text-decoration: none; /*display: block; float: left;*/ }
		.optionBox li a:hover { text-decoration: underline; }
		.optionBox li.warning { color: #ff0000; font-style:italic; width: 100%; overflow: hidden; float: left; }
		.optionBox .right .holder2,.optionBox .right .holder3,.optionBox .right .holder4 { padding-left: 15px; }
        .optionBox .italic { font-style: italic; font-size: 11px; line-height: 22px; margin-left: 2px;}
		.optionBox .loading {color: #fff; background: #6782ba; padding: 0px 0px 0px 10px; margin-left: 33px; width: 130px; font-size: 12px; line-height: 22px; }


/* #Media Queries
================================================== */

@media only screen and (max-width: 1019px) {

	#leftCntr { width: 35%; }
	#rightCntr { width: 65%; }
	.contentBox { width: 100%; }
}

@media only screen and (max-width: 767px) {

	#leftCntr { width: 100%; }
	#rightCntr { width: 100%; }
	#contentCntr { padding: 0; }
	.diplomaBox { padding: 10px 0 20px; }
	#rightCntr .holder { padding: 0; }
	.contentBox { padding: 20px; }
	#rightCntr .menuBox { display: none; }
	#leftCntr .mobileMenu { display: block; position: absolute; top: 20px; right: 20px; }
	.optionBox { padding: 30px 20px; }
	#leftCntr .inner { border: none; }

    a.mobileAnchor { display: inline-block;}

}

@media only screen and (max-width: 479px) {

	.optionBox .left { padding: 0; width: 100%; float: none; margin-bottom: 10px; }
	.optionBox .right { padding: 0; width: 100%; float: none; }
    .optionBox input.field { width: 100%; padding-bottom:10px; }

}

/* ### mark searched words ### */
.markeer{background-color:Yellow; }

/* ### mark Plato ### */
.platoText {color:darkgray; font-style:italic;}
.platoMark{color:red; font-size:large; font-weight:900;}

/* copied from site.css validatie en forms  */
fieldset {
	border: 0px solid #ddd;
	padding: 10px 10px 20px 1.4em;
	margin:  0 0 1.5em 0;
}

legend {
	font-size: 1.2em;
	font-weight: bold;
}

textarea {
	min-height: 50px;
	width: 100%;
	max-width: 100%;
}

input[type="text"], input[type="password"] {
	border: 1px solid #ccc;
	padding: 2px;
	font-size: 1em;
	width: 300px;
}

select {
	border: 1px solid #ccc;
	padding: 2px;
	font-size: 1em;
	width: 30.25em;
}

input[type="submit"] {
	font-size: 1em;
	padding: 5px;
}

/* TABLE
----------------------------------------------------------*/
table.display {
	border: 1px solid #ddd;
	border-collapse: collapse;
	width:100%;
	padding-top: 5px;
}

td.display  {
	padding: 5px;
	border: 1px;
}

.display th {
	padding: 2px 5px;
	text-align: left;
	background-color: #f1ecf3;
	border: 0;
}


table {
	border: 0px solid #ddd;
	border-collapse: collapse;
	width:100%;
	padding-top: 5px;
}

table td {
	padding: 5px;
	border: 0;
}

table th {
	padding: 2px 5px;
	text-align: left;
	color: #FFFFFF;
	background-color: #679E63;
	border: 0;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
	color: #ff0000;
	/*display: block;*/
    padding: 0px 5px;
}

.field-validation-valid {
	display: none;
}

.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}

.validation-summary-errors {   
	color: #ff0000;
}

.validation-summary-valid {
	display: none;
}

.required {
	color: Red;
}
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
	margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
	margin: 0.5em 0 0 0;
}

.text-box {
	width: 30em;
}

.text-box.single-line {
	width: 30em;
	margin:0;
	padding:0;
	border-width:1px;  
}

.text-box.multi-line {
	height: 6.5em;
}

.tri-state {
	width: 6em;
}