@import url(kolommen.css); 		
/* -------------- reset -------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin:0; padding:0;}
  
/* -------------- basis -----------------*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:80%;} 
td, th {font-size:100%;}
img {border:0;}
input,textarea {font-size:100%; padding-left:.3em;}
textarea {font-family: Verdana, Arial, Helvetica, sans-serif;}
.verbergen {display:none;}
.verbergen2 {margin-left:-5000em; float:left;}

/* ---------------- header  ----------------- */
/* em = pixels * 6.25 / bodyfont% */
#header {height:12em;}
#header {background: #CCCCCC url(../images/banner.jpg) no-repeat}
#header img {height:12em; float:right} 
#header h1 {margin:1.3em 0 0 2%; color: white; font-size:1.8em; text-shadow: 0.1em 0.1em 0.05em black }
#header p {color: white; font-size:.85em; line-height:1.5em;}

/* ---------------- header logo  ----------------- */
#utilities {height:12em;}
#utilities {background-color:#CCCCCC;}
#utilities img {margin:0 0 0 1em; float:left}
#utilities p {margin:1em 0 0 1em; color: black; font-size:12px; line-height:1.5em}

/* -------------------linkermenu ------------------------ */
#menu {padding:1.8em 0 128em 0; margin:0;}
#menu {background-color:#F1654C; font-size:1.1em; text-shadow: 0.1em 0.1em 0.05em black}
#menu li {padding-left:10%;}
#menu li li.active {font-weight:bold; }

/* -------------------linkermenu hoofditems ------------------------ */
#menu ul {margin:-.43em 0 2.9em 0; padding: 0; list-style-type: none; line-height:1.8em; font-size:1.1em;}
#menu ul li {margin: 0; padding-top: .43em; padding-bottom:.43em; background-image:none; }
#menu ul li a {display: block; padding:0; width:100%; text-decoration: none;}  
#menu ul li.active span {color:#FFFFFF; font-weight:bold; }
#menu ul li.uitklap { background-color: #993333; }

/* -------------------linkermenu subitems ------------------------ */
#menu ul ul {margin: .2em 0 .5em 0; padding: 0 0 .42em 10%; list-style-type: none; font-size:.833em; line-height:1.08em;}
#menu ul ul li {border:0; margin:0; padding:0; }
#menu ul ul li a {border:0; margin:0; padding:0.54em 0 0.5em 0; }
#menu ul ul li.active {border:0; margin:0; padding:0.54em 0 0.5em 0; }
#menu ul ul li.active a {padding:0;}

/* -------------------linkermenu contact ------------------------ */
#menu #contact {margin-left:10%;}

/* ------------- links -----------------*/
#menu a:link {color: #D5D2B6;}
#menu a:visited {color: #D5D2B6;}
#menu a:hover {color: #FFFFFF;}

