/* = = = RESETTING BROWSER DEFAULTS - based upon http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ = = = */

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 18px;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

em {
	font-style: italic;
}

/* = = = SITE DEFAULTS = = = */

html {
	overflow-y: scroll;	/* toont in FF altijd een scrollbar zodat gecentreerde site niet steeds verspringt. CSS3 */
}

body, html {
	height: 100%;
}

body, p, td, h1, h2, h3, h4, h5, h6, input, textarea, select {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}

body {font-size: 0.8em;}
	.home {background: #ffffff url(../images/bg_home.jpg) no-repeat fixed center top;}
	.prog {background: #ffffff url(../images/bg_prog.jpg) no-repeat fixed center top;}
	.event {background: #ffffff url(../images/bg_event.jpg) no-repeat fixed center top;}
	.makers {background: #ffffff url(../images/bg_makers.jpg) no-repeat fixed center top;}
	.maker {background: #ffffff url(../images/bg_maker.jpg) no-repeat fixed center top;}
	.timet {background: #ffffff url(../images/bg_timet.jpg) no-repeat fixed center top;}
	.nws {background: #ffffff url(../images/bg_nws.jpg) no-repeat fixed center top;}
	.alg {background: #ffffff url(../images/bg_alg.jpg) no-repeat fixed center top;}

h1, h2, h3 {
	font-family: "Arial Black", Arial;
	clear: both;
	color: #E2007A;
}

h1, h2 {
	font-size: 1.3em;
	padding: 6px 0;
	} 
	
h3 {
	font-size: 1.1em;
	padding: 6px 0 2px;
}
	h3.form {
		padding-top: 14px;
	}
h4 {
	font-size: 1.1em;
	font-weight: bold;
	padding-top: 2px;
}

a {
	color: #E2007A;
	text-decoration: underline;
}
a:hover, a:focus, a:active {
	color: #000;
}

a img, :link img, :visited img {
	border: 0;
}

a.meer {
	float: right;
	margin-bottom: 6px;
}

strong, b{
	font-weight: bold;
}

.alignLeft {
	float: left;
}
.alignRight {
	float: right;
}
.alignCenter {
	margin: 0 auto;
}
img.alignLeft {
	margin: 4px 15px 15px 0;
}
img.alignRight {
	margin: 4px 0 15px 15px;
}
div.alignLeft {
	margin: 4px 15px 0 0;
}

.offScreen {
	position: absolute;
	left: -9999px;
}


/* = = = = = = = de site = = = = = = = */
#container {
	position: relative;   /* #footer wordt t.o.v. deze div gepositioneerd */
	padding: 0;
	margin: 0 auto;
	min-height: 100%;
}

#top {					/* deze div omvat alles boven de footer */
   margin: 0;
   padding: 0 0 94px;   /* bottompadding minstens de totale hoogte van de footer */
}
.site {
   width: 700px;   		/* breedte van de site wordt hier bepaald */
   margin: 0 auto;
   overflow: hidden;
}


/* = = = siteTop = = = */
#siteTop {
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	height: 325px;
	background: transparent url(../images/header.png) no-repeat center center;
}
	
/* = = = header = = = */
#menus {
	float: left;
	clear: both;
	width: 100%;
	height: 77px;
	margin: 0 0 9px;
}
	#extraMenu {
		float: left;
		width: 100%;
		height: 35px;
		margin-bottom: 7px;
	}
	
		ul#home {float: left; }
			li.home a,
			li.homeOn a {
				display: block;
				width: 157px;
				height: 35px; 
				margin: 0;
				padding: 0;
				background: url("../images/b_home.gif") 0 0 no-repeat;
			}
			li.homeOn a,
			li.home a:hover {background: url("../images/b_home.gif") 0 -35px no-repeat;}
			
			#extra {
			 width: 354px;
			 height: 35px;
			 margin: 0 0 0 164px; 
			 padding: 0;
			 background-color: #fff;
			 position: relative;
			}
				#extra li {margin: 0; padding: 0; position: absolute; top: 0;}
				#extra li, #extra a {height: 35px; display: block;}
					#archief {left: 0; width: 107px;}
					#mijnAg {left: 108px; width: 143px;}
					#galerij {left: 252px; width: 104px;}
					#taal {left: 365px; width: 29px;}
					#socMedia {left: 398px; width: 125px;}
						#taal img {margin: 4px 0 0;}
						#socMedia img {margin: 2px 0 0;}


	#hoofdMenu {
		float: left;
		width: 100%;
		height: 35px;
		margin: 0;
		background: url(../images/b_hoofdmenu.gif);
		position: relative;
	}
	
		ul { 
		   margin: 0; 
		   padding: 0; 
		   list-style-type: none; 
		} 
		
		   ul#mainNav li { 
			  position: relative; 
			  float: left; 
			  margin: 0; 
			  padding: 0;
		   }  
		   
		   #mainNav li a:hover {
		   		color: #fff;
		   }
		   #mainNav li.active a {
		   		color: #fff;
				background-color: #e2007a;
		   }
		   #mainNav li.active li.active {
		   		background-color: #e2007a;
		   }
			
			  #mainNav li a { 
				 display: block; 
				 font-size: 1em;
				 font-weight: bold;
				 text-transform: uppercase;
				 text-decoration: none;
				 padding: 2px 0 3px;
			  } 
			
			  #mainNav li ul { 
				 position: absolute; 
				 display: none; 
				 clear: both; 
				 background-color: #dfdfdf;
				 margin-top: -3px;
			  } 
			   
			  #mainNav li:hover ul, #mainNav li.jsHover ul { 
				 display: block;
				 margin-left: 0;
			  } 
			   
				 #mainNav li li { 
					float: none; 
					background-color: #fff;
					padding: 0;
				 }
				 
				 #mainNav li li a,
				 #mainNav li.active li a {
				 	font-size: 0.85em;
					font-weight: bold;
					color: #000;
					text-transform: uppercase;
					text-decoration: none;
					padding-bottom: 2px;
					padding-left: 10px;
					width: 140px;
				 }
				 #mainNav li li:hover,
				 #mainNav li.active li:hover {
				 	background-color: #e2007a;
				 }
				 #mainNav li li a:hover,
				 #mainNav li.active li a:hover {
				 	color: #000;
				 }

