/* home.css */

/* Home page rules */

.news .articles, .ask .article, .newProducts .text {clear: both; margin: 0;}

table.home {border-collapse: separate;}
col.info {width: 48%;}
table.home col.gutter {width: 4%;}

div.announcement {border-left: 1px solid #de7b5a; border-bottom: 1px solid #de7b5a;}
div.announcement h3 {width: auto; padding: 6pt 15pt 8pt 15pt; color: white; background-color: #de7b5a; font-size: /* x-large */ 14pt; font-weight: 400; font-style: italic; white-space: nowrap;}
div.announcement p {font-size: 10pt; padding: 8pt;}

/* In IE5 Mac, a left side offset (4pt) on div.sale below inherits into the div.text:
With no image, or a floated image, or an image in a floated DIV, 
all but the first p element in div.text is 4pt too far left.

/* Gecko doesn't let you float an image outside of its container (at least on the float side), */
/* And it doesn't seem to like the shorthand border property, so don't combine border-top and border-bottom below.  */

div.sale {position: relative; margin: 20pt 30pt 0 12pt; /* was -10pt */ border-top: 8pt solid white; border-bottom: 4pt solid white; background-color: #752f8a;}
div.sale img {float: right; width: 69pt; height: 72pt; margin: -30pt -20pt 0 0; padding-bottom: 6pt;}
div.sale div.saleText {position: relative; right: 4pt; bottom: 4pt; width: auto; padding: 10pt; background-color: #e1e1e1; /* z-index: 0; */}
* html div.sale {margin-right: 10pt;}
*>html div.sale {position: static;}
*>html div.sale div.saleText {padding: 4pt 11pt 15pt 15pt;}
*>html div.sale div.saleText * {margin-left: 4pt;}
*>html div.sale div.saleText p:first-child {margin-left: 0;}
div.sale div.saleText p.head span.when {margin: 0;}
/* div.sale div.saleText * {border: 1px solid red;} */

div.ad {position: relative; margin: 40pt 20pt 20pt 12pt; background-color: #752f8a;}
div.ad img {float: right; width: 39pt; height: 69pt; margin: -37pt -16pt 0 0;}
div.ad div.adText {position: relative; right: 4pt; bottom: 4pt; width: auto; padding: 9pt 11pt 9pt 15pt; background-color: #e1e1e1; }
* html div.ad {margin-right: 10pt;}
*>html div.ad {position: static;}
*>html div.ad div.adText * {margin-left: 4pt;}
*>html div.ad div.adText p.first-child {margin-left: 0;}

/* IE likes r,s,s; NS likes x,s,r; Safari likes x,x,r not x,s,s, but x,r,s OK with nested DIVs */
tr.colHead td {position: relative; padding-top: 24px;}
tr.colHead td.newProducts {padding-top: 50px;}

tr.colHead div.bg {position: relative;}
* html tr.colHead div.bg {position: static;}

h2 {position: relative; z-index: 1; width: auto; padding: 6pt 76pt 8pt 15pt; color: white; font-size: /* x-large */ 14pt; font-weight: 400; font-style: italic; /* line-height: 1.1em */ /* 15pt */; white-space: nowrap;}
img.shadowed {position: absolute; z-index: 0; right: 6pt; bottom: 6pt; width: 60pt; height: 60pt;}

/* Fix image position in Opera 6 and under \*/
html>body img.shadowed {bottom: -38pt; top: auto;}
/* Hide the following from Op6 (and IE) -- see http://www.albin.net/CSS/OwenHack.html */
head:first-child+body img.shadowed {bottom: 6pt; top: auto;} 

tr.colHead td.news div.bg, tr.colStop td.news p {background-color: #87a7bb;}
tr.colHead td.ask div.bg, tr.colStop td.ask p {background-color: #b47c8f;}
tr.colHead td.onweb div.bg, tr.colStop td.onweb p {background-color: #81b89c;}
tr.colHead td.newProducts div.bg, tr.colStop td.newProducts p {background-color: #aeb67f;}

tr.body td.news {border-left: 1pt solid #87a7bb; /* #c5d4dd; */}
tr.body td.ask {border-left: 1pt solid #b47c8f; /* #ede0e4; */}
tr.body td.onweb {border-left: 1pt solid #81b89c; /* #ebede1; */}
tr.body td.newProducts {border-left: 1pt solid #aeb67f; /* #ebede1; */}

tr.colStop td p {padding: 4pt 15pt; white-space: nowrap; font-size: /* small */ 9pt; font-weight: 700; font-style: italic; color: white; /* line-height: 1em; */}

.newProducts .text {padding-left: 8pt;}
.onweb .articles, .news .articles {padding: 8pt 8pt 8pt 8pt;}

.ask div.article {padding: 12pt 8pt 8pt 8pt;}
.ask img.healthGraphic {float: right; margin: 4pt 0pt 4pt 4pt; width: 50%;}
div.healthGraphic div.caption {}
.ask img.initial {width: 27pt; height: 30pt; margin-bottom: -6pt; margin-right: 6pt;}

/* Text formatting */

.news .articles, .news .articles a {/* font-family: Verdana,Arial,Helvetica,sans-serif; */ color: #1c5070;}
.news .articles .title {margin-top: 8pt; font-size: /* medium */ 10pt; font-weight: 700;}
.news .articles .summary {margin-top: 3pt; font-size: /* medium */ 9pt; font-weight: 400;}
.news .articles .link {margin-top: 4pt; font-style: italic; text-align: right;}
.news .articles .link a {/* text-decoration: none; */ color: inherit;}

.ask .article, .ask .article a {/* font-family: Verdana,Arial,Helvetica,sans-serif; */ color: #6C213B;}
.ask .article .question {margin-bottom: 8pt; font-size: /* medium */ 11pt; font-weight: 600; font-style: italic; color: #851c3f;}
.ask .article .answer {margin-top: 4pt; font-size: /* medium */ 9pt; font-weight: 400;}
.ask .article ul {margin-top: 0; margin-bottom: 0;}
.ask .article .link {margin-top: 4pt; font-style: italic; text-align: right;}
.ask .article .link a {/* text-decoration: none; */ color: inherit;}
/* .ask .article .link a:hover, .ask .article .link a:active {text-decoration: underline;} */

.onweb .articles, .onweb .articles a {/* font-family: Verdana,Arial,Helvetica,sans-serif; */ color: #27704a;}
.onweb .articles .title {margin-top: 8pt; font-size: /* medium */ 10pt; font-weight: 700;}
.onweb .articles .summary {margin-top: 3pt; font-size: /* medium */ 9pt; font-weight: 400;}
.onweb .articles .link {margin-top: 4pt; font-style: italic; text-align: right;}
.onweb .articles .link a {/* text-decoration: none; */ color: inherit;}

.newProducts .body .text, .newProducts .body .text a {/* font-family: Verdana,Arial,Helvetica,sans-serif; */ color: #6c772b;}
.newProducts .body .text .product {margin-top: 8pt; font-size: /* medium */ 10pt; font-weight: 700;}
.newProducts .body .text .descrip {margin: 3pt 0 8pt; font-size: /* medium */ 9pt; font-weight: 400;}

.ad .adText {/* font-family: Verdana,Arial,Helvetica,sans-serif; */}
.ad .adText p.head {padding-bottom: 3pt; font-size: /* x-large */ 14pt; font-weight: 800; /* line-height: 1.1em */ /* 15pt */; color: #700;}
.ad .adText p.explain {font-size: /* medium */ 9pt; color: #555;}

.sale .saleText p.head {margin-top: 6pt; color: red; font-weight: 900; font-size: /* x-large */ 18pt; line-height: 1.1em /* 20pt */;}
.sale .saleText p.explain {margin: 5pt 0; font-style: italic; font-weight: 700; font-size: /* medium */ 10pt; line-height: 1.1em /* 11pt */;}
.sale .saleText p.example {margin: 3pt 0; font-weight: 400; font-size: /* small */ 8pt; line-height: 1.1em /* 9pt */;}
.sale .saleText p.product {margin: 0; padding: 2pt 0pt 2pt 4pt; font-weight: bold; font-size: /* medium */ 9pt; line-height: 1 /* 10pt */; border-top: 1px solid purple;}
.sale .saleText p.product span.paren {font-weight: normal; font-size: /* medium */ 8pt;}
.sale .saleText p.quant {margin-top: 1pt; padding-left: 8pt; font-weight: 400; font-size: /* medium */ 9pt; line-height: 1.1em /* 10pt */;}
.sale .saleText p.head span.when {font-size: smaller; line-height: 1em;}
.sale .saleText .blue {color:SteelBlue; font-style:italic;}
.sale .saleText .red {color:red; font-style:italic;}
.sale .saleText .sep {padding-top: 3pt; border-top: 2px solid purple;}

img.plantGraphic {position: relative; z-index: 1; width: 141pt; height: 201pt; margin-right: -16pt;}
ul.nav a.home {color: #666; cursor: default;}
ul.footerNav a.home {color: #aaa; text-decoration: none; cursor: default;}
ul.nav li.simple a.home:hover, ul.nav li.simple a.home:focus {text-decoration: none;}

/* WinIE-only rules: \*/
	* html div.sale {margin: 20pt 16pt 0 10pt;}
	* html div.sale, * html div.ad {z-index: -1;}
/* End WinIE-only */

/* Opera 7-only rules */
@media all and (min-width: 0px){
	div.sale {margin: 20pt 16pt 0 10pt;}
}