/**
 * Layout.css - Global styles
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

/* General */

body {
	margin: 0;
	padding: 0;
	background: #000 url(../img/background.png) top left repeat-x;
	font: 12px Arial, Helvetica, sans-serif;
	color: #333;
}

a {
	color: #DA000E;
}

a:hover {
	color: #000;
}

blockquote {
	margin: 10px 30px;
}

h1, h2, h3, h4, h5, h6 {
	color: black;
}

h1 {
	margin: 0 0 12px;
	font-size: 28px;
	color:#DA000E;
}

h1.blue,
h2.blue,
h3.blue {
	color:#10257E;
}

h2 {
	margin: 0 0 10px;
	font-size: 22px;
	color: #DA000E;
}

h3 {
	margin: 0 0 8px;
	font-size: 14px;
	text-transform:uppercase;
}

h4 {
	margin: 0 0 6px;
	font-size: 14px;
}

h5 {
	margin: 0 0 4px;
	font-size: 12px;
	
}

h6 {
	margin: 0 0 2px;
	font-size: 12px;
}

img {
	border: 0;
}

ol, ul {
	margin: 0 0 20px;
	padding: 0 0 0 30px;
	line-height: 160%;
}

p {
	margin: 0 0 20px;
	line-height: 160%;
}


/* Table styles */

table {
	margin: 10px 0 20px;
	width: 100%;
}

td {
	padding: 8px;
	border-bottom: 1px solid #DDD;
}

th, thead td {
	padding: 8px;
	background-color: #DDD;
	border-bottom: 1px solid #9E9E9E;
	font-weight: bold;
	text-align: left;
}


/* Form styles */

form ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

form li {
	margin: 0 0 10px;
}

form li.indent {
	padding-left: 150px;
}

form li.last {
	margin: 0;
}

fieldset {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

legend {
	display: none;
}

input.text {
	margin-right: 2px;
	padding: 4px;
	border: 1px solid #CCC;
	font: 11px Arial, Helvetica, sans-serif;
	vertical-align: middle;
}

input.extra-small {
	width: 40px;
}

input.small {
	width: 60px;
}

input.medium {
	width: 125px;
}

input.large {
	width: 200px;
}

input.extra-large {
	width: 275px;
}

input.focus {
	color: #333 !important;
}

input.error,
textarea.error {
	border-color: #CC0000;
}

label.indent {
	display: -moz-inline-box;
	display: inline-block;
	width: 150px;
}

textarea {
	padding: 4px;
	width: 275px;
	height: 150px;
	border: 1px solid #CCC;
	font: 11px Arial, Helvetica, sans-serif;
	vertical-align: top;
}


/**
 * GENERAL CLASSES
 * ----------------------------------------
 */

.accent {
	color: #999;
}

.intro {
	font-size: 14px;
	color: #000;
}

.date {
	font-weight: bold;
	color: #999;
}

p.date {margin:-10px 0 5px 0; font-size:11px;}

.hidden {
	visibility: hidden;
}

/* Button stijlen */

.button.prev { background-position: 100% -120px; padding: 0 10px 0 0; margin-left:20px;}
.button.prev .inner { background-position: 0 -120px;  left:-10px; margin-right:-10px; padding:0 0 0 30px; }
a.button.prev:hover { background-position: 100% -150px; }
a.button.prev:hover .inner { background-position: 0 -150px; }

.button {
	height:30px;
	display:inline-block;
	padding: 0 0 0 10px;
	background:url(../img/button-sprite.png) 0 -60px no-repeat;
	line-height:30px;
	text-decoration:none;
	color:white;
}

*:first-child+html .button,
*html .button { padding:0; margin-right:10px;}
*:first-child+html .button.prev,
*html .button.prev { padding: 0 20px 0 0; margin-left: 10px;}

.button .inner {
	right:-10px;
	height:30px;
	margin-left:-10px;
	position:relative;
	display:inline-block;
	padding-right:30px;
	background:url(../img/button-sprite.png) 100% -60px no-repeat;
}

a.button:hover { background-position: 0 -90px;  color:white; cursor:pointer;}
a.button:hover .inner { background-position: 100% -90px; color:white;}

#homepage-visual .button { background-position: 0 0; color:#DA000E; }
#homepage-visual .button .inner { background-position: 100% 0; color:#DA000E;  }
#homepage-visual a.button:hover { background-position: 0 -30px; color:white;}
#homepage-visual a.button:hover .inner { background-position: 100% -30px; color:white;}

/* Icon stijlen */

a.icon {
	display:inline-block;
	padding-right:13px;
	background:url(../img/icon-sprite.png) 100% -195px no-repeat;
	color:#10257E;
	text-decoration:none;
	font-weight:bold;
}

a.icon:hover {
	color:black;
	background-position: 100% -45px;
}

/**
 * LAYOUT ELEMENTS
 * ----------------------------------------
 */

#wrapper {
	margin: 0 auto;
	width: 950px;
	padding:0 10px;
	background: url(../img/wrapper-back.png) 0 50px no-repeat;
}

