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 {
  margin: 0;
  border-style: none;
  padding: 0;
  font-weight: bolder;
  font-family: sans-serif;
  font-size: 150%;
}

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

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

q, #source-string li {
  white-space: pre;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
}

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

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

#parse-errors dl:empty:before {
  content: "This document has no parse error.";
  font-style: italic;
}

#document-errors dl:empty:before {
  content: "This document has no document error.";
  font-style: italic;
}

#document-tree > ol {
  margin-left: 0;
  padding-left: 0;
}
#document-tree > ol > li {
/*  display: block;
  list-style: none;
  margin-left: 0;
  padding-left: 0; */
}

#document-tree ol /*ol*/ {
  margin-left: 1em;
  padding-left: 0;
}

#document-tree ol /*ol*/ li {
  margin-left: 0;
  padding-left: 0.4em;
}

#document-tree ul.attributes {
  margin-left: 3em;
  padding: 0;
}

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

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

#parse-errors dd, #document-errors dd, #error-description h3,
#result-para {
  margin-left: 20px;
  padding-left: 40px;
  min-height: 32px;
  background-image: url(large-stop);
  background-position: center left;
  background-repeat: no-repeat;
}

#levels-table tbody th:first-child {
  padding-left: 42px;
  min-height: 32px;
  background-image: url(large-stop);
  background-position: 5px center;
  background-repeat: no-repeat;
  text-align: left;
}

#identifiers dd, #terms dd {
  margin-left: 20px;
  padding-left: 20px;
  min-height: 20px;
}

#identifiers dd + dd
/* , #terms dd + dd */ /* Now allowed - HTML5 revision 1467 */
{
  background-image: url(error);
  background-position: center left;
  background-repeat: no-repeat;
}

#error-description h3 {
  margin-left: 1em;
  margin-right: 1em;
}

#parse-errors dd.level-s, #document-errors dd.level-s,
#parse-errors dd.should,
#document-errors dd.should, #error-description .should h3,
#result-para.SEE-RESULT, #levels-table #level-s th {
  background-image: url(large-stop);
}

#parse-errors dd.level-w, #document-errors dd.level-w,
#parse-errors dd.warning,
#document-errors dd.warning, #error-description .warning h3,
#levels-table #level-w th {
  background-image: url(large-alert);
}

#parse-errors dd.level-i, #document-errors dd.level-i,
#error-description .level-i h3,
#levels-table #level-i th {
  background-image: url(large-info);
}

#parse-errors dd.level-u, #document-errors dd.level-u,
#parse-errors dd.level-unsupported, #document-errors dd.level-unsupported,
#parse-errors dd.unsupported,
#document-errors dd.unsupported {
  margin-left: 60px;
  border: red 0.2em solid;
  padding: 0.5em;
}

#parse-errors dd.unsupported,
#document-errors dd.unsupported, #error-description .unsupported h3,
#result-para.uncertain, 
#parse-errors dd.level-u, #document-errors dd.level-u,
#levels-table #level-u th {
  background-image: none;
}

.error-category-charset {
  background-image: url(icons/char-16);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
}

.format-charset, .tokenizer-error, .parse-error {
  background-image: url(icons/syntax-16);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;  
}

.content-model-error, .attribute-error, .attribute-value-error, 
.attribute-value-warning, .table-model-error {
  background-image: url(icons/structure-16);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
}

#result-para.PASS {
  background-image: url(ok);
}

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

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

#result-summary tbody, colgroup {
  border: 3px solid #800080;
}

#result-summary th {
  background-color: #fff0f0;
  color: black;
}

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

.uncertain td, p.uncertain,
#level-u, #level-u th {
  background-color: #e1e1ff;
  color: black;
}

.FAIL, .uncertain td.FAIL, #level-m, #level-m th {
  background-color: #ffcece;
  color: black;
}

.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
  background-color: #e1e1ff;
  color: black;
}

.PASS, #level-w, #level-w th,
#level-i, #level-i th {
  background-color: #ddffdd;
  color: black;
}

#result-para {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-right: 1em;
}

