@import url('http://fonts.googleapis.com/css?family=Raleway:100');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400italic&subset=latin,latin-ext');
*{margin: 0em; padding: 0em; box-sizing: border-box;}
html, body {font-size: 16px;}
body{
	background-color:#b0def4;
	font-family:Verdana, sans-serif;
	font-size: 1em;
}
sup, sub{
	font-size: 0.6em;
}

/* ----------------------------------------------------------------------------------
	     MENU
----------------------------------------------------------------------------------*/

#menu{
	 width: 20em;
	 height: 100%;
	 left: -20em;
	 top: 0em;
	 overflow-y: auto;
	 background-color:rgba(177, 224, 245, 0.98);
	 transition: all 0.6s ease;
	 position: fixed; 
	 z-index: 10; 
	 border-right: 0.2em solid rgba(0, 0, 0, 0.58);
}
#menu.shown{
	left: 0em;
}
#menu ul, #menu li{
 	 margin: 0em;
	 padding: 0em;
}
#menu ul.chapters li{
	 display: block;
	 padding-left: 1em;
	 padding-bottom: 0.4em;
	 margin-bottom: 0.4em;
	 font-size: 1.4em;
	 font-family: 'Raleway', 'sans-serif';
	 border-bottom: 0.08em solid rgba(145, 2, 2, 0.57);
}
#menu ul.par li{
	 margin: 0em;
	 padding: 0.2em 1em;
	 display: block;
	 font-size: 0.8em;
	 font-family:Verdana, sans-serif;
	 border-bottom: none;
}
#menu li:last-child{
	 border-bottom: none;
}
#menu ul.par li:hover{
	 background-color: rgba(171, 171, 171, 0.49);
}
#menu a{
	 color: #ae3737;
	 text-decoration: none;
}
#menu .par a{
	 color: #555555;
}
#menu h1{
	font-size: 2em;
	height: 2.04em;
	padding: 0em 0.7em;
	line-height: 2.2em;
	margin-bottom: 0.4em;
	border-bottom: 0.04em solid rgba(145, 2, 2, 0.57);
}
#menu h1 a{
	color: #000;
}

#menubutton{
	height: 3em; 
	position: fixed; 
	left: 1em; 
	top: 0.5em; 
	z-index: 10;
	transition: all 0.6s ease;
	cursor: pointer;
}
#menubutton.shown{
	left: 16em;
	top: 0.5em;
}

/* ----------------------------------------------------------------------------------
	     Settings
----------------------------------------------------------------------------------*/

#settings{
	width: 12em;
	right: 1em;
	top: .5em;
	position: fixed; 
	z-index: 10;
	font-family: 'Verdana', 'sans-serif';
	font-weight: 100;
	font-size: 1em;
	text-align: right;
	transition: all 0.6s ease;
}
#settings a{
	text-decoration: none;
	color: #9e0000;
	padding: 0em;
	float: right;
}
#settings a img{
	width: 3em;
	border: none;
}


/* ----------------------------------------------------------------------------------
	     Wrapper
----------------------------------------------------------------------------------*/

#wrapper{
	background-color: #FFF;
	height: 33.333333333em;
	position: relative;
	left: 0em;
	top: 3.33333333em;
	font-size: 1.2em;
	transition: left 0.6s ease;
	float: left;
	width: 10000em;
	background-color:#b0def4;
}
#wrapper.shown{
	left: 16.666666667em;
}
#wrapper div{
	width: 30em;
	height: 33.333333333em;
	float: left;
	padding: 1em 2em;
	margin: 0em;
	position: relative;
	background: #ffffff;
}
#wrapper div:first-child {
	margin-left: 2em;
}
h1, h2, h3, h4{
	font-family: 'Raleway', 'sans-serif';
	font-weight: 100;
}
#wrapper div h1{
	font-size: 3em;
	margin: 0em 0em 0em;
	line-height: 1em;
	border-bottom: 0.03em solid #b0def4;
	margin-bottom: 0.33333em;
}
#wrapper div h2{
	font-size: 2em;
	margin: 0em 0em 0em;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	border-bottom: 0.045em solid #b0def4;
}
#wrapper div h3{
	font-size: 1.8em;
	margin: 0em 0em 0em;
	line-height: 1.6666666667em;
	margin-bottom: 0.5555555556em;
	border-bottom: 0.05em solid #b0def4;
}
#wrapper div p{
	margin: 0em 0em 1.4em;
}
#wrapper div ul{
	margin: 0em 0em 1.4em;
}
#wrapper div ul li{
	margin-left: 1em;
	margin-bottom: 0.3em;
	padding-left: 0.2em;
}



