*{ box-sizing:border-box; } html{ display:block; position:relative; width:100%; height:100%; padding:0; margin:0; overflow:hidden; } body{ display:flex; position:relative; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start; width:100%; height:100%; padding:0; margin:0; overflow:hidden; font-family:sans-serif; } body>nav{ display:block; position:relative; width:9rem; height:100%; background-color:#282828; } body>nav>button{ display:block; position:relative; width:100%; height:2.5rem; padding:0 1rem 0 1rem; text-align:left; font-size:1.25rem; cursor:pointer; background-color:#282828; border:0; color:#c0c0c0; } body>nav>button:hover{ background-color:#383838; color:#e0e0e0; } body>nav>header{ display:block; position:relative; width:100%; height:3rem; line-height:3rem; text-align:center; font-size:1.8rem; font-weight:bold; font-variant:small-caps; color:#d0d0d0; border-bottom:1px solid #404040; } main{ display:block; position:relative; width:100%; height:100%; flex-grow:1; background-color:#202020; } main>nav{ display:flex; position:relative; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start; width:100%; height:3rem; background-color:#282828; border-bottom:1px solid #404040; } main>nav>section:first-child{ display:flex; position:relative; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start; height:100%; } main>nav>section:last-child{ display:flex; position:relative; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-end; height:100%; flex-grow:1; } main>nav>section>button{ display:block; position:relative; width:auto; height:100%; padding:0 1rem 0 1rem; text-align:left; font-size:1.25rem; cursor:pointer; background-color:#282828; border:0; color:#c0c0c0; } main>nav>section>button:hover{ background-color:#383838; color:#e0e0e0; } main>nav>section>div{ display:block; position:relative; width:auto; height:100%; padding:0 1rem 0 1rem; line-height:3rem; text-align:left; font-size:1.25rem; color:#e0e0e0; } main table{ width:100%; border-collapse:collapse; } main table tr{ height:2.5rem; } main table th{ padding:0 1rem 0 1rem; text-align:center; font-size:1.2rem; font-weight:bold; background-color:#383838; color:#f0f0f0; border-bottom:1px solid #404040; } main table td{ height:100%; padding:0 1rem 0 1rem; text-align:center; background-color:#303030; color:#f0f0f0; } main table td:last-child{ display:flex; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-end; flex-grow:1; } main table td>img{ height:2rem; vertical-align:middle; } main table td:last-child>button{ display:block; position:relative; width:auto; height:100%; padding:0 1rem 0 1rem; text-align:left; font-size:1.25rem; cursor:pointer; background-color:#303030; border:0; color:#e0e0e0; } main table td:last-child>button:hover{ background-color:#343434; } main>canvas{ display:block; position:relative; width:100%; height:100%; padding:0; margin:0; background-color:#202020; } main.game>div.sidemenu{ display:flex; position:absolute; bottom:0px; right:1px; z-index:10; flex-flow:column nowrap; width:auto; height:auto; border:0; border-top-left-radius:1rem; overflow:hidden; } main.game>div.sidemenu>button{ display:block; position:relative; padding:1rem; margin:0 0 1px 0; background-color:#202020; color:#F0F0F0; border:0; font-family:sans-serif; font-size:1rem; cursor:pointer; } main.game>div.sidemenu>button:hover{ background-color:#404040; } main.game>div.sidemenu>button.warn:hover{ background-color:#602020; } span.text-system{color:#909090;}