*html #wrapper {background:transparent; }

#header {
	height: 200px;
	border-bottom: 8px solid #DA000E;
	z-index:300;
	position:relative;
}

#main {
	width: 100%;
	background-color:#fff;
}

#sidebar {
	margin: 10px;
	width: 220px;
}

*html #sidebar {margin:10px 5px; overflow:hidden; }

#content {
	padding: 20px 10px 10px;
	width: 450px;
	overflow:hidden;
}

#content-wide {
	padding: 20px 10px 10px 0;
	width: 690px;
	overflow:hidden;
}

#content-wide.content-iframe {
	padding: 20px 0 10px 0;
	width: 710px;
	overflow:hidden;
}

#mediabar {
	width: 200px;
	padding:10px;
}

#footer {
	padding: 0 15px;
	height: 40px;
	color: #999;
	margin:0 0 20px;
	border-top:8px solid #10257E;
}

.column {
	float: left;
}

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/**
 * HEADER ELEMENTS
 * ----------------------------------------
 */

#header .inner {
	width: 100%;
	height:161px;
	position:relative;	
}

#header-logo {
	display: block; 
	position: absolute; 
	top: 57px;
	z-index: 10;
}

a#extra-link {
	display:block;
	width: 210px;
	height: 200px;
	padding: 0 10px;
	position:absolute;
	text-decoration:none;
	right:0px;
	background:url(../img/kaartenbak-bg.png) 6px 5px no-repeat;
	color:black;
}

#extra-link h3 {
	margin: 20px 5px 5px;
	padding:0;
	font-size:14px;
	line-height:100%;
	background:url(../img/arrow-sprite.png) 100% 5px no-repeat;
}

a#extra-link:hover h3,
a#extra-link h3:hover {
	background-position: 100% -45px;
	color:#DA000E;
}

#extra-link img {
	display:block;
	margin: 5px;
}

#visual {
	display: block;
	width: 950px;
	height: 103px;
	position:absolute;
	top:57px;
}

#visual img {
	display: block;
}

#header .mask {
	width: 230px;
	height:66px;
	position:absolute;
	top: 57px;
	left: 720px;
	background:url(../img/krul-mask.png) 0 0 no-repeat;
}

*html #header .mask { display:none;}

/**
 * SIDEBAR / MEDIABAR ELEMENTS
 * ----------------------------------------
 */

h3#menu-title {
	width: 170px;
	padding: 0 40px 0 10px;
	margin:-50px 0 0 0;
	line-height:40px;
	height:40px;
	font-size:14px;
	background:#B3000B url(../img/sidebar-h3.png) 0 0 no-repeat;
	color:#fff;
}

*html h3#menu-title { color: #DA000E;} 

ul#menu {
	list-style:none;
	margin:0 0 10px;
	padding:0 0 10px;
	background:#fff url(../img/menu-bottom.png) 0 100% no-repeat;
}

*:first-child+html ul#menu { position:relative;  } /* IE7 needs this in order to display the menu pixel-perfect */
*html ul#menu { position:relative;  } /* IE6 needs this in order to display the menu pixel-perfect */

#menu a {
	display:block;
	text-decoration:none;
	padding: 8px 10px 8px 10px;
	color:black;
	background:#EBEBEB url(../img/icon-sprite.png) 200px -36px no-repeat;
	border-bottom:1px solid white;
	width: 200px;
}

#menu a:hover { background-color:white;}

#menu li.selected { background-color:white; overflow:hidden;}
#menu li.selected a { border-bottom:1px solid #EBEBEB; background-position: 200px -136px; background-color:white; }

#menu ul {
	list-style:none;
	margin:10px;
	padding:0;
	border-left:2px solid #EBEBEB;
}

