default.css

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

@import "https://www.w3.org/2016/01/base.css";

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

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

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

/** 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],
	[data-link-type=element-attr] {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
		font-size: .9em;
	}
	[data-link-type=element]::before { content: "<" }
	[data-link-type=element]::after  { content: ">" }

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

/** 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 !important;
		opacity: .5;
		transition: opacity .2s;
	}
	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;
		width: 1.5em;
		height: 1.5em;
		background: gray;
		color: white;
		font-style: normal;
		opacity: 0;
		transition: opacity .2s, background-color .2s, color .2s;
	}
	dfn:hover > a.self-link {
		opacity: 1;
	}
	dfn > a.self-link:hover {
		color: #005A9C;
		background: #ddd;
	}

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

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

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

/******************************************************************************/
/*                                  Counters                                  */
/******************************************************************************/

	.caption::before,
	figcaption::before {
		content: "Figure " counter(figure) ". ";
	}

	.issue:not(.no-marker)::before {
		content: "Issue " counter(issue);
	}

	.example:not(.no-marker)::before {
		content: "Example";
		content: "Example " counter(example);
	}
	.invalid.example:not(.no-marker)::before,
	.illegal.example:not(.no-marker)::before {
		content: "Invalid Example ";
		content: "Invalid Example " counter(example);
	}

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

/* XXX: Remove these once all specs are bikeshedded or Bert's processor generates .def/.index classes */

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

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

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

/* XXX: Remove once generators write .index instead of .proptable */

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