/*
  farblog stylesheet - screen/print media types

  Copyright Malcolm Rowe, 2006, 2007
  Stylesheet licensed under the Creative Commons Attribution 3.0 license.
*/


/* Title section */

#title {
  height: 64px;
  /* Image derived from a photo taken by Kevin Collins.
     Downloaded from http://www.flickr.com/photos/kevincollins/115305184/,
     and originally licensed under a Creative Commons 2.0 by-nc license. */
  background-image: url('/cloud-and-tree');
}
#title div {
  max-width: 33em;
  /* Create a 12em gutter to the left.  We use the same gutter for the
     content, footer, and legal sections. */
  margin-left: 12em;
}
h1 {
  position: relative;
  top: 24px;

  color: white;
  background-color: transparent;

  font-size: 32px;
}
/* The anchor in the title shouldn't look like a normal anchor. */
#title h1 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border: 0;
}
/* But it should do something on hover for feedback. */
#title h1 a:hover {
  background-color: rgb(40%,60%,80%);
}


/* Content section */

#content {
  max-width: 33em;
  margin-left: 12em;
}

/* 'inline' images ("side pictures") should float to the left of the
   paragraph. */
#content p.side {
  float: left;
  margin: 5px 10px 0 0;
  /* user should set max-width to the width of the image. */
}

/* Float sidenotes left of succeeding paragraphs.  Preceding paragraphs
   would be better, but I don't know how to achieve that!  Actually, even
   better might be to use a SPAN for a sidenote, and just extract it
   completely from the content at that point.  That seems hard, though. */
#content p.sidenote {
  margin-top: 0.5em;
  margin-left: -12.5em;
  max-width: 10em;
  float: left;
}

/* Footer and legal sections */

#footer > div {
  max-width: 33em;
  margin-left: 12em;
}

#legal > div {
  max-width: 33em;
  margin-left: 12em;
}


/* Per-page styles: Archive page */
.archive h3 {
  /* This style is similar to 'sidenote', but right-aligned, and with a
     tighter gutter. */
  margin-left: -11.5em;
  width: 10em;
  text-align: right;

  float: left;
}