/* ==== harratts global stylesheet (c) bluesky interactive ==== */

@import url("reset.css");

/* ==== common ==== */

html {
margin: 0; 
padding: 0;
font: normal 13px/14px Verdana, Arial, Helvetica, sans-serif; }
body {
height: 100%; }
.notes {
font: normal 10px/12px Arial, Helvetica, sans-serif, serif; color: #848484; }
.clear {
clear: both;
height: 0px;
overflow: hidden; }
a {
color: #666;}
a:hover {
color: #CC0000;
text-decoration: none;}

#pages { 
width: 949px;
padding: 0 0 50px 0;
margin: -6px auto 0 auto;
color:#666666;
background: url(../images/pages-bg.gif) bottom left no-repeat;}



/* ==== header ==== */

#header {
background: url(../images/bg-header.gif) bottom left repeat-x ;
height:	72px;
width: 100%;}

#headercontainer {
width: 949px;
padding: 0;
margin: 0 auto;}

.headerlogo {
float: left;}



/* ==== navigation ===== */

#navcontainer {
float: left;
margin-top: 45px;
width: 695px;}

#nav, #nav ul {
float: left;
list-style: none;
color: #FFF;
padding: 0;
margin: 0; }
#nav li {
float: left;
padding: 0;
margin: 0; }
#nav a {
display: block;
margin: 0;
padding: 0;
font: bold 11px Tahoma, Arial, Helvetica, sans-serif; color: #666}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 140px;
w\idth: 136px;
background-color: #FFF; }
#nav ul li a:hover {
background-color: #0083ca;
color: #FFF;} 
#nav li ul a {
width: 194px;
margin: 0;
padding: 0;
text-decoration: none; }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
border-top: none;
width: 194px; }

