body {
    font-family: sans-serif;
    max-width: 62.5em;
}
h1, p {
    margin: 0.33em 0;
}
.heading {
    position: relative;
}
h1 {
    font-size: 200%;
}
h2 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    position: absolute;
    right: 0;
    bottom: 0;
}

.heading, .options {
    width: auto;
    margin: 0 1em;
}
.left {
    float: left;
    clear: both;
}
.right {
    float: right;
}

.ascii {
    width: auto;
    max-width: inherit;
    margin: 0 1em 0.33em 1em;
    padding: 0;
    border-collapse: collapse;
}
.ascii th, .ascii td {
    border: 1px solid #7587a3;
    margin: 0;
    width: 3.6em;
    padding: 0;
    text-align: center;
}
.ascii th {
    background: #d0d9e8;
    padding: 0.5em;
}
.ascii td {
    background: #f0f2f5;
}

.ascii .nonprint {
    background: #e7f5f5;
}
.ascii .print.alpha, .ascii .print.num {
    background: #f7fff5;
    /* border: 1px solid #adb8c7; */
}

.ascii .container {
    width: 100%;
    height: 100%;
    min-width: 2em;
    height: 3.6em;
    padding: 0;
    margin: 0;
    position: relative;
}
.ascii p {
    padding: 0;
    margin: 0;
}
.ascii acronym {
    border-bottom: 1px dotted #c2c9d1 !important;
}
.ascii .named, .ascii .ctrl {
    width: 2em;
    margin: 0 auto;
    padding: 1.2em 0;
}
.ascii .named {
}
.ascii .char {
    font-family: "Inconsolata", "DejaVu Sans Mono",
        "Bitstream Vera Sans Mono", "Monaco", "Panic Sans",
        "Lucida Sans Typewriter", "Lucida Console", "Consolas", sans-serif;
    font-size: 133%;
    padding: 0.75em 0;
}
.ascii .esc {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    color: #3ca06b;
    font-size: xx-small;
}
.dec, .hex, .oct {
    position: absolute;
    right: 0.25em;
    bottom: 0.25em;
    color: #bb88bb;
    font-size: xx-small;
}
.hex, .oct, .ctrl {
    display: none;
}