@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

/* HTML Element styles */
html, body {	
	height:100%;/* important for iframe height */
}

body {
	font-family: 'IBMPlexSans', Arial, Helvetica, sans-serif;
	color: #333333;
	margin: 0px;
	padding:0px;
	background-color:#fff;
}

P,DIV,A,UL,OL,LI, TD,TH {
  font-size: 20px;
}

TD {
	vertical-align:top;
}
p{margin-top:0;}

img {
	max-width: 100%; /*Important for mobile, rescaling by browser*/
}

a {outline: none;}/* no dotted outline around links in IE */

/********************************/
/* Structure
	 topbar
		-logo
		-title
	 navbar
		-navleft
		-breadcrumbcontainer
		-logo
		-navright
	 main
		-navwrapper
			- wordcloudcontainer">
			- resultcontainer
			- toccontainer		
		-navclickunderlay
		-contentwrapper
 */
/********************************/
#topbar   {
	height: 23px;
	padding:3px 0 ;
	background: url(TopBar_BG.png) #eee;
	white-space: nowrap;
	vertical-align: middle;
	z-index:500;
}
#topbar .logo {
	display: inline-block;
	padding:0;
	margin: 0 0 0 10px;
	height: 100%;
	vertical-align: top;
	width: 115px;
}
#topbar .logo img {
	max-height: 100%;
}
#topbar .pubtitle {
	display: inline-block;
	padding:0;
	margin: 0 20px;
	text-transform: uppercase;
	font-size: 22px;
	line-height:1;
	font-weight: bold;
	color: #357;
}
#navbar {
	position: fixed;
	padding:0;
	height:60px;
	width:100%;
	background: url(SearchBar_BG.png) repeat-x #4f595f;
	z-index:500;
/*	box-shadow: 1px 1px 4px #888; /* IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. */  
/*	-moz-box-shadow: 1px 1px 4px #888; /* Firefox/Mozilla */  
/*	-webkit-box-shadow: 1px 1px 4px #888; /*Safari/Chrome */  
/*	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888')";   /* Voor IE 8 */  
/*	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888');  /* Voor IE 5.5 - 7 */ 
}
#navbar td {padding:0;}
#navbar td.navleft {width:250px;}
#navbar td.logo {
	width: 150px;
	padding: 4px 0 0 0;
	vertical-align: middle;
	text-align: right;
}
#navbar td.navright {width:40px; text-align:right;}

#breadcrumbcontainer {
	display: block;
	padding: 17px 0 0 30px;
	font-family: 'IBMPlexSans', sans-serif, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
}

#menubutton {
	display: inline-block;
	width: 40px;
	margin-top:3px;
	height:48px;
	cursor: pointer;
	background: url(icon_menu_sprite.png) no-repeat 2px -347px;
}

#nedapprintcontent {
	display: inline-block;
	width: 48px;
	margin-top:3px;
	height:48px;
	cursor: pointer;
	background: url(icon_menu_sprite.png) no-repeat -0px -447px;
}
#nedappdf {
	display: inline-block;
	width: 48px;
	margin-top:3px;
	height:48px;
	cursor: pointer;
	background: url(icon_menu_sprite.png) no-repeat -55px -396px;
}
@media (max-width: 370px){
	#nedapprintcontent {
		display:none;
	}
}


#menuContainer {
    justify-content: flex-end;
    position: absolute;
    line-height: 1;
    top: 60px;
    right: 0px;
    background-color: #888;
    box-shadow: 0px 5px 6px #777;
	z-index: 99;
	padding: 0;
}

#menuContainer:not(.shown) {
    display: none;
}
.menu-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin: 0;
    list-style: none;
}
.menu-item {
    outline: 0;
    padding: 5px 10px;
}
.menu-item:hover {
	background-color: #c0e9ff;
}
.menu-item a {
	color:#fff;
	text-decoration:none;
}
.menu-item a:hover {
	color:#006599;
	text-decoration:none;
}
.menu-item .printcontent {
	padding-left: 23px;
	background: url(icon_menu_sprite.png) no-repeat -12px -458px;
}
.menu-item .showinfo {
	padding-left: 23px;
	background: url(icon_menu_sprite.png) no-repeat -84px -460px;
}

