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

Title : 
Author : James Greenwood / james.greenwood@gforces.co.uk / G-Forces Web Management Ltd

Type: Screen, Projection

Description : Screen and projection stylesheet for Skurrays site

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

/* ----- IDS ----- */
#container { width:930px; background:none; }

#header { height:138px; }
#header #logo { left:-8px; top:24px; }
#header #badge { position:absolute; }
#header #visitSkurraysGroup { position:absolute; }

/* ----- LEFT COLUMN ----- */
#leftCol { width:247px; }

/* ----- VEHICLE SEARCH */
#vehicleSearch { width:247px; margin:0 0 20px; float:none; }
#vehicleSearch ul.domHeadings { width:247px; height:68px; background:none; }
#vehicleSearch ul.domHeadings li a { height:68px; }

#vehicleSearch ul.domHeadings li a.carSearch { width:82px; }
#vehicleSearch ul.domHeadings li a.carEcoSearch { width:83px; }
#vehicleSearch ul.domHeadings li a.vanSearch { width:82px; }

#vehicleSearch .domContent { width:247px; min-height:249px; position:static; }
* html #vehicleSearch .domContent { height:249px; }
#vehicleSearch .domContent .padding { padding:15px 19px 0 20px; }
#vehicleSearch .dt1 { display: block; }

#vehicleSearch form {}
#vehicleSearch form div, .searchDivider { margin:0 0 12px; float:none; }
#vehicleSearch .searchOptions { width:208px; height:30px; padding:0; margin:0 0 13px; }
#vehicleSearch #ecoSearchContent  .searchOptions
#vehicleSearch .searchOptions div { margin:0; float:left; }
#vehicleSearch .searchOptions a { outline:none; cursor:pointer; display:block; }
#vehicleSearch .searchOptions a span { display:none; }
#vehicleSearch .searchOptions .newSearch a { width:100px; height:30px; margin:0 8px 0 0; }
#vehicleSearch .searchOptions .usedSearch a { width:100px; height:30px; }

#vehicleSearch form select { width:206px; height:21px; font-size:12px; color:#545454; margin:0; }
#vehicleSearch form .btnAdvancedSearch { width:79px; height:22px; margin:0; position:relative; left:0; top:5px; float:left; }
#vehicleSearch form #btnSearch { width:80px; height:33px; margin:0; float:right; }

#leftCol .box { width:247px; margin:0 0 20px; }

/* ----- SAVE & COMPARE */
#saveCompare ul.domHeadings { width:247px; height:60px; }
#saveCompare ul.domHeadings li a.recentlyViewed { width:121px; height:60px; }
#saveCompare ul.domHeadings li a.saveCompare { width:126px; height:60px; }
#saveCompare ul.domHeadings li.active a.recentlyViewed { width:121px; height:60px; }
#saveCompare ul.domHeadings li.active a.saveCompare { width:126px; height:60px; }

#saveCompare .domContent { width:247px; background-position: left bottom !important; }
#saveCompare .domContent .padding { padding:15px 0 0 20px; }

/* ----- RIGHT COLUMN ----- */
#rightCol { width:673px; min-height:260px; }
* html #rightCol { height:260px; }
#rightCol .padding { padding:19px 10px 0; }

/* ----- NEW CARS */
#boxList {}
#boxList .box { width:208px; height:204px; margin:0 10px 14px 0; float:left; }
#boxList .end { margin:0 0 14px; }
#boxList .box a { text-decoration:none; font-weight:normal; padding:10px 10px 0; display:block; }
#boxList .box .thumb { width:188px; height:141px; margin:0 0 10px; position:relative; display:block; }
#boxList .box .thumb .frame { position:absolute; left:0; top:0; display:block; }
#boxList .box .model { width:188px; height:33px; font-size:13px; color:#FFF; font-weight:bold; display:block; }
#boxList .box .model span { padding:8px 40px 0 5px; display:block; }

/* ----- NEW CAR INTERMEDIATE */
#interMain { width:356px; height:280px; margin:0 0 15px 15px; position:relative; float:right; }
#interMain .frame { position:absolute; left:0; top:0; }

