/*
Verticaal met footer template CSS

Kleuren stalen:

body: #949393

header alternatief: #b60000 (Voor als de slice niet geladen kan worden)
footer: alternatief: #b60001 (Voor als de slice niet geladen kan worden)


Aanpassen van de opbouw van de website kan vanaf STRUCTUUR.
Aanpassen van de typografie (fonts e.d.) in het gedeelte TYPOGRAFIE en GLOBALE TAGS
Voor het gebruik van het horizontale menu is aangegeven waar waardes moeten worden aangepast.
*/

/******************************************
** RESETS
******************************************/

* {
	padding: 0px;
	margin: 0px;
	border: none;
}

/******************************************
** TOOLS
******************************************/

.clear {
	clear: both; /* Clearen na een float */
}

.borderTest {
	border: 1px solid red;
}

html>body #header {
	z-index: 10; /* Prevent certain problems with form controls */
}

html>body #footer {
	z-index: 10; /* Prevent certain problems with form controls */
}

html>body {
	height: 100%;
}

form {
	height: 100%;
}

/******************************************
** TYPOGRAFIE en GLOBALE TAGS
******************************************/

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
}

a {
	text-decoration: underline;
	outline-style: none;
	color: #000000;
}

a:hover {
	text-decoration: none;
}

img {
	border: medium none;
}

p {
	color: #000000;
}

/******************************************
** STRUCTUUR
******************************************/

html {
	/* height: 100%; */
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	/* height: 100%; */
	background: #3A3A3A;
}

form {
	height: 100%;
}

#pagewrap {
	margin: 20px auto;
	/* height: 100%; */
	width: 969px;
	background: url(/upload/3416_rightBg.jpg) white repeat-y right top; /* Zet hier de repeat background voor de content! */
}

