header .topHeader h1,
header .topHeader .additionalHeaderInformation {
    display: inline;
}

header .topHeader > img {
    padding-right: 25px;
}

.informationMaintainer, .selectMaintainer {
    width: 100%;
    text-align: center;
}

#newList {
    width: 100%;
}

.informationMaintainer {
    display: table-cell;
    width: 100%;
}

.selectMaintainer {
    display: table-cell;
    text-align: right;
    padding-left: 5px;
    white-space: pre;
}

#sendReport {
    float: left;
}

#extraInformationReport {
    float: right;
}

.messages textarea {
    width: 100%;
}

#pageBrowsers {
    text-align: right;
}

.loginForm {
    width: 300px;
}

form .fillInOption > label {
    width: 40%;
}

form .fillInOption > input,
form .fillInOption > select {
    width: 60%;
}

form .fillInOption > label,
form .fillInOption > select,
form .fillInOption > input {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
}

.cvsEditArea {
    width: 100%;
}

.itemProperties dt {
    float: left;
}

.itemProperties dt.multilineDefinition {
    float: none;
}

.itemProperties dt.multilineDefinition:after {
    content: '';
    white-space: normal;
}

.itemProperties dt:after {
    content: ': ';
    white-space: pre;
}

.itemProperties dd.multilineDefinition,
.subStoryInformation li {
    margin-left: 5px;
}

.subStoryInformation {
    margin-top: 15px;
    margin-bottom: 15px;
}

main.story .storyImageHighlights {
    display: table;
    table-layout: fixed;
}

.storyImageHighlights:empty {
    margin-left: 0px;
}

.storyImageHighlights .scan {
    display: table-cell;
    vertical-align: top;
}

.storyPublications .storyPublicationsHeader {
    display: table;
}

.storyPublications .storyPublicationsHeader .publicationInformation {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    padding-left: 15px;
}

.storyPublications .storyPublicationsHeader h2 {
    display: table-cell;
}

div.storyVersions {
    width: 100%;
    overflow-x: auto;
}

.verticalTable tbody th {
    text-align: left;
}

.itemTable > thead {
    display: none;
}

.itemTable > tbody > tr {
    display: flex;
    flex-flow: column wrap;
}

.itemTable > tbody > tr.itemSection,
.itemTable > tbody > tr.itemSection > th {
    display: block;
}

/*
 * In older versions of Firefox, around 2021/2022, a column break in a flex
 * box could be acomplished with break-after: always; at those elemnts after
 * which a break needed to be placed. This doesn't work however anymore in
 * the beginning of 2023, and has never worked for other browsers, actually,
 * as it wasn't confirming to the specification.
 * (see Mozilla's bugs 1270891 and 1822586)
 *
 * The way to go is now wrap-after: flex;, even though no browsers support this
 * (as of May 2023).
 */
@supports not (wrap-after: flex) {
    /* Sub-optimal layout, but works without refactoring everything.
     * This is needed for still Chromium 92, in August 2021.
     * It is important to only use it when break-after: always is unavailable,
     * as otherwise the layout becomes a *real* mess.
     */

    .itemTable > tbody > tr {
        display: flex;
        flex-flow: wrap;
    }

    .storyTable > tbody > tr.nothumbnail > .creators,
    .storyTable > tbody > tr.nothumbnail > .prints,
    .storyTable > tbody > tr.nothumbnail > .storycomments,
    .storyTable > tbody > tr > .scans {
        width: 100% !important;
    }

    .issueTable > tbody > tr > .issuecomments,
    .issueTable > tbody > tr > .thumbnail,
    .issueTable > tbody > tr > td:last-child  {
        flex: unset !important;
    }

    .issueTable > tbody > tr > th,
    .issueTable > tbody > tr > td {
        width: 100% !important;
    }

    .movieTable > tbody > tr > th,
    .movieTable > tbody > tr > td {
        flex: unset !important;
        width: 100% !important;
    }
}

.itemTable > tbody > tr {
    padding: 0px;
    margin: 0px;
    border-right: none;
}

.itemTable > tbody > tr:not(:last-child) {
    border-bottom: none;
}

.itemTable > tbody > tr > th,
.itemTable > tbody > tr > td {
    border-top: none;
    border-bottom: none;
    border-left: none;
    box-sizing: border-box;
    float: none;
}

.storyTable > tbody > tr > :not(.code):not(.creators):not(.layout):not(.storycomments):not(.thumbnail) {
    padding-bottom: 0px;
    padding-top: 0px;
}

.storyTable > tbody > tr > .code,
.storyTable > tbody > tr > .creators {
    padding-bottom: 0px;
}

.storyTable > tbody > tr > .layout,
.storyTable > tbody > tr > .storycomments {
    padding-top: 0px;
}

.storyTable > tbody > tr > .layout,
.storyTable > tbody > tr > .storycomments,
.storyTable > tbody > tr > .thumbnail {
    flex: 1;
    wrap-after: flex;
}

.storyTable > tbody > tr > .code,
.storyTable > tbody > tr > .name,
.storyTable > tbody > tr > .layout {
    width: 25%;
}

