html,body{--main-color:         #009DF3;--main-bg:            #222;--text-color:         #DDD;--text-bg-color:      rgba(0,0,0,0.5);--link-color:         #0FF;--link-visited-color: #0EE;--link-hover-color:   #FFF;--link-active-color:  #E0E;--border-color:       #888;--border-size:        1px;--border-style:       solid;--border:         var(--border-size) var(--border-color) var(--border-style);--title-gradient: linear-gradient(var(--main-color), #0000F0);--selected-row-color: rgba(0, 128, 64, 0.7);--navbar-height:      1.3em;--body-y-pos:         calc(var(--navbar-height) + 0.6em);background:var(--main-bg);color:var(--text-color);overscroll-behavior:none;margin:0;padding:0;width:100%;height:100%}a{color:var(--link-color)}a:visited{color:var(--link-visited-color)}a:hover{color:var(--link-hover-color)}a:active{color:var(--link-active-color)}[disabled="disabled"]{opacity:0.5;cursor:not-allowed}[disabled="disabled"].toggle label{cursor:not-allowed}body{display:flex;flex-direction:row}#content{margin-top:var(--body-y-pos);flex-basis:80%;overflow:auto;padding:0.5em;position:relative}#content .content-title{font-size:1.1em;margin-top:0.25em;margin-bottom:0.5em}.titlebar{background:var(--title-gradient);border-bottom:var(--border);font-size:0.9em;font-weight:normal;margin:0;height:1.2em;overflow:hidden;text-overflow:ellipsis;position:relative}.titlebar .button{height:1em;position:absolute;top:0;cursor:pointer}.titlebar .button.save{left:0}.titlebar .button.close{right:0}table:not(.noBorder){border-top:var(--border);border-left:var(--border)}table:not(.noBorder) td,table:not(.noBorder) th{border-bottom:var(--border);border-right:var(--border)}table td.fileName,table th.fileName{text-align:left}table td.fileType,table th.fileType{text-align:left;font-family:monospace}table td.submit,table th.submit{text-align:center}table tr.header{text-align:center;background:var(--title-gradient)}figure img{border:var(--border)}.note{border:var(--border-size) #CC8 solid;margin:0.5em;padding:4px}section{border-top:var(--border)}section section{margin-left:2em}*:not(#sidebar)>.box{margin:0.5em}#sidebar>.box{margin-bottom:0.5em}.box{border:var(--border)}.box.error{background:rgba(128,0,0,0.5)}.box.error .body{padding:3px}.box.popup{position:fixed;top:30%;left:20%;width:60%;min-height:4em;max-height:50%;box-shadow:4px 4px 4px #444}.box.popup .body{overflow:auto;font-family:monospace;white-space:pre-wrap}.image{border:var(--border);display:inline-block;margin:1em;font-size:0.8em;text-align:center;width:320px}.image img{display:block;width:320px}textarea,input{background-color:var(--text-bg-color);color:var(--text-color);border:var(--border)}textarea.invalid,input.invalid{background-color:rgba(255,0,0,0.4)}input[type="number"]{width:4em;text-align:right;font-family:monospace}#navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-height);background:var(--title-gradient);padding-top:2px;font-size:1.3em;white-space:nowrap;overflow:hidden;border-bottom:var(--border)}#navbar h1{margin:0;font-size:1em;font-family:sans-serif}#navbar .button{height:1em;display:inline-block;cursor:pointer;margin-right:0.5em}#navbar .button.main-menu-button{position:absolute;right:0}@keyframes PopupBoxZoom{0%{transform:scale(0, 0)}100%{transform:scale(1, 1)}}.PopupBox{position:fixed;top:10%;left:10%;background:rgba(0,0,0,0.7)}.PopupBox.opening{animation:PopupBoxZoom 1 0.25s normal}.PopupBox.closing{animation:PopupBoxZoom 1 0.25s reverse}.PopupBox .body{height:100%}.PopupBox .titlebar .text{margin-left:1em}#sidebar{display:flex;flex-direction:column;margin-top:var(--body-y-pos);flex-basis:25%;max-width:35%;height:calc(100% - (var(--body-y-pos) + 4px));border-right:var(--border);padding:2px;overflow:auto}#sidebar .box{margin:3px}#sidebar>a{background:#004080;border-bottom:var(--border);border-left:var(--border)}#sidebar details summary{background:#004080;border-bottom:var(--border);border-left:var(--border)}#sidebar details ul{list-style-type:none;margin:0;padding:0;margin-bottom:0.5em}#sidebar details ul li{padding-left:1em;background:#0050A0;border-bottom:var(--border);border-left:var(--border)}#sidebar details ul li.current{background:#0080C0}#sidebar details ul li.current a:not(:hover){color:#000}
