/* CSS for Seatcarsdirect.co.uk - Copyright www.ukwebsites.net */
/*
	COLOURS:
	RED:			#ff0000
	GREY:			#dedede
	DARK GREY: 		#181818
*/	

body {margin: 0; padding: 0 0 60px 0; background: url(../images/body-back2.jpg) 50% top repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif}
body#body-home {background: url(../images/body-back.jpg) 50% top repeat-x}

* {margin: 0; padding: 0}

a img {border: 0}

h1, h2, h3, h4, h5 {margin: 10px 20px 10px 10px; font-weight: normal; color: #222; text-transform: uppercase; font-family: "Calibri", Arial, Helvetica, sans-serif}
h1 span, h2 span, h3 span, h4 span, h5 span {color: #ff0000} 
h1 {font-size: 26px; margin-top: 10px; margin-bottom: 0}
h2 {font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold}
h3 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold }

p, ol, ul, table {margin: 10px; font-size: 0.70em; line-height: 1.6}

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


/* -------------------------------- LAYOUT ---------------------------------------- */
div#container {margin: 0 auto; position: relative; z-index: 1; width: 990px;}

div#top {margin: 0 auto; position: relative;z-index: 4; width: 990px;height: 103px}
div#topcontrol {display: none}

/* SEAT CARS DIRECT LOGO */
a#seat-cars-direct {position: absolute; left: 0; top: 29px; z-index: 5; display: block; width: 289px; height: 60px; background: url(../images/seat-cars-direct.gif) 0 top no-repeat}
a#seat-cars-direct .fadeThis {position:relative; display:block;	height: 60px; width: 289px; cursor: pointer}
a#seat-cars-direct .fadeThis * {display: none}
a#seat-cars-direct span.hover {position: absolute;	top: 0;	left: 0;display: block;	height: 60px; width: 289px; background:url(../images/seat-cars-direct.gif) no-repeat 0 bottom; cursor: pointer}

/* SEAT LOGO */
img#seat-logo {position: absolute; right:15px; top: 15px; z-index: 7}


/* LOW MILEAGE CARS LOGO */
a#low-mileage-cars {position: absolute; left: 10px; top: 22px; z-index: 5; display: block; width: 455px; height: 66px; background: url(../images/low-mileage-cars.gif) 0 top no-repeat}
a#low-mileage-cars .fadeThis {position:relative; display:block;	height: 66px; width: 455px; cursor: pointer}
a#low-mileage-cars .fadeThis * {display: none}
a#low-mileage-cars span.hover {position: absolute;	top: 0;	left: 0;display: block;	height: 66px; width: 455px; background:url(../images/low-mileage-cars.gif) no-repeat 0 bottom; cursor: pointer}


div#main-nav {position: absolute; left: 8px;	top: 103px;	z-index: 11; width: 973px; height: 58px}

div#main-image {
    position: absolute;
	top: 162px;
	left: 0;
	z-index: 3;
    width: 990px;
    height: 162px;
	background: url(../images/main-images/back2.jpg) left -1px no-repeat;
	overflow: hidden!important
}

div#main-image #flashcontainer {position: absolute; right: 0; top: -1px; z-index: 4; width: 460px; height: 162px}



body#body-home div#main-image {
    height: 290px;
	background: url(../images/main-images/back.jpg) left top no-repeat;
}
div#main-image object {position: absolute; left: 0; top: 0; z-index: 4}
div#main-image div#address-and-tel {position: absolute; right: 12px; top: 5px; z-index: 6; text-align: right; color: #fff; font-size: 14px; text-transform: uppercase; line-height: 1.4}

div#content {position: relative; top: 150px; left: 0; z-index: 5; width: 990px; padding: 0 0 30px 0}
body#body-home div#content {top: 302px}


div#leftcol {float: left; width:710px; }
div#rightcol {float: right; width:270px; }

/* HOMEPAGE COLUMNS */
body#body-home div#leftcol {float: left; width: 453px; }
body#body-home div#centrecol {float: left; width: 207px; }
body#body-home div#rightcol {float: right; width: 330px; }


.clear {clear: both}
div#footer {width: 973px; margin: 15px 0 40px 8px; background: #171717; padding: 15px 0; border-top: 3px solid #ff0000; overflow: hidden}


/* ---------------------------------- MAIN NAV ---------------------------------- */
div#main-nav ul {width: 973px; height: 58px; margin: 0; padding: 0; overflow: hidden}
div#main-nav ul li {display: block; float: left; height: 58px; margin: 0 2px 0 0; padding: 0}

div#main-nav ul li a { 
	display: block;
	float: left;
	height: 58px;
	line-height: 40px;
	font-size: 11px;
	text-decoration: none;
	text-align: center;
	color: #000;
	text-transform: uppercase;
	background-repeat: no-repeat;
	background-position: left top
}
div#main-nav ul li a:hover {background-position: left bottom}


/* --- WIDTHS AND IMAGES --- */
a#nav-home {width: 69px; background-image: url(../images/nav/home.gif)}
a#nav-new-cars {width: 96px; background-image: url(../images/nav/new-cars.gif)}
a#nav-used-cars {width: 104px; background-image: url(../images/nav/used-cars.gif)}
a#nav-finance {width: 90px; background-image: url(../images/nav/finance.gif)}
a#nav-warranty  {width: 94px; background-image: url(../images/nav/warranty.gif)}
a#nav-after-sales {width: 106px; background-image: url(../images/nav/after-sales.gif)}
a#nav-part-ex {width: 87px; background-image: url(../images/nav/part-ex.gif)}
a#nav-about {width: 76px; background-image: url(../images/nav/about.gif)}
a#nav-location-and-hours {width: 146px; background-image: url(../images/nav/location-and-hours.gif)}
a#nav-contact-us {width: 84px; background-image: url(../images/nav/contact-us.gif)}


/* --- CURRENT STYLES --- */
#body-home a#nav-home,
#body-new-cars a#nav-new-cars,
#body-used-cars a#nav-used-cars,
#body-finance a#nav-finance,
#body-warranty a#nav-warranty,
#body-after-sales a#nav-after-sales,
#body-part-ex a#nav-part-ex,
#body-about a#nav-about,
#body-location-and-hours a#nav-location-and-hours,
#body-contact-us a#nav-contact-us
 {
	background-position: left bottom
}


/* ---------------------------------- MAIN BOXES ---------------------------------- */
ul#main-boxes {margin: 0 1px; padding: 0; height: 209px; width: 988px; background: url(../images/main-boxes-shadows.jpg) 50% 47px no-repeat}
ul#main-boxes li.mainbox {margin: 0 8px 0 0; float: left; width: 324px; height: 216px; list-style: none outside; background: url(../images/main-box-back.gif) 50% top no-repeat; position: relative; z-index: 9}
ul#main-boxes li.mainbox#mboxend {margin: 0}

ul#main-boxes li.mainbox h3 {margin-left: 25px; margin-top: 13px; font-size: 16px}
ul#main-boxes li.mainbox a.view-all {position: absolute; right: 25px; top: 0; display: block; height: 50px; line-height: 50px; text-transform: uppercase; padding: 0 0 0 15px; background: url(../images/red-arrow-small.gif) left 50% no-repeat}
ul#main-boxes li.mainbox a.view-all:hover {color: #000}


/* ------------------------------ HOMEPAGE USED CAR SEARCH ------------------------------ */
div#used-car-search {position: relative; z-index: 5; margin: 8px 0 0 13px; width: 308px; height: 176px; background: url(../images/used-car-search.jpg) 0 0 no-repeat; overflow: hidden}
div#used-car-search h3 {margin: 20px 0 0 20px; color: #ff0000; font-size: 15px}


/* ----------------------------- USED CARS USED CAR SEARCH ----------------------------- */
div#rightcarsearch {position: relative; z-index: 5; margin: 12px 0 0 13px; width: 260px; background: url(../images/box-dark.jpg) left top repeat-x #111; overflow: hidden; margin: 60px 0 -50px 0; padding: 0 0 10px 0 }
div#rightcarsearch h3 {margin: 10px 0 0 17px; color: #fff; font-size: 15px}
div#rightcarsearch label {color: #fff!important; font-size: 11px!important; padding: 0 0 0 17px!important;text-align: left!important}


/* ---------------------------------- FOOTER NAV ---------------------------------- */
a#ttt {width: 50px; padding: 3px 30px 0 33px; background:url(../images/red-arrow-small-up.gif) 15px 5px no-repeat; float: left; font-size: 11px; text-transform: uppercase; color: #fff}
a#ttt:hover {color: #ccc}

div#footer ul {margin: 0; padding: 0;float: left}
div#footer ul li {margin: 0; padding: 0 60px 0 0; line-height: 1.3; list-style: none outside}
div#footer ul li strong {font-weight: bold; color: #ff0000}
div#footer ul li a {font-size: 11px; text-transform: uppercase; color: #fff}
div#footer ul li a:hover {color: #ccc}


/* --------------------------------- RIGHT COL BOXES --------------------------------- */
ul#rightcol-boxes {margin: 60px 10px 30px 0; padding: 0}
ul#rightcol-boxes li {margin: 0 0 10px 0; padding: 0; float: left; width: 260px; height: 137px; background: url(../images/box-dark.jpg) left top repeat-x; list-style: none outside; overflow: hidden; position: relative; z-index: 5}
ul#rightcol-boxes li h3 {color: #fff; font-size: 15px; margin: 8px 0 0 17px; }
ul#rightcol-boxes li p {color: #fff; font-size: 11px; margin: 15px 0 0 17px; }

