for extra-complex tables
+ * -> use for paragraph-length cell content
+ * -> use | 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 (3.2)
+ * - .marker for source-inserted example/figure/issue numbers (Issue 4)
+ * - ::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;
+}
+
+/** 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 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: #52e052;
+ background: #e9fbe9;
+ overflow: auto;
+}
+
+.note::before,
+.note > .marker {
+ text-transform: uppercase;
+ color: #178217;
+ 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 *************************************/
+
+/* [GW20240821: stijldefinities voor generieke tabellen, voor alle zekerheid zonder class-aanduiding] */
+
+table:not([class]) {
+ border-bottom: 2px solid #005a9c;
+ border-top: 2px solid #005a9c;
+ border-collapse: collapse;
+ margin-bottom: 1.2em;
+ margin-top: 1.2em;
+ table-layout: fixed;
+ width: 100%;
+}
+table:not([class]) caption {
+ text-align: left;
+ font-weight: bold;
+ line-height: 1.2em;
+ margin-bottom: 0.3em;
+}
+table:not([class]) tr:nth-child(even) {
+ background: #f0f6ff;
+}
+table:not([class]) th {
+ background-color: #005a9c;
+ border-bottom: 1px solid #005a9c;
+ border-top: 1px solid #005a9c;
+ color: white;
+ height: 16pt;
+ padding: 3.5px 1.5mm 3.5px 1.5mm;
+ vertical-align: top;
+ word-wrap: break-word;
+}
+table:not([class]) td {
+ border-bottom: 1px solid #005a9c;
+ border-top: 1px solid #005a9c;
+ height: 16pt;
+ padding: 3.5px 1.5mm 3.5px 1.5mm;
+ vertical-align: top;
+ word-wrap: break-word;
+}
+
+/* [GW20240821: bestaande stijldefinities] *//
+
+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) *************************/
+/*
+ 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;
+}
+
+/* table.simple toegevoegd op 11-10-2023 door Gerard Wolbers, Geonovum */
+/* Het is grotendeels overgenomen uit respec-mainstyle, een stijldefinitie dat door respec in de bestanden wordt gegenereerd. */
+
+table.simple {
+ border-spacing: 0;
+ border-collapse: collapse;
+ border-bottom: 3px solid #005a9c
+ }
+.simple th {
+ background: #b4dbf6;
+ color: #000;
+ padding: 3px 5px;
+ text-align: left
+ }
+.simple th a {
+ color: #000;
+ padding: 3px 5px;
+ text-align: left
+ }
+.simple th[scope=row] {
+ background: inherit;
+ color: inherit;
+ border-top: 1px solid #ddd
+ }
+.simple td {
+ padding: 3px 10px;
+ border-top: 1px solid #ddd
+ }
+.simple tr:nth-child(even) {
+ background:#f0f6ff
+ }
+
+/*
+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;
+ */
+ }
+}
|