@font-face {
	font-family: 'SourceSansPro';
	src: url('./fonts/SourceSansPro-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

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

@font-face {
	font-family: 'SourceSansPro';
	src: url('./fonts/SourceSansPro-LightItalic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
/*!
 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Subset for Eluxis WebHelp
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("./fonts/fa-solid-900.eot");
  src: url("./fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./fonts/fa-solid-900.woff2") format("woff2"), url("./fonts/fa-solid-900.woff") format("woff"), url("./fonts/fa-solid-900.ttf") format("truetype"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; 
}
.fa, .fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.fa, .fas, .far, .fal, .fad, .fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

/* IDS wh icons */
.fa-ellipsis-v:before {
  content: "\f142"; }

.fa-info:before {
  content: "\f129"; }

.fa-search:before {
  content: "\f002"; }

.fa-print:before {
  content: "\f02f"; }


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

body {
	font-family: 'SourceSansPro', 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
		-logo
		-navright
	 main
		-navwrapper
			- resultcontainer
			- toccontainer		
		-navclickunderlay
		-contentwrapper
 */
/********************************/
#topbar   {
	height: 23px;
	padding: 3px 0 3px 13px;
	margin: 0;
	display: flex;
	align-items: center;
	background: url(TopBar_BG.png) #eee;
	white-space: nowrap;
	vertical-align: middle;
	z-index:500;
}
#topbar .logo {
	padding: 0;
	margin: 0;
	width: 237px;
	height: 100%;
	vertical-align: top;
	width: 115px;
}
#topbar .logo img {
	max-height: 100%;
	max-width: initial;
	vertical-align: middle;
}
#topbar .pubtitle {
	padding:0;
	margin: 0 0 0 10px;
	text-transform: uppercase;
	font-size: 22px;
	line-height:1;
	font-weight: normal;
	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;}

#menubutton {
	display: inline-block;
	width: 40px;
	height:40px;
	padding: 9px 0 0 0;
	margin-top:3px;
	text-align: center;
	color: #e0ffff;
	cursor: pointer;
}

#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 .fa {
	width: 22px;
}
.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: 400px){
	#navbar td.logo {
		display:none;
	}
}

/*************************************/
/* main: navwrapper + contentwrapper */
/*************************************/
#main {	
	height: auto; /* important to keep it within window limits */
	position: absolute;
	top: 95px;
	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; /* dit wordt gebruikt om in fe wh.js te testen of het mobile of desktop layout is */
	padding:0px;
	width: 300px;
	border-bottom-right-radius: 7px;
	border-bottom: 7px solid transparent;
	background-color:#f5f5f5;
	box-shadow: 5px 5px 10px silver; /*choose #999 or silver (must fit with navclickunderlay background-color) */ 
	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; /*choose black or transparant (must fit with navwrapper box-shadow) */ 
	opacity: 0.3;
	z-index:250;
}
#navclickunderlay.navshown, #toccontainer.shown, #resultcontainer.shown, #tocshowbar.shown {
	display: block;
}
#navclickunderlay.navhidden, #toccontainer.hidden, #resultcontainer.hidden, #tocshowbar.hidden {
	display: none; 
}

#toccontainer {
	padding: 30px 6px 20px 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;
}

#tocshowbar {
	position:absolute;
	top: 89px;
	left: 0;
	width: 6px;
	height: calc(100% - 95px);
	background-color:#ddd;
	z-index:300;
	cursor:pointer;
}
#tocshowbar span {
	position: absolute;
	top: 45%;
	line-height: 10px;
	padding: 0 0 12px 0;
	background-color: #ddd;
	border-radius: 3px;	
}

/* 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{
	color: #ddd;
	margin: 14px 0px 5px 2px;
	padding: 0px 8px 2px 8px;
	width: 140px;
	height:23px;
	font-family: 'SourceSansPro', sans-serif, Arial, Helvetica, sans-serif;
	font-size:18px;
	vertical-align:top;
	border: 1px solid #ddd;
	border-radius: 7px;
	background-color: transparent;
	outline: none; /*prevent line around input when in focus*/
}

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

#a_search       {
		display: inline-block;
		color: #78b3df; 
		font-size: 1.4rem; 
		height: 30px; 
		width: 40px; 
		margin:0; 
		padding: 6px 0px;
		text-align: center;	
}
#a_search.focus {color: #e0ffff;}

#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.7rem 0;
	line-height: 1;
}
ul#searchresults li a{
	white-space: normal;
}

/****************************/
/* 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;
}

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;
}

ul.toctree li.L1 {
	margin: 8px 0;
}

.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: 17px;
	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;
	}
	#tocshowbar {
		top: 95px;
	}
}

@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; /* dit wordt gebruikt om in fe wh.js te testen of het mobile of desktop layout is */
		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:
	}

	/****************************/
	/* 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;}
}

