@charset "utf-8";

/* ################################################### */

/* # version:   1.0                                  # */

/* # author:    Norman van der Mull                  # */

/* # e-mail:    norman@ibuildings.nl                 # */

/* # website:   http://www.ibuildings.nl             # */

/* ################################################### */


/* ### GLOBAL RESET ### */

  html, body                          { width: 100%; height: 100%; }
  body,div,dl,dt,dd,ul,ol,li,
  h1,h2,h3,h4,h5,h6,
  
  pre,form,fieldset,input,textarea,
  p,blockquote
  {  
    margin: 0; 
    padding: 0; 
  } 
  
  *                                   { line-height: 160%; }
  
  li, dd                              { margin-left: 8%; }
  
  fieldset                            { padding: 0; border: 0; position: relative; display: block; }

  input                               { line-height: 100%; margin-bottom: 5px; }

/* ### HEADERS ### */


h1
{
}


h2
{
  font-size: 1.5em;
  line-height: 1.3em;
  color: #2E2E2E;
  margin-bottom: 1em;
  letter-spacing: -0.5px;
}

h2 a,
h3 a
{
  color: #2E2E2E;
}


h3
{
  color: #636466;
  font-size: 1.2em;
  margin-bottom: 8px;
}

p.postmetadata a
{
  color: #636466;
}



/* EINDE HEADERS */


body
{
  background: #fff;
  color: #2E2E2E;
  font-family: verdana, arial;
  font-size: 0.8em;
}

#wrapper
{
  margin: 0px auto;
  width: 854px;
  position: relative;
  min-height: 100%;
 /*   height: 100%; */ 
}

#header
{
  position: relative;
  padding-top: 126px;
}

#header h1
{
  position: absolute;
  left: 0;
  top: 13px;
  width: 300px;
  height: 100px;
  display: block;
  background: url(./images/ZB_logo_liggend.jpg) no-repeat left top;
}

#header h1 a span
{
  display: block;
  text-indent: -99999999px;
}

#header h1 a
{
  display: block;
  height: 100px;
}



#header ul#breadCrumb
{
  clear: both;
  display: block;
  border-top: 1px solid #BCBDBF;
  border-bottom: 1px solid #BCBDBF;
  height: 20px;
  margin: 0;
  padding: 0;
  margin-bottom: 18px;
  font-weight: bold;
  position: relative;
}

#header ul#breadCrumb li a
{
  background-image: url(images/icons.png);
  background-repeat: no-repeat;
  background-position: -10px -207px;
  display: block;
  color: #2E2E2E;
  text-decoration: none;
  height: 18px;
  padding-left: 18px;
  float: left;
}

#header ul#breadCrumb li a#start
{
  background-color: #E0081D;
  background-position: -10px -137px;
}

#header ul#breadCrumb li a#first
{
  background-position: -10px -137px;
}

#header ul#breadCrumb li
{
  display: block;
  height: 18px;
  float: left;
  margin: 0;
  padding: 0;
  margin-right: 8px;
  position: relative;
}

#header p#mededelingBox
{
  position: absolute;
  right: 0;
  top: 92px;
  color: #E5371A;
  white-space: nowrap;
  font-size: .85em;
}


#header ul#modifyFontSize
{
  position: absolute;
  right: 7px;
  top: 24px;
  margin: 0;
  padding: 0;
}

#header ul#modifyFontSize li
{
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  background: url(images/mainSprite8.png) no-repeat left top;
  width: 30px;
  height: 60px;
}


#header ul#modifyFontSize li a span
{
  text-indent: -99999999px;
  display: block;
}

#header ul#modifyFontSize li a
{
  display: block;
  height: 100%;
  width: 100%;
}

#header ul#modifyFontSize li.normal
{
  background-position: -9px -136px;
}

#header ul#modifyFontSize li.bigger
{
  background-position: -39px -136px;
  width: 32px;
}

#searchform div
{
  background: transparent ! important;
  margin-left: 10px;
}

#searchform label
{
  display: none;
}

.marker
{
  border: 3px dashed gray;
  margin-bottom: 12px;
  float: right;
  width: 253px ! important;
}

.bottomMarker
{
  margin-bottom: 12px;
  float: right;
  width: 253px ! important;
}

#skipLink
{
  display: none;
}

