* { box-sizing: border-box; }
body { font-family: sans-serif; }
img.exit { display: block; margin: 0 auto; max-width: 60vw; max-height: 60vh; }

a, a:visited, a:link { color: inherit; }

main {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
}

nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 20em;
    height: 100vw;

    display: flex;
    flex-flow: column nowrap;
    padding: 1em;

    background-color: #ddd;
}
nav + main {
    margin-left: 20em;
    margin-right: 0;
}

.nav_header, a.nav_header {
    display: block;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #999;
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 1.1pt;
    color: #999;
    text-decoration: none;
}
.nav_header_logo {
    max-height: 1.5em;
    vertical-align: middle;
}

.nav_list {
    display: flex;
    flex-flow: column nowrap;
}
.nav_item, .nav_list > a {
    display: inline-block;
    padding: 0.5em 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0.25em 0.35em;
}
thead > tr > th {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
tbody > tr:nth-child(2n) > td {
    background-color: #f3f3f3;
}
tbody > tr:hover > td {
    background-color: #eee;
}