/*
Theme customizations
*/


body {
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
	line-height: 24px;
}

ul li {
    list-style: disc inside none;
    margin-bottom: 0px;
	margin-left: 20px;
}

/* fix background */

body.kopa-boxed {
    /*background-attachment: fixed;*/
}

.kopa-boxed .kopa-wrapper {
    max-width: 980px; box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
	 background: none repeat scroll 0 0 transparent;
}
.kopa-boxed .sticky-header {
    width: 980px;
	height: 80px!important;
}

.wrapper {
     width: 95%;
	 background: transparent!important;
}


	
/*#header-top { display: none; }*/

#header-top {
    background: #00368C!important;
}

#header-bottom { max-height: 100px; background: #ffffff;}
#header-bottom #logo-image img { max-height: 60px!important; width: auto!important; margin: 10px 0px;}



.page-title {
        padding: 6px 0!important;
}

.breadcrumb { min-height: 20px; padding-top: 4px!important;}


h1.page-title {
        padding: 6px 0!important;
		border-top: 0px;
		border-bottom: 0px;
		color: #00368C!important;
		margin-top: -10px;
		margin-bottom: 30px;
}

/* LOGOSHRINK FIX */
.cbp-af-header.cbp-af-header-shrink #logo-image {
margin-top: 0px!important;
}

 #header-bottom.cbp-af-header.cbp-af-header-shrink #logo-image img {
max-height: 40px!important;
}


#main-nav {
   margin-top:6px;
}



#main-menu > li { background: none;}

#main-menu > li > a {
    display: block;
    padding: 19px 20px;
    text-align: center;
	
}

#main-menu > li > a span {
   color:  #00368C!important;
}

#main-menu > li > a:hover span,
#main-menu > li.current-menu-item > a span ,
#main-menu > li.current-menu-parent > a span ,
#main-menu > li:hover > a span {
   color:  #ffffff!important;
}

/*ul#main-menu a i {display: none;}*/

#main-menu li ul {
    top: 90px !important;
}

#main-menu li ul li ul {
    top: 0px !important;
}


.cbp-af-header.cbp-af-header-shrink #main-nav { margin-top: 8px;}

.cbp-af-header.cbp-af-header-shrink #main-nav #main-menu li ul {
    top: 51px!important;
}

#main-content {
    background:none!important;
    }
	
#page-footer { background: #ffffff!important;}

#bottom-sidebar, #bottom-sidebar .wrapper { 
	background-color: #efefef!important;
	color: #333333!important;
	}
	
	#bottom-sidebar{border-top: 1px solid #d4d4d4;}
	
#bottom-sidebar .wrapper .widget-title {
	color: #333333!important;
	}
	
#bottom-sidebar .wrapper .widget-title  span{
	display: none;
	}

#main-content .widget .widget-title {
    margin: 8px 0 20px;
	border-radius: 0 0 0 0;
	padding-left: 15px;
}


#main-content .widget {
    margin-bottom: 22px;
}

.kopa-testimonial-widget .testimonial-detail .testimonial-content {
        margin-left: 20px;
}


#youtube-sidebar-widget li { list-style: none;}

#main-col {
    width: 666px;
}

.sidebar .kopa-latest-post-widget .widget-title span, 
.kopa-latest-post-widget ul li .entry-item .entry-title span
 {display: none}
 
 
.kopa-latest-post-widget ul li .entry-item .entry-title {
    border-bottom: 0px;padding-bottom: 0px; padding-top: 10px;
}

.sidebar .kopa-latest-post-widget ul li {
    float: none;
}

.kopa-latest-post-widget ul li .entry-item .entry-thumb { float: left; margin-right: 10px; max-width: 250px; max-height: 80px; overflow: hidden; }
.sidebar .kopa-latest-post-widget ul li img { max-width: 250px; margin-top: -40px;}

#page-footer .share a {
    color: #333333;
     font-family: 'Raleway',sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 5px;
}

#page-footer .share a:hover {
    color: #00368C;
}

/* CUSTOM COLOR */

.blue-button {
    background-color:#00368C;
}

.blue-button:hover {
    background-color:#ffffff;
}

.grey-button:hover {
    background-color:#00368C;
}
	
.more-link {
    color:#00368C;
}

blockquote {
    border-left-color:#00368C;
}

.kp-dropcap {
    background-color:#00368C;
}

.kp-dropcap.color {
    background-color: #00368C;
}

.hover-effect .mask a.link-detail {
    border:2px solid #00368C;
    color:#00368C;
}

.hover-effect .mask a.link-gallery {
    border:2px solid #00368C;
    color:#00368C;
}

