body {
    margin: 0;
    font-family: sans-serif;
}

.kss-section {
}

.kss-section + .kss-section {
  margin-top: 60px;
}

.kss-title {
  margin: 1rem 0;
  line-height: 1em;
  color: #ccc;
}

h1.kss-title {font-size: 1em;}
h2.kss-title {font-size: 1em;}
h3.kss-title {font-size: 1em;}
h4.kss-title {font-size: 1em;}

.kss-description {
  color: #ccc;
  font-size: 0.875em;
  line-height: 1.6em;
}

.kss-pattern__header {
  border-bottom: 1px dotted #ccc;
  margin-bottom: 2em;
}

.kss-code-toggle {
  float: right;
  color: #ccc;
}

.kss-pattern__header:hover .kss-description,
.kss-pattern__header:hover .kss-title,
.kss-pattern__header:hover .kss-code-toggle {
  color: #000;
}



.kss-sidebar {
    box-sizing: border-box;
    padding: 0.875em;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    color: #444;
    background: #ccc;
    overflow-y: auto;
}

.kss-main-wrap {
    margin-left: 280px;
    box-sizing: border-box;
}

.kss-main {
    box-sizing: border-box;
    padding: 1rem 2em;
}

.kss-link,
.kss-nav__menu-link {
  text-decoration: none;
  color: currentColor;
}

.kss-nav__menu-link:hover {
  text-decoration: none;
}

.kss-nav__menu-link {
  font-size: 0.875em;
}

.kss-source,
.kss-markup {
  margin: 1rem 0;
}

.kss-source summary:focus,
.kss-markup summary:focus {
  outline: 0;
  border: 0;
}

.kss-source > summary,
.kss-markup > summary {
  margin-bottom: 14px;
  font-size: 14px;
  color: #999;
}

.kss-modifier__heading {
  display: block;
  font-size: 14px;
  color: #999;
  margin: 1em 0;
  padding: 1em 0;
}

.kss-modifier__default-name,
.kss-modifier__name,
.kss-parameters__title {
  clear: both;
  font-weight: bold;
  font-size: 14px;
  color: #999;
  margin: 1em 0;
}

.kss-modifier__description {
  color: #999;
  font-weight: 400;
}


.kss-markup pre {
  padding: 1em;
  background: #F0F8FF;
  overflow-x: auto;
  font-size: 14px;
}

