/***************************************************
  Ess - Sibran Lens
  http://www.e-ss.be
  
  Karitt

*****************************************************/


/*------------ imports --------------------------------*/
@import url(../typography.css);

 

/*------------------------------------------------------------------------------------------ 1. structure --------------------------------*/
body {background:url(../../img/css_backgrounds/bg-website.gif) repeat-x left top; background-color:#200c01;}
#container {width: 674px; margin:0 auto; background:url(../../img/css_backgrounds/bg-top.gif) no-repeat 1px top; padding:0 0 15px 186px;}

#header {width:674px; height:278px; overflow: hidden;}
#flashContent {margin:0 0 0 1px; float: left;}
.error {padding:8px 0; clear: both;color:red;}


/* language switch */
#languageSwitch {width:660px; height:50px; overflow:hidden; padding:0 14px 0 0}
#languageSwitch a {display:block; width:27px; height:21px;background:url(../../img/css_backgrounds/bg-language-switch.gif) no-repeat left top; text-indent:-9999px;margin:0 0 0 5px;	float:right;}
#languageSwitch a#langSwitchNL {background-position:0px top;}
#languageSwitch a#langSwitchNL:hover {background-position:-37px top;}
#languageSwitch a#langSwitchFR {background-position:-74px top;}
#languageSwitch a#langSwitchFR:hover {background-position:-111px top;}

.nl #languageSwitch a#langSwitchNL {background-position:-37px top;}
.fr #languageSwitch a#langSwitchFR {background-position:-111px top;}

.clear {clear: both;}

.center {text-align:center;}

/*------------------------------------------------------------------------------------------ 2. navigation --------------------------------*/
#navigation {width:642px; height:40px; overflow:hidden; padding:0 0 0 32px; margin-top:-50px}
#navigation ul li {display: inline; float: left; background:url(../../img/css_backgrounds/bg-nav-item.gif) repeat-x left 16px; margin:0 7px 0 0; height:40px; }
#navigation ul li a {text-indent:-9999px}
#navigation ul li#nav-home a {display: block; width:58px; height:16px; background:url(../../img/buttons/nl/bg-nav-home.gif) no-repeat left top;}
#navigation ul li#nav-home a:hover {display: block; width:58px; height:16px; background:url(../../img/buttons/nl/bg-nav-home-hover.gif) no-repeat left top;}
#navigation ul li#nav-offer a {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-offer.gif) no-repeat left top;}
#navigation ul li#nav-offer a:hover {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-offer-hover.gif) no-repeat left top;}
#navigation ul li#nav-route a {display: block; width:60px; height:16px; background:url(../../img/buttons/nl/bg-nav-route.gif) no-repeat left top;}
#navigation ul li#nav-route a:hover {display: block; width:60px; height:16px; background:url(../../img/buttons/nl/bg-nav-route-hover.gif) no-repeat left top;}
#navigation ul li#nav-about a {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-about.gif) no-repeat left top;}
#navigation ul li#nav-about a:hover {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-about-hover.gif) no-repeat left top;}
#navigation ul li#nav-contact a {display: block; width:71px; height:16px; background:url(../../img/buttons/nl/bg-nav-contact.gif) no-repeat left top;}
#navigation ul li#nav-contact a:hover {display: block; width:71px; height:16px; background:url(../../img/buttons/nl/bg-nav-contact-hover.gif) no-repeat left top;}

#nav-1 #navigation ul li#nav-home a {display: block; width:58px; height:16px; background:url(../../img/buttons/nl/bg-nav-home-hover.gif) no-repeat left top;}
#nav-2 #navigation ul li#nav-offer a {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-offer-hover.gif) no-repeat left top;}
#nav-3 #navigation ul li#nav-route a {display: block; width:60px; height:16px; background:url(../../img/buttons/nl/bg-nav-route-hover.gif) no-repeat left top;}
#nav-4 #navigation ul li#nav-about a {display: block; width:88px; height:16px; background:url(../../img/buttons/nl/bg-nav-about-hover.gif) no-repeat left top;}
#nav-5 #navigation ul li#nav-contact a {display: block; width:71px; height:16px; background:url(../../img/buttons/nl/bg-nav-contact-hover.gif) no-repeat left top;}

/*------------------------------------------------------------------------------------------ 3. content --------------------------------*/
#content {width:604px; border-right:5px solid #200c01; margin:0 0 0 44px; padding:7px 0 0 18px; background:#d42525}

a.link {background:url(../../img/icons/ico-link.gif) no-repeat left top; padding:2px 0 6px 25px; display:block}

/* left column */
#column01 {width:389px; float:left; overflow:hidden; padding:6px 15px 0 0}
#column01 ul {margin:0 0 2em 0}
#content li {background:url(../../img/css_backgrounds/bg-bullet.gif) no-repeat left 50%; padding:0 0 0 15px}
#column01 h1 {margin:0 0 1.5em 0}
#column01 h2 {margin:0 0 1em 0}

/* route block homepage */
#route-homepage {background: url(../../img/css_backgrounds/bg-globe.gif) no-repeat left top; padding:0 0 0 95px; margin:25px 0 0 0}

/* right column */
#column02 {width:185px; float:left; overflow:hidden; padding:0 15px 0 0}
#column02 ul {padding:15px 0 20px 0}

/* promotion block right column */
.seperator {background:url(../../img/css_backgrounds/bg-dotted-line.gif) repeat-x left 50%; padding:10px 0; width:185px}
.visual-promo img {border:5px solid #454235;}
a#btn-choose {display: block; width:185px; height:62px; background:url(../../img/buttons/nl/btn-choose.gif) no-repeat left top; text-indent:-9999px}

#nav-2 #promo-bottom, #nav-3 #promo-bottom, #nav-4 #promo-bottom, #nav-5 #promo-bottom {display:none;}

/* search form selectors */
#selectors {float: left; width:189px;}
.searchForm select.dropDown {width:150px; border:1px solid #c3baa9; float: left; clear: both; margin:5px 0}
.searchForm input.btnSearch {float: left; clear: both;}

/* search form pricing */
#pricing {
	width:316px;
	float: left;
	// overflow: hidden;}
#pricing ul li {float: left; background:none; padding:5px 0}
#pricing ul li.first {}
#pricing ul li.last { float:right;text-align: right;}
#bar {width:185px; height:16px; position: relative; background:url(../../img/css_backgrounds/bg-bar.gif) no-repeat left top;}
#bar a#slider-blue {display:block;width:16px; height:11px; background:url(../../img/css_backgrounds/bg-slider-blue.gif) no-repeat left top; position: absolute; left:9px; top:4px}
#bar a#slider-orange {display:block; width:16px; height:11px; background:url(../../img/css_backgrounds/bg-slider-orange.gif) no-repeat left top; position: absolute; left:162px; top:4px}
#pricing ul li label {float: left; width:10px; padding:0}
#pricing ul li input.txtValue {background:transparent; border: none; width:40px; float: left;}

/* contact form */
#contact-form label {width:85px; float: left; clear: both; margin:11px 0 0 0}
#contact-form input.txtField {width:250px; border:1px solid #cecece; float: left; margin:10px 0 0 0}
#contact-form textarea.txtArea {width:255px; height: 80px; border:1px solid #cecece; float: left; margin:10px 0 0 0}


/* list offer */
#offer {margin:25px 0 0 0}
#offer ul li {background:url(../../img/css_backgrounds/bg-dotted-line.gif) repeat-x left bottom; display:inline; float:left; margin:0 0 15px 0; padding:0 0 15px 0}
#offer ul li .offer-visual {float: left; width:95px; margin:0 13px 0 0}
#offer ul li .offer-visual img {border:3px solid #454235;}
#offer ul li .offer-description {float:left; width:265px; margin:0 17px 0 0}
#offer ul li .offer-description a.link {margin:10px 0 0 0}
#offer ul li .offer-specs {float: left; width:183px;}
#offer ul li .offer-specs ul li {padding:2px 0 7px 25px; margin:4px 0 0 0}
#offer ul li .offer-specs ul li.spec-price {background:url(../../img/icons/ico-price.gif) no-repeat left top;}
#offer ul li .offer-specs ul li.spec-year {background:url(../../img/icons/ico-build-year.gif) no-repeat left top;}
#offer ul li .offer-specs ul li.spec-km {background:url(../../img/icons/ico-km.gif) no-repeat left top;}


/* detail fiche */
#detail-visual {padding:15px 0;width:50%;float:left;}
#detail-visual img {border:3px solid #454235;}
#detail-description {float:left;}
#detail-description li.spec-price {background:url(../../img/icons/ico-price.gif) no-repeat left top; padding:2px 0 7px 25px; margin:4px 0 0 0}
#detail-description li.spec-year {background:url(../../img/icons/ico-build-year.gif) no-repeat left top;padding:2px 0 7px 25px; margin:4px 0 0 0}
#detail-description li.spec-km {background:url(../../img/icons/ico-km.gif) no-repeat left top;padding:2px 0 7px 25px; margin:4px 0 0 0}

/*------------------------------------------------------------------------------------------ 4. titles --------------------------------*/
h1#h1-karitt-sports {display: block; width:147px; height:26px; background:url(../../img/titles/nl/ttl-karitt-sports.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-promotion {display: block; width:129px; height:29px; background:url(../../img/titles/nl/ttl-promotion.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-opinion {display: block; width:129px; height:29px; background:url(../../img/titles/nl/title_opinion_nl.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-route {display: block; width:147px; height:21px; background:url(../../img/titles/nl/ttl-route.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-about {display: block; width:147px; height:21px; background:url(../../img/titles/nl/ttl-over-ons.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-contact {display: block; width:147px; height:21px; background:url(../../img/titles/nl/ttl-contact.gif) no-repeat left top; text-indent:-9999px;}
h1#h1-offer {display: block; width:147px; height:21px; background:url(../../img/titles/nl/ttl-offer.gif) no-repeat left top; text-indent:-9999px;}
h2#h2-hours {display: block; width:163px; height:35px; background:url(../../img/titles/nl/ttl-hours.gif) no-repeat left top; text-indent:-9999px;}
h2#h2-route {display: block; width:163px; height:20px; background:url(../../img/titles/nl/ttl-route.gif) no-repeat left top; text-indent:-9999px;}


/*------------------------------------------------------------------------------------------ 5. footer --------------------------------*/
#footer {width:606px; height:18px; background:url(../../img/css_backgrounds/bg-footer.gif) no-repeat left top; margin:0 0 15px 44px; clear: both; padding:38px 0 0 20px;}

#gallery {float:left;width:100%;}
.thumbnail {float: left;margin: 0 5px 5px 0;padding: 0px;}
.clearboth { clear: both; }

.vorige {
cursor: hand; 
cursor: pointer;
}

.volgende {
cursor: hand; 
cursor: pointer;
}

.paginator {
	cursor: hand; 
	cursor: pointer;
	padding:7px;
	color:#200c01;
        font-size:120%;
}

.paginator-selected {
	padding:3px;
	color:#ECB33D;
	font-size: 175%;
}

.sold {
	font-size:125%;
	color: white;
	font-weight:bold;
	background: #ECB33D;
	padding: 3px;
}