@charset "utf-8";

/* ----------------------------------------------------------
	Stylesheet for Dix Honda 
	Date: 6/6/2008
	Author: Blue Banana Designs
	Contact: updates@bluebanana.net
----------------------------------------------------------- */

/* NORMALIZE ELEMENTS
*******************************/
/* Normalize margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, a, blockquote, th, td
{ margin: 0; padding: 0; }

/* Normalize font-size for headers */
h1, h2, h3, h4, h5, h6 
{ font-size: 100%; }

/* Normalize font-style and font-weight */
address, caption, cite, code, dfn, var 
{ font-style: normal; font-weight: normal; }

/* Normalize tables */
table 
{ border-collapse: collapse; border-spacing: 0; }

/* Remove border from fieldset and img */
fieldset, img 
{ border: 0; }

/* Left-align text in caption and th */
caption, th 
{ text-align: left; }

a img, img a 
{ border:none; }


/* COLOR PALETTE
*******************************/
/*
Black		#000000
White		#ffffff
Blue		#0066cb
*/

/* BODY ELEMENT
*************************************/
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:100%;
line-height:120%;
background-image:url(/assets/images/global/bgd-body.gif);
background-position:0px 0px;
background-repeat:repeat-x;
background-color:#fff;	
color:#000;
margin:0 auto;
text-align:center;
}


/*	PAGE LAYOUT
****************************************/
#page-wrapper {
width:790px;
margin:0 auto ;
text-align:left;
position:relative;
background-color:#fff;
color:#000;
}

/* ----- Branding ----- */
#masthead {
position:relative;
width:790px;
height:124px;
margin:0px auto 0px;
background-image: url(/assets/images/global/bgd-body.gif);
background-position: top left;
background-repeat: repeat-x;
/*background-color:transparent;*/
background-color:#0066cb;
color:#fff;
}
#masthead h1  {
position:absolute;
	top:20px;
	left:216px;
}
#masthead h1 a {
	width:320px;
	height:57px;
	display:block;
	background-image: url(/assets/images/masthead/logo.gif);
	background-position: top left;
	background-repeat: no-repeat;
	background-color:#0066cb;
	color:#fff;
	text-indent:-9999px;
}
#masthead p#info {
margin:0;
padding:0;
	position:absolute;
	top:77px;
	left:216px;
	height:43px;
	width:320px;
	background-image: url(/assets/images/masthead/info.gif);
	background-position: top center;
	background-repeat: no-repeat;
	background-color:#0066cb;
	color:#fff;
	text-indent:-9999px;
}
#masthead img#storefront-pic {
	position:absolute;
	top:20px;
	left:0px;
}

#content-wrapper {
width:790px;
	text-align:left;
}
#main-column {
	width:790px;
	margin-bottom:20px;
}
#content {
padding:50px 30px 30px 30px;
}
#page-title {
padding-bottom:1em;
}
#navs-main {
position:absolute;
top:124px;
left:91px;
z-index:10;
}
#footer {
clear:both;
padding: 30px;

}


/* NAVIGATION
****************************************/
/* ----- Main ----- */
#navs-main {
	margin:0 auto;
	padding:0;
	text-align:center;
}
#navs-main ul {
margin:0 auto;
	padding:0;
	text-align:center;
}
#navs-main ul li {
margin:0 1px 0 0;
	padding:0;
float:left;
	list-style:none;
	display: inline;
}
#navs-main ul li a {

	height: 28px;
	background-position:top left;
	background-repeat:no-repeat;
	background-color:transparent;
	padding:0;
	margin:0;
	display:block;
	text-indent: -99999px;
	overflow:hidden;
}

/* Normal State */
/* Image is on the <li> to prevent an initial blink on the first hover when the page first loads. Therefore, there is no need to make a redundant call to the server, by placing the normal state image on the <a> tag, as well. */
#navs-main ul li#nav-home {
	background-image: url(/assets/images/navs/home.gif);
	width:83px;
}
#navs-main ul li#nav-specials {
	background-image: url(/assets/images/navs/specials.gif);
	width:83px;
}
#navs-main ul li#nav-used-cars {
	background-image: url(/assets/images/navs/usedCars.gif);
	width:83px;
}
#navs-main ul li#nav-new-cars {
	background-image: url(/assets/images/navs/newCars.gif);
	width:83px;
}
#navs-main ul li#nav-service {
	background-image: url(/assets/images/navs/service.gif);
	width:83px;
}
#navs-main ul li#nav-parts {
	background-image: url(/assets/images/navs/parts.gif);
	width:83px;
}
#navs-main ul li#nav-online-quote {
	background-image: url(/assets/images/navs/onlineQuote.gif);
	width:103px;
}


