/* 全般 */
span[lang="en"] {
	white-space: pre-line;
}

/* 各種ボックス */
.issue, .warning, .note, .example, .advisement {
	padding: 0.5em;
	border-width: 0.5em;
	border-style: none none none solid;
	margin-top: 0.5em;
}
span.note, span.issue, span.example { padding: .1em .5em .15em; }

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

.example > figure,
.example > pre {
	margin-left: 1em;
}

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

/* Examples */

div.example:before {
	content: "Example";
	content: "例";
	min-width: 7.5em;
	display: block;
}

.example > pre {
	background: #FCFADC;
}

/* 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);
	content: "課題";
	padding-right: 1em;
	color: #E05252;
}

/* Warning */
.warning {
	border-color: #E05252;
	background: #FBE9E9;
	counter-increment: issue;
}

.warning:before {
/*	content: "Worning " counter(issue);*/
	content: "警告";
	padding-right: 1em;
	color: #E05252;
}

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


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

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



/* at risk */

.atrisk::before {
	float: right;
	content: '◀ 広く実装されてない';
	white-space: pre;
	font-size: small;
	padding: 0.5em;
	text-decoration: underline;
	background-color: white;
	color: gray;
}

/* tables */

tr {
	border-top: 1px solid silver;
}

/* property, descriptor 定義表 */
table.propdef,
table.descdef {
	border-spacing: 0;
/*	table-layout: fixed; */
	background-color: #ddeeff;
	border-left: 0.5em solid;
}

table.propdef {
	border-left-color: #8ccbf2;
}
table.descdef {
	border-left-color: #8cdcb2;
}

table.descdef tr,
table.propdef tr {
	border-top-color: #bbd7e9;
}

table.descdef th,
table.propdef th {
	white-space: nowrap;
}

table.descdef td,
table.propdef td {
	min-width: 12em;
	border-left: 1px solid #bbd7e9;
}

	/* pre */
pre {
	white-space: pre-wrap;
}

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

pre.lang-js,
pre.lang-ml, /* html etc. */
pre.lang-css {
	background: #FCFADC;
}

/* DOM 例外 */
.error {
	color: #006633;
}


/* CSS 構成子
.type:     value types
.at-rule:  at rules
.property: property names
.value:    property values
.pseudo    pseudo-class, pseudo-element
.unit:     unit identifier
.production: production in grammar
.func:     functional notations
.css       other constructs
*/

.css,
.at-rule,
.property,
.descriptor,
.pseudo,
.prod,
.production,
.type,
.unit,
.func,
.value {
	font-family: monospace0, monospace;
}

.css,
.unit,
.at-rule,
.property {
	color: #005a9c;
}

.descriptor {
	color:#006724;
}

.property {
	white-space: nowrap;
}

.pseudo {
	color: purple;
}

/* CSS 値 #9c5a00 #832 */
.func,
.value {
	color: #832;
}

/* production */
.prod {
	color: #600;
}

.production,
.type {
	color: #600;
	font-style:italic;
}

.valdef > dt {
	font-family: monospace0, monospace;
}


/* HTML 要素, 内容属性 */
.element, .attr {
	color: #A22;
}

.element::before {
	content: '<';
}
.element::after {
	content: '>';
}

.event-type {
	color: purple;
}

/* Unicode */
.code-point {
	font-family: sans-serif0, sans-serif;
}

.char-symbol {
	color: gray;
	font-family: monospace;
}

.cp-name {
	color: gray;
}