article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid, input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } body { background: #fff; color: #565656; font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif; font-style: normal; font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: #3c3c3c; } h3 { margin-top: 0; font-size: 14px; } #pages { position: absolute; top: 0px; right: 0px; left: 181px; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #pages .scroll-container { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } #connectionOverlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; -webkit-transition: all 0.25s linear 0; -o-transition: all 0.25s linear 0; transition: all 0.25s linear 0; -moz-transition: all 0.25s linear 0; } #connectionOverlay.connected { height: 0px; } #connectionOverlay.connected #connectionStatus { top: -200px; } #connectionStatus { height: 75px; width: 400px; top: 30%; left: 50%; margin-left: -200px; position: absolute; z-index: 10; text-align: center; } #connectionStatus p { padding: 0 0 20px 0; margin: 0; } #connectionStatus button { position: relative; top: -1px; } #menu { position: fixed; top: 0px; bottom: 0px; left: 0px; width: 180px; background-color: #0b1316; z-index: 300; overflow-y: auto; overflow-x: hidden; -webkit-backface-visibility: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #menu .main { margin-bottom: 10px; } #menu .main li { list-style-type: none; margin: 10px 0 5px 0; text-align: center; } #menu .main li:last-child { margin: 0; } #menu .main li svg { position: absolute; top: 50%; left: 10px; margin-top: -13px; fill: #fff; } #menu .main li a { position: relative; width: 130px; } #menu .main li .button { background: #1f2d49; } #menu .main li .button:hover { background: #2b3f65; } #menu h1 { font-size: 10px; margin: 0; padding: 20px 10px; color: #fff; text-transform: uppercase; } #roster li, #bookmarks li { list-style-type: none; padding: 7px 35px 7px 10px; margin: 0px; position: relative; min-height: 30px; font-size: 12px; color: #fff; cursor: pointer; -webkit-transition: all 0.3s ease-in 0; -o-transition: all 0.3s ease-in 0; transition: all 0.3s ease-in 0; -moz-transition: all 0.3s ease-in 0; -webkit-transition: all 0.3s ease-in 0; -moz-transition: all 0.3s ease-in 0; } #roster li .unread:not(:empty), #bookmarks li .unread:not(:empty) { display: block; } #roster li:hover, #bookmarks li:hover { background: #1f2d49; } #roster li.online:after, #bookmarks li.online:after, #roster li.chat:after, #bookmarks li.chat:after, #roster li.dnd:after, #bookmarks li.dnd:after, #roster li.away:after, #bookmarks li.away:after, #roster li.xa:after, #bookmarks li.xa:after { content: ''; position: absolute; top: 50%; right: 15px; height: 8px; width: 8px; margin-top: -4px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -o-border-radius: 10px; -border-radius: 10px; border-radius: 10px; } #roster li.online:after, #bookmarks li.online:after, #roster li.chat:after, #bookmarks li.chat:after { background: #427a00; } #roster li.dnd:after, #bookmarks li.dnd:after { background: #c50041; } #roster li.away:after, #bookmarks li.away:after, #roster li.xa:after, #bookmarks li.xa:after { background: #f57900; } #roster li.offline:not(:hover) .name, #bookmarks li.offline:not(:hover) .name { color: #6e6e6e; } #roster li.offline:not(:hover) .status, #bookmarks li.offline:not(:hover) .status { color: #404040; } #roster li.offline:not(:hover) img, #bookmarks li.offline:not(:hover) img { opacity: 0.25; } #roster li.activeContact, #bookmarks li.activeContact, #roster li.offline.activeContact, #bookmarks li.offline.activeContact { background: #fff; font-weight: bold; } #roster li.activeContact .name, #bookmarks li.activeContact .name, #roster li.offline.activeContact .name, #bookmarks li.offline.activeContact .name { color: #565656; } #roster li.composing:after, #bookmarks li.composing:after { animation: pulsate 1.5s infinite ease-in; -webkit-animation: pulsate 1.5s infinite ease-in; -moz-animation: pulsate 1.5s infinite ease-in; } #roster li.paused:after, #bookmarks li.paused:after { background: #b7b7b7; } #roster li img, #bookmarks li img { opacity: 1; } #roster li .avatar, #bookmarks li .avatar { vertical-align: top; margin-right: 5px; margin-top: -15px; position: absolute; left: 10px; top: 50%; width: 30px; height: 30px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -khtml-border-radius: 50px; -o-border-radius: 50px; -border-radius: 50px; border-radius: 50px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #roster li .name, #bookmarks li .name { margin-left: 40px; line-height: 30px; color: #fff; text-overflow: ellipsis; overflow: hidden; width: 70%; } #roster li .status, #bookmarks li .status { color: #b7b7b7; font-size: 10px; font-weight: 400; line-height: 12px; margin: 0; margin-left: 40px; } #roster li .status:not(:empty), #bookmarks li .status:not(:empty) { margin-top: -8px; } #roster li .unread, #bookmarks li .unread { display: none; color: #fff; height: 22px; width: 30px; padding-top: 8px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -o-border-radius: 30px; -border-radius: 30px; border-radius: 30px; position: absolute; top: 7px; left: 10px; font-size: 10px; font-weight: bold; text-align: center; background: rgba(0,174,239,0.8); } @-moz-keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-webkit-keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-o-keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-ms-keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes pulsate { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .page.chat { padding-top: 0px; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .conversation { position: relative; bottom: 0px; left: 0px; right: 0px; padding: 0px; height: 100%; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .conversation header { padding: 5px; border-bottom: 2px solid #e4e4e4; position: fixed; right: 0px; left: 181px; z-index: 10; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f7f7f7; } .conversation header .avatar { margin-right: 5px; width: 30px; height: 30px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -khtml-border-radius: 50px; -o-border-radius: 50px; -border-radius: 50px; border-radius: 50px; position: absolute; top: 11px; left: 11px; vertical-align: top; } .conversation header .name { margin: 15px; padding: 0px; margin-left: 45px; font-size: 14px; line-height: 14px; } .conversation header .tzo:not(:empty) { position: absolute; right: 15px; top: 50%; height: 20px; margin-top: -10px; padding: 0 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; text-transform: uppercase; font-size: 9px; font-weight: bold; line-height: 20px; color: #898989; background: #e4e4e4; } .messages { margin: 0px; padding: 0px; padding-top: 130px; overflow-y: auto; overflow-x: hidden; position: relative; bottom: 75px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .messages li { position: relative; z-index: 1; list-style: none; padding: 10px 0; width: 100%; min-height: 50px; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #e4e4e4; } .messages li:last-of-type { border: none; } .messages li .messageAvatar { position: absolute; top: 50%; left: 10px; margin-top: -15px; } .messages li .messageAvatar img { width: 30px; height: 30px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -khtml-border-radius: 50px; -o-border-radius: 50px; -border-radius: 50px; border-radius: 50px; } .messages li .messageAvatar .name { text-indent: -9999em; position: absolute; width: 1px; } .messages .messageWrapper { margin-left: 50px; } .messages .message { font-size: 12px; margin: 0px; display: inline-block; padding-right: 11px; min-width: 20px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .messages .message:not(.mine) { color: #00aeef; } .messages .message.mine { background: #fff; } .messages .message.mine .timestamp { color: #b6b6b6; } .messages .message.delayed .timestamp:before { content: '@ '; } .messages .message.edited .timestamp:before { content: 'edited '; } .messages .message.pending { color: #ababab; } .messages .message .body { display: inline; word-break: break-word; padding: 0px; margin: 0px; } .messages .message .timestamp { font-size: 10px; font-weight: bold; color: #78daff; float: right; display: block; } .messages .message .sender { display: block; } .chatBox { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #e4e4e4; bottom: 0px; position: fixed; right: 0px; left: 181px; z-index: 200; } .chatBox form { background: #f7f7f7; padding: 11px; } .chatBox .formwrap { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-right: 80px; position: relative; } .chatBox textarea { width: 100%; position: relative; height: 30px; line-height: 18px; padding: 5px; background: #fff; } .chatBox textarea.editing { background-color: #fffcea; border: 1px solid #efe391; color: #d2bd2d; } .main > div { padding: 20px; border-bottom: 1px solid #e4e4e4; } .main > div:last-of-type { border: none; } .main > div .status { padding: 5px; background: #f7f7f7; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; } .uploadRegion { padding: 15px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; margin: 10px 0; color: #b7b7b7; background: #f7f7f7; } .uploadRegion p { margin: 0; } .uploadRegion input { width: 100%; } .aux { background: #f7f7f7; } .aux header { margin-top: 8%; text-align: center; } #logo { margin: auto; } .box { position: relative; margin: auto; margin-top: 5%; padding: 20px 0; background: #fff; width: 75%; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; } .box.connect { padding: 20px; text-align: center; } .box.connect h2 { padding: 0; } .box .head, .box .content { padding: 0 20px; } .box .head { margin-bottom: 20px; border-bottom: 1px solid #f2f2f2; } .box input { width: 100%; margin-bottom: 15px; } .box a.button { float: right; } .box h2 { margin: 0; padding-bottom: 20px; } @media screen and (min-width: 768px) { .box { width: 50%; } } input[type=text], input[type=email], input[type=search], input[type=password], textarea { -webkit-appearance: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; padding: 0 10px; background: #fff; border: 1px solid #e4e4e4; font-size: 12px; color: #565656; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-appearance: none; -webkit-transition: border 0.2s ease-in 0; -o-transition: border 0.2s ease-in 0; transition: border 0.2s ease-in 0; -moz-transition: border 0.2s ease-in 0; -webkit-transition: border 0.2s ease-in 0; -moz-transition: border 0.2s ease-in 0; } input[type=text], input[type=email], input[type=search], input[type=password] { height: 35px; } textarea { resize: none; } input[type=text]:focus, input[type=email]:focus, input[type=search]:focus, input[type=password]:focus, textarea:focus, .main .status:focus { outline: none; border: 1px solid #78daff; } label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: bold; color: #565656; } a.button { line-height: 35px; } button, a.button { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif; font-style: normal; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; border: none; height: 35px; min-width: 80px; padding: 0 1em; color: #fff; background: #00aeef; font-size: 12px; font-weight: bold; text-decoration: none; text-align: center; cursor: pointer; } button:hover, a.button:hover { background: #007aa7; }