#wrapper div.dark{
	background-color: #000000;
	color: #FFF;
	margin: 0em;
	height: 40 em;
}
#wrapper table {
	float: left;
	border-collapse:collapse;
	font-family:Verdana, sans-serif;
	text-align: left;
	margin: 0em;
	font-weight: normal;
	border: 0.1em solid #b0def4;
	margin-bottom: 1.5em;
}
#wrapper table tr th {
	font-family: 'Raleway', 'sans-serif';
	background-color:#b0def4;
	font-size: 1em;
	color: #333;
	padding: 0.2em 1em;
}
#wrapper table tr td {
	border: 0.1em solid #CCC;
	font-size: 0.8em;
	padding: 0.25em 1.25em;
}

/* ----------------------------------------------------------------------------------
	     credit
----------------------------------------------------------------------------------*/
#wrapper div.credit{
	width: 0em;
	padding: 0em;
	margin: 0em;
}

#wrapper p.credit{
	color: #666;
	position: absolute;
	left: 1em;
	bottom: -3em;
	font-size: 0.8em;
	width: 100em;
	text-align: left;
}
#wrapper p.credit a{
	color: #444;
	text-decoration: underline;
}

/* ----------------------------------------------------------------------------------
	     Video / applets
----------------------------------------------------------------------------------*/

#wrapper div.vid1, #wrapper div.vid2, #wrapper div.vid3{
	width: 58em;
	margin: 0em;
	padding: 0em;
	background-color: #000000;
}
#wrapper div.vid2{
	width: 29.629626667em;
}
#wrapper div.vid3{
	width: 19.753084445em;
}
#wrapper div iframe{
	margin: 0em;
	padding: 0em;
	float: left;
	border: none;
}
#wrapper div.vid1 iframe{
	width: 58em;
	height: 33.333333em;

}
#wrapper div.vid2 iframe{
	width: 29.629626667em;
	height: 16.666667em;
}
#wrapper div.vid3 iframe{
	width: 19.753084445em;
	height: 11.111111em;
}

/* ----------------------------------------------------------------------------------
	     Full
----------------------------------------------------------------------------------*/
#wrapper img.full{
	height: 40em;
	position: absolute;
	top: -3em;
}

#wrapper div.fullimg{
	padding: 0em;
	text-align: center;
}
#wrapper div.fullimg img{
	height: 33.33333em;
}

/* ----------------------------------------------------------------------------------
	     Columns
----------------------------------------------------------------------------------*/

#wrapper .column2{
	width: 60em;
	padding: 0em;
}
#wrapper .column2 h1{
	margin-left: 0.666666em;
	margin-top: 0.333333em;
	margin-right: 0.6666666em;
}
#wrapper .column2 h2{
	margin-left: 1em;
	margin-right: 1em;
	margin-top: 0.5em;
}
#wrapper .column2 h3{
	margin-left: 1.11111em;
	margin-right: 1.11111em;
	margin-top: 0.5555555em;
}
#wrapper .column2 p{
	margin-left: 2em;
	margin-right: 2em;
}
#wrapper .column2 div h2, #wrapper .column2 div h1, #wrapper .column2 div p{
	margin-left: 0em;
	margin-top: 0em;
	margin-right: 0em;
}
#wrapper .column2 div{
	background: none;
	float: left;
	width: 50%;
	margin: 0em;
}

#wrapper .column3{
	width: 90em;
	padding: 0em;
}
#wrapper .column3 h1{
	margin-left: 0.666666em;
	margin-top: 0.333333em;
	margin-right: 0.6666666em;
}
#wrapper .column3 h2{
	margin-left: 1em;
	margin-right: 1em;
	margin-top: 0.5em;
}
#wrapper .column3 h3{
	margin-left: 1.11111em;
	margin-right: 1.11111em;
	margin-top: 0.5555555em;
}
#wrapper .column3 p{
	margin-left: 2em;
	margin-right: 2em;
}
#wrapper .column3 div h2, #wrapper .column3 div h1, #wrapper .column3 div p{
	margin-left: 0em;
	margin-top: 0em;
	margin-right: 0em;
}
#wrapper .column3 div{
	background: none;
	float: left;
	width: 33%;
	margin: 0em;
}
/* ----------------------------------------------------------------------------------
	     parallax
----------------------------------------------------------------------------------*/
#wrapper .parallax{
	padding: 0em;
	overflow: hidden;
}
#wrapper .parallax img{
	position: absolute; 
	height: 33.33333em;
}
#wrapper .parallax .credit{
	bottom: -1em;
}

#wrapper .parallaxtop, #wrapper .parallaxtopin{
	padding: 0em;
	background-color: #FFF;
}
#wrapper .parallaxtop img{
	position: absolute; 
	height: 40em;
	top: -4em;
	z-index: 2;
}
#wrapper .parallaxtopin img{
	position: absolute; 
	height: 33em;
	top: 0em;
	z-index: 2;
}
#wrapper .parallaxtop .credit, #wrapper .parallaxtopin .credit{
	bottom: -1em;
}


