@media screen {

  /* =============================================================================
     HTML5 display definitions
     ========================================================================== */

  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }


  /* =============================================================================
     Base
     ========================================================================== */

  /*
   * Sets box sizing to the border of the box. 
   */
  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

  /*
   * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
   * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
   */

  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

  html, button, input, select, textarea { font-family: sans-serif; color: #222; }

  body { margin: 0; font-size: 1em; line-height: 1.4; }

  /*
   * Remove text-shadow in selection highlight: h5bp.com/i
   * These selection declarations have to be separate
   * Also: hot pink! (or customize the background color to match your design)
   */

  ::-moz-selection { background: #3af; color: #fff; text-shadow: none; }
  ::selection { background: #3af; color: #fff; text-shadow: none; }


  /* =============================================================================
     Links
     ========================================================================== */

  a:hover, a:active, a:focus { outline: 0; }

.github {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  color: #222;
  font-size: 0.9em;
  }

.github a {text-decoration: none;}

.github img {
  height: 30%;
  margin: 0 0.4em;
  }

  .github a:link {color: #999;}
  .github a:visited {color: #999;}
  .github a:hover {color: #222;}
  .github a:active {color: #222;}
  /* =============================================================================
     Typography
     ========================================================================== */

  abbr[title] { border-bottom: 1px dotted; }

  b, strong { font-weight: bold; }

  blockquote { margin: 1em 2em; }

  dfn { font-style: italic; }

  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

  ins { background: #ff9; color: #000; text-decoration: none; }

  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

  /* Redeclare monospace font family: h5bp.com/j */
  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;}

  code {font-size: 80%; padding: 0 0.5em;}

  /* Improve readability of pre-formatted text in all browsers */
  pre { white-space: pre; word-wrap: normal; overflow: auto; margin:0; padding:1em 1em; border: 1px solid #eee;}

  pre code {padding: 0;}

  /* select button generated by codeblocks.js */
  .fa-align-left {opacity: 0.2;}
  .highlight:hover .fa-align-left {opacity: 1;}

  q { quotes: none; }
  q:before, q:after { content: ""; content: none; }

  small { font-size: 85%; }

  /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }


  /* =============================================================================
     Lists
     ========================================================================== */

  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  dd { margin: 0 0 0 40px; }
  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


  /* =============================================================================
     Embedded content
     ========================================================================== */

  /*
   * 1. Improve image quality when scaled in IE7: h5bp.com/d
   * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
   */

  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

  /*
   * Correct overflow not hidden in IE9
   */

  svg:not(:root) { overflow: hidden; }


  /* =============================================================================
     Figures
     ========================================================================== */

  figure { margin: 0; }


  /* =============================================================================
     Forms
     ========================================================================== */

  form { margin: 0; }
  fieldset { border: 0; margin: 0; padding: 0; }

  /* Indicate that 'label' will shift focus to the associated form element */
  label { cursor: pointer; }

  /*
   * 1. Correct color not inheriting in IE6/7/8/9
   * 2. Correct alignment displayed oddly in IE6/7
   */

  legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

  /*
   * 1. Correct font-size not inheriting in all browsers
   * 2. Remove margins in FF3/4 S5 Chrome
   * 3. Define consistent vertical alignment display in all browsers
   */

  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

  /*
   * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
   */

  button, input { line-height: normal; }

  /*
   * 1. Display hand cursor for clickable form elements
   * 2. Allow styling of clickable form elements in iOS
   * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
   */

  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

  /*
   * Re-set default cursor for disabled elements
   */

  button[disabled], input[disabled] { cursor: default; }

  /*
   * Consistent box sizing and appearance
   */

  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

  /*
   * Remove inner padding and border in FF3/4: h5bp.com/l
   */

  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

  /*
   * 1. Remove default vertical scrollbar in IE6/7/8/9
   * 2. Allow only vertical resizing
   */

  textarea { overflow: auto; vertical-align: top; resize: vertical; }

  /* Colors for form validity */
  input:valid, textarea:valid {  }
  input:invalid, textarea:invalid { background-color: #f0dddd; }


  /* =============================================================================
     Tables
     ========================================================================== */

/* from Bret Terpstra's Marked style */
/* https://github.com/ttscoff/MarkedCustomStyles/blob/master/default_styles/swiss.css */

col, colgroup, table, tbody, td, tfoot, th, thead, tr {
  border-spacing: 0; }

table {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-collapse: collapse;
  display: table;
  empty-cells: hide;
  margin: -1px 0 1.3125em;
  padding: 0;
  table-layout: fixed; }

col {
  display: table-column; }

colgroup {
  display: table-column-group; }

tbody {
  display: table-row-group; }

tfoot {
  display: table-footer-group; }

thead {
  display: table-header-group; }

td, th {
  display: table-cell; }

tr {
  display: table-row; }

table th, table td {
  font-size: 1.1em;
  line-height: 23px;
  padding: 0 1em; }

table thead {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

table tbody {
  background: rgba(0, 0, 0, 0.05); }

table tfoot {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.2); }

  html {
      border-top: 1em solid rgba(0,0,0,0.05);
      margin:0; padding:0;
  }

  body {
      border-top: 1px solid rgba(0,0,0,0.1);
      font-family: 'Lato', Verdana, sans-serif;
      color: #555;
      padding: 2em;
       
  }


  a:link {color: #38c;}
  a:visited {color: #39a;}
  a:hover {color: #555;}
  a:active {color: #555;}

  h1,h2,h3 {
    font-family:'Crete Round', serif;
    text-align:center;
    font-weight:normal;
  }

  h1 {
    font-size: 2em;
  }

  h1 a,
  h2 a,
  h3 a {
    text-decoration:none;
  }

  h1 a:link { color: #38c; }
  h1 a:visited {color: #39a; }

  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    margin-top: 2em;
  }

  img {
    max-width: 100%;
  }

  form {
    font-size:0.9em;
    color: #555;
  }

  .navigation {
    list-style:none;
    padding-left:0;
  }

  .pager {
    overflow:hidden;
    zoom:1;
  }

  .pager li {
    float:left;
    width: 48%;
  }

  .pager li.next {
    float:right;
    text-align:right;
  }

  .pager a {
    text-decoration:none;
  }

  .kicker {
    font-size:0.8em;
    margin-bottom:0;
    color: #999;
  }

  .kicker + * {
    margin-top:0;
  }

  .byline {
    text-align:center;
    margin:0;
    color: #777;
    font-weight: 700;
  }

  /*Editor's Comments during Review */
  .editor{color: red;}

  /* first instance of a technical term */
  .tech {font-style: italic;}

  /* filenames, file paths, menu paths; variable names, function names, parameters; titles of publications */
  .filename, .var, .pub {font-style: italic;}

  /* words that are part of a programming language's code. eg, if, for, while, etc */
  .reserved {font-family: monospace;}

  /* a value the user has to input themselves. */
  .userinput {font-family: monospace;}

  /* Contain floats: h5bp.com/q */
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { *zoom: 1; }

  header[role="banner"] {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #eee;
  }

  header[role="banner"] h1 {
    font-size: 1.5em;
  }

  header[role="banner"] h1 a {
    color: #555;
  }
  
  article:not(:first-child):before {
      content: " — ··· —";
      display:block;
      color: rgba(0,0,0,0.2);
      text-align:center;
      margin: 1em 0;
  }

  article .kicker {
    text-align:center;
  }

  article figure {
    margin:2em 0;
    text-align:center;
    display:block;
  }

  article figure img {
    margin-bottom: 0.5em;
  }

  article figcaption {
    font-size:0.8em;
    color: #777;
  }

  .credits {
    list-style:none;
    padding-left:0;
    text-align:center;
    font-style:italic;
    font-size: 90%;
  }

  .post-info h2 {
    font-family:'Crete Round', serif;
    text-align:left;
    font-weight:normal;
	margin: 0.25em 140px;
  }

  .post-info .kicker {
    text-align:left;
	margin: 0.25em 140px;
  }

  .author-info,
  .credits {
    border:1px dotted #ccc;
    border-width: 1px 0;
    margin: 2em 0;
    padding: 0.5em 0;
    overflow:hidden;
    *zoom:1;
  }

  .author-picture {
    float:left;
  }

  .author-name,
  .author-description,
  .all-posts {
    display:block;
    margin: 0.25em 140px;
  }

  .contact-box {
    display: block;
	width: 100%;
	clear: both;
  }

  .author-name {
    font-weight: 600;
    color: #999;
  }

  .author-description p,
  .all-posts {
    font-size:0.8em;
  }
  
  .additional ul {
    list-style:none;
    padding-left:0;
    margin-left:0;
    text-align:center;
    font-size: 0.9em;
  }

  .additional ul li {
    display:inline;
  }

  .additional li:not(:first-child):before {
    content: " · ";
    color: #999;
  }

  .additional a {
    text-decoration:none;
  }

  .gist {
    margin:2em 0;
  }

  .gist .gist-meta {
    font-size: 0.6em !important;
    padding: 10px 20px !important;
    color: #999 !important;
  }

  .gist .line_numbers span {
    display:none;
  }

  .avatar {
    float: left;
	margin: 0 15px 15px 0;
	width: 100px;
  }
  .toc-author {
    display: block;
	float: right;
	font-size: 0.8em;
  }

  .lessons-list ul {
    list-style:none;
    padding-left:0;
  }

  .lessons-list li {
    margin-bottom:1em;
  }

  .lessons-list li a.permalink {
    text-decoration:none;
    font-weight:bold;
  }

  .lessons {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    zoom:1;
  }

  .lessons > li {
    margin-bottom:2em;
    font-size: 1.1em;
    font-weight:bold;
  }

  .lessons > li > a {
    text-decoration:none;
    display:block;
    margin-bottom:0.25em;
  }

  .lessons ul {
    margin:0;
  }

  .lessons > li > ul {
    font-size: 0.75em;
    font-weight:normal;
    padding-left: 1.25em;
  }

  section.category {
    overflow:hidden;
    zoom:1;
  }

  section.category + section {
    border-top: 1px dotted #ccc;
    padding-top: 2em;
  }

  section.category h2 {
    margin-top:0;
    float:left;
    width: 48%;
    text-align:left;
  }

  section.category .lessons {
    float:right;
    width: 48%;
    clear:right;
  }
  article footer {
    overflow:hidden;
    zoom:1;
  }

  article .pager {
    border-bottom: 1px dotted #ccc;
    padding-top:1em;
    padding-bottom:2em;
    margin-bottom: 1em;
  }

  article .previous {
    float:left;
    width: 48%;
    text-align:left;
  }

  article .previous .kicker {
    text-align:left;
    margin:0;
  }

  article .next {
    float:right;
    width: 48%;
    text-align:right !important;
  }

  article .next .kicker {
    text-align:right;
    margin:0;
  }

  article .pager a {
    text-decoration:none;
    font-weight: bold;
  }

  .syntaxhighlighter {
    border: 1px solid #ccc;
    padding: 1em 0;
  }

  /* This is ridiculous. Thanks syntaxhighlighter. */
  .syntaxhighlighter table tbody td {
    font-size: 85% !important;
  }

  #respond {
    clear:both;
    margin-top:4em;
  }

  .commentlist,
  .commentlist ul {
    list-style:none;
  }

  .commentlist {
    font-size:0.9em;
    padding-left:0;
  }

  .commentlist > li+li {
    border-top:1px solid #eee;
  }

  .commentlist li {
    background: #fafafa;
    padding: 1em;
  }

  .commentlist li li {
    background: rgba(255,255,255,0.5);
  }

  .commentlist img.avatar {
    float:right;
    margin-left: 1em;
  }

  .fa {
    margin-top: 0.4em;
    margin-right: 0.4em;
  }

  a:link .fa {color: #999;}
  a:visited .fa {color: #999;}
  a:hover .fa {color: #222;}
  a:active .fa {color: #222;}

  .commentlist .says,
  .commentmetadata {
    display:none;
  }

  .commentlist cite {
    font-style:normal;
    font-weight:bold;
  }

  .commentlist .reply {
    text-align:right;
    font-size:0.9em;
    margin-bottom:1em;
  }

  footer[role="contentinfo"] {
    text-align:center;
    margin-top: 2em;
    border-top: 1px solid #eee;
  }

  footer[role="contentinfo"] p {
    font-size: 0.9em;
    color: #999;
  }

  #logos {
    overflow:hidden;
    zoom:1;
    padding-top: 2em;
    margin-top: 1em;
    border-top: 1px solid #eee;
  }

  #logos a {
    display:block;
    float:left;
    width: 35%;
  }

  #logos a:link,
  #logos a:visited {
    opacity: 0.75;
  }

  #logos a:hover,
  #logos a:focus,
  #logos a:active {
    opacity: 1;
  }


  #logos #rrchnm {
    float:right;
  }

}

@media screen and (min-width: 480px) {

  body {
    font-size:120%;
  }

  .unavailable header[role="banner"],
  .unavailable div[role="main"] {
    max-width: 480px;
    margin-left:auto;
    margin-right:auto;
  }

}

@media screen and (min-width: 700px) {

  body {
    position:relative;
  }

  header[role="banner"],
  div[role="main"],
  footer[role="contentinfo"] {
    max-width: 700px;
    margin-left:auto;
    margin-right:auto;
  }

}

@media screen and (min-width: 1000px) and (min-height: 500px) {

  .single-lesson .pager {
    opacity: 0.5;
  }

  .single-lesson .pager:hover {
    opacity: 1;
  }

  .single-lesson .previous,
  .single-lesson .next {
    display:block;
    position:fixed !important;
    width: 100px;
    top: 275px;
    font-size: 80%;
  }

  .single-lesson .previous {
    margin-left: -160px;
  }
  .single-lesson .next {
    margin-left: 760px;
  }

}

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  
}