/*
Horizontaal met footer

Kleuren stalen:

body: #949393
pagewrap: #7A7A7A

header alternatief: #b60000
content: #7A7A7A


Aanpassen van de opbouw van de website kan vanaf STRUCTUUR.
Aanpassen van de typografie (fonts e.d.) in het gedeelte TYPOGRAFIE en GLOBALE TAGS
Voor het gebruik van het horizontale menu is aangegeven waar waardes moeten worden aangepast.
*/

/******************************************
** RESETS
******************************************/

* {
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
}

/******************************************
** TOOLS
******************************************/

.clear {
	clear: both; /* Clearen na een float */
}

html>body #header {
	z-index: 10; /* Prevent certain problems with form controls */
}

html>body #footer {
	z-index: 10; /* Prevent certain problems with form controls */
}

/******************************************
** TYPOGRAFIE en GLOBALE TAGS
******************************************/

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}

h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 60px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}

h3 {
	font-family: 'Raleway', sans-serif;
	font-size: 50px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}

h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}

	h6 a {
		color: #FFFFFF;
		text-decoration: underline;
	}
	
		h6 a:hover {
			text-decoration: none;
		}

a {
	text-decoration: underline;
	color: #FFFFFF;
}

	a:hover {
		text-decoration: none;
	}

/******************************************
** STRUCTUUR
******************************************/

html {
	margin: 0;
	padding: 0;
	background: url("images/bg-2.jpg") repeat-x scroll center 30px rgba(0, 0, 0, 0)
}

body {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	background: url("images/bg-new.jpg") top center repeat-x ;
}

#pagewrap {
	margin: 0 auto;
	position: relative;
	width: 1020px;

}

	/* Header */
	#header {
		width: 1020px;
		height: 83px;
		overflow: visible;
		position: relative;
	}
	
		#header h1 {
			position: absolute;
			left: 95px;
			top: 20px;
			font-size: 12px;
			font-weight: bold;
			text-shadow: 1px 1px 1px #fff;
			color: #909090
		}
		
		#header .logo{
			/*background: url("images/logo.png") no-repeat;*/
			width: 65px;
			height: 92px;
			position: absolute;
			left:0;
			top: 0;
		}	
		
		#header .taal {
			position: absolute;
			right: 139px;
			top: 25px
		}
		
		h2.home {
			font-family: 'Raleway', sans-serif;
			font-size: 60px;
			font-style: normal;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 2px 2px  #000;
			position: absolute;
			top: 110px;
			right: 0
		}
		
		.block {
			position: absolute;
			right: 0;
			width: 500px;
			text-align: center;
			color: #fff;
			text-shadow: 2px 2px #000;
			top: 180px;
			line-height: 22px;
		}
		
		.link p {
			padding-top: 13px;
		}
		
		.button {
			width: 198px;
			height: 48px;
			background: url("images/btn.png") top center no-repeat;
			line-height: 48px;
			margin-left:160px;
			color: #fff;
		}
		
		.button:hover {
			background-position: bottom right;
		}
		
		h2.home::-moz-selection, .block p::-moz-selection, .block h3::-moz-selection
		{  
			background-color: rgb(204,0,0); /* Old browsers */
			background-color: -moz-linear-gradient(-45deg,  rgba(204,0,0,1) 0%, rgba(204,0,0,1) 100%); /* FF3.6+ */
			background-color: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(204,0,0,1)), color-stop(100%,rgba(204,0,0,1))); /* Chrome,Safari4+ */
			background-color: -webkit-linear-gradient(-45deg,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
			background-color: -o-linear-gradient(-45deg,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* Opera 11.10+ */
			background-color: -ms-linear-gradient(-45deg,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* IE10+ */
			background-color: linear-gradient(135deg,  rgba(204,0,0,1) 0%,rgba(204,0,0,1) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}  
		
		.block h3 {
			font-size: 40px;
		}
		
		/* Horizontale navigatie */
		ul#navigatie {
			display: block;
			width: 960px;
			height: 30px;
			padding: 0 20px;
			background: #525051 ;
		}
		
			ul#navigatie li {
				display: inline;
				overflow: hidden;
				line-height: 30px; /* hoogte van button (voor IE6) */
			}
				
				ul#navigatie li a {
					float: left;
					display: block;
					line-height: 30px;
					text-decoration: none;
				}
				
					ul#navigatie li a:hover {
						color: red;
					}
				

	/* Content */
	#content {
		width: 1020px;
		position: relative;
		min-height: 608px
	}
		
		#contenttext {
			width: 960px;
			padding: 20px;
			line-height: 24px;
		}
		
			#contenttext_left {
				width: 322px;
				float: left;
				text-align: left;
			}
			
			#contenttext_right {
				width: 618px;
				float: right;
				text-align: right;
			}
			
			.link {
				background: url("images/bg_block.jpg") repeat-x scroll 0 0 #454545;
				float: left;
				height: 228px;
				line-height: 20px;
				margin-bottom: 15px;
				margin-right: 5px;
				margin-top: 20px;
				padding: 5px;
				position: relative;
				text-align: center;
				text-shadow: 1px 1px 1px #000000;
				width: 206px;
			}

			.link-btn {
				background: url("images/btn_link.png") top left no-repeat;
				width: 173px;
				height: 40px;
				text-align: center;
				line-height: 41px;
				left: 20px;
				position: absolute;
				bottom: 10px;
			}
			
			.link-btn:hover {
				background-position: bottom right;
			}
			
			.linkje {
			text-decoration:none;
			}
			
			.tekst {
			bottom: 0;
			height: 53px;
			left: 14px;
			position: absolute;
			width: 820px;
		}
					
			.tekst h3 {
				font-size: 18px;
				
			}
			/* Laatst toegevoegde occasions */
			#gallery {
				text-align: left;
				position: relative;
				width: 320px;
				height: 240px;
				border: 1px solid #000000;
				overflow: hidden;
				line-height: normal;
			}

				#gallery a {
					float: left;
					position: absolute;
				}

					#gallery a img {
						width: 320px;
						height: 240px;
					}

					#gallery a.show {
						z-index: 500;
					}

				#gallery .caption {
					z-index: 600; 
					background-color: #3A6A92; 
					color: #FFFFFF;
					width: 320px; 
					position: absolute;
					bottom: 0px;
				}

					#gallery .caption .content {
						margin: 5px;
						color: #FFFFFF;
					}

						#gallery .caption .content h3 {
							margin: 0px;
							padding: 0px;
							color: #FFFFFF;
						}

	/* Footer */
	#footer {
		width: 1020px;
		height: 100px;
		line-height: 100px; /* Hoogte van footer */
		overflow: hidden;
		text-align: center;
		position: relative;
	}
	
	#footer span {
			font-weight: normal;
		}
		
	/* STYLE VOOR CONTACT FORMULIER */
