body {
    font-family:"Trebuchet MS","Segoe UI",Trebuchet,"Bitstream Vera Sans","DejaVu Sans",Verdana,"Verdana Ref",sans serif;
    /* background: #fff url(/img/bg_gradient_grey.jpg) repeat-x top left; */
    color:#454545;
}
h1,h2,h3,h4,h5,h6,strong {
   /*bringing boldness back to headers and the strong element*/
   font-weight:bold; 
}
h1 {
   /*18px via YUI Fonts CSS foundation*/
   font-size:30px;  
    color:#1B325F;
    margin: 30px 0;
    font-weight: normal;
/*    padding-bottom: 5px;
   border-bottom: 1px solid #000;  */
   /* font-weight: normal; */
}
h2 {
   /*16px via YUI Fonts CSS foundation*/
   font-size:123.1%;
   color: #ac1111;
   margin-top: 1em;
   margin-bottom: .2em;
}
h3 {
   /*14px via YUI Fonts CSS foundation*/
   font-size:108%;  
   font-size: 16px;
}
h2,h3 {
   /* top & bottom margin based on font size */
   /* margin:1em 0;  */
}

hr {
   border: none;
   height:1px;
   margin:10px 0;
   background-color: #262626;
   color: #262626;
}
abbr,acronym {
   /*indicating to users that more info is available */
   border-bottom:1px dotted #000;
   cursor:help;
} 
em {
   /*bringing italics back to the em element*/
   font-style:italic;
}
blockquote,ul,ol,dl {
   /*giving blockquotes and lists room to breath*/
   /* margin:1em; */
}
ol,ul,dl {
   /*bringing lists on to the page with breathing room */
  /*  margin-left:2em; */
}
ol li {
   /*giving OL's LIs generated numbers*/
   list-style: decimal inside;  
}
ul li {
   /*giving UL's LIs generated disc markers*/
   /*list-style: disc outside;*/
}
dl dd {
   /*giving UL's LIs generated numbers*/
   margin-left:1em;
}
th,td {
   /*borders and padding to make the table readable*/
/*    border:1px solid #000;
   padding:.5em;
   vertical-align: top; */
}
th {
   /*distinguishing table headers from data cells*/
   font-weight:bold;
   text-align:center;
}
caption {
   /*coordinated marking to match cell's padding*/
   margin-bottom:.5em;
   /*centered so it doesn't blend in to other content*/
   text-align:center;
}
p,fieldset,table {
   /*so things don't run into each other*/
   margin-bottom:1em;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
input[type=submit] {
    cursor: pointer;
}
input[type=text], input[type=password], textarea{
  /*width:12.25em;
  *width:11.9em;*/
}
input, select {
   padding: 3px;
}

/* only works if img is a block */
a img {
    text-decoration: none;
}

/* if you change, the link color in the caption 
   must also be changed */
a {
  color:#0181E3;
}
a:hover {
    text-decoration: none;
}


/*____________________________________________________________________  Main Div Layout ______*/ 
#doc2 {
    background-color: #fff;
}
#hd {
    margin-bottom: 10px; 
    background: url(http://www.savewaterproject.com/img/header-bg.jpg) repeat-x top left;
}
#bd {
    
}


#yui-main .yui-b {
   position: relative;
}
#ft {
    margin-top: 40px;
    text-align: center;
    font-size: 11px;
}

#call-to-action {
	text-align: center;
	font-size: 30px;
}

/*-----------------------------------------------------------------------------------------
                                                                          CLASSES
-------------------------------------------------------------------------------------------*/
.clear-both {
    clear: both;
}
.center {
    text-align: center;
}

.quote-left {
    float: left;
    margin-top: -5px;
    margin-right: 5px;
}
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
} 
/* ie 7 clear fix 
 * www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/  
 */
.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
    * html .clearfix { height:1% }
    .clearfix {display:block;} /* ie7 clear fix */
/* End hide from IE-mac */

.blue-dark{
    color: #0077b3;
}
.pale-blue {
    color: #9acfe9;
}

.blue {
    color: #5FBDFF;
}