.hover-effect .mask a.link-gallery:hover,
.hover-effect .mask a.link-detail:hover {
    background-color:#00368C;
    background-color:rgba(51,190,229,.86);
    border:2px solid #00368C;
    border:2px solid rgba(51,190,229,.86);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, a:hover,
#header-top .top-link li a:hover,
.kopa-latest-work-widget .entry-item .entry-title a:hover,
.entry-categories a:hover,
.kopa-latest-work-widget .entry-item .entry-categories a:hover,
.kopa-latest-post-widget ul li .entry-item .entry-title a:hover,
.kopa-service-widget ul li .service-title:hover a,
.kopa-service-widget ul li .service-title:hover span,
#contact-info address a:hover,
#footer-menu li a:hover,
#bottom-sidebar .kopa-social-widget li a:hover,
.kopa-intro-widget ul li .entry-title a:hover,
#page-bottom .kopa-widget-best-seller .entry-title a:hover,
#page-bottom .kopa-widget-latest-review .entry-title a:hover,
#page-bottom .kopa-widget-latest-review .entry-comments a:hover,
.kopa-featured-product-widget .entry-item .entry-title a:hover,
.page-title .breadcrumb a:hover,
.kopa-our-team-widget ul li .entry-title a:hover,
.kopa-article-list .entry-item .entry-title a:hover,
.kopa-article-list .entry-item .entry-comments a:hover,
.sidebar .kopa-categories-widget ul li a:hover,
.sidebar .kopa-widget-best-seller .entry-title a:hover,
.sidebar .kopa-widget-rated-product .entry-title a:hover,
.entry-box header .entry-comments a:hover,
.entry-box .social-link li a:hover,
.entry-box footer p a:hover,
.tag-box a:hover,
#comments .comment-body .comment-reply-link:hover,
#comments .comment-body .comment-edit-link:hover {
    color: #00368C;
}


#header-top .search-icon {
    background:url(images/icons/search-icon.png) no-repeat center center #00368C;
}
.search-form .search-submit {
    background:url(images/icons/search-icon.png) no-repeat center center #00368C;
}

#main-menu > li.current-menu-item > a,
#main-menu > li.current-menu-parent > a,
#main-menu > li:hover > a {
    background-color:#00368C;

}
	
#mobile-menu > span {
    color:#00368C;
}

#toggle-view-menu > li {
    background-color:#00368C;
}

#main-content .widget .widget-title {
    background-color:#00368C;
}

#main-content .widget .widget-title span {
    color:#00368C;
    border:3px solid #00368C;
	display: none!important;
}

.kopa-tagline-widget {
    border-left:2px solid #00368C;
}

.kopa-latest-work-widget .entry-item:hover,
.kopa-featured-product-widget .entry-item:hover {
    border-bottom:1px solid #00368C;
}

.kopa-latest-post-widget ul li .entry-item .entry-title span {
    background-color:#00368C;
}

.kopa-contact-widget #contact-form #contact_name:focus,
.kopa-contact-widget #contact-form #contact_email:focus,
.kopa-contact-widget #contact-form #contact_subject:focus,
.kopa-contact-widget #contact-form #contact_message:focus {
    border:1px solid #00368C;
}
.kopa-contact-widget #contact-form #submit-contact {
    background-color:#00368C;
}

.kopa-contact-widget #contact-form label.error {
    color:#00368C;
}

.contact-social-link li a:hover {
    border:1px solid #00368C;
}

.element h2 {
    background-color:#00368C;
}

.list-container-2 ul li.active > a {
    background-color:#00368C;
}

.list-container-2 ul li span {
    background:#00368C;
}

.tab-container-2 {
    background-color:#00368C;
}

.progress-bar > span {
    background-color: #00368C;
}

.progress-bar.green > span {
    background-color: #00368C;
}


#bottom-sidebar .newsletter-form .submit {
    background-color:#00368C;
}

.kopa-intro-widget ul li .entry-title span {
    background:#00368C;
    border:2px solid #00368C;
}

.kopa-intro-widget ul li:hover .entry-title span {
   color:#00368C;
}

#page-bottom .kopa-widget-latest-review .kopa-rating li a {
    color:#00368C;
}

.kopa-featured-product-widget .entry-item .entry-thumb .add-to-cart {
    background-color:#00368C;
}

.kopa-featured-product-widget .price-box .saleoff-price {
    color:#00368C;
}

.kopa-our-team-widget ul li .our-team-social-link li a:hover {
    background-color:#00368C;
}

.kopa-our-team-widget ul li .entry-item:hover {
    border-bottom:1px solid #00368C;
}

