/* ::display */
blockquote, samp, iframe  { 
  position: relative;
}
blockquote, samp  { 
  display: block;
}
blockquote:before, samp:before, iframe:before  { 
  display: inline-block;
  position: absolute;
}
blockquote:before  { 
  content: url("apostrophe-double-opening.png");
}
samp.text:before  { 
  content: url("text-bw.png");
}
samp.css:before, samp.html:before, iframe.markup:before, iframe.style:before  { 
  content: url("code-bw.png");
}
iframe.result:before  { 
  content: url("monitor-bw.png");
}
.right  { 
  float: right;
}
.left  { 
  float: left;
}
.figure  { 
  position: relative;
  z-index: 10;
}
.figure .label a:before  { 
  content: url("magnifier.png");
  float: left;
}
.figure .label a  { 
  display: block;
}
.figure .label:after  { 
  clear: both;
  content: "";
  display: block;
}
.copyright  { 
  float: right;
}
/* display an external-link symbol */
a[target="_blank"]:after  { 
  content: url( "external_link.png");
}
h3, h4, h5  { 
  clear: both;
}
#toc ul  { 
  list-style-type: none;
}
table  { 
  border-collapse: collapse;
}


/* ::dimensioning */
body  { 
  max-width: 42em;
  margin: 2em auto 0;
  padding: 4em;
  line-height: 1.4em;
}
h1  { 
  margin-top: 0;
}
h3, h4, h5, #toc  { 
  margin: 2em -.2em .5em;
}
h3, h4, h5  { 
  padding: 0 .2em;
}
h4.topic:before  { 
  margin-right: .3em;
}
code, samp  { 
  font-size: 100%;
}
samp  { 
  margin: .5em auto;
  padding: .5em 1em;
}
p, dl, ol, ul, table  { 
  margin: .5em auto;
}
table  { 
  margin: 1em auto;
}
p:first-child  { 
  margin-top: 0;
}
dd + dt  { 
  margin-top: .5em;
}
iframe  { 
  width: 100%;
}
iframe  { 
  height: 9em;
}
#toc  { 
  padding: 1em;
}
#content  { 
  margin-top: 0;
}
blockquote  { 
  padding: .5em 1em;
}
blockquote:before  { 
  top: -8px;
  left: -25px;
}
samp:before  { 
  top: -5px;
  left: -60px;
}
iframe:before  { 
  top: 5px;
  left: -60px;
}
#toc  { 
  width: 95%;
}
.figure  { 
  line-height: .7em;
  margin: 1em auto;
}
.figure .image img  { 
  width: 100%;
  height: auto;
}
.figure .label  { 
  padding: .5em;
  line-height: 1.2em;
}
.figure .label a:before  { 
  margin: 0 .5em .5em 0;
}
/* display an external-link symbol */
a[target="_blank"]:after  { 
  padding-left: .3em;
}
th, td  { 
  padding: .1em .2em;
}
.right  { 
  margin: 0 -2em 1em 1em;
}
.left  { 
  margin: 0 1em 1em -2em;
}


/* ::counters */
h3:before  {
  content: counter( h3);
  margin-right: .5em;
}
h3  {
  counter-increment: h3;
}
h2  {
  counter-reset: h3;
}
h4:before  {
  content: counter(h3) "." counter( h4);
  margin-right: .5em;
}
h4  {
  counter-increment: h4;
}
h3  {
  counter-reset: h4;
}
#toc li:before  {
  content: counters( toc, ".");
  margin-right: .5em;
}
#toc li  {
  counter-increment: toc;
}
#toc ul  {
  counter-reset: toc;
}
ol.letter  { 
  list-style-type: upper-latin;
}

/* ::text formatting */
body  { 
  font-family: sans-serif;
}
dt  { 
  font-weight: bold;
}
.figure .label  { 
  font-size: 80%;
}
a  { 
  text-decoration: none;
}
h5  { 
  font-size: 1em;
}
th  { 
  font-weight: bold;
}


/* ::color and border */
body  { 
  border: 1px solid #ccc;
}
h3  { 
  color: #520;
  background: url( "background-h3.png") #ffd repeat-x;
}
h4  { 
  background: url( "background-h4.png") #ddf repeat-x;
}
code, samp  {
  color: #933;
}
blockquote  { 
  color: #040;
  background-color: #f2fff2;
  border-right: 3px solid #070;
}
html  { 
  background-color: #fffff9;
}
body  { 
  color: #222;
  background-color: #fff;
}
samp, iframe  { 
  border: 1px dashed #933;
  border-right: 3px solid #933;
  background-color: #F7dddd;
}
#toc  { 
  border: 1px solid #ccc;
  background-color: #fafafa;
}
.figure .label  { 
  background: url( "background-label.png") #f9f9f9 repeat-x;
}
.figure .image, .figure .label  { 
  border: 1px solid #ddd;
}
.figure img  { 
  border-bottom: none;
}
.figure .label  { 
  border-top: none;
}
.copyright  { 
  color: #aaa;
}
a  { 
  color: #004471;
  border-bottom: 2px solid #8EACC0;
}
a:hover  { 
  color: #00263F;
  border-bottom: 2px solid #1C5981;
  background-color: #ffc;
}
abbr > a, dfn > a  { 
  color: #004471;
  border-bottom: 2px dotted #8EACC0;
}
abbr > a:hover, dfn > a:hover  { 
  color: #00263F;
  border-bottom: 2px dotted #1C5981;
  background-color: #ffc;
}
.figure a  { 
  color: inherit;
  border-bottom: none;
}
.figure a:hover  { 
  color: inherit;
  border-bottom: none;
  background-color: inherit;
}
.figure img  { 
  border: none;
}
th, td  { 
  border: 1px solid #ddd;
}
th  { 
  background-color: #eee;
}
td.na  { 
  color: #fff;
  background-color: #000;
}
td.fail  { 
  color: #ff0;
  background-color: #c00;
}
td.edge  { 
  background-color: #cc0;
}
td.pass  { 
  background-color: #0c0;
}