#navs-main ul li a:hover {
	/* Override style on primary anchor tag */ 
	border-bottom:none;
}

/* Over State */
#navs-main ul li#nav-home a:hover {
	background-image: url(/assets/images/navs/home_ovr.gif);
}
#navs-main ul li#nav-specials a:hover {
	background-image: url(/assets/images/navs/specials_ovr.gif);
}
#navs-main ul li#nav-used-cars a:hover {
	background-image: url(/assets/images/navs/usedCars_ovr.gif);
}
#navs-main ul li#nav-new-cars a:hover {
	background-image: url(/assets/images/navs/newCars_ovr.gif);
}
#navs-main ul li#nav-service a:hover {
	background-image: url(/assets/images/navs/service_ovr.gif);
}
#navs-main ul li#nav-parts a:hover {
	background-image: url(/assets/images/navs/parts_ovr.gif);
}
#navs-main ul li#nav-online-quote a:hover {
	background-image: url(/assets/images/navs/onlineQuote_ovr.gif);
}

/* Selected State */
body#home #navs-main ul li#nav-home a,
body#home #navs-main ul li#nav-home a:hover {
	background-image: url(/assets/images/navs/home_up.gif);
}
body#specials #navs-main ul li#nav-specials a,
body#specials #navs-main ul li#nav-specials a:hover {
	background-image: url(/assets/images/navs/specials_up.gif);
}
body#usedCars #navs-main ul li#nav-used-cars a,
body#usedCars #navs-main ul li#nav-used-cars a:hover {
	background-image: url(/assets/images/navs/usedCars_up.gif);
}
body#newCars #navs-main ul li#nav-new-cars a,
body#newCars #navs-main ul li#nav-new-cars a:hover {
	background-image: url(/assets/images/navs/newCars_up.gif);
}
body#service #navs-main ul li#nav-service a,
body#service #navs-main ul li#nav-service a:hover {
	background-image: url(/assets/images/navs/service_up.gif);
}
body#parts #navs-main ul li#nav-parts a,
body#parts #navs-main ul li#nav-parts a:hover {
	background-image: url(/assets/images/navs/parts_up.gif);
}
body#onlineQuote #navs-main ul li#nav-online-quote a,
body#onlineQuote #navs-main ul li#nav-online-quote a:hover {
	background-image: url(/assets/images/navs/onlineQuote_up.gif);
}


/* ----- Ancillary ----- */
div#navs-ancillary {
	position:absolute;
	top:0px;
	right:0px;
	margin:0;
	padding:0;
	text-align:right;
	height:16px;
	z-index:40;
	background-color: #0052a2;
	color:#fff;
}
div#navs-ancillary ul {
	margin:0;
	padding:0;
	text-align:right;
}
div#navs-ancillary ul li {
	margin:0 0 0 10px;
	padding:0 0 0 0px;
	height:16px;
	float:left;
	list-style:none;
	display: block;
	background-position:top left;
	background-repeat:no-repeat;
	background-color: #0052a2;
	overflow:hidden;
}
div#navs-ancillary ul li a {
	margin:0 0 0 0px;
	padding:0 0 0 0px;
	height:16px;
	background-position:top left;
	background-repeat:no-repeat;
	background-color: transparent;
	color: #fff;
	display:block;
	text-indent: 99999px;
	overflow:hidden;
}

/* Normal State */
/* Image is on the <li> to prevent an initial blink on the first hover when the page first loads. Therefore, there is no need to make a redundant call to the server, by placing the normal state image on the <a> tag, as well. */


div#navs-ancillary ul li#nav-location {
	background-image: url(/assets/images/navs/ancillary/location.gif);
	width:47px;
}

div#navs-ancillary ul li#nav-site-news {
	background-image: url(/assets/images/navs/ancillary/siteNews.gif);
	width:53px;
}
div#navs-ancillary ul li#nav-staff {
	background-image: url(/assets/images/navs/ancillary/staff.gif);
	width:27px;
}
div#navs-ancillary ul li#nav-contact-us {
	background-image: url(/assets/images/navs/ancillary/contactUs.gif);
	width:61px;
}

