default.css

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

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

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

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

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
	}

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

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

	h1 + h2,
	#subtitle + h2 {
		/* #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 ***********************************************************/
	/* <hr> used to separate TMI into the second half of a section              */
	hr:not([title]) {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	hr:not([title])::before {
		content: "\1F411\2003\2003\1F411\2003\2003\1F411";
	}
	/* note: <hr> with title separates document header from contents */

/******************************************************************************/
/*                            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 2em 0.5em 0;
		padding-left: 0;
	}

	dl dd {
		margin: 0 0 1em 2em;
	}
	.head dd {
		margin-bottom: 0;
	}

	/* Style for algorithms */
	ol.algorithm ol {
	 border-left: 1px solid #90b8de;
	 margin-left: 1em;
	}
	ol.algorithm ol.algorithm {
	 border-left: none;
	 margin-left: 0;
	}

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

	/* Style for paragraphs I know are in MD-genned lists */
	[data-md] > :first-child {
		margin-top: 0;
	}
	[data-md] > :last-child {
		margin-bottom: 0;
	}

/** Inline Lists **************************************************************/
	/* 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;
	}

/** 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 {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
		font-size: .9em;
		page-break-inside: avoid;
	}
	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Syntax-Highlighted Code ***************************************************/

	.example pre[class*="language-"],
	.example [class*="language-"] pre,
	.example pre[class*="lang-"],
	.example [class*="lang-"] pre {
		background: transparent; /* Prism applies a gray background that doesn't work well in the template. */
	}

/** Example Code **************************************************************/

	div.html, div.xml,
	pre.html, pre.xml {
		padding: 0.5em;
		margin: 1em 0;
		position: relative;
		clear: both;
		color: #600;
	}
	pre.example,
	pre.html,
	pre.xml {
		padding-top: 1.5em;
	}

	pre.illegal, .illegal pre
	pre.deprecated, .deprecated pre {
		color: red;
	}

/** IDL fragments *************************************************************/

	pre.idl {
		/* Match blue propdef boxes */
		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;
	}

/** Inline CSS fragments ******************************************************/

	.css.css, .property.property, .descriptor.descriptor {
		color: #005a9c;
		font-size: inherit;
		font-family: inherit;
	}
	.css::before, .property::before, .descriptor::before {
		content: "‘";
	}
	.css::after, .property::after, .descriptor::after {
		content: "’";
	}
	.property, .descriptor {
		/* Don't wrap property and descriptor names */
		white-space: nowrap;
	}
	.type { /* CSS value <type> */
	font-style: italic;
	}
	pre .property::before, pre .property::after {
		content: "";
	}

/** Inline markup fragments ***************************************************/

	code.html, code.xml {
		color: #660000;
	}

/** Autolinks produced using Bikeshed *****************************************/

	[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: "‘";
	}
	[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: "’";
	}

	[data-link-type].production::before,
	[data-link-type].production::after,
	.prod [data-link-type]::before,
	.prod [data-link-type]::after {
		content: "";
	}

	[data-link-type=element]         { font-family: monospace; }
	[data-link-type=element]::before { content: "<" }
	[data-link-type=element]::after  { content: ">" }

	[data-link-type=biblio] {
		white-space: pre;
	}


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

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

	/* We hyperlink a lot, so make it less intrusive */
	a:link, a:visited {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid silver;
	}
	@supports (text-decoration-color: silver) {
		a:link, a:visited {
			border-bottom: none;
			text-decoration: underline;
			text-decoration-color: silver;
		}
		a:visited {
			text-decoration-style: dotted;
		}
	}

	a.logo:link, a.logo:visited { /* backout above styling for W3C logo */
		padding: 0;
		border: none;
		text-decoration: none;
	}

/** Self-Links ****************************************************************/
	/* Auto-generated links from an element to its own anchor, for usability */

	.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: "#"; }

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

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

	figure, div.figure, div.sidefigure {
		page-break-inside: avoid;
	}

	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:not(.no-marker)::before, figcaption:not(.no-marker)::before {
		content: "Figure " counter(figure) ". ";
	}
	p.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	p.caption, figcaption {
		counter-increment: figure;
	}

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

	pre.ascii-art {
		display: table; /* shrinkwrap */
		margin: 1em auto;
	}

	/* Displaying the output of text layout, particularly when
		 line-breaking is being invoked, and thus having a
		 visible width is good. */
	pre.output {
		margin: 1em;
		border: solid thin silver;
		padding: 0.25em;
		display: table;
	}

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

	.issue, .note, .example, .why, .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;
	}

	div.issue,
	div.note,
	div.example,
	details.why,
	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 ****************************************************************/
	/* not intended for CR+ publication */

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue:not(.no-marker)::before {
		content: "ISSUE " counter(issue);
		padding-right: 1em;
	}
	.issue::before, .issue > .marker {
		color: #AE1E1E;
	}

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

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: exampleno;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		color: #827017;
		font-family: sans-serif;
		min-width: 7.5em;
		display: block;
	}
	.example:not(.no-marker)::before {
		content: "EXAMPLE";
		content: "EXAMPLE " counter(exampleno);
	}
	.invalid.example::before, .invalid.example > .marker,
	.illegal.example::before, .illegal.example > .marker {
		color: red;
	}
	.invalid.example:not(.no-marker)::before,
	.illegal.example:not(.no-marker)::before {
		content: "INVALID EXAMPLE";
		content: "INVALID EXAMPLE" counter(exampleno);
	}

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

	.note, .why {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}
	.note::before, .note > .marker {
		display: block;
		color: hsl(120, 70%, 30%);
	}

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

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
		text-align: center;
	}
	strong.advisement {
		display: block;
	}
	/*.advisement::before { color: #FF8800; } */