.kopa-article-list .entry-item .entry-title span {   
    background-color:#00368C;
}

.pagination ul > li > span.current,
.pagination ul > li > a:hover {
    background-color:#00368C;
    border-color: #00368C;
}

#main-content .sidebar .widget .widget-title span {
    background-color:#00368C;
}

.sidebar .kopa-categories-widget ul li {
    color:#00368C;
}

.sidebar .kopa-widget-best-seller .price-box .saleoff-price,
.sidebar .kopa-widget-rated-product .price-box .saleoff-price {
    color:#00368C;
}

.sidebar .kopa-widget-rated-product .kopa-rating li a {
    color:#00368C;
}

.entry-box .entry-title span {
    background-color:#00368C;
}

.about-author .author-content header .author-name {
    color:#00368C;
}

.tag-box a:hover {
    border-bottom:1px solid #00368C;
}

.kopa-comment-pagination a:hover {
    color:#00368C;
}

.kopa-comment-pagination .current {
    color:#00368C;
}

#comments-form label.required span,
#kp-comments-form label.required span {
    color:#00368C;
}

#comments-form #submit-comment,
#kp-comments-form #submit-comment {
    background-color:#00368C;
}

#comments-form #comment_name:focus,
#comments-form #comment_email:focus,
#comments-form #comment_url:focus,
#comments-form #comment_message:focus,
#kp-comments-form #comment_name:focus,
#kp-comments-form #comment_email:focus,
#kp-comments-form #comment_url:focus,
#kp-comments-form #comment_message:focus {
    border:1px solid #00368C;
}

label.error {
    color:#00368C;
}

.contact-title span {
    background-color:#00368C;
}

.kopa-contact-page #contact_message:focus,
.kopa-contact-page #contact_name:focus, 
.kopa-contact-page #contact_email:focus, 
.kopa-contact-page #contact_url:focus, 
.kopa-contact-page #contact_subject:focus {
    border:1px solid #00368C;
}

.kopa-contact-page #contact-form #submit-contact {
    background-color:#00368C;
}

#contact-information i {
    color:#00368C;
}

#contact-information a:hover {
    color:#00368C;
}

#contact-information .accordion-title span {
    background-color: #00368C;
}

.list-container-1 ul li.active a, 
.list-container-1 ul li:hover a {
    border-top:1px solid #00368C;
}

.da-thumbs li .da-thumbs-hover p {
    background:#00368C;
}

.error-404 .left-col p{
    color:#00368C;
}

.error-404 .right-col h1{
    color:#00368C;
    }
.error-404 .right-col a {
    color:#00368C;
}

.kopa-pagelink a{   
    color:#00368C;
}

#back-top a {
    background-color:#00368C;
}


.table-3col h4 span, 
.table-4col h4 span, 
.table-5col h4 span {
    background-color:#00368C;
}

.pricing-special {
    border:2px solid #00368C;
}

.pricing-special .price {
    background-color:#00368C;
}




/* CONTACTFORMS */

.label, .badge {
    background-color: transparent!important;
    color: #333333;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 2px 4px;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0.25);
    vertical-align: baseline;
    white-space: nowrap;
	}
	
/* Contactform */
form.wpcf7-form input,
form.wpcf7-form textarea,
form.wpcf7-form select {
	border: 1px solid #cccccc;
	background: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow:  0px 0px 10px 0px #cccccc;
	-moz-box-shadow:  0px 0px 10px 0px #cccccc;
	-ms-box-shadow:  0px 0px 10px 0px #cccccc;
	-o-box-shadow:  0px 0px 10px 0px #cccccc;
    box-shadow:  0px 0px 10px 0px #cccccc;
	padding: 3px; margin-top: 3px; margin-bottom: -5px;
	font-family: 'Droid Sans', sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #333333;
	text-shadow: 1px 1px 0px #ececec;
	}
	
form.wpcf7-form .label { display: block; float: left; width: 120px; line-height: 18px; padding-top: 3px;}
form.wpcf7-form .wpcf7-list-item { float: left; display: block; width: 220px;}
form.wpcf7-form textarea  { width: 500px;}
form.wpcf7-form input.wpcf7-captchar { width: 80px; float: left; margin-left: 10px; margin-top: 2px;}

form.wpcf7-form input.wpcf7-submit { width: 100px; float: left; margin-left: 15px; margin-top: 2px;}
	
