* { 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 .network + .network { border-top: 2px solid #ebedef; margin-top: 14px; padding-top: 14px; } #networks .channel { 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.active { background-color: #ebedef; color: #526476; } #networks button:hover { background-color: #f1f2f3; } #networks button:hover .badge { opacity: 0; } #networks button:hover .close { opacity: .2; } #networks .close { background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMi44NzIsMS41NjJjMC4xOTUsMC4xOTQsMC4xOTUsMC41MTMsMCwwLjcwN0w4Ljk4Myw2LjE2Yy0wLjE5MywwLjE5NC0wLjE5MywwLjUxMywwLDAuNzA4bDMuODg3LDMuODkyDQoJYzAuMTk1LDAuMTk0LDAuMTk1LDAuNTEzLDAsMC43MDdsLTEuNDE2LDEuNDEzYy0wLjE5MywwLjE5NC0wLjUxMiwwLjE5NC0wLjcwNywwTDYuODYyLDguOTg4Yy0wLjE5NC0wLjE5NC0wLjUxMy0wLjE5NC0wLjcwNywwDQoJbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUtMC41MTMsMC4xOTUtMC43MDcsMGwtMS40MTQtMS40MTZjLTAuMTk0LTAuMTkzLTAuMTk0LTAuNTEyLDAtMC43MDdsMy44OS0zLjg4OQ0KCWMwLjE5NC0wLjE5NCwwLjE5NC0wLjUxMywwLTAuNzA4TDAuMTQ4LDIuMjY2Yy0wLjE5NC0wLjE5NS0wLjE5NC0wLjUxMywwLTAuNzA3bDEuNDE1LTEuNDE0YzAuMTk0LTAuMTk0LDAuNTEzLTAuMTk0LDAuNzA3LDANCglsMy44ODUsMy44OTFjMC4xOTQsMC4xOTUsMC41MTMsMC4xOTUsMC43MDcsMC4wMDFsMy44ODgtMy44OWMwLjE5NS0wLjE5MywwLjUxNC0wLjE5MywwLjcwNywwTDEyLjg3MiwxLjU2MnoiLz4NCjwvc3ZnPg0K); background-size: 50%; background-position: 6px 6px; border-radius: 2px; height: 19px; margin-top: 1px; opacity: 0; position: absolute; right: 28px; transition: all .25s; width: 20px; } #networks .close:hover { background-color: rgba(0, 0, 0, .1); opacity: .6 !important; } #networks .badge { background: #f7f9fa; border-radius: 4px; color: #aeb6bf; float: right; font: 12px sans-serif; line-height: 21px; padding: 0 6px; position: absolute; right: 28px; transition: all .25s; } #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: 4px 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 }