$page_bg: #f0f0f0;
$man_bg: #fff;
$code_bg: #fafafa;
$headings: #333;
$nums_bg: #efefef;
$nums: #999;
$code_border: #ccc;
$code_border_width: 1px;
$code_border_radius: .25em;
$code_margin: 2em;
$monospace: 'Inconsolata', 'Monaco', 'Lucida console', 'Monospace', monospace;

@mixin border-radius($r) {
  border-radius: $r;
  -moz-border-radius: $r;
  -webkit-border-radius: $r;
  -o-border-radius: $r;
}
@mixin border-radius-top-right($r) {
  border-top-right-radius: $r;
  -moz-border-top-right-radius: $r;
  -webkit-border-top-right-radius: $r;
  -o-border-top-right-radius: $r;
}
@mixin border-radius-bottom-right($r) {
  border-bottom-right-radius: $r;
  -moz-border-bottom-right-radius: $r;
  -webkit-border-bottom-right-radius: $r;
  -o-border-bottom-right-radius: $r;
}
@mixin box-shadow($shadow) {
  box-shadow: $shadow;
  -o-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
}

body {
  border-top: solid 0.5625em #555 ;
  font-size: 1em;
}

html, body {
  margin: 0;
  background: $page_bg;
  font-family: $monospace;
}

#logo {
  margin: 0 0.75em 0 0;
  width: 9.375em;
  vertical-align:middle;
}

#footer, #nav {
  text-align: center;
  font-family: sans-serif;
}

#footer {
  color: #bbb;
  padding: 6em 0;
  font-size: 0.75em;
  
  a, a:visited {
    color: inherit;
    text-decoration: none;
  }
}

$nav_shadow: 0 0.5em 0.5em 0em #e0e0e0,
             inset 0 0em 1em 0 #efefef ;
#nav {
  padding-top: 0.25em;
  background: #dfdfdf;
  margin-bottom: 0.9em;
  padding-bottom: 0.25em;
  border-top: solid 0.25em #a0a0a0;
  border-bottom: solid 0.0625em #c0c0c0;
  @include box-shadow($nav_shadow);

  a, a:visited {
    color: #999;
    margin: 0 1em;
    padding: 1em 0;
    text-decoration: none;
  }

  a:hover {
    border-bottom: solid 0.0625em #c0c0c0;
  }

  a:focus {
    color: #bbb;
    outline: none;
  }
}


$man_shadow: 0 0.5em 1em 0.25em #dbdbdb ;
.corners {
  border-radius: $code_border_radius;
  -moz-border-radius: $code_border_radius;
  -webkit-border-radius: $code_border_radius;
  -o-border-radius: $code_border_radius;
}
.mp {
  @include border-radius($code_border_radius);
  border: solid #d0d0d0 0.0625em;
  margin: 0 auto;
  padding: 1em;
  width:45.875em;
  background: $man_bg;
  @include box-shadow($man_shadow);
  
  abbr {
    cursor: help;
    border-bottom: dotted 0.0625em black;
  }
  hr {
    border: 0;
    border-top: 0.125em solid $code_border;
  }
  h1, h2,  h3 {
    font-family: $monospace;
    color: $headings;
  }
  h1 {
    font-size: 1.5em;
    margin: 0 0 1em 0;
  }
  h2 {
    font-size: 1.25em;
    margin: 1.5em 0;
  }
  p, ol, ul, li {
    list-style-type: square;
    text-align: justify;
    code {
      background: $code_bg;
      outline: solid $code_border_width $code_border;
      font-size: 0.9375em;
      color: black;
      padding: 0 0.25em 0.0625em 0.25em;
    }
    b, b *, strong, strong * {
      color: $headings;
    }
  }
  
  $pre_line_height:1.5em;
  pre, code {
    font-family: $monospace;
    line-height: $pre_line_height;
  }
  pre {
    padding: $pre_line_height 0.125em $pre_line_height 2.9375em;
    @include border-radius($code_border_radius);
    background-color: $code_bg;
    font-size: 0.9375em;
    margin: 0;
    border: solid $code_border_width $code_border;
    
    code {
      outline: 0;
      /* counter font-size: 0.9375em in ".mp p code" */
      font-size: 1em;
    }
  }
  .line_nums {
    @include border-radius($code_border_radius);
    @include border-radius-top-right(0);
    @include border-radius-bottom-right(0);
    color: $nums;
    width: 2.375em;
    background-color: $nums_bg;
    background-image: none;
    border-right: dashed 0.15em $code_border;
    text-align: right;
    float:left;
    margin: 0;
    padding-left: 0;
    padding-right: 0.3125em;
  }
  a {
    color: black;
    text-decoration: none;
    border-bottom: dotted 0.0625em black;
  }
  a:visited {
    color: #888;
    border-color: #888;
  }
}





/* This is generated by pygments (see pygments.org) for syntax highlighting*/

.hll { background-color: #ffffcc }
.c { color: #8f5902; font-style: italic } /* Comment */
.err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.g { color: #000000 } /* Generic */
.k { color: #204a87; font-weight: bold } /* Keyword */
.l { color: #000000 } /* Literal */
.n { color: #000000 } /* Name */
.o { color: #ce5c00; font-weight: bold } /* Operator */
.x { color: #000000 } /* Other */
.p { color: #000000; font-weight: bold } /* Punctuation */
.cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.cs { color: #8f5902; font-style: italic } /* Comment.Special */
.gd { color: #a40000 } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #ef2929 } /* Generic.Error */
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
.gi { color: #00A000 } /* Generic.Inserted */
.go { color: #000000; font-style: italic } /* Generic.Output */
.gp { color: #8f5902 } /* Generic.Prompt */
.gs { color: #000000; font-weight: bold } /* Generic.Strong */
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.ld { color: #000000 } /* Literal.Date */
.m { color: #0000cf; font-weight: bold } /* Literal.Number */
.s { color: #4e9a06 } /* Literal.String */
.na { color: #c4a000 } /* Name.Attribute */
.nb { color: #204a87 } /* Name.Builtin */
.nc { color: #000000 } /* Name.Class */
.no { color: #000000 } /* Name.Constant */
.nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.ni { color: #ce5c00 } /* Name.Entity */
.ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.nf { color: #000000 } /* Name.Function */
.nl { color: #f57900 } /* Name.Label */
.nn { color: #000000 } /* Name.Namespace */
.nx { color: #000000 } /* Name.Other */
.py { color: #000000 } /* Name.Property */
.nt { color: #204a87; font-weight: bold } /* Name.Tag */
.nv { color: #000000 } /* Name.Variable */
.ow { color: #204a87; font-weight: bold } /* Operator.Word */
.w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.sb { color: #4e9a06 } /* Literal.String.Backtick */
.sc { color: #4e9a06 } /* Literal.String.Char */
.sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.s2 { color: #4e9a06 } /* Literal.String.Double */
.se { color: #4e9a06 } /* Literal.String.Escape */
.sh { color: #4e9a06 } /* Literal.String.Heredoc */
.si { color: #4e9a06 } /* Literal.String.Interpol */
.sx { color: #4e9a06 } /* Literal.String.Other */
.sr { color: #4e9a06 } /* Literal.String.Regex */
.s1 { color: #4e9a06 } /* Literal.String.Single */
.ss { color: #4e9a06 } /* Literal.String.Symbol */
.bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.vc { color: #000000 } /* Name.Variable.Class */
.vg { color: #000000 } /* Name.Variable.Global */
.vi { color: #000000 } /* Name.Variable.Instance */
.il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */