/*
Digits: U+0030-0039
Uppercase: U+0041-005A
Lowercase: U+0061-007A
*/

@font-face {
    font-family: elvish;
    src: local('Open Sans'), local('sans-serif');
    unicode-range: U+0000-007F;
}
@font-face {
    font-family: elvish;
    src: url(../Fonts/Rellanic.otf);
    unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: dwarvish;
    src: local('Open Sans'), local('sans-serif');
    unicode-range: U+0000-007F;
}

    @font-face {
        font-family: dwarvish;
        src: url(../Fonts/Davek.otf);
        unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
    }

@font-face {
    font-family: draconic;
    src: local('Open Sans'), local('sans-serif');
    unicode-range: U+0000-007F;
}
    @font-face {
        font-family: draconic;
        src: url(../Fonts/Iokharic.otf);
        unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
    }

@font-face {
    font-family: abyssal;
    src: local('Open Sans'), local('sans-serif');
    unicode-range: U+0000-007F;
}
    @font-face {
        font-family: abyssal;
        src: url(../Fonts/Barazhad.otf);
        unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
    }

    html {
    --background: rgb(250,250,250);
    --text: #000;
    --input-back: #FFF;
    --button-text: #FFF;
    --grey: #CCC;
    --validation: #F00;
    --hover: #444;
    --disabled: #888;
    --paper: #f2d7ac;
    --border: #AAA;
    --page-select: #122138;
    --page-select-hover: #9acae6;
    --table-alt: #DDD;
    --link: #00F;
    --link-hover: #005;
    --abbr: #EEE;
    --check: #f2d7ac;
    --checked: #2196F3;
    --always-white: #FFF;
    --black: #000;
    --silver: #c0c0c0;
    --white: #FFF;
    --maroon: #800000;
    --red: #F00;
    --purple: #800080;
    --fuchsia: #ff00ff;
    --green: #008000;
    --lime: #0F0;
    --olive: #808000;
    --yellow: #ffff00;
    --navy: #000080;
    --blue: #00F;
    --teal: #008080;
    --aqua: #0FF;
}

form.theme-dark {
    --background: #1A1A2E; /* Deep dark blue/purple */
    --text: #E0E0E0; /* Off-white for readability */
    --input-back: #2E2E4A; /* Slightly lighter dark blue/purple for input fields */
    --button-text: #E0E0E0;
    --grey: #2A2A4A; /* Medium dark blue/grey for secondary text/icons */
    --validation: #FF6B6B; /* Vibrant red for errors, stands out clearly */
    --hover: #6A6ABD; /* Muted blue for interactive elements on hover */
    --disabled: #3A3A5E; /* Darker grey/blue for disabled elements */
    --paper: #0A0A1A;
    --border: #5A5A7A; /* Medium dark blue/grey for borders */
    --page-select: #7FD8FF; /* Light, bright blue for selected page indicator */
    --page-select-hover: #B3E0FF; /* Lighter blue on hover for page selection */
    --table-alt: #252540; /* Slightly lighter dark background for alternating table rows */
    --link: #7FD8FF; /* Light bright blue for links */
    --link-hover: #B3E0FF; /* Lighter blue for links on hover */
    --abbr: #323250; /* Darker subtle grey for abbreviations */
    --check: #3A2A4E; /* Same as paper for checkboxes */
    --checked: #00BFFF; /* Deep sky blue for checked states */

    --blue: #0047AB;
}

form.theme-earth {
    --background: #F8F4E3; /* Creamy off-white, warm and inviting */
    --text: #000; /* Dark chocolate brown for main text */
    --input-back: #FFFCF2; /* Slightly lighter cream for input fields */
    --button-text: #FFFCF2;
    --grey: #DED8C6; /* Light warm grey/taupe for secondary text/icons */
    --validation: #D35400; /* Burnt orange/terra cotta for errors */
    --hover: #6B8E23; /* Olive green for interactive elements on hover */
    --disabled: #B8B09F; /* Muted light brown for disabled elements */
    --paper: #C8AE7F; /* Warm tan/parchment for paper-like elements */
    --border: #A0988A; /* Medium warm grey/brown for borders */
    --page-select: #5F9EA0; /* Cadet blue/muted teal for selected page indicator */
    --page-select-hover: #8DE6ED; /* Lighter teal on hover for page selection */
    --table-alt: #EFEBE0; /* Very light warm grey for alternating table rows */
    --link: #2C5F2D; /* Forest green for links */
    --link-hover: #4A834B; /* Lighter forest green for links on hover */
    --abbr: #E0DBCF; /* Lighter warm grey for abbreviations */
    --check: #C8AE7F; /* Same as paper for checkboxes */
    --checked: #388E3C; /* Medium green for checked states */
}

