@import "reset.css";

@font-face {
	font-family: 'Frank'; 
    src: url('FranklinGothicStd-ExtraCond.otf'); /* Downloadlocatie: Downloadlocatie opgeven. */
}

body {
	font-family: 'Trebuchet ms';
	font-size: 12px;
	line-height: 20px;
	color: #315114;
}

#container {
	width: 960px;
	height: 510px;
	padding: 50px 0 0 0;	
	margin: 0px auto;
	background: url('../images/bg_content.jpg') no-repeat 0px 50px;
}

#container.home {
	background: url('../images/bg_introduction.jpg') no-repeat 0px 50px;
}

.home #content {
	padding: 25px 0 0 0;
	width: 960px;
}

.home ul#navigation {	
	position: relative;
	height: 450px;
	width: 960px;
	text-indent: -9999px;
}

.home ul#navigation li a {
	position: absolute;
	display: block;
}


.home ul#navigation li a.werk {
	z-index: 101;
	top: 105px;
	left: 230px;
	width: 90px;
	height: 45px;
	background: url('../images/menu_werk.jpg') no-repeat 0px -45px;

}

.home ul#navigation li a.werk:hover {
	background: url('../images/menu_werk.jpg') no-repeat 0px -0px;

}

.home ul#navigation li a.beleving {
	z-index: 101;
	top: 150px;
	left: 615px;
	width: 130px;
	height: 45px;
	background: url('../images/menu_beleving.jpg') no-repeat 0px -45px;
	
}

.home ul#navigation li a.beleving:hover {
	background: url('../images/menu_beleving.jpg') no-repeat 0px 0px;
}

.home ul#navigation li a.interesse {
	z-index: 101;
	top: 240px;
	left: 0px;
	width: 140px;
	height: 45px;
	background: url('../images/menu_interesse.jpg') no-repeat 0px -45px;

}

.home ul#navigation li a.interesse:hover {
	background: url('../images/menu_interesse.jpg') no-repeat 0px 0px;
}

.home ul#navigation li a.jojannekepostma {
	z-index: 101;
	top: 330px;
	left: 180px;
	width: 255px;
	height: 45px;
	background: url('../images/menu_jojannekepostma.jpg') no-repeat 0px -45px;
}

.home ul#navigation li a.jojannekepostma:hover {
	background: url('../images/menu_jojannekepostma.jpg') no-repeat 0px 0px;
}


.home p.introduction {
	display: none;
	padding: 20px 0 0 0;
	font-family: 'Frank';
	font-size: 43px;
	text-transform: uppercase;
	line-height: 45px;
	letter-spacing: -0.025em;
}

#header {
	height: 25px;
}

	#header ul#navigation {
		height: 25px;

	}

	#header ul#navigation li {
		float: left;
		display: block;
		margin: 6px 5px 6px 0;
		padding: 0 10px 0 0;
		line-height: 13px;
		border-right: 1px solid #2A4D22;
	}
	
	#header ul#navigation li a.active {
		color: #dce3d4;
	}


#content {
	height: 425px;
	padding: 25px 0 0 0;
}

	#columnA {
		float: left;
		width: 220px;
		padding: 0 20px 0 0;
	}
	
	#columnB {
		position: relative;
		float: left;
		width: 480px;
		color: #000;
		padding: 0 20px;
	}
	
		#imageholder {
			position: relative;
			width: 440px;
			height: 400px;
			margin: 0 30px 0 0;
			/*border: 1px solid #ccc;*/
			box-shadow: 5px 5px 15px #ccc; 
			background: #fff;
			-webkit-box-shadow: 5px 5px 15px #ccc;
			-moz-box-shadow: 5px 5px 15px #ccc;			
		}
		
		#textholder {
			background: #fff;
			width: 330px;
			margin: 0 80px 0 20px;
			height: 400px;
			padding: 10px 20px;
			/*border: 1px solid #ccc;*/
			box-shadow: 5px 5px 15px #ccc; 
			-webkit-box-shadow: 5px 5px 15px #ccc;
			-moz-box-shadow: 5px 5px 15px #ccc;	
		}
		
			#textholder.contact  {
				background: url('../images/bg_contact.jpg') no-repeat bottom left #fff;
			}
		
			.contact h2 {
				padding: 60px 0 0 170px;
				margin: 0;
			}
			
			.contact div {
				padding: 0 0 0 170px;
			}

			#textholder .scroll  {
				width: 340px;
				height: 400px;
			}
		
		#columnB table {
			margin: 0 0 40px 0;
		}
	
		#columnB td {
			vertical-align: top;
		}
		#columnB td:first-child {
			width: 100px;
		}	
		
		
		
	
	#columnC {
		float: left;
		width: 180px
		padding: 0 0 0 20px;
	}
	
		ul#subnavigation {
			font-size: 18px;
			line-height: 25px;
			font-weight: bold;
			padding: 0 0 60px 0;
			
		}
		
		ul#subnavigation li a {
			color: #2A4D22;
		}
		
		/*
		ul#subnavigation li a.active:after {
			content: ' *';
		}
		*/
		
		ul#subnavigation li.first a {
			color: #dce3d4;
		}
	
		ul#subnavigation li.second a {
			color: #669309;
		}
		
		ul#subnavigation li.third a {
			color: #4a7200;
		}
		
		#description {
			padding: 0 0 60px 25px;
			background: url('../images/arrow.png') no-repeat 0px 0px
		}
	
		#description h2 {
			font-size: 12px;
			font-weight: bold;
			line-height: 20px;
			margin: 0;
		}
		
		#description p {
			font-size: 12px;
			line-height: 20px;
			margin: 0;
		}

ul#contentnavigation {
	position: relative;
	height: 25px;
	padding: 0 220px 0;
}

	ul#contentnavigation li.prev {
		position: absolute;
		top: 0px;
		left: 260px;
		width: 240px;
	}
	
	ul#contentnavigation li.next {
		position: absolute;
		top: 0px;
		left: 465px;
		width: 240px;
		text-align: right;
	}

#footer {
	width: 960px;
	padding: 50px 0 0 0;	
	margin: 0px auto;
	font-size: 10px;
}

	.footerleft {
		float: left;
		width: 50%;
		text-align: left;
	}
	
	.footerright {
		float: left;
		width: 50%;
		text-align: right;
	}

h1 {
	font-family: 'Frank';
	font-size: 73px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 73px;
}


h2 {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 10px;
}


h3 {
	font-size: 14px;
	margin-top: 10px;
}




p {
	margin: 5px 0 15px 0;
	margin-bottom: 15px;
}

a {
	color: #315114;
	text-decoration: none;
}

a:hover {
	color: #dce3d4;
}



/* extra */

.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/*//
.clear { 
    display: inline-block; 
}
//*/