/****************** ALGEMEEN ******************/

* {
margin: 0;
padding: 0;
font: normal 12px Trebuchet MS, Tahoma, Verdana, Sans-serif;
color: #191919; 
}
body {
background: url(../image/clouds.jpg) top center no-repeat #bcd1df;
}

#logo
{
  position : absolute;
  left : 50%;
  margin-left : -470px;
  top : 30px;
  z-index : 1000;
}

#wrap {
}
#content {
width: 980px;
margin: 0 auto;
position: relative;
}


#mapselect
{
  position : absolute;
  z-index : 1000;
  left : 200px;
  top : 50px;
}



#centercol {
float: left;
width: 980px;
background: #8BBD5E;
overflow: hidden;
height: 481px; /* Deze hoogte (dynamisch) veranderen  wanneer (de inhoud van) het middenpaneel korter of langer wordt */
position: relative;
}
#map {
position : relative;
width: 731px;
height: 481px;
float: left;
}
#flashMap {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.trans { 
background: url(../image/transbg.png) top left;
height: 481px; /* Deze hoogte (dynamisch) veranderen  wanneer (de inhoud van) het middenpaneel korter of langer wordt */
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
.clr {
float: none;
clear: both;
}
.right {
float:right;
}

/****************** HEADER ******************/

#header {
background: url(../image/hbg.jpg) top left no-repeat #FFF;
height: 164px;
width: 980px;
overflow: hidden;
position: relative;
float: left;
}
#header h1.head {
font: bold 20px Trebuchet MS, Meta, Myriad Pro, Myriad;
color: #306f64;
position: absolute;
top: 36px;
left: 583px;
}
#header h2.head {
font: normal 14px Trebuchet MS, Myriad Pro, Myriad;
color: #306f64;
position: absolute;
top: 58px;
left: 561px;
}
#content .icons {
position: absolute;
z-index: 3000;
top: 139px;
left: 0;
width: 188px;
padding: 0 35px 0 22px;
}
#content .icons p {
font: normal 9px Arial;
color: #73acc1;
height: 14px;
text-transform: uppercase;
}
#content .icons a span {
display: none;
}
#content .icons a {
background: url(../image/icons.gif) top left no-repeat;
display: block;
width: 24px;
height: 24px;
float: left;
margin: 0 4px 0 0;
}
#content .icons a#icon1 {
background-position: 0 0;
display:none;
}
#content .icons a#icon2 {
background-position: -24px 0;
display:none;
}
#content .icons a#icon3 {
background-position: -48px 0;
display:none;
}
#content .icons a#icon4 {
background-position: -72px 0;
float: right;
}
#content .icons a#icon5 {
background-position: -96px 0;
display:none;
}
#content .icons a:hover#icon1 {
background-position: 0 -24px;
}
#content .icons a:hover#icon2 {
background-position: -24px -24px;
}
#content .icons a:hover#icon3 {
background-position: -48px -24px;
}
#content .icons a:hover#icon4 {
background-position: -72px -24px;
float: right;
}
#content .icons a:hover#icon5 {
background-position: -96px -24px;
}


#actions {
background: url(../image/icon.gif) top left no-repeat;
position: absolute;
left: 230px;
top: 129px;
height: 24px;
padding: 11px 0 0 54px;
}
#actions span {
color: #abbfb3;
display: block;
float: left;
height: 24px;
line-height: 24px;
font: bold 11px Arial;
text-decoration: none;
padding: 0 15px 0 0;
}
#actions a {
text-transform: uppercase;
color: #abbfb3;
display: block;
float: left;
height: 24px;
line-height: 24px;
font: bold 11px Arial;
text-decoration: none;
padding: 0 15px 0 0;
}
#actions a.active, #actions a:hover {
color: #577f66;
}


#actions2 {
position: absolute;
left: 700px;
top: 129px;
height: 24px;
padding: 11px 0 0 54px;
}
#actions2 a {
text-transform: uppercase;
color: #abbfb3;
display: block;
float: left;
height: 24px;
line-height: 24px;
font: bold 11px Arial;
text-decoration: none;
padding: 0 15px 0 0;
}
#actions2 a.active, #actions a:hover {
color: #577f66;
}

