/* http://hixie.ch/ "spaced out" stylesheet
 * (c) copyright 2000 by Ian Hickson
 * Distributed under the GPL licence
 */

/* Design Guidelines: 
 * No GIFs
 * No pixels
 * Always set color with background-color
 */

@import url(/site.css);

/* BINDINGS */

h1 { -moz-binding: url(../bindings/sites.xml#menu); -khtml-binding: url(../bindings/sites.xml#menu); }


/* POSITIONING */

h1 { float: right; width: auto; }
body.index > h1 + * { clear: both; }
td > input[type=text]:first-child:last-child { display: block; width: 100%; min-width: 10em; }
p.conversation q { display: block; }
.aside { float: right; max-width: 12em; }
.aside img { max-width: 100%; }
p:not(.aside):not(.screenshot) > img[alt=""] { float: left; }
hr { clear: both; }
.photo.album img { display: block; }
em.overstated { display: block; text-align: center; }


/* SPACING */

html { padding: 0 50px 0 0; }
body { margin: 1em; }
h1 { margin: 0 -40px 0.5em 1em; }
h2 { margin: 0.25em 0 0.25em 0; }
.index .aside { margin: -2em 0 2em 1em; }
.aside { margin: 1em 0 0.5em 1em; }
.aside > * { margin: 1em 0; }
h3 { margin: 1.25em 0 0.3em 0; }
h3 + *, h3 + * > *:first-child { margin-top: 0; }
dl { margin: 1em 0; }
dt { 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; }
hr { margin: 1.5em 40%; }
form { margin: 0; }
table { border-spacing: 1em 0; border-collapse: collapse; }
pre, blockquote, table { margin: 0.25em 0 0.25em 2em; }
blockquote > pre:first-child:last-child,
blockquote.with-citation { margin-bottom: 0; }
blockquote.with-citation > :last-child { margin-bottom: 0; }
blockquote.with-citation + p.blockquote-citation { margin: 0 0 1em 2em; }
div > h3:first-child + pre:last-child { margin: 0; }
td { padding: 0.1em 0.5em; }
p.conversation q { margin: 0.1em 0 0.1em 2em; }
pre.email.body { white-space: normal; }
pre.irc { white-space: pre; /* CSS2 */
          white-space: -moz-pre-wrap; /* Mozilla */
          white-space: -hp-pre-wrap; /* HP printers */
          white-space: -o-pre-wrap; /* Opera 7 */
          white-space: -pre-wrap; /* Opera 4-6 */
          white-space: pre-wrap; /* CSS 2.1 */
          white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ 
          word-wrap: break-word; /* IE */ }
p.overstated { margin: 0; }
em.overstated { margin: 0; }
.photo.album img { margin: 0.1em; }
.screenshot { margin: 0.5em 0 0.5em 1em; }


/* INLINE LAYOUT */

.domain { text-align: right; }
.domain > * { letter-spacing: 0.5em; }
.domain > .ch { letter-spacing: 0; }
.domain > .ch > .c { padding-right: 0.5em; }
h1 { -moz-user-select: none; }
.aside > * { text-align: right; }
.aside a em { white-space: nowrap; }
th { text-align: left; padding: 0 1.5em 0 0.5em; }
img { vertical-align: text-bottom; }
img[src^="http://www.unicode.org/cgi-bin/refglyph?16-"] { vertical-align: -5px; margin: -8px 2px -10px 1px;}


/* DECORATION */

html { background: url(../images/astrophy/original) 100% 99% fixed no-repeat; }
.domain { border-bottom: solid 0.1em; cursor: pointer; }
:link, :visited { text-decoration: underline; cursor: pointer; }
thead, thead ~ tbody, tfoot { border-bottom: solid thin; }
thead ~ tbody + tbody:last-child { border-top: solid thin; }
hr { border: none; background: none; color: inherit; }
hr:before { display: block; text-align: center; white-space: pre; content: '\2736   \2736   \2736'; }
td > input[type=text]:not([value]):not(:focus):not(:hover):not(:active) { border-width: thin; }
pre em { text-decoration: underline; }
samp.cursor { text-decoration: blink; }
p.conversation q[class]:before { content: '<' attr(class) '> '; }
p.conversation q[class]:after { content: ''; }
.photo.album img { border: solid; }


/* FONTS -- use ems, and keep margins sane */

html, .photo.album img { font: normal normal normal medium/normal Tahoma, Verdana, Arial, Geneva, Helvetica, sans-serif; }
body.index > h1 { font-size: 3em; font-weight: 900; }
h1 { font-size: 1.2em; font-weight: 800; }
h2 { font-size: 1.75em; font-weight: 800; }
h3 { font-size: 1.25em; font-weight: 800; }
blockquote { font-style: italic; }
dl > dt { font-weight: bolder; }
kbd { font-weight: bolder; }
pre { font: 1em monospace; }
pre em { font: inherit; }
code.elementName, code.markup, pre var { font-weight: bold; font-style: normal; }
code.comment, code.doctype { font-style: oblique; }
code.attributeValue { font-weight: normal; }
.overstated { font-size: 4em; }
pre.irc cite { font-weight: bold; font-style: normal; }
.photo.album { font-variant: small-caps; }
.aside #image p { font-style: italic; font-size: 0.5em; }


/* COLOUR */

html { color: black; background-color: white; }
.domain { color: silver; background: transparent; border-color: black; }
.domain > .dot { color: black; background: transparent; }
:link { color: blue; background: transparent; }
:visited { color: purple; background: transparent; }
:link:active, :visited:active, :link:hover, :visited:hover { color: red; background: transparent; }
input.required[value=""] { border-color: red; }
p.conversation q:before { color: red; }
p.conversation q[class="Hixie"]:before { color: blue; }
pre { color: black; background: white; }
code.string.literal { color: black; background: #EEEEFF; }
pre var { color: green; }
pre em { color: fuchsia; }
code.reserved.identifier { color: red; }
code.elementName { color: purple; }
code.attributeName { color: black; }
code.attributeValue { color: blue; }
code.doctype { color: teal; }
code.comment { color: green; }
code.cdata { color: fuchsia; }
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; }


/* SPECIFIC SECTIONS */

.letter { font-family: Comic Sans, 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 Comic Sans, cursive; margin: 0 0 0 1em; }
.letter .name { font-variant: small-caps; }

.handwritten { font-family: Comic Sans, 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; }

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



/* BLOG */

.adminMessage {
  position: absolute;
  top: 0;
  left: 0;
  font-style: italic;
  text-align: right;
  font-size: smaller;
  margin: 0.4em;
  color: maroon;
  background: transparent;
}

.log {
  margin: 0 20% 0 0;
}

.post, .navigation {
  clear: left;
  margin: 0 -8em 0 0;
  padding: 0 3em 0 12em;
}

.post > :first-child {
  position: relative;
}

body.aged .post h3[title]:before {
  font-size: 0.7em;
  font-weight: normal;
  font-style: italic;
  content: attr(title) ' ago';
  position: absolute;
  display: block;
  height: 0;
  width: 10em;
  text-align: right; 
  margin: 0 0 -4em -13em;
  padding: 2em 0;
}

.post > :first-child a {
  width: 12em;
  position: absolute;
  left: -13.5em;
  top: 0;
  font-size: 0.75em;
  text-transform: lowercase;
  font-variant: small-caps;
  text-align: right;
}

h3 [rel="bookmark"] {
  -moz-binding: url(/resources/bindings/timezone.xml#timezone);
  -khtml-binding: url(/resources/bindings/timezone.xml#timezone);
}

.pingbacks {
  font-variant: small-caps;
  font-size: smaller;
}

.post#twitter {
  margin-top: 1em;
  min-height: 3em;
}

.post#twitter p {
   margin: 0;
}

.post img.painting {
  float: right;
  clear: right;
  margin: 1em 0 1em 1em;
}

.post input[type=text] {
  width: 100%;
  display: block;
  font: inherit;
}

.post textarea {
  width: 100%;
  display: block;
  font: 1em monospace;
}

.jump, .options {
  margin: 1em 0 0 0;
  font-size: smaller;
  font-style: italic;
}

.jump form, .jump form p,
.options form, .options form p {
  display: inline;
}

.footer {
  border-top: solid thin;
  padding: 0.5em 1em 0 2.5em;
  font-size: smaller;
  margin: 1em 0 0 0;
}

.footer p {
  margin: 0;
}

pre.error {
  line-height: 1em;
  white-space: -moz-pre-wrap;
}

@media print {
  .navigation, .footer *, .aside a { display: none; }
}

.dh-ad { font-size: 0.6em; }
.dh-ad span { display: block; }


/* Joke on the Firefox users */
html > img { width: 400px ! important; height: 400px ! important; background: url(/resources/images/astrophy/48) no-repeat ! important; cursor: pointer ! important; }
#__firefox-findbar-search-id { font-size: larger ! important; background: transparent ! important; position: fixed ! important; top: 0 ! important; right: 0 ! important; border: thick dotted lime ! important; }
#__firefox-findbar-search-id:before { content: '>>' ! important; }
#__firefox-findbar-search-id:after { content: '<<' ! important; }