--- test/html-webhacc/cc-style.css	2007/06/27 13:30:15	1.1
+++ test/html-webhacc/cc-style.css	2008/08/14 15:50:42	1.26
@@ -1,11 +1,84 @@
 @import '/www/style/html/xoxo.css';
 
-q {
-  white-space: pre;
-  white-space: -moz-pre-wrap;
-  white-space: pre-wrap;
+.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;
+}
+
+.tree-text q, .tree-cdata q, .tree-comment q {
+  display: block;
 }
 
+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;
+}
+
+#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;
@@ -36,13 +109,580 @@
   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] > 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 {
+  float: left;
+  font-size: 100%;
+  margin: 0;
+  padding: 0 1em;
+}
+
+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 {
+  margin: 0 1em 0 -1em;
+  padding: 0.3em 1em;
+  border: thin hidden;
+  background-color: #fff0f0;
+  color: black;
+}
+
+nav {
+  display: block;
+  z-index: 100;
+}
+
+.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;
+}
+
+.section {
+  clear: both;
+}
+
+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: red 0.2em solid;
+  border-bottom-style: none;
+  padding-top: 0.2em;
+  padding-right: 0.2em;
+  padding-bottom: 0;
+}
+
+dd.level-u {
+  margin: 0 0 0.2em;
+  border: red 0.2em solid;
+  border-top-style: none;
+  padding-right: 0.2em;
+  padding-bottom: 0.2em;
+  padding-top: 0;
+}
+
+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);
+}
+
+/* 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 {
+  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 Wakaba <w@suika.fam.cx>
+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: 2007/06/27 13:30:15 $
+$Date: 2008/08/14 15:50:42 $
 
 */