body {
  padding: 10px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: radial-gradient(rgba(0,0,0,0.5), black), url('../images/circuit.jpg');
  background-size: cover;
}

/*
@media screen and (min-width: 1600px)
{
  body { zoom: 1.5; }
}
*/



a {
  color: #00B7FF;
}

#header {
  position: relative;
}

#header > h1 {
  margin-bottom: 0px;
  margin-top: 10px;
  padding-bottom: 40px;
}

#container {
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#editor {
  width: 100%;
  height: 400px;
  box-shadow: 0px 0px 3px #444;
  border: 1px solid #aaa;
}

.taskClose {
  position:absolute;
  right: 0px;
  z-index: 3;
}

#taskbox {
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 100px;
  border: 1px solid #aaa;
  background: #272822;
  color: white;
  padding: 5px;
  position: relative;
}

.taskareaBig {
  position: relative;
  width: 100%;
  color: white;
}

.taskarea {
  width: 100%;
  position: relative;
  margin-top: 5px;
  -webkit-transform-origin: 50% 100%;
  -webkit-transform: scaleY(0.000001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transform-origin: 50% 100%;
  -moz-transform: scaleY(0.000001);
  -moz-transition: -moz-transform 0.2s ease-in-out;
}

.taskareaVisible {
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
}

#tasktitle {
  font-weight: bold;
}

#taskstatus {
  font-size: 20px;
  position: absolute;
  bottom: 0px;
  margin-left: 18px;
}

.taskstatusSolved:before {
  font-family: 'FontAwesome';
  margin: 0 5px 0 -18px;
  display: inline-block;
  font-size: 15px;
  width: 15px;
  content: '\f046';
  color: rgb(20,200,20);
}

.taskstatusUnsolved:before {
  font-family: 'FontAwesome';
  margin: 0 5px 0 -18px;
  display: inline-block;
  font-size: 15px;
  width: 15px;
  content: '\f096';
  color: white;
}


.taskstatusSolved {
  color: rgb(20,200,20);
}

.taskstatusUnsolved {
  color: rgb(200,20,20);
}

pre.prettyprint {
  border: 1px solid #aaa;
  padding: 5px;
}

#debugout {
  width: 600px;
  height: 16px;
  border: 1px solid #585;
  margin-top: 5px;
  display: none;
}

#stream0-container {
  width: 164px;
  display: none;
}

#stream1-container {
  width: 164px;
  display: none;
}

#stream2-container {
  width: 164px;
  display: none;
}

.stream-box {
  height: 50px;
  border: 1px solid #585;
  margin-top: 5px;
  white-space: pre;
  margin: 0px;
}

.stream-caption {
  margin-left: 18px;
  width: 120px;
  background: #262;
  text-align: center;
  color: #ccc;
}

.stream-checker-ok {
  background: #262;
}

.stream-checker-pending {
  background: #662;
}

.stream-checker-failed {
  background: #622;
}

.stream-box span {
  color: rgb(20,200,20);
  margin-left: 20px;
}
.stream-box span.output_ok:before {
  font-family: 'FontAwesome';
  content: '\f164';
  margin: 0 5px 0 -15px;
  display: inline-block;
  font-size: 12px;
  width: 12px;
  color: #888;
}

.stream-box span.output_not_ok {
  color: rgb(20,200,20);
}

.stream-box span.output_not_ok:before {
  font-family: 'FontAwesome';
  content: '\f165';
  margin: 0 5px 0 -15px;
  display: inline-block;
  font-size: 12px;
  width: 12px;
  color: #e22;
}

.stream-box span.current:before {
  font-family: 'FontAwesome';
  content: '\f178';
  margin: 0 5px 0 -15px;
  display: inline-block;
  font-size: 12px;
  width: 10px;
  color: #888;
}

#screen {
  width: 100%;
  height: 400px;
  border: 1px solid #aaa;
  box-shadow: 0px 0px 3px #444;
}

#screen.full-screen {
  position: absolute;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 500px;
  z-index: 21;
}

#left-bar {
  float: left;
  width: 50px;
  margin-left: -50px;
  height: 400px;
}

#left-col {
  width: 500px;
  float: left;
}

#right-col {
  width: 500px;
  float: right;
  -webkit-transform: translate3d(0,0,0);
}

