.patternLibrary {
  display: table;
  width: 100%;
}
.patternLibrary_navigation {
  display: table-cell;
  width: 300px;
  background: #efefef;
  padding: 20px;
}
.patternLibrary_article {
  display: table-cell;
  width: calc(-200%);
  padding: 20px;
}
.patternLibrary_snippet {
  resize: vertical;
  overflow: auto;
  height: 250px;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .patternLibrary {
    display: block;
  }
  .patternLibrary_navigation,
  .patternLibrary_article {
    display: block;
    width: 100%;
  }
}
pre .str,
code .str {
  color: #65B042;
}
/* string  - green */
pre .kwd,
code .kwd {
  color: #E28964;
}
/* keyword - dark pink */
pre .com,
code .com {
  color: #AEAEAE;
  font-style: italic;
}
/* comment - gray */
pre .typ,
code .typ {
  color: #89bdff;
}
/* type - light blue */
pre .lit,
code .lit {
  color: #3387CC;
}
/* literal - blue */
pre .pun,
code .pun {
  color: #fff;
}
/* punctuation - white */
pre .pln,
code .pln {
  color: #fff;
}
/* plaintext - white */
pre .tag,
code .tag {
  color: #89bdff;
}
/* html/xml tag    - light blue */
pre .atn,
code .atn {
  color: #bdb76b;
}
/* html/xml attribute name  - khaki */
pre .atv,
code .atv {
  color: #65B042;
}
/* html/xml attribute value - green */
pre .dec,
code .dec {
  color: #3387CC;
}
/* decimal - blue */
pre.prettyprint,
code.prettyprint {
  background-color: #000;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
}
pre.prettyprint {
  width: 100%;
  margin: 1em auto;
  padding: 1em;
  white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #AEAEAE;
  padding-left: 2.5em;
}
/* IE indents via margin-left */
/* Alternate shading for lines */
@media print {
  pre .str,
  code .str {
    color: #060;
  }
  pre .kwd,
  code .kwd {
    color: #006;
    font-weight: bold;
  }
  pre .com,
  code .com {
    color: #600;
    font-style: italic;
  }
  pre .typ,
  code .typ {
    color: #404;
    font-weight: bold;
  }
  pre .lit,
  code .lit {
    color: #044;
  }
  pre .pun,
  code .pun {
    color: #440;
  }
  pre .pln,
  code .pln {
    color: #000;
  }
  pre .tag,
  code .tag {
    color: #006;
    font-weight: bold;
  }
  pre .atn,
  code .atn {
    color: #404;
  }
  pre .atv,
  code .atv {
    color: #060;
  }
}
