/* @group Eric Meyer Reset -------------------------------------------- */

/* Derived from Eric Meyer Reset v1.0 | 20080212 - http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html { background-image: url(http://www.brokencarmirror.com/images/interface/bgBody.png); }
body {
	color: #221E1F;
	font-size: 62.5%;
	line-height: 1em;
	font-family: arial, helvetica, sans-serif;
	background: transparent url(http://www.brokencarmirror.com/images/interface/bgStripe.png) repeat-x 50% 313px;
	}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

:focus { outline: 0; }

table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */
caption, th, td { text-align: left; font-weight: normal; }

/* @end --------------------------------------------------------------- */


/* @group General Text Resets ----------------------------------------- */

a {
	color: #3360aa;
}

a:visited {
	color: #3360aa;
}

p, ul, ol, dl, table, cite {
	margin: 0 0 1em;
	font-size: 150%;
	line-height: 1.3em;
	}

li *, dt *, dd * { font-size: 100%; }

ol, ul {
	list-style: disc;
	padding-left: 1.5em;
	margin: 0 0 1em;
	}

li {
	margin: 0 0 0.5em;
	}

li ul, li ol {
	list-style: circle;
	padding-top: 0.3em
	}

ol, li ol {
	list-style: decimal;
	padding-left: 2.5em;
	}

p + ul, p + ol { margin-top: -1em; }

/* @end General Text Resets ------------------------------------------- */


/* @group Headings ---------------------------------------------------- */

h1 {
	position: absolute;
	top: 28px;
	left: 274px;
	}
h1 a {
	display: block;
	float: left;
	width: 116px;
	height: 46px;
	margin: 0 20px 0 0;
	text-indent: -9999px;
	}

h2, h3, h4, h5, h6 {
	margin: 0 0 1em;
	font-size: 120%;
	line-height: 1.2em;
	font-weight: bold;
	}

h2 {
	font-size: 170%;
	color: #221e1f;
	}

h3 {
	font-size: 150%;
	color: #083f73;
	}
h3 a {
	color: #083f73;
	text-decoration: none;
	}
h3 a:hover {
	text-decoration: underline;
	}

/* extra top margin for headings that come after generic text elements */
p + h2, ul + h2, ol + h2, dl + h2, table + h2, blockquote + h2, h1 + h2,
p + h3, ul + h3, ol + h3, dl + h3, table + h3, blockquote + h3, h2 + h3,
p + h4, ul + h4, ol + h4, dl + h4, table + h4, blockquote + h4, h3 + h4,
p + h5, ul + h5, ol + h5, dl + h5, table + h5, blockquote + h5, h4 + h5,
p + h6, ul + h6, ol + h6, dl + h6, table + h6, blockquote + h6, h5 + h6 {
	margin-top: 1.8em;
	}

/* @end Headings ------------------------------------------------------- */


/* @group Layout ------------------------------------------------------ */

#page {
	width: 922px;
	margin: 20px auto 0;
	background: url(http://www.brokencarmirror.com/images/interface/bgPageAlt.png) repeat-y 100% 0;
	overflow: hidden;
	}

#header {
	height: 87px;
	background: url(http://www.brokencarmirror.com/images/interface/bgHeader.png) no-repeat 0 0;
	position: relative;
	}

#main {
	width: 100%;
	float: left;
	background: url(http://www.brokencarmirror.com/images/interface/bgMain.png) no-repeat 100% 0;
	}

.content {
	float: right;
	width: 642px;
	min-height: 535px;
	background: url(http://www.brokencarmirror.com/images/interface/bgMainRight.png) no-repeat 100% 226px;
	}

/* @end --------------------------------------------------------------- */


/* @group Page Template Styles ---------------------------------------- */

.layoutCols2 .content,
.layoutCols2Header .content {
	width: 415px;
	float: left;
	padding: 44px 0 0 32px;
	background: transparent;
	}

.layoutCols2 .primary,
.layoutCols2Header .primary {
	padding-left: 20px;
	}

.layoutCols2 .sidebar,
.layoutCols2Header .sidebar {
	background: url(http://www.brokencarmirror.com/images/interface/bgMainRight.png) no-repeat 100% 226px;
	}

.layoutCols2Header .banner {
	margin: 0 0 2em;
	}
	
	.layoutCols2Header .banner p {
		font-size: 95%;
		margin: 10px 20px 20px 20px;
		}

.layoutHome .banner {
	width: 621px;
	padding: 2px 0 0;
	position: relative;
	z-index: 5;
	margin-bottom: -2em; /* positioning, z-index, and neg. bottom margin allow .banner to tuck under .primary */
	}

.layoutHome .primary {
	width: 426px;
	margin: 0 auto;
	color: #000;
	position: relative;
	z-index: 10; /* positioning and z-index allow .primary to layer over .banner */
	}

.layoutHome h2 {
	font-size: 200%;
	color: #F79D31;
	text-transform: uppercase;
	}


.layoutCols1Header .content {
	float: right;
	width: 642px;
	padding: 30px 0 0;
	}

.layoutCols1Header .banner {
	margin: 0 0 3.5em 30px;
	width: 541px;
	}

.layoutCols1Header .primary {
	width: 500px;
	padding: 0 0 0 72px;
	}

.layoutCols1Header .map_primary {
	width: 557px;
	padding: 0 0 0 20px;
	}


/* @end Page Template Styles ------------------------------------------ */


/* @group Two Column Lists ------------------------------------------ */
/* for "Vehicle List" */

div.cols2 {
	clear: both;
	width: 100%;
	overflow: hidden;
	}

div.cols2 ul {
	float: left;
	width: 49%;
	padding: 0;
	list-style: none;
	}

div.cols2 ul li {
	margin: 0;
	}

div.cols2 ul a {
	display: block;
	padding: 3px 0 3px 20px;
	font-weight: bold;
	color: #221E1F;
	text-decoration: none;
	}

div.cols2 ul a:hover {
	background: url(http://www.brokencarmirror.com/images/interface/bullet.gif) no-repeat 0 0.2em;
	text-decoration: underline;
	}

/* @end Two Column Lists ---------------------------------------------- */


/* @group Sidebar and Nav Sub ----------------------------------------- */

#sidebar {
	float: right;
	width: 140px;
	min-height: 300px;
	padding: 96px 50px 0 0;
	background: url(http://www.brokencarmirror.com/images/interface/bgMainRight.png) no-repeat 100% 226px;
	}

#nav-sub {
	list-style: none;
	padding-left: 22px;
	margin: 0 0 6.5em;
	font-size: 170%;
	line-height: 1.2em;
	}

#nav-sub li {
	margin: 0 0 2em;
	}

#nav-sub a {
	color: #f79d31;
	font-weight: bold;
	text-decoration: none;
	}

