/* base.css */

html, body {background-color: #9a999a; font: 11px Helvetica, Arial, sans-serif;}
#container div {position: relative;}
a {cursor: pointer; text-decoration: none; color: #004990; outline: none;}
strong {font-weight: bold;}
em {font-style: italic;}
sup {vertical-align: super;}
sub {vertical-align: sub;}

h2 {font: bold 16px Helvetica, Arial, sans-serif; color: #b6170f;}
h3 {font: bold 14px Helvetica, Arial, sans-serif; color: #b6170f;}
p {font: 11px Helvetica, Arial, sans-serif; color: #5c5c5c; line-height: 17px;}
.banner{margin: 0 0 25px 0;}
div.category-item a{text-decoration:none;}
div.category-item a:link{text-decoration:none;}
div.category-item a:active{text-decoration:none;}
div.category-item a:visited{text-decoration:none;}
div.category-item a:hover{text-decoration:none;}

.left {left: 5px;}
.right {right: 5px;}
.clear {clear: both;}
.bold {font-weight: bold;}

.float-left {float: left !important;}
.float-right {float: right !important;}

.arrow {display: block; padding: 0 0 0 20px; background: transparent url(/images/arrow.png) no-repeat 0 0;}
.arrow-left {display: block; padding: 0 0 0 20px; background: transparent url(/images/arrow-left.png) no-repeat 0 0;}
.download {display: block; padding: 0 0 0 20px; background: transparent url(/images/download.png) no-repeat 0 0;}

.link-arrow {display: block; height: 18px; width: auto; padding: 0 25px 0 0; background: transparent url(/images/common/link-arrow-blue.jpg) no-repeat 100% 100%;}
.link-arrow:hover {background-position: 100% 100%;}

.ext {}
	.ext img {margin: 0 0 0 5px;}
	
.details-image{height:296px; width:224px;}

.banner {margin: 0 0 20px 0;}
.required{color:#b6170f; padding-left:5px;}

/* left navigation */
#left {overflow:hidden !important; width: 220px; min-height: 1000px; float: left; padding: 15px 0 0 0;}
#left h2.sec-title {font-size: 14px !important; text-transform: uppercase; margin: 0 0 0 15px !important;}
	#left .here {font-weight: bold;}
/*
	#left ul {margin: 0;}
	#left ul li {width: 220px; padding: 9px 0 9px 0; font: 11px Arial, sans-serif; color: #555555; cursor: pointer;}
	#left ul li a {font: 11px Arial, sans-serif; color: #004990; text-decoration: none; width: 220px; outline: none;}
	
	#left .acc1 {display:block; z-index:14;}
	
	#left .top-level {background-color: transparent; border-bottom: solid 1px #fff; width: 203px; padding: 0 0 9px 17px; font: bold 12px Arial, sans-serif; color: #004990; cursor: pointer; display: block;}
		#left .acc3 li ul li, #left .acc2 li ul li {font: 11px Arial, sans-serif; color: #004990; margin: 0 0 0 30px; width: 183px; z-index:1}
		#left .acc3 li ul li ul li, #left .acc2 li ul li ul li {color: #555555 !important; margin: 0 0 0 10px; width: 163px; z-index:1}
	#left .sub {background: transparent url(/images/products/acc-closed.gif) no-repeat 9px 11px; width: 198px; border-bottom: solid 1px #fff; display: block; padding: 9px 0 9px 22px; float: left; cursor: pointer; margin: 0;  z-index:1; outline: none;}
	#left .acc2 a.ui-state-active {background: #bebebe url(/images/products/acc-open.gif) no-repeat 8px 13px; z-index:1}
	
	#left ul li ul li a.here {color: #555555;}
*/

#left ul {margin: 0;}
#left .acc1 {display:block; z-index:14;}

#left .top-level {background-color: transparent; border-bottom: solid 1px #fff; width: 203px; padding: 9px 0 9px 17px; font: bold 12px Arial, sans-serif; color: #004990; cursor: pointer; display: block;}
#left .acc1 li {clear: both;}
#left .acc3 li ul li, #left .acc2 li ul li {font: 11px Arial, sans-serif; color: #004990; margin: 3px 0 3px 30px; width: 183px; z-index:1}
#left .acc3 li ul li ul li, #left .acc2 li ul li ul li {color: #555555 !important; margin: 0 0 0 10px; width: 163px; z-index:1}
#left .sub {background: transparent url(/images/products/acc-closed.gif) no-repeat 9px 11px; width: 198px; border-bottom: solid 1px #fff; display: block; padding: 9px 0 9px 22px; float: left; cursor: pointer; margin: 0;  z-index:1; outline: none;}
#left ul li ul li a.here {color: #555555;}



/* global els */
#container {width: auto; margin: 0 auto; background: #9a999a url(/images/common/backgrounds/concrete.jpg) no-repeat top center; height:auto;}
	#header {width: 960px; height: 76px; padding: 5px; margin: 0 auto; background: transparent url(/images/common/backgrounds/header.jpg) no-repeat top left; position: relative;}
		#header h1 a {display: block; width: 265px; height: 61px; background: transparent url(/images/common/logo.png) no-repeat top left; position: absolute; bottom: 0; left: 10px;}
		#header h1 a span {display: none;}
		#header-nav {position: absolute !important; top: 2px; right: 20px; color: #fff;}
		#header-nav a {color: #fff; text-decoration: none;}
		#header-nav a:hover {color: #b6170f;}
		#service-center-locator {width: 319px; height: 23px; background: transparent url(/images/common/service-center-bg.png) no-repeat top left; position: absolute !important; bottom: 0; right: 12px; padding:24px 0 0 13px;}
			#service-center-locator input#locate-this {border: 0; background-color: transparent; width: 136px; height: 15px; padding:3px 0 0 5px; font: 10px Arial, sans-serif; color: #000;}
			#service-center-locator input#locate-this.default {color: #AAA;}
			#service-center-locator input#service-center-btn {border: 0; background: transparent url(/images/common/service-center-btn.png) no-repeat top left; width: 83px; height: 17px; color: transparent; line-height: 100px; margin-bottom:2px; cursor:pointer; vertical-align: middle;}
			#service-center-locator input#retail-location-btn {border: 0; background: transparent url(/images/common/retail-location-btn.png) no-repeat top left; width: 83px; height: 17px; color: transparent; line-height: 100px; margin-bottom:2px; cursor:pointer; vertical-align: middle;}
	#navigation {width: 970px; height: 32px; margin: 0 auto; list-style: none; position: relative; background: transparent url(/images/common/nav/nav-bg.gif) repeat-x top left;}
		#navigation li.nav {float: left; height: 32px; background: transparent url(/images/common/nav/rollover.gif) repeat 0 0}
		#navigation li .nav-item {height: 25px; padding: 7px 0 0 0; background: transparent url(/images/common/nav/separator.png) no-repeat top right; display: block; text-align: center; text-decoration: none; font: 14px Arial, sans-serif; color: #fff;}
		#navigation li.here {float: left; height: 32px; background: transparent url(/images/common/nav/rollover.gif) repeat -540px 0}
		#navigation li .last {background: transparent !important;}
		#products {width: 95px;}
		#service-centers {width: 125px;}
		#car-care {width: 84px;}
		#racing {width: 72px;}
		#heritage {width: 82px;}
		#trade-partners {width: 120px;}
		#our-business {width: 115px;}
		#search-box {position: absolute; top: 5px; right: 22px; width: 235px; background: transparent !important;}
			#search-box .input-container {width: 200px; height: 19px; background: transparent url(/images/common/search-bg.png) no-repeat top left;}
			#search-box input {width: 197px; height: 16px; border: 0; padding: 3px 0 0 3px; font: 10px Arial, sans-serif; color: #000; position: absolute; top: 0; left: 0; background: transparent;}
			#search-box input[type="submit"] {width: 18px; height: 18px; border: 0; cursor: pointer; background: transparent url(/images/common/search-submit.png) no-repeat top left; position: absolute; top: 0; left: 212px; text-indent: -999px;}
			#search-box input[type="submit"]:hover {background-position: top right;}

	#content {width: 970px; margin: 0 auto; background-color: #f1f0f1; overflow: hidden;}
		#content #left {width: 220px; min-height:600px; background: #f1f0f1 url(/images/common/backgrounds/leftcol-bg.gif) no-repeat bottom left; float: left; position: relative;}
			#content #left h2 {font: bold 16px Helvetica, Arial, sans-serif; color: #b6170f; margin-left: 5px;}
		#content #right {width: 750px; height: auto; background-color: #f1f0f1; float: left; position: relative;}

		.myth {padding: 0px;}
			.myth dl {}
			.myth dl dt {padding: 20px 0 0 0px; font: 11px Helvetica, Arial, sans-serif; line-height: 17px; margin: 0 0 10px 0;}
			.myth dl dt {font-weight: bold; color: #323232; background: transparent url(/images/car-care/myth.jpg) no-repeat -22px 0px; }
			.myth dl dd {color: #5c5c5c; background: transparent url(/images/car-care/reality.jpg) no-repeat 0 0px; padding: 20px 0 0 0; margin: 0 0 10px 0;}
			.myth a {font-weight: bold;}
			.myth h2 {margin: 0 0 10px 0;}

	#content div.pagination {position: absolute; right: 0; bottom: 15px; margin: 0; width: auto !important; height: 17px;}

	#breadcrumb {width: 700px; height: 16px; padding: 13px 3px 13px 27px; margin: 0; background-color: #F1F0F1; font: regular 11px Helvetica, Arial, sans-serif; color: #323232 !important;}
		#breadcrumb a {color: #004990; font-weight: normal;}
	#footer {width: 970px; height: 60px; margin: 0 auto; background-color: #f1f0f1; float:left;   position:relative}
		#footer p a {color: #5c5c5c; text-decoration: none; margin: 0 7px;}
		#footer p a.noleftmargin {margin-left: 0;}
		#footer p a:hover {color: #b6170f;}
		#footer p {position: absolute; bottom: 18px; left: 18px; color: #5c5c5c;}
		#footer #logos {position: absolute; bottom: 8px; right: 38px; background: transparent url(/images/common/footer-logos.gif) no-repeat top left; width: 297px; height: 25px;}					
			#logos span {display: none;}

   #container #preview-warning {position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 50px; padding: 20px 0; background-color: #b8170F; color: #fff; text-align: left;}
      #preview-warning h2 {margin: 0 0 0 20px; font-size: 24px; font-weight: bold; color: #fff !important;}
      #preview-warning span {margin: 0 0 0 20px; font-size: 18px;}
      #preview-warning img {position: absolute; right: 20px; top: 30px; cursor: pointer;}