@charset "UTF-8";
/* CSS Document */

body {
/*In de body wordt de zwarte achtergrondbalk op een witte achtergrond weergegeven*/
font-family: Trebuchet MS, Trebuchet, Verdana, Arial;
margin: 0;
padding: 0;
background: white url(images/back.png) repeat-x 50% 0%;
}

div#background {
/* Roelof: IVM de AccesSite toolbar die *boven* alle content over de hele breedte geplaatst wordt
willen we backgrounds zetten op een div in plaats van op de body*/
background: white url(images/back.png) repeat-x 50% 0%;
}

div#main_container {
/*deze div is bedoeld om de content te centreren, buiten deze div bevindt zich geen content.
Binnen deze div is de content opgesplitst in twee kolommen. Respectievelijk div left en div right.
Het logo is het enige zichtbare beeldelement dat zich buiten deze kolommen bevindt en direct in de
main_container wordt weergegeven.*/
background: url(images/logo.png) 52px 15px no-repeat;
width: 920px;
position: relative;
margin: 0 auto 0 auto;
padding: 0 0 0 52px;
min-height: 400px;
}

p {
color: #333;
}

/* Roelof, logo bovenaan natuurlijk clickable */
div#main_container a#logo_link {
height:62px;
width:228px;
display:block;
}
div#main_container a#logo_link span {
display:none;
}

div#left {
/*Hier bevindt zich alle content aan de linkerzijde van de webpagina*/
width: 517px;
float: left;
margin: 0 0 50px 0;
}

div#right {
/*Hier bevindt zich alle content aan de rechterzijde van de webpagina*/
width: 403px;
float: left;
}

div#nav,
div#navOverzicht {
/*Deze div bevat het navigatieblok rechtsonder in de webpagina */
width: 232px;
float: right;
overflow: visible;
}

div.navDetail {
margin: 345px 48px 0 0;
padding: 26px 0 0 0;
}

div.navOverzicht {
margin: 87px 48px 0 0;
padding: 15px 0 0 0;
}

/*opmaak navigatie rechtsboven-------------------------------------------------------*/
ul#nav_top {
position:absolute;
list-style: none;
margin: -44px 0 0 184px;
padding: 0;
}

ul#nav_top li {
display: inline;
margin: 0;
padding: 0;
}

ul#nav_top li a {
display: block;
float:left;
border: none;
text-decoration: none;
height: 25px;
margin: 0 0 0 1px;
padding: 0;
}

ul#nav_top li a span,
a#mailknop span {
display: none;
}

/*navigatieknop home-------------------------------------------------------*/
ul#nav_top li#home a {
width: 58px;
}
ul#nav_top li#home a:link,
ul#nav_top li#home a:visited {
background: url(images/nav_home.png);
}
ul#nav_top li#home a:hover,
ul#nav_top li#home a:active,
ul#nav_top li#home a:link.aktief,
ul#nav_top li#home a:visited.aktief,
ul#nav_top li#home a:hover.aktief,
ul#nav_top li#home a:active.aktief {
background: url(images/nav_home_active.png);
}
ul#nav_top li#home a.aktief {
cursor: default;
}
/*navigatieknop over ons-------------------------------------------------------*/
ul#nav_top li#overons a {
width: 74px;
}
ul#nav_top li#overons a:link,
ul#nav_top li#overons a:visited {
background: url(images/nav_overons.png);
}
ul#nav_top li#overons a:hover,
ul#nav_top li#overons a:active,
ul#nav_top li#overons a:link.aktief,
ul#nav_top li#overons a:visited.aktief,
ul#nav_top li#overons a:hover.aktief,
ul#nav_top li#overons a:active.aktief {
background: url(images/nav_overons_active.png);
}
ul#nav_top li#overons a.aktief {
cursor: default;
}
/*navigatieknop projecten-------------------------------------------------------*/
ul#nav_top li#projecten a {
width: 84px;
}
ul#nav_top li#projecten a:link,
ul#nav_top li#projecten a:visited {
background: url(images/nav_projecten.png);
}
ul#nav_top li#projecten a:hover,
ul#nav_top li#projecten a:active,
ul#nav_top li#projecten a:link.aktief,
ul#nav_top li#projecten a:visited.aktief,
ul#nav_top li#projecten a:hover.aktief,
ul#nav_top li#projecten a:active.aktief {
background: url(images/nav_projecten_active.png);
}
ul#nav_top li#projecten a.aktief {
cursor: default;
}
/*navigatieknop klanten-------------------------------------------------------*/
ul#nav_top li#klanten a {
width: 72px;
}
ul#nav_top li#klanten a:link,
ul#nav_top li#klanten a:visited {
background: url(images/nav_klanten.png);
}
ul#nav_top li#klanten a:hover,
ul#nav_top li#klanten a:active,
ul#nav_top li#klanten a:link.aktief,
ul#nav_top li#klanten a:visited.aktief,
ul#nav_top li#klanten a:hover.aktief,
ul#nav_top li#klanten a:active.aktief {
background: url(images/nav_klanten_active.png);
}
ul#nav_top li#klanten a.aktief {
cursor: default;
}

