/* Base */

 html {

   box-sizing: border-box;

 }

 *,

 *:before,

 *:after {

   box-sizing: inherit;

 }

body {

  font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #000;

  background-color: #f9f6ef;

  @include box-shadow(inset 0 3px 30px rgba(0,0,0,.7));

  text-shadow: 0 1px 3px rgba(0,0,0,.3);

  -webkit-font-feature-settings: "kern" 1;

  -moz-font-feature-settings: "kern" 1;

  -o-font-feature-settings: "kern" 1;

  font-feature-settings: "kern" 1;

  font-kerning: normal;

  margin: 0;

}

.clear {

  display: block;

}

.clear:after {

  content: " ";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

/* Sections */

header,

section,

footer {

  float: left;

  width: 100%;

  clear: both;

}

/* Header */

header {

  padding: 15px;

  background: #B1040E; //darken(#333, 3%);

  h1,

  nav { display: inline-block; }

  .flexbox {

    display: flex;

    height: 50px;

    & > * { margin: auto }

  }

  .logo {

    display: block;

    color: #fff;

    img { margin-top: -7px }

  }

  .search .svg-icons { display: none }

}

nav, .meta {

  ul {

    padding: 0;

    margin: 0;

    white-space: nowrap;

    display: inline-block;

  }

  li { display: inline-block; }

}

.meta ul {

  margin-left: 10px;

  li { vertical-align: middle; }

}

.main-nav, .meta {

  li {

    a {

      @include border-radius(5px);

      font-weight: 900;

      font-size: 0.75em;

      padding: 0.5em 1em;

      text-shadow: none;

      text-transform: uppercase;

      @include transition(all .25s);

      color: #fff;

      &:hover {

        background-color: #252525;

        @include box-shadow(inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1));

        text-shadow: 0 1px 3px rgba(0,0,0,.5);

      }

    }

    &.current {

      a {

        background-color: #fc0;

        color: #222;

        @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5));

        text-shadow: 0 1px 0 rgba(255,255,255,.3);

      }

    }

  }

}

.mobile-nav {

  padding: 0 5px;

  ul {

    overflow: hidden;

    width: 100%;

    display: table;

  }

  a {

    float: left;

    width: 100%;

    background-color: #333;

    color: #fc0;

    text-align: center;

    text-transform: uppercase;

    font-size: 0.625em;

    font-weight: 900;

    padding: 10px 5px;

    @include border-radius(5px);

  }

  li {

    display: table-cell;

    width: 20%;

    padding: 8px 2px;

  }

  .current {

    a {

      background-color: #fc0;

      color: #222;

      @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5));

      text-shadow: 0 1px 0 rgba(255,255,255,.3);

    }

  }

}

/*

 * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com

 * http://ben.balter.com/2014/03/13/pages-anchor-links/

 */

.header-link {

  position: relative;

  left: 0.5em;

  opacity: 0;

  font-size: 0.8em;

  @include transition(opacity 0.2s ease-in-out 0.1s);

}

h2:hover .header-link,

h3:hover .header-link,

h4:hover .header-link,

h5:hover .header-link,

h6:hover .header-link {

  opacity: 1;

}

@media (max-width: 580px) {

  header {

    .flexbox { height: auto }

    .logo img { margin-top: 0 }

  }

}

@media (max-width: 699px) {

  .searchbox { display: none }

}

@media (max-width: 768px) {

  .main-nav ul { text-align: right }

}

@media (max-width: 830px) {

  .main-nav {

    .show-on-mobiles { display: inline; }

    .hide-on-mobiles { display: none; }

  }

}

@media (max-width: 890px) {

  .meta { display: none; }

}

/* Footer */

footer {

  background-color: #8c1515;

  font-size: 16px;

  padding-bottom: 5px;

  color: #fff;

  margin-top: 40px;

  a {

    color: #fff;

    &:hover {

      img { opacity: 1; }

    }

  }

  .align-right {

    p { display: inline-block; }

  }

  img {

    display: inline-block;

    position: relative;

    top: 8px;

    margin-left: 5px;

    opacity: .8;

    padding: 1px;

    @include transition(opacity .2s);

  }

}

@media (max-width: 568px) {

  footer {

    .one-third p { margin-bottom: 0; }

    .two-thirds p { margin-top: -20px; }

  }

}