/* ----------------------------------------------------------------------------------
	     vragen
----------------------------------------------------------------------------------*/

#wrapper div.vragen{
	background: url("../../images/vraag_bg.png") repeat-y left top #ffd000;
	background-size: 68.125em 0.4166666667em;
	padding: 0em 1em 0em 0em;
    width: 31em;
    float: left;
    overflow: hidden;
}
#wrapper div.wide{
	width: 41em;
}
#wrapper div.swide{
	width: 51em;
}
#wrapper div.small{
	width: 21em;
}
#wrapper div.vragen p{
	float: left;
	margin: 0em;
	padding: 0.7em;
	position: relative;
}
#wrapper div.vragen p.vraagnummer{
	width: 3em;
	text-align: center;
}
#wrapper div.vragen p.vraag{
	width: 27em;
}
#wrapper div.wide p.vraag{
	width: 37em;
}
#wrapper div.swide p.vraag{
	width: 47em;
}
#wrapper div.small p.vraag{
	width: 17em;
}
p.vraag span.keuze{
	display: inline-block;
	margin: 0em;
}
p.vraag span.keuze span{
	display: inline-block; 
	font-size: 0.8em;
	border: 0.1em solid black;
	border-bottom: none;
	line-height: 1em;
}
p.vraag span.keuze span span{
	display: block; 
	width: 100%; 
	border: none;
	text-align: center;
	padding: 0.2em 0.5em;
	border-bottom: 0.1em solid black;
	line-height: 1em;
}

/* ----------------------------------------------------------------------------------
	     doelen
----------------------------------------------------------------------------------*/

#wrapper div.doelen{
	background-color: #930303;
	color: #FFF;
	position: absolute;
	width: 20em;
	border-radius: 3em;
	height: auto;
	z-index: 3;
}
#wrapper div.doelen h2{
	text-align: center;
}

/* ----------------------------------------------------------------------------------
	     zoek
----------------------------------------------------------------------------------*/
#zoek{
	width: 10em;
	height: 2.3333em;
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	color:  #ffb8b8;
	position: fixed;
	top: 0.5em;
	right: 0.5em;
	cursor: pointer;
	z-index: 10;
	background: #FFF;
	box-shadow:0em 0em 0.3em 0em rgba(0, 0, 0, 0.49);
}
#zoek input{
	height: 2.3333em;
	font-size: 1em;
	padding: 0em 0.5em;
	width: 10em;
	border: none;
}

/* ----------------------------------------------------------------------------------
	     Antwoorden
----------------------------------------------------------------------------------*/
#wrapper .antwoordblok{
	width: 0em;
	background-color: #f3f1e3;
	padding: 1em 0em;
	transition: all 0.6s ease;
	overflow: auto;
}
#wrapper .antwoordblok.shown{
	padding: 1em 2em;
	width: 30em;	
}
#wrapper .antwoordblok img{
	max-width: 100%;
	max-height: 100%;
}
#wrapper .antwoordbutton{
	position: absolute;
	top: 0em;
	right: -1em;
	width: 1em;
	height: 100%;
	background-color: rgba(243, 241, 227, 0.2);
	border-left: 0.08em solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	padding: 0em;
	z-index: 3;
}
#wrapper .antwoordbutton.active{
	background-image: url("../../images/pijllinks.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center; 
}
#wrapper .antwoordbutton img{
	width: 1em;
}
#wrapper .antwoordbutton:hover{
	background-color: rgba(243, 241, 227, 0.8);
}
.antwoord H4{
	font-size: 1.2em;
	margin: 0em 0em 0.2em 0em;
}
.antwoord p{
	margin-bottom: 1em;
}
#wrapper .antwoord table, #antwoordenboekje div.antwoord table{
	border-collapse: collapse;
	min-width: 50%;
	text-align: center;
	display: block;
	margin-right: 20em;
}
#wrapper .antwoord table tr td, #antwoordenboekje div.antwoord table tr td{
	border: 0.1em solid black;
	padding: 0.4em;
}


/* ----------------------------------------------------------------------------------
	     Antwoordenboekje
----------------------------------------------------------------------------------*/
#antwoordenboekje{
	width: 68em;
	padding: 2em 0em 10em 2em;
	margin: 0em auto;
	height: auto;
	overflow: hidden;
	background: url("../../images/antwoordenboekjeback.png") repeat-y left top #f3f1e3;
	background-size: 5em 0.7955223881em;
}
#antwoordenboekje div.vraagblock{
	width: 100%;
	border-top: 0.09em solid rgba(0, 0, 0, 0.06);
	margin: 0em;
	padding: 0em;
	float: left;
}
#antwoordenboekje div.vraagblock p.vraagnummer{
	width: 3em;
	float: left;
	margin: 0em;
	padding: 1em 1em 0em 0em;
	text-align: right;
}
#antwoordenboekje div.vraagblock p.vraag{
	margin: 0em;
	padding: 1em 1em 2em 1em;
	width: 30em;
	float: left;
}
#antwoordenboekje div.vraagblock div.antwoord{
	margin: 0em;
	padding: 1em 1em 2em 1em;
	width: 30em;
	float: left;
}
#antwoordenboekje img{
	max-height: 30em;
	max-width: 30em;
}
#antwoordenboekje .antwoordbutton{
	display: none;
}

