/*
		____________________________________________________

		Project/Projek: Oudtshoorn
		Author/Outeur: Herman Lochner
		____________________________________________________

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

		body {
			font-size: 11px;
			margin: 0;
			padding: 0;
			text-align:center;
			font-family: verdana,arial,helvetica,sans-serif;
			background: #2f2e19 url('bates/grafika/knoppiesagtergrond.gif');
			}

		a {
			color: #0176ff;
			text-decoration: none;
			}

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


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

		#panorama {
			width:100%;
			height:277px;
			position: absolute;
			top:0;
			left:0;
			padding: 0;
			margin: 0;
			background: url('bates/grafika/panorama.jpg') no-repeat top center;
			}

			#kophouer {
				width: 960px;
				height: 100px;
				position: relative; 
				padding: 0;
				margin: 0 auto;
				text-align:left;
				font-size: 10px;
				}

				#logo {
					position: absolute;
					top:0;
					left:0;
					width:420px;
					height:65px;
					padding:0;
					margin:0;
					background: url('bates/grafika/oudtshoornlogo.gif');
					}

				#taalkeuse {
					position: relative;
					float:right;
					padding:0 15px 0 15px;
					margin:0;
					}

					#taalkeuse select {
						font-size:10px;
						font-family: verdana,arial;
						}

				.hoofstroomaktief {
					position: relative;
					float:right;
					padding:8px 10px 0 10px;
					background: url('bates/grafika/knoppiesvel_groen.gif');
					}

				.hoofstroomonaktief {
					position: relative;
					float:right;
					padding:8px 10px 0 10px;
					}

			#spyskaarthouer {
				width:100%;
				position: absolute;
				top:100px;
				left:0;
				padding: 0;
				margin: 0;
				z-index:3;
				}

				#spyskaart {
					width: 960px;
					height: 30px;
					position: relative; 
					padding: 0;
					margin: 0 auto;
					background: #000;
					font-size:11px;
					text-align:left;
					z-index:4;
					}

					.spyskaartaktief {
						height:22px;
						position: relative;
						float:left;
						padding:8px 10px 0 10px;
						background: url('bates/grafika/knoppiesvel_oranje.jpg');
						}

					.spyskaartonaktief {
						height:30px;
						position: relative;
						float:left;
						padding:0;
						margin:0;
						color:#fff;}

					.spyskaartonaktiefregs {
						height:30px;
						position: relative;
						float:right;
						padding:0;
						margin:0;
						color:#fff;}

					.spyskaartspasie {
						height:30px;
						width:130px;
						position: relative;
						float:left;
						padding:0;
						margin:0;}

			#wowhouer {
			 	width:100%;
				position: absolute;
				top:130px;
				left:0;
				padding: 0;
				margin: 0;}

				#woweffek {
					width:955px;
					height:360px;
					position: relative;
					padding: 0 0 5px 5px;
					margin: 0 auto;
					background: #000;
					z-index:0;
					}

				#inhoudeffek {
					width: 950px;
					height: 200px;
					position: relative;
					padding: 0 5px 5px 5px;
					margin: 0 auto;
					background: #000;
					}

			#slakspoor {
				width: 945px;
				height: 22px;
				position: absolute;
				top: 352px;
				left:0;
				padding: 8px 0 0 15px;
				margin: 0 auto;
				text-align:left;
				color:#bfb979;
				font-size:10px;
				z-index:1;
				}

		#tuisinhoudhouer {
			width: 960px;
			position: relative;
			top:520px;
			padding: 0;
			margin: 0 auto;
			}

			#linkshouer {
				width:430px;
				float:left;
				padding:0;
				margin:20px 0 0 0;
				text-align:left;
				}

				.infoboks {
					width:396px;
					background:#fff;
					padding:15px;
					margin:0;
					color:#444;
					line-height:150%;
					border-top: 2px solid #000;
					border-left: 2px solid #000;
					border-right: 2px solid #000;
					}

				.infoboks_deurskynend {
					width:400px;
					padding:17px;
					margin:15px 0 0 0;
					color:#bfb979;
					line-height:150%;
					}

				.kliekboks, .kliekboks_deurskynend {
					height:22px;					
					margin: 0;
					padding: 8px 15px 0 15px;
					text-align:right;
					}

				.kliekboks {
					width:396px;
					border-bottom: 2px solid #000;
					border-left: 2px solid #000;
					border-right: 2px solid #000;
					}

				.kliekboks_deurskynend {
					width:398px;
					}

					.kliekboks a, .kliekboks_deurskynend a, .sub_kliekboks a, .sub_kliekboks_deurskynend a, .pylskakel a  {
						color: #fff;
						text-decoration: none;
						}

					.kliekboks a:hover, .kliekboks_deurskynend a:hover, .sub_kliekboks a:hover, .sub_kliekboks_deurskynend a:hover, .pylskakel a:hover {
						color: #fff;
						text-decoration: underline;
						}
						
					.kliekboks ul, .kliekboks_deurskynend ul, .sub_kliekboks ul, .sub_kliekboks_deurskynend ul, .pylskakel {
						padding:0;
						margin:0;
						list-style-image:url("bates/grafika/skakelpyl.gif");
						float:right;
						}

					.inhoudpyl {
						padding:0;
						margin:0 0 0 40px;
						list-style-image:url("bates/grafika/inhoudpyl.gif");					
						}

					.infoboks_deurskynend ul {
						margin:0;						
						}

					.pylskakel, .kollig_pylskakel {
						padding:0;
						margin:0 0 0 20px;
						list-style-image:url("bates/grafika/skakelpyl.gif");					
						}

						.pylskakel a, .inhoud_voetstuk a  {
							color: #fff;
							text-decoration: none;
							}

						.pylskakel a:hover, .inhoud_voetstuk a:hover {
							color: #fff;
							text-decoration: underline;
							}
						
						.kollig_pylskakel a, .kolliginfo a, #slakspoor a {
							color: #83bfff;
							text-decoration: none;
							}

						.kollig_pylskakel a:hover, .kolliginfo a:hover, #slakspoor a:hover {
							color: #dcff83;
							text-decoration: underline;
							}

			#middelhouer {
				width:250px;
				float:left;
				padding:0 0 0 15px;
				margin:20px 0 0 0;
				}

				.sub_infoboks {
					width:216px;
					padding:15px;
					margin:0;
					color:#23230d;
					line-height:150%;
					border-top: 2px solid #23230d;
					border-left: 2px solid #23230d;
					border-right: 2px solid #23230d;
					text-align:left;
					}

				.sub_kliekboks, .sub_kliekboks_deurskynend {
					height:22px;					
					margin: 0 0 15px 0;
					padding: 8px 15px 0 15px;
					text-align:right;
					}

				.sub_kliekboks {
					width:216px;
					border-bottom: 2px solid #000;
					border-left: 2px solid #000;
					border-right: 2px solid #000;
					}

					.toplys {
						padding:2px 4px;
						background:#23230d;
						color:#fff;
						font-size:12px;
						font-weight:normal;
						}

			#regshouer {
				width:250px;
				float:right;
				padding:0;
				margin:20px 0 0 0;
				font-size:11px;
				color:#bfb979;
				text-align:left;
				}

		#inhoudhouer2 {
			width: 960px;
			position: relative;
			top: 380px;
			padding: 0;
			margin: 0 auto;
			}

		#inhoudhouer {
			width: 960px;
			position: relative;
			top: 435px;
			padding: 0;
			margin: 0 auto;
			}

			#hoofinhoudhouer {
				width: 710px;
				position: relative;
				float:left;
				padding:0;
				margin: 0;
				}

				.hoofinhoud1 {
					width: 650px;
					position: relative;
					padding: 15px 15px 0 15px;
					margin: 0;
					text-align:left;
					color:#bfb979;
					line-height:150%;
					}

				.hoofinhoud_lede {
					position: relative;
					padding: 15px;
					margin: 15px 0 0 0;
					text-align:left;
					color:#404040;
					line-height:150%;
					background:#ffffff;
					border: 2px solid #000;
					}

				.hoofinhoud2 {
					width: 631px;
					position: relative;
					padding: 15px;
					margin: 0;
					text-align:left;
					color:#404040;
					line-height:150%;
					background: #fff;
					border-top: 5px solid #800b0e;
					border-bottom: 2px solid #000;
					border-left: 2px solid #000;
					border-right: 2px solid #000;
					}

					.inhoud_voetstuk {
						width: 665px;
						position: relative;
						padding: 0;
						margin: 0;
						text-align:left;
						color:#fff;						
						}

				.hoofinhoud3 {
					width: 676px;					
					position: relative;
					padding: 0;
					margin: 0;
					text-align:left;
					line-height:150%;
					background: #bfb979;
					border-bottom: 2px solid #000;
					border-left: 2px solid #000;
					border-right: 2px solid #000;
					}

					.hoofinhoud_titel {
						width: 676px;
						position: relative;
						margin: 0;
						padding: 0 0 5px 0;
						text-align:left;
						border-top: 2px solid #000;
						border-left: 2px solid #000;
						border-right: 2px solid #000;
						background:#23220d;
						color:#bfb979;
						}

				#ledeinhoud {
					width: 650px;
					position: relative;
					padding: 15px;
					margin: 0;
					text-align:left;
					color:#fff;
					line-height:150%;
					}

					.kontakboks_titel {						
						height:22px;					
						margin: 0;
						padding: 8px 15px 0 15px;
						border-top: 2px solid #23230d;
						border-left: 2px solid #23230d;
						border-right: 2px solid #23230d;
						border-bottom: 1px solid #23230d;
						color:#fff;
						}

					#ledeinhoud_titel {	
						height:22px;					
						margin: 0;
						padding: 8px 15px 0 15px;
						width:661px;
						}

					.kontakboks_titel {						
						width:216px;
						background:#800000;
						}

					.kontakboks {
						width:216px;
						padding:15px;
						margin: 0;
						color:#23230d;
						line-height:150%;
						border-bottom: 2px solid #23230d;
						border-left: 2px solid #23230d;
						border-right: 2px solid #23230d;
						text-align:left;
						}

				.lededetail {
					position: relative;
					float:left;
					margin: 0;
					padding: 5px 10px 5px 5px;					
					}

					.lededetail2, .lededetail4 {
						position: relative;
						float:left;
						margin: 0;
						padding: 5px 10px 5px 10px;
						height:16px;
						}

					.lededetail3 {
						position: relative;
						float:left;
						margin: 0;
						padding: 5px 10px 5px 10px;
						}

				.titel {	
					width:130px;
					height:20px;
					position: relative;
					float:left;
					text-align:right;
					padding:0 10px;
					color:#000;
					}

				.inhoud {
					height:20px;
					position: relative;
					float:left;
					padding:0;
					}

				.inhoudlinks {
					width:290px;
					position: relative;
					float:left;
					padding:20px 10px 0 0;
					}

				.inhoudregs {
					width:330px;
					position: relative;
					float:left;
					padding:20px 0 0 0;
					}

			#kantinhoud {
				width: 250px;
				position: relative;
				float:left;
				padding: 0;
				margin: 0;
				text-align:left;
				color:#fff;
				}

			#voetstuk {
				width: 945px;
				position: absolute;
				left:0;
				padding: 0 0 30px 15px;
				margin: 0;
				text-align:left;
				color:#bfb979;
				line-height:150%;
				float:left;}

				#voetstuk a {
					color: #83bfff;
					text-decoration: none;}

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

				.werflys {
					position: relative;
					float:left;
					padding: 0;
					margin: 15px 17px 0 0;
					font-size:10px;
					}


					.werflys li {
						list-style-type: none;
						}

					.werflys ul {
						padding:0;
						margin:0;
						}

/*
	    |························· DIV ELEMENTS
   END  |
--------|
  START |
	    |························· KIESLYS
*/

		/* 
		Kieslys Uitleg 
		ul.kieslys = hoof kieslysopsie | .kieslys ul = sub kieslysopsie
		Moet gesny word 
		*/

		ul.kieslys {
			list-style-type: none;
			display: inline;
			padding:0;
			margin:0;
			display: table;
			}

		.kieslys ul {
			list-style-type: none;
			padding: 5px 0 5px 0;
			margin:0;
			color: #000;
			}

		ul.block {
			width: 100%;
			}

		ul.kieslys>li {
			display: table-cell;
			position: relative;
			height:13px;
			padding:8px 15px 9px 15px;
			}

		ul.kieslys li>ul {
			display: none;
			position: absolute;
			top:30px;
			left:0;
			margin:0;
			}

		ul.kieslys li:hover>ul{
			display : block;
			}

		.kieslys ul li a {
			display: block;
			padding: 3px 19px;
			white-space:nowrap;
			}

		/* Kieslys Stylvel*/

		ul.kieslys {
			background-color: #000;
			color: #fff;
			}

		.kieslys ul, .kieslys ul li a {
			background: #e2e5c5;
			color: #0176ff;
			border: 1px solid #e2e5c5;
			}

		ul.kieslys li:hover{
			background: #dad826;
			color: #000;
			}

		.kieslys ul li a:hover {
			background: #ceff01;		
			color: #000;
			}

		.kieslys ul li a:hover {
			border-top: 1px dotted #999999;
			border-bottom: 1px dotted #999999;
			}

		ul.kieslys li:active, .kieslys ul li a:active {
			background-color: #ff0;
			color: #000;
			}

		.kieslys ul {
			border-left: 1px solid #e2e5c5;
			border-bottom: 1px solid #e2e5c5;
			border-right: 1px solid #e2e5c5;
			}

		.kieslys a {
			text-decoration: none;
			}


		/* 
		Kieslys Uitleg NUUT
		*/

		.kieslysnuut {
			height:30px; 
			position:relative; 
			z-index:100;
			float:left;
			background:#000;
			}

		.kieslysnuut ul {
			float:left;
			padding:0;
			margin:0;
			list-style-type:none;
			white-space:nowrap;
			}

		.kieslysnuut li {
			display: table;
			width:160px;
			position:relative;
			width:0;
			}

		.kieslysnuut li li {
			width:160px;
			position:relative;
			}

		.kieslysnuut a, .kieslysnuut a:visited, .ledeskakel a, .ledeskakel a:visited {
			display:block;
			font-size:11px;
			text-decoration:none;
			color:#fff;
			height:30px;
			background:#000;
			padding:0 15px;
			line-height:30px;
			}

		.kieslysnuut ul ul {
			visibility:hidden;
			position:absolute;
			height:0;
			top:30px;
			left:0;
			}

		.kieslysnuut table {
			position:absolute;
			top:0;
			left:0;
			border-collapse:collapse;
			}

		.kieslysnuut a:hover, .kieslysnuut ul ul a:hover, .ledeskakel a:hover {
			color:#000;
			background:#fac800;
			}

		.kieslysnuut :hover > a {
			color:#000;
			background:#fac800;
			width:80px;
			}

		.kieslysnuut ul ul :hover > a {
			color:#000;
			background:#fac800;
			width:130px;
			}

		.kieslysnuut ul li:hover ul, .kieslysnuut ul a:hover ul{
			visibility:visible;
			}

