body { background: #333; font-family: sans-serif; font-size: 9pt; margin: 0; }
h1 { font-size: 120%; }
#main { border-left: 4px #000 solid; border-right: 4px #666 solid; margin-left: 10em; margin-right: 10em; background: #ffffee; padding: 1em; }
.screenshot { border: 1px solid #ffffee; margin: 1em; }
.screenshot.r { float: right; margin-left: 1em; margin-right: -10em; clear: right; }
.screenshot.l { float: left; margin-right: 1em; margin-left: -10em; clear: left; }
#logo-upper, #logo-lower { float: left; position: relative; left: -1em; margin-left: -70px; }
#logo-upper { width: 300px; height: 105px; }
#logo-lower { width: 125px; height: 40px; clear: left; }
p { position: relative; } /* don't be behind the logo image */
.screenshot { position: relative; z-index: 1; } /* don't be behind the paragraphs */
#toc { float: right; clear: right; margin-top: -6px; margin-right: -11em; width: 9em; color: #ddd; }
#toc h1 { font-size: 8pt; font-weight: inherit; margin-top: 0; margin-bottom: 0; }
#toc ul { font-size: 8pt; padding: 0; list-style: none; margin: 0; }
#toc a { color: #aaa; }
#toc a:hover { color: #fff; }
#toc ul { margin-left: 4px; }
#toc a { margin-left: -4px; }
#published { font-style: italic; font-size: 8pt; margin-top: -6px; margin-right: -2px; text-align: right; height: 0; }
#translations { margin: 0; }
#translations img { border: 0; }
#translations > img { -moz-box-shadow: #666 0 0 5px; -webkit-box-shadow: #666 0 0 5px; box-shadow: #666 0 0 5px; }
#translations a:hover img { -moz-box-shadow: #f00 0 0 8px; -webkit-box-shadow: #f00 0 0 8px; box-shadow: #f00 0 0 8px; }
@media screen and (max-width: 600px) {
  #main { margin-left: 2em; margin-right: 2em; }
  #logo-upper, #logo-lower { margin-left: -1em; }
  .screenshot.r { margin-right: -2em; }
  .screenshot.l { margin-left: -2em; }
  #toc { margin-right: -1em; color: #000; }
  #toc a { color: #666; }
  #toc a:hover { color: #000; }
}