/* Intro */

.intro {

  .unit { padding: 10px 0 40px; }

  p {

    font-size: 1.75em;

    line-height: 1em;

    margin: 0;

  }

}

@media (min-width: 569px) {

  .intro p { font-size: 3.2em; }

}

/* Quickstart */

.quickstart {

  background-color: #175e54;

  color: #fff;

  margin: 60px 0;

  @include box-shadow(inset 0 3px 10px rgba(0,0,0,.4));

  .content { padding: 0; }

  h3 {

    font-size: 24px;

    line-height: 24px;

    margin-top: 20px;

    text-shadow: 0 1px 3px rgba(0,0,0,.8);

  }

  .code {

    font-size: 12px;

    display: block;

    margin: 0 0 -30px;

  }

}

@media (min-width: 768px) {

  .quickstart {

    .code {

      font-size: 18px;

      margin: -30px 0;

      float: right;

    }

    h3 {

      margin: 50px 0 0;

      text-align: center;

    }

  }

}

/* Code */

.quickstart {

  .code {

    display: block;

    padding: 0;

    font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;

    line-height: 1.3em;

    .title {

      display: block;

      text-align: center;

      margin: 0 20px;

      padding: 5px 0;

      @include border-radius(5px 5px 0 0);

      @include box-shadow(0 3px 10px rgba(0,0,0,.5));

      font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;

      color: #444;

      text-shadow: 0 1px 0 rgba(255,255,255,.5);

      background-color: #f7f7f7;

      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

      background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), color-stop(7%, #cfcfcf), to(#aaaaaa));

      background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%);

      background-image: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%);

      background-image: -o-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%);

      background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%);

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 );

      border-bottom: 1px solid #111;

    }

    .shell {

      padding: 20px;

      text-shadow: none;

      margin: 0 20px;

      background-color: #171717;

      @include border-radius(0 0 5px 5px);

      @include box-shadow(0 5px 30px rgba(0,0,0,.3));

    }

    .line {

      display: block;

      margin: 0;

      padding: 0;

      span { display: inline-block; }

    }

    .path {

      color: #87ceeb;

      @include user-select(none);

    }

    .prompt {

      color: #cd5c5c;

      -webkit-user-select: none;  /* Chrome all / Safari all */

      -moz-user-select: none;     /* Firefox all */

      -ms-user-select: none;      /* IE 10+ */

      -o-user-select: none;

      user-select: none;

    }

    .command { color: #f0e68c; }

    .output { color: #888; }

  }

}

/* Free Hosting */

.free-hosting {

  .pane {

    background-color: #3e3e3e;

    @include border-radius(10px);

    text-shadow: none;

    position: relative;

    padding: 0 20px 30px;

  }

  img {

    margin: -30px 0 0;

    width: 180px;

    height: 150px;

  }

  h2 { font-size: 28px; }

  p,

  a { font-size: 16px; }

  p { margin: .75em 0; }

}

@media (min-width: 768px) {

  .free-hosting {

    img {

      float: left;

      margin: -20px -30px -30px -50px;

      width: 300px;

      height: 251px;

    }

    .pane-content {

      margin-top: 35px;

      padding-right: 30px;

    }

    p,

    a { font-size: 18px; }

    .pane:after {

      content: " ";

      float: right;

      background: url(../img/footer-arrow.png) top left no-repeat;

      width: 73px;

      height: 186px;

      position: absolute;

      right: 0;

      bottom: -30px;

    }

  }

}

/* Article - Used for both docs and news */

article {

  background-color: #fefdfb;

  @include border-radius(10px);

  padding: 20px;

  margin: 0 10px;

  @include box-shadow(0 3px 10px rgba(0,0,0,.1));

  font-size: 16px;

}

@media (max-width: 480px) {

  article ul { padding-left: 20px; }

}

@media (max-width: 568px) {

  article { margin: 0; }

}

@media (min-width: 768px) {

  article {

    padding: 40px 40px 30px;

    font-size: 21px;

  }

}

/* Right-side nav - used by both docs and news */