div#navs-ancillary ul li a:hover {
/* overide "a" rule */
border-bottom:none;
}
div#navs-ancillary ul li#nav-location a:hover {
	background-image: url(/assets/images/navs/ancillary/location_ovr.gif);
	width:47px;
}
div#navs-ancillary ul li#nav-site-news a:hover {
	background-image: url(/assets/images/navs/ancillary/siteNews_ovr.gif);
	width:53px;
}
div#navs-ancillary ul li#nav-staff a:hover {
	background-image: url(/assets/images/navs/ancillary/staff_ovr.gif);
	width:27px;
}
div#navs-ancillary ul li#nav-contact-us a:hover {
	background-image: url(/assets/images/navs/ancillary/contactUs_ovr.gif);
	width:61px;
}

/*
div#navs-ancillary ul li a:active {
border:none;
overflow: hidden;
}
*/


/* TYPOGRAPHY 
*******************************/
/* 
Some font sizes are based on the typical browser default size of 16px.
Formula: target pixel size divided by browser default size = em size 
Example: 13px / 16px = .8125em

Others are determined by visual comparison.
*/

h1 { /* Reserved for branding (See Masthead for declarations) */ }

h2 {
font-family: Georgia, "Times New Roman", "Times NR", serif;
font-size:1.875em; /* 30/16=1.875em */
font-weight:normal;
line-height:1em;
margin-bottom:.2em;
color:#000;
background:#fff;
}

h3 {
font-family: "trebuchet ms", arial,helvetica,sans-serif;
font-size:1.75em;/* 28/16=1.75 */
font-weight:normal;
line-height:1em;	
margin-bottom:.5em;
color:#0066cb;
	background:#fff;	
}
h4 {
font-family: "trebuchet ms", arial,helvetica,sans-serif;
font-size: 1.5em;/* 24/16=1.5em */
font-weight:normal;
line-height:1em;
margin:1.5em 0 .7em;
color:#000;
background:#fff;
}
h5 {
font-family:"trebuchet ms", arial,helvetica,sans-serif;
font-size: 1.3em;
font-weight:normal;
line-height:1em;
margin: 1.5em 0 .875em;
color:#000;
background:#fff;
}
h6 {
font-family:"trebuchet ms", arial,helvetica,sans-serif;
font-size: 1.1em;
font-weight:normal;
line-height:1em;
margin: 1.5em 0 .875em;
color:#000;
background:#fff;
}
p, ul, ol, dl, blockquote, pre, table, code {
	font-size:.875em;	/* 14/16=.875 */
}
p {
	margin:1em 0; 	
}
p.first-paragraph:first-letter {
	float: left;
	font-size: 5em;
	line-height: normal;
	color: #0066cb;
	background-color: #fff;
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	padding: 0;
	margin: .05em .1em 0 0;
}
div.pull-quote {
	width:225px;
	color:#0066cb;
	background:#fff;
}
div.pull-quote p {
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	font-size:1.5em;
	line-height: 1.6em;
	color:#0066cb;
	background:#fff;
}
div.pull-quote p.quotee {
text-align: right;
	font-size:1.2em;
	line-height: 120%;
}
blockquote {
	margin: 1em 1em 2em 1em;
}
blockquote p
{
	font-size:1em; /* Prevents compounding reduction due to inheritance */
}
blockquote p.author {
	text-align:right;
}
ul {
	margin:1em 0 1em 2em;
}
ol {
	margin:1em 0 1em 2.5em;
}
li {
	margin:.5em 0;
}
dl {
	margin:1em 0 1em 1em;
}
dt {
	font-weight:bold;
	margin: 1em 0 .5em 0;
}
dd {
	margin:0em 0 .5em 1em;
}
dd.link-to-top-dd  {
	text-align: right;
}
dl.horizontal-list dt,
dl.horizontal-list dd {
	margin:0;
	padding:0;
}
dl.horizontal-list dt {
	float:left;
}
dl.horizontal-list dd {
	text-indent:.5em;
	padding-bottom:.5em;
}
ul.horizontal-list li {
	margin:0 0 0 1em;
	padding:0;
	float:left;
}
ul ul,
ul ul ul,
ul dl,
ul p,
ul ol,
ol ol,
ol ol ol,
ol dl,
ol p,
ol ul,
dl dl,
dl dl dl,
dl ol,
dl ul,
dl p,
dl dl ol,
dl dl ul,
dl ol p,
dl ul p
{
	font-size:1em; /* Prevents compounding reduction due to inheritance */
}
a {
	color:#0066cb;
	background:#fff;
}
a:link {
	color:#0066cb;
	background:#fff;
}
a:visited {
	color:#551a8b;
	background:#fff;
}
a:hover {
	color:#0066cb;
	background:#fff;
	text-decoration: none;
	border-bottom:1px dotted #0066cb;
}
a:active {
	color:#000;
	background:#fff;
}

