/* {
	margin: 0px;
	padding: 0px;
} */
html { height: 100%; }
body {
	margin: 0px;
	height: 100%;
	text-align: center;
	font: 12px arial;
	background: top repeat-x url(img/bg.png) white;
}
body p, td, div { font-size: 12px;} 
h1 { font-size: 140%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }
img { border: 0; }
a { color: #0087c8; text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }

a.titel1 { 
	font-size: 140%;
	font-weight: normal 
}

ul, ol {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
li {
	display:inline;
	position:relative;
}
td { vertical-align: top; }
th { font-size: 120%;}


.footer {
	background: url(img/bg-nav.png);
	position: fixed;
	*position: relative;
	margin-top: 35px;
	z-index: 50;
	bottom: 0;
	left: 0px;
	width: 100%;
	font-size: 10px;
	text-align: center;
}
.footer p {
	margin: 5px;
}
.main {
	width: 1000px;
	margin: 0 auto 50px;
	
}
#logo {
	height: 68px;
}
.top {
	background-image: url(img/bg3.png);
	position: relative;
	z-index: 50;
}
/****** NAV ******/
#nav, #nav * {
	margin: 0px;
	padding: 0px;
}

#nav {
	width: 600px;
	
	margin-left: auto;
	margin-right: auto;
	list-style:none;
	height:27px;
	text-align: left;

}	
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
	float: left;
	display:inline; 
	
	z-index:500; 

}
/* this is the parent menu */
#nav li a {
	display:block; 
	text-decoration:none; 
	color:#fff; 
}
#nav li a:hover {
	color:#fff;
}
/* submenu, it's hidden by default */
#nav ul {
	position:absolute; 
	z-index: 495;
	left:0; top: 25;
	display:none; 
	background: url(img/bg-submenu.png);
	min-width: 175px;
}
#nav ul li {
	clear: both;
	display: block;
	width:100%;
	margin:0px;
}
/* display block will make the link fill the whole area of LI */
#nav ul a {
	display:block;  
	padding:5px;
}
#nav ul a {
	height: 15px;
}
#nav ul a:hover {
	color: #0087c8;
	background: url(img/bg-nav.png);
	text-decoration:underline;	
}
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}

/* *****************************
		content page
******************************* */
.contentholder {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	width: 841px;
}
.contentholder ol li {
	margin: 0px 5px;
}
.contentholder .content {
	min-height: 400px;
	background: repeat-y center url(img/bg-content_02.png);
	padding: 10px 20px;
}
.contentholder .titel1 { 
	font-size: 140%;
	font-weight: bold;
}

.content {
	overflow: hidden;
	text-align: left;
	position: relative;
}
.content div,
.content p {
	text-align: justify;
}
.content .column1 {
	clear: left;
	width:45%; 
	float:left;
	margin-left:4%;
	
}
.content .column2 {
	width:45%; 
	float:right;
	margin-right:4%;
}
.content .column2 dd,
.content .column1 dd {
	width:55%;
	float:left;
	margin-bottom: 5px;
	border-bottom: 1px solid black;
}
.content .column2 dt,
.content .column1 dt {
	width:30%;
	clear: left;
	float:left;
	margin-bottom: 5px;
}
.block .boxcontent dl dd *,
.block .boxcontent dl dd * * { margin: 0px; padding:0px; }
.block dd {	margin-left: 15%; }

#cover {
	width: 300px;
	float: right;
	margin-right: 50px;
	margin-top: 50px;
}
.archief {
	position: relative;
}
.archief .anim {
	position: absolute;
}
.archief .thumb {
	display: inline;
	text-align: center;
	float: left;
	width: 125px;
	height: 150px;
	margin-bottom: 10px;
}
.archief .thumb img {
	display:block;
	margin-left: auto; 
	margin-right: auto;
}
.archief .col0 {
	clear: left;
}

label.error {
	margin-left: 15px;
	color: red;
	vertical-align: top;
}

.blocks {
	clear:both;
	padding-left: 2px;
	margin: 15px 0px;	
	overflow:hidden;
}
.block {
	position: relative;
	float: left;
	width: 333px;
	
}

.block * { margin: 0px; padding:0px; }
.block h1 {	
	padding: 20px 22px 5px 22px;
	color: white;
	text-align: left;
	text-decoration: none;


}
.block p,
.block dl {
	margin: 0px;
	padding: 0px 22px;
	text-align: justify;
}
.block p img {
	width: 300px;
	margin-left: -6px;
}
.boxcontent .imgWrapper {
	position: relative;
	left:-6px;
	right:6px;
	top: -1;
	overflow:hidden;
	width:300px;height:200px;
}
.block .imgWrapper img {
	margin-left: 0;
	position:absolute;
}
.block .imgWrapper img.hoog {
	top:-30%;
}
.block a.leesmeer {
	position:absolute;
	background-position: center;
	bottom: 20px;
	right: 0px;
	margin-right: 23px;
	text-align: left;
}
#blockholder { 
	display:block;
	position: relative;
}
#blockholder .block {
	clear: none;
}

