@charset "utf-8";
/* Brake Masters Website 2011 */


/*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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* body styles*/

body {
	background-color: #f3f2f2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:125%
}
div#container { width: 1024px; margin: 10px auto }
.left { float:left }
.right { float:right }
div#header { font-family: Arial, Helvetica, sans-serif; height:153px }
p { font-family: Arial, Helvetica, sans-serif }
.clear { clear:both }
.bold { font-weight:bold }
img.right { margin: 10px 0px 10px 10px !important }
img.left { margin: 5px 10px 10px 0px }

.alignRight { text-align:right }
.italic { font-style: italic }
ul.basicList { list-style-type: disc; margin: 0 20px }
ul.basicList li { padding: 0 0 10px; line-height: 125% }
ol.numberList { list-style-type: decimal; margin: 0 30px !important }
ol.numberList li { padding: 0 0 10px; line-height: 125% }
.center { text-align:center }
/*header styles*/
div.logoTop { background-image:url(/images/logo-top.jpg); width:177px; height:60px; background-repeat:no-repeat; float:left }
div.headerRight { background-image:url(/images/header-tag.jpg); width:847px; height:60px; background-repeat:no-repeat; float:right }
div.headline { float:left; width: 400px; text-indent:-9999px }
div.storeHours { float:right; width: 250px; padding-right: 35px }
.blueItalicBold { color: #003399; font-weight:bold; text-transform:uppercase }
.hours { font-size: 12px; color: #000 }

/*navigation*/
div.navigation {
	clear:both;
	width:1024px;
	height: 93px;
	background-image: url(/images/main-area-bg.jpg);
}
div.logoBottom { background-image:url(/images/logo-bottom.jpg); width:142px; height:93px; float:left }
div.servicesLink { background-image:url(/images/services-link.jpg); width:101px; height:93px; float:left; text-indent: -9999px; background-position: 0 0}
div.servicesLink:hover { background-position: 0 93px }
div.locationLink { background-image: url(/images/locations-link.jpg); width:117px; height:93px; float:left; text-indent: -9999px; background-position: 0 0 }
div.locationLink:hover { background-position: 0 93px }
div.couponsLink { background-image:url(/images/coupons-link.jpg); width:116px; height:93px; float:left; text-indent: -9999px; background-position: 0 0}
div.couponsLink:hover { background-position: 0 93px }
div.blogLink { background-image:url(/images/blog-link.jpg); width:92px; height:93px; float:left; text-indent: -9999px; background-position: 0 0}
div.blogLink:hover { background-position: 0 93px }
div.videosLink { background-image:url(/images/videos-link.jpg); width:114px; height:93px; float:left; text-indent: -9999px; background-position: 0 0}
div.videosLink:hover { background-position: 0 93px }
div.contactLink { background-image:url(/images/contact-link.jpg); width:111px; height:93px; float:left; text-indent: -9999px; background-position: 0 0}
div.contactLink:hover { background-position: 0 93px }

/* navigation finder */
div.locationFinder { background-image: url(/images/rightbar-top-bg.jpg); width:197px; height:93px; float:right; padding-right: 30px }
div.locationFinder p { padding: 10px 0 10px 5px; font-weight:bold }
.zipField { width: 125px; height:25px; border: 1px solid #ccc; margin-left: 10px }
.findButton { }
.dots { height: 10px; width: 180px; margin: 10px 35px 2px 10px; border-bottom: 1px dotted #ccc; clear:both }

/*main area*/
div#main-body { background-image:url(/images/main-area-bg.jpg); width:1024px; height:318px; clear:both }

/* gallery */

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	border:1px solid white;
	/* The width of the gallery */
	width:767px;
	overflow:hidden;
	margin-left: 29px;
	
	
}

#slides{
	/* This is the slide area */
	height:306px;
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:767px;
	overflow:hidden;
	z-index:100;
	margin-left: 0px;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:32px;
	background-image:url(/images/menu-gallery-bg.png);
	width: 113px;
	position: relative;
	z-index: 1000;
	float:left;
	margin-top: -32px;
	
}

#gallery ul{
	margin:0px;
	padding:0px;
}

#gallery li{
	/* Every thumbnail is a li element */
	width:18px;
/*	display:inline-block; */
        float:left;
	list-style:none;
	height:32px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
}

