html, body { font: 12px Consolas, monospace; height: 100%; } a:focus { outline: 0; } h1, h2 { font: inherit; margin: 0; } #wrap, #viewport { height: 100%; width: 100%; } #chat .toggle { display: none; } #sidebar { background: #f7f7f9; border-right: 1px solid #e1e1e8; float: left; height: 100%; width: 200px; } #sidebar .header { background: #fff; height: 43px; position: relative; } #sidebar .header .nav { bottom: 0; margin: 0; padding-left: 10px; position: absolute; width: 100%; } #sidebar .header .nav a { line-height: 1em; } #sidebar .header .nav .active a { background: #f7f7f9; } #sidebar .list-group { margin: 10px 0; padding: 0 10px; } #sidebar .list-group-item { padding: 10px 12px; } #sidebar .list-group-item .badge { font-size: 11px; font-weight: normal; margin-top: -1px; } #sidebar .panel { margin: 10px; } #sidebar .panel label { display: inline-block; cursor: pointer; margin-left: 5px; padding: 5px 0; width: 60px; } #sidebar .panel label.first { margin-top: 10px; } #sidebar .panel input[type=checkbox] { float: left; margin-top: 1px; margin-right: 10px; } #chat { bottom: 0; left: 200px; line-height: 16px; position: absolute; right: 0; top: 0; } #chat form { border-top: 1px solid #ddd; bottom: 1px; height: 30px; left: 0; position: absolute; right: 0; } #chat form input { border: 0; font: inherit; height: 30px; margin: 0; outline: none; padding: 0 10px; width: 100%; } #chat .join, #chat .part, #chat .nick, #chat .quit { /* Hidden by default */ display: none; } #chat.show-join .join, #chat.show-part .part, #chat.show-nick .nick, #chat.show-quit .quit { display: block; } #chat .window { background: #fff; display: none; height: 100%; position: absolute; width: 100%; } #chat .window.active { display: block; } #chat .network .close, #chat .network .users { display: none; } #chat .network .title, #chat .network .messages { right: 0; } #chat .query .users { display: none; } #chat .query .title, #chat .query .messages { right: 0; } #chat .title { border-bottom: 1px solid #ddd; height: 43px; left: 0; overflow: hidden; padding-left: 10px; position: absolute; right: 160px; top: 0; } #chat .title h1 { color: #333; display: inline-block; font-size: 18px; line-height: 43px; } #chat .title .btn { float: right; margin: 6px 6px 0 0; } #chat .title .btn:focus { outline: none; } #chat .users { background: #fff; border-left: 1px solid #ddd; bottom: 30px; overflow-y: auto; padding: 4px 0; position: absolute; right: 0; top: 0; width: 160px; } #chat .users .user { display: block; color: #f00; padding: 0 8px; } #chat .messages { bottom: 30px; left: 0; overflow-y: auto; padding: 4px 8px; position: absolute; right: 160px; top: 43px; word-wrap: break-word; z-index: 0; } #chat .message .time { color: #bbb; } #chat .message .user { color: #f00; } #chat .message .text { color: inherit; } #chat .message.join, #chat .message.part, #chat .message.nick, #chat .message.quit, #chat .message.notice, #chat .message.error { color: #999; } @media screen and (max-width: 480px) { #wrap { overflow: hidden; height: 100%; position: relative; width: 100%; } #viewport { -webkit-transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; -webkit-transform: translateX(0); transform: translateX(0); height: 100%; margin-left: -200px; width: 100%; } #viewport.left { -webkit-transform: translateX(200px); transform: translateX(200px); } #viewport.right { -webkit-transform: translateX(-160px); transform: translateX(-160px); } #chat { width: 100%; } #chat .toggle { background: #f00; display: block; font-size: 14px; position: relative; } #chat .toggle a { color: #000; height: 42px; line-height: 46px; width: 46px; position: absolute; text-align: center; } #chat .toggle .left { border-left: 0; left: 0; } #chat .toggle .right { display: none; border-right: 0; right: 0; } #chat .channel .title, #chat .channel .messages { right: 0; } #chat .channel .right { display: inherit; } #chat .title { padding: 0; text-align: center; } #chat .title .btn { display: none; } #chat .users { bottom: 0; right: -160px; } #chat .users a { line-height: 1.8em; } }