html, body {
    height: 90%;
    background: #bdbdbd;
}

#mineralPhotography {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 80%;
    align-items: center;
    justify-content: center;
    margin: auto;
}

#mineralGallery {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 57%;
    margin-right: 5px;
}

#mineralGalleryFilters {
    margin: auto;
    padding-bottom: 5px;
}

#mineralGalleryImages {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}

    #mineralGalleryImages .mineralGalleryThumbnail {
        margin: 2px;
        width: 250px;
        height: 250px;
        position: relative;
        flex: 1 1 20%;
        width: 250px;
        height: 250px;
        max-width: 250px;
        max-height: 250px;
        text-align: center;
    }

        #mineralGalleryImages .mineralGalleryThumbnail:hover {
            outline: 1px solid #3e4756;
            outline-offset: -1px;
        }

            #mineralGalleryImages .mineralGalleryThumbnail:hover figcaption {
                display: block;
            }

    #mineralGalleryImages .mineralGalleryButton {
        border: 0;
        background: none;
        width: 250px;
        height: 250px;
        background-position: center;
        background-repeat: no-repeat;
    }

    #mineralGalleryImages .mineralGalleryCaption {
        position: absolute;
        display: none;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        color: #a2acbd;
        background-color: #3e4756;
        pointer-events: none;
    }

#mineralDetails {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 43%;
    margin-left: 5px;
}

    #mineralDetails #mineralDetailsHeader {
        text-align: center;
        color: #a2acbd;
        background-color: #3e4756;
        font-size: 40px;
        margin: 2px;
    }

    #mineralDetails #mineralDetailsGallery {
        display: flex;
        overflow: auto;
    }

    #mineralDetails .mineralDetailsThumbnail {
        display: table;
        max-width: 250px;
        margin: 2px;
    }

    #mineralDetails .mineralDetailsImage {
        flex: 1 1 20%;
        width: 250px;
        height: 250px;
        max-width: 250px;
        max-height: 250px;
    }

        #mineralDetails .mineralDetailsImage:hover {
            outline: 1px solid #3e4756;
            outline-offset: -1px;
        }

    #mineralDetails .mineralDetailsCaption {
        display: table-caption;
        caption-side: bottom;
        color: #a2acbd;
        background-color: #3e4756;
        font: 11px sans-serif;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        /*        margin-left: 1px;
        margin-right: 1px;
*/ margin-top: -3px;
    }

#mineralDetailsData {
    padding-top: 10px;
}

    #mineralDetailsData .mineralDetailsTable {
        border: 2px solid #000000;
        background-color: #a2acbd;
        width: 75%;
        text-align: left;
        border-collapse: collapse;
        margin: auto;
    }

        #mineralDetailsData .mineralDetailsTable tr:nth-child(even) {
            background: #cb97a4;
        }

        #mineralDetailsData .mineralDetailsTable td {
            border: 1px solid #3e4756;
            padding: 2px 2px;
            color: #3e4756;
        }

        #mineralDetailsData .mineralDetailsTable .mineralInfoHeader {
            width: 30%;
            font-weight: bold;
            vertical-align: top;
        }

        #mineralDetailsData .mineralDetailsTable .mineralInfoDetail {
            width: 70%;
            white-space: pre-line;
            font-family: Calibri;
        }

        #mineralDetailsData .mineralDetailsTable a {
        }

            #mineralDetailsData .mineralDetailsTable a:hover {
            }

        #mineralDetailsData .mineralDetailsTable ul {
            margin: 0;
            padding: 0;
            list-style-position: inside;
            list-style-type: square;
        }