/* CSS for - Copyright www.ukwebsites.net */
/*										  */
/*	  COLOURS:							  */
/*    BLUE: 		#498ecb				  */
/*	  LIGHT BLUE:	#dce6f5				  */
/*										  */

body {margin: 0; padding: 14px 0; color: #333; background: url(../images/body.jpg) left top repeat-x #888; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: left}
* {margin: 0; padding: 0}
a img {border: 0}

#social {
	display: block;
	position: absolute;
	top: 20px;
	right: 240px;
	width: 193px;
	height: 73px;
	background: #EEE url('../images/social-background.jpg') no-repeat top left;
}

#social a {
	display: block;
	border: none;
	width: 152px;
	height: 13px;
	outline: none;
	text-indent: -9999px;
	padding: 0px;
	margin: 6px 0px 0px 10px;
}

#social a:hover {
	background-position: bottom left;
}

#social .facebook {
	background: #EEE url('../images/social-facebook.jpg') no-repeat top left;
	margin-top: 12px;
}

#social .twitter {
	background: #EEE url('../images/social-twitter.jpg') no-repeat top left;
}

#social .newsletter {
	background: #EEE url('../images/social-newsletter.jpg') no-repeat top left;
	margin: 6px 0px 0px 10px !important;
}

a#lane-pearson {position: absolute; left: 23px; top: 10px; z-index: 110; display: block; width: 288px; height: 88px; background:url(../images/lane-pearson.gif) left top no-repeat}
a#lane-pearson:hover {background-position: left bottom}

h1, h2, h3, h4, h5 {color: #498ecb;}
h1 {margin: 0; color: #498ecb; border-bottom: 3px solid #ebebeb}
body#bodyVdPage h1 {border-bottom: 0}
h2 {margin: 25px 0 0 0; font-size: 16px}
h3 {margin: 25px 0 0 0; font-size: 14px}
h4 {}

a {text-decoration: none; color: #2a77bb; font-weight: bold}
a:hover {color: #000}

p, ol, ul {margin: 10px 0 10px 0; line-height: 1.6; font-size:12px}

ul {}
ul li {margin: 0 0 0 20px; list-style: none outside; padding: 2px 0 2px 20px; background: url(../images/bulletBlue.gif) left 4px no-repeat}


/* ---------------------------------- LAYOUT ------------------------------------------ */
div#container {
          position: relative;
          margin: 0 auto;
          width: 990px;
          background: url(../images/container-back.gif) left bottom no-repeat #fff;
		  overflow: hidden
}

div#top {
          position: relative;
          width: 990px;
          height: 108px;
          background: url(../images/top-back.gif) 0 0 no-repeat
}

div#mainNav {
          position: relative;
		  z-index: 10;
          width: 944px;
		  margin: 0 0 0 23px;
          height: 49px;
}

div#mainImage {
          position: relative;
		  z-index: 5;
          width: 944px;
		  margin: 0 23px;
          height: 251px;
          background: #666
}

div#mainImage span {
	display: none;
	height: 0px;
	line-height: 40px;
	background: url('../images/mainImageBackground.png');
	padding-left: 16px;
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;
	position: absolute;
	font-weight: bold;
	bottom: 3px;
	left: 0px;
	width: 928px;
}

div#columns {
          width: 944px;
		  margin: 0 23px;
          overflow: hidden
}

div#fullCol {
          width: 100%;
		  padding: 20px 0;
		  position: relative
}

div#leftCol {
          float: left;
          width: 744px;
		  padding: 20px 0;
}

div#rightCol {
          float: right;
          width: 200px;
}



body#bodyContact div#leftCol {
          float: left;
          width: 600px;
		  padding: 20px 0;
}

body#bodyContact div#rightCol {
          float: right;
          width: 344px;
}

div#footer { margin: 0 23px; width: 944px}

div#ukwebsBar { margin: 0 auto; width: 950px; height: 40px; line-height: 40px; color: #fff; text-align: right}

div#ukwebsBar p {float: left; font-size: 11px; color: #eee}

