/* Genera, species, etc., lists.  */

div.genus-info {
    margin-bottom: 3em;
}

/* genus name */
.genus h3 {
    border-top: 5px #CCCC99 solid;
    color: #006600;
    font-family: Geneva, Arial, Verdana, sans-serif;
    font-size: 21px;
    font-weight: normal;
    font-style: italic;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 5px;
}

/* don't change heading style for links */
.genus h3 a:link,
.genus h3 a:visited,
.genus h3 a:hover,
.genus h3 a:active {
    color: #006600;
    text-decoration: none;
}

/* common name of genus */
.genus h4 {
    color: #006600;
    font-family: Geneva, Arial, sans-serif;
    font-size:  17px;
    font-weight: bold;
    letter-spacing: .02em;
    margin-top: 0px;
    margin-bottom: 4px;
    padding: 5px;
}

/* thumbnails in genus lists */
.genus-thumb {
    border: 0;
    float: right;
    margin: 0 10px;
}

/* placeholder thumbnail in genus lists */
.camera {
    width: 100%;
    max-width: 44px;
    max-height: 30px;
}

/* plant name in genus listing */

div.plant {
    margin-bottom: 2em;
}

.plant h5 {
    display: inline;
    color: black;
    font-family: Geneva, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0px;
    text-align: left;
}

.plant h5 a:link,
.plant h5 a:visited,
.plant h5 a:hover,
.plant h5 a:active {
    color: black;
    text-decoration: none;
}

img.plant-attribute {
    border: 0;
    width: 100%;
    /* this is the min h/w of all the attribute
       images (sun, ptshade, shade, new, drought). */
    max-width: 15px;
    max-height: 15px;
}

/* species common names */
.plant h6 {
    color: #006600;
    font-family: Geneva, Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 0px
}

.plant h6 a:link,
.plant h6 a:visited,
.plant h6 a:hover,
.plant h6 a:active {
    color: #006600;
    text-decoration: none;
}

.species-thumb {
    float: left;
    margin-left: 0;
    margin-right: .5em;
    padding: .3125em;
    border: 1px solid black;
}

.species-drawing {
    float: right;
    margin: 5px 0;
    border: 0;
    max-height: 200px; /* distorts (larger) images */
}

div.plant-info p {
    margin: .5em 0;
}

div.plant-cart-info {
    float: right;
    text-align: right;
    width: 15em;
    margin-left: 2em;
}

div.plant-cart-info p.plant-name {
    margin-top: .5em;
    margin-bottom: 0;
}

div.plant-cart-info p.plant-name a:link,
div.plant-cart-info p.plant-name a:visited,
div.plant-cart-info p.plant-name a:hover,
div.plant-cart-info p.plant-name a:active {
    color: black;
    text-decoration: none;
}

div.plant-cart-info p.price {
    margin: .5em 0;
}

div.plant-cart-info input[type=number] {
    width: 5em;
    text-align: center;
}

p.sold-out,
p.tempout {
    font-weight: bold;
}

p.sold-out {
    font-size: smaller;
}

p.tempout {
    color: #006600;
}

/* On smaller screens, make each plant container flex, and reorder the
   elements so the cart info is at the bottom, and not floated right,
   but still aligned right. */
@media only screen and (max-width: 1340px) {
    div.plant {
        display: flex;
        flex-direction: column;
    }
    div.plant div.plant-header-info {
        order: 1;
    }
    div.plant div.plant-cart-info {
        order: 3;
        float: none;
        align-self: flex-end;
        width: 100%;
        margin: auto;
    }
    div.plant div.plant-info {
        order: 2;
    }
}