/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Title : 
Author : John Davies / john.davies@gforces.co.uk / G-Forces Web Management Ltd

Type: Screen, Projection

Description : Screen and projection stylesheet for The John Clark Motor Group site

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

/* COMMON AND GLOBAL */
html { height: 100%; }
body { height: 100%; min-width: 960px; font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff; color:#000000; text-align:center; }
/*  This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text.  
Declaring the font size in pixels makes it more consistent across browsers. */
td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; }
html>body td, html>body textarea, html>body input, html>body select { font-size:11px; }
/* some browsers don't inherit the font into tables or textareas! */

/* ----- IDS ----- */
#outer { min-height: 100%; background: url(../images/layup/bodyBg.gif) top left repeat-x; }
* html #outer { height: 100%; } 
#outerImage { background: url(../images/layup/backgroundImage.jpg) center top no-repeat; }
* html #outerImage { height: 100%; } 
#container { min-height: 100%; width:960px; margin:0 auto; text-align:left; font-size:110%; line-height: normal; }
* html #container { height: 100%; } 

#printHeader { display:none;}

#header { height: 98px; position: relative; }
#header #logo { position: absolute; top: 0px; left: 0px; }
#header #btns { position: absolute; top: 0px; right: 0px; width: 357px;}
#header #btns a { float: left; display: block; }
#header #btns .btnJohnClarkGroup a { width: 144px; height: 35px; background:url(../images/layup/btnJohnClarkGroupSite.gif) 0px -35px no-repeat; }
#header #btns .btnJohnClarkGroup a:hover { background:url(../images/layup/btnJohnClarkGroupSite.gif) 0px 0px no-repeat; }
#header #btns .btnCars a { width: 53px; height: 40px; background:url(../images/layup/btnCars.gif) 0px -40px no-repeat; }
#header #btns .btnCars a:hover { background:url(../images/layup/btnCars.gif) 0px 0px no-repeat; }
#header #btns .btnVans a { width: 54px; height: 40px; background:url(../images/layup/btnVans.gif) 0px -40px no-repeat; }
#header #btns .btnVans a:hover { background:url(../images/layup/btnVans.gif) 0px 0px no-repeat; }
#header #btns .btnBikes a { width: 45px; height: 40px; background:url(../images/layup/btnBikes.gif) 0px -40px no-repeat; }
#header #btns .btnBikes a:hover { background:url(../images/layup/btnBikes.gif) 0px 0px no-repeat; }
#header #btns .btnBusiness a { width: 61px; height: 40px; background:url(../images/layup/btnBusiness.gif) 0px -40px no-repeat; }
#header #btns .btnBusiness a:hover { background:url(../images/layup/btnBusiness.gif) 0px 0px no-repeat; }
#header #contactDetails { position: absolute; top: 50px; right: 6px; }

/* ----- SLIDE ----- */
#slideCar { width: 100%; background: #575757 url(../images/layup/slideBg.gif) top left repeat-x; height: 100px; }
#slideCar a { float: left; margin-right: 20px; }
#slideVan { width: 100%; background: #575757 url(../images/layup/slideBg.gif) top left repeat-x; height: 100px; }
#slideVan a { float: left; margin-right: 20px; }
#slideBike { width: 100%; background: #575757 url(../images/layup/slideBg.gif) top left repeat-x; height: 100px; }
#slideBike a { float: left; margin-right: 20px; }
#slideBusiness { width: 100%; background: #575757 url(../images/layup/slideBg.gif) top left repeat-x; height: 100px; }
#slideBusiness a { float: left; margin-right: 20px; }
.slideContainer { width:960px; margin:0 auto; text-align:left; font-size:110%; padding: 0px; position: relative; }
.slideContainer .btnClose { position: absolute; top: 0px; right: 10px; z-index:  9999px; }

/* ----- LEFT COLUMN ----- */
#leftCol { float: left; width: 237px; margin-top: 7px; margin-bottom: 10px; }
#leftCol .title { height: 34px; position: relative; margin-bottom: 1px; }
#leftCol .shadow { position: absolute; bottom: -14px; left: 0px; }
#leftCol .box { width: 189px; margin-left: 14px; margin-right: 14px; margin-bottom: 11px; padding: 0px 10px 0px 10px; }
#leftCol .btn { margin: 0 auto; width: 120px; }
#leftCol .box .btnPrev { margin-left: -6px; float: left; display: inline; margin-top: 2px; }
#leftCol .box .btnNext { margin-right: -6px; float: right; display: inline; margin-top: 2px; }
#leftCol ul#dealerLocatorNav { list-style: none; padding: 0px 0px 20px 0px; margin: 0px; }
#leftCol ul#dealerLocatorNav li { cursor: pointer; margin: 20px 0px 0px 0px; padding-left: 40px; }
#leftCol ul#dealerLocatorNav .closed { height: 28px; }
#leftCol ul#dealerLocatorNav .dealerAddress { display: none; }
#leftCol ul#dealerLocatorNav .dealerTitle { display: block; font-weight: bold; font-size: 1.1em; }
#leftCol ul#dealerLocatorNav .open { background: url(../images/layup/iconMinus.gif) no-repeat; }
#leftCol ul#dealerLocatorNav .closed { background: url(../images/layup/iconPlus.gif) no-repeat; }

