/*
Horizontaal met footer navigatie template CSS

Kleuren stalen:

body: #949393
pagewrap: #7A7A7A

header alternatief: #b60000
content: #7A7A7A
footer: alternatief: #b60001


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;
}

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

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

#_ctl0 {
	height: 100%;
}

form{
	height: 100%
}

/******************************************
** TYPOGRAFIE en GLOBALE TAGS
******************************************/
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	color:#08213d;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color:#08213d;

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

a {
	text-decoration: underline;
	outline-style: none;
	color: #08213d;
}

a:hover {
	text-decoration: none;
}

img {
	border: medium none;
}

p {
}

.list_fix {
	margin: 0 0 0 15px;
}

strong.bedrijfsnaam{
text-transform: capitalize;
}

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

html {
	/* height: 100%; */
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	color: #000;
	/* height: 100%; */
	background: url(/upload/3423_body_bg.jpg) repeat-x #fff;
}
#pagewrap {
	margin: 0 auto;
	/* height: 100%; */
	width: 1000px;
	/* position: relative; */
	background: url(/upload/3423_header_bgg.jpg) no-repeat top center;
	}
	 /* Header */
	#header {
		width: 1000px;
		height: 200px;	
		background: url(/upload/3423_header.gif) no-repeat;
		}
	
		#header h1 { /* Wegwerken van de h1 header in het logo */
			text-indent: -9999px;
			height: 0px;
			width: 0px;
		}

		
#menu {
    bottom: 20px;
    display: block;
    left: 50px;
    list-style: none outside none;
    position: absolute;
    width: 949px;
}
#menu .renault{
	width: 94px;
	background: url(/upload/3423_nav_renault.jpg) no-repeat;
}
#menu .r-nieuws{
	width: 97px; 
	background: url(/upload/3423_nav_nieuws.jpg) no-repeat;
}
#menu .dacia{
	width: 75px; 
	background: url(/upload/3423_nav_dacia.jpg) no-repeat;
}
#menu .occasions{
	width: 113px;
	background: url(/upload/3423_nav_occasions.jpg) no-repeat;
}
#menu .zakelijk{
	width: 106px;
	background: url(/upload/3423_nav_zakelijk.jpg) no-repeat;
}
#menu .acties{
	width: 83px; 
	background: url(/upload/3423_nav_acties.jpg) no-repeat;
}
#menu .service{
	width: 95px;
	background: url(/upload/3423_nav_service.jpg) no-repeat;
}
#menu .elektrischvervoer{
	width: 130px;
	background: url(/upload/3423_nav_elektrisch2.jpg) no-repeat;
}
#menu .contact{
	width: 93px;
	background: url(/upload/3423_nav_contact.jpg) no-repeat;
}
#menu li a{
	display:block;
	float: left;
	margin:0;
	text-decoration:none;
	height: 40px; 
	text-indent: -9999px;
	background-position: top;
}

#menu li a:hover{ /* rollover eigenschappen*/
	background-position: bottom;
}
#menu li ul a{ /* submenu eigenschappen */
	color: #08213D;
	background: #fff;
	background-image: none;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	height: 20px;
	width: 200px;
	text-indent: 15px;
	padding-top: 7px;
	font-weight: bold;
	font-size: 10pt;
	}
#menu li ul a:hover{ /* rollover submenu eigenschappen */
	height: 20px;
	color: #08213D;
	background: #ccc;
	text-decoration: none;
	background-image: none;
	}
#menu ul {
	list-style:none;
	margin:0;
	padding:0;
	}

#menu li {
	float: left;
	position: relative;
}

#menu ul ul {
    display: none;
    left: 0;
    position: absolute;
    top: 40px;
    z-index: 500;
}
#menu ul ul ul{
	top:0;
	left:100%;
}