form.theme-pop {
    --background: #FFFDE7; /* Very pale yellow, bright and cheerful */
    --text: #3F51B5; /* Deep Indigo for main text, strong contrast */
    --button-text: #3F51B5;
    --input-back: #FFFFFF; /* Pure white for input fields */
    --grey: #BDBDBD; /* Neutral medium grey for secondary text/icons */
    --validation: #F44336; /* Vibrant red for errors */
    --hover: #FFEB3B; /* Vibrant yellow for interactive elements on hover */
    --disabled: #9E9E9E; /* Darker neutral grey for disabled elements */
    --paper: #FFE082; /* Light Amber for paper-like elements */
    --border: #90CAF9; /* Light blue for borders */
    --page-select: #E91E63; /* Deep pink/magenta for selected page indicator */
    --page-select-hover: #F06292; /* Lighter pink on hover for page selection */
    --table-alt: #FFFCE0; /* Slightly lighter pale yellow for alternating table rows */
    /*--link: #00BCD4;*/ /* Vibrant Cyan for links */
    /*--link-hover: #0097A7;*/ /* Darker Cyan for links on hover */
    --link: #9C27B0; /* Vibrant Cyan for links */
    --link-hover: #7B1FA2; /* Darker Cyan for links on hover */
    --abbr: #F0F4C3; /* Very pale lime green for abbreviations */
    --check: #FFE082; /* Same as paper for checkboxes */
    --checked: #4CAF50; /* Vibrant Green for checked states */
}

form.theme-pro {
    --background: #F5F7FA; /* Very light cool grey */
    --text: #1A202C; /* Very dark charcoal for maximum contrast */
    --button-text: #FFF;
    --input-back: #FFFFFF; /* Pure white for input fields */
    --grey: #CBD5E0; /* Medium light grey for secondary text/icons */
    --validation: #E53E3E; /* Standard vibrant red for errors */
    --hover: #4299E1; /* Medium sky blue for interactive elements on hover */
    --disabled: #A0AEC0; /* Medium grey for disabled elements */
    --paper: #EDF2F7; /* Slightly darker very light grey for paper-like elements */
    --border: #E2E8F0; /* Light grey for borders */
    --page-select: #2B6CB0; /* Deep blue for selected page indicator */
    --page-select-hover: #3182CE; /* Brighter deep blue on hover for page selection */
    --table-alt: #F8FAFC; /* Almost white, slightly tinted for alternating table rows */
    --link: #3182CE; /* Bright clear blue for links */
    --link-hover: #2B6CB0; /* Slightly darker blue for links on hover */
    --abbr: #EAF0F6; /* Very very light grey for abbreviations */
    --check: #EDF2F7; /* Same as paper for checkboxes */
    --checked: #2D7FEE; /* Clear vibrant blue for checked states */
}