aside {

  padding-top: 30px;

  h4 {

    text-transform: uppercase;

    font-size: 14px;

    font-weight: 700;

    padding: 0 0 10px 30px;

    margin-left: -30px;

    display: inline-block;

    border-bottom: 1px solid #c00;

  }

  ul {

    padding-left: 0;

    &:first-child { margin-top: 0; }

  }

  li {

    list-style-type: none;

    a {

      font-size: 16px;

      position: relative

    }

    &.current a:before {

      content: "";

      border-color: transparent transparent transparent #fefdfb;

      border-style: solid;

      border-width: 10px;

      width: 0;

      height: 0;

      position: absolute;

      top: 0;

      left: -30px;

    }

    &.current a {

        color: #8c1515;

    }

  }

}

/* Documentation */

.docs {

  article { min-height: 800px; }

  .content { padding: 0; }

}

.section-nav {

  text-align: center;

  padding-top: 40px;

  position: relative;

  background: url(../img/article-footer.png) top center no-repeat;

  margin: 40px -20px 10px;

  > div { width: 49.5%; }

  a,

  span {

    color: #fff;

    font-size: 16px;

    text-transform: uppercase;

    font-weight: 700;

    padding: 8px 12px 10px;

    @include border-radius(5px);

    /*border: 1px solid #333;*/

    @include box-shadow(0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5));

    background-color: #007c92;

  }

  a:hover {

    color: #fff;

    background-color: #928b81;

  }

  .next,

  .prev { position: relative; }

  .next:after,

  .prev:before {

    font-size: 36px;

    color: #222;

    font-weight: 900;

    text-shadow: 0 1px 0 rgba(255,255,255,.4);

    position: absolute;

    top: -7px;

  }

  .next:after {

    content: '\203A';

    right: 10px;

  }

  .prev:before {

    content: '\2039';

    left: 10px;

  }

  .prev,

  .prev:hover { padding-left: 30px; }

  .next,

  .next:hover { padding-right: 30px; }

  .disabled {

    opacity: .5;

    cursor: default;

  }

}

.improve {

  padding-top: 25px;

  font-size: 16px;

  a {

    color: #4d4f53;

  }

}

.docs-nav-mobile select {

  padding: 5px;

  width: 100%;

  font-size: 0.85em;

  color: #000;

  background: #ddd;

  border-color: transparent;

  @include border-radius(5px);

  &:focus {

    outline: none;

  }

  option {

    font-size: 0.9em;

    padding: 3px;

  }

}

/* News */

article h2:first-child { margin-top: 0; }

.post-category,

.post-meta {

  display: inline-block;

  vertical-align: middle;

  font-size: .8em;

}

.post-category {

  display: inline-block;

  margin-left: -30px;

  padding: 6px 10px 8px;

  padding-left: 50px;

  @include border-radius(0 5px 5px 0);

  position: relative;

  @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3));

  background-color: #9e2812;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d));

  background-image: -webkit-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: -moz-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );

  &:before {

    content: "";

    position: absolute;

    top: -10px;

    left: 0;

    border-color: transparent #6f0d0d #6f0d0d transparent;

    border-style: solid;

    border-width: 5px;

    width: 0;

    height: 0;

  }

}

.post-content img { max-width: 100% }

.label {

  float: left;

  text-transform: uppercase;

  font-weight: 700;

  text-shadow: 0 -1px 0 rgba(0,0,0,.5);

}

@media (max-width: 568px) {

  .post-category { padding-left: 30px; }

}

@media (min-width: 768px) {

  .post-category { margin-left: -50px; }

}

.avatar {

  @include border-radius(3px);

  display: inline-block;

  vertical-align: middle;

}

.post-meta {

  padding: 5px 0;

  color: #c0c0c0;

  font-weight: 600;

//  text-shadow: 0 -1px 0 #000;

}

.post-date,

.post-author { margin-left: 10px; }

