div.bigbox {
    width: 600px;
    margin: 15px auto;
    padding: 5px;
    border: 3px solid #636;
    background-color: #CC9;
}

/* Override #search-box to match .blurb width. */
#search-box { width: 700px; }
/* Switch to full width at small viewport size. */
@media only screen and (max-width: 767px) {
    #search-box { width: 100%; }
}
/* Fixed size to accomodate opensign image. */
div.blurb {
    width: 700px;
    padding: 15px;
    border: 2px solid #060;
    margin: 20px auto;
}
#open-sign {
    text-align: center;
}
#open-sign img {
    /* /images/grafs/2014/opensign.jpg */
    width: 600px;
    height: 357px;
}
/* Gracefully resize the image at smaller widths,
   and center the text on narrower screens. */
@media only screen and (max-width: 767px) {
    div.blurb {
        width: 100%;
        text-align: center;
    }
    #open-sign img {
        width: 100%;
        height: auto;
        max-width: 600px;
    }
}

img#banner {
    float: left;
    padding-right: 15px;
}
td#blackban {
    background-color: white;
    height: 305px;
}
div.news {
    margin: 20px auto;
}

div#image-links {
    width: 85vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin: auto;
}
div.image-link {
    display: inline;
}
div#image-links img {
    margin: .2em;
}
img#wide-img {
    margin: auto;
    max-width: 85vw;
}

table#homegrid {
    width: 720px;
    margin: auto;
    margin-bottom: 2em;
    border-spacing: 0;
    border-collapse: collapse;
}
table#homegrid td {
    padding: 3px;
}
table#homegrid caption {
    caption-side: bottom;
}
table#homegrid img {
    max-width: 140px;
    max-height: 160px;
}
table#homegrid img.tall {
    max-height: 320px;
}
table#homegrid img.wide {
    max-width: 420px;
}

/* Toggle the table and flexbox at this point. */
@media only screen and (min-width: 971px) {
    table#homegrid { display: inherit; }
    div#image-links { display: none; }
}
@media only screen and (max-width: 970px) {
    table#homegrid { display: none; }
    div#image-links { display: flex; }
}
/* When there are 4 columns of images (or 4 images
   per row; however you want to think about it). */
@media only screen and (max-width: 970px) {
    /* Listed in HTML order. */
    #alstroemeria	{ order: 1; }
    #eryngium		{ order: 2; }
    #geranium		{ order: 3; }
    #sanguisorba	{ order: 4; }
    #kniphofia		{ display: none; }
    #stipa		{ display: none; }
    #salvia		{ order: 5; }
    #halimiocistus	{ order: 6; }
    #xantheros		{ order: 7; }
    #aster		{ order: 8; }
    #nursery		{ display: none; }
    div#image-links	{ max-width: 650px; }
}
/* When there are 3 columns of images (or 3 images
   per row; however you want to think about it). */
@media only screen and (max-width: 691px) {
    /* Listed in HTML order. */
    #alstroemeria	{ order: 1; }
    #eryngium		{ order: 8; }
    #geranium		{ order: 4; }
    #sanguisorba	{ order: 7; }
    #kniphofia		{ display: none; }
    #stipa		{ display: none; }
    #salvia		{ order: 2; }
    #halimiocistus	{ order: 3; }
    #xantheros		{ order: 5; }
    #aster		{ order: 6; }
    #nursery		{ display: none; }
    img#wide-img	{ max-width: 290px; }
}
/* When there are 2 columns of images (or 2 images
   per row; however you want to think about it). */
@media only screen and (max-width: 518px) {
    /* Listed in HTML order. */
    #alstroemeria	{ order: 1; }
    #eryngium		{ order: 8; }
    #geranium		{ order: 3; }
    #sanguisorba	{ order: 10; }
    #kniphofia		{ order: 5; display: inline; }
    #stipa		{ order: 6; display: inline; }
    #salvia		{ order: 7; }
    #halimiocistus	{ order: 2; }
    #xantheros		{ order: 9; }
    #aster		{ order: 4; }
    #nursery		{ order: 11; display: inline; }
    img#wide-img	{ max-width: 290px; }
}

#catalog-cover {
    text-align: center;
    margin-bottom: 2em;
}
/* Keep a fixed width that matches the blurb (above)
   and search (below). */
#catalog-cover img {
    max-width: 700px;
    height: auto;
}
@media only screen and (max-width: 767px) {
    #catalog-cover img {
        width: 100%;
        max-width: unset;
    }
}

/* Must override the center class in selector. */
div#content div.social-media.center {
    margin-top: 2em;
}
div#content section {
    margin-bottom: 2em;
}
section#site-links {
    margin-top: 2em;
}
section#site-links h2 {
    margin: auto;
    max-width: 550px;
}
.genus {
    font-style: italic;
}
div.link-flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    width: 50%;
    margin: auto;
    margin-bottom: 2em;
    text-align: center;
}
div.link-cell {
    width: 140px;
}
div.link-cell p {
    font-size: large;
    font-weight: bold;
}
@media only screen and (max-width: 1000px) {
    section#site-links h2 {max-width: 100%;}
    section#genera-links,
    section#complete-lists,
    section#catnav-links {
        width: 100%;
    }
}

/* Override the default news and fave widths to match
   all the other elements on the page. */
div.content div.fave,
div.content div.news.wide {
    width: 700px;
}
@media only screen and (max-width: 767px) {
    div.content div.fave,
    div.content div.news.wide {
        width: 100%;
    }
}