/*vorig volgend blogitem-------------------------------------------------------*/
table#blogitem {
width: 100%;
height: 46px;
font-size: 12px;
padding: 5px 1px 0 1px;
margin: 0;
}

table#blogitem td#vorigblogitem a {
background: url(images/vorigblogitem.png) left no-repeat;
margin: 0;
padding: 0 0 0 15px;
}

table#blogitem td#volgendblogitem a {
margin: 0;
padding: 0 15px 0 0;
text-decoration: none;
color: #333;
}

table#blogitem td#vorigblogitem a:link,
table#blogitem td#vorigblogitem a:visited {
color: #333;
text-decoration: none;
background: url(images/vorigblogitem.png) left no-repeat;
}

table#blogitem td#volgendblogitem a:link,
table#blogitem td#volgendblogitem a:visited {
color: #333;
text-decoration: none;
background: url(images/volgendblogitem.png) right no-repeat;
}

table#blogitem td#vorigblogitem a:hover,
table#blogitem td#vorigblogitem a:active {
color: #00a2e1;
text-decoration: underline;
background: url(images/vorigblogitem_over.png) left no-repeat;
}

table#blogitem td#volgendblogitem a:hover,
table#blogitem td#volgendblogitem a:active {
color: #00a2e1;
text-decoration: underline;
background: url(images/volgendblogitem_over.png) right no-repeat;
}

hr {
display:block;
clear:both;
height: 0;
width: 100%;
margin: 0;
padding: 0;
border-top: #666 1px solid;
border-right: none;
border-bottom: none;
border-left: none;
}

div.lijn {
width: 100%;
height: 13px;
background: url(images/lijn.png) top center;
margin: 10px 0 10px 0;
}

/*opmaak content blogitem-------------------------------------------------------*/
div.datum {
margin: 19px 0 0 0;
padding: 0;
text-transform: uppercase;
font-size: 14px;
color: #666;
}

h1, h2 {
margin: 0 0 3px 0;
padding: 0;
color: #00a2e1;
font-size: 28px;
}

div#left div.datum {
float: left;
width: 37px;
height: 51px;
overflow: hidden;
background: url(images/datum.png) no-repeat;
padding: 0 8px 0 8px;
margin: 30px 14px 0 -6px;
text-align: center;
}

div#left div.blogkop {
margin: 25px 0 0 0;
width: 450px;
float: left;
}

div.dag{
color: #00a2e1;
font-size: 20px;
}
div.maand{
color: white;
font-size: 14px;
}

div.categorie {
margin: 0 0 12px 0;
padding: 0;
font-size: 12px;
color: #666;
}
/* Roelof: categorieen zijn links */
div.categorie a {
color: #666!important;
text-decoration:none!important;
}
div.categorie a:hover {
color: #00a2e1!important;
text-decoration:underline!important;
}

div.blogtext {
margin: 0 0 29px 0;
padding: 0;
font-size: 12px;
line-height: 21px;
}
div.blogtext p {
padding: 0;
margin:0;
}
div.blogtext a {
color: #00a2e1;
}

div.blogtext a:link,
div.blogtext a:visited {
text-decoration: none;
}

div.blogtext a:hover,
div.blogtext a:active {
text-decoration: underline;
}

ul.gerelateerd {
margin: 11px 0 0 0;
padding: 0;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
line-height: 21px;
list-style: none;
}

