@import url(reset.css);

html {
	margin-bottom: 0.1em;
	min-height: 101%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	text-align: center;
	color: #204369;
}

.hide{ display: none; }
.center-text { text-align: center; }
.clear { clear: both; }
.add-top-space { margin-top: 50px; }
.small-text { font-size: 50%; }
hr { display: none; position: absolute; }
p { margin-bottom: 1em; }

#wrapper {
	text-align: left;
	margin: 10px auto;
	width: 940px;
}

#header {
	background-image: url(/images/header-bg.jpg);
	background-repeat: repeat-x;
	display: block;
	height: 96px;
	position: relative;
}

#header .tl {
	position: absolute;
	top: 0; left: 0;
	width: 10px;
	height: 10px;
	background-image: url(/images/header-curver.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#header .tr {
	position: absolute;
	top: 0; right: 0;
	width: 10px;
	height: 10px;
	background-image: url(/images/header-curver.jpg);
	background-position: top right;
	background-repeat: no-repeat;
}

#header h1 a {
	position: absolute;
	top: 13px; left: 20px;
	background-image: url(/images/logo.png);
	background-repeat: no-repeat;
	text-decoration: none;
	text-indent: -9999px;
	width: 406px;
	height: 68px;
}

* html #header h1 a {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo.png',sizingMethod='crop');
}

#header ul {
	list-style: none;
	position: absolute;
	top: 61px; right: 50px;
}

#header ul li { display: inline; }

#header ul li a {
	float: left;
	height: 35px;
	padding: 0 15px 0 15px;
	font-size: 10pt;
	letter-spacing: -1px;
	text-align: center;
	line-height: 35px;
	text-decoration: none;
	font-weight: bold;
	background-image: url(/images/menu-btns.jpg);
	background-position: left;
	background-repeat: no-repeat;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #325c8a;
	margin: 0 3px 0 0;
	position: relative;
}

#header ul li a em {
	background-image: url(/images/menu-btns.jpg);
	background-position: right;
	background-repeat: no-repeat;
	position: absolute;
	top: 0; right: 0;
	width: 10px;
	height: 35px;
	
}

#header ul li a:hover { 
	color: #fddb3f;
	background-image: url(/images/menu-btns.jpg);
	background-position: bottom left;
}

#header ul li a:hover em {
	background-image: url(/images/menu-btns.jpg);
	background-position: bottom right;
}

.home #header ul li a.homeBtn,
.howitworks #header ul li a.howitworksBtn,
.testimonials #header ul li a.testimonialsBtn,
.contactus #header ul li a.contactusBtn {
	background-image: url(/images/menu-btns.jpg);
	background-position: top left;
	text-shadow: 1px 1px 0 #b6cbe3;
	background-color: #FFFFFF;
	color: #25578e;
}

.home #header ul li a.homeBtn em,
.howitworks #header ul li a.howitworksBtn em,
.contactus #header ul li a.contactusBtn em,
.testimonials #header ul li a.testimonialsBtn em {
	background-image: url(/images/menu-btns.jpg);
	background-position: top right;
}

#header #secure-payments {
	position: absolute;
	top: 10px; right: 20px;
	background-image: url(/images/bankofscotland.gif);
	width: 148px;
	height: 28px;
}

#content {
	display: block;
	clear: both;
}

#left-side h1 {
	font-weight: normal;
	font-size: 15pt;
	margin: 15px 0 0 0;
	letter-spacing: -1px;
	display: block;
}

#home-img {
	background-image: url(/images/home-img.jpg);
	height: 340px;
	position: relative;
	margin-bottom: 10px;
}

#home-img a#video {
	position: absolute;
	top: 16px; right: 21px;
	text-indent: -9999px;
	width: 190px;
	height: 165px;
	text-decoration: none;
}

#steps {
	position: absolute;
	bottom: 5px; left: 2px;
	background-image: url(/images/steps.png);
	width: 523px;
	height: 123px;
}

* html #steps {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/steps.png',sizingMethod='crop');
}

#value-form {	
	background-color: #e7e7e7;
	height: 240px;
	width: 380px;
	position: relative;
	padding: 90px 10px 10px 10px;
}

#value-form b.br {
	position: absolute;
	bottom: 0; right: 0;
	background-image: url(/images/grey-curves.jpg);
	background-position: bottom right;
	width: 8px;
	height: 8px;
}

#value-form b.bl {
	position: absolute;
	bottom: 0; left: 0;
	background-image: url(/images/grey-curves.jpg);
	background-position: bottom left;
	width: 8px;
	height: 8px;
}

#value-form h1 {
	position: absolute;
	top: 15px; right: -18px;
	background-image: url(/images/headers/value-your-car.png);
	width: 242px;
	height: 69px;
	text-indent: -9999px;
}

* html #value-form h1 {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/headers/value-your-car.png',sizingMethod='crop');
}

#value-form a#help-btn {
	position: absolute;
	top: 45px; right: 235px;
	font-size: 8pt;
	color: #204369;
}

#value-form p {	clear: both; }

#value-form p label {
	float: left;
	width: 110px;
	margin: 5px 10px 0 0;
	text-align: right;
}

