/*************************************************************************************************
 * STYLE RESETS
 *************************************************************************************************/
 
    body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{ 
        margin:0;
        padding:0;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    
    fieldset,img { 
        border:0;
    }
    
    
    caption,th {
        text-align:left;
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
    }
    
    abbr,acronym { 
        border:0;
    }
    
/*************************************************************************************************
 * GENERIEKE STYLES (UITSLUITEND "KALE" HTML-TAGS!)
 *************************************************************************************************/
 
    html, body {
    	padding:0px;
    	margin:0px;
    }
 
    body, input, select, textarea, td {
    	font-family:Arial, Verdana;
    	font-size:11px;
    	line-height:16px;
    	color:#666666;
    }
    
    body {
    	text-align:center;
    	background:white url("../images/bgBody.jpg") top center no-repeat;
    }
    
    a:link, a:visited {
    	color:black;
    	text-decoration:none;
    }
    
    a:hover,  a:active {
    }
    
    h1 {
    	color:black;
    	font-size:24px;
    	font-weight:bold;
    	padding-bottom:20px;
		line-height:27px;
    }
    
    h2 {
    	color:#eb1010;
    	font-size:18px;
    	font-weight:bold;
    	padding-bottom:10px;
    }
    
    h3 {
    }
    
    p {
        margin-bottom: 10px;
    }
    
/*************************************************************************************************
 * GLOBALE LAYOUT (STRAMIEN + ALGEMENE OPMAAK)
 *************************************************************************************************/
	
div#container {
	width:1002px;
 	position:relative;
 	margin:0 auto;
 	text-align:left;
    background:url("../images/bgContainer.png") top left repeat-y;
}

div#header {
	height:390px;
	margin-left:6px;
	width:1002px;
}

div#image {
	height:324px;
	width:710px;
	float:left;
    background:url("../images/image.jpg") top left no-repeat;
}

div#image img {
    position:absolute;
 }

div#logo {
	height:130px;
	width:404px;
	position:absolute;
	left:-36px;
    background:url("../images/logo.png") top left no-repeat;
	behavior:url("../ieHack.htc");
	z-index:80;
}

div#text {
	height:324px;
	width:250px;
	float:left;
    background:url("../images/textHeader.jpg") top left no-repeat;
}

div#menu {
	height:52px;
	width:970px;
    background:#faef00 url("../images/aboveImage.png") top left no-repeat;
	behavior:url("../ieHack.htc");
}

div#overflow {
	overflow:hidden;
	clear:both;
	
 	min-height:400px;
	height:auto !important;
	height:400px;
	
	padding-bottom:30px;
	
	_overflow:visible;
}

div#footer {
	height:36px;
	width:972px;
    background:white url("../images/footer.png") top left no-repeat;
	behavior:url("../ieHack.htc");
}

div#overImage {
	height:50px;
	width:598px;
	position:absolute;
	top:352px;
	left:6px;
    background:url("../images/underImage.png") top left no-repeat;
	behavior:url("../ieHack.htc");
}

div#columnLeft {
	width:620px;
	float:left;
	display:inline;
	margin-left:50px;
	padding-top:50px;
}

div#columnRight {
	width:225px;
	padding-top:20px;
	float:left;
	margin-left:60px;
	display:inline;
}

div#columnRight input.txt {
	border:1px solid #d8d9da;
	width:150px;
	padding:0px 3px 0px 3px;
	float:left;
	height:20px;
	margin-right:4px;
}

div#columnRight input.btn {
	border:1px solid #d8d9da;
	height:22px;
	padding:0px 5px 0px 5px;
	width:auto;
	float:left;
	text-transform:uppercase;
	background:white;
	_padding:0px;
}

