/* Hide all by default */
.roll-table tbody,
.roll-table tr {
    display: none;
}

/* The letters to show */
.roll-table.showA .rowA,
.roll-table.showB .rowB,
.roll-table.showC .rowC,
.roll-table.showD .rowD,
.roll-table.showE .rowE,
.roll-table.showF .rowF,
.roll-table.showG .rowG,
.roll-table.showH .rowH,
.roll-table.showI .rowI,
.roll-table.showJ .rowJ,
.roll-table.showK .rowK,
.roll-table.showL .rowL,
.roll-table.showM .rowM,
.roll-table.showN .rowN,
.roll-table.showO .rowO,
.roll-table.showP .rowP,
.roll-table.showQ .rowQ,
.roll-table.showR .rowR,
.roll-table.showS .rowS,
.roll-table.showT .rowT,
.roll-table.showU .rowU,
.roll-table.showV .rowV,
.roll-table.showW .rowW,
.roll-table.showY .rowY,
.roll-table.showZ .rowZ {
    display: grid;
}

/* The media to show */
.roll-table.showPhoto .hasPhoto,
.roll-table.showPhoto tbody,
.roll-table.showPhoto thead tr,
.roll-table.showStory .hasStory,
.roll-table.showStory tbody,
.roll-table.showStory thead tr,
.roll-table.showLetter .hasLetter,
.roll-table.showLetter tbody,
.roll-table.showLetter thead tr,
.roll-table.showMedia .hasMedia,
.roll-table.showMedia tbody,
.roll-table.showMedia thead tr,
.roll-table.showOther .hasOther,
.roll-table.showOther tbody,
.roll-table.showOther thead tr {
    display: grid;
}

/* Show all media */
.roll-table.showAllMedia .hasPhoto,
.roll-table.showAllMedia .hasStory,
.roll-table.showAllMedia .hasLetter,
.roll-table.showAllMedia .hasMedia,
.roll-table.showAllMedia .hasOther,
.roll-table.showAllMedia tbody,
.roll-table.showAllMedia thead tr {
    display: grid;
}

/* Hide all non-tagged rows */
.roll-table.showPhoto tr,
.roll-table.showStory tr,
.roll-table.showLetter tr,
.roll-table.showMedia tr,
.roll-table.showOther tr,
.roll-table.showAllMedia tr {
    display: none;
}

/* Make content icons dark */
.hasPhoto .roll-icon1,
.hasStory .roll-icon2,
.hasLetter .roll-icon3,
.hasMedia .roll-icon4,
.hasOther .roll-icon5 {
    opacity: 1;
}

.roll-index-letters {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.roll-sort button {
    border-width: 0px;
    cursor: pointer;
    color: #726547;
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0);
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    min-height: 44px;
    border-radius: 6px;
    min-width: 22px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.even {
    background-color: #f4eee5;
}

.roll-table tbody tr:hover {
    background: #f2e6d2;
    cursor: pointer;
}

.roll-table tr {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    align-items: center;
    word-break: keep-all;
}

@media (min-width: 500px) {
    .roll-table tr {
        grid-template-columns: 2fr 2fr 1fr 120px;
    }
}

.roll-table {
    width: 100%;
}

.roll-desc {
    margin-right: 20px;
    display: inline-block;
}

.roll-desc dt {
    float: left;
    clear: left;
    font-weight: bold;
    padding-right: 5px;
}

.roll-desc dd {
    width: 100%;
}

dt::after {
    content: ": ";
}

.roll-break {
    margin-top: 20px;
}

.roll-grid {
    display: flex;
    row-gap: 30px;
    flex-direction: column-reverse;
}

@media (min-width: 481px) {
    .roll-grid {
        grid-template-columns: 1fr 1fr;
        display: grid;
        align-items: flex-start;
    }
}

.roll-index {
    display: flex;
}

.roll-image {
    background-size: cover;
    display: inline-block;
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 1/1;
    background-position: center center;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
}

.roll-icon {
    width: 100%;
    display: flex;
    opacity: 0.1;
    min-width: 20px;
    padding: 1px;
    max-width: 20px;
}

.roll-icon-grid {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (min-width: 500px) {
    .roll-icon-grid {
        grid-template-columns: repeat(5, 1fr);
        display: grid;
    }
}

.roll-icon-active {
    opacity: 1;
}

.roll-icon-index {
    opacity: 1;
    margin-right: 10px;
    max-width: 25px;
}

.roll-index-grey {
    color: #bfbfbf;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.roll-index-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (min-width: 1100px) {
    .roll-index-content {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1100px) {
    .roll-index-letters {
        grid-template-columns: repeat(26, 1fr);
    }
}

.roll-sort button:hover {
    background-color: #f2e6d2;
    text-decoration: none;
    color: #000000;
}

.roll-sort .roll-current {
    background-color: #f2e6d2;
    text-decoration: none;
    color: #000000;
}

.roll-table a {
    color: #000000;
    text-decoration: none;
}