div#menu li:hover{
	cursor:pointer;
	z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

	/* Content */
	#content {
		width: 1000px;
		background: url(/upload/3423_background_content.jpg) repeat-y #fff;
		}
		
		#contenttext {
			width: 960px;
			padding: 0px 20px 20px 20px;
			line-height: 20px;
		}
		
			#contenttext ul.referenties {
				width: 960px;
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
				#contenttext .referenties_left {
					margin: 0 10px 10px 0;
					width: 470px;
					float: left;
				}
				
				#contenttext .referenties_right {
					margin: 0 0 10px 10px;
					width: 470px;
					float: right;
				}
				
				.content_hr {
				 background: url(/upload/3423_content_hr.jpg) repeat #fff;
				 width: auto;
				 height: 1px;
				 margin-top: 15px;
				 margin-bottom: 50px;
				}
				
				#mededeling {
					border: 2px dotted #FFC21C;
					padding: 5px;
					margin: 0 0 20px 0;
					background: #000000;
					color: #FFC21C;
					text-transform: uppercase;
					font-weight: bold;
					text-align: center;
				}
		
			#banners .flash {
				margin: 0 0 5px 0;
			}
			
			.bedrijfswagens_div {
				width: 750px;
				padding: 20px 0 0 0;
				border-top: 1px dotted #DBDBDB;
			}
			
				.bedrijfswagens_div_left {
					float: left;
					text-align: left;
				}
				
				.bedrijfswagens_div_right {
					float: right;
					text-align: right;
				}
				
			.auto_div {
				width: 750px;
				padding: 20px 0 0 0;
				border-top: 1px dotted #DBDBDB;
			}
			
				.auto_div_left {
					float: left;
					text-align: left;
					width: 60%;
				}
				
				.auto_div_right {
					float: right;
					text-align: right;
					width: 40%;
				}
				
			#dorzobikes_div {
				width: 794px;
				margin: 20px auto;
			}
			
				#dorzobikes_div ul {
					display: block;
					text-align: center;
					margin: 20px 0 0 0;
					padding: 0;
				}
				
					#dorzobikes_div li {
						display: inline;
						margin: 0 30px 0 30px;
					}

	/* Footer */
	#footer {
		width: 1000px;
		height: 136px;
		overflow: hidden;
		margin: 0 auto;
		bottom: 0px;
		background: url(/upload/3423_background_footer.jpg) no-repeat #EEEEEE;
		font-size: 8pt;
		color: #999999;
		text-transform: uppercase;
		/* position: relative; */
		}

		#footer_gallery {
			background: #A9AAAB;
			padding: 1px;
		}
		
		#footer_nav {
			margin: 16px 20px 0 20px;
		}
		
			#footer_left {
				float: left;
				text-align: left;
			}
			
			#footer_right {
				float: right;
				text-align: right;
				line-height: 10px;
			}
		
		/* Horizontale navigatie */
		ul#footer_navigatie {
			font-weight: bold;
		}
			
			ul#footer_navigatie li {
				display: inline;
				overflow: hidden;
				}
				
				ul#footer_navigatie li a {
					color: #000000;
					margin-right: 20px;
					text-decoration: none;
					text-transform: uppercase;
					font-size: 8pt;
					}
					
				ul#footer_navigatie li a:hover { /* bij rollover, uitlijnen naar onder zodat rollover state zichtbaar is */
				text-decoration: underline;
				}
#text_left {
	float: left;
	width: 620px;
	text-align: left;
}

	#slideshow {
		width: 630px;
		height: 340px;
		overflow: hidden;
	}
	
		#slideshow img {
			width: 630px;
			height: 340px;
		}

#text_right {
	float: right;
	width: 320px;
	text-align: right;
}

	#werkplaats_slideshow {
		width: 320px;
		height: 240px;
	}
	
		#werkplaats_slideshow img {
			width: 320px;
			height: 240px;
		}

#footer_wrapper {
    width: 1000px;
	margin: 0;
}
#slider {
    width: 1000px;
    margin: 0 auto;
    position: relative;
	height: 83px;
	border-top: 2px solid #A9AAAB;
	border-bottom: 2px solid #A9AAAB;
	background: #A9AAAB;
}
.renaultprijs{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
text-align:center;
}
#twingo{
position:absolute;
top:20px;
left:20px;
width:300px;
height:210px;
background:  url(/upload/3423_re_Twingo.jpg) no-repeat top left;
}
#twingoprijs{
position:absolute;
top:230px;
left:20px;
width:300px;
height:20px;
}
#clio{
position:absolute;
top:20px;
left:340px;
width:300px;
height:210px;
background:  url(/upload/3423_re_Clio.jpg) no-repeat top left;
}
#clioprijs{
position:absolute;
top:230px;
left:340px;
width:300px;
height:20px;
}

#clioestate{
position:absolute;
top:20px;
left:660px;
width:300px;
height:210px;
background:  url(/upload/3423_re_ClioEstate.jpg) no-repeat top left;
}
#clioestateprijs{
position:absolute;
top:230px;
left:660px;
width:300px;
height:20px;
}

#cliogt{
position:absolute;
top:260px;
left:20px;
width:300px;
height:210px;
background:  url(/upload/3423_re_Cliogt.jpg) no-repeat top left;
}
#cliogtprijs{
position:absolute;
top:470px;
left:20px;
width:300px;
height:20px;
}

#modus{
position:absolute;
top:260px;
left:340px;
width:300px;
height:210px;
background:  url(/upload/3423_re_Modus.jpg) no-repeat top left;
}
#modusprijs{
position:absolute;
top:470px;
left:340px;
width:300px;
height:20px;
}

#kangoofamily{
position:absolute;
top:260px;
left:660px;
width:300px;
height:210px;
background:  url(/upload/3423_re_KangooFamily.jpg) no-repeat top left;
}
#kangoofamilyprijs{
position:absolute;
top:470px;
left:660px;
width:300px;
height:20px;
}

#kangoobebop{
position:absolute;
top:500px;
left:20px;
width:300px;
height:210px;
background:  url(/upload/3423_re_KangooBeBop.jpg) no-repeat top left;
}
#kangoobebopprijs{
position:absolute;
top:710px;
left:20px;
width:300px;
height:20px;
}

#meganehb{
position:absolute;
top:500px;
left:340px;
width:300px;
height:210px;
background:  url(/upload/3423_re_MeganeHB.jpg) no-repeat top left;
}
#meganehbprijs{
position:absolute;
top:710px;
left:340px;
width:300px;
height:20px;
}