*:first-child+html ul#menu ul {
	padding-bottom:1px;			/* Without this IE7 does not display the 10px bottom margin */ 
	margin-bottom:9px;
}

#menu ul li {
	border-bottom:0;
}

#menu ul li a,
#menu .selected ul li a {
	padding: 0 10px;
	border-bottom: none;
	font-size:11px;
	background:#fff;
}

#menu ul li a:hover { color:#DA000E; }

#menu ul li.selected a {
	font-weight:bold;
	color:black;
}

/* Zuithofdeals banner */

#zuithofdeals-banner {
	display:block;
	margin: 0 0 5px;
}

/* Block Elements */

.block {
	display:block;
	margin-bottom:10px;
}

.block a { color:#10257E; }
.block a:hover { color:black; }

a.photo {
	text-decoration:none;
	position:relative;
	width:220px;
}

.block img {
	display:block;
}

a.photo .zoom {
	display:block;
	height:30px;
	width:30px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../img/zoom-sprite.png) 0 0 no-repeat;
	position:absolute;
	top:10px; 
	right:10px;
}

a.photo:hover .zoom { background-position: 0 -30px; }


/* Medewerker Elements */

.medewerker {
	height:70px;
	width: 220px;
	background:url(../img/medewerker-small-bg.png);
}

.medewerker img { float:left; }

.medewerker .body {
	float:left;
	width: 130px;
	padding:8px 0 0 10px;
}

.medewerker .body span,
.medewerker .body a {
	display:block;
	font-size:10px;
}

.medewerker .body a:hover { color:black; }
.medewerker .body .name { font-weight:bold; font-size:12px; text-decoration:none;}
.medewerker .body .functie { color:#999999; }

/* Accordions Elements */

.accordion {
	margin:0 0 10px;
	padding-top:0px;
	width:220px;
}

.accordion h3 {
	margin:0 0 10px;
	outline:none;
}

.accordion h3 a {
	display:block;
	width: 170px;
	padding: 12px 40px 11px 10px;
	background: url(../img/accordion-sprite.png) 0 0 no-repeat;
	color:#fff;
	text-decoration:none;
}

.accordion h3 a:hover { background-position: 0 -40px; color:white; }
.accordion h3.ui-state-active a { background-position: 0 -80px; }

.accordion div {
	margin:-10px 0 10px;
	padding:0 10px 10px;
	width:200px;
	overflow:hidden;
	background:#EBEBEB url(../img/menu-bottom.png) 0 100% no-repeat;
}

.accordion p {
	margin: 0;
	padding-top:10px;
	color:#10257E;
}

/* Tabs Elements */

ul.tabs {
	list-style:none;
	margin:0 0 0 -10px;padding:0;
	width: 220px;
	height:30px;
	border-top:1px solid white;
	background:#D6D6D6 url(../img/contact-tabs-ul.png) 0 100% repeat-x;
}

.tabs li {
	float:left;
}

.tabs li a {
	width: 110px;
	height:30px;
	line-height:30px;
	display:block;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:#999;
	outline:none;
}

.tabs li a:hover { color:#10257E; }

.tabs li a.current {
	background:#EBEBEB;
	color:#10257E;
}

/* Route Elements */

#route-wrapper div {
	padding:0;
	margin: 0 -10px;
	width:220px;
	background:transparent;
}

#map img {margin-top:5px;}

#map-form fieldset {
	padding:10px 10px 0;
	margin:0;
}

*:first-child+html #map-form fieldset {
	margin: -15px 0;
}

*html #map-form fieldset {
	margin: -15px 0;
}

#map-form label {
	display:block;
	margin-bottom:10px;
}

#map-form input {
	display:inline-block;
	color:#999;
}

#map-form #map-zipnum {
	width: 28px;
}

#map-form #map-zipchar {
	width:18px;
}

#map-form button {
	background:none;
	border:none;
	padding-right:10px;
	background:url(../img/icon-sprite.png) 100% -193px no-repeat;
	color:#10257E;
	font-family:arial, helvetica, sans-serif;
}

*:first-child+html #map-form button {
	padding-right:0;
}

#map-form button:hover {
	cursor:pointer;
	background-position: 100% -43px;
	color:black;
}

#accordion div#newsletter-header {
	background:none;
}

/**
 * CONTENT ELEMENTS
 * ----------------------------------------
 */