#rightBorder{

}
	
	/* Header */
	#header {
		width: 969px;
		height: 182px;
		background: url(/upload/3416_bg_header.png) no-repeat #3A3A3A;
	}
	
		#header h1 { /* Wegwerken van de h1 header in het logo */
			text-indent: -9999px;
			height: 0px;
			width: 969px;
		}
		
		#topCorner{
			background: url('/upload/3416_topLeftHead.jpg') bottom left no-repeat;
			height: 17px;
			width:969px;
		}
		
		#topLeftCorner{
			background: url(/upload/3416_topLeft_bg.jpg) 0px 0px no-repeat #828282;
			border-left: 1px solid #000000;
			border-right: 1px solid #000000;
			float: left;
			height: 168px;
			width: 176px;
		}
		
		#topRightCorner{
			float:left;
			background: url(/upload/3416_bg_header.jpg) 0px 9px no-repeat #828282;
			border: 1px solid #000000;
			border-left: 0;
			height: 166px;
			width: 790px;
		}

	/* Content */
	#content {
		width: 968px;
		background: url(/upload/3416_bg_contenttxt.jpg) repeat-x; /* plaatje over de gehele breedte, dus inclusief sidebar */
		border-left: 1px solid #000000;
		border-bottom: 1px solid #000000;
		/* position: relative; */
	}
	
		#background_sidebar {
			background: url(/upload/3416_bg_sidebar.jpg) repeat-y top left;
		}
		
		#sidebar {
			width: 176px; /* breedte van je sidebar */
			display: inline;
			float: left;
			background: url(/upload/3416_bg_sidebar.jpg) repeat-y top left;
		}
		
		#topSidebImg{
			background: url('/upload/3416_menuTop.jpg') no-repeat;
			height: 13px;
			margin-left: auto;
			margin-right: auto;
			width: 164px;
		}
		
		#centerSidebImg{
			background: url("/upload/3416_menuCenter.jpg") repeat-x scroll 0 0 transparent;
			border-left: 2px solid #000000;
			border-right: 2px solid #000000;
			height: 480px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			width: 158px;
		}
		
		
		#bottomSidebImg{
			background: url('/upload/3416_menuBottom.png') no-repeat;
			height: 13px;
			margin-left: auto;
			margin-right: auto;
			width: 164px;
		}
		
			/* Verticale navigatie */
			ul#navigatie {
				display: block;
			}
				
				ul#navigatie li {
					overflow: hidden;
					line-height: 0;
					display: inline; /* Fix voor IE6 */
					/*float: left;*/
				}
					
					ul#navigatie li a {
						background: url("/upload/3416_btnLayout.png") no-repeat scroll 4px 2px transparent;
						display: inline;
						font-family: Cambria, serif;
						float: left;
						line-height: 45px;
						margin-left: auto;
						margin-right: auto;
						padding-left: 30px;
						text-decoration: none;
						font-size: 20px;
						width: 128px;
						text-align: left;
					}
					
					
					ul#navigatie li a:hover { /* bij rollover, uitlijnen naar onder zodat rollover state zichtbaar is */
						padding-left: 40px;
						color: #951616;
					}

		
		#contenttext {
			border: 1px solid #000000 ;
			border-bottom: 0;
			width: 750px;
			/* height: 100%;
			In het CMS bij de hoogte de comments weghalen, bij het statisch testen niet!
			*/
			padding: 20px;
			display: inline;
			float: left;
			margin: 0px;
			background: url(/upload/3416_rightTopBg.jpg) no-repeat right top; /* Eenmalig plaatje voor de content, dit is de "schaduw" */
			min-height: 420px;
		}
		
			#contenttext_left {
				width: 385px;
				margin: 0 20px 0px 0px;
				float: left;
				text-align: left;
			}
			
			#contenttext_right {
				color: #000;
				width: 340px;
				float: right;
				text-align: center;
			}
			
				#contactContainer{
					width: 324px;
					height: 200px;
					margin-left: auto;
					margin-right: auto;
				}
				
					#contactTop{
						background: url('/upload/3416_contactTopBg.png') no-repeat;
						width: 322px;
						height: 8px;
					}
					
					#contactCenter{
						background: #d9d9d9;
						border-left: 1px solid #bfbfbf;
						border-right: 1px solid #bfbfbf;
						text-align: left;
						width: 320px;
					}
						#contactconLeft{
							float: left;
							width: 155px;
							margin-left: 5px;
						}
						
						#contactconRight{
							float: right;
							width: 155px;
							margin-right: 5px;
						}
					
					#contactBottom{
						background: url('/upload/3416_contactBottomBg.png') no-repeat;
						width: 322px;
						height: 8px;
					}
				
		#rightBorder{
			background: url('/upload/3416_rightBg.jpg') repeat-y #FFFFFF;
			float: right;
			width: 30px;
		}
	/* Footer */
	#footer {
		width: 740px;
		height: 20px;
		overflow: hidden;
		padding-top: 50px;
		text-align: center;
		background: url(/upload/3416_background_footer.jpg) no-repeat;
	}
	
		#footer #copyright {
			float: left;
			padding: 45px 0 0 45px;
		}
	
			#footer #copyright h3 {
				font-size: 13px;
				font-weight: normal;
				font-style: normal;
				margin: 0;
				padding: 0;
			}
			
				#footer #copyright a {
					color: #fff;
					text-decoration: none;
				}
				
				#footer #copyright a:hover {
					text-decoration: underline;
				}
	
	/* Slideshow */
	#gallery {
	text-align: left;
	position: relative;
	width: 320px;
	height: 240px;
	border: 1px solid #000000;
	}

	#gallery a {
	float: left;
	position: absolute;
	}

	#gallery a img {
	border: none;
	width: 320px;
	height: 240px;
	}

	#gallery a.show {
	z-index: 500;
	}

	#gallery .caption {
	z-index: 600; 
	background-color: #3A6A92; 
	color: #FFFFFF;
	width: 320px; 
	position: absolute;
	bottom: 0px;
	overflow: hidden;
	}

	#gallery .caption .content {
	margin: 5px;
	color: #FFFFFF;
	}

	#gallery .caption .content h3 {
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	}