rc@74: #chat,
rob@91: #nickname,
rc@74: #messages {
rob@81:   width: 180px;
rob@81:   height:90%;
rc@74: }
rob@81: 
rc@74: #chat {
rc@74:   position: relative;
rc@74:   border: 0px solid #ccc;
rc@74:   border-radius: 15px;
rob@81:   height:100%;
rc@74: }
rob@91: 
rob@91: #nickname,
rc@74: #connecting {
rc@74:   position: absolute;
rob@81:   height: 90%;
rc@74:   z-index: 100;
rob@95:   left: -900px;
rc@74:   top: 0;
rob@95:   background: black;
rc@74:   text-align: center;
rob@95:   width: 750px;
rc@74:   font: 15px Georgia;
rob@81:   color: orange;
rob@95:   opacity:0.9;
rc@74:   display: block;
rob@97: border:2px solid red;
rc@74: }
rob@95: 
rc@74: #nickname .wrap,
rob@95: #connecting .wrap {padding-top: 130px; }
rob@97: #nickname input { border: 1px solid #ccc; padding: 10px; margin-top:30px;}
rc@74: #nickname input:focus { border-color: #999; outline: 0; }
rc@74: #nickname #nickname-err { color: #8b0000; font-size: 12px; visibility: hidden; }
rob@95: 
rc@74: .connected #connecting { display: none; }
rob@95: 
rob@95: .nickname-set #nickname { 
rob@95:     display: none; 
rob@95: }
rob@95: 
rob@81: #messages { 
rob@97:     height: 50%; 
rob@97:     background: gray;
rob@97:     border: 1px solid red;
rob@97:     border-radius:10px;
rob@97:     padding:5px;
rob@97:     position:relative;
rob@97:     right:4px;
rob@97:     opacity:0.9;
rob@81: }
rob@81: 
rob@81: #messages em { color: white; }
rob@95: 
rc@74: #messages p {
rc@74:   padding: 0;
rc@74:   margin: 0;
rc@74:   font: 14px Helvetica, Arial;
rc@74:   padding: 0px 10px;
rob@81:   color: white;
rc@74: }
rob@95: 
rc@74: #messages p b {
rc@74:   display: inline-block;
rc@74:   padding-right: 10px;
rob@81:   color: white;
rc@74: }
rc@74: 
rc@74: #messages p:nth-child(even) {
rob@97:   background: green;
rob@81:   color: white;
rc@74: }
rob@95: 
rc@74: #messages #nicknames {
rob@97:   background: white;
rob@97:   border: 1px solid purple;
rc@74:   padding: 2px 4px 4px;
rob@81:   margin-top:12px;
rc@74:   font: 11px Helvetica;
rob@97:   color: purple;
rob@97:   min-height:10px;
rc@74: }
rc@74: #messages #nicknames span {
rob@81:   color: orange;
rc@74: }
rc@74: #messages #nicknames b {
rc@74:   display: inline-block;
rob@81:   background: gray;
rc@74:   margin-right: 5px;
rob@81:   color: white;
rc@74: }
rc@74: #messages #lines {
rob@81:   height: 90%;
rob@81:   overflOw: auto;
rc@74:   overflow-x: hidden;
rc@74:   overflow-y: auto;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar {
rc@74:   width: 6px;
rc@74:   height: 6px;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar-button:start:decrement,
rc@74: #messages #lines ::-webkit-scrollbar-button:end:increment {
rc@74:   display: block;
rc@74:   height: 10px;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar-button:vertical:increment {
rc@74:   background-color: #fff;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar-track-piece {
rc@74:   background-color: #fff;
rc@74:   -webkit-border-radius: 3px;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar-thumb:vertical {
rc@74:   height: 50px;
rc@74:   background-color: #ccc;
rc@74:   -webkit-border-radius: 3px;
rc@74: }
rc@74: #messages #lines::-webkit-scrollbar-thumb:horizontal {
rc@74:   width: 50px;
rc@74:   background-color: #fff;
rc@74:   -webkit-border-radius: 3px;
rc@74: }
rc@74: #send-message {
rob@91:   background: white;
rob@81:   border-radius:1px;
rob@81:   position:relative;
rob@97:   bottom:60px;
rob@97:   padding-left:15px;
rob@97:   width:80%;
rob@97:   background:transparent;
rc@74: }
rob@97: 
rc@74: #send-message input {
rc@74:   height: 20px;
rc@74:   line-height: 20px;
rc@74:   vertical-align: middle;
rob@97:   width: 95%;
rob@97:   padding-left:15px;
rc@74: }
rob@91: 
rc@74: #send-message input:focus {
rc@74:   outline: 0;
rc@74: }