--- test/html-webhacc/cc-style.css	2007/11/05 09:33:52	1.12
+++ test/html-webhacc/cc-style.css	2008/08/16 07:42:20	1.30
@@ -21,80 +21,446 @@
   font-size: 180%;
 }
 
-h2 {
+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;
-  font-size: 150%;
 }
 
-h3, th {
+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;
 }
 
-.tree-text q, .tree-cdata q, .tree-comment q {
+nav {
   display: block;
 }
 
-q, #source-string li {
+.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-string ol {
+q, .source ol, .dump pre {
   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;
+.dump pre > code {
+  color: inherit;
+  background-color: transparent;
 }
 
-#document-errors dl:empty:before {
-  content: "This document has no document error.";
-  font-style: italic;
-}
+/* Document dumps */
 
-#document-tree > ol {
+.dump > ol {
   margin-left: 0;
   padding-left: 0;
 }
-#document-tree > ol > li {
+
+.dump > ol > li {
 /*  display: block;
   list-style: none;
   margin-left: 0;
   padding-left: 0; */
 }
 
-#document-tree ol /*ol*/ {
+.dump > ol /* ol */ {
   margin-left: 1em;
   padding-left: 0;
 }
 
-#document-tree ol /*ol*/ li {
+.dump ol /*ol*/ li {
   margin-left: 0;
   padding-left: 0.4em;
 }
 
-#document-tree ul.attributes {
+.dump ul.attributes {
   margin-left: 3em;
   padding: 0;
 }
 
-#document-tree ul.attributes li {
+.dump ul.attributes li {
   display: inline;
   list-style: none;
   margin: 0 2em 0 0;
@@ -103,226 +469,318 @@
   font-size: 90%;
 }
 
-#dump-manifest tbody:empty {
-  display: table-caption;
-  caption-side: bottom;
+q:after {
+  content: " "; /* Make white-space-only quotations visible */
+  white-space: pre;
 }
 
-#dump-manifest tbody:empty::after {
-  content: "This cache manifest contains no oppotunistic caching namespace.";
+dd.no-entry:lang(en) {
   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;
+dd.manifest-fallbacks + dd.manifest-fallbacks {
+  margin-top: 1em;
 }
 
-#dump-manifest dt:last-child::after {
-  content: "This cache manifest has an empty online whitelist.";
+dd.manifest-fallbacks p {
+  margin: 0;
+  text-indent: 0;
 }
 
-#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;
+dd.manifest-fallbacks > p + p {
+  text-indent: -1em;
 }
 
-#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;
+dd.manifest-fallbacks > p + p:before {
+  content: "\21B3  ";
 }
 
-#identifiers dd, #terms dd {
-  margin-left: 20px;
-  padding-left: 20px;
-  min-height: 20px;
+/* Errors */
+
+.errors dt {
+  background-image: none;
+  background-position: left center;
+  background-repeat: no-repeat;
+  padding-left: 20px; /* icons/*-16.png */
+  min-height: 16px;
 }
 
-#identifiers dd + dd, #terms dd + dd {
-  background-image: url(error);
-  background-position: center left;
+.errors dd {
+  margin-left: 0;
+  padding-left: 60px;
+  min-height: 32px; /* large-*.png files' height */
+  background-position: 20px center;
   background-repeat: no-repeat;
 }
 
-#error-description h3 {
-  margin-left: 1em;
-  margin-right: 1em;
+.level-m, .level-s {
+  background-image: url(large-stop);
+/* TODO: we need an image for SHOULD-level errors */
 }
 
-#document-errors dd.should, #error-description .should h3,
-#result-para.SEE-RESULT, #levels-table #level-s th {
+.level-w {
   background-image: url(large-alert);
 }
 
-#levels-table #level-w th {
+.level-i {
   background-image: url(large-info);
 }
 
-#document-errors dd.unsupported {
-  margin-left: 60px;
-  border: red 0.2em solid;
-  padding: 0.5em;
-}
-
-#document-errors dd.unsupported, #error-description .unsupported h3,
-#result-para.uncertain, #levels-table #level-unsupported th {
+.level-u {
   background-image: none;
 }
 
-#result-para.PASS {
-  background-image: url(ok);
+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;
 }
 
-#nav-items {
-  display: block;
-  position: fixed;
-  top: 0.5em;
-  right: 0.5em;
-  width: auto;
-  height: auto;
-  font-size: 90%;
-  background-color: #f4fff4;
+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;
-  padding: 0;
-  line-height: 1.1;
 }
 
-#nav-items li {
-  display: block;
-  list-style: none;
-  margin: 0;
-  border-style: none;
-  padding: 0;
-  text-align: center;
+dt.layer-transfer {
+  background-image: url(icons/transfer-16);
 }
 
-#nav-items li a[href] {
-  display: block;
-  border-style: none;
-  color: inherit;
-  text-decoration: none;
+dt.layer-encode,
+dt.layer-charset {
+  background-image: url(icons/char-16);
+/* TODO: We need different images for these layers */
 }
 
-img {
-  border-style: none;
+dt.layer-syntax {
+  background-image: url(icons/syntax-16);
 }
 
-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;
+dt.layer-structure {
+  background-image: url(icons/structure-16);
 }
 
-.rfc2119 {
-  border-style: none;
-  text-transform: lowercase;
-  font-variant: small-caps;
-  font-style: normal;
-  text-decoration: none;
-  font-weight: normal;
-  font-family: sans-serif;
+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-summary table {
+.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: 3px solid #800080;
+  border: 4px solid #800080;
   border-collapse: collapse;
 }
 
-#result-summary tbody, colgroup {
-  border: 3px solid #800080;
+.result tbody,
+.result colgroup {
+  border: 4px solid #800080;
 }
 
-#result-summary th {
+.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-summary th, #result-summary td {
+.result th,
+.result td {
   border: 1px solid #800080;
   padding: 0.2em 0.5em;
   text-align: center;
   empty-cells: show;
 }
 
-.uncertain td, p.uncertain, #level-unsupported, #level-unsupported th {
+.result td.subrow {
+  border-top-style: hidden;
+}
+
+.result .uncertain td {
   background-color: #e1e1ff;
   color: black;
 }
 
-.FAIL, .uncertain td.FAIL, #level-m, #level-m th {
+.result .must-errors,
+.result .uncertain .must-errors {
   background-color: #ffcece;
   color: black;
 }
 
-.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
+.result .should-errors,
+.result .uncertain .should-errors {
   background-color: #e1e1ff;
   color: black;
 }
 
-.PASS, #level-w, #level-w th {
-  background-color: #ddffdd;
-  color: black;
+.result tfoot .total strong {
+  font-size: 150%;
 }
 
-#result-para {
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  padding-right: 1em;
+.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 */
 }
 
-/* dl.switch from WHATWG specification style sheet */
+.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 */
+}
 
-dl.switch {
-  padding-left: 2em;
+.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 */
 }
 
-dl.switch dt {
-  display: block;
-  text-indent: -1.5em;
-  font-weight: bolder;
-  font-family: sans-serif;
-  font-style: normal;
+.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 */
 }
 
-dl.switch dt:before {
-  content: '\21AA';
-  padding: 0 0.5em 0 0;
-  display: inline-block;
-  width: 1em;
-  text-align: right;
-  line-height: 0.5em;
+.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 */
 }
 
-dl.switch dt:after {
-  content: " :";
+.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/11/05 09:33:52 $
+$Date: 2008/08/16 07:42:20 $
 
 */