﻿/* ===== Peugeot Contract Hire 2009 Stylesheet - (c) Bluesky Interactive ====== */


html {
margin: 0; 
padding: 0;
font: 11px Tahoma, Arial, Helvetica, sans-serif, serif; color: #363636;
background:url(/images/body-bg.jpg) top left repeat-x #fefefe;
}

body {
background:url(/images/body-bg.jpg) top left repeat-x #fefefe;}

img {
margin: 0; 
padding: 0;
border: 0 }

.notes {
font: normal 10px/16px Tahoma, Arial, Helvetica, sans-serif, serif; }

.ref {
font: normal 10px/20px Tahoma, Arial, Helvetica, sans-serif, serif; color: #858585;}

.red {
color:#bb0000;}

.clear {
clear: both;
height: 0px;
overflow: hidden; }

#pages { 
width: 820px;
padding: 0 20px 0 20px;
margin: 0 auto;
background:url(/images/header/background.jpg) top left repeat-x #ffffff;}


/* ==== header ==== */

#header {
width: 820px;
padding: 20px 0 0 0;
margin: 0 auto 13px auto;
height: 90px;}

.headerleft {
width: 400px;
float: left;
padding: 0;
margin: 0;}

.headerright {
width: 410px;
float: right;
padding: 0 0 0 0;
margin: 0;
text-align:right;}

.headerlogo {
float: left;
margin-right: 16px;}

.headertitlebox {
padding-top: 4px;}

.header-title {
color:#FFFFFF;
font-size: 27px;
padding: 0 0 0 0;}

.header-call {
font-size: 24px;
margin: 0 -6px -4px 0;
padding:0;
color:#eef4f8;}

.header-tel {
font-size: 44px;
margin: -15px -6px 0 0;
padding:0;}

/* ====== nav ====== */

#navcontainer {
width: 820px;
height: 44px; 
padding: 0 0 0 0;
background:url(/images/nav/bg.jpg) top left repeat-x;
margin: 0 0 13px 0;}
#nav {
width: 820px;
display: inline;
list-style: none;
margin: 0;
padding: 0; }
#nav ul {
float: left;
display: inline;
list-style: none;
margin: 0;
padding: 0; }
#nav li {
float: left;
margin: 0;
padding: 0;
display: inline;}
#nav a {
font-size: 12px; color: #ffffff;
text-decoration: none;
display: block;
margin: 0;
padding: 15px 6px 14px 6px; }

#nav a:hover {
color: #ffffff;
background:url(/images/nav/hover.jpg) top left repeat-x #5292fe; }
#nav ul li a:hover {
color: #FFF;
text-decoration: none;
/*background-color: #74021b; */} 
#nav li ul {
position: absolute;
left: -999em;
height: auto;
margin: 0 0 0 0;
padding: 0;
width: 194px;
w\idth: 190px;
border: none; }
#nav li ul a {
width: 194px;
w\idth: 190px;
margin: 0;
padding: 5px 3px 7px 0;
background: #001c54;
font: normal 12px Arial, Helvetica, sans-serif; color: #fff;
padding-left: 10px;
line-height: 1.4em;
border-top: solid 1px #324976; }
#nav li ul a:hover {
background-color:#85bcbf; 
/*background:url(../images/nav-hover.jpg) bottom left repeat-x #d6e02c;*/	
color: #fff;}
#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;
width: 164px; } 



/* ====  headings ==== */

#main h1 {
font: normal 18px Tahoma, Arial, Helvetica, sans-serif; color: #1c73af; 
margin: 0 0 12px 0;}
#main  h2 {
font: normal 18px Trebuchet MS, Arial, Helvetica, sans-serif; color: #b3cee1; 
margin: 0 0 12px 0; }
#main  h3 {
font: bold 12px/21px Trebuchet MS, Arial, Helvetica, sans-serif; color: #b3cee1; 
margin: 0 0 8px 0; }
#main  h4 {
font: normal 12px/21px Trebuchet MS, Arial, Helvetica, sans-serif; color: #7eabcc; 
margin: 0 0 8px 0; }




/* ==== main content ==== */

#main {
width: 820px;
padding: 0 0 15px 0;
margin: 0;
font: normal 11px/18px Tahoma, Arial, Helvetica, sans-serif, serif; color:#363636;}

#main a:link, #main a:visited, #main a:active {
font-weight: bold;
color: #439fde;
text-decoration: none; }
#main a:hover {
color: #ffcc00;
text-decoration: none;
font-weight: bold;}

#main p {
margin: 0 0 12px 0;
padding: 0;}



#left {
width: 520px;
float:left;}
#right {
width: 280px;
float:right;}


#left ul {
margin: 0 0 5px 20px; 
padding: 0;
list-style-type: none;}	
#left ul li {
background-image: url(/images/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .25em;
padding: 0 0 10px 22px;}

#right ul {
margin: 0 0 5px 0; 
padding: 0;
list-style-type: none;}	
#right ul li  {
background-image: url(/images/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .25em;
padding: 0 0 10px 22px;}






