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
* -> ins/del[cite] 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 (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
*
* 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)
*
* - .uname and .codepoint for character names and examples
*
******************************************************************************/
/******************************************************************************/
/* Colors */
/******************************************************************************/
/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
:root {
--text: black;
--bg: white;
/* Absolute URLs due to https://bugs.webkit.org/show_bug.cgi?id=230243 */
--unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-light-unofficial.svg);
--draft-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-light-draft.svg);
--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: #707070;
--a-visited-text: var(--a-normal-text);
--a-visited-underline: #bbb;
--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%, 22%);
--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 4em; /* center text within page, space for footers */
padding: 1.6em 1.5em 0 50px; /* assume 16px font size for downlevel clients */
padding: 1.6em 1.5em 0 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%;
}
#w3c-state {
margin-top: 0;
margin-bottom: 1.5em;
font: 140% 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 */
color: #005a9c;
color: var(--heading-text);
}
/** 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-radius: 50%;
height: 120px;
margin-top: -10px;
padding: 10px;
width: 120px;
}
.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,
#toc-nav > #toc-toggle {
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;
}
}
/******************************************************************************/
/* 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; }
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 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 {
margin-top: 1em;
}
dl.switch > dt + dt {
margin-top: 0;
}
/* For older browsers */
dl.switch > dt::before {
content: '\21AA';
padding: 0 0.5em 0 0;
display: inline-block;
width: 1em;
text-align: right;
line-height: 0.5em;
}
dl.switch > dt {
text-indent: -1.5em;
}
:where(dl.switch > dt > *) {
text-indent: 0; /* break inheritance on e.g. list children */
}
/* Undo above styling and use list-style for proper bullets */
@supports (list-style: "\21AA ") {
dl.switch > dt {
display: list-item;
counter-increment: list-item 0;
list-style: "\21AA ";
margin-left: -1.5em;
text-indent: 0;
}
dl.switch > dt::before {
content: none;
}
}
/** 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;
text-decoration-style: dashed;
}
ins:not(#dontusethisid) *,
del:not(#dontusethisid) * {
color: inherit;
}
ins:not([hidden]).diff-inactive,
del:not([hidden]).diff-inactive {
all: unset;
}
ins:not(.diff-inactive) *,
del:not(.diff-inactive) * {
color: inherit;
}
/* for amendments (candidate/proposed changes) */
.amendment ins, .correction ins, .addition ins,
ins[cite] { text-decoration-style: dotted; }
.amendment del, .correction del, .addition del,
del[cite] { text-decoration-style: dotted; }
.amendment.proposed ins, .correction.proposed ins, .addition.proposed ins,
ins[cite].proposed { text-decoration-style: double; }
.amendment.proposed del, .correction.proposed del, .addition.proposed del,
del[cite].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-color: #707070;
text-decoration-color: var(--a-normal-underline);
text-decoration-skip-ink: none;
}
a:visited {
color: #034575;
color: var(--a-visited-text);
text-decoration-color: #bbb;
text-decoration-color: var(--a-visited-underline);
}
/* Indicate interaction with the link */
a[href]:focus,
a[href]:hover {
text-decoration-thickness: 2px;
text-decoration-skip-ink: none;
}
a[href]:active {
color: #c00;
color: var(--a-active-text);
text-decoration-color: #c00;
text-decoration-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,
.figure svg, .sidefigure svg, figure svg {
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: 1px solid;
border-left: .5em 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,
.correction::before, .correction > .marker,
details.correction > summary > .marker,
.addition::before, .addition > .marker,
details.addition > 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%, 22%);
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:not([hidden]) {
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: 1px solid var(--def-border);
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) *************************/
/*
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 {
color: black;
color: var(--toclink-text);
/* More spacing; use padding to make it part of the click target. */
padding: 0.1rem 1px 0;
/* Larger, more consistently-sized click target */
display: block;
/* Switch to using border-bottom */
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
.toc a:visited {
color: black;
color: var(--toclink-visited-text);
}
.toc a:focus,
.toc a:hover {
background: #f8f8f8;
background: rgba(75%, 75%, 75%, .25);
background: var(--a-hover-bg);
border-bottom-color: #3980b5;
border-bottom-color: var(--toclink-underline);
}
.toc a:visited:focus,
.toc a:visited:hover {
border-bottom-color: #054572;
border-bottom-color: var(--toclink-visited-underline);
}
.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;
}
/** Unicode characters and character sequences *******************************/
.codepoint bdi {
line-height: 1em;
font-size: 1.25em;
padding-inline: 0.25em;
}
.codepoint img {
height: 2em;
margin-inline: 0.25em;
vertical-align: bottom;
}
.uname {
font-family: Arial, monospace;
font-size: 0.75em;
letter-spacing: 0.03em;
color: brown;
}
/** 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;
*/
}
}
/******************************************************************************/
/* Dark mode toggle */
/******************************************************************************/
#toc-theme-toggle input {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
#toc-theme-toggle img {
background-color: transparent;
}
#toc-theme-toggle span {
padding: 5px;
border-radius: 30px;
}
#toc-theme-toggle input:checked + span {
background-color: var(--logo-bg);
color: var(--logo-text);
padding: 3px 10px;
}
@media (prefers-reduced-motion: reduce) {
body.toc-sidebar #toc {
position: absolute;
overflow: initial;
bottom: unset;
}
}
td.valor-numerico {
text-align: right;
/* Esto sobreescribe el text-align: left; general */
}
|