form.wpcf7-form img { 
	-webkit-box-shadow:  0px 0px 0px 0px #cccccc;
	-moz-box-shadow:  0px 0px 0px 0px #cccccc;
	-ms-box-shadow:  0px 0px 0px 0px #cccccc;
	-o-box-shadow:  0px 0px 0px 0px #cccccc;
    box-shadow:  0px 0px 0px 0px #cccccc;
	border: 0px; padding: 0px; float: left;
	}



#main-content .voorraad-button { padding: 20px; width: 100% !important; display: block; box-sizing: border-box; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold;  }
	#main-content .voorraad-button:hover { color: #00368C;  }
	



/* ===== ===== ===== AUTOCOMMERCE ===== ===== ===== */

/* AUTOCOMMERCE *//* AUTOCOMMERCE *//* AUTOCOMMERCE */

:root {
    --ACmaincolor: #00368C!important;
	--ACimgpadding: 65%!important;
}

#asac-container #ACvehicles .ACvoertuig .ACdata { background: #00368C!important; }
#asac-container.business #ACvehicles .ACvoertuig .ACdata .basics { color: #ffffff!important; }
#asac-container.business #ACvehicles .ACvoertuig .ACdata .basics:before { filter: invert(100%)!important; opacity: 0.8!important; }

@media screen and (min-width: 1200px) {
	#asac-container.business #ACvehicles .ACvoertuig {
   	 flex: 0 1 calc(33.33333% - var(--ACgutter))!important;
	}
}



/* ----- ----- ----- OCCASIONLIJST ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */
/* ----- ----- ----- OCCASIONLIJST ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */
/* ----- ----- ----- OCCASIONLIJST ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */

#occasionlijstwrapper {
	margin: 0 auto;
	width: 930px;
	font-family:Arial, Helvetica, sans-serif;
	color: #333333;
	font-size: 12px;
}

#occasionlijstwrapper div.nav { display: block; margin-top: 8px; }
#occasionlijstwrapper div.nav { font-weight: normal; font-style: italic; color: #cccccc; text-decoration: none; }
#occasionlijstwrapper div.nav  b { font-weight: bold; font-style: normal; color: #333333; text-decoration: none; }
#occasionlijstwrapper div.nav a.nav { font-weight: normal; font-style: italic; font-size: 12px; color: #666666; text-decoration: none; padding: 2px 5px; border: 1px solid #666666; background: #f3f3f3; }
#occasionlijstwrapper div.nav a.nav:hover { color: #64b497; background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/gradient.png');}


/* --- --- --- VERSIE 2 met 320 foto --- --- --- *//* --- --- --- VERSIE 2 met 320 foto --- --- --- */
/* --- --- --- VERSIE 2 met 320 foto --- --- --- *//* --- --- --- VERSIE 2 met 320 foto --- --- --- */

#occasionlijstwrapper .occasionresultV2 { 
	display: block; float: left; width: 288px; text-align: center; 
	border:1px solid #64b497; margin: 0px 5px 20px 5px; 
	background: #00368C; padding: 5px;
	height: 310px;
	}
#occasionlijstwrapper .occasionresultV2:hover { 
	border:1px solid #ffffff; cursor: pointer;
	}

#occasionlijstwrapper .occasionresultV2 .merkmodel { 
	display: block; color: #ffffff; font-weight: bold;
	font-size: 18px; line-height: 24px;
	}
	
#occasionlijstwrapper .occasionresultV2 .merkmodel .merk { 
	display: block; overflow: hidden; clear: both; color: #ffffff; width: 288px; height: 28px;
	}
	
#occasionlijstwrapper .occasionresultV2 .merkmodel .uitvoering { 
	display: block; clear: both; color: #cccccc; width: 288px; 
	overflow: hidden; font-size: 14px; line-height: 18px;
	height: 20px; margin-bottom: 6px;
	}

#occasionlijstwrapper .occasionresultV2 .foto { 
	height: 193px; width: 288px; margin-bottom: 10px;
	overflow: hidden; display: block; background: #00368C;
	}
	
#occasionlijstwrapper .occasionresultV2 .foto img { 
	margin-left: 0px; bottom: 0px; width: 288px;
	}


#occasionlijstwrapper .occasionresultV2 .gegevens { }
#occasionlijstwrapper .occasionresultV2 .gegevens .basics {
	display: block; clear: both; color: #cccccc; width: 288px; 
	overflow: hidden; font-size: 10px; line-height: 18px;
	height: 20px; margin-bottom: 6px; font-weight: bold;
	}
	
#occasionlijstwrapper .occasionresultV2 .gegevens .basics .spacer{
	margin-left: 3px; margin-right: 3px;
	}
	
#occasionlijstwrapper .occasionresultV2 .prijs { 
	display: block; color: #ffffff; font-weight: bold;
	font-size: 20px; line-height: 24px
	}

