/*  
Theme Name: Tana Water
Theme URI: http://www.tanawater.co.uk/
Description: The initial theme for Tana Water.
Version: 2.0
Author: Greg Kendall
Author URI: http://www.kendallinternet.co.uk/

*** REGARDING IMAGES ***
All CSS that involves the use of images, can be found in the 'index.php' file.
This is to ease installation inside subdirectories of a server.
*/
/* All defaults */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;outline:0;font-size:100%;}
img, abbr, acronym {border:0;}
ol {list-style:none;}
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
/*
Set's border, padding and margin to 0 for all values
*/
* {
   padding: 0;
   margin: 0;
   border: 0;
}
body,
html {
   color: #000; 
   font-family: Verdana, Arial, Tahoma, sans-serif;
   height: 100%;
   background: url(images/faux-column-left.png) 0 100px repeat-y #fff; /*** This is the left column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. The background color #fff (white) will be the background color for our content area ***/
}
body {
   font-size: 70%;
   min-width: 760px; /* Don't work in IE */
}
h1, h2, h3, h4, h5 {
   font-weight: bold;
   padding-bottom: 5px;
}
h1 {
   font-size: 1.5em;
}
h2 {
   font-size: 1.4em;
}
h2#whychoose {
   padding-top: 1.5em;
}
h3 {
   font-size: 1.3em;
}
h3.tami4 {
   padding-top:5px;
   font-size: 1.3em;
}
h4 {
   font-size: 1.2em;
}
h5 {
   font-size: 1.1em;
}
p {
   padding: 7px 0 7px 0;
}
a {
   color: #000099;
}
a:hover {
   color: #0000FF;
   text-decoration: none;
}
a,
a:link,
a:hover,
a:active,
a.nobkgrd,
a.nobkgrd:link,
a.nobkgrd:hover,
a.nobkgrd:active {
	padding:0;
	text-decoration:underline;
        color:blue;
	}

a:visited,
a.nobkgrd:visited {
        color:purple;
	}
h1 a, 
#header h2 {
   color: #fff;
}
blockquote {
    margin: 1em 3em;
    padding: .5em 1em;
    border-left: 5px solid #6e9938;
    background-color: #e0e9e9;
}
blockquote p {
    margin: 0;
}
.clear {
   clear: both;
}
#page {
   width:1002px; /* page width optimised for 1024 x 768 res */
   min-height: 100%;
   background: url(images/faux-column-right.png) 100% 100px repeat-y; /*** This is the right column background "faked" with an image.  The 100px is added to have control of where the vertically repeating starts. ***/
}
* html #mainContainer {
   height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
.floatleft {
   float:left;
}
.floatcenter {
   float:center;
}
.floatright {
   float:right;
}
/**************************
HEADER
**************************/
#header {
   background-color: #ffffff;
}
#hdr-logo {
   background: url(images/faux-hdr-logo.png) 100% 100px repeat-x;
   height:72px;
}
.logo {
   float:left;
   padding-left:7px;
}
#hdr-img {
   background: url(images/faux-hdr-img.png) 100% 100px repeat-y;
   height:99px;
}
div.defaultimg-1 {
   background: url(images/products-hdr.jpg);
   height:99px;
}
div.defaultimg-2 {
   background: url(images/business-water-cooler.jpg);
   height:99px;
}
div.defaultimg-3 {
   background: url(images/business2.jpg);
   height:99px;
}
div.healthcare {
   background: url(images/healthcare-hdr.jpg);
   height:99px;
}
.hdr-msgs {
   float:right;
   padding-top:10px;
   padding-right:100px;
   font-family: Verdana, Arial, Tahoma, sans-serif;
   font-size: 1.4em;
   color:#000000;
}
/* For hdr-nav, see separate nav.css file */
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
   padding-left: 225px; /*** Same width as margin-left for the float-wrap div ***/
   padding-right: 300px; /*** Our right column width ***/
}
.outerfwidth {
   padding-left:225px; /*** Same width as margin-left for the float-wrap div ***/
   padding-right:-10px; /*** Our right column width ***/
}
.inner {
   width: 100%;
   padding-bottom: 15px; /*** Padding-bottom value is the same value as the total height of the footer ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
   float: left;
   width: 100%;
   margin-left: -225px; /*** Same length as .outer padding-left but with negative value ***/
}
#content {
   float: right;
   margin-right: -225px; /*** Same length as .outer padding-left but with negative value ***/
   width: 100%;
   position: relative; /*** IE needs this  ***/
   padding-bottom:20px;
}
#content ul {
   list-style-position:outside;
   list-style-image:url(images/bullet-lt-grey.gif);
   list-style-type:square;
   padding:6px;
   margin:2px;
   margin-left:20px;
}
#content ul li {
   padding-bottom:10px;
}
#content img.imgright {
   margin-left:10px;
   float:right;
}
#content img.bordered {
   border:solid 1px #00B2EF;
}
.post {
   position:relative;
   top:7px; /* moves text down from nav bar */
   left:-15px; /* moves text towards left column */
}
#emailaddr {
   position:relative;
   top:-3px;
}
#products {
   float:right;
   width:310px;
}
#products td {
   background:pink;
   border:solid 1px #00B2EF;
   width:150px;
}
.bottled {
   padding-left:19px;
}
.saving {
   padding-left:40px;
}
.bottprice {
   padding-left:88px;
}
.rentprice {
   padding-left:69px;
}
.saniprice {
   padding-left:39px;
}
#schcontain {
   position:relative;
   width:100%;
   padding-bottom:20px;
}
#schcontain-ideal {
   position:relative;
   width:100%;
   padding-bottom:0px;
}
#schcontain-home {
   position:relative;
   width:100%;
   top:20px;
   padding-bottom:0px;
}
#schleft {
   position:abolute;
   width:48%;
   margin-right:15px;
}
#schspace {
   position:absolute;
   top:0px;
   left:48%;
   width:4%;
}
#schright {
   position:absolute;
   top:0px;
   left:52%;
   width:48%;
}
.schoolbord {
        margin:0px;
        margin-right:10px;
        padding:0px;
        border:solid 1px #6E9938;
      }