/* ----------------------------------------------------------------------------------
	     examen
----------------------------------------------------------------------------------*/

#antwoorden{
	font-size: 1.2em;
	width: 10em;
	background: #fff7ee;
	border: 0.3em solid #ffb8b8;
	border-radius: 1.1666em;
	height: 2.33333em;
	text-align: center;
	font-weight: bold;
	color:  #ffb8b8;
	position: fixed;
	top: 0.5em;
	right: 11em;
	cursor: pointer;
	z-index: 10;
	padding-top: 0.2em;
	box-shadow:0em 0em 0.3em 0em rgba(0, 0, 0, 0.2);
}

#wrapper div.examen{
	width: 60em;
	margin: 0em;
	padding: 1em 0em 2em 0em;
	height: auto;
	background-color: #FFF;
	border-right: 6em solid #b0def4;
	border-left: 6em solid #b0def4;
}

#wrapper div.examen h1{
	border-bottom: 0.2em solid #b5b5b5;
	padding-left: 3em;
	font-size: 2em;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: bold;
}
#wrapper div.examen p{
	padding-left: 6em;
	margin-bottom: 1em;
	margin-top: 1em;
	width: 42em;
}
#wrapper div.examen img, #wrapper div.examen div.examen_vraag{
	margin: 1em 0em 1.5em 6em;
	padding: 0em;
	width: 36em;
	height: auto;
	float: none;
}
#wrapper div.examen div.examen_vraag img{
	margin: 0.5em 0em;
}
#wrapper div.examen div.examen_antwoord{
	padding: 1em 2em 1em 2em;
	margin: 0em;
	width: 100%;
	height: auto;
	float: none;
	background: #fff7ee;
	display: none;
	border-top: 0.3em solid #ffb8b8;
	border-bottom: 0.3em solid #ffb8b8;
	font-size: 0.85em;
	font-weight: 100;
}
#wrapper div.examen div.examen_antwoord.shown{
	display: block;
}
#wrapper div.examen div.examen_antwoord p{
	margin: 1em 0em;
	padding: 0em;
}
#wrapper div.examen div.examen_antwoord ul{
	margin: 1em 0em;
}
#wrapper div.examen p.bron{
	position: absolute;
	bottom: -6em;
	right: 2em;
	font-style: italic;
	color: #828080;
	height: 4em;
	text-align: right;
}
#wrapper div.examen p.blok{
	border: 0.14em solid #b5b5b5;
	margin: -0.5em 2em 1.5em;
	padding: 0.4em 0em 0.4em 4em;
	width: 40em;
	font-weight: bold;
}
#wrapper div.examen div.examen_vraag p{
	padding: 0em;
	margin: 0em;
	width: 36em;
}

#wrapper div.examen div.examen_vraag span.examen_punten{
	position: absolute;
	font-size: 0.8em;
	left: -5em;
	top: 0.15em;
}
#wrapper div.examen div.examen_vraag span.examen_nr{
	position: absolute;
	font-size: 1em;
	left: -2em;
	top: 0em;
}
#wrapper div.examen div.examen_vraag span.pijl{
	padding-left: 2em;
	display: block;
	margin-top: -1.4em;
}
#wrapper div.examen div.examen_vraag img.pijl_img{
	height: 0.8em;
	width: auto;
	left: 0em;
	top: 0em;
	padding: 0em;
	margin: 0.4em 0em;
}
#wrapper div.examen ol{
	padding-left: 1.8em;
	list-style: upper-latin;
}
#wrapper div.examen li{
	padding-left: 0.3em;
}



/* ----------------------------------------------------------------------------------
	     image sequence
----------------------------------------------------------------------------------*/


.imagesequence
{
    position: relative;
}

.imagesequence .frame
{
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    width: 100%;
}

.imagesequence .frame.default
{
    display: block;
}

.playknop{
	z-index: 10; width: 2em; position: absolute; right: 0.5em; bottom: 0.5em;
}

/* ----------------------------------------------------------------------------------
	     2d images canvas
----------------------------------------------------------------------------------*/
.dd {margin: 0em; padding: 0em; width: 22em; height: 12em; display: block;}

#wrapper img.ddcanvasimage{
	display: block;
	margin: 0.5em 0em;
}