/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in �N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure);  }
 *        .example::before { content: "Example " counter(example); }
 *        .issue::before   { content: "Issue "   counter(issue);   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

body {
    counter-reset: example figure issue;

    /* Layout */
    max-width: 50em; /* limit line length to 50em for readability   */
    margin: 0 auto; /* center text within page                     */
    padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
    padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

    /* Typography */
    line-height: 1.5;
    font-family: sans-serif;
    widows: 2;
    orphans: 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    /* Colors */
    color: black;
    background: white top left fixed no-repeat;
    background-size: 25px auto;
}

/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

div.head {
    margin-bottom: 1em;
}
div.head hr {
    border-style: solid;
}

div.head h1 {
    font-weight: bold;
    margin: 0 0 .1em;
    font-size: 220%;
}

div.head h2 {
    margin-bottom: 1.5em;
}

div.head img {
    float:right;
}

/** Geonovum Logo *************************************************************/

.head p:not(.copyright):first-child {
    margin: 0;
}

.head p:not(.copyright):first-child > a,
.head > a:first-child {
    float: right;
    margin: 0.4rem 0 0.2rem .4rem;
}

.head a:hover > img[src*="logos/Geonovum"],
.head a:focus > img[src*="logos/Geonovum"] {
    opacity: .8;
}

/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

p.copyright,
p.copyright small {
    font-size: small;
}

.copyright a[href],
.copyright a[href]:hover {
    border: none;
}

/** Back to Top / ToC Toggle **************************************************/

@media print {
    #toc-nav {
        display: none;
    }
}
@media not print {
    #toc-nav {
        position: fixed;
        z-index: 2;
        bottom: 0;
        left: 0;
        margin: 0;
        min-width: 1.33em;
        border-top-right-radius: 2rem;
        box-shadow: 0 0 2px;
        font-size: 1.5em;
        color: black;
    }
    #toc-nav > a {
        display: block;
        white-space: nowrap;

        height: 1.33em;
        padding: .1em 0.3em;
        margin: 0;

        background: white;
        box-shadow: 0 0 2px;
        border: none;
        border-top-right-radius: 1.33em;
        background: white;
    }
    #toc-nav > #toc-jump {
        padding-bottom: 2em;
        margin-bottom: -1.9em;
    }

    #toc-nav > a:hover,
    #toc-nav > a:focus {
        background: #f8f8f8;
    }
    #toc-nav > a:not(:hover):not(:focus) {
        color: #707070;
    }

    /* statusbar gets in the way on keyboard focus; remove once browsers fix */
    #toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
        padding-bottom: 1.5rem;
    }

    #toc-nav:not(:hover) > a:not(:focus) > span + span {
        /* Ideally this uses :focus-within on #toc-nav */
        display: none;
    }
    #toc-nav > a > span + span {
        padding-right: 0.2em;
    }

    #toc-toggle-inline {
        vertical-align: 0.05em;
        font-size: 80%;
        color: gray;
        color: hsla(203, 20%, 40%, .7);
        border-style: none;
        background: transparent;
        position: relative;
    }
    #toc-toggle-inline:hover:not(:active),
    #toc-toggle-inline:focus:not(:active) {
        text-shadow: 1px 1px silver;
        top: -1px;
        left: -1px;
    }

    #toc-nav :active {
        color: #c00;
    }
}

/** ToC Sidebar ***************************************************************/

/* Floating sidebar */
@media screen {
    body.toc-sidebar #toc {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 23.5em;
        max-width: 80%;
        max-width: calc(100% - 2em - 26px);
        overflow: auto;
        padding: 0 1em;
        padding-left: 42px;
        padding-left: calc(1em + 26px);
        background: inherit;
        background-color: #f7f8f9;
        z-index: 1;
        box-shadow: -.1em 0 .25em rgba(0, 0, 0, .1) inset;
    }
    body.toc-sidebar #toc h2 {
        margin-top: .8rem;
        font-variant: small-caps;
        font-variant: all-small-caps;
        text-transform: lowercase;
        font-weight: bold;
        color: gray;
        color: hsla(203, 20%, 40%, .7);
    }
    body.toc-sidebar #toc-jump:not(:focus) {
        width: 0;
        height: 0;
        padding: 0;
        position: absolute;
        overflow: hidden;
    }
}
/* Hide main scroller when only the ToC is visible anyway */
@media screen and (max-width: 28em) {
    body.toc-sidebar {
        overflow: hidden;
    }
}