#selectVariant { width:649px; height:49px; margin:0 0 22px; clear:both; }
#selectVariant form { padding:0 20px 0 166px; }
#selectVariant form select { width:382px; height:20px; margin:14px 0 0; }
#selectVariant form #btnView { width:57px; height:33px; margin:9px 0 0; }

/* ----- NEW CAR DETAIL */
#newCarDetail { width:281px; margin:0 0 15px; float:left; }

#newCarDetail ul.domHeadings { width:281px; height:32px; list-style:none; padding:0; margin:0; }
#newCarDetail ul.domHeadings li { float: left; }
#newCarDetail ul.domHeadings li a { outline:none; display: block; float: left; }
#newCarDetail ul.domHeadings li a span { display:none; }

#newCarDetail ul.domHeadings li a.overview { width:81px; height:32px; }
#newCarDetail ul.domHeadings li a.features { width:75px; height:32px; }
#newCarDetail ul.domHeadings li a.techSpec { width:83px; height:32px; }
#newCarDetail ul.domHeadings li a.eco { width:42px; height:32px; }

#newCarDetail .domContent { width:281px; height:235px; overflow:auto; }
#newCarDetail .domContent .padding { padding:5px 0 0 10px; }

#newCarDetail .domContent table { width:240px; }
#newCarDetail .domContent table tr {}
#newCarDetail .domContent table tr td { color:#515151; border-bottom:1px solid #FFF; padding:6px 0; }
#newCarDetail .domContent table tr.bottom td { background:none; border:none; }
#newCarDetail .domContent table tr td.heading { font-weight:bold; color:#505050; }

#newCarDetail .dt1 { display: block; }

#newMain { width:356px; height:267px; margin:0 0 15px; position:relative; float:right; }
#newMain .frame { position:absolute; left:0; top:0; }

#newOptions { width:648px; height:96px; margin:0 0 15px; }
#newOptions div { float:left; }
#newOptions a { outline:none; display:block; }
#newOptions span { display:none; }
#newOptions .requestBrochure a { width:110px; height:96px; }
#newOptions .requestTestDrive a { width:110px; height:96px; }
#newOptions .adviceQuestions a { width:110px; height:96px; }
#newOptions .currentOffers a { width:111px; height:96px; }
#newOptions .nearlyNewVehicles a { width:103px; height:96px; }
#newOptions .valueVehicle a { width:104px; height:96px; }

#carCustomization { width:648px; margin:0 0 15px; }
#carCustomization ul.domHeadings { width:430px; height:31px; list-style:none; margin:0; padding:0; }
#carCustomization ul.domHeadings li { padding:0; margin:0; float:left; }
#carCustomization ul.domHeadings li a { outline:none; display:block; }
#carCustomization ul.domHeadings li a span { display:none; }

#carCustomization ul.domHeadings li a.customization { width:236px; height:31px; }
#carCustomization ul.domHeadings li a.finance { width:113px; height:31px; }
#carCustomization ul.domHeadings li a.insurance { width:81px; height:31px; }

#carCustomization .domContent { width:648px; min-height:390px; }
* html #carCustomization .domContent { height:390px; }

#carCustomization #variantSelector { width:648px; height:45px; border-bottom:1px solid #FFF; padding:19px 0 0; margin:0 0 15px; }
#carCustomization #variantSelector div { margin:0 0 0 15px; display:inline; float:left; }
#carCustomization #variantSelector select { width:216px; margin:7px 0 0 0; }
#carCustomization #variantSelector #btnSelectVehicle { width:142px; height:33px; }

