@media screen {
html, body {
 margin: 0;
 padding: 0;
 }

html {
 font-size: 62.5%;
 background: #9c3; /*groen */
 height: 100%;
 }

body {
 min-height: 100%;
 margin-left: 225px;
 line-height: 1.4;
 font-family: 'Trebuchet MS', Arial, sans-serif;
 color: #ccc;
 background: #333;
 }

a {
 text-decoration: none;
 color: #309a30;
 padding: 2px 1px;
 }

a:hover, #inhoud a:focus {
 background: transparent url(img/hover.gif) repeat-x 0 2px;
 }

.img a, .img a img {
 border: 0;
 padding: 0;
 }

address {
 font-style: normal;
 }

code {
 font: .9em Monaco, 'Lucida Console'; 
 }

p {
 margin-top: 1em;
 }

#nav {
 width: 225px;
 position: fixed;
 _position: absolute;
 left: 0;
 top: 263px;
 list-style-type: none;
 padding: 0;
 margin: 0;
 text-align: right;
 font-size: 1.4em;
 }

#nav a {
 margin-right: 10px;
 display: block;
 height: 30px;
 line-height: 30px;
 width: 205px;
 color: #333;
 text-transform: lowercase;
 font-size: 1em;
 font-weight: bold;
 padding: 0 20px 0 0;
 }

#nav a:hover, #nav a:focus, #nav li.current {
 background: transparent url(img/nav.gif) no-repeat 219px -21px;
 }

#nav li {
 padding: 0;
 }

#nav li.current {
 margin-right: -6px;
 background-position: 225px 11px;
 }

#nav li.current a:hover, #nav li.current a:focus {
 background: none;
 }

#nav .current a {
 padding-left: 0;
 }

h1 {
 width: 100%;
 margin: 0;
 padding: 0;
 height: 230px;
 text-indent: -9999em;
 background: transparent url(img/header.png) no-repeat 0 0;
 }

h2 {
 font-size: 1.5em;
 font-weight: bold;
 }

h3 {
 font-size: 1.2em;
 font-weight: bold;
 }

h4 {
 font-size: 1em;
 font-weight: bold;
 }

ul {
 padding-left: 0;
 }

#inhoud ul li {
 background: url(img/li.gif) no-repeat 5px 5px;
 list-style: none;
 padding-left: 15px;
 }

#inhoud ol {
 margin: 0 0 0 20px;
 padding: 0;
 }

#inhoud ol li {
 margin: 0;
 padding: 0;
 list-style: decimal;
 }

#inhoud {
 font-size: 1.3em;
 width: 485px;
 margin-top: -21px;
 padding: 0 20px 5px 20px;
 }

#zijbalk {
 font-size: 1.3em;
 position: absolute;
 overflow: hidden;
 top: 256px;
 margin-left: 535px;
 width: 225px;
 padding: 0;
 }

#footer {
 position: fixed;
 left: 0;
 bottom: 0;
 font-size: 1.1em;
 width: 280px;
 padding: 8px 8px 8px 10px;
 margin: 1em 0 0 0;
 color: #333;
 }

.js #diensten dd {
 display: none;
}

#diensten dt {
 padding-left: 13px;
 background: transparent url(img/list.gif) no-repeat 0 4px;
 margin-bottom: 7px;
 margin: 4px 0 0 0;
 border-bottom: 4px solid #333;
 }

#diensten dt.open {
 background-position: 0 -13px;
 }

#diensten dd {
 margin: 0 0 0 7px;
 padding: 0 0 0 6px;
 }

legend {
 display: none;
 }

fieldset {
 border: 0;
 padding: 0;
 margin: 0;
 }

label:hover, .submit:hover {
 cursor: pointer;
 }

input, textarea {
 width: 456px;
 padding: 5px 5px 5px 25px;
 font-size: 1em;
 font-family: 'Trebuchet MS', Arial;
 border: 1px solid #eaf2cd;
 background-color: #eaf2cd;
 background-position: 0;
 background-repeat: no-repeat;
 background-image: url(img/contact.png);
 }
 
#frm-1-inp-0 {
 background-position: 5px 6px;
 }

#frm-1-inp-0:focus, #frm-1-inp-0.focus {
 background-position: 5px -24px;
 }
 
#frm-1-inp-1 {
 background-position: 5px -53px;
 }

#frm-1-inp-1:focus, #frm-1-inp-1.focus {
 background-position: 5px -83px;
 }

#frm-1-inp-2 {
 background-position: 5px -113px;
 }
 
#frm-1-inp-2:focus, #frm-1-inp-2.focus {
 background-position: 5px -143px;
 }
 
#frm-1-inp-3 {
 background-position: 5px -174px;
 }

#frm-1-inp-3:focus, #frm-1-inp-3.focus {
 background-position: 5px -204px;
 }

#frm-1-inp-4 {
 background-position: -25px -294px;
 }

#frm-1-inp-4:focus, #frm-1-inp-4.focus {
 background-position: 5px -324px;
 }

#frm-1-inp-5 {
 background-position: 5px -237px;
 }

#frm-1-inp-5:focus, #frm-1-inp-5.focus {
 background-position: 5px -267px;
 }
 
input:focus, textarea:focus, input.focus, textarea.focus {
 border-color: #9c3;
 background-color: #eaf2cd;
 }

.submit {
 width: 488px;
 margin: 15px 0;
 padding: 5px;
 background: #d4d4d4;
 border-color: #474747;
 }

form dl {
 padding: 0;
 margin: 0;
 }

form dt {
 padding: 5px 0;
 width: 488px;
 }

form dd {
 margin: 0;
 padding: 0;
 }

.fout input, .fout textarea {
 border: 1px solid #9c3;
 background-color: #bdf666;
 }

label {
 display: block;
 width: 100%;
 }

label em {
 font-style: normal;
 font-size: .9em;
 }

.hulp {
 background: transparent url(img/validatie.gif) no-repeat 472px -24px;
 margin: 0;
 }

.ok {
 background: transparent url(img/validatie.gif) no-repeat 472px 8px;
 }

.hulp small {
 display: none;
 }

textarea + .hulp {
 margin-top: -120px;
 }

#portfolio #inhoud {
 width: 700px;
 }

#portfolio img {
 float: right;
 margin: 0 0 0 10px;
 }

#blog .img {
 text-align: center;
 }

/*#blog .img img {
 position: absolute;
 left: 750px;
 }*/

#contact img {
 float: right;
 }

#inhoud .meta li, #inhoud .opties li {
 display: inline;
 background-image: url(img/blog.png);
 background-repeat: no-repeat;
 padding-left: 22px;
 font-size: .9em;
 color: #555;
 margin-right: 20px;
 }

#inhoud .meta li.auteur {
 background-position: 0 0;
 }

#inhoud .meta li.datum {
 background-position: 0 -18px;
 }
 
#inhoud .meta li.onderwerpen {
 background-position: 0 -34px;
 }

#inhoud .opties li.reacties {
 background-position: 0 -50px;
 }

#inhoud .opties li.reageer {
 background-position: 0 -67px;
 }

#reacties dt {
 padding-top: 5px;
 }

#reacties dt .nummer {
 color: #454545;
 font-size: 1.8em;
 display: block;
 float: left;
 width: 20px;
 line-height: 1;
 background: transparent;
 }

#reacties dd {
 margin: 0 0 10px 0;
 padding-left: 23px;
 }
}