/* Blog styles except for colors */

img:hover { background: inherit; }

/* For mobile browsers. Doesn't work, though, for some reason. */
img { max-width: 100%; height: auto; }

/* The top title */
#blogtitle {
  /*min-width: 400px; min-height: 94px;*/
  /*max-width: 100%;*/
  background-image: url(/blog/quill.gif);
  background-color: #379;
  background-repeat: no-repeat;
  background-position: right;
  text-decoration: none;  /* works in IE, not in Firefox -- why? */
  color: #eff;
  padding: 15px;
  border: 3px outset;
}

h1.title { font-style: italic; font-weight: bold; font-size: 225%;
           text-shadow: 2px 2px 6px black; }

/* The link around the blogtitle div */
a.title { text-decoration: none; }

/* Entries */
#content {
 float: left;
 /* Was 77%, but Firefox 3 suddenly refuses to put the right
  * sidebar on the right unless this is 75% or less at 800px.
  * This change doesn't seem to be documented anywhere.
  * Anyway, 75 doesn't fix it reliably either.
  */
 width: 74%;
 /* mmargin-right: .8em; */
 padding-bottom: 2em;
}

.readmore { font-style: italic; font-weight: bold; }

div.story {
 border: 1px inset #e4f6ff;
 background: #e4f6ff;
 padding: .1em 1em 1em 1em;
 margin: 5px 5px 12px 5px;
}

.story h2 { color: #700; font-size: 125%; }
.story h3 { font-size: 115%; }
.story h4 { font-size: 110%; font-style: italic; }

/* h2.story is the title for each blog post.
 * It also responds to .story h2, so it should be after that rule.
 */
h2.story { font-size: 165%; font-weight: bold; color: #b06; text-shadow:
           1px 1px 1px #aaa; }
h2.story a { color: #b06; text-decoration: none; }
h2.story a:hover { color: #c07; }
h2.date  { font-size: 115%; font-weight: bold; font-style: italic; }

/* In firefox 3, margin-left on #rightsidebar is completely ignored,
 * but it needs overflow-x: hidden; or else the sidebar is moved down
 * to below the last content line.
 */
/* Now we have two bad problems with #rightsidebar:
 * On normal desktop browsers, it no longer floats right.
 * On narrow mobile browsers, it has a negative left margin.
 * Why??????
 */
#rightsidebar {
  float: right;
  width: 22%;
  /* margin-left: 76%; */
  padding: .5em;
  color: #336699; background-color: #def;
}

/* On narrow screens, the right sidebar should go below the rest,
 * instead of floating right.
 */
@media (max-width: 500px) {
  body {
    margin: 2px;
  }
  #content {
    float:none;
    width: 100%;
  }
  div.story {
    padding: 2px;
  }
  #rightsidebar {
    /* display: inline-block; */
    float: none;
    width: 100%;
    mmargin-left: .5em;
    padding: 0;
  }
}

/* General formatting and prettiness */
blockquote { color: #601; }
pre {
  font-style: fixed;
  border: 1px inset white;
  /* overflow: auto; */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  padding: .3em;
}

/* A pre that's a fixed size, for quoting long things that aren't
 * important enough to warrant making the blog post's page super long
 */
pre.fixedsize {
  height: auto;
  max-height: 28em;
  overflow: auto;
}

code {
  padding-left: 4px; padding-right: 4px;
  padding-top: 2px;  padding-bottom: 2px;
}

/* Floating images with captions:
 * When <img align=right> needs a caption, replace it with
 * <figure class="rightfloat"><img ...><figcaption>...</figcaption></figure>
 */
.rightfloat { float: right; }
.leftfloat { float: left; }

figure {
    display: table;
    border: 2px solid grey;
}

figure img {
    display: block;
    padding: 2px;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-style: italic;
    border: 2px solid grey;
}

span.tags { font-style: italic; }

.tagcloud { font-size: 1.4em; }

/* Various titles and headlines */
.description { font-style: italic; text-shadow: 1px 1px 2px black; }

.update { font-style: italic; color: #006; margin-left: 2em; }

.summary { color: #060; margin-left: 2em; }

/* Spaced-out list */
.spaced li { padding-top: .75em; }

/* Category list */
.categoryhead { list-style-type : none;
  padding-left: 0; margin-left: .7em; font-weight: bold; }
.categorygroup { list-style-type : none;
  padding-left: .7em; padding-top: 0px; padding-bottom: 0px;
  margin-left: 0em; margin-top: 0px; margin-bottom: 0px;
  font-weight: bold; }

#searchbox input[type=text] { width: 95% }

/* Calendar stuff */
.blosxomCalendarHead { font-weight: bold; }
.blosxomCalendarWeekHeader { font-style: italic; text-align: right; }
.blosxomCalendarCell,.blosxomCalendarBlogged,.blosxomCalendarSpecificDay,.blosxomCalendarToday { text-align: center; }
td.blosxomCalendarBlogged { background: #eff; }
/* It makes no sense to use a different style for "today", because
 * in static mode this code is only run when new entries appear,
 * not when the reader views the page.
td.blosxomCalendarToday { background: #ccf; }
 */
td.blosxomCalendarSpecificDay { background: #ebf; }