@media (max-width: 700px){
	#navbar td.breadcrumbcontainer {
		display:none;
	}
} 
@media (max-width: 400px){
	#navbar td.logo {
		display:none;
	}
}

/*************************************/
/* main: navwrapper + contentwrapper */
/*************************************/
#main {	
	height: auto; /* important to keep it within window limits */
	position: absolute;
	top: 60px;
	bottom:0px;
	left:0px;
	width:100%;
	z-index:30;
}

#navwrapper {
	/* 
	mobile: position default mobile: navhidden left uit beeld
	navshown: 
		- navwrapper: Schuift over het contentwrapper heen naar rechts 
		- navclickunderlay: Klikbaar om navwrapper te hiden. Transparant tussen navwrapper en contentwrapper in. 
	*/
	position:absolute; 
	left:-310px; 
	top:0;
	bottom:15px;
	padding:0px;
	width: 300px;
	border-bottom-right-radius: 7px;
	border-bottom: 7px solid transparent;
	background-color:#f5f5f5;
	box-shadow: 5px 5px 10px silver;
	overflow-y:auto;
	overflow-x:hidden;
	z-index:300;
    -webkit-transition: left 0.3s ease-in-out;
    -khtml-transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    -ms-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
}
#navwrapper.navshown {
	left:0px;
}
#navwrapper.navhidden {
	left:-310px;
}
#navclickunderlay {
	display: none; 
	position:absolute; 
	height:100%;
	width:100%;
	background-color:transparant; 
	opacity: 0.1;
	z-index:250;
}
#navclickunderlay.navshown, #toccontainer.shown, #resultcontainer.shown, #wordcloudcontainer.shown {
	display: block;
}
#navclickunderlay.navhidden, #toccontainer.hidden, #resultcontainer.hidden, #wordcloudcontainer.hidden {
	display: none; 
}

#toccontainer {
	padding: 30px 6px 0 10px;
	display: block; 
}
#resultcontainer {
	padding: 10px 10px 0 10px;
	display: none; 
}

#TOCexpandcollapseAll {
	display: block;
	position:absolute;
	top:0;
	padding: 0;
	margin: 0;
	width: 40px;
	height:30px;
	cursor: pointer;
	background-image: url(icon_menu_sprite.png);
	background-repeat: no-repeat;
}
.TOCcollapseAll {background-position: -70px -344px;}
.TOCexpandAll   {background-position: -70px -294px;}

.metainfo {
	padding-top: 10px;
}
.searchhelp {
	margin-top: 25px;
	border-top: 1px solid gray;
}

/* Contentwrapper */
#contentwrapper {
	-webkit-overflow-scrolling: touch;/* Placed first on the wrapper, required for scrolling in iframe on ipad */
  	overflow-y: scroll;
	position:absolute; 
	left:0; 
	top:0;
	bottom:0;
	right:0;
	margin: 0px;
	padding:0px;
	width:auto;
	height:100%;
	background-color: #fff;
	overflow:auto;
	z-index:200;"
    -webkit-transition: margin-left 0.3s ease-in-out;
    -khtml-transition: margin-left 0.3s ease-in-out;
    -moz-transition: margin-left 0.3s ease-in-out;
    -ms-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
}
#contentwrapper.navshown {
	margin-left: 0px;
}
#contentwrapper.navhidden {
	margin-left: 0px;
}

#contentcontainer {
	padding:0px;
	margin:0px;
}

iframe#contentframe{
	position:absolute;
	top:0px;
	margin: 0px;
	width:100%; 
	height:100%;
	border:0px solid #ccc;
}

/********************************/
/* Navigation */
/********************************/
form#navform {
	margin: 0px;
	padding:0px;
	width:100%;
}
form#navform a span {
	display:block;
	height: 38px;
	text-indent:99px;
}

form#navform input{
	margin: 16px 0px 5px 2px;
	padding: 0px 8px;
	width: 140px;
	height:23px;
	font-family: 'IBMPlexSans', sans-serif, Arial, Helvetica, sans-serif;
	font-size:18px;
	vertical-align:top;
	border: 0;
	border-radius: 7px;
	background-color: #e8eef8;
}

