/*****************************
 File: style.css
*****************************
 Initial author: Floris Baan, Ceneon Interactive
 FirstVersion: 28/11/2006
****************************/

/*****************************
 FileStructure of style.css
*****************************
 - 1.0 InitialElements
 - 2.0 LayoutStructure
 - 3.0 HeaderZone
 - 4.0 ContentZone
 - 5.0 Navigation
 - 6.0 FooterZone
 - 7.0 Fixes
******************************/

/*****************************
1.0 InitialElements
*****************************/

* {
	padding: 0;
	margin: 0;
	}
	
hr {
	display: none;
	visibility: hidden;
	}
	
p {	
	margin: 1.2em 0;
	line-height: 1.8em;
	font-size: .8em;
	color: #333333;
	}
	
	.img_caption {
		font-size: .7em;
		}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 1.2em 0;
	font-family: Arial, Verdana;
	}
	
h1 {
	font-size: 2.0em;
	}
	
h2 {
	font-size: 1.7em;
	}
	
h3 {
	font-size: 1.4em;
	}
	
h4 {
	font-size: 1.2em;
	}
	
h5 {
	font-size: 1.0em;
	}

ol, ul, dl, li {
	padding: 0;
	font-size: 1.0em;
	line-height: 1.8em;
	margin: 0 0 0 1em;
	}
	
	#main ul li {
		font-size: 0.8em;
		margin-left: 2em;
		list-style-image: url("../images/listitem.gif");
		color: #333333;
		font-family: Trebuchet MS, Arial, Verdana;
		}
	
img {
	border: 0;
	padding: 0;
	margin: 0;
	display: block;
	}	
	
a {
	border-bottom: 0px solid #880000;
	text-decoration: none;
	color: #880000;
	padding: 0px 1px;
	}
	
	a:visited {
		border-bottom: 0px solid #888888;
		color: #888888;
		}
		
	a:visited:hover {
		border-bottom: 1px solid #880000;
		color: #880000;		
		background: transparent;
		}
		
	a:hover {
		border-bottom: 1px solid #880000;
		color: #880000;		
		background: transparent;
		} 

a.read {
	
	}

a.read:hover {
	
	}

/*****************************
2.0 LayoutStructure
*****************************/

body {
	text-align: center;	
	background: #e5e5e5 url("../images/background.gif") 50% 0% repeat-y;	
	font-family: Trebuchet MS, Arial, Verdana;
	}
	
#wrap {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	width: 752px;
	background: #FFFFFF url("../images/wrap_back.gif") 50% 0% no-repeat;
	position: relative;
	}
	
#header {
	width: 752px;
	}
	
#navigation {
	display: block;
	width: 413px;
	float: left;
	position: absolute;
	top: 61px;
	right: 0;
	border-bottom: 0;
	}
	
#content {
	display: block;
	}
	
	#main {
		display: block;
		margin: 0;
		padding: .5em 0 3em 0;
		border: 1px solid #FFFFFF;
		width: 750px;	
		}
		
#footer {
	position: relative;
	clear: both;
	width: 752px;
	padding: 0 0 0 0;
	margin: 0;
	}
	
	#copyright {
		display: inline;
		float: right;
		}
		
	#footer_nav {		
		display: block;
		float: left;
		}
		
	#meta {
		display: none;		
		}
		
/*****************************
3.0 HeaderZone
*****************************/

#header {
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	width: 750px;
	padding: 40px 0 40px 0;
	}

#header h1 {
	text-indent: -999em;
	padding: 0;
	margin: 0;
	background: url("../images/logo.gif") no-repeat 0px 0px;
	}
	
	#header h1 a {
		background: transparent;
		height: 81px;
		width: 262px;
		display: block;
		border: none;
		text-decoration: none;
		padding: 0;
		margin: 0;
		}
		
		#header h1 a:hover {
			background: url("../images/logo.gif") no-repeat 0px -81px;
			}

/*****************************
4.0 ContentZone
*****************************/

#content h3 {
	color: #FFFFFF;
	background: #000000 url("../images/h3_back.gif") 0% 0% no-repeat;
	font-size: 1.1em;
	padding: .5em 1em .5em .6em;
	margin: 0;
	border: none;	
	}
	
	body#home #content h3 {
		text-indent: -999em;
		}
	
#content h4 {
	font-size: 1.0em;
	font-weight: bold;
	padding: 0 0 0 .7em;
	color: #41423C;
	}
	
#content h5 {
	
	}
	
#content img {
	
	}
	
	#abstract {
		background: #880000 url("../images/abstract_back.gif") 0% 100% no-repeat;
		padding: 0;
		margin: 0;
		border: none;
		border-top: none;
		border-bottom: none;
		width: 752px;
		position: relative;
		}
	
		#abstract p.important {
			color: #FFFFFF;
			font-size: .9em;	
			font-family: Trebuchet MS, Verdana, Arial;
			padding: 1em 1em 1em 1em;
			margin: 0;	
			}
			
			body#hoe #abstract p.important {
				padding: 1em 430px 1em 1em;
				}
			
			p.image {
				display: block;
				}
			
		#img {
			float: right;
			display: inline;
			width: 350px;
			height: 137px;
			border: 1px solid #000000;
			background: #FFFFFF;
			margin: 0 0 1em 1em;
			}
		
	#main {
		background: #FFFFFF;
		}
		
		#main p {
			padding: 0 1em;
			color: #333333;
			}
	
