/******************************************************************************

* 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
* -> ins/del.c### for candidate and proposed changes (amendments)
*
* 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)
* - .correction for "candidate corrections" (div, aside, details, section)
* - .addition for "candidate additions" (div, aside, details, section)
* - .correction.proposed for "proposed corrections" (div, aside, details,
section)
* - .addition.proposed for "proposed additions" (div, aside, details,
section)
*
* 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
*
* Outdated warning for old specs
*
* 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)
*
******************************************************************************/

/******************************************************************************/
/* Colors */
/******************************************************************************/

/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */

:root {
--text: black;
--bg: white;

--logo-bg: #1a5e9a;
--logo-active-bg: #c00;
--logo-text: white;

--tocnav-normal-text: #707070;
--tocnav-normal-bg: var(--bg);
--tocnav-hover-text: var(--tocnav-normal-text);
--tocnav-hover-bg: #f8f8f8;
--tocnav-active-text: #c00;
--tocnav-active-bg: var(--tocnav-normal-bg);

--tocsidebar-text: var(--text);
--tocsidebar-bg: #f7f8f9;
--tocsidebar-shadow: rgba(0,0,0,.1);
--tocsidebar-heading-text: hsla(203,20%,40%,.7);

--toclink-text: var(--text);
--toclink-underline: #3980b5;
--toclink-visited-text: var(--toclink-text);
--toclink-visited-underline: #054572;

--heading-text: #005a9c;

--hr-text: var(--text);

--algo-border: #def;

--del-text: #AA0000;
--del-bg: transparent;
--ins-text: #006100;
--ins-bg: transparent;

--a-normal-text: #034575;
--a-normal-underline: #bbb;
--a-visited-text: var(--a-normal-text);
--a-visited-underline: #707070;
--a-hover-bg: rgba(75%, 75%, 75%, .25);
--a-active-text: #c00;
--a-active-underline: #c00;

--blockquote-border: silver;
--blockquote-bg: transparent;
--blockquote-text: var(--text);

--issue-border: #e05252;
--issue-bg: #fbe9e9;
--issue-text: var(--text);
--issueheading-text: #831616;

--example-border: #e0cb52;
--example-bg: #fcfaee;
--example-text: var(--text);
--exampleheading-text: #574b0f;

--note-border: #52e052;
--note-bg: #e9fbe9;
--note-text: var(--text);
--noteheading-text: hsl(120, 70%, 30%);
--notesummary-underline: silver;

--advisement-border: orange;
--advisement-bg: #fec;
--advisement-text: var(--text);
--advisementheading-text: #b35f00;

--amendment-border: #330099;
--amendment-bg: #F5F0FF;
--amendment-text: var(--text);
--amendmentheading-text: #220066;

--warning-border: red;
--warning-bg: hsla(40,100%,50%,0.95);
--warning-text: var(--text);

--def-border: #8ccbf2;
--def-bg: #def;
--def-text: var(--text);
--defrow-border: #bbd7e9;

--datacell-border: silver;

--indexinfo-text: #707070;

--indextable-hover-text: black;
--indextable-hover-bg: #f7f8f9;

--outdatedspec-bg: rgba(0, 0, 0, .5);

--outdatedspec-text: black;
 --outdated-bg: maroon;
--outdated-text: white;
--outdated-shadow: red;

--editedrec-bg: darkorange;
}

/******************************************************************************/
/* 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;

/* Colors */
color: black;
color: var(--text);
background: white top left fixed no-repeat;
background-color: var(--bg);
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;}

/** W3C 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 img[src*="logos/W3C"] {
display: block;
border: solid #1a5e9a;
border: solid var(--logo-bg);
border-width: .65rem .7rem .6rem;
border-radius: .4rem;
background: #1a5e9a;
background: var(--logo-bg);
color: white;
color: var(--logo-text);
font-weight: bold;
}

.head a:hover > img[src*="logos/W3C"],

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

.head a:active > img[src*="logos/W3C"] {

background: #c00;
background: var(--logo-active-bg);
border-color: #c00;
border-color: var(--logo-active-bg);
}

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

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

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

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

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

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

box-shadow: 0 0 2px;
border: none;
border-top-right-radius: 1.33em;

color: #707070;
color: var(--tocnav-normal-text);
background: white;
background: var(--tocnav-normal-bg);
}
#toc-nav > a:hover,
#toc-nav > a:focus {
color: black;
color: var(--tocnav-hover-text);
background: #f8f8f8;
background: var(--tocnav-hover-bg);
}
#toc-nav > a:active {
color: #c00;
color: var(--tocnav-active-text);
background: white;
background: var(--tocnav-active-bg);
}

#toc-nav > #toc-jump {

padding-bottom: 2em;
margin-bottom: -1.9em;
}

/* 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 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);
color: black;
color: var(--tocsidebar-text);
background: inherit;
background-color: #f7f8f9;
background-color: var(--tocsidebar-bg);
z-index: 1;
box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
box-shadow: -.1em 0 .25em var(--tocsidebar-shadow) 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);
color: var(--tocsidebar-heading-text);
}
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);
color: black;
color: var(--tocsidebar-text);
background: inherit;
background-color: #f7f8f9;
background-color: var(--tocsidebar-bg);
 z-index: 1;
box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
box-shadow: -.1em 0 .25em var(--tocsidebar-shadow) 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);
color: var(--tocsidebar-heading-text);
}

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;
color: var(--heading-text);
}
 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) > :not(.head) + hr {

font-size: 1.5em;
text-align: center;
margin: 1em auto;
height: auto;
color: black;
color: var(--hr-text);
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),
.algorithm > ol ol:not(.algorithm) {
border-left: 0.5em solid #def;
border-left: 0.5em solid var(--algo-border);
}

/* 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: #AA0000;
color: var(--del-text);
background: transparent;
background: var(--del-bg);
text-decoration: line-through;
}
ins {
color: #006100;
color: var(--ins-text);
background: transparent;
background: var(--ins-bg);
text-decoration: underline;
}

/* for amendments (candidate/proposed changes) */