.green {
    color: #629109;
}
.purple {
    color: #910956;
}
.purple-light {
    color: #ea138d;
}
.aqua {
    color: #0BCEFF;
}
.blood-red{
    color: #ac1111;
}

.has-disc li{
   list-style-type: disc;     
}

.button {
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border: 2px solid #079abf;
    background: #093c91 url(/img/button-blue.jpg) repeat-x top left; 
    float: left;
    height: 30px; /* this works with line-height to center text verticallly */
    line-height: 30px; /* this centers the text */
}

.button a:hover{
    text-decoration: underline;
}

#oneColContent {
    padding:0 30px 20px 30px;
    border: 1px solid #ccc;
}


.spaced li{
	margin-top: 20px
}

/******************************* these product styles have to come first because I overide the css in 
                                 later on.
*/
.product {
    text-align: center;
}

.over {
    background-color: #d7f0fd;
    cursor: pointer;
    border:4px solid #5FBDFF !important;
}

/**
 * wrapping everything in <a> tag
 * 
 * I am doing this so that the window.status message shows 
 * I am also doing this so that the whole section is a hover
 * I cant do it in js bc it will not show the window.status message.
 * So I am using <span> tags
 */
.product a {
    text-decoration: none;
} 
 
.product span {
    display: block;
} 
 
.product img {
    padding-top: 10px;
    display: block;
    margin: 0 auto;
}

.product .product-name {
    font-weight: normal;
    color: #000;
    margin-top: 5px;
}

.product .price {
    font-weight:bold;
    margin-bottom: 5px;
    color:#00AFF0;
}

.product .find-out-more {
    margin-bottom: .5em;
    padding-bottom: 10px;
    text-decoration: underline;
}

.product span.find-out-more:hover {
    text-decoration: none;
}

/*-----------------------------------------------------------------------------------------
                                                                          YUI_OVERLAY
-------------------------------------------------------------------------------------------*/

.yui-overlay-content {
    background-color: #fff;
    border: 4px solid #3A89C9;
    padding: 20px 15px 15px 15px;
}
.yui-overlay .yui-widget-bd {
    text-align:center;
}


.add-to-cart-success {
    color: #1B325F;
    font-size: 20px;
    margin-bottom: 10px;
}
.add-to-cart-product {
    color: #3A89C9;
    font-size: 16px;
    margin-bottom: 10px;
    
}

#shopping-cart-view .yui-overlay-content {
    background-color: #0BCEFF;
    color: #fff;
    border: none;
    padding: 5px;
    padding-bottom: 5px;
    margin-left: 10px;
    font-weight: bold;
}
#shopping-cart-view .yui-overlay-content p {
    margin-bottom: 0;
}

/*-----------------------------------------------------------------------------------------
                                                                          layout.phtml
-------------------------------------------------------------------------------------------*/
#logo {
    float: left;
}  




.caption {
    float: right;
    font-size: 10px;
    margin-top: 5px;
}


#banner img {
    display: block;
    margin: 0 auto;
    
}

/*____________________________________________________________________  Main Navigation  ______*/

    
#main-menu {
    float: left;	
    margin-left: 50px;
    margin-top: 30px;
}

#main-menu li {
    float: left;
}

#main-menu li a {
    color:#30CFFE; 
    padding: 5px 20px;    
    font-family: arial;
    font-size: 20px;
    text-decoration: none;
    background-color: #F1F4E4;
    margin-right: 5px;
    
}
#main-menu #last-link a{
    border-right: none;
}
#main-menu li a:hover {
    background-color: #30CFFE; 
    color: #fff;
    text-decoration: underline;
    /*
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    */
}
 
 
/* link in the header */
#header-links {
    background-color: #424242;
    background: url(/img/gray_bg.jpg) repeat-x bottom left;
    height: 40px;
}

#header-links ul{
    width:73.076em;
    margin: 0 auto;
}
#header-links li{
    float: right;
    position: relative;
    
} 

a#button-cart {
	width: 90px;
	height: 28px;
	display: block;
}


#header-links img{
    position: absolute;
    top: -8px;

	
	
}
#login {
    margin-top: 20px;
}
#login a {
    color: #ccc;
    text-decoration: none;
    margin-top: 15px;
    margin-right: 50px;
}
#login a:hover {
    text-decoration: underline;
}

