/*--------------------------------------------------*/
/*          Standard HTML TAG definition            */
/*--------------------------------------------------*/
@font-face {
    font-family: 'MyriadWebProRegular';
    src: url('../fonts/myriadwebpro.eot');
    src: url('../fonts/myriadwebpro.eot?#iefix') format('embedded-opentype'),
         url('../fonts/myriadwebpro.woff') format('woff'),
         url('../fonts/myriadwebpro.ttf') format('truetype'),
         url('../fonts/myriadwebpro.svg#MyriadWebProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {  
     color:#000000;
     font-size:14px;
     font-family:'MyriadWebProRegular', arial,sans-serif;
     line-height:110%;
     color:#ffffff;
}

a, a:link, a:active, a:focus {
    outline: 0 none;
    color:#ffffff;
    text-decoration: none;
}

a:hover {
    color:#0fa89e;
    text-decoration: none;
}

p {
    font-family:'MyriadWebProRegular', arial, sans-serif;
    font-size: 100%;
    padding: 0;
    margin: 0;
}
 
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}

/*--------------------------------------------------*/
/*Page Elements                                     */
/*--------------------------------------------------*/

/* Nodig voor full screen website */
html, body {
height:100%;
min-height:650px;
min-width:1024px;
}

#wrapper1 { 
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:hidden;
}

#wrapper2 { 
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
overflow:hidden;
}
/* Nodig voor full screen website EINDE */

#col1 { 
float:left;
width:16.2%;
height:100%;
padding-left:5.5%;
padding-right:5.5%;
background:url('../images/shadowleft2.png') repeat-y border-box, url('../images/shadowright2.png') repeat-y border-box, url('../images/leftbar.png') repeat padding-box;
background-position:left top, right top, 0 0;
position:relative;
}

#col2 { 
float:left;
width:72.8%;
height:100%;
position:relative;
}

#backstretch {
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
z-index:-999;
}

#backstretch img {
bottom:0;
right:0;
width:100%;
height:100%;
position:absolute;
}

/*--------------------------------------------------*/
/*Header                                            */

#header_container {
      width:100%;
      height:76.3%;      
      position:relative;
}

 #header_container h1 { 
         display:block;
         width:100%;         
         height:16.6%;
         position:absolute;
         top:7.7%; /* gebruik top om de margin te laten reageren op height!!*/ 
         overflow:hidden;                     
         }
         
         #header_container h1 a { 
         display:block;
         width:100%;
         height:100%;        
         background:url('../images/logo2.png') no-repeat content-box; 
         background-size:contain;
         background-position:0 0;
         margin:0 0 0 0;
         text-indent:-10000px;
         overflow:hidden;
    /*     position:absolute;      */
         z-index:1;     
         }
         
  #header_container #row2 {
  display:block;
  height:22.3%;
  position:absolute; /* position op absolute anders neemt hij de som en plaatst hij die onder de vorige element dus dan zit je al op 65.6%. 
  Dat komt omdat met relative position de plek van de vorige element niet weg is en dan telt deze elemente niet vanaf de top */
  top:32%; /* 16.6 + 7.7% + 8.5% padding = 32.8% <-- KLOPT NIET MEER, NU DIT --> omdat ik de menu meer ruimte wilt geven maak ik van mar 2 7.7 % net als mar 1.: 8.5-7.7=0.8 gaat nu bij menu komen=rij3. Dus 16.6 +7.7+ 7.7 padding=32% */
  overflow:hidden; 
  text-shadow:0px -2px 1px black;
  }
  
  #header_container #row2 h2 { 
  font-size:100%;
  font-family:'MyriadWebProRegular', arial, sans-serif;
  text-transform:uppercase;
  }
  
  #header_container #row2 p { 
  text-transform:uppercase;
  }
  
  #header_container ul.menu {
  display:block;
  width:100%; 
  height:38%; /* 37.2 klopt niet meer, er komt 0.8% bij van mar2 dus height wordt dan 37.2+0.8= 38%. */
  position:absolute;
  top:62%; /* 32.8% + 22.3% + 8.7% padding =62.8% <-- klopt niet meer 0.8% moet er af van mar2 en dat wordt dan 32+22.3+7.7= 62%*/
  bottom:0%;
  overflow:hidden;
  font-size:128.6%; /* = 18 px */
  font-family:'MyriadWebProRegular', arial, sans-serif;
  text-transform:uppercase; 
  text-shadow:0px -2px 1px black; 
  }
  
  #header_container ul.menu div.menuspace {
  display:block;
  position:relative;
  height:65%; /* je moet de 2 17.5% erafhalen zodat de li's in de div gelijkmatig verdeeld kunnen worden*/
  top:17.5%;
  bottom:17.5%;
  }
  
  
  #header_container ul.menu li {
  display:block;
  height:20%; /* want 5 li's, zo hebben alle li's evenveel ruimte. 
  Maar omdat ze bovenaan beginnen zal de onderste li teveel ruimte hebben. 
  Met line-height zorg je ervoor dat alle links(= a elementen) precies in het midden van de li elementen komen. */
  }  

    #header_container ul.menu li a {
    display:block;
    height:auto;
    position:relative; 
    line-height:150%;  /*100%=18 px 50% 9 px, als ik 50% erbij doe dan komt de tekst 9px lager dus precies in het midden dus vandaar 150%. */  
    }
  
  #header_container ul.menu {
  text-align:center;
  background:url('../images/divider.png') no-repeat border-box, url('../images/divider.png') no-repeat border-box; 
  background-position:center top, center bottom;
  }