#note {
    left: -185px;
    position: absolute;
	bottom: 62px;
}

#notification_error {
    background: rgb(255,48,25); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
	background: linear-gradient(135deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border: 1px solid #000;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 12px;
    padding: 20px;
}

#notification_ok {
	font-family: Verdana;
	font-size: 12px;
	padding: 20px;
	background: #B1DD00;
	color: #000000;
	border: 1px solid #000000;
	font-weight: bold;
	text-align: center;
}

#form {
	float:right;
}

input.textbox {
	font-family: Verdana;
	font-size: 12px;
	color: #484848;
	border: 1px solid #434343;
	height: 19px;
	line-height: 19px;
	width: 250px;
	background: #EFEFEF;
	float: left;
	margin-top: 1px;
}

.small {
	width: 123px !important
}

input.textbox:focus {
	border: 1px solid #545454;
	color: #000000;
	background: #fff
}

textarea.textbox {
	font-family: Verdana;
	font-size: 12px;
	color: #484848;
	border: 1px solid #000000;
	padding: 10px;
	width: 230px;
	height: 42px;
	background: #EFEFEF
}

select.selectbox {
	font-family: Verdana;
	font-size: 12px;
	color: #484848;
	border: 1px solid #000000;
	width: 250px;
	height: 21px;
	line-height: 21px;
	background: #EFEFEF
}


textarea.textbox:focus {
	border: 1px solid #545454;
	color: #000000;
	background: #fff
}

#form_row {
	width: 100%;
	margin-bottom: 12px;
	height: 19px;
	line-height: 19px;
	text-align: left;
}

	#form_row .textarea {
		height: 100px;
	}


#form_left {
    float: left;
    font-size: 12px;
    font-weight: bold;
    width: 186px;
}			

#form_right {
	float: left;
}