ul#rightcol-boxes li a#rightcol-view-map {display: block; height: 28px; line-height: 28px; width: auto; padding: 0 0 0 35px; position: absolute; right: 20px; top: 94px; z-index: 6; text-transform: uppercase; color: #fff; background: url(../images/rightcol-view-map.gif) left 0 no-repeat}
ul#rightcol-boxes li a#rightcol-view-map:hover {color: #ccc}

ul#rightcol-boxes li p#rightcol-tel-num {display: block; height: 28px; line-height: 28px; width: auto; padding: 0 0 0 40px; text-transform: uppercase; font-size: 12px; color: #fff; background: url(../images/rightcol-tel.gif) left 0 no-repeat}

ul#rightcol-boxes li p#rightcol-email-us {margin-top: 10px; font-size: 12px}
ul#rightcol-boxes li p#rightcol-email-us a {display: block; height: 28px; line-height: 28px; width: auto; padding: 0 0 0 40px; text-transform: uppercase; color: #fff; background: url(../images/rightcol-email-us.gif) left 0 no-repeat}
ul#rightcol-boxes li p#rightcol-email-us a:hover {color: #ccc}

/* --------------------------------- aftersales BOXES --------------------------------- */
#aftersales-boxes {margin: 60px 10px 30px 0px; padding: 0}
#aftersales-boxes a {margin: 0 0 10px 10px; padding: 0; float: left; width: 220px; height: 137px; background: url(../images/box-dark.jpg) left top repeat-x; list-style: none outside; overflow: hidden; position: relative; z-index: 5}
#aftersales-boxes a * {color: #FF0000 !important}
#aftersales-boxes a h3 {color: #fff !important; font-size: 12px; margin-top: 12px; display: block; text-align: center;}
#aftersales-boxes a p {color: #fff; font-size: 11px; margin: 12px 0 0 12px; }
#aftersales-boxes a p.small {font-size: 8px; position: absolute; margin: 0px; left: 8px; bottom: 2px;}
#aftersales-boxes a .specialOffer {position: absolute; left: 0px; top: 37px; z-index: 1;}
#aftersales-boxes a .price {font-size: 44px !important; z-index: 99; position: relative; font-weight: bold; width: 220px; display: block; text-align: center; margin: 24px 0px 0px 0px;}
#aftersales-boxes a .mid {position: relative; width: 220px; text-align: center; font-size: 14px; font-weight: bold; line-height: 18px; margin: 14px 0px 0px 0px;}
#aftersales-boxes a:hover {background-image: url('../images/box-dark-lighter.jpg')}
#aftersales-boxes a .price span {font-size: 24px !important; font-weight: normal; margin-left: 4px;}

/* ----------------------------------- NEW SEAT CARS ------------------------------------ */
ul#new-seat-models {margin: 15px 10px;}
ul#new-seat-models li {float: left; margin: 0; padding: 0 13px 13px 0; list-style: none outside}
ul#new-seat-models li a, ul#new-seat-models li span {display: block; width: 215px; height: 145px; background: #eee; border: 1px solid #ddd; overflow: hidden; position: relative; z-index: 5}
ul#new-seat-models li a:hover, ul#new-seat-models li span:hover {border-bottom-color: #ff0000}

ul#new-seat-models li img {display: block; margin: 0 0 0 -40px;}

ul#new-seat-models li span.new-car-name {position: absolute; left: 0; bottom: 0; z-index: 6; display: block; cursor: pointer; width: 215px; height: 25px; line-height: 25px; font-size: 11px; color: #000; text-align: center; text-transform: uppercase}


/* ----------------------------------- LOCATION MAP ------------------------------------- */
div#MyMap {margin: 10px; border: 1px solid #000}
div#MyMap, div#MyMap iframe {width: 680px; height: 370px}


/* ----------------------------------- GET DIRECTIONS ------------------------------------- */
div#getdirections {margin: 5px 10px}
div#getdirections form {}
div#getdirections form #saddr {padding: 3px; font-size:11px; background: #eee!important; border: 1px solid #999!important}
div#getdirections form label {display: block; float: left; padding: 0 10px 0 0;font-size:11px; line-height: 20px!important}
.gobutton {width: 50px; border: 0!important; background: #111!important; line-height: 18px; color: #fff; cursor: pointer}


/* ----------------------------------- REVO LINK ------------------------------------- */
div#revo-link {margin: 8px 0 0 10px; width: 187px; height: 176px; background: url(../images/revo-link.gif) 0 0 no-repeat; overflow: hidden}
div#revo-link p {color: #fff; display: block; margin: 85px 18px 10px 18px; font-size: 11px}
div#revo-link p a:hover {color: #fff}