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