/* general styles */
html { margin: 0; padding: 0; }
body { background: #fff; color: #000; margin: 0 0 1em; padding: 1em 2em 0; font: 1em/1.7 sans-serif; border-bottom: 1px solid; }
:link { background: transparent; color: #00f; }
:visited { background: transparent; color: #0e388c; }
h2 { clear: both; font: 1.4em sans-serif; margin: 1.8em 0 0; }
h2 strong { font-style: italic; }
h3 { font: 1.2em sans-serif; margin: 1.2em 0 1.2em; }
h4, h5, h6 { font: bold 1.0em sans-serif; margin: 1.2em 0 1.2em; }
p { margin: 1em 0; }
ol, ul, dl, p { margin-top: 1.1em; margin-bottom: 1.1em; }
dl ul, dl ol, li { margin-top: 0.2em; margin-bottom: 0.2em; }
dt { margin-top: 1.2em; margin-bottom: 0.4em; font: 1.1em sans-serif; }
abbr, acronym { border: none; text-decoration: none; }
address { margin: 2em 0 0; font-size: 0.5em; font-style: italic; }
form { margin: 0; padding: 0; }
input { font: inherit; }

/* header */
h1 { margin: 0 -2em; padding: 0.75em 1.25em 0.25em; font: 1em sans-serif; }
.the { display: block; margin: 0 0 -1em 0; font: 100 2em sans-serif; color: silver; }
.what { display: block; font: 900 2.5em/1 sans-serif; color: #3c790a; }
.wg { display: block; margin: -1em 0 0 0.5em; text-transform: lowercase;
      font: 900 small-caps 0.75em/2 sans-serif; letter-spacing: 0.1em; }
img { border: none; max-width: 100%; float: right; margin: 0 0 1em 1em; }

/* lists */
ol > li > h3 { margin-bottom: 0; }
ol > li > h3 + p { margin-top: 0; }
dl > dt { margin: 1em 0 0 0; }
dl > dd { margin: 0.25em 0 0.25em 2em; }
ol.dated { list-style: disc; }

/* navigation */
ul.navigation { margin: 0 -2em; padding: 0 2em; height: 2em; line-height: 2em; border-bottom: 1px solid; }
ul.navigation :focus { outline: none; -moz-outline: none; }
ul.navigation li { list-style: none; margin: 0 0.2em 0 0; padding: 0; float: left; background: #eee url(/images/tabs-right) top right; }
ul.navigation li a, ul.navigation li strong { display: block; height: 2em; padding: 0 2em; background: url(/images/tabs-left) no-repeat; }
ul.navigation li.this { background-position: 100% -150px; border-bottom: solid 1px silver; }
ul.navigation li a:focus { border-bottom: solid 1px silver; }
ul.navigation li.this a, ul.navigation li.this strong { background-position: 0 -150px; }
ul.navigation li strong { font-weight: normal; }
ul.navigation li:hover { background-position: 100% -150px; }
ul.navigation li:hover a, ul.navigation li:hover strong { background-position: 0 -150px; }
ul.navigation li strong a { display: inline; padding: 0; background: none; }

/* make it vaguely work in IE... sigh... */
* html ul.navigation li { display: inline; width: 10em; }

/* front page */
h1.simple { margin: 0; padding: 0 0.5em; font-size: 1.5em; font-weight: bold; position: relative; }
h1.simple img { float: none; position: absolute; left: -0.75em; top: 0.05em; height: 1em; width: 1em; margin: 0; }
p.byline { margin: 0 0 0 1em; }

.disabled { display: none; }

.status { background: #FFFF88; border: solid thin; color: black; font-weight: bold; padding: 0.4em 1em; line-height: 1.2; clear: both; }
.status p { margin: 0; }
.status .explanation { font-size: 0.7em; font-weight: normal; margin-top: 0.5em; }
#twitter { font-style: italic; }
.status #updater { font-size: smaller; margin: 0.25em 0; }
.status #updater:target.disabled, .status #updater:target.disabled .disabled { display: block; }
.status #updater input[type=text] { width: 80%; }
.status #updater #updater-status.busy { padding-right: 20px; background: center right no-repeat url(../images/spinner); }

p.what-to-do { width: 18em; min-height: 7em; margin: 1em 2em; padding: 1em 1.4em; border: solid thick; text-align: center; float: left; }
p.what-to-do :link, p.what-to-do :visited { color: black; text-decoration: none; }
p.what-to-do em { font-size: 2em; font-style: normal; display: block; text-decoration: underline; }
p.what-to-do span { white-space: nowrap; }
p.what-to-do span :link, p.what-to-do span :visited { text-decoration: underline; }

p.what-to-do { color: black; background: #FFFF99; border-color: #FFFF00; }
p.what-to-do +
p.what-to-do { color: black; background: #FF99FF; border-color: #FF00FF; }
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #CCCCCC; border-color: #999999; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #99FF99; border-color: #00FF00; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #FFCC99; border-color: #FF9900; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #FF9999; border-color: #FF0000; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #CC99FF; border-color: #9900FF; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #99CCFF; border-color: #0099FF; }
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do +
p.what-to-do { color: black; background: #99FFFF; border-color: #00FFFF; }

p.what-to-do + div { clear: both; padding-top: 2em; }