/* this template was created for and by Phase New Media -- 

this page is broken into six section :

-- universal styles
-- header - including bnav and logo
-- hero img
-- anav
-- main content - for a number of cols
-- footer 

#343434 - background base
#EBEBEB - txt background

*/



/* **************************************************************** */
/* ********************** universal styles ************************ */
/* **************************************************************** */

/* Add scrollbars */
html
{
	height: 101%; /* add scrollbars to borwsers that do not have them - this eliminates page shift between long and short pages */
}

.clear {
	clear: both;
	}


body
{
	background: url(../images/background.jpg) repeat-x #343434;
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 8px 0;
	padding: 0;
}

img { display:block; border: none;  }
		
/* Centre page */
#centrer
{
	width: 820px;
	margin: 0 auto;
}

#introtxt { font:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #CCC; display: block; margin: -3px 12px 0 12px; }

/* **************************************************************** */
/* ************************ header styles ************************* */
/* **************************************************************** */

#header { position: relative; background: url(../images/header_back.jpg) no-repeat; height: 121px; width: 820px; } 
#logo { position: absolute; top: 19px; left: 12px; } /* transparent gif to make it easy - floats over background - if changes needed */
#header ul { list-style: none; display: block; margin: 0; padding: 0 12px; }
.anav_left { display: inline;  float: left; margin-top: 49px; }
.anav_right { display: inline; float: right; margin-top: 49px; }

	
/* bnav */
#bnav ul {	position: absolute; top: 22px; left: 435px; list-style: none; display: inline; float: left;	}
#bnav li { float: left; margin: 0; padding: 0; display: inline; } /* *NOTE* - display:inline; - to remove double margin bug in Explorer 6 */

/* new vehicle drop down */
#newdropdown { position: absolute; top: 20px; left: 695px; }
.newdropdown_field { width: 113px; } /* for cross browser pixel perfect layout */

/* honda logo */
#hondalogo { position: absolute; top: 93px; left: 705px; }


/* **************************************************************** */
/* ************************ Body Content  ************************* */
/* **************************************************************** */

/* home page elements */

#homebodycontent { background: #808080 url(../images/body_back.jpg) repeat-x; }
#homebodycontent ul { list-style: none; display: block; margin: 0 12px; padding: 7px 0 0 0; }
#homebodycontent li { margin: 0; padding: 0; display: inline; }

.hero { display: inline;  float: left; margin: 0; }
.hero_small { display: inline; float: right; padding: 0; }

#banners { clear: both; display: inline; float: left; background: #CCC; margin: 11px 12px; padding: 8px; width:780px; } 
#banners ul { list-style: none; display: inline;  }

.line { clear:both; margin-left: 12px; }


.banner_left {  float: left; margin-right: 4px !important;} 
.banner_right { float: right;  }

/* contents pages elements */

#bodycontent { background: #EBEBEB; margin: 0; padding: 0 0 0 12px }
#bodycontent ul { list-style: none; display: block; margin: 0 12px; padding: 7px 0 0 0; }
#bodycontent li { margin: 0; padding: 0; display: inline; }

#mast { clear:both; position: relative; top: 12px; }



/* ************************ left col ************************* */

#leftcol { width: 172px; display: block; float: left; margin: 25px 0 0; }
#leftcol h1 { font-size:11px; display: block; margin: 14px 7px 0; padding: 0; color: #F20016;  clear: both; }
#leftcol h2 { font-size:11px; color: #333; display: block; margin: 2px 8px 5px;  }
#leftcol h3 { font-size:11px; margin: 0; padding: 0; }
#leftcol h4 { font-size:11px; margin: 0; padding: 0; }
#leftcol p { font-size:11px; margin: 0 8px; padding-bottom: 11px; line-height: 145%; color: #666}

#leftcol ul { font-size:11px; display: block; margin: 0 0 1px; padding: 11px; background: #FFF; list-style: none; }
#leftcol li { display: block; padding-left: 11px; background: url(../images/bullet.gif) no-repeat left 11px; line-height: 220%; border-bottom: 1px #CCC dotted; color: #666; }

#leftcol a { color: #666; text-decoration: none; padding: 3px; }
#leftcol a:hover { color: #585858; background: #EBEBEB; }

.round_texttop { background: url(../images/round_txt_bg_top.jpg) top no-repeat; margin-top: 15px; padding-top: 8px!important; display: block; } 
.round_text { background: url(../images/round_txt_bg_bottom.jpg) bottom no-repeat; margin: 0; padding-bottom: 7px; }
.round_text img { margin-bottom: 8px; }

/* models */