/** ??? ***********************************************************************/

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

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

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

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

	details.annoying-warning {
		display: block;
	}

	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		text-align: center;
		padding: .5em;
		border: thick solid red;
		border-radius: 1em;
	}
@media not print {
	details.annoying-warning[open] {
		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;
	}

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

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

	table.propdef, table.propdef-extra,
	table.descdef, table.definition-table {
		page-break-inside: avoid;
		width: 100%;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
		padding: 0.5em 1em;
		background: #DEF;
		border-spacing: 0;
	}

	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 > 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 th,
	table.propdef-extra th,
	table.descdef th,
	table.definition-table th {
		font-style: italic;
		font-weight: normal;
		width: 8.3em;
		padding-left: 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;
	}
	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;
	}

/** Profile Tables ************************************************************/
	/* table of required features in a CSS profile */

	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;
	}

/** Data tables (and properly marked-up proptables) ***************************/
	/*
		 <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.)
	*/

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

	.data td, .data th,
	.proptable td, .proptable th {
		padding: 0.5em;
		border-width: 1px;
		border-color: silver;
		border-top-style: 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;
		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;
	}


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


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

	/* ToC not indented, but font style shows hierarchy */
	ul.toc           { margin: 1em 0;     font-weight: bold; /*text-transform: uppercase;*/ }
	ul.toc ul        { margin: 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; }
	ul.toc ul.toc li { margin: 0.3em 0 0 0; }

	ul.toc, ul.toc ul, ul.toc li { padding: 0; line-height: 1.3; }
	ul.toc a { text-decoration: none; border-bottom-style: none; }
	ul.toc a:hover, ul.toc a:focus  { border-bottom-style: solid; }
	@supports (text-decoration-style: solid) {
		ul.toc a:hover, ul.toc a:focus  {
			border-bottom-style: none;
			text-decoration-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 {
		margin-left: 5em
	}
	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;
	}
	/* 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
	*/

/** At-risk List **************************************************************/
	/* Style for At Risk features (intended as editorial aid, not intended for publishing) */

	.atrisk::before {
	 float: right;
	 margin-top: -0.25em;
	 padding: 0.5em 1em 0.5em 0;
	 text-indent: -0.9em;
	 border: 1px solid;
	 content: '\25C0    Not yet widely implemented';
	 white-space: pre;
	 font-size: small;
	 background-color: white;
	 color: gray;
	 text-align: center;
	}

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

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

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

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

	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;
	}
	.propdef th {
		font-style: italic;
		font-weight: normal;
		text-align: left;
		width: 3em;
	}
	/* The link in the first column in the property table (formerly a TD) */
	table.proptable td .property,
	table.proptable th .property {
		display: block;
		text-align: left;
		font-weight: bold;
	}

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

	@media print {
		html {
			margin: 0 !important; }
		body {
			font-family: serif; }
		th, td {
			font-family: inherit; }
		a {
			color: inherit !important; }

		a:link, a:visited {
			text-decoration: none !important }
		a:link::after, a:visited::after { /* create a cross-ref "see..." */ }
		.example::before {
			font-family: serif !important; }
	}
	@page {
		margin: 1.5cm 1.1cm;
	}