/** 
 * screen.css 
 * 
 * Screen styles (all parts) for <website name>.
 * 
 * 
 * @colordef		#f3f5f6; background (light grey)
 * @colordef		#535353; text links on background (dark grey) layer
 * @colordef		#154273; text links (blue)
 *
 */


/** 
 * Import 
 * 
 * @section			Import of individual stylesheets
 */

@font-face {
	font-family: 'Avenir55Roman';
	src: url('../fonts/12-avenir-85-heavy-08173.ttf');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'font-test-1';
	src: url('../fonts/c78eb7af-a1c8-4892-974b-52379646fef4.woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font-test-2';
	src: url('../fonts/d513e15e-8f35-4129-ad05-481815e52625.woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font-test-3';
	src: url('../fonts/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font-test-4';
	src: url('../fonts/husans-normal-webfont.woff');
	font-weight: normal;
	font-style: normal;
}

:root {
	--main-font-size: 16px;
	--main-line-height: calc(var(--main-font-size) + 10px);
	--main-color-blue: #00a1e1;
	--main-color-hover-blue: #0088c8;
	--main-color-triple: #68A729;
	--main-color-red: #e6302b;
	--bs-primary-rgb: 0, 161, 225;
}

.btn-primary {
	--bs-btn-bg: var(--main-color-blue);
	--bs-btn-hover-bg: var(--main-color-hover-blue);
}

body {
	background: #f3f5f6;
	font-family: font-test-3, Verdana, sans-serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: font-test-4, Verdana, sans-serif;
	line-height: calc(var(--main-line-height) + 22px);
	vertical-align: center;
}

h1 {
	font-size: calc(var(--main-font-size) + 26px);
}

h2 {
	font-size: calc(var(--main-font-size) + 20px);
}

h3 {
	font-size: calc(var(--main-font-size) + 14px);
}

h4,
h5,
h6 {
	font-size: calc(var(--main-font-size) + 6px);
}

#ctl00_content {
	min-height: 100vh;
}

.table-borderless {
	line-height: 38px;
}

.company_logo {
	max-width: 200px;
}

.development {
	--bs-primary-rgb: 104, 167, 41;
}

.nav_sub {
	ul {
		padding: 0;
		line-height: var(--main-line-height);
	}

	.sideNavBar > li > ul > li > ul {
		padding-left: 15px;
	}

	li.active {
		font-weight: 700;
	}

	a {
		color: white;
		text-decoration: none;

		&:hover {
			color: black;
		}
	}
}

@import url("reset.css");
@import url("grids.css");
@import url("template.css");
@import url("type.css");
/* @import url("src/fancy-type.css"); */
@import url("forms.css");
@import url("colors.css");
/* BOOTSTRAP OVERRIDES */
#ctl00_mainHtmlContainer.loginPage {
	background-color: transparent;
}

.nav_bar {
	margin: 0;
	padding: 2.8em 0 0;
	text-align: left;
	position: relative;
}

/* Main navigation */
.nav_main { font-size: 1.2em; font-weight: bold; list-style: none; margin: 0; padding: 0 24px; }
.nav_main li { background: none; float: left; margin: 0; padding: 0; }
.nav_main a { display: block; padding: 0.16em 0.9091em 0.24em; text-decoration: none; }
.nav_main a:hover { color: #000; text-decoration: none; }
.sel a { color: #000; }

/* Title bar */
.title_bar { margin: 0; padding: 0 0 0 24px; text-align: left; position: relative; }
.title_bar em { font-weight: normal; font-style: italic; }
.title_bar a { color: #000; text-decoration: none; }
.title_bar a:hover { text-decoration: none; }

/* Functional links */
.func_links { width: 100%; position: absolute; top: -1.6em; }
.func_links h3,
.func_links h4,
.func_links h5 { display: none; }
.func_links ul { color: #535353; display: inline; list-style: none; margin: 0 8px; padding: 0; }
.func_links li { background: none; float: left; margin: 0; padding: 0; }
.func_links a { color: #535353; padding: 0.3636em 0.9091em; text-decoration: none; }
.func_links a:hover { color: #000; text-decoration: underline; }

.func_links a.minus,
.func_links a.plus { background-image: url(skin/icons.png); background-repeat: no-repeat; font-size: 0.8em; padding: 0 0.24em; text-decoration: none; }

.func_links a.minus { background-position: left top; height: 12px; margin-right: -7px; width: 11px; }
.func_links a.plus { background-position: left -85px; height: 12px; width: 11px; }

.func_links .rss { background: url(skin/icons.png) 11px -175px no-repeat; height: 11px; padding-left: 24px; width: 11px; }
.func_links .font_size { padding-left: 0.9091em;  }


/** 
 * Vertical navigation
 * 
 * @section			Vertical (sub) navigation style definitions
 */


/*.nav_sub { margin-left: -24px; margin-right: 24px; overflow: hidden; }*/

/* .nav_sub h3 { display: none; } */

/*.nav_sub ul { font-size: 1em; list-style-type: none; margin: 0; padding: 0; }
.nav_sub ul ul { margin: 0.1em 0; }
.nav_sub ul li { background: none; list-style: none; margin: 0; padding: 0; }

.nav_sub a { color: #fff; }
.nav_sub a:hover { text-decoration: none; }

.nav_sub li a { text-decoration: none; display: block; padding: 0.3em 1em 0.3em 3.2em; width: 19em; }
.nav_sub li.open li a,
.nav_sub li.active li a { padding: 0.3em 1em 0.3em 4.2em; width: 18em; }
.nav_sub li.open li.open li a,
.nav_sub li.open li.active li a { background: url(skin/arrows.png) 3.8em 7px no-repeat; padding: 0.3em 1em 0.3em 5.2em; width: 17em; }
.nav_sub li.open li.open li.open li a,
.nav_sub li.open li.open li.active li a { background: url(skin/arrows.png) 4.8em 7px no-repeat; padding: 0.3em 1em 0.3em 6.2em; width: 16em; }
.nav_sub li.open li.open li.open li.open li a,
.nav_sub li.open li.open li.open li.active li a { background: url(skin/arrows.png) 5.8em 7px no-repeat; padding: 0.3em 1em 0.3em 7.2em; width: 15em; }
.nav_sub li.open li.open li.open li.open li.open li a,
.nav_sub li.open li.open li.open li.open li.active li a { background: url(skin/arrows.png) 6.8em 7px no-repeat; padding: 0.3em 1em 0.3em 8.2em; width: 14em; }*/

/*.nav_sub li.open a { background-position: 1.8em -82px; }
.nav_sub li.open li.open a { background-position: 2.8em -82px; }
.nav_sub li.open li.open li.open a { background-position: 3.8em -82px; }
.nav_sub li.open li.open li.open li.open a { background-position: 4.8em -82px; }
.nav_sub li.open li.open li.open li.open li.open a { background-position: 5.8em -82px; }*/

/* WK Sept 22, 2009 Added closed tag */
/*.nav_sub li.closed li a,
.nav_sub li.closed li.closed li a,
.nav_sub li.closed li.active li a { background: url(skin/arrows.png) 3.8em 7px no-repeat; padding: 0.3em 1em 0.3em 5.2em; width: 17em; }
.nav_sub li.closed li.closed li.closed li a,
.nav_sub li.closed li.closed li.active li a { background: url(skin/arrows.png) 4.8em 7px no-repeat; padding: 0.3em 1em 0.3em 6.2em; width: 16em; }
.nav_sub li.closed li.closed li.closed li.closed li a,
.nav_sub li.closed li.closed li.closed li.active li a { background: url(skin/arrows.png) 5.8em 7px no-repeat; padding: 0.3em 1em 0.3em 7.2em; width: 15em; }
.nav_sub li.closed li.closed li.closed li.closed li.closed li a,
.nav_sub li.closed li.closed li.closed li.closed li.active li a { background: url(skin/arrows.png) 6.8em 7px no-repeat; padding: 0.3em 1em 0.3em 8.2em; width: 14em; }*/

/*.nav_sub li.closed a { background-position: 1.8em -82px; }
.nav_sub li.closed li.closed a { background-position: 2.8em -82px; }
.nav_sub li.closed li.closed li.closed a { background-position: 3.8em -82px; }
.nav_sub li.closed li.closed li.closed li.closed a { background-position: 4.8em -82px; }
.nav_sub li.closed li.closed li.closed li.closed li.closed a { background-position: 5.8em -82px; }*/


/** 
 * Content
 * 
 * @section			Content specific style definitions
 */

.breadcrumb { color: #767676; line-height: 1.8; display: none; } 
.breadcrumb a,
.breadcrumb a:link { color: #154273; text-decoration: none; }
.breadcrumb a:visited { color: #154273; text-decoration: underline; }
.breadcrumb a:hover { color: #0162cd; text-decoration: underline; }

.breadcrumb em { display: none; }
.breadcrumb span { white-space: nowrap; }
/* WK: Added border left/right to increase space for SiteMapPath element to match template */
.breadcrumb .imgreplacement { background-image: url(skin/arrows.png); height: 7px; margin: 0 3px; width: 7px; border-right:3px solid transparent; border-left:3px solid transparent;}

p.intro { font-weight: bold; }
p.caption { color: #767676; margin-bottom: 2.2em; margin-top: -2.8em; }
p.date { color: #6a6a6a; margin-bottom: 0; margin-top: -0.2em; }

p a:link { text-decoration: underline; }

p a.continue { display: inline; }

#home h3 a, #home h4 a, #home h5 a, #home h6 a { font-family: Verdana, Arial, sans-serif; font-size: 0.7333em; text-decoration: underline; }



/** 
 * Lists
 * 
 * @section			List style defenitions
 */

ol { margin-left: 2.4em; }

ul { list-style-type: none; }
/*ul li { background: url(skin/arrows.png) left 6px no-repeat; margin-bottom: 0.5em; padding-left: 11px; }
ul a:hover { color: #154273; text-decoration: underline; }
ul a:visited { text-decoration: none; }

ul li.more { font-weight: bold; }*/

ul.anchors li { margin-bottom: 0.2em; background: none; padding-left: 0; }
ul.anchors a,
ul.anchors a:link { text-decoration: underline; }
ul.anchors a:visited { color: #154273; }
ul.anchors a:hover { text-decoration: none; }

ul.bullets { list-style-position: inside; list-style-type: square; }
ul.bullets li { background: none; margin-bottom: 0.2em; padding-left: 0; }

/* external link lists and individual external links  */
ul.external li, li.external { background-position: left -371px; }


/** 
 * Footer
 * 
 * @section			Footer (referentie aan het lintje) style definitions
 */

.footer .ref { border: 0; font: 0/0 sans-serif; padding: 50px 0 0; text-align: center; }
.footer .ref img { margin: 0; }


/**
 * Modules
 * 
 * @section			Content specific (modules) style definitions
 */

/* scale images together with font resize */
p.full { line-height: 0; }
p.full img { float: none; height: auto; margin: 0; padding: 0; width: 100%; }

.mod { margin-right: 20px; padding: 10px; }
.mod h1, .mod h2, .mod h3, .mod h4, .mod h5, .mod h6, .mod ul, .mod ol, .mod dl, .mod p, .mod blockquote { padding-right: 0; }

/* module 'tong' */
.tong { margin-bottom: 30px; padding-top: 50px; position: relative; margin-top: -50px; }

/* module 'visual' */
.visual img { float: left; margin: -10px 20px -10px -10px; padding: 0; }
.size11 .visual img { height: auto; width: 67.4311%; } /* width: (588/(892-20))*100=67.4311 */
.size812 .visual img,
.size23 .visual img { height: auto; width: 63.3803%; } /* width: (360/(588-20))*100=63.3803 */
.size512 .visual img { height: auto; width: 61.1765%; } /* width: (208/(360-20))*100=61.1765 */
.size23 .visual.half img,
.size12 .visual.half img { height: auto; width: 50%; } /* width: (284/(588-20))*100=50 */

/* module 3 column 'visual' */
.mod.three_col div img { height: auto; width: 100%; }
.mod.three_col { margin-right: 20px; padding: 10px 0; }
.mod.three_col h1, .mod.three_col h2, .mod.three_col h3, .mod.three_col h4, .mod.three_col h5, .mod.three_col h6, .mod.three_col ul, .mod.three_col ol, .mod.three_col dl, .mod.three_col p, .mod.three_col blockquote { padding-left: 10px; padding-right: 20px; }

/* module 'banner' */
.banner { display: block; margin-bottom: 2em; text-decoration: none; }
.banner.bottom { margin-bottom: 0.4em; }
.banner img { float: left; margin: -10px 10px -10px -10px; height: auto; width: 31.9149%; }
#home .banner h3, #home .banner h4, .banner h3, .banner h4 { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; font-weight: bold; line-height: 1.2; margin: 0; padding: 0; }
#home .banner h3 a, #home .banner h4 a, .banner h3 a, .banner h4 a, .banner p a { font-size: 1em; text-decoration: none; }
#home .banner h3 a:hover, #home .banner h4 a:hover, .banner h3 a:hover, .banner h4 a:hover, .banner p a:hover { text-decoration: underline; }
.banner p, .banner p a { line-height: 1.2; margin: 0; padding: 0; }

/* module 'box' */
.box { margin-bottom: 2em; }
.mod.box { padding: 0; }

.mod.box h2,
.mod.box h3,
.mod.box h4,
.mod.box h5,
.mod.box h6,
.mod.box ul,
.mod.box ol,
.mod.box dl,
.mod.box p,
.mod.box blockquote { margin: 0; padding: 10px; }

.box h2.head,
.box h3.head,
.box h4.head,
.box h5.head,
.box h6.head { margin: 0; padding: 0.2em 12px 0.3em; }

.extraWidth 
{
	width:500px;
}

.test-banner {
	background-color: hotpink;
	color: white;
	text-align: center;
	padding: 10px;
	font-weight: bold;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}