body#diensten .left {
	float: left;
	width: 374px;
	}
	
body#diensten .right {
	float: left;
	width: 374px;
	}

	.box {
		min-height: 200px;
		width: 350px;
		margin: 12px 12px 12px 12px;
		padding-bottom: 2em;
		display: inline;	
		background: #EEEEEE url("../images/box_back.gif") 50% 100% no-repeat;
		position: relative;
		float: right;
		}
	
	.imgbox {
		padding-bottom: 0;
		}
	
	a.read,
	a.read:visited {
		border-bottom: 0;
		background: url("../images/leesmeer.gif") 0px 0px  no-repeat;
		text-indent: -999em;
		display: block;
		width: 70px;
		height: 20px;
		color: #FFFFFF;
		padding: 0;
		margin-top: .8em;
		line-height: 1em;
		font-family: Trebuchet MS, Arial, Verdana;
		font-size: .8em;
		text-decoration: none;
		}
		
	a.read:hover,
	a.read:visited:hover {		
		background: url("../images/leesmeer.gif") 0px -20px  no-repeat;
		border-bottom: 0;
		text-decoration: none;
		}	
	
	.box a.read,
	.box a.read:visited {
		border-bottom: 0;
		background: url("../images/leesmeer.gif") 0px 0px  no-repeat;
		text-indent: -999em;
		width: 70px;
		height: 20px;
		color: #FFFFFF;
		float: left;
		position: absolute;
		bottom: 10px;
		right: 10px;
		padding: 0;
		line-height: 1em;
		font-family: Trebuchet MS, Arial, Verdana;
		font-size: .8em;
		}
	
	.box a.read:hover,
	.box a.read:visited:hover {		
		background: url("../images/leesmeer.gif") 0px -20px  no-repeat;
		}
	
	#content .box h4 {
		background: #7f7f7f url("../images/h4_back.gif") 50% 0% no-repeat;
		margin: 0;
		color: #FFFFFF;
		padding: .5em 1em .5em .6em;
		font-size: .9em;
		}
		
	body#diensten #footer {
		margin-top: 20px;
		}
	
	

/*****************************
5.0 Navigation
*****************************/

#navigation {
	background: url("../images/navigation.gif") no-repeat 0px 0px;
	width: 413px;
	display: inline;
	margin-right: 14px;
	}
	
#navigation h3 {
	display: none;
	}

#navigation ul {
	margin: 0;
	padding: 0;
	}
	
	#navigation ul li {
		margin: 0;
		padding: 0;
		float: left;
		display: block;
		line-height: 1em;				
		border-right: none;
		}
		
		#navigation ul li a {
			border-bottom: none;
			text-decoration: none;
			padding: 0 5px;
			margin: 0 18px;	
			text-indent: -999em;
			font-weight: bold;
			color: #CCCCCC;
			}
			
			#navigation ul li a.home {
				background: transparent;
				width: 36px;
				height: 22px;
				display: block;				
				}
				
				#navigation ul li a.home:hover,
				#navigation ul li.active a.home {
					background: url("../images/navigation.gif") no-repeat -18px -22px;					
					}
				
			#navigation ul li a.bedrijfsprofiel {
				background: transparent;
				width: 94px;
				height: 22px;
				display: block;	
				margin: 0 12px 0 18px;	
				}
				
				#navigation ul li a.bedrijfsprofiel:hover,
				#navigation ul li.active a.bedrijfsprofiel {
					background: url("../images/navigation.gif") no-repeat -100px -22px;	
					}
				
			#navigation ul li a.diensten {
				background: transparent;
				width: 54px;
				height: 22px;
				display: block;	
				}
				
				#navigation ul li a.diensten:hover,
				#navigation ul li.active a.diensten {
					background:  url("../images/navigation.gif") no-repeat -234px -22px;	
					}
			
			#navigation ul li a.contact {
				background: transparent;
				width: 49px;
				height: 22px;
				display: block;					
				}
				
				#navigation ul li a.contact:hover,
				#navigation ul li.active a.contact {
					background:  url("../images/navigation.gif") no-repeat -334px -22px;	
					}
			
			#navigation ul li a:hover {
				background: transparent;
				color: #404040;
				}

body#diensten #sec_navigation,
body#handvormerij #sec_navigation,
body#zandgietwerk #sec_navigation,
body#coquillegietwerk #sec_navigation, 
body#nabewerking #sec_navigation {
	position: absolute;
	left: 18px;
	top: 30px;
	display: inline;
	height: 22px;
	width: 413px;
	background: url("../images/navigation.gif") no-repeat -18px -44px;
	}