ol#breadcrumbs {
	background:#C5C5C5 url(../img/breadcrumbs-bg.png) 0 0 repeat-x;
	list-style:none;
	margin:0;
	padding: 10px 0 0 250px;
	width: 700px;
	overflow:hidden;
	font-size:10px;
	color:#999999;
}

#breadcrumbs li {
	float:left;
	padding-right:10px;
	height:40px;
	line-height:40px;
}

#breadcrumbs li.first {padding-right:10px;}

#breadcrumbs li a {
	display:block;
	padding-right:16px;
	background:url(../img/icon-sprite.png) 100% 18px no-repeat;
	text-decoration:none;
	color:#999;
}

#breadcrumbs li a:hover { color:#000; background-position: 100% -32px; }

#breadcrumbs li.selected a { color:#DA000E; background:none; }

/* Article Stijlen */

.article.last { border-bottom:0px; padding-bottom:10px;}

.article {
	margin: 0 0 20px;
	width: 100%;
	overflow: hidden;
	padding-bottom:30px;
	border-bottom:1px solid #EBEBEB;
}

.homepage .article {
	padding-bottom:0;
	border-bottom:0;
}

.article-thumb {
	display: block;
	float: left;
	margin: 30px 10px 0 0;
	width: 115px;
	height: 100px;
}

.article-thumb img {
	display: block;
}

.article-body {
	float: left;
	width: 325px;
}

.article-body .date {
	margin: 2px 0 7px;
	color:#707CB2;
	font-size:10px;
}

.article-body h2,
.article-body p {
	margin: 0 0 10px;
}

.article-body h2 {
	font-size:14px;
	text-transform:uppercase;
}

.article-body h2 a {
	color:#10257E;
	text-decoration:none;
}

.article-body h2 a:hover {
	color:black;
}

/* Related Stijlen */

ul.related {
	width:100%;
	margin:0 0 20px;
	padding:0;
	list-style:none;
	border-top:1px solid #EBEBEB;
}

.homepage ul.related {
	margin:0;
}

ul.related li {
	border-bottom:1px solid #EBEBEB;
}

ul.related li a {
	display:block;
	text-decoration:none;
	padding: 10px 0;
}

ul.related li a:hover { cursor:pointer; }

ul.related .date {
	display:inline-block;
	font-size:10px;
	color:#707CB2;
	padding: 0 10px;
	width: 90px;
}

ul.related .title {
	display:inline-block;
	padding:0 10px;
	color:#10257E;
	font-weight:bold;
	width:230px;
}

ul.related .icon {
	display:inline-block;
	color:#707CB2;
	padding-right:13px;
	background:url(../img/icon-sprite.png) 100% -243px no-repeat;
	font-weight:bold;
}

ul.related a:hover .date {color:#10257E;}
ul.related a:hover .icon {
	color:#10257E;
	background-position: 100% -193px;
}

/* Toolbar Stijlen */

#content .toolbar.no-border {border:0px;}

#content div.toolbar {
	width:430px;
	border-top:1px solid #EBEBEB;
	overflow:hidden;
	text-align:right;
	padding:10px;
	height:30px;
}

/* Medewerker Info Stijlen */

.medewerker-info {
	width:440px;
	height:70px;
	padding:10px;
	background:url(../img/medewerker-info-bg.png) 0 0 no-repeat;
	line-height:150%;
}

.medewerker-info h2 {
	font-size:20px;
	line-height:100%;
	margin:5px 0;
	color:#10257E;
}

.medewerker-info span,
.medewerker-info a {
	display:block;
}

.medewerker-info a {
	color:#10257E;
}

.medewerker-info a:hover {
	color:black;
}

/* Paginatie stijlen */

.pagination {
	width: 450px;
	padding:10px 0;
	overflow:hidden;
	height:30px;
	border-top: 1px solid #EBEBEB;
}

*:first-child+html .pagination { margin-top:10px; } /* small IE7 hack */

.pagination .prev-button,
.pagination .next-button {
	float:left;
	width:100px;
}

.pagination .next-button {
	text-align:right;
}

.pagination ol {
	list-style:none;
	margin:0;
	padding:0;
	width: 240px;
	float:left;
	text-align:center;
}

.pagination ol li {
	display:inline;
}

.pagination ol a {
	display:inline-block;
	width: 30px;
	height:30px;
	line-height: 30px;
	background:url(../img/pagination-sprite.png) 0 0 no-repeat;
	text-decoration:none;
	color:white;
}

