@charset "utf-8";
/* CSS Document */

/*
based on a layout by Eivind Savio for strictlycss.com

*/
* /*Set's border, padding and margin to 0 for all values*/
{
	padding: 0;
	margin: 0;
	border: 0;
}
body, html {
	color: #333; 
	font-family: Verdana, Arial, Tahoma, sans-serif;
	background-color: #3B3B3B; 
	text-align: center; /*** Centers the design in old IE versions ***/
	background-image:url(../images/bg-body.jpg);
	background-repeat:repeat-x;
	margin-bottom:45px;
}
body {
	font-size: 70%;
}
p {
	padding: 6px 0 6px 0;
}

a {
	color: #000099;
}
a:hover{
	color: #0000FF;
	text-decoration: none;
}

h1, h2, h3 {
	font-weight: bold;
	padding-bottom: 5px;
}
h1 {
	color:#FFF;
	font-size: 1.2em;
	background-image:url(../images/bg-h1.gif);
	background-repeat:no-repeat;
	height:23px;
	padding:3px 0px 0px 50px;
}

* html h1 { /* turn off bg image and change text colour in IE6 - it keeps trying to reload img and won't display it */
	color:#900;
	padding:3px 0 0 0;
	background-image:none;
}


h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.3em;
}
h4 {
	color:#FFF;
	font-size:1.1em;
	font-weight:bold;
}
acronym {
	cursor:help;
	border-bottom:1px dashed #666;
}

input, textarea {
	border:1px solid #333;
}
caption{
	text-align:left;
	font-weight:bold;
	font-size:1.2em;
	color:#000;
}
address {
	font-style:normal;
	float:right;
	width:300px;
}
/*We're going to be setting a width for the blockquote and leave some padding that the quotes will be positioned into.*/
blockquote {
	display: block;
	padding: 20px 60px 120px 60px;
	width: 350px;
	clear:both;
}
/*Next we'll use the CSS :before and :after pseudo-elements to generate the curly quotes.  Since we're setting the quotes to use display: block, 
we'll need to set widths for them as well.  We'll define the common attributes first...*/
blockquote:before, blockquote:after {
	color: #900;
	display: block;
	font-size: 700%;
	width: 50px;
}
/*Next we'll define the specific attributes for the opening and closing quotes.  We'll control the position of the quotes with the margin attributes, and in the 
case of the opening quote -- the height.*/
blockquote:before {
	content: open-quote;
	height: 0;
	margin-left: -0.55em;
}
blockquote:after {
	content: close-quote;
	height: 50px;
	margin-top: -70px;   
	margin-left: 360px;
}

.clear { clear: both; }
#mainContainer {
	width: 760px;
	margin: 0 auto; /*** Centers the design ***/
	min-height: 300px;
	text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
	height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
	margin-top: 46px; /*** Make some space for the header menu - was 50px***/
	background: #000;
	padding: 0px;
	height: 150px;
	border-bottom:4px solid #F00;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
	padding-left: 165px;  
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
	width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
	width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
	float: left;
	width: 760px;
	margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
	background-color:#FFF;
	border-top:1px solid #333;
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
	float: right;
	width: 550px;
	background: #fff;
}
* html #content {
	position: relative; /*** IE needs this  ***/
}
.contentWrap{
	padding: 20px 5px 5px 5px;
}
.contentWrap a:visited{
	color:#A91010;
	text-decoration:none;
}
.contentWrap a:link{
	color:#A91010;
	text-decoration:none;
}
.contentWrap a:active{
	color:#A91010;
	text-decoration:none;
}
.contentWrap a:hover{
	color:#F00;
	text-decoration:none;
}

.contentWrap ol, .contentWrap ul {
	margin: 3px 0 5px 35px;
}
.contentWrap li {
	padding-bottom: 2px;
}
/**************************
menuMain COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#menuMain {
	float:left;
	width:174px;
	background:#000; 
	min-height:1295px;
	padding:5px 5px 5px 26px;
	background-image:url(../images/bg-menu-main.jpg);
	background-repeat:repeat-y;
	color:#CCC;
}
* html #menuMain {
	position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
	height: 250px; 
	background-image:none; /* turn off bg image in IE6 - it keeps trying to reload and won't display it */
}
#menuMain ul {
	list-style: none;
	padding-top: 14px;
	padding-bottom: 4px;
	font-size:1.4em;
}
#menuMain li {
	padding-bottom: 8px;
}
#menuMain a:visited {
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
}
#menuMain a:link {
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
}
#menuMain a:active {
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
}
#menuMain a:hover {
	color: #F00;
	text-transform:uppercase;
	text-decoration:none;
}
/*************************
addressHeader COLUMN
**************************/
#addressHeader {
	margin: -190px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
	float: left; 
	width: 750px;
	background: #000;
	padding: 5px;
	height: 30px;
	text-align:right;
	font-size:2em;
	color:#EBEBEB;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
* html #addressHeader {
	position: relative; /*** IE6 needs this. ***/
	margin-top: -200px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
}
.addressHeaderAddress{
	float:left;
	width:180px;
	color:#666;
	text-align:left;
	font-size:0.4em;
	font-weight:normal;
}
/**************************
FOOTER
**************************/
#footer {
	width: 712px;
	margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
	text-align: center;
	background-image:url(../images/bg-copyright.jpg);
	background-repeat:repeat-x;
	height:19px;
	text-align:right;
	color:#CCC;
	padding:7px 24px 4px 24px;
}
#footer a:visited {
	color:#CCC;
	text-decoration:none;
}
#footer a:link {
	color:#CCC;
	text-decoration:none;
}
#footer a:active {
	color:#CCC;
	text-decoration:none;
}
#footer a:hover {
	color: #CCC;
	text-decoration:underline;
}
.footerCopright {
	float:left;
	text-align:left;
}

.backToTop {
	float:right;
	clear:both;
	margin:36px 0;
}

.indented {
	padding-left:16px;
}

.msgAlert {
	/* alert of action confirmed eg. something updated or added */
		background-color:#B7FFC9;
		border:1px dashed #0C3;
		padding:4px;
		color:#333;
		margin:16px 0px;
		height:40px;
		overflow:auto;
		clear:both;
}

.formItem {
	background-color:#F5F5F5;
	border:1px solid #CCC;
	color:#333;
	text-align:right;
}

.noBorder {
	border:none;
}

.productDisplayCell {
	border:1px solid #999;
	padding:0 4px 4px 4px;
}
.productDisplayItemHeader {
	color:#900;
	font-weight:bold;
	font-size:1.2em;
	padding-bottom:0px;
	margin-top:22px;
}
.productDisplayPricing {
	font-weight:bold;
	padding:4px 4px 4px 4px;
	margin-left:12px;
	background-color:#EEE;
	border-left:4px solid #900;
	border-right:1px dashed #900;
	border-top:1px dashed #900;
	border-bottom:1px dashed #900;
	clear:both;
}
.newsflash {
	padding:4px 4px 4px 10px;
	background-color:#EEE;
	border:1px dashed #900;
	float:right;
	width:250px;
}
.newsflashHeading {
	font-size:1.2em;
	font-weight:bold;
}
.columnFloatRight {
	width:180px;
	float:right;
	background-color:#EEE;
	border-left:1px dashed #666;
}

 img.featureThumb {
	float:right;
	margin:0 8px 16px 8px;
}

.imgFloatRight {
	float:right;
	margin: 0 0 4px 4px;
}

.selectVehicle {
	background-color:#900;
	color:#FFF;
	padding:4px;
	font-size:1.6em;
}