#sec_navigation {
	line-height: 1.8em;
	font-size: .8em;
	}
		
	#sec_navigation li {
		margin: 0;
		padding: 0;
		float: left;
		display: block;
		line-height: 1em;				
		border-right: none;		
		}			
		
		#sec_navigation li a {
			border-bottom: none;
			text-decoration: none;
			padding: 0;
			margin: 0;
			font-weight: bold;
			color: #CCCCCC;
			background: #000000;
			}			
			
			#sec_navigation li a.zandgietwerk {
				background: transparent;
				width: 90px;
				height: 22px;
				display: block;		
				padding: 0;
				margin: 0;					
				}
			
				#sec_navigation li a.zandgietwerk:hover,
				#sec_navigation li.active a.zandgietwerk {
					background: url("../images/navigation.gif") no-repeat -18px -66px;
					}
					
			#sec_navigation li a.coquillegietwerk {
				background: transparent;
				width: 110px;
				height: 22px;
				display: block;		
				padding: 0;
				margin: 0;		
				}
			
				#sec_navigation li a.coquillegietwerk:hover,
				#sec_navigation li.active a.coquillegietwerk {
					background: url("../images/navigation.gif") no-repeat -108px -66px;
					}
					
			#sec_navigation li a.handvormerij {
				background: transparent;
				width: 87px;
				height: 22px;
				display: block;	
				padding: 0;
				margin: 0;			
				}
			
				#sec_navigation li a.handvormerij:hover,
				#sec_navigation li.active a.handvormerij {
					background: url("../images/navigation.gif") no-repeat -218px -66px;
					}
					
			#sec_navigation li a.nabewerking {
				background: transparent;
				width: 90px;
				height: 22px;
				display: block;	
				padding: 0;
				margin: 0;			
				}
			
				#sec_navigation li a.nabewerking:hover,
				#sec_navigation li.active a.nabewerking {
					background: url("../images/navigation.gif") no-repeat -305px -66px;
					}

body#bedrijfsprofiel #sec_navigation,
body#historie #sec_navigation {
	position: absolute;
	left: 18px;
	top: 30px;
	display: inline;
	height: 22px;
	width: 413px;
	background: url("../images/navigation.gif") no-repeat -18px -88px;
	}
	
	#sec_navigation li a.historie {
				background: transparent;
				width: 62px;
				height: 22px;
				display: block;		
				padding: 0;
				margin: 0;					
				}
			
				#sec_navigation li a.historie:hover,
				#sec_navigation li.active a.historie {
					background: url("../images/navigation.gif") no-repeat -18px -110px;
					}
					
body#contact #sec_navigation,
body#routebeschrijving #sec_navigation {
	position: absolute;
	left: 18px;
	top: 30px;
	display: inline;
	height: 22px;
	width: 413px;
	background: url("../images/navigation.gif") no-repeat -18px -132px;
	}
	
	#sec_navigation li a.routebeschrijving {
				background: transparent;
				width: 112px;
				height: 22px;
				display: block;		
				padding: 0;
				margin: 0;					
				}
			
				#sec_navigation li a.routebeschrijving:hover,
				#sec_navigation li.active a.routebeschrijving {
					background: url("../images/navigation.gif") no-repeat -18px -154px;
					}
	






/*****************************
6.0 FooterZone
*****************************/

#footer {
	background: #000000 url("../images/footer_back.gif") 0% 100% no-repeat;	
	border-bottom: 5px solid #FFFFFF;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 1em;
	}
	
	#footer h3 {
		display: block;
		text-indent: -999em;
		line-height: 3px;
		background: #333333 url("../images/footer_back_top.gif") 0% 0% no-repeat;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		}
	
	#copyright {
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		}
	
	#copyright h4 {
		text-indent: -999em;
		display: none;
		}
	
	#copyright p {
		color: #777777;
		line-height: 1.8em;
		margin: 0;
		padding: .4em 1em .5em 0;
		font-size: .75em;
		}
		
	#copyright a {
		color: #777777;
		line-height: 1.8em;
		border-bottom: none;
		text-decoration: none;
		}
		
		#copyright a:hover {
			color: #FFFFFF;
			background: transparent;
			}
		
	
	#footer_nav h4 {
		text-indent: -999em;
		display: none;
		}
	
	#footer_nav {
		line-height: 1.8em;
		}
	
	#footer_nav ul {
		line-height: 1.8em;
		font-size: .75em;
		color: #333333;
		list-style: none;
		margin: 0;
		padding: .4em 0 .5em .5em;
		}
		
		#footer_nav ul li {
			float: left;
			margin: 0;
			padding: 0 .5em;
			line-height: 1.8em;
			background: url("../images/li-stripe.gif") 100% 50% no-repeat; 
			}
			
			#footer_nav ul li a {
				color: #777777;				
				text-decoration: none;
				border-bottom: none;
				}
				
				#footer_nav ul li a:hover {
					color: #FFFFFF;
					background: transparent;
					}		
					

/*****************************
7.0 Fixes
*****************************/			
					
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

.clearfix {
	display: inline-table;
	}

* html .clearfix {height: 1%;} 	/* Hides from IE-mac \*/
.clearfix {display: block;} 	/* Hides from IE-mac \*/