#occasionlijstwrapper select { width: 226px; border: 1px solid #64b497; margin: 2px; background: #00368C;color: #ffffff;}
#occasionlijstwrapper select option { background: #00368C; color: #ffffff;}


/* ----- ----- ----- RSPONSIVE ----- ----- ----- */

/* Tablet */
@media screen and (max-width: 800px) {

	#occasionlijstwrapper {
		width: 620px;
	}
	
	#occasionlijstwrapper .occasionresultV2 .foto a { padding: 0px;}
	
	#occasionlijstwrapper .occasionresultV2 .foto img { 
		max-width: 288px!important; height:auto!important;	
	}
	
	#occasionlijstwrapper select { width: 148px; }
}


/* Mobile */
@media screen and (max-width: 400px) {

	#occasionlijstwrapper {
		width: 300px;
	}
	
	#occasionlijstwrapper form {
		display: block; height: 110px;
	}
	
	#occasionlijstwrapper .occasionresultV2 { 
		float: none; width: 288px; text-align: left; 
		margin: 0px 0px 10px 0px;  height: 90px;	
	}
	
	#occasionlijstwrapper .occasionresultV2 .merkmodel { 
	font-size: 14px; width: 160px; float: right;
	}
	
#occasionlijstwrapper .occasionresultV2 .merkmodel .merk { 
	width: 160px; height: 28px;
	}
	
#occasionlijstwrapper .occasionresultV2 .merkmodel .uitvoering { 
	width: 160px; font-size: 12px; font-weight: normal;
	}
	
	#occasionlijstwrapper .occasionresultV2 .foto { 
		width: 120px; height: 90px; float: left;}
	
	#occasionlijstwrapper .occasionresultV2 .foto a { padding: 0px;}
	
	#occasionlijstwrapper .occasionresultV2 .foto img { 
		max-width: 120px!important; height:auto!important;	
	}
	
	#occasionlijstwrapper .occasionresultV2 .gegevens { font-size: 14px; width: 160px; float: right;}
	#occasionlijstwrapper .occasionresultV2 .gegevens .basics { display: none;}

	#occasionlijstwrapper form { margin-bottom: -20px;}
	#occasionlijstwrapper select { width: 146px; }
	
	#occasionlijstwrapper div.nav { display: block; margin-top: 8px; width: 100%;  font-weight: normal; font-style: italic; color: #cccccc; text-decoration: none; }
	
	#occasionlijstwrapper div.nav span { width: 50%; display: block; float: left; clear: both: }
	#occasionlijstwrapper div.nav  b { font-weight: bold; font-style: normal; color: #333333; text-decoration: none; }
	#occasionlijstwrapper div.nav a.nav { font-weight: normal; font-style: italic; font-size: 12px; color: #666666; text-decoration: none; padding: 2px 5px; border: 1px solid #666666; background: #f3f3f3; }
	#occasionlijstwrapper div.nav a.nav:hover { color: #64b497; background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/gradient.png');}
	
	#occasionlijstwrapper center { height: 100px; }
	
}

/* ----- ----- ----- DETAILPAGINA ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */
/* ----- ----- ----- DETAILPAGINA ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */
/* ----- ----- ----- DETAILPAGINA ----- ----- ----- *//* ----- ----- ----- DETAILPAGINA ----- ----- ----- */
#occasioncontent {
	margin: 0 auto;
	margin-top: 25px;
	width: 900px;
	font-family:Arial, Helvetica, sans-serif;
	color: #00368C;
	font-size: 12px;
	font-weight: bold;

}


#occasioncontent .title { opacity: 1 !important; position: relative !important; left: 0px !important; display: block !important; }


#occasioncontent h1 { font-size: 18px; padding-top: 10px; display: block;font-family:Arial, Helvetica, sans-serif; font-weight: bold;}
#occasioncontent h1 span { font-size: 14px; font-weight: bold; font-family:Arial, Helvetica, sans-serif;}

#occasioncontent p { text-align: left; }

#occasioncontent a { color: #666666; font-style: italic; }
#occasioncontent a:hover { color: #64b497; }

#occasioncontent .navbuttons { float: left; text-align: left; line-height: 20px; display: block; width: 360px;}
#occasioncontent .navbuttons  { font-weight: normal; font-style: italic; color: #cccccc; text-decoration: none; }
#occasioncontent .navbuttons span { text-decoration: none; color: #ffffff; margin-right: 18px; padding: 5px 6px; border: 1px solid transparent;}
#occasioncontent .navbuttons a { 
text-decoration: none; margin-right: 18px; padding: 5px 8px; background: #00368C;
color: #ffffff;
	font-weight: bold;
	text-shadow: 1px 1px 1px #00368C;
	font-style: normal;
	}
