body {
font: 90% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;}

#container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: rgb(245, 245, 245);
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */}

#headermenu {
background-color: rgb(102, 204, 204); margin-bottom: 25px;
padding: 0px 0px 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
width:100%;
margin:0;
}
#headermenu h1 {vertical-align: middle;
margin: 0;
padding: 10px 0;
}
#headermenu h3 {vertical-align: middle; color: white; text-align: center;
margin: 0;
padding: 10px 0;
}
#headermenu ul {
margin: 0px;
padding: 8px 0px 0px 0px;
list-style: none;
}
#headermenu li {border-right: 1px solid;
border-bottom: 0px solid #d9d9d9;
color: white;
font-size: 14px;
font-weight: bold;
float: left;
text-align: center;
}
#headermenu li a {padding: 5px 0px 0px;
background: transparent url(https://www.xs4all.nl/%7Eva/images/bgOFF.gif) repeat-x scroll left top;
text-decoration: none; width: 179px;
display: block;
color: #034895;
height: 23px;
}
#headermenu li a:visited{
text-decoration: none;
}
#headermenu li a:hover {text-decoration: none; color:#034895; background:transparent url(https://www.xs4all.nl/%7Eva/images/bgON.gif) repeat-x top left;
}
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#mainContent {width:100%;
overflow:hidden;
color: #666666;
padding: 8px 20px 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#mainContent p.vraag {font-size: 95%;
color: #336666;
font-weight: bol;
margin-top: 20px;
padding: 0px 0px;
letter-spacing: 0.3px;
line-height: 125%;
text-indent:0px;
}
#mainContent h1 {color: #339999;}
#mainContent h2 {text-align: left; font-size: 100%; padding: 12px 0px 4px 0px;}
#mainContent h3 {text-align: left; font-size: 100%; margin: 35px 0px 5px 0px; padding: 0;}
#mainContent h4 { font-size: 90%; margin-left: 0px; line-height: 140%; width: 210px; float: left; font-weight: normal; text-align: left; margin-right: 10px; z-index: 1; color: #339999;}
#mainContent h5 {font-size: 100%; color: #0099CC; font-weight: normal; text-align: left; padding: 0; margin: 0px 0px 4px 0px;}
#mainContent h6 {color: rgb(153, 153, 153); font-size: 80%; padding: 6px 0px 8px 0px; font-weight: normal}
#mainContent a {font-size: 100%;}
#mainContent p a {font-size: 90%;}
#mainContent p {font-size: 100%; text-indent:0px;line-height: 130%; padding: 0; margin: 0 0 15px 0; }

#sidebar1 {
float:left;
width:170px; /* since this element is floated, a width must be given */
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
margin-top: 20px;
background: rgb(245, 245, 245); /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0px 15px 0px; /* padding keeps the content of the div away from the edges */
}
#sidebar1 p {color: #444444; font-size: 82%; text-align: center; padding: 6px 0px 8px 0px; margin-left: 0px;}
#sidebar1 p a {font-size: 82%;}
#sidebar1 a { font-size: 100%; color: rgb(51, 153, 153); text-align: center; text-decoration: none; font-weight: normal;}
#sidebar1 a:hover {font-size: 100%; color: rgb(153, 204, 204); text-align: center; font-weight: normal; clear: both;}
#sidebar1 h6 {text-align: center; padding: 6px 20px 0px 20px; margin: 5px 0 14px 0; font-size: 75%;}

p.break {
height: 170px;
}
.inzet {background: #ebebeb none repeat scroll 0% 50%;
width: 150px; padding: 25px 5px; text-align: center;
}
#sidebar2 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
margin-top: 50px;
background: rgb(245, 245, 245); /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0px 15px 0px; /* padding keeps the content of the div away from the edges */
text-align: right;
}
#sidebar2 h3 {background-color: #339999; color: rgb(255, 255, 204); font-size: 85%; padding: 10px 5px 10px 8px; margin-left: 0px; margin-right: -5px;}
#sidebar2 h4 {background-color: #339999; color: rgb(255, 255, 204); font-size: 95%; padding-left: 0px; margin-top: 10px; margin-left: 5px; margin-right: -5px;}
#sidebar2 h6 {padding: 0px 14px 4px; text-align: center; margin-left: 0px; font-size: 80%;}
#sidebar2 h6 a {font-size: 100%;}
#sidebar2 h6 a:hover {font-size: 100%;}
#sidebar2 p {color: #444444; font-size: 82%; text-align: left; padding: 0px 10px 10px 0px; margin-left: 0px;}
#sidebar2 p a {font-size: 100%;
}
.footer {
clear:both;
float:left;
width:100%;
margin:0;
margin-bottom: 20px; text-align: center;
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.footer h6 {font-size: 80%;}
.footer a { font-size: 9pt; color: rgb(51, 153, 153); text-align: center; text-decoration: none; font-weight: normal;}
.footer a:hover {font-size: 9pt; color: rgb(153, 204, 204); text-align: center; font-weight: normal; clear: both;}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 0px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left; width: 130px; text-align: center;
margin-right: 0px;
padding-bottom: 10px;
}
.footer50procent { /* this class can be used to float an element left in your page */
float: left; height: 35px; width: 50%;
margin-right: 0px;
}
.footer50procent a, .footer1rij a {
font-size: 9pt;
color: #339999;
text-align: center;
text-decoration: none;
font-weight: normal;
background-color: #d2d2d2;
padding-top: 3px;
padding-bottom: 4px;
}
.footer50procent a:hover, .footer1rij a:hover {
color: #339999;
padding-top: 3px;
padding-bottom: 4px;
background-color: #dcdcdc;
}
.footer30procent { /* this class can be used to float an element left in your page */
float: left; height: 35px; width: 30%;
margin-right: 0px;
}
.footer3rij {float: left; background:#DDDDDD;
margin-right: 0px;
width: 750px; height: 107px;
}
.footer1rij {float: left;
margin-right: 0px;
width: 750px; height: 35px;
}
.footercover {float: left;
margin-right: 0px;
width: 75px; height: 107px;}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
a.linkopacity:hover img {filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6;}