#carCustomization .domContent #configOptions { width:278px; margin:0 0 0 15px; display:inline; float:left; }
#configOptions .title { font-size:12px; font-weight:bold; color:#000; display:block; }
#configOptions #colorOptions {}
#configOptions #colorOptions a { width: 14px; height: 14px; border: 1px solid #FFFFFF; margin:0 12px 8px 0px; display: block; float: left; position:relative; }
/*
#configOptions #colorOptions a#clrBlack { background: #000000; }
#configOptions #colorOptions a#clrBlue { background: #0a47c9; }
#configOptions #colorOptions a#clrGrey { background: #666666; }
#configOptions #colorOptions a#clrGreen { background: #8fa980; }
#configOptions #colorOptions a#clrRed { background: #932e2e; }
#configOptions #colorOptions a#clrSilver { background: #b9b9b9; }
#configOptions #colorOptions a#clrWhite { background: #fdfdfd; }
*/
#colorOptions .swatch .frame { position: absolute; top: 0; left: 0; }
#colorOptions .swatch a { display: block; width: 14px; height: 14px; }
#colorOptions .swatch a .enlargedColour { display:none; }
#colorOptions .swatch a:hover .enlargedColour { display:block; position:absolute; width:60px; height:60px; top: 20px; border:1px solid #000; z-index:100; }

#configOptions form table { width: 100%; }
#configOptions form table tr td { background: #ececee; }
#configOptions form table tr.subRow td { background: none; padding:0 4px; }
#configOptions form table td { border-bottom: 1px solid #dcdcdc; padding: 4px; }
#configOptions form table td.plus { width: 11px; height: 11px; cursor: pointer; padding: 4px; }
#configOptions form table td.minus { width: 11px; height: 11px; cursor: pointer; padding: 4px; }

#carCustomization .domContent #priceTable { width:330px; margin:0 11px 0 0; display:inline; float: right; }
#carCustomization .domContent #priceTable table { width:100%; }
#carCustomization .domContent #priceTable table thead tr th { height:35px; font-size:12px; color:#535353; text-align:center; border-bottom:1px solid #FFF; border-right:1px solid #FFF; }
#carCustomization .domContent #priceTable table thead tr th.end { border-right:none; }

#carCustomization .domContent #priceTable table tbody td { font-size:11px; color:#000; text-align:center; border-right:1px solid #FFF; padding:0 0 11px; }
#carCustomization .domContent #priceTable table td.end { border-right:none; }
#carCustomization .domContent #priceTable table tbody tr td.heading { color:#000 !important; font-weight:normal !important; text-align:left; padding:0 0 11px 15px; }
#carCustomization .domContent #priceTable table tbody tr.optionsTotal td { color:#FFF; font-weight:bold; }
#carCustomization .domContent #priceTable table tbody tr.top td { background:none; padding:11px 0 11px 0; }
#carCustomization .domContent #priceTable table tbody tr.top td.heading { background:none; padding:11px 0 11px 15px; }
#carCustomization .domContent #priceTable table tfoot td { text-align:center; color: #FFF; font-weight: bold; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background:#979797; padding:8px 0; }

#carCustomization .domContent .terms { width:330px; text-align: right; color: #505050; font-size: 11px; padding: 8px 11px 0 0; float:right; }

#carCustomization #loanForm { padding:10px 0 0; }
#carCustomization #loanForm table { width:auto; }
#carCustomization #loanForm table tr {}
#carCustomization #loanForm table tr td { width:150px; font-size:12px; padding:8px; }

/* ----- USED CARS  */
.searchOptions { width:654px; }
.searchOptions.top { background:url(../images/layup/vauxhall/searchOptionsDividerTop.jpg) no-repeat 9px bottom; padding:11px 10px 22px 9px; margin:0 0 15px; }
.searchOptions.bottom { background:url(../images/layup/vauxhall/searchOptionsDividerBottom.jpg) no-repeat 9px top; padding:22px 10px 11px 9px; }

.searchOptions div { float:left; }
.searchOptions .clear,
.searchOptions .clearSmall { float:none; }