/* Sidebar with its own space */
@media screen and (min-width: 78em) {
    body:not(.toc-inline) #toc {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 23.5em;
        overflow: auto;
        padding: 0 1em;
        padding-left: 42px;
        padding-left: calc(1em + 26px);
        background: inherit;
        background-color: #f7f8f9;
        z-index: 1;
        box-shadow: -.1em 0 .25em rgba(0, 0, 0, .1) inset;
    }
    body:not(.toc-inline) #toc h2 {
        margin-top: .8rem;
        font-variant: small-caps;
        font-variant: all-small-caps;
        text-transform: lowercase;
        font-weight: bold;
        color: gray;
        color: hsla(203, 20%, 40%, .7);
    }

    body:not(.toc-inline) {
        padding-left: 29em;
    }
    /* See also Overflow section at the bottom */

    body:not(.toc-inline) #toc-jump:not(:focus) {
        width: 0;
        height: 0;
        padding: 0;
        position: absolute;
        overflow: hidden;
    }
}
@media screen and (min-width: 90em) {
    body:not(.toc-inline) {
        margin: 0 4em;
    }
}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

h1,
h2,
h3,
h4,
h5,
h6,
dt {
    page-break-after: avoid;
    page-break-inside: avoid;
    font: 100% sans-serif; /* Reset all font styling to clear out UA styles */
    font-family: inherit; /* Inherit the font family. */
    line-height: 1.2; /* Keep wrapped headings compact */
    hyphens: manual; /* Hyphenated headings look weird */
}

h2,
h3,
h4,
h5,
h6 {
    margin-top: 3rem;
}

h1,
h2,
h3 {
    color: #005a9c;
    background: transparent;
}

h1 {
    font-size: 170%;
}
h2 {
    font-size: 140%;
}
h3 {
    font-size: 120%;
}
h4 {
    font-weight: bold;
}
h5 {
    font-style: italic;
}
h6 {
    font-variant: small-caps;
}
dt {
    font-weight: bold;
}

/** Subheadings ***************************************************************/

h1 + h2,
#subtitle {
    /* #subtitle is a subtitle in an H2 under the H1 */
    margin-top: 0;
}
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: 1.2em; /* = 1 x line-height */
}

/** Section divider ***********************************************************/

:not(.head) > hr {
    font-size: 1.5em;
    text-align: center;
    margin: 1em auto;
    height: auto;
    border: transparent solid 0;
    background: transparent;
}
:not(.head) > hr::before {
    content: "\2727\2003\2003\2727\2003\2003\2727";
}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

p {
    margin: 1em 0;
}

dd > p:first-child,
li > p:first-child {
    margin-top: 0;
}

ul,
ol {
    margin-left: 0;
    padding-left: 2em;
}

li {
    margin: 0.25em 0 0.5em;
    padding: 0;
}

dl dd {
    margin: 0 0 .5em 2em;
}

.head dd + dd {
    /* compact for header */
    margin-top: -.5em;
}

/* Style for algorithms */
ol.algorithm ol:not(.algorithm) {
    border-left: 0.5em solid #def;
}

/* Style for switch/case <dl>s */
dl.switch > dd > ol.only {
    margin-left: 0;
}
dl.switch > dd > ol.algorithm {
    margin-left: -2em;
}
dl.switch {
    padding-left: 2em;
}
dl.switch > dt {
    text-indent: -1.5em;
    margin-top: 1em;
}
dl.switch > dt + dt {
    margin-top: 0;
}
dl.switch > dt::before {
    content: '\21AA';
    padding: 0 0.5em 0 0;
    display: inline-block;
    width: 1em;
    text-align: right;
    line-height: 0.5em;
}

/** Terminology Markup ********************************************************/

/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
dfn {
    /* Defining instance */
    font-weight: bolder;
}
a > i {
    /* Instance of term */
    font-style: normal;
}
dt dfn code,
code.idl {
    font-size: inherit;
}
dfn var {
    font-style: normal;
}

/** Change Marking ************************************************************/

del {
    color: red;
    text-decoration: line-through;
}
ins {
    color: #080;
    text-decoration: underline;
}

/** Miscellaneous improvements to inline formatting ***************************/

sup {
    vertical-align: super;
    font-size: 80%;
}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

