@media screen {
  
  * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; }
  
  body { margin: 0; padding: 0; font-size: 12px; font-family: Verdana; background: url('../img/bg-grad-groen.png') white no-repeat; }
  
  #wrapper { position: relative; width: 950px; margin: 0 auto; }
  
  a {border:none; outline:none;}
  
  
  #content_wrapper { position: relative; overflow: hidden; height: 389px; padding: 140px 0 50px 420px; margin-left: 194px; text-align: right; background: url('../img/bg-bloem.jpg') no-repeat; }
  #content { overflow: auto; overflow-x: hidden; height: 370px; padding-right: 30px; margin-bottom: 50px; }
/*  #content h1 { display: none; } tmp */
  #content p { margin: 12px 0; font-size: 12px; line-height: 16px; }
  #content a {color:#ec008c; }
  #content a:visited {color:#ec008c; }

  #content strong { color: #ec008c; }
  #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #ec008c; }
  #content img {outline:none; border:none;}
  
  
  form { }
  form label { display: block; width: 100%; }
  form span { float: left; text-align: left; }
  form input { width: 175px; border: 1px inset #84A42D; opacity: 0.5; }
  form textarea { width: 100%; border: 1px inset #84A42D; opacity: 0.5; }
  form input.submit { width: auto; border: 1px outset black; opacity: 1; }
  

  
  
  #footer { position: relative; top: -8px; left: 50px; height: 139px; width: 840px; margin: 0; margin-left: 144px; padding: 0; background: url('../img/bg-footer.png') #a6ce39 repeat-x; }
  #footer hr, #footer h2 { display: none; }
  #footer p { margin: 0; padding: 0; }
  
  #footer p.contact { position: absolute; display: block; width: 396px; height: 189px; left: 350px; top: -60px; background: url('../img/kaartje.png') no-repeat; }
  #footer p.contact * { display: none; }
  
  #footer p.copyright { position: absolute; height: 133px; display: block; padding-left: 140px; padding-top: 14px; color: white; font-size: 11px; letter-spacing: 1px; background: url('../img/bg-left-bottom-corner.png') no-repeat; }
  
  
  #logo { position: absolute; left: 0; top: 0; height: 125px; width: 950px; }
  #logo h2 { position: absolute; left: -5px; top: 40px; margin: 0; padding: 0; }
  #logo a img { border: 0; }
  
  #logo p { position: absolute; display: block; width: 342px; height: 94px; top: 25px; right: 30px; margin: 0; padding: 0; background: url('../img/webdromen.png') no-repeat; }
  #logo p strong { display: none; }
    

  
  
  #menu { position: absolute; top: 126px; left: 0; width: 194px; min-height: 584px; background: url('../img/bg-menu.jpg') no-repeat top right; }
  #menu hr, #menu h2 { display: none; }
  

/*
2010-07-05 Eelco:
The menu is now redesigned to use CSS only. The big drawback is this causes a lot of 
browser bugs. Most importantly IE6 and IE7 do not support CSS counters, so they are
unable to display the numbers in front of each menu.

More bugs that cannot be solved for now:
 - Opera changes font size of sub-menu counter on :hover
 - IE8 does not change color of counter on :hover
 - IE8 does not support opacity

One other thing to keep in mind:
 - IE7 does not like the counter and refuses to read any style rules included after 
   it. This means it should only be included at the very end of the file.

*/
  
  
  
  /* reset some styles */
  #menu ol, #menu li, #menu a { margin: 0; padding: 0; text-decoration: none; }
  
  
  /* main menu */
  #menu li { margin-top: 4px; }
  #menu li:before { width: 33px; height: 35px; padding: 0 0 0 17px; 
                    font: 24px/35px Tahoma, Helvetica, Verdana, sans-serif; color: #a6ce39; opacity: 0.4; }
  #menu li a { display: block; height: 35px; width: 185px; padding: 0 0 0 6px; 
               font: bold 15px/35px Tahoma, Helvetica, sans-serif; color: #a6ce39; background: url('../img/btn-main.png') no-repeat left top; }
  #menu li a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  
  /* main menu active/hover */
  #menu li.active:before, #menu li:hover:before { color: #f033a3; }
  #menu li.active a, #menu li:hover a { color: #ec008c; background-image: url('../img/btn-main.active.png') }
  
  
  /* sub menu */
  #menu li ol { margin-bottom: 20px; }
  #menu > ol { margin-bottom: 20px;} 
  
  #menu li li { margin-top: 0; }
  #menu li li:before { height: 25px; width: 33px; padding: 0 0 0 21px; font: 15px/25px bold Tahoma, Helvetica, Verdana, sans-serif; color: #a6ce39; opacity: 0.4; }
  #menu li:hover  {color: #a6ce39;}
  #menu li li a, #menu li.active li a { height: 25px; background: url(''); outline:none;
                                                                  font: bold 14px/25px Tahoma, Helvetica, sans-serif; color: #a6ce39; }
  
  /* sub menu active/hover */
  #menu li li.active:before, #menu li li:hover:before,
  #menu li li.active a, #menu li li:hover a { color: #f033a3; }
  


  /* css counters are not supported by ie6 and ie7 */
  #menu ol { counter-reset: item; }
  #menu li { display: block; }
  #menu li:before { display: block; float: left; content: "0" counters(item, ".") " "; counter-increment: item; }




/* End menu */

}