/*
 * General page styling
 * Page has an orange background, no padding or margins.
 * Header has a single repeating background image. The "Car Supermarket" logo is an image.
 * Navigation bar (class="nav") is a 150px wide left-floating div
 * Main content area (class="content") takes up the remainder of the screen
 * Footer area (class="footer") clears all floats
 * All fonts default to Verdana, then sans-serif (typically Arial on Windows systems)
 *
 * Colours
 *     Page background - #FFCC33 (yellow-orange)
 *     Borders - orange
 *     Table cells - #FFDD44 and #FFEE66 (lighter yellow-orange shades)
 *     Text - black
 */

body {
	margin-top: 0;
	margin-bottom: 0;
	font-family: Arial, verdana, sans-serif;
	font-size:11px;
}

* a img {
	border-style:none;
	}
	
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

	
a.white:link {
	color: #FFFFFF;
	text-decoration: none;
}
a.white:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a.white.hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.white:active {
	text-decoration: none;
}
a.black:link {
	color: #000000;
	text-decoration: underline;
}
a.black:visited {
	text-decoration: underline;
	color: #000000;
}
a.black.hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.black:active {
	text-decoration: none;
}
.header {
	height: 130px;
	width: 860px;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;	
}
.special-pic {
	height: 335px;
	width: 350px;
	background: url('../images/lights.gif');
}
.nav {
	border-right: 0px solid orange;
	float: left;
	width: 150px;
}

.nav a {
	display: block;
	height: 0px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.nav .link01 {
	padding-top: 58;
	background-image: url("../images/leftmenurollover_01.gif");
}

.nav .link02 {
	background-image: url("../images/leftmenurollover_02.gif");
}

.nav .link03 {
	padding-top: 42;
	background-image: url("../images/leftmenurollover_03.gif");
}

.nav .link04 {
	padding-top: 41;
	background-image: url("../images/leftmenurollover_04.gif");
}

.nav .link05 {
	padding-top: 39;
	background-image: url("../images/leftmenurollover_05.gif");
}

.nav .link06 {
	background-image: url("../images/leftmenurollover_06.gif");
}

.nav .link07 {
	padding-top: 39;
	background-image: url("../images/leftmenurollover_07.gif");
}

.nav .link08 {
	padding-top: 47;
	background-image: url("../images/leftmenurollover_08.gif");
}

.content {
	display: block;
	margin-right: 0px;
	margin-left: 0px;
}
.contentarea {
	padding-left: 30px;
	padding-bottom: 25px;
	padding-top: 5px;
	padding-right: 15px;
}
/*
 * Main heading
 */

/*
 * Forms
 * Elements in forms are grouped into fieldset elements
 * Uses the legend element to title each fieldset
 * Each fieldset takes up most of the page, with a 5% margin on either side
 * Each row of the form is contained inside a div (class="formfow")
 * Labels take up 1/3 of the form, and float left. Text aligned to the right.
 * Form element containers (classname="formelem") float right, taking up the rest of the space.
 * Each form row is set to clear: both, to make sure they don't get out of sequence.
 * Error messages are displayed above the associated form row.
 */
.error {
	display: block;
	width: 100%;
	float: left;

	background: none;
	color: #000000;
	font-weight:bold;
	text-align: center;
	padding-bottom: 5px;
}

fieldset {
	display: block;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 15px;
	border: 0px solid orange;
	background: #FFDD44;
}

legend {
	border: 0px solid orange;
	padding: 2px 6px 2px 6px;
	background: #FFFFFF;
}

.formrow label {
	clear: both;
	display: block;
	width: 125px;
	float: left;
	margin-bottom: 5px;
	margin-right: 0px;
	padding-right: 10px;
	padding-top:5px;
	text-align: right;
}

em {
	color: red;
}

.formrow .formelem {
	width: 100px;
	float: right;
	margin-left: 0px;
	margin-bottom: 5px;
}

.formbuttons {
	margin-left:135px;
	margin-top:10px;
}
.formbuttons2 {
	margin-left:10px;
	margin-top:5px;
}
.pseudoform {
	display: inline;
}

/*
 * Tables
 * Tables expand to fill the entire container horizontally
 * Must have triggered hasLayout - this suddenly started working right in IE...
 */
table {
	border: 0px solid orange;
	border-collapse: collapse;
}
.footer {
	/*background-image: url(../images/footer.gif);
	background-repeat: no-repeat;*/
	height: 30px;
	width: 860px;
}

td img {
	vertical-align: middle;
	margin: 0px 0px 0px 0px;
}

.oddRow td {
	background: #999999;
	padding-top:5px;
	padding-bottom:5px;
	margin-left: 5px;
}
.oddRow2 td {
	background: #999999;
}

.paymentPending td {
	background: red;
	color: white;
}

/*
 * Search box
 * Simple right-floating form
 */
.searchBox {
	margin: 0px 0px 4px 0px;
	border: 0px solid orange;
	padding: 0px 4px 4px 4px;
	float: left;
	background: #FFDD44;
}

.clearSearchBox {
	clear: right;
}

.searchBox h2 {
	position: relative;
	display: inline-block;
	float: left;
	font-size: medium;
	font-weight: normal;
	margin: -0.7em 0px 4px 0px;
	padding: 2px 6px 2px 6px;
	border: 0px solid orange;
	background: #FFEE66;
}

.searchBox .searchRow {
	margin: 4px 0px 4px 0px;
}

.searchBox .searchRow label {
	display: block;
	text-align: left;
	float: left;
	clear: left;
	width: 80px;
}

.searchBox .searchRow select {
	display: block;
	float: left;
}

/*
 * Car info display (cars/show)
 * Car info is held inside a single div, class="carInfo"
 * Basically a simple box. Title is an h1 element.
 * Car image is floated right, so description wraps around it.
 * Headings span the width of the page, and have an orange underline (lower border)
 * The h1 element has no margin, so it extends from edge to edge. Padding applied to push text in.
 * The h2 elements have no padding, but have a margin.
 * Extra div sits at the bottom to clear the image if required.
 */
.carInfo {
	margin-left: 1%;
	margin-right: 1%;
	border: 2px solid orange;
	background: #FFDD44;
}

.carInfo h1 {
	font-weight: bold;
	border-bottom: 2px solid orange;
	padding: 0px 10px 0px 10px;
}

.carInfo h2 {
	font-weight: normal;
	margin: 0px 10px 0px 10px;
}

img.ts_mainimage {
	background: #FFCC33;
	border: 1px #000000 solid;
	float: right;
}

img.mainimage {
	width: 250px;
	height: 187px;
	border: 2px #000000 solid;
	float: right;
	margin-bottom: 5px;
	margin-top: 15px;
}

.carInfo .thumbBox {
	width: 250px;
	float: right;
	clear: right;
}

img.thumbnail {
	width: 100px;
	height: 75px;
	border: 2px #000000 solid;
	margin: 2px;
	float: right;
}

.carInfo .clear {
	height: 0px;
	clear: right;
}
.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	padding-top: 5px;
	padding-bottom: 5px;
}
.sell {
	background-image: url(../images/4.gif);
	background-repeat: no-repeat;
	background-color:#000000;
	height: 69px;
	width: 180px;
	background-position:center;
}