/* 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] > h1,
body[data-scripted] > #input > h2 {
  float: left;
  font-size: 100%;
  margin: 0;
  padding: 0 1em;
}

body[data-scripted] > #input > h2 {
  margin-right: 1em;
  padding: 0.3em 0;
  border: thin hidden;
}

nav {
  display: block;
}

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

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

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

.section {
  clear: both;
}

body[data-scripted] > .section,
body[data-scripted] > #input > .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 {
  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;
}

/*

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/10 11:49:43 $

*/
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 {
25	margin: 0;
26	border-style: none;
27	padding: 0;
28	font-weight: bolder;
29	font-family: sans-serif;
30	font-size: 150%;
31	}
32
33	h3, th {
34	font-weight: bolder;
35	font-family: sans-serif;
36	font-size: 100%;
37	background-color: #fff0f0;
38	color: black;
39	}
40
41	.tree-text q, .tree-cdata q, .tree-comment q {
42	display: block;
43	}
44
45	q, #source-string li {
46	white-space: pre;
47	white-space: -moz-pre-wrap;
48	white-space: pre-wrap;
49	}
50
51	q, #source-string ol {
52	background-color: #f0f0ff;
53	color: black;
54	line-height: 1.5;
55	}
56
57	q:before, q:after {
58	content: "";
59	}
60
61	#parse-errors dl:empty:before {
62	content: "This document has no parse error.";
63	font-style: italic;
64	}
65
66	#document-errors dl:empty:before {
67	content: "This document has no document error.";
68	font-style: italic;
69	}
70
71	#document-tree > ol {
72	margin-left: 0;
73	padding-left: 0;
74	}
75	#document-tree > ol > li {
76	/* display: block;
77	list-style: none;
78	margin-left: 0;
79	padding-left: 0; */
80	}
81
82	#document-tree ol /ol/ {
83	margin-left: 1em;
84	padding-left: 0;
85	}
86
87	#document-tree ol /ol/ li {
88	margin-left: 0;
89	padding-left: 0.4em;
90	}
91
92	#document-tree ul.attributes {
93	margin-left: 3em;
94	padding: 0;
95	}
96
97	#document-tree ul.attributes li {
98	display: inline;
99	list-style: none;
100	margin: 0 2em 0 0;
101	padding: 0;
102	text-indent: 0;
103	font-size: 90%;
104	}
105
106	#dump-manifest tbody:empty {
107	display: table-caption;
108	caption-side: bottom;
109	}
110
111	#dump-manifest tbody:empty::after {
112	content: "This cache manifest contains no oppotunistic caching namespace.";
113	font-style: italic;
114	}
115
116	#dump-manifest dt:first-child + dt::before,
117	#dump-manifest dt:last-child::after {
118	display: block;
119	content: "This cache manifest contains no explicit entry.";
120	margin-left: 2.5em;
121	font-style: italic;
122	font-weight: normal;
123	font-family: serif;
124	}
125
126	#dump-manifest dt:last-child::after {
127	content: "This cache manifest has an empty online whitelist.";
128	}
129
130	#parse-errors dd, #document-errors dd, #error-description h3,
131	#result-para {
132	margin-left: 20px;
133	padding-left: 40px;
134	min-height: 32px;
135	background-image: url(large-stop);
136	background-position: center left;
137	background-repeat: no-repeat;
138	}
139
140	#levels-table tbody th:first-child {
141	padding-left: 42px;
142	min-height: 32px;
143	background-image: url(large-stop);
144	background-position: 5px center;
145	background-repeat: no-repeat;
146	text-align: left;
147	}
148
149	#identifiers dd, #terms dd {
150	margin-left: 20px;
151	padding-left: 20px;
152	min-height: 20px;
153	}
154
155	#identifiers dd + dd
156	/* , #terms dd + dd / / Now allowed - HTML5 revision 1467 */
157	{
158	background-image: url(error);
159	background-position: center left;
160	background-repeat: no-repeat;
161	}
162
163	#error-description h3 {
164	margin-left: 1em;
165	margin-right: 1em;
166	}
167
168	#parse-errors dd.level-s, #document-errors dd.level-s,
169	#parse-errors dd.should,
170	#document-errors dd.should, #error-description .should h3,
171	#result-para.SEE-RESULT, #levels-table #level-s th {
172	background-image: url(large-stop);
173	}
174
175	#parse-errors dd.level-w, #document-errors dd.level-w,
176	#parse-errors dd.warning,
177	#document-errors dd.warning, #error-description .warning h3,
178	#levels-table #level-w th {
179	background-image: url(large-alert);
180	}
181
182	#parse-errors dd.level-i, #document-errors dd.level-i,
183	#error-description .level-i h3,
184	#levels-table #level-i th {
185	background-image: url(large-info);
186	}
187
188	#parse-errors dd.level-u, #document-errors dd.level-u,
189	#parse-errors dd.level-unsupported, #document-errors dd.level-unsupported,
190	#parse-errors dd.unsupported,
191	#document-errors dd.unsupported {
192	margin-left: 60px;
193	border: red 0.2em solid;
194	padding: 0.5em;
195	}
196
197	#parse-errors dd.unsupported,
198	#document-errors dd.unsupported, #error-description .unsupported h3,
199	#result-para.uncertain,
200	#parse-errors dd.level-u, #document-errors dd.level-u,
201	#levels-table #level-u th {
202	background-image: none;
203	}
204
205	.error-category-charset {
206	background-image: url(icons/char-16);
207	background-position: left center;
208	background-repeat: no-repeat;
209	padding-left: 20px;
210	}
211
212	.format-charset, .tokenizer-error, .parse-error {
213	background-image: url(icons/syntax-16);
214	background-position: left center;
215	background-repeat: no-repeat;
216	padding-left: 20px;
217	}
218
219	.content-model-error, .attribute-error, .attribute-value-error,
220	.attribute-value-warning, .table-model-error {
221	background-image: url(icons/structure-16);
222	background-position: left center;
223	background-repeat: no-repeat;
224	padding-left: 20px;
225	}
226
227	#result-para.PASS {
228	background-image: url(ok);
229	}
230
231	#nav-items {
232	display: block;
233	position: fixed;
234	top: 0.5em;
235	right: 0.5em;
236	width: auto;
237	height: auto;
238	font-size: 90%;
239	background-color: #f4fff4;
240	color: black;
241	padding: 0;
242	line-height: 1.1;
243	}
244
245	#nav-items li {
246	display: block;
247	list-style: none;
248	margin: 0;
249	border-style: none;
250	padding: 0;
251	text-align: center;
252	}
253
254	#nav-items li a[href] {
255	display: block;
256	border-style: none;
257	color: inherit;
258	text-decoration: none;
259	}
260
261	body[data-scripted] #nav-items {
262	display: none;
263	}
264
265	img {
266	border-style: none;
267	}
268
269	code {
270	font-family: "Courier New", "Courier", monospace;
271	letter-spacing: 0.1em;
272	background-color: transparent;
273	color: orangered;
274	white-space: -moz-pre-wrap;
275	white-space: pre-wrap;
276	}
277
278	.example {
279	background-color: #ececff;
280	}
281
282	pre.example {
283	margin-left: 1em;
284	margin-right: 1em;
285	padding: 0.2em 0.5em;
286	}
287
288	.example.bad {
289	background-color: #fff7f7;
290	}
291
292	code.example.bad {
293	color: inherit;
294	background-color: #ffeeee;
295	}
296
297	h3 code.example.bad {
298	color: orangered;
299	background-color: transparent;
300	}
301
302	pre.example::before {
303	content: "Example";
304	display: block;
305	color: #b0b0ff;
306	background-color: transparent;
307	font-weight: bolder;
308	font-family: sans-serif;
309	}
310
311	pre.example.html::before {
312	content: "HTML Example";
313	}
314
315	pre.example.xml::before {
316	content: "XML Example";
317	}
318
319	pre.example.manifest::before {
320	content: "Cache Manifest Example";
321	}
322
323	pre.example.bad::before {
324	content: "Bad Example";
325	color: #ffc1c1;
326	}
327
328	pre.example.bad.html::before {
329	content: "HTML Bad Example";
330	}
331
332	pre.example.bad.xml::before {
333	content: "XML Bad Example";
334	}
335
336	pre.example.bad.manifest::before {
337	content: "Cache Manifest Bad Example";
338	}
339
340	.rfc2119 {
341	border-style: none;
342	text-transform: lowercase;
343	font-variant: small-caps;
344	font-style: normal;
345	text-decoration: none;
346	font-weight: normal;
347	font-family: sans-serif;
348	}
349
350	#result-summary table {
351	margin-left: auto;
352	margin-right: auto;
353	border: 3px solid #800080;
354	border-collapse: collapse;
355	}
356
357	#result-summary tbody, colgroup {
358	border: 3px solid #800080;
359	}
360
361	#result-summary th {
362	background-color: #fff0f0;
363	color: black;
364	}
365
366	#result-summary th, #result-summary td {
367	border: 1px solid #800080;
368	padding: 0.2em 0.5em;
369	text-align: center;
370	empty-cells: show;
371	}
372
373	.uncertain td, p.uncertain,
374	#level-u, #level-u th {
375	background-color: #e1e1ff;
376	color: black;
377	}
378
379	.FAIL, .uncertain td.FAIL, #level-m, #level-m th {
380	background-color: #ffcece;
381	color: black;
382	}
383
384	.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
385	background-color: #e1e1ff;
386	color: black;
387	}
388
389	.PASS, #level-w, #level-w th,
390	#level-i, #level-i th {
391	background-color: #ddffdd;
392	color: black;
393	}
394
395	#result-para {
396	padding-top: 0.2em;
397	padding-bottom: 0.2em;
398	padding-right: 1em;
399	}
400
401	/* dl.switch from WHATWG specification style sheet */
402
403	dl.switch {
404	padding-left: 2em;
405	}
406
407	dl.switch dt {
408	display: block;
409	text-indent: -1.5em;
410	font-weight: bolder;
411	font-family: sans-serif;
412	font-style: normal;
413	}
414
415	dl.switch dt:before {
416	content: '\21AA';
417	padding: 0 0.5em 0 0;
418	display: inline-block;
419	width: 1em;
420	text-align: right;
421	line-height: 0.5em;
422	}
423
424	dl.switch dt:after {
425	content: " :";
426	}
427
428	mark {
429	background-color: #ffff4d;
430	}
431
432	/* Tab navigation */
433
434	body[data-scripted] > h1,
435	body[data-scripted] > #input > h2 {
436	float: left;
437	font-size: 100%;
438	margin: 0;
439	padding: 0 1em;
440	}
441
442	body[data-scripted] > #input > h2 {
443	margin-right: 1em;
444	padding: 0.3em 0;
445	border: thin hidden;
446	}
447
448	nav {
449	display: block;
450	}
451
452	.section nav {
453	margin-left: 1em;
454	}
455
456	nav ul {
457	margin: 0;
458	padding: 1em 0 0 0;
459	}
460
461	#input nav ul {
462	padding-top: 0;
463	}
464
465	nav ul li {
466	display: inline;
467	margin: 0;
468	padding: 0 0.3em 0 0;
469	line-height: 2;
470	}
471
472	nav a {
473	display: inline;
474	padding: 0.1em 0.3em;
475	text-decoration: none;
476	color: inherit;
477	border: thin outset gray;
478	-moz-border-radius: 0.2em;
479	min-width: 4em;
480	text-align: center;
481	}
482
483	nav [data-active] a {
484	border-style: inset;
485	background-color: #C0C0C0;
486	}
487
488	.section {
489	clear: both;
490	}
491
492	body[data-scripted] > .section,
493	body[data-scripted] > #input > .section {
494	position: absolute;
495	top: 100px; /* h1 > img's height is 90px */
496	bottom: 0;
497	left: 0;
498	right: 0;
499	min-height: 10em;
500	overflow: auto;
501	}
502
503	body[data-scripted] > #input > .section {
504	top: 2em;
505	}
506
507	/* details widgets */
508
509	.details .legend {
510	font-weight: bolder;
511	}
512
513	.details .legend:after {
514	content: "...";
515	}
516
517	.details.open .legend:after,
518	body:not([data-scripted]) .details.default .legend:after {
519	content: ":";
520	}
521
522	body[data-scripted] .details .legend {
523	cursor: pointer;
524	}
525
526	body[data-scripted] .details > div {
527	display: none;
528	}
529
530	/* Data input forms */
531
532	input[type=url] {
533	width: 90%;
534	min-width: 30em;
535	}
536
537	textarea {
538	width: 95%;
539	min-width: 30em;
540	height: 20em;
541	}
542
543	/*
544
545	Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
546
547	This library is free software; you can redistribute it
548	and/or modify it under the same terms as Perl itself.
549
550	$Date: 2008/08/10 11:49:43 $
551
552	*/