#canvas
{
  position: relative;
  padding-bottom: 80px;
  float: left;
  width: 854px;
}

#canvas p
{
  margin-bottom: 1em;
}

div.boxColumn
{
  width: 260px;
  float: left;
  margin-left: 36px;
  position: relative;
}

div.boxColumn .paragraph
{
  width: 245px;
}

div.boxColumn div.box h2
{
  padding-top: 2px;
  height: 35px;
  overflow: hidden;
}

div.firstColumn
{
  margin-left: 0px;
}

div.box
{
  float: right;
  clear: right;
  width: 259px;
  width: 224px;
  background: url(images/mainSprite8.png) no-repeat -261px bottom;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 4px;
}

div.closed ul
{
  display: none;
}


div.entry p img
{
  clear: right;
  display: block;
  margin-bottom: 8px;
}


div.box h3
{
  background: url(images/mainSprite8.png) no-repeat -261px -824px;
  margin: 0;
  font-size: 1.1em;
  padding: 4px 0 0 12px;
  height: 32px;
  text-transform: uppercase;
  letter-spacing: -.05em;
  color: #2E2E2E;
}

div.box select
{
  margin-left: 12px;  
  margin-bottom: 6px;
}

body#home div.box h3:hover
{
  cursor: move;
}


div.box div.paragraph
{
  padding: 10px 6px;
}


div.box div.drag
{
  position: absolute;
  right: -8px;
  top: -4px;
  height: 19px;
  width: 19px;
  background-image: url(images/icons.png);
  background-repeat: no-repeat;
  background-position: -7px -276px;
}


div.box h2
{
  background-image: url(images/panelHeader.png);
  background-repeat: no-repeat;
  background-position: left top;
  color: #fff;
  font-size: 1.8em;
  padding-left: 12px;
  margin: 0;
  height: 37px;
}

.post,
.leftColumn
{
  width: 600px;
  float: left;
  margin-bottom: 12px;
}


div.box ul
{
  margin: 0 0 8px 12px;
  padding: 0;
}

div.box ul li
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.box ul li a
{
  text-decoration: none;
  color: #2E2E2E;
}

div.box ul li a:hover
{
  color: #000;
}


div.boxColumn div.box
{
  width: 259px;
  background: url(images/mainSprite8.png) no-repeat left bottom;
}

div.boxColumn div.box h3
{
  background: url(images/mainSprite8.png) no-repeat left -824px;
}






/* ### BLOCKQUOTE STYLES ### */