.post-date { color:     #00505c }

.post-category { color:     #ffffff }

.news article + article {

  margin-top: -10px;

  @include border-radius(0 0 10px 10px);

  border-top: 1px solid            #F4F4F4;

  @include box-shadow(0 -1px 0         #F4F4F4);

}

/* Code Highlighting */

pre,

code {

  white-space: pre;

  display: inline-block;

  margin: 0;

  font: 14px/1.8em Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;

  padding: 0 0.5em;

  color: #000;

}

@media (min-width: 768px) {

  pre, code { font-size: 16px; }

}

.highlight,

p > pre,

p > code,

p > nobr > code,

li > code,

li> pre,

h5 > code,

.note > code {

  background-color:     #F9F6EF;

  color:     #2F2424;

  max-width: 100%;

  overflow-x: auto;

  vertical-align: middle;

  @include border-radius(5px);

  @include box-shadow(inset 0 1px 10px rgba(0,0,0,.1),

    0 1px 0 rgba(255,255,255,.3),

    0 -1px 0 rgba(0,0,0,.1));

}

.note code {

  background-color: #333;

  background-color: rgba(0,0,0,0.2);

  margin-left: 2.5px;

  margin-right: 2.5px;

  font-size: 0.8em;

}

.code-block {

  margin: 10px 0;

  code { background: none; }

}

.highlight {

  margin: 1em 0;

  width: 100%;

  overflow: auto;

}

pre.highlight { padding: 10px 0.5em; }

.highlighter-rouge .highlight {

  @extend .highlight;

  margin: 0;

}

/* HTML Elements */

h1, h2, h3, h4, h5, h6 { margin: 0; }

a {

  color: #006CB8;

  text-decoration: none;

  @include transition(all .25s);

  &:hover { color: #00548f; }

}

a.logo {

  color: #fff;

  text-decoration: none;

  @include transition(all .25s);

  &:hover { color:     #eaab00; }

}

strong { font-weight: 700; }

p { line-height: 1.5em; }

.left { float: left; }

.right { float: right; }

.align-right { text-align: right; }

.align-left { text-align: left; }

.align-center { text-align: center; }

/* Article HTML */

article {

  h2, h3, h4, h5, h6 { margin: 1em 0; }

  h4 { color: #555; }

  ul li {

    p { margin: 0; }

    blockquote { margin: 10px 0; }

  }

  ul li,

  ol li {

    line-height: 1.5em;

    margin-bottom: 0.5em;

  }

}

h5, h6 {

  font-size: 1em;

  font-style: italic;

}

blockquote {

  border-left: 2px solid #777;

  padding-left: 20px;

  font-style: italic;

  font-size: 18px;

  font-weight: 500;

}

/* Tables */

table {

  width: 100%;

  background-color: #f9f6ef;

  margin: .5em 0;

  @include border-radius(5px);

  @include box-shadow(0 1px 3px rgba(0,0,0,.3));

}

thead {

  @include border-top-left-radius(5px);

  @include border-top-right-radius(5px);

  color: #fff;

  background-color: #3a3a3a;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhM2EzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTFlMWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#3a3a3a), to(#1e1e1e));

  background-image: -webkit-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%);

  background-image: -moz-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%);

  background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%);

  background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 );

  th {

    position: relative;

    @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1));

    &:first-child {

      @include border-top-left-radius(5px);

    }

    &:last-child {

      @include border-top-right-radius(5px);

    }

  }

}

td { padding: .5em .75em; }

td p { margin: 0; }

th {

  text-transform: uppercase;

  font-size: 16px;

  padding: .5em .75em;

  text-shadow: 0 -1px 0 rgba(0,0,0,.9);

  color: #888;

}

tbody td {

  border-top: 1px solid #747474;

  border-top: 1px solid rgba(0,0,0,.1);

  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1));

  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);

  background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 );

  ul {

    padding-left: 1em;

  }

  p,

  ul {

    font-size: 16px;

    code { font-size: 14px; }

  }

}

code.option,

th .option,

code.filter,

th .filter {

  color: #50B600;

}

code.flag,

th .flag,

code.output,

th .output {

  color: #049DCE;

}

code.option,

code.flag,

code.filter,

code.output {

  margin-bottom: 2px;

}

/* Note types */

.note {

  margin: 30px 0;

  margin-left: -30px;

  padding: 20px 20px 24px;

  padding-left: 50px;

  @include border-radius(0 5px 5px 0);

  position: relative;

  @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3));

  background-color: #7e6d42;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35));

  background-image: -webkit-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);

  background-image: -moz-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);

  background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);

  background-image: linear-gradient(to bottom, #7e6d42 0%,#5c4e35 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );

}

