body { margin: 0; background: #111; font-family: monospace; color: #d5d5d5; font-size: 1em; line-height: 20px; } #screen { position: absolute; top: 35px; bottom: 0px; left: 0px; right: 0px; } .hyperscroll { width: 100%; } .search { margin-top: 1.5px; float: right; width: 200px; } .header { padding-bottom: .7em; border-bottom: 1px solid #252525; } h1, h2, h3, h4, h5, h6 { font-size: 1.2em; margin-top: .35ex; } hr { border: solid #222; clear: both; border-width: 1px 0 0; height: 0; margin-bottom: .9em; } p { margin-top: .35ex; margin-bottom: 10px; } a { color: white; *text-decoration: none; } a:hover { color: #ddd; } .navbar a { color: #999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; } .navbar a:hover, .navbar a:focus { color: #fff; text-decoration: none; } .navbar { background: #111; } .navbar { width: 100%; position: fixed; z-index: 1000; margin: 0; padding-top: .3em; padding-bottom: .3em; left: 0; right: 0; top: 0; } .navbar .internal { max-width: 97%; margin-left: auto; margin-right: auto; } .navbar li { margin-top: .3em; float: left; margin-right: .6em; margin-left: .3em; list-style-type: none; } .hyperscroll > .content { width: 85%; max-width: 860px; margin-left: auto; margin-right: auto; } .message, .message > *, .navbar, .navbar > * { animation: fadein 1s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .message { display: block; background: #111; padding: .7em; } .message:hover { background: #141414; } .message img, .message video { max-width: 100%; } img { border-radius: 3px; } .timestamp, .votes { float: right; } .avatar--small img { vertical-align: top; width: 1.6em; height: 1.6em; margin-right: .2em; } .avatar--medium img { float: left; vertical-align: top; width: 3.5em; height: 3.5em; margin-right: .5em; margin-bottom: .5em; } .compose, textarea, input { font-family: monospace; font-size: 1em; line-height: 20px; background: #141414; padding: .3em; color: #ccc; border: none; border-radius: 3px; } textarea { width: 100%; height: 100px; } .compose:focus { outline: none; } .emoji { padding: .2em; } .right { float: right; } input {width: 85%; } pre { overflow: auto; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; } .btn { display: inline-block; *display: inline; padding: 2px 6px; margin-bottom: 0; margin-right: .2em; font-size: 14px; line-height: 20px; color: #d5d5d5; text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); vertical-align: middle; cursor: pointer; background-color: #222; border: 1px solid #222; border-radius: 4px; } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: white; background-color: black; } .btn:active, .btn.active { background-color: #111; } .btn:first-child { *margin-left: 0; }