ul.gerelateerd ul {
text-transform: none;
font-weight: normal;
list-style: none;
margin: 0;
padding: 0;
}

ul.gerelateerd a {
padding: 0 0 0 14px;
}

ul.gerelateerd ul a:link,
ul.gerelateerd ul a:visited {
background: url(images/volgendblogitem.png) left no-repeat;
color: #333;
text-decoration: none;
}

ul.gerelateerd ul a:hover,
ul.gerelateerd ul a:active {
background: url(images/volgendblogitem_over.png) left no-repeat;
text-decoration: underline;
color: #00a2e1;
}

/*opmaak navigatie rechtsonder-------------------------------------------------------*/
div#nav ul a:link,
div#nav ul a:visited {
color: #666;
text-decoration: none;
}

div#nav ul a:hover,
div#nav ul a:active {
color: #00a2e1;
text-decoration: underline;
}

div#nav ul a.aktief {
color: #666;
text-decoration: underline;
cursor: default;
}

div#nav ul#categorie,
div#nav ul#archief,
div#nav ul#abonneren {
width: 116px;
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
line-height: 21px;
list-style: none;
color: #00a2e1;
}

div#nav ul#categorie,
div#nav ul#abonneren {
float: left;
overflow: visible;
}

div#nav ul#abonneren {
margin: 55px 0 0 0;
}

div#nav ul#abonneren ul li {
margin: 0 0 0 -3px;
}

div#nav ul#abonneren ul li a{
display: block;
background: url(images/rss.png) left no-repeat;
height: 24px;
padding: 0 0 0 29px;
}

div#nav ul#archief {
float: right;
}

div#nav ul ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: normal;
text-transform: none;
}

div.placeholder:after,
div#left:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

div#nav hr {
margin: 21px 0 0 0;
display: block;
clear: both;
}

div#nav p.kop {
text-transform: uppercase;
font-weight: bold;
padding: 0;
margin: 18px 0 0px 0;
color: #00a2e1;
font-size: 12px;
}
div#nav p.kop.contact{
margin: 0px 0 0px 0;
}
div#nav ul p.kop {
margin: 0;
padding: 0;
line-height: normal;
}
address span {
padding: 0 0 0 20px;
}
address span.fish {
background: url(images/address-fish.png) 0 4px no-repeat;
}
address span.phone {
background: url(images/address-phone.png) 0 no-repeat;
}
address span.email {
background: url(images/address-mail.png) 0 4px no-repeat;
}
address a {
text-decoration: none;
}
address a:link,
address a:visited {
color: #666;
}
address a:hover,
address a:active {
color: #00a2e1;
}


div#zoekveld,
div#mailveld {
float: left;
}

div#nav div#zoekveld input[type=text],
div#nav div#mailveld input[type=text] {
height: 24px;
background-repeat: no-repeat;
border: 0 none;
margin: 6px 0 0 0;
padding: 5px 0 0 6px;
color: #333;
}

div#zoekveld input[type=text] {
width: 195px;
background-image: url(images/input-back.png);
}

div#mailveld input[type=text] {
width: 147px;
background-image: url(images/input-nieuwsbrief-back.png);
}

div#zoekknop,
div#mailknop {
float: left;
margin: 6px 0 0 0;
}

div#nav address,
div#nav p.navtext {
font-style: normal;
font-weight: normal;
margin: 6px 0 0 0;
padding: 0;
font-size: 12px;
line-height: 21px;
color: #666;
}

a#mailknop {
display: block;
width: 231px;
height: 22px;
font-size: 11px;
padding: 0;
margin: 8px 0 0 0;
}

a#mailknop:link,
a#mailknop:visited {
background: url(images/mailknop_up.png);
}

a#mailknop:hover,
a#mailknop:active {
background: url(images/mailknop_over.png);
}

/*opmaak overzicht pagina-------------------------------------------------------*/
img.topimg {
margin: 0 0 34px 0;
}

img.imgOverzicht {
border: black 1px solid;
margin: 25px 0 0 0;
}

/*pageselect-------------------------------------------------------*/
table#pageselect {
width: 100px;
margin: 8px 0 0 0;
padding: 0;
}

