test/html-webhacc/cc-style.css

@import '/www/style/html/xoxo.css';

.section {
  display: block;
  margin: 1em;
  border: #800080 1px solid;
  padding: 0.5em 1em;
}

dt, strong, th {
  font-weight: bolder;
  font-family: sans-serif;
}
dt:after {
  content: ":";
}

h1 {
  font-weight: bolder;
  font-family: sans-serif;
  font-size: 180%;
}

h2, h3, h4, h5, h6, th {
  font-weight: bolder;
  font-family: sans-serif;
  font-size: 100%;
  background-color: #fff0f0;
  color: black;
}

h2, h3, h4, h5, h6 {
  margin: 0 0 0 -1em;
  padding: 0.3em 1em;
}

.section[id$=transfer-errors] h2,
.section[id$=transfer-errors] h3,
.section[id$=transfer-errors] h4,
.section[id$=transfer-errors] h5,
.section[id$=transfer-errors] h6 {
  padding-left: 40px;
  background-image: url(icons/transfer-32);
  background-repeat: no-repeat;
  background-position: 6px center;
  min-height: 32px;
}

.section[id$=parse-errors] h2,
.section[id$=parse-errors] h3,
.section[id$=parse-errors] h4,
.section[id$=parse-errors] h5,
.section[id$=parse-errors] h6 {
  padding-left: 40px;
  background-image: url(icons/syntax-32);
  background-repeat: no-repeat;
  background-position: 6px center;
  min-height: 32px;
}

.section[id$=document-errors] h2,
.section[id$=document-errors] h3,
.section[id$=document-errors] h4,
.section[id$=document-errors] h5,
.section[id$=document-errors] h6 {
  padding-left: 40px;
  background-image: url(icons/structure-32);
  background-repeat: no-repeat;
  background-position: 6px center;
  min-height: 32px;
}

.tree-text q, .tree-cdata q, .tree-comment q {
  display: block;
}

q:before, q:after {
  content: "";
}


#nav-items {
  display: block;
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  width: auto;
  height: auto;
  font-size: 90%;
  background-color: #f4fff4;
  color: black;
  padding: 0;
  line-height: 1.1;
}

#nav-items li {
  display: block;
  list-style: none;
  margin: 0;
  border-style: none;
  padding: 0;
  text-align: center;
}

#nav-items li a[href] {
  display: block;
  border-style: none;
  color: inherit;
  text-decoration: none;
}

body[data-scripted] #nav-items {
  display: none;
}

img {
  border-style: none;
}

code {
  font-family: "Courier New", "Courier", monospace;
  letter-spacing: 0.1em;
  background-color: transparent;
  color: orangered;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
}

pre > code:empty:after {
  content: " "; /* such that a line box is rendered */
}

.example {
  background-color: #ececff;
}

pre.example {
  margin-left: 1em;
  margin-right: 1em;
  padding: 0.2em 0.5em;
}

.example.bad {
  background-color: #fff7f7;
}

code.example.bad {
  color: inherit;
  background-color: #ffeeee;
}

h3 code.example.bad {
  color: orangered;
  background-color: transparent;
}

pre.example::before {
  content: "Example";
  display: block;
  color: #b0b0ff;
  background-color: transparent;
  font-weight: bolder;
  font-family: sans-serif;
}

pre.example.html::before {
  content: "HTML Example";
}

pre.example.xml::before {
  content: "XML Example";
}

pre.example.manifest::before {
  content: "Cache Manifest Example";
}

pre.example.bad::before {
  content: "Bad Example";
  color: #ffc1c1;
}

pre.example.bad.html::before {
  content: "HTML Bad Example";
}

pre.example.bad.xml::before {
  content: "XML Bad Example";
}

pre.example.bad.manifest::before {
  content: "Cache Manifest Bad Example";
}

.rfc2119 {
  border-style: none;
  text-transform: lowercase;
  font-variant: small-caps;
  font-style: normal;
  text-decoration: none;
  font-weight: normal;
  font-family: sans-serif;
}


/* dl.switch from WHATWG specification style sheet */

dl.switch {
  padding-left: 2em;
}

dl.switch dt {
  display: block;
  text-indent: -1.5em;
  font-weight: bolder;
  font-family: sans-serif;
  font-style: normal;
}

dl.switch dt:before {
  content: '\21AA';
  padding: 0 0.5em 0 0;
  display: inline-block;
  width: 1em;
  text-align: right;
  line-height: 0.5em;
}

dl.switch dt:after {
  content: " :";
}

mark {
  background-color: #ffff4d;
}