.button-header {
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright:7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    background-color: #0BCEFF;
    line-height: 2em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
    margin-top: 12px;
    padding-left: 5px;
  
}
.button-header a{
    text-decoration: none;
    color: #fff;  
}


/*____________________________________________________________________  Footer Navigation  ______*/

    
#footer-links {	
    margin: 30px 0;
}

#footer-links li {
    display: inline;
    margin-left: 15px;
}

#footer-links li a {
    text-decoration: none;
    
}
#footer-links li a:hover {

}

#keywords {
	cursor:pointer;
	color: #0181E3;
}
#interlinks li{
	display: inline;
	padding: 3px;
}

#footer-bottom {
	color: #666;
}

#footer-bottom a{
	color: #666;
	text-decoration: none;
}

/*-----------------------------------------------------------------------------------------
                                                                          HOME PAGE
-------------------------------------------------------------------------------------------*/
/*
 * note about yui grids
 * the u stands for unit. 
 * it goes inside yui-g (grid)
 */
 
#home  {
    color: #333;
    /* margin-top: 15px; */
    line-height: 1.3;
}  
.header-home-page {
    /* margin-bottom: 10px; */
}
#home h1 {
    margin: 0;
    background: url(/img/banner-dual-flush.jpg) no-repeat top left;
    height: 330px;
    width: 950px;
    text-indent: 5000px;
}

#home h1 span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}


#home h2 {
    color:#1B325F;
    font-size:30px;
    font-weight:normal;
    margin-top: 0;
}

#home h2 span {
    font-size: 16px;
}

#home h3 {
    font-size: 18px; 
    margin: 0;
    color: #000; 
}
.hd-silver {
    background: url(/img/silver.jpg); 
    /* margin-bottom: 10px; */
    height: 70px;
    border: 4px solid #d8d8d8;   
    border-bottom: none;
}

.hd-silver h3 {
    padding-top:10px; 
    font-size: 18px;
    text-align: center;
}

#home h4 {
    margin: 0;
    margin-bottom: 10px;
    color: #5FBDFF;
    font-size: 18px;
}
.people-pic {
    border: 1px solid #ccc;
}
.people-pic p{
    padding: 20px;
    height: 185px;
}
.poem-author {
    font-style: italic;
}

.self-pic{
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
}

.best-of {
    border: 4px solid #d8d8d8;  
}

/*____________________________________________________________________ Products Many page _______________ */



.one-of-many {
    float: left;
    width: 174px;
    margin-left: 41px; /* 174 (width) * 4 (# of products) = 696 + 8 (1px border on each li) = 704;  950(total page width)-704 = 246; 246/5(numbers of spaces in between li's) = 49.2 */ 
    /* overflow: hidden; */
    display: inline; /*double margin float bug in IE6  www.positioniseverything.net/explorer/doubled-margin.html */ 
    border: 4px solid #fff;
}

/*-----------------------------------------------------------------------------------------
                                                                          ABOUT PAGE
-------------------------------------------------------------------------------------------*/
#about-page .bd{
/*     background: #fff url(/img/bg-filler.jpg) no-repeat top left;  
    height: 350px; */
    /* font-size: 16px; */
    width: 600px;
    margin: 0 auto;
}

#about-page h1 {
    color:#525252;
    border: none;
    font-size: 36px;
    margin: 20px 0;
    
}

/*-----------------------------------------------------------------------------------------
                                                                          FAQ page
-------------------------------------------------------------------------------------------*/
#faq-page {
    
   
}

ol#questionWithAnswer {
    margin-top: 2em;
}

#questionWithAnswer li {
    font-weight: bold;
    margin-bottom: 2em;
}

#questionWithAnswer p{
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: normal;
    margin-left: 1.5em;
    
}



/*-----------------------------------------------------------------------------------------
                                                                          PRODUCT Detail Page
-------------------------------------------------------------------------------------------*/

.add-to-cart a{
    padding: 0 7px;
    display: block; /* needed to so it fills the parent div */
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    color: #fff;  
    font-weight: bold;
}

