/* --- Start Reset and default selectors --- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li {	margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
a:link, a:visited, a:hover, a:link {text-decoration: none;}
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
.clear {clear: both;} .right {float: right;} .left {float: left;} body {font-size: 62.5%;}
strong {font-weight: bold} em {font-style: italic;}

/*-- End Reset --*/
body { 
	font-family: arial, verdana, helvetica, sans-serif;
	color: #666;
	} 

#wrapper {
	width: 858px; 
	position: relative; 
	margin: 0 auto; 
	} 

#header {
	margin-top: 30px; 
	position: relative; 
	}

	
#navigation span {visibility: hidden;} /*hides the IR on the logo and the main navigation */

#navigation h1 a {
	background: url('../images/bevco_logo.jpg');
	width: 92px;
	height: 46px;
	margin: 26px 0 0 21px;
	display: block;
	}	
	
/*------------------ Main Navigation -------------------*/
/*#navigation ul {
	position: absolute;
	top: 26px; right:0;
	}	
	
#navigation li {float: right;}	
#navigation ul a {display: block; }*/

#navigation ul li {
	float: right;
	position: relative; 
	bottom: 25px;	
}

#navigation li a {display: block;}

#navigation #navabout a {
	background-image: url('../images/nav_about.jpg');
	background-position: 0 -37px; 
	width: 85px;
	height: 37px;
	}

#navigation #navabout a:hover {background-position: 0 0;}	

#navigation #navproducts a {
	background-image: url('../images/nav_products.jpg');
	background-position: 0 -37px; 
	width: 80px;
	height: 37px;
	}

#navigation #navproducts a:hover {background-position: 0 0;}

#navigation #navsolutions a {
	background-image: url('../images/nav_solutions.jpg');
	background-position: 0 -37px; 
	width: 85px;
	height: 37px;
	}

#navigation #navsolutions a:hover {background-position: 0 0;}

#navigation #navparts a {
	background-image: url('../images/nav_parts.jpg');
	background-position: 0 -37px; 
	width: 55px;
	height: 37px;
	}

#navigation #navparts a:hover {background-position: 0 0;}

#navigation #navcontact a {
	background-image: url('../images/nav_contact.jpg');
	background-position: 0 -37px; 
	width: 147px;
	height: 37px;
	}

#navigation #navcontact a:hover {background-position: 0 0;}

/*------------------ Content -------------------*/
#content {
	background-color: #e0e0e0;
	width: 856px;
	border: 1px solid #8c8c8c;
	font-size: 1.2em; 
	line-height: 1.8em; 
	}
	
#content #lhc { 
	float: left; 
	width: 300px; 
	margin-left: 35px; 
	display: inline;
	} 
	
#content #rhc { 
	float: right; 
	width: 415px; 
	margin-right: 35px; 
	display: inline;
	} 		

/*------------------ Footer -------------------*/
#footer { 
	border-right: 1px solid #8c8c8c;
	border-left: 1px solid #8c8c8c;
	border-bottom: 1px solid #8c8c8c;
	position: relative; 
	height: 85px; 
} 

#footer span {display: none; }

#footer #pmmi { 
	width: 63px; 
	height: 48px; 
	background-image: url('../images/footer_logo_pmmi.gif');
	position: absolute; 
	bottom: 11px; 
	right: 31px; 
} 


#footer #totop a { 
	display: block; 
	width: 108px; 
	height: 26px; 
	background-image: url('../images/footer_totop.gif');
	position: absolute; 
	left: 0; bottom: 0; 
	}
	
#footer #hiring a { 
	display: block; 
	width: 70px; 
	height: 100px; 
	background-image: url('../images/footer_hiring.gif');
	position: absolute;
	left: 250px; 
	top: 25px;  
	} 	 


/*------------------ Legal -------------------*/

#legal {
	position: relative; 
	font-size: 1.1em;
	padding-bottom: 35px; 
	}
	
#legal .copyright { 
	position: absolute; 
	right: 15px; 
	top: 11px;
	}

#legal ul { 
	position: absolute; 
	left: 15px; 
	top: 11px;
	font-weight: bold; 	
	} 
	
#legal li { 
	display: inline; 
	margin-right: 15px; 
	} 	 


/*------------------ typography -------------------*/
h4 {
	font-weight: bold; 
	color: #3f3f3f;
	font-style: italic; 
	} 

h3 {margin: 10px 0;}


/*------------------ Links -------------------*/
	/*Legal Links */
	#legal a:link, #legal a:visited, #legal a:active {color: #666; text-decoration: underline;}
	#legal a:hover {color: #666; text-decoration: none;}

	/*Content Links */
	#content a:link, #content a:visited, #content a:active {color: #666; text-decoration: underline;}
	#content a:hover {color: #666; text-decoration: none;}
	
	/*Secnav Links */
	#secnav a:link, #secnav a:visited, #secnav a:active {color: #333; text-decoration: underline;}
	#secnav a:hover {color: #333; text-decoration: none;}

/* This is an addition for pages based on the 'About Template'. Files with the ID about_pg attached to the body tag have been based on the about template. The majority of the style information is stored in the secondary style sheets (one for each main navigational element) but this one rule is universal to all of those pages so is being stored here. So much for taking up bandwidth, I just wrote 4 lines explaning what I'm doing! Is there a better way? */

#about_pg #header {
	background: url('../images/about_header_bg.gif');
	width: 858px;
	height: 113px;
}
/* This is to position the titles of every section in the header */

#header h2 {
	position: absolute; 
	top: 30px; 
	left: 25px;
}

/* This is to add the border on either side of the masthead */
#masthead {
	border-left: 1px solid #8c8c8c;
	border-right: 1px solid #8c8c8c;
	}