/*
  Standard layout for the entire site.
*/
#body {
    font-family: Georgia;    
    font-size: 100%;
    background-color: #ffffff;  
    text-align: center; /* Center the middle stuff in IE. */
    padding: 0; 
    margin: 0;
}
#header {
    text-align: center; /* To align menu on IE.*/
    border-bottom: .1em solid #789a5f;
    background-color: #97c858;
}
#hbanner {
    border-bottom: .1em solid #789a5f;
    background-color: #45692c;
}
#hbanner img {
    border:0;
    padding:0;
    margin:0;
}
#hbanner a {
    padding: 0;
    border: 0;
}
#hgeneralmenu {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#footer {
    /*Not a lot is happening in here.*/
}
#fbanner {
    background-image: url(/s/images/layout/footer-slice.jpg); 
    background-repeat: repeat-x; 
    padding:0; 
    margin:0;
}
div.footer {
    text-align: center;
}
#fquestion {
    margin-left: auto; 
    margin-right: auto; 
    width: 600px;
    text-align: left;
}
#fquestion img {
    float: left;     
    margin: 5px;   
}
#container {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 10px; /* So the text doesn't run to the sides. */
}
/* center is set on body */
.container_24 {
    text-align: left;
}

a {
    color: #2F4F2F;
    padding-left: 2px;
    padding-right: 2px;
}
a:hover {
    text-decoration: none;
}

/* Use to clear floats. */
.clear {
    clear: both;
}
/* So that the visual and non-visual may continue to live in harmony. */
.screenreader {
    position: absolute;
    left: 0px;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.vi {
    color: orange;
    font-weight: bold;
    font-family: Verdana;
}
p.indent {
    text-indent: 1.5em; /* INDENTS paragraphs*/
}
.hide {
    display: none;
}
#generalmenu, #generalmenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: verdana;
    line-height: 1;
}
#generalmenu a {
    display: block;
    margin: 0;
    padding: .5em 14px .5em .5em;/* Overpad the left side.*/
    background-image: url(/s/images/down.gif);
    background-position: right center;
    background-repeat: no-repeat;
}
#generalmenu ul li a {
    background-image: none;
}
#generalmenu li {
    float: left;
    width: 12em;
    text-align: left;
    padding: 0;
    margin: 0;
}
#generalmenu {
    /* This is convenient. */
    width: 24.8em;
}
#generalmenu li ul li {
    /* Dropdowns */
    float: left;
    width: 22em;
}
#generalmenu li ul {
    background-color: white;
    position: absolute;
    width: 22em;
    left: -999em;
    border-color: #789a5f;
    border-style: solid;
    border-width: .1em .1em .1em .1em;
}
#generalmenu li ul a {
    border-bottom: .1em solid #789a5f;      
}
#generalmenu li:hover, #generalmenu li.sfhover {
    background-color: white;
}
#generalmenu li:hover ul, #generalmenu li.sfhover ul {
    left: auto;
    background-color: #97c858;
}    
/* Poprights */
#generalmenu li ul ul {
    margin: -2.1em 0 0 22em;
}
#generalmenu li:hover ul ul, #generalmenu li:hover ul ul ul, #generalmenu li.sfhover ul ul, #generalmenu li.sfhover ul ul ul {
    left: -999em;
}
#generalmenu li:hover ul, #generalmenu li li:hover ul, #generalmenu li li li:hover ul, #generalmenu li.sfhover ul, #generalmenu li li.sfhover ul, #generalmenu li li li.sfhover ul {
    left: auto;
}
/* Business Menu */    
#businessmenu, #businessmenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: verdana;
    line-height: 1;
}
#businessmenu a {
    display: block;
    margin: 0;
    padding: .5em 14px .5em .5em;/* Overpad the left side.*/
    background-image: url(/s/images/down.gif);
    background-position: right center;
    background-repeat: no-repeat;
}
#businessmenu ul li a {
    background-image: none;
}             
#businessmenu li {
    float: right;
    width: 6em;
    text-align: left;
    padding: 0;
    margin: 0;
    position: relative;
}
#businessmenu {
    /* This is convenient. */
    width: 30em;
}
/* The actual dropdown part. */
#businessmenu li ul li {
    float: left;
    width: 15em;
}
#businessmenu li ul {
    background-color: white;
    position: absolute;
    width: 15em;
    left: -999em;
    border-color: #DCDCDC;
    border-style: solid;
    border-width: .1em .1em .1em .1em;
}
#businessmenu li:hover, #businessmenu li.sfhover {
    background-color: white;
}
#businessmenu li:hover ul, #businessmenu li.sfhover ul {
    left: auto;
    right: 0;
    background-color: #97c858;
}    
/* Poprights */
#businessmenu li ul ul {
    margin: -2.2em 15em 0 0;
}
#businessmenu li:hover ul ul, #businessmenu li:hover ul ul ul, #businessmenu li.sfhover ul ul, #businessmenu li.sfhover ul ul ul {
    left: -999em;
}
#businessmenu li:hover ul, #businessmenu li li:hover ul, #businessmenu li li li:hover ul, #businessmenu li.sfhover ul, #businessmenu li li.sfhover ul, #businessmenu li li li.sfhover ul {
    left: auto;
    right: 0;
}
/* Bread Crumb Trail. */
#bctcontainer {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 990px;
}
#bct li a, #bct li span {
    display: block;
}
#bct li {
    float: left;
    list-style-type: none;
}
/* Shop link in menu. */
#shop a{
    font-weight: bold;
}
#shop ul a{
    font-weight: normal;
}
/* Cart link in menu. */
#cart a {
     background-image: url(/s/images/right.gif);
     margin-right: 1em;
}
/* Resize headers so they are not ridiculous. */
h1 {
    font-size: 1.6em;
}
h2 {
    font-size: 1.4em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1em;
}
/* Make uls pretty. */
ul.pretty_list {
    list-style-type: none;    
}
ul.pretty_list li {
    margin-top: 5px;
    margin-bottom: 5px;
}
table.zebra {
    border: 2px solid black;
}
table.zebra th {
    text-align: center;
    border-right: 0;
    border-left: 1px solid #d9d9d9;
    padding: 3px 8px;
}
table.zebra td {
    border-left: 1px solid #d9d9d9;
    border-right: 0;
    padding: 3px 8px;
    background-color: #ffffff;
}
table.zebra tr.even td {
    background-color: #EDF3FE;
}
table.small {
    font-size: .9em;
}/*
  The shop browser uses all this css to look pretty or at least readable.
*/
h1.shop {
    padding: 0;
    margin: .2em;
    font-size: 1.4em;
}
.first {
    border-left: 0;
}
span.inproduction {
    display: block;
    padding-bottom: .2em;
    color: #a3a3a3;
}
span.instock {
    font-family: Verdana;
}
table.add_to_cart td, table.add_to_cart th {
    border-bottom: 2px solid white;
    margin: .25em;
    padding: 0;
}
/* Error when purchasing item. */
span.item_error {
    color: red;
}
/* Not sure if this is used. */
.fielderror {
    color: red;
}
.fieldexample {
    color: #00008B; /* darkblue */
}
.std_error {
    color: red;
}
/* Used when displaying thumbnails. */
div.thumbbox {
    margin: 10px;
    text-align: center;    
}
div.thumbbox img {
    margin: 0;
    padding: 0;
    border: 0;
}
/* Media */    
div.image{
    text-align: center;
}
div.image img{
    margin: 0;
    padding: 0;
    border: 0;    
}
div.movie{
    text-align: center;
}
div.movie embed {
    margin: 0;
    padding: 0;
    border: 0;    
}
div.media_floated_left div.media_panel {
    float: left;    
}
div.media_floated_right div.media_panel {
    float: right;    
}
div.media_panel{
    margin: 5px;
    padding: 0;
}