.pagination ol a:hover {
	background-position:0 -60px;
}

.pagination ol .selected a {
	background-position:0 -30px;
	color:#10257E;
}


#content-wide .pagination { width: 700px;}
#content-wide .pagination .prev-button,
#content-wide .pagination .next-button { width: 150px; }
#content-wide .pagination ol { width: 390px; }

/* Sitemap */

#sitemap {
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	font-size: 12px;
	line-height: 200%;
	list-style: none;
}

#sitemap li {
	font-weight: bold;
}

#sitemap ul {
	margin: 0 0 10px 10px;
	padding: 0 0 0 10px;
	border-left: 1px solid #CCC;
	line-height: 200%;
	list-style: none;
}

#sitemap ul li {
	font-weight: normal;
}

#sitemap a {
	text-decoration: none;
}

/**
 * CONTENT-WIDE ELEMENTS
 * ----------------------------------------
 */

#content-wide h1 {
	margin: 0 0 10px;
	padding: 0 10px 10px;
	border-bottom:1px solid #EBEBEB;
}

/*
#content-wide .block a {
	color:#DA000E;
}

#content-wide .block a:hover { color:black; }*/

#content-wide .overview {
	width:710px;
	overflow:hidden;
}

#content-wide .overview .block {
	margin: 0 10px 10px 0;
	float:left;
}

#content-wide .block {
	width:345px;
	height:120px;
	background:url(../img/medewerker-block-bg.png) 0 0 no-repeat;
	line-height:150%;
}

#content-wide .block img {
	display:block;
	float:left;
}

#content-wide .block .body {
	width: 205px;
	height:100px;
	float:left;
	padding:10px;
}

#content-wide .block span {
	display:block;
}

#content-wide h2 {
	font-size:14px;
	margin:10px 0 0;
}

*:first-child+html #content-wide h2 { margin-top:15px; } /* small IE7 hack */

#content-wide .block h2 a,
#content-wide .block a {
	text-decoration:none;
/*	color:#DA000E;*/
}

#content-wide .block h2 a:hover,
#content-wide .block a:hover { color:black;}

#content-wide .functie {
	font-size:11px;
	color:#999;
	margin-bottom:10px;
}

/**
 * HOMEPAGE ELEMENTS
 * ----------------------------------------
 */

#homepage-visual {
	padding: 2px 0 0;
	height: 270px;
	width: 950px;
	overflow:hidden;
	background:#DA000E url(../img/homepage-gradient.png) 0 100% repeat-x;
}

ul#homepage-visual-tabs {
	list-style:none;
	width:230px;
	margin:0 10px 0 0;
	padding:0;
}

#homepage-visual-tabs li {
	margin-bottom:10px;
}

#homepage-visual-tabs li.selected {
	background:url(../img/homepage-selected-bg.png);
}

#homepage-visual-tabs a {
	display:block;
	color:white;
	text-decoration:none;
	text-transform:uppercase;
	font-size:18px;
	height:60px;
	width: 130px;
	padding-left:90px;
	padding-top: 20px;
	outline:none;
}

#homepage-visual-tabs li.selected a {
	color:#DA000E;
}

#homepage-visual-tabs .second a { background:url(../img/logo/daihatsu.png) 10px 24px no-repeat; }
#homepage-visual-tabs .third a { background:url(../img/logo/subaru.png) 10px 24px no-repeat;}

#homepage-visual-tabs .second a,
#homepage-visual-tabs .third a {
	padding-top: 30px;
	height:50px;
}

#homepage-visual img {
	display:block;
	margin-right:10px;
	width: 470px;
}

#homepage-visual-panes {
	width:710px;
}

.homepage-intro {
	width: 210px;
	padding: 10px;
}

#homepage-visual h1 {
	color:white;
	font-size:26px;
	text-transform:uppercase;
	line-height:120%;
}

#homepage-visual p {
	color:white;
	font-size:14px;
}

/**
 * FOOTER ELEMENTS
 * ----------------------------------------
 */

#footer p {
	float: left;
	margin: 0;
	line-height: 40px;
	font-size:11px;
}


/* Service navigation */

#service-navigation {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}

#service-navigation li {
	display: inline;
	line-height: 40px;
}

#service-navigation li a {
	text-decoration: none;
	color: #999;
	font-size:11px;
}

#service-navigation li a:hover {
	color: #fff;
}