/* --------------------------------------------------------------------------- */
/* Default stylesheet */
/* --------------------------------------------------------------------------- */

html, body {height: 100%;}
body { margin: 0; padding: 0; font: normal normal 100%/140% verdana; color: #000;}
h1 { display: none; }
a {color: #CE2C29; text-decoration: none;}
a:hover {color: #CE2C29; text-decoration: underline;}
p { margin: 0; padding: 0; }
img { border: 0; }
label, select, textarea { }
form, input  { }
fieldset  { margin: 0; border: 0; padding: 0; }
/* the pre tag often needs to be wrapped. de code below wil do this. Also works in Safari. */
pre {
  white-space: pre; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE 5.5+ */
}
hr {height: 1px; border-top: 1px solid #CE2C29; margin: 10px 20px 10px 20px; padding: 0px; text-align: left;}
.clr { clear: both; }
h1 {display: none;}


/* HEADER layout */
#header { margin: 0; padding: 0; width: 996px; height: 146px; overflow: hidden; background: url(../gfx/bg_header.gif) no-repeat -1px 0px; border: 1px solid #fff; border-bottom: 0px;}
#logo {float: left; width: 290px; }
#logo a {display: block; margin: 44px 0px 0px 30px;}
#sitenav { margin: 0; padding: 0; float: left; width: 198px; text-align: right;}
#sitenav ul {margin:0px; padding: 0px 0px 0px 0px; list-style: none; color: #fff; font: normal 80% arial; letter-spacing: 2;}
html>body #sitenav ul {font: bold 60% arial; text-transform: uppercase;}
#sitenav li { height: 20px; line-height: 20px;}
html>body #sitenav li {height: 21px;line-height: 21px;}
#sitenav li a {font-size: 13px; color: #fff; text-decoration: none; padding: 0px 2px 0px 0px;}
html>body #sitenav li a {padding: 0px 10px 0px 0px;}
#sitenav li a:hover {color: #000; text-decoration: none;}
#sitenav span.menuPijl {background: url(../gfx/menu_pijl.gif) no-repeat -1px 0px; height: 20px; width: 20px; display: block; float: right; margin-top: 0px; cursor: hand;}
#sitenav span.menuPijl:hover {background: url(../gfx/menu_pijl_hover.gif) no-repeat -1px 0px;}
#sitenav a.home {background: url(../gfx/icon_home.gif) no-repeat 0px 0px; width: 21px; height: 20px; display: block; float: right; border-left: 1px solid white;}
#sitenav a.home:hover {background: #fff url(../gfx/icon_home_hover.gif) no-repeat 0px 0px;}
#sitenav a.letterkleiner {background: url(../gfx/icon_letterkleiner.gif) no-repeat 0px 0px; width: 21px; height: 20px; display: block; float: right; border-right: 1px solid white; border-left: 1px solid white;}
#sitenav a.letterkleiner:hover {background: #fff url(../gfx/icon_letterkleiner_hover.gif) no-repeat 0px 0px; }
#sitenav a.lettergroter {background: url(../gfx/icon_lettergroter.gif) no-repeat 0px 0px; width: 21px; height: 20px; display: block; float: right; border-right: 1px solid white;}
#sitenav a.lettergroter:hover {background: #fff url(../gfx/icon_lettergroter_hover.gif) no-repeat 0px 0px;}
#sitenav a.sitemap {background: url(../gfx/icon_sitemap.gif) no-repeat 1px 0px; width: 21px; height: 20px; display: block; float: right; border-right: 1px solid white;}
#sitenav a.sitemap:hover {background: #fff url(../gfx/icon_sitemap_hover.gif) no-repeat 1px 0px;}
#sitenav a.search {background: url(../gfx/icon_search.gif) no-repeat 0px 0px; width: 21px; height: 20px; display: block; float: right; }
#sitenav a.search:hover {background: #fff url(../gfx/icon_search_hover.gif) no-repeat 0px 0px;}
#sfeerBeeld { background-repeat: no-repeat; float: left;}
#sfeerBeeld div { display: block; width: 505px; height: 146px; overflow:hidden; }
#sfeerBeeld div img { visibility: hidden; }

/* CONTENT layout */
#siteContainer { margin: 0; padding: 0px 0px 20px 0px; width: 996px; background: #fff;}

.article { margin: 0px 20px 0px 0px; padding: 0; float: left; /*width: 65%;*/}
.article h2 { margin: 0px; padding: 0px; font: bold 100% Verdana; letter-spacing: 1px;}
.article h3 { margin: 0px; padding: 0px; font: bold 90% Verdana;}
.article h3 a{ text-decoration: none; color: #000; }
.article h3 a:hover { text-decoration: underline; color: #CE2C29; }
.article h4 { margin: 0px; padding: 0px; font: bold 100% Verdana;}
.article .summary { font: normal 80%/140% Verdana;  margin-bottom: 15px; color: #000;}
.article .bodytext { font: normal 80%/140% Verdana; }
.article .bodytext img { float: right; margin-left: 10px;}

.imgRight {display: block; float: right; margin-right: 10px; /*width: 150px;*/}

.newsItem {margin: 0px 20px 0px 25px; padding: 0;}
.newsItem h3{margin: 0px; padding: 0px; font: bold 80% Arial;}
.newsItem .summary {font: normal 80%/140% Verdana;}
.newsItem .date {font-size: 60%;}
.newsItem .bodytext { font: normal 70%/140% Verdana; margin-top: 15px;}


/* --------------------------------------------------------------------------- */
/* homepage stylesheets */
/* --------------------------------------------------------------------------- */
body {background: url('../gfx/body_bg.gif') top center repeat-y; height: 100%; min-height: 100%}
#container {width: 996px; margin: 0 auto; background: url('../gfx/bg_home.gif') no-repeat scroll 0 0 transparent; height:100%;}
#homepageBanners {float: left; padding: 10px 0 0 5px;}
#homepageBanners .banner_one { padding-bottom: 10px; width: 200px; height: 145px; background: url('../gfx/HKZ - ISO 9001 NL kleur.jpg') 0 0 no-repeat; }
#homepageBanners .banner_two { width: 200px; height: 85px; background: url('../gfx/actiz-ledenbanner-zonder-kader_300px.gif') 0 0 no-repeat; }
#homePage #siteContainer {background: url(../gfx/bg_homecontent.jpg) no-repeat 0px 0px;}
#homePage .leftContent {float: left; display: block; width: 330px;}
#homePage .leftContent .article { margin: 30px 20px 0px 25px; padding: 0; }
#homePage h3 {margin: 0px; padding: 0px; font: normal 90% Arial;}
#homePage h3.promoLink {background: url(../gfx/promopijltjes.gif) no-repeat 0px 5px; padding-left: 25px; float:right;}
#homePage h3.promoLink a:hover {text-decoration: underline;}

#homePage .rightContent {float: left; display: block;}
#homePage .rightContent .article { margin: 30px 0px 0px 25px; padding: 0; width:475px;}

#homePage .content {float: left; display: block;}
#homePage .content .article { margin: 30px 0px 0px 25px; padding: 0; width:750px;}

#locations {width: 997px;}
#homePage #locations {width: 995px;}
.titleOne {background: url(../gfx/location1_title.gif) no-repeat 0px 0px; /*width: 248px;*/ height: 26px; display: block;}
.titleOne:hover {text-decoration: none; background: url(../gfx/location1_title_hover.gif) no-repeat 0px 0px;}
.titleTwo {background: url(../gfx/location2_title.gif) no-repeat 0px 0px; /*width: 249px;*/ height: 26px; display: block;}
.titleTwo:hover {text-decoration: none; background: url(../gfx/location2_title_hover.gif) no-repeat 0px 0px;}
.titleThree {background: url(../gfx/location3_title.gif) no-repeat 0px 0px; /*width: 249px;*/ height: 26px; display: block;}
.titleThree:hover {text-decoration: none; background: url(../gfx/location3_title_hover.gif) no-repeat 0px 0px;}
.titleFour {background: url(../gfx/location4_title.gif) no-repeat 0px 0px; /*width: 248px;*/ height: 26px; display: block;}
.titleFour:hover {text-decoration: none; background: url(../gfx/location4_title_hover.gif) no-repeat 0px 0px;}
.locationOne {background: #009F67; width: 248px; border-right: 1px solid #fff; padding-bottom: 10px;}
.locationTwo {background: #CE2C29; width: 249px; border-right: 1px solid #fff; padding-bottom: 10px;}
.locationThree {background: #363489; width: 249px; border-right: 1px solid #fff; padding-bottom: 10px;}
.locationFour {background: #CC99FF; width: 248px; padding-bottom: 10px;}

#locations  h4 {margin: 0px; padding: 0px 0px 0px 20px; color: #fff; font: normal 70%/140% Verdana; height: 20px; line-height: 20px;}
#locations .summary {color: #fff; font: normal 80%/140% Verdana; margin: 10px 20px 0px 20px;}
#locations .bodytext {color: #fff; font: normal 70%/140% Verdana; margin: 10px 20px 0px 20px;}


/* --------------------------------------------------------------------------- */
/* infopage stylesheets */
/* --------------------------------------------------------------------------- */
body#infoPage {background: #EDEDED url(../gfx/bg_info.gif) repeat-y 0px -135px;}
#infoPage #locations {width: 997px; border-top: 1px solid #fff; overflow: hidden; height: 27px;}
#infoPage .titleOne {float: left; width: 248px; height: 26px; }
#infoPage .titleTwo {float: left; width: 249px;height: 26px; }
#infoPage .titleThree {float: left; width: 249px; height: 26px;}
#infoPage .titleFour {float: left; width: 248px; height: 26px;}

#infoPage #siteContainer {padding: 0px; width: 994px; background: #AEAEAE url(../gfx/bg_submenu.gif) repeat-y 0px 0px; }
html>body#infoPage #siteContainer {border: 1px solid white; border-left: 0px; border-top: 0px; border-right: 0px;}
#infoPage .leftContent {float: left; display: block; width: 329px;  margin: 0px; padding: 0px;}
#submenu {margin: 25px 0px 20px 0px; padding: 0px; list-style: none; }
#submenu li a {color: #fff; padding: 0px 0px 0px 20px; font: bold 80% Verdana; height: 22px; line-height: 22px;}
#submenu li a:hover {background-color: #EDEDED; color: #CE2C29; width: 327px; display: block; text-decoration: none; height: 22px; line-height: 22px;}
#submenu li a.active {background-color: #fff; color: #000; width: 327px; display: block; text-decoration: none; height: 22px; line-height: 22px;}
#submenu li ul {margin: 0px 0px 0px 0px; list-style: none;}
html>body #submenu li ul { margin: 0px 0px 0px -39px; }
#submenu li ul li a {padding: 0px 0px 0px 35px; height: 22px; line-height: 22px;}
html>body #submenu li ul li ul { margin: 0px 0px 0px -40px; }
#submenu li ul li ul li a {padding: 0px 0px 0px 50px; height: 22px; line-height: 22px;}
#submenu li.closed ul { display: none; }
#submenu li.open ul { display: block; }

#infoPage .rightContent { float: left; display: block; background: #fff; margin: 25px 0px 0px 0px; width:665px; height: 425px;}
html>body#infoPage .rightContent {height: auto; min-height: 425px;}
#infoPage .rightContent .article { margin: 0px 20px 0px 10px; padding: 0; }
#infoPage .rightContent table { font-size: 100%; }

.breadCrum {margin: 0px 20px 20px 20px; font: normal 70% Verdana; height: 24px; line-height: 24px; border-bottom: 1px solid #7F7F7F; color: #000;}
.footer {margin: 30px 20px 0px 20px; font: normal 60% Verdana; height: 30px; line-height: 30px; border-top: 1px solid #7F7F7F; color: #000; padding: 3px 0px 0px 0px;}
.printheader {margin: -17px 20px 0px 20px;}
.print {float: right; display: block; width: 17px; height: 14px; background: url(../gfx/icon_print.gif) no-repeat 0px 0px;}
.print:hover {background: url(../gfx/icon_print_hover.gif) no-repeat 0px 0px;}
.top {float: right; display: block; width: 15px; height: 14px; background: url(../gfx/icon_top.gif) no-repeat 0px 0px;}
.top:hover { background: url(../gfx/icon_top_hover.gif) no-repeat 0px 0px; }

/* sitemap */
ul.sitemap {width: 80%; margin: 0px 20px 0px 20px; padding:0px; list-style:none;}
ul.sitemap li {margin: 0px 0px 1px 0px; background-color: #EDEDED; /*height: 24px; line-height: 24px;*/}
ul.sitemap li a {font: bold 80% Arial; padding-left: 10px;}
ul.sitemap li ul {margin: 0px 0px 0px 0px; padding:10px 0px 10px 0px; list-style:none; background-color: #fff;}
ul.sitemap li ul li {margin: 0px 0px 0px 0px; padding-left: 10px; border: 0px; background-color: #fff; /*height: 20px; line-height: 20px;*/}
ul.sitemap li ul li a {color: #000; font: normal 70% Verdana;}
ul.sitemap li ul li ul {padding:0px;}

/* form segments */
.generalForm { margin: 0px 0px 0px 20px; padding: 0; width: 95%; font-size: 70%; clear: both; }
.generalForm h5 { text-transform: uppercase; margin: 15px 0px 10px 0px; padding:0px; font-size: 90%; border-bottom: 1px solid #CE2C29; width: 80%;}
.generalForm hr {height: 1px; border-top: 1px solid #CE2C29; margin: 5px 0px 5px 0px; width: 80%; text-align: left;}
.generalForm form fieldset {  margin: 0px; }
.generalForm form input, .generalForm form select{ width: 100%;  border: 1px solid #AEAEAE; margin-right: 5px; font-family: verdana; font-size: 100%; height: 18px; padding-left: 5px; color: #000;}
html>body .generalForm form input, .generalForm form select {height: 16px; }
.generalForm form textarea { width: 80%; border: 1px solid #AEAEAE; font-family: verdana; font-size: 100%; padding-left: 5px; color: #000;}
.generalForm form select option { width: 100%; }
.generalForm form .button { float: left; }
.generalForm form .button input { width: auto; text-align: center; background-color: #7F7F7F; border: 0px; color: #fff; cursor: hand; /*margin-top: 10px;*/}

.labelField { float: left; width: 30%; }
.labelField.fullSize { display: block; float: none; width: 80%; }
.generalForm form label { }
.required { background: url(../gfx/required.gif) no-repeat right 4px; }
.fullField { float: left; width: 50%; }
.oneThirdField { float: left; width: 20%; }
.twoThirdsField { float: left; width: 30%; }
.halfField { float: left; width: 25%; }
.dayField  { float: left; width: 15%; }
.monthField  { float: left; width: 15%; }
.yearField  { float: left; width: 20%; }

.noStyle { text-align: left; border:  0px;}
.selectors input, .selectors label { display: inline; width: auto !important; border:  0px !important; }
input[type=radio] { margin: 0; padding: 0; width: auto; height: auto; line-height: auto;}
input[type=checkbox] { margin: 0; padding: 0; width: auto; height: auto; line-height: auto;}

.generalForm form input.netNum { width: 20%; }

.generalForm .clr {clear: both; display: block; margin: 0; padding: 0; width: 100%; height: 1px; font-size: 1px; line-height: 1px; }

/* searchresult page */
.pageNav {margin: 0px 20px 0px 20px; padding: 0px 0px 0px 6px; font-size: 70%; background: #EDEDED; }
ul#searchResults {list-style-type: none; margin: 10px 20px 0px 20px; padding: 0px; font-size: 70%;}
ul#searchResults li {line-height: 140%; margin-bottom: 5px; padding: 0px 0px 5px 0px; border-bottom: 1px solid #EDEDED;}

/* --------------------------------------------------------------------------- */
/* Sterrenlanden */
/* --------------------------------------------------------------------------- */
#infoPage.sterrenlanden #siteContainer {padding: 0px; width: 994px; background: #009966 url(../gfx/bg_submenu_sterrenlanden.gif) repeat-y 0px 0px; }
#infoPage.sterrenlanden .titleOne { float: left; width: 248px; height: 27px; background: url(../gfx/location1_title_active.gif) no-repeat 0px 0px;}
#infoPage.sterrenlanden #sfeerBeeld div img { visibility: visible; }

/* --------------------------------------------------------------------------- */
/* Thureborgh */
/* --------------------------------------------------------------------------- */
#infoPage.thureborgh #siteContainer {padding: 0px; width: 994px; background: #CE2C29 url(../gfx/bg_submenu_thureborgh.gif) repeat-y 0px 0px; }
#infoPage.thureborgh .titleTwo { float: left; width: 249px;height: 27px; background: url(../gfx/location2_title_active.gif) no-repeat 0px 0px;}
#infoPage.thureborgh #sfeerBeeld div img { visibility: visible; }

/* --------------------------------------------------------------------------- */
/* Vreedonk */
/* --------------------------------------------------------------------------- */
#infoPage.vreedonk #siteContainer {padding: 0px; width: 994px; background: #363489 url(../gfx/bg_submenu_vreedonk.gif) repeat-y 0px 0px; }
#infoPage.vreedonk .titleThree { float: left; width: 249px; height: 27px; background: url(../gfx/location3_title_active.gif) no-repeat 0px 0px;}
#infoPage.vreedonk #sfeerBeeld div img { visibility: visible; }

/* --------------------------------------------------------------------------- */
/* Patio */
/* --------------------------------------------------------------------------- */
#infoPage.patio #siteContainer {padding: 0px; width: 994px; background: #CC99FF url(../gfx/bg_submenu_patio.gif) repeat-y 0px 0px; }
#infoPage.patio .titleFour { float: left; width: 248px; height: 27px; background: url(../gfx/location4_title_active.gif) no-repeat 0px 0px;}
#infoPage.patio #sfeerBeeld div img { visibility: visible; }