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

/* 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 */
}

/*

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/16 07:42:20 $

*/