.navdropdownfirst {border: solid 1px #cccccc;}
.navdropdown {border-left: solid 1px #cccccc;border-right: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}


/* ==== main layout ==== */

.splashleft {
float: left;
width: 378px;
margin: 16px 0 0 0;}

.splashright {
float: right;
width: 378px;
margin: 16px 0 0 0;	
}


.splashtop {
background: url(../images/splash-top-bg.jpg) top left;
width:378px;
height:12px;}

.splashcontent {
background: url(../images/splash-bottom-bg.jpg) bottom left;
width: 356px;
padding: 11px 11px 16px 11px;}

.splashcontent h1 {
margin-bottom: 12px;}

.splashcontent p {
margin-bottom: 9px;}


.left {
width: 150px;
float: left;
font-size: 85%;
color: #666;
padding-top:21px;}
.left p {
margin: 0 0 7px 0;}


.main {
width: 773px;
float: right;
}

.main h2, .main h1, .main p{
padding: 0 9px;}


.left ul {
width: 150px;
margin: 7px 0;
position: relative;}
.left li {
background: url(../images/grey-li-bg-top.gif) 0 0 no-repeat #656565 ;
margin: 0 0 2px 0;
position: relative;
height: 21px;
padding: 0;}
.left li a {
display: block;
background: url(../images/grey-li-bg-top-bottom.gif) bottom left no-repeat;
color: #fff;
text-decoration: none;
padding: 3px 4px 4px 30px;}
.left li a img {
position: absolute;
left: 6px;
z-index: 20;}
.left li a:hover {
text-decoration: underline;
color:#FFF;}


.centre {
width: 562px;
background: url(../images/side-stripe-top.gif) top right no-repeat;
padding:21px 32px 0 0;
font-size:11px;
float:left;}

.centre h1 {
margin: 0 0 12px 0;}
.centre p {
margin: 0 0 7px 0;}


.detailscontainer ul li {
padding-left: 15px;
background: url(/nissan/images/bullet-tick.gif) 0 5px no-repeat;
margin: 0 0 3px 12px;}

.ticks {
margin-bottom: 12px;}

.ticks li {
padding-left: 15px;
background: url(/nissan/images/bullet-tick.gif) 0 5px no-repeat;
margin: 0 0 3px 12px;}

.ticksdiv {
margin-bottom: 16px;}

.ticksdiv ul li {
padding-left: 15px;
background: url(/nissan/images/bullet-tick.gif) 0 5px no-repeat;
margin: 0 0 3px 12px;
height:auto;
}


.right {
width: 179px;
float:right;
padding-top: 21px;}
.right p {
margin: 0 0 12px 0;}




/* ==== homepage specific layout ==== */

.homeimagelarge {
padding-top:21px;
margin-bottom: 20px;
text-align:right;}

.defaultcentre {
width: 373px;
background-color:#fff;
float: left;}

.defaultright {
width: 365px;
background-color: #fff;
float:left;}

.defaultright h2, .defaultright p{
padding-left: 9px;}


.homeoffer {
background:url(../images/home-offer-bg.jpg) top left no-repeat;
width:365px;
height:82px;
margin: 0 0 2px 0;
padding: 10px 0 0 8px;}

.homeoffer-tall {
background:url(../images/home-offer-bg-large.jpg) top left no-repeat;
width:365px;
height:97px;
margin: 0 0 2px 0;
padding: 10px 0 0 8px;}

.homeoffer-xtall {
background:url(../images/home-offer-bg-xlarge.jpg) top left no-repeat red;
width:365px;
height:135px;
margin: 0 0 2px 0;
padding: 10px 0 0 8px;}

.homeofferleft {
float: left;
width:147px;}

.homeofferright {
float: right;
width:214px;
padding-top:12px;}

.homeofferright p {
margin-bottom:8px;
font-size: 11px;
}

.homeofferright h2  {
margin-bottom: 3px;}



/* ====== speedy search ====== */

#homesearch {
height:91px;
padding-left: 17px;
padding-top: 16px;
margin: 0 0 0 0 ;
width: 308px;
background:url(../images/homesearch-bg.jpg) top left no-repeat; }
#homesearch select {
font: 11px  Arial, Helvetica, sans-serif; color: #000;
width: 140px;
margin: 0 0 6px 0;
padding: 0; 
height: 20px;}
#homesearch .dropdown {
width: 140px;
margin: 0 0 6px 0;
padding: 0;
height:20px; }
#homesearch .dropdown2 {
width: 140px;
margin: 0 0 6px 0;
padding: 0;
height: 20px; }
#homesearch input{
color: #fff;
width: 140px;
margin: 0 0 6px 0;
height: 20px;
padding: 0;
background: url(../images/contact-submit.jpg) top no-repeat;
border:none;
cursor:pointer;
font-size:90%; }
#homesearch .dropdown1 {
width: 140px;
margin: 0 0 6px 0;
padding: 0;
height:20px; }


/* ====== breadcrumbs ====== */

