body {
margin:0;
padding:0;
font-family: Tahoma;
color: #000000;
font-size:12px;
text-align:left;
background: url(../images/bg.jpg) repeat 0 0 #222222;
}

#all {
float:center;
margin-left:auto;
margin-right:auto;
width:970px;
font-family: Tahoma;
font-size: 11px;
}

#logo {
background: url(../images/logo.png) no-repeat;
width: 201px;
height: 60px;
}

#header {
background: url(../images/header.jpg) no-repeat;
width: 970px;
height: 327px;
}

#navigatie {
width:871px;
height: 40px;
margin-left: 50px;
z-index: 100;
position: relative;
padding-top:290px;
}

#main{
background: url(../images/content.jpg) repeat;
width: 969px;
min-height: 600px;
height:100%;
}

#content{
background: url(../images/content.jpg) repeat;
width: 900px;
padding-top:30px;
padding-left: 50px;
color: #fff;
font-size:11px;
font-family: Tahoma;
text-align: left;
height:100%;
}

#left{
float:left;
width:440px;
margin-right:5px;
height:100%;
}

#right{
float:left;
width:440px;
margin-left:5px;
margin-top:30px;
}

a {
   color:#fff;
}

a:hover {
  color:#911F1F;
}

#spacer{
float:left;
width:8px;
height: 288px;
background: url(../images/afscheiding.jpg) no-repeat;
margin-top:58px;
}

#footer{
background: transparant;
width: 970px;
height: 50px;
font-size: Tahoma;
font-size: 11px;
text-align: left;
color: #ffffff;
}

h2 {
    color:#911f1f;
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

ul#topnav {
        margin: 10px 0 20px;
        padding: 0;
        list-style: none;
        font-size: 1.1em;
        clear: both;
        float: left;
        width: 870px;
}
ul#topnav li{
        margin: 0;
        padding: 0;
        overflow: hidden;
        float: left;
        height:40px;
}
ul#topnav a, ul#topnav span {
        padding: 10px 20px;
        float: left;
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
        clear: both;
        height: 20px;
        line-height: 20px;
        background: #1d1d1d;
}
ul#topnav a {        color: #7bc441; }
ul#topnav span {
        display: none;
}

ul#topnav.v2 span{
        background: url(../images/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
        color: #555;
        background: url(../images/a_bg.gif) repeat-x left bottom;
}


#slider ul, #slider li,
        #slider2 ul, #slider2 li{
                margin:0;
                padding:0;
                list-style:none;
                }
        #slider2{margin-top:1em;}
        #slider li, #slider2 li{
                width:640px;
                height:282px;
                overflow:hidden;
                }
        #slider1next, #slider1prev{
                display:block;
                width:30px;
                height:77px;
                position:absolute;
                left:-30px;
                top:71px;
                z-index:1000;
                }
        #slider1next{
                left:640px;
                }
        #slider1next a, #slider1prev a{
                display:block;
                position:relative;
                width:30px;
                height:77px;
                }
        #slider1next a{
                }

        /* numeric controls */

        ol#controls{
                margin:1em 0;
                padding:0;
                height:28px;
                text-align:center;
                }
        ol#controls li{
                margin:0 10px 0 0;
                padding:0;
                float:left;
                list-style:none;
                height:28px;
                line-height:28px;
                }
        ol#controls li a{
                float:left;
                height:28px;
                line-height:28px;
                border:1px solid #ccc;
                background:#000;
                color:#fff;
                padding:0 10px;
                text-decoration:none;
                }
        ol#controls li.current a{
                background:#5a0303;
                color:#fff;
                }
        ol#controls li a:focus{outline:none;}

 .photo {
     /* relative position, so that objects in it can be positioned inside this container */
     position:relative;
     font-family:arial;

     /* hide those extra height that goes beyong the size of this container */
     overflow:hidden;
     width:640px;
     height:282px;
 }

     .photo .heading, .photo .caption {
         /* position inside the container */
         position:absolute;
         background:#000;
         height:50px;
         width:640px;

         /* transparency for different browsers */
         /* i have shared this in my CSS tips post too */
         opacity:0.8;
         filter:alpha(opacity=80);
          -moz-opacity:0.8;
         -khtml-opacity: 0.8;

     }

     .photo .heading {

         /* hide it with negative value */
         /* it's the height of heading class */
         top:-50px;
     }

     .photo .caption {
         /* hide it with negative value */
         /* it's the height of bottom class */
         bottom:-50px;
     }


     /* styling of the classes*/
     .photo .heading span {

         color:#fff;
         top:-50px;
         font-weight:bold;
         font-size:14px;
         display:block;
         padding:5px 0 0 10px;
     }

     .photo .caption span{
         color:#fff;
         font-size:9px;
         display:block;
         padding:5px 10px 0 10px;
     }
a.opdracht {
         color:#fff;
         font-weight:bold;
         text-decoration:underline;
         font-size:10px;
}
a.opdracht:hover {
         color:#fff;
         font-weight:bold;
         text-decoration:none;
         font-size:10px;
}