#login {
position: absolute;
right: 31px;
top: 129px;
height: 24px;
padding: 11px 0 0 54px;
}
#login a {
font: bold 10px Arial;
color: #afafaf;
padding: 0 0 0 10px;
text-decoration: none;
display: block;
float: left;
height: 14px;
line-height: 14px;
}
#login a:hover {
color: #666;
}


/****************** DIALOOG SCHERM ******************/

#dialog {
display:none;
background: #FFF;
width: 400px;
border: 1px solid #FFF;
border-bottom-color: #8a8a8a;
border-right-color: #8a8a8a;
top: 165px;
left: 165px;
position: absolute;
z-index: 10;
}
a.dbutton {
background: #d6d6d6;
border: 1px solid #e4e4e4;
border-bottom-color: #747474;
border-right-color: #747474;
color: #FFF;
float: left;
text-transform: uppercase;
text-decoration: none;
margin: 6px 4px 0 0;
}
a:hover.dbutton {
background: #BBB;
border: 1px solid #747474;
border-bottom-color: #e4e4e4;
border-right-color: #e4e4e4;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
}
a.dbutton span {
display: block;
padding: 0 5px;
color: #FFF;
text-transform: uppercase;
line-height: 18px;
font-size: 11px;
font-weight: bold;
}
a:hover.dbutton span {
color: #747474;
text-transform: uppercase;
line-height: 19px;
overflow: hidden;
}
#dialog a.dbutton {
float: right;
margin: 0 4px 0 0;
}
#dialog a:hover.dbutton {
margin: 0 4px 0 0;
}
#dialog a#close {
margin: 4px 5px 0 0;
}
#dialog a#close span {
height: 10px;
width: 10px;
text-align: center;
padding: 0 0 0 1px;
line-height: 10px;
font-size: 9px;
color: #666;
}
#dialog h1 {
font: bold 10px Arial;
color: #b5b5b5;
margin: 5px;
}
#dialog div {
margin: 5px;
padding: 12px 12px 9px 12px;
background: #e7f2d0;
}
#dialog div h1 {
font: bold 13px Trebuchet MS;
color: #1c1c1c;
margin: 0 0 5px 0;
}
#dialog h2 {
color: #505050;
font-size: 11px;
margin: 0 0 15px 0;
}
#dialog p {
color: #5a5a5a;
font-size: 10px;
}
#dialog #dbar {
font-size: 10px;
margin: 22px 0 5px 17px;
min-height: 20px;
line-height: 20px;
color: #5a5a5a;
}

/****************** INFO SCHERM ******************/

#info {
width: 205px;
padding: 50px 22px 5px 22px;
float: left;
position: relative;
}
#info h1 {
color: #FFF;
font-weight: bold;
font-size: 16px;
}
#info h2 {
color: #FFF;
font-weight: normal;
font-size: 14px;
line-height: 18px;
margin: 0 0 14px 0;
}
#info .white {
color: #FFF;
font-size: 10px;
line-height: 14px;
}
#info p {
font-size: 11px;
}
#info strong {
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
}
#info p a {
font-size: 11px;
color: #c1ff7f;
}
#info p a:hover {
color: #FFF;
text-decoration: none;
}
#more {
margin: 30px 0 0 0;
}
#more a {
background: url(../image/icons2.gif) top left no-repeat;
display: block;
width: 35px;
height: 34px;
float: left;
margin: 0;
}
a#i2 {
background-position: -35px 0;
}
a#i3 {
background-position: -70px 0;
}
a#i4 {
background-position: -105px 0;
}
a#i5 {
background-position: -140px 0;
}
a:hover#i1 {
background-position: 0 -34px;
}
a:hover#i2 {
background-position: -35px -34px;
}
a:hover#i3 {
background-position: -70px -34px;
}
a:hover#i4 {
background-position: -105px -34px;
}
a:hover#i5 {
background-position: -140px -34px;
}
#more a span {
display: none;
}