pre,
code,
samp {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
    font-size: .9em;
    page-break-inside: avoid;
    hyphens: none;
    text-transform: none;
}
pre code,
code code {
    font-size: 100%;
}

pre {
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: auto;
}

/** Inline Code fragments *****************************************************/

/* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

/* We hyperlink a lot, so make it less intrusive */
a[href]:not(.leaflet-top .leaflet-left) {
    color: #034575;
    text-decoration: none;
    border-bottom: 1px solid #707070;
    /* Need a bit of extending for it to look okay */
    padding: 0 1px 0;
    margin: 0 -1px 0;
}
a:visited {
    border-bottom-color: #bbb;
}

/* Use distinguishing colors when user is interacting with the link */
a[href]:not(.leaflet-control-zoom .leaflet-bar .leaflet-control):focus,
a[href]:not(.leaflet-control-zoom .leaflet-bar .leaflet-control):hover {
    background: #f8f8f8;
    background: rgba(75%, 75%, 75%, .25);
    border-bottom-width: 3px;
    margin-bottom: -2px;
}
a[href]:not(.leaflet-top .leaflet-left):active {
    color: #c00;
    border-color: #c00;
}

/* Backout above styling for Geonovum logo */
.head p:not(.copyright) > a,
.head > a:first-child {
    border: none;
    text-decoration: none;
    background: transparent;
}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

img {
    border-style: none;
}

/* For autogen numbers, add
       .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
    */

figure,
.figure,
.sidefigure {
    page-break-inside: avoid;
    text-align: center;
    margin: 2.5em 0;
}
.figure img,
.sidefigure img,
figure img,
.figure object,
.sidefigure object,
figure object {
    max-width: 100%;
    margin: auto;
}

/*
Thijs Brentjens Geonovum: a fix to show images that get a width=0 and height=0 by ReSpec and thus are hidden
See https://github.com/Geonovum/respec/issues/153
 */
.figure img, .sidefigure img, figure img, .figure object, .sidefigure object, figure object {
    /*height: 100%;*/
    width: auto;
}

/* end customization Geonovum fix */

.figure pre,
.sidefigure pre,
figure pre {
    text-align: left;
    display: table;
    margin: 1em auto;
}
.figure table,
figure table {
    margin: auto;
}
@media screen and (min-width: 20em) {
    .sidefigure {
        float: right;
        width: 50%;
        margin: 0 0 0.5em 0.5em;
    }
}
.caption,
figcaption,
caption {
    font-style: italic;
    font-size: 90%;
}
.caption::before,
figcaption::before,
figcaption > .marker {
    font-weight: bold;
}
.caption,
figcaption {
    counter-increment: figure;
}

/* DL list is indented 2em, but figure inside it is not */
dd > .figure,
dd > figure {
    margin-left: -2em;
}

/******************************************************************************/
/*                              Leaflet Figures                               */
/******************************************************************************/

.leaflet-container {
    background: #fff;
    border: 1px solid #8c8c8c;
    width: 100%;
    height: 600px;
    margin-bottom: 1em;
}

.leaflet-bar button,
.leaflet-bar button:hover {
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
}

.leaflet-bar button {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
}

.leaflet-bar button:hover {
    background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
    cursor: default;
    pointer-events: none;
    opacity: .4;
}