/*--------------------------------------------------*/
/*Container                                         */

#content_container {
width:100%;
height:100%;
margin:0;
position:relative;
clear:both;
}

  #content_container .blok1 {
  width:54.6%;
  height:40%;
  background:url('../images/textboxlight.png') repeat border-box; 
  background-position:0 0;
  position:absolute;
  top:46.9%; /* y-as */
  left:35.8%; /* x-as */  
  }
  
   .blok1 .bloktekst { 
   width:54.7%;
   height:84%;
   top:9%;
   bottom:7%;
   padding-right:3.5%;
   padding-left:3.5%;
   display:block;
   float:left;  
   overflow:auto;
  /*  background-color:blue; */
   position:relative;
   }
   
   .bloktekst a, .bloktekst a:link, .bloktekst a:active, .bloktekst a:focus {
    outline: 0 none;
    color:#0fa89e;
    text-decoration:none;
    }
    
    .bloktekst a:hover {
    color:#0fa89e;
    text-decoration: underline;
    }
   
   .blok1 .bloktekst h3 {
   display:block;
   font-size:157.1%; /*font-size 20px*/
   line-height:100%;
   text-transform:uppercase;
   position:relative;
   }
   
   .blok1 .bloktekst p {
   display:block;
   font-size:100%;
   text-align:justify;
  /* text-transform:uppercase;*/
   position:relative;
   top:10.5%;
   }
   
   .blok1 .blokphoto { 
   width:34.3%;
   height:84%;
   top:9%;
   bottom:7%;
   padding-right:4%;
   padding-left:0%;
 /*  background-color:red; */
   display:block;
   float:left;
   position:relative;   
   }
   
   .blok1 .blokphoto img.resize { 
   width:100%;
   height:100%;   
   }

/*Over ons                                         */

#content_container .blok_ons {
  width:70%;
  height:65%;
  background:url('../images/textboxlight.png') repeat border-box; 
  background-position:0 0;
  position:absolute;
  top:20%; /* y-as */
  left:20%; /* x-as */  
  }
  
  .blok_ons .bloktekst { 
   width:54.7%;
   height:90%;
   top:5%;
   bottom:5%;
   padding-right:3.5%;
   padding-left:3.5%;
   display:block;
   float:left;  
   overflow:auto;
  /*  background-color:blue; */
   position:relative;
   }
   
   .blok_ons .bloktekst h3 {
   display:block;
   font-size:157.1%; /*font-size 20px*/
   line-height:100%;
   text-transform:uppercase;
   position:relative;
   }
   
   .blok_ons .bloktekst p {
   display:block;
   font-size:100%;
   text-align:justify;
  /* text-transform:uppercase;*/
   position:relative;
   top:25px;
   }
   
   .blok_ons .blokphoto { 
   width:34.3%;
   height:90%;
   top:5%;
   bottom:5%;
   padding-right:4%;
   padding-left:0%;
 /*  background-color:red; */
   display:block;
   float:left;
   position:relative;   
   }
   
   .blok_ons .blokphoto img.resize { 
   width:100%;
   height:100%;   
   }
  
/* Contact                                         */