/*
  TODO: None of these should be here.

  Need to be factored into something like page.css or sections.css
*/
.gallery-image-container {
    float: left;
    overflow: hidden;
}

/* Used to center the block. */
.gallery-image-container a {
    display: block;
}

.gallery-thumb {
    width: 148px; /* 128 + 10 * 2*/
    padding: 0;
    margin: 0;
}
.gallery-caption {
    /* adds to gallery-thumb width*/
    width: 138px;
    margin: 5px;
}

.gallery-header, .gallery-footer {
    /* To prevent margin collapsing.*/
    padding: 5px;
}

.grid_image_spacer {
    height: 5px;
    border: 0;
    padding: 0;
    margin: 0;
}
.grid_image {
    /*
      The grid image itself.
    */
    display: block;
    margin: 5px 0;
}
.grid_image_caption {
    /*
      Caption below grid image.
    */
    text-align: center;
    /* Horizontal margins will be handled by grid. */
    margin: 5px 0;
}

.grid_image_lightbox {
    /*
      Link that wraps the image.
    */
    display: block;
    padding: 0;
    margin: 5px 0;
}
/* Turn margin off if we are in a link. */
.grid_image_lightbox grid_image{
    margin: 0;
}


.grid_text {
    margin: 0 5px;
}/* Set the default font and background color. Take that subspace.*/
.title {
    font-weight: bold
}
/* Who uses this ? */
.even {
  background-color: #e6e6ff;
}
/* For all those boxy boxes. */
div.boxy {
    width: 780px;
    /*background-image: url(/s/images/plants/tinybfly.jpg);*/
}
/* The cells you wanted...*/
tr.inventoryRow td {
    width: 100px;
    text-align: center;
}
/* The row .. uh.. you want this too.. i think*/
tr.inventoryRow {
    background-color: #d3ffc3; 
}      
/* plantsAvailableOnline */      
#onlineTable {
    float: left;
    margin: 5px;          
}
#shoppingCart {
    float: right;
    text-align: center;
    border: 2px #5b8ec3 solid; 
}
#shoppingCart h4 {
    margin: 0px;
    padding: 5px;
}
#shoppingCart form{
    padding: 5px;
}      
#shoppingCart form input {
    font-size: 1.2em;
}       
#plantsAvailableOnline p{
    clear: left;
    clear: right;
    padding: 5px;
    margin: 5px;
}
/* Umm those boxy headers? I'm out of ideas. */
div.boxy h2 {
    padding-left: 30px;
    width: 750px;
    font-size: 1em;
    color: #45692c; /* #19b719; */
    border-bottom: 1px black solid;
    /*background-image: url(/s/images/plants/tinybfly.jpg);       */
    /*background-image: url(/s/images/plants/littleMonarch_butterfly.jpg);                 */
    background-image: url(/s/images/plants/blue.jpg);                 
    background-position: top left;
    background-repeat: no-repeat;
}
div.miniboxy h2 {
    width: 300px;
}
/*
#menu {
    position: relative; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 20px;
    z-index: 99;
}
*/
#ranges th{
    text-align: right;
}
/*TODO: Merge with basic.css */
#thumbs img {
    border: 1px solid black;
}

