#chat, #nickname, #messages { width: 250px; } #chat { position: relative; border: 0px solid #ccc; background: black; border-radius: 15px; } #nickname, #connecting { position: absolute; height: 125px; z-index: 100; left: 0; top: 0; background: black; text-align: center; width: 250px; font: 15px Georgia; color: white; display: block; } #nickname .wrap, #connecting .wrap {padding-top: 30px; } #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: 100px; background: black; } #messages em { color: white; } #messages p { padding: 0; margin: 0; font: 14px Helvetica, Arial; padding: 0px 10px; color: white; } #messages p b { display: inline-block; padding-right: 10px; color: white; } #messages p:nth-child(even) { background: black; color: white; } #messages #nicknames { background: black; padding: 2px 4px 4px; font: 11px Helvetica; color: white; } #messages #nicknames span { color: #000; color: white; } #messages #nicknames b { display: inline-block; background: black; margin-right: 5px; color: yellow; } #messages #lines { height: 80px; 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: black; position: relative; border-radius:5px; } #send-message input { border: none; height: 20px; padding: 0 0px; line-height: 20px; vertical-align: middle; width: 200px; background:black; color: yellow; border-radius:5px; border: 1px solid white; } #send-message input:focus { outline: 0; } #send-message button { position: absolute; top: 3px; right: 5px; } button { margin: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-block; text-decoration: none; background: white; border: 1px solid #2e70c4; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; color: black; font-family: "lucida grande", sans-serif; font-size: 11px; font-weight: normal; line-height: 1; text-align: center; text-shadow: 0 -1px 1px #2d6dc0; } button:hover, button.hover { background: white; 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.40), 0 0 4px 0 #377ad0; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0; box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0; }