/*********************************
*
*	BALCLUTHA HONDA 
*	URL: http://www.balcluthahonda.co.nz
*
*	Fixed Width Stylesheet  
*	Author:		mark@cwc.co.nz
*	Created: 	19/02/2007
*	Modified: 	22/5/2009
*
**********************************

-----------------------
-  TABLE OF CONTENTS  -
-----------------------
	->universal styles & resets
	->library styles
	->layout styles
	->form styles
	->helper styles	
	->@media

	
************************************/

/*----------------------------------------
 * UNIVERSAL STYLES AND RESETS
----------------------------------------*/

html,body {
	margin: 0; 
	padding: 0; 
	border: 0;
}

body {
	color: #333;
	background: #B8B7B7 url(../images/bg-fixed.gif) 773px 100% no-repeat fixed;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 76%;
	line-height: 1.5;
	margin: 0;
}


/*Resets*/
h1,h2,h3,h4,h5 {
	font-family: "Trebuchet MS","Gill Sans",Arial,Verdana,Helvetica,sans-serif;
	margin: 0; 
	padding: 0;	
}
h1,h2,h3 {
	font-weight: normal;
}
h1 {
	color: #666;
}
h2 {
	margin-bottom: 1em;
}
h3 {
	color: #666;
	letter-spacing: -1px;
	margin-top: 1.5em;
	padding-bottom: 3px;
	border-bottom: solid 1px #f6f6f6;
}
h4 {
	color: #000;
	font-size: 1.1em;
	margin: 1em 0 .3em 0;
	padding-bottom: .3em;
	border-bottom: dotted 2px #ccc;
}

em {
	font-style: italic;
}
form,ul,li {
	padding: 0; 
	margin: 0;
}
p {
	margin: 0; 
	padding: 0;
}
ol {
	margin-left: 15px;
	padding-left: 15px; 
}
div,p,table,td,a,ul,ol,form,input,textarea {
	font-size: 1em;
}
form,input,textarea,select {
	font-family: arial,helvetica,verdana,sans-serif;
}
input, textarea {
	background: #f7f7f7;
	margin: 0;
	padding: 2px;
	border: solid 1px #999;
}


/*links*/
a:link 		{color: #ff0000;}
a:visited 	{color: #ff0000;}
a:hover 	{color: #666;}
a:active 	{color: #666;}


/*Remove image borders on links*/
a img,
:link img,
:visited img {border: none;}



/*for all float elements requiring clearing*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {display: inline-block;}


/*----------------------------------------
 * LIBRARY STYLES (GENERIC SITE WIDE)
----------------------------------------*/
p.note {
	font-size: .8em;
	font-style: italic;
}
p.large {
	font-size: 1.4em;
	margin-top: 7px;
	border-top: dotted 2px #999;
}
p.tight {
	margin-bottom: 0;
	padding-bottom: 5px;
}
p.quote {
	font-size: 1.3em;
	font-style: italic;
	font-family: georgia, times, serif;
}
.bold {
	font-weight: bold;
}
.emphasis {
	font-style: italic;
}
img.photo-right {
	float: right;
	padding-left: 10px;
}
img.photo-left {
	float: left;
	padding-right: 10px;
}
img.photo-red { 
	margin: 1em auto; 
	border: 1px solid #f00;	
}

/*Drop shadows on images*/
.img-shadow {
	float: right;
	display: inline;
	/*kill dbl margin on IE*/
	background: url(../images/shadowalpha.png) no-repeat bottom right !important;
	background: url(assets/images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px;
}
.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	margin: -6px 6px 6px -6px;
	padding: 4px;
	border: solid 1px #A9A9A9;
}

/*Icon links. IE8 & other standard compliant browsers understand this*/
a[href $='.pdf'] { 
   background: transparent url(../images/icons/pdf.gif) no-repeat center right;
   padding-right: 18px;
}
a[href ^="mailto:"] {
   background: transparent url(../images/icons/mailto.gif) no-repeat center right;
   padding-right: 20px;
}
a[class ="popup"] {
   background: transparent url(../images/icons/popup.gif) no-repeat center right;
   padding-right: 18px;
}


#header img,
#banner img,
img.photo-red {
	display: block;
}

ul.last {
	border-bottom-width: 0 !important;
}
ul li.last a {	
	border-right-width: 0 !important;	
}

#content a.backtotop {
	display: block;
	float: right;
	clear: right;
	overflow: hidden;
	height: 1%;
	background: #999;
	color: #fff;
	font-size: 1em;
	font-style: italic;
	text-align: center;
	text-decoration: none;
	margin: 0 auto 30px auto;
	padding: 0 5px;
}
#atv #content h3,
#road #content h3,
#kids #content h3,
#motocross #content h3,
#trail #content h3,
#scooter #content h3
{
	clear: right;
}


/*jump links used on all bike range pages*/
#content ul#jump-menu { 
	padding: 5px 0 10px 0;
	margin: 0; 
	text-align: center; 
	overflow: hidden;
}
ul#jump-menu li { 
	display: inline;
	list-style: none; 
	padding: 0;
}
ul#jump-menu li a {
	display: inline-block;  
	font-weight: bold; 
	font-size: .9em; 
	text-decoration: none;
	padding: 2px 5px; 
	line-height: 1.3; 
	border-right: solid 1px #ccc; 
}