#value-form p .text {
	display: block;
	border: 1px solid #97a5b5;
	background-image: url(/images/input-bg.jpg);
	background-repeat: repeat-x;
	height: 28px;
	font: inherit;
	text-transform: uppercase;
	padding: 2px 5px 2px 5px;
	width: 210px;
}

#value-form p .btn {
	float: left;
	margin-right: 10px;
}

#value-form p #already {
	float: left;
	font-size: 8pt;
	color: #204369;
	margin-top: 15px;
}

#value-form p#buy-vans {
	font-weight: bold;
	color: green;
	text-align: center;
}

#bottom { 
	display: block;
	clear: both;
	padding-top: 20px;
}

#left-side {
	float: left;
	width: 520px;
	position: relative;
	margin: 20px 10px 0 0;

}

.home #left-side { margin: 0 10px 0 0; }
.cardetails #left-side { float: none; width: 100%; }

#right-side {
	float: right;	
	width: 400px;
	position: relative;
}

.cardetails #right-side { display: none; }

h1#whatis {
	position: relative;
	display: block;
	left: -28px;
	background-image: url(/images/headers/what-is-bestcarbuyer.png);
	width: 298px;
	height: 53px;
	text-indent: -9999px;
}

* html h1#whatis {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/headers/what-is-bestcarbuyer.png',sizingMethod='crop');
}

h1#howdoyou {
	position: relative;
	display: block;
	left: -28px; 
	background-image: url(/images/headers/how-do-you.png);
	width: 298px;
	height: 53px;
	text-indent: -9999px;
}

* html h1#howdoyou {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/headers/how-do-you.png',sizingMethod='crop');
}

#feedback-mini {
	display: block;
	padding-left: 15px;
}

#feedback-mini div.entry {
	display: block;
	background-image: url(/images/bubble.jpg);
	background-repeat: no-repeat;
	width: 433px;
	padding: 45px 10px 0 10px;
	margin: 0 0 80px 20px;
	position: relative;
}

#feedback-mini div.entry b {
	position: absolute;
	bottom: -55px; left: 0;
	height: 55px;
	width: 453px;
	background-image: url(/images/bubble.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}

#feedback-mini div.entry strong {
	color: #555555;
}

#footer { 
	clear: both;
	border-top: 1px solid #204369;
	padding: 10px 0 10px 0;
	text-align: center;
	font-size: 10pt;
}

#footer a { color: #000; }

#testimonials {
	display: block;
	position: relative;
	padding-top: 50px;
	margin-top: 10px;
}

h2 {
	font-weight: bold;
	display: block;
	float: left;
	padding: 5px 10px 5px 10px;
	background-color: #4a7db6;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #1a4a7f;
	margin-bottom: 10px;
}

#contact-form p { clear: both; }

#contact-form p label {
	float: left;
	width: 130px;
	text-align: right;
	margin-right: 10px;
	font-weight: bold;
}

#contact-form p .text {
	padding: 2px;
	font: inherit;
	width: 200px;
}

#contact-form p label.big { width: 200px; }

#contact-form p textarea {
	padding: 2px;
	font: inherit;
	width: 250px;
	height: 10em;
}


#car-left {
	float: left;
	width: 300px;
	text-align: left;
	margin: 10px 40px 10px 40px;
}

#car-left img { 
	border: 1px solid #babdc1;
	padding: 2px;
	display: block;
	margin: 0 0 20px 0;
}

#car-left textarea {
	padding: 2px;
	width: 290px;
	border: 1px solid #babdc1;
	height: 8em;
	font: inherit;
}

#car-right {
	float: left;
	width: 550px;
	margin: 10px 0 10px 0;
}

#car-right p { clear: both; }

#car-right p label {
	float: left;
	width: 130px;
	font-weight: bold;
	text-align: right; 
	margin-right: 10px;
}

#car-right p.big label { width: 250px; margin-right:90px; }
#car-right p.small label { width: 30px; }

#car-right p select {
	padding: 2px;
	border: 1px solid #babdc1;
	font: inherit;
	width: 300px;
}

#car-right p.big select { width: 100px; }

#car-right p .text {
	padding: 2px;
	border: 1px solid #babdc1;
	font: inherit;
	width: 290px;
}


.tip { position: relative; font-size: 10pt; }

.tip small {
	display: none;
	position: absolute;
	top: 20px; left: 0;
	z-index: 1000;
	padding: 10px;
	font-weight: normal;
	color: #000000;
	font-size: 9pt;
}

.tip:hover small {
	display: block;
	width: 200px;
	background-color: #fff3be;
	border: 1px solid #babdc1;
	letter-spacing: 0;
}

.tip:hover small em {
	background-image: url(/images/tip-arrow.gif);
	width: 13px;
	height: 7px;
	position: absolute;
	top: -7px; left: 5px;
}


#customers-comments h1#customers {
	background-image: url(/images/headers/feedback.png);
	background-repeat: no-repeat;
	position: absolute;
	width: 264px;
	height: 63px;
	right: -18px; top: -20px;
}