#a_toc, #a_search {
	display: inline-block;
	margin-top: 2px;
	padding:0;
	overflow: hidden;
	height: 48px;
	width:44px;
	vertical-align:bottom;
	background-repeat: no-repeat;
	background-image: url(icon_menu_sprite.png);
}

#a_toc          {background-position:   0px   3px;  margin-left:0;}
#a_toc.focus    {background-position: -70px   3px;  margin-left:0;}
#a_search       {background-position:   0px -146px; margin-left:0;}
#a_search.focus {background-position: -70px -147px; margin-left:0;}

#a_back   {
	position:absolute;
	top:0px;
	right:35px;
	width:35px;
	background-position: 0px -155px; 
	text-indent:99px;
}
#a_forward{
	position:absolute;
	top:0px;
	right:5px;
	width:30px;
	background-position: 0px -195px; 
	text-indent:99px;
}

/********************************/
/* Navigation content */
/****************************/
hr {
	margin: 3px 10px 3px 0;
	height:1px;
	padding:0;
	max-width: 500px;
	text-align:left;
}

a {
  text-decoration: none;
  color: #333333;
  white-space: nowrap; /* set to normal to allow wrapping */
}

a:hover {
  color: #053263;
  text-decoration: underline;
}

/********************************/
/* Search styles */
/********************************/
#resultcontainer a  {
}

.resultinfo {
	margin:0;
	font-size:0.9em;
	color:#555;
}

ul#searchresults {
	list-style:none;
	padding:5px 0;
	margin: 0;
}

ul#searchresults li {
	padding: 3px;
	margin: 0 0 0.5rem 0;
	line-height: 1;
}
ul#searchresults li a{
	white-space: normal;
}
/********************************/
/* Word cloud styles */
/****************************/
/* fonts */
#wordcloudcontainer {
	display:none;
	padding:20px 10px 0 10px;
	max-width:400px;
}

div#htmcloud {
  font-family: 'IBMPlexSans', sans-serif, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-bottom:6px;
  line-height: 1.2;
  text-align:justify;
  cursor:pointer;
  width:100%;
}
div#htmcloud a {
  font-size: inherit;
  text-decoration: none;
}
div#htmcloud span.w10{ font-size: 300%; }
div#htmcloud span.w9 { font-size: 280%; }
div#htmcloud span.w8 { font-size: 260%; }
div#htmcloud span.w7 { font-size: 240%; }
div#htmcloud span.w6 { font-size: 210%; }
div#htmcloud span.w5 { font-size: 190%; }
div#htmcloud span.w4 { font-size: 170%; }
div#htmcloud span.w3 { font-size: 150%; }
div#htmcloud span.w2 { font-size: 130%; }
div#htmcloud span.w1 { font-size: 110%; }

/* colors */
div#htmcloud span { color: #78b3df; line-height:1;}
div#htmcloud span:hover { color: #00537A; }

/* layout */
div#htmcloud span { padding: 0; }

/****************************/
/* Tree */
/****************************/
ul.toctree a {
}
ul.toctree a:hover {
	text-decoration: underline;
}
ul.toctree a:link {
	display: inline-block;
	width: 100%;
}
ul.toctree a:visited {}

ul.toctree {
	margin: 0;
	padding:0;
	list-style:none;
}

ul.toctree ul {
	margin: 4px 0;
	padding:0;
	list-style:none;
	overflow: hidden;
}

ul.toctree li {
	font-size: 16px;
	padding-left: 0px; /* set indent of items */
	margin: 6px 0;
	font-family: 'IBMPlexSans', sans-serif, Arial, Helvetica, sans-serif;
}

ul.toctree ul li {
	padding-left: 15px; /* set indent of nested items */
}

ul.toctree li span{
	height:1em; /* necessary for IE8-9 */
}

/** Images **/
ul.toctree li.liClosed > div{
	background: url(icon_menu_sprite.png) no-repeat -70px -202px;
	cursor: pointer;
}

ul.toctree li.liOpen > div{
	background: url(icon_menu_sprite.png) no-repeat -70px -253px;
	cursor: pointer;
}