div.row-wrap {
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	overflow: hidden;
}
div.row-break {
	padding-bottom: 25px;
}
span.compulsory {
	font-size: 10px;
	font-weight: bold;
	text-align: left;
}
span.description {
	float: left;
	width: 45%;
}
span.description span {
	color: #900;
	font-size: 1.2em; 
}
span.input {
	float: right;
	width: 53%;
}
span.title {
	float: left;
	width: 27%;	
	font-weight: bold;
	margin-right: 5px;
}
span.title span {
	color: #990000;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1; 
}
span.details {
	float: left;
	width: 69%;
}


/*Products image centering and spacing*/
img.product-range {
	display: block; 
	margin:10px auto;	
}
/*techncial specifications list*/
ul.technical {
	padding-bottom: 25px;
	border-bottom: solid 1px #ccc; 
}


/*-----------------------------------
 * lAYOUT
-----------------------------------*/
#container {
	width: 760px;
	min-width: 750px;
	background: #fff url(../images/bg-leftnav.gif) repeat-y;
	margin: 0;
	border-right: solid 15px #DBDADA;
}

#wrapper {
	float: left;
	width: 100%;
}

#header {
	margin: 0 auto;
	text-align: center;
}
#header h1 {
	color: #000;
	font-size: 3.4em;
	font-weight: normal;
	line-height: 1;
	letter-spacing: -1px;
	margin: 0;
	padding: 8px 0 5px 0;
}

/*---
this is an absolutely positioned box which is ok since the header is a a fixed height..ap is required to sit it on top of the imagery
---*/
#pagetitle {
	position: absolute;
	z-index: 10;
	top: 75px;
	left: 0;
	width: 253px;
	height: 43px;
	background: url(../images/bg-pagetitle.gif) no-repeat;
}
#pagetitle p {
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	text-align: right;
	margin: 0;
	padding: 15px 10px 0 0;
}

/*page specific decorative images*/
#banner {
	position: relative;
	background: #000;
}
#banner p#tagline {
	position: absolute;
	z-index: 1000;
	bottom: 30px;
	left: 20px;
	right: 0;
	width: 290px;
	color: #999;
	font: bold 1.2em arial,sans-serif;
	text-align: center;
	text-transform: uppercase;
}
body#accessories #banner p#tagline {
	left: 0;	
	width: 275px;
}

/*this is now a container for left 
positioned honda logo with grey bg*/
#honda-tag {
	background: url(../images/bg-honda-decorative.gif) no-repeat;
	height: 41px;
}
/*hide small honda logo below header*/
body#stihl #honda-tag {
	height: 0;
	border-bottom: 10px solid #B8B7B7;
}


/*--- Main Content ---*/	
#content {
	font-size: 1.1em;
	text-align: left;
	margin: 0 170px 0 170px;
	padding: 0 1.3em 2em 1.3em;
}
#content h2 {
	color: #f00;
	font-size: 1.9em;
	font-family: "trebuchet ms",arial,verdana,helvetica,sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
	margin: .5em 0 .8em 0;
	padding: 0 0 0 0;
	border-bottom: dotted 2px #f00;
	border-top: dotted 2px #f00;
}
#content h3 {
	background: url(../images/bg-h3.gif) top left no-repeat;
	font-size: 1.4em;
	letter-spacing: 0;
	padding: 2px;
}