/* ----- RIGHT COLUMN ----- */
#rightCol { float: right; width: 723px; margin-top: 4px; margin-bottom: 10px; }
#mainContent { padding: 4px 0px 0px 14px; }
#mainContent .cmsImage { float: right; margin: 8px 0px 25px 25px; display: inline; }

/* ----- CAR DETAIL ----- */
#vehiclePhoto { float: right; margin: 8px 0px 25px 25px; display: inline; position: relative; }
#vehiclePhoto .badge { position: absolute; top: 2px; left: -42px; z-index: 9999; }
#vehicleTable { background:url(../images/layup/vehicleTableBg.gif) top left no-repeat; width: 709px; padding-top: 19px; }
#vehicleTable .padding { padding-top: 19px; }
#vehicleTable table { border-collapse: separate;}
#vehicleTable table td { font-weight: bold; text-align: center; background: #d6e8ec; font-size: 1.1em; }
#vehicleTable table td.pcm { background: #f7e8ec; }
#vehicleTable table .trAlt td { background: #f5f9fa; }
#vehicleTable table .trAlt td.pcm { background: #fdf9fa; }
#vehicleTable .open { height: 24px; overflow: hidden; position: relative; display: block; }
#vehicleTable .open img { position: absolute; left: 0px; }
#vehicleTable .closed { height: 24px; overflow: hidden; position: relative; display: block; }
#vehicleTable .closed img { position: absolute; left: 0px; }
#vehicleTable .noBg td { background: none; }
.detailedTableContainer { border-left: 1px solid #a1a1a1; border-bottom: 1px solid #a1a1a1; border-right: 1px solid #a1a1a1; }
.detailedTable { }
.detailedTable td { font-size: 1.0em !important; text-align: left !important; padding: 3px 0px 3px 18px; vertical-align: top; }
.detailedTable .blueBg { background: #dee9eb !important; }
.detailedTable .redBg { background: #faeae7 !important; }
.detailedTable .priceBg { background: #ce171e !important; color: #fff; }
#vehicleTable a.info {font-weight:bold;text-decoration: none !important; color: #d13015; }
#vehicleTable a.info:hover {position:relative; z-index:25; }
#vehicleTable a.info span{display: none; font-weight:normal !important; text-decoration:none !important; color: #000 !important;}
#vehicleTable a.info:hover span{display:block !important; position:absolute; padding:5px 10px 5px 10px; background: #fff; top:22px; left:0px; width:19em; border:1px solid #333; color:#000; text-align: center; text-decoration:none !important; z-index:100;}

#similarVehicles { width: 694px; }
#similarVehicles .mainTitle { }
#similarVehicles .box { float: left; width: 222px; margin-right: 9px; }
#similarVehicles .box a { display: block; cursor: pointer; text-decoration: none; width: 222px; font-weight: normal; padding-bottom: 10px; color: #000; }
#similarVehicles .box .thumb { display: block; background:url(../images/layup/noImage222x167.gif) top left no-repeat; width: 222px; height: 167px; }
#similarVehicles .box .title { display: block; font-weight: bold; font-size: 1.7em; padding: 6px 9px 0px 9px; }
#similarVehicles .box .additional { display: block; font-weight: bold; font-size: 1.1em; padding: 2px 9px 6px 9px; }
#similarVehicles .box .price { display: block; font-weight: bold; font-size: 1.7em; padding: 2px 9px 10px 9px; color: #6f8c8c; }
#similarVehicles .box .detail { display: block; padding: 0px 9px 0px 9px; }
#similarVehicles .box .btn { display: block; width: 120px; margin: 0px auto 0px auto; }
#similarVehicles .spacer { float: left; margin-top: 25px; }

/* ----- BOX LIST ----- */
#boxList {}
#boxList .box { float: left; width: 222px; margin-right: 10px; margin-bottom: 12px; }
#boxList .box a { display: block; width: 222px; cursor: pointer; text-decoration: none; }
#boxList .box .title { display: block; padding: 6px 0px 6px 5px; font-size: 1.1em; }

/* ----- LIST ----- */
#list { }
#list .listItem { background:url(../images/layup/shadowArticle.gif) bottom left no-repeat; padding-bottom: 14px; }
#list .listItem a { text-decoration: none; cursor: pointer; }
#list .listItem .thumb { display: block; position: relative; float: left; background:url(../images/layup/noImage222x167.gif) 0px 6px no-repeat; }
#list .listItem .thumb a { display: block; width: 222px; height: 167px; padding-right: 29px; padding-top: 6px; }
#list .listItem .titlePrice { display: block; float: left; }
#list .listItem .titlePrice a { display: block;  float: left; width: 442px; padding-bottom: 16px; }
#list .listItem .heading { font-size: 2.2em; display: block; float: left; }
#list .listItem .description { display: block;  float: left; width: 442px; cursor: pointer; min-height: 74px; }
#list .listItem .btns { display: block; float: left; width: 442px; }

/* ----- OFFER LIST ----- */
#offerTabs {}
#offerTabs .tab a { float: left; background: url(../images/layup/tabBg.gif) top center no-repeat; height: 25px; margin-right: 1px; padding: 7px 9px 0px 9px; color: #fff; text-decoration: none; }
#offerTabs .tab a:hover { float: left; background: url(../images/layup/tabBg.gif) center -32px no-repeat; }
#offerTabs .tab .active { float: left; background: url(../images/layup/tabBg.gif) center -32px no-repeat; }
#offerTabs .last a { padding: 7px 18px 0px 17px !important; }
#offerList .box { float: left; width: 350px; height: 231px; margin-right: 3px; margin-bottom: 3px; }
#offerList .box a { display: block; width: 350px; cursor: pointer; text-decoration: none; }
#offerList .box .title { display: block; padding: 6px 0px 6px 5px; font-size: 1.1em; }

/* ----- GLOBAL CLASSES ----- */
.clear { clear:both; display: block; }
.clearSmall { clear: both; display: block; height: 0; line-height: 0; font-size: 0; }
.hide { display:none; }
.show { display:block; }
.printShow { display:none; }
.printHide { display:block; }
.float_left { float:left !important; }
.float_right { float:right !important; }
.align_left { text-align:left !important; }
.align_center { text-align:center !important; }
.align_right { text-align:right !important; }
.align_justify { text-align:justify !important; }
.align_bottom { vertical-align:bottom !important; }
.image_right { float:right; margin:0 0 15px 15px; }
.image_left { float:left; margin:0 15px 15px 0; }
.image_center { margin:0 auto; }
.hand { cursor:pointer; }
.seo {text-decoration:none;font-weight:normal;}
.grey { color: #5e5e5e !important; }
.red { color: #c81a19 !important; }

/* ----- HEADINGS & PARAGRAPHS ----- */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:bold; }
h1 { font-size: 2.4em; }

/* ----- TOP NAVIGATION ----- */
#primaryNav { font-size: 1.1em; margin-bottom: 15px; height: 37px; }
#primaryNav ul { list-style: none; margin: 0; padding: 0; }
#primaryNav li { float: left; background: url(../images/layup/navDivider.gif) top right no-repeat; padding-right: 1px; }
#primaryNav li a { display: block; float: left; padding: 11px 20px 11px 20px; text-decoration: none; color: #fff; }
#primaryNav li a:hover { background: #779da5; }
#primaryNav li .active { background: #779da5; }
#primaryNav li.last { background: none; }

/* ----- SECONDARY NAVIGATION ----- */
.secondaryNav { margin: 0px 0px 11px 13px; }
.secondaryNav ul { list-style: none; margin: 0; padding: 0; }
.secondaryNav li { margin-bottom: 1px; font-size: 1.1em; }
.secondaryNav li a { text-decoration: none; color: #fff; padding: 4px 0px 4px 27px; width: 197px; background: #8db2ba url(../images/layup/secondaryNavPlus.gif) 9px 8px no-repeat; display: block; }
.secondaryNav li a:hover { text-decoration: none; color: #698288; background: #c1dce2 url(../images/layup/secondaryNavMinus.gif) 9px 9px no-repeat; }
.secondaryNav ul ul { list-style: none; margin: 0; padding: 0; }
.secondaryNav li li { margin-bottom: 1px; font-size: 1.1em; }
.secondaryNav li li a { text-decoration: none; color: #698288; padding: 4px 0px 4px 40px; width: 184px; background-color: #d6e8ec; background-image: none; display: block; }
.secondaryNav li li a:hover { text-decoration: none; background-color: #d6e8ec; background-image: none; }

/* ----- SITE MAP ----- */
#sitemap { list-style:none; margin:0 0 0 5px; padding:0;}
#sitemap ul { list-style:none;  margin:10px 0 0px 15px; padding:0;}
#sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;}

/* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */
#pageInfo { padding: 7px 14px 5px 14px; }
#breadcrumbs { float: left; color: #7b7b7b; font-weight: bold; }
#breadcrumbs a { text-decoration: none; color: #7b7b7b; }
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs .active { color: #000; }
#back { float: right; padding-right: 14px; font-weight: bold; color: #000; }
#back a { text-decoration: none; }
#back a:hover { text-decoration: underline; }
#searchInfo { padding: 0px 14px 20px 14px; background: url(../images/layup/searchInfoDivider.gif) bottom left no-repeat; }
#vehiclesFound { float: left; font-weight: bold; color: #7b7b7b; color: #7b7b7b; padding-bottom: 10px; }
#resultsSortBy { float: left; clear: left; color: #7b7b7b; }
#sortBy { float: left; }
#sortBy label { width: 50px; font-weight: bold; margin-top: 4px; }
#sortBy select { height: 20px; }
#resultsPerPage  { float: left; margin-right: 18px; }
#resultsPerPage label { width: 105px; font-weight: bold; margin-top: 4px; }
#resultsPerPage select { height: 20px; }
#pagination { float: right; margin-top: 25px; }
#pagination a { padding: 0px 4px 0px 4px; margin: 3px 0px 0px 0px; text-decoration: none; color: #000 !important; float: left; }
#pagination .prev, #pagination .next { background: none; margin: 0px 5px 0px 5px; }
#pagination .prev:hover, #pagination .next:hover { background: none; }
#pagination a:hover { text-decoration: none; background:#6f8c8c; color:#fff !important; font-weight: bold; }
#pagination .active { text-decoration: none; background:#6f8c8c; color:#fff !important; font-weight: bold; }
#paginationBottom { float: right; margin-top: 25px; padding-right: 8px; }
#paginationBottom a { padding: 0px 4px 0px 4px; margin: 3px 0px 0px 0px; text-decoration: none; color: #000 !important; float: left; }
#paginationBottom .prev, #paginationBottom .next { background: none; margin: 0px 5px 0px 5px; }
#paginationBottom .prev:hover, #paginationBottom .next:hover { background: none; }
#paginationBottom a:hover { text-decoration: none; background:#6f8c8c; color:#fff !important; font-weight: bold; }
#paginationBottom .active { text-decoration: none; background:#6f8c8c; color:#fff !important; font-weight: bold; }

/* ----- FOOTER ----- */
#footer { height: 136px; margin-top: -136px; background: url(../images/layup/footerBg.gif) top left repeat-x; }
#footerContent { width: 960px; margin: 0 auto; font-size:110%; line-height: normal; text-align:left; color: #b5b5b5; padding-top: 22px; }
#footerContent a { font-weight:normal; text-decoration:none; color: #b5b5b5; }
#footerContent a:hover { text-decoration:underline;}
#footerLegal { width: 405px; border-right: 1px solid #505050; float: left; padding-left: 46px; }
#footerLegal .footerLogo { float: left; margin-right: 15px; margin-bottom: 30px; }
#footerLegal p { padding: 3px 0px 15px 0px; }
#footerCarLinks {  border-right: 1px solid #505050; float: left; width: 326px; background:url(../images/layup/footerCarLinks.gif) 18px 0px no-repeat; padding: 31px 0px 0px 18px; }
#footerCarLinks .col1 { width: 163px; float: left; }
#footerCarLinks .col2 { width: 163px; float: left; }
#footerCommercialLinks {   float: left; width: 128px; background:url(../images/layup/footerCommercialLinks.gif) 18px 0px no-repeat; padding: 31px 0px 0px 18px; }
#footerCommercialLinks .col1 { width: 156px; float: left; }
#footerCommercialLinks .col2 { width: 156px; float: left; }

/* ----- GLOBAL ----- */
img { display:block; border:0; }
p { padding:0 0 15px 0; margin:0; }
address { font-style:normal;}

/* ----- LINKS ----- */
a { color:#000000; font-weight:bold; text-decoration:underline;cursor:pointer; }
a:hover { text-decoration:none; }

/* ----- FORMS ----- */
form { padding:0; margin:0; }
fieldset { padding:0; margin:0; border:0px none; display:inline; }
legend { padding:0; margin:0; display:none; }
label { display:block; width:260px; float:left; }
input, textarea { width:200px; font-size:11px !important;}
.requiredLabel { color:#ff0000;}
.checkRadio { width:20px; position:relative; left:-7px;}
#frmContact { margin-bottom:15px;}
#frmContact p { padding:7px 0;}
#frmContact select { width:204px;}
#frmContact div { margin-bottom:10px;}
#btnSubmit { width: 82px; height: 34px; border:none;}

/* ----- Prototype Validation ----- */
input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; }
input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #4544e4; color : #FF3300; }
input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; }
.validation-advice { margin: 5px 0; width:452px; padding: 5px; background-color: #4544e4; color : #FFF; font-weight: bold; }

/* ----- TABLES ----- */
table { border-collapse:collapse; }
table p { padding:0px; }