/*************************************************************************************************
 * PAGINA SPECIFIEKE LAYOUT + OPMAAK
 *************************************************************************************************/

 table.materiaal {
 }
 
 table.materiaal tr td {
 	width:220px;
 	padding-bottom:20px;
 	vertical-align:top;
 }
 
 a.materialLink {
 	background:#eb1010;
 	color:white;
 	display:block;
 	width:153px;
 	padding:3px 10px 3px 10px;
 	font-weight:bold;
 	font-size:12px;
 }
 
 table.materiaalDetail{
 	width:620px;
 }
 table.materiaalDetail tr td {
 	padding-right:10px;
 	vertical-align:top;
 	padding-bottom:20px;
 	padding-top:3px;
 	padding-bottom:3px;
 }
 
  table.materiaalDetail tr.coloredBackground td {
    background:url("../images/backgroundTable.jpg") top left repeat-x;
 }
 
  table.materiaalDetail tr.coloredBackground td {
   
 }
 
 table.materiaalDetail tr td.image {
 	width:224px;
 }
  
        /*****************************************************
         * PROJECT DETAIL
         *****************************************************/
		
		table.fotos
		{
			margin-left:		-7px;
			border-collapse:	separate;
			border-spacing:		7px;
			*border-collapse:	expression('separate', cellSpacing = '7px');
		}
		
        /*****************************************************
         * FRONTALBUM
         *****************************************************/
        
        .frontalbum ul.albums,
        .frontalbum ul.photos {
            list-style: none;
            margin: 0 0 25px 0;
            padding: 0;
        }
        
        .frontalbum ul.albums li,
        .frontalbum ul.photos li {
            float: left;
            margin: 0 5px 5px 0;
            position: relative;
        }
        
        .frontalbum ul.albums li a,
        .frontalbum ul.photos li > a {
            display: block;
            overflow: hidden;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            background: #eee;
        }
        
        .frontalbum ul.albums li a:hover,
        .frontalbum ul.photos li > a:hover {
            border: 1px solid #999;
        }
        
        .frontalbum ul.albums li .meta {
            background: #111;
            opacity: 0.6;
            color: #fff;
            font-size: 1.2em;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 131px;
            padding: 3px 10px;
            height: 26px;
        }
        
        .frontalbum ul.albums li a:hover .meta {
            opacity: 0.9;   
        }
        
        .frontalbum ul.options {
            display: block;
            list-style: none;
            margin: -15px 0 10px 0;
            padding: 0;
            font-size: 1.2em;
        }
        
        .frontalbum ul.options li {
            display: inline-block;
        }
        
        p.album-description {
            font-size: 1.2em;
        }

/*************************************************************************************************
 * FORMULIER OPMAAK
 *************************************************************************************************/
	table.form
	{
		border-collapse:			separate;
		border-spacing:				5px;
		
		*border-collapse:			expression('separate', cellSpacing = '5px');
	}
	
	textarea
	{
		font-size:					13px;
		color:						#4F4F4F;
		
		border:						1px solid #C1C1C1;
		
		width:						650px;
		height:						150px;
	}
	
	
	input.text
	{
		font-size:					13px;
		color:						#4F4F4F;
		
		border:						1px solid #C1C1C1;
		
		width:						150px;
		height:						25px;
	}
	
	input.button
	{
		cursor:						pointer;
		
		width:						200px;
		height:						25px;
	}
	
	.clsInfBlock
	{
		font-family:			verdana,arial;
		color:					#000000;
		line-height:			18px;
		font-size:				11px;
		
		width:					570px;
		_width:					570px;
		
		display:				block;
		padding:				15px;
		
		background-color:		#D4D0C8;
		border:					1px solid #5F0200;
		border-top:				3px solid #5F0200;
	}
	
	.clsInfBlock img
	{
		margin-right:			15px;
	}
	
	.frontalbum fieldset {
	    background: #eee;
	    border: 1px solid #999;
	    padding: 15px;
	}
	
	.frontalbum fieldset legend {
	    font-size: 2em;
	    font-weight: bold;
	}
	
	.frontalbum .field {
	    margin-top: 10px;
	}
	
    .frontalbum label {
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .frontalbum select, 
    .frontalbum input, 
    .frontalbum textarea,
    button {
        font-size: 2em;
    }
    
    .frontalbum input.text,
    .frontalbum textarea {
        width: 400px;
        height: auto;
        line-height: 1em;
    }
    
    .frontalbum textarea {
        height: 75px;
    }
    
    .spacer {
        clear: both;
    }
    
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
     
    .clearfix {
        display: inline-block;
    }
     
    html[xmlns] .clearfix {
        display: block;
    }
     
    * html .clearfix {
        height: 1%;
    }