body {
    background: rgb(52, 52, 52); color: rgb(240, 240, 240);
    font-family: "Segoe UI", "Tahoma", "Lucida Grande", "Lucida Sans Unicode", "Lucida", "Arial", sans-serif;
    font-size: 92%; line-height: 1.4;
    margin: 0; padding: 1em;
}
:link, :visited { color: rgb(152, 216, 255); text-decoration: none; }
h1 { font-size: 125%; font-weight: bold; }
h1 > span { font-size: 80%; font-weight: normal; }
h2 { font-size: 100%; font-weight: bold; }
h1, p { margin-top: 0; }
ul { padding-left: 1em; margin-left: 0 }

/* Main page layout */
#player-page { margin-bottom: 0 }
#listener-page { padding-right: 24em; }
#wide-content { margin-right: -24em; }

#sidebar {
    position: absolute;
    top: 0; right: 0;
    width: 24em; height: 12em 
}
#sidebar iframe {
    width: 100%; height: 100%; 
    border: none; padding: 0; margin: 0;
}

/* Tabs */
#tabs  {
    border-bottom: solid gray 1px;
    padding-left: 1em;
}
#tabs > button {
    position: relative;
    top: 0.3em;
    color: silver;
    background: rgb(44, 44, 44);

    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: gray black rgb(52, 52, 52) gray;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    outline: none;
    padding: 6px 10px 4px 10px;
    margin-right: 2px;
}
.content-chat #tabs > .tab-chat,
.content-schedule #tabs > .tab-schedule,
.content-dj #tabs > .tab-dj {
    top: 1px;
    color: rgb(240, 240, 240);
    background: rgb(52, 52, 52);
    border-width: 1px;
    padding-bottom: 0.5em;
}

.content {
    display: none;
}
.content-chat > #chat,
.content-schedule > #schedule,
.content-dj > #dj {
    display: block;
}

/* Chat */
#irc {
    position: absolute;
    left: 1em; right: 1em;
    top: 12em; bottom: 1em;
    min-height: 24em;
}
iframe {
    width: 100%; height: 100%;
    border: none;
    padding: 0;
}

/* Schedule */
#timetable { table-layout: fixed; width: 100%; max-width: 50em; border-spacing: 0.25em; }
#timetable tr { vertical-align: top; }
#timetable td, #timetable th { height: 0.8em; }
#timetable>thead>tr>td { width: 5em; }
#timetable>thead>tr>th.noshow { color: rgb(80, 80, 80); width: 3em; }
#timetable>tbody>tr.hour>th, #timetable>tbody>tr.hour>td { border-top: solid rgb(80, 80, 80) 1px; }

#timetable td.show {
    background: rgb(80, 80, 80);
    border-radius: 0 0 0.5em 0.5em;
    padding: 0 0.25em 0.25em;
}

.notes { font-size: 88%; }
.now { background: rgb(0, 64, 128) !important; }
.otherday { color: rgb(80, 80, 80); }

/* Player */
.metadata, audio {
    width: 24em; max-width: 100%;
}
.metadata {
    height: 4.25em; padding: 6px 0;
    margin-bottom: 0.5em;
    background: rgb(24, 24, 24);
    border-radius: 5px;
}
.metadata div {
    width: 100%; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metadata .metadata-genre, .metadata .metadata-listeners, .metadata .metadata-bitrate {
    float: left; width: 33%;
}
#links {
    text-align: center;
}

/* Single column when narrow device */
@media (max-width: 40rem) {
    #listener-page {
        padding-right: 0;
        padding-top: 0;
        margin-top: 12em;
    }
    #wide-content { margin-right: 0; }
    #irc {
        top: 20em;
        left: 0; right: 0;
    }
}
@media (max-width: 32rem) {
    body {
        font-size: 80%;
    }
}