#content p {
	margin: 1em 0 0 0; 
	padding: 0;
}
#content ul {
	margin-left: 15px;
	padding-left: 15px;
}

/*the nav*/
#leftnav {
	float: left;
	width: 170px;
	margin-left:-760px;
	padding-bottom: 5px;
}
#leftnav ul,
#leftnav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#leftnav ul {
	margin: 10px 7px;/*use marigns here instead of on the link to kill stupid ie bugs*/
	padding-bottom: 10px;
}
#leftnav li {
	background: #666 url(../images/leftnav-crnr.gif) no-repeat top right;
	margin-bottom: 7px;
}
#leftnav li a {
	display: block;
	background: url(../images/bullet-red.gif) no-repeat 5px 10px;
	color: #fff;
	text-decoration: none;
	margin: 0;
	padding: 3px 3px 3px 15px;
}
#leftnav li a:hover {
	background: #ccc url(../images/bullet-red.gif) no-repeat 5px 10px;
	color: #000;
}
/*Related sites links*/
#leftnav #related-sites h3 {
	color: #000;
	font-size: 1.4em;
	margin: 0 5px;
	border-bottom: dotted 2px #666;
}
#leftnav #related-sites ul {
	margin-bottom: 0;
	padding-bottom: 0;
}

/*subnav for bike range*/
#leftnav ul ul {
	margin: 0;
	padding: 0;
}
#leftnav li li {
	margin-left: 15px;	
}
#leftnav li li a {
	display: block;
	background: #666;
	color: #fff;
	text-decoration: none;
	margin: 0;
	padding: 1px;
}
#leftnav li li a:hover {
	background: #000;
	color: #fff;
}
#leftnav li li a span {
	color: #f00;
}
#leftnav li#n-bikes {
	padding-bottom: 3px;
}


/*the active page*/
body#home li#n-home a,
body#about li#n-about a,
body#power li#n-power a,
body#stihl li#n-stihl a,
body#accessories li#n-accessories a,
body#service li#n-service a,
body#contact li#n-contact a {
	background-color: #ccc;
	color: #900;
	font-weight: bold;
}

/*the active page*/
body#atv li#sn-atv a,
body#kids li#sn-kids a,
body#motocross li#sn-moto a,
body#trail li#sn-trail a,
body#road li#sn-road a,
body#scooter li#sn-scooter a
{
	color: #000;
	font-weight: bold;
}



/*right column*/
#rightcol {
	float: left; 
	width: 170px; 
	background: #B8B7B7;
	margin-left: -170px;
}
#rightcol img {
	display: block;
	margin: 10px auto;
	border: solid 1px #B8B7B7;
}
#rightcol a:hover img {
	border-color: #F00;
}
#rightcol img.btm-margin {
	margin-bottom: 15px;
}


/*right column headline*/
div.headline {
	background: #000;
	color: #fff;
	font-weight: bold;
	text-align: center;
	margin: 8px;
	padding: 5px;
}
div.headline h4 {
	font-size: 1.1em;
	margin-top: 5px;
	padding-top: 0;
	color: #ccc;
}
div.headline ul {
	font-size: .9em;
	list-style-type: square;
	margin-left: 0;
	padding-left: 0;
}
div.headline li {
	padding-left: 0;
}
div.headline a {
	font-size: 1.1em;
}

/*Footer*/
#footer {
	clear: left;
	position: relative;
	width: 100%;
	background: #666 url(../images/honda-gray.gif) top right no-repeat;
	color: #fff; 
	text-align: center;
	padding-top: 30px;
	padding-bottom: 15px;
	border-bottom: 7px solid #f00;
}
#footer p { 
	padding: 5px 5px 15px 5px;
}
#footer ul { 
	margin: 0; 
	padding: 0 0 15px 0;  
	overflow: hidden;
}
#footer ul li { 
	display: inline; 
	line-height: 2;
	margin: 0; 
	padding: 0; 
	list-style: none; 
}
#footer ul li a { 
	display: inline-block;
	color: #d9d9d9; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; 
	font-weight: bold; 
	font-size: .9em; 
	text-decoration: underline; 
	line-height: 1;
	padding: 2px 5px; 
	border-right: solid 1px #ccc; 
}
#footer ul li a:hover { 
	background: #000;
	color: #fff; 
	text-decoration: none; 
}
#footer ul li.last a {
	border-right-width: 0; 	
}