#nav-sub a:hover {
	text-decoration: underline;
	}

#nav-sub a.current {
	text-decoration: underline;
	}
				
/* @end Sidebar and Nav Sub ------------------------------------------- */


/* @group Nav Main ---------------------------------------------------- */

#nav-main {
	float: left;
	width: 275px;
	height: 525px;
	background: url(http://www.brokencarmirror.com/images/interface/bgNavMain.png) no-repeat 0 0;
	}

#nav-main ul {
	width: 244px;
	height: 460px;
	padding: 33px 0 0 3px;
	margin: 0 0 20px 31px;
	list-style: none;
	background: url(http://www.brokencarmirror.com/images/interface/bgNavMainUL.jpg) no-repeat 0 0;
	}

#nav-main li {
	width: 199px;
	margin: 0 0 30px 10px;
	}
#nav-main li.save,
#nav-main li.shops {
	margin-bottom: 31px;
	}

#nav-main li a {
	display: block;
	width: 199px;
	text-indent: -9999px;
	height: 46px
	}
#nav-main li.mirrors a {
	background: url(http://www.brokencarmirror.com/images/interface/navMirrors.jpg);
	}
#nav-main li.save a {
	background: url(http://www.brokencarmirror.com/images/interface/navSave.jpg);
	}
#nav-main li.guarantee a {
	height: 78px;
	background: url(http://www.brokencarmirror.com/images/interface/navGuarantee.jpg);
	}
#nav-main li.safety a {
	background: url(http://www.brokencarmirror.com/images/interface/navSafety.jpg);
	}
#nav-main li.shops a {
	height: 88px;
	background: url(http://www.brokencarmirror.com/images/interface/navShops.jpg);
	}
#nav-main li a:hover,
#nav-main li a.current {
	background-position: 0 100%;
	}

#nav-main p {
	margin: 0 0 0 96px;
	text-transform: uppercase;
	font-size: 140%;
	color: #F8AD31;
	}
		
/* @end Nav Main ------------------------------------------------------ */


/* @group Footer ------------------------------------------------------ */

#footer {
	width: 620px;
	min-height: 57px;
	clear: both;
	margin: 0 auto;
	padding: 90px 0 0 302px;
	background: url(http://www.brokencarmirror.com/images/interface/bgFooter.png) no-repeat 100% 0;
	}

#nav-foot {
	list-style: none;
	padding: 0;
	font-size: 120%;
	}

#nav-foot li {
	display: inline;
	padding: 0 8px;
	}

#nav-foot a {
	color: #fff;
	text-decoration: none;
	}
#nav-foot a:hover,
#nav-foot a.current {
	text-decoration: underline;
	}

/* @end Footer -------------------------------------------------------- */


/* @group IE Hacks ---------------------------------------------------- */

/* IE 6/7 was not respecting background positioning properly */
* html body { background-position: 50% 333px; } /* ie6 */
html>body  { *background-position: 50% 333px; } /* ie7 */

* html .content { height: 535px; } /* ie6 min-height hack */

* html div.cols2 ul a { display: inline-block; } /* ie6 - keeps display:block links from being too tall */

* html #sidebar { height: 300px; } /* ie6 min-height hack */

/* @end IE Hacks ------------------------------------------------------ */


/* Boyink's Additions---------------------------- */

h2 a {
	text-decoration: none;
	color: #221e1f;
}

h2 a:visited {
	text-decoration: none;
	color: #221e1f;
}

h2 a:hover {
	text-decoration: underline;
}

ul.list {
	margin: 0px 0px 0px 25px;
}

#cost_comparison {
	line-height: 160%;
	font-size: 130%;
	font-weight: bold;
}

#cost_comparison em {
	font-weight: normal;
	} 

#cost_comparison .left {
	float: left;
	width: 49%;
	font-size: 90%;
	}

#cost_comparison .right {
	float:right;
	width: 49%;
	font-size: 90%;
	}

#cost_comparison .description {
	margin: 0px 0px 20px 0px;
	}

#cost_comparison .savings {
	font-size: 130%;
	}