body {
  font-family: arial,verdana,sans,sans-serif;
  border-top: 5px solid #222211;
  font-size: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  line-height: 105%;
}

.site-header {
  background-color: #E4E4E4;
  margin: 0px;
  padding: 0px;
  border-bottom: 2px solid black;
  min-height: 51px;
  vertical-align: bottom;
  padding-top: 3px;
  background: url("/images/web/2009/banner.png");
  background-repeat: no-repeat;
  background-color: #244c79;
  color: white;
  min-height: 55px;
  cursor: pointer;
}

.main {
  margin-left: 10px;
  margin-right: 10px;
}

/* So we don't clip the navigation on the side, set margin width */
.content {
  margin-right: 180px;
  padding-top: 10px;
  padding-right: 10px;
}

/* Set some basic element styles */
.content p, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  display: block;
  margin-top: 1em;
}

.content dt {
  display: block;
}

.content dd {
  display: block;
  padding-left: 1em;
}

/* Side navigation */

.secondary-navigation {
  float: right;
  width: 180px;
  font-size: small;
}

.secondary-navigation h4 {
  margin-top: 1em;
}

.secondary-navigation li {
  padding-left: 1em;
}

.secondary-navigation a.new {
  font-weight: bold;
}

.secondary-navigation a.new:after {
  content: " (new!)";
}

/* vcard */
.vcard {
  padding-right: 1em;
  float: right;
  text-align: right;
  width: 20em;
}

.vcard .fn { font-size: 18pt; }

.vcard .photo { 
  margin-left: 1em;
  float: right; 
}

.story {
  margin-bottom: 1em;
}

.story-header {
  border-top: 2px solid black;
  border-bottom: 1px solid darkgrey;
  background-color: #ECE9FF;
  padding-top: 3px;
  padding-left: 1em;
}

.story-title {
  font-size: 1.2em;
}

.story-date, .story-title {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.story-date {
  font-style: italic;
  font-size: small;
  padding-left: 2em;
}

.story-body {
  margin: 1em;
}

.story-body img {
  display: inline;
  padding: 3px;
  margin-left: 1em;
  margin-right: 1em;
  border: 1px solid lightgrey;
}

.story-body pre {
  font-size: 10pt;
  padding: .2em;

  /* Fix for IE7 + overflow + meyer's reset.css
   * Otherwise, the scrollbar horizontal will clip the pre contents. */
  margin-bottom: auto;

  /* hacky. Apply the same style as pre-wrap, which we'll remove
   * later when we actually do the pre-wrap bits 
   *
   * Or, if we can't apply pre-wrap or stop doing it, rendering will regress
   * properly. */
  border: 1px solid #CC9;
  background-color: #F8FFF8;
  color: #333311;

  margin-top: .8em;
  margin-bottom: .8em;
  margin-left: 2em;
  margin-right: 2em;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Tested without this in IE7, looks like we don't need it anymore? */
.story-body div.pre-wrap {
  border: 1px solid #CC9;
  background-color: #F8FFF8;
  color: #333311;

  margin-top: .5em;
  margin-bottom: .5em;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Remove style from a wrapped pre tag */
.story-body div.pre-wrap pre {
  border: 0px !important;
  background-color: #F8FFF8;
  color: #333311;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  overflow-x: none !important;
  overflow-y: none !important;
}

.story-body blockquote {
  display: block;
  color: #333333;
  quotes: "\201C" "\201D";
  margin: 1em;
}

.story-body blockquote:before {
  content: open-quote; 
  font-weight: bold;
}

.story-body blockquote:after {
  content: close-quote;
  font-weight: bold;
}

.story-body ul {
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
}

.story-tags {
  margin-left: 25px;
}

.story-footer {
  margin-left: 25px;
  border-top: 1px solid lightgrey;
}

.comment { }

.comment-header {
  background-color: #F3EFFF;
  border-bottom: 1px solid lightgrey;
  margin-top: 1em;
}

.comment-body {
  margin-left: 1em;
}

#article {
  padding-bottom:30px;
}

#article .toc {
  float: right;
  border: 1px solid #AAEEAA;
  background-color: #E8F5FF;
  text-align: left;
  margin-left: 15px;
  padding-bottom: 3px;
  margin-bottom: 10px;
  padding-right: 10px;
  margin-top: 15px;
}

#article .toc h4 {
  margin: 0px;
  margin-top: 5px;
}
#article .toc ol {
  margin-left: 2em;
  padding-left: 0;
}

#article .toc li {
  margin: 0;
  padding: 0;
}

#article .toc A {
  border-color: #E8F5FF;
}

#article .toc A:hover {
  border-color: green;
}

#article .toc H4 {
  /*display: inline*/
  text-align: center;
}

#article H4 {
  margin-bottom: 0px;
}

#article P {
  margin-top: 6px;
  margin-bottom: 0px;
}

.nocomments {
  font-size: 110%;
  font-weight: bold;
  padding: 1em;
}

.content ol {
  list-style-type: decimal;
  margin-left: 2em;
  padding-top: .2em;
  padding-bottom: .2em;
}

.story .update {
  border: 1px solid lightgreen;
  background-color: #DDFFDD;
  margin: 5px;
  padding: 3px;
}