/*
		____________________________________________________

		Project/Projek: Hannes Lochner
		Author/Outeur: Herman Lochner

		CSS Creation Date/Skepdatum: 9 Julie 2009
		Last Update/Laaste Opdatering: 
		____________________________________________________



--------|
  START |
	    |························· GENERAL BODY ELEMENTS
*/

		body {
			font-size: 1em;
			background: #FFFFFF;
			margin: 0;
			padding: 0;
			text-align:center;
			font-family: verdana,arial,helvetica,sans-serif;}

		form {
			margin:0;
			padding:0;}

/*
	    |························· GENERAL BODY ELEMENTS
   END  |
--------|
  START |
	    |························· HEADER ELEMENTS
*/

		#houer {
			width: 960px;
			position: relative; 
			background: #FFFFFF; 
			padding: 0;
			margin:0 auto;
			text-align:left;}

		#hofie {
			width: 960px;
			height: 90px;
			position: relative;
			padding: 0;
			margin:0;}

			#hofielinks {
				width: 425px;
				height: 80px;
				float:left;
				padding: 10px 0 0 15px;
				margin:0;}

			#hofieregs {
				width: 490px;
				height: 80px;
				float:right;
				padding: 10px 30px 0 0;
				margin:0;
				text-align:right;
				font-size: 11px;
				color: #800000;}

				#hofieregs a {
					color: #006000;
					text-decoration: underline;}

				#hofieregs a:hover {
					color: #008000;
					text-decoration: none;}

				.regs {
					float:right;}

				.links {
					float:left; 
					font-size:10px;
					color:#000000;}

				.linkskontak {
					float:left;
					padding-right:20px;
					font-size:12px;
					line-height:165%;}

		#spyskaart {
			width: 915px;
			height: 70px;
			position: relative; 
			padding: 20px 0 0 35px;
			margin:0;
			font-size: 18px;
			color: #800000;}

			#spyskaart a {
			color: #006000;
			text-decoration: underline;}

			#spyskaart a:hover {
			color: #008000;
			text-decoration: none;}

			.items {
				margin:0;
				padding:0 20px 0 20px;
				float:left;}

			.items2 {
				margin:0;
				padding:0 0 0 90px;
				float:left;}

			.items3 {
				margin:0;
				padding:0 0 0 25px;
				float:left;}

		#hooffoto {
			width: 960px;
			height: 420px;
			position: relative;
			padding: 0;
			margin:0;}

			#fotoraam {
				width: 930px;
				height: 380px;
				position: absolute; 
				top:0px;
				left:0px;
				padding: 40px 0 0 30px;
				margin:0;
				background-image: url('bates/werffotos/raam.gif');}

			#fotoraamtitel {
				width: 100%;
				height: 65px;
				top:0px;
				left:0px;
				padding: 0 0 20px 0;
				margin:0;}

			#fotoraaminlei {
				width: 100%;
				height: 200px;
				padding: 20px 0 0 0;
				margin:0;
				font-size: 13px;
				color: #FFFFFF;}

			#fotoraamfynskrif {
				width: 100%;
				height: 100px;
				padding: 0;
				margin:0;
				font-size: 10px;
				color: #FFFFFF;}

				#fotoraamfynskrif a {
					color: #ffffff;
					text-decoration: underline;}

				#fotoraamfynskrif a:hover {
					color: #ffffff;
					text-decoration: none;}

		#hooffotowinkel {
			width: 960px;
			height: 220px;
			position: relative;
			padding: 0;
			margin:0;}

			#fotoraamwinkel {
				width: 930px;
				height: 180px;
				position: absolute; 
				top:0px;
				left:0px;
				padding: 40px 0 0 30px;
				margin:0;
				background-image: url('bates/werffotos/winkelraam.gif');}

		#hoofhouer {
			width: 900px;
			position: relative;
			padding: 30px 30px 20px 30px;
			margin:0;
			font-size:11px;
			color:#404040;}

			#hoofinhoud, #hoofinhoud3, .hoofinhoud {
				width: 590px;
				position: relative;
				padding: 0 30px 10px 0;
				margin:0;
				float:left;
				font-size:11px;
				color:#404040;}

				#boek, #boek2 {
					position: relative;
					padding: 0 0 30px 0;
					margin:0;
					float:left;}

				#boekskakels, #boekskakels2 {
					position: relative;
					padding: 40px 0 0 10px;
					margin:0;
					float:left;
					font-size:11px;
					line-height:165%;}

					#hoofinhoud a, #hoofinhoud3 a, #hoofhouer a, .hoofinhoud a, #hoofinhoud2 a {
					color: #006000;
					text-decoration: underline;}

					#hoofinhoud a:hover, #hoofinhoud3 a:hover, #hoofhouer a:hover, .hoofinhoud a:hover, #hoofinhoud2 a:hover {
					color: #008000;
					text-decoration: none;}

			#hoofinhoud2 {
				width: 100%;
				position: relative;
				padding: 0 0 10px 0;
				margin:0;
				float:left;
				font-size:11px;
				color:#404040;}

			#kantinhoud, #aanhaal, #kantinhoud2, .kantinhoud {
				width: 250px;
				position: relative;
				padding: 10px;
				margin:20px 0 20px 0;
				float:left;
				font-size: 11px;
				color:#404040;
				border: dotted 2px #404040}

			#kanthouer, .kanthouer {
				width: 270px;
				position: relative;
				padding: 0;
				margin: 0;
				float:left;
				font-size: 11px;
				color:#404040;}

				#kanthouer a, #kantinhoud a, #kantinhoud2 a, .kanthouer a {
				color: #006000;
				text-decoration: underline;}

				#kanthouer a:hover, #kantinhoud a:hover, #kantinhoud2 a:hover, .kanthouer a:hover {
				color: #008000;
				text-decoration: none;}

			#subinhoud {
				width: 270px;
				position: relative;
				padding: 0;
				margin:20px 0 0 0;
				float:left;
				font-size: 11px;
				color:#404040;
				border: solid 2px #404040}

		#voetstuk {
			width: 900px;
			position: relative; 			 
			padding: 30px 30px 0 30px;
			margin:0;
			font-size: 11px;
			color: #000000;}

			#voetstuk a {
			color: #006000;
			text-decoration: underline;}

			#voetstuk a:hover {
			color: #008000;
			text-decoration: none;}

			#voetstukkitslys {
				width: 75px;
				float:left;
				padding: 0 0 10px 0;
				margin:0;
				line-height: 160%;
				color:#800000;}

			#voetstukregte {
				width: 245px;
				height: 125px;
				float:left;
				padding: 0 0 0 30px;
				margin:0;
				background-image: url('bates/grafika/lyntjie.gif');
				line-height: 160%;
				color:#800000;}

			#voetstukbemarking {
				float:right;
				margin:0;}

			#voetstukhannes {
				width: 350px;
				float:left;
				padding: 0 0 30px 0;}

			#voetstuklogos {
				float:right;
				margin:0;}

		h1, h2 {
			font-weight: normal;
			margin:0;
			padding: 0 0 15px 0;
			color: #000000;
			font-size: 20px;} 

		h3 {
			font-weight: normal;
			margin:0;
			padding: 0 0 15px 0;
			color: #000000;
			font-size: 14px;} 

		img {border:0;}

		.aflewervorm {
			font-size:11px;
			color:#4e3800;
			border: 1px solid #400000;
			margin-top:5px;
			padding:5px;
			width:150px;}

		select {
			font-size:11px;
			color:#4e3800;
			margin-top:5px;
			padding:5px;
			border: 1px solid #400000;}


		/*
		START |··················· HACK to get FOOTER acting the same in FireFox as IE
		*/

		#xleser {
			clear:both;
			height:1px;
			overflow:hidden;
			background:#FFFFFF;}

		.xleser {
			clear:both;
			height:1px;
			overflow:hidden;
			background:#FFFFFF;}