| body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #pageContainer { |
| display: -webkit-box; |
| position: fixed; |
| -webkit-box-orient: vertical; |
| -webkit-box-align: stretch; |
| height: 100%; |
| width: 100%; |
| } |
| |
| #headerContainer { |
| display: -webkit-box; |
| height: 32px; |
| -webkit-box-orient: horizontal; |
| -webkit-box-align: stretch; |
| } |
| |
| #pageControls { |
| position: absolute; |
| right: 0px; |
| font-family: Verdana, sans-serif; |
| font-size: 16px; |
| color: #aaaaaa; |
| padding: 8px; |
| } |
| |
| #pageControls *, .removeButton, .channel, .messageLine * { |
| display: inline-block; |
| } |
| |
| .addControlLabel { |
| margin-left: 20px; |
| } |
| |
| .addButton { |
| background-color: #aaaaaa; |
| color: white; |
| } |
| |
| #slideContainer { |
| display: -webkit-box; |
| -webkit-box-flex: 1; |
| position: relative; |
| } |
| |
| #channelSlides { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .channelSlide { |
| position: absolute; |
| width: 80%; |
| height: 100%; |
| background: -webkit-linear-gradient(#aaa, white); |
| -webkit-transition: margin 0.25s ease-in-out; |
| } |
| |
| .channelSlide.far-left { |
| margin-left: -160%; |
| } |
| |
| .channelSlide.left { |
| margin-left: -75%; |
| } |
| |
| .channelSlide.center { |
| margin-left: 10%; |
| } |
| |
| .channelSlide.right { |
| margin-left: 95%; |
| } |
| |
| .channelSlide.far-right { |
| margin-left: 180%; |
| } |
| |
| .channelControls { |
| position: absolute; |
| z-index: 1; |
| right: 0px; |
| top:0px; |
| color: white; |
| text-align: right; |
| padding: 8px; |
| font-family: "Verdana", sans-serif; |
| font-size: 20px; |
| } |
| |
| .channelControls .removeButton { |
| background-color: white; |
| color: #999999; |
| padding: 0px 6px 4px 6px; |
| height: |
| } |
| |
| .channelSlideContainer { |
| position: relative; |
| display: -webkit-box; |
| -webkit-box-orient: vertical; |
| -webkit-box-align: stretch; |
| height: 100%; |
| width: 100%; |
| } |
| |
| .messageListContainer { |
| overflow: hidden; |
| position: relative; |
| display: -webkit-box; |
| -webkit-box-flex: 1; |
| } |
| |
| .messageListSpacer { |
| display: -webkit-box; |
| -webkit-box-flex: 0; |
| height: 40px; |
| width: 100%; |
| } |
| |
| .messageLine { |
| margin: 6px; |
| color: #999999; |
| font-family: "Lucida Console", Monospace; |
| font-size: 14px; |
| } |
| |
| .messageList { |
| position: absolute; |
| bottom: 0; |
| } |
| |
| #typingDiv { |
| position: fixed; |
| z-index: 4; |
| width: 80%; |
| height: 30px; |
| margin: 10px; |
| margin-left: 10%; |
| bottom: 0px; |
| -webkit-box-shadow: 3px 3px 5px #888; |
| } |
| |
| #entryText { |
| width: 100%; |
| border: 0px; |
| height: 100%; |
| padding-left: 8px; |
| padding-right: 8px; |
| font-family: "Lucida Console", Monospace; |
| color: white; |
| border: 0px; |
| background: #777777; |
| } |