form.theme-mono {
    --background: #FFFFFF; /* Pure White for a crisp base */
    --text: #000000; /* Pure Black for maximum readability */
    --button-text: #FFF;
    --input-back: #FFFFFF; /* Pure White for input fields */
    --grey: #999; /* Medium dark grey for secondary text/icons */
    --validation: #333333; /* Very dark grey for errors, relying on strong contrast and accompanying icons/bolding */
    --hover: #333333; /* Dark grey for interactive elements on hover */
    --disabled: #AAAAAA; /* Medium light grey for disabled elements, subtle */
    --paper: #F2F2F2; /* Very light grey for paper-like elements, subtle distinction */
    --border: #999999; /* Medium grey for borders */
    --page-select: #000000; /* Black for selected page indicator */
    --page-select-hover: #666666; /* Medium dark grey on hover for page selection */
    --table-alt: #F8F8F8; /* Slightly lighter grey for alternating table rows */
    --link: #000000; /* Black for links (will rely on underline or bold for distinction) */
    --link-hover: #666666; /* Medium dark grey for links on hover */
    --abbr: #E0E0E0; /* Light grey for abbreviations */
    --check: #F2F2F2; /* Same as paper for checkboxes */
    --checked: #000000; /* Black for checked states */
}

form.theme-pink {
    --background: #FCE4EC; /* Very light pink, almost white */
    --text: #000;
    --button-text: #FFF;
    --input-back: #FFFFFF; /* Pure white for input fields */
    --grey: #CE93D8; /* Muted lavender/light purple for secondary text/icons */
    --validation: #D81B60; /* Vibrant raspberry pink for errors */
    --hover: #8E24AA; /* Medium purple for interactive elements on hover */
    --disabled: #B39DDB; /* Lighter, desaturated purple for disabled elements */
    --paper: #E1BEE7; /* Light lavender purple for paper-like elements */
    --border: #C2A7D8; /* Medium light purple for borders */
    --page-select: #880E4F; /* Deep magenta/berry for selected page indicator */
    --page-select-hover: #AD1457; /* Slightly lighter deep magenta on hover for page selection */
    --table-alt: #F8EBF0; /* Very light pink for alternating table rows */
    --link: #6A1B9A; /* Rich purple for links */
    --link-hover: #4A148C; /* Darker purple for links on hover (same as text for strong contrast) */
    --abbr: #F3E5F5; /* Very light subtle purple for abbreviations */
    --check: #E1BEE7; /* Same as paper for checkboxes */
    --checked: #AB47BC; /* Medium vibrant purple for checked states */
}

form.theme-psy {
    --background: #1E122A; /* Very deep, dark plum/eggplant for the background */
    --text: #E0BBE4; /* Light, soft lavender/pink for main text, providing good contrast */
    --input-back: #2A1A3A; /* Slightly lighter version of background for input fields */
    --grey: #5A4D67; /* Muted medium purple-grey for secondary text/icons */
    --validation: #FF6B6B; /* Vibrant red for errors, ensures clear visibility */
    --hover: #957DAD; /* Medium light purple for interactive elements on hover */
    --disabled: #4A3B5B; /* Darker muted purple-grey for disabled elements */
    --paper: #3F2D4A; /* Darker, more muted purple-pink for paper-like elements */
    --border: #5C4B6E; /* Medium dark purple-grey for borders */
    --page-select: #FF4081; /* Vibrant pink/fuchsia for selected page indicator */
    --page-select-hover: #FF80AB; /* Lighter vibrant pink on hover for page selection */
    --table-alt: #2B1F3C; /* Slightly different dark shade for alternating table rows */
    --link: #DAA5FF; /* Light vibrant purple/lilac for links, stands out */
    --link-hover: #B565F3; /* Slightly darker vibrant purple for links on hover */
    --abbr: #3A2E45; /* Subtle darker background color for abbreviations */
    --check: #3F2D4A; /* Same as paper for checkboxes */
    --checked: #FF4081; /* Same vibrant pink as page-select for a clear "checked" state */
    --silver: #D9D9D9;
    --white: #FFF;
    --maroon: #B33C3C;
    --red: #FF3333;
    --purple: #B33CB3;
    --fuchsia: #FF66FF;
    --green: #3CB33C;
    --lime: #33FF33;
    --olive: #B3B33C;
    --yellow: #FFFF33;
    --navy: #3333B3;
    --blue: #5555FF;
    --teal: #3CB3B3;
    --aqua: #33FFFF;
}

