/* Copyright 2009 www.ukwebsites.net */
/*
		COLOURS: BLUE = #2c8ad3
*/

* {margin: 0; padding: 0; outline: 0}
body, html {height: 100%}
body {margin: 0; padding: 0 0 20px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #cecece; background: url(../images/body-back.jpg) 50% 225px repeat}

/* __________________________ BASIC TEXT ___________________________ */
h1, h2, h3, h4 {margin: 25px 20px 5px 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: italic; color: #cecece}
h1 {font-size: 22px; text-transform: uppercase}
h1 em {display: block; font-size: 18px}
h2 {font-size: 18px; text-transform: uppercase}
h3 {font-size: 15px; text-transform: uppercase}
h4 {font-size: 12px}

p, ol, ul {margin: 10px 22px; line-height: 1.5}
ul li, ol li {margin-left: 20px}

p {text-align: justify}

a {text-decoration: none; color: #368edf; font-weight: bold}
a:hover {color: #fff}

a img {border: 0}

/* _________________________ BASIC LAYOUT __________________________ */
div#containerFull {width: 100%; background: url(../images/container-full-back.jpg) 50% top repeat-x}
div#container {margin: 0 auto; width: 990px; z-index: 1; overflow: hidden}
div#top {width: 990px; height: 130px; background: #555; position: relative; z-index: 3; background: url(../images/top-back.gif) 0 bottom no-repeat; overflow: hidden}

a#lodgeHillGarage {position: absolute; left: 0; top: 21px; z-index: 6}
img#settingTheStandard {position: absolute; right: 0; top: 75px; z-index: 5}
img#phoneNumber {position: absolute; right: 0; top: 41px; z-index: 5}

p#strap			{ position: absolute; left: 115px; top: 92px; font-size: 11px; color: #ffffff; z-index: 10; text-align: right; }

div#nav {width: 990px; height: 46px; background: url(../images/nav-back.gif) 0 0 no-repeat; position: relative; z-index: 3; overflow: hidden}

div.spacer-div {width: 990px; height: 10px; background:url(../images/spacer-div.gif) 0 0 no-repeat}


div#imgTransAndMakeScroller {position: relative; z-index: 2;}

div#imgTrans {width: 990px; height: 287px; position: relative; z-index: 3; overflow: hidden; background: url(../images/img-trans/back.gif) 0 0 no-repeat; padding: 0 0 10px 0} 
div#imgTrans div {margin: 0 0 0 20px;}



div#pageContent {width: 990px; overflow: hidden; background: url(../images/page-content-back.jpg) 0 297px repeat-y; position: relative; z-index: 5;} 
div#pageContent #topLeft {position: absolute; left: 0; top: 0; z-index: 10; width: 10px; height: 297px}
div#pageContent #topRight {position: absolute; right: 0; top: 0; z-index: 10; width: 10px; height: 297px}

body#bodyHome div#pageContent {background: url(../images/page-content-back.jpg) 0 0 repeat-y}


div#fullCol {width: 950px; margin: 0 20px; background: url(../images/full-col-back.jpg) 0 0 no-repeat; overflow: hidden}
div#leftCol {float: left; width: 704px; overflow: hidden}
div#rightCol {float: right; width: 246px; overflow: hidden}

div#spitfire {width: 680px; height: 445px; margin-top: 20px; margin-left: 10px; background:url(../images/Spitfire.jpg) no-repeat;}

body#bodyContactUs div#leftCol {float: left; width: 644px; overflow: hidden}
body#bodyContactUs div#rightCol {float: right; width: 306px; overflow: hidden}


div#footer {width: 990px; height: 116px; background: url(../images/footer-back.png) 50% bottom no-repeat; font-size: 10px; text-transform: uppercase; color: #b1b1b1; overflow: hidden; margin-bottom: 30px}
div#footer a {color: #b1b1b1}
div#footer a:hover {color: #eee}

div#footer p {float: left; width: 60%; color: #7b7b7b; margin: 0 0 0 35px}

a#ukwebs {float: right; display: block; width: auto; height: 30px; line-height: 12px; padding: 0 20px 0 0; text-align: right; background: url(../images/ukwebs-ball.gif) right top no-repeat; width: 28%; margin: 10px 35px 0 0}

div#socialBookmarks {float: right; width: auto; height: 40px; margin: 25px 20px 0 0}
div#socialBookmarks a {display: inline; margin: 0}

div#contentBottom {width: 990px; height: 18px; background:url(../images/content-bottom.png) 0 0 no-repeat}

/* ___________________________ MAIN NAV ____________________________ */
div#nav ul {margin: 0 0 0 20px; padding: 0; height: 46px; overflow: hidden}
div#nav ul li {display: block; float: left; list-style: none outside; height: 46px; line-height: 46px; margin: 0; padding: 0 2px 0 0; background: url(../images/nav-divider.gif) right 0 no-repeat}
div#nav ul li.noback {background: none}
div#nav ul li a {display: block; float: left; height: 46px; line-height: 46px; text-align: center; background: url(../images/nav-a-back.jpg) left top repeat-x; position: relative; z-index: 100; color: #bfbfbf}
div#nav ul li a:hover {color: #eee}

/* NAV ENDS */
div#nav ul li a#navHome {background: url(../images/nav-a-back-home.jpg) left top repeat-x;}
div#nav ul li a#navContact {background: url(../images/nav-a-back-contact.jpg) left top repeat-x;}

/* STYLES FOR FADING LINKS */
div#nav ul li a em {position: absolute; left: 0; top: 0; display: block; width: 100%; text-align: center; height: 46px; line-height: 46px; z-index: 113; font-style: normal; font-weight: bold; cursor: pointer}
div#nav ul li a span.hover {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 46px; z-index: 112; background: url(../images/nav-a-back.jpg) left bottom repeat-x; cursor: pointer}

div#nav ul li a#navHome span.hover {background: url(../images/nav-a-back-home.jpg) left bottom repeat-x;}
div#nav ul li a#navContact span.hover {background: url(../images/nav-a-back-contact.jpg) left bottom repeat-x;}

/* CURRENT STATES */
div#nav ul li a span.current {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 46px; z-index: 112; background: url(../images/nav-a-back.jpg) left bottom repeat-x; cursor: pointer}
div#nav ul li a#navHome span.current {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 46px; z-index: 112; background: url(../images/nav-a-back-home.jpg) left bottom repeat-x; cursor: pointer}
div#nav ul li a#navContact span.current {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 46px; z-index: 112; background: url(../images/nav-a-back-contact.jpg) left bottom repeat-x; cursor: pointer}



div#nav ul li a#navHome 				{width: 83px}
div#nav ul li a#navCarsForSale 			{width: 144px}
div#nav ul li a#navFinance 				{width: 110px}
div#nav ul li a#navCareer 				{width: 121px}
div#nav ul li a#navTestimonials		 	{width: 135px}
div#nav ul li a#navCarsBoughtForCash	{width: 135px}
div#nav ul li a#navFindACar				{width: 114px}
div#nav ul li a#navLocation 			{width: 108px}
div#nav ul li a#navContact	 			{width: 107px}
div#nav ul li a#navDrive				{width: 110px}

/* ___________________________ FOOTER NAV ____________________________ */
a#ttt {float: left; color: #999; line-height: 30px; padding: 0 0 0 30px; font-size: 11px}
a#ttt:hover {color: #eee}

div#footer ul {margin: 20px 14px 0 14px; padding: 0; width: auto}
div#footer ul li {margin: 0; padding: 0; display: inline; list-style: none outside; border-right: 1px solid #424242}
div#footer ul li.noborder {border: 0}
div#footer ul li a {margin: 0; padding: 0 29px; line-height: 30px;}



/* __________________________ MAKE SCROLLER ___________________________ */

#makeTextScroller {position: absolute; right: 31px; bottom: 20px; z-index: 10000; overflow: hidden}
/* outer container */
#scrollerContainerlogo{}
/* individual make names, displayed when an image doesn't exist */
#scrollerContainerlogo a{
	color:#eee;
	text-transform: uppercase;
	padding: 0 20px;
	line-height: 42px;
}
/* individual make images */
#scrollerContainerlogo a img{
}

/* __________________________ CONTACT US PAGE _____________________________ */
#contactUsDetails {margin: 50px 0 0 0; font-size: 14px; line-height: 2}

#locationAddress {margin: 30px 0 0 0; font-size: 14px;}


/* ___________________________ LOCATION PAGE ______________________________ */
div#map,
div#map iframe {width: 620px; height: 350px;}
div#map {margin: 20px;}


/* ________________________ CUSTOMER COMMENT PAGE _________________________ */
p.customer-comment {margin: 15px 22px 10px 22px; padding: 10px 20px 25px 20px; font-style: italic; background: url(../images/customer-comment.gif) left bottom no-repeat #222}

/* ________________________ WHATS MY BUDGET LINK ___________________________ */
a#whatsMyBudget {display: block; float: right; width: 351px; height: 78px; margin: 0 23px; background-image: url(../images/whats-my-budget.jpg); background-position: left top}
a#whatsMyBudget:hover {background-position: left bottom}


/* _____________________ WHATS MY BUDGET CALCULATOR ________________________ */
table.tblFinanceCalc {margin: 10px 0 18px 18px}
table.tblFinanceCalc tr td {padding: 4px}
table.tblFinanceCalc p {margin: 0; text-align: left}
table.tblFinanceCalc p.right {text-align: right}

.inputField {padding: 2px; background: #444!important; border: 1px solid #777!important; color: #fff!important}
.selTerm {background: #444!important; border: 1px solid #777!important; color: #fff!important; width: 50px}

.calculatorBtn {cursor: pointer; border: 0!important; color: #fff!important; height: 22px}
.submit {background: url(../images/btnCalculate.gif) 0 0 no-repeat!important; width: 83px;}
.reset {background: url(../images/btnReset.gif) 0 0 no-repeat!important; width: 66px;}

div#financeCalculator {margin: 20px; outline: 1px solid #444; width: 600px; overflow: hidden}


.career {
	display: block;
	width: 222px;
	height: 86px;
	margin-top: 10px;
	text-indent: -9999px;
	outline: none;
	background: url('../images/career.jpg') no-repeat 0 0;
}

.career:hover {
	background-position: 0 -86px;
}

.career:active {
	background-position: 0 -172px;
}

ul#pics		{ float:left}

ul#pics li		{ float:left; margin: 2px 2px 0; border: none; list-style: none}

ul#pics li a		{ border: none;}