/* ==== homepage ==== */

.homebanner {
margin: 0 0 20px 0;}

/* ==== car details ==== */




.mainofferimage {
margin: 0 0 12px 0;}

.leftgreybox1 {
width: 144px;
padding: 10px 7px 10px 7px;
margin: 0 20px 12px 0;
border: solid 1px #9d9d9d;
background:url(/images/boxes/left-box-bg.jpg) top left repeat-x #e3e3e3;
color:#434343;
float:left; }


.leftgreybox2 {
width: 144px;
padding: 10px 7px 10px 7px;
margin: 0 0 12px 0;
border: solid 1px #9d9d9d;
background:url(/images/boxes/left-box-bg.jpg) top left repeat-x #e3e3e3;
color:#434343;
float:left; }


.rightgreybox {
width: 260px;
padding: 10px 9px 10px 9px;
border: solid 1px #9d9d9d;
background:url(/images/boxes/right-box-bg.jpg) top left repeat-x #e3e3e3;
color:#434343; }

.leadingmodel {
font: normal 16px/22px Tahoma, Arial, Helvetica, sans-serif, serif; color:#363636;}

.leadingprice {
font: normal 27px Tahoma, Arial, Helvetica, sans-serif, serif; color:#bb0000;}

.smallerprice {
font: normal 16px Tahoma, Arial, Helvetica, sans-serif, serif; color:#bb0000;}



/* ==== get a quote box ==== */

.getaquote {
width: 246px;
height: 179px;
/*height: 169px;*/
display:block;
padding: 50px 0 0 14px;
background:url(/images/calls-to-action/quote-bg.jpg) top left no-repeat;
color:#FFFFFF;
font-weight:normal;
text-decoration:none;}

.getaquotebreak {
margin: 12px 0 10px 0;}

.bluetext {
color: #98d5ff;
padding: 0 0 4px 0;
display:block;}

.telephone {
font-size:22px;
margin:0;
padding: 7px 0 4px 0;
display:block;}


.telephone-open {
font-size:13px;
font-weight:bold;
margin:0;
padding: 7px 0 0 0;
}

/* ====== contact form ====== */


#contact fieldset {
 width:418px;
 padding:0 20px 20px 20px;	
 border:1px solid #d6d6d6;
 font-weight:bold;
}

#contact p {
 font-weight:normal;
}

#contact label{
 float:left;
 width:140px;
 margin:10px 0 0 0;
 padding:0 10px 0 0;
 font-weight:normal;
}

#contact option{
 width:203px;
 margin:0 0 0 0; padding:1px 0 1px 0;
}

.filledcontact-dropdown {
 height:20px;
 width:244px;
 font:normal 10px Tahoma, Arial, Helvetica, sans-serif, serif; color: #535353; 
 margin:10px 0 0 0; padding:3px 0 0 5px;
}

.contact-dropdown {
 height:20px;
 width:250px;
 font:normal 10px Tahoma, Arial, Helvetica, sans-serif, serif; color: #535353; 
 margin:10px 0 0 0; padding:3px 0 0 5px;
}

.contact-width {
 /*height:18px;*/
 width:243px;
 font:normal 10px Tahoma, Arial, Helvetica, sans-serif, serif; color: #535353; 
 margin:5px 0 0 0; padding:4px 0 3px 5px;
}

#contact textarea{
 height:150px;
 width:243px;
 font:normal 10px Tahoma, Arial, Helvetica, sans-serif, serif; color: #535353; 
 margin:10px 0 0 0; padding:3px 0 0 5px;
}

#contact .contact_checkbox {
 width:15px;
 margin:0 4px 0 0; padding:0;
 border:0;	
}

#contact .contact-button {
 float:right;
 width:250px;
 height:58px;
 margin:3px 18px 15px 0; padding:0;
 background:url(/images/contact-button.gif) top left no-repeat;
 border:0;
 cursor:pointer;
}

#contact ul {
 margin:0; padding:0;
 list-style:none;
 list-style-image:none;
 background-image:none;
}
#contact ul li {
 margin:0; padding:0 0 5px 0;
 list-style:none;
 list-style-image:none;
 background-image:none;
}




/* ==== footer ==== */



#footer {
width: 820px;
padding: 13px 0 5px 0;
border-top: solid 1px #dadada;
color: #959595;
margin: 0 auto;}

#footer p {
margin: 0 0 11px 0;
font-size:11px;}
#footer a:link, #footer a:visited, #footer a:active {
font-weight: normal;
color: #959595; 
text-decoration: none; }
#footer a:hover {
font-weight: normal;
color: #686868; 
text-decoration: none;}

.footerleft {
float:left;
width: 520px;}

.footerright {
float:right;
width: 280px;} 





/* ====== Sifr ====== /*


/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1, .sIFR-hasFlash .header-title, .sIFR-hasFlash .header-call, .sIFR-hasFlash .header-tel{
visibility: hidden;
}


