#chatspace { background-color: black; border-left: 1px solid #424242; } #chatspace * { -webkit-user-select: text; user-select: text; } #chatconversation { visibility: hidden; position: relative; top: 5px; padding: 5px; text-align: left; line-height: 20px; font-size: 10pt; width: 100%; height: 90%; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; } .localuser { color: #087dba; } .errorMessage { color: red; } .remoteuser { color: white; } #usermsg { visibility:hidden; position: absolute; bottom: 0px; right: 0px; width: 83%; height: 30px; padding: 5px 5px 5px 0px; max-height:150px; min-height:35px; border: 0px none; background: #3a3a3a; color: #a7a7a7; box-shadow: none; border-radius:0; font-size: 10pt; line-height: 30px; overflow: hidden; resize: none; } #usermsg:hover { border: 0px none; box-shadow: none; } #nickname { position: absolute; text-align: center; color: #9d9d9d; font-size: 18px; top: 100px; left: 5px; right: 5px; width: 95%; } #nickinput { margin-top: 20px; font-size: 14px; background: #3a3a3a; box-shadow: inset 0 0 3px 2px #a7a7a7; border: 1px solid #a7a7a7; color: #a7a7a7; } #unreadMessages { font-size: 8px; position: absolute; left: 46%; top: 27% } #bottomUnreadMessages { top: 5px; left: 10px; position: absolute; font-size: 8px; } #chatspace .username { float: left; padding-left: 5px; font-weight: bold; } #chatspace .timestamp { float: right; padding-right: 5px; font-size: 11px; } #chatspace .usermessage { padding-top: 20px; padding-left: 5px; } .chatArrow { position: absolute; height: 15px; left: 5px; } .chatmessage { background: #3a3a3a; width: 93%; margin-left: 5%; margin-right: auto; border-radius: 5px; border-top-left-radius: 0px; margin-top: 3px; left: 5px; color: #a7a7a7; overflow: hidden; padding-bottom: 3px; } .smiley { height: 26px; } #smileys { position: absolute; bottom: 7px; right: 5px; background: white; border-radius: 50px; height: 26px; margin: auto; cursor: pointer; } #smileys img { width: 22px; padding: 2px; } #smileysarea { position: absolute; bottom: 0px; left: 0px; width: 17%; min-width: 31px; height: 40px; padding: 0px; max-height:150px; min-height:35px; border: 0px none; background: #3a3a3a; overflow: hidden; visibility: hidden; } #smileysContainer { display: none; position: absolute; background: #3a3a3a; border-bottom: 1px solid; border-top: 1px solid; width: 100%; bottom: 10%; } #smileysContainer .smiley { padding: 7px; } .smileyContainer { width: 40px; height: 40px; display: inline-block; } .smileyContainer:hover { background: #3e3e3e; } #usermsg::-webkit-input-placeholder { line-height: 30px; } ::-webkit-scrollbar { background: #06a5df; width: 7px; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-track { background: black; } ::-webkit-scrollbar-track-piece { background: black; } ::-webkit-scrollbar-thumb { background: #06a5df; border-radius: 4px; } #usermsg::-webkit-scrollbar-track-piece { background: #3a3a3a; }