form.theme-teal {
    --background: #F0F8F8; /* Very light, almost white with a subtle teal tint, like clear sky */
    --text: #003333; /* Very dark, deep teal for excellent readability and depth */
    --input-back: #FFFFFF; /* Pure white for input fields, crisp and clean */
    --grey: #A7D9D2; /* UPDATED: Lighter, more readable teal for secondary elements/background for text */
    --validation: #D32F2F; /* Standard vibrant red for errors, providing necessary contrast */
    --hover: #00BCD4; /* Vibrant electric teal/cyan, like magical energy or lightning */
    --disabled: #B2DFDB; /* Lighter muted teal for disabled elements */
    --paper: #E0F2F1; /* Pale, almost white teal, for subtle distinction on background */
    --border: #4DB6AC; /* Medium dark teal for borders, clear definition */
    --page-select: #006064; /* Deep, rich teal for selected page indicator, like storm clouds */
    --page-select-hover: #00838F; /* Brighter deep teal on hover for page selection */
    --table-alt: #F5FAFA; /* Very subtle light grey/white for alternating table rows */
    --link: #00BCD4; /* Same vibrant electric teal/cyan as hover for links */
    --link-hover: #00838F; /* Darker vibrant teal/cyan for links on hover */
    --abbr: #EAF4F4; /* Subtle light background for abbreviations */
    --check: #E0F2F1; /* Same as paper for checkboxes */
    --checked: #006064; /* Same deep teal as page-select for a clear "checked" state */
}

form.theme-cold {
    --background: #EFF7FA; /* Very light, almost white with a cool blue tint, like snow */
    --text: #0A2B4F; /* Very deep, dark arctic blue for excellent contrast and depth */
    --input-back: #FFFFFF; /* Pure white for input fields, crisp and clean */
    --grey: #B0D0D9; /* Medium light, cool grey-blue for secondary elements */
    --validation: #E85D5D; /* A slightly desaturated, cool red for errors, still clear but less warm */
    --hover: #73C2FB; /* Bright, clear sky blue, like reflections on ice or a winter sky */
    --disabled: #D9EEF2; /* Very light, desaturated cool blue for disabled elements */
    --paper: #EAF4F7; /* Slightly darker very light blue/grey for subtle distinction */
    --border: #90B5C2; /* Medium cool blue for borders, defining structure */
    --page-select: #0F52BA; /* Deep, strong sapphire blue for selected page indicator, like deep ice */
    --page-select-hover: #1E88E5; /* Brighter sapphire blue on hover for page selection */
    --table-alt: #F7FCFF; /* Extremely light, almost pure white blue for alternating table rows */
    --link: #0F52BA; /* UPDATED: Deep, strong sapphire blue for links */
    --link-hover: #083B80; /* UPDATED: Even darker, more intense blue for links on hover */
    --abbr: #E0F0F5; /* Subtle very light blue for abbreviations */
    --check: #EAF4F7; /* Same as paper for checkboxes */
    --checked: #0F52BA; /* Same deep sapphire blue as page-select for a clear "checked" state */
}

form.theme-rat {
    --background: #E8E3D7; /* Light, slightly dirty beige-grey, like dusty concrete */
    --text: #000; /* Very dark desaturated brown-charcoal for strong contrast */
    --input-back: #F5F1E9; /* Slightly lighter, cleaner beige for input fields */
    --grey: #DBD7CD; /* Lighter, more readable beige-grey for secondary elements/background for text */
    --validation: #A3433B; /* Muted, deep rust red, evoking old blood or rust, for errors */
    --hover: #6A7B5E; /* Slightly brighter/lighter muted olive green (like the jacket), for interaction */
    --disabled: #C8C3BB; /* Lighter, desaturated grey-brown for disabled elements */
    --paper: #D1CBBF; /* Slightly darker, richer beige-grey, like aged parchment */
    --border: #7E776F; /* Medium dark, muted brown-grey for borders */
    --page-select: #525E4B; /* The jacket's primary deep olive green, for selected pages */
    --page-select-hover: #6A7B5E; /* Slightly brighter jacket green on hover */
    --table-alt: #F0EDEC; /* Very light, almost white, with a subtle tint for alternating table rows */
    --link: #6B5139; /* UPDATED: Deeper, more prominent dark brown for links */
    --link-hover: #523D2A; /* UPDATED: Even darker, richer brown for links on hover */
    --abbr: #E7E1DA; /* Very light, subtle beige-grey for abbreviations */
    --check: #D1CBBF; /* Same as paper for checkboxes */
    --checked: #525E4B; /* Same as jacket's green for a clear "checked" state */
}

