/***************************************************
 * CSS Layout gebaseerd op het Holy Grail principe:
 * 
 * http://www.alistapart.com/articles/holygrail
 * (hulde aan de ALA)
 * 
 * 3 kolommen:
 * -------------------------------------------------
 * Links: 	222px
 * Midden: 	576px
 * Rechts:	162px
 * 
 * 
 ***************************************************/

/** algemene styles */

	body, td, input, select, textarea {
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	
	html {
		height: 100%;
	}
	
	body {
		background: #888;
		font-size: 100%;	
		color: #fff;
		text-align: center;
		height: 100%;
	}
	
	a:link, a:visited, a:hover, a:active {
		color: #ddd;
	}
	
	h1, h2 {
		display: block;
		background: url(../img/elements/square.gif) 0 50% no-repeat;
		padding-left: 20px;
		margin-bottom: 10px;
	}
	
	h1 {
		font-size: 0.875em;
	}
	
	h2 {
		font-size: 0.8125em;
	}
	
/** globale layout */

	div#site-wrapper {
		background: #999;
		position: relative;
		text-align: left;
		width: 576px;
		padding-left: 222px; /* LC width */
		padding-right: 162px; /* RC width */
		margin: 0 auto;
		height: 100%;
		height: auto !important;
		min-height: 800px;
	}
	
	div#site-wrapper div.column {
		position: relative;
		float: left;
	}
	
	div#site-wrapper div#top-bar {
		width: 960px;
		margin-left: -222px;
		height: 21px;
		background: #5b5b5b;
		border-bottom: 1px solid #e61f22;
	}
	
	div#site-wrapper div#header {
		background: url(../img/misc/header.jpg) left top no-repeat;
		margin-left: -222px;
		height: 200px;
	}
	
	/** linker sidebar */
	
		div#site-wrapper div#column-sidebar-left {
			width: 222px;
			right: 222px;
			margin-left: -100%;
		}
		
		div#site-wrapper div#column-sidebar-left div.block {
			background-color: #f1f1f1;
			margin-bottom: 25px;
			color: #111;
		}

		/** navigatie */
				
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper {
				background-color: #e8e8e8;
				background-image: url(../img/misc/bg_menu.png);
				background-attachment: scroll;
				background-position: 100% 0;
				background-repeat: no-repeat;
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul {}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li {

			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li a {
				display: block;
				padding: 5px 10px 5px 30px;
				border-bottom: 1px solid #fff;
				color: #111;
				font-weight: bold;
				font-size: 0.875em;
				text-decoration: none;
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li a:hover {
				background-color: #ddd;
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li ul {
				position: absolute;
				width: 200px;	
				display: none;
				background: #e8e8e8;		
				margin-left: 222px;
				margin-top: -28px;
				text-align: left;
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li ul li {
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li ul li a {
			}
			
			div#site-wrapper div#column-sidebar-left div#navigation-wrapper ul li ul li a:hover {
			}

			
		/** nieuws blok */
		
			div#site-wrapper div#column-sidebar-left div#news-wrapper {}
			
			div#site-wrapper div#column-sidebar-left div#news-wrapper h2 {
				height: 30px;
				line-height: 30px;
				margin:  0 10px;
				background-color: #e8e8e8;
				font-size: 0.875em;
				color: #111;
				font-weight: bold;
			}
			
			div#site-wrapper div#column-sidebar-left div#news-wrapper ul {
				padding: 10px;
			}
			
			div#site-wrapper div#column-sidebar-left div#news-wrapper ul li {
				padding: 5px 0;
				border-bottom: 1px solid #ddd;
			}
			
			div#site-wrapper div#column-sidebar-left div#news-wrapper ul li p {
				font-size: 0.75em;
			}
			
			div#site-wrapper div#column-sidebar-left div#news-wrapper ul li p a {
				color: #333;
				text-decoration: none;
				font-style: italic;				
			}
			
	/** rechter sidebar */
	
		div#column-sidebar-right {
			width: 162px;
			margin-right: -162px;
			margin-top: -200px;
			text-align: center;
			background: #ddd;
		}
		
		div#column-sidebar-right h2 {
			text-align: left;
			font-size: 0.875em;
			color: #111;
			font-weight: bold;	
			margin: 5px;
		}
		
		div#column-sidebar-right img {
			border: 1px solid #fff;
		}
		
		div#column-sidebar-right div.block {
			text-align: left;
			background: #7b7b7b;
			padding: 5px 5px 10px 5px;
			font-size: 0.75em;
		}
		
		div#column-sidebar-right div.block p {
			padding: 0 5px;
		}
		
		div#column-sidebar-right div.block p a {
			text-decoration: none;
			font-style: italic;
		}
		
		div#column-sidebar-right div.images {
			margin: 15px auto;
		}
		
		div#column-sidebar-right div.images img {
			margin-bottom: 5px;
		}		
	
	/** hoofd kolom */
	
		div#column-main {
			width: 100%;
			background: url(../img/misc/bg_content.png) left top no-repeat;
		}
		
		div#column-main div.content {
			padding: 25px 25px 100px 25px;
		}
		
		div#column-main div.content h1 {
			text-transform: uppercase;	
			font-size: 0.875em;
		}
		
		div#column-main div.content p {
			font-size: 0.75em;	
			line-height: 1.5em;
			margin-bottom: 10px;
		}
		
	/** footer */
	
		div#footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 960px;
			font-size: 0.625em;
			color: #333075;
			height: 14px;
			font-weight: bold;
			padding: 75px 65px 0;
			background: url(../img/misc/bg_footer.png) left bottom no-repeat;
		}
		
/** modifiers */

	div.spacer { clear: both; }