* { margin: 0; }
html { height: 100%; }

body {
 	background: url(../t01_images/bg/body-top.gif) no-repeat top #333;
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	}

a { color: #fff; text-decoration: none; }
a:hover { color: #c0d200; text-decoration: underline; }
a img { border: 0; }
h1, h2, h3 { line-height: normal; }
h1 { margin: 0 0 40px; font-size: 36px; }
h2 { margin: 0 0 10px; font-size: 22px; }

p { padding: 0 0 20px; font-style: normal; }
address { font-style: normal; }

#container {
	width: 977px;
	margin: 0 auto;
 	padding: 0 0 30px;
 	overflow: hidden;
	}

#header {
	width: 978px;
 	height: 109px;
 	padding: 15px 0 0;
	}
#header a.logo { width: 280px; height: 83px; background: url(../t01_images/bg/logo2.gif); text-indent: -999em; float: left; }
    #header ul { padding: 65px 50px 0 0; list-style: none; float: right; }
    #header ul li { float: left; position: relative; z-index: 1000; }
    #header ul li a { height: 24px; padding: 3px 15px; border-right: 2px solid #fff; float: left; }
    #header ul li a:hover { background: #fff; color: #333; text-decoration: none; }
    #header ul .last a { border: 0; }
	#header ul li:hover a, #header ul li.sfHover a { background: #fff; color: #333; }
	#header ul ul { width: 180px; padding: 0; background: #fff; display: none; position: absolute; top: -9999px; overflow: hidden; }
    #header ul ul li { line-height: 24px; }
	#header ul ul li a { width: 150px; height: 24px; padding: 5px 15px; display: block; border: 0; color: #333; float: none; }
	#header ul ul li a:hover { background: #C0D200; color: #fff; }
	#header ul li:hover ul, #header ul li.sfHover ul { top: 30px; left: -2px; }

#cat {
	width: 977px;
	height: 74px;
	background: url(../t01_images/bg/categories.gif);
	margin: 0 0 15px;
	font-size: 16px;
	font-weight: bold;
	}
    #cat ul { padding: 18px 0 0 20px; list-style: none; }
    #cat ul li { float: left; }
    #cat ul li a { padding: 5px 18px; border-right: 3px solid #fff; float: left; }
    #cat ul li a:hover { background: #fff; color: #333; text-decoration: none; }
    #cat ul .last a { border: 0; }

#content {
	width: 977px;
 	margin: 0 0 15px;
  	overflow: hidden;
	}

#main-wide {
	width: 581px;
 	height: 383px;
  	padding: 10px 0 0;
	margin: 0 15px 0 0;
 	background: url(../t01_images/bg/main-wide.gif);
  	text-align: center;
	float: left;
	}

#main-left {
 	width: 421px;
  	min-height: 363px;
   	padding: 30px 30px 0;
 	margin: 0 15px 0 0;
  	background: url(../t01_images/bg/main-column-top.gif) no-repeat #000;
   	font-size: 22px;
   	text-align: center;
    line-height: 36px;
 	float: left;
  	position: relative;
	}
    #main-left span.bottom { width: 481px; height: 6px; display: block; background: url(../t01_images/bg/main-column-bottom.gif); position: absolute; bottom: 0; left: 0; }

#main-right {
 	width: 421px;
  	min-height: 363px;
   	padding: 30px 30px 0;
   	background: url(../t01_images/bg/main-column-top.gif) no-repeat #000;
    font-size: 22px;
    text-align: center;
    line-height: 36px;
 	float: left;
  	position: relative;
    }
    #main-right span.bottom { width: 481px; height: 6px; display: block; background: url(../t01_images/bg/main-column-bottom.gif); position: absolute; bottom: 0; left: 0; }

#main-right-content {
 	width: 421px;
  	min-height: 363px;
   	padding: 30px 30px 0;
   	background: url(../t01_images/bg/main-column-top.gif) no-repeat #000;
    font-size: 14px;
    line-height: 20px;
 	float: left;
  	position: relative;
    }
    #main-right-content span.bottom { width: 481px; height: 6px; display: block; background: url(../t01_images/bg/main-column-bottom.gif); position: absolute; bottom: 0; left: 0; }
    #main-right-content a { color: #c0d200; text-decoration: none; }
    #main-right-content a:hover { color: #c0d200; text-decoration: underline; }


#footer {
        font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 977px;
 	line-height: 22px;
	}
    #footer div { width: 205px; height: 123px; padding: 15px 15px 0; margin: 0 12px 0 0; text-align: center; float: left; position: relative; }
    #footer-first { background: url(../t01_images/bg/footer-01.jpg); }
    #footer-second { background: url(../t01_images/bg/footer-02.gif); }
    #footer-third { background: url(../t01_images/bg/footer-03.gif); }
	#footer-third img { position: absolute; left: 0; top: -12px; }
    #footer-fourth { margin: 0 !important; background: url(../t01_images/bg/footer-04.gif); }

/* GALLERY */

div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: left;
	margin: 0 15px 20px 0;
	width: 561px;
 	padding: 0 10px;
    overflow: hidden;
    position: relative;
}
div.content .bottom { width: 581px; height: 7px; margin: 0 -10px 0; display: block; clear: both; overflow: hidden; position: absolute; bottom: 0; left: 10px; }
div.content a {
	text-decoration: none;
	color: #fff;
}

div.navigation a { color: #777; }
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin: 5px 0 10px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
text-decoration:none;
}
div.nav-controls {
	float: right;
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 580px;
	height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 560px;
	height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: middle;
}
div.navigation {
    float: left;
}
ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 10px 5px 0;
	list-style: none;
}
a.thumb {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	height: 35px;
 	overflow: hidden;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
border: 1px solid #C0D200;
	color:#fff;
	background-color: #C0D200;
}
div.pagination a:hover {
	background-color: #fff;
    border: 1px solid #fff;
	text-decoration: none;
	color:#000;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}

/* TICKER */

.tickercontainer { /* the outer div with the black border */
width: 977px; 
height: 74px;
font-size: 17px;
line-height: 30px;
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 20px;
top: 0;
width: 937px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 977px;
list-style-type: none;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
padding: 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 

/*---------------------------------------------------- Formulieren ----------------------------------------*/
.formfield {
border:1px solid #A5ACB2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#353535;
font-size:12px;
height:14px;
letter-spacing:1px;
padding:3px;
width:253px;
}

.formfield:focus {
border:1px solid #353535;
}

.formarea {
border:1px solid #A5ACB2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#353535;
font-size:12px;
height:100px;
letter-spacing:1px;
line-height:150%;
padding:0 2px;
width:360px;
}

.formarea:focus {
border:1px solid #353535;
}

.formfieldcaptcha {
border:1px solid #A5ACB2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#353535;
font-size:12px;
height:14px;
letter-spacing:1px;
padding:3px;
width:75px;
}

.formfieldcaptcha:focus {
border:1px solid #C0D200;
}

.submit {
	padding: 4px;
	color: #000;
	border:none;
	cursor: pointer;
	background-color: #fff;
}
.submit:hover {
	background-color: #C0D200;
	color: #000;
}

/*---------------------------------------------------- Formulieren ----------------------------------------*/

.groot {
	font-size: 16px;
	color: #C0D200;
}

.normaal { font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
 	line-height: 22px;
}
