/* Copyright 2009 www.ukwebsites.net 
   DARK BLUE: #000099
   GOLD: #e4bf4d
*/

body, html {height: 100%}
* {margin: 0; padding: 0; outline: 0}
body {margin: 0; padding: 0 0 40px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #eee; background: url(../images/bodyBack.jpg) 0 0 repeat-x #000}

h1, h2, h3, h4 {margin: 20px 20px 0 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #eee; text-transform: uppercase}
h1 {font-size: 16px; text-transform: uppercase}
h1 em {font-size: 22px; display: block; font-style: normal}

#bodyHome h1 {color: #e4bf4d}
#bodyHome h1 em {color: #eee; font-style: normal}

h2 {font-size: 18px}
h3 {font-size: 16px}
h4 {font-size: 14px}

p, ol, ul {margin: 10px 20px; line-height: 1.6}
ul li, ol li {margin-left: 20px; padding: 0 0 0 17px; list-style: none outside; background: url(../images/bullet.gif) 0 6px no-repeat}

ul.featuresList {margin-top: 25px; width: 100%; overflow: hidden}
ul.featuresList li {width: 40%; padding-top: 3px; padding-bottom: 3px; float: left; background: url(../images/arrowBullet.gif) 0 7px no-repeat}

a {text-decoration: none; font-weight: bold; color: #e4bf4d; float: left }
a:hover {color: #eee}
a img {border: 0}

div#mollyLink {margin: 20px 0 0 25px;}
div#mollyLink a {color: #666; font-size: 11px; text-align: right; text-transform: uppercase}

a#davidSpear {position: absolute; left: 28px; top: 28px; z-index: 100; width: 482px; height: 85px; background: url(../images/david-spear.jpg) left top no-repeat}
a#davidSpear:hover {background-position: left bottom}


div#topAddress {position: absolute; left: 550px; top:39px; z-index: 101; font-weight: bold; color: #eee; line-height: 1.25; font-size: 13px; text-transform: uppercase; width: 400px; height: 90px;}
p#topTel {position: absolute; left: 0; top: 40px; z-index: 102; font-weight: bold; color: #eee; line-height: 1.25; font-size: 16px; text-transform: uppercase; margin: 0;}
p#topFax {position: absolute; left: 180px; top: 40px; z-index: 103; font-weight: bold; color: #eee; line-height: 1.25; font-size: 16px; text-transform: uppercase; margin: 0}
p#topTel span, p#topFax span {color: #e5cb7b}


img#satNavUsers {margin: 0 0 0 10px}


/* _________________________ BASIC LAYOUT __________________________ */
div#topFull {width: 100%}
div#containerFull {width: 100%; background: url(../images/containerFullBack.jpg) 50% bottom repeat-x #000; padding: 0 0 50px 0}
div#container {margin: 0 auto; width: 990px; position: relative; z-index: 1; overflow: hidden; background: url(../images/pageContentBack.jpg) 10px 0 repeat-y}

div#imgTransContainer {margin: 0 auto; width: 990px; height: 517px; position: relative; z-index: 2; overflow: hidden}
div#top {width: 990px; height: 156px; position: absolute; left: 0; top: 0; z-index: 5; background: url(../images/topBack.jpg) 0 0 no-repeat}

div#latestStockScroll {position: absolute; left: 0; top: 156px; width: 320px; height: 357px; z-index: 299; overflow: hidden}
div#latestStockScroll h3 {margin: 23px 0 0 20px; text-indent: 30px; color: #e4bf4d}

div#recentlySoldVehicles {position: absolute; left: 0; top: 156px; width: 320px; height: 357px; z-index: 299; overflow: hidden}
div#recentlySoldVehicles h3 {margin: 23px 0 0 20px; text-indent: 30px; color: #e4bf4d}

div#nav {width: 990px; height: 30px}
div#imgTrans {width: 990px; height: 361px; position: absolute; left: 0; top: 156px; z-index: 3; overflow: hidden; background: url(../images/imgtrans/back.jpg) 0 0 no-repeat} 
div#imgTrans div {margin: 1px 0 0 28px}
div#imgTrans img {}

div#pageContent {width: 968px; padding: 0 11px 90px 11px; overflow: hidden; background: url(../images/pageContentBottom.jpg) 0 bottom no-repeat} 

div#leftCol {float: left; width: 285px; overflow: hidden; padding: 0}
div#rightCol {float: right; width: 683px; overflow: hidden; padding: 0}
div#footer {clear: both; width: 944px; margin: 0 0 0 11px; padding: 75px 0 0 0; height: auto;}
div#ukwebs {width: 990px; height: 38px; text-align: right; overflow: hidden}
div#ukwebs a {display: block; height: 26px; line-height: 26px; margin: 0 70px 0 0; padding: 0 22px 0 0; color: #666; font-weight: normal; font-size: 10px; text-transform: uppercase; background: url(../images/ukwebsglobe.gif) right 3px no-repeat; float: right}
div#ukwebs a:hover {color: #888}
div#bottomEdge {display: none}

/* ___________________________ MAIN NAV ____________________________ */
div#nav {overflow: hidden; width: 264px; height: auto; margin: 10px 0 0 18px}
div#nav ul {margin: 10px 0 10px 0; padding: 0; width: 264px; height: auto; overflow: hidden}
div#nav ul li {display: block; float: left; list-style: none outside; height: 35px; line-height: 35px; margin: 0; padding: 1px 0 0 0; width: 264px; background: none}
div#nav ul li a {display: block; float: left; height: 35px; line-height: 35px; text-align: left; text-indent: 15px; color: #eee; width: 264px; background: url(../images/navLink.gif) 0 -35px no-repeat; text-transform: uppercase}
div#nav ul li a:hover {background: url(../images/navLink.gif) 0 -70px no-repeat; }
div#nav ul li a.current {background: url(../images/navLink.gif) 0 0px no-repeat;}


/* SUB NAV ON VIEW STOCK */
div#nav ul li.expand ul {float: left; overflow: hidden; margin: 0; display: none}
div#nav ul li.expand ul li {float: left; display: block; width: 100%; height: 28px; line-height: 28px}
div#nav ul li.expand ul li a {float: left; display: block; width: 100%; height: 28px; line-height: 28px; text-indent: 22px; background: url(../images/subNavLink.gif) 0 0 no-repeat; color: #eee}
div#nav ul li.expand ul li a:hover {background: url(../images/subNavLink.gif) 0 -28px no-repeat;}
div#nav ul li.expand ul li a.current {background: url(../images/subNavLink.gif) 0 -56px no-repeat;}


/* ___________________________ FOOTER NAV ____________________________ */
a#ttt {float: left; color: #eee; padding: 0; text-transform: uppercase; font-size: 10px; margin: 3px 0 0 12px}

div#footer ul {margin: 0 10px 0 0; padding: 0 15px 0 0; width: 120px; float: left; overflow: hidden}
div#footer ul.firstList {margin-left: 30px}
div#footer ul li {margin: 0; padding: 0; display: block; background: none; line-height: 1.4}
div#footer ul li a {margin: 0; padding: 0; display: block; width:100%; color: #888; line-height: 20px; font-size: 11px; text-transform: uppercase}
div#footer ul li a:hover {color: #aaa}


/* ________________________ UK WEB SITES LINK ________________________ */
span#ukwebsites {line-height: 30px; color: #666; font-size: 11px; margin: 0 20px 0 0}
span#ukwebsites a {color: #999}
span#ukwebsites a:hover {color: #eee}


/* ________________________ VEHICLE SEARCH TABS ________________________ */
div#vehicleSearch {width: 651px; height: 348px; margin: 12px 0 0 15px; background: url(../images/searchPanelBack.gif) 0 bottom no-repeat; overflow: hidden}

ul.tabNavigation {margin: 5px 0 0 3px; width: 642px; padding: 0; height: 32px; overflow: hidden; background: url(../images/tabNavigation.gif) 0 bottom no-repeat}
ul.tabNavigation li {display: block; float: left; height: 32px; line-height: 34px; padding: 0; margin: 0; text-decoration: none; text-align: center; list-style: none outside; cursor: pointer; text-transform: uppercase; color: #000; font-weight: bold; font-size: 12px; background: none}
ul.tabNavigation li#byType {width: 188px}
ul.tabNavigation li#byPrice {width: 192px}
ul.tabNavigation li#byMakeAndModel {width: 260px}

ul.tabNavigation li:hover {color: #444}
ul.tabNavigation li.currentTab {color: #eee!important}

/* STYLE CONTAINER FOR EACH CONTENT PANEL */
div.tabContainer {margin: 0 0 0 10px; width: 642px; height: auto; position: relative; top: 0;}
div.tabContainer div { width: 642px; height: 331px; position: absolute; left: 0; top: 0; overflow: hidden}

/* SEARCH BY TYPE */
div#searchByType {}
div#searchByType ul {margin: 4px 0 0 5px; padding: 0; width: 642px; height: 329px}
div#searchByType ul li {margin: 0; padding: 0; background: none; float: left; display: block}
div#searchByType ul li a {float: left; display: block; width: 206px; height: 94px; position: relative;   background-repeat: no-repeat; background-position: left top; color: #eee}
div#searchByType ul li a:hover {color: #e4bf4d!important}
div#searchByType ul li a span.hoverImg {margin-left: 20px; position: absolute; left: 0; top: 0; z-index: 600; display: block; width: 155px; height: 104px; background-position: left bottom; cursor: pointer}
div#searchByType ul li a span.text {position: absolute; left: 0; bottom: -4px; z-index: 606; text-align: center; display: block; width: 100%; line-height: 20px; font-size: 11px; text-transform: uppercase; cursor: pointer}

div#searchByType ul li a#linkPanelVans,
div#searchByType ul li a#linkPanelVans span.hoverImg {background-image: url(../images/search-by-type/panel-vans.jpg)}

div#searchByType ul li a#linkDoubleCabs,
div#searchByType ul li a#linkDoubleCabs span.hoverImg {background-image: url(../images/search-by-type/double-cabs.jpg)}

div#searchByType ul li a#linkTippers,
div#searchByType ul li a#linkTippers span.hoverImg {background-image: url(../images/search-by-type/tippers.jpg)}

div#searchByType ul li a#linkMiniBuses,
div#searchByType ul li a#linkMiniBuses span.hoverImg {background-image: url(../images/search-by-type/mini-buses.jpg)}

div#searchByType ul li a#linkCarDerivedVans,
div#searchByType ul li a#linkCarDerivedVans span.hoverImg {background-image: url(../images/search-by-type/car-derived-van.jpg)}

div#searchByType ul li a#linkCars,
div#searchByType ul li a#linkCars span.hoverImg {background-image: url(../images/search-by-type/cars.jpg)}

div#searchByType ul li a#linkDropSide,
div#searchByType ul li a#linkDropSide span.hoverImg {background-image: url(../images/search-by-type/drop-side.jpg)}

div#searchByType ul li a#linkLuton,
div#searchByType ul li a#linkLuton span.hoverImg {background-image: url(../images/search-by-type/luton.jpg)}

div#searchByType ul li a#linkPx,
div#searchByType ul li a#linkPx span.hoverImg {background-image: url(../images/search-by-type/partexchange.jpg)}


/* SEARCH BY PRICE */
div#searchByPrice p {margin: 20px 0 0 20px}
div#searchByPrice ul {margin: 10px 0 0 10px; padding: 0;}
div#searchByPrice ul li {margin: 0; padding: 0 0 10px 10px; display: block; float: left; list-style: none outside; background: none; width: 290px; height: 30px; line-height: 30px }
div#searchByPrice ul li a {display: block; float: left; width: 290px; height: 30px; line-height: 30px; background: url(../images/arrowPrice.gif) 270px 50% no-repeat #444; text-indent: 20px; border: 1px solid #555; color: #eee}
div#searchByPrice ul li a:hover {background: url(../images/arrowPrice.gif) 270px 50% no-repeat #555; border: 1px solid #666}


/* LARGE HOMEPAGE LINKS TO NEW, NEARLY NEW AND USED VEHICLES */
ul#bigLinks {margin: 15px 0 0 13px; overflow: hidden; padding: 0 0 10px 0}
ul#bigLinks li {display: block; float: left; background: none; padding: 0; margin: 0 0 0 2px;}
ul#bigLinks li a {display: block; float: left; width: 216px; height: 99px; position: relative; color: #fff}
ul#bigLinks li a.newVehicles {background: url(../images/big-links/new-vehicles.jpg) 0 0 no-repeat;}
ul#bigLinks li a.nearlyNew {background: url(../images/big-links/nearly-new.jpg) 0 0 no-repeat;}
ul#bigLinks li a.usedStock {background: url(../images/big-links/used-stock.jpg) 0 0 no-repeat;}
ul#bigLinks li a span.title {position: absolute; left: 18px; top: 6px; font-size: 17px; text-transform: uppercase}
ul#bigLinks li a span.text {position: absolute; left: 18px; top: 37px; font-size: 12px; line-height: 1.3; font-weight: normal; display: block; width: 190px;}
ul#bigLinks li a:hover {background-position: left bottom}


/* LARGE HOMEPAGE LINKS TO NEW, NEARLY NEW AND USED VEHICLES */
ul#featureLinks {margin: 17px 0 0 8px; overflow: hidden}
ul#featureLinks li {display: block; float: left; margin: 0 0 0 5px; padding: 0; background: none}
ul#featureLinks li a {display: block; float: left; background-position: left top; width: 215px; height: 149px; background-repeat: no-repeat}
ul#featureLinks li a.hpiLink {background-image: url(../images/hpiLink.gif);}
ul#featureLinks li a.aPlanLink {background-image: url(../images/aPlanLink.gif);}
ul#featureLinks li a.needHelpLink {background-image: url(../images/needHelpLink.gif);}
ul#featureLinks li a:hover {background-position: left bottom}


/* _________________________________ ACCESSORIES PAGE ________________________________ */
div.accessory {margin: 20px 20px 0 20px; padding: 20px; overflow: hidden; border: 1px solid #535353; background: #333; color: #eee!important}
div.accessory h3 {margin-top: 0; margin-left: 0; margin-bottom: 10px;}
div.accessory div.images {float: left; width: 230px; margin-top: 10px;}
div.accessory div.images img {border: 1px solid #000}
div.accessory div.info {float: right; width: 360px; color: #eee!important}
div.accessory div.info font,
div.accessory div.info p {color: #eee!important}


/* _________________________________ FINANCE PAGE ________________________________ */
div.financeInfo {margin: 20px 20px 0 20px; padding: 20px; overflow: hidden; border: 1px solid #535353; background: #333}
div.financeInfo h3 {margin-top: 10px;}

a#financeEnquiryLink {margin: 20px 0 0 20px; display: block; width: 508px; height: 82px; background-image: url(../images/financeEnquiryLink.jpg); background-position: left top; background-repeat: no-repeat; position: relative; color: #fff; font-weight: normal}
a#financeEnquiryLink span.title {position: absolute; left: 18px; top: 17px; font-size: 20px; text-transform: uppercase}
a#financeEnquiryLink span.click {position: absolute; left: 18px; top: 47px; font-size: 12px;}

a#financeEnquiryLink:hover {background-position: left bottom}


/* _________________________________ NEW VEHICLES ________________________________ */
div#newVehicleContainer  {width: 100%; overflow: hidden}
div.newVehicle {margin: 20px 0 0 20px; width: 310px; height: 140px; float: left; background: #333; border: 1px solid #535353}
div.newVehicle h3 {font-size: 14px; margin: 10px 0 0 12px}
div.newVehicle p,
div.newVehicle ul {margin: 10px 0 0 10px}
div.newVehicle ul li {margin-left: 5px}
div.newVehicle p strong {font-size: 18px}
div.newVehicle img {float: right; margin: 10px; border: 1px solid #000}


/* _________________________________ CONTACT US ________________________________ */
div#contactLeft {float: left; width: 470px;}
div#contactRight {float: right; width: 200px;}

div#contactDetails {margin: 30px 0 0 0}
div#contactDetails p {font-size: 13px; font-weight: bold;}
div#contactDetails p span {color: #e4bf4d}


/* _____________________________ LOCATION AND HOURS ______________________________ */
div#map iframe {width: 640px; height: 350px;}
div#map {width: 640px; height: 350px; border: 1px solid #000; margin: 10px 0 0 20px;}


/* ____________________________ HOME PAGE VIDEO POPUP ______________________________ */
div#midLine  {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
	z-index: 9999;
	display: none	
}

div#contentBox  {
	position: absolute;
	left: 50%;
	width: 640px; /* Overall width of div */
	height: 360px; /* Overall height of div */
	top: -185px; /* half of the overall height */
    margin-left: -320px; /* half of the overall width */
    visibility: visible;
	background: url(../images/loading.gif) 50% 50% no-repeat #fff;
	z-index: 10000;
	border: 2px solid #fff
}
div#contentBox div#closeBox {width: 100%; height: 20px; position: absolute; left: 0; top: -24px; z-index: 10001}
div#contentBox div#closeBox a { /* CLOSE BUTTON */
	display: block; float: right; display: block; width: 25px; height: 24px; background: url(../images/closeBox.gif) right 50% no-repeat}

#overlayBack {position: absolute; width: 100%; height: 100%; background: #000; visibility: visible; left: 0; top: 0; z-index: 9998; opacity: 0.5; filter: alpha(opacity=50); position: fixed}





/* HOME PAGE VIDEO */
#videoContainer {width: 666px; height: 361px; position: absolute; right: 28px; top: 156px; background: url(../images/videoContainerBack.jpg) 0 0 no-repeat; z-index: 1000}

#videoContainer div {width: 640px; height: 360px; background: url(../images/loading.gif) 50% 50% no-repeat #000; margin: 1px 0 0 13px; position: relative; z-index: 1001}

object {width: 640px!important; height: 360px!important; position: absolute; left: 0; top: 0; z-index: 1002}

a#videoClose {position: absolute; right: 20px; top: 7px; z-index: 1010; display: block; width: 33px; height: 31px; background-position: 0 top; background-repeat: no-repeat; background-image: url(../images/videoClose.png)}
a#videoClose:hover {background-position: left bottom}

body div#videoContainer {display: none} /* HIDE VIDEO ON ALL PAGES */
body#bodyHome div#videoContainer {display: block} /* SHOW VIDEO ON HOME PAGE */