.breadcrumbs {
margin: 0 0 19px 0;
font-size:  10px;
color: #999;}

.breadcrumbs a {
color: #666;
text-decoration: none;}

.breadcrumbs a:hover {
color: #C71444;
text-decoration: underline;}

.breadcrumbs em {
color: #C71444;
font-weight: bold;
font-style: normal;}

.breadcrumbs p {
margin-bottom: 3px;}


/* ====== Service Key Tables ===== */

.full-image {
margin: 18px 0 6px 0;}

.our-services-glow {
background: url(/nissan/images/our-services-bg.jpg) top left no-repeat;
width:526px;
height:98px;
padding: 16px 18px 0 18px;}

.our-services {
border-top:1px solid #ccc;
border-left:1px solid #ccc;}

.our-services td {
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:4px 0 2px 4px;
text-transform:capitalize;
width:172px;}

.our-services td * {
vertical-align: middle;}


/* ====== Find us and Maps ====== */


.mapcontainer {
width: 553px;
padding: 0 0 0 9px;
margin: 6px 0 0 0;}

.googlemap {
width: 260px;
float:left;
padding-top:12px;}

.address {
width: 276px;
float: right;
background: url(/nissan/images/address-bg.jpg) bottom left no-repeat;
padding:7px 0 26px 9px;}

.addresstop {
width: 285px;
height:13px;
float:right;
background: url(/nissan/images/address-top-bg.jpg) bottom left no-repeat;}

.postcodefield {
margin: 0 9px 0 9px;
width: 90px;}


.opening-hours-glow {
background: url(/nissan/images/opening-hours-bg.jpg) bottom left no-repeat;
width:526px;
padding: 9px 18px 16px 18px;}

.opening-hours-glow-top {
background: url(/nissan/images/opening-hours-bg-top.jpg) bottom left no-repeat;
width:562px;
height:9px;
margin: 0 0 0 0;}


.opening-hours td {
padding:4px 0 2px 4px}

.opening-hours th {
color:#fff;
background-color:#666666;
padding:4px 0 2px 4px;}


/* ==== new car landing pages ==== */


.newcarrangeleft {
width: 150px;
float: left;
margin: 6px 0;}

.newcarrangeright {
width: 400px;
float: right;
padding-top: 18px;}


.viewoffersnewcar {
margin-top:6px;}

.newcarthumbcolumn {
width: 298px;
float:left;}

.newcardetail {
width: 264px;
float: right; }

.newcarthumbshadow {
background: url(../images/newcar-thumb-bg.jpg) top left no-repeat;
padding: 8px;
margin:0;}

.newcarlargeshadow {
background: url(../images/newcar-large-bg.jpg) top left no-repeat;
padding: 8px 7px 8px 8px;
margin: 0 0 25px 0;}

.newcartitle {
margin: 0 0 6px 10px;}


.newcardetail ul {
width: 150px;
margin: 9px 0 0 9px;
position: relative;}
.newcardetail li {
background: url(../images/grey-li-bg-top.gif) 0 0 no-repeat #656565 ;
margin: 0 0 2px 0;
position: relative;
height: 21px;
padding: 0;}
.newcardetail li a {
display: block;
background: url(../images/grey-li-bg-top-bottom.gif) bottom left no-repeat;
color: #fff;
text-decoration: none;
padding: 3px 4px 4px 30px;}
.newcardetail li a img {
position: absolute;
left: 6px;
z-index: 20;}
.newcardetail li a:hover {
text-decoration: underline;
color:#FFF;}


.newcardetail li.pink-button {
background: url(../images/pink-li-bg-top.gif) 0 0 no-repeat #c71444 ;
margin: 0 0 2px 0;
position: relative;
height: 21px;
padding: 0;}
.newcardetail li.pink-button a {
display: block;
background: url(../images/pink-li-bg-bottom.gif) bottom left no-repeat;
color: #fff;
text-decoration: none;
padding: 3px 4px 4px 30px;}
.newcardetail li.pink-button a:hover {
text-decoration: underline;
color:#FFF;}



/* ===== Special Offers Section ====== */

.apr {
color: #C71444;
font-size: 1.5em;
font-weight: normal;}

.pinktext {
color: #C71444;}

.offerbuttons {
margin: 0 0 16px 0;}

.offerintro {
margin: 0 0 16px 0;}

li.btn-highlight
{background: #C71444 url(../images/btn-sub-content-li-highlight.gif) 0 0 no-repeat;} 

li.btn-highlight a
{background: url(../images/btn-sub-content-li-a-highlight.gif) bottom left no-repeat;}

.terms table {
margin: 0 0 11px 9px;}

.terms table td {
padding: 3px;}




/* ==== footer ==== */

.footer {
margin-top: -4px; 
background: url(../images/bg-footer.gif) 0 0 repeat-x;
min-height: 72px;
font-size: 75%;
color: #999999;
z-index:2;}

.footercontainer {
width: 949px;
padding-top: 16px;
margin:0 auto;
background: url(../images/footer-divet.gif) top left no-repeat;
margin-top:0;}

.footerleft {
width: 549px;
float:left;}

.footerright {
width: 250px;
float:right;
text-align:right;}

.footer a {
padding-right: 3px;
color: #999;
}

.footer a:hover, .footer a.selected {
text-decoration: none;
color: #C71444; }

