html { height: 100%; margin: 0; border: 0; padding: 0; background: white url(white.png) center repeat-y; color: black; font: 1em serif; }
body { min-height: 100%; margin: 0 auto; border: 0; padding: 0 1em 0 1em; background: url(trains.jpeg) bottom center no-repeat; max-width: 2600px; background-size: 100%; }
body::before { display: block; content: ''; padding: 1em 0 0 0; }
body::after { display: block; content: ''; padding: 1em 0 21% 0; }
body > * { max-width: 40em; margin-left: auto; margin-right: auto; }
body > :first-child { margin-top: 0; }
body > :last-child { margin-bottom: 28.5%; margin-bottom: 0; }

:link { color: blue; }
:visited { color: purple; }

h1 { font: 900 4em serif; text-align: center; }
h2 { font: 800 1.5em serif; text-align: center; border-bottom: dotted thin; margin-top: 1em; }
header > hgroup { text-align: center; font: 900 2em serif; }
header > hgroup > * { margin: 0; display: inline; font: inherit; border: none; margin: 0; }
header > hgroup > * + *:before { display: inline; content: '\ \2014\ '; }
header + aside { text-align: center; }

img { vertical-align: text-bottom; }
img[src^="http://www.unicode.org/cgi-bin/refglyph?16-"] { vertical-align: -5px; margin: -8px 2px -10px 1px;}
body > img { margin: 1em auto; display: block; }

