stylesheet-extra.include

<style>
.note { border-left-style: solid; border-left-width: 0.25em; background: none repeat scroll 0 0 #E9FBE9; border-color: #52E052; }
.note em, .warning em, .note i, .warning i { font-style: normal; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
p.note:before { content: 'Note: '; font-weight: bolder;}
@media screen and (prefers-color-scheme: dark) {
	.note {background: none repeat scroll 0 0 #0b730b; border-color: #E9FBE9;}
}

.warning { background-color: #F9F0D4; border: medium double #FF0000; margin: 1em; padding: 1em; }
.warning p:first-child { margin-top: 0; }
.warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.warning:before { content: '\26A0 Warning! '; font-weight:bolder;}
.warning em, .warning i { font-style: normal; }
@media screen and (prefers-color-scheme: dark) {
	.warning {background: none repeat scroll 0 0 #997c25; border-color: #e88d8d;}
}

.critical {margin:1em; border:double red; padding:1em; background-color:#F9F0D4;}

.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
@media screen and (prefers-color-scheme: dark) {
	.XXX {background: none repeat scroll 0 0 #6d1d1d; border-color: #e88d8d; color: #e88d8d;}
}

pre.idl, pre.idl-ignore { border: solid thin #d3d3d3; background: #FCFCFC; padding: 0.5em 1em; position: relative; }
pre.idl :link, pre.idl :visited, pre.idl-ignore :link, pre.idl-ignore :visited { color: inherit; background: transparent; }
pre.idl::before, pre.idl-ignore::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em }

.intro-dom {
	font-size: 0.9em;
	font-style: italic;
}

.comment {
    color: green;
}

.example:before { content: 'Example ' counter(example) ':'; font-weight: bolder; }
.example pre:last-child { margin-bottom: 0; }
.example code.pre {white-space: pre;}


/* Used when spelling out words or symbols phonetically. */
span.phonetic {
	font-style: italic;
}

/* KEY
 * Denotes a key value (the value of the KeyboardEvent.key property).
 */
code.key {
	color: #191970;
	background-color: #b0e0e6;
	padding: 0 2px;
	border: 1px solid #b0d0d6;
	border-radius: 3px;
}
code.key a:link, code.key a:visited {
	color: #191970;
    text-decoration: none;
}
code.key:hover, code.key a:hover {
	color: #000000;
	background-color: #b0d0d6;
}

/* CODE
 * Denotes a code value that indicates the physical location of the key on
 * the keyboard). This is the value of the KeyboardEvent.code property.
 */
code.code {
	color: #191970;
	background-color: #ffc4ff;
	padding: 0 2px;
	border: 1px solid #f0a4f0;
	border-radius: 3px;
}
code.code a:link, code.code a:visited {
	color: #191970;
    text-decoration: none;
}
code.code:hover, code.code a:hover {
	color: #000000;
	background-color: #f0a4f0;
}

/* Denotes a string displayed on the keycap. */
code.keycap {
	padding: 0 2px;
	border: 1px solid black;
	border-radius: 3px;
}

@media screen and (prefers-color-scheme: dark) {
code.keycap {
	border: 1px solid lightgray;
}
}

/* Denotes a Unicode code-point for the character. */
code.unicode {
	color: #191970;
	background-color: #98fb98;
	padding: 0 2px;
}

/* Denotes an example glyph for the character. */
code.glyph {
    color: #191970;
    background-color: #ffe4b5;
}


/* Formatting for data tables (including the keyboard codes) */
.data-table {
	border-collapse:collapse;
	text-align:left;
	width: 100%;
}

.data-table th {
	background:none repeat scroll 0 0 #B9C9FE;
	border-bottom:1px solid #FFFFFF;
	border-top:4px solid #AABCFE;
	color:#003399;
	font-weight:normal;
	padding: 0.4em 1em;
}

.data-table td {
	background:none repeat scroll 0 0 #E8EDFF;
	border-bottom:1px solid #FFFFFF;
	border-top:1px solid transparent;
	color:#666699;
	padding: 0.4em 1em;
}

.data-table tr:hover td {
	background:none repeat scroll 0 0 #D0DAFD;
	color:#333399;
}

/* Formatting for the event sequence tables.
 */
.event-sequence-table th {
	background:none repeat scroll 0 0 #E8EDFF;
	font-weight:normal;
	padding: 0.25em 0.5em 0.25em 0.5em;
	font-size: 0.9em;
}

.event-sequence-table td {
	padding: 0 0.5em 0 0.5em;
	font-size: 0.8em;
	vertical-align: top;
}

.event-sequence-table tr:hover td {
    background:none repeat scroll 0 0 #E8EDFF;
}

@media screen and (prefers-color-scheme: dark) {
	.event-sequence-table th {background: none repeat scroll 0 0 #203785;}
	.event-sequence-table tr:hover td {background:none repeat scroll 0 0 #203785;}
}

.example .event-sequence-table {
    border: 1px solid #000000;
    margin: 3px;
}

.example .event-sequence-table td {
	background:none repeat scroll 0 0 #FCFAEE;
}

.example .event-sequence-table th {
	background:none repeat scroll 0 0 #ede19b;
}

.example .event-sequence-table tr:hover td {
    background:none repeat scroll 0 0 #ede19b;
}


@media screen and (prefers-color-scheme: dark) {
	.example .event-sequence-table {border: 1px solid lightgray;}
	.example .event-sequence-table th {background: none repeat scroll 0 0 #8a7a1a;}
	.example .event-sequence-table td {background: none repeat scroll 0 0 #514c2b;}
	.example .event-sequence-table tr:hover td {background:none repeat scroll 0 0 #8a7a1a;}
}

.cell-center {
	text-align: center;
}

.cell-number {
	text-align: right;
}


/* The cell in a code table that contains the code value. */
.code-table-code {
	vertical-align: top;
}

.event-definition {
    border: 2px solid black;
    width: 95%;
}
.event-definition td,
.event-definition th {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.9em;
}
.event-definition th {
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    background-color: #D0DAFD;
}
.event-definition td {
    width: 100%;
}
.event-definition td > ul > li,
.event-definition td > ul > li > p {
    margin-top: 0;
    margin-bottom: 0;
}
@media screen and (prefers-color-scheme: dark) {
	.event-definition {border: 2px solid lightgray;}
	.event-definition th {background: none repeat scroll 0 0 #203785;}
}
</style>