.amendment ins, .correction ins, .addition ins,
ins[class^=c] { text-decoration-style: dotted; }
.amendment del, .correction del, .addition del,
del[class^=c] { text-decoration-style: dotted; }
.amendment.proposed ins, .correction.proposed ins, .addition.proposed ins,
ins[class^=c].proposed { text-decoration-style: double; }
.amendment.proposed del, .correction.proposed del, .addition.proposed del,
del[class^=c].proposed { text-decoration-style: double; }

/** 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;
hyphens: none;
text-transform: none;
text-align: left;
text-align: start;
font-variant: normal;
orphans: 3;
widows: 3;
page-break-before: avoid;
}
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] {
color: #034575;
color: var(--a-normal-text);
text-decoration: none;
border-bottom: 1px solid #707070;
border-bottom: 1px solid var(--a-normal-underline);
/* Need a bit of extending for it to look okay */
padding: 0 1px 0;
margin: 0 -1px 0;
}
a:visited {
color: #034575;
color: var(--a-visited-text);
border-bottom-color: #bbb;
border-bottom-color: var(--a-visited-underline);
}

/* Use distinguishing colors when user is interacting with the link */

a[href]:focus,
a[href]:hover {
background: #f8f8f8;
background: rgba(75%, 75%, 75%, .25);
background: var(--a-hover-bg);
border-bottom-width: 3px;
margin-bottom: -2px;
}
a[href]:active {
color: #c00;
color: var(--a-active-text);
border-color: #c00;
border-color: var(--a-active-underline);
}

/* Backout above styling for W3C logo */

.head p:not(.copyright):first-child > 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;
height: auto;
}
.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; }

/******************************************************************************/
/* Colored Boxes */
/******************************************************************************/
 .issue, .note, .example, .advisement, blockquote,
.amendment, .correction, .addition {
padding: .5em;
border: .5em;
border-left-style: solid;
page-break-inside: avoid;
margin: 1em auto;
}
span.issue, span.note {
padding: .1em .5em .15em;
border-right-style: solid;
}

.note > p:first-child,

.issue > p:first-child,
blockquote > :first-child,
.amendment > p:first-child,
.correction > p:first-child,
.addition > p:first-child {
margin-top: 0;
}
.note > p:last-child,
.issue > p:last-child,
blockquote > :last-child,
.amendment > p:last-child,
.correction > p:last-child,
.addition > p:last-child {
margin-bottom: 0;
}

.issue::before, .issue > .marker,

.example::before, .example > .marker,
.note::before, .note > .marker,
details.note > summary > .marker,
.amendment::before, .amendment > .marker,
details.amendment > summary > .marker {
text-transform: uppercase;
padding-right: 1em;
}

.example::before, .example > .marker {

display: block;
padding-right: 0em;
}

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

blockquote {
border-color: silver;
border-color: var(--blockquote-border);
background: var(--blockquote-bg);
color: var(--blockquote-text);
}

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

.issue {
border-color: #e05252;
border-color: var(--issue-border);
 background: #fbe9e9;
background: var(--issue-bg);
color: black;
color: var(--issue-text);
counter-increment: issue;
overflow: auto;
}
.issue::before, .issue > .marker {
color: #831616;
color: var(--issueheading-text);
}
/* 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;
border-color: var(--example-border);
background: #fcfaee;
background: var(--example-bg);
color: black;
color: var(--example-text);
counter-increment: example;
overflow: auto;
clear: both;
}
.example::before, .example > .marker {
color: #574b0f;
color: var(--exampleheading-text);
}
/* 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;
border-color: var(--note-border);
background: #e9fbe9;
background: var(--note-bg);
color: black;
color: var(--note-text);
overflow: auto;
}

.note::before, .note > .marker,

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

details.note[open] > summary {

border-bottom: 1px silver solid;
border-bottom: 1px var(--notesummary-underline) solid;
 }

/** Advisement Box ************************************************************/

/* for attention-grabbing normative statements */