@media (max-width: 568px) {

  .note { margin-right: -30px; }

}

@media (min-width: 768px) {

  .note { margin-left: -50px; }

}

.note {

  &:before {

    content: "";

    position: absolute;

    top: -10px;

    left: 0;

    border-color: transparent #222 #222 transparent;

    border-style: solid;

    border-width: 5px;

    width: 0;

    height: 0;

  }

  h5,

  p {

    margin: 0;

    color: #fff;

  }

  h5 {

    line-height: 1.5em;

    font-weight: 900;

    font-style: normal;

  }

  p {

    font-weight: 400;

    font-size: .75em;

  }

  &:after {

    content: '\2605';

    color: #eaab00;

    position: absolute;

    top: 14px;

    left: 14px;

    font-size: 28px;

    font-weight: 700;

    text-shadow: 0 -1px 0 rgba(0,0,0,.5);

  }

}

.info {

  background-color: #0389aa;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#0389aa), to(#00617f));

  background-image: -webkit-linear-gradient(top, #0389aa 0%, #00617f 100%);

  background-image: -moz-linear-gradient(top, #0389aa 0%, #00617f 100%);

  background-image: -o-linear-gradient(top, #0389aa 0%, #00617f 100%);

  background-image: linear-gradient(to bottom, #0389aa 0%,#00617f 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0389aa', endColorstr='#00617f',GradientType=0 );

}

.warning {

  background-color: #9e2812;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d));

  background-image: -webkit-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: -moz-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);

  background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 );

}

.unreleased {

  background-color: #cd9239;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(205,146,57,1)), to(rgba(162,117,40,1)));

  background-image: -webkit-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);

  background-image: -moz-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);

  background-image: -o-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);

  background-image: linear-gradient(to bottom, rgba(205,146,57,1) 0%,rgba(162,117,40,1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );

}

.info:before { border-color: transparent #00617f #00617f transparent; }

.warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; }

.unreleased:before { border-color: transparent #664719 #664719 transparent; }

.info:after {

  content: '\24D8';

  color: #fff;

  position: absolute;

  top: 15px;

  left: 15px;

  font-size: 28px;

  font-weight: 700;

  text-shadow: 0 -1px 0 rgba(0,0,0,.5);

}

.warning:after {

  content: '\203C';

  color: #eaab00;

  position: absolute;

  top: 15px;

  left: 15px;

  font-size: 32px;

  font-weight: 700;

  text-shadow: 0 -1px 0 rgba(0,0,0,.5);

}

.unreleased:after {

  content: '\2692';

  color: #2b2a12;

  position: absolute;

  top: 8px;

  left: 15px;

  font-size: 38px;

  font-weight: 700;

  text-shadow: 0 1px 0 rgba(255,255,255,.25);

}

/* Version badge */

.version-badge {

  margin-left: .25em;

  padding: 0.2em;

  font-size: .75em;

  font-weight: 400;

  background-color: #eaab00;

  color: #222;

  text-shadow: none;

  vertical-align: middle;

  border-radius: 3.75px;

}

.note {

  .version-badge {

    font-size: 0.9rem;

    padding: 0.1em 0.2em;

    background-color: rgba(0,0,0,0.2);

    color: #fff;

    box-shadow: inset 0 1px 10px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1),0 -1px 0 rgba(0,0,0,0.5);

  }

}

/* Responsive tables */

@media (max-width: 768px) {

  .mobile-side-scroller {

    overflow-x: scroll;

    margin: 0 -40px;

    padding: 0 10px;

  }

}

.show-on-mobiles {

  display: none;

}

@media screen and (max-width: 568px) {

  .show-on-mobiles {

    display: block !important;

  }

  a .show-on-mobiles {

    display: inline !important;

  }

}

.videoWrapper {

  position: relative;

  padding-bottom: 52.4%;

  padding-top: 25px;

  height: 0;

}

.videoWrapper iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

/* Helper class taken from Bootstrap.

   Hides an element to all devices except screen readers.

*/

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

.result {

  padding: 12px;

}

.image-description {

  margin: -20px 0 20px;

  padding: 10px 15px;

  font-size: 0.81em;

  text-align: justify;

  background: #5c5c5c;

  pre, code {

    font-size: 0.75em;

    background: #454545;

  }

}