#footer ul#validate {
	position: absolute;
	bottom: 10px;
	left: 15px;
}	
#footer ul#validate a {
	background: #000;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	border-right: none; 
}
#footer ul#validate a:hover {
	background: #999;
}
/*---------------------- 
  FORM  FIELDS  
------------------ ---*/
input.btn-gray {
	background: #ccc;
	padding: 2px 4px;
	border-right-color: #B3B3B3;
	border-top-color: #F6F6F6; 
	border-left-color: #B3B3B3; 
	border-bottom-color: #888; 
	cursor: pointer;
}
input.btn-dark {
	background: #d9d9d9;
	color: #000;
	font-weight: bold;
	font-size: .9em;
	padding: 3px 5px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	cursor: pointer;
}


/*My preferred simple form layout: 
used on contact page*/
form.verticalform {
	width: 35em;
	text-align: left;
	margin: 0;
}
form.verticalform fieldset {
	display: block;
	width: 30em;
	text-align: left;
	margin: 0 0 2em 0;
	padding: 0;
	border: none;
}
form.verticalform legend { 
	color: #FFF;
	font-weight: bold;
	font-style: italic;
	margin-bottom: 1.3em;
	padding: 5px 10px; 
	border: solid 1px #ccc;
}
form.verticalform fieldset input,
form.verticalform fieldset textarea {
	display: block;
	width: 25em;
	background: #F7F7F7;
	font-weight: normal;
	border: solid 1px #999;
}
form.verticalform input.error,
form.verticalform textarea.error {
	background: #ccc;
}
form.verticalform label {
	display: block;
	font-weight: bold;
	margin-bottom: 1em;
}
form.verticalform label.first {
	padding-top: 1em;
}
form.verticalform select {
	display: block;
}
/*radio buttons*/
form.verticalform fieldset.radio {
	width: 15em;
	margin: 1em 0 2em 0;
}
form.verticalform fieldset.radio input {
	clear: both;
	float: left;
	width: auto;
}
form.verticalform fieldset.radio label {
	font-weight: normal;
}


/*bot fields hidden from humans*/
#form-protection, #site-search {
	display: none !important;
}
form#feedbackform fieldset {
	margin-left: 25px;
	margin-top: 25px;
}

/*Submit/reset buttons*/ 
form#feedbackform input.btngray { 
	display: inline !important;
	width: auto !important;
	height: 23px; 
	background: #CCC;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 15px; 
	margin-top: 4px;
	border-top: solid 1px #EEE;
	border-left: solid 1px #EEE;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	cursor: pointer;
}

/*input bg for bad form submissions*/
form input.error,
form textarea.error {
	background: #eee !important;
}
form label.error,
body#contact form label.error {
	display: none;
	color: #c00;
	font: italic normal .9em arial,helvetica,sans-serif;
}
/*hide from bots*/
div#form-protection,
input.hidden {
	display: none !important;
}



/*----------------------------------------
 * INDIVIDUAL PAGE HELPER STYLES
----------------------------------------*/

/*--- Accessories page ---*/
img.accessorise {
	float: right;
	margin-left: 5px;	
}
img.chainsaw {
	display: block;
	margin: 15px auto;
}

/*--- STIHl products page ---*/
#content h3 a {
	color: #333;
	text-decoration: none;
}
#content h3 a:hover {
	color: #f00;
}


/*--- Stock page resets ---*/
body#stock #container {
	background-image: none;
}
body#stock #content {
	margin: 10px 20px;
}
body#stock #leftnav {
	display: none;
}
body#stock #rightcol {
	display: none;
}



/*----------------------------------------
 *  @media hack 
----------------------------------------*/
@media screen {


.clearfix {display: block;}

div.row-wrap {
	overflow: auto;
}



}