@font-face {
    font-family: 'FixedsysTTFMonospaced';
    src: url('font/fixedsys500c-webfont.eot');
    src: url('font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/fixedsys500c-webfont.woff') format('woff'),
         url('font/fixedsys500c-webfont.ttf') format('truetype'),
         url('font/fixedsys500c-webfont.svg#FixedsysTTFMonospaced') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #c0c0c0;
    font-family: 'FixedsysTTFMonospaced';
    font-size: 15px;
}

/* Root */
#irc {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Main split */
#main {
    flex: 1;
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid #888;
}

/* Chat area */
#chat {
    flex: 1;
    padding: 6px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Users list */
#users {
    width: 180px;
    border-left: 1px solid #888;
    padding: 6px;
    background: #e0e0e0;
}

#users ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#users li {
    cursor: default;
}

/* Input bar */
#inputBar {
    display: flex;
    align-items: center;
    padding: 4px;
    background: #dcdcdc;
    border-top: 1px solid #888;
}

#inputBar span {
    margin-right: 6px;
}

#inputTxt {
    flex: 1;
    height: 26px;
    border: 1px solid #888;
    font-family: 'FixedsysTTFMonospaced';
    font-size: 15px;
    padding: 2px 4px;
    outline: none;
}