form.theme-wildblood {
    --background: #2A362B; /* Very deep forest green/olive, creating a strong, earthy base */
    --text: #DDEEDD; /* Very light, desaturated green-white for excellent readability */
    --button-text: #8B0000;
    --input-back: #3C4A3C; /* Slightly lighter dark green for input fields, maintaining depth */
    --grey: #706C61; /* Earthy, muted warm grey/brown for secondary elements */
    --validation: #B22222; /* Strong, classic brick red/firebrick for errors, stands out clearly */
    --hover: #9ACD32; /* Muted lime green/yellow-green, like fresh moss or a vital accent */
    --disabled: #5D6A5D; /* Darker muted green-grey for disabled elements */
    --paper: #4A3C30; /* Dark chocolate brown, reminiscent of aged leather or wood */
    --border: #5C4033; /* Deep, earthy brown for borders, adding ruggedness */
    --page-select: #9ACD32;
    --page-select-hover: #7C9B28;
    --table-alt: #354236; /* Subtly different dark green for alternating table rows */
    --link: #9ACD32; /* Same as hover for links, a prominent, vital green */
    --link-hover: #7C9B28; /* Darker lime green for links on hover */
    --abbr: #45403C; /* Subtle dark brown-grey for abbreviations */
    --check: #4A3C30; /* Same as paper for checkboxes */
    --checked: #8B0000; /* Same deep blood red as page-select for a clear "checked" state */
    --silver: #D9D9D9;
    --white: #FFF;
    --maroon: #B33C3C;
    --red: #FF3333;
    --purple: #B33CB3;
    --fuchsia: #FF66FF;
    --green: #3CB33C;
    --lime: #33FF33;
    --olive: #B3B33C;
    --yellow: #FFFF33;
    --navy: #3333B3;
    --blue: #5555FF;
    --teal: #3CB3B3;
    --aqua: #33FFFF;
}

form.theme-rat table:has(caption) {
    margin-top: 51px;
}

form.theme-rat caption {
    position: relative;
}

    form.theme-rat caption::before {
        content: url('Rat.webp');
        position: absolute;
        top: -50px;
        left: 0px;
    }

form.theme-rat #h2LnksTitle::after {
    content: url('Rat2.webp');
    display: inline-block;
    margin-left: 5px;
}

form.theme-rat #h2ColourTitle::before {
    content: url('Rat3.webp');
    display: inline-block;
    margin-right: 5px;
}

form.theme-teal h1::after {
    content: url('LightningBolt.webp');
    display: inline-block;
    margin-left: 10px;
}

form.theme-wildblood h1::after {
    content: url('Axe.webp');
    display: inline-block;
    margin-left: 10px;
}

form.theme-wildblood h1::before {
    content: url('Axe.webp');
    display: inline-block;
    margin-right: 10px;
}

form.theme-cold {
    background-image: url('FrozenHell.webp');
    background-position: center top;
    background-repeat: no-repeat;
}

html, body, input, select, textarea, form {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
}

html, body, form {
    min-height: 100vh;
    padding: 0px;
    margin: 0px;
}

html, body, form {
    background-color: var(--background);
    color: var(--text);
}

input, select, textarea {
    color: var(--text);
    background-color: var(--input-back);
}

h1, h2, h3, h4, h5, h6, table caption {
    font-family: "Tagesschrift", 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 30px;
}

h1 {
    font-size: 2em;
}

    h1 span.private-flag {
        font-size: 0.8em;
        color: var(--grey);
        text-shadow: -1px -1px 0 var(--text), 1px -1px 0 var(--text), -1px 1px 0 var(--text), 1px 1px 0 var(--text);
    }

h2 {
    font-size: 1.8em;
}

    h3, h2.item-type, h2.inner-title, .h3-size {
        font-size: 1.6em;
    }

