html,body {
  height : 100%;
  overflow : hidden;
}

* {
  margin : 0;
  padding : 0;
}


#wrapper {
  position : relative;
  width : 100%;
  height : 100%;
}

.canvas {  
  position : relative;
  display : inline-block;
  width : 48.5%;
  height : 99%;
  overflow : hidden;
  margin : 0;
  padding : 0;
  box-shadow : 0px 0px 16px rgba(0,0,0,0.7);
  left : 1%;
  -webkit-touch-callout : none;
  -webkit-user-select : none;
  -khtml-user-select : none;
  -moz-user-select : none;
  -ms-user-select : none;
  -o-user-select : none;
  user-select : none;
}

.canvas-fs {
  width : 100%;
  height : 100%;
  left : 0%;
}

#textarea-wrapper {
  position: relative;
  display: inline-block;
  width: 48.5%;
  height: 99%;
  left: 2%;
  box-shadow: 0px 0px 16px rgba(0,0,0,0.7);
}

.dot {
  position : absolute;
  top : 1%;
  left : 1%;
  display : none;
  z-index : 2;
}

#error {
  color : red;
  text-shadow : 0px 0px 4px rgba(255, 0, 0, .3);
}

#good {
  color : green;
  text-shadow : 0px 0px 4px rgba(0, 255, 0, .3);
}

.CodeMirror {
  padding : 4%;
  height : 92.1%;
  width : 91.9%;
  position : absolute;
  outline : none;
  border : none;
  resize : none;
}

textarea {
  outline : none;
  border : none;
  resize : none;
}

#menu {
  position : absolute;
  display : none;
  width : 100px;
  top : 0px;
  left : 0px;
  border : thin solid black;
  font-variant : small-caps;
  font-weight : bold;
  font-family : "Helvetica";
  padding : .2em;
  background-color : rgba(255,255,255,.9);
}

li {
  list-style : none;
  border-bottom : thin solid black;
  padding-left : .2em;
  -webkit-touch-callout : none;
  -webkit-user-select : none;
  -khtml-user-select : none;
  -moz-user-select : none;
  -ms-user-select : none;
  -o-user-select : none;
  user-select : none;
  cursor : pointer;
}

li:last-child {
  border : none;
}

#col {
  background-color : black;
  width : 10px;
  height : 10px;
  float : right;
  position : absolute;
  top : 29px;
  left : 88px;
  display : inline-block;
}