.easy-button-button .button-state {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.leaflet-touch .leaflet-bar button {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

.issue,
.note,
.example,
.advisement,
blockquote {
    padding: .5em;
    border: .5em;
    border-left-style: solid;
    page-break-inside: avoid;
}
span.issue,
span.note {
    padding: .1em .5em .15em;
    border-right-style: solid;
}

.issue,
.note,
.example,
.advisement,
blockquote {
    margin: 1em auto;
}
.note > p:first-child,
.issue > p:first-child,
blockquote > :first-child {
    margin-top: 0;
}
blockquote > :last-child {
    margin-bottom: 0;
}

/** Blockquotes ***************************************************************/

blockquote {
    border-color: silver;
}

/** Open issue ****************************************************************/

.issue {
    border-color: #e05252;
    background: #fbe9e9;
    counter-increment: issue;
    overflow: auto;
}
.issue::before,
.issue > .marker {
    text-transform: uppercase;
    color: #ae1e1e;
    padding-right: 1em;
    text-transform: uppercase;
}
/* Add .issue::before { content: "Issue " counter(issue); } for autogen numbers,
       or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

.example {
    border-color: #e0cb52;
    background: #fcfaee;
    counter-increment: example;
    overflow: auto;
    clear: both;
}
.example::before,
.example > .marker {
    text-transform: uppercase;
    color: #827017;
    min-width: 7.5em;
    display: block;
}
/* Add .example::before { content: "Example " counter(example); } for autogen numbers,
       or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

.note {
    border-color: #8ccbf2;
    background: #def;
    overflow: auto;
    font-style: italic;
}

.note::before,
.note > .marker {
    text-transform: uppercase;
    color: #8ccbf2;
    padding-right: 1em;
    text-transform: uppercase;
}

details.note > summary::before,
details.note > summary > .marker {
    text-transform: uppercase;
    display: block;
    color: hsl(120, 70%, 30%);
}
/* Add .note::before { content: "Note"; } for autogen label,
       or use class="marker" to mark up the label in source. */

details.note > summary {
    display: block;
    color: hsl(120, 70%, 30%);
}
details.note[open] > summary {
    border-bottom: 1px silver solid;
}

/** Advisement Box ************************************************************/
/*  for attention-grabbing normative statements */

.advisement {
    border-color: orange;
    border-style: none solid;
    background: #ffeecc;
}
strong.advisement {
    display: block;
    text-align: center;
}
.advisement > .marker {
    color: #b35f00;
}

/** Spec Obsoletion Notice ****************************************************/
/* obnoxious obsoletion notice for older/abandoned specs. */

details {
    display: block;
}
summary {
    font-weight: bolder;
}

.annoying-warning:not(details),
details.annoying-warning:not([open]) > summary,
details.annoying-warning[open] {
    background: #fdd;
    color: red;
    font-weight: bold;
    padding: .75em 1em;
    border: thick red;
    border-style: solid;
    border-radius: 1em;
}
.annoying-warning :last-child {
    margin-bottom: 0;
}

@media not print {
    details.annoying-warning[open] {
        position: fixed;
        left: 1em;
        right: 1em;
        bottom: 1em;
        z-index: 1000;
    }
}

details.annoying-warning:not([open]) > summary {
    text-align: center;
}

/** Entity Definition Boxes ***************************************************/

.def {
    padding: .5em 1em;
    background: #def;
    margin: 1.2em 0;
    border-left: 0.5em solid #8ccbf2;
}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

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

/* Thijs Brentjens Geonovum add a thin border for tables as a default  */
/* TODO :fix issue with localstyle for https://docs.geostandaarden.nl/md/mdprofiel-iso19115/ */

/*table, tr, td, th {
    border: none;
}

td {
    border-top: 1px solid #ddd;
}*/

/** Property/Descriptor Definition Tables *************************************/

table.def {
    /* inherits .def box styling, see above */
    width: 100%;
    border-spacing: 0;
}

table.def td,
table.def th {
    padding: 0.5em;
    vertical-align: baseline;
    border-bottom: 1px solid #bbd7e9;
}

table.def > tbody > tr:last-child th,
table.def > tbody > tr:last-child td {
    border-bottom: 0;
}

table.def th {
    font-style: italic;
    font-weight: normal;
    padding-left: 1em;
    width: 3em;
}

/* For when values are extra-complex and need formatting for readability */
table td.pre {
    white-space: pre-wrap;
}

/* A footnote at the bottom of a def table */
table.def           td.footnote {
    padding-top: 0.6em;
}
table.def           td.footnote::before {
    content: " ";
    display: block;
    height: 0.6em;
    width: 4em;
    border-top: thin solid;
}

/** Data tables (and properly marked-up index tables) *************************/
/*
         <table class="data"> highlights structural relationships in a table
         when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

         Use class="complex data" for particularly complicated tables --
         (This will draw more lines: busier, but clearer.)

         Use class="long" on table cells with paragraph-like contents
         (This will adjust text alignment accordingly.)
         Alternately use class="longlastcol" on tables, to have the last column assume "long".
    */

table {
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

table.data,
table.index {
    margin: 1em auto;
    border-collapse: collapse;
    border: hidden;
    width: 100%;
}
table.data caption,
table.index caption {
    max-width: 50em;
    margin: 0 auto 1em;
}

table.data td,
table.data th,
table.index td,
table.index th {
    padding: 0.5em 1em;
    border-width: 1px;
    border-color: silver;
    border-top-style: solid;
}

table.data thead td:empty {
    padding: 0;
    border: 0;
}

table.data  thead,
table.index thead,
table.data  tbody,
table.index tbody {
    border-bottom: 2px solid;
}

table.data colgroup,
table.index colgroup {
    border-left: 2px solid;
}

table.data  tbody th:first-child,
table.index tbody th:first-child {
    border-right: 2px solid;
    border-top: 1px solid silver;
    padding-right: 1em;
}

table.data th[colspan],
table.data td[colspan] {
    text-align: center;
}

table.complex.data th,
table.complex.data td {
    border: 1px solid silver;
    text-align: center;
}

table.data.longlastcol td:last-child,
table.data td.long {
    vertical-align: baseline;
    text-align: left;
}

table.data img {
    vertical-align: middle;
}

/*
Alternate table alignment rules

    table.data,
    table.index {
        text-align: center;
    }

    table.data  thead th[scope="row"],
    table.index thead th[scope="row"] {
        text-align: right;
    }

    table.data  tbody th:first-child,
    table.index tbody th:first-child  {
        text-align: right;
    }

Possible extra rowspan handling

    table.data  tbody th[rowspan]:not([rowspan='1']),
    table.index tbody th[rowspan]:not([rowspan='1']),
    table.data  tbody td[rowspan]:not([rowspan='1']),
    table.index tbody td[rowspan]:not([rowspan='1']) {
        border-left: 1px solid silver;
    }

    table.data  tbody th[rowspan]:first-child,
    table.index tbody th[rowspan]:first-child,
    table.data  tbody td[rowspan]:first-child,
    table.index tbody td[rowspan]:first-child{
        border-left: 0;
        border-right: 1px solid silver;
    }
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/

/** Table of Contents *********************************************************/

.toc a {
    /* More spacing; use padding to make it part of the click target. */
    padding-top: 0.1rem;
    /* Larger, more consistently-sized click target */
    display: block;
    /* Reverse color scheme */
    color: black;
    border-color: #3980b5;
}
.toc a:visited {
    border-color: #054572;
}
.toc a:not(:focus):not(:hover) {
    /* Allow colors to cascade through from link styling */
    border-bottom-color: transparent;
}

.toc,
.toc ol,
.toc ul,
.toc li {
    list-style: none; /* Numbers must be inlined into source */
    /* because generated content isn't search/selectable and markers can't do multilevel yet */
    margin: 0;
    padding: 0;
    line-height: 1.1rem; /* consistent spacing */
}

/* ToC not indented until third level, but font style & margins show hierarchy */
.toc > li {
    font-weight: bold;
}
.toc > li li {
    font-weight: normal;
}
.toc > li li li {
    font-size: 95%;
}
.toc > li li li li {
    font-size: 90%;
}
.toc > li li li li li {
    font-size: 85%;
}

.toc > li {
    margin: 1.5rem 0;
}
.toc > li li {
    margin: 0.3rem 0;
}
.toc > li li li {
    margin-left: 2rem;
}

/* Section numbers in a column of their own */
.toc .secno {
    float: left;
    width: 4rem;
    white-space: nowrap;
}
.toc > li li li li .secno {
    font-size: 85%;
}
.toc > li li li li li .secno {
    font-size: 100%;
}

:not(li) > .toc {
    margin-left: 5rem;
}
.toc .secno {
    margin-left: -5rem;
}
.toc > li li li .secno {
    margin-left: -7rem;
}
.toc > li li li li .secno {
    margin-left: -9rem;
}
.toc > li li li li li .secno {
    margin-left: -11rem;
}

/* Tighten up indentation in narrow ToCs */
@media (max-width: 30em) {
    :not(li) > .toc {
        margin-left: 4rem;
    }
    .toc .secno {
        margin-left: -4rem;
    }
    .toc > li li li {
        margin-left: 1rem;
    }
    .toc > li li li .secno {
        margin-left: -5rem;
    }
    .toc > li li li li .secno {
        margin-left: -6rem;
    }
    .toc > li li li li li .secno {
        margin-left: -7rem;
    }
}
@media screen and (min-width: 78em) {
    body:not(.toc-inline) :not(li) > .toc {
        margin-left: 4rem;
    }
    body:not(.toc-inline) .toc .secno {
        margin-left: -4rem;
    }
    body:not(.toc-inline) .toc > li li li {
        margin-left: 1rem;
    }
    body:not(.toc-inline) .toc > li li li .secno {
        margin-left: -5rem;
    }
    body:not(.toc-inline) .toc > li li li li .secno {
        margin-left: -6rem;
    }
    body:not(.toc-inline) .toc > li li li li li .secno {
        margin-left: -7rem;
    }
}
body.toc-sidebar #toc :not(li) > .toc {
    margin-left: 4rem;
}
body.toc-sidebar #toc .toc .secno {
    margin-left: -4rem;
}
body.toc-sidebar #toc .toc > li li li {
    margin-left: 1rem;
}
body.toc-sidebar #toc .toc > li li li .secno {
    margin-left: -5rem;
}
body.toc-sidebar #toc .toc > li li li li .secno {
    margin-left: -6rem;
}
body.toc-sidebar #toc .toc > li li li li li .secno {
    margin-left: -7rem;
}

