body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; }

#ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background:#ddd;}
#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#frame.bright widget { color:#000; }
#overlay { position:absolute; z-index:1000;}
#frame { cursor:none;}

#terminal { position: fixed;bottom: 0px;left: 0px;background: #eee;width: 100vw;height: 30px;overflow: hidden; }
#terminal logs { display: none;position: absolute;bottom:20px;width:100vw;color:white}
#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
#terminal logs log .rune { color:white; }
#terminal logs log.error .rune { color:red; }
#terminal logs log.input { color:white; }
#terminal logs log.image img { height:85px;width:auto;border-radius: 3px }
#terminal.locked input { color:red; }
#terminal status { display: block;position: absolute;bottom: 0px;right: 0px;padding: 5px 15px 5px 31px;font-size: 12px;line-height: 20px;color: white;width:calc(40vw - 45px) }
#terminal status .details { float:right; color:#555; }

#terminal.hide { height:25px; }
#terminal.mini { height:120px; }
#terminal.full { height:100vh; }

#terminal input   { position:fixed; bottom:0px; z-index:900; line-height: 20px; width:calc(100vw - 20px); background:none; color:black; font-size:11px; padding:5px 10px;}
#terminal hint    { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; }
#terminal #widget { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 20px); background:none; color:#999; font-size:11px; padding:5px 10px; white-space: pre; text-align: right}