h4, table caption {
    font-size: 1.4em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

.validator {
    color: var(--validation);
    display: inline-block;
}

    .validator::before {
        content: '* ';
    }

.text-center, .text-centre {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

input, select, textarea {
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
}

textarea {
    max-width: 100%;
    min-width: 100%;
}

button, input[type="submit"] {
    width: 100%;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1em;
    border: 1px solid var(--text);
    color: var(--text);
    background-color: var(--input-back);
    cursor: pointer;
    padding-top: 2px;
    padding-bottom: 2px;
    transition-property: color, background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

    button.inline, input[type="submit"].inline {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    button:hover, input[type="submit"]:hover, button:focus, input[type="submit"]:focus {
        background-color: var(--hover);
        color: var(--button-text);
    }

    button.delete, input[type="submit"].delete {
        color: var(--validation);
        border-color: var(--validation);
    }

        button.delete:hover, input[type="submit"].delete:hover, button.delete:focus, input[type="submit"].delete:focus {
            color: var(--text);
            border-color: var(--text);
            background-color: var(--validation);
        }

    button[disabled], input[type="submit"][disabled], button[disabled]:hover, input[type="submit"][disabled]:hover, button[disabled]:focus, input[type="submit"][disabled]:focus {
        cursor: not-allowed;
        color: var(--disabled);
    }

.page-selector {
    display: block;
    list-style-type: none;
    padding: 0px;
}

    .page-selector .page-selector__link {
        display: inline-block;
        margin: 2px;
    }

.page-selector__link a {
    display: block;
    padding: 0px;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: border-color 0.5s ease-out;
    cursor: pointer;
}

    .page-selector__link a, .page-selector__link a:link, .page-selector__link a:visited, .page-selector__link a:hover, .page-selector__link a:active {
        text-decoration: none;
        color: var(--page-select);
    }

        .page-selector__link a:hover {
            border: 1px solid var(--page-select-hover);
            text-decoration: none;
        }

.page-selector__link--active a, .page-selector__link--active a:hover {
    border: 1px solid var(--page-select);
    border-radius: 20px;
}

table.grid thead, table.grid tbody, table.grid tr {
    display: contents;
}

table.grid th, table.grid td {
    grid-column: span 1;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 10px;
    word-break: break-word;
}

    table td, table th {
        text-align: left;
    }

    table thead, table thead th, table caption {
        background-color: var(--text);
        color: var(--input-back);
    }

    table td, table th {
        padding: 10px;
    }

    table:not(.grid) td, table:not(.grid) th {
        border: 1px solid var(--text);
    }

    table.grid td:first-child, table.grid th:first-child {
        border-top: 1px solid var(--text);
    }

    table.grid td:last-child, table.grid th:last-child {
        border-bottom: 1px solid var(--text);
    }

@media screen and (min-width:641px) {
    table td, table th {
        border: 1px solid var(--text);
    }
}

table th, table caption {
    font-weight: bold;
}

table:not(.grid) th.date, table:not(.grid) td.date {
    width: 135px;
}

table th.date, table td.date {
    text-align: right;
}

table tbody tr, table tbody tr td, table tbody tr th {
    background-color: var(--background);
}

    table tbody tr:nth-child(2n), table tbody tr:nth-child(2n) td, table tbody tr:nth-child(2n) th {
        background-color: var(--table-alt);
    }

a, a:link, a:visited, a:hover, a:active {
    cursor: pointer;
    color: var(--link);
    text-decoration: underline;
}

    a:hover, a:focus, a:target {
        color: var(--link-hover);
    }

    a[name], a[name]:link, a[name]:visited, a[name]:hover, a[name]:active {
        color: inherit;
        text-decoration: none;
    }

        a[name]:target {
            color: var(--link-hover);
        }

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: inline-block;
}

.bold, .strong, b, strong {
    font-weight: bold;
}

.em, .i, i, em, q, blockquote {
    font-style: italic;
}

div.aside a.name {
    font-weight: bold;
    display: inline-block;
}

    div.aside a.name::after {
        content: ': ';
    }

div.aside a.aside-edit {
    text-decoration: none;
}

ul.no-bullets, ol.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div.paper {
    background-color: var(--paper);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    word-break: break-word;
    position: relative;
    height: auto;
    overflow: hidden;
    padding: 35px;
    color: var(--text);
    margin-bottom: 30px;
}

div.aside {
    background-color: var(--grey);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    word-break: break-word;
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    padding: 10px;
    color: var(--text);
    margin-bottom: 30px;
}

    div.aside h3 {
        margin-top: 0px;
        margin-bottom: 10px;
    }

nav {
    padding: 0px;
    margin: 0px;
    text-align: right;
    padding-top: 5px;
}

    nav li {
        display: inline-block;
        padding: 0px;
        margin: 0px;
    }

    nav a, nav a:link, nav a:visited, nav a:hover, nav a:target, a.nav, a.nav:link, a.nav:visited, a.nav:hover, a.nav:target {
        display: block;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0px;
        margin-left: 10px;
        margin-bottom: 5px;
        background-color: var(--hover);
        color: var(--button-text);
        text-decoration: none;
        transition-property: color, background-color;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
        border: 1px solid var(--text);
        vertical-align: middle;
        line-height: 1em;
        border-radius: 1em;
        text-align: center;
    }

        nav a:hover, a.nav:hover {
            background-color: var(--input-back);
            color: var(--text);
        }

        a.nav.delete {
            color: var(--validation);
            border-color: var(--validation);
            background-color: var(--input-back);
        }

            a.nav.delete:hover, a.nav.delete:focus {
                color: var(--text);
                border-color: var(--text);
                background-color: var(--validation);
            }

div.clear {
    display: block;
    position: relative;
    float: none;
    height: 1px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    clear: both;
}

.aside li {
    margin-bottom: 10px;
}

hr {
    display: block;
    width: 100%;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    clear: both;
    float: none;
    position: relative;
}


blockquote, discord {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 15px;
    display: block;
}

    blockquote p {
        margin: 0px;
        padding: 0px;
    }

        blockquote p::before {
            content: '"';
        }

        blockquote p::after {
            content: '"';
        }

discord {
    font-family: "Tagesschrift", system-ui;
    margin-left: 0px;
    margin-right: 0px;
}

    discord blockquote {
        border-top: none;
        border-bottom: none;
    }

dl {
    clear: both;
    float: none;
    display: block;
}

    dl dt::after {
        content: ':';
    }

    dl dt {
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        display: block;
    }

    dl dd {
        padding: 0px;
        margin: 0px;
        padding-bottom: 20px;
        display: block;
    }

@media screen and (min-width:700px) {
    dl dt {
        float: left;
        display: inline-block;
        width: 210px;
        padding-bottom: 20px;
    }


    dl dd {
        float: left;
        display: inline-block;
        width: calc(100% - 210px);
    }
}

dl.title-entry dt, dl.title-entry dd {
    display: block;
    float: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

dl.title-entry dd {
    margin-bottom: 20px;
}

dl.title-entry dt::after {
    content: '';
}

.grid-map {
    max-width: 1200px;
}

    .grid-map div, .grid-map a, .grid-map img {
        margin: 0px;
        padding: 0px;
    }

    .grid-map a, .grid-map img {
        display: block;
    }

        .grid-map a[data-tile] {
            cursor: zoom-in;
        }

            .grid-map a[data-tile]:hover {
                border: 3px solid red;
            }

        .grid-map a.tile-back {
            display: inline-block;
            margin-bottom: 10px;
        }

            .grid-map a.tile-back::before {
                content: '< ';
            }

div.control-holder {
    margin-bottom: 10px;
}

span.item-type-description {
    font-style: italic;
}

div.table-holder {
    display: block;
    overflow-x: auto;
    max-width: calc(100vw - 30px);
}

    div.table-holder table {
        width: 100%;
        word-break: normal;
    }

p.gallery-title {
    margin-top: 5px;
    margin-bottom: 10px;
    min-height: 100px;
    vertical-align: text-top;
}

abbr[data-title] {
    position: relative;
    text-decoration: underline dotted;
}

    abbr[data-title]:hover::after,
    abbr[data-title]:focus::after {
        content: attr(data-title);
        position: absolute;
        left: 0px;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
        background-color: var(--abbr);
        color: var(--text);
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
        font-size: 14px;
        padding: 3px 5px;
        z-index: 999;
    }

div.image-display {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 2000;
    background-color: rgba(0,0,0,0.9);
    color: var(--always-white);
    font-size: 1.8em;
    text-align: center;
    padding-top: 1vh;
}

    div.image-display div.prev {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: 10vw;
        z-index: 2001;
    }

    div.image-display div.next {
        position: fixed;
        top: 0px;
        right: 0px;
        height: 100vh;
        width: 10vw;
        z-index: 2001;
    }

    div.image-display img {
        max-width: 80vw;
        max-height: 80vh;
        width: auto;
        height: auto;
        z-index: 2002;
    }

    div.image-display p {
        width: 80vw;
        text-align: center;
        margin-left: 10vw;
        margin-right: 10vw;
        padding: 0px;
        z-index: 2003;
    }

.hidden {
    display: none;
}

black, silver, grey, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua {
    display: inline;
    font: inherit;
}

black {
    color: var(--black);
}

silver {
    color: var(--silver);
}

grey, gray {
    color: var(--grey);
}

white {
    color: var(--white);
}

maroon {
    color: var(--maroon);
}

red {
    color: var(--red);
}

purple {
    color: var(--purple);
}

fuchsia {
    color: var(--fuchsia);
}

green {
    color: var(--green);
}

lime {
    color: var(--lime);
}

olive {
    color: var(--olive);
}

yellow {
    color: var(--yellow);
}

navy {
    color: var(--navy);
}

blue {
    color: var(--blue);
}

teal {
    color: var(--teal);
}

aqua {
    color: var(--aqua);
}

.editor-toolbar a {
    color: var(--link) !important;
}

span.spell-fav {
    color: var(--text);
    cursor: pointer;
}

    span.spell-fav.is-fav-spell {
        color: var(--checked);
    }

video {
    width: 100%;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

spoiler {
    background-color: currentColor !important;
    transition: background-color 2000ms ease-in;
    cursor: help;
}

    spoiler p, spoiler div, spoiler blockquote, spoiler quote, spoiler discord, spoiler a, spoiler span {
        background-color: inherit !important;
        color: inherit !important;
    }

    spoiler::before {
        content: 'Spoiler:';
        background-color: #000;
        color: #FFF;
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
        margin-right: 5px;
        text-align: center;
    }

    spoiler:hover, spoiler:focus,
    spoiler:hover p, spoiler:focus p,
    spoiler:hover div, spoiler:focus blockquote,
    spoiler:hover quote, spoiler:focus quote,
    spoiler:hover discord, spoiler:focus discord,
    spoiler:hover a, spoiler:focus a,
    spoiler:hover span, spoiler:focus span {
        background-color: inherit !important;
    }

div.map-holder {
    display: none;
}

elvish, sylvan, undercommon, shadarkai {
    font-family: elvish, 'Open Sans', sans-serif;
    cursor: pointer;
}

dwarvish, giant, gnomish, goblin, orcish, primordial {
    font-family: dwarvish, 'Open Sans', sans-serif;
    cursor: pointer;
}

draconic {
    font-family: draconic, 'Open Sans', sans-serif;
    cursor: pointer;
}

abyssal, infernal {
    font-family: abyssal, 'Open Sans', sans-serif;
    cursor: pointer;
}

    elvish[translate="common"], sylvan[translate="common"], undercommon[translate="common"], shadarkai[translate="common"],
    dwarvish[translate="common"], giant[translate="common"], gnomish[translate="common"], goblin[translate="common"], orcish[translate="common"], primordial[translate="common"],
    draconic[translate="common"], abyssal[translate="common"], infernal[translate="common"] {
        font-family: inherit;
        font-style: italic;
    }

punc, common {
    font-family: 'Open Sans', sans-serif;
}