html, body, h1, h2, h3, p, ul, ol, li, form, fieldset, legend { margin: 0; padding: 0; }

img { border: none; display: block; }

html { background: #488c3f url(img/background.png) repeat-y 50% 0; }

body { width: 990px; margin: 0 auto; color: #333; font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 10px; position: relative; background: transparent; }

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

#header { position: relative; background: #488c3f; z-index: 2; }
 #header h1 { height: 147px; background: #fff url(/_img/layout/achtergronden/algemeen.jpg) no-repeat 0 31px; padding: 31px 0 34px 0; }
  #header h1 img { margin: 0 0 0 auto; }
 #header form { position: absolute; top: 181px; left: 770px; width: 220px; padding: 3px 0; }
  #header input { width: 140px; border: none; padding: 2px 5px; vertical-align: top; font-family: 'Trebuchet MS', Arial, sans-serif;}
  #header button { border: none; color: #fdb; cursor: pointer; padding: 0 20px 0 5px; font-weight: bold; text-transform: lowercase; font-size: 14px; background: transparent url(img/arrow-pink.png) no-repeat 100% 50%; font-family: 'Trebuchet MS', Arial, sans-serif; overflow: visible; width: auto; }

#service { position: absolute; top: 0; left: 285px; list-style: none; font-weight: bold; font-size: 14px; }
 #service li { float: left; margin: 0 20px 0 0; }
  #service a { display: block; text-decoration: none; color: #488c3f; padding: 7px 22px 7px 0; text-transform: lowercase; background: transparent url(img/arrow-green.png) no-repeat 100% 55%; }
  #service a.current, #service a:hover { text-decoration: underline; }

#nav { position: absolute; top: 181px; left: 0; padding: 3px 220px 0 285px; list-style: none; background: #488c3f; width: 485px; font-weight: bold; font-size: 14px; }
 #nav li { float: left; position: relative; margin: 0 10px 0 0; }
  #nav a { display: block; text-decoration: none; color: #fff; padding: 4px 35px 8px 15px; text-transform: lowercase; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; height: 16px; background: transparent url(img/arrow-white.png) no-repeat 85% 55%; white-space: nowrap; }
  #nav a:hover { text-decoration: underline; }
  #nav a.current { background-color: #fff; background-image: url(img/arrow-green.png); color: #488c3f; }
   #nav li ul { display: none; position: absolute; left: 0; top: 28px; z-index: 5; background: #a7c8a3; list-style: none; padding: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; width: 120px; }
   #nav li:hover ul { display: block; }
    #nav li li { float: none; margin: 2px 0; display: block; }
     #nav li li a { height: auto; padding: 1px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; color: #488c3f; font-weight: normal; text-decoration: none; -webkit-box-shadow: 1px 1px 5px #888; -moz-box-shadow: 1px 1px 5px #888; white-space: normal; }
     #nav li li a:hover, #nav li li a.current { background: #488c3f; color: #fff; text-decoration: none; }

#subnav { position: absolute; top: 212px; left: 0; width: 215px; background: #fbecd0; z-index: 3; }
 #subnav p { font-size: 22px; background: #f8d9a2; height: 51px; }
  #subnav p a { display: block; background: transparent url(img/agenda.png) no-repeat 0 0; padding: 15px 44px 30px 19px; color: #488c3f; text-decoration: none; text-indent: -9999px; position: relative; top: -18px; margin-left: -25px; }
 #subnav ul { list-style: none; margin: 11px 0 29px 19px; font-size: 12px; }
  #subnav li { margin: 4px 0 0 0; }
   #subnav li a { background: #fff; color: #488c3f; text-decoration: none; display: block; padding: 2px 10px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
   #subnav li a.current, #subnav li a:hover { background: #488c3f; color: #fff; }
   #subnav li ul { margin: 0 0 0 19px; }
    #subnav li ul a { padding: 0 10px; }

#main { position: relative; margin: 0 220px 0 215px; min-height: 614px; background: #fff url(img/ster.png) no-repeat 100% 50px; padding: 30px 70px; line-height: 1.6; z-index: 1; }
 #main h2 { margin: 0 0 15px 0; font-size: 18px; font-weight: normal; color: #488c3f; }
 #main h3 { margin: 0 0 2px 0; font-size: 15px; font-weight: bold; line-height: 1.2; }
 #main h3.focus { color: #488c3f; font-weight: bold; background: #f8d9a2; background: -moz-linear-gradient(left top, left bottom, from(#f8d9a2), to(#fff), color-stop(0.45, #f8d9a2)); background: -webkit-gradient(linear, left top, left bottom, from(#f8d9a2), to(#fff), color-stop(0.45, #f8d9a2)); margin-left: -10px; margin-right: -10px; padding: 5px 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
 #main h4 { margin: 0 0 5px 0; font-size: 13px; font-weight: bold; }
 #main h3.focus + h4 { margin: 0; }
 #main p, #main ul { margin: 0 0 15px 0; font-size: 13px; }
  #main p a[title] { text-decoration: none; display: inline-block; text-indent: -9999px; width: 15px; background: transparent url(img/arrow-green.png) no-repeat 0 50%; }
 #main mark { font-weight: bold; background: #fbecd0; }
 #main ul { margin-left: 2em; }
 #main div.submitted { border: 3px double #488c3f; padding: 5px; }
  #main div.submitted p { margin: 0; }
 #main div.left { float: left; margin: 0 10px 10px 0; }
 #main div.right { float: right; margin: 0 0 10px 10px; }
 #main div.center { float: none; }
 #main object, #main embed { margin: 15px 0; }
  #main div.center img { display: block; margin: 0 auto; }
 #main form { }
  #main form p { margin: 0 0 5px 0; }
  #main form p.check { padding: 5px 0; }
   #main form p.check em { position: absolute; left: -9999px; }
  #main fieldset { border: none; }
   #main legend { font-size: 15px; color: #333; }
   #main fieldset fieldset legend { font-weight: bold; font-size: 13px; padding-top: 5px; }
    #main fieldset fieldset legend span { display: block; width: 400px; white-space: normal; }
   #main label { display: block; cursor: pointer; }
   #main p.error label { color: #f00; }
    #main input, #main textarea, #main select { width: 100%; padding: 5px; border: 1px solid #488c3f; background: #fff; color: #333; font-size: 14px; font-family: 'Trebuchet MS', Arial, sans-serif; -moz-border-sizing: border-box; -webkit-border-sizing: border-box; box-sizing: border-box; }
    #main form p.check input { width: auto; padding: 1px; border: none; background: auto; }
    #main p.error input, #main p.error textarea, #main p.error select { border-color: #f00; color: #f00; }
    #main p.error strong { margin-left: 10px; float: right; }
    #main input:focus, #main textarea:focus, #main select:focus { background: #fbecd0; -webkit-box-shadow: 2px 2px 5px #888; -moz-box-shadow: 2px 2px 5px #888; }
    #main textarea { resize: vertical; }
    #main input.submit { cursor: pointer; width: auto; color: #488c3f; font-weight: bold; background: #fff url(img/arrow-green.png) no-repeat 90% 50%; padding: 2px 25px 2px 7px; overflow: visible; width: auto; }

#sidebar { position: absolute; top: 212px; left: 770px; width: 220px; background: #e9f1e8; z-index: 4; }
 #sidebar #to-map { background: #488c3f; }
  #sidebar #to-map a { display: block; background: #488c3f url(/_img/layout/sociale-kaart.png) no-repeat 0 0; padding: 149px 10px 10px 10px; text-decoration: none; color: #fff; font-size: 14px; text-transform: lowercase; font-weight: bold; }
  #sidebar #to-map a:hover { text-decoration: underline; }
   #sidebar #to-map span { background: transparent url(img/arrow-white.png) no-repeat 80% 60%; display: block; }
 #sidebar div { position: relative; }
  #sidebar div div.img { margin: 10px 10px 10px -15px; }
  /*
  #sidebar div p { border: 1px solid #488c3f; margin: 10px 10px 10px -15px; background: #fff; color: #000; font-style: italic; zoom: 1; font-size: 13px; -webkit-box-shadow: 1px 1px 5px #888; -moz-box-shadow: 1px 1px 5px #888; }
   #sidebar div p a { text-decoration: none; display: block; padding: 5px 15px; zoom: 1; }
   #sidebar div p a:hover { text-decoration: underline; }
  */

.sport #header h1 { background-image: url(/_img/layout/achtergronden/sport.jpg); }
.in-de-wijk #header h1 { background-image: url(/_img/layout/achtergronden/in-de-wijk.jpg); }
.senioren #header h1 { background-image: url(/_img/layout/achtergronden/senioren.jpg); }
.vrijwilligers #header h1 { background-image: url(/_img/layout/achtergronden/vrijwilligers.jpg); }

@media print {
 #service, #nav, #subnav, #sidebar { display: none; }
 body, #header, #header h1, #main h3 { background: none !important; }
 #header h1 { margin: 0 0 15px 0; padding: 0; }
 #main { margin: 0; padding: 0; }
}