#customers-comments { 
	display: block;
	margin: 1em auto;
	padding: 45px 10px 10px 10px;
	background-color: #f3e18d;
	position: relative;
	margin-top: 30px;
	height: 100px;
}

#customers-comments b.br {
	position: absolute;
	bottom: 0; right: 0;
	background-image: url(/images/yellow-curves.jpg);
	background-position: bottom right;
	width: 8px;
	height: 8px;
}

#customers-comments b.bl {
	position: absolute;
	bottom: 0; left: 0;
	background-image: url(/images/yellow-curves.jpg);
	background-position: bottom left;
	width: 8px;
	height: 8px;
}

#customers-comments b.tl {
	position: absolute;
	top: 0; left: 0;
	background-image: url(/images/yellow-curves.jpg);
	background-position: top left;
	width: 8px;
	height: 8px;
}


.form-progress {
	margin: 0 auto 20px auto;
	background-position: 0 -15px;
	width: 900px;
	height: 90px;
	display: block;
}

#step2 { background-image: url(/images/step2.jpg); }
#step3 { background-image: url(/images/step3.jpg); }
#step4 { background-image: url(/images/step4.jpg); }


#top-list {
	position: relative;
	color: #FFFFFF;
}

#top-list .split {
	float: left;
	width: 175px;
	padding: 10px;
	position: relative;
}

#top-cars {
	margin-right: 10px;
	background-color: #5183bc;
}

#top-locations { background-color: #F3E18D; color: #000000; }

#top-cars .tl {
	background-image: url(/images/blue-curves.jpg);
	background-position: top left;
	position: absolute;
	top: 0; left: 0;
	width: 8px;
	height: 8px;
}

#top-cars .tr {
	background-image: url(/images/blue-curves.jpg);
	background-position: top right;
	position: absolute;
	top: 0; right: 0;
	width: 8px;
	height: 8px;
}

#top-cars .bl {
	background-image: url(/images/blue-curves.jpg);
	background-position: bottom left;
	position: absolute;
	bottom: 0; left: 0;
	width: 8px;
	height: 8px;
}

#top-cars .br {
	background-image: url(/images/blue-curves.jpg);
	background-position: bottom right;
	position: absolute;
	bottom: 0; right: 0;
	width: 8px;
	height: 8px;
}

#top-locations .tl {
	background-image: url(/images/yellow-curves.jpg);
	background-position: top left;
	position: absolute;
	top: 0; left: 0;
	width: 8px;
	height: 8px;
}

#top-locations .tr {
	background-image: url(/images/yellow-curves.jpg);
	background-position: top right;
	position: absolute;
	top: 0; right: 0;
	width: 8px;
	height: 8px;
}

#top-locations .bl {
	background-image: url(/images/yellow-curves.jpg);
	background-position: bottom left;
	position: absolute;
	bottom: 0; left: 0;
	width: 8px;
	height: 8px;
}

#top-locations .br {
	background-image: url(/images/yellow-curves.jpg);
	background-position: bottom right;
	position: absolute;
	bottom: 0; right: 0;
	width: 8px;
	height: 8px;
}

#top-locations h2 { 
	background-color: #bba53e;
	text-shadow: 1px 1px 0 #7d6a13;
}

#top-cars h2 { 
	background-color: #2762a4;
	text-shadow: 1px 1px 0 #0b3667;
}

#top-list .split h1 {
	font-weight: bold;
	display: block;
	border-bottom: 1px dotted #FFFFFF;
}

#top-list .split ul {
	list-style: none;
}

#top-list .split ul li {
	display: block;
}

#top-list .split ul li a {
	display: block;
	padding: 3px;
	text-decoration: none;
	font-size: 11pt;
	letter-spacing: -1px
}

#top-cars ul li a { color: #FFFFFF; }
#top-cars ul li a:hover { background-color: #255a95; }

#top-locations ul li a { color: #000000; }
#top-locations ul li a:hover { background-color: #a78f1d; color: #FFFFFF; }


ul#comments li  {
	list-style: none;
	display: block;
	height: 100px;
}

ul#comments li a {
	text-decoration: none;
	color: #000000;
	font-size: 11pt;
}

#offer-cheque { 
	display: block;
	margin: 10px auto;
	background-image: url(/images/cheque.jpg);
	width: 810px;
	height: 344px;
	position: relative;
	color: #000000;
}

#action-btns {
	position: absolute;
	top: 220px; left: 60px;
}

#action-btns a {
	float: left;
	margin-right: 30px;
	text-decoration: none;
}

#offer-price {
	position: absolute;
	top: 77px; right: 140px;
	font-weight: bold;
	font-size: 14pt;
}

#offer-date {
	position: absolute;
	top: 17px; right: 75px;
	font-weight: normal;
	font-size: 14pt;
}

#offer-name {
	position: absolute;
	top: 90px; left: 70px;
	font-weight: normal;
	font-size: 14pt;
}

#offer-text {
	position: absolute;
	top: 123px; left: 30px;
	font-weight: normal;
	font-size: 14pt;
	width: 530px;
	line-height: 30px;
}

.make-offer #content h1 {
	font-size: 13pt;
	font-weight: bold;
	margin: 10px 0;
}