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

#dump-manifest tbody:empty {
  display: table-caption;
  caption-side: bottom;
}

#dump-manifest tbody:empty::after {
  content: "This cache manifest contains no oppotunistic caching namespace.";
  font-style: italic;
}

#dump-manifest dt:first-child + dt::before,
#dump-manifest dt:last-child::after {
  display: block;
  content: "This cache manifest contains no explicit entry.";
  margin-left: 2.5em;
  font-style: italic;
  font-weight: normal;
  font-family: serif;
}

#dump-manifest dt:last-child::after {
  content: "This cache manifest has an empty online whitelist.";
}


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

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

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

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

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

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

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

/*

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/15 16:44:03 $

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