.block .boxheader {	
	overflow:hidden;
	height : 44px; 
}
.block .boxheader h1 {
	white-space: nowrap;
	text-overflow:ellipse;
}

.block .boxheader a { text-decoration: none; }
.block .boxcontent { min-height: 175px; }
#blockholder .block .boxcontent { height: 330px; overflow: hidden}
.block .boxcontent p img { width: 300px; } /*height: 200px;*/

	
.blauw h1  { background:url(img/box-blauw_01.png); }
.blauw .boxcontent,
.blauw a.leesmeer { background-image: url(img/box-blauw_03.png); }
.blauw .boxbottom { height: 19px; width:333px; background-image: url(img/box-blauw_05.png); }

.rood h1  { background:url(img/box-rood_01.png); }
.rood .boxcontent,
.rood a.leesmeer { background-image: url(img/box-rood_03.png); }
.rood .boxbottom { height: 19px; width:333px; background-image: url(img/box-rood_05.png); }

.cyaan h1  { background:url(img/box-cyaan_01.png); }
.cyaan .boxcontent,
.cyaan a.leesmeer { background-image:url(img/box-cyaan_03.png); }
.cyaan .boxbottom { height: 19px; width:333px; background-image: url(img/box-cyaan_05.png); }

.geel h1  { background:url(img/box-geel_01.png); }
.geel .boxcontent,
.geel a.leesmeer { background-image: url(img/box-geel_03.png); }
.geel .boxbottom { height: 19px; width:333px; background-image: url(img/box-geel_05.png); }

.groen h1  { background:url(img/box-groen_01.png); }
.groen .boxcontent,
.groen a.leesmeer { background-image:url(img/box-groen_03.png); }
.groen .boxbottom { height: 19px; width:333px; background-image: url(img/box-groen_05.png); }

.paars h1  { background:url(img/box-paars_01.png); }	
.paars .boxcontent,
.paars a.leesmeer { background-image:url(img/box-paars_03.png); }
.paars .boxbottom { height: 19px; width:333px; background-image: url(img/box-paars_05.png); }

.roze h1  { background:url(img/box-roze_01.png); }	
.roze .boxcontent,
.roze a.leesmeer { background-image:url(img/box-roze_03.png); }
.roze .boxbottom { height: 19px; width:333px; background-image:url(img/box-roze_05.png); }

/* *****************************
		home page
******************************* */
#intro {
	float: left;
	color: white;
	margin-left: 15px;
	width: 360px;
	height: 374px;
	font-size: 16px;
	text-align: justify;
	background: url(img/box-1.png);
}
#intro * { color: white; font-weight: normal; font-size: 14px; }
#intro p { margin: 25px;  text-align: justify;}
#intro p a { font-weight: bold;  }
#intro p p { margin: 0px; }


.edities {
	text-align: center;
	float: left;
	margin-left: 65px;
	position: relative;
	z-index: 1;
	background: url(img/box-2.png);
	width: 454px;
	height: 354px;
}
.edities .thumbs {
	top: 15px;
	left:0px;
}
.edities .thumbs .thumb {
	position: absolute;
	z-index: 2;
}
.edities .thumbs div.thumb.TumbOnTop {
	z-index: 1000;
}
.edities .menu {
	margin: 5px 15px;
	position: absolute;
	bottom: 3px;
	left: 0px;
}
.blocks { position: relative; }
.blocks .vorige,
.blocks .volgende {
	position:absolute;
	top: 100px;
	z-index: 101;
}
.blocks .vorige { left: 20px; }
.blocks .volgende { right: 20px; }
	

/* *****************************
		evenementen page
******************************* */
table.evenementen .boxcontent {
	padding: 2px;
}
table.evenementen .holder {
	display:block;
	position:absolute;
}
table.evenementen .block {
	top: -130px;
	left: 0px;
	z-index: 10;
	position:relative;
	display: none;
}
table.evenementen dd { margin-bottom: 3px; }
table.evenementen th { text-align: left; }
table.evenementen tr:hover td {
	background: url(img/bg-nav.png);
}
table.evenementen tr:hover td.holder {
	background: none;
}
table.evenementen tr:hover .block {
	display: block;
}





.dropdown {
	position: relative;
}
.dropdown ul {
	list-style:none;
	position: absolute;
	text-align: left;
	background-color: silver;
}
.dropdown li { 
	text-align: left; 
	float: left;
	display:inline; 
	z-index:500; 

}
/* submenu, it's hidden by default */
.dropdown ul {
	position:absolute; 
	z-index: 495;
	left:0; top: 25;
	display:none; 
}
.dropdown li {
	clear: both;
	display: block;
	width:100%;
	margin:0px;
}
/* display block will make the link fill the whole area of LI */
.dropdown ul a {
	display:block;  

}