#title {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  color: rgb(26, 144, 15);
}

.helpPane {
  position: fixed;
  right: 0;
  width: 350px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 10px black;
  background: #272822;
  padding: 10px;
  color: white;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: scaleX(0.000001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transform-origin: 100% 50%;
  -moz-transform: scaleX(0.000001);
  -moz-transition: -moz-transform 0.2s ease-in-out;
  outline: 0;
  z-index: 2;
  overflow: scroll;
}

.helpPane a:link {color: #888; text-decoration: none; }
.helpPane a:active {color: #aaa; text-decoration: none; }
.helpPane a:visited {color: #888; text-decoration: none; }
.helpPane a:hover {color: #fff; text-decoration: underline; }

.helpPaneVisible {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}

.helpButton {
  right: 0px;
  bottom: 3px;
}

.taskButton {
  right: 28px;
}

.projectButton {
  right: 56px;
}

.tutorialButton {
  right: 80px;
}

.glow {
  -moz-animation-name: glow;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-duration: 600ms;
  -webkit-animation-name: glow;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 600ms;
}

@-moz-keyframes glow {
    0% { text-shadow: 0 0 5px #484; }
    100% { text-shadow: 0 0 15px #6f6; font-size: 25px;}
}

@-webkit-keyframes glow {
    0% { text-shadow: 0 0 5px #484;  }
    100% { text-shadow: 0 0 15px #6f6;  font-size: 25px; }
}

.button {
  position: absolute;
  font-size: 20px;
  color: white;
  z-index: 1;
  cursor: pointer;
}

.layoutButtonFullScreen {
  font-size: 18px;
  float: right;
  position: relative;
  bottom: 20px;
  margin-bottom: -20px;
}

.layoutButtonFullScreen.full-screen {
  z-index: 21;
}

.helpButtonClose {
  position: fixed;
  top: 5px;
  right: 5px;
}


.tasklist {
  list-style: none;
}

.tasklist li {
  cursor: pointer;
}

.tasklist li::before {
  font-family: 'FontAwesome';
  content: '\f096';
  margin: 0 5px 0 -15px;
  display: inline-block;
  width: 14px;
}

.tasklist li.solved::before {
  content: '\f046';
  color: #1ab80f;
}

#saver {
  position: relative;
  display: none;
}
#saver i {
  position: absolute;
  top: -12px;
  color: #aaa;
  font-size: 8px;
}

#codestats {
  width: 100%;
  text-align: right;
  color: white;
  font-size: 11px;
}

dl.helpdl {

}

dl.helpdl dt {
  float: left;
  clear: left;
  width: 50px;
  text-align: right;
  font-weight: bold;
}
dl.helpdl dt:after {
  content: ":";
}
dl.helpdl dd {
  margin: 0 0 0 70px;
  padding: 0px;
}

#fullscreen-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: rgba(0,0,0,0.9);
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: rgba(0,0,0,0.5);
}

.overlay > div
{
  width: 500px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  z-index: 21;
  border: 2px solid #eee;
  padding: 10px;
  font-size: 11px;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: scale(1,1);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -moz-transform-origin: 50% 50%;
  -moz-transform: scale(1,1);
  -moz-transition: -moz-transform 0.3s ease-in-out;
}

.overlay > div h3 {
  text-align: center;
  font-size: 25px;
  margin: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.overlay > div p {
  font-size: 11px;
}

.overlay > div pre {
  line-height: normal;
}

.overlay > div a {
  cursor: pointer;
}

.overlay > div.big
{
  -webkit-transform: scale(1.5,1.5);
  -moz-transform: scale(1.5,1.5);
}

#popup-close {
  text-align: center;
}

#popup-close > a {
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 5px;
  width: 50px;
  position: absolute;
  margin-left: -25px;
  bottom: 15px;
  color: #484;
}
.ipMarker {
  background: rgba(26,184,128,0.5);
}

.tasksection > h3 {
  margin-bottom: 5px;
  margin-top: 35px;
}

.tasksection > p {
  margin-top: 5px;
}

.taskprogress {
    width: 50px;
    height: 5px;
    margin-bottom: 2px;
    background: #242;
    display: inline-block;
}

.taskprogress_solved {
  background: #1ab80f;
}

.tasksection .reward {
  position:absolute;
  right: 25px;
}