main, header, footer, nav {
  display: block; }

html {
  width: 100%;
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100%;
  background-color: #051029; }

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1em; }

a {
  text-decoration: none;
  color: #69deff; }

a:hover {
  text-decoration: underline; }

#panel {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 100%;
  padding: 0.75em 1em;
  overflow-y: scroll;
  color: #fff;
  background-color: #051029; }
  #panel header {
    margin-bottom: 2em; }
  #panel footer {
    margin-top: 2em; }
  #panel h1 {
    color: #69deff;
    margin-top: 0.2em;
    margin-bottom: 0.2em; }
  #panel h2 {
    margin: 3px 0px; }
  #panel .versions p {
    margin: 0 0 0.2em 0;
    color: #FFF;
    font-size: 13px;
    width: 37%;
    text-indent: 2px; }
  #panel .version {
    float: right; }
  #panel #example-list section {
    margin: 0.75em 0;
    font-size: 0.9em; }
    #panel #example-list section h1 {
      font-size: 1.5em; }
    #panel #example-list section ul {
      padding-bottom: 0.5em; }
    #panel #example-list section li {
      padding: 0.1em;
      text-indent: 0.5em; }
    #panel #example-list section li:first-child {
      padding-top: 0; }
    #panel #example-list section li:last-child {
      padding-bottom: 0; }
  #panel ul, #panel li {
    padding: 0;
    margin: 0;
    list-style: none; }
  #panel .external-links {
    font-size: 0.9em; }
    #panel .external-links li {
      margin-bottom: 0.2em;
      text-indent: 2px; }

#viewing-area {
  border: none;
  padding: 0;
  height: 100%;
  width: 100%;
  margin-left: 340px;
  display: block;
  width: -webkit-calc(100% - 340px);
  width: calc(100% - 340px);
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */ }

#game-container {
  box-shadow: 0 3px 10px black;
  margin: 0 auto; }

#source-code {
  display: none; }
  #source-code.visible {
    display: block; }

#error {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  margin-top: 0.2em;
  color: #69deff;
  padding-left: 340px;
  width: 100%;
  text-align: center;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */ }
  #error .help {
    font-size: 0.5em;
    line-height: 1.2em;
    color: #fff;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    margin-top: 1em; }

#tabs a {
  display: inline-block;
  cursor: pointer;
  padding: 0.2em 0.0em; }
  #tabs a:after {
    content: '|';
    display: inline-block;
    padding: 0em 0.5em; }
  #tabs a:last-child:after {
    content: '';
    display: none; }

.not-visible {
  display: none; }

.example {
  background-color: #051029;
  color: #fff;
  padding: 1em;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */ }
  .example #title {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    color: #69deff;
    text-align: center; }
    .example #title .help {
      font-size: 0.5em;
      line-height: 1.2em;
      color: #fff;
      max-width: 500px;
      display: block;
      margin: 0 auto;
      margin-top: 1em; }
    .example #title .code {
      color: #69deff; }
  .example .description {
    font-style: italic;
    font-size: 13px;
    font-weight: 400;
    margin: 0; }
  .example main h1 {
    margin-top: 1.5em;
    margin-bottom: 0; }
  .example pre {
    display: block;
    background-color: #222222;
    width: 100%;
    padding: 1em;
    border-radius: 9px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(100, 100, 100, 0.2);
    margin: 1em 0;
    overflow-x: auto;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */ }
  .example a {
    color: #69deff; }
  .example #dependencies {
    display: none; }
    .example #dependencies.active {
      display: block; }
    .example #dependencies ul {
      margin-top: 1em;
      padding: 0; }
    .example #dependencies li {
      list-style: none;
      text-indent: 1em;
      margin-bottom: 0.5em; }
  .example #notes ul {
    padding-left: 1.5em; }

/*

Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #f8f8f8;
  -webkit-text-size-adjust: none; }

.hljs-comment,
.hljs-javadoc {
  color: #aeaeae;
  font-style: italic; }

.hljs-keyword,
.ruby .hljs-function .hljs-keyword,
.hljs-request,
.hljs-status,
.nginx .hljs-title {
  color: #e28964; }

.hljs-function .hljs-keyword,
.hljs-sub .hljs-keyword,
.method,
.hljs-list .hljs-title {
  color: #99cf50; }

.hljs-string,
.hljs-tag .hljs-value,
.hljs-cdata,
.hljs-filter .hljs-argument,
.hljs-attr_selector,
.apache .hljs-cbracket,
.hljs-date,
.tex .hljs-command,
.coffeescript .hljs-attribute {
  color: #65b042; }

.hljs-subst {
  color: #daefa3; }

.hljs-regexp {
  color: #e9c062; }

.hljs-title,
.hljs-sub .hljs-identifier,
.hljs-pi,
.hljs-tag,
.hljs-tag .hljs-keyword,
.hljs-decorator,
.hljs-shebang,
.hljs-prompt {
  color: #89bdff; }

.hljs-class .hljs-title,
.hljs-type,
.smalltalk .hljs-class,
.hljs-javadoctag,
.hljs-yardoctag,
.hljs-phpdoc,
.hljs-dartdoc {
  text-decoration: underline; }

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.hljs-number {
  color: #3387cc; }

.hljs-params,
.hljs-variable,
.clojure .hljs-attribute {
  color: #3e87e3; }

.css .hljs-tag,
.hljs-rules .hljs-property,
.hljs-pseudo,
.tex .hljs-special {
  color: #cda869; }

.css .hljs-class {
  color: #9b703f; }

.hljs-rules .hljs-keyword {
  color: #c5af75; }

.hljs-rules .hljs-value {
  color: #cf6a4c; }

.css .hljs-id {
  color: #8b98ab; }

.hljs-annotation,
.apache .hljs-sqbracket,
.nginx .hljs-built_in {
  color: #9b859d; }

.hljs-preprocessor,
.hljs-pragma {
  color: #8996a8; }

.hljs-hexcolor,
.css .hljs-value .hljs-number {
  color: #dd7b3b; }

.css .hljs-function {
  color: #dad085; }

.diff .hljs-header,
.hljs-chunk,
.tex .hljs-formula {
  background-color: #0e2231;
  color: #f8f8f8;
  font-style: italic; }

.diff .hljs-change {
  background-color: #4a410d;
  color: #f8f8f8; }

.hljs-addition {
  background-color: #253b22;
  color: #f8f8f8; }

.hljs-deletion {
  background-color: #420e09;
  color: #f8f8f8; }

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5; }