/* Copyright © 2008 Aaron Crane.  Some rights reserved.
   See http://aaroncrane.co.uk/about/ */

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 1em;
  color: #000;
  background: #fff url(/_/background.png) repeat-x fixed;
  font-family: sans-serif;
  font-size: 90%;
  overflow-y: scroll;
}

a:link {
  color: #00f;
}

a:visited {
  color: #551a8b;
}

a:hover,
a:active {
  color: #f33;
}

#contentlink {
  display: none;
}

#page {
  background: #900;
  max-width: 60em;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
}

#masthead {
  color: #fff;
  padding: 1em;
}

#masthead h1 {
  margin: 0;
  position: relative;           /* containing box for img */
  /* This magically forces Opera to leave enough vertical space for the icon,
     though I don't know how, because the icon is 36px tall: */
  min-height: 30px;
}

#masthead h1 img {
  position: absolute;
  right: 0;
  top: -0.1em;
}

#footer {
  color: #ccc;
  padding: 1em;
  font-size: 80%;
  font-style: italic;
  clear: left;
}

#columns {
  padding: 1em;
  background: #fff;
}


/* I'm using the float trick to simulate columns.  The big disadvantage of
   the float trick is that the column you float into place must be the
   shortest column.  That's because the height of a float doesn't contribute
   to the minimum required height of the enclosing box.

   In this case, I need this #columns box to be as tall as the two columns
   it contains, because it must have a white background to blank out the red
   background on #page (which in turn must be there so that Gecko can
   correctly applying clipping to that red background in the presence of
   rounded borders).  But on unusually short pages, #navigation can be
   taller than #main, and the white border on #columns then stops at the
   bottom of #main, rather than at the bottom of #navigation.  I have found
   no better way to work around that than to set display:table-cell on the
   appropriate box.

   I know that won't work directly in IE, but I have another hack which
   takes care of that problem; see /_/ie.css on this site.

   What surprised me was that this doesn't work in WebKit, at least not the
   version that shipped in Windows Safari 3.0.2.  CSS 2.1 §17.2.1 says that
   anonymous display:table-row and display:table boxes must be spliced into
   the tree when you have a table-cell but no suitable table-row or table.
   But WebKit doesn't seem to do that; the cell is rendered at the top of
   its containing element, and #masthead and #footer sit below it.  So I've
   had to add spurious <div>s to my markup, merely so that I can set the
   appropriate display: properties on them, to make them pretend to be a
   full-blown table.  Sigh.
*/
#columns      { display: table }
#columns-row  { display: table-row }
#columns-cell { display: table-cell }

#navigation {
  float: left;
  font-size: 90%;
  color: #333;
  width: 8em;
}

#navigation > :first-child {
  margin-top: 0.9em;
}

#navigation h2 {
  margin: 0 0 0.35em 0;
  font-size: 100%;
  text-transform: uppercase;
}

#navigation .box {
  margin-bottom: 1em;
}

#navigation ul.nav li {
  white-space: nowrap;
}

#navigation #feedlink img {
  vertical-align: bottom;
  position: relative;
  bottom: 0.2em;                /* plausible guess at font descender depth */
}

#navigation > p {
  margin: .75em 0;
}

#navigation p img {
  vertical-align: bottom;
}

#archive li ul {
  margin: 0 0 0.5em 1em;
  padding: 0;
  font-size: 90%;
}

#archive li {
  margin: 0;
  padding: 0;
}

#searchform input {
  font-size: 90%;
}

#searchform #q {
  width: 6.5em;
  color: #900;
  margin: 0 0 0.2em 0;
  padding: 0.1em 0.25em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  background: #eee;
}

#main {
  margin-left: 7.5em;
  padding-left: 1em;
  border-left: 1px dotted #900;
}

td, th {
  vertical-align: top;
}

th {
  text-align: left;
}

img {
  border: none;
}

.nav a {
  text-decoration: none;
  color: inherit;
}

.nav a:hover {
  text-decoration: underline;
}

ul.nav {
  margin: 0;
  padding: 0;
}

ul.nav li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#main h1 {
  margin: 0;
  font-size: 180%;
}

#main h2 {
  margin: 1em 0 0.35em 0;
  font-size: 120%;
}

h2 + p {
  margin-top: 0;
}

h1 + .ref, h1 + .body {
  margin-top: 1.25em;
}

.ref {
  clear: right;
  margin-bottom: 1.5em;
}

.ref.last {
  margin-bottom: 0.5em;
}

p.date {
  margin: 0.5em 0;
  font-size: 80%;
  color: #666;
}

.ref .more {
  font-size: 80%;
  text-align: right;
  color: #666;
  margin: 0.2em 0 0 0;
}

.body > *:first-child,
.snippet > *:first-child {
  margin-top: 0.3em;
}

.snippet > .last {
  margin-bottom: 0;
}

.snippet,
.body {
  line-height: 1.4;
}

#main blockquote {
  margin: 0;
  padding: 0 3em 0 3em;
  border-left: 3px solid #900;
  font-size: 90%;
}

#main pre {
  overflow: auto;
  padding-left: 3em;
}

#main img.right {
  float: right;
  padding-left: 0.5em;
  padding-bottom: 0.25em;
}

#main hr.sep {
  width: 50%;
  height: 0;
  border: 1px solid #900;
}

#main ul.months {
  margin: 0.5em 0 1.5em 0;
  padding: 0;
  list-style-type: none;
  font-size: 80%;
  color: #333;
  line-height: 1.4;
}

#main .months li {
  margin: 0;
  padding: 0 1em 0 0;
  display: inline;
}

#main .months li.last {
  padding-right: 0;
}

#prev-next {
  font-size: 80%;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  background: #eee;
}

#prev-next p {
  margin: 0 auto;
}

#prev-entry {
  float: left;
}

#next-entry {
  text-align: right;
}

#main .captioned-image > img {
  vertical-align: bottom;
}

#main .captioned-image p {
  font-size: 70%;
  margin: 0.25em 0 0 0;
}

#main .captioned-image {
  margin-top: 1em;
}

#main .captioned-image + .captioned-image {
  margin-top: 1.25em;
}

div.tags {
  margin-bottom: 1em;
  font-size: 80%;
  color: #666;
}

.tags li {
  list-style-type: none;
  display: inline;
  margin: 0;
  padding-right: 1em;
}

.tags li.last {
  padding-right: 0;
}

.tags li { padding-right: 0.75em }
#tags li { padding-right: 1em }

.tags ul {
  display: inline;
  padding: 0;
}

.tags h3 {
  display: inline;
  font-size: 100%;
  font-weight: normal;
  padding-right: 0.25em;
}

.tags h3:after {
  content: ":";
}

#tags {
  padding: 0;
  margin: 0;
}

#tags a {
  text-decoration: none;
}