/* Trent Mick's blog's CSS. Based heavily (at least initially) on
 * <http://html5boilerplate.com/> and on <http://lessframework.com/>.
 */

/* ---- reset
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
sub { vertical-align: sub; }
sup { vertical-align: super; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

input, select { vertical-align:middle; }



/* ---- 24px vertical rhythm
 * <http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/>
 * All tags except 'pre' because 24px line-height is way too much, want 18px.
 * Tough.
 */
body {
  line-height: 24px;
  font-family: helvetica, arial, freesans, clean, sans-serif;
  font-size: 16px;
}
h1,h2,h3,h4,h5,h6 {
  font-family: Georgia,serif;
  font-weight: bold;
  /* http://www.aestheticallyloyal.com/public/optimize-legibility/ */
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 28px;
  line-height: 48px;
  padding: 24px 0 24px 0;
}
h2 {
  font-size: 21px;
  line-height: 24px;
  padding: 24px 0 24px 0;
}
h3 {
  font-size: 16px;
  line-height: 24px;
  padding: 24px 0 0 0;
}
h4 {
  font-size: 14px;
  line-height: 24px;
  padding: 24px 0 0 0;
}
h5 {
  color: #666;
  font-size: 14px;
  line-height: 24px;
  padding: 24px 0 0 0;
}
h6 {
  color: #666;
  font-size: 12px;
  line-height: 24px;
  padding: 0;
}
hr {
  padding-bottom: 24px;
  margin: 24px 0;
  height: 0;
  border: none;
  text-align: center;
  color: #333;
}
hr:after {
  content: "\2767";
}
p + p {
  padding-top: 24px;
}
dl {
  margin: 24px 0;
}
dt {
  font-weight: bold;
  margin-top: 24px;
}
dd {
  margin: 0 0 0 48px;
}



/* ---- layout */

body {
  margin: 12px;
}
#wrapper {
  margin: 0 auto;
  max-width: 700px;
  position: relative;
}
#main {
  min-height: 300px;
}



/* ---- base styles */

blockquote {
  font-family: Georgia,serif;
  font-size: 18px;
  color: #555;
  margin: 24px 15% 24px 15%;
  margin: 24px 10% 24px 10%;
}
blockquote cite:before {
  content: "\2014 ";
}
blockquote p.hangquotes, blockquote.hangquotes {
  text-indent: -0.5em;
}

code,
pre {
  font-family: Consolas, Monaco, "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
code {
  padding: 0 0.2em;
}
pre {
  font-size: 80%;
  line-height: 18px;
  padding: 5px;
  margin: 18px 0;

  /* "overflow:auto" does NOT yield scrollbars in mobile browsers. iPhone
   * *does* support two-finger scrolling inside the pre-block, but that
   * is undiscoverable. Let's pre-wrap.
   */
  white-space: pre;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre code  {
  border: medium none;
  padding: 0;
}
a code {
  text-decoration: underline;
}
h1 + pre,
h2 + pre,
h3 + pre,
h4 + pre,
h5 + pre,
h6 + pre {
  margin-top: 0;
}

table {
  margin: 24px 0;
}
th,
td {
  border: solid #aaa;
  border-width: 1px 0;
  line-height: 23px;
  padding: 0 12px;
  text-align: left;
}
th {
  border-collapse: separate;
}
tbody tr:nth-child(odd) {
  background-color: #f6f6f6;
}

ol, ul {
  padding: 12px 0;
  margin: 0 0 0 24px;
}
ol ol, ul ul, ul ol, ol ul {
  margin-left: 24px;
}
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: upper-roman; }
ol ol ol ol { list-style-type: lower-roman; }
ul { list-style-type: circle; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: circle; }

:link { color: hsl(206, 100%, 23%); }
:visited { color: hsl(240, 20%, 50%); }
:link:hover, :visited:hover { color: hsl(206, 100%, 38%); }


/* ---- larger screens */

@media only screen and (min-width: 481px) {
  pre {
    overflow: auto;
    white-space: pre;
    word-wrap: normal;
  }
}

@media only screen and (min-width: 700px) {
  ol, ul {
    margin: 0;
  }
}


/* ---- custom classes */

pre.shell,
pre.shell code {
  background:#444;
  color:#fff;
  border-width:0px;
}
pre.shell code::before {
  content: '$ ';
  display: inline;
}


/* ----- top header */

#header {
  margin: 48px 0 24px 0;
}
#logo {
  font-family: Georgia,serif;
  font-weight: bold;
  font-size: 36px;
  padding-top: 120px;
  color: #268bd2;
}
#tocbox {
  position: relative;
  margin-left: 24px;
}
.navbutton {
  border: 1px solid #ccc;
  padding: 5px 10px;
  position: relative;
  top: -7px;
  font-size: 70%;
  font-weight: bold;
  text-transform: uppercase;
}
.navbutton:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}
#toc {
  border: 1px solid #ccc;
  padding: 5px 10px;
  background-color: white;
  font-size: 80%;
  line-height: 1.6em;
  position: absolute;
  top: 15px;
  left: 0px;
  width: 200px;
}
#toc a {
  text-decoration: none;
}
#toc a:hover {
  text-decoration: underline;
}
#toc ul {
  margin: 0;
  padding: 0px;
  list-style-type: none;
}
#toc ul ul {
  margin-left: 24px;
}