body * {
  font-family: Monaco, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  }
body {
  background: #13131A;
  font-family: Monaco, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}
#display {
  height: 492px;
  margin-top: 10px;
  position: relative;
  width: 960px;
}
#display header {
  background: #1B1B26;
  border-bottom: 2px solid #5E5E98;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #8C81FF;
  position: relative;
}
#display header h1, #display header a#heroku-logo, #display header a#help_toggler {
  font-size: 14px;
  font-weight: normal;
  line-height: 40px;
  margin: 0;
}
#display header h1 {
  display: inline-block;
  position: relative;
}
#display header a#heroku-logo {
  background: url(heroku-h.png) center center no-repeat;
  border-right: 2px solid hsla(244,23%,48%,.2);
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
  width: 42px;
  opacity: .7;
}
#display header a#heroku-logo:hover {
  opacity: 1;
}
#display header a#help_toggler {
  border-left: 2px solid #5E5E98;
  color: #8C81FF;
  padding: 0 10px 0 10px;
  position: absolute;
  right:0;
  text-decoration: none;
  top: 0;
}
#overlay {
  background-color: transparent;
  font-family: Monospace;
  height: 430px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  white-space: pre-wrap;
  width: 960px;
  z-index: 2;
}
#turtle {
  position: absolute;
  z-index: 1;
}
canvas span {
  background-color: yellow;
  color: red;
  font-weight: bold;
}
#sandbox {
  position: absolute;
  z-index: 0;
}
#input {
  padding: 10px 0 0 0;
  position: relative;
  width: 960px;
}
#input.more input[type=text] {
  display: none;
}
#input.more textarea {
  height: 200px;
  line-height: 18px;
  padding: 10px;
  overflow-y: scroll;
  resize: none;
}
#input.more textarea::-webkit-scrollbar {
  height: 16px;
  width: 16px;
}
#input.more textarea::-webkit-scrollbar-track:vertical {
  background: hsla(244,23%,48%,.1);
  border-left: 2px solid hsla(244,23%,48%,.4);
  -webkit-border-bottom-right-radius:  4px;
  -moz-border-radius-bottomright:      4px;
  border-bottom-right-radius:          4px;
  -webkit-border-top-right-radius:  4px;
  -moz-border-radius-topright:      4px;
  border-top-right-radius:          4px;
}
#input.more textarea::-webkit-scrollbar-thumb:vertical{
    background: hsla(244,23%,48%,.8);
    -webkit-border-radius: 0px;
    cursor: pointer;
}
#input.less textarea {
  display: none;
}
#input.less input[type=text] {
  line-height: 40px;
  width: 860px;
}
#input textarea, #input input[type=text], #display {
  background: #17171F;
  border-radius: 6px;
  border: 2px solid #5E5E98;
}
#input input[type=text], #input textarea {
  background: #1B1B26;
  color: #8C81FF;
  font-size: 14px;
  margin: 0;
  padding: 0 10px 0 10px;
}
#input input[type=text]:focus, #input textarea:focus {
  outline: none;
}
#input button {
  background: #1A1926;
  border: 0 none;
  border: 2px solid #5E5E98;
  bottom: 0;
  color: #8C81FF;
  font-family: Monaco, monospace;
  font-size: 14px;
  height: 40px;
  padding: 0;
  position: absolute;
  right: 0;
  width: 80px;
}
#input.less button {
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
}
#input.more button {
  border-right: 0 none;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  bottom: -2px;
  right: 18px;
}
#input button:hover {
  cursor: pointer;
  color: #9292FF;
}
#input a#toggle {
  cursor: pointer;
  display: block;
  height: 12px;
  position: absolute;
  width: 12px;
}
#input.less a#toggle {
  background: url(input-arrow.png) top right no-repeat;  
  right: 84px;  
  top: 16px;
}
#input.more a#toggle {
  background: url(input-arrow.png) bottom right no-repeat;
  right: 24px;
  top: 16px;
}
.hidden{
  display: none;
}

.visible{
  display: block;
}

#help{
  background-color: hsla(243,16%,12%,.9);
  border: 0 none;
  border-left:  2px solid #5E5E98;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
  color: #8C81FF;
  font-family: Monospace;
  height: 430px;
  margin: 0;
  overflow: auto;
  padding-left: 14px;
  position: absolute;
  right:0;
  top: 42px;
  width: 400px;
  z-index: 3;
}
#help * {
  color: #8C81FF;
  font-family: Monaco, monspace;
  font-size: 14px;
  padding: 4px;
}
#help h2 a {
  font-weight: normal;
}
#help h4,  #help h3,  #help a {
  color: #CACEFD;
}
#help ul,  #help ol {
  margin-left: 1em;
}
#help li {
  margin-left: 1em;
}
#help dt, #help dt code, #help dt var {
  color: #91CFFB;
}
#help small {
  font-size: 12px;
}
#help::-webkit-scrollbar {
  height: 16px;
  width: 16px;
  -webkit-border-radius: 3px;
}
#help::-webkit-scrollbar-track:vertical {
  background: hsla(244,23%,48%,.1);
  border-left: 2px solid hsla(244,23%,48%,.4);
  -webkit-border-bottom-right-radius:  4px;
  -moz-border-radius-bottomright:      4px;
  border-bottom-right-radius:          4px;
}
#help::-webkit-scrollbar-thumb:vertical{
    background: hsla(244,23%,48%,.8);
    -webkit-border-radius: 0px;
    cursor: pointer;
}
#error {
  background-color: #831521;
  -webkit-border-top-right-radius:    5px;
  -webkit-border-bottom-left-radius:  4px;
  -moz-border-radius-topright:        5px;
  -moz-border-radius-bottomleft:      4px;
  border-top-right-radius:            5px;
  border-bottom-left-radius:          4px;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  position: absolute;
  z-index: 4;
}