default.css

/*
 * Style sheet for the CSS3 specification,
 * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
 */

@media print {
	html { margin: 0 !important }
	body { font-family: serif }
	th, td { font-family: inherit }
	a { color: inherit !important }
	.example:before { font-family: serif !important }
	a:link, a:visited { text-decoration: none !important }
	a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
}
@page {
	margin: 1.5cm 1.1cm;
}

body {
	counter-reset: exampleno figure issue;
	max-width: 50em;
	margin: 0 auto !important;
}

/* Pagination */
h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
figure, div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
.example { page-break-inside: avoid }
dt { page-break-after: avoid }

span.id {float: right; font-weight: bold}

/* General Structural Markup */
h2, h3, h5, h6 { margin-top: 3em; }

h1 + h2 { margin-top: 0; }

h4 { margin-top: 4em; }

h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 1.2em }

p, div.note, div.issue, details.why {
	margin-top: 1em;
	margin-bottom: 1em;
}

dd > p:first-child, li > p:first-child, .note > p:first-child, .issue > p:first-child {
	margin-top: 0
}

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

pre, code {
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-size: .9em;
}

img {
	border-style: none;
	color: white;
}
.toc {
}

body {
	line-height: 1.5;
}

a:link, a:visited {
	border-bottom: 1px solid silver;
	color: inherit;
	text-decoration: none;
}

a.logo:link, a.logo:visited {
	padding: 0;
	border-style: none;
}

dl dd { margin: 0 0 1em 2em }
.head dd { margin-bottom: 0; }
ul, ol { margin-left: 0; padding-left: 2em; }
li { margin: 0.25em 2em 0.5em 0; padding-left: 0 }

ul.indexlist { margin-left: 0; columns: 13em; }
ul.indexlist li { margin-left: 0; list-style: none }
ul.indexlist li li { margin-left: 1em }
ul.indexlist a { font-weight: bold; }
ul.indexlist ul, ul.indexlist dl { font-size: smaller; }
ul.indexlist dl { margin-top: 0; }
ul.indexlist dt { margin: .2em 0 .2em 20px;}
ul.indexlist dd { margin: .2em 0 .2em 40px;}

/* .self-link is a link to the element */
.heading, .issue, .note, .example, li, dt { position: relative; }
a.self-link {
	position: absolute;
	top: 0;
	left: -2.5em;
	width: 2em;
	height: 2em;
	text-align: center;
	border: none;
	transition: opacity .2s;
	opacity: .5;
}
a.self-link:hover {
	opacity: 1;
}
.heading > a.self-link {
	font-size: 83%;
}
li > a.self-link {
	left: -3.5em;
}
dfn > a.self-link {
	top: auto;
	left: auto;
	opacity: 0;
	width: 1.5em;
	height: 1.5em;
	background: gray;
	color: white;
	font-style: normal;
	transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
	opacity: 1;
}
dfn > a.self-link:hover {
	color: black;
}

a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }

/* Examples */

.example {
	counter-increment: exampleno;
}
.example:before {
	content: "Example";
	content: "Example " counter(exampleno);
	min-width: 7.5em;
	text-transform: uppercase;
	display: block;
}
div.illegal-example:before, pre.illegal-example:before {
	content: "Invalid Example";
	content: "Invalid Example" counter(exampleno);
}
.example, .illegal-example, div.html, div.illegal-html, div.xml,
div.illegal-xml, pre.html,
pre.illegal-html, pre.xml, pre.illegal-xml {
	padding: 0.5em;
	margin: 1em 0;
	position: relative;
	clear: both;
}
pre.example, pre.illegal-example, pre.html,
pre.illegal-html, pre.xml, pre.illegal-xml {
	padding-top: 1.5em;
}
pre.illegal-example { color: red }
div.illegal-example { color: red }
div.illegal-example p { color: black }