/** internals **/
.liBullet a, .liOpen a, .liClosed a {
	text-decoration: none;
	white-space: normal; /*white-space-normal; will wrap titles (default for <a> is nowrap)*/
}

ul.toctree li.liBullet div{
	padding-bottom: 2px;
	background: none;
	cursor: pointer;
	text-transform: none;
}

ul.toctree li div {
	padding:0 0 0 15px;
	margin: 0;
}

ul.toctree p.shortdesc {
	font-weight:normal;
	font-size:14px;
	font-style:italic;
	color:#678;
	padding:0 0 0 15px;
	background:none;
}

.L1 > div {
}

.L1 * {
	font-size: 20px;
	font-weight:normal;
	line-height:1em;
}

.L2 * {
	font-size: 18px;
	font-weight:normal;
	line-height:1em;
}

.L3 * {
	font-size: 17	px;
	font-weight:normal;
	line-height:1em;
}


/** Selected **/
ul.toctree li.selected,
ul.toctree li div.selected,
ul.toctree li span.selected,
ul.toctree li.selected div a,
ul.toctree li span.selected a, 
ul.toctree li div.selected a {
	font-weight: bold;
	background-color: #c0e9ff;
}

/** Display **/
ul.toctree li.liOpen ul {
	display: block
}

ul.toctree li.liClosed ul {
	display: none
}

/**************************************************************/
/* desktop view (width > 768 px)                              */
/**************************************************************/
@media (min-width: 576px) {
	#topbar   {
		height: 29px;
	}
	#topbar .logo {
		width: 250px;
	}
}

@media (min-width: 767.98px) {
	#main {	
		width: 100%;
	}

	#navwrapper {
		width: 250px;
/*	Full (desktop): position default: 0 in beeld */
		left:0px; 
		background-color:#eee;
		z-index:100; 
		bottom:0px;
		border-bottom-right-radius: 0px;
		border-bottom: 0px;
		height:100%;
	}
	#navwrapper.navshown {
		left:0px;
	}
	#navwrapper.navhidden {
		left:0px;
	}
	#navclickunderlay.navshown {
		display: none;
	}
	#navclickunderlay.navhidden {
		display: none; 
	}

	#contentwrapper {
		z-index:200;
	}
	#contentwrapper.navshown {
		margin-left: 250px;
	}
	#contentwrapper.navhidden {
		margin-left: 0px;
	}
	/********************************/
	/* Search styles */
	/****************************/
	#resultcontainer a  {
	}

	ul#searchresults li {
		padding:0;
		margin: 0:
	}
	/********************************/
	/* Word cloud styles */
	/****************************/
	#wordcloudcontainer {
		padding:10px;
		width:230px;
	}

	div#htmcloud {
	  font-size: 10px;
	}
	div#htmcloud span.w10{ font-size: 290%; }
	div#htmcloud span.w9 { font-size: 270%; }
	div#htmcloud span.w8 { font-size: 250%; }
	div#htmcloud span.w7 { font-size: 230%; }
	div#htmcloud span.w6 { font-size: 200%; }
	div#htmcloud span.w5 { font-size: 180%; }
	div#htmcloud span.w4 { font-size: 160%; }
	div#htmcloud span.w3 { font-size: 140%; }
	div#htmcloud span.w2 { font-size: 120%; }
	div#htmcloud span.w1 { font-size: 100%; }

	/****************************/
	/* Tree */
	/****************************/
	ul.toctree p.shortdesc {
		font-size:13px;
	}
	.L1 * {
		font-size: 18px;
		font-weight:normal;
	}

	.L2 * {
		font-size: 17px;
		font-weight:normal;
	}

	.L3 * {
		font-size: 16px;
		font-weight:normal;
	}
}

/**************************************************************/
/* Print                                                      */
/**************************************************************/
@media print {
	#main {
		left:0;
		top:50px;
	}
	#navbar, #navwrapper {
		display:none;
	}
	#contentwrapper {
		left:0;
		top:0;
	}
	iframe body {
		margin-left:0;
		margin-right:0;
	}
	P,DIV,A,UL,OL,LI {font-size: 10pt;}
}