UNPKG

gamegold

Version:
2,357 lines (2,209 loc) 95 kB
/* Reset ♥ Adapted from http://meyerweb.com/eric/tools/css/reset/ ------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing:0; } /* remember to define focus styles. Hee Haw */ :focus { outline:0; } *, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } /* Special button reset */ [type=submit], button, button::-moz-focus-inner { border: 0; padding: 0; font:15px/20px sans-serif; } /* Inline Elements: Defaults ------------------------------------------------------- */ body, input, textarea { color:#404040; color:rgba(0,0,0,0.75); font:15px/20px sans-serif; -webkit-font-smoothing: antialiased; } body { background:#fff; } .dark { color:#fff; } h1, h2, h3, h4, h5, h6 { font-family:sans-serif; font-weight:bold; margin:0; } em h1, h1 em, em h2, h2 em, em h3, h3 em, em h4, h4 em, em h5, h5 em, em h6, h6 em { font-weight: bold; font-style: italic; } h1 { font-size:30px; line-height:40px; } h2 { font-size:22px; line-height:30px; padding-top: 5px; padding-bottom:5px; } h3 { font-size:15px; line-height:20px; } h4, h5, h6 { font-size:12px; line-height:20px; } p { margin-bottom:20px; } p:last-child { margin-bottom:0; } small, .prose.small, .small { font-size:12px; line-height:20px; letter-spacing:0; } small { display:block; } .micro, .prose .micro, .prose.micro { font-size:10px; line-height:20px; letter-spacing:0; } /* Links */ a, a > code { color:#3887BE; text-decoration:none; } a:hover > code, a.active, a:hover { color:#63b6e5; } a:focus { box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05); } .dark a, a.dark, .dark a > code { color:rgba(255,255,255,.5); } a.dark.active, .dark a.active, a.dark:hover, .dark a:hover > code, .dark a:hover { color:white; } .dark a:focus { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); } a.quiet, a.quiet > code { color:rgba(0,0,0,0.5); } a.quiet.active, a.quiet:hover { color:rgba(0,0,0,0.75); } .dark a.quiet, a.quiet.dark { color:white; } .dark a.quiet:hover, a.quiet.dark.active, a.quiet.dark:hover { color:rgba(255,255,255,0.5); } /* Buttons */ .button { background-color:#3887be; text-align:center; color:#fff; display:inline-block; margin:0px; padding:10px; position:relative; border:none; cursor:pointer; border-radius:3px; white-space:nowrap; text-overflow:ellipsis; /* Protects button metrics in .prose context */ font-weight: bold; line-height:20px; font-size:12px; -webkit-appearance:none; /* The button element needs to be forced this */ -webkit-font-smoothing:antialiased; } .button.short { height: 30px; padding-top: 5px; padding-bottom: 5px; vertical-align: middle; } .button.stroke { background-color: transparent; box-shadow: 0px 0px 0px 2px #3887be inset; color: #3887be; } .button.stroke.short { padding-top: 5px; padding-bottom: 4px; } .button.stroke:hover { background-color: transparent; color: #52a1d8; box-shadow: 0px 0px 0px 2px #52a1d8 inset; } .button.stroke.active { color: white; background-color: #3887be; box-shadow: 0px 0px 0px 2px transparent inset; } .button:hover, .button.active { color:#fff; } .dark .button, .dark .button:hover, .dark .quiet.button, .dark .quiet.button:hover { color: white; } .dark .button.stroke { border: none; box-shadow: 0px 0px 0px 2px white inset; color: white; } .dark .button.stroke:hover, .dark .button.stroke.active { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255,255,255,.5) inset; color: rgba(255,255,255,.75); } .dark .button.stroke.quiet { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255,255,255,.25)inset; color: rgba(255,255,255,.5); } .dark .button.quiet.stroke:hover, .dark .button.quiet.stroke.active { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255,255,255,.75)inset; color: rgba(255,255,255,.75); } .button:focus { box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1); } .button:hover, .button.active { background-color:#52a1d8; } .button.loud { background-color:#8889cc; } .button.fill-purple.active, .button.fill-purple:hover, .button.loud.active, .button.loud:hover { background-color:#a4a4e5; } .button.quiet { background-color:rgba(0,0,0,0.25); color:#fff; } .button.quiet.active, .button.quiet:hover { background-color:rgba(0,0,0,0.5); color:#fff; box-shadow: inset rgba(0,0,0,0) 0 0 0, inset rgba(0,0,0,0) 0 0 0; } /* Buttons with fill classes applied */ .button.fill-pink.active, .button.fill-pink:hover { background-color:#ff88bc; } .button.fill-red.active, .button.fill-red:hover { background-color:#ff6e7f; } .button.fill-orange.active, .button.fill-orange:hover { background-color:#ffa286; } .button.fill-mustard.active, .button.fill-mustard:hover { background-color:#ffca55; } .button.fill-green.active, .button.fill-green:hover { background-color:#70d29b; } .button.fill-teal.active, .button.fill-teal:hover { background-color:#5bc9bf; } .button.fill-purple.active, .button.fill-purple:hover { background-color:#a4a4e5; } .button.fill-denim.active, .button.fill-denim:hover { background-color:#6a8099; } .button.fill-darkblue.active, .button.fill-darkblue:hover { background-color:#465f77; } .button.fill-cyan.active, .button.fill-cyan:hover { background-color:#55ccea; } .button.fill-blue.active, .button.fill-blue:hover { background-color:#52a1d8; } .button.fill-darken0.active, .button.fill-darken0:hover { background-color:rgba(0,0,0,0.25); } .button.fill-darken1.active, .button.fill-darken1:hover { background-color:rgba(0,0,0,0.5); } .button.fill-darken2.active, .button.fill-darken2:hover { background-color:rgba(0,0,0,0.75); } .button.fill-lighten0.active, .button.fill-lighten0:hover { background-color:rgba(255,255,255,0.25); } .button.fill-lighten1.active, .button.fill-lighten1:hover { background-color:rgba(255,255,255,0.5); } .button.stroke.quiet { background: transparent; box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.25) inset; color: rgba(0,0,0,0.5); } .button.stroke.quiet:hover { box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5) inset; color: rgba(0,0,0,.5); } .button.stroke.quiet.active:hover, .button.stroke.quiet.active { box-shadow: 0px 0px 0px 2px transparent inset; background: rgba(0,0,0,0.5); color: white; } .button.stroke.loud { background: transparent; box-shadow: 0px 0px 0px 2px #8889cc inset; color: #8889cc; } .button.stroke.loud:hover { box-shadow: 0px 0px 0px 2px #a4a4e5 inset; color: #a4a4e5; background-color:transparent; } .button.stroke.loud.active { box-shadow: 0px 0px 0px 2px transparent inset; color: white; background-color:#8889cc; } .dark .button.quiet { color:#fff; background-color:rgba(255,255,255,0.10); } .dark .button.quiet.active, .dark .button.quiet:hover { background-color:rgba(255,255,255,0.25); } .button.disabled, .button:disabled { background:rgba(0,0,0,.1); color:rgba(0,0,0,0.25); cursor: default; } .button.disabled:hover, .button:disabled:hover { background:rgba(0,0,0,.1); } .button.disabled:focus, .button:disabled:focus { box-shadow:none; } .dark .button.disabled, .dark .button:disabled { background:rgba(255,255,255,.05); color: rgba(255,255,255,.5); } .dark .button.disabled:hover, .dark .button:disabled:hover { background:rgba(255,255,255,.05); } /* Tab style for links that toggle between views * NOTE: THE .tabs class in DEPRECATED - for a similar UI component use rounded-toggle ; */ .tabs { display:inline-block; } .tabs, .pill.tabs { -webkit-border-radius:3px; border-radius:3px; } .tabs > a { border-top:1px solid rgba(0,0,0,0.25); border-bottom:1px solid rgba(0,0,0,0.25); background:transparent; color:rgba(0,0,0,.5); font-weight: bold; font-size:12px; text-align:center; display:inline-block; height:40px; margin:0; padding:10px; white-space:nowrap; text-overflow:ellipsis; } .tabs > * { border:0 solid rgba(0,0,0,0.25); border-right-width:1px; } .tabs > *:first-child { border-left-width:1px; border-radius: 3px 0 0 3px; } .tabs > *:last-child { border-radius: 0 3px 3px 0; } .tabs > *:hover { background:rgba(0,0,0,0.05); color:rgba(0,0,0,.5); } .tabs > *.active { background:rgba(0,0,0,0.1); color:rgba(0,0,0,.5); } .dark.tabs, .dark.tabs > *, .dark .tabs, .dark .tabs > * { border-color:rgba(255,255,255,0.25); color:rgba(255,255,255,1); } .dark.tabs > *:hover, .dark .tabs > *:hover { background-color:rgba(225,255,255,0.1); color:rgba(255,255,255,1); } .dark.tabs > *.active, .dark .tabs > *.active { background-color:rgba(225,255,255,0.15); color:rgba(255,255,255,1); } /* Pill wrapper for joining buttons. */ .pill { display:inline-block; } .pill > * { border-radius:0 0 0 0; border:0 solid white; border-left-width:1px; } .pill > *:first-of-type { border-radius:3px 0 0 3px; border-left-width:0; } .pill > *:last-of-type { border-radius:0 3px 3px 0; } .pill > *:only-child { border-radius:3px; } .pill .button.stroke { border: none; box-shadow: 0px 0px 0px 2px #3887be inset; border-right-width: 2px; border-left-width: 0; } .pill .button.stroke:hover { background-color: transparent; color: #52a1d8; box-shadow: 0px 0px 0px 2px #52a1d8 inset; } .pill .button.stroke:not(:first-of-type) { margin-left: -2px; } /* Vertical pill if pill contents is full width */ .pill > .col12 { text-align: left; border-bottom-width:1px; border-left-width:0; } .pill > .button.stroke.col12:not(:first-of-type) { margin-left: 0px; margin-top: -2px; } .pill > .col12:first-of-type { border-radius:3px 3px 0 0; } .pill > .col12:last-of-type { border-radius:0 0 3px 3px; } .pill > .col12:only-child, .pill > .col12:only-of-type { border-radius: 3px; } .dark.fill-dark .pill > * { border-color:#404040; } .fill-gray .pill > *, .fill-grey .pill > * { border-color:#eee; } .fill-white .pill > * { border-color:#fff; } .fill-light .pill > * { border-color:#f8f8f8; } /* deprecated, use fill-cyan */ .fill-blue-light .pill > * { border-color:#52a1d8;} .fill-cyan .pill > * { border-color:#3bb2d0;} .fill-blue .pill > * { border-color:#3887be; } .fill-denim .pill > * { border-color:#50667f; } .fill-navy .pill > * { border-color:#28353d; } .fill-navy-dark .pill > * { border-color:#222B30; } .fill-purple .pill > * { border-color:#8a8acb; } .fill-midnight .pill > * { border-color:#142736; } .fill-darkblue .pill > * { background-color:#223b53; } .fill-red .pill > * { background-color:#e55e5e; } .fill-teal .pill > * { background-color:#41afa5; } .fill-pink .pill > * { background-color:#ed6498; } .fill-mustard .pill > * { background-color:#fbb03b; } .dark.fill-darken1 .pill > *, .dark.fill-darken2 .pill > *, .dark.fill-darken3 .pill > * { border-color:#000; border-color:rgba(0,0,0,0.5); } .fill-lighten1 .pill > *, .fill-lighten2 .pill > *, .fill-lighten3 .pill > * { border-color:#fff; border-color:rgba(255,255,255,0.5); } .pill > .stroke { box-shadow: 0px 0px 0px 2px #3887be inset; } .pill > .quiet.stroke { box-shadow: 0px 0px 0px 2px rgba(0,0,0,.25) inset; } .pill > .loud.stroke { box-shadow: 0px 0px 0px 2px #8889cc inset; } .dark .pill > .stroke { box-shadow: 0px 0px 0px 2px white inset; } .dark .pill > .stroke:hover { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255,255,255,.5) inset; color: rgba(255,255,255,.75);} .dark .pill > .quiet.stroke { box-shadow: 0px 0px 0px 2px rgba(255,255,255,.25) inset; } .pill input[type=text] { border:1px solid rgba(0,0,0,0.1); border-radius:0; } .pill input[type=text]:focus { border:1px solid rgba(0,0,0,0.25); } /* Pill style for input followed by button */ .input-pill input[type='text'], .input-pill input[type=text]:focus { border-right-width: 0;} .input-pill input[type='text'] + .button { border-left-width: 0; border-radius: 0 3px 3px 0; } /* make your pills toggles */ .toggle * { width:40px; padding:0; overflow:hidden; white-space:nowrap; } .toggle .big.button.icon:not(.active) { padding-left:0; } .toggle .active { background:#52a1d8; color:rgba(255,255,255,0.75); padding:10px; width:auto; color:#cdecf3; } /* Rounded toggle for filtering/modifying lists */ .rounded-toggle { margin-top: 5px; margin-bottom: 5px; padding: 2px; border-radius: 15px; vertical-align: middle; background: rgba(0,0,0,.1) } .dark .rounded-toggle { background: rgba(255,255,255,.1);} .rounded-toggle > * { cursor:pointer; vertical-align: top; display: inline-block; border-radius: 16px; padding: 3px 10px; font-size: 12px; color: rgba(0,0,0,0.5); line-height: 20px; } .rounded-toggle > *:empty { padding-left: 5px; padding-right: 5px; } .rounded-toggle > *:hover { color: rgba(0,0,0,0.75); } .dark .rounded-toggle > * { color: white;} .dark .rounded-toggle *:hover { color: rgba(255,255,255,0.75); } .rounded-toggle input[type=radio] { display:none; } .rounded-toggle input[type=radio]:checked + label, .rounded-toggle .active { background: white; color: rgba(0,0,0,.5); } .dark .rounded-toggle input[type=radio]:checked + label, .dark .rounded-toggle .active { color: white; } .fill-dark .rounded-toggle input[type=radio]:checked + label, .fill-dark .rounded-toggle .active { background-color:#404040; } .fill-gray .rounded-toggle input[type=radio]:checked + label, .fill-gray .rounded-toggle .active, .fill-grey .rounded-toggle input[type=radio]:checked + label, .fill-grey .rounded-toggle .active { background:#eee; } .fill-grey-dark .rounded-toggle input[type=radio]:checked + label, .fill-grey-dark .rounded-toggle .active, .fill-gray-dark .rounded-toggle input[type=radio]:checked + label, .fill-gray-dark .rounded-toggle .active { background:#404040; } .fill-white .rounded-toggle input[type=radio]:checked + label, .fill-white .rounded-toggle .active { background:#fff; } .fill-light .rounded-toggle input[type=radio]:checked + label, .fill-light .rounded-toggle .active { background:#f8f8f8; } /* deprecated, use fill-cyan */ .fill-blue-light .rounded-toggle input[type=radio]:checked + label, .fill-blue-light .rounded-toggle .active { background:#52a1d8; } .fill-blue-cyan .rounded-toggle input[type=radio]:checked + label, .fill-blue-cyan .rounded-toggle .active { background:#3bb2d0; } .fill-blue .rounded-toggle input[type=radio]:checked + label, .fill-blue .rounded-toggle .active { background:#3887be; } .fill-midnight .rounded-toggle input[type=radio]:checked + label, .fill-midnight .rounded-toggle .active { background:#142736; } .fill-denim .rounded-toggle input[type=radio]:checked + label, .fill-denim .rounded-toggle .active { background:#50667f; } .fill-navy .rounded-toggle input[type=radio]:checked + label, .fill-navy .rounded-toggle .active { background:#28353d; } .fill-navy-dark .rounded-toggle input[type=radio]:checked + label, .fill-navy-dark .rounded-toggle .active { background:#222B30; } .fill-purple .rounded-toggle input[type=radio]:checked + label, .fill-purple .rounded-toggle .active { background:#8a8acb; } .fill-green .rounded-toggle input[type=radio]:checked + label, .fill-green .rounded-toggle .active { background:#56b881; } .fill-yellow .rounded-toggle input[type=radio]:checked + label, .fill-yellow .rounded-toggle .active { background:#f1f075; } .fill-orange .rounded-toggle input[type=radio]:checked + label, .fill-orange .rounded-toggle .active { background:#f9886c; } .fill-darkblue .rounded-toggle input[type=radio]:checked + label, .fill-darkblue .rounded-toggle .active { background-color:#223b53; } .fill-red .rounded-toggle input[type=radio]:checked + label, .fill-red .rounded-toggle .active { background-color:#e55e5e; } .fill-teal .rounded-toggle input[type=radio]:checked + label, .fill-teal .rounded-toggle .active { background-color:#41afa5; } .fill-pink .rounded-toggle input[type=radio]:checked + label, .fill-pink .rounded-toggle .active { background-color:#ed6498; } .fill-mustard .rounded-toggle input[type=radio]:checked + label, .fill-mustard .rounded-toggle .active { background-color:#fbb03b; } .short.rounded-toggle { margin-top: 3px; margin-bottom: 3px; } .rounded-toggle.short input[type=radio] + label, .rounded-toggle.short > * { font-size: 10px; padding:0 7px; } img { max-width:100%; vertical-align:top; } .center img, img.center { margin-left:auto; margin-right:auto; } /* images defined with background size - placed here so width will be overriden by grid widths*/ .thumbnail { height: 30px; width: 30px;} .small-graphic { height: 60px; width: 60px;} .big-graphic { height: 120px; width: 120px;} abbr { border-bottom:1px dotted #000; cursor:help; } hr { margin:0 0 20px; border:0; height:1px; background:#f8f8f8; background:rgba(0,0,0,.05); } .dark hr { background:rgba(255,255,255,.05); } /* Block Quotes */ blockquote, q { quotes:none; font-style:normal; padding-left:20px; margin:10px; } blockquote:before, blockquote:after, q:before, q:after { content:''; } /* Keyboard styles */ kbd { background: rgba(0,0,0,.025); color: rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.1); font-size:12px; line-height:20px; border-radius: 3px; padding:2px 3px; box-shadow: 0 1px 0 0 rgba(0,0,0,.1); font-weight: normal; } .dark kbd { background: rgba(255,255,255,.025); color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.1); } /* Code Blocks & Pre */ .code, code, em code, code em, code strong, strong code, pre, em pre, pre em, pre strong, strong pre { font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; white-space: pre-wrap; } strong code, code strong, code.strong, strong.code, .strong.code, .code .strong, code .strong, pre strong, strong pre, pre.strong, .strong pre, pre .strong { font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; font-weight:bold; } code em, em code, pre em, em pre { font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; font-style:italic; } code, pre { background:rgba(0,0,0,0.025); font-size:12px; line-height:20px; padding:3px; border-radius: 3px; } pre { display:block; padding:10px; word-break:break-all; word-wrap:break-word; white-space:pre; white-space:pre-wrap; -moz-tab-size:4; tab-size:4; } pre code { background:transparent; padding:0; } .pre-scrollable { max-height:300px; overflow-y:scroll; } /* sub/superscripts */ sup, sub { height:0; line-height:1; vertical-align:baseline; _vertical-align:bottom; position:relative; font-size:75%; } sup { bottom:1ex; } sub { top:.5ex; } /* Form basics -------------------------------------------------- */ form fieldset { margin: 0 0 20px; } form fieldset:last-child { margin-bottom: 0; } form fieldset label { font-size:12px; line-height:20px; font-weight: bold; display:block; margin:0 0 5px; } .dark label { color:#f0f0f0; color:rgba(255,255,255,0.75); } form fieldset label.inline { margin-bottom: 0;} input, select, button { vertical-align:top; } textarea, input[type=password], input[type=text], input[type=date], input[type=email], input[type=number] { display:inline-block; height:40px; margin:0; color:rgba(0,0,0,.5); padding:10px; -webkit-appearance:none; } textarea.code, input.code, input[type=password].code, input[type=text].code, input[type=date].code, input[type=email].code, input[type=number].code { font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace; white-space: pre-wrap; } textarea, input[type=password], input[type=text], input[type=date], input[type=email], input[type=number] { background-color:#fff; border:1px solid rgba(0,0,0,0.1); -webkit-transition:border-color .05s; -moz-transition:border-color .05s; -ms-transition:border-color .05s; transition:border-color .05s; } .dark textarea, .dark input[type=password], .dark input[type=text], .dark input[type=date], .dark input[type=email], .dark input[type=number] { background:#404040; background:rgba(0,0,0,0.25); border-color:#eee; border-color:rgba(255,255,255,0.25); color:#fff; box-shadow:none; } textarea:focus, input[type=password]:focus, input[type=text]:focus, input[type=date]:focus, input[type=email]:focus, input[type=number]:focus { outline:thin dotted\8; /* ie8 below */ border-color:rgba(0,0,0,0.25); color:#404040; } .dark textarea:focus, .dark input[type=password]:focus, .dark input[type=text]:focus, .dark input[type=date]:focus, .dark input[type=email]:focus, .dark input[type=number]:focus { border-color:rgba(255,255,255,0.75); color:#fff; } textarea:disabled, input[type=text]:disabled, input[type=date]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=password]:disabled { border-color:rgba(0,0,0,0.125); color: rgba(0,0,0,0.5); } .dark textarea:disabled, .dark input[type='text']:disabled { border-color:rgba(255,255,255,0.25); color: rgba(255,255,255,0.5); } textarea.short, input[type=password].short, input[type=text].short, input[type=date].short, input[type=email].short, input[type=number].short { height: 30px; padding:5px; -webkit-appearance:none; } textarea.short { height: 60px;} textarea.stretch, input.stretch[type=text], input.stretch[type=email], input.stretch[type=number], input.stretch[type=password] { width:100%; } textarea.clean, input[type=password].clean, input[type=text].clean, input[type=date].clean, input[type=email].clean, input[type=number].clean, .dark textarea.clean, .dark input[type=password].clean, .dark input[type=text].clean, .dark input[type=date].clean, .dark input[type=email].clean, .dark input[type=number].clean { border-width: 0; } textarea.clean:focus, input[type=password].clean:focus, input[type=text].clean:focus, input[type=date].clean:focus, input[type=email].clean:focus, input[type=number].clean:focus { background-color: rgba(0,0,0,.05); } .dark textarea.clean:focus, .dark input[type=password].clean:focus, .dark input[type=text].clean:focus, .dark input[type=date].clean:focus, .dark input[type=email].clean:focus, .dark input[type=number].clean:focus { background-color: rgba(0,0,0,.35); } /* Special Form Components */ .with-icon { position:relative; } .with-icon input[type=text], .with-icon input[type=date], .with-icon input[type=email], .with-icon input[type=number] { padding-left:35px; } .with-icon .icon { position:absolute; top:10px; left:10px; } .with-icon input[type=text], .with-icon input[type=date], .with-icon input[type=email], .with-icon input[type=number] { padding-left: 30px; } .with-icon .short ~ .icon { left:5px; top: 5px; } .with-icon-right { position:relative; } .with-icon-right input[type=text], .with-icon-right input[type=date], .with-icon-right input[type=email], .with-icon-right input[type=number] { padding-right:35px; } .with-icon-right .icon { position:absolute; top:10px; right:10px; } .with-icon-right input[type=text], .with-icon-right input[type=date], .with-icon-right input[type=email], .with-icon-right input[type=number] { padding-right: 30px; } .with-icon-right .short ~ .icon { right:5px; top: 5px;} textarea { height:80px; max-width:none; overflow:auto; resize:none; } textarea.resize { resize:both; } select { margin-top: 1px; margin-bottom: 1px; } input[type=range], input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; margin:0; padding:0; border:0; } input[type=range] { display:inline-block!important; vertical-align:middle; height:12px; padding:0 2px; border:2px solid transparent; background:rgba(0,0,0,0.25); min-width:100px; overflow:hidden; cursor:pointer; } input[type=range]::-ms-fill-upper { background:transparent; } input[type=range]::-ms-fill-lower { background:rgba(255,255,255,0.25); } /* Browser thingies */ input[type=range]::-moz-range-track { opacity:0; } input[type=range]::-ms-track { opacity:0; } input[type=range]::-ms-tooltip { display:none; } /* For whatever reason, these need to be defined * on their own so dont group them */ input[type=range]::-webkit-slider-thumb { background:rgba(255,255,255,0.75); height:12px; width:20px; border-radius:3px; cursor:ew-resize; box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; } input[type=range]::-ms-thumb { margin:0;padding:0;border:0; background:rgba(255,255,255,0.75); height:12px; width:20px; border-radius:3px; cursor:ew-resize; box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; } input[type=range]::-moz-range-thumb { margin:0;padding:0;border:0; background:rgba(255,255,255,0.75); height:12px; width:20px; border-radius:3px; cursor:ew-resize; box-shadow:rgba(255,255,255,0.25) -1200px 0 0 1200px; } input[type=range]:disabled::-moz-range-thumb { cursor: default;} input[type=range]:disabled::-ms-thumb { cursor: default;} input[type=range]:disabled::-webkit-slider-thumb { cursor: default;} input[type=range]:disabled { cursor: default; } /* Checkboxes ** DEPRECATED - use checkbox-pill instead -------------------------------------------------- */ .checkbox input[type=checkbox] { display:none; } .checkbox .button { cursor:pointer; padding:10px; } .checkbox .button:hover { background: rgba(0,0,0,0.025); } .checkbox input[type=checkbox]:checked + .button { background: rgba(0,0,0,0.05); } .checkbox input[type=checkbox] + .icon:before { background-color:#fff; margin-right:5px; box-shadow:0 0 0 1px rgba(0,0,0,0.25) inset; } .checkbox input[type=checkbox]:not(:checked) + .icon:before { content: ''; } .dark.checkbox input[type=checkbox] + .icon:before, .dark .checkbox input[type=checkbox] + .icon:before { background-color:rgba(0,0,0,0.25); } .pill.checkbox input[type=checkbox]:checked + .button { background-color:rgba(0,0,0,0.1); } .dark .pill.checkbox input[type=checkbox]:checked + .button, .dark.pill.checkbox input[type=checkbox]:checked + .button { background-color:rgba(255,255,255,0.2); } /* Checkbox pill - use in conjunction with pill + button -------------------------------------------------- */ .checkbox-pill input[type=checkbox] { display: none;} .checkbox-pill input[type=checkbox] + *:before { background-color: rgba(0,0,0,0.25); border-radius: 2px;} .checkbox-pill input[type=checkbox]:not(:checked) + *:before { content: '';} .checkbox-pill input[type=checkbox]:checked + .button { background-color: #52a1d8;} .checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(0,0,0,.5);} .checkbox-pill input[type=checkbox]:checked + .button.loud { background-color: #a4a4e5;} .dark.checkbox-pill input[type=checkbox]:checked + .button.quiet, .dark .checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);} /* Radio pill - use in conjunction with pill + button -------------------------------------------------- */ .radio-pill input[type=radio] { display: none;} .radio-pill input[type=radio] + .button:before { overflow: hidden;} .radio-pill input[type=radio]:not(:checked) + .button:before { width: 0;} .radio-pill input[type=radio]:checked + .button { background-color: #52a1d8;} .radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(0,0,0,.5);} .radio-pill input[type=radio]:checked + .button.loud { background-color: #a4a4e5;} .dark.radio-pill input[type=radio]:checked + .button.quiet, .dark .radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);} /* Tables -------------------------------------------------- */ table { width:100%; background-color:transparent; border-collapse:collapse; border-spacing:0; } table th, table td { padding:4px 0; text-align:left; vertical-align:top; border-bottom:1px solid #ddd; } table th { font-weight: bold; } table thead th { vertical-align:bottom; } table.fixed { table-layout:fixed; } .scroll-styled .highlight pre, .scroll-styled { overflow:auto; } /* Inline Elements: Formatted for read content ------------------------------------------------------- */ .prose { line-height:25px; } .prose section { margin-bottom:20px; } .title, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose p, .prose ul, .prose ol, .prose img, .prose blockquote, .prose pre, .prose iframe, .prose object, .prose div.highlight { display:block; margin-bottom:20px; word-wrap:break-word; } .prose h2 { padding-top:0; padding-bottom:0; } .prose h1, .prose h2 { padding-top:40px; } .prose h3, .prose h4, .prose h5, .prose h6 { padding-top:20px; } .prose h1:first-child, .prose h2:first-child, .prose h3:first-child, .prose h4:first-child, .prose h5:first-child, .prose h6:first-child { padding-top:0; } .prose blockquote { padding:20px; margin:0 0 20px 0; background-color:#f8f8f8; background-color:rgba(0,0,0,.05); } .prose blockquote p:last-child { margin:0; } .prose p > video, .prose p > iframe, .prose p a > iframe, .prose p > img, .prose p a > img, .prose li > video, .prose li > iframe, .prose li a > iframe, .prose li > img, .prose li a > img { max-width:100%; max-height:600px; margin-right:auto; margin-left:auto; } table.prose, .prose table { border:1px solid #ddd; } table.prose th, table.prose td, .prose table th, .prose table td { padding:8px; border:1px solid #ddd; } table.prose th, .prose table th { background-color:rgba(0,0,0,0.05); } .prose ul { list-style:disc; margin-left:40px; } .prose ol { list-style:decimal; margin-left:40px; } .prose ul li, .prose ol li { margin-bottom:10px; } /* Dark read content styling */ .dark .prose h1, .dark .prose h2, .dark .prose h3 { color:#fff; } h1.small, h2.small, h3.small, h4.small, h5.small, h6.small, h1.micro, h2.micro, h3.micro, h4.micro, h5.micro, h6.micro { text-transform:uppercase; } .prose h1:last-child, .prose h2:last-child, .prose h3:last-child, .prose h4:last-child, .prose h5:last-child, .prose h6:last-child, .prose p:last-child, .prose ul:last-child, .prose ol:last-child, .prose ul li:last-child, .prose ol li:last-child, .prose img:last-child, .prose blockquote:last-child, .prose pre:last-child, .prose iframe:last-child, .prose object:last-child { margin-bottom: 0; } /* Larger default font sizes for read content. This * class should be used in conjunction with .prose ------------------------------------------------------- */ .prose-big, .prose-big h3, .prose-big h4, .prose-big h5, .prose-big h6 { font-size:18px; line-height:30px; } .prose-big .small, .prose-big small { font-size:15px; line-height:25px; } /* Inline Elements: Anchor link styling ------------------------------------------------------- */ h1 a[href^='#'], h2 a[href^='#'], .doc h1[id], .doc h2[id], .doc h3[id], .doc h4[id] { cursor:pointer; color:rgba(0, 0, 0, 0.75); } .dark h1 a[href^='#'], .dark h2 a[href^='#'], h1 .dark > a[href^='#'], h2 .dark > a[href^='#'] { color: white; } /* Icons ------------------------------------------------------- */ @font-face { font-family:'icon'; src:url('icon.eot?v=24'); src:url('icon.eot?v=24#iefix') format('embedded-opentype'), url('icon.woff?v=24') format('woff'); font-weight:normal; font-style:normal; } .rcon:after, .icon:before { font-family: 'icon'; content:''; display:inline-block; width:20px; height:20px; font-size: 20px; color: inherit; vertical-align:top; -webkit-background-size:4320px 60px; background-size:4320px 60px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .rcon.big:after, .icon.big:before { font-size: 40px; width:40px; height:40px; } .prose-big .icon, .prose-big .rcon, .prose .icon, .prose .rcon { line-height: 20px; } .icon.big { line-height:40px; } .icon:not(.big):before { margin-right:5px; } .icon:empty:before { margin:0; } /* :not(input) exists on this rule to allow inputs with a value to take a width, because otherwise these are considered empty */ .button.icon:empty:not(input) { width:40px; padding:10px; } .button.short.icon:empty { width:30px; padding:5px; } .big.button.icon { line-height: 40px; padding-left: 10px; padding-top: 0; padding-bottom: 0; } /* Generated with icomoon.com Note: :after rules and alternative names need to be added manually. Alternate exists for: .close -> .x */ /* before */ .icon.map:before { content: "\e900"; } .icon.studio:before { content: "\e901"; } .icon.analytics:before { content: "\e902"; } .icon.coding:before { content: "\e903"; } .icon.bike:before { content: "\e904"; } .icon.car:before { content: "\e905"; } .icon.drone:before { content: "\e906"; } .icon.walk:before { content: "\e907"; } .icon.certificate:before { content: "\e908"; } .icon.server:before { content: "\e909"; } .icon.caret-down:before { content: "\e6a5"; } .icon.caret-left:before { content: "\e6a6"; } .icon.caret-right:before { content: "\e6a7"; } .icon.caret-up:before { content: "\e6a8"; } .icon.step-ramp:before { content: "\e69c"; } .icon.smooth-ramp:before { content: "\e69d"; } .icon.bug:before { content: "\e69e"; } .icon.bell:before { content: "\e69f"; } .icon.polygon:before { content: "\e600"; } .icon.minus-document:before { content: "\e601"; } .icon.plus-document:before { content: "\e602"; } .icon.check-document:before { content: "\e603"; } .icon.grid:before { content: "\e604"; } .icon.osm:before { content: "\e605"; } .icon.at:before { content: "\e606"; } .icon.history:before { content: "\e607"; } .icon.palette:before { content: "\e608"; } .icon.sun:before { content: "\e609"; } .icon.account:before { content: "\e60a"; } .icon.adjust-stroke:before { content: "\e60b"; } .icon.alert:before { content: "\e60c"; } .icon.android:before { content: "\e60d"; } .icon.antialias:before { content: "\e60e"; } .icon.apple:before { content: "\e60f"; } .icon.arrive:before { content: "\e610"; } .icon.arrowright:before { content: "\e611"; } .icon.bear-left:before { content: "\e612"; } .icon.bear-right:before { content: "\e613"; } .icon.bolt:before { content: "\e614"; } .icon.book:before { content: "\e615"; } .icon.bookmark:before { content: "\e616"; } .icon.brackets:before { content: "\e617"; } .icon.building:before { content: "\e618"; } .icon.cap-butt:before { content: "\e619"; } .icon.cap-round:before { content: "\e61a"; } .icon.cap-square:before { content: "\e61b"; } .icon.cart:before { content: "\e61c"; } .icon.check:before { content: "\e61d"; } .icon.clipboard:before { content: "\e61e"; } .icon.close:before { content: "\e61f"; } .icon.x:before { content: "\e61f"; } .icon.cloud:before { content: "\e620"; } .icon.compass:before { content: "\e621"; } .icon.contact:before { content: "\e622"; } .icon.creditcard:before { content: "\e623"; } .icon.cross-edge:before { content: "\e624"; } .icon.crosshair:before { content: "\e625"; } .icon.dasharray:before { content: "\e626"; } .icon.dashboard:before { content: "\e627"; } .icon.data:before { content: "\e628"; } .icon.depart:before { content: "\e629"; } .icon.document:before { content: "\e62a"; } .icon.down:before { content: "\e62b"; } .icon.duplicate:before { content: "\e62c"; } .icon.en:before { content: "\e62d"; } .icon.enter-roundabout:before { content: "\e62e"; } .icon.eye:before { content: "\e62f"; } .icon.facebook:before { content: "\e630"; } .icon.floppy:before { content: "\e631"; } .icon.folder:before { content: "\e632"; } .icon.nofolder:before { content: "\e6a9"; } .icon.font:before { content: "\e633"; } .icon.forward:before { content: "\e634"; } .icon.foursquare:before { content: "\e635"; } .icon.fullscreen:before { content: "\e636"; } .icon.gap-width:before { content: "\e637"; } .icon.github:before { content: "\e638"; } .icon.gl:before { content: "\e639"; } .icon.globe:before { content: "\e63a"; } .icon.graph:before { content: "\e63b"; } .icon.hand:before { content: "\e63c"; } .icon.harddrive:before { content: "\e63d"; } .icon.heart:before { content: "\e63e"; } .icon.help:before { content: "\e63f"; } .icon.home:before { content: "\e640"; } .icon.info:before { content: "\e641"; } .icon.inspect:before { content: "\e642"; } .icon.join-miter:before { content: "\e643"; } .icon.join-bevel:before { content: "\e644"; } .icon.join-round:before { content: "\e645"; } .icon.l-r-arrow:before { content: "\e646"; } .icon.land:before { content: "\e647"; } .icon.landuse:before { content: "\e648"; } .icon.layers:before { content: "\e649"; } .icon.leaflet:before { content: "\e64a"; } .icon.levels:before { content: "\e64b"; } .icon.lifebuoy:before { content: "\e64c"; } .icon.line-miter-limit:before { content: "\e64d"; } .icon.line-round-limit:before { content: "\e64e"; } .icon.link:before { content: "\e64f"; } .icon.linkedin:before { content: "\e650"; } .icon.lock:before { content: "\e651"; } .icon.logout:before { content: "\e652"; } .icon.mail:before { content: "\e653"; } .icon.mapbox:before { content: "\e654"; } .icon.marker:before { content: "\e655"; } .icon.icon-halo:before { content: "\e6a2"; } .icon.symbol-layer:before { content: "\e6aa"; } .icon.max-text-angle:before { content: "\e656"; } .icon.menu:before { content: "\e657"; } .icon.minus:before { content: "\e658"; } .icon.mobile:before { content: "\e659"; } .icon.mt:before { content: "\e65a"; } .icon.next:before { content: "\e65b"; } .icon.noeye:before { content: "\e65c"; } .icon.opacity:before { content: "\e65d"; } .icon.package:before { content: "\e65e"; } .icon.paint:before { content: "\e65f"; } .icon.pencil:before { content: "\e660"; } .icon.picture:before { content: "\e661"; } .icon.plus:before { content: "\e662"; } .icon.point-line:before { content: "\e663"; } .icon.point:before { content: "\e664"; } .icon.polyline:before { content: "\e665"; } .icon.prev:before { content: "\e666"; } .icon.printer:before { content: "\e667"; } .icon.raster:before { content: "\e668"; } .icon.redo:before { content: "\e669"; } .icon.refresh:before { content: "\e66a"; } .icon.return:before { content: "\e66b"; } .icon.rotate:before { content: "\e66c"; } .icon.rss:before { content: "\e66d"; } .icon.satellite:before { content: "\e66e"; } .icon.search:before { content: "\e66f"; } .icon.share:before { content: "\e670"; } .icon.sharp-left:before { content: "\e671"; } .icon.sharp-right:before { content: "\e672"; } .icon.sprocket:before { content: "\e673"; } .icon.stackoverflow:before { content: "\e674"; } .icon.star:before { content: "\e675"; } .icon.street:before { content: "\e676"; } .icon.text-align-bottom-center:before { content: "\e677"; } .icon.text-align-bottom-left:before { content: "\e678"; } .icon.text-align-bottom-right:before { content: "\e679"; } .icon.text-align-center-center:before { content: "\e67a"; } .icon.text-align-center-left:before { content: "\e67b"; } .icon.text-align-center-right:before { content: "\e67c"; } .icon.text-align-overlap:before { content: "\e67d"; } .icon.text-align-top-center:before { content: "\e67e"; } .icon.text-align-top-left:before { content: "\e67f"; } .icon.text-align-top-right:before { content: "\e680"; } .icon.text-halo:before { content: "\e6a3"; } .icon.text-halo-width:before { content: "\e681"; } .icon.text-ignore-placement:before { content: "\e682"; } .icon.text-justify-center:before { content: "\e683"; } .icon.text-justify-left:before { content: "\e684"; } .icon.text-justify-right:before { content: "\e685"; } .icon.text-letter-spacing:before { content: "\e686"; } .icon.text-line-height:before { content: "\e687"; } .icon.text-max-width:before { content: "\e688"; } .icon.text-padding:before { content: "\e689"; } .icon.text-rotate:before { content: "\e68a"; } .icon.text-size:before { content: "\e68b"; } .icon.tilemill:before { content: "\e68c"; } .icon.time:before { content: "\e68d"; } .icon.tooltip:before { content: "\e68e"; } .icon.transform-lowercase:before { content: "\e68f"; } .icon.transform-uppercase:before { content: "\e690"; } .icon.trash:before { content: "\e691"; } .icon.position:before { content: "\e6a4"; } .icon.turn-left:before { content: "\e692"; } .icon.turn-right:before { content: "\e693"; } .icon.twitter:before { content: "\e694"; } .icon.tx:before { content: "\e695"; } .icon.u-d-arrow:before { content: "\e696"; } .icon.u-turn:before { content: "\e697"; } .icon.undo:before { content: "\e698"; } .icon.up:before { content: "\e699"; } .icon.video:before { content: "\e69a"; } .icon.water:before { content: "\e69b"; } .icon.quotes:before { content: "\e6a0"; } .icon.number:before { content: "\e6a1"; } .icon.line:before { content: "\e6ab"; } .icon.fill:before { content: "\e6ac"; } .icon.map:before { content: "\e900"; } .icon.studio:before { content: "\e901"; } .icon.tileset:before { content: "\e90a"; } .icon.point-line-poly:before { content: "\e90b"; } /* ------------------------------------------------------- */ /* after */ /* ------------------------------------------------------- */ .rcon.map:after { content: "\e900"; } .rcon.studio:after { content: "\e901"; } .rcon.analytics:after { content: "\e902"; } .rcon.coding:after { content: "\e903"; } .rcon.bike:after { content: "\e904"; } .rcon.car:after { content: "\e905"; } .rcon.drone:after { content: "\e906"; } .rcon.walk:after { content: "\e907"; } .rcon.certificate:after { content: "\e908"; } .rcon.server:after { content: "\e909"; } .rcon.caret-down:after { content: "\e6a5"; } .rcon.caret-left:after { content: "\e6a6"; } .rcon.caret-right:after { content: "\e6a7"; } .rcon.caret-up:after { content: "\e6a8"; } .rcon.step-ramp:after { content: "\e69c"; } .rcon.smooth-ramp:after { content: "\e69d"; } .rcon.bug:after { content: "\e69e"; } .rcon.bell:after { content: "\e69f"; } .rcon.polygon:after { content: "\e600"; } .rcon.minus-document:after { content: "\e601"; } .rcon.plus-document:after { content: "\e602"; } .rcon.check-document:after { content: "\e603"; } .rcon.grid:after { content: "\e604"; } .rcon.osm:after { content: "\e605"; } .rcon.at:after { content: "\e606"; } .rcon.history:after { content: "\e607"; } .rcon.palette:after { content: "\e608"; } .rcon.sun:after { content: "\e609"; } .rcon.account:after { content: "\e60a"; } .rcon.adjust-stroke:after { content: "\e60b"; } .rcon.alert:after { content: "\e60c"; } .rcon.android:after { content: "\e60d"; } .rcon.antialias:after { content: "\e60e"; } .rcon.apple:after { content: "\e60f"; } .rcon.arrive:after { content: "\e610"; } .rcon.arrowright:after { content: "\e611"; } .rcon.bear-left:after { content: "\e612"; } .rcon.bear-right:after { content: "\e613"; } .rcon.bolt:after { content: "\e614"; } .rcon.book:after { content: "\e615"; } .rcon.bookmark:after { content: "\e616"; } .rcon.brackets:after { content: "\e617"; } .rcon.building:after { content: "\e618"; } .rcon.cap-butt:after { content: "\e619"; } .rcon.cap-round:after { content: "\e61a"; } .rcon.cap-square:after { content: "\e61b"; } .rcon.cart:after { content: "\e61c"; } .rcon.check:after { content: "\e61d"; } .rcon.clipboard:after { content: "\e61e"; } .rcon.close:after { content: "\e61f"; } .rcon.x:after { content: "\e61f"; } .rcon.cloud:after { content: "\e620"; } .rcon.compass:after { content: "\e621"; } .rcon.contact:after { content: "\e622"; } .rcon.creditcard:after { content: "\e623"; } .rcon.cross-edge:after { content: "\e624"; } .rcon.crosshair:after { content: "\e625"; } .rcon.dasharray:after { content: "\e626"; } .rcon.dashboard:after { content: "\e627"; } .rcon.data:after { content: "\e628"; } .rcon.depart:after { content: "\e629"; } .rcon.document:after { content: "\e62a"; } .rcon.down:after { content: "\e62b"; } .rcon.duplicate:after { content: "\e62c"; } .rcon.en:after { content: "\e62d"; } .rcon.enter-roundabout:after { content: "\e62e"; } .rcon.eye:after { content: "\e62f"; } .rcon.facebook:after { content: "\e630"; } .rcon.floppy:after { content: "\e631"; } .rcon.folder:after { content: "\e632"; } .rcon.nofolder:after { content: "\e6a9"; } .rcon.font:after { content: "\e633"; } .rcon.forward:after { content: "\e634"; } .rcon.foursquare:after { content: "\e635"; } .rcon.fullscreen:after { content: "\e636"; } .rcon.gap-width:after { content: "\e637"; } .rcon.github:after { content: "\e638"; } .rcon.gl:after { content: "\e639"; } .rcon.globe:after { content: "\e63a"; } .rcon.graph:after { content: "\e63b"; } .rcon.hand:after { content: "\e63c"; } .rcon.harddrive:after { content: "\e63d"; } .rcon.heart:after { content: "\e63e"; } .rcon.help:after { content: "\e63f"; } .rcon.home:after { content: "\e640"; } .rcon.info:after { content: "\e641"; } .rcon.inspect:after { content: "\e642"; } .rcon.join-miter:after { content: "\e643"; } .rcon.join-bevel:after { content: "\e644"; } .rcon.join-round:after { content: "\e645"; } .rcon.l-r-arrow:after { content: "\e646"; } .rcon.land:after { content: "\e647"; } .rcon.landuse:after { content: "\e648"; } .rcon.layers:after { content: "\e649"; } .rcon.leaflet:after { content: "\e64a"; } .rcon.levels:after { content: "\e64b"; } .rcon.lifebuoy:after { conten