From 32f3d0d1a8bb9d8a469639609f47fdb1f258277c Mon Sep 17 00:00:00 2001 From: Pascal Andy Date: Fri, 18 Jan 2019 19:09:07 -0500 Subject: [PATCH] add custom elements Signed-off-by: Pascal Andy --- README_from-fork.md | 66 - assets/css_firepress/btn_a.css | 107 + assets/css_firepress/btn_a.min.css | 1 + assets/css_firepress/btn_a_license.css | 23 + assets/css_firepress/btn_a_var.css | 35 + assets/css_firepress/btn_b.css | 2190 +++++++++++++++ assets/css_firepress/btn_b.min.css | 1 + assets/css_firepress/btn_b_license.css | 111 + assets/css_firepress/btn_c.css | 1442 ++++++++++ assets/css_firepress/btn_c.min.css | 1 + assets/css_firepress/btn_c_license.css | 2 + assets/css_firepress/button-examples/btn_a.md | 32 + assets/css_firepress/button-examples/btn_b.md | 45 + assets/css_firepress/button-examples/btn_c.md | 85 + .../button-examples/button_london.md | 62 + .../button-examples/markdown_style_guide.md | 7 + assets/css_firepress/buttons.css | 2343 +++++++++++++++++ assets/css_firepress/buttons.min.css | 1 + assets/css_firepress/entry.css | 16 + assets/css_firepress/simplegrid.css | 287 ++ assets/css_firepress/simplegrid.min.css | 1 + default.hbs | 10 +- partials/custom_footer.hbs | 5 + partials/custom_header.hbs | 31 + 24 files changed, 6836 insertions(+), 68 deletions(-) delete mode 100644 README_from-fork.md create mode 100644 assets/css_firepress/btn_a.css create mode 100644 assets/css_firepress/btn_a.min.css create mode 100644 assets/css_firepress/btn_a_license.css create mode 100644 assets/css_firepress/btn_a_var.css create mode 100755 assets/css_firepress/btn_b.css create mode 100644 assets/css_firepress/btn_b.min.css create mode 100755 assets/css_firepress/btn_b_license.css create mode 100755 assets/css_firepress/btn_c.css create mode 100644 assets/css_firepress/btn_c.min.css create mode 100755 assets/css_firepress/btn_c_license.css create mode 100644 assets/css_firepress/button-examples/btn_a.md create mode 100644 assets/css_firepress/button-examples/btn_b.md create mode 100644 assets/css_firepress/button-examples/btn_c.md create mode 100644 assets/css_firepress/button-examples/button_london.md create mode 100644 assets/css_firepress/button-examples/markdown_style_guide.md create mode 100755 assets/css_firepress/buttons.css create mode 100755 assets/css_firepress/buttons.min.css create mode 100644 assets/css_firepress/entry.css create mode 100755 assets/css_firepress/simplegrid.css create mode 100755 assets/css_firepress/simplegrid.min.css create mode 100644 partials/custom_footer.hbs create mode 100644 partials/custom_header.hbs diff --git a/README_from-fork.md b/README_from-fork.md deleted file mode 100644 index 0c9f24b..0000000 --- a/README_from-fork.md +++ /dev/null @@ -1,66 +0,0 @@ -# Casper - -The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper. If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page. - -  - -![screenshot-desktop](https://user-images.githubusercontent.com/120485/27221326-1e31d326-5280-11e7-866d-82d550a7683b.jpg) - -  - -# First time using a Ghost theme? - -Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes. - -We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template. - -**The main files are:** - -- `default.hbs` - The main template file -- `index.hbs` - Used for the home page -- `post.hbs` - Used for individual posts -- `page.hbs` - Used for individual pages -- `tag.hbs` - Used for tag archives -- `author.hbs` - Used for author archives - -One really neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example: - -- `page-about.hbs` - Custom template for the `/about/` page -- `tag-news.hbs` - Custom template for `/tag/news/` archive -- `author-ali.hbs` - Custom template for `/author/ali/` archive - - -# Development - -Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory: - -```bash -$ yarn install -$ yarn dev -``` - -Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically. - -The `zip` Gulp task packages the theme files into `dist/.zip`, which you can then upload to your site. - -```bash -$ yarn zip -``` - -# PostCSS Features Used - -- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser. -- Variables - Simple pure CSS variables -- [Color Function](https://github.com/postcss/postcss-color-function) - - -# SVG Icons - -Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`. - -You can add your own SVG icons in the same manner. - - -# Copyright & License - -Copyright (c) 2013-2019 Ghost Foundation - Released under the [MIT license](LICENSE). diff --git a/assets/css_firepress/btn_a.css b/assets/css_firepress/btn_a.css new file mode 100644 index 0000000..6468998 --- /dev/null +++ b/assets/css_firepress/btn_a.css @@ -0,0 +1,107 @@ +/* btn_a +/* ---------------------------------------------------------- */ + +input[type="submit"], +input[type="reset"], +input[type="btn_a"], +btn_a, +.btn_a { + display: inline-block; + height: var(--height); + padding: 0 2rem; + border: 0; + border-radius: var(--radius); + cursor: pointer; + font-family: var(--font-sans-serif); + font-size: 0.8em; + font-weight: var(--font-normal); + line-height: var(--height); + text-align: center; + text-decoration: none; + white-space: nowrap; + appearance: none; + transition: 0.4s ease; +} + +input[type="submit"].fit, +input[type="reset"].fit, +input[type="btn_a"].fit, +btn_a.fit, +.btn_a.fit { + width: 100%; +} + +input[type="submit"].small, +input[type="reset"].small, +input[type="btn_a"].small, +btn_a.small, +.btn_a.small { + height: calc(var(--height) * 0.9); + line-height: calc(var(--height) * 0.9); + padding: 0 1.5rem; + font-size: 0.7em; +} + +input[type="submit"].large, +input[type="reset"].large, +input[type="btn_a"].large, +btn_a.large, +.btn_a.large { + height: calc(var(--height) * 1.14); + line-height: calc(var(--height) * 1.14); + padding: 0 3rem; + font-size: 0.95em; +} + +input[type="submit"].disabled, +input[type="submit"]:disabled, +input[type="reset"].disabled, +input[type="reset"]:disabled, +input[type="btn_a"].disabled, +input[type="btn_a"]:disabled, +btn_a.disabled, +btn_a:disabled, +.btn_a.disabled, +.btn_a:disabled { + pointer-events: none; + opacity: 0.4; +} + +input[type="submit"], +input[type="reset"], +input[type="btn_a"], +btn_a, +.btn_a { + color: var(--color-primary) !important; + background-color: transparent; + box-shadow: inset 0 0 0 2px var(--color-primary); +} + +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="btn_a"]:hover, +btn_a:hover, +.btn_a:hover { + text-decoration: none; + color: #118dd0 !important; + box-shadow: inset 0 0 0 2px #139de7; + transition: 0.2s ease; +} + +input[type="submit"].primary, +input[type="reset"].primary, +input[type="btn_a"].primary, +btn_a.primary, +.btn_a.primary { + color: #fff !important; + background-color: var(--color-primary); + box-shadow: none; +} + +input[type="submit"].primary:hover, +input[type="reset"].primary:hover, +input[type="btn_a"].primary:hover, +btn_a.primary:hover, +.btn_a.primary:hover { + background-color: #139de7 +} diff --git a/assets/css_firepress/btn_a.min.css b/assets/css_firepress/btn_a.min.css new file mode 100644 index 0000000..fd54c45 --- /dev/null +++ b/assets/css_firepress/btn_a.min.css @@ -0,0 +1 @@ +.btn_a,btn_a,input[type=submit],input[type=reset],input[type=btn_a]{display:inline-block;height:var(--height);padding:0 2rem;border:0;border-radius:var(--radius);cursor:pointer;font-family:var(--font-sans-serif);font-size:.8em;font-weight:var(--font-normal);line-height:var(--height);text-align:center;text-decoration:none;white-space:nowrap;appearance:none;transition:.4s ease;color:var(--color-primary)!important;background-color:transparent;box-shadow:inset 0 0 0 2px var(--color-primary)}.btn_a.fit,btn_a.fit,input[type=submit].fit,input[type=reset].fit,input[type=btn_a].fit{width:100%}.btn_a.small,btn_a.small,input[type=submit].small,input[type=reset].small,input[type=btn_a].small{height:calc(var(--height) * .9);line-height:calc(var(--height) * .9);padding:0 1.5rem;font-size:.7em}.btn_a.large,btn_a.large,input[type=submit].large,input[type=reset].large,input[type=btn_a].large{height:calc(var(--height) * 1.14);line-height:calc(var(--height) * 1.14);padding:0 3rem;font-size:.95em}.btn_a.disabled,.btn_a:disabled,btn_a.disabled,btn_a:disabled,input[type=submit].disabled,input[type=submit]:disabled,input[type=reset].disabled,input[type=reset]:disabled,input[type=btn_a].disabled,input[type=btn_a]:disabled{pointer-events:none;opacity:.4}.btn_a:hover,btn_a:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=btn_a]:hover{text-decoration:none;color:#118dd0!important;box-shadow:inset 0 0 0 2px #139de7;transition:.2s ease}.btn_a.primary,btn_a.primary,input[type=submit].primary,input[type=reset].primary,input[type=btn_a].primary{color:#fff!important;background-color:var(--color-primary);box-shadow:none}.btn_a.primary:hover,btn_a.primary:hover,input[type=submit].primary:hover,input[type=reset].primary:hover,input[type=btn_a].primary:hover{background-color:#139de7} \ No newline at end of file diff --git a/assets/css_firepress/btn_a_license.css b/assets/css_firepress/btn_a_license.css new file mode 100644 index 0000000..b33d24c --- /dev/null +++ b/assets/css_firepress/btn_a_license.css @@ -0,0 +1,23 @@ +Copyright (c) 2013-2019 Ghost Foundation +source: https://github.com/TryGhost/London/blob/master/LICENSE + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without +restriction, including without limitation the rights to use, +copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following +conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. diff --git a/assets/css_firepress/btn_a_var.css b/assets/css_firepress/btn_a_var.css new file mode 100644 index 0000000..b9a2a05 --- /dev/null +++ b/assets/css_firepress/btn_a_var.css @@ -0,0 +1,35 @@ +/* Variables +/* ---------------------------------------------------------- */ + +@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,600,700,700i,800'); + +:root { + + /* Colours */ + --color-primary: #3eb0ef; + --color-base: #131313; + --color-border: #ddd; + --color-bg: #f5f5f5; + + /* Fonts */ + --font-sans-serif: 'Muli', sans-serif; + --font-serif: Georgia, Times, serif; + --font-mono: Menlo, Courier, monospace; + --font-light: 100; + --font-normal: 400; + --font-bold: 700; + --font-heavy: 800; + + /* Breakpoints */ + --xlarge: 1680px; + --large: 1280px; + --medium: 980px; + --small: 740px; + --xsmall: 480px; + + /* Sizes */ + --height: 4rem; + --margin: 2rem; + --radius: 0.5rem; + +} diff --git a/assets/css_firepress/btn_b.css b/assets/css_firepress/btn_b.css new file mode 100755 index 0000000..3fefb7f --- /dev/null +++ b/assets/css_firepress/btn_b.css @@ -0,0 +1,2190 @@ +/* btn_b + is which a button style + Was, renamed from 'button' to btn_b +/* ---------------------------------------------------------- */ + +.btn_b { + color: #666666; + background-color: #eeeeee; + border-color: #eeeeee; + font-size: 16px; + font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + text-decoration: none; + text-align: center; + line-height: 40px; + height: 40px; + padding: 0 40px; + margin: 0; + display: inline-block; + appearance: none; + cursor: pointer; + border: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; + margin-top: 15px; + /* + * Disabled State + * + * The disabled state uses the class .disabled, is-disabled, + * and the form attribute disabled="disabled". + * The use of !important is only added because this is a state + * that must be applied to all btn_bs when in a disabled state. + */ +} + +.btn_b:visited { + color: #666666; +} + +.btn_b:hover, +.btn_b:focus { + background-color: #f6f6f6; + text-decoration: none; + outline: none; +} + +.btn_b:active, +.btn_b.active, +.btn_b.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + text-decoration: none; + background-color: #eeeeee; + border-color: #cfcfcf; + color: #d4d4d4; + -webkit-transition-duration: 0s; + transition-duration: 0s; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b.disabled, +.btn_b.is-disabled, +.btn_b:disabled { + top: 0 !important; + background: #EEE !important; + border: 1px solid #DDD !important; + text-shadow: 0 1px 1px white !important; + color: #CCC !important; + cursor: default !important; + appearance: none !important; +} + +.btn_b.disabled else, +.btn_b.is-disabled else, +.btn_b:disabled else { + -webkit-box-shadow: none !important; + box-shadow: none !important; + opacity: .8 !important; +} + +/* +* Base btn_b Tyography +* +*/ + +.btn_b-uppercase { + text-transform: uppercase; +} + +.btn_b-lowercase { + text-transform: lowercase; +} + +.btn_b-capitalize { + text-transform: capitalize; +} + +.btn_b-small-caps { + font-variant: small-caps; +} + +.btn_b-icon-txt-large { + font-size: 36px !important; +} + +/* +* Base padding +* +*/ + +.btn_b-width-small { + padding: 0 10px !important; +} + +/* +* Base Colors +* +* Create colors for btn_bs +* (.btn_b-primary, .btn_b-secondary, etc.) +*/ + +.btn_b-primary, +.btn_b-primary-flat { + background-color: #1b9af7; + border-color: #1b9af7; + color: white; +} + +.btn_b-primary:visited, +.btn_b-primary-flat:visited { + color: white; +} + +.btn_b-primary:hover, +.btn_b-primary:focus, +.btn_b-primary-flat:hover, +.btn_b-primary-flat:focus { + background-color: #4cb0f9; + border-color: #4cb0f9; + color: white; +} + +.btn_b-primary:active, +.btn_b-primary.active, +.btn_b-primary.is-active, +.btn_b-primary-flat:active, +.btn_b-primary-flat.active, +.btn_b-primary-flat.is-active { + background-color: #2798eb; + border-color: #2798eb; + color: #0880d7; +} + +.btn_b-plain, +.btn_b-plain-flat { + background-color: white; + border-color: white; + color: #1b9af7; +} + +.btn_b-plain:visited, +.btn_b-plain-flat:visited { + color: #1b9af7; +} + +.btn_b-plain:hover, +.btn_b-plain:focus, +.btn_b-plain-flat:hover, +.btn_b-plain-flat:focus { + background-color: white; + border-color: white; + color: #1b9af7; +} + +.btn_b-plain:active, +.btn_b-plain.active, +.btn_b-plain.is-active, +.btn_b-plain-flat:active, +.btn_b-plain-flat.active, +.btn_b-plain-flat.is-active { + background-color: white; + border-color: white; + color: #e6e6e6; +} + +.btn_b-inverse, +.btn_b-inverse-flat { + background-color: #222222; + border-color: #222222; + color: #eeeeee; +} + +.btn_b-inverse:visited, +.btn_b-inverse-flat:visited { + color: #eeeeee; +} + +.btn_b-inverse:hover, +.btn_b-inverse:focus, +.btn_b-inverse-flat:hover, +.btn_b-inverse-flat:focus { + background-color: #3c3c3c; + border-color: #3c3c3c; + color: #eeeeee; +} + +.btn_b-inverse:active, +.btn_b-inverse.active, +.btn_b-inverse.is-active, +.btn_b-inverse-flat:active, +.btn_b-inverse-flat.active, +.btn_b-inverse-flat.is-active { + background-color: #222222; + border-color: #222222; + color: #090909; +} + +.btn_b-action, +.btn_b-action-flat { + background-color: #a5de37; + border-color: #a5de37; + color: white; +} + +.btn_b-action:visited, +.btn_b-action-flat:visited { + color: white; +} + +.btn_b-action:hover, +.btn_b-action:focus, +.btn_b-action-flat:hover, +.btn_b-action-flat:focus { + background-color: #b9e563; + border-color: #b9e563; + color: white; +} + +.btn_b-action:active, +.btn_b-action.active, +.btn_b-action.is-active, +.btn_b-action-flat:active, +.btn_b-action-flat.active, +.btn_b-action-flat.is-active { + background-color: #a1d243; + border-color: #a1d243; + color: #8bc220; +} + +.btn_b-highlight, +.btn_b-highlight-flat { + background-color: #feae1b; + border-color: #feae1b; + color: white; +} + +.btn_b-highlight:visited, +.btn_b-highlight-flat:visited { + color: white; +} + +.btn_b-highlight:hover, +.btn_b-highlight:focus, +.btn_b-highlight-flat:hover, +.btn_b-highlight-flat:focus { + background-color: #fec04e; + border-color: #fec04e; + color: white; +} + +.btn_b-highlight:active, +.btn_b-highlight.active, +.btn_b-highlight.is-active, +.btn_b-highlight-flat:active, +.btn_b-highlight-flat.active, +.btn_b-highlight-flat.is-active { + background-color: #f3ab26; + border-color: #f3ab26; + color: #e59501; +} + +.btn_b-caution, +.btn_b-caution-flat { + background-color: #ff4351; + border-color: #ff4351; + color: white; +} + +.btn_b-caution:visited, +.btn_b-caution-flat:visited { + color: white; +} + +.btn_b-caution:hover, +.btn_b-caution:focus, +.btn_b-caution-flat:hover, +.btn_b-caution-flat:focus { + background-color: #ff7680; + border-color: #ff7680; + color: white; +} + +.btn_b-caution:active, +.btn_b-caution.active, +.btn_b-caution.is-active, +.btn_b-caution-flat:active, +.btn_b-caution-flat.active, +.btn_b-caution-flat.is-active { + background-color: #f64c59; + border-color: #f64c59; + color: #ff1022; +} + +.btn_b-royal, +.btn_b-royal-flat { + background-color: #7b72e9; + border-color: #7b72e9; + color: white; +} + +.btn_b-royal:visited, +.btn_b-royal-flat:visited { + color: white; +} + +.btn_b-royal:hover, +.btn_b-royal:focus, +.btn_b-royal-flat:hover, +.btn_b-royal-flat:focus { + background-color: #a49ef0; + border-color: #a49ef0; + color: white; +} + +.btn_b-royal:active, +.btn_b-royal.active, +.btn_b-royal.is-active, +.btn_b-royal-flat:active, +.btn_b-royal-flat.active, +.btn_b-royal-flat.is-active { + background-color: #827ae1; + border-color: #827ae1; + color: #5246e2; +} + +/* +* Base Layout Styles +* +* Very Miminal Layout Styles +*/ + +.btn_b-block, +.btn_b-stacked { + display: block; +} + +/* +* btn_b Types (optional) +* +* All of the files below represent the various btn_b +* types (including shapes & sizes). None of these files +* are required. Simple remove the uneeded type below and +* the btn_b type will be excluded from the final build +*/ + +/* +* btn_b Shapes +* +* This file creates the various btn_b shapes +* (ex. Circle, Rounded, Pill) +*/ + +.btn_b-square { + border-radius: 0; +} + +.btn_b-box { + border-radius: 10px; +} + +.btn_b-rounded { + border-radius: 4px; +} + +.btn_b-pill { + border-radius: 200px; +} + +.btn_b-circle { + border-radius: 100%; +} + +/* +* Size Adjustment for equal height & widht btn_bs +* +* Remove padding and set a fixed width. +*/ + +.btn_b-circle, +.btn_b-box, +.btn_b-square { + padding: 0 !important; + width: 40px; +} + +.btn_b-circle.btn_b-giant, +.btn_b-box.btn_b-giant, +.btn_b-square.btn_b-giant { + width: 70px; +} + +.btn_b-circle.btn_b-jumbo, +.btn_b-box.btn_b-jumbo, +.btn_b-square.btn_b-jumbo { + width: 60px; +} + +.btn_b-circle.btn_b-large, +.btn_b-box.btn_b-large, +.btn_b-square.btn_b-large { + width: 50px; +} + +.btn_b-circle.btn_b-normal, +.btn_b-box.btn_b-normal, +.btn_b-square.btn_b-normal { + width: 40px; +} + +.btn_b-circle.btn_b-small, +.btn_b-box.btn_b-small, +.btn_b-square.btn_b-small { + width: 30px; +} + +.btn_b-circle.btn_b-tiny, +.btn_b-box.btn_b-tiny, +.btn_b-square.btn_b-tiny { + width: 24px; +} + +/* +* Border btn_bs +* +* These btn_bs have no fill they only have a +* border to define their hit target. +*/ + +.btn_b-border, +.btn_b-border-thin, +.btn_b-border-thick { + background: none; + border-width: 2px; + border-style: solid; + line-height: 36px; +} + +.btn_b-border:hover, +.btn_b-border-thin:hover, +.btn_b-border-thick:hover { + background-color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border:active, +.btn_b-border-thin:active, +.btn_b-border-thick:active, +.btn_b-border.active, +.active.btn_b-border-thin, +.active.btn_b-border-thick, +.btn_b-border.is-active, +.is-active.btn_b-border-thin, +.is-active.btn_b-border-thick { + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: none; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; +} + +/* +* Border Optional Sizes +* +* A slight variation in border thickness +*/ + +.btn_b-border-thin { + border-width: 1px; +} + +.btn_b-border-thick { + border-width: 3px; +} + +/* +* Border btn_b Colors +* +* Create colors for btn_bs +* (.btn_b-primary, .btn_b-secondary, etc.) +*/ + +.btn_b-border, +.btn_b-border-thin, +.btn_b-border-thick, +.btn_b-border-thin, +.btn_b-border-thick { + /* + * Border btn_b Size Adjustment + * + * The line-height must be adjusted to compinsate for + * the width of the border. + */ +} + +.btn_b-border.btn_b-primary, +.btn_b-primary.btn_b-border-thin, +.btn_b-primary.btn_b-border-thick, +.btn_b-border-thin.btn_b-primary, +.btn_b-border-thick.btn_b-primary { + color: #1b9af7; +} + +.btn_b-border.btn_b-primary:hover, +.btn_b-primary.btn_b-border-thin:hover, +.btn_b-primary.btn_b-border-thick:hover, +.btn_b-border.btn_b-primary:focus, +.btn_b-primary.btn_b-border-thin:focus, +.btn_b-primary.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-primary:hover, +.btn_b-border-thin.btn_b-primary:focus, +.btn_b-border-thick.btn_b-primary:hover, +.btn_b-border-thick.btn_b-primary:focus { + background-color: rgba(76, 176, 249, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border.btn_b-primary:active, +.btn_b-primary.btn_b-border-thin:active, +.btn_b-primary.btn_b-border-thick:active, +.btn_b-border.btn_b-primary.active, +.btn_b-primary.active.btn_b-border-thin, +.btn_b-primary.active.btn_b-border-thick, +.btn_b-border.btn_b-primary.is-active, +.btn_b-primary.is-active.btn_b-border-thin, +.btn_b-primary.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-primary:active, +.btn_b-border-thin.btn_b-primary.active, +.btn_b-border-thin.btn_b-primary.is-active, +.btn_b-border-thick.btn_b-primary:active, +.btn_b-border-thick.btn_b-primary.active, +.btn_b-border-thick.btn_b-primary.is-active { + background-color: rgba(39, 152, 235, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-plain, +.btn_b-plain.btn_b-border-thin, +.btn_b-plain.btn_b-border-thick, +.btn_b-border-thin.btn_b-plain, +.btn_b-border-thick.btn_b-plain { + color: white; +} + +.btn_b-border.btn_b-plain:hover, +.btn_b-plain.btn_b-border-thin:hover, +.btn_b-plain.btn_b-border-thick:hover, +.btn_b-border.btn_b-plain:focus, +.btn_b-plain.btn_b-border-thin:focus, +.btn_b-plain.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-plain:hover, +.btn_b-border-thin.btn_b-plain:focus, +.btn_b-border-thick.btn_b-plain:hover, +.btn_b-border-thick.btn_b-plain:focus { + background-color: rgba(255, 255, 255, 0.9); + color: rgba(27, 154, 247, 0.9); +} + +.btn_b-border.btn_b-plain:active, +.btn_b-plain.btn_b-border-thin:active, +.btn_b-plain.btn_b-border-thick:active, +.btn_b-border.btn_b-plain.active, +.btn_b-plain.active.btn_b-border-thin, +.btn_b-plain.active.btn_b-border-thick, +.btn_b-border.btn_b-plain.is-active, +.btn_b-plain.is-active.btn_b-border-thin, +.btn_b-plain.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-plain:active, +.btn_b-border-thin.btn_b-plain.active, +.btn_b-border-thin.btn_b-plain.is-active, +.btn_b-border-thick.btn_b-plain:active, +.btn_b-border-thick.btn_b-plain.active, +.btn_b-border-thick.btn_b-plain.is-active { + background-color: rgba(255, 255, 255, 0.7); + color: rgba(27, 154, 247, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-inverse, +.btn_b-inverse.btn_b-border-thin, +.btn_b-inverse.btn_b-border-thick, +.btn_b-border-thin.btn_b-inverse, +.btn_b-border-thick.btn_b-inverse { + color: #222222; +} + +.btn_b-border.btn_b-inverse:hover, +.btn_b-inverse.btn_b-border-thin:hover, +.btn_b-inverse.btn_b-border-thick:hover, +.btn_b-border.btn_b-inverse:focus, +.btn_b-inverse.btn_b-border-thin:focus, +.btn_b-inverse.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-inverse:hover, +.btn_b-border-thin.btn_b-inverse:focus, +.btn_b-border-thick.btn_b-inverse:hover, +.btn_b-border-thick.btn_b-inverse:focus { + background-color: rgba(60, 60, 60, 0.9); + color: rgba(238, 238, 238, 0.9); +} + +.btn_b-border.btn_b-inverse:active, +.btn_b-inverse.btn_b-border-thin:active, +.btn_b-inverse.btn_b-border-thick:active, +.btn_b-border.btn_b-inverse.active, +.btn_b-inverse.active.btn_b-border-thin, +.btn_b-inverse.active.btn_b-border-thick, +.btn_b-border.btn_b-inverse.is-active, +.btn_b-inverse.is-active.btn_b-border-thin, +.btn_b-inverse.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-inverse:active, +.btn_b-border-thin.btn_b-inverse.active, +.btn_b-border-thin.btn_b-inverse.is-active, +.btn_b-border-thick.btn_b-inverse:active, +.btn_b-border-thick.btn_b-inverse.active, +.btn_b-border-thick.btn_b-inverse.is-active { + background-color: rgba(34, 34, 34, 0.7); + color: rgba(238, 238, 238, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-action, +.btn_b-action.btn_b-border-thin, +.btn_b-action.btn_b-border-thick, +.btn_b-border-thin.btn_b-action, +.btn_b-border-thick.btn_b-action { + color: #a5de37; +} + +.btn_b-border.btn_b-action:hover, +.btn_b-action.btn_b-border-thin:hover, +.btn_b-action.btn_b-border-thick:hover, +.btn_b-border.btn_b-action:focus, +.btn_b-action.btn_b-border-thin:focus, +.btn_b-action.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-action:hover, +.btn_b-border-thin.btn_b-action:focus, +.btn_b-border-thick.btn_b-action:hover, +.btn_b-border-thick.btn_b-action:focus { + background-color: rgba(185, 229, 99, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border.btn_b-action:active, +.btn_b-action.btn_b-border-thin:active, +.btn_b-action.btn_b-border-thick:active, +.btn_b-border.btn_b-action.active, +.btn_b-action.active.btn_b-border-thin, +.btn_b-action.active.btn_b-border-thick, +.btn_b-border.btn_b-action.is-active, +.btn_b-action.is-active.btn_b-border-thin, +.btn_b-action.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-action:active, +.btn_b-border-thin.btn_b-action.active, +.btn_b-border-thin.btn_b-action.is-active, +.btn_b-border-thick.btn_b-action:active, +.btn_b-border-thick.btn_b-action.active, +.btn_b-border-thick.btn_b-action.is-active { + background-color: rgba(161, 210, 67, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-highlight, +.btn_b-highlight.btn_b-border-thin, +.btn_b-highlight.btn_b-border-thick, +.btn_b-border-thin.btn_b-highlight, +.btn_b-border-thick.btn_b-highlight { + color: #feae1b; +} + +.btn_b-border.btn_b-highlight:hover, +.btn_b-highlight.btn_b-border-thin:hover, +.btn_b-highlight.btn_b-border-thick:hover, +.btn_b-border.btn_b-highlight:focus, +.btn_b-highlight.btn_b-border-thin:focus, +.btn_b-highlight.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-highlight:hover, +.btn_b-border-thin.btn_b-highlight:focus, +.btn_b-border-thick.btn_b-highlight:hover, +.btn_b-border-thick.btn_b-highlight:focus { + background-color: rgba(254, 192, 78, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border.btn_b-highlight:active, +.btn_b-highlight.btn_b-border-thin:active, +.btn_b-highlight.btn_b-border-thick:active, +.btn_b-border.btn_b-highlight.active, +.btn_b-highlight.active.btn_b-border-thin, +.btn_b-highlight.active.btn_b-border-thick, +.btn_b-border.btn_b-highlight.is-active, +.btn_b-highlight.is-active.btn_b-border-thin, +.btn_b-highlight.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-highlight:active, +.btn_b-border-thin.btn_b-highlight.active, +.btn_b-border-thin.btn_b-highlight.is-active, +.btn_b-border-thick.btn_b-highlight:active, +.btn_b-border-thick.btn_b-highlight.active, +.btn_b-border-thick.btn_b-highlight.is-active { + background-color: rgba(243, 171, 38, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-caution, +.btn_b-caution.btn_b-border-thin, +.btn_b-caution.btn_b-border-thick, +.btn_b-border-thin.btn_b-caution, +.btn_b-border-thick.btn_b-caution { + color: #ff4351; +} + +.btn_b-border.btn_b-caution:hover, +.btn_b-caution.btn_b-border-thin:hover, +.btn_b-caution.btn_b-border-thick:hover, +.btn_b-border.btn_b-caution:focus, +.btn_b-caution.btn_b-border-thin:focus, +.btn_b-caution.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-caution:hover, +.btn_b-border-thin.btn_b-caution:focus, +.btn_b-border-thick.btn_b-caution:hover, +.btn_b-border-thick.btn_b-caution:focus { + background-color: rgba(255, 118, 128, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border.btn_b-caution:active, +.btn_b-caution.btn_b-border-thin:active, +.btn_b-caution.btn_b-border-thick:active, +.btn_b-border.btn_b-caution.active, +.btn_b-caution.active.btn_b-border-thin, +.btn_b-caution.active.btn_b-border-thick, +.btn_b-border.btn_b-caution.is-active, +.btn_b-caution.is-active.btn_b-border-thin, +.btn_b-caution.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-caution:active, +.btn_b-border-thin.btn_b-caution.active, +.btn_b-border-thin.btn_b-caution.is-active, +.btn_b-border-thick.btn_b-caution:active, +.btn_b-border-thick.btn_b-caution.active, +.btn_b-border-thick.btn_b-caution.is-active { + background-color: rgba(246, 76, 89, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-royal, +.btn_b-royal.btn_b-border-thin, +.btn_b-royal.btn_b-border-thick, +.btn_b-border-thin.btn_b-royal, +.btn_b-border-thick.btn_b-royal { + color: #7b72e9; +} + +.btn_b-border.btn_b-royal:hover, +.btn_b-royal.btn_b-border-thin:hover, +.btn_b-royal.btn_b-border-thick:hover, +.btn_b-border.btn_b-royal:focus, +.btn_b-royal.btn_b-border-thin:focus, +.btn_b-royal.btn_b-border-thick:focus, +.btn_b-border-thin.btn_b-royal:hover, +.btn_b-border-thin.btn_b-royal:focus, +.btn_b-border-thick.btn_b-royal:hover, +.btn_b-border-thick.btn_b-royal:focus { + background-color: rgba(164, 158, 240, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.btn_b-border.btn_b-royal:active, +.btn_b-royal.btn_b-border-thin:active, +.btn_b-royal.btn_b-border-thick:active, +.btn_b-border.btn_b-royal.active, +.btn_b-royal.active.btn_b-border-thin, +.btn_b-royal.active.btn_b-border-thick, +.btn_b-border.btn_b-royal.is-active, +.btn_b-royal.is-active.btn_b-border-thin, +.btn_b-royal.is-active.btn_b-border-thick, +.btn_b-border-thin.btn_b-royal:active, +.btn_b-border-thin.btn_b-royal.active, +.btn_b-border-thin.btn_b-royal.is-active, +.btn_b-border-thick.btn_b-royal:active, +.btn_b-border-thick.btn_b-royal.active, +.btn_b-border-thick.btn_b-royal.is-active { + background-color: rgba(130, 122, 225, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.btn_b-border.btn_b-giant, +.btn_b-giant.btn_b-border-thin, +.btn_b-giant.btn_b-border-thick, +.btn_b-border-thin.btn_b-giant, +.btn_b-border-thick.btn_b-giant { + line-height: 66px; +} + +.btn_b-border.btn_b-jumbo, +.btn_b-jumbo.btn_b-border-thin, +.btn_b-jumbo.btn_b-border-thick, +.btn_b-border-thin.btn_b-jumbo, +.btn_b-border-thick.btn_b-jumbo { + line-height: 56px; +} + +.btn_b-border.btn_b-large, +.btn_b-large.btn_b-border-thin, +.btn_b-large.btn_b-border-thick, +.btn_b-border-thin.btn_b-large, +.btn_b-border-thick.btn_b-large { + line-height: 46px; +} + +.btn_b-border.btn_b-normal, +.btn_b-normal.btn_b-border-thin, +.btn_b-normal.btn_b-border-thick, +.btn_b-border-thin.btn_b-normal, +.btn_b-border-thick.btn_b-normal { + line-height: 36px; +} + +.btn_b-border.btn_b-small, +.btn_b-small.btn_b-border-thin, +.btn_b-small.btn_b-border-thick, +.btn_b-border-thin.btn_b-small, +.btn_b-border-thick.btn_b-small { + line-height: 26px; +} + +.btn_b-border.btn_b-tiny, +.btn_b-tiny.btn_b-border-thin, +.btn_b-tiny.btn_b-border-thick, +.btn_b-border-thin.btn_b-tiny, +.btn_b-border-thick.btn_b-tiny { + line-height: 20px; +} + +/* +* Border btn_bs +* +* These btn_bs have no fill they only have a +* border to define their hit target. +*/ + +.btn_b-borderless { + background: none; + border: none; + padding: 0 8px !important; + color: #eeeeee; + font-size: 20.8px; + font-weight: 200; + /* + * Borderless btn_b Colors + * + * Create colors for btn_bs + * (.btn_b-primary, .btn_b-secondary, etc.) + */ + /* + * Borderles Size Adjustment + * + * The font-size must be large to compinsate for + * the lack of a hit target. + */ +} + +.btn_b-borderless:hover, +.btn_b-borderless:focus { + background: none; +} + +.btn_b-borderless:active, +.btn_b-borderless.active, +.btn_b-borderless.is-active { + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: none; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; + opacity: .3; +} + +.btn_b-borderless.btn_b-primary { + color: #1b9af7; +} + +.btn_b-borderless.btn_b-plain { + color: white; +} + +.btn_b-borderless.btn_b-inverse { + color: #222222; +} + +.btn_b-borderless.btn_b-action { + color: #a5de37; +} + +.btn_b-borderless.btn_b-highlight { + color: #feae1b; +} + +.btn_b-borderless.btn_b-caution { + color: #ff4351; +} + +.btn_b-borderless.btn_b-royal { + color: #7b72e9; +} + +.btn_b-borderless.btn_b-giant { + font-size: 36.4px; + height: 52.4px; + line-height: 52.4px; +} + +.btn_b-borderless.btn_b-jumbo { + font-size: 31.2px; + height: 47.2px; + line-height: 47.2px; +} + +.btn_b-borderless.btn_b-large { + font-size: 26px; + height: 42px; + line-height: 42px; +} + +.btn_b-borderless.btn_b-normal { + font-size: 20.8px; + height: 36.8px; + line-height: 36.8px; +} + +.btn_b-borderless.btn_b-small { + font-size: 15.6px; + height: 31.6px; + line-height: 31.6px; +} + +.btn_b-borderless.btn_b-tiny { + font-size: 12.48px; + height: 28.48px; + line-height: 28.48px; +} + +/* +* Raised btn_bs +* +* A classic looking btn_b that offers +* great depth and affordance. +*/ + +.btn_b-raised { + border-color: #e1e1e1; + border-style: solid; + border-width: 1px; + line-height: 38px; + background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); + background: linear-gradient(#f6f6f6, #e1e1e1); + -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.btn_b-raised:hover, +.btn_b-raised:focus { + background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro)); + background: linear-gradient(top, white, gainsboro); +} + +.btn_b-raised:active, +.btn_b-raised.active, +.btn_b-raised.is-active { + background: #eeeeee; + -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; +} + +/* +* Raised btn_b Colors +* +* Create colors for raised btn_bs +*/ + +.btn_b-raised.btn_b-primary { + border-color: #088ef0; + background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0)); + background: linear-gradient(#34a5f8, #088ef0); +} + +.btn_b-raised.btn_b-primary:hover, +.btn_b-raised.btn_b-primary:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6)); + background: linear-gradient(top, #42abf8, #0888e6); +} + +.btn_b-raised.btn_b-primary:active, +.btn_b-raised.btn_b-primary.active, +.btn_b-raised.btn_b-primary.is-active { + border-color: #0880d7; + background: #2798eb; +} + +.btn_b-raised.btn_b-plain { + border-color: #f2f2f2; + background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2)); + background: linear-gradient(white, #f2f2f2); +} + +.btn_b-raised.btn_b-plain:hover, +.btn_b-raised.btn_b-plain:focus { + background: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed)); + background: linear-gradient(top, white, #ededed); +} + +.btn_b-raised.btn_b-plain:active, +.btn_b-raised.btn_b-plain.active, +.btn_b-raised.btn_b-plain.is-active { + border-color: #e6e6e6; + background: white; +} + +.btn_b-raised.btn_b-inverse { + border-color: #151515; + background: -webkit-gradient(linear, left top, left bottom, from(#2f2f2f), to(#151515)); + background: linear-gradient(#2f2f2f, #151515); +} + +.btn_b-raised.btn_b-inverse:hover, +.btn_b-raised.btn_b-inverse:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#101010)); + background: linear-gradient(top, #363636, #101010); +} + +.btn_b-raised.btn_b-inverse:active, +.btn_b-raised.btn_b-inverse.active, +.btn_b-raised.btn_b-inverse.is-active { + border-color: #090909; + background: #222222; +} + +.btn_b-raised.btn_b-action { + border-color: #9ad824; + background: -webkit-gradient(linear, left top, left bottom, from(#afe24d), to(#9ad824)); + background: linear-gradient(#afe24d, #9ad824); +} + +.btn_b-raised.btn_b-action:hover, +.btn_b-raised.btn_b-action:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#b5e45a), to(#94cf22)); + background: linear-gradient(top, #b5e45a, #94cf22); +} + +.btn_b-raised.btn_b-action:active, +.btn_b-raised.btn_b-action.active, +.btn_b-raised.btn_b-action.is-active { + border-color: #8bc220; + background: #a1d243; +} + +.btn_b-raised.btn_b-highlight { + border-color: #fea502; + background: -webkit-gradient(linear, left top, left bottom, from(#feb734), to(#fea502)); + background: linear-gradient(#feb734, #fea502); +} + +.btn_b-raised.btn_b-highlight:hover, +.btn_b-raised.btn_b-highlight:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#febc44), to(#f49f01)); + background: linear-gradient(top, #febc44, #f49f01); +} + +.btn_b-raised.btn_b-highlight:active, +.btn_b-raised.btn_b-highlight.active, +.btn_b-raised.btn_b-highlight.is-active { + border-color: #e59501; + background: #f3ab26; +} + +.btn_b-raised.btn_b-caution { + border-color: #ff2939; + background: -webkit-gradient(linear, left top, left bottom, from(#ff5c69), to(#ff2939)); + background: linear-gradient(#ff5c69, #ff2939); +} + +.btn_b-raised.btn_b-caution:hover, +.btn_b-raised.btn_b-caution:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#ff6c77), to(#ff1f30)); + background: linear-gradient(top, #ff6c77, #ff1f30); +} + +.btn_b-raised.btn_b-caution:active, +.btn_b-raised.btn_b-caution.active, +.btn_b-raised.btn_b-caution.is-active { + border-color: #ff1022; + background: #f64c59; +} + +.btn_b-raised.btn_b-royal { + border-color: #665ce6; + background: -webkit-gradient(linear, left top, left bottom, from(#9088ec), to(#665ce6)); + background: linear-gradient(#9088ec, #665ce6); +} + +.btn_b-raised.btn_b-royal:hover, +.btn_b-raised.btn_b-royal:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#9c95ef), to(#5e53e4)); + background: linear-gradient(top, #9c95ef, #5e53e4); +} + +.btn_b-raised.btn_b-royal:active, +.btn_b-raised.btn_b-royal.active, +.btn_b-raised.btn_b-royal.is-active { + border-color: #5246e2; + background: #827ae1; +} + +/* +* 3D btn_bs +* +* These btn_bs have a heavy three dimensional +* style that mimics the visual appearance of a +* real life btn_b. +*/ + +.btn_b-3d { + position: relative; + top: 0; + -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d:hover, +.btn_b-3d:focus { + -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d:active, +.btn_b-3d.active, +.btn_b-3d.is-active { + top: 5px; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .15s; + transition-duration: .15s; + -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +/* +* 3D btn_b Colors +* +* Create colors for btn_bs +* (.btn_b-primary, .btn_b-secondary, etc.) +*/ + +.btn_b-3d.btn_b-primary { + -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-primary:hover, +.btn_b-3d.btn_b-primary:focus { + -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-primary:active, +.btn_b-3d.btn_b-primary.active, +.btn_b-3d.btn_b-primary.is-active { + -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-plain { + -webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-plain:hover, +.btn_b-3d.btn_b-plain:focus { + -webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-plain:active, +.btn_b-3d.btn_b-plain.active, +.btn_b-3d.btn_b-plain.is-active { + -webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-inverse { + -webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-inverse:hover, +.btn_b-3d.btn_b-inverse:focus { + -webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-inverse:active, +.btn_b-3d.btn_b-inverse.active, +.btn_b-3d.btn_b-inverse.is-active { + -webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-action { + -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-action:hover, +.btn_b-3d.btn_b-action:focus { + -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-action:active, +.btn_b-3d.btn_b-action.active, +.btn_b-3d.btn_b-action.is-active { + -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-highlight { + -webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-highlight:hover, +.btn_b-3d.btn_b-highlight:focus { + -webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-highlight:active, +.btn_b-3d.btn_b-highlight.active, +.btn_b-3d.btn_b-highlight.is-active { + -webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-caution { + -webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-caution:hover, +.btn_b-3d.btn_b-caution:focus { + -webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-caution:active, +.btn_b-3d.btn_b-caution.active, +.btn_b-3d.btn_b-caution.is-active { + -webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.btn_b-3d.btn_b-royal { + -webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-royal:hover, +.btn_b-3d.btn_b-royal:focus { + -webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.btn_b-3d.btn_b-royal:active, +.btn_b-3d.btn_b-royal.active, +.btn_b-3d.btn_b-royal.is-active { + -webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +/* +* Glowing btn_bs +* +* A pulse like glow that appears +* rythmically around the edges of +* a btn_b. +*/ + +/* +* Glow animation mixin for Compass users +* +*/ + +/* +* Glowing Keyframes +* +*/ + +@-webkit-keyframes glowing { + from { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } +} + +@keyframes glowing { + from { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } +} + +/* +* Glowing Keyframes for various colors +* +*/ + +@-webkit-keyframes glowing-primary { + from { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } +} + +@keyframes glowing-primary { + from { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } +} + +@-webkit-keyframes glowing-plain { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } +} + +@keyframes glowing-plain { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } +} + +@-webkit-keyframes glowing-inverse { + from { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } +} + +@keyframes glowing-inverse { + from { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } +} + +@-webkit-keyframes glowing-action { + from { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } +} + +@keyframes glowing-action { + from { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } +} + +@-webkit-keyframes glowing-highlight { + from { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } +} + +@keyframes glowing-highlight { + from { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } +} + +@-webkit-keyframes glowing-caution { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } +} + +@keyframes glowing-caution { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } +} + +@-webkit-keyframes glowing-royal { + from { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } +} + +@keyframes glowing-royal { + from { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } +} + +/* +* Glowing btn_bs Base Styes +* +* A pulse like glow that appears +* rythmically around the edges of +* a btn_b. +*/ + +.btn_b-glow { + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: glowing; + animation-name: glowing; +} + +.btn_b-glow:active, +.btn_b-glow.active, +.btn_b-glow.is-active { + -webkit-animation-name: none; + animation-name: none; +} + +/* +* Glowing btn_b Colors +* +* Create colors for glowing btn_bs +*/ + +.btn_b-glow.btn_b-primary { + -webkit-animation-name: glowing-primary; + animation-name: glowing-primary; +} + +.btn_b-glow.btn_b-plain { + -webkit-animation-name: glowing-plain; + animation-name: glowing-plain; +} + +.btn_b-glow.btn_b-inverse { + -webkit-animation-name: glowing-inverse; + animation-name: glowing-inverse; +} + +.btn_b-glow.btn_b-action { + -webkit-animation-name: glowing-action; + animation-name: glowing-action; +} + +.btn_b-glow.btn_b-highlight { + -webkit-animation-name: glowing-highlight; + animation-name: glowing-highlight; +} + +.btn_b-glow.btn_b-caution { + -webkit-animation-name: glowing-caution; + animation-name: glowing-caution; +} + +.btn_b-glow.btn_b-royal { + -webkit-animation-name: glowing-royal; + animation-name: glowing-royal; +} + +/* +* Dropdown menu btn_bs +* +* A dropdown menu appears +* when a btn_b is pressed +*/ + +/* +* Dropdown Container +* +*/ + +.btn_b-dropdown { + position: relative; + overflow: visible; + display: inline-block; +} + +/* +* Dropdown List Style +* +*/ + +.btn_b-dropdown-list { + display: none; + position: absolute; + padding: 0; + margin: 0; + top: 0; + left: 0; + z-index: 1000; + min-width: 100%; + list-style-type: none; + background: rgba(255, 255, 255, 0.95); + border-style: solid; + border-width: 1px; + border-color: #d4d4d4; + font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); + border-radius: 3px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + /* + * Dropdown Below + * + */ + /* + * Dropdown Above + * + */ +} + +.btn_b-dropdown-list.is-below { + top: 100%; + border-top: none; + border-radius: 0 0 3px 3px; +} + +.btn_b-dropdown-list.is-above { + bottom: 100%; + top: auto; + border-bottom: none; + border-radius: 3px 3px 0 0; + -webkit-box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); + box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); +} + +/* +* Dropdown btn_bs +* +*/ + +.btn_b-dropdown-list>li { + padding: 0; + margin: 0; + display: block; +} + +.btn_b-dropdown-list>li>a { + display: block; + line-height: 40px; + font-size: 12.8px; + padding: 5px 10px; + float: none; + color: #666666; + text-decoration: none; +} + +.btn_b-dropdown-list>li>a:hover { + color: #5e5e5e; + background: #f6f6f6; + text-decoration: none; +} + +.btn_b-dropdown-divider { + border-top: 1px solid #e6e6e6; +} + +/* +* Dropdown Colors +* +* Create colors for btn_bs +* (.btn_b-primary, .btn_b-secondary, etc.) +*/ + +.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list { + background: rgba(27, 154, 247, 0.95); + border-color: #0880d7; +} + +.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #0888e6; +} + +.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list>li>a { + color: white; +} + +.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #088ef0; +} + +.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list { + background: rgba(255, 255, 255, 0.95); + border-color: #e6e6e6; +} + +.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #ededed; +} + +.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list>li>a { + color: #1b9af7; +} + +.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list>li>a:hover { + color: #088ef0; + background: #f2f2f2; +} + +.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list { + background: rgba(34, 34, 34, 0.95); + border-color: #090909; +} + +.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #101010; +} + +.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list>li>a { + color: #eeeeee; +} + +.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list>li>a:hover { + color: #e1e1e1; + background: #151515; +} + +.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list { + background: rgba(165, 222, 55, 0.95); + border-color: #8bc220; +} + +.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #94cf22; +} + +.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list>li>a { + color: white; +} + +.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #9ad824; +} + +.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list { + background: rgba(254, 174, 27, 0.95); + border-color: #e59501; +} + +.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #f49f01; +} + +.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list>li>a { + color: white; +} + +.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #fea502; +} + +.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list { + background: rgba(255, 67, 81, 0.95); + border-color: #ff1022; +} + +.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #ff1f30; +} + +.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list>li>a { + color: white; +} + +.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #ff2939; +} + +.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list { + background: rgba(123, 114, 233, 0.95); + border-color: #5246e2; +} + +.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list .btn_b-dropdown-divider { + border-color: #5e53e4; +} + +.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list>li>a { + color: white; +} + +.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #665ce6; +} + +/* +* Buton Groups +* +* A group of related btn_bs +* displayed edge to edge +*/ + +.btn_b-group { + *zoom: 1; + position: relative; + display: inline-block; +} + +.btn_b-group:after, +.btn_b-group:before { + content: '.'; + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.btn_b-group .btn_b, +.btn_b-group .btn_b-dropdown { + float: left; +} + +.btn_b-group .btn_b:not(:first-child):not(:last-child), +.btn_b-group .btn_b-dropdown:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: none; +} + +.btn_b-group .btn_b:first-child, +.btn_b-group .btn_b-dropdown:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; +} + +.btn_b-group .btn_b:last-child, +.btn_b-group .btn_b-dropdown:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/* +* btn_b Wrapper +* +* A wrap around effect to highlight +* the shape of the btn_b and offer +* a subtle visual effect. +*/ + +.btn_b-wrap { + border: 1px solid #e3e3e3; + display: inline-block; + padding: 9px; + background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(white)); + background: linear-gradient(#f2f2f2, white); + border-radius: 200px; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); +} + +/* +* Long Shadow btn_bs +* +* A visual effect adding a flat shadow to the text of a btn_b +*/ + +/* +* Long Shadow Function +* +* Loops $length times building a long shadow. Defaults downward right +*/ + +/* +* LONG SHADOW MIXIN +* +*/ + +/* +* Shadow Right +* +*/ + +.btn_b-longshadow, +.btn_b-longshadow-right { + overflow: hidden; +} + +.btn_b-longshadow.btn_b-primary, +.btn_b-longshadow-right.btn_b-primary { + text-shadow: 0px 0px #0880d7, 1px 1px #0880d7, 2px 2px #0880d7, 3px 3px #0880d7, 4px 4px #0880d7, 5px 5px #0880d7, 6px 6px #0880d7, 7px 7px #0880d7, 8px 8px #0880d7, 9px 9px #0880d7, 10px 10px #0880d7, 11px 11px #0880d7, 12px 12px #0880d7, 13px 13px #0880d7, 14px 14px #0880d7, 15px 15px #0880d7, 16px 16px #0880d7, 17px 17px #0880d7, 18px 18px #0880d7, 19px 19px #0880d7, 20px 20px #0880d7, 21px 21px #0880d7, 22px 22px #0880d7, 23px 23px #0880d7, 24px 24px #0880d7, 25px 25px #0880d7, 26px 26px #0880d7, 27px 27px #0880d7, 28px 28px #0880d7, 29px 29px #0880d7, 30px 30px #0880d7, 31px 31px #0880d7, 32px 32px #0880d7, 33px 33px #0880d7, 34px 34px #0880d7, 35px 35px #0880d7, 36px 36px #0880d7, 37px 37px #0880d7, 38px 38px #0880d7, 39px 39px #0880d7, 40px 40px #0880d7, 41px 41px #0880d7, 42px 42px #0880d7, 43px 43px #0880d7, 44px 44px #0880d7, 45px 45px #0880d7, 46px 46px #0880d7, 47px 47px #0880d7, 48px 48px #0880d7, 49px 49px #0880d7, 50px 50px #0880d7, 51px 51px #0880d7, 52px 52px #0880d7, 53px 53px #0880d7, 54px 54px #0880d7, 55px 55px #0880d7, 56px 56px #0880d7, 57px 57px #0880d7, 58px 58px #0880d7, 59px 59px #0880d7, 60px 60px #0880d7, 61px 61px #0880d7, 62px 62px #0880d7, 63px 63px #0880d7, 64px 64px #0880d7, 65px 65px #0880d7, 66px 66px #0880d7, 67px 67px #0880d7, 68px 68px #0880d7, 69px 69px #0880d7, 70px 70px #0880d7, 71px 71px #0880d7, 72px 72px #0880d7, 73px 73px #0880d7, 74px 74px #0880d7, 75px 75px #0880d7, 76px 76px #0880d7, 77px 77px #0880d7, 78px 78px #0880d7, 79px 79px #0880d7, 80px 80px #0880d7, 81px 81px #0880d7, 82px 82px #0880d7, 83px 83px #0880d7, 84px 84px #0880d7, 85px 85px #0880d7; +} + +.btn_b-longshadow.btn_b-primary:active, +.btn_b-longshadow.btn_b-primary.active, +.btn_b-longshadow.btn_b-primary.is-active, +.btn_b-longshadow-right.btn_b-primary:active, +.btn_b-longshadow-right.btn_b-primary.active, +.btn_b-longshadow-right.btn_b-primary.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-plain, +.btn_b-longshadow-right.btn_b-plain { + text-shadow: 0px 0px #e6e6e6, 1px 1px #e6e6e6, 2px 2px #e6e6e6, 3px 3px #e6e6e6, 4px 4px #e6e6e6, 5px 5px #e6e6e6, 6px 6px #e6e6e6, 7px 7px #e6e6e6, 8px 8px #e6e6e6, 9px 9px #e6e6e6, 10px 10px #e6e6e6, 11px 11px #e6e6e6, 12px 12px #e6e6e6, 13px 13px #e6e6e6, 14px 14px #e6e6e6, 15px 15px #e6e6e6, 16px 16px #e6e6e6, 17px 17px #e6e6e6, 18px 18px #e6e6e6, 19px 19px #e6e6e6, 20px 20px #e6e6e6, 21px 21px #e6e6e6, 22px 22px #e6e6e6, 23px 23px #e6e6e6, 24px 24px #e6e6e6, 25px 25px #e6e6e6, 26px 26px #e6e6e6, 27px 27px #e6e6e6, 28px 28px #e6e6e6, 29px 29px #e6e6e6, 30px 30px #e6e6e6, 31px 31px #e6e6e6, 32px 32px #e6e6e6, 33px 33px #e6e6e6, 34px 34px #e6e6e6, 35px 35px #e6e6e6, 36px 36px #e6e6e6, 37px 37px #e6e6e6, 38px 38px #e6e6e6, 39px 39px #e6e6e6, 40px 40px #e6e6e6, 41px 41px #e6e6e6, 42px 42px #e6e6e6, 43px 43px #e6e6e6, 44px 44px #e6e6e6, 45px 45px #e6e6e6, 46px 46px #e6e6e6, 47px 47px #e6e6e6, 48px 48px #e6e6e6, 49px 49px #e6e6e6, 50px 50px #e6e6e6, 51px 51px #e6e6e6, 52px 52px #e6e6e6, 53px 53px #e6e6e6, 54px 54px #e6e6e6, 55px 55px #e6e6e6, 56px 56px #e6e6e6, 57px 57px #e6e6e6, 58px 58px #e6e6e6, 59px 59px #e6e6e6, 60px 60px #e6e6e6, 61px 61px #e6e6e6, 62px 62px #e6e6e6, 63px 63px #e6e6e6, 64px 64px #e6e6e6, 65px 65px #e6e6e6, 66px 66px #e6e6e6, 67px 67px #e6e6e6, 68px 68px #e6e6e6, 69px 69px #e6e6e6, 70px 70px #e6e6e6, 71px 71px #e6e6e6, 72px 72px #e6e6e6, 73px 73px #e6e6e6, 74px 74px #e6e6e6, 75px 75px #e6e6e6, 76px 76px #e6e6e6, 77px 77px #e6e6e6, 78px 78px #e6e6e6, 79px 79px #e6e6e6, 80px 80px #e6e6e6, 81px 81px #e6e6e6, 82px 82px #e6e6e6, 83px 83px #e6e6e6, 84px 84px #e6e6e6, 85px 85px #e6e6e6; +} + +.btn_b-longshadow.btn_b-plain:active, +.btn_b-longshadow.btn_b-plain.active, +.btn_b-longshadow.btn_b-plain.is-active, +.btn_b-longshadow-right.btn_b-plain:active, +.btn_b-longshadow-right.btn_b-plain.active, +.btn_b-longshadow-right.btn_b-plain.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-inverse, +.btn_b-longshadow-right.btn_b-inverse { + text-shadow: 0px 0px #090909, 1px 1px #090909, 2px 2px #090909, 3px 3px #090909, 4px 4px #090909, 5px 5px #090909, 6px 6px #090909, 7px 7px #090909, 8px 8px #090909, 9px 9px #090909, 10px 10px #090909, 11px 11px #090909, 12px 12px #090909, 13px 13px #090909, 14px 14px #090909, 15px 15px #090909, 16px 16px #090909, 17px 17px #090909, 18px 18px #090909, 19px 19px #090909, 20px 20px #090909, 21px 21px #090909, 22px 22px #090909, 23px 23px #090909, 24px 24px #090909, 25px 25px #090909, 26px 26px #090909, 27px 27px #090909, 28px 28px #090909, 29px 29px #090909, 30px 30px #090909, 31px 31px #090909, 32px 32px #090909, 33px 33px #090909, 34px 34px #090909, 35px 35px #090909, 36px 36px #090909, 37px 37px #090909, 38px 38px #090909, 39px 39px #090909, 40px 40px #090909, 41px 41px #090909, 42px 42px #090909, 43px 43px #090909, 44px 44px #090909, 45px 45px #090909, 46px 46px #090909, 47px 47px #090909, 48px 48px #090909, 49px 49px #090909, 50px 50px #090909, 51px 51px #090909, 52px 52px #090909, 53px 53px #090909, 54px 54px #090909, 55px 55px #090909, 56px 56px #090909, 57px 57px #090909, 58px 58px #090909, 59px 59px #090909, 60px 60px #090909, 61px 61px #090909, 62px 62px #090909, 63px 63px #090909, 64px 64px #090909, 65px 65px #090909, 66px 66px #090909, 67px 67px #090909, 68px 68px #090909, 69px 69px #090909, 70px 70px #090909, 71px 71px #090909, 72px 72px #090909, 73px 73px #090909, 74px 74px #090909, 75px 75px #090909, 76px 76px #090909, 77px 77px #090909, 78px 78px #090909, 79px 79px #090909, 80px 80px #090909, 81px 81px #090909, 82px 82px #090909, 83px 83px #090909, 84px 84px #090909, 85px 85px #090909; +} + +.btn_b-longshadow.btn_b-inverse:active, +.btn_b-longshadow.btn_b-inverse.active, +.btn_b-longshadow.btn_b-inverse.is-active, +.btn_b-longshadow-right.btn_b-inverse:active, +.btn_b-longshadow-right.btn_b-inverse.active, +.btn_b-longshadow-right.btn_b-inverse.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-action, +.btn_b-longshadow-right.btn_b-action { + text-shadow: 0px 0px #8bc220, 1px 1px #8bc220, 2px 2px #8bc220, 3px 3px #8bc220, 4px 4px #8bc220, 5px 5px #8bc220, 6px 6px #8bc220, 7px 7px #8bc220, 8px 8px #8bc220, 9px 9px #8bc220, 10px 10px #8bc220, 11px 11px #8bc220, 12px 12px #8bc220, 13px 13px #8bc220, 14px 14px #8bc220, 15px 15px #8bc220, 16px 16px #8bc220, 17px 17px #8bc220, 18px 18px #8bc220, 19px 19px #8bc220, 20px 20px #8bc220, 21px 21px #8bc220, 22px 22px #8bc220, 23px 23px #8bc220, 24px 24px #8bc220, 25px 25px #8bc220, 26px 26px #8bc220, 27px 27px #8bc220, 28px 28px #8bc220, 29px 29px #8bc220, 30px 30px #8bc220, 31px 31px #8bc220, 32px 32px #8bc220, 33px 33px #8bc220, 34px 34px #8bc220, 35px 35px #8bc220, 36px 36px #8bc220, 37px 37px #8bc220, 38px 38px #8bc220, 39px 39px #8bc220, 40px 40px #8bc220, 41px 41px #8bc220, 42px 42px #8bc220, 43px 43px #8bc220, 44px 44px #8bc220, 45px 45px #8bc220, 46px 46px #8bc220, 47px 47px #8bc220, 48px 48px #8bc220, 49px 49px #8bc220, 50px 50px #8bc220, 51px 51px #8bc220, 52px 52px #8bc220, 53px 53px #8bc220, 54px 54px #8bc220, 55px 55px #8bc220, 56px 56px #8bc220, 57px 57px #8bc220, 58px 58px #8bc220, 59px 59px #8bc220, 60px 60px #8bc220, 61px 61px #8bc220, 62px 62px #8bc220, 63px 63px #8bc220, 64px 64px #8bc220, 65px 65px #8bc220, 66px 66px #8bc220, 67px 67px #8bc220, 68px 68px #8bc220, 69px 69px #8bc220, 70px 70px #8bc220, 71px 71px #8bc220, 72px 72px #8bc220, 73px 73px #8bc220, 74px 74px #8bc220, 75px 75px #8bc220, 76px 76px #8bc220, 77px 77px #8bc220, 78px 78px #8bc220, 79px 79px #8bc220, 80px 80px #8bc220, 81px 81px #8bc220, 82px 82px #8bc220, 83px 83px #8bc220, 84px 84px #8bc220, 85px 85px #8bc220; +} + +.btn_b-longshadow.btn_b-action:active, +.btn_b-longshadow.btn_b-action.active, +.btn_b-longshadow.btn_b-action.is-active, +.btn_b-longshadow-right.btn_b-action:active, +.btn_b-longshadow-right.btn_b-action.active, +.btn_b-longshadow-right.btn_b-action.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-highlight, +.btn_b-longshadow-right.btn_b-highlight { + text-shadow: 0px 0px #e59501, 1px 1px #e59501, 2px 2px #e59501, 3px 3px #e59501, 4px 4px #e59501, 5px 5px #e59501, 6px 6px #e59501, 7px 7px #e59501, 8px 8px #e59501, 9px 9px #e59501, 10px 10px #e59501, 11px 11px #e59501, 12px 12px #e59501, 13px 13px #e59501, 14px 14px #e59501, 15px 15px #e59501, 16px 16px #e59501, 17px 17px #e59501, 18px 18px #e59501, 19px 19px #e59501, 20px 20px #e59501, 21px 21px #e59501, 22px 22px #e59501, 23px 23px #e59501, 24px 24px #e59501, 25px 25px #e59501, 26px 26px #e59501, 27px 27px #e59501, 28px 28px #e59501, 29px 29px #e59501, 30px 30px #e59501, 31px 31px #e59501, 32px 32px #e59501, 33px 33px #e59501, 34px 34px #e59501, 35px 35px #e59501, 36px 36px #e59501, 37px 37px #e59501, 38px 38px #e59501, 39px 39px #e59501, 40px 40px #e59501, 41px 41px #e59501, 42px 42px #e59501, 43px 43px #e59501, 44px 44px #e59501, 45px 45px #e59501, 46px 46px #e59501, 47px 47px #e59501, 48px 48px #e59501, 49px 49px #e59501, 50px 50px #e59501, 51px 51px #e59501, 52px 52px #e59501, 53px 53px #e59501, 54px 54px #e59501, 55px 55px #e59501, 56px 56px #e59501, 57px 57px #e59501, 58px 58px #e59501, 59px 59px #e59501, 60px 60px #e59501, 61px 61px #e59501, 62px 62px #e59501, 63px 63px #e59501, 64px 64px #e59501, 65px 65px #e59501, 66px 66px #e59501, 67px 67px #e59501, 68px 68px #e59501, 69px 69px #e59501, 70px 70px #e59501, 71px 71px #e59501, 72px 72px #e59501, 73px 73px #e59501, 74px 74px #e59501, 75px 75px #e59501, 76px 76px #e59501, 77px 77px #e59501, 78px 78px #e59501, 79px 79px #e59501, 80px 80px #e59501, 81px 81px #e59501, 82px 82px #e59501, 83px 83px #e59501, 84px 84px #e59501, 85px 85px #e59501; +} + +.btn_b-longshadow.btn_b-highlight:active, +.btn_b-longshadow.btn_b-highlight.active, +.btn_b-longshadow.btn_b-highlight.is-active, +.btn_b-longshadow-right.btn_b-highlight:active, +.btn_b-longshadow-right.btn_b-highlight.active, +.btn_b-longshadow-right.btn_b-highlight.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-caution, +.btn_b-longshadow-right.btn_b-caution { + text-shadow: 0px 0px #ff1022, 1px 1px #ff1022, 2px 2px #ff1022, 3px 3px #ff1022, 4px 4px #ff1022, 5px 5px #ff1022, 6px 6px #ff1022, 7px 7px #ff1022, 8px 8px #ff1022, 9px 9px #ff1022, 10px 10px #ff1022, 11px 11px #ff1022, 12px 12px #ff1022, 13px 13px #ff1022, 14px 14px #ff1022, 15px 15px #ff1022, 16px 16px #ff1022, 17px 17px #ff1022, 18px 18px #ff1022, 19px 19px #ff1022, 20px 20px #ff1022, 21px 21px #ff1022, 22px 22px #ff1022, 23px 23px #ff1022, 24px 24px #ff1022, 25px 25px #ff1022, 26px 26px #ff1022, 27px 27px #ff1022, 28px 28px #ff1022, 29px 29px #ff1022, 30px 30px #ff1022, 31px 31px #ff1022, 32px 32px #ff1022, 33px 33px #ff1022, 34px 34px #ff1022, 35px 35px #ff1022, 36px 36px #ff1022, 37px 37px #ff1022, 38px 38px #ff1022, 39px 39px #ff1022, 40px 40px #ff1022, 41px 41px #ff1022, 42px 42px #ff1022, 43px 43px #ff1022, 44px 44px #ff1022, 45px 45px #ff1022, 46px 46px #ff1022, 47px 47px #ff1022, 48px 48px #ff1022, 49px 49px #ff1022, 50px 50px #ff1022, 51px 51px #ff1022, 52px 52px #ff1022, 53px 53px #ff1022, 54px 54px #ff1022, 55px 55px #ff1022, 56px 56px #ff1022, 57px 57px #ff1022, 58px 58px #ff1022, 59px 59px #ff1022, 60px 60px #ff1022, 61px 61px #ff1022, 62px 62px #ff1022, 63px 63px #ff1022, 64px 64px #ff1022, 65px 65px #ff1022, 66px 66px #ff1022, 67px 67px #ff1022, 68px 68px #ff1022, 69px 69px #ff1022, 70px 70px #ff1022, 71px 71px #ff1022, 72px 72px #ff1022, 73px 73px #ff1022, 74px 74px #ff1022, 75px 75px #ff1022, 76px 76px #ff1022, 77px 77px #ff1022, 78px 78px #ff1022, 79px 79px #ff1022, 80px 80px #ff1022, 81px 81px #ff1022, 82px 82px #ff1022, 83px 83px #ff1022, 84px 84px #ff1022, 85px 85px #ff1022; +} + +.btn_b-longshadow.btn_b-caution:active, +.btn_b-longshadow.btn_b-caution.active, +.btn_b-longshadow.btn_b-caution.is-active, +.btn_b-longshadow-right.btn_b-caution:active, +.btn_b-longshadow-right.btn_b-caution.active, +.btn_b-longshadow-right.btn_b-caution.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow.btn_b-royal, +.btn_b-longshadow-right.btn_b-royal { + text-shadow: 0px 0px #5246e2, 1px 1px #5246e2, 2px 2px #5246e2, 3px 3px #5246e2, 4px 4px #5246e2, 5px 5px #5246e2, 6px 6px #5246e2, 7px 7px #5246e2, 8px 8px #5246e2, 9px 9px #5246e2, 10px 10px #5246e2, 11px 11px #5246e2, 12px 12px #5246e2, 13px 13px #5246e2, 14px 14px #5246e2, 15px 15px #5246e2, 16px 16px #5246e2, 17px 17px #5246e2, 18px 18px #5246e2, 19px 19px #5246e2, 20px 20px #5246e2, 21px 21px #5246e2, 22px 22px #5246e2, 23px 23px #5246e2, 24px 24px #5246e2, 25px 25px #5246e2, 26px 26px #5246e2, 27px 27px #5246e2, 28px 28px #5246e2, 29px 29px #5246e2, 30px 30px #5246e2, 31px 31px #5246e2, 32px 32px #5246e2, 33px 33px #5246e2, 34px 34px #5246e2, 35px 35px #5246e2, 36px 36px #5246e2, 37px 37px #5246e2, 38px 38px #5246e2, 39px 39px #5246e2, 40px 40px #5246e2, 41px 41px #5246e2, 42px 42px #5246e2, 43px 43px #5246e2, 44px 44px #5246e2, 45px 45px #5246e2, 46px 46px #5246e2, 47px 47px #5246e2, 48px 48px #5246e2, 49px 49px #5246e2, 50px 50px #5246e2, 51px 51px #5246e2, 52px 52px #5246e2, 53px 53px #5246e2, 54px 54px #5246e2, 55px 55px #5246e2, 56px 56px #5246e2, 57px 57px #5246e2, 58px 58px #5246e2, 59px 59px #5246e2, 60px 60px #5246e2, 61px 61px #5246e2, 62px 62px #5246e2, 63px 63px #5246e2, 64px 64px #5246e2, 65px 65px #5246e2, 66px 66px #5246e2, 67px 67px #5246e2, 68px 68px #5246e2, 69px 69px #5246e2, 70px 70px #5246e2, 71px 71px #5246e2, 72px 72px #5246e2, 73px 73px #5246e2, 74px 74px #5246e2, 75px 75px #5246e2, 76px 76px #5246e2, 77px 77px #5246e2, 78px 78px #5246e2, 79px 79px #5246e2, 80px 80px #5246e2, 81px 81px #5246e2, 82px 82px #5246e2, 83px 83px #5246e2, 84px 84px #5246e2, 85px 85px #5246e2; +} + +.btn_b-longshadow.btn_b-royal:active, +.btn_b-longshadow.btn_b-royal.active, +.btn_b-longshadow.btn_b-royal.is-active, +.btn_b-longshadow-right.btn_b-royal:active, +.btn_b-longshadow-right.btn_b-royal.active, +.btn_b-longshadow-right.btn_b-royal.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +/* +* Shadow Left +* +*/ + +.btn_b-longshadow-left { + overflow: hidden; +} + +.btn_b-longshadow-left.btn_b-primary { + text-shadow: 0px 0px #0880d7, -1px 1px #0880d7, -2px 2px #0880d7, -3px 3px #0880d7, -4px 4px #0880d7, -5px 5px #0880d7, -6px 6px #0880d7, -7px 7px #0880d7, -8px 8px #0880d7, -9px 9px #0880d7, -10px 10px #0880d7, -11px 11px #0880d7, -12px 12px #0880d7, -13px 13px #0880d7, -14px 14px #0880d7, -15px 15px #0880d7, -16px 16px #0880d7, -17px 17px #0880d7, -18px 18px #0880d7, -19px 19px #0880d7, -20px 20px #0880d7, -21px 21px #0880d7, -22px 22px #0880d7, -23px 23px #0880d7, -24px 24px #0880d7, -25px 25px #0880d7, -26px 26px #0880d7, -27px 27px #0880d7, -28px 28px #0880d7, -29px 29px #0880d7, -30px 30px #0880d7, -31px 31px #0880d7, -32px 32px #0880d7, -33px 33px #0880d7, -34px 34px #0880d7, -35px 35px #0880d7, -36px 36px #0880d7, -37px 37px #0880d7, -38px 38px #0880d7, -39px 39px #0880d7, -40px 40px #0880d7, -41px 41px #0880d7, -42px 42px #0880d7, -43px 43px #0880d7, -44px 44px #0880d7, -45px 45px #0880d7, -46px 46px #0880d7, -47px 47px #0880d7, -48px 48px #0880d7, -49px 49px #0880d7, -50px 50px #0880d7, -51px 51px #0880d7, -52px 52px #0880d7, -53px 53px #0880d7, -54px 54px #0880d7, -55px 55px #0880d7, -56px 56px #0880d7, -57px 57px #0880d7, -58px 58px #0880d7, -59px 59px #0880d7, -60px 60px #0880d7, -61px 61px #0880d7, -62px 62px #0880d7, -63px 63px #0880d7, -64px 64px #0880d7, -65px 65px #0880d7, -66px 66px #0880d7, -67px 67px #0880d7, -68px 68px #0880d7, -69px 69px #0880d7, -70px 70px #0880d7, -71px 71px #0880d7, -72px 72px #0880d7, -73px 73px #0880d7, -74px 74px #0880d7, -75px 75px #0880d7, -76px 76px #0880d7, -77px 77px #0880d7, -78px 78px #0880d7, -79px 79px #0880d7, -80px 80px #0880d7, -81px 81px #0880d7, -82px 82px #0880d7, -83px 83px #0880d7, -84px 84px #0880d7, -85px 85px #0880d7; +} + +.btn_b-longshadow-left.btn_b-primary:active, +.btn_b-longshadow-left.btn_b-primary.active, +.btn_b-longshadow-left.btn_b-primary.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-plain { + text-shadow: 0px 0px #e6e6e6, -1px 1px #e6e6e6, -2px 2px #e6e6e6, -3px 3px #e6e6e6, -4px 4px #e6e6e6, -5px 5px #e6e6e6, -6px 6px #e6e6e6, -7px 7px #e6e6e6, -8px 8px #e6e6e6, -9px 9px #e6e6e6, -10px 10px #e6e6e6, -11px 11px #e6e6e6, -12px 12px #e6e6e6, -13px 13px #e6e6e6, -14px 14px #e6e6e6, -15px 15px #e6e6e6, -16px 16px #e6e6e6, -17px 17px #e6e6e6, -18px 18px #e6e6e6, -19px 19px #e6e6e6, -20px 20px #e6e6e6, -21px 21px #e6e6e6, -22px 22px #e6e6e6, -23px 23px #e6e6e6, -24px 24px #e6e6e6, -25px 25px #e6e6e6, -26px 26px #e6e6e6, -27px 27px #e6e6e6, -28px 28px #e6e6e6, -29px 29px #e6e6e6, -30px 30px #e6e6e6, -31px 31px #e6e6e6, -32px 32px #e6e6e6, -33px 33px #e6e6e6, -34px 34px #e6e6e6, -35px 35px #e6e6e6, -36px 36px #e6e6e6, -37px 37px #e6e6e6, -38px 38px #e6e6e6, -39px 39px #e6e6e6, -40px 40px #e6e6e6, -41px 41px #e6e6e6, -42px 42px #e6e6e6, -43px 43px #e6e6e6, -44px 44px #e6e6e6, -45px 45px #e6e6e6, -46px 46px #e6e6e6, -47px 47px #e6e6e6, -48px 48px #e6e6e6, -49px 49px #e6e6e6, -50px 50px #e6e6e6, -51px 51px #e6e6e6, -52px 52px #e6e6e6, -53px 53px #e6e6e6, -54px 54px #e6e6e6, -55px 55px #e6e6e6, -56px 56px #e6e6e6, -57px 57px #e6e6e6, -58px 58px #e6e6e6, -59px 59px #e6e6e6, -60px 60px #e6e6e6, -61px 61px #e6e6e6, -62px 62px #e6e6e6, -63px 63px #e6e6e6, -64px 64px #e6e6e6, -65px 65px #e6e6e6, -66px 66px #e6e6e6, -67px 67px #e6e6e6, -68px 68px #e6e6e6, -69px 69px #e6e6e6, -70px 70px #e6e6e6, -71px 71px #e6e6e6, -72px 72px #e6e6e6, -73px 73px #e6e6e6, -74px 74px #e6e6e6, -75px 75px #e6e6e6, -76px 76px #e6e6e6, -77px 77px #e6e6e6, -78px 78px #e6e6e6, -79px 79px #e6e6e6, -80px 80px #e6e6e6, -81px 81px #e6e6e6, -82px 82px #e6e6e6, -83px 83px #e6e6e6, -84px 84px #e6e6e6, -85px 85px #e6e6e6; +} + +.btn_b-longshadow-left.btn_b-plain:active, +.btn_b-longshadow-left.btn_b-plain.active, +.btn_b-longshadow-left.btn_b-plain.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-inverse { + text-shadow: 0px 0px #090909, -1px 1px #090909, -2px 2px #090909, -3px 3px #090909, -4px 4px #090909, -5px 5px #090909, -6px 6px #090909, -7px 7px #090909, -8px 8px #090909, -9px 9px #090909, -10px 10px #090909, -11px 11px #090909, -12px 12px #090909, -13px 13px #090909, -14px 14px #090909, -15px 15px #090909, -16px 16px #090909, -17px 17px #090909, -18px 18px #090909, -19px 19px #090909, -20px 20px #090909, -21px 21px #090909, -22px 22px #090909, -23px 23px #090909, -24px 24px #090909, -25px 25px #090909, -26px 26px #090909, -27px 27px #090909, -28px 28px #090909, -29px 29px #090909, -30px 30px #090909, -31px 31px #090909, -32px 32px #090909, -33px 33px #090909, -34px 34px #090909, -35px 35px #090909, -36px 36px #090909, -37px 37px #090909, -38px 38px #090909, -39px 39px #090909, -40px 40px #090909, -41px 41px #090909, -42px 42px #090909, -43px 43px #090909, -44px 44px #090909, -45px 45px #090909, -46px 46px #090909, -47px 47px #090909, -48px 48px #090909, -49px 49px #090909, -50px 50px #090909, -51px 51px #090909, -52px 52px #090909, -53px 53px #090909, -54px 54px #090909, -55px 55px #090909, -56px 56px #090909, -57px 57px #090909, -58px 58px #090909, -59px 59px #090909, -60px 60px #090909, -61px 61px #090909, -62px 62px #090909, -63px 63px #090909, -64px 64px #090909, -65px 65px #090909, -66px 66px #090909, -67px 67px #090909, -68px 68px #090909, -69px 69px #090909, -70px 70px #090909, -71px 71px #090909, -72px 72px #090909, -73px 73px #090909, -74px 74px #090909, -75px 75px #090909, -76px 76px #090909, -77px 77px #090909, -78px 78px #090909, -79px 79px #090909, -80px 80px #090909, -81px 81px #090909, -82px 82px #090909, -83px 83px #090909, -84px 84px #090909, -85px 85px #090909; +} + +.btn_b-longshadow-left.btn_b-inverse:active, +.btn_b-longshadow-left.btn_b-inverse.active, +.btn_b-longshadow-left.btn_b-inverse.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-action { + text-shadow: 0px 0px #8bc220, -1px 1px #8bc220, -2px 2px #8bc220, -3px 3px #8bc220, -4px 4px #8bc220, -5px 5px #8bc220, -6px 6px #8bc220, -7px 7px #8bc220, -8px 8px #8bc220, -9px 9px #8bc220, -10px 10px #8bc220, -11px 11px #8bc220, -12px 12px #8bc220, -13px 13px #8bc220, -14px 14px #8bc220, -15px 15px #8bc220, -16px 16px #8bc220, -17px 17px #8bc220, -18px 18px #8bc220, -19px 19px #8bc220, -20px 20px #8bc220, -21px 21px #8bc220, -22px 22px #8bc220, -23px 23px #8bc220, -24px 24px #8bc220, -25px 25px #8bc220, -26px 26px #8bc220, -27px 27px #8bc220, -28px 28px #8bc220, -29px 29px #8bc220, -30px 30px #8bc220, -31px 31px #8bc220, -32px 32px #8bc220, -33px 33px #8bc220, -34px 34px #8bc220, -35px 35px #8bc220, -36px 36px #8bc220, -37px 37px #8bc220, -38px 38px #8bc220, -39px 39px #8bc220, -40px 40px #8bc220, -41px 41px #8bc220, -42px 42px #8bc220, -43px 43px #8bc220, -44px 44px #8bc220, -45px 45px #8bc220, -46px 46px #8bc220, -47px 47px #8bc220, -48px 48px #8bc220, -49px 49px #8bc220, -50px 50px #8bc220, -51px 51px #8bc220, -52px 52px #8bc220, -53px 53px #8bc220, -54px 54px #8bc220, -55px 55px #8bc220, -56px 56px #8bc220, -57px 57px #8bc220, -58px 58px #8bc220, -59px 59px #8bc220, -60px 60px #8bc220, -61px 61px #8bc220, -62px 62px #8bc220, -63px 63px #8bc220, -64px 64px #8bc220, -65px 65px #8bc220, -66px 66px #8bc220, -67px 67px #8bc220, -68px 68px #8bc220, -69px 69px #8bc220, -70px 70px #8bc220, -71px 71px #8bc220, -72px 72px #8bc220, -73px 73px #8bc220, -74px 74px #8bc220, -75px 75px #8bc220, -76px 76px #8bc220, -77px 77px #8bc220, -78px 78px #8bc220, -79px 79px #8bc220, -80px 80px #8bc220, -81px 81px #8bc220, -82px 82px #8bc220, -83px 83px #8bc220, -84px 84px #8bc220, -85px 85px #8bc220; +} + +.btn_b-longshadow-left.btn_b-action:active, +.btn_b-longshadow-left.btn_b-action.active, +.btn_b-longshadow-left.btn_b-action.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-highlight { + text-shadow: 0px 0px #e59501, -1px 1px #e59501, -2px 2px #e59501, -3px 3px #e59501, -4px 4px #e59501, -5px 5px #e59501, -6px 6px #e59501, -7px 7px #e59501, -8px 8px #e59501, -9px 9px #e59501, -10px 10px #e59501, -11px 11px #e59501, -12px 12px #e59501, -13px 13px #e59501, -14px 14px #e59501, -15px 15px #e59501, -16px 16px #e59501, -17px 17px #e59501, -18px 18px #e59501, -19px 19px #e59501, -20px 20px #e59501, -21px 21px #e59501, -22px 22px #e59501, -23px 23px #e59501, -24px 24px #e59501, -25px 25px #e59501, -26px 26px #e59501, -27px 27px #e59501, -28px 28px #e59501, -29px 29px #e59501, -30px 30px #e59501, -31px 31px #e59501, -32px 32px #e59501, -33px 33px #e59501, -34px 34px #e59501, -35px 35px #e59501, -36px 36px #e59501, -37px 37px #e59501, -38px 38px #e59501, -39px 39px #e59501, -40px 40px #e59501, -41px 41px #e59501, -42px 42px #e59501, -43px 43px #e59501, -44px 44px #e59501, -45px 45px #e59501, -46px 46px #e59501, -47px 47px #e59501, -48px 48px #e59501, -49px 49px #e59501, -50px 50px #e59501, -51px 51px #e59501, -52px 52px #e59501, -53px 53px #e59501, -54px 54px #e59501, -55px 55px #e59501, -56px 56px #e59501, -57px 57px #e59501, -58px 58px #e59501, -59px 59px #e59501, -60px 60px #e59501, -61px 61px #e59501, -62px 62px #e59501, -63px 63px #e59501, -64px 64px #e59501, -65px 65px #e59501, -66px 66px #e59501, -67px 67px #e59501, -68px 68px #e59501, -69px 69px #e59501, -70px 70px #e59501, -71px 71px #e59501, -72px 72px #e59501, -73px 73px #e59501, -74px 74px #e59501, -75px 75px #e59501, -76px 76px #e59501, -77px 77px #e59501, -78px 78px #e59501, -79px 79px #e59501, -80px 80px #e59501, -81px 81px #e59501, -82px 82px #e59501, -83px 83px #e59501, -84px 84px #e59501, -85px 85px #e59501; +} + +.btn_b-longshadow-left.btn_b-highlight:active, +.btn_b-longshadow-left.btn_b-highlight.active, +.btn_b-longshadow-left.btn_b-highlight.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-caution { + text-shadow: 0px 0px #ff1022, -1px 1px #ff1022, -2px 2px #ff1022, -3px 3px #ff1022, -4px 4px #ff1022, -5px 5px #ff1022, -6px 6px #ff1022, -7px 7px #ff1022, -8px 8px #ff1022, -9px 9px #ff1022, -10px 10px #ff1022, -11px 11px #ff1022, -12px 12px #ff1022, -13px 13px #ff1022, -14px 14px #ff1022, -15px 15px #ff1022, -16px 16px #ff1022, -17px 17px #ff1022, -18px 18px #ff1022, -19px 19px #ff1022, -20px 20px #ff1022, -21px 21px #ff1022, -22px 22px #ff1022, -23px 23px #ff1022, -24px 24px #ff1022, -25px 25px #ff1022, -26px 26px #ff1022, -27px 27px #ff1022, -28px 28px #ff1022, -29px 29px #ff1022, -30px 30px #ff1022, -31px 31px #ff1022, -32px 32px #ff1022, -33px 33px #ff1022, -34px 34px #ff1022, -35px 35px #ff1022, -36px 36px #ff1022, -37px 37px #ff1022, -38px 38px #ff1022, -39px 39px #ff1022, -40px 40px #ff1022, -41px 41px #ff1022, -42px 42px #ff1022, -43px 43px #ff1022, -44px 44px #ff1022, -45px 45px #ff1022, -46px 46px #ff1022, -47px 47px #ff1022, -48px 48px #ff1022, -49px 49px #ff1022, -50px 50px #ff1022, -51px 51px #ff1022, -52px 52px #ff1022, -53px 53px #ff1022, -54px 54px #ff1022, -55px 55px #ff1022, -56px 56px #ff1022, -57px 57px #ff1022, -58px 58px #ff1022, -59px 59px #ff1022, -60px 60px #ff1022, -61px 61px #ff1022, -62px 62px #ff1022, -63px 63px #ff1022, -64px 64px #ff1022, -65px 65px #ff1022, -66px 66px #ff1022, -67px 67px #ff1022, -68px 68px #ff1022, -69px 69px #ff1022, -70px 70px #ff1022, -71px 71px #ff1022, -72px 72px #ff1022, -73px 73px #ff1022, -74px 74px #ff1022, -75px 75px #ff1022, -76px 76px #ff1022, -77px 77px #ff1022, -78px 78px #ff1022, -79px 79px #ff1022, -80px 80px #ff1022, -81px 81px #ff1022, -82px 82px #ff1022, -83px 83px #ff1022, -84px 84px #ff1022, -85px 85px #ff1022; +} + +.btn_b-longshadow-left.btn_b-caution:active, +.btn_b-longshadow-left.btn_b-caution.active, +.btn_b-longshadow-left.btn_b-caution.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.btn_b-longshadow-left.btn_b-royal { + text-shadow: 0px 0px #5246e2, -1px 1px #5246e2, -2px 2px #5246e2, -3px 3px #5246e2, -4px 4px #5246e2, -5px 5px #5246e2, -6px 6px #5246e2, -7px 7px #5246e2, -8px 8px #5246e2, -9px 9px #5246e2, -10px 10px #5246e2, -11px 11px #5246e2, -12px 12px #5246e2, -13px 13px #5246e2, -14px 14px #5246e2, -15px 15px #5246e2, -16px 16px #5246e2, -17px 17px #5246e2, -18px 18px #5246e2, -19px 19px #5246e2, -20px 20px #5246e2, -21px 21px #5246e2, -22px 22px #5246e2, -23px 23px #5246e2, -24px 24px #5246e2, -25px 25px #5246e2, -26px 26px #5246e2, -27px 27px #5246e2, -28px 28px #5246e2, -29px 29px #5246e2, -30px 30px #5246e2, -31px 31px #5246e2, -32px 32px #5246e2, -33px 33px #5246e2, -34px 34px #5246e2, -35px 35px #5246e2, -36px 36px #5246e2, -37px 37px #5246e2, -38px 38px #5246e2, -39px 39px #5246e2, -40px 40px #5246e2, -41px 41px #5246e2, -42px 42px #5246e2, -43px 43px #5246e2, -44px 44px #5246e2, -45px 45px #5246e2, -46px 46px #5246e2, -47px 47px #5246e2, -48px 48px #5246e2, -49px 49px #5246e2, -50px 50px #5246e2, -51px 51px #5246e2, -52px 52px #5246e2, -53px 53px #5246e2, -54px 54px #5246e2, -55px 55px #5246e2, -56px 56px #5246e2, -57px 57px #5246e2, -58px 58px #5246e2, -59px 59px #5246e2, -60px 60px #5246e2, -61px 61px #5246e2, -62px 62px #5246e2, -63px 63px #5246e2, -64px 64px #5246e2, -65px 65px #5246e2, -66px 66px #5246e2, -67px 67px #5246e2, -68px 68px #5246e2, -69px 69px #5246e2, -70px 70px #5246e2, -71px 71px #5246e2, -72px 72px #5246e2, -73px 73px #5246e2, -74px 74px #5246e2, -75px 75px #5246e2, -76px 76px #5246e2, -77px 77px #5246e2, -78px 78px #5246e2, -79px 79px #5246e2, -80px 80px #5246e2, -81px 81px #5246e2, -82px 82px #5246e2, -83px 83px #5246e2, -84px 84px #5246e2, -85px 85px #5246e2; +} + +.btn_b-longshadow-left.btn_b-royal:active, +.btn_b-longshadow-left.btn_b-royal.active, +.btn_b-longshadow-left.btn_b-royal.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +/* +* btn_b Sizes +* +* This file creates the various btn_b sizes +* (ex. .btn_b-large, .btn_b-small, etc.) +*/ + +.btn_b-giant { + font-size: 28px; + height: 70px; + line-height: 70px; + padding: 0 70px; +} + +.btn_b-jumbo { + font-size: 24px; + height: 60px; + line-height: 60px; + padding: 0 60px; +} + +.btn_b-large { + font-size: 20px; + height: 50px; + line-height: 50px; + padding: 0 50px; +} + +.btn_b-normal { + font-size: 16px; + height: 40px; + line-height: 40px; + padding: 0 40px; +} + +.btn_b-small { + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 30px; +} + +.btn_b-tiny { + font-size: 9.6px; + height: 24px; + line-height: 24px; + padding: 0 24px; +} diff --git a/assets/css_firepress/btn_b.min.css b/assets/css_firepress/btn_b.min.css new file mode 100644 index 0000000..1ee4564 --- /dev/null +++ b/assets/css_firepress/btn_b.min.css @@ -0,0 +1 @@ +.btn_b,.btn_b:visited{color:#666}.btn_b,.btn_b-dropdown-list{font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}.btn_b{background-color:#eee;font-size:16px;text-decoration:none;text-align:center;line-height:40px;height:40px;padding:0 40px;margin:15px 0 0;display:inline-block;appearance:none;cursor:pointer;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s}.btn_b:focus,.btn_b:hover{background-color:#f6f6f6;text-decoration:none;outline:0}.btn_b.active,.btn_b.is-active,.btn_b:active{text-shadow:0 1px 0 rgba(255,255,255,.3);text-decoration:none;background-color:#eee;border-color:#cfcfcf;color:#d4d4d4;-webkit-transition-duration:0s;transition-duration:0s;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.2);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}.btn_b.disabled,.btn_b.is-disabled,.btn_b:disabled{top:0!important;background:#EEE!important;border:1px solid #DDD!important;text-shadow:0 1px 1px #fff!important;color:#CCC!important;cursor:default!important;appearance:none!important}.btn_b.disabled else,.btn_b.is-disabled else,.btn_b:disabled else{-webkit-box-shadow:none!important;box-shadow:none!important;opacity:.8!important}.btn_b-uppercase{text-transform:uppercase}.btn_b-lowercase{text-transform:lowercase}.btn_b-capitalize{text-transform:capitalize}.btn_b-small-caps{font-variant:small-caps}.btn_b-icon-txt-large{font-size:36px!important}.btn_b-width-small{padding:0 10px!important}.btn_b-primary,.btn_b-primary-flat{background-color:#1b9af7;border-color:#1b9af7;color:#fff}.btn_b-primary-flat:visited,.btn_b-primary:visited{color:#fff}.btn_b-primary-flat:focus,.btn_b-primary-flat:hover,.btn_b-primary:focus,.btn_b-primary:hover{background-color:#4cb0f9;border-color:#4cb0f9;color:#fff}.btn_b-primary-flat.active,.btn_b-primary-flat.is-active,.btn_b-primary-flat:active,.btn_b-primary.active,.btn_b-primary.is-active,.btn_b-primary:active{background-color:#2798eb;border-color:#2798eb;color:#0880d7}.btn_b-plain,.btn_b-plain-flat,.btn_b-plain-flat:focus,.btn_b-plain-flat:hover,.btn_b-plain:focus,.btn_b-plain:hover{background-color:#fff;border-color:#fff;color:#1b9af7}.btn_b-plain-flat:visited,.btn_b-plain:visited{color:#1b9af7}.btn_b-plain-flat.active,.btn_b-plain-flat.is-active,.btn_b-plain-flat:active,.btn_b-plain.active,.btn_b-plain.is-active,.btn_b-plain:active{background-color:#fff;border-color:#fff;color:#e6e6e6}.btn_b-inverse,.btn_b-inverse-flat{background-color:#222;border-color:#222;color:#eee}.btn_b-inverse-flat:visited,.btn_b-inverse:visited{color:#eee}.btn_b-inverse-flat:focus,.btn_b-inverse-flat:hover,.btn_b-inverse:focus,.btn_b-inverse:hover{background-color:#3c3c3c;border-color:#3c3c3c;color:#eee}.btn_b-inverse-flat.active,.btn_b-inverse-flat.is-active,.btn_b-inverse-flat:active,.btn_b-inverse.active,.btn_b-inverse.is-active,.btn_b-inverse:active{background-color:#222;border-color:#222;color:#090909}.btn_b-action,.btn_b-action-flat{background-color:#a5de37;border-color:#a5de37;color:#fff}.btn_b-action-flat:visited,.btn_b-action:visited{color:#fff}.btn_b-action-flat:focus,.btn_b-action-flat:hover,.btn_b-action:focus,.btn_b-action:hover{background-color:#b9e563;border-color:#b9e563;color:#fff}.btn_b-action-flat.active,.btn_b-action-flat.is-active,.btn_b-action-flat:active,.btn_b-action.active,.btn_b-action.is-active,.btn_b-action:active{background-color:#a1d243;border-color:#a1d243;color:#8bc220}.btn_b-highlight,.btn_b-highlight-flat{background-color:#feae1b;border-color:#feae1b;color:#fff}.btn_b-highlight-flat:visited,.btn_b-highlight:visited{color:#fff}.btn_b-highlight-flat:focus,.btn_b-highlight-flat:hover,.btn_b-highlight:focus,.btn_b-highlight:hover{background-color:#fec04e;border-color:#fec04e;color:#fff}.btn_b-highlight-flat.active,.btn_b-highlight-flat.is-active,.btn_b-highlight-flat:active,.btn_b-highlight.active,.btn_b-highlight.is-active,.btn_b-highlight:active{background-color:#f3ab26;border-color:#f3ab26;color:#e59501}.btn_b-caution,.btn_b-caution-flat{background-color:#ff4351;border-color:#ff4351;color:#fff}.btn_b-caution-flat:visited,.btn_b-caution:visited{color:#fff}.btn_b-caution-flat:focus,.btn_b-caution-flat:hover,.btn_b-caution:focus,.btn_b-caution:hover{background-color:#ff7680;border-color:#ff7680;color:#fff}.btn_b-caution-flat.active,.btn_b-caution-flat.is-active,.btn_b-caution-flat:active,.btn_b-caution.active,.btn_b-caution.is-active,.btn_b-caution:active{background-color:#f64c59;border-color:#f64c59;color:#ff1022}.btn_b-royal,.btn_b-royal-flat{background-color:#7b72e9;border-color:#7b72e9;color:#fff}.btn_b-royal-flat:visited,.btn_b-royal:visited{color:#fff}.btn_b-royal-flat:focus,.btn_b-royal-flat:hover,.btn_b-royal:focus,.btn_b-royal:hover{background-color:#a49ef0;border-color:#a49ef0;color:#fff}.btn_b-royal-flat.active,.btn_b-royal-flat.is-active,.btn_b-royal-flat:active,.btn_b-royal.active,.btn_b-royal.is-active,.btn_b-royal:active{background-color:#827ae1;border-color:#827ae1;color:#5246e2}.btn_b-block,.btn_b-stacked{display:block}.btn_b-square{border-radius:0}.btn_b-box{border-radius:10px}.btn_b-rounded{border-radius:4px}.btn_b-pill{border-radius:200px}.btn_b-circle{border-radius:100%}.btn_b-box,.btn_b-circle,.btn_b-square{padding:0!important;width:40px}.btn_b-box.btn_b-giant,.btn_b-circle.btn_b-giant,.btn_b-square.btn_b-giant{width:70px}.btn_b-box.btn_b-jumbo,.btn_b-circle.btn_b-jumbo,.btn_b-square.btn_b-jumbo{width:60px}.btn_b-box.btn_b-large,.btn_b-circle.btn_b-large,.btn_b-square.btn_b-large{width:50px}.btn_b-box.btn_b-normal,.btn_b-circle.btn_b-normal,.btn_b-square.btn_b-normal{width:40px}.btn_b-box.btn_b-small,.btn_b-circle.btn_b-small,.btn_b-square.btn_b-small{width:30px}.btn_b-box.btn_b-tiny,.btn_b-circle.btn_b-tiny,.btn_b-square.btn_b-tiny{width:24px}.btn_b-border,.btn_b-border-thick,.btn_b-border-thin{background:0 0;border-width:2px;border-style:solid;line-height:36px}.btn_b-border-thick:hover,.btn_b-border-thin:hover,.btn_b-border:hover{background-color:rgba(255,255,255,.9)}.active.btn_b-border-thick,.active.btn_b-border-thin,.btn_b-border-thick:active,.btn_b-border-thin:active,.btn_b-border.active,.btn_b-border.is-active,.btn_b-border:active,.is-active.btn_b-border-thick,.is-active.btn_b-border-thin{-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s}.btn_b-border-thin{border-width:1px}.btn_b-border-thick{border-width:3px}.btn_b-border-thick.btn_b-primary,.btn_b-border-thin.btn_b-primary,.btn_b-border.btn_b-primary,.btn_b-primary.btn_b-border-thick,.btn_b-primary.btn_b-border-thin{color:#1b9af7}.btn_b-border-thick.btn_b-primary:focus,.btn_b-border-thick.btn_b-primary:hover,.btn_b-border-thin.btn_b-primary:focus,.btn_b-border-thin.btn_b-primary:hover,.btn_b-border.btn_b-primary:focus,.btn_b-border.btn_b-primary:hover,.btn_b-primary.btn_b-border-thick:focus,.btn_b-primary.btn_b-border-thick:hover,.btn_b-primary.btn_b-border-thin:focus,.btn_b-primary.btn_b-border-thin:hover{background-color:rgba(76,176,249,.9);color:rgba(255,255,255,.9)}.btn_b-border-thick.btn_b-primary.active,.btn_b-border-thick.btn_b-primary.is-active,.btn_b-border-thick.btn_b-primary:active,.btn_b-border-thin.btn_b-primary.active,.btn_b-border-thin.btn_b-primary.is-active,.btn_b-border-thin.btn_b-primary:active,.btn_b-border.btn_b-primary.active,.btn_b-border.btn_b-primary.is-active,.btn_b-border.btn_b-primary:active,.btn_b-primary.active.btn_b-border-thick,.btn_b-primary.active.btn_b-border-thin,.btn_b-primary.btn_b-border-thick:active,.btn_b-primary.btn_b-border-thin:active,.btn_b-primary.is-active.btn_b-border-thick,.btn_b-primary.is-active.btn_b-border-thin{background-color:rgba(39,152,235,.7);color:rgba(255,255,255,.5);opacity:.3}.btn_b-border-thick.btn_b-plain,.btn_b-border-thin.btn_b-plain,.btn_b-border.btn_b-plain,.btn_b-plain.btn_b-border-thick,.btn_b-plain.btn_b-border-thin{color:#fff}.btn_b-border-thick.btn_b-plain:focus,.btn_b-border-thick.btn_b-plain:hover,.btn_b-border-thin.btn_b-plain:focus,.btn_b-border-thin.btn_b-plain:hover,.btn_b-border.btn_b-plain:focus,.btn_b-border.btn_b-plain:hover,.btn_b-plain.btn_b-border-thick:focus,.btn_b-plain.btn_b-border-thick:hover,.btn_b-plain.btn_b-border-thin:focus,.btn_b-plain.btn_b-border-thin:hover{background-color:rgba(255,255,255,.9);color:rgba(27,154,247,.9)}.btn_b-border-thick.btn_b-plain.active,.btn_b-border-thick.btn_b-plain.is-active,.btn_b-border-thick.btn_b-plain:active,.btn_b-border-thin.btn_b-plain.active,.btn_b-border-thin.btn_b-plain.is-active,.btn_b-border-thin.btn_b-plain:active,.btn_b-border.btn_b-plain.active,.btn_b-border.btn_b-plain.is-active,.btn_b-border.btn_b-plain:active,.btn_b-plain.active.btn_b-border-thick,.btn_b-plain.active.btn_b-border-thin,.btn_b-plain.btn_b-border-thick:active,.btn_b-plain.btn_b-border-thin:active,.btn_b-plain.is-active.btn_b-border-thick,.btn_b-plain.is-active.btn_b-border-thin{background-color:rgba(255,255,255,.7);color:rgba(27,154,247,.5);opacity:.3}.btn_b-border-thick.btn_b-inverse,.btn_b-border-thin.btn_b-inverse,.btn_b-border.btn_b-inverse,.btn_b-inverse.btn_b-border-thick,.btn_b-inverse.btn_b-border-thin{color:#222}.btn_b-border-thick.btn_b-inverse:focus,.btn_b-border-thick.btn_b-inverse:hover,.btn_b-border-thin.btn_b-inverse:focus,.btn_b-border-thin.btn_b-inverse:hover,.btn_b-border.btn_b-inverse:focus,.btn_b-border.btn_b-inverse:hover,.btn_b-inverse.btn_b-border-thick:focus,.btn_b-inverse.btn_b-border-thick:hover,.btn_b-inverse.btn_b-border-thin:focus,.btn_b-inverse.btn_b-border-thin:hover{background-color:rgba(60,60,60,.9);color:rgba(238,238,238,.9)}.btn_b-border-thick.btn_b-inverse.active,.btn_b-border-thick.btn_b-inverse.is-active,.btn_b-border-thick.btn_b-inverse:active,.btn_b-border-thin.btn_b-inverse.active,.btn_b-border-thin.btn_b-inverse.is-active,.btn_b-border-thin.btn_b-inverse:active,.btn_b-border.btn_b-inverse.active,.btn_b-border.btn_b-inverse.is-active,.btn_b-border.btn_b-inverse:active,.btn_b-inverse.active.btn_b-border-thick,.btn_b-inverse.active.btn_b-border-thin,.btn_b-inverse.btn_b-border-thick:active,.btn_b-inverse.btn_b-border-thin:active,.btn_b-inverse.is-active.btn_b-border-thick,.btn_b-inverse.is-active.btn_b-border-thin{background-color:rgba(34,34,34,.7);color:rgba(238,238,238,.5);opacity:.3}.btn_b-action.btn_b-border-thick,.btn_b-action.btn_b-border-thin,.btn_b-border-thick.btn_b-action,.btn_b-border-thin.btn_b-action,.btn_b-border.btn_b-action{color:#a5de37}.btn_b-action.btn_b-border-thick:focus,.btn_b-action.btn_b-border-thick:hover,.btn_b-action.btn_b-border-thin:focus,.btn_b-action.btn_b-border-thin:hover,.btn_b-border-thick.btn_b-action:focus,.btn_b-border-thick.btn_b-action:hover,.btn_b-border-thin.btn_b-action:focus,.btn_b-border-thin.btn_b-action:hover,.btn_b-border.btn_b-action:focus,.btn_b-border.btn_b-action:hover{background-color:rgba(185,229,99,.9);color:rgba(255,255,255,.9)}.btn_b-action.active.btn_b-border-thick,.btn_b-action.active.btn_b-border-thin,.btn_b-action.btn_b-border-thick:active,.btn_b-action.btn_b-border-thin:active,.btn_b-action.is-active.btn_b-border-thick,.btn_b-action.is-active.btn_b-border-thin,.btn_b-border-thick.btn_b-action.active,.btn_b-border-thick.btn_b-action.is-active,.btn_b-border-thick.btn_b-action:active,.btn_b-border-thin.btn_b-action.active,.btn_b-border-thin.btn_b-action.is-active,.btn_b-border-thin.btn_b-action:active,.btn_b-border.btn_b-action.active,.btn_b-border.btn_b-action.is-active,.btn_b-border.btn_b-action:active{background-color:rgba(161,210,67,.7);color:rgba(255,255,255,.5);opacity:.3}.btn_b-border-thick.btn_b-highlight,.btn_b-border-thin.btn_b-highlight,.btn_b-border.btn_b-highlight,.btn_b-highlight.btn_b-border-thick,.btn_b-highlight.btn_b-border-thin{color:#feae1b}.btn_b-border-thick.btn_b-highlight:focus,.btn_b-border-thick.btn_b-highlight:hover,.btn_b-border-thin.btn_b-highlight:focus,.btn_b-border-thin.btn_b-highlight:hover,.btn_b-border.btn_b-highlight:focus,.btn_b-border.btn_b-highlight:hover,.btn_b-highlight.btn_b-border-thick:focus,.btn_b-highlight.btn_b-border-thick:hover,.btn_b-highlight.btn_b-border-thin:focus,.btn_b-highlight.btn_b-border-thin:hover{background-color:rgba(254,192,78,.9);color:rgba(255,255,255,.9)}.btn_b-border-thick.btn_b-highlight.active,.btn_b-border-thick.btn_b-highlight.is-active,.btn_b-border-thick.btn_b-highlight:active,.btn_b-border-thin.btn_b-highlight.active,.btn_b-border-thin.btn_b-highlight.is-active,.btn_b-border-thin.btn_b-highlight:active,.btn_b-border.btn_b-highlight.active,.btn_b-border.btn_b-highlight.is-active,.btn_b-border.btn_b-highlight:active,.btn_b-highlight.active.btn_b-border-thick,.btn_b-highlight.active.btn_b-border-thin,.btn_b-highlight.btn_b-border-thick:active,.btn_b-highlight.btn_b-border-thin:active,.btn_b-highlight.is-active.btn_b-border-thick,.btn_b-highlight.is-active.btn_b-border-thin{background-color:rgba(243,171,38,.7);color:rgba(255,255,255,.5);opacity:.3}.btn_b-border-thick.btn_b-caution,.btn_b-border-thin.btn_b-caution,.btn_b-border.btn_b-caution,.btn_b-caution.btn_b-border-thick,.btn_b-caution.btn_b-border-thin{color:#ff4351}.btn_b-border-thick.btn_b-caution:focus,.btn_b-border-thick.btn_b-caution:hover,.btn_b-border-thin.btn_b-caution:focus,.btn_b-border-thin.btn_b-caution:hover,.btn_b-border.btn_b-caution:focus,.btn_b-border.btn_b-caution:hover,.btn_b-caution.btn_b-border-thick:focus,.btn_b-caution.btn_b-border-thick:hover,.btn_b-caution.btn_b-border-thin:focus,.btn_b-caution.btn_b-border-thin:hover{background-color:rgba(255,118,128,.9);color:rgba(255,255,255,.9)}.btn_b-border-thick.btn_b-caution.active,.btn_b-border-thick.btn_b-caution.is-active,.btn_b-border-thick.btn_b-caution:active,.btn_b-border-thin.btn_b-caution.active,.btn_b-border-thin.btn_b-caution.is-active,.btn_b-border-thin.btn_b-caution:active,.btn_b-border.btn_b-caution.active,.btn_b-border.btn_b-caution.is-active,.btn_b-border.btn_b-caution:active,.btn_b-caution.active.btn_b-border-thick,.btn_b-caution.active.btn_b-border-thin,.btn_b-caution.btn_b-border-thick:active,.btn_b-caution.btn_b-border-thin:active,.btn_b-caution.is-active.btn_b-border-thick,.btn_b-caution.is-active.btn_b-border-thin{background-color:rgba(246,76,89,.7);color:rgba(255,255,255,.5);opacity:.3}.btn_b-border-thick.btn_b-royal,.btn_b-border-thin.btn_b-royal,.btn_b-border.btn_b-royal,.btn_b-royal.btn_b-border-thick,.btn_b-royal.btn_b-border-thin{color:#7b72e9}.btn_b-border-thick.btn_b-royal:focus,.btn_b-border-thick.btn_b-royal:hover,.btn_b-border-thin.btn_b-royal:focus,.btn_b-border-thin.btn_b-royal:hover,.btn_b-border.btn_b-royal:focus,.btn_b-border.btn_b-royal:hover,.btn_b-royal.btn_b-border-thick:focus,.btn_b-royal.btn_b-border-thick:hover,.btn_b-royal.btn_b-border-thin:focus,.btn_b-royal.btn_b-border-thin:hover{background-color:rgba(164,158,240,.9);color:rgba(255,255,255,.9)}.btn_b-border-thick.btn_b-royal.active,.btn_b-border-thick.btn_b-royal.is-active,.btn_b-border-thick.btn_b-royal:active,.btn_b-border-thin.btn_b-royal.active,.btn_b-border-thin.btn_b-royal.is-active,.btn_b-border-thin.btn_b-royal:active,.btn_b-border.btn_b-royal.active,.btn_b-border.btn_b-royal.is-active,.btn_b-border.btn_b-royal:active,.btn_b-royal.active.btn_b-border-thick,.btn_b-royal.active.btn_b-border-thin,.btn_b-royal.btn_b-border-thick:active,.btn_b-royal.btn_b-border-thin:active,.btn_b-royal.is-active.btn_b-border-thick,.btn_b-royal.is-active.btn_b-border-thin{background-color:rgba(130,122,225,.7);color:rgba(255,255,255,.5);opacity:.3}.btn_b-border-thick.btn_b-giant,.btn_b-border-thin.btn_b-giant,.btn_b-border.btn_b-giant,.btn_b-giant.btn_b-border-thick,.btn_b-giant.btn_b-border-thin{line-height:66px}.btn_b-border-thick.btn_b-jumbo,.btn_b-border-thin.btn_b-jumbo,.btn_b-border.btn_b-jumbo,.btn_b-jumbo.btn_b-border-thick,.btn_b-jumbo.btn_b-border-thin{line-height:56px}.btn_b-border-thick.btn_b-large,.btn_b-border-thin.btn_b-large,.btn_b-border.btn_b-large,.btn_b-large.btn_b-border-thick,.btn_b-large.btn_b-border-thin{line-height:46px}.btn_b-border-thick.btn_b-normal,.btn_b-border-thin.btn_b-normal,.btn_b-border.btn_b-normal,.btn_b-normal.btn_b-border-thick,.btn_b-normal.btn_b-border-thin{line-height:36px}.btn_b-border-thick.btn_b-small,.btn_b-border-thin.btn_b-small,.btn_b-border.btn_b-small,.btn_b-small.btn_b-border-thick,.btn_b-small.btn_b-border-thin{line-height:26px}.btn_b-border-thick.btn_b-tiny,.btn_b-border-thin.btn_b-tiny,.btn_b-border.btn_b-tiny,.btn_b-tiny.btn_b-border-thick,.btn_b-tiny.btn_b-border-thin{line-height:20px}.btn_b-borderless{background:0 0;border:none;padding:0 8px!important;color:#eee;font-size:20.8px;font-weight:200}.btn_b-dropdown-list,.btn_b-raised{border-style:solid;border-width:1px}.btn_b-borderless:focus,.btn_b-borderless:hover{background:0 0}.btn_b-borderless.active,.btn_b-borderless.is-active,.btn_b-borderless:active{-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;opacity:.3}.btn_b-borderless.btn_b-primary{color:#1b9af7}.btn_b-borderless.btn_b-plain{color:#fff}.btn_b-borderless.btn_b-inverse{color:#222}.btn_b-borderless.btn_b-action{color:#a5de37}.btn_b-borderless.btn_b-highlight{color:#feae1b}.btn_b-borderless.btn_b-caution{color:#ff4351}.btn_b-borderless.btn_b-royal{color:#7b72e9}.btn_b-borderless.btn_b-giant{font-size:36.4px;height:52.4px;line-height:52.4px}.btn_b-borderless.btn_b-jumbo{font-size:31.2px;height:47.2px;line-height:47.2px}.btn_b-borderless.btn_b-large{font-size:26px;height:42px;line-height:42px}.btn_b-borderless.btn_b-normal{font-size:20.8px;height:36.8px;line-height:36.8px}.btn_b-borderless.btn_b-small{font-size:15.6px;height:31.6px;line-height:31.6px}.btn_b-borderless.btn_b-tiny{font-size:12.48px;height:28.48px;line-height:28.48px}.btn_b-raised{border-color:#e1e1e1;line-height:38px;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#e1e1e1));background:linear-gradient(#f6f6f6,#e1e1e1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.15)}.btn_b-raised:focus,.btn_b-raised:hover{background:-webkit-gradient(linear,left top,left bottom,from(white),to(gainsboro));background:linear-gradient(top,#fff,#dcdcdc)}.btn_b-raised.active,.btn_b-raised.is-active,.btn_b-raised:active{background:#eee;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.2),0 1px 0 #fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.2),0 1px 0 #fff}.btn_b-raised.btn_b-primary{border-color:#088ef0;background:-webkit-gradient(linear,left top,left bottom,from(#34a5f8),to(#088ef0));background:linear-gradient(#34a5f8,#088ef0)}.btn_b-raised.btn_b-primary:focus,.btn_b-raised.btn_b-primary:hover{background:-webkit-gradient(linear,left top,left bottom,from(#42abf8),to(#0888e6));background:linear-gradient(top,#42abf8,#0888e6)}.btn_b-raised.btn_b-primary.active,.btn_b-raised.btn_b-primary.is-active,.btn_b-raised.btn_b-primary:active{border-color:#0880d7;background:#2798eb}.btn_b-raised.btn_b-plain{border-color:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,from(white),to(#f2f2f2));background:linear-gradient(white,#f2f2f2)}.btn_b-raised.btn_b-plain:focus,.btn_b-raised.btn_b-plain:hover{background:-webkit-gradient(linear,left top,left bottom,from(white),to(#ededed));background:linear-gradient(top,#fff,#ededed)}.btn_b-raised.btn_b-plain.active,.btn_b-raised.btn_b-plain.is-active,.btn_b-raised.btn_b-plain:active{border-color:#e6e6e6;background:#fff}.btn_b-raised.btn_b-inverse{border-color:#151515;background:-webkit-gradient(linear,left top,left bottom,from(#2f2f2f),to(#151515));background:linear-gradient(#2f2f2f,#151515)}.btn_b-raised.btn_b-inverse:focus,.btn_b-raised.btn_b-inverse:hover{background:-webkit-gradient(linear,left top,left bottom,from(#363636),to(#101010));background:linear-gradient(top,#363636,#101010)}.btn_b-raised.btn_b-inverse.active,.btn_b-raised.btn_b-inverse.is-active,.btn_b-raised.btn_b-inverse:active{border-color:#090909;background:#222}.btn_b-raised.btn_b-action{border-color:#9ad824;background:-webkit-gradient(linear,left top,left bottom,from(#afe24d),to(#9ad824));background:linear-gradient(#afe24d,#9ad824)}.btn_b-raised.btn_b-action:focus,.btn_b-raised.btn_b-action:hover{background:-webkit-gradient(linear,left top,left bottom,from(#b5e45a),to(#94cf22));background:linear-gradient(top,#b5e45a,#94cf22)}.btn_b-raised.btn_b-action.active,.btn_b-raised.btn_b-action.is-active,.btn_b-raised.btn_b-action:active{border-color:#8bc220;background:#a1d243}.btn_b-raised.btn_b-highlight{border-color:#fea502;background:-webkit-gradient(linear,left top,left bottom,from(#feb734),to(#fea502));background:linear-gradient(#feb734,#fea502)}.btn_b-raised.btn_b-highlight:focus,.btn_b-raised.btn_b-highlight:hover{background:-webkit-gradient(linear,left top,left bottom,from(#febc44),to(#f49f01));background:linear-gradient(top,#febc44,#f49f01)}.btn_b-raised.btn_b-highlight.active,.btn_b-raised.btn_b-highlight.is-active,.btn_b-raised.btn_b-highlight:active{border-color:#e59501;background:#f3ab26}.btn_b-raised.btn_b-caution{border-color:#ff2939;background:-webkit-gradient(linear,left top,left bottom,from(#ff5c69),to(#ff2939));background:linear-gradient(#ff5c69,#ff2939)}.btn_b-raised.btn_b-caution:focus,.btn_b-raised.btn_b-caution:hover{background:-webkit-gradient(linear,left top,left bottom,from(#ff6c77),to(#ff1f30));background:linear-gradient(top,#ff6c77,#ff1f30)}.btn_b-raised.btn_b-caution.active,.btn_b-raised.btn_b-caution.is-active,.btn_b-raised.btn_b-caution:active{border-color:#ff1022;background:#f64c59}.btn_b-raised.btn_b-royal{border-color:#665ce6;background:-webkit-gradient(linear,left top,left bottom,from(#9088ec),to(#665ce6));background:linear-gradient(#9088ec,#665ce6)}.btn_b-raised.btn_b-royal:focus,.btn_b-raised.btn_b-royal:hover{background:-webkit-gradient(linear,left top,left bottom,from(#9c95ef),to(#5e53e4));background:linear-gradient(top,#9c95ef,#5e53e4)}.btn_b-raised.btn_b-royal.active,.btn_b-raised.btn_b-royal.is-active,.btn_b-raised.btn_b-royal:active{border-color:#5246e2;background:#827ae1}.btn_b-3d{position:relative;top:0;-webkit-box-shadow:0 7px 0 #bbb,0 8px 3px rgba(0,0,0,.2);box-shadow:0 7px 0 #bbb,0 8px 3px rgba(0,0,0,.2)}.btn_b-3d:focus,.btn_b-3d:hover{-webkit-box-shadow:0 7px 0 #bbb,0 8px 3px rgba(0,0,0,.2);box-shadow:0 7px 0 #bbb,0 8px 3px rgba(0,0,0,.2)}.btn_b-3d.active,.btn_b-3d.is-active,.btn_b-3d:active{top:5px;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-box-shadow:0 2px 0 #bbb,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #bbb,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-primary{-webkit-box-shadow:0 7px 0 #0880d7,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #0880d7,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-primary:focus,.btn_b-3d.btn_b-primary:hover{-webkit-box-shadow:0 7px 0 #077ace,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #077ace,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-primary.active,.btn_b-3d.btn_b-primary.is-active,.btn_b-3d.btn_b-primary:active{-webkit-box-shadow:0 2px 0 #0662a6,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #0662a6,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-plain{-webkit-box-shadow:0 7px 0 #e6e6e6,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #e6e6e6,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-plain:focus,.btn_b-3d.btn_b-plain:hover{-webkit-box-shadow:0 7px 0 #e0e0e0,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #e0e0e0,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-plain.active,.btn_b-3d.btn_b-plain.is-active,.btn_b-3d.btn_b-plain:active{-webkit-box-shadow:0 2px 0 #ccc,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #ccc,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-inverse{-webkit-box-shadow:0 7px 0 #090909,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #090909,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-inverse:focus,.btn_b-3d.btn_b-inverse:hover{-webkit-box-shadow:0 7px 0 #030303,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #030303,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-inverse.active,.btn_b-3d.btn_b-inverse.is-active,.btn_b-3d.btn_b-inverse:active{-webkit-box-shadow:0 2px 0 #000,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #000,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-action{-webkit-box-shadow:0 7px 0 #8bc220,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #8bc220,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-action:focus,.btn_b-3d.btn_b-action:hover{-webkit-box-shadow:0 7px 0 #84b91f,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #84b91f,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-action.active,.btn_b-3d.btn_b-action.is-active,.btn_b-3d.btn_b-action:active{-webkit-box-shadow:0 2px 0 #6b9619,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #6b9619,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-highlight{-webkit-box-shadow:0 7px 0 #e59501,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #e59501,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-highlight:focus,.btn_b-3d.btn_b-highlight:hover{-webkit-box-shadow:0 7px 0 #db8e01,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #db8e01,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-highlight.active,.btn_b-3d.btn_b-highlight.is-active,.btn_b-3d.btn_b-highlight:active{-webkit-box-shadow:0 2px 0 #b27401,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #b27401,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-caution{-webkit-box-shadow:0 7px 0 #ff1022,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #ff1022,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-caution:focus,.btn_b-3d.btn_b-caution:hover{-webkit-box-shadow:0 7px 0 #ff0618,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #ff0618,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-caution.active,.btn_b-3d.btn_b-caution.is-active,.btn_b-3d.btn_b-caution:active{-webkit-box-shadow:0 2px 0 #dc0010,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #dc0010,0 3px 3px rgba(0,0,0,.2)}.btn_b-3d.btn_b-royal{-webkit-box-shadow:0 7px 0 #5246e2,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #5246e2,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-royal:focus,.btn_b-3d.btn_b-royal:hover{-webkit-box-shadow:0 7px 0 #493de1,0 8px 3px rgba(0,0,0,.3);box-shadow:0 7px 0 #493de1,0 8px 3px rgba(0,0,0,.3)}.btn_b-3d.btn_b-royal.active,.btn_b-3d.btn_b-royal.is-active,.btn_b-3d.btn_b-royal:active{-webkit-box-shadow:0 2px 0 #2f21d4,0 3px 3px rgba(0,0,0,.2);box-shadow:0 2px 0 #2f21d4,0 3px 3px rgba(0,0,0,.2)}@-webkit-keyframes glowing{from,to{-webkit-box-shadow:0 0 0 rgba(44,154,219,.3);box-shadow:0 0 0 rgba(44,154,219,.3)}50%{-webkit-box-shadow:0 0 20px rgba(44,154,219,.8);box-shadow:0 0 20px rgba(44,154,219,.8)}}@keyframes glowing{from,to{-webkit-box-shadow:0 0 0 rgba(44,154,219,.3);box-shadow:0 0 0 rgba(44,154,219,.3)}50%{-webkit-box-shadow:0 0 20px rgba(44,154,219,.8);box-shadow:0 0 20px rgba(44,154,219,.8)}}@-webkit-keyframes glowing-primary{from,to{-webkit-box-shadow:0 0 0 rgba(27,154,247,.3);box-shadow:0 0 0 rgba(27,154,247,.3)}50%{-webkit-box-shadow:0 0 20px rgba(27,154,247,.8);box-shadow:0 0 20px rgba(27,154,247,.8)}}@keyframes glowing-primary{from,to{-webkit-box-shadow:0 0 0 rgba(27,154,247,.3);box-shadow:0 0 0 rgba(27,154,247,.3)}50%{-webkit-box-shadow:0 0 20px rgba(27,154,247,.8);box-shadow:0 0 20px rgba(27,154,247,.8)}}@-webkit-keyframes glowing-plain{from,to{-webkit-box-shadow:0 0 0 rgba(255,255,255,.3);box-shadow:0 0 0 rgba(255,255,255,.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,255,255,.8);box-shadow:0 0 20px rgba(255,255,255,.8)}}@keyframes glowing-plain{from,to{-webkit-box-shadow:0 0 0 rgba(255,255,255,.3);box-shadow:0 0 0 rgba(255,255,255,.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,255,255,.8);box-shadow:0 0 20px rgba(255,255,255,.8)}}@-webkit-keyframes glowing-inverse{from,to{-webkit-box-shadow:0 0 0 rgba(34,34,34,.3);box-shadow:0 0 0 rgba(34,34,34,.3)}50%{-webkit-box-shadow:0 0 20px rgba(34,34,34,.8);box-shadow:0 0 20px rgba(34,34,34,.8)}}@keyframes glowing-inverse{from,to{-webkit-box-shadow:0 0 0 rgba(34,34,34,.3);box-shadow:0 0 0 rgba(34,34,34,.3)}50%{-webkit-box-shadow:0 0 20px rgba(34,34,34,.8);box-shadow:0 0 20px rgba(34,34,34,.8)}}@-webkit-keyframes glowing-action{from,to{-webkit-box-shadow:0 0 0 rgba(165,222,55,.3);box-shadow:0 0 0 rgba(165,222,55,.3)}50%{-webkit-box-shadow:0 0 20px rgba(165,222,55,.8);box-shadow:0 0 20px rgba(165,222,55,.8)}}@keyframes glowing-action{from,to{-webkit-box-shadow:0 0 0 rgba(165,222,55,.3);box-shadow:0 0 0 rgba(165,222,55,.3)}50%{-webkit-box-shadow:0 0 20px rgba(165,222,55,.8);box-shadow:0 0 20px rgba(165,222,55,.8)}}@-webkit-keyframes glowing-highlight{from,to{-webkit-box-shadow:0 0 0 rgba(254,174,27,.3);box-shadow:0 0 0 rgba(254,174,27,.3)}50%{-webkit-box-shadow:0 0 20px rgba(254,174,27,.8);box-shadow:0 0 20px rgba(254,174,27,.8)}}@keyframes glowing-highlight{from,to{-webkit-box-shadow:0 0 0 rgba(254,174,27,.3);box-shadow:0 0 0 rgba(254,174,27,.3)}50%{-webkit-box-shadow:0 0 20px rgba(254,174,27,.8);box-shadow:0 0 20px rgba(254,174,27,.8)}}@-webkit-keyframes glowing-caution{from,to{-webkit-box-shadow:0 0 0 rgba(255,67,81,.3);box-shadow:0 0 0 rgba(255,67,81,.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,67,81,.8);box-shadow:0 0 20px rgba(255,67,81,.8)}}@keyframes glowing-caution{from,to{-webkit-box-shadow:0 0 0 rgba(255,67,81,.3);box-shadow:0 0 0 rgba(255,67,81,.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,67,81,.8);box-shadow:0 0 20px rgba(255,67,81,.8)}}@-webkit-keyframes glowing-royal{from,to{-webkit-box-shadow:0 0 0 rgba(123,114,233,.3);box-shadow:0 0 0 rgba(123,114,233,.3)}50%{-webkit-box-shadow:0 0 20px rgba(123,114,233,.8);box-shadow:0 0 20px rgba(123,114,233,.8)}}@keyframes glowing-royal{from,to{-webkit-box-shadow:0 0 0 rgba(123,114,233,.3);box-shadow:0 0 0 rgba(123,114,233,.3)}50%{-webkit-box-shadow:0 0 20px rgba(123,114,233,.8);box-shadow:0 0 20px rgba(123,114,233,.8)}}.btn_b-glow{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:glowing;animation-name:glowing}.btn_b-glow.active,.btn_b-glow.is-active,.btn_b-glow:active{-webkit-animation-name:none;animation-name:none}.btn_b-glow.btn_b-primary{-webkit-animation-name:glowing-primary;animation-name:glowing-primary}.btn_b-glow.btn_b-plain{-webkit-animation-name:glowing-plain;animation-name:glowing-plain}.btn_b-glow.btn_b-inverse{-webkit-animation-name:glowing-inverse;animation-name:glowing-inverse}.btn_b-glow.btn_b-action{-webkit-animation-name:glowing-action;animation-name:glowing-action}.btn_b-glow.btn_b-highlight{-webkit-animation-name:glowing-highlight;animation-name:glowing-highlight}.btn_b-glow.btn_b-caution{-webkit-animation-name:glowing-caution;animation-name:glowing-caution}.btn_b-glow.btn_b-royal{-webkit-animation-name:glowing-royal;animation-name:glowing-royal}.btn_b-dropdown{position:relative;overflow:visible;display:inline-block}.btn_b-longshadow,.btn_b-longshadow-left,.btn_b-longshadow-right{overflow:hidden}.btn_b-dropdown-list{display:none;position:absolute;padding:0;margin:0;top:0;left:0;z-index:1000;min-width:100%;list-style-type:none;background:rgba(255,255,255,.95);border-color:#d4d4d4;-webkit-box-shadow:0 2px 7px rgba(0,0,0,.2);box-shadow:0 2px 7px rgba(0,0,0,.2);border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.btn_b-dropdown-list.is-below{top:100%;border-top:none;border-radius:0 0 3px 3px}.btn_b-dropdown-list.is-above{bottom:100%;top:auto;border-bottom:none;border-radius:3px 3px 0 0;-webkit-box-shadow:0 -2px 7px rgba(0,0,0,.2);box-shadow:0 -2px 7px rgba(0,0,0,.2)}.btn_b-dropdown-list>li{padding:0;margin:0;display:block}.btn_b-dropdown-list>li>a{display:block;line-height:40px;font-size:12.8px;padding:5px 10px;float:none;color:#666;text-decoration:none}.btn_b-dropdown-list>li>a:hover{color:#5e5e5e;background:#f6f6f6;text-decoration:none}.btn_b-dropdown-divider{border-top:1px solid #e6e6e6}.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list{background:rgba(27,154,247,.95);border-color:#0880d7}.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#0888e6}.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list>li>a{color:#fff}.btn_b-dropdown.btn_b-dropdown-primary .btn_b-dropdown-list>li>a:hover{color:#f2f2f2;background:#088ef0}.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list{background:rgba(255,255,255,.95);border-color:#e6e6e6}.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#ededed}.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list>li>a{color:#1b9af7}.btn_b-dropdown.btn_b-dropdown-plain .btn_b-dropdown-list>li>a:hover{color:#088ef0;background:#f2f2f2}.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list{background:rgba(34,34,34,.95);border-color:#090909}.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#101010}.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list>li>a{color:#eee}.btn_b-dropdown.btn_b-dropdown-inverse .btn_b-dropdown-list>li>a:hover{color:#e1e1e1;background:#151515}.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list{background:rgba(165,222,55,.95);border-color:#8bc220}.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#94cf22}.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list>li>a{color:#fff}.btn_b-dropdown.btn_b-dropdown-action .btn_b-dropdown-list>li>a:hover{color:#f2f2f2;background:#9ad824}.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list{background:rgba(254,174,27,.95);border-color:#e59501}.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#f49f01}.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list>li>a{color:#fff}.btn_b-dropdown.btn_b-dropdown-highlight .btn_b-dropdown-list>li>a:hover{color:#f2f2f2;background:#fea502}.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list{background:rgba(255,67,81,.95);border-color:#ff1022}.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#ff1f30}.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list>li>a{color:#fff}.btn_b-dropdown.btn_b-dropdown-caution .btn_b-dropdown-list>li>a:hover{color:#f2f2f2;background:#ff2939}.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list{background:rgba(123,114,233,.95);border-color:#5246e2}.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list .btn_b-dropdown-divider{border-color:#5e53e4}.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list>li>a{color:#fff}.btn_b-dropdown.btn_b-dropdown-royal .btn_b-dropdown-list>li>a:hover{color:#f2f2f2;background:#665ce6}.btn_b-group{position:relative;display:inline-block}.btn_b-group:after,.btn_b-group:before{content:'.';clear:both;display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.btn_b-group .btn_b,.btn_b-group .btn_b-dropdown{float:left}.btn_b-group .btn_b-dropdown:not(:first-child):not(:last-child),.btn_b-group .btn_b:not(:first-child):not(:last-child){border-radius:0;border-right:none}.btn_b-group .btn_b-dropdown:first-child,.btn_b-group .btn_b:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.btn_b-group .btn_b-dropdown:last-child,.btn_b-group .btn_b:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn_b-wrap{border:1px solid #e3e3e3;display:inline-block;padding:9px;background:-webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(white));background:linear-gradient(#f2f2f2,#fff);border-radius:200px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.04);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}.btn_b-longshadow-right.btn_b-primary,.btn_b-longshadow.btn_b-primary{text-shadow:0 0 #0880d7,1px 1px #0880d7,2px 2px #0880d7,3px 3px #0880d7,4px 4px #0880d7,5px 5px #0880d7,6px 6px #0880d7,7px 7px #0880d7,8px 8px #0880d7,9px 9px #0880d7,10px 10px #0880d7,11px 11px #0880d7,12px 12px #0880d7,13px 13px #0880d7,14px 14px #0880d7,15px 15px #0880d7,16px 16px #0880d7,17px 17px #0880d7,18px 18px #0880d7,19px 19px #0880d7,20px 20px #0880d7,21px 21px #0880d7,22px 22px #0880d7,23px 23px #0880d7,24px 24px #0880d7,25px 25px #0880d7,26px 26px #0880d7,27px 27px #0880d7,28px 28px #0880d7,29px 29px #0880d7,30px 30px #0880d7,31px 31px #0880d7,32px 32px #0880d7,33px 33px #0880d7,34px 34px #0880d7,35px 35px #0880d7,36px 36px #0880d7,37px 37px #0880d7,38px 38px #0880d7,39px 39px #0880d7,40px 40px #0880d7,41px 41px #0880d7,42px 42px #0880d7,43px 43px #0880d7,44px 44px #0880d7,45px 45px #0880d7,46px 46px #0880d7,47px 47px #0880d7,48px 48px #0880d7,49px 49px #0880d7,50px 50px #0880d7,51px 51px #0880d7,52px 52px #0880d7,53px 53px #0880d7,54px 54px #0880d7,55px 55px #0880d7,56px 56px #0880d7,57px 57px #0880d7,58px 58px #0880d7,59px 59px #0880d7,60px 60px #0880d7,61px 61px #0880d7,62px 62px #0880d7,63px 63px #0880d7,64px 64px #0880d7,65px 65px #0880d7,66px 66px #0880d7,67px 67px #0880d7,68px 68px #0880d7,69px 69px #0880d7,70px 70px #0880d7,71px 71px #0880d7,72px 72px #0880d7,73px 73px #0880d7,74px 74px #0880d7,75px 75px #0880d7,76px 76px #0880d7,77px 77px #0880d7,78px 78px #0880d7,79px 79px #0880d7,80px 80px #0880d7,81px 81px #0880d7,82px 82px #0880d7,83px 83px #0880d7,84px 84px #0880d7,85px 85px #0880d7}.btn_b-longshadow-right.btn_b-primary.active,.btn_b-longshadow-right.btn_b-primary.is-active,.btn_b-longshadow-right.btn_b-primary:active,.btn_b-longshadow.btn_b-primary.active,.btn_b-longshadow.btn_b-primary.is-active,.btn_b-longshadow.btn_b-primary:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-plain,.btn_b-longshadow.btn_b-plain{text-shadow:0 0 #e6e6e6,1px 1px #e6e6e6,2px 2px #e6e6e6,3px 3px #e6e6e6,4px 4px #e6e6e6,5px 5px #e6e6e6,6px 6px #e6e6e6,7px 7px #e6e6e6,8px 8px #e6e6e6,9px 9px #e6e6e6,10px 10px #e6e6e6,11px 11px #e6e6e6,12px 12px #e6e6e6,13px 13px #e6e6e6,14px 14px #e6e6e6,15px 15px #e6e6e6,16px 16px #e6e6e6,17px 17px #e6e6e6,18px 18px #e6e6e6,19px 19px #e6e6e6,20px 20px #e6e6e6,21px 21px #e6e6e6,22px 22px #e6e6e6,23px 23px #e6e6e6,24px 24px #e6e6e6,25px 25px #e6e6e6,26px 26px #e6e6e6,27px 27px #e6e6e6,28px 28px #e6e6e6,29px 29px #e6e6e6,30px 30px #e6e6e6,31px 31px #e6e6e6,32px 32px #e6e6e6,33px 33px #e6e6e6,34px 34px #e6e6e6,35px 35px #e6e6e6,36px 36px #e6e6e6,37px 37px #e6e6e6,38px 38px #e6e6e6,39px 39px #e6e6e6,40px 40px #e6e6e6,41px 41px #e6e6e6,42px 42px #e6e6e6,43px 43px #e6e6e6,44px 44px #e6e6e6,45px 45px #e6e6e6,46px 46px #e6e6e6,47px 47px #e6e6e6,48px 48px #e6e6e6,49px 49px #e6e6e6,50px 50px #e6e6e6,51px 51px #e6e6e6,52px 52px #e6e6e6,53px 53px #e6e6e6,54px 54px #e6e6e6,55px 55px #e6e6e6,56px 56px #e6e6e6,57px 57px #e6e6e6,58px 58px #e6e6e6,59px 59px #e6e6e6,60px 60px #e6e6e6,61px 61px #e6e6e6,62px 62px #e6e6e6,63px 63px #e6e6e6,64px 64px #e6e6e6,65px 65px #e6e6e6,66px 66px #e6e6e6,67px 67px #e6e6e6,68px 68px #e6e6e6,69px 69px #e6e6e6,70px 70px #e6e6e6,71px 71px #e6e6e6,72px 72px #e6e6e6,73px 73px #e6e6e6,74px 74px #e6e6e6,75px 75px #e6e6e6,76px 76px #e6e6e6,77px 77px #e6e6e6,78px 78px #e6e6e6,79px 79px #e6e6e6,80px 80px #e6e6e6,81px 81px #e6e6e6,82px 82px #e6e6e6,83px 83px #e6e6e6,84px 84px #e6e6e6,85px 85px #e6e6e6}.btn_b-longshadow-right.btn_b-plain.active,.btn_b-longshadow-right.btn_b-plain.is-active,.btn_b-longshadow-right.btn_b-plain:active,.btn_b-longshadow.btn_b-plain.active,.btn_b-longshadow.btn_b-plain.is-active,.btn_b-longshadow.btn_b-plain:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-inverse,.btn_b-longshadow.btn_b-inverse{text-shadow:0 0 #090909,1px 1px #090909,2px 2px #090909,3px 3px #090909,4px 4px #090909,5px 5px #090909,6px 6px #090909,7px 7px #090909,8px 8px #090909,9px 9px #090909,10px 10px #090909,11px 11px #090909,12px 12px #090909,13px 13px #090909,14px 14px #090909,15px 15px #090909,16px 16px #090909,17px 17px #090909,18px 18px #090909,19px 19px #090909,20px 20px #090909,21px 21px #090909,22px 22px #090909,23px 23px #090909,24px 24px #090909,25px 25px #090909,26px 26px #090909,27px 27px #090909,28px 28px #090909,29px 29px #090909,30px 30px #090909,31px 31px #090909,32px 32px #090909,33px 33px #090909,34px 34px #090909,35px 35px #090909,36px 36px #090909,37px 37px #090909,38px 38px #090909,39px 39px #090909,40px 40px #090909,41px 41px #090909,42px 42px #090909,43px 43px #090909,44px 44px #090909,45px 45px #090909,46px 46px #090909,47px 47px #090909,48px 48px #090909,49px 49px #090909,50px 50px #090909,51px 51px #090909,52px 52px #090909,53px 53px #090909,54px 54px #090909,55px 55px #090909,56px 56px #090909,57px 57px #090909,58px 58px #090909,59px 59px #090909,60px 60px #090909,61px 61px #090909,62px 62px #090909,63px 63px #090909,64px 64px #090909,65px 65px #090909,66px 66px #090909,67px 67px #090909,68px 68px #090909,69px 69px #090909,70px 70px #090909,71px 71px #090909,72px 72px #090909,73px 73px #090909,74px 74px #090909,75px 75px #090909,76px 76px #090909,77px 77px #090909,78px 78px #090909,79px 79px #090909,80px 80px #090909,81px 81px #090909,82px 82px #090909,83px 83px #090909,84px 84px #090909,85px 85px #090909}.btn_b-longshadow-right.btn_b-inverse.active,.btn_b-longshadow-right.btn_b-inverse.is-active,.btn_b-longshadow-right.btn_b-inverse:active,.btn_b-longshadow.btn_b-inverse.active,.btn_b-longshadow.btn_b-inverse.is-active,.btn_b-longshadow.btn_b-inverse:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-action,.btn_b-longshadow.btn_b-action{text-shadow:0 0 #8bc220,1px 1px #8bc220,2px 2px #8bc220,3px 3px #8bc220,4px 4px #8bc220,5px 5px #8bc220,6px 6px #8bc220,7px 7px #8bc220,8px 8px #8bc220,9px 9px #8bc220,10px 10px #8bc220,11px 11px #8bc220,12px 12px #8bc220,13px 13px #8bc220,14px 14px #8bc220,15px 15px #8bc220,16px 16px #8bc220,17px 17px #8bc220,18px 18px #8bc220,19px 19px #8bc220,20px 20px #8bc220,21px 21px #8bc220,22px 22px #8bc220,23px 23px #8bc220,24px 24px #8bc220,25px 25px #8bc220,26px 26px #8bc220,27px 27px #8bc220,28px 28px #8bc220,29px 29px #8bc220,30px 30px #8bc220,31px 31px #8bc220,32px 32px #8bc220,33px 33px #8bc220,34px 34px #8bc220,35px 35px #8bc220,36px 36px #8bc220,37px 37px #8bc220,38px 38px #8bc220,39px 39px #8bc220,40px 40px #8bc220,41px 41px #8bc220,42px 42px #8bc220,43px 43px #8bc220,44px 44px #8bc220,45px 45px #8bc220,46px 46px #8bc220,47px 47px #8bc220,48px 48px #8bc220,49px 49px #8bc220,50px 50px #8bc220,51px 51px #8bc220,52px 52px #8bc220,53px 53px #8bc220,54px 54px #8bc220,55px 55px #8bc220,56px 56px #8bc220,57px 57px #8bc220,58px 58px #8bc220,59px 59px #8bc220,60px 60px #8bc220,61px 61px #8bc220,62px 62px #8bc220,63px 63px #8bc220,64px 64px #8bc220,65px 65px #8bc220,66px 66px #8bc220,67px 67px #8bc220,68px 68px #8bc220,69px 69px #8bc220,70px 70px #8bc220,71px 71px #8bc220,72px 72px #8bc220,73px 73px #8bc220,74px 74px #8bc220,75px 75px #8bc220,76px 76px #8bc220,77px 77px #8bc220,78px 78px #8bc220,79px 79px #8bc220,80px 80px #8bc220,81px 81px #8bc220,82px 82px #8bc220,83px 83px #8bc220,84px 84px #8bc220,85px 85px #8bc220}.btn_b-longshadow-right.btn_b-action.active,.btn_b-longshadow-right.btn_b-action.is-active,.btn_b-longshadow-right.btn_b-action:active,.btn_b-longshadow.btn_b-action.active,.btn_b-longshadow.btn_b-action.is-active,.btn_b-longshadow.btn_b-action:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-highlight,.btn_b-longshadow.btn_b-highlight{text-shadow:0 0 #e59501,1px 1px #e59501,2px 2px #e59501,3px 3px #e59501,4px 4px #e59501,5px 5px #e59501,6px 6px #e59501,7px 7px #e59501,8px 8px #e59501,9px 9px #e59501,10px 10px #e59501,11px 11px #e59501,12px 12px #e59501,13px 13px #e59501,14px 14px #e59501,15px 15px #e59501,16px 16px #e59501,17px 17px #e59501,18px 18px #e59501,19px 19px #e59501,20px 20px #e59501,21px 21px #e59501,22px 22px #e59501,23px 23px #e59501,24px 24px #e59501,25px 25px #e59501,26px 26px #e59501,27px 27px #e59501,28px 28px #e59501,29px 29px #e59501,30px 30px #e59501,31px 31px #e59501,32px 32px #e59501,33px 33px #e59501,34px 34px #e59501,35px 35px #e59501,36px 36px #e59501,37px 37px #e59501,38px 38px #e59501,39px 39px #e59501,40px 40px #e59501,41px 41px #e59501,42px 42px #e59501,43px 43px #e59501,44px 44px #e59501,45px 45px #e59501,46px 46px #e59501,47px 47px #e59501,48px 48px #e59501,49px 49px #e59501,50px 50px #e59501,51px 51px #e59501,52px 52px #e59501,53px 53px #e59501,54px 54px #e59501,55px 55px #e59501,56px 56px #e59501,57px 57px #e59501,58px 58px #e59501,59px 59px #e59501,60px 60px #e59501,61px 61px #e59501,62px 62px #e59501,63px 63px #e59501,64px 64px #e59501,65px 65px #e59501,66px 66px #e59501,67px 67px #e59501,68px 68px #e59501,69px 69px #e59501,70px 70px #e59501,71px 71px #e59501,72px 72px #e59501,73px 73px #e59501,74px 74px #e59501,75px 75px #e59501,76px 76px #e59501,77px 77px #e59501,78px 78px #e59501,79px 79px #e59501,80px 80px #e59501,81px 81px #e59501,82px 82px #e59501,83px 83px #e59501,84px 84px #e59501,85px 85px #e59501}.btn_b-longshadow-right.btn_b-highlight.active,.btn_b-longshadow-right.btn_b-highlight.is-active,.btn_b-longshadow-right.btn_b-highlight:active,.btn_b-longshadow.btn_b-highlight.active,.btn_b-longshadow.btn_b-highlight.is-active,.btn_b-longshadow.btn_b-highlight:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-caution,.btn_b-longshadow.btn_b-caution{text-shadow:0 0 #ff1022,1px 1px #ff1022,2px 2px #ff1022,3px 3px #ff1022,4px 4px #ff1022,5px 5px #ff1022,6px 6px #ff1022,7px 7px #ff1022,8px 8px #ff1022,9px 9px #ff1022,10px 10px #ff1022,11px 11px #ff1022,12px 12px #ff1022,13px 13px #ff1022,14px 14px #ff1022,15px 15px #ff1022,16px 16px #ff1022,17px 17px #ff1022,18px 18px #ff1022,19px 19px #ff1022,20px 20px #ff1022,21px 21px #ff1022,22px 22px #ff1022,23px 23px #ff1022,24px 24px #ff1022,25px 25px #ff1022,26px 26px #ff1022,27px 27px #ff1022,28px 28px #ff1022,29px 29px #ff1022,30px 30px #ff1022,31px 31px #ff1022,32px 32px #ff1022,33px 33px #ff1022,34px 34px #ff1022,35px 35px #ff1022,36px 36px #ff1022,37px 37px #ff1022,38px 38px #ff1022,39px 39px #ff1022,40px 40px #ff1022,41px 41px #ff1022,42px 42px #ff1022,43px 43px #ff1022,44px 44px #ff1022,45px 45px #ff1022,46px 46px #ff1022,47px 47px #ff1022,48px 48px #ff1022,49px 49px #ff1022,50px 50px #ff1022,51px 51px #ff1022,52px 52px #ff1022,53px 53px #ff1022,54px 54px #ff1022,55px 55px #ff1022,56px 56px #ff1022,57px 57px #ff1022,58px 58px #ff1022,59px 59px #ff1022,60px 60px #ff1022,61px 61px #ff1022,62px 62px #ff1022,63px 63px #ff1022,64px 64px #ff1022,65px 65px #ff1022,66px 66px #ff1022,67px 67px #ff1022,68px 68px #ff1022,69px 69px #ff1022,70px 70px #ff1022,71px 71px #ff1022,72px 72px #ff1022,73px 73px #ff1022,74px 74px #ff1022,75px 75px #ff1022,76px 76px #ff1022,77px 77px #ff1022,78px 78px #ff1022,79px 79px #ff1022,80px 80px #ff1022,81px 81px #ff1022,82px 82px #ff1022,83px 83px #ff1022,84px 84px #ff1022,85px 85px #ff1022}.btn_b-longshadow-right.btn_b-caution.active,.btn_b-longshadow-right.btn_b-caution.is-active,.btn_b-longshadow-right.btn_b-caution:active,.btn_b-longshadow.btn_b-caution.active,.btn_b-longshadow.btn_b-caution.is-active,.btn_b-longshadow.btn_b-caution:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-right.btn_b-royal,.btn_b-longshadow.btn_b-royal{text-shadow:0 0 #5246e2,1px 1px #5246e2,2px 2px #5246e2,3px 3px #5246e2,4px 4px #5246e2,5px 5px #5246e2,6px 6px #5246e2,7px 7px #5246e2,8px 8px #5246e2,9px 9px #5246e2,10px 10px #5246e2,11px 11px #5246e2,12px 12px #5246e2,13px 13px #5246e2,14px 14px #5246e2,15px 15px #5246e2,16px 16px #5246e2,17px 17px #5246e2,18px 18px #5246e2,19px 19px #5246e2,20px 20px #5246e2,21px 21px #5246e2,22px 22px #5246e2,23px 23px #5246e2,24px 24px #5246e2,25px 25px #5246e2,26px 26px #5246e2,27px 27px #5246e2,28px 28px #5246e2,29px 29px #5246e2,30px 30px #5246e2,31px 31px #5246e2,32px 32px #5246e2,33px 33px #5246e2,34px 34px #5246e2,35px 35px #5246e2,36px 36px #5246e2,37px 37px #5246e2,38px 38px #5246e2,39px 39px #5246e2,40px 40px #5246e2,41px 41px #5246e2,42px 42px #5246e2,43px 43px #5246e2,44px 44px #5246e2,45px 45px #5246e2,46px 46px #5246e2,47px 47px #5246e2,48px 48px #5246e2,49px 49px #5246e2,50px 50px #5246e2,51px 51px #5246e2,52px 52px #5246e2,53px 53px #5246e2,54px 54px #5246e2,55px 55px #5246e2,56px 56px #5246e2,57px 57px #5246e2,58px 58px #5246e2,59px 59px #5246e2,60px 60px #5246e2,61px 61px #5246e2,62px 62px #5246e2,63px 63px #5246e2,64px 64px #5246e2,65px 65px #5246e2,66px 66px #5246e2,67px 67px #5246e2,68px 68px #5246e2,69px 69px #5246e2,70px 70px #5246e2,71px 71px #5246e2,72px 72px #5246e2,73px 73px #5246e2,74px 74px #5246e2,75px 75px #5246e2,76px 76px #5246e2,77px 77px #5246e2,78px 78px #5246e2,79px 79px #5246e2,80px 80px #5246e2,81px 81px #5246e2,82px 82px #5246e2,83px 83px #5246e2,84px 84px #5246e2,85px 85px #5246e2}.btn_b-longshadow-right.btn_b-royal.active,.btn_b-longshadow-right.btn_b-royal.is-active,.btn_b-longshadow-right.btn_b-royal:active,.btn_b-longshadow.btn_b-royal.active,.btn_b-longshadow.btn_b-royal.is-active,.btn_b-longshadow.btn_b-royal:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-primary{text-shadow:0 0 #0880d7,-1px 1px #0880d7,-2px 2px #0880d7,-3px 3px #0880d7,-4px 4px #0880d7,-5px 5px #0880d7,-6px 6px #0880d7,-7px 7px #0880d7,-8px 8px #0880d7,-9px 9px #0880d7,-10px 10px #0880d7,-11px 11px #0880d7,-12px 12px #0880d7,-13px 13px #0880d7,-14px 14px #0880d7,-15px 15px #0880d7,-16px 16px #0880d7,-17px 17px #0880d7,-18px 18px #0880d7,-19px 19px #0880d7,-20px 20px #0880d7,-21px 21px #0880d7,-22px 22px #0880d7,-23px 23px #0880d7,-24px 24px #0880d7,-25px 25px #0880d7,-26px 26px #0880d7,-27px 27px #0880d7,-28px 28px #0880d7,-29px 29px #0880d7,-30px 30px #0880d7,-31px 31px #0880d7,-32px 32px #0880d7,-33px 33px #0880d7,-34px 34px #0880d7,-35px 35px #0880d7,-36px 36px #0880d7,-37px 37px #0880d7,-38px 38px #0880d7,-39px 39px #0880d7,-40px 40px #0880d7,-41px 41px #0880d7,-42px 42px #0880d7,-43px 43px #0880d7,-44px 44px #0880d7,-45px 45px #0880d7,-46px 46px #0880d7,-47px 47px #0880d7,-48px 48px #0880d7,-49px 49px #0880d7,-50px 50px #0880d7,-51px 51px #0880d7,-52px 52px #0880d7,-53px 53px #0880d7,-54px 54px #0880d7,-55px 55px #0880d7,-56px 56px #0880d7,-57px 57px #0880d7,-58px 58px #0880d7,-59px 59px #0880d7,-60px 60px #0880d7,-61px 61px #0880d7,-62px 62px #0880d7,-63px 63px #0880d7,-64px 64px #0880d7,-65px 65px #0880d7,-66px 66px #0880d7,-67px 67px #0880d7,-68px 68px #0880d7,-69px 69px #0880d7,-70px 70px #0880d7,-71px 71px #0880d7,-72px 72px #0880d7,-73px 73px #0880d7,-74px 74px #0880d7,-75px 75px #0880d7,-76px 76px #0880d7,-77px 77px #0880d7,-78px 78px #0880d7,-79px 79px #0880d7,-80px 80px #0880d7,-81px 81px #0880d7,-82px 82px #0880d7,-83px 83px #0880d7,-84px 84px #0880d7,-85px 85px #0880d7}.btn_b-longshadow-left.btn_b-primary.active,.btn_b-longshadow-left.btn_b-primary.is-active,.btn_b-longshadow-left.btn_b-primary:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-plain{text-shadow:0 0 #e6e6e6,-1px 1px #e6e6e6,-2px 2px #e6e6e6,-3px 3px #e6e6e6,-4px 4px #e6e6e6,-5px 5px #e6e6e6,-6px 6px #e6e6e6,-7px 7px #e6e6e6,-8px 8px #e6e6e6,-9px 9px #e6e6e6,-10px 10px #e6e6e6,-11px 11px #e6e6e6,-12px 12px #e6e6e6,-13px 13px #e6e6e6,-14px 14px #e6e6e6,-15px 15px #e6e6e6,-16px 16px #e6e6e6,-17px 17px #e6e6e6,-18px 18px #e6e6e6,-19px 19px #e6e6e6,-20px 20px #e6e6e6,-21px 21px #e6e6e6,-22px 22px #e6e6e6,-23px 23px #e6e6e6,-24px 24px #e6e6e6,-25px 25px #e6e6e6,-26px 26px #e6e6e6,-27px 27px #e6e6e6,-28px 28px #e6e6e6,-29px 29px #e6e6e6,-30px 30px #e6e6e6,-31px 31px #e6e6e6,-32px 32px #e6e6e6,-33px 33px #e6e6e6,-34px 34px #e6e6e6,-35px 35px #e6e6e6,-36px 36px #e6e6e6,-37px 37px #e6e6e6,-38px 38px #e6e6e6,-39px 39px #e6e6e6,-40px 40px #e6e6e6,-41px 41px #e6e6e6,-42px 42px #e6e6e6,-43px 43px #e6e6e6,-44px 44px #e6e6e6,-45px 45px #e6e6e6,-46px 46px #e6e6e6,-47px 47px #e6e6e6,-48px 48px #e6e6e6,-49px 49px #e6e6e6,-50px 50px #e6e6e6,-51px 51px #e6e6e6,-52px 52px #e6e6e6,-53px 53px #e6e6e6,-54px 54px #e6e6e6,-55px 55px #e6e6e6,-56px 56px #e6e6e6,-57px 57px #e6e6e6,-58px 58px #e6e6e6,-59px 59px #e6e6e6,-60px 60px #e6e6e6,-61px 61px #e6e6e6,-62px 62px #e6e6e6,-63px 63px #e6e6e6,-64px 64px #e6e6e6,-65px 65px #e6e6e6,-66px 66px #e6e6e6,-67px 67px #e6e6e6,-68px 68px #e6e6e6,-69px 69px #e6e6e6,-70px 70px #e6e6e6,-71px 71px #e6e6e6,-72px 72px #e6e6e6,-73px 73px #e6e6e6,-74px 74px #e6e6e6,-75px 75px #e6e6e6,-76px 76px #e6e6e6,-77px 77px #e6e6e6,-78px 78px #e6e6e6,-79px 79px #e6e6e6,-80px 80px #e6e6e6,-81px 81px #e6e6e6,-82px 82px #e6e6e6,-83px 83px #e6e6e6,-84px 84px #e6e6e6,-85px 85px #e6e6e6}.btn_b-longshadow-left.btn_b-plain.active,.btn_b-longshadow-left.btn_b-plain.is-active,.btn_b-longshadow-left.btn_b-plain:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-inverse{text-shadow:0 0 #090909,-1px 1px #090909,-2px 2px #090909,-3px 3px #090909,-4px 4px #090909,-5px 5px #090909,-6px 6px #090909,-7px 7px #090909,-8px 8px #090909,-9px 9px #090909,-10px 10px #090909,-11px 11px #090909,-12px 12px #090909,-13px 13px #090909,-14px 14px #090909,-15px 15px #090909,-16px 16px #090909,-17px 17px #090909,-18px 18px #090909,-19px 19px #090909,-20px 20px #090909,-21px 21px #090909,-22px 22px #090909,-23px 23px #090909,-24px 24px #090909,-25px 25px #090909,-26px 26px #090909,-27px 27px #090909,-28px 28px #090909,-29px 29px #090909,-30px 30px #090909,-31px 31px #090909,-32px 32px #090909,-33px 33px #090909,-34px 34px #090909,-35px 35px #090909,-36px 36px #090909,-37px 37px #090909,-38px 38px #090909,-39px 39px #090909,-40px 40px #090909,-41px 41px #090909,-42px 42px #090909,-43px 43px #090909,-44px 44px #090909,-45px 45px #090909,-46px 46px #090909,-47px 47px #090909,-48px 48px #090909,-49px 49px #090909,-50px 50px #090909,-51px 51px #090909,-52px 52px #090909,-53px 53px #090909,-54px 54px #090909,-55px 55px #090909,-56px 56px #090909,-57px 57px #090909,-58px 58px #090909,-59px 59px #090909,-60px 60px #090909,-61px 61px #090909,-62px 62px #090909,-63px 63px #090909,-64px 64px #090909,-65px 65px #090909,-66px 66px #090909,-67px 67px #090909,-68px 68px #090909,-69px 69px #090909,-70px 70px #090909,-71px 71px #090909,-72px 72px #090909,-73px 73px #090909,-74px 74px #090909,-75px 75px #090909,-76px 76px #090909,-77px 77px #090909,-78px 78px #090909,-79px 79px #090909,-80px 80px #090909,-81px 81px #090909,-82px 82px #090909,-83px 83px #090909,-84px 84px #090909,-85px 85px #090909}.btn_b-longshadow-left.btn_b-inverse.active,.btn_b-longshadow-left.btn_b-inverse.is-active,.btn_b-longshadow-left.btn_b-inverse:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-action{text-shadow:0 0 #8bc220,-1px 1px #8bc220,-2px 2px #8bc220,-3px 3px #8bc220,-4px 4px #8bc220,-5px 5px #8bc220,-6px 6px #8bc220,-7px 7px #8bc220,-8px 8px #8bc220,-9px 9px #8bc220,-10px 10px #8bc220,-11px 11px #8bc220,-12px 12px #8bc220,-13px 13px #8bc220,-14px 14px #8bc220,-15px 15px #8bc220,-16px 16px #8bc220,-17px 17px #8bc220,-18px 18px #8bc220,-19px 19px #8bc220,-20px 20px #8bc220,-21px 21px #8bc220,-22px 22px #8bc220,-23px 23px #8bc220,-24px 24px #8bc220,-25px 25px #8bc220,-26px 26px #8bc220,-27px 27px #8bc220,-28px 28px #8bc220,-29px 29px #8bc220,-30px 30px #8bc220,-31px 31px #8bc220,-32px 32px #8bc220,-33px 33px #8bc220,-34px 34px #8bc220,-35px 35px #8bc220,-36px 36px #8bc220,-37px 37px #8bc220,-38px 38px #8bc220,-39px 39px #8bc220,-40px 40px #8bc220,-41px 41px #8bc220,-42px 42px #8bc220,-43px 43px #8bc220,-44px 44px #8bc220,-45px 45px #8bc220,-46px 46px #8bc220,-47px 47px #8bc220,-48px 48px #8bc220,-49px 49px #8bc220,-50px 50px #8bc220,-51px 51px #8bc220,-52px 52px #8bc220,-53px 53px #8bc220,-54px 54px #8bc220,-55px 55px #8bc220,-56px 56px #8bc220,-57px 57px #8bc220,-58px 58px #8bc220,-59px 59px #8bc220,-60px 60px #8bc220,-61px 61px #8bc220,-62px 62px #8bc220,-63px 63px #8bc220,-64px 64px #8bc220,-65px 65px #8bc220,-66px 66px #8bc220,-67px 67px #8bc220,-68px 68px #8bc220,-69px 69px #8bc220,-70px 70px #8bc220,-71px 71px #8bc220,-72px 72px #8bc220,-73px 73px #8bc220,-74px 74px #8bc220,-75px 75px #8bc220,-76px 76px #8bc220,-77px 77px #8bc220,-78px 78px #8bc220,-79px 79px #8bc220,-80px 80px #8bc220,-81px 81px #8bc220,-82px 82px #8bc220,-83px 83px #8bc220,-84px 84px #8bc220,-85px 85px #8bc220}.btn_b-longshadow-left.btn_b-action.active,.btn_b-longshadow-left.btn_b-action.is-active,.btn_b-longshadow-left.btn_b-action:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-highlight{text-shadow:0 0 #e59501,-1px 1px #e59501,-2px 2px #e59501,-3px 3px #e59501,-4px 4px #e59501,-5px 5px #e59501,-6px 6px #e59501,-7px 7px #e59501,-8px 8px #e59501,-9px 9px #e59501,-10px 10px #e59501,-11px 11px #e59501,-12px 12px #e59501,-13px 13px #e59501,-14px 14px #e59501,-15px 15px #e59501,-16px 16px #e59501,-17px 17px #e59501,-18px 18px #e59501,-19px 19px #e59501,-20px 20px #e59501,-21px 21px #e59501,-22px 22px #e59501,-23px 23px #e59501,-24px 24px #e59501,-25px 25px #e59501,-26px 26px #e59501,-27px 27px #e59501,-28px 28px #e59501,-29px 29px #e59501,-30px 30px #e59501,-31px 31px #e59501,-32px 32px #e59501,-33px 33px #e59501,-34px 34px #e59501,-35px 35px #e59501,-36px 36px #e59501,-37px 37px #e59501,-38px 38px #e59501,-39px 39px #e59501,-40px 40px #e59501,-41px 41px #e59501,-42px 42px #e59501,-43px 43px #e59501,-44px 44px #e59501,-45px 45px #e59501,-46px 46px #e59501,-47px 47px #e59501,-48px 48px #e59501,-49px 49px #e59501,-50px 50px #e59501,-51px 51px #e59501,-52px 52px #e59501,-53px 53px #e59501,-54px 54px #e59501,-55px 55px #e59501,-56px 56px #e59501,-57px 57px #e59501,-58px 58px #e59501,-59px 59px #e59501,-60px 60px #e59501,-61px 61px #e59501,-62px 62px #e59501,-63px 63px #e59501,-64px 64px #e59501,-65px 65px #e59501,-66px 66px #e59501,-67px 67px #e59501,-68px 68px #e59501,-69px 69px #e59501,-70px 70px #e59501,-71px 71px #e59501,-72px 72px #e59501,-73px 73px #e59501,-74px 74px #e59501,-75px 75px #e59501,-76px 76px #e59501,-77px 77px #e59501,-78px 78px #e59501,-79px 79px #e59501,-80px 80px #e59501,-81px 81px #e59501,-82px 82px #e59501,-83px 83px #e59501,-84px 84px #e59501,-85px 85px #e59501}.btn_b-longshadow-left.btn_b-highlight.active,.btn_b-longshadow-left.btn_b-highlight.is-active,.btn_b-longshadow-left.btn_b-highlight:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-caution{text-shadow:0 0 #ff1022,-1px 1px #ff1022,-2px 2px #ff1022,-3px 3px #ff1022,-4px 4px #ff1022,-5px 5px #ff1022,-6px 6px #ff1022,-7px 7px #ff1022,-8px 8px #ff1022,-9px 9px #ff1022,-10px 10px #ff1022,-11px 11px #ff1022,-12px 12px #ff1022,-13px 13px #ff1022,-14px 14px #ff1022,-15px 15px #ff1022,-16px 16px #ff1022,-17px 17px #ff1022,-18px 18px #ff1022,-19px 19px #ff1022,-20px 20px #ff1022,-21px 21px #ff1022,-22px 22px #ff1022,-23px 23px #ff1022,-24px 24px #ff1022,-25px 25px #ff1022,-26px 26px #ff1022,-27px 27px #ff1022,-28px 28px #ff1022,-29px 29px #ff1022,-30px 30px #ff1022,-31px 31px #ff1022,-32px 32px #ff1022,-33px 33px #ff1022,-34px 34px #ff1022,-35px 35px #ff1022,-36px 36px #ff1022,-37px 37px #ff1022,-38px 38px #ff1022,-39px 39px #ff1022,-40px 40px #ff1022,-41px 41px #ff1022,-42px 42px #ff1022,-43px 43px #ff1022,-44px 44px #ff1022,-45px 45px #ff1022,-46px 46px #ff1022,-47px 47px #ff1022,-48px 48px #ff1022,-49px 49px #ff1022,-50px 50px #ff1022,-51px 51px #ff1022,-52px 52px #ff1022,-53px 53px #ff1022,-54px 54px #ff1022,-55px 55px #ff1022,-56px 56px #ff1022,-57px 57px #ff1022,-58px 58px #ff1022,-59px 59px #ff1022,-60px 60px #ff1022,-61px 61px #ff1022,-62px 62px #ff1022,-63px 63px #ff1022,-64px 64px #ff1022,-65px 65px #ff1022,-66px 66px #ff1022,-67px 67px #ff1022,-68px 68px #ff1022,-69px 69px #ff1022,-70px 70px #ff1022,-71px 71px #ff1022,-72px 72px #ff1022,-73px 73px #ff1022,-74px 74px #ff1022,-75px 75px #ff1022,-76px 76px #ff1022,-77px 77px #ff1022,-78px 78px #ff1022,-79px 79px #ff1022,-80px 80px #ff1022,-81px 81px #ff1022,-82px 82px #ff1022,-83px 83px #ff1022,-84px 84px #ff1022,-85px 85px #ff1022}.btn_b-longshadow-left.btn_b-caution.active,.btn_b-longshadow-left.btn_b-caution.is-active,.btn_b-longshadow-left.btn_b-caution:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-longshadow-left.btn_b-royal{text-shadow:0 0 #5246e2,-1px 1px #5246e2,-2px 2px #5246e2,-3px 3px #5246e2,-4px 4px #5246e2,-5px 5px #5246e2,-6px 6px #5246e2,-7px 7px #5246e2,-8px 8px #5246e2,-9px 9px #5246e2,-10px 10px #5246e2,-11px 11px #5246e2,-12px 12px #5246e2,-13px 13px #5246e2,-14px 14px #5246e2,-15px 15px #5246e2,-16px 16px #5246e2,-17px 17px #5246e2,-18px 18px #5246e2,-19px 19px #5246e2,-20px 20px #5246e2,-21px 21px #5246e2,-22px 22px #5246e2,-23px 23px #5246e2,-24px 24px #5246e2,-25px 25px #5246e2,-26px 26px #5246e2,-27px 27px #5246e2,-28px 28px #5246e2,-29px 29px #5246e2,-30px 30px #5246e2,-31px 31px #5246e2,-32px 32px #5246e2,-33px 33px #5246e2,-34px 34px #5246e2,-35px 35px #5246e2,-36px 36px #5246e2,-37px 37px #5246e2,-38px 38px #5246e2,-39px 39px #5246e2,-40px 40px #5246e2,-41px 41px #5246e2,-42px 42px #5246e2,-43px 43px #5246e2,-44px 44px #5246e2,-45px 45px #5246e2,-46px 46px #5246e2,-47px 47px #5246e2,-48px 48px #5246e2,-49px 49px #5246e2,-50px 50px #5246e2,-51px 51px #5246e2,-52px 52px #5246e2,-53px 53px #5246e2,-54px 54px #5246e2,-55px 55px #5246e2,-56px 56px #5246e2,-57px 57px #5246e2,-58px 58px #5246e2,-59px 59px #5246e2,-60px 60px #5246e2,-61px 61px #5246e2,-62px 62px #5246e2,-63px 63px #5246e2,-64px 64px #5246e2,-65px 65px #5246e2,-66px 66px #5246e2,-67px 67px #5246e2,-68px 68px #5246e2,-69px 69px #5246e2,-70px 70px #5246e2,-71px 71px #5246e2,-72px 72px #5246e2,-73px 73px #5246e2,-74px 74px #5246e2,-75px 75px #5246e2,-76px 76px #5246e2,-77px 77px #5246e2,-78px 78px #5246e2,-79px 79px #5246e2,-80px 80px #5246e2,-81px 81px #5246e2,-82px 82px #5246e2,-83px 83px #5246e2,-84px 84px #5246e2,-85px 85px #5246e2}.btn_b-longshadow-left.btn_b-royal.active,.btn_b-longshadow-left.btn_b-royal.is-active,.btn_b-longshadow-left.btn_b-royal:active{text-shadow:0 1px 0 rgba(255,255,255,.4)}.btn_b-giant{font-size:28px;height:70px;line-height:70px;padding:0 70px}.btn_b-jumbo{font-size:24px;height:60px;line-height:60px;padding:0 60px}.btn_b-large{font-size:20px;height:50px;line-height:50px;padding:0 50px}.btn_b-normal{font-size:16px;height:40px;line-height:40px;padding:0 40px}.btn_b-small{font-size:12px;height:30px;line-height:30px;padding:0 30px}.btn_b-tiny{font-size:9.6px;height:24px;line-height:24px;padding:0 24px} \ No newline at end of file diff --git a/assets/css_firepress/btn_b_license.css b/assets/css_firepress/btn_b_license.css new file mode 100755 index 0000000..d2bf92f --- /dev/null +++ b/assets/css_firepress/btn_b_license.css @@ -0,0 +1,111 @@ +license +* +* Buttons +* Copyright 2012-2014 Alex Wolfe and Rob Levin +* https://github.com/alexwolfe/Buttons +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* Compass (optional) +* +* We recommend the use of autoprefixer instead of Compass +* when using buttons. However, buttons does support Compass. +* simply change $ubtn-use-compass to true and uncomment the +* @import 'compass' code below to use Compass. +*/ + +/* +* Required Files +* +* These files include the variables and options +* and base css styles that are required to generate buttons. +*/ + +/* +* $ubtn prefix (reserved) +* +* This prefix stands for Unicorn Button - ubtn +* We provide a prefix to the Sass Variables to +* prevent namespace collisions that could occur if +* you import buttons as part of your Sass build process. +* We kindly ask you not to use the prefix $ubtn in your project +* in order to avoid possilbe name conflicts. Thanks! +*/ + +/* +* Button Namespace (ex .button or .btn) +* +*/ + +/* +* Button Defaults +* +* Some default settings that are used throughout the button library. +* Changes to these settings will be picked up by all of the other modules. +* The colors used here are the default colors for the base button (gray). +* The font size and height are used to set the base size for the buttons. +* The size values will be used to calculate the larger and smaller button sizes. +*/ + +/* +* Button Colors +* +* $ubtn-colors is used to generate the different button colors. +* Edit or add colors to the list below and recompile. +* Each block contains the (name, background, color) +* The class is generated using the name: (ex .button-primary) +*/ + +/* +* Button Shapes +* +* $ubtn-shapes is used to generate the different button shapes. +* Edit or add shapes to the list below and recompile. +* Each block contains the (name, border-radius). +* The class is generated using the name: (ex .button-square). +*/ + +/* +* Button Sizes +* +* $ubtn-sizes is used to generate the different button sizes. +* Edit or add colors to the list below and recompile. +* Each block contains the (name, size multiplier). +* The class is generated using the name: (ex .button-giant). +*/ + +/* +* Color Mixin +* +* Iterates through the list of colors and creates +* +*/ + +/* +* No Animation +* +* Sets animation property to none +*/ + +/* +* Clearfix +* +* Clears floats inside the container +*/ + +/* +* Base Button Style +* +* The default values for the .button class +*/ diff --git a/assets/css_firepress/btn_c.css b/assets/css_firepress/btn_c.css new file mode 100755 index 0000000..07d13ac --- /dev/null +++ b/assets/css_firepress/btn_c.css @@ -0,0 +1,1442 @@ +/* btn_c + btn_cs from graphic fuel +/* ---------------------------------------------------------- */ + +/* Buttons */ + +.btn_c { + display: inline-block; + border-radius: 4px; + padding: 10px 24px 11px; + color: #fff; + border: none; + outline: none; + text-decoration: none; + background: #202020; + font-size: 0.80em; + font-weight: 600; + text-align: center; + text-decoration: none !important; + vertical-align: top; + cursor: pointer; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + letter-spacing: normal !important; + position: relative; + white-space: nowrap; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1); + -webkit-appearance: none; + margin-bottom: 10px; + transition: 0.3s; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + margin-left: 2px; + margin-right: 7px; +} + +.btn_c.wide { + width: 100%; +} + +.btn_c .material-icons { + vertical-align: bottom; + margin-top: -5px; + margin-bottom: -2px; + margin-right: 8px; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; +} + +.btn_c .material-icons.small { + font-size: 18px; + margin: 0px 6px 0px 0px; +} + +.btn_c .material-icons.right { + margin-left: 11px; + margin-right: 0px; +} + +.btn_c svg { + width: 22px; + height: 22px; + margin-top: -3px; + top: 2px; + vertical-align: bottom; + margin-right: 14px; + pointer-events: none !important; + position: relative; +} + +.btn_c svg * { + pointer-events: none !important; +} + +.btn_c svg.right { + margin-right: 0; + margin-left: 14px; +} + +.btn_c.actionbtn_c { + display: inline-block; + height: 42px; + width: 42px; + padding: 12px; + border-radius: 25px; + z-index: 999; + background: rgba(0, 0, 0, 0.3); + line-height: 1; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); + cursor: pointer; + -ms-touch-action: manipulation; + touch-action: manipulation; + vertical-align: top; +} + +.btn_c.actionbtn_c svg { + width: 18px; + height: 18px; +} + +.btn_c.actionbtn_c .material-icons { + margin: 0; + position: relative; + left: -3px; + top: -3px; + font-size: 24px; +} + +.btn_c.actionbtn_c.big { + width: 50px; + height: 50px; + padding: 16px; +} + +.btn_c.actionbtn_c.big .material-icons { + font-size: 24px; +} + +.btn_c.actionbtn_c.big svg { + width: 22px; + height: 22px; + left: -2px; + top: 0px; +} + +.btn_c.actionbtn_c.stroke { + box-shadow: none; + padding: 10px; +} + +.btn_c.actionbtn_c:hover:not(:active) { + -webkit-transform: translateY(0) !important; + transform: translateY(0) !important; +} + +.btn_c.actionbtn_c.rounded { + border-radius: 6px; +} + +.btn_c.actionbtn_c svg, +.slide.whiteSlide .btn_c.actionbtn_c svg { + fill: #fff; +} + +.btn_c.actionbtn_c.sound [class*="sound-"] { + position: absolute; + opacity: 0; + transition: 0.5s; + left: 13px; + top: 16px; +} + +.btn_c.actionbtn_c.sound.stroke [class*="sound-"] { + left: 11px; + top: 14px; +} + +.btn_c.actionbtn_c.sound.playing .sound-on, +.btn_c.actionbtn_c.sound:not(.playing) .sound-off { + opacity: 1; +} + +.btn_c.actionbtn_c.transparent { + background-color: transparent; +} + +.btn_c:hover { + box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.15), 0 0px 5px 0px rgba(0, 0, 0, 0.1); + opacity: 1; + -webkit-transform: translateY(-2px) !important; + transform: translateY(-2px) !important; + transition: 0.35s !important; +} + +.btn_c:hover:after { + opacity: .5; +} + +.btn_c:active { + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 0px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 4px -1px rgba(0, 0, 0, 0.1); + -webkit-transform: translateY(0px) !important; + transform: translateY(0px) !important; + transition: 0.35s !important; +} + +.btn_c:active:after { + opacity: 1; +} + +.btn_c.uppercase { + text-transform: uppercase; + font-size: 15px; + font-weight: 700; + padding-top: 17px; + padding-bottom: 17px; +} + +.btn_c.lowercase { + text-transform: lowercase; + letter-spacing: 0em; + font-weight: 300; +} + +.btn_c.round { + border-radius: 22px; + padding-left: 28px; + padding-right: 28px; +} + +.btn_c.rounded { + border-radius: 6px; +} + +.btn_c.rectangular { + border-radius: 1px; +} + +.btn_c.square { + border-radius: 0px; +} + +.btn_c.stroke { + color: #202020; + border: 2px solid; + background-color: transparent !important; + padding: 14px 22px 15px; +} + +.slide.whiteSlide .btn_c.stroke { + color: #202020; +} + +.btn_c.stroke.round { + padding-left: 26px; + padding-right: 26px; +} + +.btn_c.stroke.uppercase { + padding-top: 15px; + padding-bottom: 15px; +} + +.btn_c.stroke.uppercase svg { + margin-bottom: -2px; +} + +.btn_c.stroke.uppercase.small { + padding: 11px 15px; +} + +.btn_c.stroke.small { + border: 1px solid; + padding-top: 9px; + padding-bottom: 9px; +} + +@media (min-width: 768px) { + .btn_c.stroke.big { + padding: 19px 30px; + } + .btn_c.stroke.big.uppercase { + padding-top: 21px; + padding-bottom: 21px; + } +} + +.btn_c.stroke:not(.flat):hover { + box-shadow: inset 0 -100px 0 rgba(41, 41, 41, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1); +} + +.btn_c.flat:not(:hover) { + box-shadow: none; +} + +.btn_c:not(.stroke) svg { + fill: #fff; +} + +.btn_c.small { + font-size: 0.75em; + font-weight: 500; + padding: 8px 20px 9px; +} + +.btn_c.small .material-icons { + vertical-align: bottom; + position: relative; + font-size: 20px; + margin-right: 8px; + bottom: 1px; +} + +.btn_c.small .material-icons.right { + margin-left: 8px; + margin-right: 0px; +} + +.btn_c.small svg { + width: 18px; + height: 18px; + margin-right: 10px; + top: 0px; +} + +.btn_c.small svg.right { + margin-right: 0; + margin-left: 10px; +} + +.btn_c.small.round { + padding-left: 18px; + padding-right: 18px; +} + +.btn_c.small.rounded { + border-radius: 6px; +} + +.btn_c.small.uppercase { + font-size: 12px; + padding: 12px 16px; + letter-spacing: 0.125em; +} + +.btn_c.small.uppercase.round { + padding-left: 19px; + padding-right: 19px; +} + +@media (min-width: 768px) { + .btn_c.big { + font-size: 20px; + padding: 21px 32px 21px; + } + .btn_c.big.round { + padding-left: 36px; + padding-right: 36px; + } + .btn_c.big.rounded { + border-radius: 7px; + } + .btn_c.big.uppercase { + font-size: 17px; + padding: 23px 32px; + } + .btn_c.big.uppercase.round { + padding-left: 36px; + padding-right: 36px; + } + .btn_c.big .material-icons { + vertical-align: bottom; + margin-right: 16px; + font-size: 30px; + } + .btn_c.big .material-icons.right { + margin-left: 16px; + margin-right: 0px; + } + .btn_c.big svg { + width: 27px; + height: 27px; + margin-right: 16px; + top: 1px; + } + .btn_c.big svg.right { + margin-right: 0; + margin-left: 16px; + } +} + +.btn_c.empty { + padding: 0 !important; + background-color: transparent !important; + font-size: 0 !important; + margin: 0; + box-shadow: none; +} + +.btn_c.hollow { + padding: 0 !important; + background-color: transparent !important; + font-size: 0 !important; + box-shadow: none !important; +} + +.btn_c.hollow svg { + margin: 0; +} + +.btn_c.shade { + position: relative; +} + +.btn_c.shade:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #292929; + opacity: 0; + transition: 0.25s; +} + +.btn_c.shade:hover:after { + opacity: 0.15; +} + +.btn_c.shade:active:after { + opacity: 0.2; +} + +.btn_c.play { + width: 90px; + height: 90px; + border-radius: 50%; + padding: 27px; + margin-left: 0px; + margin-right: 0px; +} + +.btn_c.play svg { + fill: #fff; + width: 35px; + height: 36px; + margin: 0; +} + +.btn_c.play.small { + width: 60px; + height: 60px; + border-radius: 50%; + padding: 20px 19px; +} + +.btn_c.play.small svg { + fill: #fff; + width: 23px; + height: 23px; +} + +.btn_c.play:hover { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +.btn_c.gradient { + position: relative; +} + +.btn_c.gradient:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, #fff 0%, #000 100%); + z-index: -1; + opacity: 0.1; +} + +.slide.whiteSlide .btn_c.white:hover { + box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.1); +} + +.slide.whiteSlide .btn_c.white:hover:after { + opacity: .3; +} + +.roundbtn_c { + border-radius: 50px; + height: 50px; + width: 50px; + padding: 14px; + margin: 5px; +} + +.roundbtn_c svg { + bottom: 2px; +} + +@media (max-width: 319px) { + .btn_c.uppercase, + .uppercase { + letter-spacing: 0.07em; + } +} + +.btn_c.uppercase { + letter-spacing: 0.125em !important; + text-indent: -0.1em !important; + font-weight: 700 !important; +} + +/* Colors by Google Meterial Design (C) */ + +.red { + background: #F44336 !important; + color: #fff !important; +} + +.red svg { + fill: #fff !important; +} + +.text-red { + color: #F44336 !important; +} + +.text-red.button svg { + fill: #F44336 !important; +} + +.stroke.button.red { + color: #F44336 !important; + border-color: #F44336 !important; +} + +.stroke.button.red svg { + fill: #F44336 !important; +} + +.pink { + background: #E91E63 !important; + color: #fff !important; +} + +.pink svg { + fill: #fff !important; +} + +.text-pink { + color: #E91E63 !important; +} + +.text-pink.button svg { + fill: #E91E63 !important; +} + +.stroke.button.pink { + color: #E91E63 !important; + border-color: #E91E63 !important; +} + +.stroke.button.pink svg { + fill: #E91E63 !important; +} + +.purple { + background: #9C27B0 !important; + color: #fff !important; +} + +.purple svg { + fill: #fff !important; +} + +.text-purple { + color: #9C27B0 !important; +} + +.text-purple.button svg { + fill: #9C27B0 !important; +} + +.stroke.button.purple { + color: #9C27B0 !important; + border-color: #9C27B0 !important; +} + +.stroke.button.purple svg { + fill: #9C27B0 !important; +} + +.deepPurple { + background: #673AB7 !important; + color: #fff !important; +} + +.deepPurple svg { + fill: #fff !important; +} + +.text-deepPurple { + color: #673AB7 !important; +} + +.text-deepPurple.button svg { + fill: #673AB7 !important; +} + +.stroke.button.deepPurple { + color: #673AB7 !important; + border-color: #673AB7 !important; +} + +.stroke.button.deepPurple svg { + fill: #673AB7 !important; +} + +.indigo { + background: #3F51B5 !important; + color: #fff !important; +} + +.indigo svg { + fill: #fff !important; +} + +.text-indigo { + color: #3F51B5 !important; +} + +.text-indigo.button svg { + fill: #3F51B5 !important; +} + +.stroke.button.indigo { + color: #3F51B5 !important; + border-color: #3F51B5 !important; +} + +.stroke.button.indigo svg { + fill: #3F51B5 !important; +} + +.blue { + background: #2196F3 !important; + color: #fff !important; +} + +.blue svg { + fill: #fff !important; +} + +.text-blue { + color: #2196F3 !important; +} + +.text-blue.button svg { + fill: #2196F3 !important; +} + +.stroke.button.blue { + color: #2196F3 !important; + border-color: #2196F3 !important; +} + +.stroke.button.blue svg { + fill: #2196F3 !important; +} + +.cyan { + background: #00BCD4 !important; + color: #fff !important; +} + +.cyan svg { + fill: #fff !important; +} + +.text-cyan { + color: #00BCD4 !important; +} + +.text-cyan.button svg { + fill: #00BCD4 !important; +} + +.stroke.button.cyan { + color: #00BCD4 !important; + border-color: #00BCD4 !important; +} + +.stroke.button.cyan svg { + fill: #00BCD4 !important; +} + +.teal { + background: #009688 !important; + color: #fff !important; +} + +.teal svg { + fill: #fff !important; +} + +.text-teal { + color: #009688 !important; +} + +.text-teal.button svg { + fill: #009688 !important; +} + +.stroke.button.teal { + color: #009688 !important; + border-color: #009688 !important; +} + +.stroke.button.teal svg { + fill: #009688 !important; +} + +.green { + background: #4CAF50 !important; + color: #fff !important; +} + +.green svg { + fill: #fff !important; +} + +.text-green { + color: #4CAF50 !important; +} + +.text-green.button svg { + fill: #4CAF50 !important; +} + +.stroke.button.green { + color: #4CAF50 !important; + border-color: #4CAF50 !important; +} + +.stroke.button.green svg { + fill: #4CAF50 !important; +} + +.lightGreen { + background: #8BC34A !important; + color: #fff !important; +} + +.lightGreen svg { + fill: #fff !important; +} + +.text-lightGreen { + color: #8BC34A !important; +} + +.text-lightGreen.button svg { + fill: #8BC34A !important; +} + +.stroke.button.lightGreen { + color: #8BC34A !important; + border-color: #8BC34A !important; +} + +.stroke.button.lightGreen svg { + fill: #8BC34A !important; +} + +.lime { + background: #CDDC39 !important; + color: #fff !important; +} + +.lime svg { + fill: #fff !important; +} + +.text-lime { + color: #CDDC39 !important; +} + +.text-lime.button svg { + fill: #CDDC39 !important; +} + +.stroke.button.lime { + color: #CDDC39 !important; + border-color: #CDDC39 !important; +} + +.stroke.button.lime svg { + fill: #CDDC39 !important; +} + +.yellow { + background: #FFEB3B !important; + color: #202020 !important; +} + +.yellow svg { + fill: #202020 !important; +} + +.text-yellow { + color: #FFEB3B !important; +} + +.text-yellow.button svg { + fill: #FFEB3B !important; +} + +.stroke.button.yellow { + color: #FFEB3B !important; + border-color: #FFEB3B !important; +} + +.stroke.button.yellow svg { + fill: #FFEB3B !important; +} + +.amber { + background: #FFC107 !important; + color: #fff !important; +} + +.amber svg { + fill: #fff !important; +} + +.text-amber { + color: #FFC107 !important; +} + +.text-amber.button svg { + fill: #FFC107 !important; +} + +.stroke.button.amber { + color: #FFC107 !important; + border-color: #FFC107 !important; +} + +.stroke.button.amber svg { + fill: #FFC107 !important; +} + +.orange { + background: #FF9800 !important; + color: #fff !important; +} + +.orange svg { + fill: #fff !important; +} + +.text-orange { + color: #FF9800 !important; +} + +.text-orange.button svg { + fill: #FF9800 !important; +} + +.stroke.button.orange { + color: #FF9800 !important; + border-color: #FF9800 !important; +} + +.stroke.button.orange svg { + fill: #FF9800 !important; +} + +.deepOrange { + background: #FF5722 !important; + color: #fff !important; +} + +.deepOrange svg { + fill: #fff !important; +} + +.text-deepOrange { + color: #FF5722 !important; +} + +.text-deepOrange.button svg { + fill: #FF5722 !important; +} + +.stroke.button.deepOrange { + color: #FF5722 !important; + border-color: #FF5722 !important; +} + +.stroke.button.deepOrange svg { + fill: #FF5722 !important; +} + +.brown { + background: #795548 !important; + color: #fff !important; +} + +.brown svg { + fill: #fff !important; +} + +.text-brown { + color: #795548 !important; +} + +.text-brown.button svg { + fill: #795548 !important; +} + +.stroke.button.brown { + color: #795548 !important; + border-color: #795548 !important; +} + +.stroke.button.brown svg { + fill: #795548 !important; +} + +.gray { + background: #9D9D9D !important; + color: #fff !important; +} + +.gray svg { + fill: #fff !important; +} + +.text-gray { + color: #9D9D9D !important; +} + +.text-gray.button svg { + fill: #9D9D9D !important; +} + +.stroke.button.gray { + color: #9D9D9D !important; + border-color: #9D9D9D !important; +} + +.stroke.button.gray svg { + fill: #9D9D9D !important; +} + +.blueGray { + background: #607D8B !important; + color: #fff !important; +} + +.blueGray svg { + fill: #fff !important; +} + +.text-blueGray { + color: #607D8B !important; +} + +.text-blueGray.button svg { + fill: #607D8B !important; +} + +.stroke.button.blueGray { + color: #607D8B !important; + border-color: #607D8B !important; +} + +.stroke.button.blueGray svg { + fill: #607D8B !important; +} + +/* Social Colors */ + +.social-facebook { + background: #3b5998 !important; + color: #fff !important; +} + +.social-facebook svg { + fill: #fff !important; +} + +.text-social-facebook { + color: #3b5998 !important; +} + +.text-social-facebook.button svg { + fill: #3b5998 !important; +} + +.stroke.button.social-facebook { + color: #3b5998 !important; + border-color: #3b5998 !important; +} + +.stroke.button.social-facebook svg { + fill: #3b5998 !important; +} + +.social-twitter { + background: #55acee !important; + color: #fff !important; +} + +.social-twitter svg { + fill: #fff !important; +} + +.text-social-twitter { + color: #55acee !important; +} + +.text-social-twitter.button svg { + fill: #55acee !important; +} + +.stroke.button.social-twitter { + color: #55acee !important; + border-color: #55acee !important; +} + +.stroke.button.social-twitter svg { + fill: #55acee !important; +} + +.social-googlePlus { + background: #DD4330 !important; + color: #fff !important; +} + +.social-googlePlus svg { + fill: #fff !important; +} + +.text-social-googlePlus { + color: #DD4330 !important; +} + +.text-social-googlePlus.button svg { + fill: #DD4330 !important; +} + +.stroke.button.social-googlePlus { + color: #DD4330 !important; + border-color: #DD4330 !important; +} + +.stroke.button.social-googlePlus svg { + fill: #DD4330 !important; +} + +.social-behance { + background: #105DFB !important; + color: #fff !important; +} + +.social-behance svg { + fill: #fff !important; +} + +.text-social-behance { + color: #105DFB !important; +} + +.text-social-behance.button svg { + fill: #105DFB !important; +} + +.stroke.button.social-behance { + color: #105DFB !important; + border-color: #105DFB !important; +} + +.stroke.button.social-behance svg { + fill: #105DFB !important; +} + +.social-medium { + background: #12100E !important; + color: #fff !important; +} + +.social-medium svg { + fill: #fff !important; +} + +.text-social-medium { + color: #12100E !important; +} + +.text-social-medium.button svg { + fill: #12100E !important; +} + +.stroke.button.social-medium { + color: #12100E !important; + border-color: #12100E !important; +} + +.stroke.button.social-medium svg { + fill: #12100E !important; +} + +.social-stumbleupon { + background: #eb4924 !important; + color: #fff !important; +} + +.social-stumbleupon svg { + fill: #fff !important; +} + +.text-social-stumbleupon { + color: #eb4924 !important; +} + +.text-social-stumbleupon.button svg { + fill: #eb4924 !important; +} + +.stroke.button.social-stumbleupon { + color: #eb4924 !important; + border-color: #eb4924 !important; +} + +.stroke.button.social-stumbleupon svg { + fill: #eb4924 !important; +} + +.social-linkedin { + background: #0077b5 !important; + color: #fff !important; +} + +.social-linkedin svg { + fill: #fff !important; +} + +.text-social-linkedin { + color: #0077b5 !important; +} + +.text-social-linkedin.button svg { + fill: #0077b5 !important; +} + +.stroke.button.social-linkedin { + color: #0077b5 !important; + border-color: #0077b5 !important; +} + +.stroke.button.social-linkedin svg { + fill: #0077b5 !important; +} + +.social-pinterest { + background: #cc2127 !important; + color: #fff !important; +} + +.social-pinterest svg { + fill: #fff !important; +} + +.text-social-pinterest { + color: #cc2127 !important; +} + +.text-social-pinterest.button svg { + fill: #cc2127 !important; +} + +.stroke.button.social-pinterest { + color: #cc2127 !important; + border-color: #cc2127 !important; +} + +.stroke.button.social-pinterest svg { + fill: #cc2127 !important; +} + +.social-instagram { + background: #e4405f !important; + color: #fff !important; +} + +.social-instagram svg { + fill: #fff !important; +} + +.text-social-instagram { + color: #e4405f !important; +} + +.text-social-instagram.button svg { + fill: #e4405f !important; +} + +.stroke.button.social-instagram { + color: #e4405f !important; + border-color: #e4405f !important; +} + +.stroke.button.social-instagram svg { + fill: #e4405f !important; +} + +.social-tumblr { + background: #34455D !important; + color: #fff !important; +} + +.social-tumblr svg { + fill: #fff !important; +} + +.text-social-tumblr { + color: #34455D !important; +} + +.text-social-tumblr.button svg { + fill: #34455D !important; +} + +.stroke.button.social-tumblr { + color: #34455D !important; + border-color: #34455D !important; +} + +.stroke.button.social-tumblr svg { + fill: #34455D !important; +} + +.social-dribbble { + background: #ea4c89 !important; + color: #fff !important; +} + +.social-dribbble svg { + fill: #fff !important; +} + +.text-social-dribbble { + color: #ea4c89 !important; +} + +.text-social-dribbble.button svg { + fill: #ea4c89 !important; +} + +.stroke.button.social-dribbble { + color: #ea4c89 !important; + border-color: #ea4c89 !important; +} + +.stroke.button.social-dribbble svg { + fill: #ea4c89 !important; +} + +.social-youtube { + background: #cd201f !important; + color: #fff !important; +} + +.social-youtube svg { + fill: #fff !important; +} + +.text-social-youtube { + color: #cd201f !important; +} + +.text-social-youtube.button svg { + fill: #cd201f !important; +} + +.stroke.button.social-youtube { + color: #cd201f !important; + border-color: #cd201f !important; +} + +.stroke.button.social-youtube svg { + fill: #cd201f !important; +} + +.social-delicious { + background: #3399ff !important; + color: #fff !important; +} + +.social-delicious svg { + fill: #fff !important; +} + +.text-social-delicious { + color: #3399ff !important; +} + +.text-social-delicious.button svg { + fill: #3399ff !important; +} + +.stroke.button.social-delicious { + color: #3399ff !important; + border-color: #3399ff !important; +} + +.stroke.button.social-delicious svg { + fill: #3399ff !important; +} + +.social-digg { + background: #000000 !important; + color: #fff !important; +} + +.social-digg svg { + fill: #fff !important; +} + +.text-social-digg { + color: #000000 !important; +} + +.text-social-digg.button svg { + fill: #000000 !important; +} + +.stroke.button.social-digg { + color: #000000 !important; + border-color: #000000 !important; +} + +.stroke.button.social-digg svg { + fill: #000000 !important; +} + +.social-vimeo { + background: #fff !important; + color: #1ab7ea !important; +} + +.social-vimeo svg { + fill: #1ab7ea !important; +} + +.text-social-vimeo { + color: #fff !important; +} + +.text-social-vimeo.button svg { + fill: #fff !important; +} + +.stroke.button.social-vimeo { + color: #fff !important; + border-color: #fff !important; +} + +.stroke.button.social-vimeo svg { + fill: #fff !important; +} + +.social-whatsapp { + background: #25D366 !important; + color: #fff !important; +} + +.social-whatsapp svg { + fill: #fff !important; +} + +.text-social-whatsapp { + color: #25D366 !important; +} + +.text-social-whatsapp.button svg { + fill: #25D366 !important; +} + +.stroke.button.social-whatsapp { + color: #25D366 !important; + border-color: #25D366 !important; +} + +.stroke.button.social-whatsapp svg { + fill: #25D366 !important; +} + +.social-xing { + background: #026466 !important; + color: #fff !important; +} + +.social-xing svg { + fill: #fff !important; +} + +.text-social-xing { + color: #026466 !important; +} + +.text-social-xing.button svg { + fill: #026466 !important; +} + +.stroke.button.social-xing { + color: #026466 !important; + border-color: #026466 !important; +} + +.stroke.button.social-xing svg { + fill: #026466 !important; +} + +.social-youtube { + background: #FC0D1C !important; + color: #fff !important; +} + +.social-youtube svg { + fill: #fff !important; +} + +.text-social-youtube { + color: #FC0D1C !important; +} + +.text-social-youtube.button svg { + fill: #FC0D1C !important; +} + +.stroke.button.social-youtube { + color: #FC0D1C !important; + border-color: #FC0D1C !important; +} + +.stroke.button.social-youtube svg { + fill: #FC0D1C !important; +} diff --git a/assets/css_firepress/btn_c.min.css b/assets/css_firepress/btn_c.min.css new file mode 100644 index 0000000..3b472f8 --- /dev/null +++ b/assets/css_firepress/btn_c.min.css @@ -0,0 +1 @@ +.btn_c,.btn_c.actionbtn_c{display:inline-block;cursor:pointer}.btn_c.actionbtn_c svg,.btn_c.play svg,.btn_c:not(.stroke) svg,.slide.whiteSlide .btn_c.actionbtn_c svg{fill:#fff}.btn_c{border-radius:4px;padding:10px 24px 11px;color:#fff;border:none;outline:0;background:#202020;font-size:.8em;font-weight:600;text-align:center;text-decoration:none!important;vertical-align:top;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;letter-spacing:normal!important;position:relative;white-space:nowrap;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);box-shadow:0 1px 4px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.1);-webkit-appearance:none;margin-bottom:10px;transition:.3s;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;margin-left:2px;margin-right:7px}.btn_c.stroke,.slide.whiteSlide .btn_c.stroke{color:#202020}.btn_c.wide{width:100%}.btn_c .material-icons{vertical-align:bottom;margin-top:-5px;margin-bottom:-2px;margin-right:8px;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.btn_c .material-icons.small{font-size:18px;margin:0 6px 0 0}.btn_c .material-icons.right{margin-left:11px;margin-right:0}.btn_c svg{width:22px;height:22px;margin-top:-3px;top:2px;vertical-align:bottom;margin-right:14px;pointer-events:none!important;position:relative}.btn_c svg *{pointer-events:none!important}.btn_c svg.right{margin-right:0;margin-left:14px}.btn_c.actionbtn_c{height:42px;width:42px;padding:12px;border-radius:25px;z-index:999;background:rgba(0,0,0,.3);line-height:1;box-shadow:0 0 0 1px rgba(255,255,255,.05);-ms-touch-action:manipulation;touch-action:manipulation;vertical-align:top}.btn_c.actionbtn_c svg{width:18px;height:18px}.btn_c.actionbtn_c .material-icons{margin:0;position:relative;left:-3px;top:-3px;font-size:24px}.btn_c.actionbtn_c.big{width:50px;height:50px;padding:16px}.btn_c.actionbtn_c.big .material-icons{font-size:24px}.btn_c.actionbtn_c.big svg{width:22px;height:22px;left:-2px;top:0}.btn_c.actionbtn_c.stroke{box-shadow:none;padding:10px}.btn_c.actionbtn_c:hover:not(:active){-webkit-transform:translateY(0)!important;transform:translateY(0)!important}.btn_c.actionbtn_c.rounded{border-radius:6px}.btn_c.actionbtn_c.sound [class*=sound-]{position:absolute;opacity:0;transition:.5s;left:13px;top:16px}.btn_c.actionbtn_c.sound.stroke [class*=sound-]{left:11px;top:14px}.btn_c.actionbtn_c.sound.playing .sound-on,.btn_c.actionbtn_c.sound:not(.playing) .sound-off{opacity:1}.btn_c.actionbtn_c.transparent{background-color:transparent}.btn_c:hover{box-shadow:0 6px 7px 0 rgba(0,0,0,.15),0 0 5px 0 rgba(0,0,0,.1);opacity:1;-webkit-transform:translateY(-2px)!important;transform:translateY(-2px)!important;transition:.35s!important}.btn_c:hover:after{opacity:.5}.btn_c:active{box-shadow:0 3px 6px 0 rgba(0,0,0,.1),0 0 10px 0 rgba(0,0,0,.1),0 1px 4px -1px rgba(0,0,0,.1);-webkit-transform:translateY(0)!important;transform:translateY(0)!important;transition:.35s!important}.btn_c:active:after{opacity:1}.btn_c.uppercase{text-transform:uppercase;font-size:15px;padding-top:17px;padding-bottom:17px}.btn_c.lowercase{text-transform:lowercase;letter-spacing:0;font-weight:300}.btn_c.round{border-radius:22px;padding-left:28px;padding-right:28px}.btn_c.rounded{border-radius:6px}.btn_c.rectangular{border-radius:1px}.btn_c.square{border-radius:0}.btn_c.stroke{border:2px solid;background-color:transparent!important;padding:14px 22px 15px}.btn_c.stroke.round{padding-left:26px;padding-right:26px}.btn_c.stroke.uppercase{padding-top:15px;padding-bottom:15px}.btn_c.stroke.uppercase svg{margin-bottom:-2px}.btn_c.stroke.uppercase.small{padding:11px 15px}.btn_c.stroke.small{border:1px solid;padding-top:9px;padding-bottom:9px}@media (min-width:768px){.btn_c.stroke.big{padding:19px 30px}.btn_c.stroke.big.uppercase{padding-top:21px;padding-bottom:21px}}.btn_c.stroke:not(.flat):hover{box-shadow:inset 0 -100px 0 rgba(41,41,41,.05),0 4px 6px 0 rgba(0,0,0,.1),0 1px 10px 0 rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.1)}.btn_c.empty,.btn_c.flat:not(:hover){box-shadow:none}.btn_c.small{font-size:.75em;font-weight:500;padding:8px 20px 9px}.btn_c.small .material-icons{vertical-align:bottom;position:relative;font-size:20px;margin-right:8px;bottom:1px}.btn_c.small .material-icons.right{margin-left:8px;margin-right:0}.btn_c.small svg{width:18px;height:18px;margin-right:10px;top:0}.btn_c.small svg.right{margin-right:0;margin-left:10px}.btn_c.small.round{padding-left:18px;padding-right:18px}.btn_c.small.rounded{border-radius:6px}.btn_c.small.uppercase{font-size:12px;padding:12px 16px;letter-spacing:.125em}.btn_c.small.uppercase.round{padding-left:19px;padding-right:19px}@media (min-width:768px){.btn_c.big{font-size:20px;padding:21px 32px}.btn_c.big.round{padding-left:36px;padding-right:36px}.btn_c.big.rounded{border-radius:7px}.btn_c.big.uppercase{font-size:17px;padding:23px 32px}.btn_c.big.uppercase.round{padding-left:36px;padding-right:36px}.btn_c.big .material-icons{vertical-align:bottom;margin-right:16px;font-size:30px}.btn_c.big .material-icons.right{margin-left:16px;margin-right:0}.btn_c.big svg{width:27px;height:27px;margin-right:16px;top:1px}.btn_c.big svg.right{margin-right:0;margin-left:16px}}.btn_c.empty,.btn_c.hollow{padding:0!important;background-color:transparent!important;font-size:0!important}.btn_c.gradient:before,.btn_c.shade:after{content:"";top:0;left:0}.btn_c.empty{margin:0}.btn_c.hollow{box-shadow:none!important}.btn_c.hollow svg{margin:0}.btn_c.shade{position:relative}.btn_c.shade:after{position:absolute;width:100%;height:100%;background:#292929;opacity:0;transition:.25s}.btn_c.shade:hover:after{opacity:.15}.btn_c.shade:active:after{opacity:.2}.btn_c.play{width:90px;height:90px;border-radius:50%;padding:27px;margin-left:0;margin-right:0}.btn_c.play svg{width:35px;height:36px;margin:0}.btn_c.play.small{width:60px;height:60px;border-radius:50%;padding:20px 19px}.btn_c.play.small svg{fill:#fff;width:23px;height:23px}.btn_c.play:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.btn_c.gradient{position:relative}.btn_c.gradient:before{position:absolute;width:100%;height:100%;background:linear-gradient(to bottom,#fff 0,#000 100%);z-index:-1;opacity:.1}.slide.whiteSlide .btn_c.white:hover{box-shadow:0 4px 6px 0 rgba(0,0,0,.1),0 1px 10px 0 rgba(0,0,0,.1)}.slide.whiteSlide .btn_c.white:hover:after{opacity:.3}.roundbtn_c{border-radius:50px;height:50px;width:50px;padding:14px;margin:5px}.roundbtn_c svg{bottom:2px}@media (max-width:319px){.btn_c.uppercase,.uppercase{letter-spacing:.07em}}.btn_c.uppercase{letter-spacing:.125em!important;text-indent:-.1em!important;font-weight:700!important}.red{background:#F44336!important;color:#fff!important}.stroke.button.red,.text-red{color:#F44336!important}.red svg{fill:#fff!important}.stroke.button.red svg,.text-red.button svg{fill:#F44336!important}.stroke.button.red{border-color:#F44336!important}.pink{background:#E91E63!important;color:#fff!important}.stroke.button.pink,.text-pink{color:#E91E63!important}.pink svg{fill:#fff!important}.stroke.button.pink svg,.text-pink.button svg{fill:#E91E63!important}.stroke.button.pink{border-color:#E91E63!important}.purple{background:#9C27B0!important;color:#fff!important}.stroke.button.purple,.text-purple{color:#9C27B0!important}.purple svg{fill:#fff!important}.stroke.button.purple svg,.text-purple.button svg{fill:#9C27B0!important}.stroke.button.purple{border-color:#9C27B0!important}.deepPurple{background:#673AB7!important;color:#fff!important}.deepPurple svg{fill:#fff!important}.stroke.button.deepPurple svg,.text-deepPurple.button svg{fill:#673AB7!important}.text-deepPurple{color:#673AB7!important}.stroke.button.deepPurple{color:#673AB7!important;border-color:#673AB7!important}.indigo{background:#3F51B5!important;color:#fff!important}.stroke.button.indigo,.text-indigo{color:#3F51B5!important}.indigo svg{fill:#fff!important}.stroke.button.indigo svg,.text-indigo.button svg{fill:#3F51B5!important}.stroke.button.indigo{border-color:#3F51B5!important}.blue{background:#2196F3!important;color:#fff!important}.stroke.button.blue,.text-blue{color:#2196F3!important}.blue svg{fill:#fff!important}.stroke.button.blue svg,.text-blue.button svg{fill:#2196F3!important}.stroke.button.blue{border-color:#2196F3!important}.cyan{background:#00BCD4!important;color:#fff!important}.stroke.button.cyan,.text-cyan{color:#00BCD4!important}.cyan svg{fill:#fff!important}.stroke.button.cyan svg,.text-cyan.button svg{fill:#00BCD4!important}.stroke.button.cyan{border-color:#00BCD4!important}.teal{background:#009688!important;color:#fff!important}.stroke.button.teal,.text-teal{color:#009688!important}.teal svg{fill:#fff!important}.stroke.button.teal svg,.text-teal.button svg{fill:#009688!important}.stroke.button.teal{border-color:#009688!important}.green{background:#4CAF50!important;color:#fff!important}.stroke.button.green,.text-green{color:#4CAF50!important}.green svg{fill:#fff!important}.stroke.button.green svg,.text-green.button svg{fill:#4CAF50!important}.stroke.button.green{border-color:#4CAF50!important}.lightGreen{background:#8BC34A!important;color:#fff!important}.lightGreen svg{fill:#fff!important}.stroke.button.lightGreen svg,.text-lightGreen.button svg{fill:#8BC34A!important}.text-lightGreen{color:#8BC34A!important}.stroke.button.lightGreen{color:#8BC34A!important;border-color:#8BC34A!important}.lime{background:#CDDC39!important;color:#fff!important}.stroke.button.lime,.text-lime{color:#CDDC39!important}.lime svg{fill:#fff!important}.stroke.button.lime svg,.text-lime.button svg{fill:#CDDC39!important}.stroke.button.lime{border-color:#CDDC39!important}.yellow{background:#FFEB3B!important;color:#202020!important}.stroke.button.yellow,.text-yellow{color:#FFEB3B!important}.yellow svg{fill:#202020!important}.stroke.button.yellow svg,.text-yellow.button svg{fill:#FFEB3B!important}.stroke.button.yellow{border-color:#FFEB3B!important}.amber{background:#FFC107!important;color:#fff!important}.stroke.button.amber,.text-amber{color:#FFC107!important}.amber svg{fill:#fff!important}.stroke.button.amber svg,.text-amber.button svg{fill:#FFC107!important}.stroke.button.amber{border-color:#FFC107!important}.orange{background:#FF9800!important;color:#fff!important}.stroke.button.orange,.text-orange{color:#FF9800!important}.orange svg{fill:#fff!important}.stroke.button.orange svg,.text-orange.button svg{fill:#FF9800!important}.stroke.button.orange{border-color:#FF9800!important}.deepOrange{background:#FF5722!important;color:#fff!important}.deepOrange svg{fill:#fff!important}.stroke.button.deepOrange svg,.text-deepOrange.button svg{fill:#FF5722!important}.text-deepOrange{color:#FF5722!important}.stroke.button.deepOrange{color:#FF5722!important;border-color:#FF5722!important}.brown{background:#795548!important;color:#fff!important}.stroke.button.brown,.text-brown{color:#795548!important}.brown svg{fill:#fff!important}.stroke.button.brown svg,.text-brown.button svg{fill:#795548!important}.stroke.button.brown{border-color:#795548!important}.gray{background:#9D9D9D!important;color:#fff!important}.stroke.button.gray,.text-gray{color:#9D9D9D!important}.gray svg{fill:#fff!important}.stroke.button.gray svg,.text-gray.button svg{fill:#9D9D9D!important}.stroke.button.gray{border-color:#9D9D9D!important}.blueGray{background:#607D8B!important;color:#fff!important}.stroke.button.blueGray,.text-blueGray{color:#607D8B!important}.blueGray svg{fill:#fff!important}.stroke.button.blueGray svg,.text-blueGray.button svg{fill:#607D8B!important}.stroke.button.blueGray{border-color:#607D8B!important}.social-facebook{background:#3b5998!important;color:#fff!important}.social-facebook svg{fill:#fff!important}.stroke.button.social-facebook svg,.text-social-facebook.button svg{fill:#3b5998!important}.text-social-facebook{color:#3b5998!important}.stroke.button.social-facebook{color:#3b5998!important;border-color:#3b5998!important}.social-twitter{background:#55acee!important;color:#fff!important}.social-twitter svg{fill:#fff!important}.stroke.button.social-twitter svg,.text-social-twitter.button svg{fill:#55acee!important}.text-social-twitter{color:#55acee!important}.stroke.button.social-twitter{color:#55acee!important;border-color:#55acee!important}.social-googlePlus{background:#DD4330!important;color:#fff!important}.social-googlePlus svg{fill:#fff!important}.stroke.button.social-googlePlus svg,.text-social-googlePlus.button svg{fill:#DD4330!important}.text-social-googlePlus{color:#DD4330!important}.stroke.button.social-googlePlus{color:#DD4330!important;border-color:#DD4330!important}.social-behance{background:#105DFB!important;color:#fff!important}.social-behance svg{fill:#fff!important}.stroke.button.social-behance svg,.text-social-behance.button svg{fill:#105DFB!important}.text-social-behance{color:#105DFB!important}.stroke.button.social-behance{color:#105DFB!important;border-color:#105DFB!important}.social-medium{background:#12100E!important;color:#fff!important}.social-medium svg{fill:#fff!important}.stroke.button.social-medium svg,.text-social-medium.button svg{fill:#12100E!important}.text-social-medium{color:#12100E!important}.stroke.button.social-medium{color:#12100E!important;border-color:#12100E!important}.social-stumbleupon{background:#eb4924!important;color:#fff!important}.social-stumbleupon svg{fill:#fff!important}.stroke.button.social-stumbleupon svg,.text-social-stumbleupon.button svg{fill:#eb4924!important}.text-social-stumbleupon{color:#eb4924!important}.stroke.button.social-stumbleupon{color:#eb4924!important;border-color:#eb4924!important}.social-linkedin{background:#0077b5!important;color:#fff!important}.social-linkedin svg{fill:#fff!important}.stroke.button.social-linkedin svg,.text-social-linkedin.button svg{fill:#0077b5!important}.text-social-linkedin{color:#0077b5!important}.stroke.button.social-linkedin{color:#0077b5!important;border-color:#0077b5!important}.social-pinterest{background:#cc2127!important;color:#fff!important}.social-pinterest svg{fill:#fff!important}.stroke.button.social-pinterest svg,.text-social-pinterest.button svg{fill:#cc2127!important}.text-social-pinterest{color:#cc2127!important}.stroke.button.social-pinterest{color:#cc2127!important;border-color:#cc2127!important}.social-instagram{background:#e4405f!important;color:#fff!important}.social-instagram svg{fill:#fff!important}.stroke.button.social-instagram svg,.text-social-instagram.button svg{fill:#e4405f!important}.text-social-instagram{color:#e4405f!important}.stroke.button.social-instagram{color:#e4405f!important;border-color:#e4405f!important}.social-tumblr{background:#34455D!important;color:#fff!important}.social-tumblr svg{fill:#fff!important}.stroke.button.social-tumblr svg,.text-social-tumblr.button svg{fill:#34455D!important}.text-social-tumblr{color:#34455D!important}.stroke.button.social-tumblr{color:#34455D!important;border-color:#34455D!important}.social-dribbble{background:#ea4c89!important;color:#fff!important}.social-dribbble svg{fill:#fff!important}.stroke.button.social-dribbble svg,.text-social-dribbble.button svg{fill:#ea4c89!important}.text-social-dribbble{color:#ea4c89!important}.stroke.button.social-dribbble{color:#ea4c89!important;border-color:#ea4c89!important}.social-delicious{background:#39f!important;color:#fff!important}.social-delicious svg{fill:#fff!important}.stroke.button.social-delicious svg,.text-social-delicious.button svg{fill:#39f!important}.text-social-delicious{color:#39f!important}.stroke.button.social-delicious{color:#39f!important;border-color:#39f!important}.social-digg{background:#000!important;color:#fff!important}.social-digg svg{fill:#fff!important}.stroke.button.social-digg svg,.text-social-digg.button svg{fill:#000!important}.text-social-digg{color:#000!important}.stroke.button.social-digg{color:#000!important;border-color:#000!important}.social-vimeo{background:#fff!important;color:#1ab7ea!important}.social-whatsapp,.text-social-vimeo{color:#fff!important}.social-vimeo svg{fill:#1ab7ea!important}.social-whatsapp svg,.stroke.button.social-vimeo svg,.text-social-vimeo.button svg{fill:#fff!important}.stroke.button.social-vimeo{color:#fff!important;border-color:#fff!important}.social-whatsapp{background:#25D366!important}.stroke.button.social-whatsapp svg,.text-social-whatsapp.button svg{fill:#25D366!important}.text-social-whatsapp{color:#25D366!important}.stroke.button.social-whatsapp{color:#25D366!important;border-color:#25D366!important}.social-xing{background:#026466!important;color:#fff!important}.social-xing svg{fill:#fff!important}.stroke.button.social-xing svg,.text-social-xing.button svg{fill:#026466!important}.text-social-xing{color:#026466!important}.stroke.button.social-xing{color:#026466!important;border-color:#026466!important}.social-youtube{background:#FC0D1C!important;color:#fff!important}.social-youtube svg{fill:#fff!important}.stroke.button.social-youtube svg,.text-social-youtube.button svg{fill:#FC0D1C!important}.text-social-youtube{color:#FC0D1C!important}.stroke.button.social-youtube{color:#FC0D1C!important;border-color:#FC0D1C!important} \ No newline at end of file diff --git a/assets/css_firepress/btn_c_license.css b/assets/css_firepress/btn_c_license.css new file mode 100755 index 0000000..55c48a0 --- /dev/null +++ b/assets/css_firepress/btn_c_license.css @@ -0,0 +1,2 @@ +Freebie: Horizontal Scroll One Page Website +https://www.graphicsfuel.com/2018/12/freebie-horizontal-scroll-one-page-website/ diff --git a/assets/css_firepress/button-examples/btn_a.md b/assets/css_firepress/button-examples/btn_a.md new file mode 100644 index 0000000..a242c69 --- /dev/null +++ b/assets/css_firepress/button-examples/btn_a.md @@ -0,0 +1,32 @@ +# Button | Style A + + +## Basic + +Buy Tickets + +Click Here + + +## Icon + +  Buy Tickets + + +## Other possibilities + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here diff --git a/assets/css_firepress/button-examples/btn_b.md b/assets/css_firepress/button-examples/btn_b.md new file mode 100644 index 0000000..68ea179 --- /dev/null +++ b/assets/css_firepress/button-examples/btn_b.md @@ -0,0 +1,45 @@ +# Button | Style B + +## Basic + +Buy Tickets + +Click Here + +Buy Tickets + +Click Here + +Buy Tickets + + +## Icon + +  Buy Tickets + + +## Other possibilities + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + +Click Here + + + + + + diff --git a/assets/css_firepress/button-examples/btn_c.md b/assets/css_firepress/button-examples/btn_c.md new file mode 100644 index 0000000..611a4c1 --- /dev/null +++ b/assets/css_firepress/button-examples/btn_c.md @@ -0,0 +1,85 @@ +# Button | Style C + +## Basic + +Buy Tickets + +Click Here + +Buy tickets + +    Click Here     + + +## Icons + +  Buy Tickets + +  Twitter + +  Twitter + + +## Side by Side + +Click Here Click Here + +## Wide + +Schedule an appointment + +## Color + +#### With gradient + +Click Here >   +Click Here >   +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > +Click Here > + +#### No gradient + +Click Here > +Click Here > +Click Here > +Click Here > + + +## Stroke + +#### Regular + +Click Here +Click Here +Click Here + +#### Small + +Click Here +Click Here +Click Here + + +## Small + +Click Here > +Click Here > +Click Here > +Click Here > + diff --git a/assets/css_firepress/button-examples/button_london.md b/assets/css_firepress/button-examples/button_london.md new file mode 100644 index 0000000..d8b6711 --- /dev/null +++ b/assets/css_firepress/button-examples/button_london.md @@ -0,0 +1,62 @@ +⚠️ WARNING, don't use as it will be deprecated + +⚠️ WARNING, don't use as it will be deprecated + +⚠️ WARNING, don't use as it will be deprecated + +⚠️ WARNING, don't use as it will be deprecated + +⚠️ WARNING, don't use as it will be deprecated + + +# Button + +Everyone love buttons! Use them as a **call to action**. + +### button primary + +Host your website + +``` +Host your website +``` + +### button primary (with an icon) + +  Host your website + +### button + +Host your website + +### button primary large + +Host your website + +### Button small + +Host your website + +### button primary fit + +Host your website + +### button fit + +Host your website + +### button primary fit small + +Host your website + +### button fit small + +Host your website + +### button primary disabled + +Host your website + +### button disabled + +Host your website \ No newline at end of file diff --git a/assets/css_firepress/button-examples/markdown_style_guide.md b/assets/css_firepress/button-examples/markdown_style_guide.md new file mode 100644 index 0000000..df1aabf --- /dev/null +++ b/assets/css_firepress/button-examples/markdown_style_guide.md @@ -0,0 +1,7 @@ +# Markdown style guide + +On https://play-with-ghost.com/ check out a "live demo" a look for the page label as "Style guide". + +# Markdown sources + +https://gist.github.com/pascalandy/88220587af37ae455c53a56564ce4969 \ No newline at end of file diff --git a/assets/css_firepress/buttons.css b/assets/css_firepress/buttons.css new file mode 100755 index 0000000..86e50ab --- /dev/null +++ b/assets/css_firepress/buttons.css @@ -0,0 +1,2343 @@ +/*! @license +* +* Buttons +* Copyright 2012-2014 Alex Wolfe and Rob Levin +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + + +/* +* Compass (optional) +* +* We recommend the use of autoprefixer instead of Compass +* when using buttons. However, buttons does support Compass. +* simply change $ubtn-use-compass to true and uncomment the +* @import 'compass' code below to use Compass. +*/ + + +/* +* Required Files +* +* These files include the variables and options +* and base css styles that are required to generate buttons. +*/ + + +/* +* $ubtn prefix (reserved) +* +* This prefix stands for Unicorn Button - ubtn +* We provide a prefix to the Sass Variables to +* prevent namespace collisions that could occur if +* you import buttons as part of your Sass build process. +* We kindly ask you not to use the prefix $ubtn in your project +* in order to avoid possilbe name conflicts. Thanks! +*/ + + +/* +* Button Namespace (ex .button or .btn) +* +*/ + + +/* +* Button Defaults +* +* Some default settings that are used throughout the button library. +* Changes to these settings will be picked up by all of the other modules. +* The colors used here are the default colors for the base button (gray). +* The font size and height are used to set the base size for the buttons. +* The size values will be used to calculate the larger and smaller button sizes. +*/ + + +/* +* Button Colors +* +* $ubtn-colors is used to generate the different button colors. +* Edit or add colors to the list below and recompile. +* Each block contains the (name, background, color) +* The class is generated using the name: (ex .button-primary) +*/ + + +/* +* Button Shapes +* +* $ubtn-shapes is used to generate the different button shapes. +* Edit or add shapes to the list below and recompile. +* Each block contains the (name, border-radius). +* The class is generated using the name: (ex .button-square). +*/ + + +/* +* Button Sizes +* +* $ubtn-sizes is used to generate the different button sizes. +* Edit or add colors to the list below and recompile. +* Each block contains the (name, size multiplier). +* The class is generated using the name: (ex .button-giant). +*/ + + +/* +* Color Mixin +* +* Iterates through the list of colors and creates +* +*/ + + +/* +* No Animation +* +* Sets animation property to none +*/ + + +/* +* Clearfix +* +* Clears floats inside the container +*/ + + +/* +* Base Button Style +* +* The default values for the .button class +*/ + +.button { + color: #666666; + background-color: #eeeeee; + border-color: #eeeeee; + font-weight: 300; + font-size: 16px; + font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + text-decoration: none; + text-align: center; + line-height: 40px; + height: 40px; + padding: 0 40px; + margin: 0; + display: inline-block; + appearance: none; + cursor: pointer; + border: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; + margin-top: 15px; + /* + * Disabled State + * + * The disabled state uses the class .disabled, is-disabled, + * and the form attribute disabled="disabled". + * The use of !important is only added because this is a state + * that must be applied to all buttons when in a disabled state. + */ +} + +.button:visited { + color: #666666; +} + +.button:hover, +.button:focus { + background-color: #f6f6f6; + text-decoration: none; + outline: none; +} + +.button:active, +.button.active, +.button.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + text-decoration: none; + background-color: #eeeeee; + border-color: #cfcfcf; + color: #d4d4d4; + -webkit-transition-duration: 0s; + transition-duration: 0s; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.button.disabled, +.button.is-disabled, +.button:disabled { + top: 0 !important; + background: #EEE !important; + border: 1px solid #DDD !important; + text-shadow: 0 1px 1px white !important; + color: #CCC !important; + cursor: default !important; + appearance: none !important; +} + +.button.disabled else, +.button.is-disabled else, +.button:disabled else { + -webkit-box-shadow: none !important; + box-shadow: none !important; + opacity: .8 !important; +} + + +/* +* Base Button Tyography +* +*/ + +.button-uppercase { + text-transform: uppercase; +} + +.button-lowercase { + text-transform: lowercase; +} + +.button-capitalize { + text-transform: capitalize; +} + +.button-small-caps { + font-variant: small-caps; +} + +.button-icon-txt-large { + font-size: 36px !important; +} + + +/* +* Base padding +* +*/ + +.button-width-small { + padding: 0 10px !important; +} + + +/* +* Base Colors +* +* Create colors for buttons +* (.button-primary, .button-secondary, etc.) +*/ + +.button-primary, +.button-primary-flat { + background-color: #1b9af7; + border-color: #1b9af7; + color: white; +} + +.button-primary:visited, +.button-primary-flat:visited { + color: white; +} + +.button-primary:hover, +.button-primary:focus, +.button-primary-flat:hover, +.button-primary-flat:focus { + background-color: #4cb0f9; + border-color: #4cb0f9; + color: white; +} + +.button-primary:active, +.button-primary.active, +.button-primary.is-active, +.button-primary-flat:active, +.button-primary-flat.active, +.button-primary-flat.is-active { + background-color: #2798eb; + border-color: #2798eb; + color: #0880d7; +} + +.button-plain, +.button-plain-flat { + background-color: white; + border-color: white; + color: #1b9af7; +} + +.button-plain:visited, +.button-plain-flat:visited { + color: #1b9af7; +} + +.button-plain:hover, +.button-plain:focus, +.button-plain-flat:hover, +.button-plain-flat:focus { + background-color: white; + border-color: white; + color: #1b9af7; +} + +.button-plain:active, +.button-plain.active, +.button-plain.is-active, +.button-plain-flat:active, +.button-plain-flat.active, +.button-plain-flat.is-active { + background-color: white; + border-color: white; + color: #e6e6e6; +} + +.button-inverse, +.button-inverse-flat { + background-color: #222222; + border-color: #222222; + color: #eeeeee; +} + +.button-inverse:visited, +.button-inverse-flat:visited { + color: #eeeeee; +} + +.button-inverse:hover, +.button-inverse:focus, +.button-inverse-flat:hover, +.button-inverse-flat:focus { + background-color: #3c3c3c; + border-color: #3c3c3c; + color: #eeeeee; +} + +.button-inverse:active, +.button-inverse.active, +.button-inverse.is-active, +.button-inverse-flat:active, +.button-inverse-flat.active, +.button-inverse-flat.is-active { + background-color: #222222; + border-color: #222222; + color: #090909; +} + +.button-action, +.button-action-flat { + background-color: #a5de37; + border-color: #a5de37; + color: white; +} + +.button-action:visited, +.button-action-flat:visited { + color: white; +} + +.button-action:hover, +.button-action:focus, +.button-action-flat:hover, +.button-action-flat:focus { + background-color: #b9e563; + border-color: #b9e563; + color: white; +} + +.button-action:active, +.button-action.active, +.button-action.is-active, +.button-action-flat:active, +.button-action-flat.active, +.button-action-flat.is-active { + background-color: #a1d243; + border-color: #a1d243; + color: #8bc220; +} + +.button-highlight, +.button-highlight-flat { + background-color: #feae1b; + border-color: #feae1b; + color: white; +} + +.button-highlight:visited, +.button-highlight-flat:visited { + color: white; +} + +.button-highlight:hover, +.button-highlight:focus, +.button-highlight-flat:hover, +.button-highlight-flat:focus { + background-color: #fec04e; + border-color: #fec04e; + color: white; +} + +.button-highlight:active, +.button-highlight.active, +.button-highlight.is-active, +.button-highlight-flat:active, +.button-highlight-flat.active, +.button-highlight-flat.is-active { + background-color: #f3ab26; + border-color: #f3ab26; + color: #e59501; +} + +.button-caution, +.button-caution-flat { + background-color: #ff4351; + border-color: #ff4351; + color: white; +} + +.button-caution:visited, +.button-caution-flat:visited { + color: white; +} + +.button-caution:hover, +.button-caution:focus, +.button-caution-flat:hover, +.button-caution-flat:focus { + background-color: #ff7680; + border-color: #ff7680; + color: white; +} + +.button-caution:active, +.button-caution.active, +.button-caution.is-active, +.button-caution-flat:active, +.button-caution-flat.active, +.button-caution-flat.is-active { + background-color: #f64c59; + border-color: #f64c59; + color: #ff1022; +} + +.button-royal, +.button-royal-flat { + background-color: #7b72e9; + border-color: #7b72e9; + color: white; +} + +.button-royal:visited, +.button-royal-flat:visited { + color: white; +} + +.button-royal:hover, +.button-royal:focus, +.button-royal-flat:hover, +.button-royal-flat:focus { + background-color: #a49ef0; + border-color: #a49ef0; + color: white; +} + +.button-royal:active, +.button-royal.active, +.button-royal.is-active, +.button-royal-flat:active, +.button-royal-flat.active, +.button-royal-flat.is-active { + background-color: #827ae1; + border-color: #827ae1; + color: #5246e2; +} + + +/* +* Base Layout Styles +* +* Very Miminal Layout Styles +*/ + +.button-block, +.button-stacked { + display: block; +} + + +/* +* Button Types (optional) +* +* All of the files below represent the various button +* types (including shapes & sizes). None of these files +* are required. Simple remove the uneeded type below and +* the button type will be excluded from the final build +*/ + + +/* +* Button Shapes +* +* This file creates the various button shapes +* (ex. Circle, Rounded, Pill) +*/ + +.button-square { + border-radius: 0; +} + +.button-box { + border-radius: 10px; +} + +.button-rounded { + border-radius: 4px; +} + +.button-pill { + border-radius: 200px; +} + +.button-circle { + border-radius: 100%; +} + + +/* +* Size Adjustment for equal height & widht buttons +* +* Remove padding and set a fixed width. +*/ + +.button-circle, +.button-box, +.button-square { + padding: 0 !important; + width: 40px; +} + +.button-circle.button-giant, +.button-box.button-giant, +.button-square.button-giant { + width: 70px; +} + +.button-circle.button-jumbo, +.button-box.button-jumbo, +.button-square.button-jumbo { + width: 60px; +} + +.button-circle.button-large, +.button-box.button-large, +.button-square.button-large { + width: 50px; +} + +.button-circle.button-normal, +.button-box.button-normal, +.button-square.button-normal { + width: 40px; +} + +.button-circle.button-small, +.button-box.button-small, +.button-square.button-small { + width: 30px; +} + +.button-circle.button-tiny, +.button-box.button-tiny, +.button-square.button-tiny { + width: 24px; +} + + +/* +* Border Buttons +* +* These buttons have no fill they only have a +* border to define their hit target. +*/ + +.button-border, +.button-border-thin, +.button-border-thick { + background: none; + border-width: 2px; + border-style: solid; + line-height: 36px; +} + +.button-border:hover, +.button-border-thin:hover, +.button-border-thick:hover { + background-color: rgba(255, 255, 255, 0.9); +} + +.button-border:active, +.button-border-thin:active, +.button-border-thick:active, +.button-border.active, +.active.button-border-thin, +.active.button-border-thick, +.button-border.is-active, +.is-active.button-border-thin, +.is-active.button-border-thick { + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: none; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; +} + + +/* +* Border Optional Sizes +* +* A slight variation in border thickness +*/ + +.button-border-thin { + border-width: 1px; +} + +.button-border-thick { + border-width: 3px; +} + + +/* +* Border Button Colors +* +* Create colors for buttons +* (.button-primary, .button-secondary, etc.) +*/ + +.button-border, +.button-border-thin, +.button-border-thick, +.button-border-thin, +.button-border-thick { + /* + * Border Button Size Adjustment + * + * The line-height must be adjusted to compinsate for + * the width of the border. + */ +} + +.button-border.button-primary, +.button-primary.button-border-thin, +.button-primary.button-border-thick, +.button-border-thin.button-primary, +.button-border-thick.button-primary { + color: #1b9af7; +} + +.button-border.button-primary:hover, +.button-primary.button-border-thin:hover, +.button-primary.button-border-thick:hover, +.button-border.button-primary:focus, +.button-primary.button-border-thin:focus, +.button-primary.button-border-thick:focus, +.button-border-thin.button-primary:hover, +.button-border-thin.button-primary:focus, +.button-border-thick.button-primary:hover, +.button-border-thick.button-primary:focus { + background-color: rgba(76, 176, 249, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.button-border.button-primary:active, +.button-primary.button-border-thin:active, +.button-primary.button-border-thick:active, +.button-border.button-primary.active, +.button-primary.active.button-border-thin, +.button-primary.active.button-border-thick, +.button-border.button-primary.is-active, +.button-primary.is-active.button-border-thin, +.button-primary.is-active.button-border-thick, +.button-border-thin.button-primary:active, +.button-border-thin.button-primary.active, +.button-border-thin.button-primary.is-active, +.button-border-thick.button-primary:active, +.button-border-thick.button-primary.active, +.button-border-thick.button-primary.is-active { + background-color: rgba(39, 152, 235, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.button-border.button-plain, +.button-plain.button-border-thin, +.button-plain.button-border-thick, +.button-border-thin.button-plain, +.button-border-thick.button-plain { + color: white; +} + +.button-border.button-plain:hover, +.button-plain.button-border-thin:hover, +.button-plain.button-border-thick:hover, +.button-border.button-plain:focus, +.button-plain.button-border-thin:focus, +.button-plain.button-border-thick:focus, +.button-border-thin.button-plain:hover, +.button-border-thin.button-plain:focus, +.button-border-thick.button-plain:hover, +.button-border-thick.button-plain:focus { + background-color: rgba(255, 255, 255, 0.9); + color: rgba(27, 154, 247, 0.9); +} + +.button-border.button-plain:active, +.button-plain.button-border-thin:active, +.button-plain.button-border-thick:active, +.button-border.button-plain.active, +.button-plain.active.button-border-thin, +.button-plain.active.button-border-thick, +.button-border.button-plain.is-active, +.button-plain.is-active.button-border-thin, +.button-plain.is-active.button-border-thick, +.button-border-thin.button-plain:active, +.button-border-thin.button-plain.active, +.button-border-thin.button-plain.is-active, +.button-border-thick.button-plain:active, +.button-border-thick.button-plain.active, +.button-border-thick.button-plain.is-active { + background-color: rgba(255, 255, 255, 0.7); + color: rgba(27, 154, 247, 0.5); + opacity: .3; +} + +.button-border.button-inverse, +.button-inverse.button-border-thin, +.button-inverse.button-border-thick, +.button-border-thin.button-inverse, +.button-border-thick.button-inverse { + color: #222222; +} + +.button-border.button-inverse:hover, +.button-inverse.button-border-thin:hover, +.button-inverse.button-border-thick:hover, +.button-border.button-inverse:focus, +.button-inverse.button-border-thin:focus, +.button-inverse.button-border-thick:focus, +.button-border-thin.button-inverse:hover, +.button-border-thin.button-inverse:focus, +.button-border-thick.button-inverse:hover, +.button-border-thick.button-inverse:focus { + background-color: rgba(60, 60, 60, 0.9); + color: rgba(238, 238, 238, 0.9); +} + +.button-border.button-inverse:active, +.button-inverse.button-border-thin:active, +.button-inverse.button-border-thick:active, +.button-border.button-inverse.active, +.button-inverse.active.button-border-thin, +.button-inverse.active.button-border-thick, +.button-border.button-inverse.is-active, +.button-inverse.is-active.button-border-thin, +.button-inverse.is-active.button-border-thick, +.button-border-thin.button-inverse:active, +.button-border-thin.button-inverse.active, +.button-border-thin.button-inverse.is-active, +.button-border-thick.button-inverse:active, +.button-border-thick.button-inverse.active, +.button-border-thick.button-inverse.is-active { + background-color: rgba(34, 34, 34, 0.7); + color: rgba(238, 238, 238, 0.5); + opacity: .3; +} + +.button-border.button-action, +.button-action.button-border-thin, +.button-action.button-border-thick, +.button-border-thin.button-action, +.button-border-thick.button-action { + color: #a5de37; +} + +.button-border.button-action:hover, +.button-action.button-border-thin:hover, +.button-action.button-border-thick:hover, +.button-border.button-action:focus, +.button-action.button-border-thin:focus, +.button-action.button-border-thick:focus, +.button-border-thin.button-action:hover, +.button-border-thin.button-action:focus, +.button-border-thick.button-action:hover, +.button-border-thick.button-action:focus { + background-color: rgba(185, 229, 99, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.button-border.button-action:active, +.button-action.button-border-thin:active, +.button-action.button-border-thick:active, +.button-border.button-action.active, +.button-action.active.button-border-thin, +.button-action.active.button-border-thick, +.button-border.button-action.is-active, +.button-action.is-active.button-border-thin, +.button-action.is-active.button-border-thick, +.button-border-thin.button-action:active, +.button-border-thin.button-action.active, +.button-border-thin.button-action.is-active, +.button-border-thick.button-action:active, +.button-border-thick.button-action.active, +.button-border-thick.button-action.is-active { + background-color: rgba(161, 210, 67, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.button-border.button-highlight, +.button-highlight.button-border-thin, +.button-highlight.button-border-thick, +.button-border-thin.button-highlight, +.button-border-thick.button-highlight { + color: #feae1b; +} + +.button-border.button-highlight:hover, +.button-highlight.button-border-thin:hover, +.button-highlight.button-border-thick:hover, +.button-border.button-highlight:focus, +.button-highlight.button-border-thin:focus, +.button-highlight.button-border-thick:focus, +.button-border-thin.button-highlight:hover, +.button-border-thin.button-highlight:focus, +.button-border-thick.button-highlight:hover, +.button-border-thick.button-highlight:focus { + background-color: rgba(254, 192, 78, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.button-border.button-highlight:active, +.button-highlight.button-border-thin:active, +.button-highlight.button-border-thick:active, +.button-border.button-highlight.active, +.button-highlight.active.button-border-thin, +.button-highlight.active.button-border-thick, +.button-border.button-highlight.is-active, +.button-highlight.is-active.button-border-thin, +.button-highlight.is-active.button-border-thick, +.button-border-thin.button-highlight:active, +.button-border-thin.button-highlight.active, +.button-border-thin.button-highlight.is-active, +.button-border-thick.button-highlight:active, +.button-border-thick.button-highlight.active, +.button-border-thick.button-highlight.is-active { + background-color: rgba(243, 171, 38, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.button-border.button-caution, +.button-caution.button-border-thin, +.button-caution.button-border-thick, +.button-border-thin.button-caution, +.button-border-thick.button-caution { + color: #ff4351; +} + +.button-border.button-caution:hover, +.button-caution.button-border-thin:hover, +.button-caution.button-border-thick:hover, +.button-border.button-caution:focus, +.button-caution.button-border-thin:focus, +.button-caution.button-border-thick:focus, +.button-border-thin.button-caution:hover, +.button-border-thin.button-caution:focus, +.button-border-thick.button-caution:hover, +.button-border-thick.button-caution:focus { + background-color: rgba(255, 118, 128, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.button-border.button-caution:active, +.button-caution.button-border-thin:active, +.button-caution.button-border-thick:active, +.button-border.button-caution.active, +.button-caution.active.button-border-thin, +.button-caution.active.button-border-thick, +.button-border.button-caution.is-active, +.button-caution.is-active.button-border-thin, +.button-caution.is-active.button-border-thick, +.button-border-thin.button-caution:active, +.button-border-thin.button-caution.active, +.button-border-thin.button-caution.is-active, +.button-border-thick.button-caution:active, +.button-border-thick.button-caution.active, +.button-border-thick.button-caution.is-active { + background-color: rgba(246, 76, 89, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.button-border.button-royal, +.button-royal.button-border-thin, +.button-royal.button-border-thick, +.button-border-thin.button-royal, +.button-border-thick.button-royal { + color: #7b72e9; +} + +.button-border.button-royal:hover, +.button-royal.button-border-thin:hover, +.button-royal.button-border-thick:hover, +.button-border.button-royal:focus, +.button-royal.button-border-thin:focus, +.button-royal.button-border-thick:focus, +.button-border-thin.button-royal:hover, +.button-border-thin.button-royal:focus, +.button-border-thick.button-royal:hover, +.button-border-thick.button-royal:focus { + background-color: rgba(164, 158, 240, 0.9); + color: rgba(255, 255, 255, 0.9); +} + +.button-border.button-royal:active, +.button-royal.button-border-thin:active, +.button-royal.button-border-thick:active, +.button-border.button-royal.active, +.button-royal.active.button-border-thin, +.button-royal.active.button-border-thick, +.button-border.button-royal.is-active, +.button-royal.is-active.button-border-thin, +.button-royal.is-active.button-border-thick, +.button-border-thin.button-royal:active, +.button-border-thin.button-royal.active, +.button-border-thin.button-royal.is-active, +.button-border-thick.button-royal:active, +.button-border-thick.button-royal.active, +.button-border-thick.button-royal.is-active { + background-color: rgba(130, 122, 225, 0.7); + color: rgba(255, 255, 255, 0.5); + opacity: .3; +} + +.button-border.button-giant, +.button-giant.button-border-thin, +.button-giant.button-border-thick, +.button-border-thin.button-giant, +.button-border-thick.button-giant { + line-height: 66px; +} + +.button-border.button-jumbo, +.button-jumbo.button-border-thin, +.button-jumbo.button-border-thick, +.button-border-thin.button-jumbo, +.button-border-thick.button-jumbo { + line-height: 56px; +} + +.button-border.button-large, +.button-large.button-border-thin, +.button-large.button-border-thick, +.button-border-thin.button-large, +.button-border-thick.button-large { + line-height: 46px; +} + +.button-border.button-normal, +.button-normal.button-border-thin, +.button-normal.button-border-thick, +.button-border-thin.button-normal, +.button-border-thick.button-normal { + line-height: 36px; +} + +.button-border.button-small, +.button-small.button-border-thin, +.button-small.button-border-thick, +.button-border-thin.button-small, +.button-border-thick.button-small { + line-height: 26px; +} + +.button-border.button-tiny, +.button-tiny.button-border-thin, +.button-tiny.button-border-thick, +.button-border-thin.button-tiny, +.button-border-thick.button-tiny { + line-height: 20px; +} + + +/* +* Border Buttons +* +* These buttons have no fill they only have a +* border to define their hit target. +*/ + +.button-borderless { + background: none; + border: none; + padding: 0 8px !important; + color: #eeeeee; + font-size: 20.8px; + font-weight: 200; + /* + * Borderless Button Colors + * + * Create colors for buttons + * (.button-primary, .button-secondary, etc.) + */ + /* + * Borderles Size Adjustment + * + * The font-size must be large to compinsate for + * the lack of a hit target. + */ +} + +.button-borderless:hover, +.button-borderless:focus { + background: none; +} + +.button-borderless:active, +.button-borderless.active, +.button-borderless.is-active { + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: none; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .3s; + transition-duration: .3s; + opacity: .3; +} + +.button-borderless.button-primary { + color: #1b9af7; +} + +.button-borderless.button-plain { + color: white; +} + +.button-borderless.button-inverse { + color: #222222; +} + +.button-borderless.button-action { + color: #a5de37; +} + +.button-borderless.button-highlight { + color: #feae1b; +} + +.button-borderless.button-caution { + color: #ff4351; +} + +.button-borderless.button-royal { + color: #7b72e9; +} + +.button-borderless.button-giant { + font-size: 36.4px; + height: 52.4px; + line-height: 52.4px; +} + +.button-borderless.button-jumbo { + font-size: 31.2px; + height: 47.2px; + line-height: 47.2px; +} + +.button-borderless.button-large { + font-size: 26px; + height: 42px; + line-height: 42px; +} + +.button-borderless.button-normal { + font-size: 20.8px; + height: 36.8px; + line-height: 36.8px; +} + +.button-borderless.button-small { + font-size: 15.6px; + height: 31.6px; + line-height: 31.6px; +} + +.button-borderless.button-tiny { + font-size: 12.48px; + height: 28.48px; + line-height: 28.48px; +} + + +/* +* Raised Buttons +* +* A classic looking button that offers +* great depth and affordance. +*/ + +.button-raised { + border-color: #e1e1e1; + border-style: solid; + border-width: 1px; + line-height: 38px; + background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); + background: linear-gradient(#f6f6f6, #e1e1e1); + -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.button-raised:hover, +.button-raised:focus { + background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro)); + background: linear-gradient(top, white, gainsboro); +} + +.button-raised:active, +.button-raised.active, +.button-raised.is-active { + background: #eeeeee; + -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; +} + + +/* +* Raised Button Colors +* +* Create colors for raised buttons +*/ + +.button-raised.button-primary { + border-color: #088ef0; + background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0)); + background: linear-gradient(#34a5f8, #088ef0); +} + +.button-raised.button-primary:hover, +.button-raised.button-primary:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6)); + background: linear-gradient(top, #42abf8, #0888e6); +} + +.button-raised.button-primary:active, +.button-raised.button-primary.active, +.button-raised.button-primary.is-active { + border-color: #0880d7; + background: #2798eb; +} + +.button-raised.button-plain { + border-color: #f2f2f2; + background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2)); + background: linear-gradient(white, #f2f2f2); +} + +.button-raised.button-plain:hover, +.button-raised.button-plain:focus { + background: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed)); + background: linear-gradient(top, white, #ededed); +} + +.button-raised.button-plain:active, +.button-raised.button-plain.active, +.button-raised.button-plain.is-active { + border-color: #e6e6e6; + background: white; +} + +.button-raised.button-inverse { + border-color: #151515; + background: -webkit-gradient(linear, left top, left bottom, from(#2f2f2f), to(#151515)); + background: linear-gradient(#2f2f2f, #151515); +} + +.button-raised.button-inverse:hover, +.button-raised.button-inverse:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#101010)); + background: linear-gradient(top, #363636, #101010); +} + +.button-raised.button-inverse:active, +.button-raised.button-inverse.active, +.button-raised.button-inverse.is-active { + border-color: #090909; + background: #222222; +} + +.button-raised.button-action { + border-color: #9ad824; + background: -webkit-gradient(linear, left top, left bottom, from(#afe24d), to(#9ad824)); + background: linear-gradient(#afe24d, #9ad824); +} + +.button-raised.button-action:hover, +.button-raised.button-action:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#b5e45a), to(#94cf22)); + background: linear-gradient(top, #b5e45a, #94cf22); +} + +.button-raised.button-action:active, +.button-raised.button-action.active, +.button-raised.button-action.is-active { + border-color: #8bc220; + background: #a1d243; +} + +.button-raised.button-highlight { + border-color: #fea502; + background: -webkit-gradient(linear, left top, left bottom, from(#feb734), to(#fea502)); + background: linear-gradient(#feb734, #fea502); +} + +.button-raised.button-highlight:hover, +.button-raised.button-highlight:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#febc44), to(#f49f01)); + background: linear-gradient(top, #febc44, #f49f01); +} + +.button-raised.button-highlight:active, +.button-raised.button-highlight.active, +.button-raised.button-highlight.is-active { + border-color: #e59501; + background: #f3ab26; +} + +.button-raised.button-caution { + border-color: #ff2939; + background: -webkit-gradient(linear, left top, left bottom, from(#ff5c69), to(#ff2939)); + background: linear-gradient(#ff5c69, #ff2939); +} + +.button-raised.button-caution:hover, +.button-raised.button-caution:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#ff6c77), to(#ff1f30)); + background: linear-gradient(top, #ff6c77, #ff1f30); +} + +.button-raised.button-caution:active, +.button-raised.button-caution.active, +.button-raised.button-caution.is-active { + border-color: #ff1022; + background: #f64c59; +} + +.button-raised.button-royal { + border-color: #665ce6; + background: -webkit-gradient(linear, left top, left bottom, from(#9088ec), to(#665ce6)); + background: linear-gradient(#9088ec, #665ce6); +} + +.button-raised.button-royal:hover, +.button-raised.button-royal:focus { + background: -webkit-gradient(linear, left top, left bottom, from(#9c95ef), to(#5e53e4)); + background: linear-gradient(top, #9c95ef, #5e53e4); +} + +.button-raised.button-royal:active, +.button-raised.button-royal.active, +.button-raised.button-royal.is-active { + border-color: #5246e2; + background: #827ae1; +} + + +/* +* 3D Buttons +* +* These buttons have a heavy three dimensional +* style that mimics the visual appearance of a +* real life button. +*/ + +.button-3d { + position: relative; + top: 0; + -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d:hover, +.button-3d:focus { + -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d:active, +.button-3d.active, +.button-3d.is-active { + top: 5px; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: .15s; + transition-duration: .15s; + -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); +} + + +/* +* 3D Button Colors +* +* Create colors for buttons +* (.button-primary, .button-secondary, etc.) +*/ + +.button-3d.button-primary { + -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-primary:hover, +.button-3d.button-primary:focus { + -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-primary:active, +.button-3d.button-primary.active, +.button-3d.button-primary.is-active { + -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-plain { + -webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-plain:hover, +.button-3d.button-plain:focus { + -webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-plain:active, +.button-3d.button-plain.active, +.button-3d.button-plain.is-active { + -webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-inverse { + -webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-inverse:hover, +.button-3d.button-inverse:focus { + -webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-inverse:active, +.button-3d.button-inverse.active, +.button-3d.button-inverse.is-active { + -webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-action { + -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-action:hover, +.button-3d.button-action:focus { + -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-action:active, +.button-3d.button-action.active, +.button-3d.button-action.is-active { + -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-highlight { + -webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-highlight:hover, +.button-3d.button-highlight:focus { + -webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-highlight:active, +.button-3d.button-highlight.active, +.button-3d.button-highlight.is-active { + -webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-caution { + -webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-caution:hover, +.button-3d.button-caution:focus { + -webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-caution:active, +.button-3d.button-caution.active, +.button-3d.button-caution.is-active { + -webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); +} + +.button-3d.button-royal { + -webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-royal:hover, +.button-3d.button-royal:focus { + -webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); +} + +.button-3d.button-royal:active, +.button-3d.button-royal.active, +.button-3d.button-royal.is-active { + -webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); +} + + +/* +* Glowing Buttons +* +* A pulse like glow that appears +* rythmically around the edges of +* a button. +*/ + + +/* +* Glow animation mixin for Compass users +* +*/ + + +/* +* Glowing Keyframes +* +*/ + +@-webkit-keyframes glowing { + from { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } +} + +@keyframes glowing { + from { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); + } +} + + +/* +* Glowing Keyframes for various colors +* +*/ + +@-webkit-keyframes glowing-primary { + from { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } +} + +@keyframes glowing-primary { + from { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); + } +} + +@-webkit-keyframes glowing-plain { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } +} + +@keyframes glowing-plain { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); + } +} + +@-webkit-keyframes glowing-inverse { + from { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } +} + +@keyframes glowing-inverse { + from { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); + } +} + +@-webkit-keyframes glowing-action { + from { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } +} + +@keyframes glowing-action { + from { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); + } +} + +@-webkit-keyframes glowing-highlight { + from { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } +} + +@keyframes glowing-highlight { + from { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); + } +} + +@-webkit-keyframes glowing-caution { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } +} + +@keyframes glowing-caution { + from { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); + } +} + +@-webkit-keyframes glowing-royal { + from { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } +} + +@keyframes glowing-royal { + from { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } + 50% { + -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); + } + to { + -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); + } +} + + +/* +* Glowing Buttons Base Styes +* +* A pulse like glow that appears +* rythmically around the edges of +* a button. +*/ + +.button-glow { + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: glowing; + animation-name: glowing; +} + +.button-glow:active, +.button-glow.active, +.button-glow.is-active { + -webkit-animation-name: none; + animation-name: none; +} + + +/* +* Glowing Button Colors +* +* Create colors for glowing buttons +*/ + +.button-glow.button-primary { + -webkit-animation-name: glowing-primary; + animation-name: glowing-primary; +} + +.button-glow.button-plain { + -webkit-animation-name: glowing-plain; + animation-name: glowing-plain; +} + +.button-glow.button-inverse { + -webkit-animation-name: glowing-inverse; + animation-name: glowing-inverse; +} + +.button-glow.button-action { + -webkit-animation-name: glowing-action; + animation-name: glowing-action; +} + +.button-glow.button-highlight { + -webkit-animation-name: glowing-highlight; + animation-name: glowing-highlight; +} + +.button-glow.button-caution { + -webkit-animation-name: glowing-caution; + animation-name: glowing-caution; +} + +.button-glow.button-royal { + -webkit-animation-name: glowing-royal; + animation-name: glowing-royal; +} + + +/* +* Dropdown menu buttons +* +* A dropdown menu appears +* when a button is pressed +*/ + + +/* +* Dropdown Container +* +*/ + +.button-dropdown { + position: relative; + overflow: visible; + display: inline-block; +} + + +/* +* Dropdown List Style +* +*/ + +.button-dropdown-list { + display: none; + position: absolute; + padding: 0; + margin: 0; + top: 0; + left: 0; + z-index: 1000; + min-width: 100%; + list-style-type: none; + background: rgba(255, 255, 255, 0.95); + border-style: solid; + border-width: 1px; + border-color: #d4d4d4; + font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); + border-radius: 3px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + /* + * Dropdown Below + * + */ + /* + * Dropdown Above + * + */ +} + +.button-dropdown-list.is-below { + top: 100%; + border-top: none; + border-radius: 0 0 3px 3px; +} + +.button-dropdown-list.is-above { + bottom: 100%; + top: auto; + border-bottom: none; + border-radius: 3px 3px 0 0; + -webkit-box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); + box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); +} + + +/* +* Dropdown Buttons +* +*/ + +.button-dropdown-list>li { + padding: 0; + margin: 0; + display: block; +} + +.button-dropdown-list>li>a { + display: block; + line-height: 40px; + font-size: 12.8px; + padding: 5px 10px; + float: none; + color: #666666; + text-decoration: none; +} + +.button-dropdown-list>li>a:hover { + color: #5e5e5e; + background: #f6f6f6; + text-decoration: none; +} + +.button-dropdown-divider { + border-top: 1px solid #e6e6e6; +} + + +/* +* Dropdown Colors +* +* Create colors for buttons +* (.button-primary, .button-secondary, etc.) +*/ + +.button-dropdown.button-dropdown-primary .button-dropdown-list { + background: rgba(27, 154, 247, 0.95); + border-color: #0880d7; +} + +.button-dropdown.button-dropdown-primary .button-dropdown-list .button-dropdown-divider { + border-color: #0888e6; +} + +.button-dropdown.button-dropdown-primary .button-dropdown-list>li>a { + color: white; +} + +.button-dropdown.button-dropdown-primary .button-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #088ef0; +} + +.button-dropdown.button-dropdown-plain .button-dropdown-list { + background: rgba(255, 255, 255, 0.95); + border-color: #e6e6e6; +} + +.button-dropdown.button-dropdown-plain .button-dropdown-list .button-dropdown-divider { + border-color: #ededed; +} + +.button-dropdown.button-dropdown-plain .button-dropdown-list>li>a { + color: #1b9af7; +} + +.button-dropdown.button-dropdown-plain .button-dropdown-list>li>a:hover { + color: #088ef0; + background: #f2f2f2; +} + +.button-dropdown.button-dropdown-inverse .button-dropdown-list { + background: rgba(34, 34, 34, 0.95); + border-color: #090909; +} + +.button-dropdown.button-dropdown-inverse .button-dropdown-list .button-dropdown-divider { + border-color: #101010; +} + +.button-dropdown.button-dropdown-inverse .button-dropdown-list>li>a { + color: #eeeeee; +} + +.button-dropdown.button-dropdown-inverse .button-dropdown-list>li>a:hover { + color: #e1e1e1; + background: #151515; +} + +.button-dropdown.button-dropdown-action .button-dropdown-list { + background: rgba(165, 222, 55, 0.95); + border-color: #8bc220; +} + +.button-dropdown.button-dropdown-action .button-dropdown-list .button-dropdown-divider { + border-color: #94cf22; +} + +.button-dropdown.button-dropdown-action .button-dropdown-list>li>a { + color: white; +} + +.button-dropdown.button-dropdown-action .button-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #9ad824; +} + +.button-dropdown.button-dropdown-highlight .button-dropdown-list { + background: rgba(254, 174, 27, 0.95); + border-color: #e59501; +} + +.button-dropdown.button-dropdown-highlight .button-dropdown-list .button-dropdown-divider { + border-color: #f49f01; +} + +.button-dropdown.button-dropdown-highlight .button-dropdown-list>li>a { + color: white; +} + +.button-dropdown.button-dropdown-highlight .button-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #fea502; +} + +.button-dropdown.button-dropdown-caution .button-dropdown-list { + background: rgba(255, 67, 81, 0.95); + border-color: #ff1022; +} + +.button-dropdown.button-dropdown-caution .button-dropdown-list .button-dropdown-divider { + border-color: #ff1f30; +} + +.button-dropdown.button-dropdown-caution .button-dropdown-list>li>a { + color: white; +} + +.button-dropdown.button-dropdown-caution .button-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #ff2939; +} + +.button-dropdown.button-dropdown-royal .button-dropdown-list { + background: rgba(123, 114, 233, 0.95); + border-color: #5246e2; +} + +.button-dropdown.button-dropdown-royal .button-dropdown-list .button-dropdown-divider { + border-color: #5e53e4; +} + +.button-dropdown.button-dropdown-royal .button-dropdown-list>li>a { + color: white; +} + +.button-dropdown.button-dropdown-royal .button-dropdown-list>li>a:hover { + color: #f2f2f2; + background: #665ce6; +} + + +/* +* Buton Groups +* +* A group of related buttons +* displayed edge to edge +*/ + +.button-group { + *zoom: 1; + position: relative; + display: inline-block; +} + +.button-group:after, +.button-group:before { + content: '.'; + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.button-group .button, +.button-group .button-dropdown { + float: left; +} + +.button-group .button:not(:first-child):not(:last-child), +.button-group .button-dropdown:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: none; +} + +.button-group .button:first-child, +.button-group .button-dropdown:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; +} + +.button-group .button:last-child, +.button-group .button-dropdown:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + + +/* +* Button Wrapper +* +* A wrap around effect to highlight +* the shape of the button and offer +* a subtle visual effect. +*/ + +.button-wrap { + border: 1px solid #e3e3e3; + display: inline-block; + padding: 9px; + background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(white)); + background: linear-gradient(#f2f2f2, white); + border-radius: 200px; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); +} + + +/* +* Long Shadow Buttons +* +* A visual effect adding a flat shadow to the text of a button +*/ + + +/* +* Long Shadow Function +* +* Loops $length times building a long shadow. Defaults downward right +*/ + + +/* +* LONG SHADOW MIXIN +* +*/ + + +/* +* Shadow Right +* +*/ + +.button-longshadow, +.button-longshadow-right { + overflow: hidden; +} + +.button-longshadow.button-primary, +.button-longshadow-right.button-primary { + text-shadow: 0px 0px #0880d7, 1px 1px #0880d7, 2px 2px #0880d7, 3px 3px #0880d7, 4px 4px #0880d7, 5px 5px #0880d7, 6px 6px #0880d7, 7px 7px #0880d7, 8px 8px #0880d7, 9px 9px #0880d7, 10px 10px #0880d7, 11px 11px #0880d7, 12px 12px #0880d7, 13px 13px #0880d7, 14px 14px #0880d7, 15px 15px #0880d7, 16px 16px #0880d7, 17px 17px #0880d7, 18px 18px #0880d7, 19px 19px #0880d7, 20px 20px #0880d7, 21px 21px #0880d7, 22px 22px #0880d7, 23px 23px #0880d7, 24px 24px #0880d7, 25px 25px #0880d7, 26px 26px #0880d7, 27px 27px #0880d7, 28px 28px #0880d7, 29px 29px #0880d7, 30px 30px #0880d7, 31px 31px #0880d7, 32px 32px #0880d7, 33px 33px #0880d7, 34px 34px #0880d7, 35px 35px #0880d7, 36px 36px #0880d7, 37px 37px #0880d7, 38px 38px #0880d7, 39px 39px #0880d7, 40px 40px #0880d7, 41px 41px #0880d7, 42px 42px #0880d7, 43px 43px #0880d7, 44px 44px #0880d7, 45px 45px #0880d7, 46px 46px #0880d7, 47px 47px #0880d7, 48px 48px #0880d7, 49px 49px #0880d7, 50px 50px #0880d7, 51px 51px #0880d7, 52px 52px #0880d7, 53px 53px #0880d7, 54px 54px #0880d7, 55px 55px #0880d7, 56px 56px #0880d7, 57px 57px #0880d7, 58px 58px #0880d7, 59px 59px #0880d7, 60px 60px #0880d7, 61px 61px #0880d7, 62px 62px #0880d7, 63px 63px #0880d7, 64px 64px #0880d7, 65px 65px #0880d7, 66px 66px #0880d7, 67px 67px #0880d7, 68px 68px #0880d7, 69px 69px #0880d7, 70px 70px #0880d7, 71px 71px #0880d7, 72px 72px #0880d7, 73px 73px #0880d7, 74px 74px #0880d7, 75px 75px #0880d7, 76px 76px #0880d7, 77px 77px #0880d7, 78px 78px #0880d7, 79px 79px #0880d7, 80px 80px #0880d7, 81px 81px #0880d7, 82px 82px #0880d7, 83px 83px #0880d7, 84px 84px #0880d7, 85px 85px #0880d7; +} + +.button-longshadow.button-primary:active, +.button-longshadow.button-primary.active, +.button-longshadow.button-primary.is-active, +.button-longshadow-right.button-primary:active, +.button-longshadow-right.button-primary.active, +.button-longshadow-right.button-primary.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-plain, +.button-longshadow-right.button-plain { + text-shadow: 0px 0px #e6e6e6, 1px 1px #e6e6e6, 2px 2px #e6e6e6, 3px 3px #e6e6e6, 4px 4px #e6e6e6, 5px 5px #e6e6e6, 6px 6px #e6e6e6, 7px 7px #e6e6e6, 8px 8px #e6e6e6, 9px 9px #e6e6e6, 10px 10px #e6e6e6, 11px 11px #e6e6e6, 12px 12px #e6e6e6, 13px 13px #e6e6e6, 14px 14px #e6e6e6, 15px 15px #e6e6e6, 16px 16px #e6e6e6, 17px 17px #e6e6e6, 18px 18px #e6e6e6, 19px 19px #e6e6e6, 20px 20px #e6e6e6, 21px 21px #e6e6e6, 22px 22px #e6e6e6, 23px 23px #e6e6e6, 24px 24px #e6e6e6, 25px 25px #e6e6e6, 26px 26px #e6e6e6, 27px 27px #e6e6e6, 28px 28px #e6e6e6, 29px 29px #e6e6e6, 30px 30px #e6e6e6, 31px 31px #e6e6e6, 32px 32px #e6e6e6, 33px 33px #e6e6e6, 34px 34px #e6e6e6, 35px 35px #e6e6e6, 36px 36px #e6e6e6, 37px 37px #e6e6e6, 38px 38px #e6e6e6, 39px 39px #e6e6e6, 40px 40px #e6e6e6, 41px 41px #e6e6e6, 42px 42px #e6e6e6, 43px 43px #e6e6e6, 44px 44px #e6e6e6, 45px 45px #e6e6e6, 46px 46px #e6e6e6, 47px 47px #e6e6e6, 48px 48px #e6e6e6, 49px 49px #e6e6e6, 50px 50px #e6e6e6, 51px 51px #e6e6e6, 52px 52px #e6e6e6, 53px 53px #e6e6e6, 54px 54px #e6e6e6, 55px 55px #e6e6e6, 56px 56px #e6e6e6, 57px 57px #e6e6e6, 58px 58px #e6e6e6, 59px 59px #e6e6e6, 60px 60px #e6e6e6, 61px 61px #e6e6e6, 62px 62px #e6e6e6, 63px 63px #e6e6e6, 64px 64px #e6e6e6, 65px 65px #e6e6e6, 66px 66px #e6e6e6, 67px 67px #e6e6e6, 68px 68px #e6e6e6, 69px 69px #e6e6e6, 70px 70px #e6e6e6, 71px 71px #e6e6e6, 72px 72px #e6e6e6, 73px 73px #e6e6e6, 74px 74px #e6e6e6, 75px 75px #e6e6e6, 76px 76px #e6e6e6, 77px 77px #e6e6e6, 78px 78px #e6e6e6, 79px 79px #e6e6e6, 80px 80px #e6e6e6, 81px 81px #e6e6e6, 82px 82px #e6e6e6, 83px 83px #e6e6e6, 84px 84px #e6e6e6, 85px 85px #e6e6e6; +} + +.button-longshadow.button-plain:active, +.button-longshadow.button-plain.active, +.button-longshadow.button-plain.is-active, +.button-longshadow-right.button-plain:active, +.button-longshadow-right.button-plain.active, +.button-longshadow-right.button-plain.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-inverse, +.button-longshadow-right.button-inverse { + text-shadow: 0px 0px #090909, 1px 1px #090909, 2px 2px #090909, 3px 3px #090909, 4px 4px #090909, 5px 5px #090909, 6px 6px #090909, 7px 7px #090909, 8px 8px #090909, 9px 9px #090909, 10px 10px #090909, 11px 11px #090909, 12px 12px #090909, 13px 13px #090909, 14px 14px #090909, 15px 15px #090909, 16px 16px #090909, 17px 17px #090909, 18px 18px #090909, 19px 19px #090909, 20px 20px #090909, 21px 21px #090909, 22px 22px #090909, 23px 23px #090909, 24px 24px #090909, 25px 25px #090909, 26px 26px #090909, 27px 27px #090909, 28px 28px #090909, 29px 29px #090909, 30px 30px #090909, 31px 31px #090909, 32px 32px #090909, 33px 33px #090909, 34px 34px #090909, 35px 35px #090909, 36px 36px #090909, 37px 37px #090909, 38px 38px #090909, 39px 39px #090909, 40px 40px #090909, 41px 41px #090909, 42px 42px #090909, 43px 43px #090909, 44px 44px #090909, 45px 45px #090909, 46px 46px #090909, 47px 47px #090909, 48px 48px #090909, 49px 49px #090909, 50px 50px #090909, 51px 51px #090909, 52px 52px #090909, 53px 53px #090909, 54px 54px #090909, 55px 55px #090909, 56px 56px #090909, 57px 57px #090909, 58px 58px #090909, 59px 59px #090909, 60px 60px #090909, 61px 61px #090909, 62px 62px #090909, 63px 63px #090909, 64px 64px #090909, 65px 65px #090909, 66px 66px #090909, 67px 67px #090909, 68px 68px #090909, 69px 69px #090909, 70px 70px #090909, 71px 71px #090909, 72px 72px #090909, 73px 73px #090909, 74px 74px #090909, 75px 75px #090909, 76px 76px #090909, 77px 77px #090909, 78px 78px #090909, 79px 79px #090909, 80px 80px #090909, 81px 81px #090909, 82px 82px #090909, 83px 83px #090909, 84px 84px #090909, 85px 85px #090909; +} + +.button-longshadow.button-inverse:active, +.button-longshadow.button-inverse.active, +.button-longshadow.button-inverse.is-active, +.button-longshadow-right.button-inverse:active, +.button-longshadow-right.button-inverse.active, +.button-longshadow-right.button-inverse.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-action, +.button-longshadow-right.button-action { + text-shadow: 0px 0px #8bc220, 1px 1px #8bc220, 2px 2px #8bc220, 3px 3px #8bc220, 4px 4px #8bc220, 5px 5px #8bc220, 6px 6px #8bc220, 7px 7px #8bc220, 8px 8px #8bc220, 9px 9px #8bc220, 10px 10px #8bc220, 11px 11px #8bc220, 12px 12px #8bc220, 13px 13px #8bc220, 14px 14px #8bc220, 15px 15px #8bc220, 16px 16px #8bc220, 17px 17px #8bc220, 18px 18px #8bc220, 19px 19px #8bc220, 20px 20px #8bc220, 21px 21px #8bc220, 22px 22px #8bc220, 23px 23px #8bc220, 24px 24px #8bc220, 25px 25px #8bc220, 26px 26px #8bc220, 27px 27px #8bc220, 28px 28px #8bc220, 29px 29px #8bc220, 30px 30px #8bc220, 31px 31px #8bc220, 32px 32px #8bc220, 33px 33px #8bc220, 34px 34px #8bc220, 35px 35px #8bc220, 36px 36px #8bc220, 37px 37px #8bc220, 38px 38px #8bc220, 39px 39px #8bc220, 40px 40px #8bc220, 41px 41px #8bc220, 42px 42px #8bc220, 43px 43px #8bc220, 44px 44px #8bc220, 45px 45px #8bc220, 46px 46px #8bc220, 47px 47px #8bc220, 48px 48px #8bc220, 49px 49px #8bc220, 50px 50px #8bc220, 51px 51px #8bc220, 52px 52px #8bc220, 53px 53px #8bc220, 54px 54px #8bc220, 55px 55px #8bc220, 56px 56px #8bc220, 57px 57px #8bc220, 58px 58px #8bc220, 59px 59px #8bc220, 60px 60px #8bc220, 61px 61px #8bc220, 62px 62px #8bc220, 63px 63px #8bc220, 64px 64px #8bc220, 65px 65px #8bc220, 66px 66px #8bc220, 67px 67px #8bc220, 68px 68px #8bc220, 69px 69px #8bc220, 70px 70px #8bc220, 71px 71px #8bc220, 72px 72px #8bc220, 73px 73px #8bc220, 74px 74px #8bc220, 75px 75px #8bc220, 76px 76px #8bc220, 77px 77px #8bc220, 78px 78px #8bc220, 79px 79px #8bc220, 80px 80px #8bc220, 81px 81px #8bc220, 82px 82px #8bc220, 83px 83px #8bc220, 84px 84px #8bc220, 85px 85px #8bc220; +} + +.button-longshadow.button-action:active, +.button-longshadow.button-action.active, +.button-longshadow.button-action.is-active, +.button-longshadow-right.button-action:active, +.button-longshadow-right.button-action.active, +.button-longshadow-right.button-action.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-highlight, +.button-longshadow-right.button-highlight { + text-shadow: 0px 0px #e59501, 1px 1px #e59501, 2px 2px #e59501, 3px 3px #e59501, 4px 4px #e59501, 5px 5px #e59501, 6px 6px #e59501, 7px 7px #e59501, 8px 8px #e59501, 9px 9px #e59501, 10px 10px #e59501, 11px 11px #e59501, 12px 12px #e59501, 13px 13px #e59501, 14px 14px #e59501, 15px 15px #e59501, 16px 16px #e59501, 17px 17px #e59501, 18px 18px #e59501, 19px 19px #e59501, 20px 20px #e59501, 21px 21px #e59501, 22px 22px #e59501, 23px 23px #e59501, 24px 24px #e59501, 25px 25px #e59501, 26px 26px #e59501, 27px 27px #e59501, 28px 28px #e59501, 29px 29px #e59501, 30px 30px #e59501, 31px 31px #e59501, 32px 32px #e59501, 33px 33px #e59501, 34px 34px #e59501, 35px 35px #e59501, 36px 36px #e59501, 37px 37px #e59501, 38px 38px #e59501, 39px 39px #e59501, 40px 40px #e59501, 41px 41px #e59501, 42px 42px #e59501, 43px 43px #e59501, 44px 44px #e59501, 45px 45px #e59501, 46px 46px #e59501, 47px 47px #e59501, 48px 48px #e59501, 49px 49px #e59501, 50px 50px #e59501, 51px 51px #e59501, 52px 52px #e59501, 53px 53px #e59501, 54px 54px #e59501, 55px 55px #e59501, 56px 56px #e59501, 57px 57px #e59501, 58px 58px #e59501, 59px 59px #e59501, 60px 60px #e59501, 61px 61px #e59501, 62px 62px #e59501, 63px 63px #e59501, 64px 64px #e59501, 65px 65px #e59501, 66px 66px #e59501, 67px 67px #e59501, 68px 68px #e59501, 69px 69px #e59501, 70px 70px #e59501, 71px 71px #e59501, 72px 72px #e59501, 73px 73px #e59501, 74px 74px #e59501, 75px 75px #e59501, 76px 76px #e59501, 77px 77px #e59501, 78px 78px #e59501, 79px 79px #e59501, 80px 80px #e59501, 81px 81px #e59501, 82px 82px #e59501, 83px 83px #e59501, 84px 84px #e59501, 85px 85px #e59501; +} + +.button-longshadow.button-highlight:active, +.button-longshadow.button-highlight.active, +.button-longshadow.button-highlight.is-active, +.button-longshadow-right.button-highlight:active, +.button-longshadow-right.button-highlight.active, +.button-longshadow-right.button-highlight.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-caution, +.button-longshadow-right.button-caution { + text-shadow: 0px 0px #ff1022, 1px 1px #ff1022, 2px 2px #ff1022, 3px 3px #ff1022, 4px 4px #ff1022, 5px 5px #ff1022, 6px 6px #ff1022, 7px 7px #ff1022, 8px 8px #ff1022, 9px 9px #ff1022, 10px 10px #ff1022, 11px 11px #ff1022, 12px 12px #ff1022, 13px 13px #ff1022, 14px 14px #ff1022, 15px 15px #ff1022, 16px 16px #ff1022, 17px 17px #ff1022, 18px 18px #ff1022, 19px 19px #ff1022, 20px 20px #ff1022, 21px 21px #ff1022, 22px 22px #ff1022, 23px 23px #ff1022, 24px 24px #ff1022, 25px 25px #ff1022, 26px 26px #ff1022, 27px 27px #ff1022, 28px 28px #ff1022, 29px 29px #ff1022, 30px 30px #ff1022, 31px 31px #ff1022, 32px 32px #ff1022, 33px 33px #ff1022, 34px 34px #ff1022, 35px 35px #ff1022, 36px 36px #ff1022, 37px 37px #ff1022, 38px 38px #ff1022, 39px 39px #ff1022, 40px 40px #ff1022, 41px 41px #ff1022, 42px 42px #ff1022, 43px 43px #ff1022, 44px 44px #ff1022, 45px 45px #ff1022, 46px 46px #ff1022, 47px 47px #ff1022, 48px 48px #ff1022, 49px 49px #ff1022, 50px 50px #ff1022, 51px 51px #ff1022, 52px 52px #ff1022, 53px 53px #ff1022, 54px 54px #ff1022, 55px 55px #ff1022, 56px 56px #ff1022, 57px 57px #ff1022, 58px 58px #ff1022, 59px 59px #ff1022, 60px 60px #ff1022, 61px 61px #ff1022, 62px 62px #ff1022, 63px 63px #ff1022, 64px 64px #ff1022, 65px 65px #ff1022, 66px 66px #ff1022, 67px 67px #ff1022, 68px 68px #ff1022, 69px 69px #ff1022, 70px 70px #ff1022, 71px 71px #ff1022, 72px 72px #ff1022, 73px 73px #ff1022, 74px 74px #ff1022, 75px 75px #ff1022, 76px 76px #ff1022, 77px 77px #ff1022, 78px 78px #ff1022, 79px 79px #ff1022, 80px 80px #ff1022, 81px 81px #ff1022, 82px 82px #ff1022, 83px 83px #ff1022, 84px 84px #ff1022, 85px 85px #ff1022; +} + +.button-longshadow.button-caution:active, +.button-longshadow.button-caution.active, +.button-longshadow.button-caution.is-active, +.button-longshadow-right.button-caution:active, +.button-longshadow-right.button-caution.active, +.button-longshadow-right.button-caution.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow.button-royal, +.button-longshadow-right.button-royal { + text-shadow: 0px 0px #5246e2, 1px 1px #5246e2, 2px 2px #5246e2, 3px 3px #5246e2, 4px 4px #5246e2, 5px 5px #5246e2, 6px 6px #5246e2, 7px 7px #5246e2, 8px 8px #5246e2, 9px 9px #5246e2, 10px 10px #5246e2, 11px 11px #5246e2, 12px 12px #5246e2, 13px 13px #5246e2, 14px 14px #5246e2, 15px 15px #5246e2, 16px 16px #5246e2, 17px 17px #5246e2, 18px 18px #5246e2, 19px 19px #5246e2, 20px 20px #5246e2, 21px 21px #5246e2, 22px 22px #5246e2, 23px 23px #5246e2, 24px 24px #5246e2, 25px 25px #5246e2, 26px 26px #5246e2, 27px 27px #5246e2, 28px 28px #5246e2, 29px 29px #5246e2, 30px 30px #5246e2, 31px 31px #5246e2, 32px 32px #5246e2, 33px 33px #5246e2, 34px 34px #5246e2, 35px 35px #5246e2, 36px 36px #5246e2, 37px 37px #5246e2, 38px 38px #5246e2, 39px 39px #5246e2, 40px 40px #5246e2, 41px 41px #5246e2, 42px 42px #5246e2, 43px 43px #5246e2, 44px 44px #5246e2, 45px 45px #5246e2, 46px 46px #5246e2, 47px 47px #5246e2, 48px 48px #5246e2, 49px 49px #5246e2, 50px 50px #5246e2, 51px 51px #5246e2, 52px 52px #5246e2, 53px 53px #5246e2, 54px 54px #5246e2, 55px 55px #5246e2, 56px 56px #5246e2, 57px 57px #5246e2, 58px 58px #5246e2, 59px 59px #5246e2, 60px 60px #5246e2, 61px 61px #5246e2, 62px 62px #5246e2, 63px 63px #5246e2, 64px 64px #5246e2, 65px 65px #5246e2, 66px 66px #5246e2, 67px 67px #5246e2, 68px 68px #5246e2, 69px 69px #5246e2, 70px 70px #5246e2, 71px 71px #5246e2, 72px 72px #5246e2, 73px 73px #5246e2, 74px 74px #5246e2, 75px 75px #5246e2, 76px 76px #5246e2, 77px 77px #5246e2, 78px 78px #5246e2, 79px 79px #5246e2, 80px 80px #5246e2, 81px 81px #5246e2, 82px 82px #5246e2, 83px 83px #5246e2, 84px 84px #5246e2, 85px 85px #5246e2; +} + +.button-longshadow.button-royal:active, +.button-longshadow.button-royal.active, +.button-longshadow.button-royal.is-active, +.button-longshadow-right.button-royal:active, +.button-longshadow-right.button-royal.active, +.button-longshadow-right.button-royal.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + + +/* +* Shadow Left +* +*/ + +.button-longshadow-left { + overflow: hidden; +} + +.button-longshadow-left.button-primary { + text-shadow: 0px 0px #0880d7, -1px 1px #0880d7, -2px 2px #0880d7, -3px 3px #0880d7, -4px 4px #0880d7, -5px 5px #0880d7, -6px 6px #0880d7, -7px 7px #0880d7, -8px 8px #0880d7, -9px 9px #0880d7, -10px 10px #0880d7, -11px 11px #0880d7, -12px 12px #0880d7, -13px 13px #0880d7, -14px 14px #0880d7, -15px 15px #0880d7, -16px 16px #0880d7, -17px 17px #0880d7, -18px 18px #0880d7, -19px 19px #0880d7, -20px 20px #0880d7, -21px 21px #0880d7, -22px 22px #0880d7, -23px 23px #0880d7, -24px 24px #0880d7, -25px 25px #0880d7, -26px 26px #0880d7, -27px 27px #0880d7, -28px 28px #0880d7, -29px 29px #0880d7, -30px 30px #0880d7, -31px 31px #0880d7, -32px 32px #0880d7, -33px 33px #0880d7, -34px 34px #0880d7, -35px 35px #0880d7, -36px 36px #0880d7, -37px 37px #0880d7, -38px 38px #0880d7, -39px 39px #0880d7, -40px 40px #0880d7, -41px 41px #0880d7, -42px 42px #0880d7, -43px 43px #0880d7, -44px 44px #0880d7, -45px 45px #0880d7, -46px 46px #0880d7, -47px 47px #0880d7, -48px 48px #0880d7, -49px 49px #0880d7, -50px 50px #0880d7, -51px 51px #0880d7, -52px 52px #0880d7, -53px 53px #0880d7, -54px 54px #0880d7, -55px 55px #0880d7, -56px 56px #0880d7, -57px 57px #0880d7, -58px 58px #0880d7, -59px 59px #0880d7, -60px 60px #0880d7, -61px 61px #0880d7, -62px 62px #0880d7, -63px 63px #0880d7, -64px 64px #0880d7, -65px 65px #0880d7, -66px 66px #0880d7, -67px 67px #0880d7, -68px 68px #0880d7, -69px 69px #0880d7, -70px 70px #0880d7, -71px 71px #0880d7, -72px 72px #0880d7, -73px 73px #0880d7, -74px 74px #0880d7, -75px 75px #0880d7, -76px 76px #0880d7, -77px 77px #0880d7, -78px 78px #0880d7, -79px 79px #0880d7, -80px 80px #0880d7, -81px 81px #0880d7, -82px 82px #0880d7, -83px 83px #0880d7, -84px 84px #0880d7, -85px 85px #0880d7; +} + +.button-longshadow-left.button-primary:active, +.button-longshadow-left.button-primary.active, +.button-longshadow-left.button-primary.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-plain { + text-shadow: 0px 0px #e6e6e6, -1px 1px #e6e6e6, -2px 2px #e6e6e6, -3px 3px #e6e6e6, -4px 4px #e6e6e6, -5px 5px #e6e6e6, -6px 6px #e6e6e6, -7px 7px #e6e6e6, -8px 8px #e6e6e6, -9px 9px #e6e6e6, -10px 10px #e6e6e6, -11px 11px #e6e6e6, -12px 12px #e6e6e6, -13px 13px #e6e6e6, -14px 14px #e6e6e6, -15px 15px #e6e6e6, -16px 16px #e6e6e6, -17px 17px #e6e6e6, -18px 18px #e6e6e6, -19px 19px #e6e6e6, -20px 20px #e6e6e6, -21px 21px #e6e6e6, -22px 22px #e6e6e6, -23px 23px #e6e6e6, -24px 24px #e6e6e6, -25px 25px #e6e6e6, -26px 26px #e6e6e6, -27px 27px #e6e6e6, -28px 28px #e6e6e6, -29px 29px #e6e6e6, -30px 30px #e6e6e6, -31px 31px #e6e6e6, -32px 32px #e6e6e6, -33px 33px #e6e6e6, -34px 34px #e6e6e6, -35px 35px #e6e6e6, -36px 36px #e6e6e6, -37px 37px #e6e6e6, -38px 38px #e6e6e6, -39px 39px #e6e6e6, -40px 40px #e6e6e6, -41px 41px #e6e6e6, -42px 42px #e6e6e6, -43px 43px #e6e6e6, -44px 44px #e6e6e6, -45px 45px #e6e6e6, -46px 46px #e6e6e6, -47px 47px #e6e6e6, -48px 48px #e6e6e6, -49px 49px #e6e6e6, -50px 50px #e6e6e6, -51px 51px #e6e6e6, -52px 52px #e6e6e6, -53px 53px #e6e6e6, -54px 54px #e6e6e6, -55px 55px #e6e6e6, -56px 56px #e6e6e6, -57px 57px #e6e6e6, -58px 58px #e6e6e6, -59px 59px #e6e6e6, -60px 60px #e6e6e6, -61px 61px #e6e6e6, -62px 62px #e6e6e6, -63px 63px #e6e6e6, -64px 64px #e6e6e6, -65px 65px #e6e6e6, -66px 66px #e6e6e6, -67px 67px #e6e6e6, -68px 68px #e6e6e6, -69px 69px #e6e6e6, -70px 70px #e6e6e6, -71px 71px #e6e6e6, -72px 72px #e6e6e6, -73px 73px #e6e6e6, -74px 74px #e6e6e6, -75px 75px #e6e6e6, -76px 76px #e6e6e6, -77px 77px #e6e6e6, -78px 78px #e6e6e6, -79px 79px #e6e6e6, -80px 80px #e6e6e6, -81px 81px #e6e6e6, -82px 82px #e6e6e6, -83px 83px #e6e6e6, -84px 84px #e6e6e6, -85px 85px #e6e6e6; +} + +.button-longshadow-left.button-plain:active, +.button-longshadow-left.button-plain.active, +.button-longshadow-left.button-plain.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-inverse { + text-shadow: 0px 0px #090909, -1px 1px #090909, -2px 2px #090909, -3px 3px #090909, -4px 4px #090909, -5px 5px #090909, -6px 6px #090909, -7px 7px #090909, -8px 8px #090909, -9px 9px #090909, -10px 10px #090909, -11px 11px #090909, -12px 12px #090909, -13px 13px #090909, -14px 14px #090909, -15px 15px #090909, -16px 16px #090909, -17px 17px #090909, -18px 18px #090909, -19px 19px #090909, -20px 20px #090909, -21px 21px #090909, -22px 22px #090909, -23px 23px #090909, -24px 24px #090909, -25px 25px #090909, -26px 26px #090909, -27px 27px #090909, -28px 28px #090909, -29px 29px #090909, -30px 30px #090909, -31px 31px #090909, -32px 32px #090909, -33px 33px #090909, -34px 34px #090909, -35px 35px #090909, -36px 36px #090909, -37px 37px #090909, -38px 38px #090909, -39px 39px #090909, -40px 40px #090909, -41px 41px #090909, -42px 42px #090909, -43px 43px #090909, -44px 44px #090909, -45px 45px #090909, -46px 46px #090909, -47px 47px #090909, -48px 48px #090909, -49px 49px #090909, -50px 50px #090909, -51px 51px #090909, -52px 52px #090909, -53px 53px #090909, -54px 54px #090909, -55px 55px #090909, -56px 56px #090909, -57px 57px #090909, -58px 58px #090909, -59px 59px #090909, -60px 60px #090909, -61px 61px #090909, -62px 62px #090909, -63px 63px #090909, -64px 64px #090909, -65px 65px #090909, -66px 66px #090909, -67px 67px #090909, -68px 68px #090909, -69px 69px #090909, -70px 70px #090909, -71px 71px #090909, -72px 72px #090909, -73px 73px #090909, -74px 74px #090909, -75px 75px #090909, -76px 76px #090909, -77px 77px #090909, -78px 78px #090909, -79px 79px #090909, -80px 80px #090909, -81px 81px #090909, -82px 82px #090909, -83px 83px #090909, -84px 84px #090909, -85px 85px #090909; +} + +.button-longshadow-left.button-inverse:active, +.button-longshadow-left.button-inverse.active, +.button-longshadow-left.button-inverse.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-action { + text-shadow: 0px 0px #8bc220, -1px 1px #8bc220, -2px 2px #8bc220, -3px 3px #8bc220, -4px 4px #8bc220, -5px 5px #8bc220, -6px 6px #8bc220, -7px 7px #8bc220, -8px 8px #8bc220, -9px 9px #8bc220, -10px 10px #8bc220, -11px 11px #8bc220, -12px 12px #8bc220, -13px 13px #8bc220, -14px 14px #8bc220, -15px 15px #8bc220, -16px 16px #8bc220, -17px 17px #8bc220, -18px 18px #8bc220, -19px 19px #8bc220, -20px 20px #8bc220, -21px 21px #8bc220, -22px 22px #8bc220, -23px 23px #8bc220, -24px 24px #8bc220, -25px 25px #8bc220, -26px 26px #8bc220, -27px 27px #8bc220, -28px 28px #8bc220, -29px 29px #8bc220, -30px 30px #8bc220, -31px 31px #8bc220, -32px 32px #8bc220, -33px 33px #8bc220, -34px 34px #8bc220, -35px 35px #8bc220, -36px 36px #8bc220, -37px 37px #8bc220, -38px 38px #8bc220, -39px 39px #8bc220, -40px 40px #8bc220, -41px 41px #8bc220, -42px 42px #8bc220, -43px 43px #8bc220, -44px 44px #8bc220, -45px 45px #8bc220, -46px 46px #8bc220, -47px 47px #8bc220, -48px 48px #8bc220, -49px 49px #8bc220, -50px 50px #8bc220, -51px 51px #8bc220, -52px 52px #8bc220, -53px 53px #8bc220, -54px 54px #8bc220, -55px 55px #8bc220, -56px 56px #8bc220, -57px 57px #8bc220, -58px 58px #8bc220, -59px 59px #8bc220, -60px 60px #8bc220, -61px 61px #8bc220, -62px 62px #8bc220, -63px 63px #8bc220, -64px 64px #8bc220, -65px 65px #8bc220, -66px 66px #8bc220, -67px 67px #8bc220, -68px 68px #8bc220, -69px 69px #8bc220, -70px 70px #8bc220, -71px 71px #8bc220, -72px 72px #8bc220, -73px 73px #8bc220, -74px 74px #8bc220, -75px 75px #8bc220, -76px 76px #8bc220, -77px 77px #8bc220, -78px 78px #8bc220, -79px 79px #8bc220, -80px 80px #8bc220, -81px 81px #8bc220, -82px 82px #8bc220, -83px 83px #8bc220, -84px 84px #8bc220, -85px 85px #8bc220; +} + +.button-longshadow-left.button-action:active, +.button-longshadow-left.button-action.active, +.button-longshadow-left.button-action.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-highlight { + text-shadow: 0px 0px #e59501, -1px 1px #e59501, -2px 2px #e59501, -3px 3px #e59501, -4px 4px #e59501, -5px 5px #e59501, -6px 6px #e59501, -7px 7px #e59501, -8px 8px #e59501, -9px 9px #e59501, -10px 10px #e59501, -11px 11px #e59501, -12px 12px #e59501, -13px 13px #e59501, -14px 14px #e59501, -15px 15px #e59501, -16px 16px #e59501, -17px 17px #e59501, -18px 18px #e59501, -19px 19px #e59501, -20px 20px #e59501, -21px 21px #e59501, -22px 22px #e59501, -23px 23px #e59501, -24px 24px #e59501, -25px 25px #e59501, -26px 26px #e59501, -27px 27px #e59501, -28px 28px #e59501, -29px 29px #e59501, -30px 30px #e59501, -31px 31px #e59501, -32px 32px #e59501, -33px 33px #e59501, -34px 34px #e59501, -35px 35px #e59501, -36px 36px #e59501, -37px 37px #e59501, -38px 38px #e59501, -39px 39px #e59501, -40px 40px #e59501, -41px 41px #e59501, -42px 42px #e59501, -43px 43px #e59501, -44px 44px #e59501, -45px 45px #e59501, -46px 46px #e59501, -47px 47px #e59501, -48px 48px #e59501, -49px 49px #e59501, -50px 50px #e59501, -51px 51px #e59501, -52px 52px #e59501, -53px 53px #e59501, -54px 54px #e59501, -55px 55px #e59501, -56px 56px #e59501, -57px 57px #e59501, -58px 58px #e59501, -59px 59px #e59501, -60px 60px #e59501, -61px 61px #e59501, -62px 62px #e59501, -63px 63px #e59501, -64px 64px #e59501, -65px 65px #e59501, -66px 66px #e59501, -67px 67px #e59501, -68px 68px #e59501, -69px 69px #e59501, -70px 70px #e59501, -71px 71px #e59501, -72px 72px #e59501, -73px 73px #e59501, -74px 74px #e59501, -75px 75px #e59501, -76px 76px #e59501, -77px 77px #e59501, -78px 78px #e59501, -79px 79px #e59501, -80px 80px #e59501, -81px 81px #e59501, -82px 82px #e59501, -83px 83px #e59501, -84px 84px #e59501, -85px 85px #e59501; +} + +.button-longshadow-left.button-highlight:active, +.button-longshadow-left.button-highlight.active, +.button-longshadow-left.button-highlight.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-caution { + text-shadow: 0px 0px #ff1022, -1px 1px #ff1022, -2px 2px #ff1022, -3px 3px #ff1022, -4px 4px #ff1022, -5px 5px #ff1022, -6px 6px #ff1022, -7px 7px #ff1022, -8px 8px #ff1022, -9px 9px #ff1022, -10px 10px #ff1022, -11px 11px #ff1022, -12px 12px #ff1022, -13px 13px #ff1022, -14px 14px #ff1022, -15px 15px #ff1022, -16px 16px #ff1022, -17px 17px #ff1022, -18px 18px #ff1022, -19px 19px #ff1022, -20px 20px #ff1022, -21px 21px #ff1022, -22px 22px #ff1022, -23px 23px #ff1022, -24px 24px #ff1022, -25px 25px #ff1022, -26px 26px #ff1022, -27px 27px #ff1022, -28px 28px #ff1022, -29px 29px #ff1022, -30px 30px #ff1022, -31px 31px #ff1022, -32px 32px #ff1022, -33px 33px #ff1022, -34px 34px #ff1022, -35px 35px #ff1022, -36px 36px #ff1022, -37px 37px #ff1022, -38px 38px #ff1022, -39px 39px #ff1022, -40px 40px #ff1022, -41px 41px #ff1022, -42px 42px #ff1022, -43px 43px #ff1022, -44px 44px #ff1022, -45px 45px #ff1022, -46px 46px #ff1022, -47px 47px #ff1022, -48px 48px #ff1022, -49px 49px #ff1022, -50px 50px #ff1022, -51px 51px #ff1022, -52px 52px #ff1022, -53px 53px #ff1022, -54px 54px #ff1022, -55px 55px #ff1022, -56px 56px #ff1022, -57px 57px #ff1022, -58px 58px #ff1022, -59px 59px #ff1022, -60px 60px #ff1022, -61px 61px #ff1022, -62px 62px #ff1022, -63px 63px #ff1022, -64px 64px #ff1022, -65px 65px #ff1022, -66px 66px #ff1022, -67px 67px #ff1022, -68px 68px #ff1022, -69px 69px #ff1022, -70px 70px #ff1022, -71px 71px #ff1022, -72px 72px #ff1022, -73px 73px #ff1022, -74px 74px #ff1022, -75px 75px #ff1022, -76px 76px #ff1022, -77px 77px #ff1022, -78px 78px #ff1022, -79px 79px #ff1022, -80px 80px #ff1022, -81px 81px #ff1022, -82px 82px #ff1022, -83px 83px #ff1022, -84px 84px #ff1022, -85px 85px #ff1022; +} + +.button-longshadow-left.button-caution:active, +.button-longshadow-left.button-caution.active, +.button-longshadow-left.button-caution.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.button-longshadow-left.button-royal { + text-shadow: 0px 0px #5246e2, -1px 1px #5246e2, -2px 2px #5246e2, -3px 3px #5246e2, -4px 4px #5246e2, -5px 5px #5246e2, -6px 6px #5246e2, -7px 7px #5246e2, -8px 8px #5246e2, -9px 9px #5246e2, -10px 10px #5246e2, -11px 11px #5246e2, -12px 12px #5246e2, -13px 13px #5246e2, -14px 14px #5246e2, -15px 15px #5246e2, -16px 16px #5246e2, -17px 17px #5246e2, -18px 18px #5246e2, -19px 19px #5246e2, -20px 20px #5246e2, -21px 21px #5246e2, -22px 22px #5246e2, -23px 23px #5246e2, -24px 24px #5246e2, -25px 25px #5246e2, -26px 26px #5246e2, -27px 27px #5246e2, -28px 28px #5246e2, -29px 29px #5246e2, -30px 30px #5246e2, -31px 31px #5246e2, -32px 32px #5246e2, -33px 33px #5246e2, -34px 34px #5246e2, -35px 35px #5246e2, -36px 36px #5246e2, -37px 37px #5246e2, -38px 38px #5246e2, -39px 39px #5246e2, -40px 40px #5246e2, -41px 41px #5246e2, -42px 42px #5246e2, -43px 43px #5246e2, -44px 44px #5246e2, -45px 45px #5246e2, -46px 46px #5246e2, -47px 47px #5246e2, -48px 48px #5246e2, -49px 49px #5246e2, -50px 50px #5246e2, -51px 51px #5246e2, -52px 52px #5246e2, -53px 53px #5246e2, -54px 54px #5246e2, -55px 55px #5246e2, -56px 56px #5246e2, -57px 57px #5246e2, -58px 58px #5246e2, -59px 59px #5246e2, -60px 60px #5246e2, -61px 61px #5246e2, -62px 62px #5246e2, -63px 63px #5246e2, -64px 64px #5246e2, -65px 65px #5246e2, -66px 66px #5246e2, -67px 67px #5246e2, -68px 68px #5246e2, -69px 69px #5246e2, -70px 70px #5246e2, -71px 71px #5246e2, -72px 72px #5246e2, -73px 73px #5246e2, -74px 74px #5246e2, -75px 75px #5246e2, -76px 76px #5246e2, -77px 77px #5246e2, -78px 78px #5246e2, -79px 79px #5246e2, -80px 80px #5246e2, -81px 81px #5246e2, -82px 82px #5246e2, -83px 83px #5246e2, -84px 84px #5246e2, -85px 85px #5246e2; +} + +.button-longshadow-left.button-royal:active, +.button-longshadow-left.button-royal.active, +.button-longshadow-left.button-royal.is-active { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); +} + + +/* +* Button Sizes +* +* This file creates the various button sizes +* (ex. .button-large, .button-small, etc.) +*/ + +.button-giant { + font-size: 28px; + height: 70px; + line-height: 70px; + padding: 0 70px; +} + +.button-jumbo { + font-size: 24px; + height: 60px; + line-height: 60px; + padding: 0 60px; +} + +.button-large { + font-size: 20px; + height: 50px; + line-height: 50px; + padding: 0 50px; +} + +.button-normal { + font-size: 16px; + height: 40px; + line-height: 40px; + padding: 0 40px; +} + +.button-small { + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 30px; +} + +.button-tiny { + font-size: 9.6px; + height: 24px; + line-height: 24px; + padding: 0 24px; +} \ No newline at end of file diff --git a/assets/css_firepress/buttons.min.css b/assets/css_firepress/buttons.min.css new file mode 100755 index 0000000..a2b619a --- /dev/null +++ b/assets/css_firepress/buttons.min.css @@ -0,0 +1 @@ +.button{color:#666;background-color:#eee;border-color:#eee;font-weight:300;font-size:16px;font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;text-decoration:none;text-align:center;line-height:40px;height:40px;padding:0 40px;margin:0;display:inline-block;appearance:none;cursor:pointer;border:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;margin-top:15px}.button:visited{color:#666}.button:hover,.button:focus{background-color:#f6f6f6;text-decoration:none;outline:none}.button:active,.button.active,.button.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.3);text-decoration:none;background-color:#eee;border-color:#cfcfcf;color:#d4d4d4;-webkit-transition-duration:0;transition-duration:0;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}.button.disabled,.button.is-disabled,.button:disabled{top:0!important;background:#EEE!important;border:1px solid #DDD!important;text-shadow:0 1px 1px #fff!important;color:#CCC!important;cursor:default!important;appearance:none!important}.button.disabled else,.button.is-disabled else,.button:disabled else{-webkit-box-shadow:none!important;box-shadow:none!important;opacity:.8!important}.button-uppercase{text-transform:uppercase}.button-lowercase{text-transform:lowercase}.button-capitalize{text-transform:capitalize}.button-small-caps{font-variant:small-caps}.button-icon-txt-large{font-size:36px!important}.button-width-small{padding:0 10px!important}.button-primary,.button-primary-flat{background-color:#1b9af7;border-color:#1b9af7;color:#fff}.button-primary:visited,.button-primary-flat:visited{color:#fff}.button-primary:hover,.button-primary:focus,.button-primary-flat:hover,.button-primary-flat:focus{background-color:#4cb0f9;border-color:#4cb0f9;color:#fff}.button-primary:active,.button-primary.active,.button-primary.is-active,.button-primary-flat:active,.button-primary-flat.active,.button-primary-flat.is-active{background-color:#2798eb;border-color:#2798eb;color:#0880d7}.button-plain,.button-plain-flat{background-color:#fff;border-color:#fff;color:#1b9af7}.button-plain:visited,.button-plain-flat:visited{color:#1b9af7}.button-plain:hover,.button-plain:focus,.button-plain-flat:hover,.button-plain-flat:focus{background-color:#fff;border-color:#fff;color:#1b9af7}.button-plain:active,.button-plain.active,.button-plain.is-active,.button-plain-flat:active,.button-plain-flat.active,.button-plain-flat.is-active{background-color:#fff;border-color:#fff;color:#e6e6e6}.button-inverse,.button-inverse-flat{background-color:#222;border-color:#222;color:#eee}.button-inverse:visited,.button-inverse-flat:visited{color:#eee}.button-inverse:hover,.button-inverse:focus,.button-inverse-flat:hover,.button-inverse-flat:focus{background-color:#3c3c3c;border-color:#3c3c3c;color:#eee}.button-inverse:active,.button-inverse.active,.button-inverse.is-active,.button-inverse-flat:active,.button-inverse-flat.active,.button-inverse-flat.is-active{background-color:#222;border-color:#222;color:#090909}.button-action,.button-action-flat{background-color:#a5de37;border-color:#a5de37;color:#fff}.button-action:visited,.button-action-flat:visited{color:#fff}.button-action:hover,.button-action:focus,.button-action-flat:hover,.button-action-flat:focus{background-color:#b9e563;border-color:#b9e563;color:#fff}.button-action:active,.button-action.active,.button-action.is-active,.button-action-flat:active,.button-action-flat.active,.button-action-flat.is-active{background-color:#a1d243;border-color:#a1d243;color:#8bc220}.button-highlight,.button-highlight-flat{background-color:#feae1b;border-color:#feae1b;color:#fff}.button-highlight:visited,.button-highlight-flat:visited{color:#fff}.button-highlight:hover,.button-highlight:focus,.button-highlight-flat:hover,.button-highlight-flat:focus{background-color:#fec04e;border-color:#fec04e;color:#fff}.button-highlight:active,.button-highlight.active,.button-highlight.is-active,.button-highlight-flat:active,.button-highlight-flat.active,.button-highlight-flat.is-active{background-color:#f3ab26;border-color:#f3ab26;color:#e59501}.button-caution,.button-caution-flat{background-color:#ff4351;border-color:#ff4351;color:#fff}.button-caution:visited,.button-caution-flat:visited{color:#fff}.button-caution:hover,.button-caution:focus,.button-caution-flat:hover,.button-caution-flat:focus{background-color:#ff7680;border-color:#ff7680;color:#fff}.button-caution:active,.button-caution.active,.button-caution.is-active,.button-caution-flat:active,.button-caution-flat.active,.button-caution-flat.is-active{background-color:#f64c59;border-color:#f64c59;color:#ff1022}.button-royal,.button-royal-flat{background-color:#7b72e9;border-color:#7b72e9;color:#fff}.button-royal:visited,.button-royal-flat:visited{color:#fff}.button-royal:hover,.button-royal:focus,.button-royal-flat:hover,.button-royal-flat:focus{background-color:#a49ef0;border-color:#a49ef0;color:#fff}.button-royal:active,.button-royal.active,.button-royal.is-active,.button-royal-flat:active,.button-royal-flat.active,.button-royal-flat.is-active{background-color:#827ae1;border-color:#827ae1;color:#5246e2}.button-block,.button-stacked{display:block}.button-square{border-radius:0}.button-box{border-radius:10px}.button-rounded{border-radius:4px}.button-pill{border-radius:200px}.button-circle{border-radius:100%}.button-circle,.button-box,.button-square{padding:0!important;width:40px}.button-circle.button-giant,.button-box.button-giant,.button-square.button-giant{width:70px}.button-circle.button-jumbo,.button-box.button-jumbo,.button-square.button-jumbo{width:60px}.button-circle.button-large,.button-box.button-large,.button-square.button-large{width:50px}.button-circle.button-normal,.button-box.button-normal,.button-square.button-normal{width:40px}.button-circle.button-small,.button-box.button-small,.button-square.button-small{width:30px}.button-circle.button-tiny,.button-box.button-tiny,.button-square.button-tiny{width:24px}.button-border,.button-border-thin,.button-border-thick{background:none;border-width:2px;border-style:solid;line-height:36px}.button-border:hover,.button-border-thin:hover,.button-border-thick:hover{background-color:rgba(255,255,255,0.9)}.button-border:active,.button-border-thin:active,.button-border-thick:active,.button-border.active,.active.button-border-thin,.active.button-border-thick,.button-border.is-active,.is-active.button-border-thin,.is-active.button-border-thick{-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s}.button-border-thin{border-width:1px}.button-border-thick{border-width:3px}.button-border.button-primary,.button-primary.button-border-thin,.button-primary.button-border-thick,.button-border-thin.button-primary,.button-border-thick.button-primary{color:#1b9af7}.button-border.button-primary:hover,.button-primary.button-border-thin:hover,.button-primary.button-border-thick:hover,.button-border.button-primary:focus,.button-primary.button-border-thin:focus,.button-primary.button-border-thick:focus,.button-border-thin.button-primary:hover,.button-border-thin.button-primary:focus,.button-border-thick.button-primary:hover,.button-border-thick.button-primary:focus{background-color:rgba(76,176,249,0.9);color:rgba(255,255,255,0.9)}.button-border.button-primary:active,.button-primary.button-border-thin:active,.button-primary.button-border-thick:active,.button-border.button-primary.active,.button-primary.active.button-border-thin,.button-primary.active.button-border-thick,.button-border.button-primary.is-active,.button-primary.is-active.button-border-thin,.button-primary.is-active.button-border-thick,.button-border-thin.button-primary:active,.button-border-thin.button-primary.active,.button-border-thin.button-primary.is-active,.button-border-thick.button-primary:active,.button-border-thick.button-primary.active,.button-border-thick.button-primary.is-active{background-color:rgba(39,152,235,0.7);color:rgba(255,255,255,0.5);opacity:.3}.button-border.button-plain,.button-plain.button-border-thin,.button-plain.button-border-thick,.button-border-thin.button-plain,.button-border-thick.button-plain{color:#fff}.button-border.button-plain:hover,.button-plain.button-border-thin:hover,.button-plain.button-border-thick:hover,.button-border.button-plain:focus,.button-plain.button-border-thin:focus,.button-plain.button-border-thick:focus,.button-border-thin.button-plain:hover,.button-border-thin.button-plain:focus,.button-border-thick.button-plain:hover,.button-border-thick.button-plain:focus{background-color:rgba(255,255,255,0.9);color:rgba(27,154,247,0.9)}.button-border.button-plain:active,.button-plain.button-border-thin:active,.button-plain.button-border-thick:active,.button-border.button-plain.active,.button-plain.active.button-border-thin,.button-plain.active.button-border-thick,.button-border.button-plain.is-active,.button-plain.is-active.button-border-thin,.button-plain.is-active.button-border-thick,.button-border-thin.button-plain:active,.button-border-thin.button-plain.active,.button-border-thin.button-plain.is-active,.button-border-thick.button-plain:active,.button-border-thick.button-plain.active,.button-border-thick.button-plain.is-active{background-color:rgba(255,255,255,0.7);color:rgba(27,154,247,0.5);opacity:.3}.button-border.button-inverse,.button-inverse.button-border-thin,.button-inverse.button-border-thick,.button-border-thin.button-inverse,.button-border-thick.button-inverse{color:#222}.button-border.button-inverse:hover,.button-inverse.button-border-thin:hover,.button-inverse.button-border-thick:hover,.button-border.button-inverse:focus,.button-inverse.button-border-thin:focus,.button-inverse.button-border-thick:focus,.button-border-thin.button-inverse:hover,.button-border-thin.button-inverse:focus,.button-border-thick.button-inverse:hover,.button-border-thick.button-inverse:focus{background-color:rgba(60,60,60,0.9);color:rgba(238,238,238,0.9)}.button-border.button-inverse:active,.button-inverse.button-border-thin:active,.button-inverse.button-border-thick:active,.button-border.button-inverse.active,.button-inverse.active.button-border-thin,.button-inverse.active.button-border-thick,.button-border.button-inverse.is-active,.button-inverse.is-active.button-border-thin,.button-inverse.is-active.button-border-thick,.button-border-thin.button-inverse:active,.button-border-thin.button-inverse.active,.button-border-thin.button-inverse.is-active,.button-border-thick.button-inverse:active,.button-border-thick.button-inverse.active,.button-border-thick.button-inverse.is-active{background-color:rgba(34,34,34,0.7);color:rgba(238,238,238,0.5);opacity:.3}.button-border.button-action,.button-action.button-border-thin,.button-action.button-border-thick,.button-border-thin.button-action,.button-border-thick.button-action{color:#a5de37}.button-border.button-action:hover,.button-action.button-border-thin:hover,.button-action.button-border-thick:hover,.button-border.button-action:focus,.button-action.button-border-thin:focus,.button-action.button-border-thick:focus,.button-border-thin.button-action:hover,.button-border-thin.button-action:focus,.button-border-thick.button-action:hover,.button-border-thick.button-action:focus{background-color:rgba(185,229,99,0.9);color:rgba(255,255,255,0.9)}.button-border.button-action:active,.button-action.button-border-thin:active,.button-action.button-border-thick:active,.button-border.button-action.active,.button-action.active.button-border-thin,.button-action.active.button-border-thick,.button-border.button-action.is-active,.button-action.is-active.button-border-thin,.button-action.is-active.button-border-thick,.button-border-thin.button-action:active,.button-border-thin.button-action.active,.button-border-thin.button-action.is-active,.button-border-thick.button-action:active,.button-border-thick.button-action.active,.button-border-thick.button-action.is-active{background-color:rgba(161,210,67,0.7);color:rgba(255,255,255,0.5);opacity:.3}.button-border.button-highlight,.button-highlight.button-border-thin,.button-highlight.button-border-thick,.button-border-thin.button-highlight,.button-border-thick.button-highlight{color:#feae1b}.button-border.button-highlight:hover,.button-highlight.button-border-thin:hover,.button-highlight.button-border-thick:hover,.button-border.button-highlight:focus,.button-highlight.button-border-thin:focus,.button-highlight.button-border-thick:focus,.button-border-thin.button-highlight:hover,.button-border-thin.button-highlight:focus,.button-border-thick.button-highlight:hover,.button-border-thick.button-highlight:focus{background-color:rgba(254,192,78,0.9);color:rgba(255,255,255,0.9)}.button-border.button-highlight:active,.button-highlight.button-border-thin:active,.button-highlight.button-border-thick:active,.button-border.button-highlight.active,.button-highlight.active.button-border-thin,.button-highlight.active.button-border-thick,.button-border.button-highlight.is-active,.button-highlight.is-active.button-border-thin,.button-highlight.is-active.button-border-thick,.button-border-thin.button-highlight:active,.button-border-thin.button-highlight.active,.button-border-thin.button-highlight.is-active,.button-border-thick.button-highlight:active,.button-border-thick.button-highlight.active,.button-border-thick.button-highlight.is-active{background-color:rgba(243,171,38,0.7);color:rgba(255,255,255,0.5);opacity:.3}.button-border.button-caution,.button-caution.button-border-thin,.button-caution.button-border-thick,.button-border-thin.button-caution,.button-border-thick.button-caution{color:#ff4351}.button-border.button-caution:hover,.button-caution.button-border-thin:hover,.button-caution.button-border-thick:hover,.button-border.button-caution:focus,.button-caution.button-border-thin:focus,.button-caution.button-border-thick:focus,.button-border-thin.button-caution:hover,.button-border-thin.button-caution:focus,.button-border-thick.button-caution:hover,.button-border-thick.button-caution:focus{background-color:rgba(255,118,128,0.9);color:rgba(255,255,255,0.9)}.button-border.button-caution:active,.button-caution.button-border-thin:active,.button-caution.button-border-thick:active,.button-border.button-caution.active,.button-caution.active.button-border-thin,.button-caution.active.button-border-thick,.button-border.button-caution.is-active,.button-caution.is-active.button-border-thin,.button-caution.is-active.button-border-thick,.button-border-thin.button-caution:active,.button-border-thin.button-caution.active,.button-border-thin.button-caution.is-active,.button-border-thick.button-caution:active,.button-border-thick.button-caution.active,.button-border-thick.button-caution.is-active{background-color:rgba(246,76,89,0.7);color:rgba(255,255,255,0.5);opacity:.3}.button-border.button-royal,.button-royal.button-border-thin,.button-royal.button-border-thick,.button-border-thin.button-royal,.button-border-thick.button-royal{color:#7b72e9}.button-border.button-royal:hover,.button-royal.button-border-thin:hover,.button-royal.button-border-thick:hover,.button-border.button-royal:focus,.button-royal.button-border-thin:focus,.button-royal.button-border-thick:focus,.button-border-thin.button-royal:hover,.button-border-thin.button-royal:focus,.button-border-thick.button-royal:hover,.button-border-thick.button-royal:focus{background-color:rgba(164,158,240,0.9);color:rgba(255,255,255,0.9)}.button-border.button-royal:active,.button-royal.button-border-thin:active,.button-royal.button-border-thick:active,.button-border.button-royal.active,.button-royal.active.button-border-thin,.button-royal.active.button-border-thick,.button-border.button-royal.is-active,.button-royal.is-active.button-border-thin,.button-royal.is-active.button-border-thick,.button-border-thin.button-royal:active,.button-border-thin.button-royal.active,.button-border-thin.button-royal.is-active,.button-border-thick.button-royal:active,.button-border-thick.button-royal.active,.button-border-thick.button-royal.is-active{background-color:rgba(130,122,225,0.7);color:rgba(255,255,255,0.5);opacity:.3}.button-border.button-giant,.button-giant.button-border-thin,.button-giant.button-border-thick,.button-border-thin.button-giant,.button-border-thick.button-giant{line-height:66px}.button-border.button-jumbo,.button-jumbo.button-border-thin,.button-jumbo.button-border-thick,.button-border-thin.button-jumbo,.button-border-thick.button-jumbo{line-height:56px}.button-border.button-large,.button-large.button-border-thin,.button-large.button-border-thick,.button-border-thin.button-large,.button-border-thick.button-large{line-height:46px}.button-border.button-normal,.button-normal.button-border-thin,.button-normal.button-border-thick,.button-border-thin.button-normal,.button-border-thick.button-normal{line-height:36px}.button-border.button-small,.button-small.button-border-thin,.button-small.button-border-thick,.button-border-thin.button-small,.button-border-thick.button-small{line-height:26px}.button-border.button-tiny,.button-tiny.button-border-thin,.button-tiny.button-border-thick,.button-border-thin.button-tiny,.button-border-thick.button-tiny{line-height:20px}.button-borderless{background:none;border:none;padding:0 8px!important;color:#eee;font-size:20.8px;font-weight:200}.button-borderless:hover,.button-borderless:focus{background:none}.button-borderless:active,.button-borderless.active,.button-borderless.is-active{-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;opacity:.3}.button-borderless.button-primary{color:#1b9af7}.button-borderless.button-plain{color:#fff}.button-borderless.button-inverse{color:#222}.button-borderless.button-action{color:#a5de37}.button-borderless.button-highlight{color:#feae1b}.button-borderless.button-caution{color:#ff4351}.button-borderless.button-royal{color:#7b72e9}.button-borderless.button-giant{font-size:36.4px;height:52.4px;line-height:52.4px}.button-borderless.button-jumbo{font-size:31.2px;height:47.2px;line-height:47.2px}.button-borderless.button-large{font-size:26px;height:42px;line-height:42px}.button-borderless.button-normal{font-size:20.8px;height:36.8px;line-height:36.8px}.button-borderless.button-small{font-size:15.6px;height:31.6px;line-height:31.6px}.button-borderless.button-tiny{font-size:12.48px;height:28.48px;line-height:28.48px}.button-raised{border-color:#e1e1e1;border-style:solid;border-width:1px;line-height:38px;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#e1e1e1));background:linear-gradient(#f6f6f6,#e1e1e1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.15);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.15)}.button-raised:hover,.button-raised:focus{background:-webkit-gradient(linear,left top,left bottom,from(white),to(gainsboro));background:linear-gradient(top,white,gainsboro)}.button-raised:active,.button-raised.active,.button-raised.is-active{background:#eee;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff}.button-raised.button-primary{border-color:#088ef0;background:-webkit-gradient(linear,left top,left bottom,from(#34a5f8),to(#088ef0));background:linear-gradient(#34a5f8,#088ef0)}.button-raised.button-primary:hover,.button-raised.button-primary:focus{background:-webkit-gradient(linear,left top,left bottom,from(#42abf8),to(#0888e6));background:linear-gradient(top,#42abf8,#0888e6)}.button-raised.button-primary:active,.button-raised.button-primary.active,.button-raised.button-primary.is-active{border-color:#0880d7;background:#2798eb}.button-raised.button-plain{border-color:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,from(white),to(#f2f2f2));background:linear-gradient(white,#f2f2f2)}.button-raised.button-plain:hover,.button-raised.button-plain:focus{background:-webkit-gradient(linear,left top,left bottom,from(white),to(#ededed));background:linear-gradient(top,white,#ededed)}.button-raised.button-plain:active,.button-raised.button-plain.active,.button-raised.button-plain.is-active{border-color:#e6e6e6;background:#fff}.button-raised.button-inverse{border-color:#151515;background:-webkit-gradient(linear,left top,left bottom,from(#2f2f2f),to(#151515));background:linear-gradient(#2f2f2f,#151515)}.button-raised.button-inverse:hover,.button-raised.button-inverse:focus{background:-webkit-gradient(linear,left top,left bottom,from(#363636),to(#101010));background:linear-gradient(top,#363636,#101010)}.button-raised.button-inverse:active,.button-raised.button-inverse.active,.button-raised.button-inverse.is-active{border-color:#090909;background:#222}.button-raised.button-action{border-color:#9ad824;background:-webkit-gradient(linear,left top,left bottom,from(#afe24d),to(#9ad824));background:linear-gradient(#afe24d,#9ad824)}.button-raised.button-action:hover,.button-raised.button-action:focus{background:-webkit-gradient(linear,left top,left bottom,from(#b5e45a),to(#94cf22));background:linear-gradient(top,#b5e45a,#94cf22)}.button-raised.button-action:active,.button-raised.button-action.active,.button-raised.button-action.is-active{border-color:#8bc220;background:#a1d243}.button-raised.button-highlight{border-color:#fea502;background:-webkit-gradient(linear,left top,left bottom,from(#feb734),to(#fea502));background:linear-gradient(#feb734,#fea502)}.button-raised.button-highlight:hover,.button-raised.button-highlight:focus{background:-webkit-gradient(linear,left top,left bottom,from(#febc44),to(#f49f01));background:linear-gradient(top,#febc44,#f49f01)}.button-raised.button-highlight:active,.button-raised.button-highlight.active,.button-raised.button-highlight.is-active{border-color:#e59501;background:#f3ab26}.button-raised.button-caution{border-color:#ff2939;background:-webkit-gradient(linear,left top,left bottom,from(#ff5c69),to(#ff2939));background:linear-gradient(#ff5c69,#ff2939)}.button-raised.button-caution:hover,.button-raised.button-caution:focus{background:-webkit-gradient(linear,left top,left bottom,from(#ff6c77),to(#ff1f30));background:linear-gradient(top,#ff6c77,#ff1f30)}.button-raised.button-caution:active,.button-raised.button-caution.active,.button-raised.button-caution.is-active{border-color:#ff1022;background:#f64c59}.button-raised.button-royal{border-color:#665ce6;background:-webkit-gradient(linear,left top,left bottom,from(#9088ec),to(#665ce6));background:linear-gradient(#9088ec,#665ce6)}.button-raised.button-royal:hover,.button-raised.button-royal:focus{background:-webkit-gradient(linear,left top,left bottom,from(#9c95ef),to(#5e53e4));background:linear-gradient(top,#9c95ef,#5e53e4)}.button-raised.button-royal:active,.button-raised.button-royal.active,.button-raised.button-royal.is-active{border-color:#5246e2;background:#827ae1}.button-3d{position:relative;top:0;-webkit-box-shadow:0 7px 0 #bbbbbb,0 8px 3px rgba(0,0,0,0.2);box-shadow:0 7px 0 #bbbbbb,0 8px 3px rgba(0,0,0,0.2)}.button-3d:hover,.button-3d:focus{-webkit-box-shadow:0 7px 0 #bbbbbb,0 8px 3px rgba(0,0,0,0.2);box-shadow:0 7px 0 #bbbbbb,0 8px 3px rgba(0,0,0,0.2)}.button-3d:active,.button-3d.active,.button-3d.is-active{top:5px;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-box-shadow:0 2px 0 #bbbbbb,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #bbbbbb,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-primary{-webkit-box-shadow:0 7px 0 #0880d7,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #0880d7,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-primary:hover,.button-3d.button-primary:focus{-webkit-box-shadow:0 7px 0 #077ace,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #077ace,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-primary:active,.button-3d.button-primary.active,.button-3d.button-primary.is-active{-webkit-box-shadow:0 2px 0 #0662a6,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #0662a6,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-plain{-webkit-box-shadow:0 7px 0 #e6e6e6,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #e6e6e6,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-plain:hover,.button-3d.button-plain:focus{-webkit-box-shadow:0 7px 0 #e0e0e0,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #e0e0e0,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-plain:active,.button-3d.button-plain.active,.button-3d.button-plain.is-active{-webkit-box-shadow:0 2px 0 #cccccc,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #cccccc,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-inverse{-webkit-box-shadow:0 7px 0 #090909,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #090909,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-inverse:hover,.button-3d.button-inverse:focus{-webkit-box-shadow:0 7px 0 #030303,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #030303,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-inverse:active,.button-3d.button-inverse.active,.button-3d.button-inverse.is-active{-webkit-box-shadow:0 2px 0 black,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 black,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-action{-webkit-box-shadow:0 7px 0 #8bc220,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #8bc220,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-action:hover,.button-3d.button-action:focus{-webkit-box-shadow:0 7px 0 #84b91f,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #84b91f,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-action:active,.button-3d.button-action.active,.button-3d.button-action.is-active{-webkit-box-shadow:0 2px 0 #6b9619,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #6b9619,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-highlight{-webkit-box-shadow:0 7px 0 #e59501,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #e59501,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-highlight:hover,.button-3d.button-highlight:focus{-webkit-box-shadow:0 7px 0 #db8e01,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #db8e01,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-highlight:active,.button-3d.button-highlight.active,.button-3d.button-highlight.is-active{-webkit-box-shadow:0 2px 0 #b27401,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #b27401,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-caution{-webkit-box-shadow:0 7px 0 #ff1022,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #ff1022,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-caution:hover,.button-3d.button-caution:focus{-webkit-box-shadow:0 7px 0 #ff0618,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #ff0618,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-caution:active,.button-3d.button-caution.active,.button-3d.button-caution.is-active{-webkit-box-shadow:0 2px 0 #dc0010,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #dc0010,0 3px 3px rgba(0,0,0,0.2)}.button-3d.button-royal{-webkit-box-shadow:0 7px 0 #5246e2,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #5246e2,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-royal:hover,.button-3d.button-royal:focus{-webkit-box-shadow:0 7px 0 #493de1,0 8px 3px rgba(0,0,0,0.3);box-shadow:0 7px 0 #493de1,0 8px 3px rgba(0,0,0,0.3)}.button-3d.button-royal:active,.button-3d.button-royal.active,.button-3d.button-royal.is-active{-webkit-box-shadow:0 2px 0 #2f21d4,0 3px 3px rgba(0,0,0,0.2);box-shadow:0 2px 0 #2f21d4,0 3px 3px rgba(0,0,0,0.2)}@-webkit-keyframes glowing{from{-webkit-box-shadow:0 0 0 rgba(44,154,219,0.3);box-shadow:0 0 0 rgba(44,154,219,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(44,154,219,0.8);box-shadow:0 0 20px rgba(44,154,219,0.8)}to{-webkit-box-shadow:0 0 0 rgba(44,154,219,0.3);box-shadow:0 0 0 rgba(44,154,219,0.3)}}@keyframes glowing{from{-webkit-box-shadow:0 0 0 rgba(44,154,219,0.3);box-shadow:0 0 0 rgba(44,154,219,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(44,154,219,0.8);box-shadow:0 0 20px rgba(44,154,219,0.8)}to{-webkit-box-shadow:0 0 0 rgba(44,154,219,0.3);box-shadow:0 0 0 rgba(44,154,219,0.3)}}@-webkit-keyframes glowing-primary{from{-webkit-box-shadow:0 0 0 rgba(27,154,247,0.3);box-shadow:0 0 0 rgba(27,154,247,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(27,154,247,0.8);box-shadow:0 0 20px rgba(27,154,247,0.8)}to{-webkit-box-shadow:0 0 0 rgba(27,154,247,0.3);box-shadow:0 0 0 rgba(27,154,247,0.3)}}@keyframes glowing-primary{from{-webkit-box-shadow:0 0 0 rgba(27,154,247,0.3);box-shadow:0 0 0 rgba(27,154,247,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(27,154,247,0.8);box-shadow:0 0 20px rgba(27,154,247,0.8)}to{-webkit-box-shadow:0 0 0 rgba(27,154,247,0.3);box-shadow:0 0 0 rgba(27,154,247,0.3)}}@-webkit-keyframes glowing-plain{from{-webkit-box-shadow:0 0 0 rgba(255,255,255,0.3);box-shadow:0 0 0 rgba(255,255,255,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,255,255,0.8);box-shadow:0 0 20px rgba(255,255,255,0.8)}to{-webkit-box-shadow:0 0 0 rgba(255,255,255,0.3);box-shadow:0 0 0 rgba(255,255,255,0.3)}}@keyframes glowing-plain{from{-webkit-box-shadow:0 0 0 rgba(255,255,255,0.3);box-shadow:0 0 0 rgba(255,255,255,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,255,255,0.8);box-shadow:0 0 20px rgba(255,255,255,0.8)}to{-webkit-box-shadow:0 0 0 rgba(255,255,255,0.3);box-shadow:0 0 0 rgba(255,255,255,0.3)}}@-webkit-keyframes glowing-inverse{from{-webkit-box-shadow:0 0 0 rgba(34,34,34,0.3);box-shadow:0 0 0 rgba(34,34,34,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(34,34,34,0.8);box-shadow:0 0 20px rgba(34,34,34,0.8)}to{-webkit-box-shadow:0 0 0 rgba(34,34,34,0.3);box-shadow:0 0 0 rgba(34,34,34,0.3)}}@keyframes glowing-inverse{from{-webkit-box-shadow:0 0 0 rgba(34,34,34,0.3);box-shadow:0 0 0 rgba(34,34,34,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(34,34,34,0.8);box-shadow:0 0 20px rgba(34,34,34,0.8)}to{-webkit-box-shadow:0 0 0 rgba(34,34,34,0.3);box-shadow:0 0 0 rgba(34,34,34,0.3)}}@-webkit-keyframes glowing-action{from{-webkit-box-shadow:0 0 0 rgba(165,222,55,0.3);box-shadow:0 0 0 rgba(165,222,55,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(165,222,55,0.8);box-shadow:0 0 20px rgba(165,222,55,0.8)}to{-webkit-box-shadow:0 0 0 rgba(165,222,55,0.3);box-shadow:0 0 0 rgba(165,222,55,0.3)}}@keyframes glowing-action{from{-webkit-box-shadow:0 0 0 rgba(165,222,55,0.3);box-shadow:0 0 0 rgba(165,222,55,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(165,222,55,0.8);box-shadow:0 0 20px rgba(165,222,55,0.8)}to{-webkit-box-shadow:0 0 0 rgba(165,222,55,0.3);box-shadow:0 0 0 rgba(165,222,55,0.3)}}@-webkit-keyframes glowing-highlight{from{-webkit-box-shadow:0 0 0 rgba(254,174,27,0.3);box-shadow:0 0 0 rgba(254,174,27,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(254,174,27,0.8);box-shadow:0 0 20px rgba(254,174,27,0.8)}to{-webkit-box-shadow:0 0 0 rgba(254,174,27,0.3);box-shadow:0 0 0 rgba(254,174,27,0.3)}}@keyframes glowing-highlight{from{-webkit-box-shadow:0 0 0 rgba(254,174,27,0.3);box-shadow:0 0 0 rgba(254,174,27,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(254,174,27,0.8);box-shadow:0 0 20px rgba(254,174,27,0.8)}to{-webkit-box-shadow:0 0 0 rgba(254,174,27,0.3);box-shadow:0 0 0 rgba(254,174,27,0.3)}}@-webkit-keyframes glowing-caution{from{-webkit-box-shadow:0 0 0 rgba(255,67,81,0.3);box-shadow:0 0 0 rgba(255,67,81,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,67,81,0.8);box-shadow:0 0 20px rgba(255,67,81,0.8)}to{-webkit-box-shadow:0 0 0 rgba(255,67,81,0.3);box-shadow:0 0 0 rgba(255,67,81,0.3)}}@keyframes glowing-caution{from{-webkit-box-shadow:0 0 0 rgba(255,67,81,0.3);box-shadow:0 0 0 rgba(255,67,81,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(255,67,81,0.8);box-shadow:0 0 20px rgba(255,67,81,0.8)}to{-webkit-box-shadow:0 0 0 rgba(255,67,81,0.3);box-shadow:0 0 0 rgba(255,67,81,0.3)}}@-webkit-keyframes glowing-royal{from{-webkit-box-shadow:0 0 0 rgba(123,114,233,0.3);box-shadow:0 0 0 rgba(123,114,233,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(123,114,233,0.8);box-shadow:0 0 20px rgba(123,114,233,0.8)}to{-webkit-box-shadow:0 0 0 rgba(123,114,233,0.3);box-shadow:0 0 0 rgba(123,114,233,0.3)}}@keyframes glowing-royal{from{-webkit-box-shadow:0 0 0 rgba(123,114,233,0.3);box-shadow:0 0 0 rgba(123,114,233,0.3)}50%{-webkit-box-shadow:0 0 20px rgba(123,114,233,0.8);box-shadow:0 0 20px rgba(123,114,233,0.8)}to{-webkit-box-shadow:0 0 0 rgba(123,114,233,0.3);box-shadow:0 0 0 rgba(123,114,233,0.3)}}.button-glow{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:glowing;animation-name:glowing}.button-glow:active,.button-glow.active,.button-glow.is-active{-webkit-animation-name:none;animation-name:none}.button-glow.button-primary{-webkit-animation-name:glowing-primary;animation-name:glowing-primary}.button-glow.button-plain{-webkit-animation-name:glowing-plain;animation-name:glowing-plain}.button-glow.button-inverse{-webkit-animation-name:glowing-inverse;animation-name:glowing-inverse}.button-glow.button-action{-webkit-animation-name:glowing-action;animation-name:glowing-action}.button-glow.button-highlight{-webkit-animation-name:glowing-highlight;animation-name:glowing-highlight}.button-glow.button-caution{-webkit-animation-name:glowing-caution;animation-name:glowing-caution}.button-glow.button-royal{-webkit-animation-name:glowing-royal;animation-name:glowing-royal}.button-dropdown{position:relative;overflow:visible;display:inline-block}.button-dropdown-list{display:none;position:absolute;padding:0;margin:0;top:0;left:0;z-index:1000;min-width:100%;list-style-type:none;background:rgba(255,255,255,0.95);border-style:solid;border-width:1px;border-color:#d4d4d4;font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;-webkit-box-shadow:0 2px 7px rgba(0,0,0,0.2);box-shadow:0 2px 7px rgba(0,0,0,0.2);border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.button-dropdown-list.is-below{top:100%;border-top:none;border-radius:0 0 3px 3px}.button-dropdown-list.is-above{bottom:100%;top:auto;border-bottom:none;border-radius:3px 3px 0 0;-webkit-box-shadow:0 -2px 7px rgba(0,0,0,0.2);box-shadow:0 -2px 7px rgba(0,0,0,0.2)}.button-dropdown-list>li{padding:0;margin:0;display:block}.button-dropdown-list>li>a{display:block;line-height:40px;font-size:12.8px;padding:5px 10px;float:none;color:#666;text-decoration:none}.button-dropdown-list>li>a:hover{color:#5e5e5e;background:#f6f6f6;text-decoration:none}.button-dropdown-divider{border-top:1px solid #e6e6e6}.button-dropdown.button-dropdown-primary .button-dropdown-list{background:rgba(27,154,247,0.95);border-color:#0880d7}.button-dropdown.button-dropdown-primary .button-dropdown-list .button-dropdown-divider{border-color:#0888e6}.button-dropdown.button-dropdown-primary .button-dropdown-list>li>a{color:#fff}.button-dropdown.button-dropdown-primary .button-dropdown-list>li>a:hover{color:#f2f2f2;background:#088ef0}.button-dropdown.button-dropdown-plain .button-dropdown-list{background:rgba(255,255,255,0.95);border-color:#e6e6e6}.button-dropdown.button-dropdown-plain .button-dropdown-list .button-dropdown-divider{border-color:#ededed}.button-dropdown.button-dropdown-plain .button-dropdown-list>li>a{color:#1b9af7}.button-dropdown.button-dropdown-plain .button-dropdown-list>li>a:hover{color:#088ef0;background:#f2f2f2}.button-dropdown.button-dropdown-inverse .button-dropdown-list{background:rgba(34,34,34,0.95);border-color:#090909}.button-dropdown.button-dropdown-inverse .button-dropdown-list .button-dropdown-divider{border-color:#101010}.button-dropdown.button-dropdown-inverse .button-dropdown-list>li>a{color:#eee}.button-dropdown.button-dropdown-inverse .button-dropdown-list>li>a:hover{color:#e1e1e1;background:#151515}.button-dropdown.button-dropdown-action .button-dropdown-list{background:rgba(165,222,55,0.95);border-color:#8bc220}.button-dropdown.button-dropdown-action .button-dropdown-list .button-dropdown-divider{border-color:#94cf22}.button-dropdown.button-dropdown-action .button-dropdown-list>li>a{color:#fff}.button-dropdown.button-dropdown-action .button-dropdown-list>li>a:hover{color:#f2f2f2;background:#9ad824}.button-dropdown.button-dropdown-highlight .button-dropdown-list{background:rgba(254,174,27,0.95);border-color:#e59501}.button-dropdown.button-dropdown-highlight .button-dropdown-list .button-dropdown-divider{border-color:#f49f01}.button-dropdown.button-dropdown-highlight .button-dropdown-list>li>a{color:#fff}.button-dropdown.button-dropdown-highlight .button-dropdown-list>li>a:hover{color:#f2f2f2;background:#fea502}.button-dropdown.button-dropdown-caution .button-dropdown-list{background:rgba(255,67,81,0.95);border-color:#ff1022}.button-dropdown.button-dropdown-caution .button-dropdown-list .button-dropdown-divider{border-color:#ff1f30}.button-dropdown.button-dropdown-caution .button-dropdown-list>li>a{color:#fff}.button-dropdown.button-dropdown-caution .button-dropdown-list>li>a:hover{color:#f2f2f2;background:#ff2939}.button-dropdown.button-dropdown-royal .button-dropdown-list{background:rgba(123,114,233,0.95);border-color:#5246e2}.button-dropdown.button-dropdown-royal .button-dropdown-list .button-dropdown-divider{border-color:#5e53e4}.button-dropdown.button-dropdown-royal .button-dropdown-list>li>a{color:#fff}.button-dropdown.button-dropdown-royal .button-dropdown-list>li>a:hover{color:#f2f2f2;background:#665ce6}.button-group{*zoom:1;position:relative;display:inline-block}.button-group:after,.button-group:before{content:'.';clear:both;display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}.button-group .button,.button-group .button-dropdown{float:left}.button-group .button:not(:first-child):not(:last-child),.button-group .button-dropdown:not(:first-child):not(:last-child){border-radius:0;border-right:none}.button-group .button:first-child,.button-group .button-dropdown:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.button-group .button:last-child,.button-group .button-dropdown:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.button-wrap{border:1px solid #e3e3e3;display:inline-block;padding:9px;background:-webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(white));background:linear-gradient(#f2f2f2,white);border-radius:200px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);box-shadow:inset 0 1px 3px rgba(0,0,0,0.04)}.button-longshadow,.button-longshadow-right{overflow:hidden}.button-longshadow.button-primary,.button-longshadow-right.button-primary{text-shadow:0 0 #0880d7,1px 1px #0880d7,2px 2px #0880d7,3px 3px #0880d7,4px 4px #0880d7,5px 5px #0880d7,6px 6px #0880d7,7px 7px #0880d7,8px 8px #0880d7,9px 9px #0880d7,10px 10px #0880d7,11px 11px #0880d7,12px 12px #0880d7,13px 13px #0880d7,14px 14px #0880d7,15px 15px #0880d7,16px 16px #0880d7,17px 17px #0880d7,18px 18px #0880d7,19px 19px #0880d7,20px 20px #0880d7,21px 21px #0880d7,22px 22px #0880d7,23px 23px #0880d7,24px 24px #0880d7,25px 25px #0880d7,26px 26px #0880d7,27px 27px #0880d7,28px 28px #0880d7,29px 29px #0880d7,30px 30px #0880d7,31px 31px #0880d7,32px 32px #0880d7,33px 33px #0880d7,34px 34px #0880d7,35px 35px #0880d7,36px 36px #0880d7,37px 37px #0880d7,38px 38px #0880d7,39px 39px #0880d7,40px 40px #0880d7,41px 41px #0880d7,42px 42px #0880d7,43px 43px #0880d7,44px 44px #0880d7,45px 45px #0880d7,46px 46px #0880d7,47px 47px #0880d7,48px 48px #0880d7,49px 49px #0880d7,50px 50px #0880d7,51px 51px #0880d7,52px 52px #0880d7,53px 53px #0880d7,54px 54px #0880d7,55px 55px #0880d7,56px 56px #0880d7,57px 57px #0880d7,58px 58px #0880d7,59px 59px #0880d7,60px 60px #0880d7,61px 61px #0880d7,62px 62px #0880d7,63px 63px #0880d7,64px 64px #0880d7,65px 65px #0880d7,66px 66px #0880d7,67px 67px #0880d7,68px 68px #0880d7,69px 69px #0880d7,70px 70px #0880d7,71px 71px #0880d7,72px 72px #0880d7,73px 73px #0880d7,74px 74px #0880d7,75px 75px #0880d7,76px 76px #0880d7,77px 77px #0880d7,78px 78px #0880d7,79px 79px #0880d7,80px 80px #0880d7,81px 81px #0880d7,82px 82px #0880d7,83px 83px #0880d7,84px 84px #0880d7,85px 85px #0880d7}.button-longshadow.button-primary:active,.button-longshadow.button-primary.active,.button-longshadow.button-primary.is-active,.button-longshadow-right.button-primary:active,.button-longshadow-right.button-primary.active,.button-longshadow-right.button-primary.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-plain,.button-longshadow-right.button-plain{text-shadow:0 0 #e6e6e6,1px 1px #e6e6e6,2px 2px #e6e6e6,3px 3px #e6e6e6,4px 4px #e6e6e6,5px 5px #e6e6e6,6px 6px #e6e6e6,7px 7px #e6e6e6,8px 8px #e6e6e6,9px 9px #e6e6e6,10px 10px #e6e6e6,11px 11px #e6e6e6,12px 12px #e6e6e6,13px 13px #e6e6e6,14px 14px #e6e6e6,15px 15px #e6e6e6,16px 16px #e6e6e6,17px 17px #e6e6e6,18px 18px #e6e6e6,19px 19px #e6e6e6,20px 20px #e6e6e6,21px 21px #e6e6e6,22px 22px #e6e6e6,23px 23px #e6e6e6,24px 24px #e6e6e6,25px 25px #e6e6e6,26px 26px #e6e6e6,27px 27px #e6e6e6,28px 28px #e6e6e6,29px 29px #e6e6e6,30px 30px #e6e6e6,31px 31px #e6e6e6,32px 32px #e6e6e6,33px 33px #e6e6e6,34px 34px #e6e6e6,35px 35px #e6e6e6,36px 36px #e6e6e6,37px 37px #e6e6e6,38px 38px #e6e6e6,39px 39px #e6e6e6,40px 40px #e6e6e6,41px 41px #e6e6e6,42px 42px #e6e6e6,43px 43px #e6e6e6,44px 44px #e6e6e6,45px 45px #e6e6e6,46px 46px #e6e6e6,47px 47px #e6e6e6,48px 48px #e6e6e6,49px 49px #e6e6e6,50px 50px #e6e6e6,51px 51px #e6e6e6,52px 52px #e6e6e6,53px 53px #e6e6e6,54px 54px #e6e6e6,55px 55px #e6e6e6,56px 56px #e6e6e6,57px 57px #e6e6e6,58px 58px #e6e6e6,59px 59px #e6e6e6,60px 60px #e6e6e6,61px 61px #e6e6e6,62px 62px #e6e6e6,63px 63px #e6e6e6,64px 64px #e6e6e6,65px 65px #e6e6e6,66px 66px #e6e6e6,67px 67px #e6e6e6,68px 68px #e6e6e6,69px 69px #e6e6e6,70px 70px #e6e6e6,71px 71px #e6e6e6,72px 72px #e6e6e6,73px 73px #e6e6e6,74px 74px #e6e6e6,75px 75px #e6e6e6,76px 76px #e6e6e6,77px 77px #e6e6e6,78px 78px #e6e6e6,79px 79px #e6e6e6,80px 80px #e6e6e6,81px 81px #e6e6e6,82px 82px #e6e6e6,83px 83px #e6e6e6,84px 84px #e6e6e6,85px 85px #e6e6e6}.button-longshadow.button-plain:active,.button-longshadow.button-plain.active,.button-longshadow.button-plain.is-active,.button-longshadow-right.button-plain:active,.button-longshadow-right.button-plain.active,.button-longshadow-right.button-plain.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-inverse,.button-longshadow-right.button-inverse{text-shadow:0 0 #090909,1px 1px #090909,2px 2px #090909,3px 3px #090909,4px 4px #090909,5px 5px #090909,6px 6px #090909,7px 7px #090909,8px 8px #090909,9px 9px #090909,10px 10px #090909,11px 11px #090909,12px 12px #090909,13px 13px #090909,14px 14px #090909,15px 15px #090909,16px 16px #090909,17px 17px #090909,18px 18px #090909,19px 19px #090909,20px 20px #090909,21px 21px #090909,22px 22px #090909,23px 23px #090909,24px 24px #090909,25px 25px #090909,26px 26px #090909,27px 27px #090909,28px 28px #090909,29px 29px #090909,30px 30px #090909,31px 31px #090909,32px 32px #090909,33px 33px #090909,34px 34px #090909,35px 35px #090909,36px 36px #090909,37px 37px #090909,38px 38px #090909,39px 39px #090909,40px 40px #090909,41px 41px #090909,42px 42px #090909,43px 43px #090909,44px 44px #090909,45px 45px #090909,46px 46px #090909,47px 47px #090909,48px 48px #090909,49px 49px #090909,50px 50px #090909,51px 51px #090909,52px 52px #090909,53px 53px #090909,54px 54px #090909,55px 55px #090909,56px 56px #090909,57px 57px #090909,58px 58px #090909,59px 59px #090909,60px 60px #090909,61px 61px #090909,62px 62px #090909,63px 63px #090909,64px 64px #090909,65px 65px #090909,66px 66px #090909,67px 67px #090909,68px 68px #090909,69px 69px #090909,70px 70px #090909,71px 71px #090909,72px 72px #090909,73px 73px #090909,74px 74px #090909,75px 75px #090909,76px 76px #090909,77px 77px #090909,78px 78px #090909,79px 79px #090909,80px 80px #090909,81px 81px #090909,82px 82px #090909,83px 83px #090909,84px 84px #090909,85px 85px #090909}.button-longshadow.button-inverse:active,.button-longshadow.button-inverse.active,.button-longshadow.button-inverse.is-active,.button-longshadow-right.button-inverse:active,.button-longshadow-right.button-inverse.active,.button-longshadow-right.button-inverse.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-action,.button-longshadow-right.button-action{text-shadow:0 0 #8bc220,1px 1px #8bc220,2px 2px #8bc220,3px 3px #8bc220,4px 4px #8bc220,5px 5px #8bc220,6px 6px #8bc220,7px 7px #8bc220,8px 8px #8bc220,9px 9px #8bc220,10px 10px #8bc220,11px 11px #8bc220,12px 12px #8bc220,13px 13px #8bc220,14px 14px #8bc220,15px 15px #8bc220,16px 16px #8bc220,17px 17px #8bc220,18px 18px #8bc220,19px 19px #8bc220,20px 20px #8bc220,21px 21px #8bc220,22px 22px #8bc220,23px 23px #8bc220,24px 24px #8bc220,25px 25px #8bc220,26px 26px #8bc220,27px 27px #8bc220,28px 28px #8bc220,29px 29px #8bc220,30px 30px #8bc220,31px 31px #8bc220,32px 32px #8bc220,33px 33px #8bc220,34px 34px #8bc220,35px 35px #8bc220,36px 36px #8bc220,37px 37px #8bc220,38px 38px #8bc220,39px 39px #8bc220,40px 40px #8bc220,41px 41px #8bc220,42px 42px #8bc220,43px 43px #8bc220,44px 44px #8bc220,45px 45px #8bc220,46px 46px #8bc220,47px 47px #8bc220,48px 48px #8bc220,49px 49px #8bc220,50px 50px #8bc220,51px 51px #8bc220,52px 52px #8bc220,53px 53px #8bc220,54px 54px #8bc220,55px 55px #8bc220,56px 56px #8bc220,57px 57px #8bc220,58px 58px #8bc220,59px 59px #8bc220,60px 60px #8bc220,61px 61px #8bc220,62px 62px #8bc220,63px 63px #8bc220,64px 64px #8bc220,65px 65px #8bc220,66px 66px #8bc220,67px 67px #8bc220,68px 68px #8bc220,69px 69px #8bc220,70px 70px #8bc220,71px 71px #8bc220,72px 72px #8bc220,73px 73px #8bc220,74px 74px #8bc220,75px 75px #8bc220,76px 76px #8bc220,77px 77px #8bc220,78px 78px #8bc220,79px 79px #8bc220,80px 80px #8bc220,81px 81px #8bc220,82px 82px #8bc220,83px 83px #8bc220,84px 84px #8bc220,85px 85px #8bc220}.button-longshadow.button-action:active,.button-longshadow.button-action.active,.button-longshadow.button-action.is-active,.button-longshadow-right.button-action:active,.button-longshadow-right.button-action.active,.button-longshadow-right.button-action.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-highlight,.button-longshadow-right.button-highlight{text-shadow:0 0 #e59501,1px 1px #e59501,2px 2px #e59501,3px 3px #e59501,4px 4px #e59501,5px 5px #e59501,6px 6px #e59501,7px 7px #e59501,8px 8px #e59501,9px 9px #e59501,10px 10px #e59501,11px 11px #e59501,12px 12px #e59501,13px 13px #e59501,14px 14px #e59501,15px 15px #e59501,16px 16px #e59501,17px 17px #e59501,18px 18px #e59501,19px 19px #e59501,20px 20px #e59501,21px 21px #e59501,22px 22px #e59501,23px 23px #e59501,24px 24px #e59501,25px 25px #e59501,26px 26px #e59501,27px 27px #e59501,28px 28px #e59501,29px 29px #e59501,30px 30px #e59501,31px 31px #e59501,32px 32px #e59501,33px 33px #e59501,34px 34px #e59501,35px 35px #e59501,36px 36px #e59501,37px 37px #e59501,38px 38px #e59501,39px 39px #e59501,40px 40px #e59501,41px 41px #e59501,42px 42px #e59501,43px 43px #e59501,44px 44px #e59501,45px 45px #e59501,46px 46px #e59501,47px 47px #e59501,48px 48px #e59501,49px 49px #e59501,50px 50px #e59501,51px 51px #e59501,52px 52px #e59501,53px 53px #e59501,54px 54px #e59501,55px 55px #e59501,56px 56px #e59501,57px 57px #e59501,58px 58px #e59501,59px 59px #e59501,60px 60px #e59501,61px 61px #e59501,62px 62px #e59501,63px 63px #e59501,64px 64px #e59501,65px 65px #e59501,66px 66px #e59501,67px 67px #e59501,68px 68px #e59501,69px 69px #e59501,70px 70px #e59501,71px 71px #e59501,72px 72px #e59501,73px 73px #e59501,74px 74px #e59501,75px 75px #e59501,76px 76px #e59501,77px 77px #e59501,78px 78px #e59501,79px 79px #e59501,80px 80px #e59501,81px 81px #e59501,82px 82px #e59501,83px 83px #e59501,84px 84px #e59501,85px 85px #e59501}.button-longshadow.button-highlight:active,.button-longshadow.button-highlight.active,.button-longshadow.button-highlight.is-active,.button-longshadow-right.button-highlight:active,.button-longshadow-right.button-highlight.active,.button-longshadow-right.button-highlight.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-caution,.button-longshadow-right.button-caution{text-shadow:0 0 #ff1022,1px 1px #ff1022,2px 2px #ff1022,3px 3px #ff1022,4px 4px #ff1022,5px 5px #ff1022,6px 6px #ff1022,7px 7px #ff1022,8px 8px #ff1022,9px 9px #ff1022,10px 10px #ff1022,11px 11px #ff1022,12px 12px #ff1022,13px 13px #ff1022,14px 14px #ff1022,15px 15px #ff1022,16px 16px #ff1022,17px 17px #ff1022,18px 18px #ff1022,19px 19px #ff1022,20px 20px #ff1022,21px 21px #ff1022,22px 22px #ff1022,23px 23px #ff1022,24px 24px #ff1022,25px 25px #ff1022,26px 26px #ff1022,27px 27px #ff1022,28px 28px #ff1022,29px 29px #ff1022,30px 30px #ff1022,31px 31px #ff1022,32px 32px #ff1022,33px 33px #ff1022,34px 34px #ff1022,35px 35px #ff1022,36px 36px #ff1022,37px 37px #ff1022,38px 38px #ff1022,39px 39px #ff1022,40px 40px #ff1022,41px 41px #ff1022,42px 42px #ff1022,43px 43px #ff1022,44px 44px #ff1022,45px 45px #ff1022,46px 46px #ff1022,47px 47px #ff1022,48px 48px #ff1022,49px 49px #ff1022,50px 50px #ff1022,51px 51px #ff1022,52px 52px #ff1022,53px 53px #ff1022,54px 54px #ff1022,55px 55px #ff1022,56px 56px #ff1022,57px 57px #ff1022,58px 58px #ff1022,59px 59px #ff1022,60px 60px #ff1022,61px 61px #ff1022,62px 62px #ff1022,63px 63px #ff1022,64px 64px #ff1022,65px 65px #ff1022,66px 66px #ff1022,67px 67px #ff1022,68px 68px #ff1022,69px 69px #ff1022,70px 70px #ff1022,71px 71px #ff1022,72px 72px #ff1022,73px 73px #ff1022,74px 74px #ff1022,75px 75px #ff1022,76px 76px #ff1022,77px 77px #ff1022,78px 78px #ff1022,79px 79px #ff1022,80px 80px #ff1022,81px 81px #ff1022,82px 82px #ff1022,83px 83px #ff1022,84px 84px #ff1022,85px 85px #ff1022}.button-longshadow.button-caution:active,.button-longshadow.button-caution.active,.button-longshadow.button-caution.is-active,.button-longshadow-right.button-caution:active,.button-longshadow-right.button-caution.active,.button-longshadow-right.button-caution.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow.button-royal,.button-longshadow-right.button-royal{text-shadow:0 0 #5246e2,1px 1px #5246e2,2px 2px #5246e2,3px 3px #5246e2,4px 4px #5246e2,5px 5px #5246e2,6px 6px #5246e2,7px 7px #5246e2,8px 8px #5246e2,9px 9px #5246e2,10px 10px #5246e2,11px 11px #5246e2,12px 12px #5246e2,13px 13px #5246e2,14px 14px #5246e2,15px 15px #5246e2,16px 16px #5246e2,17px 17px #5246e2,18px 18px #5246e2,19px 19px #5246e2,20px 20px #5246e2,21px 21px #5246e2,22px 22px #5246e2,23px 23px #5246e2,24px 24px #5246e2,25px 25px #5246e2,26px 26px #5246e2,27px 27px #5246e2,28px 28px #5246e2,29px 29px #5246e2,30px 30px #5246e2,31px 31px #5246e2,32px 32px #5246e2,33px 33px #5246e2,34px 34px #5246e2,35px 35px #5246e2,36px 36px #5246e2,37px 37px #5246e2,38px 38px #5246e2,39px 39px #5246e2,40px 40px #5246e2,41px 41px #5246e2,42px 42px #5246e2,43px 43px #5246e2,44px 44px #5246e2,45px 45px #5246e2,46px 46px #5246e2,47px 47px #5246e2,48px 48px #5246e2,49px 49px #5246e2,50px 50px #5246e2,51px 51px #5246e2,52px 52px #5246e2,53px 53px #5246e2,54px 54px #5246e2,55px 55px #5246e2,56px 56px #5246e2,57px 57px #5246e2,58px 58px #5246e2,59px 59px #5246e2,60px 60px #5246e2,61px 61px #5246e2,62px 62px #5246e2,63px 63px #5246e2,64px 64px #5246e2,65px 65px #5246e2,66px 66px #5246e2,67px 67px #5246e2,68px 68px #5246e2,69px 69px #5246e2,70px 70px #5246e2,71px 71px #5246e2,72px 72px #5246e2,73px 73px #5246e2,74px 74px #5246e2,75px 75px #5246e2,76px 76px #5246e2,77px 77px #5246e2,78px 78px #5246e2,79px 79px #5246e2,80px 80px #5246e2,81px 81px #5246e2,82px 82px #5246e2,83px 83px #5246e2,84px 84px #5246e2,85px 85px #5246e2}.button-longshadow.button-royal:active,.button-longshadow.button-royal.active,.button-longshadow.button-royal.is-active,.button-longshadow-right.button-royal:active,.button-longshadow-right.button-royal.active,.button-longshadow-right.button-royal.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left{overflow:hidden}.button-longshadow-left.button-primary{text-shadow:0 0 #0880d7,-1px 1px #0880d7,-2px 2px #0880d7,-3px 3px #0880d7,-4px 4px #0880d7,-5px 5px #0880d7,-6px 6px #0880d7,-7px 7px #0880d7,-8px 8px #0880d7,-9px 9px #0880d7,-10px 10px #0880d7,-11px 11px #0880d7,-12px 12px #0880d7,-13px 13px #0880d7,-14px 14px #0880d7,-15px 15px #0880d7,-16px 16px #0880d7,-17px 17px #0880d7,-18px 18px #0880d7,-19px 19px #0880d7,-20px 20px #0880d7,-21px 21px #0880d7,-22px 22px #0880d7,-23px 23px #0880d7,-24px 24px #0880d7,-25px 25px #0880d7,-26px 26px #0880d7,-27px 27px #0880d7,-28px 28px #0880d7,-29px 29px #0880d7,-30px 30px #0880d7,-31px 31px #0880d7,-32px 32px #0880d7,-33px 33px #0880d7,-34px 34px #0880d7,-35px 35px #0880d7,-36px 36px #0880d7,-37px 37px #0880d7,-38px 38px #0880d7,-39px 39px #0880d7,-40px 40px #0880d7,-41px 41px #0880d7,-42px 42px #0880d7,-43px 43px #0880d7,-44px 44px #0880d7,-45px 45px #0880d7,-46px 46px #0880d7,-47px 47px #0880d7,-48px 48px #0880d7,-49px 49px #0880d7,-50px 50px #0880d7,-51px 51px #0880d7,-52px 52px #0880d7,-53px 53px #0880d7,-54px 54px #0880d7,-55px 55px #0880d7,-56px 56px #0880d7,-57px 57px #0880d7,-58px 58px #0880d7,-59px 59px #0880d7,-60px 60px #0880d7,-61px 61px #0880d7,-62px 62px #0880d7,-63px 63px #0880d7,-64px 64px #0880d7,-65px 65px #0880d7,-66px 66px #0880d7,-67px 67px #0880d7,-68px 68px #0880d7,-69px 69px #0880d7,-70px 70px #0880d7,-71px 71px #0880d7,-72px 72px #0880d7,-73px 73px #0880d7,-74px 74px #0880d7,-75px 75px #0880d7,-76px 76px #0880d7,-77px 77px #0880d7,-78px 78px #0880d7,-79px 79px #0880d7,-80px 80px #0880d7,-81px 81px #0880d7,-82px 82px #0880d7,-83px 83px #0880d7,-84px 84px #0880d7,-85px 85px #0880d7}.button-longshadow-left.button-primary:active,.button-longshadow-left.button-primary.active,.button-longshadow-left.button-primary.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-plain{text-shadow:0 0 #e6e6e6,-1px 1px #e6e6e6,-2px 2px #e6e6e6,-3px 3px #e6e6e6,-4px 4px #e6e6e6,-5px 5px #e6e6e6,-6px 6px #e6e6e6,-7px 7px #e6e6e6,-8px 8px #e6e6e6,-9px 9px #e6e6e6,-10px 10px #e6e6e6,-11px 11px #e6e6e6,-12px 12px #e6e6e6,-13px 13px #e6e6e6,-14px 14px #e6e6e6,-15px 15px #e6e6e6,-16px 16px #e6e6e6,-17px 17px #e6e6e6,-18px 18px #e6e6e6,-19px 19px #e6e6e6,-20px 20px #e6e6e6,-21px 21px #e6e6e6,-22px 22px #e6e6e6,-23px 23px #e6e6e6,-24px 24px #e6e6e6,-25px 25px #e6e6e6,-26px 26px #e6e6e6,-27px 27px #e6e6e6,-28px 28px #e6e6e6,-29px 29px #e6e6e6,-30px 30px #e6e6e6,-31px 31px #e6e6e6,-32px 32px #e6e6e6,-33px 33px #e6e6e6,-34px 34px #e6e6e6,-35px 35px #e6e6e6,-36px 36px #e6e6e6,-37px 37px #e6e6e6,-38px 38px #e6e6e6,-39px 39px #e6e6e6,-40px 40px #e6e6e6,-41px 41px #e6e6e6,-42px 42px #e6e6e6,-43px 43px #e6e6e6,-44px 44px #e6e6e6,-45px 45px #e6e6e6,-46px 46px #e6e6e6,-47px 47px #e6e6e6,-48px 48px #e6e6e6,-49px 49px #e6e6e6,-50px 50px #e6e6e6,-51px 51px #e6e6e6,-52px 52px #e6e6e6,-53px 53px #e6e6e6,-54px 54px #e6e6e6,-55px 55px #e6e6e6,-56px 56px #e6e6e6,-57px 57px #e6e6e6,-58px 58px #e6e6e6,-59px 59px #e6e6e6,-60px 60px #e6e6e6,-61px 61px #e6e6e6,-62px 62px #e6e6e6,-63px 63px #e6e6e6,-64px 64px #e6e6e6,-65px 65px #e6e6e6,-66px 66px #e6e6e6,-67px 67px #e6e6e6,-68px 68px #e6e6e6,-69px 69px #e6e6e6,-70px 70px #e6e6e6,-71px 71px #e6e6e6,-72px 72px #e6e6e6,-73px 73px #e6e6e6,-74px 74px #e6e6e6,-75px 75px #e6e6e6,-76px 76px #e6e6e6,-77px 77px #e6e6e6,-78px 78px #e6e6e6,-79px 79px #e6e6e6,-80px 80px #e6e6e6,-81px 81px #e6e6e6,-82px 82px #e6e6e6,-83px 83px #e6e6e6,-84px 84px #e6e6e6,-85px 85px #e6e6e6}.button-longshadow-left.button-plain:active,.button-longshadow-left.button-plain.active,.button-longshadow-left.button-plain.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-inverse{text-shadow:0 0 #090909,-1px 1px #090909,-2px 2px #090909,-3px 3px #090909,-4px 4px #090909,-5px 5px #090909,-6px 6px #090909,-7px 7px #090909,-8px 8px #090909,-9px 9px #090909,-10px 10px #090909,-11px 11px #090909,-12px 12px #090909,-13px 13px #090909,-14px 14px #090909,-15px 15px #090909,-16px 16px #090909,-17px 17px #090909,-18px 18px #090909,-19px 19px #090909,-20px 20px #090909,-21px 21px #090909,-22px 22px #090909,-23px 23px #090909,-24px 24px #090909,-25px 25px #090909,-26px 26px #090909,-27px 27px #090909,-28px 28px #090909,-29px 29px #090909,-30px 30px #090909,-31px 31px #090909,-32px 32px #090909,-33px 33px #090909,-34px 34px #090909,-35px 35px #090909,-36px 36px #090909,-37px 37px #090909,-38px 38px #090909,-39px 39px #090909,-40px 40px #090909,-41px 41px #090909,-42px 42px #090909,-43px 43px #090909,-44px 44px #090909,-45px 45px #090909,-46px 46px #090909,-47px 47px #090909,-48px 48px #090909,-49px 49px #090909,-50px 50px #090909,-51px 51px #090909,-52px 52px #090909,-53px 53px #090909,-54px 54px #090909,-55px 55px #090909,-56px 56px #090909,-57px 57px #090909,-58px 58px #090909,-59px 59px #090909,-60px 60px #090909,-61px 61px #090909,-62px 62px #090909,-63px 63px #090909,-64px 64px #090909,-65px 65px #090909,-66px 66px #090909,-67px 67px #090909,-68px 68px #090909,-69px 69px #090909,-70px 70px #090909,-71px 71px #090909,-72px 72px #090909,-73px 73px #090909,-74px 74px #090909,-75px 75px #090909,-76px 76px #090909,-77px 77px #090909,-78px 78px #090909,-79px 79px #090909,-80px 80px #090909,-81px 81px #090909,-82px 82px #090909,-83px 83px #090909,-84px 84px #090909,-85px 85px #090909}.button-longshadow-left.button-inverse:active,.button-longshadow-left.button-inverse.active,.button-longshadow-left.button-inverse.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-action{text-shadow:0 0 #8bc220,-1px 1px #8bc220,-2px 2px #8bc220,-3px 3px #8bc220,-4px 4px #8bc220,-5px 5px #8bc220,-6px 6px #8bc220,-7px 7px #8bc220,-8px 8px #8bc220,-9px 9px #8bc220,-10px 10px #8bc220,-11px 11px #8bc220,-12px 12px #8bc220,-13px 13px #8bc220,-14px 14px #8bc220,-15px 15px #8bc220,-16px 16px #8bc220,-17px 17px #8bc220,-18px 18px #8bc220,-19px 19px #8bc220,-20px 20px #8bc220,-21px 21px #8bc220,-22px 22px #8bc220,-23px 23px #8bc220,-24px 24px #8bc220,-25px 25px #8bc220,-26px 26px #8bc220,-27px 27px #8bc220,-28px 28px #8bc220,-29px 29px #8bc220,-30px 30px #8bc220,-31px 31px #8bc220,-32px 32px #8bc220,-33px 33px #8bc220,-34px 34px #8bc220,-35px 35px #8bc220,-36px 36px #8bc220,-37px 37px #8bc220,-38px 38px #8bc220,-39px 39px #8bc220,-40px 40px #8bc220,-41px 41px #8bc220,-42px 42px #8bc220,-43px 43px #8bc220,-44px 44px #8bc220,-45px 45px #8bc220,-46px 46px #8bc220,-47px 47px #8bc220,-48px 48px #8bc220,-49px 49px #8bc220,-50px 50px #8bc220,-51px 51px #8bc220,-52px 52px #8bc220,-53px 53px #8bc220,-54px 54px #8bc220,-55px 55px #8bc220,-56px 56px #8bc220,-57px 57px #8bc220,-58px 58px #8bc220,-59px 59px #8bc220,-60px 60px #8bc220,-61px 61px #8bc220,-62px 62px #8bc220,-63px 63px #8bc220,-64px 64px #8bc220,-65px 65px #8bc220,-66px 66px #8bc220,-67px 67px #8bc220,-68px 68px #8bc220,-69px 69px #8bc220,-70px 70px #8bc220,-71px 71px #8bc220,-72px 72px #8bc220,-73px 73px #8bc220,-74px 74px #8bc220,-75px 75px #8bc220,-76px 76px #8bc220,-77px 77px #8bc220,-78px 78px #8bc220,-79px 79px #8bc220,-80px 80px #8bc220,-81px 81px #8bc220,-82px 82px #8bc220,-83px 83px #8bc220,-84px 84px #8bc220,-85px 85px #8bc220}.button-longshadow-left.button-action:active,.button-longshadow-left.button-action.active,.button-longshadow-left.button-action.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-highlight{text-shadow:0 0 #e59501,-1px 1px #e59501,-2px 2px #e59501,-3px 3px #e59501,-4px 4px #e59501,-5px 5px #e59501,-6px 6px #e59501,-7px 7px #e59501,-8px 8px #e59501,-9px 9px #e59501,-10px 10px #e59501,-11px 11px #e59501,-12px 12px #e59501,-13px 13px #e59501,-14px 14px #e59501,-15px 15px #e59501,-16px 16px #e59501,-17px 17px #e59501,-18px 18px #e59501,-19px 19px #e59501,-20px 20px #e59501,-21px 21px #e59501,-22px 22px #e59501,-23px 23px #e59501,-24px 24px #e59501,-25px 25px #e59501,-26px 26px #e59501,-27px 27px #e59501,-28px 28px #e59501,-29px 29px #e59501,-30px 30px #e59501,-31px 31px #e59501,-32px 32px #e59501,-33px 33px #e59501,-34px 34px #e59501,-35px 35px #e59501,-36px 36px #e59501,-37px 37px #e59501,-38px 38px #e59501,-39px 39px #e59501,-40px 40px #e59501,-41px 41px #e59501,-42px 42px #e59501,-43px 43px #e59501,-44px 44px #e59501,-45px 45px #e59501,-46px 46px #e59501,-47px 47px #e59501,-48px 48px #e59501,-49px 49px #e59501,-50px 50px #e59501,-51px 51px #e59501,-52px 52px #e59501,-53px 53px #e59501,-54px 54px #e59501,-55px 55px #e59501,-56px 56px #e59501,-57px 57px #e59501,-58px 58px #e59501,-59px 59px #e59501,-60px 60px #e59501,-61px 61px #e59501,-62px 62px #e59501,-63px 63px #e59501,-64px 64px #e59501,-65px 65px #e59501,-66px 66px #e59501,-67px 67px #e59501,-68px 68px #e59501,-69px 69px #e59501,-70px 70px #e59501,-71px 71px #e59501,-72px 72px #e59501,-73px 73px #e59501,-74px 74px #e59501,-75px 75px #e59501,-76px 76px #e59501,-77px 77px #e59501,-78px 78px #e59501,-79px 79px #e59501,-80px 80px #e59501,-81px 81px #e59501,-82px 82px #e59501,-83px 83px #e59501,-84px 84px #e59501,-85px 85px #e59501}.button-longshadow-left.button-highlight:active,.button-longshadow-left.button-highlight.active,.button-longshadow-left.button-highlight.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-caution{text-shadow:0 0 #ff1022,-1px 1px #ff1022,-2px 2px #ff1022,-3px 3px #ff1022,-4px 4px #ff1022,-5px 5px #ff1022,-6px 6px #ff1022,-7px 7px #ff1022,-8px 8px #ff1022,-9px 9px #ff1022,-10px 10px #ff1022,-11px 11px #ff1022,-12px 12px #ff1022,-13px 13px #ff1022,-14px 14px #ff1022,-15px 15px #ff1022,-16px 16px #ff1022,-17px 17px #ff1022,-18px 18px #ff1022,-19px 19px #ff1022,-20px 20px #ff1022,-21px 21px #ff1022,-22px 22px #ff1022,-23px 23px #ff1022,-24px 24px #ff1022,-25px 25px #ff1022,-26px 26px #ff1022,-27px 27px #ff1022,-28px 28px #ff1022,-29px 29px #ff1022,-30px 30px #ff1022,-31px 31px #ff1022,-32px 32px #ff1022,-33px 33px #ff1022,-34px 34px #ff1022,-35px 35px #ff1022,-36px 36px #ff1022,-37px 37px #ff1022,-38px 38px #ff1022,-39px 39px #ff1022,-40px 40px #ff1022,-41px 41px #ff1022,-42px 42px #ff1022,-43px 43px #ff1022,-44px 44px #ff1022,-45px 45px #ff1022,-46px 46px #ff1022,-47px 47px #ff1022,-48px 48px #ff1022,-49px 49px #ff1022,-50px 50px #ff1022,-51px 51px #ff1022,-52px 52px #ff1022,-53px 53px #ff1022,-54px 54px #ff1022,-55px 55px #ff1022,-56px 56px #ff1022,-57px 57px #ff1022,-58px 58px #ff1022,-59px 59px #ff1022,-60px 60px #ff1022,-61px 61px #ff1022,-62px 62px #ff1022,-63px 63px #ff1022,-64px 64px #ff1022,-65px 65px #ff1022,-66px 66px #ff1022,-67px 67px #ff1022,-68px 68px #ff1022,-69px 69px #ff1022,-70px 70px #ff1022,-71px 71px #ff1022,-72px 72px #ff1022,-73px 73px #ff1022,-74px 74px #ff1022,-75px 75px #ff1022,-76px 76px #ff1022,-77px 77px #ff1022,-78px 78px #ff1022,-79px 79px #ff1022,-80px 80px #ff1022,-81px 81px #ff1022,-82px 82px #ff1022,-83px 83px #ff1022,-84px 84px #ff1022,-85px 85px #ff1022}.button-longshadow-left.button-caution:active,.button-longshadow-left.button-caution.active,.button-longshadow-left.button-caution.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-longshadow-left.button-royal{text-shadow:0 0 #5246e2,-1px 1px #5246e2,-2px 2px #5246e2,-3px 3px #5246e2,-4px 4px #5246e2,-5px 5px #5246e2,-6px 6px #5246e2,-7px 7px #5246e2,-8px 8px #5246e2,-9px 9px #5246e2,-10px 10px #5246e2,-11px 11px #5246e2,-12px 12px #5246e2,-13px 13px #5246e2,-14px 14px #5246e2,-15px 15px #5246e2,-16px 16px #5246e2,-17px 17px #5246e2,-18px 18px #5246e2,-19px 19px #5246e2,-20px 20px #5246e2,-21px 21px #5246e2,-22px 22px #5246e2,-23px 23px #5246e2,-24px 24px #5246e2,-25px 25px #5246e2,-26px 26px #5246e2,-27px 27px #5246e2,-28px 28px #5246e2,-29px 29px #5246e2,-30px 30px #5246e2,-31px 31px #5246e2,-32px 32px #5246e2,-33px 33px #5246e2,-34px 34px #5246e2,-35px 35px #5246e2,-36px 36px #5246e2,-37px 37px #5246e2,-38px 38px #5246e2,-39px 39px #5246e2,-40px 40px #5246e2,-41px 41px #5246e2,-42px 42px #5246e2,-43px 43px #5246e2,-44px 44px #5246e2,-45px 45px #5246e2,-46px 46px #5246e2,-47px 47px #5246e2,-48px 48px #5246e2,-49px 49px #5246e2,-50px 50px #5246e2,-51px 51px #5246e2,-52px 52px #5246e2,-53px 53px #5246e2,-54px 54px #5246e2,-55px 55px #5246e2,-56px 56px #5246e2,-57px 57px #5246e2,-58px 58px #5246e2,-59px 59px #5246e2,-60px 60px #5246e2,-61px 61px #5246e2,-62px 62px #5246e2,-63px 63px #5246e2,-64px 64px #5246e2,-65px 65px #5246e2,-66px 66px #5246e2,-67px 67px #5246e2,-68px 68px #5246e2,-69px 69px #5246e2,-70px 70px #5246e2,-71px 71px #5246e2,-72px 72px #5246e2,-73px 73px #5246e2,-74px 74px #5246e2,-75px 75px #5246e2,-76px 76px #5246e2,-77px 77px #5246e2,-78px 78px #5246e2,-79px 79px #5246e2,-80px 80px #5246e2,-81px 81px #5246e2,-82px 82px #5246e2,-83px 83px #5246e2,-84px 84px #5246e2,-85px 85px #5246e2}.button-longshadow-left.button-royal:active,.button-longshadow-left.button-royal.active,.button-longshadow-left.button-royal.is-active{text-shadow:0 1px 0 rgba(255,255,255,0.4)}.button-giant{font-size:28px;height:70px;line-height:70px;padding:0 70px}.button-jumbo{font-size:24px;height:60px;line-height:60px;padding:0 60px}.button-large{font-size:20px;height:50px;line-height:50px;padding:0 50px}.button-normal{font-size:16px;height:40px;line-height:40px;padding:0 40px}.button-small{font-size:12px;height:30px;line-height:30px;padding:0 30px}.button-tiny{font-size:9.6px;height:24px;line-height:24px;padding:0 24px} \ No newline at end of file diff --git a/assets/css_firepress/entry.css b/assets/css_firepress/entry.css new file mode 100644 index 0000000..e978a40 --- /dev/null +++ b/assets/css_firepress/entry.css @@ -0,0 +1,16 @@ +/* entry + is the entrypoint from default.hbs + + btn_a, btn_b, btn_c are button styles + We do this is order to avoid CSS conflict (which happens all the time with the 'button' style) +/* ---------------------------------------------------------- */ + +@import "btn_a_var.css"; +@import "btn_a.min.css"; +@import "btn_b.min.css"; +@import "btn_c.min.css"; +@import "simplegrid.min.css"; + +/* ========================================================================== + btnfire.css / reserved for stuff in dev +*/ diff --git a/assets/css_firepress/simplegrid.css b/assets/css_firepress/simplegrid.css new file mode 100755 index 0000000..f81b2b7 --- /dev/null +++ b/assets/css_firepress/simplegrid.css @@ -0,0 +1,287 @@ +/* Simple Grid + Project Page - http://thisisdallas.github.com/Simple-Grid/ + Author - Dallas Bass + Site - http://dallasbass.com +/* ---------------------------------------------------------- */ + +*, +*:after, +*:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + margin: 0; +} + +[class*='col-'] { + float: left; + min-height: 1px; + padding-right: px; + /* column-space */ +} + +.grid { + width: 100%; + max-width: 898px; + min-width: 640px; + /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */ + padding-bottom: 20px; + margin: 0 auto; + overflow: hidden; +} + +.grid:after { + content: ""; + display: table; + clear: both; +} + +.grid-pad { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 10px; + /* grid-space to left */ + padding-right: 0; + /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */ +} + +.push-right { + float: right; +} + +/* Content Columns */ + +.col-1-1 { + width: 100%; +} + +.col-2-3, +.col-8-12 { + width: 66.66%; +} + +.col-1-2, +.col-6-12 { + width: 50%; +} + +.col-1-3, +.col-4-12 { + width: 33.33%; +} + +.col-1-4, +.col-3-12 { + width: 25%; +} + +.col-1-5 { + width: 20%; +} + +.col-1-6, +.col-2-12 { + width: 16.667%; +} + +.col-1-7 { + width: 14.28%; +} + +.col-1-8 { + width: 12.5%; +} + +.col-1-9 { + width: 11.1%; +} + +.col-1-10 { + width: 10%; +} + +.col-1-11 { + width: 9.09%; +} + +.col-1-12 { + width: 8.33% +} + +/* Layout Columns */ + +.col-11-12 { + width: 91.66% +} + +.col-10-12 { + width: 83.333%; +} + +.col-9-12 { + width: 75%; +} + +.col-5-12 { + width: 41.66%; +} + +.col-7-12 { + width: 58.33% +} + +/* Pushing blocks */ + +.push-2-3, +.push-8-12 { + margin-left: 66.66%; +} + +.push-1-2, +.push-6-12 { + margin-left: 50%; +} + +.push-1-3, +.push-4-12 { + margin-left: 33.33%; +} + +.push-1-4, +.push-3-12 { + margin-left: 25%; +} + +.push-1-5 { + margin-left: 20%; +} + +.push-1-6, +.push-2-12 { + margin-left: 16.667%; +} + +.push-1-7 { + margin-left: 14.28%; +} + +.push-1-8 { + margin-left: 12.5%; +} + +.push-1-9 { + margin-left: 11.1%; +} + +.push-1-10 { + margin-left: 10%; +} + +.push-1-11 { + margin-left: 9.09%; +} + +.push-1-12 { + margin-left: 8.33% +} + +@media handheld, +only screen and (max-width: 640px) { + .grid { + width: 100%; + min-width: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0px; + padding-bottom: 24px; + padding-left: 0px; + /* grid-space to left */ + padding-right: 0px; + /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */ + } + [class*='col-'] { + width: auto; + float: none; + margin: 0 auto; + padding-left: 0; + padding-right: 0px; + /* column-space */ + } + /* Mobile Layout */ + [class*='mobile-col-'] { + float: left; + margin: 0 0 10px; + padding-left: 0; + padding-right: 0px; + /* column-space */ + padding-bottom: 0; + } + .mobile-col-1-1 { + width: 100%; + } + .mobile-col-2-3, + .mobile-col-8-12 { + width: 66.66%; + } + .mobile-col-1-2, + .mobile-col-6-12 { + width: 50%; + } + .mobile-col-1-3, + .mobile-col-4-12 { + width: 33.33%; + } + .mobile-col-1-4, + .mobile-col-3-12 { + width: 25%; + } + .mobile-col-1-5 { + width: 20%; + } + .mobile-col-1-6, + .mobile-col-2-12 { + width: 16.667%; + } + .mobile-col-1-7 { + width: 14.28%; + } + .mobile-col-1-8 { + width: 12.5%; + } + .mobile-col-1-9 { + width: 11.1%; + } + .mobile-col-1-10 { + width: 10%; + } + .mobile-col-1-11 { + width: 9.09%; + } + .mobile-col-1-12 { + width: 8.33% + } + /* Layout Columns */ + .mobile-col-11-12 { + width: 91.66% + } + .mobile-col-10-12 { + width: 83.333%; + } + .mobile-col-9-12 { + width: 75%; + } + .mobile-col-5-12 { + width: 41.66%; + } + .mobile-col-7-12 { + width: 58.33% + } + .hide-on-mobile { + display: none !important; + width: 0; + height: 0; + } +} diff --git a/assets/css_firepress/simplegrid.min.css b/assets/css_firepress/simplegrid.min.css new file mode 100755 index 0000000..fe61df9 --- /dev/null +++ b/assets/css_firepress/simplegrid.min.css @@ -0,0 +1 @@ +.col-1-1,.grid{width:100%}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0}[class*=col-]{float:left;min-height:1px;padding-right:px}.grid{max-width:898px;min-width:640px;padding-bottom:20px;margin:0 auto;overflow:hidden}.grid:after{content:"";display:table;clear:both}.grid-pad{padding:10px 0 10px 10px}.push-right{float:right}.col-2-3,.col-8-12{width:66.66%}.col-1-2,.col-6-12{width:50%}.col-1-3,.col-4-12{width:33.33%}.col-1-4,.col-3-12{width:25%}.col-1-5{width:20%}.col-1-6,.col-2-12{width:16.667%}.col-1-7{width:14.28%}.col-1-8{width:12.5%}.col-1-9{width:11.1%}.col-1-10{width:10%}.col-1-11{width:9.09%}.col-1-12{width:8.33%}.col-11-12{width:91.66%}.col-10-12{width:83.333%}.col-9-12{width:75%}.col-5-12{width:41.66%}.col-7-12{width:58.33%}.push-2-3,.push-8-12{margin-left:66.66%}.push-1-2,.push-6-12{margin-left:50%}.push-1-3,.push-4-12{margin-left:33.33%}.push-1-4,.push-3-12{margin-left:25%}.push-1-5{margin-left:20%}.push-1-6,.push-2-12{margin-left:16.667%}.push-1-7{margin-left:14.28%}.push-1-8{margin-left:12.5%}.push-1-9{margin-left:11.1%}.push-1-10{margin-left:10%}.push-1-11{margin-left:9.09%}.push-1-12{margin-left:8.33%}@media handheld,only screen and (max-width:640px){.grid{width:100%;min-width:0;margin-left:0;margin-right:0;padding:0 0 24px}[class*=col-]{width:auto;float:none;margin:0 auto;padding-left:0;padding-right:0}[class*=mobile-col-]{float:left;margin:0 0 10px;padding-left:0;padding-right:0;padding-bottom:0}.mobile-col-1-1{width:100%}.mobile-col-2-3,.mobile-col-8-12{width:66.66%}.mobile-col-1-2,.mobile-col-6-12{width:50%}.mobile-col-1-3,.mobile-col-4-12{width:33.33%}.mobile-col-1-4,.mobile-col-3-12{width:25%}.mobile-col-1-5{width:20%}.mobile-col-1-6,.mobile-col-2-12{width:16.667%}.mobile-col-1-7{width:14.28%}.mobile-col-1-8{width:12.5%}.mobile-col-1-9{width:11.1%}.mobile-col-1-10{width:10%}.mobile-col-1-11{width:9.09%}.mobile-col-1-12{width:8.33%}.mobile-col-11-12{width:91.66%}.mobile-col-10-12{width:83.333%}.mobile-col-9-12{width:75%}.mobile-col-5-12{width:41.66%}.mobile-col-7-12{width:58.33%}.hide-on-mobile{display:none!important;width:0;height:0}} \ No newline at end of file diff --git a/default.hbs b/default.hbs index c3304f9..fdaeb7e 100644 --- a/default.hbs +++ b/default.hbs @@ -14,6 +14,9 @@ {{!-- Styles'n'Scripts --}} + {{!-- Customisation by https://github.com/firepress-org --}} + {{>custom_header}} + {{!-- This tag outputs SEO meta+structured data and other important settings --}} {{ghost_head}} @@ -26,14 +29,14 @@ {{{body}}} {{!-- The footer at the very bottom of the screen --}} + {{!-- Customisation by https://github.com/firepress-org --}} @@ -85,5 +88,8 @@ {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}} {{ghost_foot}} + {{!-- Customisation by https://github.com/firepress-org --}} + {{>custom_footer}} + diff --git a/partials/custom_footer.hbs b/partials/custom_footer.hbs new file mode 100644 index 0000000..da47d7d --- /dev/null +++ b/partials/custom_footer.hbs @@ -0,0 +1,5 @@ +{{!-- Customisation by https://github.com/firepress-org --}} + + + + diff --git a/partials/custom_header.hbs b/partials/custom_header.hbs new file mode 100644 index 0000000..dddca7d --- /dev/null +++ b/partials/custom_header.hbs @@ -0,0 +1,31 @@ +{{!-- Customisation by https://github.com/firepress-org --}} + + + + + + + + + + + + + +