/* Copyright Town & Country Cars - 2009 www.ukwebsites.net */

body, html {height: 100%}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #b2b2b2; background: url(../images/bodyback.jpg) left top repeat-x #424242}

* {outline: 0}

/* __________________________ BASIC TEXT ___________________________ */
h1, h2, h3, h4 {margin: 30px 27px 0 33px; font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: normal; color: #c3c3c3; text-transform: uppercase}

h1 {padding: 0; font-size: 25px; line-height: 26px; position:relative; z-index: 100}
h1 span {position:absolute;	display:block; z-index: 101; top:0; left:0; height:100%; width:100%; background:url(../images/headerGradient.png) left bottom repeat-x}
* html h1 span{
	background-color:#fff;
	back\ground-color:transparent;
	background-image: url(none.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");
}

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

p, ol, ul {margin: 10px 27px 10px 33px; line-height: 1.5}
ul li, ol li {margin-left: 43px}
ul li {padding: 0 0 0 15px; list-style: none outside; background: url(../images/greenBullet.gif) left 6px no-repeat}

a {text-decoration: none; color: #ff0000}
a:hover {color: #eee}

a img {border: 0}

a#townAndCountryCars {margin: 0 0 0 20px}


/* _________________________ BASIC LAYOUT __________________________ */
div#container {margin: 0 auto; width: 990px; position: relative; z-index: 1; overflow: hidden}
div#top {width: 990px; height: 151px; background: url(../images/topBack.jpg) 0 0 no-repeat}
div#nav {width: 990px; height: 47px; background: url(../images/navBar.gif) 0 0 no-repeat}
div#imgTrans {width: 990px; height: 294px; position: relative; z-index: 2; overflow: hidden} 
div#carbonStrip {width: 990px; height: 32px; background: url(../images/carbonStrip.gif) 0 0 no-repeat}
div#pageContent {width: 990px; overflow: hidden; background: url(../images/pageContent.gif) 0 0 repeat-y} 

#top {
	position: relative;
}

#top .number {
	display: block;
	font-size: 22px;
	text-align: right;
	position: absolute;
	right: 50px;
	top: 66px;
}

div#fullCol {float: left; width: 990px; overflow: hidden}

div#leftCol {float: left; width: 740px; overflow: hidden}
div#rightCol {float: right; width: 250px; overflow: hidden}

body#bodyHome div#leftCol {width: 629px; overflow: hidden}
body#bodyHome div#rightCol {width: 361px; overflow: hidden}

/* CONTACT PAGE */
div#contactLeft {float: left; width: 420px}
div#contactCentre {float: left; width: 275px}
div#contactRight {float: right; width: 275px; height: 300px; overflow: hidden}

div#contactCentre h4,
div#contactRight h4 {margin: 10px 0 0 0}

div#contactCentre p,
div#contactRight p {margin-left: 0}

a.findUs {float: right; margin: 5px 45px 0 0; padding: 5px 0 5px 28px; background: url(../images/findUs.gif) left 50% no-repeat; color: #ccc}
a.findUs:hover {color: #fff}

/* LOCATION PAGE */
div#locationsLeft {float: left; width: 495px}
div#locationsRight {float: right; width: 495px}

#locationsRight h4, 
#locationsRight p {margin-left: 10px}


div#footer {width: 990px; height: 115px; background: url(../images/footer.gif) 0 0 no-repeat; position: relative; z-index: 999}

div#logos {margin: 0 auto; width: 990px; height: 70px; clear: both}

div#viewByMake {width: 938px; height: 52px; background: url(../images/viewByMake.jpg) 0 0 no-repeat; margin: 10px 0 10px 26px; clear: both}


/* ___________________________ MAIN NAV ____________________________ */
div#nav ul {margin: 0 0 0 20px; padding: 0; height: 30px;}
div#nav ul li {display: block; float: left; list-style: none outside; height: 47px; line-height: 47px; margin: 0; padding: 0 4px 0 0; background: none}

div#nav ul li a {display: block; float: left; height: 47px; line-height: 47px; text-align: center; color: #ccc; position: relative; z-index: 9; font-weight: bold; background: url(../images/linkBack.gif) left -100px no-repeat}
div#nav ul li a span.linkEdge {display: block; position: absolute; left: 0; top: 0; z-index: 10; width: 3px; height: 47px; background: url(../images/linkEdge.gif) right -100px no-repeat}


div#nav ul li a:hover {display: block; float: left; height: 47px; line-height: 47px; text-align: center; color: #fff; position: relative; z-index: 9; font-weight: bold; background: url(../images/linkBack.gif) right 3px no-repeat}
div#nav ul li a:hover span.linkEdge {display: block; position: absolute; left: 0; top: 0; z-index: 10; width: 3px; height: 47px; background: url(../images/linkEdge.gif) left 3px no-repeat}


div#nav ul li a span.linkText {display: block; position: absolute; left: 0; top: 0; z-index: 11; width: 100%; height: 47px; text-align: center; text-transform: uppercase}


div#nav ul li a#navViewStock 			{width: 111px}
div#nav ul li a#navAftersales 			{width: 112px}
div#nav ul li a#navWarranty 			{width: 106px}
div#nav ul li a#navFinance 				{width: 91px}
div#nav ul li a#navContact 				{width: 96px}
div#nav ul li a#navEbayShop		 		{width: 104px}
div#nav ul li a#navNewSuzuki			{width: 115px}
div#nav ul li a#navLocations 			{width: 108px}
div#nav ul li a#navHome 				{width: 70px}

/* CURRENT */
div#nav ul li a.current {color: #ff0000; background: url(../images/currentBack.gif) right 3px no-repeat}
div#nav ul li a.current span.linkEdge { background: url(../images/currentEdge.gif) left 3px no-repeat}

div#nav ul li a span {cursor: pointer}


/* ___________________________ FOOTER NAV ____________________________ */
div#footer ul {margin: 0 0 0 20px; padding: 30px 0 0 0; width: auto}
div#footer ul li {margin: 0; padding: 0; display: inline; list-style: none outside; background: none}
div#footer ul li a {margin: 0; padding: 0 12px; color: #ddd; line-height: 25px; font-size: 10px; text-transform: uppercase}
div#footer ul li a:hover {color: #fff}


/* _________________________ UK WEB SITES LINK ________________________ */
span#ukwebsites {line-height: 30px; color: #777; font-size: 10px; text-transform: uppercase; margin: 0 0 0 30px}
span#ukwebsites a {color: #999}
span#ukwebsites a:hover {color: #eee}


/* ________________________ RIGHT COL bigLinks _________________________ */
ul#bigLinks {margin: 30px 30px 0 0; padding: 0; background: #3a3a3a; width: 331px; overflow: hidden}
ul#bigLinks li {display: block; float: left; width: 331px; margin: 0; padding: 0; background: none}
ul#bigLinks li a {position: relative; z-index: 110; margin: 0; padding: 0; display: block; float: left; width: 315px; background-position: left top; background-repeat: no-repeat}
ul#bigLinks li a:hover {background-position: left bottom}

ul#bigLinks li#linkOnlineShowroom {height: 112px; padding: 9px 8px 0 8px; background: url(../images/linkOnlineShowroomLi.jpg) 0 0 no-repeat} 
ul#bigLinks li#linkFindUs {height: 120px; padding: 0 8px 9px 8px; background: url(../images/linkFindUsLi.jpg) 0 0 no-repeat}

ul#bigLinks li#linkOnlineShowroom a {height: 107px; background-image: url(../images/linkOnlineShowroom.jpg)}
ul#bigLinks li#linkFindUs a {height: 117px; background-image: url(../images/linkFindUs.jpg)}

ul#bigLinks li a span.linkTitle {font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; font-size: 18px; display: block; position: absolute; left: 25px; top: 35px; z-index: 112; width: 150px; line-height: 20px; cursor: pointer; text-transform: uppercase}

ul#bigLinks li#linkFindUs a span.linkTitle {top: 54px}


#scrollerContainerlogo {margin: 0 0 0 158px }
#scrollerContainerlogo a {line-height: 50px; padding: 0 20px; color: #aaa; text-transform: uppercase; font-size: 11px}
#scrollerContainerlogo a:hover {color: #ddd}


/* ________________________ RIGHT COL SIDE LINKS _________________________ */
ul#sideLinks {margin: 45px 0 0 20px; padding: 0; width: 203px}
ul#sideLinks li {display: block; float: left; width: 203px; height: 65px; line-height: 65px; padding: 0 0 10px 0; margin: 0; background: none}
ul#sideLinks li a {display: block; float: left; width: 203px; height: 65px; line-height: 65px; text-indent: 63px; color: #fff; font-family: Arial, Helvetica, sans-serif; background: url(../images/btnSideLink.gif) left top no-repeat; font-weight: bold; text-transform: uppercase; font-size: 12px;}
ul#sideLinks li a:hover {background-position: left bottom}



/* __________________________ LOCATION PAGE ______________________________ */
#mapAsh,
#mapHollybourne {margin-top: 15px; margin-bottom: 20px; width: 450px; height: 330px; border: 1px solid #000;}

#mapAsh {margin-left: 30px}
#mapHollybourne {margin-left: 10px}

#mapAsh iframe,
#mapHollybourne iframe {width: 450px; height: 330px}


/* __________________________ AFTERSALES PAGE ______________________________ */
ul#aftersalesLogos {margin: 20px 0 18px 37px; padding: 0; width: 100%; overflow: hidden}
ul#aftersalesLogos li {display: block; float: left; width: 106px; font-size: 11px; text-transform: uppercase; margin: 0 30px 0 0 ; padding: 0; background: none}

ul#aftersalesLogos li span {display: block; text-align: center; padding: 5px 0 0 0}

/* __________________________ WARRANTY PAGE ______________________________ */
#warrantyLogos {float: right; width: 200px; margin: 0 20px 20px 20px}


/* __________________________ EBAY SHOP PAGE ______________________________ */
a#ebayLink {display: block; margin: 30px 0 0 10px; width: 293px; height: 99px; background-position: left top; background-image: url(../images/ebayLink.gif)}
a#ebayLink:hover {background-position: left bottom}

/* ________________________________ TABS __________________________________ */
ul.tabs {width: 100%; height: 34px; margin: 20px 0 0 0; padding: 0; position: relative;
	z-index: 100;}

ul.tabs li {float: left; display: block; height: 34px; line-height: 34px; list-style: none outside; margin: 0; padding: 0 7px 0 0; background: none}

ul.tabs li a {display: block; height: 33px; line-height: 33px; padding: 0 50px; text-decoration: none; border: 1px solid #666; border-bottom: 0; color: #bbb; background: none}

ul.tabs li a:hover {color: #fff}

html ul.tabs li.active {}
html ul.tabs li.active a {background: #333; color: #fff; border: 1px solid #666; border-bottom: 0}

html ul.tabs li.active a:hover {}

.tab_container {
	clear: both;
	float: left; 
	width: 100%;
	margin: 0 0 30px 0;
	background: #333;
}

.tab_content {
	border: 1px solid #666;
	position: relative;
	z-index: 99;
	top: -1px;
	padding: 0 0 30px 0;
	overflow: hidden
}

/* STYLE PERFORMANCE AND TECH DATA */
#tab2 ul {overflow: hidden}
#tab2 ul li {width: 47%; float: left; margin: 0; position: relative}
#tab2 ul li span {display: block; position: absolute; right: 30px; top: 0}

a.facebook {
	display: block;
	width: 246px;
	height: 60px;
	background:url(../images/facebook%20link.png) center top no-repeat;
	margin: 30px;
	float: right;
}
a.facebook:hover {
	background-position: bottom;
}