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