div.html { color: #600 }
pre.html { color: #600 }
pre.illegal-html { color: red }
div.illegal-html { color: red }
div.illegal-html p { color: black }
pre.deprecated-html { color: red }
div.deprecated-html { color: red }
div.deprecated-html p { color: black }

div.xml { color: #600 }
pre.xml { color: #600 }
pre.illegal-xml { color: red }
div.illegal-xml { color: red }
div.illegal-xml p { color: black }

.css, .property { color: #005a9c }		/* inline CSS code (SPAN/CODE) */
code.css { font-family: inherit; font-size: 100% }
code.html { color: #600 }	/* inline HTML */
code.xml { color: #600 }	/* inline XML */
.property { font: inherit; white-space: nowrap; }	/* name of a CSS property (SPAN) */
.descriptor { }			/* name of a CSS descriptor (SPAN) */
.type { font-style: italic }	/* A <type> value for a property */

/* Autolinks produced using Tab's preprocessor. */
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {content: "\2018";}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {content: "\2019";}
[data-link-type].production::before,
[data-link-type].production::after { content: ""; }

dfn { font-weight: bolder; }
a > i { font-style: normal; } /* Instance of term */

.issue, .note, .example, .why {
	padding: .5em;
	/* padding: .5rem; /* proposed unit in css3-values */
	border-left-width: .5em;
	/* border-left-width: .5rem; /* proposed unit in css3-values */
	border-left-style: solid;
}
span.note, span.issue { padding: .1em .5em .15em; }

/* Open issue / editorial remark; not intended for a final publication */
.issue {
	border-color: #E05252;
	background: #FBE9E9;
	counter-increment: issue;
}

.issue:before {
	content: "Issue " counter(issue);
	padding-right: 1em;
	text-transform: uppercase;
	color: #E05252;
}

/* Class note is a non-normative note. May be inline or a P or DIV */
.note, .why {
	border-color: #52E052;
	background: #E9FBE9;
}

.normref { color: red }
.informref { color: green }

/* Example box */
.example {
	border-color: #E0CB52;
	background: #FCFAEE;
}

.example:before {
	color: #B9AB2D;
	font-family: sans-serif;
}

details.why {
	border-color: #52E052;
	background: #E9FBE9;
}

details.why > summary {
	font-style: italic;
}

details.why[open] > summary {
	border-bottom: 1px silver solid;
}

/* ToC not indented, but font style shows hierarchy */
ul.toc {margin: 1em 0; padding: 0; line-height: 1.3; font-weight: bold; /*text-transform: uppercase;*/ }
ul.toc ul {margin: 0; padding: 0; font-weight: normal; text-transform: none; }
ul.toc ul ul {margin: 0 0 0 2em; font-style: italic; }
ul.toc ul ul ul {margin: 0}
ul.toc > li {margin: 1.5em 0; padding: 0; }
ul.toc ul.toc li { margin: 0.3em 0 0 0; }
ul.toc a { text-decoration: none; border-bottom-style: none; }
ul.toc a:hover, ul.toc a:focus { border-bottom-style: solid; }
/*
ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
*/

/* Section numbers in a column of their own */
ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
ul.toc ul ul span.secno { margin-left: -7em; }
/*ul.toc span.secno {text-align: right}*/
ul.toc li {clear: both}
ul.toc {margin-left: 5em}
/* If we had 'tab', floats would not be needed here:
	 ul.toc span.secno {tab: 5em right; margin-right: 1em}
	 ul.toc li {text-indent: 5em hanging}
 The second line in case items wrap
*/

ul.index {
	list-style: none;
}

s, del {text-decoration: line-through; color: red}
u, ins {text-decoration: underline; background: #bfa}

div.figure, p.figure, div.sidefigure, figure {
	text-align: center;
	margin: 2.5em 0;
}
div.figure pre, div.sidefigure pre, figure pre {
	text-align: left;
	display: table;
	margin: 1em auto;
}
.figure table, figure table {
	margin: auto;
}
div.sidefigure, figure.sidefigure {
	float: right;
	width: 50%;
	margin: 0 0 0.5em 0.5em
}
div.figure img, div.sidefigure img, figure img,
div.figure object, div.sidefigure object, figure object {
	display: block;
	margin: auto;
	max-width: 100%
}
p.caption, figcaption, caption {
	text-align: center;
	font-style: italic;
	font-size: 90%;
}
p.caption:before, figcaption:before {
	content: "Figure " counter(figure) ". ";
	font-weight: bold;
}
p.caption, figcaption {
	counter-increment: figure;
}

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

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

/* "Equations" (not real MathML, but simple HTML) are put in a
blockquote and may have an equation number. We make sure the
blockquote has enough margin on the right and then put the equation
number there. */

blockquote {
	margin: 0.5em 4em 0.5em 2em;
	text-indent: 0;
}
.eqno {
	text-align: right;
	float: right;
	width: 3em;
	margin: 0 -4em 0 0;
	font-weight: bold;
	/* background: silver; color: black; padding: 0.1em */
}

table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
table.equiv-table th, table.equiv-table td { padding: 0.3em }
table.equiv-table th { text-align: left }
/* table.equiv-table th:first-child { text-align: right } */
table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
table.equiv-table { border-bottom: hidden }
table.equiv-table { empty-cells: show }
table.equiv-table caption { margin: 0.5em 0 0 0 }

/* Style for table of properties */
table.proptable {
	font-size: small;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	margin: 1em 0;
}

table.proptable td, table.proptable th {
	padding: 0.4em;
	text-align: center;
}

table.proptable tr:hover td {
	background: #DEF;
}


/* Style for table that defines a property or a descriptor */
table.propdef, table.propdef-extra, table.descdef, table.definition-table {
	border-spacing: 0;
	padding: 0 1em 0.5em;
	width: 100%;
	table-layout: fixed;
	background: #DEF;
	margin: 1.2em 0;
	border-left: 0.5em solid #8CCBF2;
}

table.propdef td, table.propdef-extra td, table.descdef td, table.definition-table td,
table.propdef th, table.propdef-extra th, table.descdef th, table.definition-table th {
	padding: 0.5em;
	vertical-align: baseline;
	border-bottom: 1px solid #bbd7e9;
}
/*
table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
	font-weight: bold;
	font-style: normal
}
*/

table.propdef td:first-child,
table.propdef-extra td:first-child,
table.descdef td:first-child,
table.definition-table td:first-child,
table.propdef th:first-child,
table.propdef-extra th:first-child,
table.descdef th:first-child,
table.definition-table th:first-child {
	font-style: italic;
	font-weight: normal;
	width: 8.3em;
	padding-left: 1em;
}
table.propdef td[colspan]:first-child,
table.propdef-extra td[colspan]:first-child,
table.descdef td[colspan]:first-child,
table.definition-table td[colspan]:first-child,
table.propdef th[colspan]:first-child,
table.propdef-extra th[colspan]:first-child,
table.descdef th[colspan]:first-child,
table.definition-table th[colspan]:first-child {
	font-style: inherit
}
table.propdef tr:first-child,
table.propdef-extra tr:first-child,
table.descdef tr:first-child,
table.definition-table tr:first-child {

}

table.propdef > tbody > tr:last-child th,
table.propdef-extra > tbody > tr:last-child th,
table.descdef > tbody > tr:last-child th,
table.definition-table > tbody > tr:last-child th,
table.propdef > tbody > tr:last-child td,
table.propdef-extra > tbody > tr:last-child td,
table.descdef > tbody > tr:last-child td,
table.definition-table > tbody > tr:last-child td {
	border-bottom: 0;
}

table.propdef tr:first-child th,
table.propdef-extra tr:first-child th,
table.descdef tr:first-child th,
table.definition-table tr:first-child th,
table.propdef tr:first-child td,
table.propdef-extra tr:first-child td,
table.descdef tr:first-child td,
table.definition-table tr:first-child td {
	padding-top: 1em;
}

/* 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 propdef */
table.propdef td.footnote,
table.propdef-extra td.footnote,
table.descdef td.footnote,
table.definition-table td.footnote {
	padding-top: 0.6em;
	width: auto
}
table.propdef td.footnote:before,
table.propdef-extra td.footnote:before,
table.descdef td.footnote:before,
table.definition-table td.footnote:before {
	content: " ";
	display: block;
	height: 0.6em;
	width: 4em;
	border-top: thin solid;
}

/* I don't know what this is for */
table.proptable td .property {
	display: block;
	text-align: left;
	font-weight: bold;
}


/* Styling for IDL fragments */

pre.idl {
	padding: .5em 1em;
	background: #DEF;
	margin: 1.2em 0;
	border-left: 0.5em solid #8CCBF2;
}
pre.idl :link, pre.idl :visited {
	color:inherit;
	background:transparent;
}


/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
or, if they do, they don't put them in uppercase. But the following
class is provided in case a spec wants to use RFC 2119 terms in
uppercase in the source. */

em.rfc2119 {
	text-transform: lowercase;
	font-variant: small-caps;
	font-style: normal
}

/* In Profile specs, a table of required features: */

table.features th {
	background: #00589f;
	color: #fff;
	text-align: left;
	padding: 0.2em 0.2em 0.2em 0.5em;
}
table.features td {
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	padding: 0.3em 0.3em 0.3em 0.7em;
}


/* Style for data tables (and properly marked-up proptables) */

.data, .proptable {
	margin: 1em auto;
	border-collapse: collapse;
	width: 100%;
	border: hidden;
}
.data {
	text-align: center;
}
.data caption {
	width: 100%;
}

.data td, .data th,
.proptable td, .proptable th {
	padding: 0.5em;
	border-top: 1px silver solid;
}

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

.data thead th[scope="row"],
.proptable thead th[scope="row"] {
	text-align: right;
	color: inherit;
}

.data thead,
.proptable thead,
.data tbody,
.proptable tbody {
	color: inherit;
	border-bottom: 2px solid;
}

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

.data tbody th:first-child,
.proptable tbody th:first-child ,
.data tbody td[scope="row"]:first-child,
.proptable tbody td[scope="row"]:first-child {
	text-align: right;
	color: inherit;
	border-right: 2px solid;
	border-top: 1px solid silver;
	padding-right: 1em;
}
.data.define td:last-child {
	text-align: left;
}

.data tbody th[rowspan],
.proptable tbody th[rowspan],
.data tbody td[rowspan],
.proptable tbody td[rowspan]{
	border-left: 1px solid silver;
}

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

.complex.data th,
.complex.data td {
	border: 1px solid silver;
}

.data td.long {
 vertical-align: baseline;
 text-align: left;
}

.data img {
	vertical-align: middle;
}

table.propdef {
	table-layout: auto;
}
.propdef th {
	font-style: italic;
	font-weight: normal;
	text-align: left;
	width: 3em;
}
dt dfn code {
	font-size: inherit;
}

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


/* Style for At Risk features (intended as editorial aid, not intended for publishing) */
.atrisk::before {
 position: absolute;
 margin-left: -5em;
 margin-top: -2px;
 padding: 4px;
 border: 1px solid;
 content: 'At risk';
 font-size: small;
 background-color: white;
 color: gray;
 border-radius: 1em;
 text-align: center;
}

.toc .atrisk::before { content:none }


/* This is mostly to make the list inside the CR exit criteria more compact. */
ol.inline, ol.inline li {display: inline; padding: 0; margin: 0}
ol.inline {counter-reset: list-item}
ol.inline li {counter-increment: list-item}
ol.inline li:before {content: "(" counter(list-item) ") "; font-weight: bold}

/* This styles the obsoletion notice on some of our older/abandoned specs. */
details.annoying-warning[open] {
	background: #fdd;
	color: red;
	font-weight: bold;
	text-align: center;
	padding: .5em;
	border: thick solid red;
	border-radius: 1em;
	position: fixed;
	left: 1em;
	right: 1em;
	bottom: 1em;
	z-index: 1000;
}

details.annoying-warning:not([open]) > summary {
	background: #fdd;
	color: red;
	font-weight: bold;
	text-align: center;
	padding: .5em;
}