a#ukwebsites {color: #ddd; font-size: 10px; text-transform: uppercase}
a#ukwebsites:hover {color: #fff}

div#topContact {float: right; padding: 0 23px 0 0; margin-top: 38px}
div#top p {margin: 0; text-align: right; line-height: 18px}
div#top p#tel, div#top p#email {margin: 0; padding: 0; line-height: 18px}
div#top p#email {margin-top: -3px}


/* ---------------------------------- FOOTER NAV ------------------------------------------- */
div#footer ul {margin: 0; padding: 0; width: auto}
div#footer ul li {float: left; margin: 0; padding: 0 0 0 21px; list-style: none outside; display: inline; background: none}
div#footer ul li a {float: left; color: #777; text-decoration: none; text-transform: uppercase; font-size: 11px; line-height: 60px; font-weight: normal}
div#footer ul li a:hover {color: #000}

div#footer ul li#ttt {padding: 0}
div#footer ul li#ttt a {float: left; display: block; width: 15px; height: 60px; background: url(../images/ttt.gif) left top}
div#footer ul li#ttt a:hover {background-position: left bottom}


/* ---------------------------------- IMAGE TRANS ------------------------------------------ */
div.image-trans { margin: 0; width: 100%; height: 251px; position: relative; font-size: 10pt; font-family: tahoma, sans-serif; background: #000}
div.image-trans div { width: 100%; }
div.image-trans div image {}
div.image-trans div p { position: absolute; z-index: 10; top: 20px; font-family:Arial, Helvetica, sans-serif; font-size: 28px; color: #fff; margin:0; padding:0}
div.image-trans div p.left {left: 20px}
div.image-trans div p.right {right: 20px}


/* ----------------------------------- SERVICES ------------------------------------------- */
div#ourServices {margin: 20px 0; padding: 0; width: 100%; background: #498ecb; color: #fff; overflow: hidden}
div#ourServices img#ourServicesInc {float: left}
div#ourServices ul {float: left; margin: 20px 0 0 20px}
div#ourServices ul li {background: url(../images/bulletWhite.gif) left 4px no-repeat}


/* --------------------------------- BOTTOM LOGOS ------------------------------------------ */
div#bottomLogos {width: 100%; height: 69px;}
div#bottomLogos * {float: left; }
div#bottomLogos	a {display: block; height: 69px; background-repeat: no-repeat; background-position: left top}
div#bottomLogos	a:hover {background-position: left top; opacity: 0.7}

div#bottomLogos a#carlyleLogo {background-image: url(../images/carlyle-finance-logo.gif); width: 207px; margin-left: 5px}
div#bottomLogos a#hpiLogo {background-image: url(../images/hpi-logo.gif); width: 100px}
div#bottomLogos a#racLogo {background-image: url(../images/rac-warranty-logo.gif); width: 100px}
div#bottomLogos a#autoProtectLogo {background-image: url(../images/logo-autoprotect.jpg); width: 102px; float: left; margin-top: 14px}
div#bottomLogos a#virtualBMLogo {background-image: url(../images/logo-virtualbm.jpg); width: 101px; float:left; margin-top: 14px;}
div#bottomLogos a#gwe {background-image: url(../images/gwe-logo.jpg); width: 145px; height: 42px;float:left; margin-top: 14px;}


/* ---------------------------------- OUR TEAM ------------------------------------------ */
ul.ourTeam {margin: 0; padding: 0}
ul.ourTeam li {float: left; display: block; width: 440px; height: 120px; background: #eee; margin: 20px 30px 10px 0px; padding: 0}
ul.ourTeam li h3 {font-size: 22px; margin: 15px 0 0 40px; color: #2a77bb; font-weight: normal}
ul.ourTeam li p {margin: 0 0 0 40px; font-size: 10px}
ul.ourTeam li img {float: right; margin: 10px}
ul.ourTeam li p.title {font-weight: normal}
div#team 		{ width: 950px; height: 500px; }
div#Andy 		{ float:left; width: 440px; height: 110px; background: #EEEEEE; margin: 20px 30px 10px 0; padding: 5px 0 5px 0; background-image: url(../images/StaffAndy.jpg); background-repeat: no-repeat; background-position: right;}
div#Jan 		{ float:left; width: 440px; height: 110px; background: #EEEEEE; margin: 20px 30px 10px 0; padding: 5px 0 5px 0; background-image: url(../images/StaffJan.jpg); background-repeat: no-repeat; background-position: right;}
div#Christine	{ float:left; width: 440px; height: 110px; background: #EEEEEE; margin: 20px 30px 10px 0; padding: 5px 0 5px 0; background-image: url(../images/StaffChristine.jpg); background-repeat: no-repeat; background-position: right;}
div#Ray			{ float:left; width: 440px; height: 110px; background: #EEEEEE; margin: 20px 30px 10px 0; padding: 5px 0 5px 0; background-image: url(../images/StaffRay.jpg); background-repeat: no-repeat; background-position: right;}
div#Mike 		{ float:left; width: 440px; height: 110px; background: #EEEEEE; margin: 20px 30px 10px 0; padding: 5px 0 5px 0; background-image: url(../images/StaffMike.jpg); background-repeat: no-repeat; background-position: right;}
div#team h3		{ font-size: 22px; font-weight: normal; margin: 15px 0 0 40px; }
div#team p		{ font-size: 10px; margin: 0 0 0 40px; }

/* ----------------------------- LOCATION MAP AND HOURS --------------------------------- */
#openHours {float: left; width: 400px; overflow: hidden; margin: 20px 0 0 0}
#locMap {float: right; width: 540px; overflow: hidden; margin: 20px 0 0 0}

div#myMap		 {width: 538px; height: 300px; border: 1px solid #000}
div#myMap iframe {width: 538px; height: 300px;}


/* DIRECTIONS BY POSTCODE FORM */
div#postcodeDirections {width: 100%; height: 35px; overflow: hidden; position: relative; z-index: 5; margin: 10px 0 0 0; background: #498ecb; padding: 5px}
div#postcodeDirections p {margin: 0 10px; line-height: 35px; color: #fff}

input.formSubmitButton {position: absolute; top: 5px; left: 450px; width: 70px; height: 35px; color: #111; font-size: 12px; font-weight: bold; cursor: pointer; background:url(../images/btnGo.gif) 0 0 no-repeat; border: 0!important}

#saddr {position: absolute; top: 10px; left: 346px; padding: 4px; width: 80px; background: url(../images/saddrBack.gif) left top repeat-x #f9f9f9!important; border: 1px solid #333!important}


.imgright {float: right; margin: 20px 0}


/* -------------------------------- GALLERY PAGE ------------------------------------ */
#gallery {
	position:relative;
	width:656px;
	margin: 20px auto;
	padding:10px;
	border:1px solid #ccc;
	background:url(images/galleryback.gif) repeat;
}
#images {border:2px solid #9ac1c9; height:480px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:640px; height:480px; padding:5px; background:#000 url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:650px; height:75px; background:#000;}
#thumbarea {position:relative; overflow:hidden; height:75px; width:650px;}
#thumbs {position:absolute; list-style:none; padding: 0; margin: 0; margin-left:5px; height:100px; width:10000px; border-right:5px solid #000;}
#thumbs li {float:left; padding: 0; margin: 0; margin-right:5px; cursor:pointer; background: none}
.imgnav {position:absolute; height:480px; z-index:100; width:20%; outline:none; cursor:pointer}
#previmg {left:0; background:url(../images/left.gif) left center no-repeat; border-left:5px solid #000000}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(../images/right.gif) right center no-repeat; border-right:5px solid #000000}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}


.editableRegion {margin: 15px 0}


.testDriveTxt {font-weight: bold}

#popup {
        display: none;
        width: 378px;
        height: 296px;
        padding: 0px;
        background: url('../images/PopUp.png') no-repeat 0 0;
        position: absolute;
        left: 325px;
        top: 111px;
        z-index: 99999;
}

a#close1 {
        display: block;
        position: absolute;
        right: 50px;
        bottom: 0px;
        width: 70px;
        height: 30px;
        z-index: 9999;
}