/* Start with a blank slate */
html, body, div, p, ul, ol, h1, h2, h3 { margin: 0; padding: 0; border: 0; }

/* === Layout === */

#content2 { max-width: 700px; margin: 50px 0 0 400px; }
#sidebar { position: absolute; left: 50px; top: 50px; width: 300px; }
.figure { float: right; clear: both; margin: 6px 0 18px 10px; }
.figure.center { float: none; text-align: center; }
.figure.first { margin-top: 18pt; }
#footnotes { margin-top: 3em; }

/* === Smartphones === */
/* (only tested on iPhone) */
@media only screen
and (max-device-width: 480px) {
  #content2 { max-width: 100%; margin: 1em; }
  #sidebar { position: static; width: 100%; }
  #toc li ul { display: none; }
}

/* === Typography === */

body { font-family: verdana, helvetica, sans-serif;
       font-size: 12pt; line-height: 1.5; }

h1, h2, h3 { font-family: georgia, "times new roman", serif; clear: both; }
h1 { font-size: 18pt; line-height: 1; margin-bottom: 1em; }
h2 { font-size: 14pt; line-height: 1.28; margin: 1.28em 0; }
h3 { font-size: 12pt; line-height: 1.5; margin: 1.5em 0; }

#sidebar,
#sidebar a { color: #888; }
#sidebar { font-size: 10pt; line-height: 1.8; }
#info h1 { font-size: 12pt; line-height: 1.5; }
#info p { margin: 0; }
#toc { margin-top: 1.5em; }
#toc ul { list-style: none; }
#toc p { margin: .5em 0 0 0; font-style: italic; }
#toc li.current { font-weight: bold; }
#toc li.current ul { list-style: disc; font-weight: normal; margin-left: 3em; }

p { margin: 1.5em 0; }