#occasioncontent .navbuttons a:hover { 
color: #ffffff;
	font-weight: bold;
	text-shadow: 1px 1px 1px #00368C;
	font-style: normal;
	background: #64b497; /* Old browsers */
background: -moz-linear-gradient(top,  #64b497 1%, #00368C 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#64b497), color-stop(100%,#00368C)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #64b497 1%,#00368C 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #64b497 1%,#00368C 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #64b497 1%,#00368C 100%); /* IE10+ */
background: linear-gradient(to bottom,  #64b497 1%,#00368C 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b497', endColorstr='#00368C',GradientType=0 ); /* IE6-9 */
 }

#headerbuttons { float: right; width: 300px; text-align: right; margin-bottom: 0px;}
#occasioncontent #headerbuttons a img { width: 20px; border: 0px; background: transparent; margin: 0px; margin-top: 0px}


/* ---------- ---------- Tabs ---------- ---------- */

#occasiontabs {	border-bottom: 1px solid #00368C; margin-top: 10px; margin-bottom: 10px;}

#occasiontabs a:link, #occasiontabs a:visited { 
	display: block; 
	min-width: 10px; 
	float: left; 
	border: 1px solid #00368C; 
	text-decoration: none; 
	border-bottom: 0px; 
	padding: 4px 20px; 
	margin-right: 10px; 
	margin-bottom: -1px;
	cursor: pointer;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 1px 1px 1px #00368C;
	font-style: normal;
	background: #00368C;

	}

#occasiontabs a:hover, #occasiontabs a:active, #occasiontabs a.tabactive { border-bottom: 0px; border: 1px solid #64b497; border-bottom: 0px; background: #64b497; }



/* ---------- ---------- LAYERS ---------- ---------- */

#overzicht, #details, #optiesextras, #media, #auto360, #contact { display:none; width: 900px; margin-bottom: 30px;}

img { border: 0px; }	

.occasionblock{
	display: block;
	width: 50%; 
	float: left;
	}
.occasionblock.mainfoto { background: none; height: 260px;}



#intro p.title,
#overzicht p.title,
#details p.title,
#media p.title,
#optiesextras p.title,
#auto360 p.title,
#contact p.title  {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	font-family:Arial, Helvetica, sans-serif;
}

#intro td, #intro p,
#overzicht td, #overzicht p,
#details td, #details p,
#media td, #media p,
#optiesextras td, #optiesextras p,
#auto360 td, #auto360 p,
#contact td, #contact p  {
	font-size: 12px;
	margin-bottom: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/* ---------- ---------- INTRO ---------- ---------- */

#intro img { float: left; margin-top: 2px; width: 320px; }
#intro table.voertuiggegevens { width: 95%; margin: 0px; padding: 0px; margin-left: 10px;}
#intro td.label { border-bottom: 1px solid #00368C; width: 40%; padding: 2px; color: #333333; font-weight: bold; line-height: 18px; }
#intro td.details { border-bottom: 1px solid #00368C; width: 60%; padding: 2px; line-height: 18px; font-weight: bold;}

#intro table.labels { margin-top: 40px; }
#intro #youtube_kl_container { width: 420px; height: 260px; border: 1px solid #cccccc; margin: 0 auto; margin-bottom: 10px; display: none} /* UITGESCHAKELD */
#intro #youtube_kl { width: 420px; height: 260px; position: absolute; z-index:1;}
#intro #youtube_kl_overlay { width: 420px; height: 235px; margin: 0 auto; background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/blank.gif'); cursor: pointer; position: absolute; z-index:10;}

/* ---------- ---------- OVERZICHT ---------- ---------- */
#overzicht #contactbuttons { 
	display: block; 
	min-width: 10px; 
	float: right; 
	margin-right: 0px; 
	margin-left: 30px;
	margin-top: 5px;
	width: 200px;
	text-align: left;
	}
#overzicht #contactbuttons p.title { 
	text-align: left;
	}	

#overzicht #overzichtgegevens { width: 460px; float: left;}
	
#overzicht #contactbuttons a.callmeback { 
	display: block; 
	min-width: 10px; 
	border: 1px solid #cccccc; 
	text-decoration: none; 
	padding: 4px 20px; 
	background: #00368C; 
	margin-right: 10px; 
	margin-top: 10px;
	margin-bottom: 10px;
	color: #ffffff;
	font-style: normal;
	}

