/*
  farblog stylesheet - common

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


/* Eric Meyer's CSS reset.
   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  background-image: transparent;
}
/* remember to define focus styles! */
:focus {
  outline: 1px dotted black;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}


/* Re-establish some of the common browser defaults switched off by the
   reset script above. */

pre, code, kbd {
  font-family: monospace;
}
em, var {
  font-style: italic;
}
strong {
  font-weight: bold;
}

ol {
  list-style-type: decimal;
}
ul {
  list-style-type: disc;
}
sup {
  vertical-align: super;
  font-size: smaller;
}
sub {
  vertical-align: sub;
  font-size: smaller;
}


/* General page style */

html {
  /* FreeSerif is a rather smart serif font shipped with e.g. Ubuntu. */
  font-family: FreeSerif, Georgia, Times, "Times New Roman", serif;
  /* Bow to peer pressure and step down from the default font size.
     Typically the browser is set to 16px; this sets it to 14px. */
  font-size: 87.5%;
}

html>body {
  /* Everybody other than IE6 can resize pixel fonts, so re-set the font
     size to what it would have been if the default 16px font size was used
     above.  Not great, but it does permit control that's impossible
     otherwise.  IE6 ignores this rule, of course. */
  font-size: 14px;
}

p, li, dt, dd {
  /* 21px rhythmic unit */
  line-height: 1.5;
}
pre {
  /* for PRE, it's more important to have something readable. */
  line-height: normal;
}

/* Superscript and subscript text doesn't affect the line height, and
   neither does monospaced text within a paragraph or list (it seems that
   monospaced fonts are enough to throw out the line-height slightly.

   In all cases, we assume that there will be 'normal' body content somewhere
   on the line (although oddly, it doesn't seem to matter - perhaps the
   whitespace at the ends of the line is enough to establish a strut?). */
sup, sub, li code, p code, li kbd, p kbd {
  line-height: 0;
}

/* Block-level containers should have a top and bottom margin (that
   is a multiple of 1.5em).  Theoretically, this should also include
   DL, though that's only used in the Archive in practice, where it
   immediately follows H2 (and so we don't want the margin).  We could
   sort that out, but I can't be bothered. */
blockquote, pre, ul, ol, p.picture {
  margin-top: 0.8em;
  margin-bottom: 0.7em;
}

body {
  color: black;
  background-color: white;
}

:link, :visited {
  color: black;
  background-color: transparent;

  text-decoration: none;
}
:link {
  border-bottom: 1px solid rgb(40%,60%,80%);
}
:visited {
  border-bottom: 1px dotted rgb(40%,60%,80%);
}
:link:active, :link:hover,
:visited:active, :visited:hover {
  border-bottom: 2px solid rgb(40%,60%,80%);
}
/* Okay, this is a hack so that we can create links that don't look like
   links, particularly for images.  Oh for a ::contains() selector. */
:link.unadorned, :visited.unadorned {
  border-bottom: none;
}


/* Title section */
/* (see media-specific sheet) */


/* Content section */

h2 {
  font-size: 1.42858em; /* c. 20px */
  font-weight: bold;
  line-height: 1.05em; /* to bring the line-height x font-size to 21px */
  margin-top: 1.05em;
}

h3 {
  font-size: 1.14286em; /* c. 16px */
  font-weight: bold;
  margin-top: 1.2125em;
  margin-bottom: 0.1em; /* total 1.3125em, bringing the line-height
                           x font-size to 21px again. */
}

/* Run consecutive paragraphs and lists together, indenting second and
   subsequent paragraphs. */
#content p + p {
  text-indent: 1em;
}

/* Styling HR may or may not be portable - I'm not sure.  It works in
   Gecko, though. */
#content hr {
  border: 1px dotted rgb(80%,80%,80%);
  margin: 20px 5em;
  /* 20px top/bottom border plus 1px top/bottom border = 2 x 21px lines. */
}

#content p.sidenote {
  font-size: 80%;
  text-indent: 0;
}
/* Inline code within a sidenote should also be smaller. */
#content p.sidenote code {
  font-size: 100%; /* relative to the paragraph's text, overriding the
                      font-size specified above for code. */
}

/* Blockquotes should be marked with a bar to the left and be italic. */
#content blockquote {
  /* The -10px adjustment is for the left border and padding (5px each). */
  margin-left: -10px;
  border-left: 5px solid rgb(80%,80%,80%);
  padding-left: 5px;

  font-style: italic;
}
/* Italic text within a blockquote shouldn't be italic. */
#content blockquote i, #content blockquote em, #content blockquote var {
  font-style: normal;
}

/* Code should stand out by being green. */
#content code {
  color: green;
  background-color: transparent;
}

/* Out-of-line images ("pictures") shouldn't be indented.
   (The margin is already handled above). */
#content p.picture {
  text-indent: 0;

  /* The content of the paragraph is the caption, if any. */
  font-style: italic;
  font-size: 70%;
  text-align: center;

  /* TODO: it would be nice to set line-height to zero for captionless
           pictures, or at least work out how to suppress the strut that
           appears. */
}
/* Italic text within a picture caption shouldn't be italic. */
#content p.picture i, #content p.picture em, #content p.picture var {
  font-style: normal;
}
/* The paragraph after a picture paragraph shouldn't be indented. */
#content p.picture + p {
  text-indent: 0;
}

/* The posting-time paragraphs should be indented differently, and they
   should look different. */
#content .postingtime:before {
  content: "\2015";
  color: rgb(80%,80%,80%);
  padding-right: 0.25em;
}

#content .postingtime {
  text-indent: 3em;

  /* Run on to the following permalink. */
  float:left;
  padding-right: 1em;
}
#content .permalink {
  text-indent: 0;
}


/* Footer and legal sections */

#footer {
  border-top: 2px solid rgb(80%,80%,80%);
  border-bottom: 2px solid rgb(80%,80%,80%);

  margin-top: 1em;
  padding-top: 0.25em;

  color: black;
  background-color: rgb(90%,90%,90%);
}

#footer > h2 {
  display: none;
}

#footer > div {
  padding: 1em 0 1em 0;
}

#legal {
  padding-top: 0.25em;
  padding-bottom: 1.5em;
}

#legal > div > p {
  opacity: 0.6;
  font-size: smaller;
  margin-top: 1em;
  line-height: normal;
}


/* Per-page styles: Archive page */
.archive h3 {
  font-weight: normal; /* undoing the default page style */
  font-size: 0.857143em; /* c. 12px */
  line-height: 1.75em; /* to bring the line-height x font-size to 21px */
  margin: 0; /* undoing the default page style */
}

/* Separate each month by a half-line. */
.archive div.month {
  padding-top: 0.75em;
}