.advisement {
border-color: orange;
border-color: var(--advisement-border);
border-style: none solid;
background: #fec;
background: var(--advisement-bg);
color: black;
color: var(--advisement-text);
}
strong.advisement {
display: block;
text-align: center;
}
.advisement::before, .advisement > .marker {
color: #b35f00;
color: var(--advisementheading-text);
}

/** Amendment Box *************************************************************/

.amendment, .correction, .addition {

border-color: #330099;
border-color: var(--amendment-border);
background: #F5F0FF;
background: var(--amendment-bg);
}
.amendment.proposed, .correction.proposed, .addition.proposed {
border-style: solid;
border-block-width: 0.25em;
}
.amendment::before, .amendment > .marker,
details.amendment > summary::before, details.amendment > summary > .marker,
.correction::before, .correction > .marker,
details.correction > summary::before, details.correction > summary > .marker,
.addition::before, .addition > .marker,
details.addition > summary::before, details.addition > summary > .marker {
color: #220066;
color: var(--amendmentheading-text);
}
.amendment.proposed::before, .amendment.proposed > .marker,
details.amendment.proposed > summary::before, details.amendment.proposed >
summary > .marker,
.correction.proposed::before, .correction.proposed > .marker,
details.correction.proposed > summary::before, details.correction.proposed >
summary > .marker,
.addition.proposed::before, .addition.proposed > .marker,
details.addition.proposed > summary::before, details.addition.proposed >
summary > .marker {
font-weight: bold;
}

/** 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: hsla(40,100%,50%,0.95);
background: var(--warning-bg);
color: black;
color: var(--warning-text);
padding: .75em 1em;
border: red;
border: var(--warning-border);
border-style: solid none;
box-shadow: 0 2px 8px black;
text-align: center;
}
.annoying-warning :last-child {
margin-bottom: 0;
}

@media not print {

details.annoying-warning[open] {
position: fixed;
left: 0;
right: 0;
bottom: 2em;
z-index: 1000;
}
}

details.annoying-warning:not([open]) > summary {

text-align: center;
}

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

.def {
padding: .5em 1em;
background: #def;
background: var(--def-bg);
margin: 1.2em 0;
border-left: 0.5em solid #8ccbf2;
border-left: 0.5em solid var(--def-border);
color: black;
color: var(--def-text);
}

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

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

/** 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;
border-bottom: 1px solid var(--defrow-border);
}

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-color: var(--datacell-border);
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;
border-top: 1px solid var(--datacell-border);
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;
border: 1px solid var(--datacell-border);
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;
color: var(--toclink-text);
border-color: #3980b5;
border-color: var(--toclink-underline);
}
.toc a:visited {
color: black;
color: var(--toclink-visited-text);
border-color: #054572;
border-color: var(--toclink-visited-underline);
}
.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;
}
.toc {
line-height: 1.1em; /* 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 a + span {
white-space: nowrap;
 color: transparent;
}
ul.index li a:hover + span,
ul.index li a:focus + span {
color: #707070;
color: var(--indexinfo-text);
}
}

/** 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]) {
color: black;
color: var(--indextable-hover-text);
background: #f7f8f9;
background: var(--indextable-hover-bg);
}

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

/** Outdated warning **********************************************************/

.outdated-spec {
color: black;
color: var(--outdatedspec-text);
background-color: rgba(0,0,0,0.5);
background-color: var(--outdatedspec-bg);
}

.outdated-warning {
position: fixed;
bottom: 50%;
left: 0;
right: 0;
margin: 0 auto;
width: 50%;
background: maroon;
background: var(--outdated-bg);
color: white;
color: var(--outdated-text);
 border-radius: 1em;
box-shadow: 0 0 1em red;
box-shadow: 0 0 1em var(--outdated-shadow);
padding: 2em;
text-align: center;
z-index: 2;
}

.outdated-warning a {
color: currentcolor;
background: transparent;
}

.edited-rec-warning {
background: darkorange;
background: var(--editedrec-bg);
box-shadow: 0 0 1em;
}

.outdated-warning button {
position: absolute;
top: 0;
right:0;
margin: 0;
border: 0;
padding: 0.25em 0.5em;
background: transparent;
color: white;
color: var(--outdated-text);
font:1em sans-serif;
text-align:center;
}

.outdated-warning span {
display: block;
}

.outdated-collapsed {
bottom: 0;
border-radius: 0;
width: 100%;
padding: 0;
}

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

@media print {
/* Pages have their own margins. */
html {
margin: 0;
}
/* Serif for print. */
body {
font-family: serif;
}

.outdated-warning {
 position: absolute;
border-style: solid;
border-color: red;
}

.outdated-warning input {
display: none;
}
}
@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 {
/* Magic to create good item positioning:
"content column" is 50ems wide at max; less on smaller screens.
Extra space (after ToC + content) is empty on the right.

1. When item < content column, centers item in column.

2. When content < item < available, left-aligns.
3. When item > available, fills available and is scrollable.
*/
display: grid;
grid-template-columns: minmax(0, 50em);
}
.overlarge > table {
/* limit preferred width of table */
max-width: 50em;
margin-left: auto;
margin-right: auto;
}

@media (min-width: 55em) {

.overlarge {
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-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-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;
*/
}
}