dzura/www/.css

* {
    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;
}

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;
}

/* Scene:game */
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; }