#schhr {
   margin-top:10px;
   margin-bottom:10px;
      }
.schhr {
   height:1px;
   color:#6E9938;
   background-color:#6E9938;
      }
table.product-chart {
	border:thin solid #ffffff;
        border-collapse: collapse;
      }
table.product-chart td,
table.product-chart th {
	border:1px solid gray;
        padding:5px;
        text-align:center;
      }
table.product-chart tr.spacing td {
        border:0;
        line-height:200%;
      }
table.product-chart th.borderless,
table.product-chart td.borderless {
        border:0;
      }
table.product-chart th.chartimg img,
table.product-chart td.chartimg img {
        position:relative;
        top:0px;
        right:8px;
      }
table.product-chart th.category {
        vertical-align:super;
      }
table.product-chart td.dummy {
	border:0px;
        border-left:1px solid gray;
      }
table.product-chart td.feature {
        color: #ffffff;
        background-color: #6E9938;
      }
table.product-chart a {
        font-family: Verdana, Arial, Tahoma, sans-serif;
	padding-bottom: 7px;
	padding-top: 6px;
	padding-left: 15px;
	padding-right: 0px;
	color: #ffffff;
	text-decoration: none;
      }
table.product-chart a.btn-more {
	padding-right: 14px;
        background:url(images/more.jpg) no-repeat;
      }
span#t4t5spacer,
span#t5t6spacer,
span#t6t7spacer,
span#t7t10spacer {
       padding-left:0px;
      }
span#t4t5spacer {
       padding-left:20px;
      }
span#t5t6spacer {
       padding-left:20px;
      }
span#t6t7spacer {
       padding-left:17px;
      }
span#t7t10spacer {
       padding-left:5px;
      }
div#range {
       padding-top:20px;
      }
img.arightblue,
img.arightgreen {
   float:right;
   margin-top:0;
   margin-left:5px;
   padding:2px;
}
img.arightblue {
   border:solid 1px #00B2EF;
}
img.arightgreen {
   border:solid 1px #6E9938;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
   float: left;
   width: 225px; /*** outer padding-left minus padding ***/
   position: relative; /*** IE needs this  ***/
}
/*************************
RIGHT COLUMN
**************************/
#right {
   float: right; 
   width: 290px; /*** outer padding-right minus padding ***/
   padding: 5px;
   position: relative; /*** IE needs this  ***/
   margin-right: -300px; /** This negative margin-right value is the same as the right column width (width + padding). ***/
   position: relative; /*** IE needs this  ***/
}
/**************************
FOOTER
**************************/
#footer {
   width:1002px; /* page width optimised for 1024 x 768 res */
   height: 15px; /*** The drawback with this solution is that the height of the footer can't have a flexible height. If you add so much content to the footer that it extends 45px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
   margin-top: -19px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
   text-align: center;
   color: #fff;
   background: #00B2EF;
   padding-top:4px solid #ffffff;
}
.hiddenPic {display:none;}