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

iframe {
  margin: 0;
  border-style: none;
  padding: 0;
}

/* Used instead of XHR for HTML documents */
iframe.ajax {
  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/30 05:32:51 $

*/
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.10
82	wakaba	1.1	#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	wakaba	1.22	body[data-scripted] #nav-items {
113			display: none;
114			}
115
116	wakaba	1.3	img {
117			border-style: none;
118			}
119
120	wakaba	1.4	code {
121			font-family: "Courier New", "Courier", monospace;
122			letter-spacing: 0.1em;
123			background-color: transparent;
124			color: orangered;
125	wakaba	1.7	white-space: -moz-pre-wrap;
126			white-space: pre-wrap;
127	wakaba	1.4	}
128
129	wakaba	1.30	pre > code:empty:after {
130			content: " "; /* such that a line box is rendered */
131			}
132
133	wakaba	1.13	.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	wakaba	1.9	.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	wakaba	1.11	/* 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	wakaba	1.19	mark {
234			background-color: #ffff4d;
235			}
236
237	wakaba	1.32	mark:empty:after {
238			content: " ";
239			}
240
241	wakaba	1.22	/* Tab navigation */
242
243	wakaba	1.29	body[data-scripted] {
244			min-width: 400px; /* body > nav's left is 300px */
245			/* min-height is set to .section */
246			}
247
248	wakaba	1.23	body[data-scripted] > h1,
249	wakaba	1.24	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	wakaba	1.22	font-size: 100%;
256	wakaba	1.23	margin: 0;
257	wakaba	1.29	padding: 0 17.5px; /* h1 > img's width is 265px */
258	wakaba	1.22	}
259
260	wakaba	1.24	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	wakaba	1.29	float: left;
267			margin: 0 0.5em 0 -1em;
268	wakaba	1.25	padding: 0.3em 1em;
269	wakaba	1.23	border: thin hidden;
270	wakaba	1.25	background-color: #fff0f0;
271			color: black;
272	wakaba	1.23	}
273
274	wakaba	1.22	nav {
275			display: block;
276			}
277
278	wakaba	1.23	.section nav {
279			margin-left: 1em;
280			}
281
282	wakaba	1.22	nav ul {
283			margin: 0;
284			padding: 1em 0 0 0;
285			}
286
287	wakaba	1.24	#input nav ul,
288			.section.subdoc nav ul {
289	wakaba	1.23	padding-top: 0;
290			}
291
292	wakaba	1.22	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	wakaba	1.27	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	wakaba	1.22	.section {
340			clear: both;
341			}
342
343	wakaba	1.29	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	wakaba	1.23	body[data-scripted] > .section,
367	wakaba	1.24	body[data-scripted] > #input > .section,
368			body[data-scripted] .section.subdoc > .section {
369	wakaba	1.22	position: absolute;
370	wakaba	1.23	top: 100px; /* h1 > img's height is 90px */
371	wakaba	1.22	bottom: 0;
372			left: 0;
373			right: 0;
374	wakaba	1.23	min-height: 10em;
375	wakaba	1.22	overflow: auto;
376			}
377
378	wakaba	1.24	body[data-scripted] > #input > .section,
379			body[data-scripted] .section.subdoc > .section {
380	wakaba	1.23	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	wakaba	1.30	/* Source codes taken from the input document or reformatted source */
420	wakaba	1.25
421	wakaba	1.30	/* q, */ .source li, .dump pre {
422	wakaba	1.25	white-space: pre;
423			white-space: -moz-pre-wrap;
424			white-space: pre-wrap;
425			}
426
427	wakaba	1.30	q, .source ol, .dump pre {
428	wakaba	1.25	background-color: #f0f0ff;
429			color: black;
430			line-height: 1.5;
431			}
432
433	wakaba	1.30	.dump pre > code {
434			color: inherit;
435			background-color: transparent;
436			}
437
438	wakaba	1.25	/* 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	wakaba	1.30	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	wakaba	1.25	/* 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	wakaba	1.27	border: blue 0.2em solid;
540	wakaba	1.25	border-bottom-style: none;
541			padding-top: 0.2em;
542			padding-right: 0.2em;
543			padding-bottom: 0;
544	wakaba	1.27	background-color: #e1e1ff;
545			color: black;
546	wakaba	1.25	}
547
548			dd.level-u {
549			margin: 0 0 0.2em;
550	wakaba	1.27	border: blue 0.2em solid;
551	wakaba	1.25	border-top-style: none;
552			padding-right: 0.2em;
553			padding-bottom: 0.2em;
554			padding-top: 0;
555	wakaba	1.27	background-color: #e1e1ff;
556			color: black;
557	wakaba	1.25	}
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	wakaba	1.27	.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	wakaba	1.25	/* 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	wakaba	1.26	/* Result paragraph */
610	wakaba	1.25
611	wakaba	1.26	.result-para {
612	wakaba	1.25	margin-left: 20px;
613			padding-left: 40px;
614			min-height: 32px;
615	wakaba	1.26	background-color: none;
616	wakaba	1.25	background-position: center left;
617			background-repeat: no-repeat;
618	wakaba	1.26	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	wakaba	1.25	}
628	wakaba	1.26
629			.result-para.must-errors,
630			.result-para.should-errors {
631	wakaba	1.25	background-image: url(large-stop);
632	wakaba	1.26	/* TODO: Use different image for should-errors */
633	wakaba	1.25	}
634
635	wakaba	1.26	/* See "Result summary table" for background color of
636			.must-errors and .should-errors */
637
638			.result-para.uncertain {
639	wakaba	1.27	border: blue 0.2em solid;
640	wakaba	1.26	background-color: #e1e1ff;
641			color: black;
642			background-image: none;
643	wakaba	1.25	}
644
645	wakaba	1.26	/* Result summary table */
646	wakaba	1.25
647	wakaba	1.26	.result table {
648			margin-left: auto;
649			margin-right: auto;
650			border: 4px solid #800080;
651			border-collapse: collapse;
652	wakaba	1.25	}
653
654	wakaba	1.26	.result tbody,
655			.result colgroup {
656			border: 4px solid #800080;
657	wakaba	1.25	}
658
659	wakaba	1.26	.result tbody > tr:first-child > th {
660			border-bottom-width: 2px;
661	wakaba	1.25	}
662	wakaba	1.26
663			.result tr.total > * {
664			border-top-width: 2px;
665	wakaba	1.25	}
666
667	wakaba	1.26	.result td.subrow {
668			border-right-width: 2px;
669	wakaba	1.25	}
670
671	wakaba	1.26	.result th,
672			.result td.subrow,
673			.result .uncertain td.subrow {
674	wakaba	1.25	background-color: #fff0f0;
675			color: black;
676			}
677
678	wakaba	1.26	.result th,
679			.result td {
680	wakaba	1.25	border: 1px solid #800080;
681			padding: 0.2em 0.5em;
682			text-align: center;
683			empty-cells: show;
684			}
685
686	wakaba	1.26	.result td.subrow {
687			border-top-style: hidden;
688			}
689
690			.result .uncertain td {
691	wakaba	1.25	background-color: #e1e1ff;
692			color: black;
693			}
694
695	wakaba	1.26	.result .must-errors,
696			.result .uncertain .must-errors {
697	wakaba	1.25	background-color: #ffcece;
698			color: black;
699			}
700
701	wakaba	1.26	.result .should-errors,
702			.result .uncertain .should-errors {
703	wakaba	1.25	background-color: #e1e1ff;
704			color: black;
705			}
706
707	wakaba	1.26	.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	wakaba	1.25	}
766
767	wakaba	1.26	.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	wakaba	1.25	}
773
774	wakaba	1.26	.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	wakaba	1.25
781	wakaba	1.31	/* 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			iframe {
813			margin: 0;
814			border-style: none;
815			padding: 0;
816	wakaba	1.33	}
817
818			/* Used instead of XHR for HTML documents */
819			iframe.ajax {
820	wakaba	1.31	width: 0;
821			height: 0;
822			}
823
824			body[data-scripted] a[rel~=help] {
825			text-decoration: none;
826			border-bottom: dotted 1px;
827			padding-bottom: 0;
828			}
829
830	wakaba	1.1	/*
831
832	wakaba	1.19	Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
833	wakaba	1.1
834			This library is free software; you can redistribute it
835			and/or modify it under the same terms as Perl itself.
836
837	wakaba	1.33	$Date: 2008/08/30 05:32:51 $
838	wakaba	1.1
839			*/