.round_text ul { font-size:11px; display: block; margin: 0 0 1px; padding: 3px; background: #FFF; list-style: none; }
.round_text li { display: block; padding-left: 11px; line-height: 220%; color: #666; }

/* ************************ right col ************************* */

#rightcol {  width: 620px; display: block; float: right; margin: 26px 8px 0; }
#rightcol h1 { font-size: 1.3em; display: block; margin: 0; padding: 0 0 11px; color: #F20016;  }
#rightcol h2 { font-size: 80%; color: #F20016; display: block; margin: 0; margin: 15px 5px 12px; padding: 0;}
#rightcol h3 { font-size: 11px; color: #333; display: block; margin: 11px 5px; padding: 0; }
#rightcol h4 { font-size: 11px; color: #666; display: block; margin: 11px 5px 5px; padding: 0; }
#rightcol p { font-size: 11px; display: block; margin: 5px 11px 11px 5px; padding: 0; line-height: 140%;  }

/* 4 column table for colours */

#table_colors {  font-size: 11px; width: 613px; margin-left: 5px; } /* use a float to affect margin elements in mozilla */
#table_colors p { font-size: 100%; }

#table_colors-col-1 { float: left; width:150px; background: #CCC; padding: 3px;  }
#table_colors-col-2 { float: left; width:140px; background: #E7E7E7; padding: 3px;  }
#table_colors-col-3 { float: left; width:140px; background: #CCC; padding: 3px;  }
#table_colors-col-4 { float: left; width:140px; background: #E7E7E7; padding: 3px;  }
#table_colors-col-5 { float: left; width:140px; background: #CCC; padding: 3px;  }

.img_left { float: left; padding: 5px; background-color: #FFFFFF; border: solid 1px #CCCCCC; margin: 5px 11px 11px 0; }
.img_right { float: right; padding: 1px; background-color: #FFFFFF; border: solid 1px #FFF; margin: 5px 15px 11px 11px; }

.rowimages { display: block; background: #CCCCCC; padding: 5px; }
.rowimages img { border:none; display: inline; padding: 2px; margin: 5px; background: #FFFFFF; }

.top { float: right; margin-right: 12px; }

/*----------------Forms-------------------------------------------*/

input.btn, input.submit, input.button, input.finbutton { padding:6px 8px; border-width:0px; background:#C00109; color:#FFF; font-size:11px; font-weight:bold; }

.form_container {
	clear: both;
	width: 550px;
	float: left;
	margin: 0 0 20px 0;
}

.formcell {
	min-width: 150px;
/*--height: 40px;--*/
	padding: 7px;
	display: block;
	float: left;
	margin: 0 3px 3px 0;
	color: #333;
	text-decoration: none;
	font-size: 11px;
	}

.formcell1{
	width: 150px;
	height: 111px;
	padding: 7px;
	display: block;
	float: left;
	margin: 0 3px 3px 0;
	color: #333;
	text-decoration: none;
	font-size: 11px;
	}
	
.descriptioncell {
	width: 232px;
/*--height: 40px;--*/
	padding: 5px;
	display: block;
	float: left;
	margin: 0 3px 3px 0;
	color: #333;
	text-decoration: none;
	font-size: 11px;
	}
	
.formheading {
	display: block;
	float: left;
	color: #333;
	font-size: 11px;
	}

/* **************************************************************** */
/* *************************** Footer  **************************** */
/* **************************************************************** */
#footer { clear: both; display:block; background: url(../images/footer_back.jpg) no-repeat; height: 90px; margin: 0 0 20px 0; padding: 20px 12px 0 15px!important; } 	 
#footer p { display: block; margin: 0 0 5px 1px; padding: 1px 0 0 0!important;   } 
#footer a { padding: 3px; text-decoration: none; color:#000; }
#footer a:hover { background: #999999; }

.float_left { float: left; display: block; color: #E8E8E8; font-size: 11px; width: 160px; }
.float_right { float: right; color: #E8E8E8; font-size: 11px; margin: 11px 100px 0 0; text-align: center;}





a.blockrollover { display: block; background-color: #CCCCCC; padding: 11px; margin: 0 0 11px; text-decoration: none!important; clear:both; float: right; width: 420px;  }
a.blockrollover img { display: block;  background-color: #FFFFFF; padding: 2px; border: 0; float: left; }  
a.blockrollover .textblock {  display: block; font-size: 11px;  color: #333333; margin: 0 0 0 11px; width: 280px; float: right;  }
a.blockrollover strong { display: block; font-weight: bold; margin: 0 0 5px; } 
a:hover.blockrollover { background:  #666666; }

/* ***************************** SPECIAL OFFERS *************************** */

.new_container {
	clear: both;
	display: inline;
	float: left;
	margin: 0 0 11px 0;
	padding:0;
	
}

.new_container img {
padding: 0 ;
margin:0;
}

a.model_btn {
	width: 400px;
	height: 270px;
	padding: 0 5px 0 5px ;
	display: block;
	float: left;
	/*border: 1px #EDEFEF solid;*/
	margin: 0 6px 0 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #EBEBEB;
	}
	
	
	a.model_btn2 {
	width: 197px;
	height: 270px;
	padding:0;
	display: block;
	float: left;
	/*border: 1px #EDEFEF solid;*/
	margin: 0;
	color: #fff;
	text-decoration: none;
	font-size: 100%;
	background: #EBEBEB;
	background-image:url(../images/specials_background2.jpg);
	background-repeat:no-repeat;
	}
	
	
	.specials_txt{
	font-size: 65%;
	color: #fff;
	}

.specials_hdr { color: #fff;padding: 10px 0 0 11px;height: 90px;background-image:url(../images/specialoffers_bgblack.jpg); background-repeat:no-repeat;display: block; font-weight: bold; margin: 11px 0 0 0 ; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; }
.newcar_desc { display: block; margin: 0 0  2px; line-height: 95%; }
.newcar_click { display: block; text-decoration: underline; padding: 0 0 0 11px; background: url(../images/row_bullet.gif) 0 5px no-repeat; }
.specials_smtxt {
	font-size: 85%;
	color:#666666;
	line-height:11px;
}

#specials_body{
	padding: 0 11px 0 11px;
	line-height:11px;
}
	

/* ***************************** Demonstrators *************************** */


.demo_hdr { color: #fff;padding: 11px 0 0 11px;height: 90px;background-image:url(../images/demo_bgred.jpg); background-repeat:no-repeat;display: block; font-weight: bold; margin: 11px 0 0 0 ; text-transform: uppercase; }


a.demo {


	padding: 0 4px 6px 0px ;
	display: block;
	float: left;
	/*border: 1px #EDEFEF solid;*/
	margin: 0 5px 0 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #EBEBEB;

}

a.demo2 {
	width:335px;
	height:190px;
	padding:0;
	display: block;
	float: left;
	/*border: 1px #EDEFEF solid;*/
	margin: 0;
	color: #fff;
	text-decoration: none;
	font-size: 100%;
	background-image:url(../images/demo_background3.jpg);
	background-repeat:no-repeat;
	}

#heroimage {
	padding: 0;
	margin: 0;
	}	
	/* ***************************** NEW CARS HOME 3 COL *************************** */

.newvehicle_container{
	clear: both;
	display: inline;
	float: left;
	margin: 0 0 20px 0;
	font-size:80%;
}


.newvehicle_container img {
	padding: 0 0 0 5px;
	background-color: #F20016;
}

a.vehiclemodel_btn {
	width: 180px;
	height: 220px;
	padding: 5px;
	display: block;
	float: left!important;
	border: 5px #F4F4F4 solid;
	margin: 0 5px 6px 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #fff;
}

a:hover.vehiclemodel_btn {
	border: 5px #fff solid;
	background: #f4f4f4;
	color: #000;
}

.newvehicle_hdr {  display: block; font-weight: bold; margin: 0; text-transform: uppercase; }
.newvehicle_desc { display: block; margin: 0; line-height: 95%; }
.newvehicle_click { display: block; text-decoration: underline; padding: 0 0 0 11px; background: url(../images/row_bullet.gif) 0 5px no-repeat;}

		/* ***************************** Brochures 3 COL *************************** */

a.brochuremodel_btn {
	width: 180px;
	height: 155px;
	padding: 5px;
	display: block;
	float: left!important;
	border: 5px #F4F4F4 solid;
	margin: 0 5px 6px 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #fff;
	}
	
	a:hover.brochuremodel_btn {
	border: 5px #fff solid;
	background: #f4f4f4;
	color: #000;
}
	
			/* ***************************** Accessories 3 COL *************************** */

a.accessoriesmodel_btn {
	width: 180px;
	height: 130px;
	padding: 5px;
	display: block;
	float: left!important;
	border: 5px #F4F4F4 solid;
	margin: 0 5px 6px 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #fff;
	}
	
	a:hover.accessoriesmodel_btn {
	border: 5px #fff solid;
	background: #f4f4f4;
	color: #000;
}

	/* ***************************** RIGHT COL LISTS *************************** */

#rightcol li{
	font-size: 11px;
	background: url(../images/row_bullet.gif) 0 3px no-repeat;
	padding: 0 0 0 15px;
	display:block;
}

#rightcol ul{
	padding: 0;
	margin:0 15px 0 0;
}

#rightcol-cars { width:620px; display:block; float:right; margin:26px 8px 0 0; }
#rightcol-cars h1 { font-size: 1.3em; display: block; margin: 0; padding: 0 0 11px; color: #F20016;  }
#rightcol-cars h2 { font-size: 80%; color: #F20016; display: block; margin: 0; margin: 15px 5px 12px; padding: 0;}
#rightcol-cars h3 { font-size: 11px; color: #333; display: block; margin: 11px 5px; padding: 0; }
#rightcol-cars h4 { font-size: 11px; color: #666; display: block; margin: 11px 5px 5px; padding: 0; }
#rightcol-cars p { font-size: 11px; display: block; margin: 5px 11px 11px 5px; padding: 0; line-height: 140%;  }

#rightcol-cars li{ font-size:11px; padding:0px; margin:0px;}
#rightcol-cars ul{ padding:0px ; margin:0px; }

.maincontentpreowned {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; font-weight: normal; }
.mylistbutton {font-size:11px; font-weight:bold;}
.mylistRemove a {color:red !important; font-size:9px;}
a.carSmallLinks {font-size:9px; color:#C00 !important; font-weight:bold;}
.maincontent {font-size:11px;}
.carNotes {color:#777; font-size:11px;}