#meganecoupe{
position:absolute;
top:500px;
left:660px;
width:300px;
height:210px;
background:  url(/upload/3423_re_MeganeCoupe.jpg) no-repeat top left;
}
#meganecoupeprijs{
position:absolute;
top:710px;
left:660px;
width:300px;
height:20px;
}

#meganeestate{
position:absolute;
top:740px;
left:20px;
width:300px;
height:210px;
background:  url(/upload/3423_re_MeganeEstate.jpg) no-repeat top left;
}
#meganeestateprijs{
position:absolute;
top:950px;
left:20px;
width:300px;
height:20px;
}

#scenic{
position:absolute;
top:740px;
left:340px;
width:300px;
height:210px;
background:  url(/upload/3423_re_Scenic.jpg) no-repeat top left;
}
#scenicprijs{
position:absolute;
top:950px;
left:340px;
width:300px;
height:20px;
}

/* Footer Gallery */
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float: left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url(/upload/3423_browse_buttons.jpg) no-repeat;
	display: block;
	width: 15px;
	height: 82px;
	float: left;
	cursor: pointer;
}

/* right */
a.right {
	background-position: right;
}

/* left */
a.left {
	background-position: left;
}

/* disabled navigational button */
a.disabled {
	visibility: hidden !important;		
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position: relative;
	overflow: hidden;
	width: 970px;
	height: 82px;
	/* custom decorations */
	background: #A9AAAB;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width: 20000em;
	position: absolute;
	clear: both;
	height: 82px;
}

/* single scrollable item */
.scrollable img {
	float: left;
	margin: 1px;
	background: #FFFFFF;
	cursor: pointer;
	width: 130px;
	height: 80px;
}

/* Dacia */
#dacia_table {
	width: 100%;
	text-align: center;
}

	#dacia_table td {
		padding: 0 0 10px 0;
	}

/* Renault */
#renault_table {
	width: 100%;
	text-align: center;
}

	#renault_table td {
		padding: 0 0 10px 0;
	}
	
#schadeherstel_div {
	width: 480px;
}

	#schadeherstel_div_left {
		float: left;
		text-align: left;
	}
	
	#schadeherstel_div_right {
		float: right;
		text-align: right;
	}
	
/* Scroller */

/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
	z-index: 2;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

.simply-scroll-list ul {
	display: inline;
	width: 998px;
}

.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

/* Master button styles - note that up and down versions 
have been removed in this example */

.simply-scroll-btn {
	position: absolute;
	background-image: url(/upload/3423_browse_buttons.jpg);
	width: 15px;
	height: 80px;
	z-index:3;
	cursor: pointer;
}
	
.simply-scroll-btn-left {
	left: 0;
	background-position: top left;
}
.simply-scroll-btn-left.disabled {
	background: none;
}

.simply-scroll-btn-right {
	right: 0;
	background-position: top right;
}
.simply-scroll-btn-right.disabled {
	background: none;
}

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll { 
	width: 998px;
	height: 80px;
}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
	width: 998px;
	height: 80px;
}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {
	float: left; /* Horizontal scroll only */
}

/* jQuery Modal */

#basic-modal-content {
	display: none;
}

/* Overlay */
#simplemodal-overlay {
	background-color: #000;
}

/* Container */
#simplemodal-container {
	height: 195px;
	width: 550px;
	color: #FFFFFF;
	background: #800000;
	border: 2px solid #FFFFFF;
	padding: 10px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 40px;
}

#simplemodal-container a {
	color: #FFFFFF;
	text-decoration: underline;
	font-size: 14px;
	text-transform: none;
}

	#simplemodal-container a:hover {
		color: #FFFFFF;
		text-decoration: none;
	}

#simplemodal-container a.modalCloseImg {
	background: url("/upload/3423_x.png") no-repeat;
	width: 25px;
	height: 29px;
	display: inline;
	z-index: 3200;
	position: absolute;
	top: -10px;
	right: -10px;
	cursor: pointer;
}


/* ######## POPUP ########*/
	
	#achtergrond_popup {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #000000;
		z-index: 9998;
	}
		
		#popup_contact {
			display: none;
			position: absolute;
			width: 704px;
			height: 804px;
			background: url('/upload/3423_wintercheck_sint.jpg') no-repeat 0 40px;
			border: 2px solid gray;
			z-index: 9999;
		}
		
			#popup_contact div.popup_head {
				position: relative;
				height: 40px;
				background: url('/upload/3423_bg_popup_head.jpg') repeat-x center;
			}
		
			#popup_contact div.popup_head h2 {
				line-height: 40px;
				margin: 0;
				padding: 0;
				text-indent: 20px;
				color: #FFFFFF;
			}
			
				#popup_contact div.popup_sluiten {
					position: absolute;
					top: 0px;
					right: 0px;
					width: 50px;
					height: 40px;
					text-indent: -9999px;
					border: 0;
					background: url('/upload/3423_btn_popup_close.png') no-repeat center top;
					cursor: hand;
					cursor: pointer;
				}
				
					#popup_contact div.popup_sluiten:hover {
						background-position: center bottom;
					}