.toc li {
    clear: both;
}

/** Index *********************************************************************/

/* Index Lists: Layout */
ul.index {
    margin-left: 0;
    columns: 15em;
    text-indent: 1em hanging;
}
ul.index li {
    margin-left: 0;
    list-style: none;
    break-inside: avoid;
}
ul.index li li {
    margin-left: 1em;
}
ul.index dl {
    margin-top: 0;
}
ul.index dt {
    margin: .2em 0 .2em 20px;
}
ul.index dd {
    margin: .2em 0 .2em 40px;
}
/* Index Lists: Typography */
ul.index ul,
ul.index dl {
    font-size: smaller;
}
@media not print {
    ul.index li span {
        white-space: nowrap;
        color: transparent;
    }
    ul.index li a:hover + span,
    ul.index li a:focus + span {
        color: #707070;
    }
}

/** Index Tables *****************************************************/
/* See also the data table styling section, which this effectively subclasses */

table.index {
    font-size: small;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    margin: 1em 0;
}

table.index td,
table.index th {
    padding: 0.4em;
}

table.index tr:hover td:not([rowspan]),
table.index tr:hover th:not([rowspan]) {
    background: #f7f8f9;
}

/* The link in the first column in the property table (formerly a TD) */
table.index th:first-child a {
    font-weight: bold;
}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

