html { height: 100%; margin-bottom: 1px; }

html { overflow-y: scroll; overflow:auto;}	
	/* -- Forces the scrollbar to always appear, overcomes page 'jumping' -- */
	
html {
   overflow: auto;}	
		
html>body, html>body #container {
	height: auto;
/*
 * Without this, Moz1.0 adds a vertical scrollbar*/}

html { overflow: -moz-scrollbars-vertical; }


body { min-height:100%; font-family: Arial, Helvetica, sans-serif; padding:0; margin:0; 
		background: #fff url(images/button.gif); }
		
#wrapper { min-height: 100% !important; margin:0 auto -3.2em; 
		/* the bottom margin is the negative value of the footer's height */
	width: 776px; background:#ffffff; text-align: center; /* for IE */ } 

#main-header { background: #fff url(images/header.jpg); background-repeat: no-repeat; }	
#header { text-align: center; background: #fff url(images/grad66.jpg); background-repeat: repeat-x;}		
#headerlogo { margin:0 auto; padding:0;}

#bevel-bottom { position:relative; width:776px; margin:0; padding:0; background:#fff url(../images/bevel-bottom.gif); background-repeat:repeat-x; clear:both; border: green 0px solid;}

/* --- Breadcrumbs --- */
#crumbs	{ font-family: Arial, Helvetica, sans-serif; position:relative; float:left; width:500px; height:15px; font-size:70%; margin:-6px 0 0 15px; text-align:left; background:none; border:green 0px solid;}

#date  { font-size: 70%; color: #333; width: 250px; text-align:center; background: #fff; display:inline; border: green 0px solid;}

/* --- Breadcrumbs and Print this page --- */
#crumbwrap { position: relative; width:775px; height:15px; margin:-6px 0 0 0; background: #fff; border:0px solid fuchsia;}
#crumbleft	{ float: left; text-align:left; width: 280px; font-size:70%; margin: 0 0 0 15px;
voice-family: "\"}\""; voice-family: inherit; border: red 0px solid; } 
html>body #crumbleft { margin-top:0; }

#crumbright	{ float: right; width: 230px; text-align: right; margin: 0 10px 0 0; border: green 0px solid; }
#crumb p { font-size: 70%; margin:0; padding:0; }
#crumb a { border-bottom:0; }


/* ---- Print & E-mail Tools ----- */
#tools { position:relative; top:0; height: inherit; float:right; display: block;
	font-size: 70%;
	margin: 0; padding: 0; border: red 0px solid;}
#tools a { text-decoration: none; }
#tools img { vertical-align: top; } /* Makes sure that the text and icon will always be displayed on the same line and 
if possible, will float both textsize and printpage on the same line. */

#tools #textsize, #tools #printpage { float: right; font-size: 70%; white-space: nowrap; }

.googleAddsV  {
	position: relative;
	margin:0 auto;
	padding: 10px 20px 20px 0;
	float: left;
	width: 120px;
	background:#fff;
	visibility: visible;
	border: red 0px solid;}
	
#weather { position: relative; float:left;
	margin:0 auto; width:130px; border:none;
	padding: 0 0 0 0;	border: red 0px solid;}
/* ------------ */

#content { /* this is the div you want to fill the window */ 
	position:relative; 
	min-height:100%; 
	height:100%; 
	width:776px; 
	margin:0; 
	padding-top:5px; 
	background: #fff; 
	overflow:hidden; 
	border: red 0px solid;}

img { border: none; margin:0; padding:0; }	

