/*

Standard stylesheet for Kaars Koffie
(c) 2010 - Slik BV - http://www.slik.eu

*/

/*******************************************************************************************

		RESETCODE FOR BROWSER COMPATIBILITEIT 
		reset.css - by Eric Meyer | v1.0 | 20080212

*******************************************************************************************/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
h1 span, h2 span { display: none;}
input { border: none; }
.clear { clear: both;}

/*******************************************************************************************

		STANDAARD STYLING

*******************************************************************************************/

body { 
	color: white;
	font-family: Arial, Verdana, Tahoma;
	font-size: 12px;
	background: black; }

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

h1 { font-size: 22px; font-weight: normal; }
h2 { font-size: 20px; font-weight: normal; }
h3 { font-size: 26px; font-weight: normal; }
h4 { font-size: 18px; font-weight: normal; }
h5 { font-size: 16px; font-weight: normal; }
h6 { font-size: 14px; font-weight: normal; }

blockquote {  }
input, textarea {  }
input.button {  }

#main { 
	min-height: 100%;
	position: absolute;
	width: 100%;
	/*background: url(../gfx/smoke.jpg) no-repeat center bottom;*/ }
		
	#top { margin-bottom: 330px; }
	
	.container {
		position: relative; 
		width: 980px;
		margin: 0 auto; }
	
	a.button, input.button {
		display: block;
		font-size: 13px;
		height: 25px;
		font-weight: normal;
		width: 153px;
		color: black;
		padding: 7px 0 0 12px;
		background: url(../gfx/button.png) no-repeat; }
		input.button { 
			cursor: pointer;
			padding: 0;
			height: 32px;
			width: 165px; }
		a:hover.button, input.button:hover { background-position: 0 -32px; }
	
	.displaynone { display: none; }
	
	input[type=text], textarea {
		border: 1px solid #950001;
		padding: 6px;
		font-family: arial, verdana, tahoma;
		font-size: 12px; }
	