.searchOptions .vehiclesFound { width:117px; font-size:11px; color:#4e4e4e; font-weight:bold; padding:2px 0 0; }

.searchOptions .sortBy { width:180px; margin:0 20px 0 0; }
.searchOptions .sortBy label { width:50px; font-size:11px; color:#4e4e4e; font-weight:bold; padding:2px 0 0; }
.searchOptions .sortBy select { width:122px; }

.searchOptions .results { width:100px; }
.searchOptions .results label { width:50px; font-size:11px; color:#4e4e4e; font-weight:bold; padding:2px 0 0; }
.searchOptions .results select { width:41px; }

#list { margin:0 0 15px 9px; }

/* ----- USED VEHICLE DETAIL */
#usedOptions { width:650px; height:96px; margin:0 0 17px; }
#usedOptions div { float:left; }
#usedOptions div a { height:96px; cursor:pointer; outline:none; display:block; }
#usedOptions div a span { display:none; }
#usedOptions .enquireAboutVehicle a { width:101px; }
#usedOptions .sendFriend a { width:106px; }
#usedOptions .printVehicleSpec a { width:110px; }
#usedOptions .makeOffer a { width:111px; }
#usedOptions .saveCompare a { width:111px; }
#usedOptions .valueVehicle a { width:111px; }

#usedCarDetail #loanForm { padding:0 0 0; }
#usedCarDetail #loanForm table { width:auto; }
#usedCarDetail #loanForm table tr {}
#usedCarDetail #loanForm table tr td { width:150px; padding:5px; }

#relatedVehicles { width:649px; padding:0 0 10px; }
#relatedVehicles #list { width:630px; margin:22px 0 0 10px; }
#relatedVehicles #list .listItem { width:630px; height:167px; margin:0 0 22px; }
#relatedVehicles #list .listItem .padding { padding:0; }
#relatedVehicles #list .listItem a { cursor:pointer; text-decoration:none; font-weight:normal; display:block; }
#relatedVehicles #list .listItem .thumb { width:223px; height:167px; position:relative; float:left; display:block; }
#relatedVehicles #list .listItem .thumb .frame { position:absolute; left:0; top:0; display:block; }
#relatedVehicles #list .listItem .thumb .overlayOffer { position:absolute; left:-16px; top:-15px; display:block; }
#relatedVehicles #list .listItem .thumb .overlayDealership { position:absolute; right:0; bottom:0; display:block; }
#relatedVehicles #list .listItem .rightSide { width:397px; float:right; display:block; }
#relatedVehicles #list .listItem .rightSide .model { width:397px; margin:0 0 4px; display:block; }
#relatedVehicles #list .listItem .rightSide .model span { font-size:15px; color:#fff; font-weight:bold; padding:10px 50px 0 10px; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo { width:397px; height:120px; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .padding { padding:13px 10px 0; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .detailsTable { height:71px; font-size:12px; color:#1b1b1b; margin:0 0 10px; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .detailsTable .feature { width:65px; font-weight:bold; float:left; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .detailsTable .option { width:90px; padding:0 55px 0 0; text-align:right; float:left; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .detailsTable .option.end { padding-right: 10px; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .price { width:254px; font-size:12px; color:#790003; font-weight:bold; display:block; }
#relatedVehicles #list .listItem .rightSide .vehicleInfo .price span { font-size:12px; color:#000; text-decoration:line-through; }

/* ----- OFFERS LIST  */
#offersList #boxList .box .thumb { width:322px; }
#offersList #boxList .box .description { width:290px; text-transform:uppercase; }

/* ----- OFFERS DETAIL */
#offerMain { width:652px; height:238px; margin:0 0 20px; position:relative; }
#offerMain .frame { position:absolute; left:0; top:0; z-index: 500 }

/* ----- MASTER COLUMN ----- */
#masterCol { width:930px; }
#masterCol .padding { padding:8px 9px 0; }

/* ----- USED VEHICLE DETAIL */
#modelLocationTelephone { width:540px; float:left; }
#modelLocationTelephone .model { font-size:22px; font-weight:bold; color:#393939; display:block; }
#modelLocationTelephone .locationTelephone { font-size:13px; color:#000000; display:block; }
#modelLocationTelephone .locationTelephone span { font-size:15px; text-transform:uppercase; font-weight:bold; }

#usedDetailPrice { width:365px; height:49px; font-size:18px; color:#FFF;  float:right; }
#usedDetailPrice span { width:124px; text-align:center; font-weight:bold; padding:12px 0 0; display:block; float:left; }
#usedDetailPrice .was { width:117px; font-weight:normal; text-decoration:line-through; }

#detailThumbs { width:356px; float:left; }
#detailThumbs #mainImg { width:356px; height:267px; margin:0 0 10px; position:relative; }
#detailThumbs #mainImg .frame { position:absolute; left:0; top:0; }
#detailThumbs #thumbs { width:356px; height:40px; overflow:hidden; position:relative; } 
#detailThumbs #thumbs #thumbnailSlider { width:10000px; height:40px; display:inline; position:absolute; left:0px; top:0px; }
#detailThumbs #thumbs .thumb { width:53px; height:40px; margin:0 8px 0 0; display:block; float:left; }
#detailThumbs #thumbs .thumb .btnPrevious { width:53px; height:40px; position:absolute; top:0; left:0; display:block; }
#detailThumbs #thumbs .thumb .btnNext { width:53px; height:40px; position:absolute; top:0; right:0; display:block; }

#usedCarDetail { width:541px; height:44px; float:right; }
#usedCarDetail ul.domHeadings { list-style:none; padding:0; margin:0; }
#usedCarDetail ul.domHeadings li { float: left; }
#usedCarDetail ul.domHeadings li a { outline:none; display: block; float: left; }
#usedCarDetail ul.domHeadings li a span { display:none; }

#usedCarDetail ul.domHeadings li a.overview { width:107px; height:44px; }
#usedCarDetail ul.domHeadings li a.specification { width:109px; height:44px; }
#usedCarDetail ul.domHeadings li a.technical { width:110px; height:44px; }
#usedCarDetail ul.domHeadings li a.finance { width:109px; height:44px; }
#usedCarDetail ul.domHeadings li a.warranty { width:106px; height:44px; }

#usedCarDetail .domContent { width:541px; height:273px; }
#usedCarDetail .domContent .padding { padding:5px 13px 0; }
#usedCarDetail .dt1 { display: block; }

#usedCarDetail .domContent table tr {}
#usedCarDetail .domContent table tr td { width:117px; font-size:12px; text-align:right; color:#1b1b1b; }
#usedCarDetail .domContent.dt2 table tr td { width: 450px; }
#usedCarDetail .domContent table tr td.heading { width:76px; font-weight:bold; text-align:left; }

#usedCarDetail .domContent table tr th { background: #e1e1e1; border: 1px solid #d4d4d4; }
#usedCarDetail .domContent table tr td { border: 1px solid #d4d4d4; background: none; }

/* ----- CMS AREA ----- */
#cmsArea { width:267px; margin:0 0 15px 15px; float:right }
#cmsArea .cmsImage { margin:0 0 12px 0; position:relative; float:none; }
#cmsArea #btnBookService { width:267px; height:38px; }

/* ----- CMS TABLE ----- */
table.cmsTable tr td.heading { background:#c61d2f; }

/* ----- CMS LIST ----- */
#cmsList .box { width:206px; height:203px; margin:0 9px 10px 0; }

/* ----- TOP NAVIGATION ----- */
#primaryNav { width:930px; height:43px; margin:0 0 20px; float:none; }
#primaryNav ul {}
#primaryNav li { }
#primaryNav li a { font-size:12px; color: #FFFFFF; text-decoration: none; display: block; padding:14px 21px 15px; }
#primaryNav li a:hover,
#primaryNav li.active a { color: #FFFFFF; text-decoration: none; }

#primaryNav li#contact a { padding:14px 23px 15px 22px; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
#primaryNav li#contact a { padding:14px 17px 15px 18px; }
}

/* ----- BREADCRUMBS/PAGINATION/PAGE TOP AND BOTTOMS ----- */
#breadcrumbs { width:659px; height: 33px; color:#fff; padding:7px 7px 0; margin:0; float:right; }
#breadcrumbs a { color:#fff; }
#breadcrumbs .currentPage { color:#fff; }
#breadcrumbs .btnBack a { color:#fff; }

/* ----- FOOTER ----- */
#footer { color:#5b5b5b; }
#footer p { color:#5b5b5b; }
#footer a { color:#5b5b5b; }