/*Left Hand Navigation*/

.search-new {
	background-image: url(../images/2.gif);
	background-repeat: no-repeat;
	background-color:#000000;
	height: 69px;
	width: 180px;
	background-position:center;
}
.search-pvt {
	background-image: url(../images/3.gif);
	background-repeat: no-repeat;
	background-color:#000000;
	height: 69px;
	width: 180px;
	background-position:center;
}
.search-parts {
	background-image: url(../images/1.gif);
	background-repeat: no-repeat;
	background-color:#000000;
	height: 69px;
	width: 180px;
	background-position:center;
}
.menu-bg {
	background-color: #000000;
	height: 30px;
	width: 860px;
}

.footertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	padding-right: 15px;
	text-align:right;
	vertical-align:middle;
}
.carslist {
	margin-left: 15px;
}

/*Navigation CSS*/

.menu-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align:center;
}

a.yellow:link {
	color: #008112;
	text-decoration: none;
}
a.yellow:visited {
	text-decoration: none;
	color: #008112;
}
a.yellow:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a.yellow:active {
	text-decoration: none;
}

/* Featured Cars */

.featuredcontainer {
	width: 540px;
}

.featuredcar {
	float: left;
	width: 166px;
	border: 1px solid black;
	margin: 4px;
	background: #CCCCCC;
	text-align: center;
}
.featuretitle {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding-left: 10px;
}
.featuredcar img {
	display: block;
	width: 100px;
	height: 75px;
	margin: 8px auto 4px auto;
}

.featuredcar div {
	text-align: center;
}
/*Modified CSS*/

.maintext {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align: justify;
	padding-left:10px;
	width: 92%;
}
.maintext-cars {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	text-align: justify;
	width:205px;
	margin-left:0px;
}
.headertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-left:15px;
	color:#FFFFFF;
	background-image: url(../images/titlebar.gif);
	line-height: 45px;
	width: 515px;
}
.headertext-cars {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color: #CC0000;
	font-weight:100;
	border-bottom:thin;
	border-bottom-color:#666666;
	border-bottom-style:solid;
	margin-left: 10px;
	margin-top: 0px;
	margin-right: 10px;

}
.headertext-cars-top {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color: #CC0000;
	font-weight:100;
	border-bottom:thin;
	border-bottom-color:#666666;
	border-bottom-style:solid;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
}
.headertext2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color: #CC0000;
	font-weight:100;
	border-bottom:thin;
	border-bottom-color:#666666;
	border-bottom-style:solid;
	margin-left: 10px;
	margin-top: 0px;
	margin-right: 10px;
}
.results-header {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	font-weight:bold;
	text-align:left;
}
.yellow-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.box-height {
	line-height: 25px;
}
.grad-left {
	background-image: url(../images/grad-left.gif);
	background-repeat: repeat-y;
	width: 15px;
	background-position: left;
}
.grad-right {
	background-image: url(../images/grad-right.gif);
	background-repeat: repeat-y;
	width: 15px;
	background-position: right;
}