/* = = = siteContent = = = */
#siteContent {
	float: left;
	clear: both;
	padding-bottom: 54px;
	width: 100%;
}
	.bgWit {background-color: #fff;}

		#content {
			width: 675px; /* 700px */
			height: 390px;
			padding: 10px 15px 0 10px;
			margin: 0;
			float: left;
		}	
		html>body #content {
			height: auto;
			min-height: 390px;
		}
		#contentMakers {
			width: 700px; /* 700px */
			height: 390px;
			padding: 0;
			margin: 0;
			float: left;
		}	
		html>body #contentMakers {
			height: auto;
			min-height: 390px;
		}

	
/* = = = footer = = = */
#footer {
   position: absolute;   /* positioneer t.o.v. #container */
   bottom: -1px;
   width: 100%;
   height: 94px;			/* let op: indien hoogte wijzigt ook bottompadding div#top aanpassen */
}

html>body #footer {
   bottom: 0;
}
	#footer div {
		background-color: #fff;
		padding: 34px 0 0;
	}
	
		#footer div a {
			color: #8FC9F0;
			text-decoration: none;
			font-size: 12px;
		}

/* = = = float = = = */
#box {
   position: absolute;
   bottom: -1px;
   right: 0;
   width: 160px;
   height: 492px;
}

