rob@100: #chat,
rob@100: #nickname,
rob@100: #messages {width: 350px; }
rob@100: #chat {
rob@100:   position: relative;
rob@100:   border: 0px solid #ccc;
rob@100:   background: white;
rob@100:   border-radius: 15px;
rob@100: }
rob@100: #nickname,
rob@100: #connecting {
rob@100:   position: absolute;
rob@100:   height: 585px;
rob@100:   z-index: 100;
rob@100:   left: 0;
rob@100:   top: 0;
rob@100:   background: white;
rob@100:   text-align: center;
rob@100:   width: 350px;
rob@100:   font: 15px Georgia;
rob@100:   color: white;
rob@100:   display: block;
rob@100: }
rob@100: #nickname .wrap,
rob@100: #connecting .wrap {
rob@100:   padding-top: 60px;
rob@100: }
rob@100: #nickname input {
rob@100:   border: 1px solid #ccc;
rob@100:   padding: 10px;
rob@100: }
rob@100: #nickname input:focus {
rob@100:   border-color: #999;
rob@100:   outline: 0;
rob@100: }
rob@100: #nickname #nickname-err {
rob@100:   color: #8b0000;
rob@100:   font-size: 12px;
rob@100:   visibility: hidden;
rob@100: }
rob@100: .connected #connecting {
rob@100:   display: none;
rob@100: }
rob@100: .nickname-set #nickname {
rob@100:   display: none;
rob@100: }
rob@100: #messages {
rob@100:   height: 560px;
rob@100:   !background: #eee;
rob@100:   background: white;
rob@100: }
rob@100: #messages em {
rob@100:   !text-shadow: 0 1px 0 #fff;
rob@100:   !color: #999;
rob@100:   color: white;
rob@100: }
rob@100: #messages p {
rob@100:   padding: 0;
rob@100:   margin: 0;
rob@100:   font: 11px Helvetica, Arial;
rob@100:   padding: 0px 10px;
rob@100:   color: white;
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: #messages p:nth-child(even) {
rob@100:   !background: #fafafa;
rob@100:   background: white;
rob@100:   color: white;
rob@100: }
rob@100: #messages #nicknames {
rob@100:   background: white;
rob@100:   padding: 2px 4px 4px;
rob@100:   font: 11px Helvetica;
rob@100:   color: white;
rob@100: }
rob@100: #messages #nicknames span {
rob@100:   
rob@100:   color: white;
rob@100: }
rob@100: #messages #nicknames b {
rob@100:   display: inline-block;
rob@100:   background: white;
rob@100:   margin-right: 5px;
rob@100:   color: yellow;
rob@100: }
rob@100: #messages #lines {
rob@100:   height: 540px;
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: gray;
rob@100:   position: relative;
rob@100:   border-radius:5px;
rob@100: }
rob@100: #send-message input {
rob@100:   border: none;
rob@100:   height: 20px;
rob@100:   padding: 0 0px;
rob@100:   line-height: 20px;
rob@100:   vertical-align: middle;
rob@100:   width: 330px;
rob@100:   background:gray;
rob@100:   color: yellow;
rob@100:   border-radius:5px;
rob@100: }
rob@100: #send-message input:focus {
rob@100:   outline: 0;
rob@100: }
rob@100: #send-message button {
rob@100:   position: absolute;
rob@100:   top: 3px;
rob@100:   right: 5px;
rob@100: }
rob@100: button {
rob@100:   margin: 0;
rob@100:   -webkit-user-select: none;
rob@100:   -moz-user-select: none;
rob@100:   user-select: none;
rob@100:   display: inline-block;
rob@100:   text-decoration: none;
rob@100:   background: #43a1f7;
rob@100:   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #377ad0));
rob@100:   background: -webkit-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
rob@100:   background: -moz-linear-gradient(top, #43a1f7 0%, #377ad0 100%);
rob@100:   background: linear-gradient(top, #43a1f7 0%, #377ad0 100%);
rob@100:   border: 1px solid #2e70c4;
rob@100:   -webkit-border-radius: 16px;
rob@100:   -moz-border-radius: 16px;
rob@100:   border-radius: 16px;
rob@100:   color: #fff;
rob@100:   font-family: "lucida grande", sans-serif;
rob@100:   font-size: 11px;
rob@100:   font-weight: normal;
rob@100:   line-height: 1;
rob@100:   !padding: 3px 10px 5px 10px;
rob@100:   text-align: center;
rob@100:   text-shadow: 0 -1px 1px #2d6dc0;
rob@100: }
rob@100: button:hover,
rob@100: button.hover {
rob@100:   background: darker;
rob@100:   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43a1f7), color-stop(1, #2e70c4));
rob@100:   background: -webkit-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
rob@100:   background: -moz-linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
rob@100:   background: linear-gradient(top, #43a1f7 0%, #2e70c4 100%);
rob@100:   border: 1px solid #2e70c4;
rob@100:   cursor: pointer;
rob@100:   text-shadow: 0 -1px 1px #2c6bbb;
rob@100: }
rob@100: button:active,
rob@100: button.active {
rob@100:   background: #2e70c4;
rob@100:   border: 1px solid #2e70c4;
rob@100:   border-bottom: 1px solid #2861aa;
rob@100:   text-shadow: 0 -1px 1px #2b67b5;
rob@100: }
rob@100: button:focus,
rob@100: button.focus {
rob@100:   outline: none;
rob@100:   -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
rob@100:   -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
rob@100:   box-shadow: 0 1px 0 0 rgba(255,255,255,0.40), 0 0 4px 0 #377ad0;
rob@100: }