body, html {
  font-family: "Helvetica Neue", Helvetica, Montserrat, Arial, sans-serif;
  font-size: 16px;
  color: #ccc;
  background: #222;
}
h3 small {
  font-size: 0.75em;
  font-weight: normal;
}
h3 span {
  display: inline-block;
  vertical-align: top;
  height: 25px;
  line-height: 25px;
  padding: 0;
}
button, .button {
  display: inline-block;
  vertical-align: top;
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline-width: 0;
  background: #666;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.25s;
}
button.small, .button.small {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  font-size: 0.75em;
  font-weight: normal;
}
button:hover, .button:hover {
  -webkit-user-select: none;
  user-select: none;
  outline-width: 0;
  background: #87ceeb;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
button:focus, .button:focus {
  -webkit-user-select: none;
  user-select: none;
  outline-width: 0;
}
.hidden {
  height: 0px;
  width: 0px;
  padding: 0px;
  margin: 0px;
  font-size: 0px;
  border: none;
  overflow: hidden;
  opacity: 0.01;
}

#tools-menu {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
  border-bottom: 1px dotted #333;
}
#tools-menu h3,
#tools-menu span.button,
#tools-menu a.button {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  margin: 0 10px 0 0;
  padding: 0 10px;
  font-size: 0.75em;
}
#tools-menu span.button {
  pointer-events: none;
  opacity: 0.5;
}

.project {
  padding: 10px;
  margin: 0 20px 50px 20px;
  border-bottom: 1px dashed #666;
  background: #333;
}
.shrinkable {
  height: auto;
  overflow: hidden;
}
.shrinkable.closed {
  height: 0;
}
.version-switch {
  padding: 10px;
  margin: 0 10px 10px 10px;
  background: #222;
  cursor: pointer;
}
.version-switch span {
  text-decoration: underline;
}
.version-switch.collpased {
  height: 0px;
  padding: 0px;
  overflow: hidden;
}
.version {
  padding: 10px;
  margin: 0 10px 20px 10px;
  background: #222;
}
.version.collpased {
  height: 0px;
  padding: 0px;
  overflow: hidden;
}
.compiled {
  margin: 0 0 10px 0;
  font-size: 0;
}
.compiled label, .compiled input, .compiled span {
  display: inline-block;
  vertical-align: top;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.compiled input {
  width: 400px;
  background: #111;
  padding: 0 10px;
  border: none;
  color: #ffa0a0;
  font-family: monospace;
  font-size: 12px;
}
.compiled a.button {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  margin: 0 10px;
  padding: 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.compiled span {
  width: auto;
  margin: 0;
  font-size: 12px;
  color: #999;
}
.compiled span em {
  margin: 0 10px 0 0;
  font-size: 14px;
  color: #fff;
}
.compiled.total span {
  width: auto;
  margin: 0 0 0 575px;
  font-size: 12px;
  color: #999;
}
.compiled.total span em {
  margin: 0 10px 0 0;
  font-size: 14px;
  color: #fff;
}

pre.projectjson.prettyprint,
pre.imports.prettyprint {
  display: inline-block;
  border: none;
  padding: 15px;
  box-sizing: border-box;
  width: auto;
  margin: 20px 0;
  font-family: monospace;
  font-size: 12px;
  background: #111;
}
.resources {
  margin: 0 0 0 20px;
}
.resources ul {
  margin: 0;
  padding: 0 0 0 20px;
}

.projectjson-toggle {
  display: inline-block;
  margin: 0 0 20px 0;
  text-decoration: underline;
  color: #87ceeb;
  cursor: pointer;
}
.projectjson-toggle:hover {
  color: #f0e68c;
}
.projectjson-box.closed pre {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.projectjson-box .editor {
  height: 400px;
  margin: 0 10px 20px 10px;
  padding: 10px;
  overflow: none;
  overflow-y: auto;
}
.projectjson-box.closed .editor {
  height: 0;
  margin: 0 10px 0 10px;
  padding: 0;
  overflow: hidden;
}
.projectjson-box.closed.loading .projectjson-toggle {
  margin: 0 0 20px 0;
}
.projectjson-box.closed.loading .editor {
  position: fixed;
  width: 1100px;
  height: 400px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* less to js copnverter */

.lessjs-converter {
  width: 100%;
}
.lessjs-converter .left-col, .lessjs-converter .right-col {
  display: inline-block;
  vertical-align: top;
  width: 42%;
}
.lessjs-converter textarea {
  width: 100%;
  height: 500px;
  border: none;
  color: #666;
  background: #161616;
  overflow-x: hidden;
  overflow-y: scroll;
}
.lessjs-converter .right-col textarea {
  color: #ccc;
}
.lessjs-converter .center-col {
  display: inline-block;
  vertical-align: top;
  width: 10%;
  text-align: center;
}
.lessjs-converter .center-col .button {
  margin: 100px 0 0 0;
}

/* json editor scheme */
.ace-tomorrow-night { background: #111 !important; }
.ace-tomorrow-night .ace_gutter { background: #222 !important; }
.ace-tomorrow-night .ace_gutter-active-line { background-color: #333 !important; }

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  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 }
}