/* HEADER ******************************************************************************************/

	#header { 
		height: 203px;
		padding-bottom: 56px;
		background:  url(../gfx/header.gif) repeat-x 0 26px; }
		#header .container {
			background: url(../gfx/header.png) no-repeat 0 26px;
			height: 100%; }
			
			#header h1 a {
				position: absolute;
				top: 26px;
				left: 0px;
				display: block;
				height: 151px;
				width: 145px;
				background: url(../gfx/logo2.png) no-repeat; }

			ul#navigation { 
				position: absolute;
				top: 127px;
				right: 57px;
				font-size: 15px; }
				ul#navigation li { 
					float: left;
					padding-bottom: 60px;
					margin-right: 0;
					background: url(../gfx/menu_arrow.gif) no-repeat 56px 35px; }
					ul#navigation li a { 
						text-align: center;
						display: block;
						color: white;
						padding-bottom: 60px;
						width: 117px; }
						ul#navigation li a:hover { 
							color: #ecd8d8;
							background: url(../gfx/navigation_hover.png) no-repeat center bottom; }
						ul#navigation li a.active { background: url(../gfx/navigation_hover.png) no-repeat center bottom; }

			ul#metanavigation { 
				position: absolute;
				top: 35px;
				right: 42px;
				font-size: 14px; }
				ul#metanavigation li { 
					float: left;
					margin-right: 48px; }
					ul#metanavigation li a.last { margin-left: 30px; }
					ul#metanavigation li a.fairtrade { 
						padding-left: 27px;
						background: url(../gfx/fairtrade.gif) no-repeat; }
					ul#metanavigation li a {
						color: white; }


	#content {  }
		#content p { line-height: 16px; }
		
		#left { 
			width: 615px;
			float: left;
			padding-left: 5px; }
			
			#left h3, #left h4 { 
				color: #f0c95f;
				padding-bottom: 15px; }
				#left.service h3, #left.service h4 { padding-bottom: 3px; }
			#left p { padding-bottom: 15px; }
			
			.attention { 
				padding: 10px;
				background: #F0C95F;
				color: black; } 
			
			/* Automaten */
			ul.automaten li a { 
				display: block;
				width: 607px;
				height: 72px;
				background: url(../gfx/bg_coffeeselect.png) no-repeat;
				margin-bottom: 7px;
				padding: 10px 0 0 10px;
				color: white;
				font-size: 14px; }
				ul.automaten li.red a { 
					margin-top: 20px;
					height: 49px;
					padding: 15px 0 0 15px;
					background: url(../gfx/automaten_contact_red.png) no-repeat; }
				ul.automaten li.red a:hover { background-position: 0 -64px; }
				ul.automaten li a:hover { background-position: 0 -82px; }
				ul.automaten li a p {
					padding-top: 22px; }
				ul.automaten li a img { 
					float: left;
					margin: 10px 30px 0 0; }
					ul.automaten li span.machine { 
						float: left;
						display: block;
						width: 80px; }
						ul.automaten li span.machine img { margin-top: 0; }
			
			/* Contact form */
			
			span.required { 
				font-size: 11px;
				color: #c60002;
				padding-left: 5px; }
			label strong { 
				font-size: 10px; 
				color: #c60002;
				float: right; }
			input.error { background: #d6cece; }
			.contactform label.error, table.offerteform td label.error { position: absolute; top: -20px; left: 0px; color: black; }
				
			.contactform { 
				background: url(../gfx/contactform_textarea.png) no-repeat 0 20px;
				margin-bottom: 30px; }
				.contactform label { 
					display: block;
					padding: 3px 0 5px 0; }
				.contactform textarea { 
					display: block;
					background: none;
					border: none;
					width: 605px;
					height: 103px;
					margin-bottom: 30px; }
				
				.labelblock { 
					float: left;
					width: 138px;
					padding-right: 10px; }
					.labelblock label { 
						display: block;
						padding: 12px 0; }
				.fieldblock { 
					float: left;
					width: 351px; }
					.fieldblock input { 
						width: 337px;
						margin-bottom: 4px; }
						
				.contactform input.button { 
					float: left;
					margin: 2px 0 0 18px;
					display: block;
					width: 97px;
					height: 135px;
					background: url(../gfx/contactform_button.png) no-repeat;
					cursor: pointer; }
					.contactform input.button:hover { background-position: 0 -135px; }
			
				table.offerteform td { 
					vertical-align: top; 
					padding-bottom: 1px; }
					table.offerteform td label { 
						display: block;
						width: 138px;
						padding: 10px 10px 0 0;
						line-height: 16px; }
						table.offerteform td.checkbox label { display: inline; }
					table.offerteform td input[type=text] { 
						width: 455px;
						margin-bottom: 4px; }
					table.offerteform td textarea { 
						width: 455px;
						margin-top: 7px; }
					table.offerteform td select { 
						width: 180px;
						border: 1px solid #950001;
						margin-top: 7px;
						padding: 5px; }
						
					input.button#offerte { margin: 15px 0 0 148px; }
			
		#right { 
			width: 307px;
			float: right; }
			#right h2 { 
				color: #F0C95F;
				font-size: 18px;
				padding-bottom: 10px; }
			#right h3, #right h4 { 
				color: #c60002;
				font-size: 20px;
				padding: 10px 0; }
			#right h4 { color: white; font-size: 18px; }
			#right p { padding-bottom: 3px; }
				#right p strong { 
					font-size: 11px; 
					color: #c6c1c1;
					font-weight: normal; }
				#right p a { 
					color: white;
					text-decoration: underline; }
					#right p a:hover { color: #EAE6D5; }
			
			#right ul li { 
				padding-bottom: 15px; }
				#right ul li a.button { 
					margin-top: 15px; }
			
			#right table tr td { 
				padding: 5px;
				vertical-align: middle; }
			
			.slideshow { margin: 20px 0; }
			
		#automaten { 
			position: relative;
			padding-top: 0;
			padding-left: 5px; }
			#automaten h4 { 
				color: #c10001;
				font-size: 20px;
				float: left;
				width: 260px;
				padding: 20px 20px 15px 0; }
				#automaten h4.bonen { background: url(../gfx/icon_bonen_notext.png) no-repeat 110px 20px; }
				#automaten h4.freshbrew { background: url(../gfx/icon_freshbrew_notext.png) no-repeat 95px 20px; }
				#automaten h4.vriesdroog { background: url(../gfx/icon_vriesdroog_notext.png) no-repeat 98px 20px; }
			#automaten span.toggle { 
				float: left;
				padding-top: 25px; }
				#automaten span.toggle a { 
					color: #957214;
					padding-left: 10px;
					background: url(../gfx/toggle_arrow_down.png) no-repeat 0 7px; }
					#automaten span.toggle a.collapsed { background: url(../gfx/toggle_arrow_right.png) no-repeat 0 7px; } 
					#automaten span.toggle a:hover { color: #564519; } 
			
			#automaten ul.automaten li.active a { background-position: 0 -82px; }
			#automaten ul.automaten li p { float: left; width: 200px; }	
			#automaten ul.automaten li span img { margin-top: 0; }
			#automaten ul.automaten li img { margin: 18px 10px 0 0; }
			
			#automaten .intro { 
				width: 510px;
				padding: 0 0 20px 0; }
				#automaten .intro i { display: block; padding-bottom: 5px; }
			
			#automaten .popup { 
				position: absolute;
				top: 30px;
				right: 0;
				width: 415px;
				display: none; }
				
				#automaten .popup .image { 
					float: left;
					width: 200px; }
				#automaten .popup .details { 
					float: left;
					width: 215px;
					padding-top: 20px; }
					#automaten .popup .details h3 { 
						color: #f0c95f;
						padding-bottom: 10px; }
					#automaten .popup .details ul li { 
						float: left;
						margin-right: 10px; 
						margin-bottom: 20px; }
						#automaten .popup .details ul li img { margin: 15px 0 0 0; } 
				
				#automaten ul.automaten li .popup a.button {
					display: block;
					font-size: 13px;
					text-align: center;
					height: 29px;
					font-weight: normal;
					width: 203px;
					color: black;
					padding: 10px 0 0 12px;
					background: url(../gfx/button_big.png) no-repeat;
					margin-bottom: 15px; }
					#automaten ul.automaten li .popup a.button.twee { padding-top: 2px; height: 37px; }
					#automaten ul.automaten li .popup a.button.red { 
						color: white;
						background: url(../gfx/button_big_red.png) no-repeat; }
					#automaten ul.automaten li .popup a:hover.button { background-position: 0 -39px; }

	#footer { 
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 321px;
		background: url(../gfx/footer_buildings.gif) repeat-x; }
		#footer .container { 
			margin-top: 211px;
			padding-top: 20px;
			display: block;
			height: 90px;
			background: url(../gfx/footer_buildings_fades.gif) no-repeat bottom center; }
			
			#footer .container a {
				color: white;
				text-decoration: underline; }
				#footer .container a:hover { 
					color: #eae6d5; }

			#footer .container .contact { 
				float: left;
				width: 280px;
				padding-left: 10px; }
				#footer .container .contact h4 { 
					font-size: 14px;
					padding-bottom: 18px; } 
				#footer .container .contact p { 
					line-height: 16px;
					color: #cbbc96;
					float: left;
					padding-right: 25px; }
			
			#footer .container ul { 
				float: right; }
				#footer ul li {
					float: left;
					padding-left: 10px;
					font-size: 14px; }
				
			#footer .container span.support { 
				width: 280px;
				line-height: 16px;
				text-align: right;
				color: #cbbc96;
				position: absolute;
				bottom: 21px;
				right: 0; }