/* org-mode customisations */
html {
    background-color: #AF2303;
}

body {
    max-width: 70em;
    margin:1em auto;
}

div#org-div-home-and-up a {
    color:white;
}

div#org-div-home-and-up {
    color:white;
    margin-bottom: 1ex;
}

div#preamble, div#content, div#postamble {
    border-radius: 0.4em;
    box-shadow: 0 0 0.7em 0.2em #EAAB95;
}

div#postamble {
    padding: 0.3em 2em;
    background-color: #FFC800;
    margin-top: 1em;
    color: #AF2303;
    display:grid;
}

div#postamble p#nav-next-box {
    text-align: right;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

div#postamble p#nav-up-box {
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

div#postamble p#nav-prev-box {
    text-align: left;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

div#postamble p#nav-prev-box a, div#postamble p#nav-next-box a,
div#postamble p#nav-up-box a {
    border: 1px solid grey;
    font-sixe: 110%;
    color: blue;
    white-space: nowrap;
    background-color: #FFE8AB;
    padding: 3px;
    margin: 1px;
}

div#postamble div#nav-divider {
    height:2px;
    border-bottom: 1px solid #B08A16;
    grid-column: 1 / 4;
    grid-row: 2 / 2;
}

div#postamble p.author {
    text-align: center;
    font-size: 70%;
    grid-column: 2 / 3;
    grid-row: 2 / 5;
}

div#postamble .validate {
    text-align: left;
    font-size: 70%;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

div#postamble p.date {
    text-align: right;
    font-size: 70%;
    grid-column: 3 / 4;
    grid-row: 2 / 5;
}

div#postamble p.creator {
    font-size: 70%;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

div#postamble p.validation {
    font-size: 70%;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

div#content {
    padding: 0 1em 1em;
    background-color: #FFF4D5;
    border: 3px solid #FFC800;
}

div#content > header {
    width: calc(100% + 2em);
    position: relative;
    right: 1em;
    border-top-right-radius: calc(0.2em - 3px);
    border-top-left-radius: calc(0.2em - 3px);
    padding: 1ex 0;
    margin-top: 0;
    margin-bottom: 1em;
    background-color: #FFC800;
    color: #AF2303;
}

div#content h1.title {
    font-variant: small-caps;
    letter-spacing: 3px;
    word-spacing: 9px;
    padding: 0.2em 1em;
    margin: 0;
}
div#content p.subtitle {
    font-variant: small-caps;
    letter-spacing: 2px;
    word-spacing: 6px;
    margin: 0;
}
div#content div#footnotes h2.footnotes {
    max-width: 20em;
    border-top: 2px solid #AF2303;
    color: #AF2303;
}

/* General content */
.abstract::before {
    content: "Abstract";
    font-weight: bold;
}
.abstract {
    font-size: 90%;
    width: 80%;
    margin: 3em auto;
}

#content *:target {
    background-color: #FFC800;
    color: #AF2303;
}