@media print {
    /* Pages have their own margins. */
    section > h2,
    nav > h2 {
        page-break-before: always;
    }

    html {
        font-size: 12pt;
        margin: 0;
    }

    /* Serif for print. */
    body {
        font-family: serif;
    }

    figure.scalable img[hidden] {
        display: block;
    }
}

@page {
    margin: 1.5cm 1.1cm;
}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

/* This rule is inherited from past style sheets. No idea what it's for. */
.hide {
    display: none;
}

/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

.figure .caption,
.sidefigure .caption,
figcaption {
    /* in case figure is overlarge, limit caption to 50em */
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}
.overlarge > table {
    /* limit preferred width of table */
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 55em) {
    .overlarge {
        margin-left: calc(13px + 26.5rem - 50vw);
        margin-right: calc(13px + 26.5rem - 50vw);
        max-width: none;
    }
}
@media screen and (min-width: 78em) {
    body:not(.toc-inline) .overlarge {
        /* 30.5em body padding 50em content area */
        margin-left: calc(40em - 50vw) !important;
        margin-right: calc(40em - 50vw) !important;
    }
}
@media screen and (min-width: 90em) {
    body:not(.toc-inline) .overlarge {
        /* 4em html margin 30.5em body padding 50em content area */
        margin-left: 0 !important;
        margin-right: calc(84.5em - 100vw) !important;
    }
}

@media not print {
    .overlarge {
        overflow-x: auto;
        /* See Lea Verou's explanation background-attachment:
                 * http://lea.verou.me/2012/04/background-attachment-local/
                 *
                background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
                            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
                            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
                            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
                            white;
                background-repeat: no-repeat;
                */
    }
}

/* toevoegingen appie */
#ERROR,
#WARNING,
#GOOD {
    clear: both;
    padding-top: 50px;
}

summary {
    cursor: pointer;
}

section td ,
section th {
    vertical-align: top;
}

tr.top {
    background: #eee;
}
table {
    border: 1px solid #ddd;
    border-collapse: collapse;
}
tr td,
tr th {
    padding: 5px 5px 5px 10px;
    border-bottom: 1px solid #ddd;
}
th {
    width: 25%;
}
td {
    width: 75%;
}

section .secno {
	display: none;
}

.head h2 {
    display: none;
}