mark:empty:after {
  content: " ";
}

/* Tab navigation */

body[data-scripted] {
  min-width: 400px; /* body > nav's left is 300px */
  /* min-height is set to .section */
}

body[data-scripted] > h1,
body[data-scripted] > #input > h2,
body[data-scripted] .section.subdoc > h2,
body[data-scripted] .section.subdoc > h3,
body[data-scripted] .section.subdoc > h4,
body[data-scripted] .section.subdoc > h5,
body[data-scripted] .section.subdoc > h6 {
  font-size: 100%;
  margin: 0;
  padding: 0 17.5px; /* h1 > img's width is 265px */
}

body[data-scripted] > #input > h2,
body[data-scripted] .section.subdoc > h2,
body[data-scripted] .section.subdoc > h3,
body[data-scripted] .section.subdoc > h4,
body[data-scripted] .section.subdoc > h5,
body[data-scripted] .section.subdoc > h6 {
  float: left;
  margin: 0 0.5em 0 -1em;
  padding: 0.3em 1em;
  border: thin hidden;
  background-color: #fff0f0;
  color: black;
}

nav {
  display: block;
}

.section nav {
  margin-left: 1em;
}

nav ul {
  margin: 0;
  padding: 1em 0 0 0;
}

#input nav ul,
.section.subdoc nav ul {
  padding-top: 0;
}

nav ul li {
  display: inline;
  margin: 0;
  padding: 0 0.3em 0 0;
  line-height: 2;
}

nav a {
  display: inline;
  padding: 0.1em 0.3em;
  text-decoration: none;
  color: inherit;
  border: thin outset gray;
  -moz-border-radius: 0.2em;
  min-width: 4em;
  text-align: center;
}

nav [data-active] a {
  border-style: inset;
  background-color: #C0C0C0;
}