table#pageselect td a span {
display: none;
}

table#pageselect td.left a,
table#pageselect td.right a{
width: 20px;
height: 20px;
padding: 0;
margin: 0;
}

table#pageselect td a {
display: block;
text-decoration: none;
font-size: 12px;
text-align: center;
padding: 5px;
margin: 0;
}

table#pageselect td.left a:link,
table#pageselect td.left a:visited {
background: url(images/vorigblogitem.png) center no-repeat;
}

table#pageselect td.left a:hover,
table#pageselect td.left a:active {
background: url(images/vorigblogitem_over.png) center no-repeat;
}

table#pageselect td.right a:link,
table#pageselect td.right a:visited {
background: url(images/volgendblogitem.png) center no-repeat;
}

table#pageselect td.right a:hover,
table#pageselect td.right a:active {
background: url(images/volgendblogitem_over.png) center no-repeat;
}

table#pageselect td a:link,
table#pageselect td a:visited{
color: #333;
}

table#pageselect td a:hover,
table#pageselect td a:active{
color: #00a2e1;
}

/* Roelof: een link in pageselect die al actief is is onbruikbaar. 
Bv < op pagina 1 */
table#pageselect a.disabled, table#pageselect a.disabled:hover {
cursor:default;
color: #00a2e1!important;
}
table#pageselect td.left a.disabled {
background: url(images/vorigblogitem.png) center no-repeat!important;
}

table#pageselect td.right a.disabled {
background: url(images/volgendblogitem.png) center no-repeat!important;
}


/* nieuwsitem*/
div#nieuwsitem {
clear: both;
width: 360px;
height: 196px;
/* Roelof: dit is waarschijnlijk alleen bij testen, maar ik zie regelmatig witte tekst onder de zwarte balk uit lopen: */
overflow:hidden;
margin: 0 0 0 27px;
padding: 77px 0 0 0;
}

div#nieuwsitem div.datum {
color: #fff;
padding: 0;
margin: 0;
}

div#nieuwsitem h1 {
padding: 0;
margin: 0;
}

div#nieuwsitem div.categorie {
color: #ccc;
padding: 0;
margin: 0;
}
div#nieuwsitem div.categorie a {
color: #ccc!important;
}
div#nieuwsitem div.categorie a:hover {
color: #00a2e1!important;
}


div#nieuwsitem div.blogtext,
div#nieuwsitem div.blogtext p {
color: white;
padding: 0;
margin: 11px 0 0 0;
}

div#memo {
display: none;
}

/* TEKSTPAGINA */
div#left h1.tekstpagina {
margin: 40px 0 13px 0;
padding: 0;
}
/* Roelof: h2 wordt opgegeven via CMS dus krijgt *zelf* geen class. We lossen het zo op: */
div.tekstpagina h2,
/* Roelof: Volgens mij willen we h2 in blog item trrouwens zelfde layout geven: */
div.blogtext h2,
div#left h2.tekstpagina {
font-size: 14px;
margin: 0 0 2px 0;
padding: 0;
}


/* Roelof: filter_text toegevoegd (tekst wordt afgebeeld nadat iemand een filter aanklikt */
div.filter_text {
  font-size: 14px;
  margin-bottom:15px;
  width:630px;
  float:left;
}
div.filter_text a {
  padding-right:18px;
  margin-right:3px;
  text-decoration:none!important;
}
div.filter_text a:link, div.filter_text a:visited {
  color:#333;
  background:url(images/close_filter_up.gif) no-repeat right 3px;
}
div.filter_text a:hover, div.filter_text a:active {
  color:#00A2E1;
  background:url(images/close_filter_over.gif) no-repeat right 3px;
}

/* Roelof: Zoekresultaten */
.SearchResult {
margin:0px;
}
.SearchResult h3 {
cursor:pointer;
margin:0px;
color:#00a2e1;
font-size: 25px;
height: 23px;
}
.SearchResult .blogtext {
margin:0px;
}
.SearchResult .blogtext a {
color:#333!important;
}


/*delen*/
div.spacer{
display: block;
height:30px;
}

/*SIFR*/
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  	display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -30px;
	font-size: 28px;
}

.sIFR-hasFlash p.kop {
	visibility: hidden;

}


.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}