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	wakaba	1.1	@import '/www/style/html/xoxo.css';
2
3	wakaba	1.2	.section {
4			display: block;
5			margin: 1em;
6			border: #800080 1px solid;
7			padding: 0.5em 1em;
8			}
9
10	wakaba	1.10	dt, strong, th {
11	wakaba	1.2	font-weight: bolder;
12			font-family: sans-serif;
13			}
14			dt:after {
15			content: ":";
16			}
17
18	wakaba	1.5	h1 {
19			font-weight: bolder;
20			font-family: sans-serif;
21			font-size: 180%;
22			}
23
24	wakaba	1.25	h2, h3, h4, h5, h6, th {
25	wakaba	1.5	font-weight: bolder;
26			font-family: sans-serif;
27			font-size: 100%;
28			background-color: #fff0f0;
29			color: black;
30			}
31
32	wakaba	1.25	h2, h3, h4, h5, h6 {
33	wakaba	1.26	margin: 0 0 0 -1em;
34	wakaba	1.25	padding: 0.3em 1em;
35			}
36
37	wakaba	1.27	.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	wakaba	1.2	.tree-text q, .tree-cdata q, .tree-comment q {
74			display: block;
75			}
76
77			q:before, q:after {
78			content: "";
79			}
80
81	wakaba	1.11	#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	wakaba	1.5
106	wakaba	1.4
107	wakaba	1.10
108	wakaba	1.1	#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	wakaba	1.22	body[data-scripted] #nav-items {
139			display: none;
140			}
141
142	wakaba	1.3	img {
143			border-style: none;
144			}
145
146	wakaba	1.4	code {
147			font-family: "Courier New", "Courier", monospace;
148			letter-spacing: 0.1em;
149			background-color: transparent;
150			color: orangered;
151	wakaba	1.7	white-space: -moz-pre-wrap;
152			white-space: pre-wrap;
153	wakaba	1.4	}
154
155	wakaba	1.13	.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	wakaba	1.9	.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	wakaba	1.11	/* 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	wakaba	1.19	mark {
256			background-color: #ffff4d;
257			}
258
259	wakaba	1.22	/* Tab navigation */
260
261	wakaba	1.29	body[data-scripted] {
262			min-width: 400px; /* body > nav's left is 300px */
263			/* min-height is set to .section */
264			}
265
266	wakaba	1.23	body[data-scripted] > h1,
267	wakaba	1.24	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	wakaba	1.22	font-size: 100%;
274	wakaba	1.23	margin: 0;
275	wakaba	1.29	padding: 0 17.5px; /* h1 > img's width is 265px */
276	wakaba	1.22	}
277
278	wakaba	1.24	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	wakaba	1.29	float: left;
285			margin: 0 0.5em 0 -1em;
286	wakaba	1.25	padding: 0.3em 1em;
287	wakaba	1.23	border: thin hidden;
288	wakaba	1.25	background-color: #fff0f0;
289			color: black;
290	wakaba	1.23	}
291
292	wakaba	1.22	nav {
293			display: block;
294			}
295
296	wakaba	1.23	.section nav {
297			margin-left: 1em;
298			}
299
300	wakaba	1.22	nav ul {
301			margin: 0;
302			padding: 1em 0 0 0;
303			}
304
305	wakaba	1.24	#input nav ul,
306			.section.subdoc nav ul {
307	wakaba	1.23	padding-top: 0;
308			}
309
310	wakaba	1.22	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	wakaba	1.27	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	wakaba	1.22	.section {
358			clear: both;
359			}
360
361	wakaba	1.29	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	wakaba	1.23	body[data-scripted] > .section,
385	wakaba	1.24	body[data-scripted] > #input > .section,
386			body[data-scripted] .section.subdoc > .section {
387	wakaba	1.22	position: absolute;
388	wakaba	1.23	top: 100px; /* h1 > img's height is 90px */
389	wakaba	1.22	bottom: 0;
390			left: 0;
391			right: 0;
392	wakaba	1.23	min-height: 10em;
393	wakaba	1.22	overflow: auto;
394			}
395
396	wakaba	1.24	body[data-scripted] > #input > .section,
397			body[data-scripted] .section.subdoc > .section {
398	wakaba	1.23	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	wakaba	1.25	/* 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	wakaba	1.27	border: blue 0.2em solid;
532	wakaba	1.25	border-bottom-style: none;
533			padding-top: 0.2em;
534			padding-right: 0.2em;
535			padding-bottom: 0;
536	wakaba	1.27	background-color: #e1e1ff;
537			color: black;
538	wakaba	1.25	}
539
540			dd.level-u {
541			margin: 0 0 0.2em;
542	wakaba	1.27	border: blue 0.2em solid;
543	wakaba	1.25	border-top-style: none;
544			padding-right: 0.2em;
545			padding-bottom: 0.2em;
546			padding-top: 0;
547	wakaba	1.27	background-color: #e1e1ff;
548			color: black;
549	wakaba	1.25	}
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	wakaba	1.27	.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	wakaba	1.25	/* 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	wakaba	1.26	/* Result paragraph */
602	wakaba	1.25
603	wakaba	1.26	.result-para {
604	wakaba	1.25	margin-left: 20px;
605			padding-left: 40px;
606			min-height: 32px;
607	wakaba	1.26	background-color: none;
608	wakaba	1.25	background-position: center left;
609			background-repeat: no-repeat;
610	wakaba	1.26	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	wakaba	1.25	}
620	wakaba	1.26
621			.result-para.must-errors,
622			.result-para.should-errors {
623	wakaba	1.25	background-image: url(large-stop);
624	wakaba	1.26	/* TODO: Use different image for should-errors */
625	wakaba	1.25	}
626
627	wakaba	1.26	/* See "Result summary table" for background color of
628			.must-errors and .should-errors */
629
630			.result-para.uncertain {
631	wakaba	1.27	border: blue 0.2em solid;
632	wakaba	1.26	background-color: #e1e1ff;
633			color: black;
634			background-image: none;
635	wakaba	1.25	}
636
637	wakaba	1.26	/* Result summary table */
638	wakaba	1.25
639	wakaba	1.26	.result table {
640			margin-left: auto;
641			margin-right: auto;
642			border: 4px solid #800080;
643			border-collapse: collapse;
644	wakaba	1.25	}
645
646	wakaba	1.26	.result tbody,
647			.result colgroup {
648			border: 4px solid #800080;
649	wakaba	1.25	}
650
651	wakaba	1.26	.result tbody > tr:first-child > th {
652			border-bottom-width: 2px;
653	wakaba	1.25	}
654	wakaba	1.26
655			.result tr.total > * {
656			border-top-width: 2px;
657	wakaba	1.25	}
658
659	wakaba	1.26	.result td.subrow {
660			border-right-width: 2px;
661	wakaba	1.25	}
662
663	wakaba	1.26	.result th,
664			.result td.subrow,
665			.result .uncertain td.subrow {
666	wakaba	1.25	background-color: #fff0f0;
667			color: black;
668			}
669
670	wakaba	1.26	.result th,
671			.result td {
672	wakaba	1.25	border: 1px solid #800080;
673			padding: 0.2em 0.5em;
674			text-align: center;
675			empty-cells: show;
676			}
677
678	wakaba	1.26	.result td.subrow {
679			border-top-style: hidden;
680			}
681
682			.result .uncertain td {
683	wakaba	1.25	background-color: #e1e1ff;
684			color: black;
685			}
686
687	wakaba	1.26	.result .must-errors,
688			.result .uncertain .must-errors {
689	wakaba	1.25	background-color: #ffcece;
690			color: black;
691			}
692
693	wakaba	1.26	.result .should-errors,
694			.result .uncertain .should-errors {
695	wakaba	1.25	background-color: #e1e1ff;
696			color: black;
697			}
698
699	wakaba	1.26	.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	wakaba	1.25	}
758
759	wakaba	1.26	.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	wakaba	1.25	}
765
766	wakaba	1.26	.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	wakaba	1.25
773	wakaba	1.1	/*
774
775	wakaba	1.19	Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
776	wakaba	1.1
777			This library is free software; you can redistribute it
778			and/or modify it under the same terms as Perl itself.
779
780	wakaba	1.29	$Date: 2008/08/15 16:44:03 $
781	wakaba	1.1
782			*/