@font-face {
    font-family: "topaz-8";
    src: url("fonts/topaz-8.eot");
    src: local("☺"),
    url("fonts/topaz-8.otf") format("opentype"),
    url("fonts/topaz-8.woff") format("woff"),
    url("fonts/topaz-8.svg") format("svg");
}

body {
    margin: 0;
}

#content {
    width: 81em;
    margin: 0 auto;
    margin-top: 5em;
    margin-bottom: 5em;
    white-space: nowrap;
}

body, pre {
    background-color: black;
    color: rgb(0, 170, 0); /* green */
    font-family: "topaz-8", courier, monospace;
    font-size: 16px;
    line-height: 16px;
}

span.who {
    color: rgb(170, 0, 0);
}

a, a:visited, a:active, a:hover {
    text-decoration: none;
    color: rgb(170, 170, 170); /* gray */
}

/*
green: 0, 170, 0;
red: 170, 0, 0;
brown: 170, 85, 0;
blue: 0, 0, 170;
magenta: 170, 0, 170;
cyan: 0, 170, 170;
gray: 170, 170, 170;
*/

#heading, .menu {
    margin: none;
}
#heading {
    margin-bottom: 2em;
}

#cursor, #player-cursor, #player-volume {
    color: rgb(0, 170, 170);
}

#cursor:after {
    content: ' ';
}

#cursor.active:after {
    content: '*';
}

.menu {
    display: inline-block;
    vertical-align: top;
}
.menu.left {
    margin-left: 0em;
}

#heading .sig {
    color: rgb(0, 170, 170); /* cyan */
}

#heading .dot {
    color: rgb(170, 0, 170); /* magenta */
}

#heading .hi {
    color: rgb(85, 255, 85); /* bright green */
}

.menu .tune {
    color: rgb(170, 170, 170); /* gray */
}

.menu .tune.current {
    color: rgb(255, 255, 255);
}

.menu .time {
    color: rgb(170, 85, 0); /* brown */
}

#footer {
    margin-top: 2em;
    color: rgb(80, 80, 80);
}

#footer a, #footer a:visited, #footer a:active, #footer a:hover {
    color: rgb(0, 80, 80);
}

#player {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
}

#custom-player {
    position: fixed;
    bottom: 0;
    margin: 0;
    background-color: #000;
}

@media only screen and (max-device-width: 480px) {
    #custom-player {
        position: static;
    }
}

#custom-player .position, #custom-player .volume {
    position: relative;
}

#player-cursor, #player-volume {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#custom-player .play, #custom-player .pause, #custom-player .position, #custom-player .volume {
    color: rgb(170, 170, 170);
    cursor: pointer;
}

#custom-player.playing .play, #custom-player.paused .pause {
    color: rgb(255, 255, 255);
}

#custom-player .current-time, #custom-player .total-time {
    color: rgb(170, 85, 0);
}