table { border-color: #999; text-align: left; }
/* --- Main page ---- */
#picswrap { position: relative; text-align:center; margin:0 auto; padding: 0 0 20px 0; width: 241px; border: red 0px solid; }

#main_cl { float: left; display: inline; width: 23%; height:100%; margin: 0; padding: 0;  /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family: inherit; background:#fff; border: green 0px solid; } 

#main_c2 { float: left; display:inline; width: 55%; margin:0; padding:0px 0 0 0; background:#fff; border: green 0px solid; } 
   	
.mainText {font-size: 75%; color:#333; line-height: 1.3em; padding:0; margin:0; text-align: justify; border:red solid 0px; }

#main_c3 { float: right; display:inline; width:20%; margin:0; padding:30px 0 0px 0; border: red 0px solid; background:#fff;}			
.mainText2 { position: relative; width: 300px; font-size: 75%; color: #333; line-height: 1.3em; padding:0; margin:0 auto; text-align: left; border: red solid 0px; }	

#caption { position: relative; font-size:75%; text-align: center; font-weight: bold; color: #333; top: 20px; }			
#mainlink { position: relative; font-size: 100%; color: #333; margin: 0; padding:10px 0 0 0; text-align: center; }
					
#olLogo { position: relative; width:200px; margin:0 auto; padding:7px 0 5px 0; text-align: center; border:#999 solid 0px; }
	
#raels { position: relative; text-align:center; margin:0 auto; padding:0; width: 322px; border:#999 solid 0px;}
	
.counter  { position: relative; float: left; padding: 10px 0 0 25px;
font-size: 120%; background: #fff; }

/* --- main page box's --- */
.the_box {
   font-weight: 300;
   font-size: 70%;
   color: #333;
   background-color: #fff;
   width: 150px;
   margin: 20px 0 0 20px;
   border: solid 1px #ccc;}

.box_header {
   padding-top: .5em;
   font-weight: bold;
   color: #333;
   background-color: #ccc;
   text-align: center;
   height: 20px;}

.box_text {
   text-align: left;
   font-size: 100%;
   padding:5px 5px 5px 5px;}

/* ------------------------------------------------------------------------------------------ */
/* -- .list --- used in the following pages!! -- Why Wedgetail, Disclaimer, Preload, Kits-available 
and Latest news pages -- */	
#wrap { clear: both; margin:0 auto; text-align: center; padding-top: 40px; width: 570px; border: 0px solid red;}

.list {   
	list-style-position: outside; 
	list-style-type: disc; 
	margin-left: 20px;
	padding-left: 0;
	text-align: justify;
	font-size: 75%;
	color: #333; 
	line-height: 1.7em; 
	border: 0px solid red;}	
	
.block { font-size: 75%; line-height: 1.5em; color: #333; text-align:justify; letter-spacing: 0.02em; background: none; margin: 0; padding: 0; border: 0px solid fuchsia; }		
/* --- Sitemap ---- */
.sitemap {   
	list-style-position: outside; 
	list-style-type: disc; 
	margin-left: 20px;
	padding-left: 0;
	text-align: justify;
	font-size: 75%;
	color: #333; 
	line-height: 2.3em; 
	border: 0px solid red; }	
	
/* --- Troubleshooting Page --- */
#troubcontain { /* this is the div you want to fill the window */ min-height: 100%; 
margin-bottom: 20px; width: 776px; background: #fff; }	

#c-left { float: left; width: 43%; padding-left: 20px; }
.loadtext { font-size: 75%; width: 300px; color: #333; line-height: 1.5em; text-align:left;
background: none; margin: 0; padding-left: 20px; }		
#c-right { float: right; left: 300px; width: 51%; margin:0; }		
.style7 { text-align: left; font-size: 75%; color:#333; line-height: 1.5em; border: 0px solid #000; }	
.imgpreload { left: 20px; width: 305px; z-index:2; display: inline; }	
	
/* --- Products and Accessories ---- */	
.prodText { font-size: 75%; position: relative; width: 414px; left: 0; line-height: 1.5em; color: #333; letter-spacing: 0.02em; background: none; margin: 0; padding: 0 0 10px 5px; }	
	
.prodText2 {
	font-size: 75%;
	position:relative;
	width:575px;
	color: #333;
	text-align:left;
	line-height: 1.5em;
	background: none;
	padding: 0 0 0 10px;
	border: 0px solid #ccc; }		
	
.imgkit { position: relative; width: 120px; border: 1px solid #000; }	
.imgfender { position: relative; width: 73px; border: 1px solid #000; }
.imgproduct { position: relative; width: 120px; border: 1px solid #000; }
	
.style2  {
	font-size: 75%;
	font-weight: bold;
	position:relative;
	top:0;
	width:560px;
	left:5px;
	line-height: 2em;
	color: #333;
	text-align:left;
	background: none;
	padding: 10px 5px 0 5px;
	border-top: 1px solid #ccc; }			
/* --- Latest news ---- */	
.newsText { position: relative; width: 580px; left: 30px; line-height: 1.5em; font-size: 70%; 
color: #333; text-align: justify; letter-spacing: 0.02em; margin-top: 0; }	
ul#news { font-size: 90%; color: #333; list-style-type: disc; list-style-position: outside; white-space: normal; line-height: 2.0em; background: inherit; }	
	
/* --- Events ---- */
#eventscolumn {position:relative; float:left; margin:0; padding-left: 100px; width:450px; height:100%; border:#990066 1px;}

x#side-aa { float: left; width: 25%; margin: 0 20px 0 40px; min-height: 100%; }
x#side-bb {
	float: right;
	width: 52%;
	margin: 10px 30px 20px 10px;
	min-height: 100%;
	voice-family: "\"}\""; voice-family: inherit;
	border-left: #c0c0c0 1px dashed ; }	
	
.evenText {
	font-size: 75%;
	line-height: 1.5em;
	color: #333;
	text-align: justify;
	letter-spacing: 0.02em;
	background: #fff;
	margin-left: 10px;
	padding: 0; }	
		
		
/* --- Contact Page 
----------------------------------------------- */		
x.contact { 
	list-style-position: outside; 
	list-style-type: none; 
	margin-left: 20px;
	padding-left: 0;
	text-align: justify;
	font-size: 75%;
	color: #333; 
	line-height: 2.3em; 
	border: 0px solid red; }		
	
xul.contact { margin: 0; }
xli.contact { list-style-type: none; padding-bottom: 3px; }	
		
		
/* --- Mail form 
----------------------------------------------- */
xfieldset {
	width: 400px;
	margin:0 auto;
	padding: 10px;
	border: 1px solid #999;
}
xlegend {
	color: #000000;
	font-size:75%;
	background: #fff;
	padding: 5px;
}

x.tab { clear:both;
	font-size: 70%;
	letter-spacing: .04em;
	font-weight: normal;
	width: 120px;
	padding-left: 20px;
	background: #fff;
	border: 0px solid fuchsia; }
	
x.tab2 {
	font-size: 70%;
	letter-spacing: .04em;
	font-weight: normal;
	width: 120px;
	background: #C2DDCB;
	border: 0px solid fuchsia; }	
	
x.InputBox  {
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid #666; }		

x.button {
	border: 1px solid #003366; 
	background-color:#ccc;
	font-size: 75%; }		
	
x.style1 {color: #ff0000;}	

x.mailblock { font-size: 75%; width:400px; padding: 0 0 0 190px; line-height:1.5em; color: #333;
text-align:left;letter-spacing: 0.02em; border: #c0c0c0 0px solid;}
x.mailblock2 { font-size: 75%; width: 400px; padding-top: 20px; line-height: 1.5em; color: #333;
text-align:left;letter-spacing: 0.02em;}			

x#formwrap  { position: relative; margin: 40px auto 0;	text-align: center; width: 390px; border: #c0c0c0 1px dashed;}

x#c3 { float: left; width: 38%; height: 100%; margin-top: -8px; padding-left: 45px; border: 0px solid #ccc; }
x#c4 { float: left; width: 51%; padding: 0 0 10px 20px; border: 0px solid #ccc; }

x#c33{ float: left; width: 709px; height: 100%; margin-top: -8px; padding-left: 65px; border: 0px solid #ccc; }
x#c44 { float: left; width: 0%; padding: 0 0 10px 0; border: 0px solid #ccc; }
	
x#contactLogo { position: relative; margin:0 auto 0; padding:30px 20px 20px 0; text-align: center; }		
/* --------------------------------------------------------------------------------------- */	



 h1, h2, h3, h4, h5, h6 {  font-family: Arial, Helvetica, sans-serif; }	
 h1 { text-align: left; margin-top: 20px; padding-left: 100px; font-size: 75%; color: #000; background: none; } 
 h2 { text-align: left; padding-left: 120px; font-size: 75%; color: #000; background: none; margin: 15px 0 5px 0; } 
 h3 { text-align: left; font-size: 75%; color: #000; background: none; margin: 6px 0 3px 0; }
 h4 { font-weight: bold; font-size: 75%; color: #333; }
 h5 { text-align: left; margin-top: 20px; padding-left: 50px; font-size: 75%; color: #000; background: none; } 
 h6 { text-align: left; font-size: 75%; color: #333; background: #fff; border: 1px solid #ccc; }
 
 
 
 
 
/* --- Global Nav ---- */	
xa:link, a:visited, a:hover {color: #ff0000;font-weight: normal;text-decoration: underline; }
xa:hover {text-decoration: underline;color: #ff0000; background: inherit; }
/* overrides decoration from previous rule for hovered links */
a:link { color: #000; text-decoration: underline; background: inherit; } 
a:active { color: #000; text-decoration : underline; background: inherit; } 
a:visited { color: #999; text-decoration : underline; background: inherit; } 
a:hover { color: #ff0000; text-decoration: none; background: inherit; } 
.linethrough  { text-decoration: line-through; color: #999; background-color: inherit; }

/* --- To top of PAGE ---- */
#toTop  { float: right; width: 100px; display: inline; font-size: 70%; padding: 5px 10px 0 0; }


/* --- Global- Bottom Nav ---- */
	
#navwrap { clear: both; position: relative; bottom: 0; height: 3.2em !important;
/* needed to make room for footer*/ padding:0; width: 776px; background:#fff; border:0px solid red;  } 
#siteNav { position: relative; bottom:0; font-size: 75%; width: 726px; text-align: center; background: #fff; border-bottom:solid #ccc 1px; padding-bottom: 6px; margin:0 auto;}
#side-aaa { position: relative; margin: 6px auto; font-size: 70%; color: #666;
background: #fff; border:0px solid red; }

#side-a { position: relative; float:left; margin: 6px 0 0 15px; font-size: 70%; color: #666;
background: #fff; border:0px solid red; }
#side-b {position: relative; float: right; margin:6px 15px 0; font-size: 70%; color: #666; background: #fff; voice-family: "\"}\""; voice-family: inherit; border:0px solid red;}

/* --- Main Navigation -------------------------------------------------------------------------- */
#menu li { z-index: 2;}
#menu {
	margin-top:1px;
	padding-left: 0;
	padding-bottom: 0;
	background: #000;
	background-image: none;
	width: 776px;
	float: left;
	font: 85%/150% Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	font-weight: bold;}

      /* top level menu container */
#menu ul {
list-style: none;    /* no list bullets                        */
margin: 0px;         /* don't try to indent lists              */
padding: 0px;        /* don't try to indent lists              */
background: #fff;}

      /* top level menu items */
#menu li {
position: relative;  /* makes this a containing block          */
float: left;         /* align menu horizontally                */
width: 4.9em;          /* make each item the same width          */}

      /* second level menu container */
#menu ul ul {
border: 1px solid black;
display: none;       /* don't show this menu by default        */
position: absolute;  /* use absolute positioning for submenu   */
left: 0;
top: 100%;           /* display directly under menu bar        */ }

      /* second level menu items */
#menu li li {
float: none;            /* makes this list a vertical one      */
width: 10.6em;             /* our second level menus are wider    */
vertical-align: bottom; /* fix ie gap-between li problem       */
border-left: 1px solid #666; /* add border to left side of second level menu items */
border-bottom: 1px solid #666; } /* add border to bottom of second level menu items */

      /* position third level menu container */
#menu ul ul ul { top: 0px; left: 100%; margin-top: -1px; }

      /* make the anchor fill the li */
#menu li a { display: block; padding: 3px; zoom: 1; /* ie defect fix */ }

      /* highlight effect on hover */
#menu li a:hover { background: #cc0000;}

      /* 
       * The magic which shows the menus. The > selector selects only an
       * immediate child. So this selector says 'The ul directly below the li
       * being hovered over'.
       */
#menu li:hover > ul { display: block; }

      /* clear the floated elements */
#menu ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#menu ul { zoom: 1; }
	  
/* backgrounds */
#menu a { background: #333; }
#menu a:hover { background: #333; }
#menu ul ul a { background: #F5F3F3; color: #000;}
#menu ul ul a:hover { background: #333; color: #fff; }
#menu ul ul a:hover { background: #999; }

/* menu styles */
#menu li { border-right: 1px solid #999; }
#menu li { width: 96px;  }
#menu li#m25 { width: 95px; }
#menu li { text-align: center; }
#menu ul ul { border: none; border-top: 1px solid #666; }
#menu ul ul li { border-right: 1px solid #666; } /* add border, right side of second level menu */
#menu a { color: white; text-decoration: none; font-weight: normal; }	


/* ---- Print style --- */
.page-break { page-break-before: always; } /* put this class into your main.css file with "display:none;" */