/*! normalize.css v1.1.3 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Address `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } html { font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images, videos, audio and canvas and the bottom of * their containers: h5bp.com/i/440 */ audio, canvas, img, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browse Happy prompt ========================================================================== */ .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ .frame .alert { background-color: red; padding: 0.5rem; font-weight: bold; color: white; text-align: center; display: none; } .frame .alert a { color: white; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } html { height: 100%; } body { background-color: #202020; /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8ab66b), color-stop(0%, #213f14), color-stop(70%, #0f210d), color-stop(100%, #000000));*/ transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -webkit-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; height: 100%; overflow: hidden; } .landing { background-color: #292929; height: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; } .landing img { width: 840px; height: auto; max-width: 100%; margin: 0px auto; } .landing input { border: 0; padding: 10px; width: 780px; max-width: 90%; min-width: 320px; font-weight: bold; margin: 0px auto; background-color: transparent; color: white; border-bottom: solid transparent 4px; text-transform: uppercase; } .landing input:focus { outline: none; border-bottom: solid #393939 4px; } #backdrop { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; display: none; } .game { display: none; height: 100%; } .frame { height: 100%; min-width: 600px; width: 60%; margin: 0px auto; background-color: #f4f4f4; vertical-align: bottom; position: relative; overflow-x: hidden; } .title { background-color: #353535; color: #00aeff; border-bottom: solid #00aeff 5px; font-weight: bold; font-family: Consolas, monotype; z-index: 1; position: absolute; top: 0px; width: 100%; } .title span { padding: 5px; } .title a { color: #aaa; } .title .info { float: right; font-size: 0.6em; color: #aaa; padding-right: 5px; padding-top: 5px; } .output { padding: 15px; font-family: "Open Sans", Calibri, sans-serif; font-weight: 300; font-size: 1.2em; position: absolute; bottom: 0px; min-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .output .tag { display: inline-block; } .captions { margin: 0 auto; background-color: rgba(0, 0, 0, 0.9); font-family: monospace; font-size: 30px; text-transform: uppercase; text-align: center; color: white; position: absolute; width: 500px; top: 100px; left: 50%; margin-left: -250px; } .captions span { display: block; padding: 2px; padding-left: 10px; } .right { float: right; text-align: right; } .sunbeams .sunbeam { position: absolute; left: 150px; width: 70px; height: 2000px; -webkit-transform: skew(5deg); -moz-transform: skew(5deg); -o-transform: skew(5deg); background: rgba(255, 255, 125, 0.01); animation-duration: 10s; animation-name: slidein; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate; } .sunbeams .sunbeam:nth-child(2n) { left: 300px; -webkit-transform: skew(7deg); animation-duration: 7s; width: 50px; animation-name: slidein2; } .sunbeams .sunbeam:nth-child(3n) { left: 90%; -webkit-transform: skew(-3deg); animation-duration: 11s; width: 20px; animation-name: slidein2; } @keyframes slidein { to { background: rgba(255, 255, 125, 0.1); width: 100px; } } @keyframes slidein2 { to { background: rgba(255, 255, 125, 0.1); width: 35px; } } .leaf { width: 20px; height: 20px; background-color: #345619; -moz-border-radius: 20px 0px; -webkit-border-radius: 20px 0px; border-radius: 20px 0px; position: absolute; top: 0px; left: 0px; } /* A hover tag that drops down a context menu instead of performing an action */ .tag ul { display: none; } .context { position: relative; display: inline-block; } .context ul { display: none; list-style: none; position: absolute; margin: 0; padding: 0; background: #e4e4e4; min-width: 100%; z-index: 1; -webkit-text-fill-color: black; } .context ul li .tag { box-sizing: border-box; font-size: 0.8em; padding: 0 0.5em; width: 100%; } .context ul li .tag:hover { background: #c4c4c4; } .context:hover ul { display: block; } @font-face { font-family: "C64 Pro Mono"; src: url("../assets/fonts/C64_Pro_Mono_v1.0-STYLE.eot"); src: url("../assets/fonts/C64_Pro_Mono_v1.0-STYLE.ttf") format("truetype"); src: url("../assets/fonts/C64_Pro_Mono_v1.0-STYLE.woff") format("woff"); } body { background-color: #9191fe; color: white; } .frame { background-color: #4c40e0; } .output { font-family: "C64 Pro Mono"; font-size: 1em; } .output header { text-transform: uppercase; font-weight: bold; color: #e04040; margin: 0px; } /* Begin Output Paragraph Styles */ .output p, .output .p { margin-top: 0px; margin-bottom: 0.5em; } .output p.player { color: black; font-weight: bold; text-transform: uppercase; } .output p.player::before { content: ">"; color: black; margin-right: 0.25em; } .output .tag { text-transform: uppercase; white-space: nowrap; border-bottom: dotted white 2px; } .output .tag.thing { color: #2ff; } .output .tag.scenery { color: brown; } .output .tag.room { color: #542b0f; } .output .tag.blue { color: #2ff; } .output .tag.red { color: #e060e0; } .output .tag.green { color: green; } .output .tag.rainbow { background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(1, #f22)); color: black; -webkit-text-fill-color: transparent; -webkit-background-clip: text; } span.gm, span.npc { color: #e060e0; font-weight: bold; float: left; padding-right: 1em; } .output .box { width: 50%; margin: 2em auto; padding: 1em; color: white; text-align: center; text-transform: uppercase; border: solid white 10px; } .output .box header { font-size: 2em; color: white; } .output .box a { color: white; } .output .box.credits { background-color: #ff00ae; } .output .menu { list-style: none; padding: 0px; margin: 0px; margin-bottom: 1em; border-left: solid #545454 1em; } .output .menu.disabled { opacity: 0.6; } .output .menu li { background-color: transparent; padding: 5px; margin-left: 1em; text-transform: uppercase; cursor: default; } .output .menu li:hover { background-color: #545454; } .output .menu.disabled li:hover { background-color: transparent; } .output .menu li.selected { background-color: #545454 !important; } .input { font-weight: bold; border-top: dotted #cccccc 1px; width: 100%; padding: 15px; padding-left: 0px; margin: 0px; } .input:after { content: "(click here and start typing)"; color: #bababa; float: right; } .input.waiting { color: transparent; } .input.waiting:before { opacity: 1; content: "(the GM is typing)"; color: #ddd; } .input.waiting .cursor { opacity: 0; } .input.waiting:after { opacity: 0; } .input.waiting.waiting-1:before { content: "(the GM is typing.)"; } .input.waiting.waiting-2:before { content: "(the GM is typing..)"; } .input.waiting.waiting-3:before { content: "(the GM is typing...)"; } .input .entry { display: inline-block; } .input .entry.suffixed { border-bottom: dotted #505050 2px; padding: 0px 0.25em 1px 0.25em; min-width: 3em; } .input .entry.suffixed .text { color: #00aeff; } .input > * { opacity: 0.5; } .input:focus { outline: none; border-top: dotted #00aeff 1px; } .input:focus:after { content: ""; } .input:focus > * { opacity: 1; } .input .text { word-wrap: break-word; max-width: 80%; } /* End Output Paragraph Styles */ /* Cursor */ .cursor { display: inline-block; background: #111; margin-left: -1em; font-family: Consolas; width: 1em; /*font-size: 0.8em;*/ -webkit-animation: blink 2s linear 0s infinite; -moz-animation: blink 2s linear 0s infinite; -ms-animation: blink 2s linear 0s infinite; -o-animation: blink 2s linear 0s infinite; } @-webkit-keyframes blink { 0% { background: #fff; } 47% { background: #fff; } 50% { background: transparent; } 97% { background: transparent; } 100% { background: #fff; } } @-moz-keyframes blink { 0% { background: #fff; } 47% { background: #fff; } 50% { background: transparent; } 97% { background: transparent; } 100% { background: #fff; } } @-ms-keyframes blink { 0% { background: #fff; } 47% { background: #fff; } 50% { background: transparent; } 97% { background: transparent; } 100% { background: #fff; } } @-o-keyframes blink { 0% { background: #fff; } 47% { background: #fff; } 50% { background: transparent; } 97% { background: transparent; } 100% { background: #fff; } } /*# sourceMappingURL=classic.css.map */