#chat, #nickname, #messages { width: 600px; } #chat { position: relative; border: 1px solid #ccc; } #nickname, #connecting { position: absolute; height: 410px; z-index: 100; left: 0; top: 0; background: #fff; text-align: center; width: 600px; font: 15px Georgia; color: #666; display: block; } #nickname .wrap, #connecting .wrap { padding-top: 150px; } #nickname input { border: 1px solid #ccc; padding: 10px; } #nickname input:focus { border-color: #999; outline: 0; } #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; } .connected #connecting { display: none; } .nickname-set #nickname { display: none; } #messages { height: 380px; background: #eee; } #messages em { text-shadow: 0 1px 0 #fff; color: #999; } #messages p { padding: 0; margin: 0; font: 12px Helvetica, Arial; padding: 5px 10px; } #messages p b { display: inline-block; padding-right: 10px; } #messages p:nth-child(even) { background: #fafafa; } #messages #nicknames { background: #ccc; padding: 2px 4px 4px; font: 11px Helvetica; } #messages #nicknames span { color: #000; } #messages #nicknames b { display: inline-block; color: #fff; background: #999; padding: 3px 6px; margin-right: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-shadow: 0 1px 0 #666; } #messages #lines { height: 355px; overflow: auto; overflow-x: hidden; overflow-y: auto; } #messages #lines::-webkit-scrollbar { width: 6px; height: 6px; } #messages #lines::-webkit-scrollbar-button:start:decrement, #messages #lines ::-webkit-scrollbar-button:end:increment { display: block; height: 10px; } #messages #lines::-webkit-scrollbar-button:vertical:increment { background-color: #fff; } #messages #lines::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 3px; } #messages #lines::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #ccc; -webkit-border-radius: 3px; } #messages #lines::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: #fff; -webkit-border-radius: 3px; } #send-message { background: #fff; position: relative; } #send-message input { border: none; height: 30px; padding: 0 10px; line-height: 30px; vertical-align: middle; width: 580px; } #send-message input:focus { outline: 0; } #send-message button { position: absolute; top: 5px; right: 5px; } button { margin: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-block; text-decoration: none; background: #43a1f7; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #377ad0)); background: -webkit-linear-gradient(top, #43a1f7 0%, #377ad0 100%); background: -moz-linear-gradient(top, #43a1f7 0%, #377ad0 100%); background: linear-gradient(top, #43a1f7 0%, #377ad0 100%); border: 1px solid #2e70c4; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; color: #fff; font-family: "lucida grande", sans-serif; font-size: 11px; font-weight: normal; line-height: 1; padding: 3px 10px 5px 10px; text-align: center; text-shadow: 0 -1px 1px #2d6dc0; } button:hover, button.hover { background: darker; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #2e70c4)); background: -webkit-linear-gradient(top, #43a1f7 0%, #2e70c4 100%); background: -moz-linear-gradient(top, #43a1f7 0%, #2e70c4 100%); background: linear-gradient(top, #43a1f7 0%, #2e70c4 100%); border: 1px solid #2e70c4; cursor: pointer; text-shadow: 0 -1px 1px #2c6bbb; } button:active, button.active { background: #2e70c4; border: 1px solid #2e70c4; border-bottom: 1px solid #2861aa; text-shadow: 0 -1px 1px #2b67b5; } button:focus, button.focus { outline: none; -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0; box-shadow: 0 1px 0 0 rgba(255,255,255,0.4), 0 0 4px 0 #377ad0; }