/****************** FOOTER ******************/

.footer {
background: url(../image/fbg.jpg) top left no-repeat #DDD;
float: left;
width: 980px;
min-height: 130px;
}
.noquote {
background-image: url(../image/fbg2.jpg);
}
.footer #flinks {
float: left;
width: 215px;
padding: 8px 0 0 25px;
}
.footer #flinks a {
font-size: 9px;
color: #c1ff7f;
text-decoration: none;
padding: 0 10px 0 0;
text-transform: lowercase;
}
.footer #flinks a:hover {
color: #FFF;
padding: 0 10px 0 0;
}
.footer #menu {
float: left;
list-style: none;
margin: 0 0 0 20px;
}
.footer #menu li {
float: left;
margin: 5px 5px 0 0;
padding: 0;
}
.footer #menu li a {
float: left;
cursor : pointer;
background: url(../image/catoffbg.png) top right no-repeat;
display: block;
height: 22px;
overflow: hidden;
margin: 0;
padding: 9px 5px 0 5px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold; 
color: #FFF;
}
.footer #menu li span {
background: url(../image/catoff.gif) center left no-repeat;
display: block;
text-transform: uppercase;
text-decoration: none;
font-weight: bold; 
color: #FFF;
font-size: 10px;
height: 12px;
line-height: 12px;
margin: 0;
padding: 0 0 0 10px;
}
.footer #menu li a.selected, .footer #menu li a:hover {
background: url(../image/catonbg.png) top right no-repeat;
}
.footer #menu li a.selected span {
background: url(../image/caton.gif) center left no-repeat;
}
.footer #menu li p {
color: #FFF;
padding: 7px 0 0 30px;
text-shadow: #666  0 1px 2px;
font-weight: bold;
}

/****************** LOGIN FORM ******************/

#loginform {
margin: 0 0 30px 0;
float: none;
clear: both;
}
#loginform h1 {
font-size: 18px;
color: #223a23;
}
#aanmeldform {
border-top: dotted 1px #494949;
margin: 50px 0 0 0;
padding: 2px 0 0 0;
}
#aanmeldform h1, #aanmeldform p, #aanmeldform em, #aanmeldform label {
color: #fbff9c;
}
#aanmeldform em {
font-size: 10px;
display: block;
margin: 10px 0 0 0;
}
#aanmeldform p {
margin: 5px 0 4px 0;
line-height: 12px;
}
#aanmeldform label {
font-size: 12px;
}
form label {
display: block;
margin: 6px 0 1px 0;
padding: 0;
font-size: 11px;
height: 14px;
color: #223a23;
}
form .input {
border: none;
background: url(../image/input.gif) no-repeat top left;
width: 172px;
padding: 0 0 0 3px;
height: 17px;
margin: 0;
}

/****************** FAVORITES ******************/

#favo_size
{
width: 0px;
overflow:hidden;
}
#favorites {
width: 170px;
}
#favorites h1 {
margin: 0 0 25px 17px;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
#favorites h2 {
margin: 0 0 0 17px;
padding: 17px 0 0 ;
font-size: 14px;
}
#favorites .fav  {
position: relative;
margin: 
}
#favorites .fav a {
padding: 5px 0 7px 17px;
display: block;
font-size: 11px;
}
#favorites .fav a:hover, #favorites .selected {
background: #FFF;
}
#favorites p.selected a {
color: #9aba60;
}
#favorites p.selected a strong {
color: #3c3c3c;
}
#favorites .favlink {
padding: 0 0 0 17px;
display: block;
color: #51712f;
text-decoration: none;
font-size: 12px;
}
#favorites .favlink strong {
font-weight: bold;
color: #51712f;
}
#favorites .fav .wis {
background: url(../image/del.gif) top left no-repeat;
display: block;
width: 10px;
height: 10px;
padding:0;
position: absolute;
top: 5px;
right: 5px;
}
#favorites .fav a.wis:hover {
top: 6px;
background: url(../image/del.gif) top left no-repeat;
}
#favorites .fav a.wis span, #favo_sluit span {
display: none;
}
a#favo_sluit {
background: url(../image/sluit.gif) top left no-repeat;
display: none;
width: 14px;
height: 14px;
padding:0;
position: absolute;
top: 11px;
right: 11px;
}
a:hover#favo_sluit {
top: 12px;
}