#overzicht #contactbuttons a.callmeback:hover { 
color: #ffffff;
	font-weight: bold;
	text-shadow: 1px 1px 1px #00368C;
	font-style: normal;
	background: #64b497; /* Old browsers */
background: -moz-linear-gradient(top,  #64b497 1%, #00368C 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#64b497), color-stop(100%,#00368C)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #64b497 1%,#00368C 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #64b497 1%,#00368C 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #64b497 1%,#00368C 100%); /* IE10+ */
background: linear-gradient(to bottom,  #64b497 1%,#00368C 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b497', endColorstr='#00368C',GradientType=0 ); /* IE6-9 */
}


/* ---------- ---------- DETAILS ---------- ---------- */
#details table.voertuiggegevens { width: 95%; margin: 0px; padding: 0px; margin-left: 10px;}
#details td.label { border-bottom: 1px solid #00368C; width: 50%; padding: 2px; color: #333333; font-weight: bold; line-height: 18px;}
#details td.details { border-bottom: 1px solid #00368C; width: 50%; padding: 2px; line-height: 18px; font-weight: bold; }

#details table.labels { margin-top: 40px; }
#details #youtube_kl_container { width: 420px; height: 260px; border: 1px solid #333333; margin: 0 auto; margin-bottom: 10px; }
#details #youtube_kl { width: 420px; height: 260px; position: absolute; z-index:1;}
#details #youtube_kl_overlay { width: 420px; height: 235px; margin: 0 auto; background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/blank.gif'); cursor: pointer; position: absolute; z-index:10;}

#details td.bottomborder { border-bottom: 1px solid #00368C;}
#details td.topborder { border-top: 1px solid #00368C;}

/* ---------- ---------- OPTIES EXTRAS ---------- ---------- */

#optiesextras p.subtitle { margin-top: 20px; clear:both; color: #64b497; font-weight: bold;}
#optiesextras ul { display: block; margin-left: 0px;}
#optiesextras li { float: left; width: 30%; font-style: normal; color: #333333; list-style: none; margin-left: 5px; padding: 0px; padding-left: 15px; background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/bullet.png') 0% 6px no-repeat;}

#optiesextras table.techniekgegevens { width: 95%; margin: 0px; padding: 0px; margin-left: 10px;}
#optiesextras td.label { width: 18%; padding: 2px; }
#optiesextras td.details { width: 30%; padding: 2px; }
#optiesextras td.spacer { border-bottom: 0px; width: 4%; }


/* ---------- ---------- MEDIA / Auto360 ---------- ---------- */

#media, #auto360 { text-align: center; }
#media img { float: left; margin: 10px; margin-top: 2px; width: 152px; }
#youtube { width: 660px; height: 394px; border: 1px solid #cccccc; margin: 0 auto;}
#youtube iframe { width: 660px!important; height: 394px!important}


/* ---------- ---------- CONTACT ---------- ---------- */

#contact #form { float: left; width: 440px;}
#contact #form #autocommercecontactframe { width: 440px; height: 610px; }
#contact span.formlabel { display: block; width: 150px; float: left;}
#contact span.formlabel.verplichtveld { font-style: italic; font-size: 10px; color: #666666;}
#contact span.verplicht { margin-left: 5px; color: #ff0000; font-weight: bold;}
#contact input { display: block; width: 200px; float: left; margin-bottom: 5px; color: #333333;}
#contact select { display: block; width: 205px; float: left; margin-bottom: 5px; color: #333333;}
#contact textarea { display: block; width: 300px; height: 100px; float: left; color: #333333;}
#contact input.button { color: #64b497; width: 100px; text-align: center;}
#contact input.checkbox{ width: 20px; float: left; margin-bottom: 5px; color: #333333;}


#contact #contactbuttons { 
	display: block; 
	min-width: 10px; 
	float: right; 
	margin-right: 0px; 
	margin-left: 30px;
	margin-top: 5px;
	width: 200px;
	text-align: left;
	white-space: nowrap;
	}
	
#contact #contactbuttons p.title { 
	text-align: left;
	}

	
#contact #contactbuttons a.callmeback { 
	display: block; 
	min-width: 10px; 
	border: 1px solid #cccccc; 
	text-decoration: none; 
	padding: 4px 20px; 
	background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/gradient.png'); 
	margin-right: 10px; 
	margin-top: 10px;
	margin-bottom: 10px;
	color: #333333;
	font-style: normal;
	}

#contact #contactbuttons a.callmeback:hover { background: url('http://list.auto-commerce.nl/templates/autocommercepro/images/gradienthover.png');}