.kss-modifier__wrapper {
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.kss-nav__menu {
  padding: 0;
  list-style: none;
}

.kss-nav__menu-child {
  padding: 0 0 0 1em;
  list-style: none;
}

.kss-nav__menu-link {
  display: block;
  padding: 0.5em 0;
  border-bottom: 1px dotted #999;
}

.kss-nav__menu-link:hover {
  background: #ddd;
}

.kss-parameters {
  padding: 0;
  list-style: none;
}

.kss-parameters__item + .kss-parameters__item {
  margin-top: 1em;
}

.kss-parameters__name,
.kss-parameters__description {
  display: inline-block;
}

.kss-parameters__name > code {
  background: #F0F8FF;
  margin-right: 1em;
}

.kss-nav__ref {
  color: #999;
}

.kss-section {
  overflow: visible;
}

.kss-section::after {
    display: block;
    clear: both;
    content: '';
}


.kss-pattern {
  box-sizing: border-box;
}

.kss-pattern-code {
  display: none;
  box-sizing: border-box;
}

.kss-pattern-code.active {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 280px;
  box-sizing: border-box;
  padding: 4em;
  overflow-y: auto;
  background: white;
  z-index: +99;
}

.kss-source,
.kss-markup {
  color: #ccc;
  font-size: 0.875em;
}

.kss-pattern-code:hover .kss-source,
.kss-pattern-code:hover .kss-markup {
  color: #000;
}

@media (min-width: 1024px) {
  .kss-pattern {
    padding-right: 1em;
    width: 100%;
    float: left;
  }
}

.kss-nav__menu-link {
  font-weight: normal;
}

.kss-nav__menu-link.kss-design__link {
  font-weight: bold;
}

.kss-nav__menu-link.kss-design__link::before {
  content: '→';
}

// // ------------------------------------------------------------------------------
// //   Variables - Colors, Fonts, etc.
// // ------------------------------------------------------------------------------
// $kss-colors-background    : #fff;
//
// $kss-colors-foreground    : #444;
// $kss-colors-heading       : #111;
// $kss-colors-quotes        : #666;
//
// $kss-colors-link          : #0645ad;
// $kss-colors-link-visited  : #0645ad;
// $kss-colors-link-hover    : lighten($kss-colors-link, 20%);
// $kss-colors-link-active   : #faa700;
//
// $kss-font-body            : Helvetica, 'Helvetica Neue', Arial, sans-serif;
// $kss-font-code            : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
//
// $kss-font-size            : 16px;
// $kss-vertical-rhythm      : $kss-font-size * 1.5;
//
// // ------------------------------------------------------------------------------
// // Wrap all of this builder's base HTML styling inside a .kss-style selector.
// // ------------------------------------------------------------------------------
//
// .kss-style {
//   color: $kss-colors-foreground;
//   font-family: $kss-font-body;
//   font-size: $kss-font-size;
//   line-height: $kss-vertical-rhythm;
//
//   a {
//     color: $kss-colors-link;
//     text-decoration: none;
//     transition-property: color;
//     transition-duration: 0.5s;
//
//     &:visited { color: $kss-colors-link-visited; }
//     &:hover,
//     &:focus   { color: $kss-colors-link-hover;   }
//     &:active  { color: $kss-colors-link-active;  }
//
//     &:hover,
//     &:active {
//       outline: 0;
//     }
//   }
//
//   p {
//     margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0;
//   }
//
//   h1, h2, h3, h4, h5, h6 {
//     margin: $kss-vertical-rhythm 0 0 0;
//     font-family: $kss-font-body;
//     color: $kss-colors-heading;
//     line-height: 1.15em;
//   }
//
//   h4, h5, h6 {
//     font-weight: bold;
//   }
//
//   h1 { font-size: $kss-font-size * 2.5;   }
//   h2 { font-size: $kss-font-size * 2.25;  }
//   h3 { font-size: $kss-font-size * 2.125; }
//   h4 { font-size: $kss-font-size * 2;     }
//   h5 { font-size: $kss-font-size * 1.875; }
//   h6 { font-size: $kss-font-size * 1.75;  }
//
//   blockquote {
//     color: $kss-colors-quotes;
//     margin: 0;
//     padding-left: $kss-vertical-rhythm;
//     border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid;
//   }
//
//   hr {
//     display: block;
//     height: 2px;
//     border: 0;
//     border-top: 1px solid lighten($kss-colors-foreground, 60%);
//     border-bottom: 1px solid darken($kss-colors-background, 10%);
//     margin: $kss-vertical-rhythm 0;
//     padding: 0;
//   }
//
//   pre, code, kbd, samp {
//     font-family: $kss-font-code;
//     color: mix($kss-colors-foreground, $kss-colors-heading, 50%);
//     font-size: 1em;
//   }
//
//   pre {
//     white-space: pre;
//     overflow: scroll;
//   }
//
//   ins {
//     color: $kss-colors-heading;
//     background: #ff9;
//     text-decoration: none;
//   }
//
//   mark {
//     color: $kss-colors-heading;
//     background: #ff0;
//     font-weight: bold;
//   }
//
//   sub, sup {
//     font-size: 75%;
//     line-height: 0;
//     position: relative;
//     vertical-align: baseline;
//   }
//   sup { top: -0.5em;     }
//   sub { bottom: -0.25em; }
//
//   ul, ol {
//     margin: $kss-vertical-rhythm 0;
//     padding: 0 0 0 $kss-vertical-rhythm;
//   }
//   li p:last-child {
//     margin: 0;
//   }
//   dd {
//     margin: 0 0 0 $kss-vertical-rhythm;
//   }
//
//   img {
//     max-width:100%;
//     border: 0;
//     -ms-interpolation-mode: bicubic;
//     vertical-align: middle;
//   }
//
//   table {
//     border-collapse: collapse;
//     border-spacing: 0;
//   }
//   td {
//     vertical-align: top;
//   }
//
//   @media print {
//     a, a:visited { text-decoration: underline; }
//     hr { height: 1px; border:0; border-bottom:1px solid black; }
//     a[href]:after { content: " (" attr(href) ")"; }
//     a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
//     abbr[title]:after { content: " (" attr(title) ")"; }
//     pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
//     tr, img { page-break-inside: avoid; }
//     img { max-width: 100% !important; }
//     p, h2, h3 { orphans: 3; widows: 3; }
//     h2, h3 { page-break-after: avoid; }
//   }
// }
//
// // ------------------------------------------------------------------------------
// // Layout and page background
// // ------------------------------------------------------------------------------
//
// #kss-node {
//   margin: 0;
//   padding: 20px;
//   background: #fff;
//
//   &.kss-fullscreen-mode {
//     .kss-sidebar,
//     .kss-section:not(.is-fullscreen),
//     .kss-github {
//       display: none;
//     }
//   }
//
//   @media screen and (min-width: 769px) {
//     padding: 0;
//
//     .kss-main,
//     .kss-sidebar {
//       float: left;
//       margin-right: -100%;
//       box-sizing: border-box;
//     }
//   }
//
//   .kss-main {
//     width: 100%;
//     margin: 0 auto;
//
//     @media screen and (min-width: 769px) {
//       width: 80%;
//       margin-left: 20%;
//       padding: 0 20px 0 30px;
//     }
//   }
//
//   .kss-sidebar {
//     border-bottom:1px solid #ddd;
//
//     @media screen and (min-width: 769px) {
//       position: fixed;
//       width: 20%;
//       height: 100%;
//       overflow: auto;
//       padding: 0 10px 0 20px;
//       border-bottom: 0;
//       background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
//       background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
//       background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
//       background-image: url(noise-low.png), radial-gradient(#fff, #eee);
//       box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7);
//     }
//   }
// }
//
// // ------------------------------------------------------------------------------
// // Sidebar-area components
// // ------------------------------------------------------------------------------
//
// #kss-node {
//
//   .kss-doc-title {
//     margin: 0;
//
//     @media screen and (min-width: 769px) {
//       font-size: 1.5em;
//     }
//   }
//
//   .kss-header,
//   .kss-nav {
//     @media screen and (min-width: 769px) {
//       margin-top: 2em;
//     }
//   }
//
//   .kss-nav__menu {
//     margin-top: ($kss-vertical-rhythm/2);
//     margin-bottom: ($kss-vertical-rhythm/2);
//     padding: 0;
//     list-style-type: none;
//   }
//
//   .kss-nav__menu-item {
//     display: inline-block;
//     padding-right: $kss-vertical-rhythm;
//
//     @media screen and (min-width: 769px) {
//       display: list-item;
//       padding-right: 0;
//     }
//   }
//
//   .kss-nav__menu-link {
//     position: relative;
//     display: inline-block;
//
//     &:before {
//       @media screen and (min-width: 769px) {
//         content: ' ';
//         position: absolute;
//         left: -20px;
//         width: 0;
//         height: 100%;
//         background-color: rgba(#000, 0);
//       }
//     }
//
//     &.is-in-viewport:before {
//       background-color: #000;
//       width: 5px;
//       transition: background-color .4s, width .6s;
//     }
//   }
//
//   .kss-nav__menu-child {
//     display: none;
//
//     @media screen and (min-width: 769px) {
//       display: block;
//       list-style-type: none;
//       margin: 0;
//       padding: 0;
//
//       // @TODO: The ul is output even when there are no children. Fix this, so
//       // we can put these :first-child and :last child styles back on the ul.
//       li:first-child {
//         margin-top: 10px;
//         border-top: 1px solid #ccc;
//         padding: 10px 0 0;
//       }
//
//       li:last-child {
//         margin-bottom: 10px;
//         border-bottom: 1px solid #ccc;
//         padding: 0 0 10px;
//       }
//     }
//   }
//
//   .kss-nav__ref {
//     color: #333;
//     font-weight: bold;
//
//     &:after {
//       content: ' ';
//     }
//   }
//   .kss-nav__ref-child {
//     font-weight: normal;
//   }
// }
//
// // ------------------------------------------------------------------------------
// // Content-area components
// // ------------------------------------------------------------------------------
//
// #kss-node {
//
//   .kss-section {
//     margin-bottom: ($kss-vertical-rhythm * 2);
//
//     // "fullscreen" styles copied from Mozilla's default stylesheet.
//     &.is-fullscreen {
//       position: fixed !important;
//       top: 0 !important;
//       left: 0 !important;
//       right: 0 !important;
//       bottom: 0 !important;
//       width: 100% !important;
//       height: 100% !important;
//       margin: 0 !important;
//       min-width: 0 !important;
//       max-width: none !important;
//       min-height: 0 !important;
//       max-height: none !important;
//       box-sizing: border-box !important;
//       object-fit: contain !important;
//       transform: none !important;
//       // Turn on scrolling if needed.
//       overflow: auto !important;
//       padding: 20px;
//     }
//   }
//
//   .kss-title {
//     margin-bottom: 0;
//   }
//   .is-fullscreen .kss-title {
//     margin-top: 0;
//   }
//   .kss-title__ref {
//     display: block;
//     font-size: $kss-font-size;
//     line-height: $kss-font-size;
//     color: #666;
//
//     &:before {
//       content: 'Section ';
//     }
//   }
//   .kss-title__permalink {
//     display: block;
//     color: #000;
//     text-decoration: none;
//
//     &:hover,
//     &:focus,
//     &:active {
//       color: $kss-colors-link;
//
//       @media screen and (min-width: 607px) {
//         .kss-title__permalink-hash {
//           display: inline;
//         }
//       }
//     }
//   }
//   .kss-title__permalink-hash {
//     display: none;
//     color: #ccc;
//   }
//
//   .kss-toolbar {
//     margin: 6px 0 24px;
//     display: inline-block;
//     border: 1px solid #eee;
//     background-color: #f9f9f9;
//     border-right-color: #e0e0e0;
//     border-bottom-color: #e0e0e0;
//     line-height: 1;
//     padding: 3px;
//
//     a {
//       box-sizing: content-box;
//       display: inline-block;
//       width: 16px;
//       height: 16px;
//       padding: 3px;
//       vertical-align: top;
//       // Tooltip wrapper styles:
//       position: relative;
//       overflow: visible;
//
//       + a {
//         margin-left: 6px;
//       }
//
//       .kss-toolbar__icon-fill {
//         fill: #ccc;
//       }
//
//       svg.on {
//         display: none;
//       }
//
//       &:focus,
//       &:hover {
//         border-color: #000;
//
//         .kss-toolbar__icon-fill {
//           fill: #000;
//         }
//       }
//     }
//   }
//   .kss-toolbar__tooltip {
//     position: absolute;
//     z-index: 1;
//     display: inline-block;
//     bottom: 100%;
//     left: -10px;
//     margin-bottom: 5px;
//     border: solid 1px #666;
//     padding: 8px 10px 6px;
//     box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
//     white-space: nowrap;
//     color: #000;
//     background: #fff;
//     cursor: help;
//     opacity: 0;
//     transition: opacity 0.25s;
//     // Visually hidden
//     height: 1px;
//     width: 1px;
//     overflow: hidden;
//     clip: rect(1px, 1px, 1px, 1px);
//     word-wrap: normal;
//
//     // Solid grey triangle.
//     &:before,
//     &:after {
//       content: '';
//       position: absolute;
//       bottom: -8px;
//       left: 15px;
//       width: 0;
//       height: 0;
//       border-width: 7px 5px 0;
//       border-color: #666 transparent;
//       border-style: solid;
//     }
//
//     // White triangle knock-out.
//     &:after {
//       bottom: -6px;
//       border-top-color: #fff;
//     }
//   }
//   a:focus,
//   a:hover {
//     > .kss-toolbar__tooltip {
//       opacity: 1;
//       // Visually hidden off
//       clip: auto;
//       height: auto;
//       width: auto;
//       overflow: visible;
//     }
//   }
//   .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
//   &.kss-guides-mode .kss-toolbar a[data-kss-guides],
//   &.kss-markup-mode .kss-toolbar a[data-kss-markup] {
//     border-color: #666;
//     background-color: #666;
//
//     .kss-toolbar__icon-fill {
//       fill: #fff;
//     }
//
//     svg.on {
//       display: block;
//     }
//
//     svg.off {
//       display: none;
//     }
//   }
//
//   .kss-parameters {
//     display: table;
//     list-style-type: none;
//     margin-top: 0;
//     margin-left: 0;
//     padding-left: 0;
//   }
//   .kss-parameters__title {
//     font-weight: bold;
//   }
//   .kss-parameters__item {
//     display: table-row;
//   }
//   .kss-parameters__name {
//     display: table-cell;
//     padding-right: 20px;
//     white-space: nowrap;
//   }
//   .kss-parameters__description {
//     display: table-cell;
//   }
//   .kss-parameters__default-value code {
//     white-space: nowrap;
//   }
//
//   .kss-modifier__wrapper {
//     border: 1px solid #ccc;
//     padding: 0 10px 10px;
//   }
//   .is-fullscreen .kss-modifier__wrapper {
//     // Un-do padding on .kss-section.
//     margin-left: -20px;
//     margin-right: -20px;
//     // Remove all padding on the wrapper
//     padding-left: 0;
//     padding-right: 0;
//     border: none;
//   }
//   .kss-modifier__heading {
//     margin: 0 -10px 10px -10px;
//     padding: 10px;
//     border-bottom: 1px solid #ccc;
//     background-color: #eee;
//     font-weight: bold;
//   }
//   .is-fullscreen .kss-modifier__heading {
//     margin: 0 20px 10px;
//     border: 1px solid #ccc;
//   }
//   .kss-modifier__default-name {
//     font-weight: bold;
//     margin-bottom: ($kss-vertical-rhythm / 2);
//   }
//   .is-fullscreen .kss-modifier__default-name {
//     margin-left: 20px;
//     margin-right: 20px;
//   }
//   .kss-modifier__name {
//     float: left;
//     padding-right: 10px;
//     font-weight: bold;
//   }
//   .is-fullscreen .kss-modifier__name {
//     margin-left: 20px;
//   }
//   .kss-modifier__description {
//     margin-bottom: ($kss-vertical-rhythm / 2);
//   }
//   .is-fullscreen .kss-modifier__description {
//     margin-right: 20px;
//   }
//   .kss-modifier__example {
//     clear: left;
//     border: 2px dashed transparent;
//     position: relative; // Contain the example's absolute positioning.
//     z-index: 0; // Establishes a local stacking context.
//     margin: -2px -2px ($kss-vertical-rhythm - 2px);
//
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
//   &.kss-guides-mode .kss-modifier__example,
//   &.kss-guides-mode .kss-modifier__example-footer {
//     &:before,
//     &:after {
//       z-index: -1;
//       box-sizing: border-box;
//       content: '';
//       position: absolute;
//       width: 5px;
//       height: 5px;
//       border: 2px solid #000;
//     }
//   }
//   &.kss-guides-mode .kss-modifier__example {
//     border-color: #000;
//
//     &:before {
//       top: -5px;
//       left: -5px;
//       border-top: 0;
//       border-left: 0;
//     }
//     &:after {
//       top: -5px;
//       right: -5px;
//       border-top: 0;
//       border-right: 0;
//     }
//   }
//   &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example {
//     &:before {
//       left: auto;
//       right: 0;
//     }
//     &:after {
//       right: auto;
//       left: 0;
//     }
//   }
//   .kss-modifier__example-footer {
//     clear: both;
//   }
//   &.kss-guides-mode .kss-modifier__example-footer {
//     &:before {
//       bottom: -5px;
//       left: -5px;
//       border-bottom: 0;
//       border-left: 0;
//     }
//     &:after {
//       bottom: -5px;
//       right: -5px;
//       border-right: 0;
//       border-bottom: 0;
//     }
//   }
//   &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer {
//     &:before {
//       left: auto;
//       right: 0;
//     }
//     &:after {
//       right: auto;
//       left: 0;
//     }
//   }
//
//   .kss-markup {
//     margin: $kss-vertical-rhythm 0;
//     border: 1px solid #ccc;
//
//     &[open] summary {
//       border-bottom: 1px solid #ccc;
//       margin-bottom: 3px;
//     }
//
//     summary {
//       padding-left: 10px;
//     }
//
//     pre {
//       margin: 0;
//     }
//   }
//
//   .kss-source {
//     font-size: 80%;
//   }
//
//   .kss-github {
//     display:none;
//
//     @media screen and (min-width: 501px) {
//       display: block;
//       position: absolute;
//       top: 0;
//       right: 0;
//     }
//
//     img {
//       border: 0;
//     }
//   }
//
//   // ------------------------------------------------------------------------------
//   // prettify.js styles
//   // ------------------------------------------------------------------------------
//
//   /* SPAN elements with the classes below are added by prettyprint. */
//   .pln { color: #000 }  /* plain text */
//
//   .str { color: #080 }  /* string content */
//   .kwd { color: #008 }  /* a keyword */
//   .com { color: #800 }  /* a comment */
//   .typ { color: #606 }  /* a type name */
//   .lit { color: #066 }  /* a literal value */
//   /* punctuation, lisp open bracket, lisp close bracket */
//   .pun, .opn, .clo { color: #660 }
//   .tag { color: #008 }  /* a markup tag name */
//   .atn { color: #606 }  /* a markup attribute name */
//   .atv { color: #080 }  /* a markup attribute value */
//   .dec, .var { color: #606 }  /* a declaration; a variable name */
//   .fun { color: red }  /* a function name */
//
//   /* Use higher contrast and text-weight for printable form. */
//   @media print, projection {
//     .str { color: #060 }
//     .kwd { color: #006; font-weight: bold }
//     .com { color: #600; font-style: italic }
//     .typ { color: #404; font-weight: bold }
//     .lit { color: #044 }
//     .pun, .opn, .clo { color: #440 }
//     .tag { color: #006; font-weight: bold }
//     .atn { color: #404 }
//     .atv { color: #060 }
//   }
//
//   /* Specify class=linenums on a pre to get line numbering */
//   ol.linenums {
//     margin: 0;
//     padding: 0 0 3px 0;
//     list-style-type: none;
//
//     li {
//       min-height: $kss-vertical-rhythm;
//       border-bottom: 1px solid #eee;
//       padding: 0 10px;
//       background: #fff;
//
//       &:first-child {
//         padding-top: 3px;
//       }
//     }
//     /* Alternate shading for lines */
//     li.L0,
//     li.L2,
//     li.L4,
//     li.L6,
//     li.L8 {
//       background: #fcfcfc;
//     }
//   }
// }