.transOFF {border:0px;}

.transON {opacity:.70;filter: alpha(opacity=70); -moz-opacity: 0.7;border:0px; }

a.button:link, a.button:visited {
background: transparent url(https://www.vruchtbareaarde.nl/images/rond_gro_2.gif) no-repeat scroll 0 50%;
display: block;
width: 106px;
height: 30px;
text-decoration: none;
font-size: 11px;
font-family: 'Lucida Grande',sans-serif;
font-weight: bold;
}
a.button:link:hover, a.button:visited:hover {
background: transparent url(https://www.vruchtbareaarde.nl/images/rond_gro_2b.gif) no-repeat scroll 0 50%;
font-size: 11px;
font-family: 'Lucida Grande',sans-serif;
font-weight: bold;
}

a.button2, a.button5, a.button6, a.button7 {display: block; margin 0 !important;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
-webkit-transition: all 0.1s ease !important;
-moz-transition: all 0.1s ease !important; -o-transition: all 0.1s ease !important;
font-family: 'Lucida Grande', sans-serif !important;
line-height: 1.4 !important; background-color: #49A7F3 !important;
display: inline-block !important;
padding: 12px 10px !important;
-webkit-border-radius: 10px !important; -moz-border-radius: 10px !important;
border-radius: 10px !important; color: white !important;
text-decoration: none !important; border: 1px outset lightblue !important;
font-size: 13px !important; font-weight: bold !important;
}
a.button5{
background-color: #FF9900 !important;
}
a.button2:hover, a.button5:hover, a.button6:hover, a.button7:hover { -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1) !important;
-webkit-transition: all 0.1s ease !important; -moz-transition: all 0.1s ease !important;
-o-transition: all 0.1s ease !important; font-family: 'Lucida Grande', sans-serif !important;
line-height: 1.4 !important; display: inline-block !important; padding: 10px 10px !important;
-webkit-border-radius: 10px !important; -moz-border-radius: 10px !important;
border-radius: 10px !important; color: white !important; text-decoration: none !important;
border: none !important; border: 1px outset lightgrey !important; font-weight: bold !important;
background-color: #82c7ff !important; letter-spacing: 0.0pt !important; font-size: 13px !important;
padding: 12px 10px !important;
}
a.button5:hover {
background-color: #66ff99;
background-color: #ffcc66 !important;
}

h2, h3, h4, h5, h6 {color: #0099CC; text-align: center}
h1 {font-size: 170%; text-align: center; margin-left: 0px;}

h6 {font-weight: normal; text-align: left; }
a { font-size: 82%; color: rgb(51, 153, 153); text-align: center; text-decoration: none; font-weight: normal;}
a:hover {font-size: 82%; color: rgb(153, 204, 204); text-align: center; font-weight: normal; clear: both;}

img.home {border: 0px solid ; width: 107px; height: 65px;}
img.cover {border: 2px outset rgb(204, 255, 255); text-align: center; width: 75px; height: 107px; margin-bottom: 0px;}

p.break {margin: -20px; padding: 0px; background: none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 150px; height: 250px;}

p.break2 {margin: -20px; padding: 0px; background: none repeat scroll 0% 50%;
-moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;
width: 170px; height: 260px;}

p.break3 {margin: -20px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 170px; height: 225px;}

p.kop1 {margin: -30px -10px -15px 0px; padding-left: 10px; padding-top: 10px; color: white; text-align: center; background-color: rgb(102, 204, 204);}