#facebook iframe {
	 height: 35px;
	 margin-top: 5px;
	 width: 300px;
	 float: left;
}

#occasioncontent #copyright {
	 float: right;
	 line-height: 40px;
	 font-size: 11px;
	 background: none;
	 padding-top: 0px;
	 padding-bottom: 0px;
}

/* ----- ----- ----- RSPONSIVE ----- ----- ----- */

/* Tablet */
@media screen and (max-width: 800px) {

	#occasioncontent {
		width: 620px;
		margin-top: 5px;
	}
	
	#overzicht, #details, #optiesextras, #media, #auto360, #contact { display:none; width: 620px; margin-bottom: 30px;}
	#overzicht #overzichtgegevens { width: 620px; }
	
	
		#content article img {width: auto!important; height: auto!important; }
		#headerbuttons { float: right; width: 300px; text-align: right; margin-bottom: 0px; margin-top: -20px;}
		#occasioncontent #headerbuttons img { width: 20px!important; border: 0px; background: transparent; margin: 0px; height: auto!important;}
		#occasioncontent #headerbuttons a {padding: 0px; }
		#occasiontabs {	margin-top: 0px; margin-bottom: 10px;}
		#occasiontabs a:link, #occasiontabs a:visited {  margin-top: 10px; width: 140px;}
		
		#overzicht #contactbuttons { float: none; clear: both; padding-top: 20px; margin-left: 0px;}
		#contact #contactbuttons { float: none;  clear: both; padding-top: 20px; margin-left: 0px; }
		
		#media, #auto360 { text-align: center; }
		#occasioncontent #media a {padding: 0px; }
		#occasioncontent #media a img { float: left; margin: 10px; margin-top: 2px; width: 100px!important; }
		#youtube { width: 600px!important; height: 364px; border: 1px solid #cccccc; margin: 0 auto;}
		#youtube iframe { width: 600px!important; height: 364px!important}
		
		
}	 

/* Mobile */
@media screen and (max-width: 400px) {

	#occasioncontent {
		width: 300px;

	}
	#occasioncontent a {padding: 0px;}
	
	#occasioncontent .navbuttons { float: none; line-height: 20px; display: block; width: 300px; margin-top: -10px; text-align: center;}
	#occasioncontent .navbuttons span { margin-right: 2px;}
	#occasioncontent .navbuttons a { margin-right: 2px; font-weight: normal; }
	#occasioncontent .navbuttons a:hover { font-weight: normal; }
	
	#occasioncontent h1 { text-align: center;}
 
	#headerbuttons { float: none; width: 300px; text-align: center; margin-bottom: 0px; margin-top: 10px;}
	
	.occasionblock{
	display: block;
	width: 100%; 
	float: none;
	}
	
	.occasionblock.mainfoto { height: auto!important;margin-bottom: 10px;}
	
	#occasiontabs a:link, #occasiontabs a:visited {  margin-top: 10px; width: 94px;}
	
	#overzicht, #details, #optiesextras, #media, #auto360, #contact { display:none; width: 300px; margin-bottom: 10px;}
	#overzicht #overzichtgegevens { width: 300px; }
	
	#optiesextras li { width: 90%; margin-left: 0px; padding-left: 10px; }
	
	#occasioncontent #contactbuttons { float: none; clear: both; padding-top: 10px; margin-left: 0px; text-align: left; width: 100%;}
	#occasioncontent  #overzicht #contactbuttons a.callmeback {display: none;}
	#occasioncontent #contactbuttons p.title, #occasioncontent #contactbuttons p { text-align: left;}
	
	#occasioncontent #copyright {
	 float: none;
	 text-align: center;
	 margin-bottom: -20px;
	 }
	 
	 #occasioncontent #media a {padding: 0px; }
	#occasioncontent #media a img { float: left; margin: 6px; margin-top: 2px; width: 86px!important; }
	
	#youtube { width: 300px!important; height: 157px; border: 1px solid #cccccc; margin: 0 auto;}
	#youtube iframe { width: 300px!important; height: 157px!important}
	
	#contact #form { float: none; width: 290px;}
	#contact #form:after { 
		content:"Bezoek onze website op een tablet of desktop computer voor meer contact mogelijkheden zoals het aanvragen van een proefrit, offerte of inruiltaxatie.";
		font-weight: normal; font-style: italic;}
	#contact #autocommercecontactframe { display: none;}
	#contact #contactbuttons { float: none; clear: both; padding-top: 0px; margin-left: 0px; text-align: center; width: 100%;}
	#contact #contactbuttons p.title, #contact #contactbuttons p { text-align: center;}
}