blockquote
{
  background-image: url(images/commentBg.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  color: #fff;
  padding: 0;
  margin-bottom: 24px;
}

blockquote p
{
  background-image: url(images/commentBg.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  display: block;
  color: #fff;
  display: block;
  padding: 6px 12px;
  font-weight: bold;
}

blockquote p
{
  background-image: url(images/commentBg.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  display: block;
  color: #fff;
  display: block;
  padding: 6px 12px;
  font-weight: bold;
}


blockquote a
{
  text-decoration: none;
  color: #fff;
}


blockquote a img
{
  background-image: url(images/icons.png);
  background-repeat: no-repeat;
  background-position: -7px -367px;
  border: 0;
  margin-left: 4px;
}









/* ### FOOTER STYLES ### */

#footer
{
  font-size: 0.75em;
  height: 54px;
  /*position: absolute;*/
  bottom: 10px;
  width: 100%;
  /*z-index: 100000;*/
  /*display: block;*/
}

#footer p
{
  text-align: center;
  border-bottom: 1px solid #BCBDBF;
}


#footer ul li a.rss
{
  background: url(images/mainSprite8.png) no-repeat 0px -214px;
  padding-left: 12px;
  margin-left: 8px;
  float: left;
}

#footer ul 
{
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}

#footer ul li 
{
   display: block;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   right: 50%;
}

#footer ul li a 
{
   display: block;
   margin: 0 0 0 1px;
   padding: 3px 6px;
   text-decoration: none;
   line-height: 1.3em;
   color: #2E2E2E;
}

#footer ul li a:hover
{
  color: #000;
}

#footer ul li a:hover 
{
}

#footer ul li a.active,
#footer ul li a.active:hover 
{
}

.anker
{
  display: block;
}


#searchBox
{
  
}

#searchBox fieldset.searchBox
{
  background: url(images/mainSprite8.png) no-repeat 0 -391px;
  height: 100px;
  border: 0;
  margin-left: 8px;
  width: 241px;
  height: 27px;
  margin-top: 8px;
  margin-bottom: 8px;
}


#searchBox fieldset.searchBox input
{
  width: 180px;
}

#searchBox fieldset.searchBox input
{
  width: 180px;
  position: absolute;
  left: 3px;
  top: 4px;
  width: 214px;
  height: 17px;
  border: 0px;
}

#searchBox fieldset.searchBox input#submit
{
  width: 20px;
  position: absolute;
  left: 217px;
  top: 1px;
  background: transparent;
  width: 22px;
  height: 23px;
  text-indent: -999999999px;
  border: 0px;
}

#searchBox fieldset.searchBoxRadio input
{
  margin-right: 4px;
  float: left;
}

#searchBox fieldset.searchBoxRadio label
{
  display: block;
  float: left;
  margin-right: 12px;
  vertical-align: text-bottom;
}



#searchBox fieldset.searchBoxRadio
{
  padding: 12px;
}

#searchBox fieldset.searchBoxCheckbox
{
  margin-bottom: 12px;
}


#searchBox fieldset.searchBoxCheckbox input
{
  display: block;
  float: left;
  margin-left: 12px;
  margin-right: 8px;
}

#searchBox fieldset.searchBoxCheckbox label
{
  display: block;
  clear: right;
}

.leftColumn
{
  width: 200px;
  float: left;
  margin-right: 12px;
}

.paragraph
{
  clear: left;
  float: left;
  width: 598px;
  margin-bottom: 24px;
  overflow: hidden;
  padding-right: 12px;
}

.cover h2,
.cover p,
.cover a
{
  margin-left: 208px;
}


#paragraphs
{
  width: 400px;
  float: left;
}

#paragraphs2
{
  width: 600px;
  float: left;
}

.postmetadata
{
  margin-top: 12px;
}

#paragraphs .paragraph
{
  width: 360px;
}

a.textLink
{
  color: #98BB12;
  text-decoration: none;
  display: block; 
}

a.textLink img
{
  background-image: url(images/icons.png);
  background-repeat: no-repeat;
  background-position: -9px -111px;
  border: 0;
  margin-left: 4px;
}

.paragraph img.imageLeft
{
  float: left;
  margin-right: 12px;
}

.contentPage .box
{
  float: right;
  clear: right;
}

.bottomMarker
{
  float: right;
}

#top10 
{
  width: 212px;
  float: right;
  padding-left: 24px;
  background: url(images/mainSprite8.png) repeat-y -495px top;
  font-size: 0.8em;
}

#top10 li img
{
  position: absolute;
  left: -24px;
  top: -8px;
  border: 0;
}

#top10 li
{
  padding-top: 8px;
  padding-bottom: 8px;
}


#top10 li a
{
  color: #868789;
  text-decoration: none;
  margin-left: 22px;
  position: relative;
  display: block;
  font-size: 1em;
  line-height: 0.85em;
}

#top10 li a span
{
  display: block;
  position: relative;
  top: -4px;
  line-height: 1.3em;
}

hr
{
  height: 0;
  border: 0;
  border-top: 1px solid #BBBCBE;
  clear: both;
  margin-bottom: 18px;
}


hr.clearBoth
{
  clear: both;
  border: 1px solid #fff;
  background: none;
}



/* ### FORMS ### */

form.contactForm
{
  padding: 0;
  margin: 0;
}

form.contactForm fieldset
{
  display: block;
  margin-bottom: 12px;
}

form.contactForm label
{
  width: 120px;
  float: left;
  text-align: right;
  padding-right: 24px;
}

fieldset.inputLong
{
  background: url(images/mainSprite8.png) no-repeat 144px -485px;
}

fieldset.inputShort
{
  background: url(images/mainSprite8.png) no-repeat 144px -449px;
}

fieldset.inputLong input
{
  width: 286px;
  line-height: 100%;
}

fieldset.inputShort input
{
  width: 100px;
  line-height: 1em;
}

fieldset.textBox textarea
{
  background: url(images/mainSprite8.png) repeat-y 0 -518px;
}

input.submit, #searchsubmit
{
  background: url(images/button_verzenden.png) no-repeat 0 0;
  width: 110px;
  height: 23px;
  border: 0 none;
  text-indent: 120px;
}

fieldset.textBox textarea
{
  width: 434px;
  height: 220px;
}
      
      
form.contactForm input, textarea      
{
  padding: 5px;
  border: 1px solid gray;
  background: none;
  width: 500px;
}


#firstColumn
{
  position: relative;
}

ol.commentlist li
{
  background: #eee;
  margin-bottom: 12px;
  padding: 12px;
}


/* KLEURSPECIFIEKE STYLES */

div.boxColumn div.bordeau,
div.boxColumn div.bordeau h2        { background-color: #B2101D; }

div.boxColumn div.brightblue,
div.boxColumn div.brightblue h2     { background-color: #005CA3; }

div.boxColumn div.cyan,
div.boxColumn div.cyan h2           { background-color: #66C6ED; }

div.boxColumn div.red,
div.boxColumn div.red h2            { background-color: #E0081D; }

div.boxColumn div.yellow,
div.boxColumn div.yellow h2         { background-color: #F4A307; }

div.boxColumn div.magenta,
div.boxColumn div.magenta h2        { background-color: #E1017A; }

div.boxColumn div.deepgreen,
div.boxColumn div.deepgreen h2      { background-color: #59A328; }

div.boxColumn div.seagreen,
div.boxColumn div.seagreen h2       { background-color: #5AB8A1; } 

div.boxColumn div.applegreen,
div.boxColumn div.applegreen h2     { background-color: #A6C408; } 

div.boxColumn div.darkblue,
div.boxColumn div.darkblue h2       { background-color: #A6C408; }

div.boxColumn div.purple,
div.boxColumn div.purple h2         { background-color: #8B70AA; }

div.boxColumn div.lightpurple,
div.boxColumn div.lightpurple h2    { background-color: #A87BAF; }

div.boxColumn div.darkgreen,
div.boxColumn div.darkgreen h2      { background-color: #4C734B; }

div.boxColumn div.blue,
div.boxColumn div.blue h2           { background-color: #5C89C1; }

div.boxColumn div.darkorchid,
div.boxColumn div.darkorchid h2     { background-color: #A33588; }

div.boxColumn div.olivegreen,
div.boxColumn div.olivegreen h2     { background-color: #A33588; }

div.boxColumn div.oldblue,
div.boxColumn div.oldblue h2        { background-color: #2979A0; }

div.boxColumn div.orange,
div.boxColumn div.orange h2         { background-color: #E96616; }

div.boxColumn div.brown,
div.boxColumn div.brown h2          { background-color: #773C17; }





/* ### STARTPAGINA BOX COLORS ### */

body#red div.box div.drag,
body#red blockquote,
body#red ul#breadCrumb li a,
body#red .paragraph a.textLink img               { background-color: #E0081D; }
body#red .paragraph a.textLink                   { color: #E0081D; }

body#bordeau div.box div,
body#bordeau blockquote,
body#bordeau ul#breadCrumb li a,
body#bordeau .paragraph a.textLink img           { background-color: #B2101D; }
body#bordeau .paragraph a.textLink               { color: #B2101D; }

body#applegreen div.box div,
body#applegreen blockquote,
body#applegreen ul#breadCrumb li a,
body#applegreen .paragraph a.textLink img        { background-color: #A6C408; }
body#applegreen .paragraph a.textLink            { color: #A6C408; }

body#darkorchid div.box div,
body#darkorchid blockquote,
body#darkorchid ul#breadCrumb li a,
body#darkorchid .paragraph a.textLink img        { background-color: #A33588; }
body#darkorchid .paragraph a.textLink            { color: #A33588; }

body#brightblue div.box div,
body#brightblue blockquote,
body#brightblue ul#breadCrumb li a,
body#brightblue .paragraph a.textLink img        { background-color: #005CA3; }
body#brightblue .paragraph a.textLink            { color: #005CA3; }

body#cyan div.box div,
body#cyan blockquote,
body#cyan ul#breadCrumb li a,
body#cyan .paragraph a.textLink img              { background-color: #66C6ED; }
body#cyan .paragraph a.textLink                  { color: #66C6ED; }

body#yellow div.box div,
body#yellow blockquote,
body#yellow ul#breadCrumb li a,
body#yellow .paragraph a.textLink img            { background-color: #E1017A; }
body#yellow .paragraph a.textLink                { color: #E1017A; }

body#magenta div.box div,
body#magenta blockquote,
body#magenta ul#breadCrumb li a,
body#magenta .paragraph a.textLink img           { background-color: #A33588; }
body#magenta .paragraph a.textLink               { color: #A33588; }

body#deepgreen div.box div,
body#deepgreen blockquote,
body#deepgreen ul#breadCrumb li a,
body#deepgreen .paragraph a.textLink img         { background-color: #59A328; }
body#deepgreen .paragraph a.textLink             { color: #59A328; }

body#seagreen div.box div,
body#seagreen blockquote,
body#seagreen ul#breadCrumb li a,
body#seagreen .paragraph a.textLink img          { background-color: #5AB8A1; }
body#seagreen .paragraph a.textLink              { color: #5AB8A1; }

body#darkblue div.box div,
body#darkblue blockquote,
body#darkblue ul#breadCrumb li a,
body#darkblue .paragraph a.textLink img          { background-color: #A6C408; }
body#darkblue .paragraph a.textLink              { color: #A6C408; }

body#purple div.box div,
body#purple blockquote,
body#purple ul#breadCrumb li a,
body#purple .paragraph a.textLink img            { background-color: #8B70AA; }
body#purple .paragraph a.textLink                { color: #8B70AA; }

body#lightpurple div.box div,
body#lightpurple blockquote,
body#lightpurple ul#breadCrumb li a,
body#lightpurple .paragraph a.textLink img       { background-color: #A87BAF; }
body#lightpurple .paragraph a.textLink           { color: #A87BAF; }

body#darkgreen div.box div,
body#darkgreen blockquote,
body#darkgreen ul#breadCrumb li a,
body#darkgreen .paragraph a.textLink img         { background-color: #4C734B; }
body#darkgreen .paragraph a.textLink             { color: #4C734B; }

body#blue div.box div,
body#blue blockquote,
body#blue ul#breadCrumb li a,
body#blue .paragraph a.textLink img              { background-color: #5C89C1; }
body#blue .paragraph a.textLink                  { color: #5C89C1; }

body#olivegreen div.box div,
body#olivegreen blockquote,
body#olivegreen ul#breadCrumb li a,
body#olivegreen .paragraph a.textLink img        { background-color: #A33588; }
body#olivegreen .paragraph a.textLink            { color: #A33588; }

body#oldblue div.box div,
body#oldblue blockquote,
body#oldblue ul#breadCrumb li a,
body#oldblue .paragraph a.textLink img           { background-color: #2979A0; }
body#oldblue .paragraph a.textLink               { color: #2979A0; }

body#orange div.box div,
body#orange blockquote,
body#orange ul#breadCrumb li a,
body#orange .paragraph a.textLink img            { background-color: #E96616; }
body#orange .paragraph a.textLink                { color: #E96616; }

body#brown div.box div,
body#brown blockquote,
body#brown ul#breadCrumb li a,
body#brown .paragraph a.textLink img             { background-color: #773C17; }
body#brown .paragraph a.textLink                 { color: #773C17; }




/* ### ICONS ### */

a.website img       { background-position: -9px -6px;   }
a.interview img     { background-position: -9px -90px;  }
a.audiolink img     { background-position: -9px -63px;  }
a.internallink img  { background-position: -9px -111px; }
a.up img            { background-position: -9px -37px;  }



/* ### COLOR TABLE ### */

/*
bordeau:     #B2101D
brightblue:  #005CA3
cyan:        #66C6ED
red:         #E0081D
yellow:      #F4A307
magenta:     #E1017A
deepgreen:   #59A328
seagreen:    #5AB8A1
applegreen:  #A6C408
darkblue:    #A6C408
purple:      #8B70AA
lightpurple: #A87BAF
darkgreen:   #4C734B
blue:        #5C89C1
darkorchid:  #A33588
olivegreen:  #A33588
oldblue:     #2979A0
orange:      #E96616
brown:       #773C17
*/



#posts
{
  float: left;
  width: 628px;
}

#sidebar
{
  float: left;
}