/*
SMEETS

Verticaal geen footer template CSS

Kleuren stalen:

body: #949393

header alternatief: #b60000 (Voor als de slice niet geladen kan worden)
footer: alternatief: #b60001 (Voor als de slice niet geladen kan worden)


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: 0px;
	margin: 0px;
	border: none;
}
/******************************************
** TOOLS
******************************************/
.clear {
	clear: both; /* Clearen na een float */
}

.borderTest {
	border: 1px solid red;
}


/******************************************
** TYPOGRAFIE en GLOBALE TAGS
******************************************/
h1 {
	font-family: Arial, "Times New Roman", Times, serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	color: #00baff;
}

h2 {
	font-family: Arial, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	color: #00baff;
}

h3 {
	font-family: Arial, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #00baff;
}

a {
	text-decoration: none;
	outline-style: none;
	color: #ffffff;
}

img {
	border: medium none;
}

form{
height: 100%;
}

/******************************************
** STRUCTUUR
******************************************/

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	height: 100%;
	background:url("/upload/3311_bg_pagewrap.jpg") center center repeat-y #363636;
}

#pagewrap {
	margin: 0 auto;
	width: 1000px;
	background: url("/upload/3311_bg_pagewrap.jpg") repeat-y #5D5D5D;
	position: relative;
	}
	 /* Header */
	#header {
		width: 1000px;
		height: 221px;
		overflow: hidden;
		background: url("/upload/3311_header_bg.jpg") no-repeat #5D5D5D;
		}
	
		#header h1 { /* Wegwerken van de h1 header in het logo */
			text-indent: -9999px;
			height: 0px;
			width: 0px;
		}
	
	/* Content */
	#content {
		width: 1000px;
		background: url("/upload/3311_bg_pagewrap.jpg") repeat-y #5D5D5D;
		margin: 0;
		position: relative;
		min-height: 600px;
		}
		
		#sidebar {
			width: 200px; /* breedte van je sidebar */
			height: 547px;
			display: inline;
			float: left;
			background: url("/upload/3311_sidebar_bg.jpg") repeat-y top left;
			}
			
			#sidebar_info {
				position: relative;
				left: 35px;
				font-size: 1.1em;
				margin-top: 200px;
			}
		
				/* Verticale navigatie */
			ul#navigatie {
					display: block;
					width: 200px; /* breedte van button */
					height: 297px; /* hoogte van buttons bij elkaar */
					margin: 35px 0 0 0; /* de X en Y coordinaat van het menu binnen DIV (links boven) */
				}
				
				ul#navigatie li {
					display: inline; /* IE6 fix */
					float: left;
					background: url(/upload/3311_buttie.jpg);
					height: 33px;
					}
					
					ul#navigatie li a {
						display: inline;
						width: 158px; /* breedte van button */
						height: 33px;
						float: left;
						margin-left: 40px;
						text-align: left;
						color: red;
						font-weight:bold;
						font-familly: Arial;
						font-size: 18px;
						line-height: 35px;
						}
					
						/* het invoegen van de verschillende buttons */

					
					ul#navigatie li a:hover { /* bij rollover, uitlijnen naar onder zodat rollover state zichtbaar is */
						color: #FFFFFF;
						text-decoration: underline;
						background-position: bottom-left;
					}

		#contenttext {
			width: 780px;
			padding: 10px 0px 0px 20px;
			display: inline;
			float: left;
			margin: 0 0 0 0;
		}
		
		#contenttext_left {
			width: 370px;
			margin: 0 20px 0px 0px;
			float: left;
			line-height: 20px;
			text-align: left;
		}
			
		#contenttext_right {
			width: 322px;
			float: right;
			text-align: right;
		}
		
		#slideshow{
			margin: 0px;
			float: right;
			width: 320px;
			height: 240px;
		}
		#button_occasions{
			border: 1px solid #363636;
			margin: 20px 0 0 0;
			float: left;
			width: 330px;
			height: 127px;
		}
		#button_routeplanner{
			border: 1px solid #363636;
			margin: 20px 0 0 0;
			float: right;
			width: 362px;
			height: 126px;
		}
		.link{
			text-decoration: underline;
			color: #EAEAEA;
		}
		.titel{
		color: #00BAFF;
		font-size: 20px;
		}
		.mail {
		    text-decoration: underline;
			color: #EAEAEA;
		}
		
		/* 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: 1000px;
		height: 100px;
		overflow: hidden;
		margin: 0 auto;
		bottom: 0px;
		background: url("/upload/4075_background_footer.jpg") no-repeat;
	}
	
		#footer #copyright {
			float: left;
			padding: 45px 0 0 45px;
		}
	
			#footer #copyright h3 {
				font-size: 13px;
				font-weight: normal;
				font-style: normal;
				margin: 0;
				padding: 0;
			}
			
				#footer #copyright h3 a {
					color: #FFFFFF;
					text-decoration: underline;
				}
				
				#footer #copyright h3 a:hover {
					text-decoration: none;
				}