a { color: #00007f; text-decoration: none; }
a:hover { text-decoration: underline; }
a.glossary { color: inherit; text-decoration: none; }
a.glossary:hover,
#first-key-sequence a.glossary { border-bottom: 1px dashed #888; }

li { margin-left: 1.2em; }
#toc li { margin: 0; }

.figure p { font-size: 8pt; line-height: 1; font-weight: bold;
            margin: 0; text-align: center; }

.footnote { font-size: 10pt; vertical-align: super; line-height: 1;
            font-family: verdana, helvetica, sans-serif; font-weight: normal; }
#footnotes { font-size: 10pt; }
#footnotes .footnote { vertical-align: baseline; }

.next { text-align: right; clear: both; }
.next a { color: #888; }

/* === Instructions for the reader === */
.do { margin: 1.5em 0; padding: 0 1ex 0 35px;
      background: url("images/do.png") no-repeat 0 8px; }
.do p { margin: .5em 0; }

/* === Draw an emacs frame === */
.titlebar,
.window,
.modeline,
.echoarea { position: relative; width: 559px; margin: 0 auto;
            background-repeat: no-repeat; overflow: hidden;
            font-family: Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
            font-size: 12px; line-height: 1.25; white-space: pre; }
.titlebar { height: 23px; margin-top: 18pt;
            background-image: url("images/titlebar.png");
            text-align: center; }
.window   { width: 535px; padding: 0 12px;
            background-image: url("images/window.png");
            background-repeat: repeat-y; }
.modeline { width: 554px; padding-left: 5px; height: 15px;
            background-image: url("images/modeline.png"); }
.echoarea { height: 18px; margin-bottom: 18pt;
            background-image: url("images/echoarea.png"); }
.titlebar p { margin: 5px 0 0 0; }
.window p   { text-align: left; /* Over-rides text-align:center when inside .figure */
              margin: 0; }      /* margin is provided by .window's padding, to
                                   support non-<p> content generated by haml's
                                   :preserve filter. */
.modeline { text-align: left; }
.echoarea p { text-align: left; margin: 1px 12px 0; }

/* === Half-width emacs frame when shown as a floated figure === */
.figure .window,
.figure .modeline,
.figure .echoarea { text-align: left; }
.figure .titlebar,
.figure .echoarea { width: 260px; }
.figure .window   { width: 236px; }
.figure .modeline { width: 255px; }
.figure .titlebar { margin-top: 0; }
.figure .echoarea { margin-bottom: 4pt; }
.figure .titlebar p,
.figure .window p,
.figure .echoarea p { font-weight: normal; line-height: 1.25; }
.figure .titlebar p { margin-left: 150px; }

/* === Full-width emacs frame when shown as a floated figure === */
.figure.wide .titlebar,
.figure.wide .echoarea { width: 320px; }
.figure.wide .window   { width: 296px; }
.figure.wide .modeline { width: 315px; }

/* === Font-lock colours === */
.window.default .comment       { color: #b22; }
.window.default .builtin       { color: #738; }
.window.default .keyword       { color: #707; }
.window.default .type          { color: #282; }
.window.default .variable-name { color: #952; }
.window.default .function-name { color: #00f; }
.window.default .string        { color: #825; }
.window.default .doc           { color: #825; }
.window .comment,
.window.new-comment-face .comment { color: #3f7f5f; }
.window .builtin       { color: #004; }
.window .keyword       { color: #004; }
.window .type          { color: #000; }
.window .variable-name { color: #000; font-weight: bold; }
.window .function-name { color: #000; font-weight: bold; }
.window .string        { color: #505; }
.window .doc           { color: #505; }
.window .region    { background-color: #ed9; }
.window .hl-line   { background-color: #beb; }
.window .cursor,
.echoarea .cursor  { background-color: #ccc; }
.modeline .error   { color: #f00; font-weight: bold; }
.echoarea .prompt  { color: #24d; }
.echoarea .ido-first-match { font-weight: bold; }
.window .bold      { font-weight: bold; }
.window .button    { text-decoration: underline; }
.window .underline { text-decoration: underline; }
.window .comint-highlight-prompt { color: #008; }
.window .compilation-error       { color: #f00; font-weight: bold; }
.window .compilation-line-number { color: #952; }
.window .diff-header,
.window .diff-hunk-header,
.window .diff-function    { background-color: #ccc; }
.window .diff-file-header { background-color: #bbb; font-weight: bold; }
.window .diff-context     { color: #777; }
.window .vc-annotate-face-3f3fff { color: #44f; background-color: #000; }
.window .vc-annotate-face-56ff3f { color: #5f4; background-color: #000; }

/* === why.html === */
#vri-examples { float: right; width: 300px; margin: 3pt 0 1em 2em; }
#nile,
#tcpip-parser { white-space: pre;
                overflow-x: auto; overflow-y: hidden;
                font-family: Menlo, "Bitstream Vera Sans Mono", monospace;
                font-size: 10pt; line-height: 1; }
#tcpip-parser { font-size: 9pt; letter-spacing: -1pt; text-align: center; }
#vri-examples p { white-space: normal; font-family: verdana, helvetica, sans-serif;
                  font-size: 9pt; line-height: 1; font-weight: bold;
                  text-align: center; margin-top: 0; }

/* === tutorial.html === */
.modeline img.mouse { position: absolute; left: 400px; top: 0px; }
td { vertical-align: bottom; padding-right: 1ex; }
td:first-child { vertical-align: top; text-align: right; }
td code { outline: 1px dotted #ccc; }

/* === basic_c.html === */
.figure#minibuffer .echoarea,
.notethis { border: #a00 2px solid; }
.modeline .notethis { font-size: 80%; } /* so that top & bottom borders are visible */

/* === glossary.html === */
dt { margin-top: 1.5em; font-weight: bold; }
dd { margin-left: 0; }
dd p { margin-top: 0; }
dl a { color: #888; font-size: 10pt; line-height: 1.8; }
dl td { vertical-align: top; }
dl td:first-child { white-space: nowrap; }
#glossary-frames { margin-top: -18pt; }