* { margin:0px; padding:0px;}
body { width:100%; height:100%; background-color: gray; }

img { display: none; }

.code { 
	background-color: white; color: black;
	width: 20%; height: 2em; font-size: 0.7em; font-family: monospace;
	position: absolute; opacity: 0.5; padding:5px; border:1px solid black; 
	transition: opacity 0.2s ease-in-out; transition: font-size 0.2s ease-in-out;
	outline:none;
}

.code .summaryview { height: 1em; transition: height 0.2s ease-in-out; font-size: 1.3em;}

.health { float: right; }

.editactive { opacity: 0.8; }

.codecontainer { overflow:scroll;  height:0px; }
.varscontainer { display: none; border-top: 1px dashed grey; padding-top: 5px; }
.editactive .codecontainer {  height:calc(70% - 1.1em); }
.editactive .varscontainer {  overflow:scroll; height:calc(30% - 1.1em); display:block;  }
.editactive .summaryview { height: 0em; overflow: hidden; font-size: 1em;}

.editactive { width: 50%; height:90%; font-size:1em; }

.control { display: none; vertical-align: middle; }
.editactive .control {display:block; height:1.1em;}

.control button { background-color: black; color: white; border: 1px solid white; font-weight: bold; padding: 2px 5px; cursor: pointer; }

#code1 { left:0px; top:0px;  }
#code2 { right:0px; top:0px;  }
#code3 { left:0px; bottom:0px;  }
#code4 { right:0px; bottom:0px;  }

canvas { position:absolute; left:0px; top:0px; z-index: -1; }

ul { list-style: none; padding-left:2em; }
.codecontainer li.executing { background-color: black; color: white; }
.codecontainer li.error { font-weight: bold; color:red; margin-top:5px }
.codecontainer li.comment { color: green; }
.codecontainer li.error span { display:block; background: red; color: white; margin-bottom:5px; padding:2px; margin-top:2px; padding-left:12px; }
.codecontainer li span { display:none; }

textarea { width :100%; height: 100%; border:1px solid white; }

td { padding-left: 10px; }

.transparent { opacity: 0; }
.visible { opacity: 0.8; }

#panel { transition: opacity 0.5s ease-in-out; background: black; color: #e0e0e0; width: 100%; height: 100%; position: absolute; left:0px; top:0px;  }
#instructions { background:  white; color: black; padding: 2em; border: 1px solid grey; 
	width: 50%; margin-left: auto; margin-right: auto; font-family: sans-serif; margin-top:2em; }
#instructions h1 { text-align: center; margin-bottom: 1em; }
#instructions table { margin: 2em; border-collapse: collapse; }
#instructions table tr:nth-child(even) { background: #f0f0f0; }
#instructions table tr td { padding: 0.5em 0.3em;  }
#instructions table tr td:nth-child(even) { border-left: 1px solid black; }
#instructions button { margin-left: auto; margin-right: auto; display: block; font-size:2em; padding: 0em 1em; }

#winner { background:  white; color: black; padding: 2em; border: 1px solid grey; 
	width: 50%; margin-left: auto; margin-right: auto; font-family: sans-serif; margin-top:2em; height: 80%; display:none;}
#winner h1 { text-align: center; margin-bottom: 0.1em; }
#winner h3 { text-align: center; margin-bottom: 1em; }

#winningcode { max-height: 70%; overflow: scroll; border:1px solid grey; padding: 1em; }

#winner li.executing {  }
#winner li.error { display:none }
#winner li.comment { color: green; font-weight: bold; }
#winner li.error span { display:none }
#winner li span { display:none; }

#winner button { margin-left: auto; margin-right: auto; margin-top:1em; display: block; font-size:1.5em; padding: 0em 1em; }



#topbar { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); }

.filename { height: 0;  position: absolute; bottom:0px;  overflow: hidden; transition: height 0.2s ease-in-out; }
.save { height: 1.5em; width:70%; position: absolute; bottom:2em; border:2px solid black;  overflow: hidden; transition: height 0.2s ease-in-out; }
.save input {  }