article { background: white; border: thin silver solid; padding: 1em; max-width: 100em; position: relative; margin-top: 60px; }
article::before { content: url(light.png); position: absolute; top: -140px; right: 50px; }
article h3 { font: bold 1.75em serif; margin: 0 0 1em 0; }
article h3 a { display: block; font: small-caps 0.5em serif; text-transform: lowercase; text-decoration: none; }
article h3 a:hover { text-decoration: underline; }
.aged article h3[title]::after { display: block; content: attr(title) ' ago'; font: 0.5em serif; }
article > :first-child { margin-top: 0; }
article > :last-child { margin-bottom: 0; }
article p, article ol, article ul { max-width: 40em; }
article form.post p { max-width: none; }
article form.post input[type=text] { width: 100%; display: block; font: inherit; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
article form.post textarea { width: 100%; display: block; font: 1em monospace; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
article + article { margin-top: 170px; }
article:after { clear: both; content: ''; display: block; }
article table { margin: 0.25em 0 0.25em 2em; }
article .screenshot { margin: 0.5em 0 0.5em 1em; }
article > p:not(.screenshot) > img[alt=""]:not(.example) { float: right; clear: right; margin: 0.5em 0 0.5em 1em; }
article .photo.album { font-style: italic; }
article .photo.album img { font: 1em serif; border: solid; margin: 0.1em 0; display: block; max-width: 40em; width: 100%; }
article .example { margin: 1em 2em; display: block;  }
article blockquote { font-style: italic; margin: 0.25em 0 0.25em 2em; }
article blockquote > pre:first-child:last-child, blockquote.with-citation { margin-bottom: 0; }
article blockquote.with-citation > :last-child { margin-bottom: 0; }
article blockquote.with-citation + p.blockquote-citation { margin: 0 0 1em 2em; }
article p.conversanion q { display: block; margin: 0.1em 0 0.1em 2em; }
article p.conversation q:before { color: red; }
article p.conversation q[class]:before { content: '<' attr(class) '> '; }
article p.conversation q[class="Hixie"]:before { color: blue; }
article p.conversation q[class]:after { content: ''; }
article.google-plus-migration img { max-width: 100%; }
article figure { margin: 1.5em 0; }
article figure > iframe { width: 1024px; max-width: 100%; height: 768px; border: solid thick #EEEEEE; }

form { margin-top: 0; margin-bottom: 0; }

pre { padding: 1em; margin: 1em auto; }
pre em { text-decoration: underline; }
pre.email.body { white-space: normal; }

hr { display: block; margin: 1em auto; padding; 0; border: 0; text-align: center; white-space: pre; clear: both; color: black; }
hr::before { content: '\2605\           \2605\           \2605'; display: block; }

dl { margin-top: 1em; margin-bottom: 1em; }
dt { font-weight: bolder; margin: 0.6em 0 0.1em 0; }
dt + dt { margin: 0.25em 0 0.1em 0; }
dd { margin: 0.1em 0 0.1em 2em; }
dd + dd { margin: 0.5em 0 0.1em 2em; }

input.required[value=""] { border-color: red; }

.overstated { font-size: 4em; }
em.overstated { display: block; text-align: center; margin: 0; }
p.overstated { margin-top: 0; margin-bottom: 0; }

pre.irc { white-space: pre; white-space: pre-wrap; white-space: pre-line; }
pre.irc cite { font-weight: bold; font-style: normal; }
pre.irc cite[title="Xiven"] { color: green; }
pre.irc cite[title="Kamakaze"] { color: blue; }
pre.irc cite[title="Hixie"] { color: purple; }
pre.irc cite[title="GwieF"] { color: red; }
pre.irc cite[title="Cosmo"] { color: aqua; }
pre.irc cite[title="Charley"] { color: red; }

.letter { font-family: cursive; }
.letter address { margin: 0 0 1em auto; width: 15em; }
.letter p { text-indent: 2em; margin: 1em 0; }
.letter p.dear { text-indent: 0; }
.letter p.sig { text-indent: 0; font: italic 2.5em cursive; margin: 0 0 0 1em; }
.letter .name { font-variant: small-caps; }

table { border-spacing: 1em 0; border-collapse: collapse; }
th { text-align: left; padding: 0 1.5em 0 0.5em; }
td { padding: 0.1em 0.5em; }
thead, thead ~ tbody, tfoot { border-bottom: solid thin; }
thead ~ tbody + tbody:last-child { border-top: solid thin; }
td > input[type=text]:first-child:last-child { display: block; width: 100%; min-width: 10em; }
td > input[type=text]:not([value]):not(:focus):not(:hover):not(:active) { border-width: thin; }

.handwritten { font-family: cursive; }
table.handwritten.notes { border-spacing: 0.2em; border-collapse: separate; }
table.handwritten.notes td { border: thin silver; background: #F6F6F6; min-height: 1em; min-width: 3em; }
table.handwritten.notes tbody { border: none; }

table.comparison { border-collapse: collapse; }
table.comparison td, th { vertical-align: top; }
table.comparison thead { border-bottom: solid thin; }
table.comparison col:first-child { border-right: solid thin; }

table.bitfield { border-collapse: collapse; }
table.bitfield td { border: solid thin; text-align: center; width: 1.5em; line-height: 1.5; }

code.string.literal { color: black; background: #EEEEFF; }
code.reserved.identifier { color: red; }
code.elementName { color: purple; font-weight: bold; font-style: normal; }
code.attributeName { color: black; }
code.attributeValue { color: blue; font-weight: normal; }
code.doctype { color: teal; font-style: oblique; }
code.comment { color: green; font-style: oblique; }
code.cdata { color: fuchsia; }
code.markup { font-weight: bold; font-style: normal; }

kbd { font-weight: bolder; }
samp.cursor { text-decoration: blink; }

.advert { margin: 1em; padding: 0.75em; border: double 0.5em aqua; background: teal; color: yellow; font: bold italic 1em cursive; }
.advert :link, .advert :visited { font: bolder small-caps 1.1em cursive; color: white; }
.advert :visited { color: inherit; }

.spec { font: inherit; border-style: solid none; border-color: orange; margin: 1.5em 0; padding: 0.5em 1em 0.5em 2em; }
.spec .note { font-style: italic; color: green; }
.spec .example { border-left: double; padding-left: 1em; }
.spec .idl { background: #EEEEEE; border: solid thin; color: black; padding: 0.5em; }
.spec code { color: maroon; font-weight: bolder; }

.dynamic-quiz > :not(.asking):not(.asked),
.dynamic-quiz > .asking .answer { display: none; }
.dynamic-quiz > li > ol { list-style-type: lower-alpha; }

.feature-comparison { display: block; }
.feature-comparison th, .feature-comparison td { text-align: left; padding: 0; }
.feature-comparison > * > tr > :first-child + * { background: #FFFF99; color: black; }
.feature-comparison > * > tr > :first-child + * + * { background: #99FFFF; color: black; }
.feature-comparison > * > tr > :first-child ~ * :link,
.feature-comparison > * > tr > :first-child ~ * :visited { color: inherit; background: transparent; }
.feature-comparison > thead { display: table; width: 100%; border-spacing: 0; border: none; }
.feature-comparison > thead > tr > th:first-child { width: 10%; }
.feature-comparison > thead > tr > th:first-child + * { width: 20%; }
.feature-comparison > thead > tr > th:first-child + * + * { width: 70%; }
.feature-comparison > tbody { display: block; border: none; }
.feature-comparison > tbody > tr { display: block; }
.feature-comparison > tbody > tr > td { padding: 0.2em; }
.feature-comparison > tbody > tr > td pre { margin-top: 0; margin-bottom: 0; }
.feature-comparison > tbody > tr > th:first-child { display: block; margin: 1em 0 0.25em; }
.feature-comparison > tbody > tr > th:first-child + * { display: block; margin: 0.25em 20% 0.25em 10%; }
.feature-comparison > tbody > tr > th:first-child + * + * { display: block; margin: 0.25em 0% 0.25em 30%; }

.domTree { padding: 0.5em 0.5em 0.5em 1em; color: black; background: white; font: 1em monospace; }
.domTree ul { padding: 0 0 0 1em; margin: 0; }
.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
.domTree li li { list-style: disc; }
.domTree .t1 code { color: purple; font-weight: bold; }
.domTree .t2 { font-style: normal; font-family: monospace; }
.domTree .t2 .name { color: black; font-weight: bold; }
.domTree .t2 .value { color: blue; font-weight: normal; }
.domTree .t3 code,.domTree .t4 code,.domTree .t5 code { color: gray; }
.domTree .t7 code,.domTree .t8 code { color: green; }
.domTree span { font-style: italic; font-family: serif; }
.domTree .t10 code { color: teal; }
.domTree .misparented,.domTree .misparented code { color: red; font-weight: bold; }
.domTree li li { list-style: none; }
.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }

.magazine { display: block; margin: 1em 0 2em 2em ! important; -webkit-box-shadow: 10px 10px 30px gray; box-shadow: 10px 10px 30px gray; }

.postAnnotation { font-size: 0.6em; text-transform: uppercase; margin: 0; }
.adminMessage { position: absolute; top: 0; right: 0; font-style: italic; text-align: right; font-size: smaller; margin: 0.4em; color: maroon; background: transparent; }
article + nav { max-width: inherit; margin: 1em; text-align: center; }
article + nav .jump, article + nav .options { display: inline; }
article + nav form { display: inline-block; margin: 0 2em; }
footer { text-align: center; }
.dh-ad { font-size: smaller; font-style: italic; }

#spectrum-analyser { margin-left: 3em; font-size: x-small; width: 100%; height: 16em; }

.site-label-academia { font-family: "Times New Roman", cursive; font-style: italic; font-weight: 100; color: black;  background: transparent; letter-spacing: 0.3em; padding-left: 0.25em; }

.site-label-ian { letter-spacing: 0em; }
.site-label-ian > span:first-child { font-family: "Bubble", fantasy; font-weight: 900; color: #6666FF; background: transparent; }
.site-label-ian > span:first-child + span { font-family: monospace; font-weight: 900; color: #FF9933; background: transparent; position: relative; top: -0.2em; }
.site-label-ian > span:first-child + span + span { font-family: serif; color: #66CC66; font-weight: 100; font-style: italic; padding-right: 0.33em; margin: 0 -0.15em 0 0; }

.site-label-software { font: 1em Terminal, monospace; color: lime; background: black; }

.site-label-spam { height: 1em; vertical-align: -3px; }

.site-label-www > :first-child {  color: maroon; background: transparent; }
.site-label-www > :first-child + * { color: green; background: transparent; }
.site-label-www > :first-child + * + * {  color: navy; background: transparent; }

.moved { margin: 2em 0 0 0; font-size: 1.25em; border: solid red; background: white; padding: 1em; border-radius: 1em; box-shadow: 0 0 1em silver; }

@media print { nav, footer, body > aside { display: none; } }