html>body #box {
   bottom: 0;
}
	.bijdeeen {background: url(../images/subCjongenSnor.gif) transparent no-repeat bottom right;}
	.bijdeander {background: url(../images/subCjongenStoel.gif) transparent no-repeat bottom right;}

	/* = = = opmaak = = = */
		.item {
			float: left;
			clear: both;
			width: 100%;
			padding: 0 0 10px;
		}
		/* .item p{padding-bottom: 20px;}*/
		#content ul li,
		#contentMakers ul li {
			padding: 0 0 0 8px;
			margin-left: 8px;
			background: url(../images/dot.gif) transparent no-repeat 0 0.6em;
		}
		
		#content ol,
		#contentMakers ol {
			list-style-type: decimal;
		}
			#content ol li
			#contentMakers ol li {
				margin: 0 0 0 23px;
			}
			html>body #content ol li {
				margin: 0 0 0 21px;
			}
			*:first-child+html #content ol li {
				margin: 0 0 0 23px;
			}

	/* = = = Programma = = = */
	.pd {
		float: left;
		margin: 10px 0;
	}
	
	.progInfo {
		float: left;
		clear: both;
		width: 100%;
		font-size: 0.9em;
		font-weight: bold;
	}
	
		.progInfo a h2 {
			color: #000;
			text-decoration: none;
		}
	
	.progDetails {
		float: left;
		clear: both;
		font-size: 0.9em;
		width: 100%;
	}
	.vrst .progDetails {
		width: 80%;
	}
	
		.item .progDetails {margin-top: -10px;}
		
			.divider {display: inline-block; width: 20px;}
	
	a.terug {
		text-decoration: none;
		font-weight: bold;
	}
	
	.mijnAgenda {
		color: #CC0000;
		font-size: 1.2em;
		font-weight: bold;
		padding-bottom: 2px;
	}

	/* = = = Programma Blok = = = */
	.timetable {
		overflow-x: scroll;
		overflow-y: hidden;
	}
	
	table#blok, table#blok tr, table#blok td {
		border: 1px solid #ccc;
	}
	
		.tijdwoord {
		  width: 100px;
		}

	#blok tr {
		height: 40px;
	}
	#blok tr.datum {
		height: 20px;
	}
	#blok tr.last {
		height: 1px;
	}
	#blok td {
		padding: 4px;
	}

		.loc {
			width: 100px;
			font-size: 0.8em;
			line-height: 15px;
		}
		.odd {
			background-color: #d2d2d2;
			width: 15px;
		}
		.even {
			background-color: #FFF;
			width: 15px;
		}
		.act {
			background-color: #E2007A;
			text-align: center;
			font-size: 85%;
		}
			.act a {
				color: #fff;
				font-weight: bold;
			}
		
		.item div.popUp {
			position: absolute; 
			top: -5px; 
			left: -50px; 
			z-index:10; 
			background-color: #999; 
			color: black; 
			border: 1px solid white; 
			padding-left: 8px;
			padding-right: 6px;
			width: 180px; 
			height: 100px; 
			display: none; 
			line-height: 18px;
		}
		html>body .item div.popUp {
			height: auto;
			min-height: 100px;
		}
		
			a.close {
				float: right;
			}



	/* = = = Nieuws / HP = = = */
	#contentKol div.alignLeft {
		width: 320px; /* 350px */
		margin: 0;
		}
	.nwsItem, #contentKol .item {
		width: 320px; /* 350px */
		margin: 0;
		padding: 6px 15px 14px 10px;
		margin: 0 0 10px;
		background-color: #fff;
	}
	.breed {width: 675px;} /* lees-verder pagina nws */
	
		.nwsItem h3 {
			padding: 0;
			margin: 0;
		}
		
		.nwsItem .date {
			font-size: 0.9em;
			color: #000;
			font-weight: bold;
			display: block;
			padding-bottom: 4px;
		}
	
	/* = = = nws HP = = = */
	.nwsHP {
		margin-left: 14px;
		color: #ffffff;
	}
	
		.nwsHP h1 {
			color: #ffffff;
		}
		
		.nwsHP a {
			color: #ffffff;
			text-decoration: none;
		}

		a.more {
			color: #CCCCCC;
		}

		.nwsHP a:hover, a:focus, a:active,
		a.more:hover, a.more:focus, a.more:active {
			text-decoration: underline;
		}
	
	/* = = = Formulier + poll + tip = = = */
	 .progForm {float: left;}
	.item div {
		clear: both;
		padding: 4px 0;
	}
	.vrst div {clear: none;} /* uitzondering omdat er div's worden meegekopieerd in tekst van een voorstelling */
	
	#tellafriend {
		width: 300px;
		position: absolute;
		float: left;
		white-space: nowrap;
		top: 150px;
		left: 35%;
		background-color: #ffffff;
		border: 8px solid #990000;
		text-align: center;
		line-height: 20px;
		padding: 10px;
	}
	
	form table#blok tr, td {
		border: none;
	}
	
	label{
		float: left;
		width: 120px;
		vertical-align: middle;
		margin-right: 2px;
		/* border: 1px solid #ffffff; */
	}
		.radioBox {
			width: 290px;
		}
		
		td.label {
			width: 120px;
			vertical-align: top;
		}
		
		.poll {
			width: 200px;
		}
		
		.teller {
			font-size: 0.8em;
			color: #999999;
		}
	
	input, select, textarea {
		font-size: 1em;
		width: 290px;
		border: 1px solid #990000;
		margin: 2px 0;
	}
	
		.pd select {
			border-color: #ccc;
		}
	
	textarea {
	    height: 110px;
	}
	
		.tellafriend {
			width: 137px;
		}
		.tip {
			color: #999999;
		}
		textarea.tellafriend {
			width: 277px;
			height: 60px;
		}
		
		
	select {
		width: 190px;
		margin-right: 20px;
	}
	
	input.button {
		width: 94px;
		cursor: pointer;
		background-color: #666666;
		padding: 1px 0;
		color: #ffffff;
		font-weight: bold;
		border: 1px solid #C0BEBE;
	}
	input.stem {
		width: 50px;
		color: #ffffff;
		font-weight: bold;
		background-color: #666666;
		margin-left: 8px;
		border: 1px solid #C0BEBE;
	}
		input.aantal {
		font-size: 0.8em;
		padding: 1px 2px 3px 4px;
		width: 16px;
		height: 12px;
		vertical-align: top;
	}
	
	input.radio,
	input.checkBox {
		float: left;
		width: 16px;
		vertical-align: top;
		border: none;
		margin: 8px 0 0 5px;
	}
	
	* html input.radio,
	* html input.checkBox {
		margin: 3px 0 0 8px;
	}
	
	*:first-child+html input.radio,
	*:first-child+html input.checkBox {
		margin: 3px 0 0 8px;
	}

	/* = = = gastenboek = = = */
	.gboekPost {
		float: right;
		width: 297px;
		height: 1px;
	}
	
		.gast_th {
			font-weight: bold;
		}
	
		.gboekPost input.gast_input, .gboekPost textarea.gast_text {
			width: 169px;
		}
		* html .gboekPost input.gast_input, * html .gboekPost textarea.gast_text {
			width: 166px;
		}
	
	.gboekBericht {
		float: left;
		width: 460px;
	}

	/* = = = Makers = = = */
	#contentMakers .item div {
		margin-bottom: 8px;
		padding: 0;
	}
	
	div.mLijstFoto {
		float: right;
		width: 205px;
		height: 205px;
		margin: 0 0 0 10px;
		clear: none;
		background-color: #fff;
	}
	html>body div.mLijstFoto {
			height: auto;
			min-height: 205px;
		}
	#contentMakers .item div.mLijstInfo {
		float: left;
		width: 460px; /* 485px */
		padding: 0 15px 14px 10px;
		clear: none;
		background-color: #fff;
	}
		div.mLijstFoto img {border: 8px solid #fff;}
		.mLijstInfo a h2 {}
		.mLijstInfo a h3, 
		.mLijstInfo h3 {color: #000; text-decoration: none;}



/* = = = zoom bij popup afbeelding = = = */
.imgPopUp a {
	position:relative;
	z-index:1;
}

.imgPopUp a span{
	display: block;
	position: absolute;
	background: url(../images/img_popup.gif) bottom right no-repeat;
	top: 0;
	left: 0;
	z-index: 10;
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
	cursor: pointer;
}
* html .imgPopUp a span{margin: 4px 0 15px 15px;}

.imgPopUp a:hover span{
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}