#product-detail-page h1 {
	color:#666;
	font-family:Arial,Helvetica,sans-serif;
	letter-spacing:4px;
	text-transform:uppercase;
}
#product-detail-page h1 span{
    text-transform:none;
    letter-spacing:0;
    font-size: 20px;
}

#product-detail-page h3 {
    color: #000;
    margin-bottom: 15px;
}

#product-detail-page h4 {
    color: #000;
}

#product-detail-page b {
    color: #000;
}

.snippet {
    margin-top: 20px;
    margin-bottom: 20px;
}

.snippet li {
    background: url(/img/tick.png) no-repeat top left;
    padding-left: 20px;
    margin: 10px 0;
}

.product-description-container img{
   float: right;
   margin: 0 15px;
}

#product-detail-page .price {
    margin: 20px 0;
    font-size: 18px;
    color: #000;
    font-weight: bold;
    font-family: arial;
}    

#product-detail-page .price span{
    color:#00AFF0;
}

.product-details-grid dt {
	float:left;
	font-weight:bold;
	margin-bottom:6px;
	width:140px;
}




 
/* this was to imitate the shopping cart from flying hippier
 * where it showed a mini pic of the item just purchases on the right side
  */
 #mini-shopping-cart {
   width: 100px;
   height: 200px;
   position: absolute;
   right: -100px;
   top: 0;
   background-color: aqua;
   display: none;
 }


 
/*-----------------------------------------------------------------------------------------
                                                                          Contact Page
-------------------------------------------------------------------------------------------*/ 
#contact-page {
    margin-top: 20px;
}

#contact-page #sidebar {
    float: left;
    width: 265px;
}
#contact-page #sidebar p {
    font-size: 16px;
}

#contact-page #contact-form{
    margin-left: 350px;
    /* margin-top: 100px; */
    width: 480px;
    font-size: 16px; 
}

#address-stuff {
    font-size: 16px;
}
#contact-page form {
    /* font-size: 16px; */
}
#contact-page #contact-form textarea {
    width: 70%;
    height: 200px;
}

#contact-page dt {
    width: 110px;
    /* color: #666; */
}
#contact-page form{
    margin-top: 30px;
}
#submit {
    font-size: 16px;
}



/*-----------------------------------------------------------------------------------------
                                                                          SHOPPING CART VIEW
-------------------------------------------------------------------------------------------*/

.cart-header_1 {
    font-family: georgia;
}

.button-small {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background-color: #000;
    font-size: 10px;
    line-height: 1.5em;
    text-transform: uppercase;
    padding: 0 3px;
    float: left;

  
}
.button-small a{
    text-decoration: none;
    color: #fff;  
}
.button-small #update {
    padding: 2px 1px;
    font-size: 11px;
    display: block;
    
}

#cart-table{
    border-collapse: collapse;
    width: 100%;
    font-family: georgia;
    font-size: 14px;
}

#cart-table th, td {
    border: none;
}

.cart_headers td {
    font-size: 11px;
    height: 30px;
}

.rowOdd {
    background-color: #e9f2f9;
}
.cart-image {
    background-color:#FFFFFF;
    border:1px solid #DDDDDD;
    padding:5px;
    width:105px;
}
.cart-image img {
    display: block;
    margin: 0 auto;
}
.table-text {
    margin: 0 10px;
}
.currency-text {
    font-family: arial;
    font-size: 18px;
    margin-right: 10px;
}
.quantity input{
    font-family: arial;
    font-size: 16px;
    padding: 3px;
    width: 60px;
}
.math-operator {
    font-size: 12px;
    color: #959595;
    text-align: center;
}
.total {
    font-family: arial;
    font-size: 18px;
}
.table-row-spacer {
    height: 10px;
}
.table-divider {
    border-top:1px dotted #898989;
    height: 10px;
}

.checkout input{
    height: 30px;
    line-height: 30px;
    border: none;
    padding: 0 7px;
    display: block; /* needed to so it fills the parent div */
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    color: #fff;  
    font-weight: bold;
    background-color: transparent;
    cursor: pointer;
}

/* ---------------------------------------------------------------------for landing page ---- */
#banner {
	position: relative;
}	
#banner h2 {
	width:630px;
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 30px;
	color: #1B325F;
	font-weight: normal;
}