/* 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:14px; 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:#333745; 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:#0079fe; text-decoration:none; } a:hover > code, a.active, a:hover { color:#1775db; } 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:#333745; } .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:#333745; } .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:#333745; } .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:#333745; 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:#333745; } .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:; src: format('embedded-opentype'), 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 { content: "\e64c"; } .rcon.line-miter-limit:after { content: "\e64d"; } .rcon.line-round-limit:after { content: "\e64e"; } .rcon.link:after { content: "\e64f"; } .rcon.linkedin:after { content: "\e650"; } .rcon.lock:after { content: "\e651"; } .rcon.logout:after { content: "\e652"; } .rcon.mail:after { content: "\e653"; } .rcon.mapbox:after { content: "\e654"; } .rcon.marker:after { content: "\e655"; } .rcon.icon-halo:after { content: "\e6a2"; } .rcon.symbol-layer:after { content: "\e6aa"; } .rcon.max-text-angle:after { content: "\e656"; } .rcon.menu:after { content: "\e657"; } .rcon.minus:after { content: "\e658"; } .rcon.mobile:after { content: "\e659"; } .rcon.mt:after { content: "\e65a"; } .rcon.next:after { content: "\e65b"; } .rcon.noeye:after { content: "\e65c"; } .rcon.opacity:after { content: "\e65d"; } .rcon.package:after { content: "\e65e"; } .rcon.paint:after { content: "\e65f"; } .rcon.pencil:after { content: "\e660"; } .rcon.picture:after { content: "\e661"; } .rcon.plus:after { content: "\e662"; } .rcon.point-line:after { content: "\e663"; } .rcon.point:after { content: "\e664"; } .rcon.polyline:after { content: "\e665"; } .rcon.prev:after { content: "\e666"; } .rcon.printer:after { content: "\e667"; } .rcon.raster:after { content: "\e668"; } .rcon.redo:after { content: "\e669"; } .rcon.refresh:after { content: "\e66a"; } .rcon.return:after { content: "\e66b"; } .rcon.rotate:after { content: "\e66c"; } .rcon.rss:after { content: "\e66d"; } .rcon.satellite:after { content: "\e66e"; } .rcon.search:after { content: "\e66f"; } .rcon.share:after { content: "\e670"; } .rcon.sharp-left:after { content: "\e671"; } .rcon.sharp-right:after { content: "\e672"; } .rcon.sprocket:after { content: "\e673"; } .rcon.stackoverflow:after { content: "\e674"; } .rcon.star:after { content: "\e675"; } .rcon.street:after { content: "\e676"; } .rcon.text-align-bottom-center:after { content: "\e677"; } .rcon.text-align-bottom-left:after { content: "\e678"; } .rcon.text-align-bottom-right:after { content: "\e679"; } .rcon.text-align-center-center:after { content: "\e67a"; } .rcon.text-align-center-left:after { content: "\e67b"; } .rcon.text-align-center-right:after { content: "\e67c"; } .rcon.text-align-overlap:after { content: "\e67d"; } .rcon.text-align-top-center:after { content: "\e67e"; } .rcon.text-align-top-left:after { content: "\e67f"; } .rcon.text-align-top-right:after { content: "\e680"; } .rcon.text-halo:after { content: "\e6a3"; } .rcon.text-halo-width:after { content: "\e681"; } .rcon.text-ignore-placement:after { content: "\e682"; } .rcon.text-justify-center:after { content: "\e683"; } .rcon.text-justify-left:after { content: "\e684"; } .rcon.text-justify-right:after { content: "\e685"; } .rcon.text-letter-spacing:after { content: "\e686"; } .rcon.text-line-height:after { content: "\e687"; } .rcon.text-max-width:after { content: "\e688"; } .rcon.text-padding:after { content: "\e689"; } .rcon.text-rotate:after { content: "\e68a"; } .rcon.text-size:after { content: "\e68b"; } .rcon.tilemill:after { content: "\e68c"; } .rcon.time:after { content: "\e68d"; } .rcon.tooltip:after { content: "\e68e"; } .rcon.transform-lowercase:after { content: "\e68f"; } .rcon.transform-uppercase:after { content: "\e690"; } .rcon.trash:after { content: "\e691"; } .rcon.position:after { content: "\e6a4"; } .rcon.turn-left:after { content: "\e692"; } .rcon.turn-right:after { content: "\e693"; } .rcon.twitter:after { content: "\e694"; } .rcon.tx:after { content: "\e695"; } .rcon.u-d-arrow:after { content: "\e696"; } .rcon.u-turn:after { content: "\e697"; } .rcon.undo:after { content: "\e698"; } .rcon.up:after { content: "\e699"; } .rcon.video:after { content: "\e69a"; } .rcon.water:after { content: "\e69b"; } .rcon.quotes:after { content: "\e6a0"; } .rcon.number:after { content: "\e6a1"; } .rcon.line:after { content: "\e6ab"; } .rcon.fill:after { content: "\e6ac"; } .rcon.map:after { content: "\e900"; } .rcon.studio:after { content: "\e901"; } .rcon.tileset:after { content: "\e90a"; } .rcon.point-line-poly:after { content: "\e90b"; } /* multicolored icons */ .icon.checkmark:before { background:transparent 0px 0px no-repeat; -webkit-background-size:100px 350px; background-size:100px 350px; } /* credit card icons */ .credit-card { background: 0 0 no-repeat; height:30px; width:45px; display:inline-block; vertical-align:top; -webkit-background-size:320px 70px; background-size:320px 70px; } .credit-card.visa { background-position:0 0; } .credit-card.mastercard { background-position:-55px 0; } .credit-card.american-express { background-position:-110px 0; } .credit-card.jcb { background-position:-165px 0; } .credit-card.discover { background-position:-220px 0; } .credit-card.diners-club { background-position:-275px 0; } .credit-card.disabled.visa { background-position:0 -40px; } .credit-card.disabled.mastercard { background-position:-55px -40px; } .credit-card.disabled.american-express { background-position:-110px -40px; } .credit-card.disabled.jcb { background-position:-165px -40px; } .credit-card.disabled.discover { background-position:-220px -40px; } .credit-card.disabled.diners-club { background-position:-275px -40px; } /* components ------------------------------------------------------- */ .box { margin-bottom:20px; border:1px solid rgba(0,0,0,0.10); } .box:last-child { margin-bottom: 0;} .box figure, .box .box-heading { border-bottom:1px solid rgba(0,0,0,0.1); } .box figure:last-child { border-bottom:none; } /* modals */ .modal-content { background:rgba(0,0,0,0.50); position:fixed; overflow: auto; top:0; left:0; right:0; opacity:0; height: 0; z-index:99999; pointer-events: none; } .modal-content.active { height: auto; bottom: 0; opacity:1; pointer-events: all; } .modal-popup { opacity:0; position:absolute; overflow-y:auto; height:100%; left:0; right:0; } .modal-content .modal-body { border-radius: 3px; overflow: hidden; margin-top:40px; margin-left:auto; margin-right:auto; float:none; } .modal-auth .sliding { height:100%; overflow-y:auto; } .modal-auth .sliding, .modal-auth .sliding > * { width:100%; } /* ensures layers modals stack correctly. */ .modal-popup { z-index: 1; } /* keeps sign in screen from scrolling based on sign up modal's height. */ .modal-auth .sliding .active2 { overflow-y:hidden; } /* hide older modals when younger modals are in dom. */ .modal-popup:last-child { opacity:1; } /* notifications */ .note { background:#f0f8fc; padding:10px; } .note.error { background:#f9886c; } .note.warning { background:#f1f075; } .prose .note, .note.prose { margin-bottom:20px; } .prose .note:last-child, .note.prose:last-child { margin-bottom:0; } .note pre { background:#fff; } /* columns ------------------------------------------------------- */ .limiter { width:83.3333%; max-width:1000px; margin-left:auto; margin-right:auto; } .col0 { float:left; width:04.1666%; max-width:50px; } .col1 { float:left; width:08.3333%; max-width:100px; } .col2 { float:left; width:16.6666%; max-width:200px; } .col3 { float:left; width:25.0000%; max-width:300px; } .col4 { float:left; width:33.3333%; max-width:400px; } .col5 { float:left; width:41.6666%; max-width:500px; } .col6 { float:left; width:50.0000%; max-width:600px; } .col7 { float:left; width:58.3333%; max-width:700px; } .col8 { float:left; width:66.6666%; max-width:800px; } .col9 { float:left; width:75.0000%; max-width:900px; } .col10 { float:left; width:83.3333%; max-width:1000px; } .col11 { float:left; width:91.6666%; max-width:1100px; } .col12 { width:100%; display:block; } .fifths > * { float: left; width: 20%; } .unlimiter .col0, .unlimiter .col1, .unlimiter .col2, .unlimiter .col3, .unlimiter .col4, .unlimiter .col5, .unlimiter .col6, .unlimiter .col7, .unlimiter .col8, .unlimiter .col9, .unlimiter .col10, .unlimiter .col11 { max-width: none; } .margin0 { margin-left:04.1666%; } .margin1 { margin-left:08.3333%; } .margin2 { margin-left:16.6666%; } .margin3 { margin-left:25.0000%; } .margin4 { margin-left:33.3333%; } .margin5 { margin-left:41.6666%; } .margin6 { margin-left:50.0000%; } .margin7 { margin-left:58.3333%; } .margin8 { margin-left:66.6666%; } .margin9 { margin-left:75.0000%; } .margin10 { margin-left:83.3333%; } .margin11 { margin-left:91.6666%; } .margin12 { margin-left:100.0000%; } /* reverse margins on right-floated elements */ .margin0r { margin-right:04.1666%; } .margin1r { margin-right:08.3333%; } .margin2r { margin-right:16.6666%; } .margin3r { margin-right:25.0000%; } .margin4r { margin-right:33.3333%; } .margin5r { margin-right:41.6666%; } .margin6r { margin-right:50.0000%; } .margin7r { margin-right:58.3333%; } .margin8r { margin-right:66.6666%; } .margin9r { margin-right:75.0000%; } .margin10r { margin-right:83.3333%; } .margin11r { margin-right:91.6666%; } .margin12r { margin-right:100.0000%; } .row0 { height: 0px;} .row1 { height: 40px;} .row2 { height: 80px;} .row3 { height: 120px;} .row4 { height: 160px;} .row5 { height: 200px;} .row6 { height: 240px;} .row7 { height: 280px;} .row8 { height: 320px;} .row9 { height: 360px;} .row10 { height: 400px;} .row11 { height: 440px;} .row12 { height: 480px;} .row13 { height: 520px;} .row14 { height: 560px;} .row15 { height: 600px;} .row16 { height: 640px;} /* pixel grid -------------------------------------------------- */ .width4 { width: 40px; float: left; } .width8 { width: 80px; float: left; } .width12 { width: 120px; float: left; } .width16 { width: 160px; float: left; } .width20 { width: 200px; float: left; } .width24 { width: 240px; float: left; } .width28 { width: 280px; float: left; } .width32 { width: 320px; float: left; } .width36 { width: 360px; float: left; } .width40 { width: 400px; float: left; } /* deprecated - do not use -------------------------------------------------- */ .fcol000 { width: 5px; float: left; } .fcol00 { width: 10px; float: left; } .fcol0 { width: 20px; float: left; } .fcol1 { width: 30px; float: left; } .fcol2 { width: 60px; float: left; } .fcol3 { width: 90px; float: left; } .fcol4 { width: 120px; float: left; } .fcol5 { width: 150px; float: left; } .fcol6 { width: 180px; float: left; } .fcol7 { width: 210px; float: left; } .fcol8 { width: 240px; float: left; } .fcol9 { width: 270px; float: left; } .fcol10 { width: 300px; float: left; } .fcol11 { width: 330px; float: left; } .fcol12 { width: 360px; float: left; } .fmargin000 { margin-left: 5px; } .fmargin00 { margin-left: 10px; } .fmargin0 { margin-left: 20px; } .fmargin1 { margin-left: 30px; } .fmargin2 { margin-left: 60px; } .fmargin3 { margin-left: 90px; } .fmargin4 { margin-left: 120px; } .fmargin5 { margin-left: 150px; } .fmargin6 { margin-left: 180px; } .fmargin7 { margin-left: 210px; } .fmargin8 { margin-left: 240px; } .fmargin9 { margin-left: 270px; } .fmargin10 { margin-left: 300px; } .fmargin11 { margin-left: 330px; } .fmargin12 { margin-left: 360px; } .fmargin13 { margin-left: 390px; } .fmargin14 { margin-left: 420px; } .fmargin15 { margin-left: 450px; } .fmargin16 { margin-left: 480px; } .fmargin00r { margin-right: 10px; } .fmargin0r { margin-right: 20px; } .fmargin1r { margin-right: 30px; } .fmargin2r { margin-right: 60px; } .fmargin3r { margin-right: 90px; } /* margins ------------------------------------------------------- */ .space-left0 { margin-left: 5px;} .space-left1 { margin-left: 10px;} .space-left2 { margin-left: 20px;} .space-left3 { margin-left: 30px;} .space-left4 { margin-left: 40px;} .space-left8 { margin-left: 80px;} .space-left12 { margin-left: 120px;} .space-left16 { margin-left: 160px;} .space-left20 { margin-left: 200px;} .space-left24 { margin-left: 240px;} .space-right0 { margin-right: 5px;} .space-right1 { margin-right: 10px;} .space-right2 { margin-right: 20px;} .space-right3 { margin-right: 30px;} .space-right4 { margin-right: 40px;} .space-right8 { margin-right: 80px;} .space-right12 { margin-right: 120px;} .space-right16 { margin-right: 160px;} .space-right20 { margin-right: 200px;} .space-right24 { margin-right: 240px;} .space-bottom0 { margin-bottom: 5px;} .space-bottom1 { margin-bottom: 10px;} .space-bottom, /* deprecated, use space-bottom2 */ .space-bottom2 { margin-bottom: 20px;} .space-bottom4 { margin-bottom: 40px;} .space-bottom8 { margin-bottom: 80px;} .space-top0 { margin-top: 5px;} .space-top1 { margin-top: 10px;} .space-top2 { margin-top: 20px;} .space-top4 { margin-top: 40px;} .space-top8 { margin-top: 80px;} /* padding ------------------------------------------------------- */ .pad0 { padding:5px; } .pad0y { padding-top:5px; padding-bottom:5px; } .pad0x { padding-right:5px; padding-left:5px; } .pad1 { padding:10px; } .pad2 { padding:20px; } .pad4 { padding:40px; } .pad1x { padding-left: 10px; padding-right: 10px;} .pad2x { padding-left: 20px; padding-right: 20px;} .pad4x { padding-left: 40px; padding-right: 40px;} .pad1y { padding-top: 10px; padding-bottom: 10px;} .pad2y { padding-top: 20px; padding-bottom: 20px;} .pad4y { padding-top: 40px; padding-bottom: 40px;} .pad8 { padding: 80px; } .pad8y { padding-top: 80px; padding-bottom: 80px;} .pad8x { padding-left: 80px; padding-right: 80px;} /* keylines ------------------------------------------------------- */ .keyline-all { border:1px solid rgba(0,0,0,0.10); } .keyline-top { border-top:1px solid rgba(0,0,0,0.10); } .keyline-right { border-right:1px solid rgba(0,0,0,0.10); } .keyline-bottom { border-bottom:1px solid rgba(0,0,0,0.10); } .keyline-left { border-left:1px solid rgba(0,0,0,0.10); } .dark .keyline-all { border:1px solid rgba(255,255,255,0.25); } .dark .keyline-top { border-top:1px solid rgba(255,255,255,0.25); } .dark .keyline-right { border-right:1px solid rgba(255,255,255,0.25); } .dark .keyline-bottom { border-bottom:1px solid rgba(255,255,255,0.25); } .dark .keyline-left { border-left:1px solid rgba(255,255,255,0.25); } /* absolute containers ------------------------------------------------------- */ .pin-top, .pin-right, .pin-bottom, .pin-left, .pin-topleft, .pin-topright, .pin-bottomleft, .pin-bottomright { position:absolute; } .pin-bottom { right:0; bottom:0; left:0; } .pin-top { top:0; right:0; left:0; } .pin-left { top:0; bottom:0; left:0; } .pin-right { top:0; right:0; bottom:0; } .pin-bottomright { bottom:0; right:0; } .pin-bottomleft { bottom:0; left:0; } .pin-topright { top:0; right:0; } .pin-topleft { top:0; left:0; } /* fixed containers ------------------------------------------------------- */ .fixed-top, .fixed-right, .fixed-bottom, .fixed-left, .fixed-topleft, .fixed-topright, .fixed-bottomleft, .fixed-bottomright { position:fixed; } .fixed-bottom { right:0; bottom:0; left:0; } .fixed-top { top:0; right:0; left:0; } .fixed-left { top:0; bottom:0; left:0; } .fixed-right { top:0; right:0; bottom:0; } .fixed-bottomright { bottom:0; right:0; } .fixed-bottomleft { bottom:0; left:0; } .fixed-topright { top:0; right:0; } .fixed-topleft { top:0; left:0; } /* fills -------------------------------------------------------- */ .fill-dark { background-color:#333745; } .fill-gray, .fill-grey { background:#eee; } .fill-grey-dark, .fill-gray-dark { background:#333745; } .fill-white { background:#fff; } /* .fill-light { background:#f8f8f8; } */ .fill-light { background:#eeeeee; } /* deprecated, use fill-cyan */ .fill-blue-light { background:#52a1d8; } .fill-cyan { background:#3bb2d0; } .fill-midnight { background:#142736; } .fill-blue { background:#3887be; } .fill-denim { background:#50667f; } .fill-navy { background:#28353d; } .fill-navy-dark { background:#222b30; } .fill-purple { background:#8a8acb; } .fill-green { background:#56b881; } .fill-yellow { background:#f1f075; } .fill-orange { background:#f9886c; } .fill-darkblue { background-color:#223b53; } .fill-red { background-color:#e55e5e; } .fill-teal { background-color:#41afa5; } .fill-pink { background-color:#ed6498; } .fill-mustard { background-color:#fbb03b; } .fill-darken0 { background:rgba(0,0,0,0.05); } .fill-darken1 { background:rgba(0,0,0,0.25); } .fill-darken2 { background:rgba(0,0,0,0.50); } .fill-darken3 { background:rgba(0,0,0,0.75); } .fill-lighten0 { background:rgba(255,255,255,0.10); } .fill-lighten1 { background:rgba(255,255,255,0.25); } .fill-lighten2 { background:rgba(255,255,255,0.50); } .fill-lighten3 { background:rgba(255,255,255,0.75); } .mb-logo { background:#fff; position:relative; z-index:10; } .mb-logo { background:transparent no-repeat 0 0; display:inline-block; vertical-align:top; height:40px; width:100px; text-indent:-999em; overflow:hidden; -webkit-background-size:100px 350px; background-size:100px 350px; } .dark .mb-logo, .mb-logo.white { background-position:0px -60px; } .mb-logo.quiet { background-position:0px -120px; } .mb-logo.small { width:65px; height:20px; background-position:0 -180px; } .mb-logo.small.white { background-position:0 -240px;} .mb-logo.small.quiet { background-position:0 -300px;} /* pygments syntax highlighting ------------------------------------------------------- */ pre .hll { background-color:#ffffcc } /* no styling, just default: pre .nx, normal text pre .ni name.entity pre .nf name.entity pre .no name.constant */ /* comments */ pre .o, /* operator */ pre .c, pre .c1, pre .cp, pre .cm { color:#999; font-style:italic; } pre .err { color:#f00000; background-color:#f0a0a0 } /* error */ pre .k { color:#333745; font-weight:bold; } /* keyword */ pre .css .k { font-weight:normal; } pre .cs { color:#333745; font-style:italic; } /* comment.special */ pre .gd { color:#a00000; } /* generic.deleted */ pre .ge { font-style:italic } /* generic.emph */ pre .gs { font-weight:bold; } /* generic.strong */ pre .gr { color:#ff0000; } /* generic.error */ pre .gh { color:#000080; } /* generic.heading */ pre .gi { color:#00a000; } /* generic.inserted */ pre .go { color:#808080; } /* generic.output */ pre .gp { color:#c65d09; } /* generic.prompt */ pre .gu { color:#800080; } /* generic.subheading */ pre .gt { color:#0040d0; } /* generic.traceback */ pre .kc { color:#d24400; } /* keyword.constant */ /* keyword.declaration * keyword.namespace * keyword.reserved */ pre .kd, pre .kn, pre .kr, pre .nt { color:#0b5a91; } /* name.tag */ /* literal.number */ pre .mh, pre .mo, pre .il, pre .mi, pre .kt, pre .mf, pre .nl, /* name.label */ pre .na, /* name.attribute */ pre .m { color:#0c9dc2; } /* keyword.type */ pre .kp { color:#0080f0; } /* keyword.pseudo */ pre .nc { color:#df6637; } /* name.class */ pre .css .nc { color:#75a21c; } pre .nd { color:#505050; } /* name.decorator */ pre .ne { color:#f00000; } /* name.exception */ pre .nn { color:#0e84b5; } /* name.namespace */ pre .nv { color:#003060; } /* name.variable */ pre .ow { color:#333745; } /* operator.word */ pre .w { color:#bbbbbb; } /* text.whitespace */ pre .sc { color:#8080f0; } /* literal.string.char */ pre .sd { color:#d04020; } /* literal.string.doc */ /* name.builtin / name.builtin.pseudo */ pre .bp, pre .nb { color:#007020; } /* literal.string */ pre .s, pre .sh, pre .sb, pre .s1, pre .sr, pre .se { color:#75a21c; } pre .si { background-color:#eee; } /* literal.string.interpol */ pre .p { color:#444444; } /* normal text */ pre .ss { color:#f0c080; } /* literal.string.symbol */ pre .vc { color:#c0c0f0; } /* name.variable.class */ pre .vg { color:#f08040; } /* name.variable.global */ pre .vi { color:#a0a0f0; } /* name.variable.instance */ /* css animations/transitions -------------------------------------------------- */ .animate { -webkit-transition:all .125s; -moz-transition:all .125s; -ms-transition:all .125s; transition:all .125s; } .offcanvas-top { -webkit-transform:translatey(-100%); -moz-transform:translatey(-100%); -ms-transform:translatey(-100%); transform:translatey(-100%); } .offcanvas-right { -webkit-transform:translatex(100%); -moz-transform:translatex(100%); -ms-transform:translatex(100%); transform:translatex(100%); } .offcanvas-bottom { -webkit-transform:translatey(100%); -moz-transform:translatey(100%); -ms-transform:translatey(100%); transform:translatey(100%); } .offcanvas-left { -webkit-transform:translatex(-100%); -moz-transform:translatex(-100%); -ms-transform:translatex(-100%); transform:translatex(-100%); } .offcanvas-top.active, .offcanvas-bottom.active, .offcanvas-top:target, .offcanvas-bottom:target { -webkit-transform:translatey(0); -moz-transform:translatey(0); -ms-transform:translatey(0); transform:translatey(0); } .offcanvas-left.active, .offcanvas-right.active, .offcanvas-left:target, .offcanvas-right:target { -webkit-transform:translatex(0); -moz-transform:translatex(0); -ms-transform:translatex(0); transform:translatex(0); } /* sliding panes */ .sliding { position:relative; } .sliding > * { position:absolute; } .sliding.h > * { -webkit-transform:translatex(-100%); -moz-transform:translatex(-100%); -ms-transform:translatex(-100%); transform:translatex(-100%); } .sliding.v > * { -webkit-transform:translatey(-100%); -moz-transform:translatey(-100%); -ms-transform:translatey(-100%); transform:translatey(-100%); } .sliding.h.active1 > *:nth-child( 1), .sliding.h.active2 > *:nth-child( 2), .sliding.h.active3 > *:nth-child( 3), .sliding.h.active4 > *:nth-child( 4), .sliding.h.active5 > *:nth-child( 5), .sliding.h.active6 > *:nth-child( 6), .sliding.h.active7 > *:nth-child( 7), .sliding.h.active8 > *:nth-child( 8), .sliding.h.active9 > *:nth-child( 9) { -webkit-transform:translatex(0%); -moz-transform:translatex(0%); -ms-transform:translatex(0%); transform:translatex(0%); } .sliding.h.active1 > *:nth-child( n 2), .sliding.h.active2 > *:nth-child( n 3), .sliding.h.active3 > *:nth-child( n 4), .sliding.h.active4 > *:nth-child( n 5), .sliding.h.active5 > *:nth-child( n 6), .sliding.h.active6 > *:nth-child( n 7), .sliding.h.active7 > *:nth-child( n 8), .sliding.h.active8 > *:nth-child( n 9), .sliding.h.active9 > *:nth-child(n 10) { -webkit-transform:translatex(100%); -moz-transform:translatex(100%); -ms-transform:translatex(100%); transform:translatex(100%); } .sliding.v.active1 > *:nth-child( 1), .sliding.v.active2 > *:nth-child( 2), .sliding.v.active3 > *:nth-child( 3), .sliding.v.active4 > *:nth-child( 4), .sliding.v.active5 > *:nth-child( 5), .sliding.v.active6 > *:nth-child( 6), .sliding.v.active7 > *:nth-child( 7), .sliding.v.active8 > *:nth-child( 8), .sliding.v.active9 > *:nth-child( 9), .sliding.v.active10> *:nth-child( 10), .sliding.v.active11> *:nth-child( 11), .sliding.v.active12> *:nth-child( 12), .sliding.v.active13> *:nth-child( 13), .sliding.v.active14> *:nth-child( 14), .sliding.v.active15> *:nth-child( 15), .sliding.v.active16> *:nth-child( 16), .sliding.v.active17> *:nth-child( 17), .sliding.v.active18> *:nth-child( 18), .sliding.v.active19> *:nth-child( 19), .sliding.v.active20> *:nth-child( 20) { -webkit-transform:translatey(0%); -moz-transform:translatey(0%); -ms-transform:translatey(0%); transform:translatey(0%); } .sliding.v.active1 > *:nth-child( n 2), .sliding.v.active2 > *:nth-child( n 3), .sliding.v.active3 > *:nth-child( n 4), .sliding.v.active4 > *:nth-child( n 5), .sliding.v.active5 > *:nth-child( n 6), .sliding.v.active6 > *:nth-child( n 7), .sliding.v.active7 > *:nth-child( n 8), .sliding.v.active8 > *:nth-child( n 9), .sliding.v.active9 > *:nth-child(n 10), .sliding.v.active10> *:nth-child(n 11), .sliding.v.active11> *:nth-child(n 12), .sliding.v.active12> *:nth-child(n 13), .sliding.v.active13> *:nth-child(n 14), .sliding.v.active14> *:nth-child(n 15), .sliding.v.active15> *:nth-child(n 16), .sliding.v.active16> *:nth-child(n 17), .sliding.v.active17> *:nth-child(n 18), .sliding.v.active18> *:nth-child(n 19), .sliding.v.active19> *:nth-child(n 20), .sliding.v.active20> *:nth-child(n 21) { -webkit-transform:translatey(100%); -moz-transform:translatey(100%); -ms-transform:translatey(100%); transform:translatey(100%); } /* markup free clearing details: http://www.positioniseverything.net/easyclearing.html ------------------------------------------------------- */ .clearfix { display:block; } .clearfix:after { content:''; display:block; height:0; clear:both; visibility:hidden; } /* additional utility classes ------------------------------------------------------- */ .fr { float:right; } .fl { float:left; } .unfloat { float:none; } .dot { border-radius:50%; } .quiet { color:#7f7f7f; color: rgba(0,0,0,.5); } .dark .quiet { color: #7f7f7f; color: rgba(255,255,255,.5);} .center { text-align:center; } .contain { position:relative; } .clip { overflow:hidden; } .hidden.hidden { display:none; } .text-left { text-align:left; } .text-right { text-align:right; } .space > * { margin-right:5px; } .hide-tablet, .hide-mobile { display:block; } .show-tablet, .show-mobile { display:none; } .show-mobile { display:none; } .show-mobile.inline { display:none; } img.inline, .inline { display:inline-block; } .break-word { word-wrap:break-word; } .align-middle { vertical-align: middle;} .align-top { vertical-align: top;} .block { display:block; } .scroll-h { overflow-x:auto; } .scroll-v { overflow-y:auto; } .capitalize { text-transform:capitalize; } .z1 { z-index:1; } .z2 { z-index:2; } .z8 { z-index:8; } .z10 { z-index:10; } .z100 { z-index:100; } .round { border-radius:3px; } .round-top { border-radius:3px 3px 0 0; } .round-right { border-radius:0 3px 3px 0; } .round-bottom { border-radius:0 0 3px 3px; } .round-left { border-radius:3px 0 0 3px; } .round-topleft { border-top-left-radius: 3px;} .round-bottomleft { border-bottom-left-radius: 3px;} .round-topright { border-top-right-radius: 3px;} .round-bottomright { border-bottom-right-radius: 3px;} .shadow { box-shadow: 0 0 25px 0 rgba(0,0,0,0.15); } .uppercase { text-transform: uppercase; } .noevents { pointer-events: none;} .unround, .pill.unround .unround { border-radius:0;} .caption { display:block; } .prose .caption { font-size: 12px; margin: -20px 0 20px } .truncate { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } /* loading overlay ------------------------------------------------------- */ .loading:after, .loading:before { content:''; display:block; position:absolute; z-index:10; } .loading:before { background:transparent; left:0; top:0; width:100%; height:100%; } .loading:after { background:rgba(0,0,0,.2) 50% 50% no-repeat; left:50%; top:50%; margin:-20px 0 0 -20px; width:40px; height:40px; border-radius:50%; -webkit-animation: rotate 1s linear infinite; -moz-animation: rotate 1s linear infinite; -ms-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } .spinner:after { content:''; position:absolute; right:5px; top:50%; border-radius:50%; background:rgba(0,0,0,.5) 50% 50% no-repeat; background-size: 20px; margin:-15px 0 0 -15px; width:30px; height:30px; opacity:.5; -webkit-animation: rotate 1s linear infinite; -moz-animation: rotate 1s linear infinite; -ms-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* small screen layout ------------------------------------------------------- */ @media only screen and (max-width:900px) { .limiter { width: 100%; padding-left:20px; padding-right:20px; } } /* tablet layout ------------------------------------------------------- */ @media only screen and (max-width:770px) { .hide-tablet { display:none; } .show-tablet { display:block; } } /* mobile layout ------------------------------------------------------- */ @media only screen and (max-width:640px) { a:link { -webkit-tap-highlight-color:rgba(0,0,0,0); } label .inline a { font-weight:normal; } .row1 { height:auto; min-height: 40px;} .row2 { height:auto; min-height: 80px;} .row3 { height:auto; min-height: 120px;} .row4 { height:auto; min-height: 160px;} .row5 { height:auto; min-height: 200px;} .row6 { height:auto; min-height: 240px;} .row7 { height:auto; min-height: 280px;} .row8 { height:auto; min-height: 320px;} .row9 { height:auto; min-height: 360px;} .row10 { height:auto; min-height: 400px;} .row11 { height:auto; min-height: 440px;} .row12 { height:auto; min-height: 480px;} .row13 { height:auto; min-height: 520px;} .row14 { height:auto; min-height: 560px;} .row15 { height:auto; min-height: 600px;} .row16 { height:auto; min-height: 640px;} .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .fifths > * { width:100%; max-width:100%; } .margin0, .margin1, .margin2, .margin3, .margin4, .margin5, .margin6, .margin7, .margin8, .margin9, .margin10, .margin11, .margin12 { margin-left:0; } .pad8 { padding:40px; } .pad8y { padding-top:40px; padding-bottom:40px;} .pad8x { padding-left:40px; padding-right:40px;} .pad4y { padding-top:20px; padding-bottom:20px; } .pad4 { padding:20px; } .pad4x { padding-left:20px; padding-right:20px; } .pad2 { padding:10px; } .pad2y { padding-top:10px; padding-bottom:10px; } .pad2x { padding-right:10px; padding-left:10px; } .title { margin-bottom:10px; } .space-bottom2, .space-bottom { margin-bottom:10px; } .space-bottom4 { margin-bottom:20px; } .space-bottom8 { margin-bottom:40px;} .space-top2 { margin-top:10px;} .space-top4 { margin-top:20px;} .space-top8 { margin-top:40px;} .hide-mobile { display:none!important; } .show-mobile { display:block!important; } .show-mobile.inline { display:inline-block!important; } .pill:not(.mobile-cols) > *:not(.stroke) { width:100%; border-left-width:0; border-bottom-width:1px; } .pill:not(.mobile-cols) > *:first-of-type { border-radius:3px 3px 0 0; } .pill:not(.mobile-cols) > *:last-of-type:not(.stroke) { border-bottom-width:0; border-radius:0 0 3px 3px; } .tabs:not(.mobile-cols) > a { border-right-width:0; border-bottom-width:1px; } .tabs:not(.mobile-cols) > a:last-of-type { border-bottom:none; } .mobile-cols > .col0 { float:left; width:04.1666%; } .mobile-cols > .col1 { float:left; width:08.3333%; } .mobile-cols > .col2 { float:left; width:16.6666%; } .mobile-cols > .col3 { float:left; width:25.0000%; } .mobile-cols > .col4 { float:left; width:33.3333%; } .mobile-cols > .col5 { float:left; width:41.6666%; } .mobile-cols > .col6 { float:left; width:50.0000%; } .mobile-cols > .col7 { float:left; width:58.3333%; } .mobile-cols > .col8 { float:left; width:66.6666%; } .mobile-cols > .col9 { float:left; width:75.0000%; } .mobile-cols > .col10 { float:left; width:83.3333%; } .mobile-cols > .col11 { float:left; width:91.6666%; } .mobile-cols > .margin0 { margin-left:04.1666%; } .mobile-cols > .margin1 { margin-left:08.3333%; } .mobile-cols > .margin2 { margin-left:16.6666%; } .mobile-cols > .margin3 { margin-left:25.0000%; } .mobile-cols > .margin4 { margin-left:33.3333%; } .mobile-cols > .margin5 { margin-left:41.6666%; } .mobile-cols > .margin6 { margin-left:50.0000%; } .mobile-cols > .margin7 { margin-left:58.3333%; } .mobile-cols > .margin8 { margin-left:66.6666%; } .mobile-cols > .margin9 { margin-left:75.0000%; } .mobile-cols > .margin10 { margin-left:83.3333%; } .mobile-cols > .margin11 { margin-left:91.6666%; } .mobile-cols > .margin12 { margin-left:100.0000%; } /* anchor icon adds noise to the page on smaller displays */ .doc h1[id]:before, .doc h2[id]:before, .doc h3[id]:before, .doc h4[id]:before { visibility:hidden; } /* lower the size back down to standard * .prose units on mobile */ .prose-big, .prose-big h3, .prose-big h4, .prose-big h5, .prose-big h6 { font-size:15px; line-height:25px; } .prose-big .small, .prose-big small { font-size:12px; line-height:20px; } } /* print ------------------------------------------------------- */ @media print { /* inline rules */ body, input, textarea, p { color:#000; font:12px/20px sans-serif; } .prose a:after { content:' [' attr(href) '] '; } /* cut pad rules in half, matches mobile rules */ .pad4 { padding:20px; } .pad8 { padding:40px 20px; } .pad4y { padding-top:20px; padding-bottom:20px; } .pad4x { padding-left:20px; padding-right:20px; } .pad2 { padding:10px; } .pad2y { padding-top:10px; padding-bottom:10px; } .pad2x { padding-right:10px; padding-left:10px; } /* icon sprites dont show up be default so kill'em */ .rcon:after, .icon:before { width:0; height:0; } /* todo depreciate */ .noprint { display:none; } } /* base overrides */ /* add buffer for nicer anchor links */ .prose h2:first-child { padding-top: 20px; } .prose h3:first-child { padding-top: 20px; } /* header gets big */ @media only screen and (max-width:960px) { .prose h2:first-child { padding-top: 60px; } .prose h3:first-child { padding-top: 60px; } } /* header gets bigger */ @media only screen and (max-width:640px) { .prose h2:first-child { padding-top: 100px; } .prose h3:first-child { padding-top: 100px; } } /* tables are too giant */ .prose table, .prose table code { margin-bottom: 20px; font-size: 12px; line-height: 1.5; } .prose table th, .prose table td { padding: 5px; } .dark.keyline-top, .dark.keyline-bottom { border-color: #313131; } html, body, #app, .container { height: 100%; } body pre { padding: 0; } /* base addons */ .fill-dark2 { background-color: #313131; } .fill-dark2 .rounded-toggle input[type=radio]:checked label, .fill-dark2 .rounded-toggle .active { background-color: #313131; } .space-top3 { margin-top: 30px; } .space-top5 { margin-top: 50px; } .space-top6 { margin-top: 60px; } .line-height15 { line-height: 15px; } .line-height30 { line-height: 30px; } .pad00y { padding-top: 2px; padding-bottom: 2px; } .space-bottom00 { margin-bottom: 3px; } .endpoint { width: 100%; display: flex; } .endpoint-method {} .endpoint-url { flex-grow: 1; word-wrap: break-word; } .endpoint-url a { background-color: rgba(255, 255, 255, 0.1); border-radius: 2px; font-weight: bold; padding: 2px; color: #fff; } .endpoint-url a:hover { background-color: rgba(255, 255, 255, 0.15); } .endpoint-token {} a.hljs-linked { border-radius: 2px; color: #a5c261; background: #383c2f; padding: 2px; } body .prose blockquote { padding: 5px 10px; background: #232323; } .preview { background-image: -webkit-linear-gradient(#f1f075, #f1f075); background-size: 10px 10px; background-repeat: repeat-y; } .preview h2::after, .preview h3::after { content: 'preview'; background-color: #f1f075; border-radius: 2px; font-size: 9px; font-weight: normal; padding: 2px 5px; color: rgba(0, 0, 0, 0.5); margin-left: 10px; vertical-align: middle; } /* custom css start */ .api-logo-box { height: 60px; padding: 0; background: #434b5e } .api-logo-style { background-image: ">