#content_container .blok_contact {
  width:53%;
  height:85%;
  background:url('../images/textboxlight.png') repeat border-box; 
  background-position:0 0;
  position:absolute;
  top:10%; /* y-as */
  left:20%; /* x-as */  
  }
  
  .blok_contact .bloktekst { 
   width:93%;
   height:90%;
   top:5%;
   bottom:5%;
   padding-right:3.5%;
   padding-left:3.5%;
   display:block;
   float:left;  
   overflow:auto;
  /*  background-color:blue; */
   position:relative;
   }
   
   .blok_contact .bloktekst h3 {
   display:block;
   font-size:157.1%; /*font-size 20px*/
   line-height:100%;
   text-transform:uppercase;
   position:relative;
   }
   
   .blok_contact .bloktekst p {
   display:block;
   width:500px;
   font-size:100%;
   text-align:justify;
  /* text-transform:uppercase;*/
   position:relative;
   top:25px;
   }   
   
   .blok_contact .blokphoto { 
   width:34.3%;
   height:90%;
   top:5%;
   bottom:5%;
   padding-right:4%;
   padding-left:0%;
 /*  background-color:red; */
   display:block;
   float:left;
   position:relative;   
   }
   
   .blok_contact .blokphoto img.resize { 
   width:100%;
   height:100%;   
   }   
   
/* Contactformulier                                */
   #contactform { 
   width:500px;
   clear:left;
   padding-top:50px;
   }
   
   #contactform fieldset { 
   border:2px solid #b1c4df;
   padding-bottom:10px;
   padding-top:10px;
   }
   
 /*  #contactform legend { 
        color: #ffffff;
        font-family: 'PT Sans',arial,sans-serif;
        font-size: 22px;
        line-height: 110%;
        padding:5px 5px 20px 5px;
        margin:10px 0 20px 10px;
     }
     wordt nu niet gebruikt */
     #contactform input { 
     width:270px;
     border:1px solid #484848;
     }
     
     #contactform input#male, #contactform input#female {
     width:20px;
     }
     
     #contactform input#welrijbewijs, #contactform input#geenrijbewijs {
     width:20px;
     }
     
     #contactform input#straat { 
     width:214px;   
     }
     
     #contactform input#huisnummer { 
     width:50px;
     }
     
     #contactform input#postcodecijfer { 
     width:40px;     
     }
     
     #contactform input#postcodeletter { 
     width:20px;   
     }
     
     #contactform input#plaats { 
     width:198px;
     }
     
     #contactform textarea#bericht { 
     width:270px;
     border:1px solid #484848;
     }
     
     #contactform table { 
     border-spacing:2px; /* Door border-spacing krijgen alle td 2px ruimte tussenin, daardoor zit er ruimte tussen de invoervelden */
     border-collapse: separate;
     } 
     
     #contactform  td { 
     font-size:16px;
     padding-bottom:8px;     
     } 
     
     #contactform  td.td_title { 
     width:115px;
     padding:0 20px 8px 20px;
     vertical-align:top; 
     }
      
     #contactform  td.td_divider { 
     padding:0 20px 8px 0; 
     vertical-align:top; 
     }
     
     #contactform small { 
     font-size:14px;     
     margin:0 0 0 20px;
     }
  
   
   
/*--------------------------------------------------*/
/*Footer                                            */

#footer_container {
width:100%;
height:23.7%;
position:relative;
clear:both;
text-shadow:0px -2px 1px black; 
}

#footer_container #row4 {
display:block;
width:100%;
height:58.2%;
position:absolute;
color:#0fa89e;
}

    #footer_container #row4 div.frow4space { 
    display:block;
    position:relative;
    height:62.8%;
    top:18.6%;
    bottom:18.6%;
    }

#footer_container ul#row4 { 
font-size:100%;
font-family:'MyriadWebProRegular', arial, sans-serif;
text-transform:uppercase;
text-align:center;
background:url('../images/divider.png') no-repeat border-box; 
background-position:center bottom;
}


#footer_container #row5 {
display:block;
width:100%;
height:1.7%;
top:66.2%; /* 58.2% + 8% padding=66.2% */
bottom:32.1%; /* 40.1% - 8%= 32.1%*/
position:absolute;
}


#footer_container #row5 p {
font-size:85.7%; /* =12px */
font-family:'MyriadWebProRegular', arial, sans-serif;
text-transform:uppercase;
text-align:center;
}


/*--------------------------------------------------*/
/*---Commente box voor CSS dingen           --------*/
/*--------------------------------------------------*/