@import “rouge-github”; @import url('fonts.googleapis.com/css?family=Arvo:400,700,400italic');

/* MeyerWeb Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;

}

/* Base text styles */

body {

padding:10px 50px 0 0;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #232323;
      background-color: #FBFAF7;
      margin: 0;
      line-height: 1.8em;
      -webkit-font-smoothing: antialiased;

}

h1, h2, h3, h4, h5, h6 {

color:#232323;
margin:36px 0 10px;

}

p, ul, ol, table, dl {

margin:0 0 22px;

}

h1, h2, h3 {

      font-family: Arvo, Monaco, serif;
line-height:1.3;
      font-weight: normal;

}

h1,h2, h3 {

display: block;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;

}

h1 {

font-size: 30px;

}

h2 {

font-size: 24px;

}

h3 {

font-size: 18px;

}

h4, h5, h6 {

font-family: Arvo, Monaco, serif;
font-weight: 700;

}

a {

color:#C30000;
font-weight:200;
text-decoration:none;

}

a:hover {

text-decoration: underline;

}

a small {

font-size: 12px;

}

em {

font-style: italic;

}

strong {

font-weight:700;

}

ul {

list-style-position: inside;
list-style: disc;
padding-left: 25px;

}

ol {

list-style-position: inside;
list-style: decimal;
padding-left: 25px;

}

blockquote {

margin: 0;
padding: 0 0 0 20px;
font-style: italic;

}

dl, dt, dd, dl p {

color: #444;

}

dl dt {

font-weight: bold;

}

dl dd {

padding-left: 20px;
font-style: italic;

}

dl p {

padding-left: 20px;
font-style: italic;

}

hr {

border:0;
background:#ccc;
height:1px;
margin:0 0 24px;

}

/* Images */

img {

position: relative;
margin: 0 auto;
max-width: 650px;
padding: 5px;
margin: 10px 0 32px 0;
border: 1px solid #ccc;

}

p img, .emoji {

display: inline;
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
border: none;

}

/* Code blocks */

code, pre {

      font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
color:#000;
font-size:14px;

}

pre {

      padding: 4px 12px;
background: #FDFEFB;
border-radius:4px;
border:1px solid #D7D8C8;
overflow: auto;
overflow-y: hidden;
      margin-bottom: 32px;

}

/* Tables */

table {

width:100%;

}

table {

 border: 1px solid #ccc;
 margin-bottom: 32px;
 text-align: left;
}

th {

 font-family: 'Arvo', Helvetica, Arial, sans-serif;
       font-size: 18px;
       font-weight: normal;
 padding: 10px;
 background: #232323;
 color: #FDFEFB;
}

td {

 padding: 10px;
       background: #ccc;
}

/* Wrapper */ .wrapper {

width:960px;

}

/* Header */

header {

      background-color: #171717;
      color: #FDFDFB;
width:170px;
float:left;
position:fixed;
      border: 1px solid #000;
      -webkit-border-top-right-radius: 4px;
      -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-topright: 4px;
      -moz-border-radius-bottomright: 4px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      padding: 34px 25px 22px 50px;
      margin: 30px 25px 0 0;
      -webkit-font-smoothing: antialiased;

}

p.header {

font-size: 16px;

}

h1.header {

font-family: Arvo, sans-serif;
font-size: 30px;
font-weight: 300;
line-height: 1.3em;
border-bottom: none;
margin-top: 0;

}

h1.header, a.header, a.name, header a{

color: #fff;

}

a.header {

text-decoration: underline;

}

a.name {

white-space: nowrap;

}

header ul {

list-style:none;
padding:0;

}

header li {

      list-style-type: none;
width:132px;
height:15px;
      margin-bottom: 12px;
      line-height: 1em;
      padding: 6px 6px 6px 7px;

      background: #AF0011;
      background: -moz-linear-gradient(top, #AF0011 0%, #820011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #AF0011 0%,#820011 100%);
background: -o-linear-gradient(top, #AF0011 0%,#820011 100%);
background: -ms-linear-gradient(top, #AF0011 0%,#820011 100%);
background: linear-gradient(to top, #AF0011 0%,#820011 100%);

      border-radius:4px;
border:1px solid #0D0D0D;

      -webkit-box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1);
      box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1);

}

header li:hover {

      background: #C3001D;
      background: -moz-linear-gradient(top, #C3001D 0%, #950119 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #C3001D 0%,#950119 100%);
background: -o-linear-gradient(top, #C3001D 0%,#950119 100%);
background: -ms-linear-gradient(top, #C3001D 0%,#950119 100%);
background: linear-gradient(to top, #C3001D 0%,#950119 100%);

}

a.buttons {

-webkit-font-smoothing: antialiased;
background: url(../images/arrow-down.png) no-repeat;
font-weight: normal;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
padding: 2px 2px 2px 22px;
height: 30px;

}

a.github {

background: url(../images/octocat-small.png) no-repeat 1px;

}

a.buttons:hover {

color: #fff;
text-decoration: none;

}

/* Section - for main page content */

section {

width:650px;
float:right;
padding-bottom:50px;

}

/* Footer */

footer {

width:170px;
float:left;
position:fixed;
bottom:10px;
      padding-left: 50px;

}

@media print, screen and (max-width: 960px) {

div.wrapper {
  width:auto;
  margin:0;
}

header, section, footer {
  float:none;
  position:static;
  width:auto;
}

      footer {
              border-top: 1px solid #ccc;
              margin:0 84px 0 50px;
              padding:0;
      }

header {
  padding-right:320px;
}

section {
  padding:20px 84px 20px 50px;
  margin:0 0 20px;
}

header a small {
  display:inline;
}

header ul {
  position:absolute;
  right:130px;
  top:84px;
}

}

@media print, screen and (max-width: 720px) {

body {
  word-wrap:break-word;
}

header {
  padding:10px 20px 0;
              margin-right: 0;
}

      section {
  padding:10px 0 10px 20px;
  margin:0 0 30px;
}

      footer {
              margin: 0 0 0 30px;
      }

header ul, header p.view {
  position:static;
}

}

@media print, screen and (max-width: 480px) {

header ul li.download {
  display:none;
}

      footer {
              margin: 0 0 0 20px;
      }

      footer a{
              display:block;
      }

}

@media print {

body {
  padding:0.4in;
  font-size:12pt;
  color:#444;
}

}