* { box-sizing: border-box; } html, body { height: 100%; font: 14px sans-serif; margin: 0; } h1, h2 { margin: 0; } ul, li { list-style: none; margin: 0; padding: 0; } a { color: #1abc9c; text-decoration: none; transition: all .25s; word-break: break-all; } a:hover { text-decoration: underline; } a:focus, button:focus, input { outline: 0; } button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; margin: 0; padding: 0; } button::-moz-focus-inner { padding: 0; border: 0; } .btn { border: 2px solid #bdc3c7; border-radius: 3px; color: #aeb6bf; padding: 8px 12px; text-decoration: none; transition: all .25s; } .btn:hover { border-color: #7f8c8d; color: #7f8c8d; text-decoration: none; } #wrap { height: 100%; min-width: 640px; width: 100%; } #sidebar { border-right: 4px solid #bdc3c7; position: absolute; overflow-y: auto; height: 100%; width: 220px; } #sidebar h2 { color: #aeb6bf; font: bold 13px sans-serif; padding: 6px 12px; text-transform: uppercase; } #networks { margin: 20px; } #networks button { border-radius: 3px; color: #1abc9c; display: block; font-size: 15px; font-weight: bold; line-height: 21px; margin-bottom: 3px; padding: 6px 13px; text-align: left; transition: all .25s; white-space: nowrap; width: 100%; } #networks button:hover { background-color: #f1f2f3; } #networks button.active { background-color: #ebedef; color: #526476; } #networks .network + .network { border-top: 2px solid #ebedef; margin-top: 14px; padding-top: 14px; } #networks .badge { background: #f7f9fa; border-radius: 4px; color: #aeb6bf; float: right; font: 12px sans-serif; line-height: 21px; padding: 0 6px; } #networks .badge.highlight { background: #f8e2e2; color: #e74c3c; } #networks .badge:empty { display: none; } #main { position: absolute; height: 100%; left: 220px; right: 0; } #main .window { background: #fff; height: 100%; position: absolute; width: 100%; } #chat { font: 13px "Consolas", monospace; height: 100%; } #chat form { bottom: 0; height: 35px; position: absolute; right: 0; left: 0; } #chat form .input { border: 0; border-top: 1px solid #bdc3c7; height: 35px; padding: 0 10px; width: 100%; } #chat form .hint { color: #bdc3c7; } #chat .lobby .messages, #chat .query .messages { right: 0; } #chat .lobby .users, #chat .query .users { display: none; } #chat .messages, #chat .users { bottom: 35px; overflow: hidden; overflow-y: scroll; position: absolute; top: 0; } #chat .messages { box-shadow: inset 140px 0 #f3f5f5; left: 0px; padding: 4px 0; right: 160px; } #chat .messages .user { color: #95a5a6; } #chat .user, #chat .highlight .user, #chat .normal .user, #chat .topic .user { color: #e74c3c; transition: all .1s; } #chat .user:hover { color: #000; } #chat .action, #chat .action .user { color: #f39c12; } #chat .action .user:before { content: '* '; } #chat .show-more { display: none; margin: 6px 8px 4px 148px; } #chat .show-more .btn { width: 100%; } #chat .msg { display: table-row; line-height: 1.4; } #chat .msg span { display: table-cell; } #chat .from { background: #f3f5f5; max-width: 140px; min-width: 140px; overflow: hidden; padding: 2px 8px; text-align: right; white-space: nowrap; } #chat .type { color: #bdc3c7; display: none; } #chat .join .type, #chat .kick .type, #chat .mode .type, #chat .nick .type, #chat .part .type, #chat .topic .type, #chat .quit .type { display: inline; } #chat .text { padding: 2px 8px; width: 100%; } #chat .nick .text { color: #95a5a6; } #chat .highlight { background: #fcf8e3; color: #8a6d3b; } #chat .highlight .from { background: #faebcc; } #chat .highlight .time { color: #d3c2a5; } #chat .time { color: #dee0e2; padding: 2px 10px; } #chat .users { background: #fff; border-left: 4px solid #bdc3c7; padding-bottom: 6px; right: 0; width: 160px; } #chat .users li { display: table-row; text-align: left; } #chat .users .user { padding: 4px 12px; text-align: left; width: 160px; } #chat .count { background: #ecf0f1; color: #aeb6bf; margin-bottom: 4px; } #chat .count span { display: block; padding: 10px 12px; } #chat .count + li .user { padding-top: 8px }