@charset "utf-8";

/* ============================================================
Signature Plumbing & Heating Styles
Author: Derek Loewen <derek@pixelsonline.ca>
Created: Feb. 9, 2011
=============================================================*/

@import url(reset.css);

/* Basic Elements
===============================================================*/

body {
	font: 14px/24px Arial, 'Helvetica', sans-serif;
	background: #fff url('../img/header.jpg') center top no-repeat;
    background: url(../img/header.jpg) top center no-repeat,
        url(../img/header-grad.png) top left repeat-x; 
	color: #333;
}

div { position: relative; }

a { color: #00445f; font-weight: bold; }

h3 { font-size: 18px; margin-top: 24px; font-weight: bold; }

p { margin-top: 12px; }

h1 { float: left; }
h1 a { position: absolute; top: 37px; left: 0; display: block; width: 290px; height: 72px; text-indent: -9999px; background: url('../img/signature-logo.png') no-repeat; }

h2, .intro { 
    height: 111px;
    font-size: 22px; 
    color: white; 
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,.33);
}
    .intro .button { 
        margin-left: 2px; 
        border: none; 
        font-size: 16px;
        color: #66322d;
        -moz-box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,1);
        -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,1);
        box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,1);
        behavior: url(css/PIE.htc);
    }

strong { font-weight: bold; }

.align-left { float: left; }
.align-right { float: right; clear:right; }
.margin-right { margin-right: 15px; }
.margin-left { margin-left: 15px; }
.margin-bottom { margin-bottom: 9px; }

.nofloat { float: none !important; }

.shadow {
     -moz-box-shadow: 1px 1px 3px #000; /* FF3.5+ */
  -webkit-box-shadow: 1px 1px 3px #000; /* Saf3.0+, Chrome */
          box-shadow: 1px 1px 3px #000; /* Opera 10.5, IE 9.0 */
}

.button, .mega-button {
    font: 14px/24px Arial, 'Helvetica', sans-serif;
    color: #00445f; font-weight: bold;
    text-transform: lowercase;
    text-shadow: 0 1px 1px white;
    text-decoration: none;
    background: #FEFEFE; /* old browsers */
    
}

.button { 
    display: inline-block; 
    padding: 2px 25px;
    border: solid 1px #b0b0b0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: -moz-linear-gradient(top, #FEFEFE 0%, #D4D4D4 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(100%,#D4D4D4)); /* webkit */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#D4D4D4',GradientType=0 );*/ /* ie */
    background: linear-gradient(#FEFEFE, #D4D4D4);
    -pie-background: linear-gradient(#FEFEFE, #D4D4D4);
    behavior: url(css/PIE.htc);
}

.mega-button {
    position: relative;
    display: block;
    left: -21px;
    width: 438px;
    margin-top: 4px;
    padding: 10px 0;
    border: solid 1px #e5e4e4;
    border-top: solid 1px #bdbdbd;
    text-align: center;
       -moz-border-radius: 0px 0px 15px 15px;
    -webkit-border-radius: 0px 0px 15px 15px;
            border-radius: 0px 0px 15px 15px;
    background: -moz-linear-gradient(top, #f1f1f1 0%, #e5e4e4 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#e5e4e4)); /* webkit */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e5e4e4',GradientType=0 );*/ /* ie */
    background: linear-gradient(#f1f1f1, #e5e4e4);
    -pie-background: linear-gradient(#f1f1f1, #e5e4e4);
    behavior: url(css/PIE.htc);
}
    .mega-button:before {
        border-top: solid 1px white;
        content: '';
        height: 1px;
        position: absolute;
        top: 0;
        left: 0; right: 0;
    }
    
.ie6 .mega-button {
    width: 300px;
}
    
/* Forms */

label { color: black; display: inline-block; }
    .short { width: 57px; }
    
    .error { list-style: none; color: #66322D; font-style: italic; font-weight: bold; }
    .success { list-style: none; color: green; font-weight: bold; }

input[type="text"], textarea { 
    font: 14px/24px Arial, 'Helvetica', sans-serif;
    background: white; 
    border: solid 1px #a1a1a1; 
    padding: 3px; 
}

textarea { width: 90%; height: 129px; }

.submit { cursor: pointer; margin-bottom: 24px; }

/* Layout and Page Styles
===============================================================*/

.border { background: white; padding: 2px; border: solid 1px #ccc; }
.right { float: right; margin: 0 0 12px 12px; }

.featured-services { color: #282828; margin-bottom: 24px; }
.featured-services li { 
    padding: 11px 0 4px;
    border-bottom: solid 1px #ccc; 
    overflow: hidden; 
    font-size: 12px; }
.featured-services img { position: relative; top: -3px; float: left; padding: 0 8px 0 0; }
.featured-services h3 { 
    margin: 0;
    font-weight: bold; 
    font-size: 16px;
    display: inline-block;
}

/* Content area */

.wrap { width: 820px; margin: 0 auto; overflow: hidden; padding: 0 20px; }

.main {
	width: 820px;
}
	.maincol ul { list-style-type: disc; margin-top: 12px; }
	.maincol li { margin-left: 15px; margin-bottom: 4px; }
	
.maincol {
    float: left;
	width: 440px;
	margin-right: 25px;
}

.maincol h3 {
    position: relative; left: -14px;
    padding: 6px 12px;
       -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
            border-radius: 24px;
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.15);
    background: #eeeeee; /* old browsers */
    background: -moz-linear-gradient(left, #eeeeee 0%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(100%,#FFFFFF)); /* webkit */
    background: linear-gradient(left, #eeeeee, #FFFFFF);
}
    .maincol h3 img { float: left; position: relative; top: -3px; padding-right: 6px; }

.sidebar { float: left; width: 355px; }

.featurebox { 
    background: #ececec; 
    padding: 0 20px; 
    border: solid 1px #e5e4e4;
    border-bottom: solid 1px #c3c3c3;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);  }
    
    .ie6 .featurefox { padding: 0 10px; }
    
    .featurebox h3 {
        margin: 10px 0;
        color: #005576; 
        font-size: 24px; 
        font-weight: bold;
        font-family: Cochin, Georgia, serif;
        font-style: italic; }
        
    .featurebox h4 { color: black; font-size: 16px; font-weight: bold; }
    .featurebox h5 { color: #575757; font-size: 14px; margin-bottom: 5px; }
	.featurebox ul { list-style-type: none; }
	.featurebox li { margin: 0; overflow: hidden; }

/* Header */

.header { overflow: hidden; height: 177px; }
    
    .header h2 { 
        line-height: 48px; 
        font-weight: bold; 
        color:#66322d; 
        font-size: 18px !important; 
        text-align: center;
        text-shadow: none;
}
    .header h2 span { color: #3a3a3a; font-family: "Cochin", Georgia, serif; font-style: italic; font-weight: bold; }
    
/* Navigation */

.nav li { float: left; }

.header .nav { display: block; position: absolute; top: 72px; right: 49px; }
.header .nav a {
    font-size: 18px;
    font-family: "Futura", Arial, sans-serif;
    font-weight: 300;
	text-decoration: none;
	padding: 5px 11px 12px;
}
	.header .nav a:hover { background: url('../img/nav-current.png') bottom center no-repeat; }

/* Footer */

.footerWrap {
	clear: both;
	background: url('../img/footer.png') no-repeat 50% 0 ;
	overflow: hidden;
	height: 174px;
}
.footer { width: 820px; margin: 0 auto; padding: 85px 0 0 0; overflow: hidden; height: 88px; }
	.footer .nav a { padding: 0 16px 0 0; text-decoration: none; }
	.footer span { display: inline-block; }
	
	.footer h6 { float: left; font-size: 16px; font-weight: bold; color: #66322d; }
	.footer h6 span { 
	   font-size: 18px; 
	   color: #3a3a3a; 
	   font-family: "Cochin", Georgia, serif; 
	   font-style: italic; 
	   font-weight: bold;
    }
    .footer h5 { 
        position: relative;
        top: -12px;
        width: 188px; height: 48px;
        margin-left: 30px;
        background: url('../img/signature-logo-small.png') no-repeat;
        text-indent: -9999px; 
        float: left; 
    }
    
.footer-right { position: absolute; right: 0; top: 85px; }
.footer-right p { clear: both; text-align: right; font-size: 12px; color: #555; }
.footer-right a { color: #0F627F; }
	
/* Home Page */

.page-home .intro { font-size: 16px; margin: 0; padding: 0; }
.page-home .maincol h2 { height: auto;
    font-size: inherit; 
    color: #333; 
    text-align: left;
    text-shadow: none;
}

.featured-products { margin-top: 24px; float: left; width: 398px; }
    .featured-products h3, .products-list h3 {
        left: 0;
        background: none; padding: 0; 
           -moz-box-shadow: none;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .featured-products img, .product img { float: left; margin-right: 24px; background: white; padding: 2px; border: solid 1px #a4a4a4; }
    .featured-products li { padding: 0 0 12px 0; }
    .featured-products h4 { padding: 17px 0 0 0; }

/* Products Page */

.product { 
    margin-bottom: 24px; 
    padding-bottom: 24px;
    border-bottom: 1px solid #CCC; 
    clear: left; 
}
.product h3 { left: 0; background: none; padding: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.product h4 { color: #555; margin-bottom: 12px; }

.brands, .brands li { list-style-type: none; margin: 0; }
.brands li { float: left; margin: 24px 35px 0 0; }
.brands { margin-bottom: 24px; overflow: hidden; }