nav a[href$=transfer-errors] {
  padding-left: 20px;
  background-image: url(icons/transfer-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  min-height: 16px;
}

nav a[href$=parse-errors] {
  padding-left: 20px;
  background-image: url(icons/syntax-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  min-height: 16px;
}

nav a[href$=document-errors] {
  padding-left: 20px;
  background-image: url(icons/structure-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  min-height: 16px;
}

.section {
  clear: both;
}

body > nav {
  position: absolute;
  top: 0;
  height: 100px; /* h1 > img's height is 90px */
  left: 300px; /* h1 > img's width is 265px */
  right: 0;
  min-width: 100px; /* body's min-width is 400px */
  overflow: auto;
}

.section > nav {
/*
  height: 2em;
  max-height: 2em; *//* hn's line + padding-top + padding-bottom = 1.6em */
  overflow: auto;
  min-width: 5em;

  position: relative;
  z-index: 1000; /* such that scrollbars are clickable */
  white-space: nowrap; /* Firefox does not show vertical scrollbar,
      because there is a floated hn element... */
}

body[data-scripted] > .section,
body[data-scripted] > #input > .section,
body[data-scripted] .section.subdoc > .section {
  position: absolute;
  top: 100px; /* h1 > img's height is 90px */
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 10em;
  overflow: auto;
}

body[data-scripted] > #input > .section,
body[data-scripted] .section.subdoc > .section {
  top: 2em;
}

/* details widgets */

.details .legend {
  font-weight: bolder;
}

.details .legend:after {
  content: "...";
}

.details.open .legend:after,
body:not([data-scripted]) .details.default .legend:after {
  content: ":";
}

body[data-scripted] .details .legend {
  cursor: pointer;
}

body[data-scripted] .details > div {
  display: none;
}

/* Data input forms */

input[type=url] {
  width: 90%;
  min-width: 30em;
}

textarea {
  width: 95%;
  min-width: 30em;
  height: 20em;
}

/* Source codes taken from the input document or reformatted source */

/* q, */ .source li, .dump pre {
  white-space: pre;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
}

q, .source ol, .dump pre {
  background-color: #f0f0ff;
  color: black;
  line-height: 1.5;
}

.dump pre > code {
  color: inherit;
  background-color: transparent;
}

/* Document dumps */

.dump > ol {
  margin-left: 0;
  padding-left: 0;
}

.dump > ol > li {
/*  display: block;
  list-style: none;
  margin-left: 0;
  padding-left: 0; */
}

.dump > ol /* ol */ {
  margin-left: 1em;
  padding-left: 0;
}

.dump ol /*ol*/ li {
  margin-left: 0;
  padding-left: 0.4em;
}

.dump ul.attributes {
  margin-left: 3em;
  padding: 0;
}

.dump ul.attributes li {
  display: inline;
  list-style: none;
  margin: 0 2em 0 0;
  padding: 0;
  text-indent: 0;
  font-size: 90%;
}

q:after {
  content: " "; /* Make white-space-only quotations visible */
  white-space: pre;
}

dd.no-entry:lang(en) {
  font-style: italic;
}

dd.manifest-fallbacks + dd.manifest-fallbacks {
  margin-top: 1em;
}

dd.manifest-fallbacks p {
  margin: 0;
  text-indent: 0;
}

dd.manifest-fallbacks > p + p {
  text-indent: -1em;
}

dd.manifest-fallbacks > p + p:before {
  content: "\21B3  ";
}

/* Errors */

.errors dt {
  background-image: none;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px; /* icons/*-16.png */
  min-height: 16px;
}

.errors dd {
  margin-left: 0;
  padding-left: 60px;
  min-height: 32px; /* large-*.png files' height */
  background-position: 20px center;
  background-repeat: no-repeat;
}

.level-m, .level-s {
  background-image: url(large-stop);
/* TODO: we need an image for SHOULD-level errors */
}

.level-w {
  background-image: url(large-alert);
}

.level-i {
  background-image: url(large-info);
}

.level-u {
  background-image: none;
}

dt.level-u {
  margin: 0.2em 0 0 0;
  border: blue 0.2em solid;
  border-bottom-style: none;
  padding-top: 0.2em;
  padding-right: 0.2em;
  padding-bottom: 0;
  background-color: #e1e1ff;
  color: black;
}

dd.level-u {
  margin: 0 0 0.2em;
  border: blue 0.2em solid;
  border-top-style: none;
  padding-right: 0.2em;
  padding-bottom: 0.2em;
  padding-top: 0;
  background-color: #e1e1ff;
  color: black;
}

dt.layer-transfer {
  background-image: url(icons/transfer-16);
}

dt.layer-encode,
dt.layer-charset {
  background-image: url(icons/char-16);
/* TODO: We need different images for these layers */
}

dt.layer-syntax {
  background-image: url(icons/syntax-16);
}

dt.layer-structure {
  background-image: url(icons/structure-16);
}

dt.layer-semantics {
  background-image: url(icons/semantics-16);
}

.errors dl:empty {
  display: none;
}

.errors .no-errors {
  text-indent: 0;
}

.errors .no-errors:lang(en) {
  font-style: italic;
}

/* List of IDs */

#identifiers dd,
[id$="-identifiers"] dd {
  margin-left: 20px;
  padding-left: 20px;
  min-height: 20px;
}

#identifiers dd + dd,
[id$="-identifiers"] dd + dd {
  background-image: url(error);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Result paragraph */

.result-para {
  margin-left: 20px;
  padding-left: 40px;
  min-height: 32px;
  background-color: none;
  background-position: center left;
  background-repeat: no-repeat;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-right: 1em;
}

.result-para.no-error {
  background-image: url(ok);
  background-color: #ddffdd;
  color: black;
}

.result-para.must-errors,
.result-para.should-errors {
  background-image: url(large-stop);
  /* TODO: Use different image for should-errors */
}

/* See "Result summary table" for background color of
   .must-errors and .should-errors */

.result-para.uncertain {
  border: blue 0.2em solid;
  background-color: #e1e1ff;
  color: black;
  background-image: none;
}

/* Result summary table */

.result table {
  margin-left: auto;
  margin-right: auto;
  border: 4px solid #800080;
  border-collapse: collapse;
}

.result tbody,
.result colgroup {
  border: 4px solid #800080;
}

.result tbody > tr:first-child > th {
  border-bottom-width: 2px;
}

.result tr.total > * {
  border-top-width: 2px;
}

.result td.subrow {
  border-right-width: 2px;
}

.result th,
.result td.subrow,
.result .uncertain td.subrow {
  background-color: #fff0f0;
  color: black;
}

.result th,
.result td {
  border: 1px solid #800080;
  padding: 0.2em 0.5em;
  text-align: center;
  empty-cells: show;
}

.result td.subrow {
  border-top-style: hidden;
}

.result .uncertain td {
  background-color: #e1e1ff;
  color: black;
}

.result .must-errors,
.result .uncertain .must-errors {
  background-color: #ffcece;
  color: black;
}

.result .should-errors,
.result .uncertain .should-errors {
  background-color: #e1e1ff;
  color: black;
}

.result tfoot .total strong {
  font-size: 150%;
}

.result thead > tr > th:first-child + th {
  background-image: url(error);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* error.png's width is 16px */
}

.result thead > tr > th:first-child + th + th {
  background-image: url(error); /* TODO: SHOULD image */
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* error.png's width is 16px */
}

.result thead > tr > th:first-child + th + th + th {
  background-image: url(alert);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* alert.png's width is 16px */
}

.result thead > tr > th:first-child + th + th + th + th {
  background-image: url(info);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* info.png's width is 16px */
}

.result thead + tbody > tr:first-child + tr > th {
  background-image: url(icons/transfer-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

.result thead + tbody > tr:first-child + tr + tr > th {
  background-image: url(icons/char-16); /* TODO: new image */
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

.result thead + tbody > tr:first-child + tr + tr + tr > th {
  background-image: url(icons/char-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

.result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
  background-image: url(icons/syntax-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

.result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
  background-image: url(icons/structure-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

.result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
  background-image: url(icons/semantics-16);
  background-repeat: no-repeat;
  background-position: 2px center;
  padding-left: 20px; /* background-image's width is 16px */
}

/* Floating help box */

aside.help {
  display: block;
  position: fixed;
  z-index: 10000;
  background-color: #FFFFCC;
  color: black;
  border: 0.1em outset #FFFF66;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  border-radius: 0.4em;
  padding: 0.5em;
  overflow: auto;
  max-height: 50%;
  max-width: 50%;
  -webkit-box-shadow: 0.6em 0.6em 0.4em gray;
}

aside.help > h3 {
  display: none; /* since it is duplicated with the main document's content. */
}

aside.help > h3 + * {
  margin-top: 0;
}

aside.help > *:last-child {
  margin-bottom: 0;
}

/* Used instead of XHR for HTML documents */
iframe {
  margin: 0;
  border-style: none;
  padding: 0;
  width: 0;
  height: 0;
}

body[data-scripted] a[rel~=help] {
  text-decoration: none;
  border-bottom: dotted 1px;
  padding-bottom: 0;
}

/*

Copyright 2007-2008 Wakaba <w@suika.fam.cx>.

This library is free software; you can redistribute it
and/or modify it under the same terms as Perl itself.

$Date: 2008/08/16 13:09:08 $

*/
1	@import '/www/style/html/xoxo.css';
2
3	.section {
4	display: block;
5	margin: 1em;
6	border: #800080 1px solid;
7	padding: 0.5em 1em;
8	}
9
10	dt, strong, th {
11	font-weight: bolder;
12	font-family: sans-serif;
13	}
14	dt:after {
15	content: ":";
16	}
17
18	h1 {
19	font-weight: bolder;
20	font-family: sans-serif;
21	font-size: 180%;
22	}
23
24	h2, h3, h4, h5, h6, th {
25	font-weight: bolder;
26	font-family: sans-serif;
27	font-size: 100%;
28	background-color: #fff0f0;
29	color: black;
30	}
31
32	h2, h3, h4, h5, h6 {
33	margin: 0 0 0 -1em;
34	padding: 0.3em 1em;
35	}
36
37	.section[id$=transfer-errors] h2,
38	.section[id$=transfer-errors] h3,
39	.section[id$=transfer-errors] h4,
40	.section[id$=transfer-errors] h5,
41	.section[id$=transfer-errors] h6 {
42	padding-left: 40px;
43	background-image: url(icons/transfer-32);
44	background-repeat: no-repeat;
45	background-position: 6px center;
46	min-height: 32px;
47	}
48
49	.section[id$=parse-errors] h2,
50	.section[id$=parse-errors] h3,
51	.section[id$=parse-errors] h4,
52	.section[id$=parse-errors] h5,
53	.section[id$=parse-errors] h6 {
54	padding-left: 40px;
55	background-image: url(icons/syntax-32);
56	background-repeat: no-repeat;
57	background-position: 6px center;
58	min-height: 32px;
59	}
60
61	.section[id$=document-errors] h2,
62	.section[id$=document-errors] h3,
63	.section[id$=document-errors] h4,
64	.section[id$=document-errors] h5,
65	.section[id$=document-errors] h6 {
66	padding-left: 40px;
67	background-image: url(icons/structure-32);
68	background-repeat: no-repeat;
69	background-position: 6px center;
70	min-height: 32px;
71	}
72
73	.tree-text q, .tree-cdata q, .tree-comment q {
74	display: block;
75	}
76
77	q:before, q:after {
78	content: "";
79	}
80
81
82	#nav-items {
83	display: block;
84	position: fixed;
85	top: 0.5em;
86	right: 0.5em;
87	width: auto;
88	height: auto;
89	font-size: 90%;
90	background-color: #f4fff4;
91	color: black;
92	padding: 0;
93	line-height: 1.1;
94	}
95
96	#nav-items li {
97	display: block;
98	list-style: none;
99	margin: 0;
100	border-style: none;
101	padding: 0;
102	text-align: center;
103	}
104
105	#nav-items li a[href] {
106	display: block;
107	border-style: none;
108	color: inherit;
109	text-decoration: none;
110	}
111
112	body[data-scripted] #nav-items {
113	display: none;
114	}
115
116	img {
117	border-style: none;
118	}
119
120	code {
121	font-family: "Courier New", "Courier", monospace;
122	letter-spacing: 0.1em;
123	background-color: transparent;
124	color: orangered;
125	white-space: -moz-pre-wrap;
126	white-space: pre-wrap;
127	}
128
129	pre > code:empty:after {
130	content: " "; /* such that a line box is rendered */
131	}
132
133	.example {
134	background-color: #ececff;
135	}
136
137	pre.example {
138	margin-left: 1em;
139	margin-right: 1em;
140	padding: 0.2em 0.5em;
141	}
142
143	.example.bad {
144	background-color: #fff7f7;
145	}
146
147	code.example.bad {
148	color: inherit;
149	background-color: #ffeeee;
150	}
151
152	h3 code.example.bad {
153	color: orangered;
154	background-color: transparent;
155	}
156
157	pre.example::before {
158	content: "Example";
159	display: block;
160	color: #b0b0ff;
161	background-color: transparent;
162	font-weight: bolder;
163	font-family: sans-serif;
164	}
165
166	pre.example.html::before {
167	content: "HTML Example";
168	}
169
170	pre.example.xml::before {
171	content: "XML Example";
172	}
173
174	pre.example.manifest::before {
175	content: "Cache Manifest Example";
176	}
177
178	pre.example.bad::before {
179	content: "Bad Example";
180	color: #ffc1c1;
181	}
182
183	pre.example.bad.html::before {
184	content: "HTML Bad Example";
185	}
186
187	pre.example.bad.xml::before {
188	content: "XML Bad Example";
189	}
190
191	pre.example.bad.manifest::before {
192	content: "Cache Manifest Bad Example";
193	}
194
195	.rfc2119 {
196	border-style: none;
197	text-transform: lowercase;
198	font-variant: small-caps;
199	font-style: normal;
200	text-decoration: none;
201	font-weight: normal;
202	font-family: sans-serif;
203	}
204
205
206	/* dl.switch from WHATWG specification style sheet */
207
208	dl.switch {
209	padding-left: 2em;
210	}
211
212	dl.switch dt {
213	display: block;
214	text-indent: -1.5em;
215	font-weight: bolder;
216	font-family: sans-serif;
217	font-style: normal;
218	}
219
220	dl.switch dt:before {
221	content: '\21AA';
222	padding: 0 0.5em 0 0;
223	display: inline-block;
224	width: 1em;
225	text-align: right;
226	line-height: 0.5em;
227	}
228
229	dl.switch dt:after {
230	content: " :";
231	}
232
233	mark {
234	background-color: #ffff4d;
235	}
236
237	mark:empty:after {
238	content: " ";
239	}
240
241	/* Tab navigation */
242
243	body[data-scripted] {
244	min-width: 400px; /* body > nav's left is 300px */
245	/* min-height is set to .section */
246	}
247
248	body[data-scripted] > h1,
249	body[data-scripted] > #input > h2,
250	body[data-scripted] .section.subdoc > h2,
251	body[data-scripted] .section.subdoc > h3,
252	body[data-scripted] .section.subdoc > h4,
253	body[data-scripted] .section.subdoc > h5,
254	body[data-scripted] .section.subdoc > h6 {
255	font-size: 100%;
256	margin: 0;
257	padding: 0 17.5px; /* h1 > img's width is 265px */
258	}
259
260	body[data-scripted] > #input > h2,
261	body[data-scripted] .section.subdoc > h2,
262	body[data-scripted] .section.subdoc > h3,
263	body[data-scripted] .section.subdoc > h4,
264	body[data-scripted] .section.subdoc > h5,
265	body[data-scripted] .section.subdoc > h6 {
266	float: left;
267	margin: 0 0.5em 0 -1em;
268	padding: 0.3em 1em;
269	border: thin hidden;
270	background-color: #fff0f0;
271	color: black;
272	}
273
274	nav {
275	display: block;
276	}
277
278	.section nav {
279	margin-left: 1em;
280	}
281
282	nav ul {
283	margin: 0;
284	padding: 1em 0 0 0;
285	}
286
287	#input nav ul,
288	.section.subdoc nav ul {
289	padding-top: 0;
290	}
291
292	nav ul li {
293	display: inline;
294	margin: 0;
295	padding: 0 0.3em 0 0;
296	line-height: 2;
297	}
298
299	nav a {
300	display: inline;
301	padding: 0.1em 0.3em;
302	text-decoration: none;
303	color: inherit;
304	border: thin outset gray;
305	-moz-border-radius: 0.2em;
306	min-width: 4em;
307	text-align: center;
308	}
309
310	nav [data-active] a {
311	border-style: inset;
312	background-color: #C0C0C0;
313	}
314
315	nav a[href$=transfer-errors] {
316	padding-left: 20px;
317	background-image: url(icons/transfer-16);
318	background-repeat: no-repeat;
319	background-position: 2px center;
320	min-height: 16px;
321	}
322
323	nav a[href$=parse-errors] {
324	padding-left: 20px;
325	background-image: url(icons/syntax-16);
326	background-repeat: no-repeat;
327	background-position: 2px center;
328	min-height: 16px;
329	}
330
331	nav a[href$=document-errors] {
332	padding-left: 20px;
333	background-image: url(icons/structure-16);
334	background-repeat: no-repeat;
335	background-position: 2px center;
336	min-height: 16px;
337	}
338
339	.section {
340	clear: both;
341	}
342
343	body > nav {
344	position: absolute;
345	top: 0;
346	height: 100px; /* h1 > img's height is 90px */
347	left: 300px; /* h1 > img's width is 265px */
348	right: 0;
349	min-width: 100px; /* body's min-width is 400px */
350	overflow: auto;
351	}
352
353	.section > nav {
354	/*
355	height: 2em;
356	max-height: 2em; // hn's line + padding-top + padding-bottom = 1.6em */
357	overflow: auto;
358	min-width: 5em;
359
360	position: relative;
361	z-index: 1000; /* such that scrollbars are clickable */
362	white-space: nowrap; /* Firefox does not show vertical scrollbar,
363	because there is a floated hn element... */
364	}
365
366	body[data-scripted] > .section,
367	body[data-scripted] > #input > .section,
368	body[data-scripted] .section.subdoc > .section {
369	position: absolute;
370	top: 100px; /* h1 > img's height is 90px */
371	bottom: 0;
372	left: 0;
373	right: 0;
374	min-height: 10em;
375	overflow: auto;
376	}
377
378	body[data-scripted] > #input > .section,
379	body[data-scripted] .section.subdoc > .section {
380	top: 2em;
381	}
382
383	/* details widgets */
384
385	.details .legend {
386	font-weight: bolder;
387	}
388
389	.details .legend:after {
390	content: "...";
391	}
392
393	.details.open .legend:after,
394	body:not([data-scripted]) .details.default .legend:after {
395	content: ":";
396	}
397
398	body[data-scripted] .details .legend {
399	cursor: pointer;
400	}
401
402	body[data-scripted] .details > div {
403	display: none;
404	}
405
406	/* Data input forms */
407
408	input[type=url] {
409	width: 90%;
410	min-width: 30em;
411	}
412
413	textarea {
414	width: 95%;
415	min-width: 30em;
416	height: 20em;
417	}
418
419	/* Source codes taken from the input document or reformatted source */
420
421	/* q, */ .source li, .dump pre {
422	white-space: pre;
423	white-space: -moz-pre-wrap;
424	white-space: pre-wrap;
425	}
426
427	q, .source ol, .dump pre {
428	background-color: #f0f0ff;
429	color: black;
430	line-height: 1.5;
431	}
432
433	.dump pre > code {
434	color: inherit;
435	background-color: transparent;
436	}
437
438	/* Document dumps */
439
440	.dump > ol {
441	margin-left: 0;
442	padding-left: 0;
443	}
444
445	.dump > ol > li {
446	/* display: block;
447	list-style: none;
448	margin-left: 0;
449	padding-left: 0; */
450	}
451
452	.dump > ol /* ol */ {
453	margin-left: 1em;
454	padding-left: 0;
455	}
456
457	.dump ol /ol/ li {
458	margin-left: 0;
459	padding-left: 0.4em;
460	}
461
462	.dump ul.attributes {
463	margin-left: 3em;
464	padding: 0;
465	}
466
467	.dump ul.attributes li {
468	display: inline;
469	list-style: none;
470	margin: 0 2em 0 0;
471	padding: 0;
472	text-indent: 0;
473	font-size: 90%;
474	}
475
476	q:after {
477	content: " "; /* Make white-space-only quotations visible */
478	white-space: pre;
479	}
480
481	dd.no-entry:lang(en) {
482	font-style: italic;
483	}
484
485	dd.manifest-fallbacks + dd.manifest-fallbacks {
486	margin-top: 1em;
487	}
488
489	dd.manifest-fallbacks p {
490	margin: 0;
491	text-indent: 0;
492	}
493
494	dd.manifest-fallbacks > p + p {
495	text-indent: -1em;
496	}
497
498	dd.manifest-fallbacks > p + p:before {
499	content: "\21B3 ";
500	}
501
502	/* Errors */
503
504	.errors dt {
505	background-image: none;
506	background-position: left center;
507	background-repeat: no-repeat;
508	padding-left: 20px; /* icons/-16.png /
509	min-height: 16px;
510	}
511
512	.errors dd {
513	margin-left: 0;
514	padding-left: 60px;
515	min-height: 32px; /* large-.png files' height /
516	background-position: 20px center;
517	background-repeat: no-repeat;
518	}
519
520	.level-m, .level-s {
521	background-image: url(large-stop);
522	/* TODO: we need an image for SHOULD-level errors */
523	}
524
525	.level-w {
526	background-image: url(large-alert);
527	}
528
529	.level-i {
530	background-image: url(large-info);
531	}
532
533	.level-u {
534	background-image: none;
535	}
536
537	dt.level-u {
538	margin: 0.2em 0 0 0;
539	border: blue 0.2em solid;
540	border-bottom-style: none;
541	padding-top: 0.2em;
542	padding-right: 0.2em;
543	padding-bottom: 0;
544	background-color: #e1e1ff;
545	color: black;
546	}
547
548	dd.level-u {
549	margin: 0 0 0.2em;
550	border: blue 0.2em solid;
551	border-top-style: none;
552	padding-right: 0.2em;
553	padding-bottom: 0.2em;
554	padding-top: 0;
555	background-color: #e1e1ff;
556	color: black;
557	}
558
559	dt.layer-transfer {
560	background-image: url(icons/transfer-16);
561	}
562
563	dt.layer-encode,
564	dt.layer-charset {
565	background-image: url(icons/char-16);
566	/* TODO: We need different images for these layers */
567	}
568
569	dt.layer-syntax {
570	background-image: url(icons/syntax-16);
571	}
572
573	dt.layer-structure {
574	background-image: url(icons/structure-16);
575	}
576
577	dt.layer-semantics {
578	background-image: url(icons/semantics-16);
579	}
580
581	.errors dl:empty {
582	display: none;
583	}
584
585	.errors .no-errors {
586	text-indent: 0;
587	}
588
589	.errors .no-errors:lang(en) {
590	font-style: italic;
591	}
592
593	/* List of IDs */
594
595	#identifiers dd,
596	[id$="-identifiers"] dd {
597	margin-left: 20px;
598	padding-left: 20px;
599	min-height: 20px;
600	}
601
602	#identifiers dd + dd,
603	[id$="-identifiers"] dd + dd {
604	background-image: url(error);
605	background-position: center left;
606	background-repeat: no-repeat;
607	}
608
609	/* Result paragraph */
610
611	.result-para {
612	margin-left: 20px;
613	padding-left: 40px;
614	min-height: 32px;
615	background-color: none;
616	background-position: center left;
617	background-repeat: no-repeat;
618	padding-top: 0.2em;
619	padding-bottom: 0.2em;
620	padding-right: 1em;
621	}
622
623	.result-para.no-error {
624	background-image: url(ok);
625	background-color: #ddffdd;
626	color: black;
627	}
628
629	.result-para.must-errors,
630	.result-para.should-errors {
631	background-image: url(large-stop);
632	/* TODO: Use different image for should-errors */
633	}
634
635	/* See "Result summary table" for background color of
636	.must-errors and .should-errors */
637
638	.result-para.uncertain {
639	border: blue 0.2em solid;
640	background-color: #e1e1ff;
641	color: black;
642	background-image: none;
643	}
644
645	/* Result summary table */
646
647	.result table {
648	margin-left: auto;
649	margin-right: auto;
650	border: 4px solid #800080;
651	border-collapse: collapse;
652	}
653
654	.result tbody,
655	.result colgroup {
656	border: 4px solid #800080;
657	}
658
659	.result tbody > tr:first-child > th {
660	border-bottom-width: 2px;
661	}
662
663	.result tr.total > * {
664	border-top-width: 2px;
665	}
666
667	.result td.subrow {
668	border-right-width: 2px;
669	}
670
671	.result th,
672	.result td.subrow,
673	.result .uncertain td.subrow {
674	background-color: #fff0f0;
675	color: black;
676	}
677
678	.result th,
679	.result td {
680	border: 1px solid #800080;
681	padding: 0.2em 0.5em;
682	text-align: center;
683	empty-cells: show;
684	}
685
686	.result td.subrow {
687	border-top-style: hidden;
688	}
689
690	.result .uncertain td {
691	background-color: #e1e1ff;
692	color: black;
693	}
694
695	.result .must-errors,
696	.result .uncertain .must-errors {
697	background-color: #ffcece;
698	color: black;
699	}
700
701	.result .should-errors,
702	.result .uncertain .should-errors {
703	background-color: #e1e1ff;
704	color: black;
705	}
706
707	.result tfoot .total strong {
708	font-size: 150%;
709	}
710
711	.result thead > tr > th:first-child + th {
712	background-image: url(error);
713	background-repeat: no-repeat;
714	background-position: 2px center;
715	padding-left: 20px; /* error.png's width is 16px */
716	}
717
718	.result thead > tr > th:first-child + th + th {
719	background-image: url(error); /* TODO: SHOULD image */
720	background-repeat: no-repeat;
721	background-position: 2px center;
722	padding-left: 20px; /* error.png's width is 16px */
723	}
724
725	.result thead > tr > th:first-child + th + th + th {
726	background-image: url(alert);
727	background-repeat: no-repeat;
728	background-position: 2px center;
729	padding-left: 20px; /* alert.png's width is 16px */
730	}
731
732	.result thead > tr > th:first-child + th + th + th + th {
733	background-image: url(info);
734	background-repeat: no-repeat;
735	background-position: 2px center;
736	padding-left: 20px; /* info.png's width is 16px */
737	}
738
739	.result thead + tbody > tr:first-child + tr > th {
740	background-image: url(icons/transfer-16);
741	background-repeat: no-repeat;
742	background-position: 2px center;
743	padding-left: 20px; /* background-image's width is 16px */
744	}
745
746	.result thead + tbody > tr:first-child + tr + tr > th {
747	background-image: url(icons/char-16); /* TODO: new image */
748	background-repeat: no-repeat;
749	background-position: 2px center;
750	padding-left: 20px; /* background-image's width is 16px */
751	}
752
753	.result thead + tbody > tr:first-child + tr + tr + tr > th {
754	background-image: url(icons/char-16);
755	background-repeat: no-repeat;
756	background-position: 2px center;
757	padding-left: 20px; /* background-image's width is 16px */
758	}
759
760	.result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
761	background-image: url(icons/syntax-16);
762	background-repeat: no-repeat;
763	background-position: 2px center;
764	padding-left: 20px; /* background-image's width is 16px */
765	}
766
767	.result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
768	background-image: url(icons/structure-16);
769	background-repeat: no-repeat;
770	background-position: 2px center;
771	padding-left: 20px; /* background-image's width is 16px */
772	}
773
774	.result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
775	background-image: url(icons/semantics-16);
776	background-repeat: no-repeat;
777	background-position: 2px center;
778	padding-left: 20px; /* background-image's width is 16px */
779	}
780
781	/* Floating help box */
782
783	aside.help {
784	display: block;
785	position: fixed;
786	z-index: 10000;
787	background-color: #FFFFCC;
788	color: black;
789	border: 0.1em outset #FFFF66;
790	-moz-border-radius: 0.4em;
791	-webkit-border-radius: 0.4em;
792	border-radius: 0.4em;
793	padding: 0.5em;
794	overflow: auto;
795	max-height: 50%;
796	max-width: 50%;
797	-webkit-box-shadow: 0.6em 0.6em 0.4em gray;
798	}
799
800	aside.help > h3 {
801	display: none; /* since it is duplicated with the main document's content. */
802	}
803
804	aside.help > h3 + * {
805	margin-top: 0;
806	}
807
808	aside.help > *:last-child {
809	margin-bottom: 0;
810	}
811
812	/* Used instead of XHR for HTML documents */
813	iframe {
814	margin: 0;
815	border-style: none;
816	padding: 0;
817	width: 0;
818	height: 0;
819	}
820
821	body[data-scripted] a[rel~=help] {
822	text-decoration: none;
823	border-bottom: dotted 1px;
824	padding-bottom: 0;
825	}
826
827	/*
828
829	Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
830
831	This library is free software; you can redistribute it
832	and/or modify it under the same terms as Perl itself.
833
834	$Date: 2008/08/16 13:09:08 $
835
836	*/