li.act,li.act:hover{
	/* The active state of the thumb */
	
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:5px !important;
	
}

#gallery li a{
	display:block;
	height:30px;
	padding:10px 2px 0;
	font-weight:bold;
	text-decoration:none
}

#gallery li a:link { color: #999999; text-decoration:none }
#gallery li a:visited { color: #999999; text-decoration:none }
#gallery li a:hover { color: #F00 }
#gallery li a:active { color: #F00 }


/* right sidebar homepage */

div.rightBar { width: 190px; float:right; margin-right: 30px; margin-top: -310px }
div.whyBrakeMasters { background-image:url(/images/why-bm-header.jpg); width: 166px; height:26px; text-indent: -9999px; margin: 0 auto }
ul.whyList { font-size: 14px; margin: 0 auto }
ul.whyList li { background-image:url(/images/green-check.jpg); height: 30px; padding: 0 0 10px 40px; margin: 5px 0; background-repeat:no-repeat }

/*homepage content*/
div.homepageContent { width:1024px; clear:both; margin: 10px auto 20px; padding: 0 30px }
div.hpContentLeft { width: 750px; float:left }
div.hpContentRight { width: 214px; float:right; margin-right: 43px }
div.couponStrip { width: 750px; height: 65px }
div.testimonialStrip {
	width: 750px;
	height:71px
}
div.ourServices h1 { background-image:url(/images/homepage-ourservices.jpg); width:172px; height: 33px; margin: 10px 0; text-indent: -9999px }
ul.services li { display:inline; float: left; width: 250px }
ul.servicesChild li { padding: 5px 0;}

/*blog feed styles*/
div.blogFeed h2 { background-image:url(/images/latest-news.jpg); width:205px; height:27px; text-indent: -9999px; margin: 10px 0; padding: 0 }





/* footer styles */
div#footer { clear: both; width: 964px; margin: 30px 30px 10px; border-top: 1px dotted #ccc; color: #333 }
div#footer a:link { color: #333 }
div#footer a:visited { color: #333 }
div#footer a:hover { color:#F00 }
div#footer a:active { color: #F00 }
div#footer ul.locationMenu { padding-top: 30px; float:left }
div#footer ul.locationMenu li { display:inline; font-size: 8px; font-family: Arial, Helvetica, sans-serif }
div#footer ul.miniMenu { padding-top: 30px; float:right }
div#footer ul.miniMenu li { display:inline; font-size: 8px; font-family: Arial, Helvetica, sans-serif }
div.copyright { clear: both; padding: 20px 0; font-size: 8px; color: #333 }
.inside { border-top: 0 !important; margin: 0 30px 10px !important }


/*inside pages*/
div#main-body-inside { width: 1024px; background-image:url(/images/main-body-inside-bg.jpg); min-height: 750px }
div#main-body-bottom { background-image:url(/images/main-body-inside-bottom.jpg); width: 1024px; height:15px; clear:both }



/*inside right bar*/
div.rightBarInside { width: 195px; float:right; margin-right: 30px; }
div.rightBarInside h3 { font-weight:bold; font-size: 18px; padding: 5px 10px }
div.rightBarInside p { padding: 5px 10px }
div.couponButton { margin: 10px 5px }
div.locationFinderInside p { padding: 10px 0 10px 0; font-weight:bold; font-size: 14px; white-space:nowrap }
div.locationFinderInside .zipField { margin-left: 5px !important }
div.rightBarInside div.testmonial { margin: 10px 0 }
div.rightBarInside div.testmonial p { padding: 10px 5px }
div.rightBarInside div.testmonial p.sign { font-weight:bold; text-align:right }

/*Location map*/
div.mapDisplay { overflow: hidden; width:540px; height:600px }
div.mapSidebar { width: 195px; float:right; margin-right: 30px; font-weight:bold; font-size: 18px; padding: 5px 10px }

/*inside Main*/
div.insideMain { float:left; width: 540px; padding-top: 20px; font-family: Arial, Helvetica, sans-serif }
div.insideMain h1 { font-size: 24px; font-weight:bold; color: #000; line-height: 125%; padding: 0 5px 10px }
div.insideMain h1 { font-size: 24px; font-weight:bold; color: #000; line-height: 125%; padding: 0 5px 10px }
div.insideMain h3 { font-size: 18px; font-weight:bold; color: #000; padding: 10px 5px }
div.insideMain p { font-size: 14px; line-height: 125%; padding: 10px 5px }
div.insideMain ul { padding: 10px 5px }
div.insideMain ul li { font-size: 14px; line-height: 125% }
div.insideMain a:link { color: #0066ff }
div.insideMain a:visited { color: #0066ff }
div.insideMain a:hover { color:#F00 }
div.insideMain a:active { color: #F00 }
div.insideMainTwoColumn { float:right; width: 735px; padding-top: 20px; font-family: Arial, Helvetica, sans-serif; margin-right: 30px; background-color: #fff; min-height: 500px }
div.insideMainTwoColumn h1 { font-size: 24px; font-weight:bold; color: #000; line-height: 125%; padding: 0 5px 10px }
div.insideMainTwoColumn h1 { font-size: 24px; font-weight:bold; color: #000; line-height: 125%; padding: 0 5px 10px }
div.insideMainTwoColumn h3 { font-size: 18px; font-weight:bold; color: #000; padding: 10px 5px }
div.insideMainTwoColumn p { font-size: 14px; line-height: 125%; padding: 10px 5px }
div.insideMainTwoColumn ul { padding: 10px 5px }
div.insideMainTwoColumn ul li { font-size: 14px; line-height: 125% }
div.insideMainTwoColumn a:link { color: #0066ff }
div.insideMainTwoColumn a:visited { color: #0066ff }
div.insideMainTwoColumn a:hover { color:#F00 }
div.insideMainTwoColumn a:active { color: #F00 }

div.locationSearch { width: 300px; height: 70px }
.searchBox { width: 150px; height:32px; border: 1px solid #ccc; float:left; margin-right: 5px }
ul.servicesInside li { display:inline; width: 240px; float:left }
ul.greenChecks li { background-image:url(/images/green-check.jpg); padding: 5px 0 10px 40px; margin: 10px 0; background-repeat:no-repeat; line-height:125% }
.brakeBuddy {
	background-repeat:no-repeat;
	background-position: right
}
/*inside leftbar */
div.insideLeftNav { width: 205px; float:left; margin-left: 30px; padding-top: 20px }
div.insideLeftNav a:link { color: #0066ff }
div.insideLeftNav a:visited { color: #0066ff }
div.insideLeftNav a:hover { color:#F00 }
div.insideLeftNav a:active { color: #F00 }
div.locations { width: 186px; margin: 0 auto; border: 1px solid #ccc; padding: 5px }
div.locations h1 { background-image:url(/images/locations-header.jpg); width: 84px; height:20px; text-indent: -9999px; margin: 10px auto }
div.locations ul li { padding: 5px 0 }
div.fanLeft { padding: 10px 0 }
div.serviceLeft { width: 186px; margin: 0 auto; border: 1px solid #ccc; padding: 5px }
div.serviceLeft h1 { background-image:url(/images/services-header.jpg); width: 84px; height:20px; text-indent: -9999px; margin: 10px auto }
div.serviceLeft ul li { padding: 5px 0 }
div.fleetLeft { width: 186px; margin: 0 auto; border: 1px solid #ccc; padding: 5px }
div.fleetLeft h1 { background-image:url(/images/fleet-header.jpg); width: 173px; height:20px; text-indent: -9999px; margin: 10px auto }
div.fleetLeft ul li { padding: 5px 0 }
.leftAddresses { padding: 5px }
.leftAddresses p { padding: 10px 0 }
.hours { text-align:center; }
.hours h3 { font-size: 18px; padding: 10px 0; font-weight:bold; color: #333399  }
.hours p { font-size: 14px; padding: 5px 0; font-weight:bold }
.couponsRight { padding: 30px 0 30px }
.brakeBRight { padding-bottom: 30px }
/*contact page*/
div.callUs { background-image:url(/images/call-us.jpg); width:264px; height:264px; text-indent:-9999px; float:left }
div.emailUs { background-image:url(/images/email-us.jpg); width:264px; height:264px; text-indent:-9999px; float:right }
div.contactForm { clear:both }
div.contactForm p { padding: 10px 5px; clear:both }
div.contactForm label { width: 250px; float:left; font-weight:bold }
p.requiredField { text-align:right; font-size: 12px; color: #F00 }
span.requiredField { font-size: 12px; color: #F00 }
p.formSubmit { text-align:right; padding-right: 30px !important }
textarea.kudosBox { width: 500px; height:200px }
p.spam { font-size: 12px }

/*tabs*/
.ui-tabs { position: relative; padding: .2em; width: 246px; height: 250px; overflow:hidden } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0 }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; background-color:#0C0 }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; background-color:#0C0; border: none }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

.ui-widget-header { background: #eee; border: 1px solid #eee }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #fff;
text-decoration: none;
}

.ui-widget-content {
border: 1px solid #DDD;
background: #fff;
color: #333;
}
/*home location styles*/
div.locationFinderHome { z-index: 10000; position: absolute; margin: 0px 50px  }
div.locationFinderHome label{ font-family: Arial, Helvetica, sans-serif !important }
select#storeselect { font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 300px }
select#miles { font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 180px }
input#zip { font-size: 12px; font-family: Arial, Helvetica, sans-serif }
ul.dealList { list-style-type: disc; margin: 0 20px }
ul.dealList li { padding: 0 0 10px; line-height: 125%; font-family: Arial, Helvetica, sans-serif; font-size: 10px;}
div.dealList { font-family: Arial, Helvetica, sans-serif; font-size: 10px;}


/* coupons */
h1.couponTitle { background-image:url(/images/big-carat.jpg); background-repeat: no-repeat; background-position: left; padding-left: 35px !important; padding-top: 5px !important }
div.coupons {
	background-color: #FFF;
	padding: 10px;
	margin: 0 auto
}
div.subCoupon { border-bottom: 1px dotted #999; padding: 5px 5px; clear:both; height: 60px }
div.subCoupon a { float:left; text-decoration:none !important }
div.subCoupon a:link p{ color: #333; text-transform:uppercase; font-weight:bold; font-size: 14px; text-decoration:none } 
div.subCoupon a:visited p{ color: #333; text-transform:uppercase; font-weight:bold; font-size: 14px; text-decoration:none } 
div.subCoupon a:hover p{ color: #c00; text-transform:uppercase; font-weight:bold; font-size: 14px; text-decoration:underline } 
div.subCoupon a:active p{ color: #c00; text-transform:uppercase; font-weight:bold; font-size: 14px; text-decoration:underline } 
div.subCoupon p { background-image:url(/images/small-carat.jpg); background-repeat: no-repeat; background-position: left; padding-left: 20px; }
div.couponLike { float: right; padding: 5px 10px }
div.subCouponLike { padding: 10px }

/*Gift Cards*/

div.giftCardText { width: 500px; float:left }
div.giftCardImages { width: 225px; float:right; margin-right: 10px }
.bigGray { font-weight:bold; font-size: 22px; color: #888; width: 400px; text-align:justify }



/* Videos */
h2.videoTitle { font-size: 24px; font-weight: bold; color: #000 }
p.videoDate { font-style: italic; font-size: 12px; }
div.videoBox { padding: 10px; width: 470px; float: left }