/* laatst gewijzigd: ma 28-06 14:17 */


/* ----------------------- changes of specificatons in css from starterskit ----------------------- */

/* ----------------------- general 
*/
.margin_top_5 { margin-top: 4.4em; }
.margin_top_5 h1 {margin-top:.15em}
.margin_top_5 p.brancheheader {margin:.15em 0 -.1em!important;}
img.rss { margin-bottom: -.2em; }
ul a:hover, ul a:visited:hover { color: #0162cd; text-decoration: underline; }
/* in sub navigation, present strong as normal */
.nav_sub strong {
	font-weight:normal
}
/* in right column, they want h2 to align basline with bottom of H1 */
.content_add  { 
	padding-top: 44px
}
.nav_main a:hover, .nav_main a:visited:hover { color: #000!important; text-decoration: none!important; }

/* in subnav, we don't want a white line above a nested ul */
.nav_sub ul ul { 
	margin: 0
}
/* in some cases a nested ul doesn't use correct font-size */
ol.search_results ul { 
	font-size: 1.1em !important; /* transacties is OK now */
	margin-bottom:1em;
	margin-top: .2em;
}
/* in other cases it again should be corrected (product) */
.mod.box ul ul li  {
	font-size: .9085em !important
}
/* redo spacing and font-sizes for nested ul's in main content */
#hoofd_content ul ul li, #hoofd_content ol ul li, #hoofd_content ol ol li, #hoofd_content ul ol li {
	font-size: .9085em !important
}
#hoofd_content ul.normal ul, #hoofd_content ol ul.normal {margin-bottom:0!important;}

/* breadcrumb is too wide */
.breadcrumb span {white-space:normal;}
.breadcrumb p {width:95%;}

/* in paging results, the links should behave different */
.nav_page a:hover, .nav_page a:focus { color: #0162cd; text-decoration: underline; }
/* in contentpane, we also want underlining for links in ol's */
.content_main a:link { text-decoration: underline; }
/* make 'more'-link italic, not bold */
ul li.more, ol li.more { 
	font-style:italic;
	font-size:1em
}
ol.search_results li.more { 
	font-weight: bold;
	font-style:normal;
	font-size:1.1em;
	background: url(skin/arrows.png) left 6px no-repeat; 
	margin-top:2.6em;
	margin-bottom: 0.5em; 
	padding-left: 11px

}
ol.search_results li.more a {
	text-decoration:underline
}
/* we want links in bulleted lists with underlining */
ul.normal a:link { 
	color: #154273; 
	text-decoration: underline
}
/* these links should have lighter blue and underlining when hovering */
.header_sitemap a:hover,
.list_sitemap li a:hover { 
	color: #0162cd; 
	text-decoration: underline
}

/* make space for 'Naar boven' link */
.content { 
	padding: 0 4px 10px 24px !important;overflow:visible !important;
}
.content_main {
	padding-bottom:6em !important
}
/* more space before 'Naar boven' link */
p.back_to_top { 
	position:absolute;
	bottom:0
}
/* specify selectbox to align text input fields */
form select {
	margin-right:.5em!important;
	background: #fff; 
	color: #000; 
	border: 1px solid #000;
/*	min-width: 22.1em */
}
/* normal with image because of vertical aligning in IE */
ul.normal { 
	list-style-type: none
}
ul.normal li { 
	background: url(skin/bullet.png) left 7px no-repeat; 
	margin-bottom: 0; 
	padding-left: 11px
}
ul.normal ol li  {background:none;padding-left:0;}
#hoofd_content ol ol {margin-bottom:0 !important}
/* in sitemap, make enough space for 'Naar boven' link */
body.sitemap #hoofd_content {clear:both;margin-bottom:1.5em;}
body.sitemap .back_to_top {padding-top:7em !important;margin-bottom:0;}

/* make sure label font size is correct */
form label {
	font-size:1.1em
}
form p label {
	font-size:.9085em
}
/* make label and legend red of error input */
form legend.err, form legend.err em, form label.err, form label.err em { 
	color: #e70022 !important
}
/* set correct(er) margin for nav-sub */
.nav_sub, .content_main {
	padding-top:52px
}

/* set correct line-height and margins for H1 */
h1 {
	line-height:1.3em;
	margin-bottom:.5em;
	margin-top: -0.2em
}
/* add extra h2 spec for 404 page */
h2.accent {
	font-family: Arial, Verdana, sans-serif; 
	font-size: 2.2em; 
	font-weight: normal;
	line-height:1.3em;
	margin-bottom:.5em;
	margin-top: -0.2em
}

/* add space above sub navigation for branchepicker */
.with_branche {
	margin-top:1em !important
}
/* adjustments of standard error and info modules to be used in forms */
.message_err, .message_info {
	margin-bottom:1em !important
}
.form_ll .message_err, .form_ll .message_info { 
	margin:1em 0 1em !important
}
.form_ll .mod p, .form_ll fieldset .mod p { 
	margin: 0 0 1em 0; 
	padding: 0
}
.mod form p {padding-left:0 !important}
.mod .message_err {
	margin-top:0;
	}
.mod .message_err ul {
	padding:0;
}

p.message-head {
	margin: 0 !important; 
	padding: 0 !important;
	font-weight:bold
}
.in-message-box {
	width:58%
}
.mod.message_err p:first-child,
.mod.box.open.lighter p:first-child {
	margin-bottom:.3em !important
}
.form_inline p:first-child {
	margin-bottom:.8em !important
}
span.date {
	font-style:italic;
	color:#6a6a6a
}
/* show branchename above the H1 */
p.brancheheader {
	font-family: Arial, Verdana, sans-serif;
	font-size:2.2em;
	color:#046f96;
	line-height: 1.3em;
	margin:-.1em 0 .2em;
}
p.brancheheader a, p.brancheheader a:visited {
	text-decoration:none !important;
	color:#046f96
}
p.brancheheader a:hover, p.brancheheader a:focus {
	text-decoration:underline !important
}
/* for hiding stuff for normal browsers */
.hidden {
	display:block;
	position:absolute;
	left:-999em;
	width:1px
}
/* Make links bold for 'Stappenplan' results in 'Onderwerp' */
ul.accent li a, li.accent a {
	font-weight:bold
}
/* and make them look the same in a search result */
li.accent ol {
	list-style:none;
	margin:0 !important
}
li.accent {padding:1em 0;}
li.accent ol li {
	background: url(skin/arrows.png) left 6px no-repeat; 
	margin-bottom: 0.5em; 
	padding-left: 11px
}
/*li.accent ol li h3 {
	font-size:1em
}*/
/* make hrefs in list pages beave like the rest (= lighter blue and underline) */
.list h2 a:hover { text-decoration: underline; color:#0162cd }
/* hide list style for OL's in sitemap */
ol.list_sitemap {
	list-style-type: none;
	margin-left:0
}
ol.list_sitemap ol { 
	list-style-type: none;
	padding-top: 0.2em;
	font-size: 1em; 
	line-height: 1.6; 
	margin-bottom: 0;
	margin-left: 0
}
.nav_sub li.back a, .nav_sub ul.back li a {background-position: 1.8em -466px;}
/* we want */
.content_add ul p, .linklist p.specs {
	font-size: 1em
}
/* pagenavigation changes */
.nav_page span { color: #000; padding:0 5px 2px; border-right:1px solid #767676}
.nav_page span strong {font-weight:normal;}
.nav_page a,
.nav_page a:link,
.nav_page a:visited { padding:0 5px 2px; border-right:1px solid #767676}
.nav_page a:hover { color: #0162cd; text-decoration: underline; }

.nav_page a.prev { padding:0 5px 2px 11px }
.nav_page a.next, .nav_page a.next:visited { border-right:none; padding:0 11px 2px 5px }


/* general */
.branches {/*width:235px;*/padding-left:20px;margin-top:.4em}
.branches select#branchepicker {width:157px;}

/* extra styling for jquery IE select width */
.select-overlay { background:#fff }

.select-overlay span
{
    display:block;
    float:left;
    clear:both;
    background:transparent url(skin/bg-ie-select-width.png) no-repeat 0 0
}



/* ----------------------- home 
*/
#home .mod.box.attention, #bronnen.mod.box.attention {background-color: #d9ebf7; border: 1px solid #b2d7ee }
#home .mod.box.attention h2, #bronnen.mod.box.attention h2 {background-color:#b2d7ee}
#home .mod.box.attention {padding-bottom:1em; }
#home h3 {margin-bottom:.3em!important}
#home .branchelist {margin-bottom:0}
#home .branchelist select {margin:0}

/* adjust space above intro */
#home .content_main {
	padding-top:45px
}
#home .content_supp {
	padding-top:44px
}
#home ul li.more {
	font-weight:normal;
}
.branchelist {
	margin-left:12px;
	margin-top:12px !important
}
ul.branches {
	font-weight:bold;
	padding-bottom:0;
	padding:16px 0 0 10px !important;
	margin-bottom:-.5em !important
}
ul.branches li {
	margin-bottom:0
}
ul.subjects {
	padding:1.8em 0 0 10px !important
}
ul.subjects ul, ul.subjects ol {
	margin-left:-21px!important
}
ul.subjects ol {
	list-style-type: none;
	font-size:1.1em!important;
	padding-top:0;
	margin-top:-.6em!important;
}
li.unit {
	width:48%
}
li.unit, li.last_unit {
	background:none;
	color:#e70022
}
li.unit.general ul li {
	font-weight:bold
}
.subjects li.last_unit p {
	color:#000;
	font-size:1em;
	margin:.35em 0 1.5em;
	padding:0
}
#home ul li p.specs {
	font-size:1em;
}
/* ----------------------- subjects 
*/
.sitemap.subjects .list_sitemap li {
	font-weight:normal
}

/* ----------------------- search results / extended search 
*/


/* open / close function */


.full.active h2 {
	cursor:pointer;			/* appear clickable */
	font-size:1em;
	font-weight:normal;
	display:block;
	background: url(skin/arrows.png) left 4px no-repeat; 
	margin-bottom: 0.5em; 
	margin-left:8px;
	padding-left: 11px; 
	color: #154273; 
	text-decoration: underline
}
.full.active h2 h2:hover, .full.active h2 h2:focus {
	color: #0162cd
}
.full.active h2.open {
	background-position:left -87px;
	margin-bottom: 2em; 
}


/* T seems to make option too small
div.theoptions {
		font-size:.9085em !important;
} */
div.theoptions select {
		font-family:Arial, Helvetica, Verdana, sans-serif;
		font-size:1.14em !important;
	width:21.8em !important;
	margin-right:0
}
form.form_ll fieldset li.full {
	padding:.4em 0 0 0
}
h3.label {
	font-size:1em !important;
	font-weight:normal;
	float:left;
	margin-top:0;
}
/*div.theoptions.closed {
    position:absolute !important; top:-999em;
}
div.theoptions.open {
    top:auto;
    position:relative !important;
}*/	
li.full div.closed ol li {
    position:absolute; 
top:-999em;
}
li.full div.open ol li {
    top:auto;
    position:relative;
}
p.type, p.specs, .list p.details {
	color: #6a6a6a !important; margin: 0 !important; }

.abc .type, .abc .specs {font-size: 1em; 
}
.abc .type, .abc .specs, p.type {margin-top: -0.08em !important;}

/* ----------------------- productpage 
*/
/*make breadcrump wider */
.breadcrumb.left {width:95%}
.breadcrumb.left p {width:100%;}
.mod.box.open.lighter ul.external {padding-top:0 !important}

.mod.box ul ul {
	padding-bottom:0;
	padding-top:4px;
	margin-bottom:0
}
.content_add.product { 
	padding-top:0px
}
/* adjust margins for form inside box */
.mod.box form {
	margin:0 0 1em 12px
}
.mod.box form input.text.inline {
	margin-right:.5em;
}
.mod.box form label {padding-right:.5em;
}
/* color and position div with form in it */
.form_inline {
	background: #f5f5f5;
	padding:3px 0 0 3px;
	border-bottom:1px solid #f5f5f5;
	margin-right:16px;
	margin-bottom:24px
}
.form_inline form {margin-bottom:2em;}
/* make more space for Up-link */
.line.margin_top_5 .size12 {padding-bottom:5em;}

/* ----------------------- beroepenlijst
*/
ol.abc-lijst {
	color:#999;
	list-style:none;
	clear:both;
	padding:0;
	margin:0
}
ol.abc-lijst li {
	float:left;
	
}
ol.abc-lijst a, ol.abc-lijst a:visited {
	text-decoration:underline;
	display:block;
	padding:0 .5em 0 0
}
ol.abc-lijst strong {
	padding:0 .5em 0 0;
	color:#000;
}
ol.abc-lijst span {
	padding:0 .5em 0 0;
}
ol.abc-lijst a:hover, ol.abc-lijst a:active, ol.abc-lijst a:focus {
	color:#0162cd
}
ol.abc	{
	list-style:none;
	margin-left:0;
	margin-top:2em;
}
ol.abc li {
	background: url(skin/arrows.png) left 6px no-repeat; 
	margin-bottom: 0.5em; 
	padding-left: 11px
	}
ol.abc li a {
	font-weight:bold
}
ol.abc li a span {
	font-weight:normal;
	display:block;
	color:#000
}
ol.abc li a:hover span {
	color:#0162cd;
	text-decoration:underline
}
/* ----------------------- onderwerpen 
*/
#content.sitemap.subjects .content_add {left:9px;padding-top:50px}
#content.sitemap.subjects .content_main {left:0 !important;width:74% !important;}

/* ----------------------- form elements 
*/
/* override font choice for input fields */
/*form input.text,
form input.standard,
form textarea { 
	font-family: Verdana, Arial, sans-serif;
	font-size:1em; this seems to affects the searchbox
} */
/* try to move the radiobutton down within the label
form.form_ll input.radio {vertical-align:middle;margin-top:.1em}
 */
form.form_ll p {margin-bottom:1.4545em;}
form.form_ll input[type=radio]:focus { outline: 0; }
form.form_ll fieldset fieldset label.choose-one { margin-left:0; }
.submit.secondary { background: #fff;}
fieldset.normal input.submit {left:0;font-size:1.1em}
.select_multiple {
	font-size:1.1em;
	width:36em;
}
label.first {
	margin-top:-1.9em
}
fieldset .section {
	font-size:.9085em;
	float:left;
}
fieldset .section label {
	display:block;}
fieldset p.close em {
	font-size:.9085em;
}
/* opera chokes on container with only floating elements */
form.form_ll fieldset li { 
	width:95%;
	overflow:hidden
}
form.form_ll fieldset li.full { 
	width:100%;
}
form.form_ll label {
	white-space: nowrap
}
form.rss {
	margin-bottom:4em;}
form.rss li p:first-child	{
	margin-bottom:.3em !important
}
	
	
/* adjust height of search input */
.search form input.submit { 
	height: 1.8em !important; 
	padding-top:0 !important
}
form.form_ll li label em.mandatory { 
	display:inline-block;
	float:none;
	width: 1em !important;
	padding-left:.2em
}
form.form_ll li label.err em.mandatory {
	color:#e70022
}
/* no outline on checkboxes please */
input.checkbox:focus, input.radio:focus {
	outline:0 !important
}
form.form_ll textarea { 
	width: 22.2em;
	/*width:64.9%;*/
	float:right
}
/* have error labels and input field light up in red, and make strong look normal */
form fieldset.err, form textarea.err, table.folders input.err, form input.submit.err {
	border-color:#e70022 !important;
	outline: 1px solid #e70022
}
label.err strong, legend.err strong {font-weight:normal}
/* for readonly versions */
form.form_ll li em { 
	display:inline-block;
	width: 12.5em;
	color:#000;
}
/* readonly form elements on grey background */
form.form_ll input.text.readonly  { 
	border-color:#f5f5f5;
	background: #f5f5f5
}
form.form_ll input.readonly:focus {
	outline:0
}
/* known values */
span.known {display:inline-block;padding:.2em;font-family:Arial,Verdana,sans-serif;
font-size:1.1em}
/* render content (but not the block element) of selected labels as invisible for normal browsers */
.form_ll legend.invisible {
	text-indent:-999em
}
/* some inputs or spans have a button right next to them */
.form_ll input.with-button {
	width:15em !important
}
.form_ll span.with-button {
	display:inline-block;
	width:15.5em
}
	/* have selected submit buttons positioned at the left */
.form_ll input.submit.close {
	left:0
}
/* nested inputs should also be 1em */
li.newline ul.secondlevel li.action input.submit {
	font-size: .9085em
}
.form_ll.messages fieldset { 
	margin-bottom: 0; 
	margin-right:0; 
	padding: 0
}
.form_ll.messages input.submit {
	left: 0
}
/* have a small input field for postal code */
input.inline {
	width:19em !important;
}
/* start left in form for selected paragraphs */
p.explanation {
		font-size:1.1em !important;
		padding-left:0 !important;
		margin-bottom:1em !important;
		clear:both;
}
li p.explanation {
		font-size:1em !important;
}
/* ----------------------- search results and result lists
 */
/* no leading number in OL used for search results */
.search_results { 
	list-style-type: none; padding-left: 0
}

/* in search results, we want nested list items with external links to show with background iamge */
.list ul.external li, .list li.external { 
	background: url(skin/arrows.png) left -371px no-repeat;
	padding-left:11px
}
/* extra specification for h2 in result list */
h2.result-head {
	font-size: 1.2em; 
	font-weight: bold; 
	line-height: 1.3333; 
	margin-bottom: 1.4em;
	margin-top: 1em
}
/* add h3 for search results */
.list h3 { 
	font-size: 1.1em; 
	font-weight: bold !important; 
	line-height: 1.5; 
	margin-bottom: 0
}

.list h3 a, .list h3 a:link { 
	color: #154273; 
	text-decoration: underline
}
.list h3 a:hover, .list h3 a:active, .list h3 a:focus { 
	color: #0162cd
}
/* adjust style of lists inside tab-boxes */
.tab-content .list { 
	border:0;
	list-style-type: none;
	padding-left: 0
}
.tab-content .list li {
	margin-bottom:1em
}

/* open / close function */

.more-results ol.closed, .more-results ul.closed {
	position:absolute; 
	top:-999em
}

.more-results ol.open, .more-results ul.open {
    top:auto;
    position:relative;
}

.more-results.active h2 {
	cursor:pointer;			/* appear clickable */
	font-size:1.1em;
	font-weight:bold;
	display:block;
	background: url(skin/arrows.png) left 4px no-repeat; 
	margin-bottom: 0.5em; 
	padding-left: 11px; 
	color: #154273; 
	text-decoration: underline
}
.more-results.active h2:hover, .more-results.active h2:focus {
	color: #0162cd
}
.more-results h2.open, .more-results h2active.open {
	background-position:left -87px;
	margin-bottom: 2em; 
}


/* ----------------------- message box 
 */
/* show h2 in left column and specs */
.nav_sub .show {
	display: block
}
.app_title {
		font-family: Arial, Verdana, sans-serif; 
		font-size: 2.2em; 
		font-weight: normal; 
		line-height: 1.2em; 
		margin: .22em 0 0.6em .8em
}
/* Log in, log out in title-bar */
.inlog {
	font-size:.65em;
	font-weight:normal;
	width:50%;
	right:12px;
	top:.75em;
	position:absolute;
	text-align:right;
	line-height:1.1em
}
.inlog a {
	display:inline
}
.inlog a:active, .inlog a:hover {
	text-decoration:underline
}
.inlog em {
	font-style:italic;
	padding:0 8px 0 14px
}
ol.formview.w90 li {overflow:hidden;}
/* error when managing folders should look different */
td.folder-error {
	padding-left:2em !important;
	background:#fff
}
/* for showing the addressee for 'ondernemers' */
.addressee {
	display:inline-block;
	width:16.5em;
}
table.standard-messages td {
	font-size:1.1em
}
form.form_ll fieldset ul.external li { background: #fff url(skin/arrows.png) left -371px no-repeat; margin-bottom: 0.5em; padding:0 0 0 11px;list-style: none; }
form.form_ll fieldset ul.external li a:hover, form.form_ll fieldset ul.external li a:active, form.form_ll fieldset ul.external li a:focus {color:#0162cd;}


/* ------------------------------------------- new stuff ------------------------------------------- */

/* ----------------------- tabs
*/

/* tabs content container */
.tab-box {
	clear:left
}
/* tabs */
.tabs {
	width:99.2% !important;
	width /**/:93.5%;
	float:left;
	line-height:normal;
	background:url(skin/bg-tabs.gif) repeat-x bottom;
	margin-top:4px
}
.tabs ul {
	width:auto;
	margin:-9px;
	padding:0;
	list-style:none
}
.tabs ul li {
	float:left;
	background:none;
	margin:5px 0 0 9px;
	padding:4px 10px 5px 10px
}
.tabs a:hover {
	text-decoration:underline
}
.tabs ul li a, .tabs ul li a:visited {
	text-decoration:none
}
.tabs .active {
	margin:4px 0 0 9px !important;
	border:1px solid #e4e4e4;
	border-bottom:1px solid #fff;
	background:#fff
}
.tabs .active a {
	color:#000;
	text-decoration:none;
}
.tabs .no-results a, .tabs .no-results a:visited {
	color:#7f7f7f
}
/* tab inhoud */
#content div.tab-content-box {
	width:99% !important;
	width /**/:93.3%;
	clear:both;
	border:1px solid #e4e4e4;
	border-top:0;
	padding-top:1.2em;
	margin-bottom:1.8em;
	
}
div.tab-content {
	padding: 0 10px 1.8em 14px !important
}
div.tab-content h3 {margin-top:0;}



/* height of main content is defined with minimum to make enough room for list in left navigation column */
#hoofd_content {
	min-height:22.7em
}
#hoofd_content.extra {
	min-height:51.3em
}

/* 
folderlist in left menu should force div#hoofd_content to minimum height.
examples: 
with 9 own folders, div#hoofd_content gets extra class "f9"
with 12 own folders, div#hoofd_content gets extra class "f12"
with no own folders, div#hoofd_content doesn't get extra class

List can be extended by adding 2.2 em for every new folder
*/
.f0 {min-height:22.7em !important;}
.f1 {min-height:24.9em !important;}
.f2 {min-height:27.1em !important;}
.f3 {min-height:29.3em !important;}
.f4 {min-height:31.5em !important;}
.f5 {min-height:33.7em !important;}
.f6 {min-height:35.9em !important;}
.f7 {min-height:38.1em !important;}
.f8 {min-height:40.3em !important;}
.f9 {min-height:42.5em !important;}
.f10 {min-height:42.5em !important;}
.f11 {min-height:44.7em !important;}
.f12 {min-height:46.9em !important;}
.f13 {min-height:49.1em !important;}
.f14 {min-height:51.3em !important;}
.f15 {min-height:53.5em !important;}
.f16 {min-height:55.7em !important;}
.f17 {min-height:57.9em !important;}
.f18 {min-height:60.1em !important;}
.f19 {min-height:62.3em !important;}
.f20 {min-height:66.7em !important;}
.f21 {min-height:68.9em !important;}
.f22 {min-height:71.1em !important;}
.f23 {min-height:73.3em !important;}
.f24 {min-height:75.5em !important;}
.f25 {min-height:77.7em !important;}
.f26 {min-height:79.9em !important;}
.f27 {min-height:82.1em !important;}
.f28 {min-height:84.3em !important;}
.f29 {min-height:86.5em !important;}
.f30 {min-height:88.7em !important;}
.f31 {min-height:90.9em !important;}
.f32 {min-height:93.1em !important;}
.f33 {min-height:95.3em !important;}
.f34 {min-height:97.5em !important;}
.f35 {min-height:99.7em !important;}
.f36 {min-height:101.9em !important;}
.f37 {min-height:104.1em !important;}
.f38 {min-height:106.3em !important;}
.f39 {min-height:108.5em !important;}
.f40 {min-height:110.7em !important;}
.f41 {min-height:112.9em !important;}
.f42 {min-height:115.1em !important;}
.f43 {min-height:117.3em !important;}
.f44 {min-height:119.5em !important;}
.f45 {min-height:121.7em !important;}
.f46 {min-height:123.9em !important;}
.f47 {min-height:126.1em !important;}
.f48 {min-height:128.3em !important;}
.f49 {min-height:130.5em !important;}
.f50 {min-height:132.7em !important;}