/*---------------------------------
 CSS - HERON PROFESSIONAL PRODUCTS
---------------------------------*/


* {
	padding: 0;
	margin: 0;}

img {border:none;}

body {
	margin: 0;
	padding: 0;
	background: #172b33;
	font-size:62.5%;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	line-height:2em;}

div#navigation {
	background: url(../images/bg-nav.gif) repeat-x bottom; height:43px;}
	
	
	
/* NAVIGATION */	
	
ul#nav { height:43px; width:1000px; margin:auto; list-style-type:none; font-size:1.4em;}
ul#nav li { float:left; height:43px;}
ul#nav li a {color:#fff; font-weight:bold; text-transform:uppercase; text-decoration:none; height:23px; display:block; text-align:center; padding:20px 0 0 0;}
ul#nav li a:hover {background-position:0px -43px!important;}

ul#nav li#home a { background:url(../images/nav/home.gif) no-repeat; width:79px;}
ul#nav li#products a { background:url(../images/nav/products.gif) no-repeat; width:115px;}
ul#nav li#contact-us a { background:url(../images/nav/contact-us.gif) no-repeat; width:128px;}

body.home ul#nav li#home a,
body.products ul#nav li#products a,
body.contact-us ul#nav li#contact-us a {background-position:0px -86px!important; color:#172b33;}




/* LAYOUT STYLES */

#page-bg {
	background:#fff;}

#container {
	margin: 0 auto;
	padding: 0;
	width: 1000px;}
	
#header {
	width:1000px;
	margin:auto;}
	
img.logo {
	float:left;}
	
img.call-us {
	float:right;
	margin:112px 0 0 0;}

#flash {
	padding:0 0 20px 0;}

#content-area {
	width:1000px;
	font-size:1em;}
	
#content-left {
	width:664px;
	float:left;
	margin:0 3px 0 0;
	border-top:7px solid #e4e4e4;
	padding:17px 0 20px 0;}

#content-right {
	width:333px;
	float:left;
	border-top:7px solid #021821;
	padding:17px 0 20px 0;}

#bottom-divider {
	width:1000px;
	margin:0 0 20px 0;}
	
#bottom-divider-left {
	width:664px;
	height:7px;
	background:#e4e4e4;
	margin:0 3px 0 0;
	float:left;}

#bottom-divider-right {
	width:333px;
	height:7px;
	background:#021821;
	float:left;}

div.text-area {
	padding:0 40px 0 17px;}

.cta {
	background:#f2f2f2;
	width:333px;
	font-size:1em;
	margin:0 0 10px 0;}
	
.cta-img {
	float:left;
	width:89px;
	padding:6px 0 6px 13px;}
	
.cta-text {
	float:left;
	padding:6px 13px 6px 13px;
	width:205px;}

.brands {
	background:#f2f2f2;
	width:313px;
	padding: 10px;
	margin-bottom: 10px;
}

.brands img {
	float: left;
	margin: 0 7px;
}

.product-row {
	width:1000px;
	padding:0 0 20px 0;}

.product-item {
	width:500px;
	float:left;}
	
.product-image {
	width:200px;
	float:left;
	background:#f2f2f2;
	padding:10px;
}

.product-image ul { padding: 0 !important; }
.product-image ul li { background: none;  padding: 0 !important; }
	
.product-text {
	width:220px;
	padding:0 40px 0 20px;
	float:left;}


/* STANDARD TEXT STYLE */

.standard p {
	color:#8a8a8a;
	font-size:1.2em;
	padding:0 0 20px 0;}

.standard h1, .standard h2 {
	font-size:1.4em;
	color:#021821;
	border-left:7px solid #EC1D25;
	padding:0 0 0 10px;
	text-transform:uppercase;
	line-height:normal;
	margin:0 0 20px 0;}
	
.standard h3 {
	font-size:1.2em;
	color:#021821;
	text-transform:uppercase;
	margin:0 0 20px 0;}	
	
.standard a {
	color:#EC1D25;
	text-decoration:none;}

.standard a:hover {
	text-decoration:underline;}
	
.standard ul {
	list-style-type:none;
	padding:0 0 20px 10px;
	color:#8a8a8a;
	font-size:1.2em;}
	
.standard li {
	background:url(../images/li.gif) no-repeat 0px 8px;
	padding:0 0 0 15px;}




/* CTA TEXT STYLES */

.cta-styles p {
	color:#414141;
	font-size:1.2em;}

.cta-styles a {
	color:#EC1D25;
	text-decoration:none;}

.cta-styles a:hover {
	text-decoration:underline;}

.cta-styles h4 {
	font-size:1.2em;
	color:#021821;
	text-transform:uppercase;}

.cta-styles h2 {
	font-size:1.4em;
	color:#021821;
	border-left:7px solid #EC1D25;
	padding:0 0 0 10px;
	text-transform:uppercase;
	line-height:normal;
	margin:0 0 20px 0;}







/* FOOTER STYLES */

div#footer {
	background:#172b33 url(../images/bg-footer.gif) repeat-x top;
	height:100px;}

div#footer-content {
	width:1000px;
	margin:auto;
	color:#fff;
	font-size:1em;
	padding:15px 0 0 0;}
	
div#footer-content a {
	color:#fff;
	text-transform:uppercase;
	padding:0 10px 0 0;
	font-weight:bold;
	text-decoration:none;}	
	
div#footer-content a:hover {
	color:#37687B;}	
	
div#footer-left, div#footer-right {
	width:216px;
	float:left;
	padding:0 17px;}

div#footer-right 	{
	text-align:right;}

div#footer-middle {
	width:500px;
	float:left;
	text-align:center;}




/* CLEARFIX */

.clearfix:after {
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden;}
	 
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */