/* CSS Document */

/*

Style Name: 

Date: 1 Sept 2008

Author: Phil Bartholomew www.philbartholomew.com

*/


/*

=Palette

*/



/*
=Global Reset
-------------------------------------------------------------------*/


* { padding:0; margin:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal} 

address {font-style:normal}

abbr,acronym, img,a img,:link img,:visited img {border:0}

caption,th { text-align:left} 

fieldset {padding: 5em}

:link,:visited {text-decoration:none}

select {min-width: 1.5em}

select optgroup { margin-left: 2%}

select optgroup option {margin-left: 10%}

table {border-collapse:collapse; border-spacing:0; margin: 15px; width: 595px}    
table p {margin: 0; padding: 3px}
table h3 {margin: 0; padding: 3px}

form {padding: 10px;}
      
input {margin-bottom: 2px}

td {background: #CCCCCC; border: 2px solid #ffffff}




/*
=Layout------------- */

body {text-align: center; background: #c9c9c9} /*IE hack */

#page {width: 900px; margin: 0 auto 0 auto; text-align: left; background: #FFFFFF}

#header {width: 900px; height: 114px; position: relative; background: #fff}
#strap {width: 900px; height: 30px; position: relative; background: #69ac07}
#strap p {color: #ffffff; margin:0; padding: 7px 15px 0 0; text-align: right; font-weight:bold}
#logo {width: 245px; height: 113px; position:absolute; top: 8px; left: 0px}
#contact {width: 177px; height: 103px; background:url(images/contact-bubble.jpg); position:absolute; top: 8px; right: 12px; text-align:right}

#content-container {width: 900px; background:url(images/content-bg.jpg) repeat-y}

#content-right-container {width: 670px; float: right}

#banner {width: 670px}

#sub-banner {width: 670px}

#content {width: 670px}

#content img {margin: 10px}

#flash {margin: 10px;}

#map {margin: 10px; border: 10px solid #CCCCCC}

#sidebar {width:227px; float: left; background: #e6e6e6}

.tree {position: relative; bottom: 0px; left: 25px; width: 100px}

#footer {width: 900px; margin: 0 auto 10px auto; position:relative; text-align: centre; font-size: 0.8em}

#footer p {margin-left: 0; color: #ffffff}

.clear {clear: both; margin: 0; padding: 0}   



#email-me-button {
width: 207px;
height: 32px;
margin: 0 0 4px 10px ;
padding: 0;
text-align: center;
background: url(images/button-email-offers.jpg); 
}

#email-me-button p {
margin: 0;
padding: 3px 0 0 0;
}

#email-me-button a {
color: #ffffff;
margin: 0;
padding: 3px 0 0 0;
display: block
}

#offers-button {
width: 207px;
height: 32px;
margin: 15px 0 4px 10px ;
padding: 0;
text-align: center;
background: url(images/button-email-offers.jpg); 
}

#offers-button p {
margin: 0;
padding: 3px 0 0 0;
}


#offers-button a {
color: #ffffff;
margin: 0;
padding: 3px 0 0 0;
display: block
}

#payment {
margin: 10px 0 4px 10px ;
padding: 0;
}

/* Products */

#product {
width: 189px;
margin: 15px 15px 15px 17px;
float: left;
padding: 0;
}

#product img {
margin: 0;
padding: 0;
border: 3px solid #CCCCCC 
}

#product a img {
margin: 0;
padding: 0;
border: 3px solid #CCCCCC 
}

#product a:hover img{
border: 3px solid  #69ac07 
}

#product h2 {
margin: 0 0 5px 0;
padding: 0;
color: #666666
}

#product h2 a {
margin: 0 0 5px 0;
padding: 0;
color: #666666
}

#product h2 a:hover {

color: #999999;
text-decoration: none
}

.optional-extras {list-style: outside; font-size: 2em; color: red }

.callus {width: 500px; }
.phoneus {width: 58px; height: 38px; float: left;}
.phone-info {height: 38px; float: left; margin-top: 12px}


/* Navigation */

.nav{

list-style-type: none;

margin:0;

padding: 0;

border: 1px solid #e6e6e6;

width: 170px;
}


ul.nav li a{

background: white url(images/nav-bar.jpg);

font: 0.9em Arial, Helvetica, sans-serif;

color: white;

display: block;

border-bottom: 1px solid #e6e6e6;

width: 215px;

padding: 6px 0;

padding-left: 10px;

text-decoration: none;
}


* html ul.nav li a{ /*IE only. Actual menu width minus left padding of A element (10px) */

width: 215px;
}



ul.nav li a:hover{

background-image: url(images/nav-bar-hover.jpg); 

color: #FFFF00;
}

ul.nav li a.current {

background-image: url(images/nav-bar-hover.jpg); 

color: #FFFF00;
}


ul.subnav{

list-style: none;

text-align: left;

font-size: 0.9em;

background: #ffffff;
}


ul.subnav li a {

text-decoration: none;

color: #CCCCCC;

padding: 4px 0px 11px 10px;

background: #ffffff;

border-bottom: 1px solid #CCCCCC; height: 9px
}


ul.subnav li a.sub-current {

color: #3366FF;
}


ul.subnav li a:hover {

color: #3366FF;

background: #FFFFFF
}

/* Product Menu */

#product-menu{
width: 630px;
font-size: 0.8em;
font-weight: 100;
margin-top: 5px
}

#product-menu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#product-menu ul{
border: 1px solid #BBB;
width: 100%;
background: url(images/product-menu-tab.jpg) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

#product-menu ul li{
display: inline;
}

#product-menu ul li a{
color: #ffffff;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

#product-menu ul li a:hover{

color: #FFFF00
}

#product-menu ul li a.current{

color: #FFFF00
}


/* Font stack */


body {font-family: Helvetica, 'Lucida Grande', verdana, Arial, Sans-Serif}

h1, h2, h3, h4, h5, h6, p {font-family: Arial, Helvetica, sans-serif; margin-top: 10px; margin-left: 15px}

code,textarea {font-family: Arial, Helvetica, sans-serif}

#commentlist li .counter {font-family: Arial, Helvetica, sans-serif}

h1 {font-size: 1.1em; color: #69ac07}

h2 {font-size: 0.9em; color: #69ac07}

h3 {font-size: 0.9em; color: #69ac07}

p {font-size: 0.9em; color: #888A88; padding-right: 15px}

a {color: #69ac07; text-decoration: none;}

a:hover {text-decoration: underline; color: #888A88}


/* tables */



/* Classes */


.bold {color: #69ac07; font-weight: bold}

#content ul {color: #3366FF; list-style-type: none; font-size: 0.9em; font-weight: bold; margin:10px 0 0 17px}

#content li a {color: #3366FF;}