/* used to move back to the top of the page */
a.link-to-top {
text-align:right;
font-weight:bold;
	font-size:1.5em;
	color:#fff;
	background-color:#da7432;
	text-decoration:none;
	padding:.3em .5em .3em;
	margin:0;
	line-height:1.5em;
	border:1px solid #ccc;
}
a.link-to-top:link {
	color:#fff;
	background-color:#da7432;
	
}
a.link-to-top:visited {
	color:#fff;
	background-color:#da7432;
}
a.link-to-top:hover {
	color:#fff;
	background-color:#58a230;
}
a.link-to-top:active {
	color:#fff;
	background-color:#da7432;
}

/* Link with symbols used in content area */
.link-w-glyph {
	padding-left:20px;
	background-image: url(/assets/images/global/link-qlyph.gif);
	background-position:center left;
	background-repeat:no-repeat;
}


pre, code {
	font-family: monospace;
	font-size: inherit;
	line-height: normal;
}
p code, span code  {
font-family: monospace;
	font-size:1.3em;
	line-height: normal;
}
small {
	font-size: .7em;
}
sup {
	vertical-align:text-top;
	font-size:.7em;
	padding-left:.2em;
}
.error,
.attention,
.required {
	color:#f00;
	background:#fff;
	font-weight:bold;
}

hr {
	height:1px;
	border-top:none;
	border-right:none;
	border-bottom:1px solid #319c59;
	border-left:none;
}

/* FORMS
*********************************************************/
form {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	background:#fff;
	color:#000;
}

fieldset {
	border:1px solid #ccc;
	margin:20px 0;
	padding:0 2em 2em;
	background:#fff;
	color:#000;
}
legend {
font-size:.875em;
	padding:.2em 1em;
	font-weight:bold;
	background:#0066cb;
	color:#fff;
}
fieldset fieldset legend {
	background:white;
	color: #666;
}
textarea {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:1em;
}
form h4 {
padding-top:0;
margin-top:0;
	background-color:#fff;
	color:#0066cb;
}
form label {
	font-weight:bold;
}
form table td {
padding:5px;
vertical-align:top;
}
form table td.col_1 {
text-align:right;
}
form tr.new-group td {
	border-top:1px solid #ccc;
	padding-top:10px;
}

form ul {
	margin:0 0 8px 0px;
	padding:0;
}
form ul li {
	list-style: none;
}

/* TABLES
*****************************************/
table {
	margin:1em 0;
}
th {
	padding:5px;
	vertical-align:bottom;
	border-bottom:1px solid #000;
}
td {
	padding:5px;
	vertical-align:top;
	border-bottom:1px solid #ddd;
}

/* ----- Use Inventory ----- */
table.used-inventory-list  {
margin:0 auto;
width:75%;
}
table.used-inventory-list th.stocknumber,
table.used-inventory-list td.stocknumber  {
text-align: right;
}
table.used-inventory-list td.year{

}
table.used-inventory-list td.make {

}
table.used-inventory-list td.model {

}
table.used-inventory-list th.price,
table.used-inventory-list td.price {
	text-align: right;
}

/* ----- Used Vehicle Detail Display ----- */
table#used-vehicle-details {
	width:380px;
}
table#used-vehicle-details td.label {
	text-align:right;
	font-weight:bold;
	padding-right:1em;
}

/* ----- Staff ----- */
table.staff-table {
	width: 500px;
}
table.staff-table th {
	text-align:left;
}
table.staff-table td.name {
	width:40%;
}
table.staff-table td.title {
	width:40%;
}
table.staff-table td.extension {
	width:20%;
	text-align:right;
}

/* PHOTOGRAPHS
**********************************/
.photo {
	border:1px solid #000;
}
div.captioned-photo img {
	border:1px solid #000;
}
div.captioned-photo .caption {
	font-size:.8em;
	line-height:normal;
	margin:0;
	padding:0;
}
.float-right {
	float:right;
	margin:5px 0 15px 15px;
}
.float-left {
	float:left;
	margin:5px 15px 15px 0;
}


/* FOOTER
**************************************/
#footer {
border-top:1px solid #ccc;
font-size: .8em;
}

#footer ul {
padding:10px 0 10px;
margin:10px auto 10px;
}
#footer ul li {
	list-style:none;
}
#footer ul li a {
height:auto;
	color:#007b90;
	background:#fff;
	margin:0px;
	padding:0px;
}


/* MISC. STYLES
**************************************/
.float-right {
	float:right;
	margin:5px 0 20px 20px;
}
.float-left {
	float:left;
	margin:5px 20px 20px 0;
}