/*
	    |························· KIESLYS
   END  |
--------|
  START |
	    |························· MISCELLANEOUS ELEMENTS
*/

		form {
			margin:0;
			padding:0;}

		h1, h5 {
			font-weight: bold;
			font-size: 24px;
			padding:5px 0 15px 0;
			margin: 0;
			font-family: arial,verdana,helvetica,sans-serif;
			} 

		h1 {
			color: #800000;
			}	

		h2 {
			font-weight: bold;
			margin:0;
			padding: 5px 0 5px 0;
			color: #2f2e19;
			font-size: 16px;
			font-family: arial,verdana,helvetica,sans-serif;			
			} 

			.h2_kleur {
			color:#800000;
			/* border: 1px solid #000; */
			}

		h3 {
			font-weight: normal;
			margin:0;
			padding:0;
			float:left;
			color: #bfb979;
			font-size: 16px;
			font-family: arial,verdana,helvetica,sans-serif;			
			} 

		h4 {		
			font-size:10px;
			font-weight: bold;
			color: #bfb979;
			padding:0;
			margin:0;
			}

		h6 {		
			font-size:14px;
			font-weight: bold;
			color: #fac800;
			padding:0;
			margin:0;
			font-family: arial,verdana;
			}

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

		select {
			font-size:11px;
			color:#4e3800;
			margin-top:5px;
			padding:0;}

		textarea {
			font-size:11px;
			color:#4e3800;
			margin-top:5px;
			padding:0;
			width:500px;
			height:100px;}

		label {
			color:#000;}

		.versteek {
			color:#000;}

/*
	    |························· DIV ELEMENTS
   END  |
--------|
  START |
	    |························· X-Browser 
*/

		.xleser {
			clear:both;
			height:0;
			width:0;
			overflow:hidden;}

		.xleserlyn {			
			width:100%;
			height:1px;
			background:#000;
			overflow:hidden;
			}

		.sub_titel {
			font-weight: bold;
			font-size: 13px;
			font-family: arial,verdana,helvetica,sans-serif;	
			}

		.regs {
			float:right;
			}

		.links {
			float:left;
			}

		.booknow {
			padding:4px;
			margin:0;
			background:#fac800;
			border: 1px solid #443600;
			color:#000;
			font-size:10px;
			}

					.lededetail2 a {
						color: #000;
						text-decoration: none;
						}

					.lededetail2 a:hover {
						color: #000;
						text-decoration: none;
						background:#23220d;
						}

					.lededetail4 a {
						color: #000;
						text-decoration: none;
						}

					.lededetail4 a:hover {
						color: #000;
						text-decoration: none;
						background:#ffff00;
						}

		.kolligfoto {
			width:250px;
			height:200px;
			padding:0;
			margin:0;
			float:left;
			}

			.kolligraam {
				width:250px;
				height:200px;
				padding:0;
				margin:0;
				background: url('bates/grafika/kolligraam.gif') 0 0  no-repeat;
				text-align:left;
				}

			.kolliginfo {
				width:390px;
				padding:15px 15px 15px 25px;
				margin:0;
				float:left;
				color:#f0eeda;
				text-align:left;
				line-height:150%;
				}

			.kolligtabel {
				width:80px;
				float:left;
				}

		.twaalfpieksels {
			font-size:12px;
			}

		.onderskrif {
			padding:15px;
			margin:0;
			color:#f0eeda;
			text-align:left;
			line-height:165%;
			font-size:10px;
			}


		.booking {
			padding:5px;
			margin:0;
			background:#fac800;
			border: 1px solid #443600;
			color:#000;
			font-size:14px;
			border: 2px solid #000;
			}

					.booking a {
						color: #000;
						text-decoration: none;
						}

					.booking a:hover {
						color: #000;
						text-decoration: none;
						}

		.kango {
			width:85px;
			float:left;
			color:#000;
			}

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

		select {
			font-size:11px;
			color:#4e3800;
			margin-top:5px;
			padding:0;}

		textarea {
			font-size:11px;
			color:#4e3800;
			margin-top:5px;
			padding:0;
			width:500px;
			height:100px;}

		label {
			color:#000000;}