@charset "utf-8";

/* Algemeen */
* {outline: none; border: none; margin: 0; padding: 0;}

body, html {
	background: #0f0f0f;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #dcdcdc;
	height: 100%; 
	overflow-y: auto;
}

.clear {clear: both;}
a {color: #dcdcdc;}

/* achtergrond website */
#supersize{position: fixed;}
#supersize img, #supersize a{
	height:100%;
	width:100%;
	position:absolute;
	z-index: 0;
}

/* mainSite */
#mainSite {position: absolute; top: 0; left: 0; width: 100%; z-index: 5; height: 100%;}

/* top */
#topContainer {width: 100%; height: 114px; background: url(../img/layout/bg-top.png); margin: 25px 0; position: relative; z-index: 101;}
	#topContent {width: 921px; margin: 0 auto; height: 100%;}
		#topContent #logo {margin-top: 15px; float: left; width: 197px; height: 81px; background: url(../img/layout/logo-goossens.png);}
		#topContent #logo a {width: 100%; height: 100%; display: block;}
		#topContent .menu {float: right; list-style: none; height: 90px;}
		#topContent .menu li {float: left;}
		#topContent .menu li.middle {margin: 0 3px;}
		#topContent .menu li a {
			height: 15px; 
			padding: 60px 10px 15px 10px; 
			display: inline-block; 
			background: url(../img/layout/bg-top-menu.png); 
			font-size: 16px; 
			text-decoration: none;
		}
		#topContent .menu li a:hover {background: url(../img/layout/bg-top-menu-over.png);}

/* Site */
#mainContainer {width: 921px; margin: 25px auto; position: relative; z-index: 101;}
	
	/* Left */
	#left {float: left; width: 227px;}
    	
		/* menu left */
        #left .menu {width: 210px; margin: 0 0 20px 17px; position: relative;}
		#left .menu ul {list-style: none;}
		#left .menu li {
			float: left; 
			background: url(../img/layout/bg-left-menu.png); 
			height: 27px; 
			margin-bottom: 2px; 
			width: 100%; 
			border-bottom: 1px solid black;
		} 
        #left .menu li a {
			width: 171px; 
			height: 23px; 
			display: block; 
			font-size: 13px; 
			padding: 4px 0 0 39px; 
			text-decoration: none;
		} 
		#left .menu li a:hover {background: url(../img/layout/bg-left-menu-over.png);}
		
		.titel {position: absolute; z-index: 101; left: -17px; top: -9px;}
		.titel.industrieel {height: 90px; width: 44px; background: url(../img/layout/titel-industrieel.png) top left;}
		.titel.relatie {height: 149px; width: 44px; background: url(../img/layout/titel-relatie.png) top left;}
		
		#left .spacer {height: 18px;}
		
    /* Middle */
    #middleContainer {float: left; margin: 0 2px; width: 480px;}
    	
		/* content */
        #content, #contentContact {
			width: 380px; 
			min-height: 228px; 
			height:auto !important;
			height: 228px; 
			margin-bottom: 2px; 
			background: url(../img/layout/bg-middle.png);
			padding: 20px 50px 10px 50px;
		}
		#content p, #contentContact p {margin-bottom: 14px;}
		#content h1, #contentContact h1 {font-size: 26px; font-weight: normal; margin: -5px 0 15px -30px;}
		#content h2, #contentContact h2 {font-size: 15px; font-weight: normal; margin: 0;}
		#content.green h1, #content.green h2 {color: #348a55;}
		#content.red h1, #content.red h2 {color: #8a2b26;}
		#content.yellow h1, #contentContact.yellow h1, #content.yellow h2, #contentContact.yellow h2 {color: #dba900;}
		
		#content .contentImg {border: 5px solid #171717; padding: 5px; background: black;}

		/* footer */
        #footer {
			width: 470px; 
			height: 24px; 
			background: url(../img/layout/bg-middle.png); 
			text-align: right; 
			padding: 4px 10px 0 0;
		}
    	#footer a {text-decoration: none; color: #aeaeae;}
		#footer a:hover {text-decoration: underline;}
		
    /* Right */
    #adresgegevens {
		float: left; 
		width: 172px; 
		background: url(../img/layout/bg-top.png); 
		padding: 10px 0 15px 38px; 
		position: relative;
		margin-right: -3px;
	}
	#adresgegevens strong {color: #dba900; font-weight: normal;}
	#adresgegevens a:hover {text-decoration: none;}
	.titel.contact {height: 113px; width: 44px; background: url(../img/layout/titel-contact.png) top left;}