.storyTable > tbody > tr > .creators,
.storyTable > tbody > tr > .prints,
.storyTable > tbody > tr > .storycomments {
    width: 50%;
}

.storyTable > tbody > tr.nothumbnail > .creators,
.storyTable > tbody > tr.nothumbnail > .prints,
.storyTable > tbody > tr.nothumbnail > .storycomments {
    width: 75%;
}

.storyTable > tbody > tr > .thumbnail {
    display: grid;
    align-content: center;
    width: 25%;
}

.storyTable > tbody > tr > .thumbnail figure img {
    width: 100%;
}

.movieTable > tbody > tr > :not(.code):not(.name):not(.storycomments) {
    padding-bottom: 0px;
    padding-top: 0px;
}

.movieTable > tbody > tr > .code {
    padding-bottom: 0px;
}

.movieTable > tbody > tr > .name {
    padding-top: 0px;
}

.movieTable > tbody > tr > .name,
.movieTable > tbody > tr > .storycomments {
    flex: 1;
    page-break-after: always;
}

.movieTable > tbody > tr > .code,
.movieTable > tbody > tr > .name {
    width: 25%;
}

.movieTable > tbody > tr > .storycomments {
    width: 75%;
}

.issueTable > thead.nothumbnail:not(.everything) {
    display: table-row-group;
}

.issueTable > tbody > tr.nothumbnail:not(.everything) {
    display: table-row;
}

.issueTable > tbody > tr > :not(.code):not(.issuecomments):not(.thumbnail):not(.thumbnail + td):not(td:last-child) {
    padding-bottom: 0px;
    padding-top: 0px;
}

.issueTable > tbody > tr > .code,
.issueTable > tbody > tr > .thumbnail + td {
    padding-bottom: 0px;
}

.issueTable > tbody > tr > .issuecomments,
.issueTable > tbody > tr > td:last-child {
    padding-top: 0px;
}

.issueTable > tbody > tr > .issuecomments,
.issueTable > tbody > tr > .thumbnail,
.issueTable > tbody > tr > td:last-child  {
    flex: 1;
    page-break-after: always;
}

.issueTable > tbody > tr.everything > .code,
.issueTable > tbody > tr.everything > .name,
.issueTable > tbody > tr.everything > .date,
.issueTable > tbody > tr.everything > .issuecomments {
    width: 25%;
}

.issueTable > tbody > tr:not(.nothumbnail) > .thumbnail {
    width: 25%;
}

.issueTable > tbody > tr.everything > * {
    width: 50%;
}

.issueTable > tbody > tr.nothumbnail > :not(.code):not(.name):not(.date):not(.issuecomments) {
    width: 75%;
}

.issueTable > tbody > tr:not(.nothumbnail):not(.everything) > .thumbnail {
    width: 33%;
}

.issueTable > tbody > tr:not(.nothumbnail):not(.everything) > :not(.thumbnail) {
    width: 67%;
}

.issueTable > tbody > tr > [data-legend]:not(.code):not(.name):not(.date):not(.issuecomments):not(.thumbnail):not([data-legend=""]):not(:empty):before {
    content: attr(data-legend) ': ';
}

.storyTable > tbody > tr.article > th.code,
.storyTable > tbody > tr.article > td.name,
.storyTable > tbody > tr.article > td.layout {
    background-color: #cccc99;
}

.storyTable > tbody > tr.gag > th.code,
.storyTable > tbody > tr.gag > td.name,
.storyTable > tbody > tr.gag > td.layout {
    background-color: #ff99ff;
}

.storyTable > tbody > tr.normal > th.code,
.storyTable > tbody > tr.normal > td.name,
.storyTable > tbody > tr.normal > td.layout {
    background-color: #cbdced;
}

.storyTable > tbody > tr.cover > th.code,
.storyTable > tbody > tr.cover > td.name,
.storyTable > tbody > tr.cover > td.layout {
    background-color: #ffcc33;
}

.movieTable > tbody > tr.movie > th.code,
.movieTable > tbody > tr.movie > td.name {
    background-color: #5ed1d1;
}

.issueTable > tbody > tr.full > .code,
.issueTable > tbody > tr.full.everything > .name,
.issueTable > tbody > tr.full.everything > .date,
.issueTable > tbody > tr.full.everything > .issuecomments {
    background-color: #adffcb;
}

.issueTable > tbody > tr.partial > .code,
.issueTable > tbody > tr.partial.everything > .name,
.issueTable > tbody > tr.partial.everything > .date,
.issueTable > tbody > tr.partial.everything > .issuecomments {
    background-color: #ffdd87;
}

.itemTable .position,
.itemTable .hero,
.itemTable .pagel,
.itemTable .part {
    font-size: x-small;
}

/* Restore smaller font if no title is following; restoring done to allow old
 * browsers to show normally the hero small.
 */
.itemTable .hero:last-child {
    font-size: inherit;
}
.itemTable .description,
.itemTable .comment {
    display: none;
}

.itemTable .scan figure img {
    max-width: 100%;
    table-layout: fixed;
}