/* -------------------Content ------------------------ */
#content {padding:1.8em 0 64em 0; background-color:#FFFFF;}
#content table {text-align:left; }
#content form table {padding-top:.5em; width:100%; }
#content p.focus {border:0.44em double white; background-color:#D5D2B6; padding:1.26em; text-align:center; }
#content p.nomargin {margin-bottom:0;}
#content .afbeelding {width: 100%; }
#content h1, #content h2 {color: #2E3192}
#content p, #content li {color: #000000}
div.ruler {border-bottom:1px solid #D5D2B6; margin-bottom:1.8em; font-size:1em;}


/* -------------- tabjes -----------------*/
#contentnav { padding-bottom: 1.8em; margin-bottom: 2.9em; background: #fff; }
#contentnav ul { width: 100%; float: left; margin: 0; padding: 0 20px 0 0;	border-bottom: 1px solid #5d7e85;}
#contentnav li { float: left; display: inline; padding:0; margin:0; list-style: none; background:none;}
#contentnav a:link {	float: left; line-height: 1.8em; margin:0 1.8em 0 0; text-decoration: none; color:#3E1F00}
#contentnav a:visited {	float: left; line-height: 1.8em; margin:0 1.8em 0 0; text-decoration: none; color:#3E1F00}
#contentnav a:hover {border-bottom: 4px solid #5d7e85; padding-bottom: 2px; color: #063944;	}
#contentnav a.active:link {border-bottom: 4px solid #5d7e85; padding-bottom: 2px; color: #063944; font-weight: bold;	}
#contentnav a.active:visited {border-bottom: 4px solid #5d7e85; padding-bottom: 2px; color: #063944; font-weight: bold;	}

/* -------------- wide -----------------*/
#contentwide { padding:1.8em 0 2em 0; background-color:#fff;}
#contentwide {text-align:justify;}
#contentwide table {text-align:left; }
#contentwide form table {padding-top:.5em; width:60%; }
#contentwide .afbeelding {width:100%; }
#contentwide p.focus {border:0.44em double white; background-color: #e0e8ef; padding:1.26em; text-align:center; }
#contentwide p.nomargin {margin-bottom:0;}
#contentwide h1, #contentwide h2 {color: #A24105}
#contentwide p, #contentwide li {color: #68651A}

/* ------------- links -----------------*/
a:link {color: #005fab;}
a:visited {color: #8997a3;}
a:hover {color: #9d2e5b;}

/* -------------------sub-section ------------------------ */
#sub-section { padding:1.8em 0 .3em 0; margin:0; }
#sub-section .related p.focus {}
#sub-section p  {color: #68651A; font-size:12px; line-height:2.16em; margin-bottom:2.16em;}
#sub-section h1 {color: #A24105; font-size:14px; padding:0; margin:0; line-height:2.05em;}
#sub-section h2 {color: #A24105; font-size:12px; padding:0; margin:0; line-height:2.05em;}
#sub-section img {width: 100%; height: auto; /* Behoud de oorspronkelijke verhoudingen */}
#sub-section .related img {float:right; margin:0 0 0 0; padding:0; border:0;}
#sub-section .afbeelding {float:none; margin-left:0; text-align:left;}
div.related {font-size:1em; border-bottom:1px solid #FFE15B; background-color:#FFE15B;  padding:.9em .9em 0 .9em; margin: .9em 0 .9em 0; }

p, ul, ol { line-height:1.8em; font-size:14px; margin-top:0; margin-bottom:1.8em}
br { line-height:1.8em; font-size:1em; margin:0; }
.nieuwsbriefdatum {color:#999999; font-size: 0.833em; margin:0 0 0 0; line-height:2.16em;}
.smalltext { font-size:.833em; }
div.ruler hr {display:none;}
ul.wide li {padding-bottom:1.8em;}

/* homepage nieuws item */
div.focus {border:0.44em double white; background-color: #FBBD74; padding:1.26em; text-align:center; margin-bottom:1.8em; margin-top:0.6em;}
div.focus h2 {margin-top:0; }
div.focus p {margin-bottom:0;}



/* ------------- headers -----------------*/
h1,h2, h1 a:link, h1 a:visited, h1 a:hover, h2 a:link, h2 a:visited, h2 a:hover, h3 a:hover { color:#3E1F00; }
h3, h3 a:link, h3 a:visited { color: #000; }
h1 {font-size:16px; margin-bottom: 1.52em; line-height:1.5em;}
h2 {font-size:14px; line-height:1.8em; margin-top:1.8em;  }
h3 {font-size:2.0em; line-height:1.8em; margin-top:1.8em;  }
h4 {font-size:15px; line-height:1.8em; margin-top:0.5em;  }
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited { text-decoration:none;}
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration:underline;}

/* ------------- item met plaatje ------------- */
.itemafbeelding {margin-top:0; }
.itemafbeelding img {float:right; margin:.5em 0 2em 4em; padding:0; border:0;}
.itemafbeelding p, {margin-left:0em;}
.itemafbeelding ul {margin-left:0em;}
.itemafbeelding h2 {margin-left:0em;} /* de header moet om een of andere reden minder breedte hebben */

/*img.left { float: left; margin: 0.5em 0 0 2em; border: 1px solid #999; clear: left; }
img.right { float: right; margin: 0.5em 2em 0 0; border: 1px solid #999; clear: right; }*/

/* ----------  bullets ---------------- */
ul {margin-left: 0; padding-left:.6em; list-style-type: none;}
ul li, ul li li {
	margin-left: 0; padding-left:1.2em; border: 0; background: url(../images/layout/bullet1.gif) no-repeat 0em .75em;}
ul li li {background-image: url(../images/layout/bullet2.gif) }
ol {padding-left:1em;margin-left:1em;}

/* -----------tabellen / formulieren / knoppen -------------*/
.knop { background: #063944; border:1px solid #063944; color:#fff; font-weight:bold; cursor:pointer;}	
a.knop:link, a.knop:visited, a.knop:hover { padding:.2em 1em; text-decoration:none; color:#fff; font-weight:bold;}
.knop:hover {background-color:#9d2e5b; border-color:#9d2e5b; }
tr.shaded, td.shaded, th.shaded {background-color: #f9f8ed;}
form td, form th {padding:.5em 1.4em .5em 0; border-top: 1px dotted #999999; width:50%;}
.activeFormField {background-color:#FFFF99; border:2px solid black; color:black; }
.error { font-weight:bold; color: #CC0000; }
form table td {border-top: 1px dotted #999999;}

/* --------------------- Afbeelding ---------------------*/
div.afbeelding {float:right; padding:0; margin:0 0 0 0; font-size:1em; background-color:#FFE15B; }
/*.afbeelding img { padding:0; width:15.6em; height:12.6em;}*/
/*.afbeelding img { padding:0;}*/

/* --------------------- Gerelateerd / Rechterkolom-------------------*/


/* ------------------- Vorige / 1 2 3 4 / Volgende links ------------- */
div.row {width:100%; clear: both;}
div.row span.left {float: left; width: 33%;}
div.row span.right {float: right; text-align: right; width: 34%;}
div.row span.middle {float: left; text-align: center; width: 33%;}
div.row span.left a.page {padding-left: 1.2em; background: transparent url(../images/layout/bluearrowl.gif) no-repeat scroll left center;}
div.row span.right a.page {padding-right: 1.2em; background: transparent url(../images/layout/bluearrow.gif) no-repeat scroll right center;}

.screenshot {border: 1px solid #333A8B;}

/* -------------------  Thumbnails / overzicht logo's opdrachtgevers ------------------- */
.thumbnailcontainer { width:100%;}
#contentwide .thumbnailcontainer .kolom p, #contentwide .thumbnailcontainer .kolom ul  {text-align:left; }
.thumbnailcontainer .kolom { width:49%; float:left; }
.thumbnail { float: left; padding: 0 1em .5em 0; }
.thumbnail img, .gallery img {border: 1px solid #4A6B85;}
.thumbnail a:hover img {border: 1px solid #d66500;}
.thumbnail .caption {width: 100px; height: 5em; padding-top: 4px;} 
.thumbnail a:hover .caption {cursor:pointer; }  /* anders is het een text-cursor ipv handje */
.thumbnail a { padding-bottom:.8em; } /* geen ruimte tussen de links */
/*.gallery {float:left; position:relative; padding-right:1em; padding-top:0.2em;}*/
.spacer {clear: both; height:0; font-size:1px;  margin:0; padding:0;}
.thumbnail .caption {vertical-align: middle; text-align: center; font-size: 80%;}


div.gallery {
	border: 1px solid #ccc;}

div.gallery img {
  width: 100%;
  height: auto;}

div.desc {
  padding: 10px;
  text-align: left;}

* {
  box-sizing: border-box;}

.responsive {
  padding: 0 6px 6px;
  float: left;
  width: 29.99999%;}

.clearfix:after {
  content: "";
  display: table;
  clear: both;}