body {
  background:    #0012;
}


#linenumbers {
  position:      absolute;
  left:          -33px;
  top:             2px;
  margin:        0px;
  border:        0px;
  padding:       10px 0px 8px 0px;
  color:         #0126;
  background:    transparent;
  font-family:   Consolas;
  font-size:     10pt;
  line-height:   20px;
  text-align:    right;
  resize:        none;
  overflow:      hidden;
  z-index:       1;
}
#code {
  resize:        none;
  margin:        0;
  border-radius: 0;
  padding:       10px 8px 8px 40px;
  background:    #0011;
  font-family:   Consolas;
  font-size:     10pt;
  line-height:   20px;
  position:      absolute;
  left:          -32px;
  top:           0px;
  white-space:   pre;
  overflow:      hidden;
  text-overflow: ellipsis;
  overflow-y:    auto;
}

#highlights {
  font-family:   Consolas;
  font-size:     10pt;
/*white-space:   pre;
  overflow:      hidden;
  text-overflow: ellipsis;*/
  text-align:    left;
  overflow-y:    visible;
  overflow-x:    visible;
  background:    #0001;
  position:      absolute;
  left:          -33px; /*35*/
  top:           1px;
  width:         516px;
  min-height:    408px;
  padding:       11px 0px 0px 8px;
/*border-style:  inset;
  border-width:  2px;
  border-color:  #EBE9ED;*/
}
mark {
  background-color: rgba(0, 200, 150, .5);
}
bad {
  font-family:      Consolas;
  font-size:        10pt;
  color:            rgba(200, 50, 0, 1);
}



#run-controls {
  position:         fixed;
  width:             60px;
  padding:            4px;
  top:              100px;
  left:             250px;
  background-color: rgba(80,80,80,.9);   
  border-width:       2px;
  border-color:     rgba(200,200,200,.5);
  border-style:     outset;
  border-radius:      4px;
/*opacity:          .6;
  transition:       opacity .2s;*/
}
/*#run-controls:hover {
  opacity:          1;
}*/
.run-control {
  width:               60px;
  margin:              2 0 2 0;
  border:              none;
  border-radius:        2px;
  background-color:    rgba(160,160,160,.6);
  transition:          background-color .4s, color .4s;
}
.run-control:hover {
  background-color:    rgb(0,200,150);
  color:               white;
}
.active {
  background-color:    rgba(0,200,150,.8);
  color:               white;
}

#compile {
  width:               100px;
  position:            absolute;
  left:                360px;
  top:                 -25px;
  padding:             2 2 4 2;
  border:              none;
  border-radius:        2px;
  background-color:    rgba(100,100,100,1);
  transition:          background-color .2s, color .2s;
}
#compile:hover {
  background-color:    rgb(0,200,150);
  color:               white;
}





#syntax-help {
  position:         fixed;
  width:            300px;
  padding:            4px;
  top:              100px;
  left:             900px;
  background-color: rgba(120,120,120,.8);   
  border-width:       2px;
  border-color:     rgba(200,200,200,.5);
  border-style:     outset;
  border-radius:      4px;
  opacity:          .6;
  transition:       opacity .2s;
  font-family:      Consolas;
  font-size:        10pt;
  line-height:      20px;
}
#syntax-help:hover {
  opacity:          .9;
}


/*
textarea {
   resize: none;
}
*/