/* Table of contents */
nav#table-of-contents, nav#main-navigation {
    font-size: 90%;
    /* display: inline-block; */
    /* vertical-align:top; */
    /* width: 30em; */
    background-color: #FFC800;
    border-radius: 4px;
}
nav > h1:first-child {
    text-align: center;
    font-variant: small-caps;
    background-color: #AF2303;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
    color: #FFC800;
}
nav mark {
    font-weight: bold;
    background-color: #AF2303;
    color: #FFC800;
}
nav#table-of-contents > div#text-table-of-contents > ul {
    padding: 0;
    margin: 0;
}
@media (min-width: 500px) {
    /* Table version - stripes don't go all the way
    nav#table-of-contents > div#text-table-of-contents {
    }
    nav#table-of-contents > div#text-table-of-contents > ul {
        display: table;
        width: 100%;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li {
        display: table-row;
        padding-left: 0;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > a {
        display: table-cell;
        vertical-align: middle;
        border-right: 1px solid #AF2303;
        padding: 0.2ex;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > ul {
        display: table-cell;
        padding: 0.2ex;
    }
   */
    /* Grid version - no centring on the verticals */
    nav#table-of-contents > div#text-table-of-contents {
    }
    nav#table-of-contents > div#text-table-of-contents > ul {
        width: 100%;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li {
        display: grid;
        grid-template-columns: 9em 1fr;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > a {
        grid-column: 1 / 2;
        border-right: 1px solid #AF2303;
        font-weight: bold;
        padding: 0.2ex;
        vertical-align:middle;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > ul {
        grid-column: 2 / 3;
        padding: 0.2ex;
    }
}
@media (max-width: 499px) {
    nav#table-of-contents > div#text-table-of-contents > ul > li {
        margin-left: 1em;
        list-style-type: none
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > a {
        display: block;
    }
    nav#table-of-contents > div#text-table-of-contents > ul > li > ul {
        padding-left: 2em;
        display: inline-block;
    }
}
nav#table-of-contents > div#text-table-of-contents > ul > li:nth-child(2n) {
    background-color: #FFD353;
}
nav ul ul ul::before {content: "(";}
nav ul ul ul::after {content: ")";}
nav ul ul li, nav#main-navigation ul li, nav ul ul, nav#main-navigation ul {
    display: inline;
}
nav ul ul, nav#main-navigation ul {
    padding-left:inherit;
}
nav ul ul li + li::before, nav#main-navigation ul li + li::before {
    content: "•";
    display: inline-block;
    width: 1em;
    text-align: center;
}

/* Headers */
#content .outline-1 h1 {
    color: #AF2303;
    border-bottom: 2px solid #AF2303;
    clear: both;
}
#content .outline-1 h1 span.section-number-1 {
    background-color: #AF2303;
    padding: 0.05em 0.4em;
    color: #FFC800;
}

#content .outline-2 h2 {
    color: #AF2303;
    border-bottom: 1px solid #AF2303;
    clear: both;
}
#content .outline-2 h2 span.section-number-2 {
    background-color: #AF2303;
    padding: 0.05em 0.4em;
    color: white;
}

#content .outline-3 h3 {
    color: #AF2303;
    border-bottom: 1px solid #FFC800;
    clear: both;
}

#content .outline-3 h3 span.section-number-3 {
    background-color: #FFC800;
    padding: 0.05em 0.4em;
}

#content .outline-4 h4 {
    color: #AF2303;
}

#content .outline-4 h4 span.section-number-4 {
    border: 1px solid #FFC800;
    padding: 0.05em 0.4em;
}

/* Tables */
#content table {
    background-color: #FFE8AB;
}

#content table.display-table {
    margin: 0 auto;
    padding: 2px;
}

@media (min-width: 500px) {
    #content table.translation {
        max-width: 40%;
        float:right;
    }
}

#content table td, #content table th {
    padding-left: 3px;
    padding-right: 3px;
}

#content table th {
    padding-left: 3px;
    padding-right: 3px;
    background-color: #FFC800;
}

#content table tbody {
    border-top: 2px solid #B08A16;
}

#content table colgroup + colgroup {
    border-left: 2px solid #B08A16;
}

/* Figures */
/* @media (min-width: 500px) { */
/*     #content figure { */
/*         max-width: 35%; */
/*         float: right; */
/*     } */
/* } */

#content figure object.org-svg, #content figure img {
    display: block;
    max-width: min(100%, 40em);
    max-height: 40em;
    margin: 0 auto;
}

.display-flag {
    width: min(90%, 15em);
    margin: 0 auto;
}

.display-flag + figcaption {
    width: min(90%, 20em);
    margin: 0 auto;
}

figcaption > span.figure-number, table > caption > span.table-number {
    font-style: italic;
    font-size: 95%;
}

/* Footnotes */
p.footpara + p.footpara {
    display: block;
    margin: 0;
    text-indent: 2em;
}

#footnotes .gloss-train {
    padding-left: 2em;
}

/* BOC citations */
.boc {
    color: black;
    background-color: #DDD;
    font-size: 90%;
    white-space: nowrap;
}