/****************** FOOTER KOLOMMEN ******************/

#bottom {
position: relative;
}
#left {
padding: 20px 0 0 49px;
width: 200px;
float: left;
}
#left h1 {
font-weight: bold;
font-size: 18px;
}
#left h2 {
font-weight: bold;
font-size: 12px;
color: #9aba60;
}
#left img {
border: 1px solid #FFF;
width: 160px;
margin: 20px 0;
}
#right {
padding: 20px 0 0 46px;
width: 685px;
float: left;
}
#right h3 {
font-weight: bold;
font-size: 12px;
margin: 0 0 16px 0;
}
#right p {
font-size: 11px;
line-height: 16px;
width: 500px;
margin: 0 0 16px 0;
}

/****************** SLIDESHOW ******************/

#slideshow_size
{
width: 0px;
overflow:hidden;
}
#slideshow {
width: 580px; 
overflow:hidden;
}
#scroll {
margin: 36px 10px 20px 37px;
padding: 0 10px 10px 0;
height: 425px;
overflow: auto;
scrollbar-base-color:#d4e5b0;
scrollbar-face-color:#8ab893;
scrollbar-arrow-color:#d4e5b0;
scrollbar-track-color:#d4e5b0;
scrollbar-shadow-color:#819e7e;
scrollbar-highlight-color:#adc9ab;
scrollbar-3dlight-color:#c5ddae;
scrollbar-darkshadow-color:#4a7854;
}

#slideshow h1 {
font-size: 18px;
font-weight: bold;
color: #306f64;
margin: 0 0 5px 0;
}
#slideshow h2 {
font-size: 14px;
color: #306f64;
margin: 0 0 25px 0;
}
#slideshow  strong {
font-weight: bold;
color: #1d3e44;
}
#slideshow  p {
color: #1d3e44;
}

#slideshow #show {
float: left;
margin: 0 10px 10px 0;
border: solid 1px #FFF;
max-width: 400px;
height: 270px;
overflow: hidden;
float:left;
}
#slideshow #slidelist {
list-style: none;
padding: ;
width: 66px;
overflow: hidden;
float: right;
margin: 0 0 0 20px;
padding: 12px 3px;
background: #f1f1f3;
position: relative;
border: solid 1px #deddde;
}
#slideshow #slidelist li, #slideshow #slidelist li a {
margin: 0;
padding: 0;
display: block;
}
#slideshow #slidelist span img {
width: 60px;
margin: 0 0 3px 0;
padding: 2px;
border: solid 1px #deddde;
background: #FFF;
cursor : pointer;
}
#slideshow #slidelist a:hover img {
border: solid 3px #f8dba3;
padding: 0;
}
#slideshow #slidelist a#up, #slideshow #slidelist a#down {
background: url(../image/up.gif) top center no-repeat;
width: 72px;
height: 12px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#slideshow #slidelist a#down {
background: url(../image/down.gif) top center no-repeat;
bottom: 0;
top: auto;
}
#slideshow #slidelist a:hover#up, #slideshow #slidelist a:hover#down {
background-color: #FFF;
background-position: 1px 1px;
}
#slideshow .slideshow, #slideshow_sluit span {
display: none;
}

a#slideshow_sluit {
background: url(../image/sluit.gif) top left no-repeat;
display: none;
width: 14px;
height: 14px;
padding:0;
position: absolute;
top: 11px;
right: 11px;
}
a:hover#slideshow_sluit {
top: 12px;
}

a.collapse, a.uncollapse {
width: 80px;
height: 12px;
display: block;
border: solid 1px #deddde;
background: url(../image/down.gif) top center repeat-x;
position: absolute;
top: 20px;
right: 20px;
}
a.uncollapse {
background: url(../image/up.gif) top center repeat-x ;
}
a.collapse span, a.uncollapse span{
display: none;
}