--- test/html-webhacc/cc-style.css	2007/09/03 14:30:46	1.8
+++ test/html-webhacc/cc-style.css	2008/08/14 11:58:32	1.25
@@ -7,7 +7,7 @@
   padding: 0.5em 1em;
 }
 
-dt, strong {
+dt, strong, th {
   font-weight: bolder;
   font-family: sans-serif;
 }
@@ -21,80 +21,386 @@
   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 -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;
+  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;
-  font-size: 150%;
 }
 
-h3 {
+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;
 }
 
-.tree-text q, .tree-cdata q, .tree-comment q {
+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;
 }
 
-q, #source-string li {
+/* 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-string ol {
+q, .source ol {
   background-color: #f0f0ff;
   color: black;
   line-height: 1.5;
 }
 
-q:before, q:after {
-  content: "";
-}
+/* Document dumps */
 
-#parse-errors dl:empty:before {
-  content: "This document has no parse error.";
-  font-style: italic;
-}
-
-#document-errors dl:empty:before {
-  content: "This document has no document error.";
-  font-style: italic;
-}
-
-#document-tree > ol {
+.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,96 +409,207 @@
   font-size: 90%;
 }
 
-#parse-errors dd, #document-errors dd, #error-description h3 {
-  margin-left: 20px;
-  padding-left: 40px;
-  min-height: 32px;
-  background-image: url(large-stop);
-  background-position: center left;
+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;
 }
 
-#identifiers dd, #terms dd {
+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, #terms dd + dd {
+#identifiers dd + dd,
+[id$="-identifiers"] dd + dd {
   background-image: url(error);
   background-position: center left;
   background-repeat: no-repeat;
 }
 
+
+
+
+
+
+#error-description h3, #result-para {
+  margin-left: 20px;
+  padding-left: 40px;
+  min-height: 32px;
+  background-image: url(large-stop);
+  background-position: center left;
+  background-repeat: no-repeat;
+}
+#levels-table tbody th:first-child {
+  padding-left: 42px;
+  min-height: 32px;
+  background-image: url(large-stop);
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  text-align: left;
+}
+
 #error-description h3 {
   margin-left: 1em;
   margin-right: 1em;
 }
 
-#document-errors dd.should, #error-description .should h3 {
-  background-image: url(large-alert);
+
+.format-charset, .tokenizer-error, .parse-error {
+  background-image: url(icons/syntax-16);
+  background-position: left center;
+  background-repeat: no-repeat;
+  padding-left: 20px;  
 }
 
-#document-errors dd.unsupported {
-  margin-left: 60px;
-  border: red 0.2em solid;
-  padding: 0.5em;
+.content-model-error, .attribute-error, .attribute-value-error, 
+.attribute-value-warning, .table-model-error {
+  background-image: url(icons/structure-16);
+  background-position: left center;
+  background-repeat: no-repeat;
+  padding-left: 20px;
 }
 
-#document-errors dd.unsupported, #error-description .unsupported h3 {
-  background-image: none;
+#result-para.PASS {
+  background-image: url(ok);
+}
+#result-summary table {
+  margin-left: auto;
+  margin-right: auto;
+  border: 3px solid #800080;
+  border-collapse: collapse;
 }
 
-#nav-items {
-  display: block;
-  position: fixed;
-  top: 0.5em;
-  right: 0.5em;
-  width: auto;
-  height: auto;
-  font-size: 90%;
-  background-color: #f4fff4;
+#result-summary tbody, colgroup {
+  border: 3px solid #800080;
+}
+
+#result-summary th {
+  background-color: #fff0f0;
   color: black;
-  padding: 0;
-  line-height: 1.1;
 }
 
-#nav-items li {
-  display: block;
-  list-style: none;
-  margin: 0;
-  border-style: none;
-  padding: 0;
+#result-summary th, #result-summary td {
+  border: 1px solid #800080;
+  padding: 0.2em 0.5em;
   text-align: center;
+  empty-cells: show;
 }
 
-#nav-items li a[href] {
-  display: block;
-  border-style: none;
-  color: inherit;
-  text-decoration: none;
+.uncertain td, p.uncertain,
+#level-u, #level-u th {
+  background-color: #e1e1ff;
+  color: black;
 }
 
-img {
-  border-style: none;
+.FAIL, .uncertain td.FAIL, #level-m, #level-m th {
+  background-color: #ffcece;
+  color: black;
 }
 
-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;
+.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
+  background-color: #e1e1ff;
+  color: black;
 }
 
+.PASS, #level-w, #level-w th,
+#level-i, #level-i th {
+  background-color: #ddffdd;
+  color: black;
+}
+
+#result-para {
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-right: 1em;
+}
+
+
 /*
 
-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/09/03 14:30:46 $
+$Date: 2008/08/14 11:58:32 $
 
 */