div.product_thumb a {
    font-weight: bold;
}


table.storefront_product_display {
    padding: 10px;
    width: 100%;
}
table.storefront_product_display td {
    border: 1px solid #efefef;
}
table.storefront_product_display th {
    background-color: #efefef;
}
table.storefront_product_display td.inventory, table.storefront_product_display td.price {
    background-color: #eeffee;
}

/*duplicate
h1 {
    margin: 0;
    padding: 0;
    text-align: center;
}
*/

#image_brochure_wrapper .boxy {
    width: 450px;
}
#image_brochure_wrapper .boxy h2 {
    width: 430px;
}
/*TODO: merge with basic.css*/
td.production {
    color: #acacac;
}
p.thumb_info {
    font-family: Verdana;
    font-weight: bold;
    color: #AE8B47;
}

#image {
    width: 500px;
}    

.add_to_cart {
    margin: 10px;
}
table.add_to_cart th {
    background-color: #efefef;
}
table.add_to_cart td {
    border: 1px solid #efefef;
}
span.item_error {
    color: red;
}

.page_window {
    text-align: center;
    margin: .5em;
    font-family: Verdana;
}
.page_window span {
    font-weight: bold;
}
.page_window a, div.window span {
    margin: .25em;
    padding: .25em;
}
.filter_display_column {
    width: 200px;
}
.filter_display_container {
    text-align: left;
    margin: 0;
    padding: 0;
}
.filter_display_container h3 {
     margin: .25em;
     padding: 0 2em .1em 0;
     background-image: url(/s/images/down.gif);
     background-repeat: no-repeat;
     background-position: right center;
     border-bottom: .1em solid darkgreen;
     text-align: center;
}
.filter_display_panel {       
    width: 190px;
    margin: 5px;
    padding: 5px;
    border: 0;
}
#filter_display_container .first {
    border-left: 0;
}
.filter_display_panel h4 {
    margin: 0 0 .25em 0;
    padding: 0;
    color: #A64B00;
    border-bottom: 1px solid #FFB273;
}
.filter_display_panel ul {
    margin: 0;
    padding: 0;
    list-style-type: None;
}
.filter_display_panel ul li {
    list-style-type: None;
}
.filter_display_panel ul li span.selected{
    color: #743400; 
    font-weight:bold;
}
.filter_display_panel ul li.selected {
    padding-left: 1em;
    float: none;
    background-image: url(/s/images/right.gif);
    background-position: left center;
    background-repeat: no-repeat;
}
.filter_display_panel ul li.remove {
    float: none;
}
.filter_display_panel ul li {
    /* So you can read filter links. */
    margin-top: 4px;
}
.filter_display_float_left ul li {
    float: left;
}
table.browselist a.product_image_thumb{
    margin-right: 2em;
    display: block;
}
table.browselist a.product_image_thumb img{
    border: 0;
}
table.browselist td.sd {
    width: 200px;
}
a.browseto {
    font-weight: bold;
}
/* Thumbnail */
table.browselist img {
    border: 1px solid #666666;
}

/* Container holds filters and browse results. */
.browser-container td {
    border: 0;
}