@charset "UTF-8"; /*! * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * Blender Web Assets * Design components for Blender.org websites * * Authors: Pablo Vazquez, Niklas Ravnsborg-Gjertsen */ /** Don't load the fonts here, do it on the local file ** @import url(//fonts.googleapis.com/css?family=X); ** @import url(font-borg.css); // import font-borg in the local file instead */ /* Defaults look like Blender.org ** (without the condensed font, need to load it on the local file) */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* e.g. Links, the Bluish in borg */ /* e.g. Active status of stuff, Orangish */ /* $font_size: 1vw; /* too soon */ /* Mobile Stuff */ /* Just to do some math later */ /* Featured (our own jumbotron) */ /** CUSTOM MIXINS ** This should be safe to use in other sites */ /* Smallest, like phones on portrait. ** Menu is collapsed, columns stack, no brand */ /* Small but wide: phablets, iPads ** Menu is collapsed, columns stack, no brand */ /* Tablets portrait. ** Menu is expanded, but columns stack, brand is shown */ .media-debug { color: #444444; } @media (max-width: 767px) { .media-debug { color: #e95d4f; } } /* Animations */ @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in-pause-out /* Used for alerts */ { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } html, body { font-family: "Open Sans", "Lucida Sans", "Lucida Grande", sans-serif, sans-serif; font-size: 14px; color: #444444; cursor: default; width: 100%; height: 100%; margin: 0; background-color: #dfdfdf; -webkit-font-smoothing: antialiased; } body { padding: 52px 0 0 0; } body.dark { background-color: #b8b8b8; } .dark { color: white; } .container-main { background-color: #f0f0f0; padding-bottom: 20px; } /* LINKS */ a, a:visited, .link { color: #109df0; } a:hover, .link:hover { color: #ff8844; text-decoration: none !important; cursor: pointer; } a:active, .link, .link:active { text-decoration: underline; } a:focus, .link:focus { text-decoration: none; } a, button, button:focus, button::-moz-focus-inner { outline: none !important; } /* // LINKS */ header { width: 100%; border-bottom: thin solid rgba(248, 248, 248, 0.3); } header:nth-last-of-type(1) { margin-bottom: 20px; } strong, b { font-weight: 700; } .container-fluid.bright { background-color: #f8f8f8; padding: 0 0 1% 0 !important; height: 100%; min-height: 100%; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { font-family: "Open Sans Condensed", "Lucida Sans", "Lucida Grande", sans-serif, sans-serif !important; font-weight: normal; color: #2b2b2b; text-shadow: 1px 1px 0px rgba(43, 43, 43, 0.2); } h1 { font-size: 265%; } h2 { font-size: 220%; } h3 { font-size: 180%; font-weight: lighter; } h4 { font-size: 140%; } h5 { font-size: 120%; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { text-shadow: none; } p + h1 { margin-top: 32px; } p + h2, p + h3, p + h4 { margin-top: 25px; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: white; } hr { clear: both; width: 90%; height: 1px; border: none; margin: 15px auto 10px auto; background-color: #dfdfdf; } hr.dark { background-color: rgba(184, 184, 184, 0.4); } /* FORM FIELDS / INPUTS */ input, button, select, textarea { font-family: "Open Sans", "Lucida Sans", "Lucida Grande", sans-serif !important; font-weight: lighter; transition: background-color 0.1s ease-in; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); border-radius: 3px !important; } textarea { resize: vertical; padding: 6px 6px 6px 10px !important; min-height: 180px; } blockquote { background-color: #f3f3f3; font-size: 120%; margin: 10px; padding: 5px 15px; font-size: initial; } blockquote p, .box blockquote p { margin: 5px 15px 5px 0; padding: 5px 15px 5px 0; } fieldset { border: none; margin: 0; padding: 0; } .flex { display: flex; } @media (max-width: 767px) { .flex { display: block; } } @media (min-width: 768px) and (max-width: 991px) { .flex { display: block; } } .flex [class^="col-"] { display: flex; } @media (max-width: 767px) { .flex [class^="col-"] { display: block; } } @media (min-width: 768px) and (max-width: 991px) { .flex [class^="col-"] { display: block; } } .flex [class^="col-"] .box { width: 100%; } /* INPUTS */ .input-group { width: 100%; position: relative; } .input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input { background-color: white; transition: background-color 0.1s ease-in; } .form-control { top: 0; color: #111111; position: absolute; background-color: white !important; border: none; margin-top: 30px; border: thin solid #c4c4c4 !important; border-radius: 3px; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); transition: all 0.15s ease-in-out; } .form-control:focus, .form-control:hover { background-color: white !important; border: thin solid #f8f8f8 !important; color: #0b6ea9; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.2); } /* Form with Errors */ .has-error .form-control { border: thin solid #ef877c !important; } .has-error.input-group .input-group-addon, .has-error.input-group .control-label { color: #e95d4f !important; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { padding: 0px 4px 0px 10px; height: 40px; font-size: 120%; } /* INPUT: Checkbox */ .input-group input.form-control[type=checkbox], .input-group.input-group-lg input.form-control[type=checkbox] { box-shadow: none !important; } .input-group input.form-control[type=checkbox] { width: 15px; } .input-group.input-group-lg input.form-control[type=checkbox] { width: 20px; } /* INPUT: Checkbox Labels */ .input-group input.form-control[type=checkbox] + label.control-label, .input-group.input-group-lg input.form-control[type=checkbox] + label.control-label { text-align: left; cursor: pointer; user-select: none; transition: color 0.1s ease-out; } .input-group input.form-control[type=checkbox]:hover + label.control-label, .input-group.input-group-lg input.form-control[type=checkbox]:hover + label.control-label { color: #ff8844; } .input-group input.form-control[type=checkbox]:checked + label.control-label, .input-group.input-group-lg input.form-control[type=checkbox]:checked + label.control-label { color: #109df0; } .input-group input.form-control[type=checkbox]:checked + label.control-label:hover, .input-group.input-group-lg input.form-control[type=checkbox]:checked + label.control-label:hover { color: #ff8844; } .input-group input.form-control[type=checkbox] + label.control-label { padding-left: 22px; padding-top: 3px; } .input-group.input-group-lg input.form-control[type=checkbox] + label.control-label { padding-left: 30px; padding-top: 6px; } /* INPUT: Checkbox Addon */ .input-group input.form-control[type=checkbox] + label.control-label, .input-group.input-group-lg input.form-control[type=checkbox] + label.control-label { user-select: none; } /* INPUT ADDONS */ .input-group .input-group-addon { position: absolute; top: 30px; z-index: 3; padding: 10px 15px 10px 12px !important; background: transparent; border: 0; color: #777777 !important; } .input-group .input-group-addon + .form-control, .input-group .input-group-addon + select.form-control { padding-left: 35px !important; } .input-group .input-group-addon .bf-network { font-size: 140% !important; position: absolute; left: 8px; top: 8px; } .input-group .input-group-addon .bf-cloud { font-size: 160% !important; position: absolute; left: 8px; top: 4px; } .input-group.input-group-lg .input-group-addon .bf-cloud { top: 6px; } .input-group.input-group-lg .input-group-addon { top: 28px; } /* For addons on the right */ .form-control + .input-group-addon { float: right; right: 10px; } /* For addons with button */ .form-control + .input-group-addon > button { position: relative; margin-top: -6px; right: 8px; background-color: transparent; border: none; opacity: 0.5; transition: opacity 0.2s ease; box-shadow: none; } /* For addons with button */ .form-control:focus + .input-group-addon > button, .form-control:hover + .input-group-addon > button, .form-control + .input-group-addon > button:hover { opacity: 1; } .form-control + .input-group-addon.danger > button { color: #e95d4f; } .error { color: #e95d4f; } ul.error { margin: 0 !important; padding: 5px 0 0 0 !important; display: inline-block; } ul.error li:after { content: "" !important; } .box ul.error li, .box ul.error li:last-child { margin-bottom: 0; } .edit_box { background-color: #6cc2e7; float: right; color: white; padding: 8px 10px; margin: 8px; cursor: pointer; user-select: none; border-radius: 3px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } .edit_box:hover { background-color: #56b9e4; } .edit_box:focus, .edit_box:active { background-color: #ff8844; } /* Boostrap Panels Override */ .panel { border-radius: 3px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } .panel-default { border: none; } .panel-default a:focus { text-decoration: none; } .panel-default > .panel-heading { color: #444444; margin: 0; background-color: #ebebeb; border: none; border-bottom: 2px solid #dddddd; } .panel-title { font-size: 160%; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } a.list-group-item, .panel > .list-group .list-group-item { background-color: white; color: #444444; border: thin solid #eaeaea; border-left: 2px solid #eaeaea; padding: 5% 5% 5% 40px; } a.list-group-item:hover, a.list-group-item:focus { background-color: #ebebeb; color: #109df0 !important; border: thin solid #dddddd; border-left: 2px solid #70c4f6 !important; } a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus { background-color: transparent; color: #ff8844 !important; border: thin solid #dddddd; border-left: 2px solid #ff8844 !important; } .list-group-with-icon a.list-group-item i, .panel > .list-group.list-group-with-icon .list-group-item i { padding: 3px 15px 5px; position: absolute; float: left; left: 0; } .accordion .panel-heading { border-bottom: thin solid #dfdfdf; transition: border-bottom 0.2s ease-out; } .accordion .collapsed .panel-heading { border-bottom: thin solid transparent; } .accordion a .panel-title { color: #109df0; transition: color 0.1s ease-out; } .accordion a:hover .panel-title { color: #ff8844 !important; } .accordion a.collapsed .panel-title { color: #777777; } .panel-collapse-widget { font-family: "Open Sans", "Lucida Sans", "Lucida Grande", sans-serif; color: #aaaaaa; display: block; float: right; transform: rotate(45deg); transition: all 0.25s ease-out; } .panel-collapse-widget:after { content: "+"; } .collapsed .panel-collapse-widget { transform: rotate(0deg); } .accordion .panel-body { position: relative; transform: translateY(-2px); opacity: 0; transition: opacity 0.2s ease-out; transition: transform 0.2s ease-out; } .accordion .collapse.in .panel-body { opacity: 1; transform: translateY(0); transition: opacity 0.2s ease-out; transition: transform 0.2s ease-out; } .accordion .collapsed + .collapsing .panel-body { opacity: 0; transition: opacity 0.2s ease-out; } /* CKEditor Overrides */ .cke_chrome { font-family: "Open Sans", "Lucida Sans", "Lucida Grande", sans-serif !important; font-weight: lighter; color: #2b2b2b !important; border: thin solid #aaaaaa !important; background-color: white !important; resize: vertical; margin: 0 !important; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); border-radius: 3px; } span#cke_2_top { padding: 5px !important; border: none; background-image: none; background-color: transparent !important; box-shadow: none; } span.cke_toolgroup { border: none; border-bottom: 2px solid transparent; background-image: none; background-color: white; } a.cke_button_off { border-bottom: 2px solid transparent !important; box-shadow: none; } a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active { background-image: none !important; background-color: transparent !important; color: white !important; border-bottom: 2px solid #109df0 !important; } a.cke_button_on, a.cke_button_on:hover, a.cke_button_on:focus, a.cke_button_on:active { background-image: none !important; background-color: transparent !important; border-bottom: 2px solid #ff8844 !important; color: white !important; box-shadow: none; } /* PLACEHOLDERS */ ::-webkit-input-placeholder { color: #aaaaaa !important; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #aaaaaa !important; opacity: 1; } ::-moz-placeholder { color: #aaaaaa !important; opacity: 1; } :-ms-input-placeholder { color: #aaaaaa !important; } /* CHECKBOXES */ .input-group.input-checkbox { margin-top: 25px; margin-bottom: 25px; } .input-group.input-checkbox .control-label { font-size: 100%; text-align: left !important; } .input-group.input-checkbox .btn-group { float: right; } .input-group.input-checkbox .btn-group .btn { min-width: 45px; font-weight: bolder; color: white; background-color: #109df0; border-bottom-color: #095f91; } .input-group.input-checkbox .btn-group .btn.active { background-color: #ff8844; border-bottom-color: #dd5000; } .input-group.input-checkbox .btn-group .btn:before { content: ""; font-family: "FontAwesome"; } .input-group.input-checkbox .btn-group .btn.active:before { content: ""; font-family: "FontAwesome"; } .input-group.input-checkbox .btn-group .btn { color: white; border-left-color: white !important; border-right-color: white !important; } .input-group.input-checkbox .btn-group .btn.active { box-shadow: none; } .input-group.input-checkbox .btn-group .btn:hover { color: white !important; } /* DROPDOWN TOGGLES */ .btn-group.open .dropdown-toggle { box-shadow: none; } .btn-group ul.dropdown-menu { font-size: 100%; } /* FORM LABELS */ label { font-weight: normal; } .control-label { font-size: 95%; } .input-group-lg .control-label { font-size: 100%; } .input-group .control-label { position: absolute; left: 0; top: 8px; } .form-horizontal .control-label { padding-top: 0; } .input-group select:focus { border: none; box-shadow: none; } .input-group select { height: auto !important; padding: 6px 7px 7px !important; text-transform: capitalize; } .input-group select:hover, .input-group select:focus { color: inherit; } .input-group option { margin: 0 4px 0 8px !important; } .input-group.disabled { opacity: 0.5; pointer-events: none; } .input-group.disabled .form-control { border-color: transparent; background-color: #e9e9e9; } .input-group .form-control[type='file'] { padding-top: 5px; } .input-group.input-group-lg .form-control[type='file'] { padding-top: 6px; } /* // FORM FIELDS / INPUTS */ .disabled { opacity: 0.65 !important; pointer-events: none !important; user-select: none; } .user-select-none { user-select: none; } .pointer-events-none { pointer-events: none; } .top { position: absolute !important; top: 0 !important; } .bottom { position: absolute !important; bottom: 0 !important; } .left { float: left !important; left: 0 !important; } .right { float: right !important; right: 0 !important; } .text-align-center { text-align: center !important; } .text-align-left { text-align: left !important; } .text-align-right { text-align: right !important; } .text-transform-uppercase { text-transform: uppercase !important; } .text-transform-lowercase { text-transform: lowercase !important; } .text-transform-capitalize { text-transform: capitalize !important; } .text-size-100 { font-size: 100% !important; } .text-size-120 { font-size: 120% !important; } .content-margin-center { margin-left: auto !important; margin-right: auto !important; } .margin-top-0 { margin-top: 0 !important; } .margin-top-1 { margin-top: 1% !important; } .margin-top-2 { margin-top: 2% !important; } .margin-top-3 { margin-top: 3% !important; } .margin-top-4 { margin-top: 4% !important; } .margin-top-5 { margin-top: 5% !important; } .margin-top-5px { margin-top: 5px !important; } .margin-top-10px { margin-top: 10px !important; } .margin-top-15px { margin-top: 15px !important; } .margin-top-20px { margin-top: 20px !important; } .margin-top-25px { margin-top: 25px !important; } .margin-bottom-0 { margin-bottom: 0 !important; } .margin-bottom-1 { margin-bottom: 1% !important; } .margin-bottom-2 { margin-bottom: 2% !important; } .margin-bottom-3 { margin-bottom: 3% !important; } .margin-bottom-4 { margin-bottom: 4% !important; } .margin-bottom-5 { margin-bottom: 5% !important; } .margin-bottom-5px { margin-bottom: 5px !important; } .margin-bottom-10px { margin-bottom: 10px !important; } .margin-bottom-15px { margin-bottom: 15px !important; } .margin-bottom-20px { margin-bottom: 20px !important; } .margin-bottom-25px { margin-bottom: 25px !important; } .margin-left-0 { margin-left: 0 !important; } .margin-left-1 { margin-left: 1% !important; } .margin-left-2 { margin-left: 2% !important; } .margin-left-3 { margin-left: 3% !important; } .margin-left-4 { margin-left: 4% !important; } .margin-left-5 { margin-left: 5% !important; } .margin-left-5px { margin-left: 5px !important; } .margin-left-10px { margin-left: 10px !important; } .margin-left-15px { margin-left: 15px !important; } .margin-left-20px { margin-left: 20px !important; } .margin-left-25px { margin-left: 25px !important; } .margin-right-0 { margin-right: 0 !important; } .margin-right-1 { margin-right: 1% !important; } .margin-right-2 { margin-right: 2% !important; } .margin-right-3 { margin-right: 3% !important; } .margin-right-4 { margin-right: 4% !important; } .margin-right-5 { margin-right: 5% !important; } .margin-right-5px { margin-right: 5px !important; } .margin-right-10px { margin-right: 10px !important; } .margin-right-15px { margin-right: 15px !important; } .margin-right-20px { margin-right: 20px !important; } .margin-right-25px { margin-right: 25px !important; } .padding-top-0 { padding-top: 0 !important; } .padding-top-1 { padding-top: 1% !important; } .padding-top-2 { padding-top: 2% !important; } .padding-top-3 { padding-top: 3% !important; } .padding-top-4 { padding-top: 4% !important; } .padding-top-5 { padding-top: 5% !important; } .padding-top-5px { padding-top: 5px !important; } .padding-top-10px { padding-top: 10px !important; } .padding-top-15px { padding-top: 15px !important; } .padding-top-20px { padding-top: 20px !important; } .padding-top-25px { padding-top: 25px !important; } .padding-bottom-0 { padding-bottom: 0 !important; } .padding-bottom-1 { padding-bottom: 1% !important; } .padding-bottom-2 { padding-bottom: 2% !important; } .padding-bottom-3 { padding-bottom: 3% !important; } .padding-bottom-4 { padding-bottom: 4% !important; } .padding-bottom-5 { padding-bottom: 5% !important; } .padding-bottom-5px { padding-bottom: 5px !important; } .padding-bottom-10px { padding-bottom: 10px !important; } .padding-bottom-15px { padding-bottom: 15px !important; } .padding-bottom-20px { padding-bottom: 20px !important; } .padding-bottom-25px { padding-bottom: 25px !important; } .padding-left-0 { padding-left: 0 !important; } .padding-left-1 { padding-left: 1% !important; } .padding-left-2 { padding-left: 2% !important; } .padding-left-3 { padding-left: 3% !important; } .padding-left-4 { padding-left: 4% !important; } .padding-left-5 { padding-left: 5% !important; } .padding-left-5px { padding-left: 5px !important; } .padding-left-10px { padding-left: 10px !important; } .padding-left-15px { padding-left: 15px !important; } .padding-left-20px { padding-left: 20px !important; } .padding-left-25px { padding-left: 25px !important; } .padding-right-0 { padding-right: 0 !important; } .padding-right-1 { padding-right: 1% !important; } .padding-right-2 { padding-right: 2% !important; } .padding-right-3 { padding-right: 3% !important; } .padding-right-4 { padding-right: 4% !important; } .padding-right-5 { padding-right: 5% !important; } .padding-right-5px { padding-right: 5px !important; } .padding-right-10px { padding-right: 10px !important; } .padding-right-15px { padding-right: 15px !important; } .padding-right-20px { padding-right: 20px !important; } .padding-right-25px { padding-right: 25px !important; } .width-full { width: 100% !important; max-width: 100% !important; } .width-75 { width: 75% !important; max-width: 75% !important; } .width-half { width: 50% !important; max-width: 50% !important; } .width-25 { width: 25% !important; max-width: 25% !important; } .opacity-full { opacity: 1 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-half { opacity: 0.5 !important; } .opacity-25 { opacity: 0.25 !important; } .opacity-0 { opacity: 0 !important; } .relative { position: relative !important; } .absolute { position: absolute !important; } .inline-block { display: inline-block !important; } .block { display: block !important; } .height-full { height: 100% !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .text-overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text-overflow-clip { overflow: hidden; white-space: nowrap; text-overflow: clip; } .vertical-align { position: relative; top: 50%; transform: translateY(-50%); } .cursor-hover-pointer { cursor: pointer !important; } .background-default { background-color: #f8f8f8 !important; } .background-bright { background-color: white !important; } .background-dark { background-color: #b8b8b8 !important; color: white; } .background-info { background-color: #40b0e0 !important; color: white; } .background-success { background-color: #d5d644 !important; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); } .background-warning { background-color: #faaf40 !important; } .background-danger { background-color: #e95d4f !important; color: white; } .background-info h1, .background-info h2, .background-info h3, .background-info h4, .background-danger h1, .background-danger h2, .background-danger h3, .background-danger h4, .background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4 { color: white; } .background-success h1, .background-success h2, .background-success h3, .background-success h4, .background-success h5, .background-success h6 { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); } .background-info a, .background-danger a, .background-dark a { color: white !important; font-weight: bold; } .background-info .disabled label, .background-danger .disabled label, .background-dark .disabled label { color: white; } input.form-control.background-danger { color: white !important; border-color: #d12b1a !important; } input.form-control:hover.background-danger, input.form-control:focus.background-danger { color: white !important; background-color: #d12b1a !important; border-color: #a42214 !important; } .color-bright { color: white !important; } .table-row-link:hover .background-info, .table-row-link:hover .background-danger, .table-row-link:hover .background-dark { color: white !important; font-weight: bold; } .z-index-2 { z-index: 2; } /* List Generics */ .list-margin-bottom-1 li { margin-bottom: 1%; } .list-margin-bottom-2 li { margin-bottom: 2%; } .list-margin-bottom-3 li { margin-bottom: 3%; } .list-margin-bottom-4 li { margin-bottom: 4%; } .list-margin-bottom-5 li { margin-bottom: 5%; } /* Border generics */ .border-left { border-left: thin solid #d0d0d0; } .border-left.dark { border-left-color: #eaeaea; } .border-left.bright { border-left-color: #b7b7b7; } .border-right { border-right: thin solid #d0d0d0; } .border-right.dark { border-right-color: #eaeaea; } .border-right.bright { border-right-color: #b7b7b7; } .border-top { border-top: thin solid #d0d0d0; } .border-top.dark { border-top-color: #eaeaea; } .border-top.bright { border-top-color: #b7b7b7; } .border-bottom { border-bottom: thin solid #d0d0d0; } .border-bottom.dark { border-bottom-color: #eaeaea; } .border-bottom.bright { border-bottom-color: #b7b7b7; } .border-none { border: none !important; } .border-radius-3 { border-radius: 3px; } .border-radius-none { border-radius: 0; } /* Top Bar: Generics */ .navbar { color: #444444; border: none; z-index: 9 !important; /* Top level, above all. Other levels override this with !important */ margin-bottom: 0; font-size: 140%; min-height: 44px; } .navbar.navbar-secondlevel:nth-last-of-type(1), .navbar.navbar-thirdlevel:nth-last-of-type(1) { box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); } @media (max-width: 767px) { .navbar-nav { margin: 0 -15px; } } .navbar.dark { color: white; } .navbar li:after, .navbar-nav li:after { content: ""; } .navbar-nav > li > a { color: #444444; font-family: "Open Sans Condensed", "Lucida Sans", "Lucida Grande", sans-serif !important; border-bottom: 2px solid transparent; text-shadow: 1px 1px 2px #f8f8f8; transition: border-color 0.1s ease-out; } .navbar-default.dark .nav > li > a { color: white; text-shadow: 1px 1px 2px #f8f8f8; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #109df0; border-color: #109df0; } .navbar-default.dark .navbar-nav > li > a:hover { color: white; } .navbar-default { background-color: white; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { font-weight: normal; color: #f65a00; background-color: transparent; border-bottom-color: #ff9558; } .navbar-brand { color: #444444 !important; } .navbar-brand:hover { opacity: 0.9; transition: opacity 0.1s ease; } .navbar li.current_page_item a, .navbar li.current-page-parent a, .navbar li.current-page-ancestor a, .navbar li.current_page_parent a { font-weight: normal; color: #ff782a; border-bottom-color: rgba(255, 136, 68, 0.8); } .navbar li.current_page_item a:hover, .navbar li.current-page-parent a:hover, .navbar li.current-page-ancestor a:hover, .navbar li.current_page_parent a:hover, .navbar li.current_page_ancestor a:hover { color: #ff8844; border-bottom-color: rgba(255, 136, 68, 0.8); cursor: default; } .navbar li.current-page-ancestor a, .navbar li.current_page_ancestor a { color: rgba(255, 136, 68, 0.85); } .navbar li.current-page-ancestor a:hover, .navbar li.current_page_ancestor a:hover { cursor: pointer; } .navbar-secondlevel.navbar { z-index: 8 !important; /* First level is 9 */ } .navbar-secondlevel.navbar, .navbar-thirdlevel.navbar { background-color: white; min-height: 41px; } .navbar-secondlevel .navbar-nav > li > a, .navbar-thirdlevel .navbar-nav > li > a { padding: 10px 15px 8px 15px; position: relative; top: 3px; } .navbar-thirdlevel { z-index: 7 !important; /* Second level is 8 */ border-top: 1px solid #f0f0f0; font-size: 140%; } ul.nav.navbar-nav.navbar-left { /* Otherwise navbars with many items overlap the Email on BID enabled sites */ } @media (min-width: 768px) and (max-width: 991px) { ul.nav.navbar-nav.navbar-left { max-width: 105%; margin-bottom: 0; } } @media (min-width: 768px) and (max-width: 991px) { ul.nav.navbar-nav.navbar-left .dropdown-menu li { margin: 10px 0 10px -15px; font-size: 110%; } } .navbar-toggle { font-size: 1em; } /* // Top Bar: Generics */ /* DROPDOWN MENUS */ .dropdown-menu { border: 0; min-width: 130px; background: white; font-size: 70%; padding: 0; border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); transition: opacity 0.1s ease; } .dropdown-menu > li > a { padding: 6% 8% 6% 6%; padding-right: 45px; font-weight: normal; line-height: 1.42857; color: #444444; transition: border-color 0.05s ease; } .dropdown-menu > li > a:hover { background: transparent; color: #40b1f3; } .dropdown-menu > .active > a { background: transparent; color: #ff8844; } .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > li > a:active { background: transparent; color: #ff6811; cursor: default; } .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active, .dropdown-menu > .active > a:focus, .dropdown-menu > li > a:active { background: transparent; color: #109df0; } .dropdown-menu .divider { height: 1px; margin: 0; background: #f8f8f8; } .dropdown-menu i { float: left; width: 22px; margin: 3px 0 0 2px; } .navbar-nav .open .dropdown-menu { border-bottom-left-radius: 3px !important; border-bottom-right-radius: 3px !important; } @media (min-width: 768px) and (max-width: 991px) { .navbar-nav .open .dropdown-menu { float: left !important; width: 100%; } } /* Special classes for mobile */ @media (min-width: 768px) and (max-width: 991px) { li.dropdown.absolute.right { position: relative !important; float: left !important; width: 100%; } } /* // DROPDOWN MENUS */ img.alignright { float: right; margin: 10px 0 10px 10px; } img.alignleft { float: right; margin: 10px 10px 10px 0; } /* Special Classes */ .backicon { z-index: 0; position: absolute; font-size: 1400%; bottom: -50px; right: -35px; color: rgba(68, 68, 68, 0.08); pointer-events: none; user-select: none; } .divider { margin: 20px auto; width: 100%; height: 2px; border-top: thin solid #ebebeb; } .title { position: relative; margin: 5px 0; padding: 10px 0; color: white; text-shadow: 2px 2px 0 rgba(43, 43, 43, 0.3); } i.title-icon { position: relative; float: right; margin: 0 3%; bottom: 0.1em; font-size: 116%; opacity: 0.2; } .info { color: #40b0e0 !important; } .warning { color: #faaf40 !important; } .danger { color: #e95d4f !important; } .success { color: #bcdd2a !important; } .text-color-brand-main { color: #109df0 !important; } .text-color-brand-secondary { color: #ff8844 !important; } .info h1, .info h2, .info h3, .info h4, .info h5, .info h6 { color: #40b0e0 !important; } .danger h1, .danger h2, .danger h3, .danger h4, .danger h5, .danger h6 { color: #e95d4f !important; } .warning h1, .warning h2, .warning h3, .warning h4, .warning h5, .warning h6 { color: #faaf40 !important; } .success h1, .success h2, .success h3, .success h4, .success h5, .success h6 { color: #d5d644 !important; } /* LISTS */ ul { margin: 0; } ul li { margin-left: 0; list-style-type: none; position: relative; transition: all 0.1s ease-out; } ul li:after { content: ""; position: absolute; left: -10px; top: -2px; text-align: right; font-size: 120%; color: rgba(68, 68, 68, 0.5); transition: all 0.15s ease-in; } ul.list-bullets-check li:after { content: ""; font-size: 75%; top: 4px; left: -15px; font-family: "FontAwesome"; } ul.list-bullets-none li:after { content: ""; } li [class^="fa-"] { /* Override Font-Awesome props */ text-align: left; } ul.list-margin-none { padding: 0 10px 0 28px; } ul ul { padding-left: 10px; } ul li ul li:after { content: ""; font-size: 85%; top: 2px; left: -11px; font-family: "FontAwesome"; } /* // LISTS */ /* Pagination */ .pagination { margin: 30px auto 0px auto; width: 100%; text-align: center; } .pagination .active span { background-color: #ff8844; } /* // PAGINATION */ /* BUTTONS ** There are simple buttons, squishy, small, big, whole lot! ** Squishy ones feel like you're pressing it, let's not over use them. */ a.btn, .btn, button { background-color: #f1f1f1; color: #444444; font-family: "Open Sans Condensed", "Lucida Sans", "Lucida Grande", sans-serif !important; font-size: 130%; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.06); border: thin solid #eaeaea; border-bottom: 1px solid #d8d8d8; border-radius: 3px; transition: all 0.1s ease-in-out; } a.btn:hover, .btn:hover, button:hover { background-color: #f7f7f7; border-color: #eaeaea; border-bottom: 1px solid #8dd0f8; color: #109df0 !important; } a.btn:active, a.btn:focus, .btn:active, .btn:focus, button:active, button:focus { background-color: #f7f7f7; color: #ff8844 !important; border-color: #eaeaea; border-bottom-color: #ff8844; outline: none !important; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } a.btn.btn-squishy, .btn.btn-squishy { position: relative; top: 0; margin-bottom: 8px; font-weight: 600; border-radius: 3px; box-shadow: 0 3px 0 #d8d8d8; } a.btn.btn-squishy:hover, .btn.btn-squishy:hover { background-color: #f7f7f7; top: 2px; box-shadow: 0 1px 0 #d8d8d8; } a.btn.btn-squishy:active, a.btn.btn-squishy:focus, .btn.btn-squishy:active, .btn.btn-squishy:focus { border-bottom-color: #ff8844; color: #ff8844 !important; background-color: #f7f7f7; border-top-color: #f7f7f7; } .btn-group.open .dropdown-toggle { border: thin solid #eaeaea; } a.btn.btn-outline, .btn.btn-outline { background-color: transparent; color: white; border: 1px solid white; padding: 5px 20px; box-shadow: none; } a.btn.btn-outline:hover, .btn.btn-outline:hover { color: white !important; border: 1px solid white; background-color: rgba(255, 255, 255, 0.25); } a.btn.btn-outline:active, a.btn.btn-outline:focus, .btn.btn-outline:active, .btn.btn-outline:focus { color: white !important; border: 1px solid white; background-color: rgba(255, 255, 255, 0.5); } .box a.btn.btn-outline, .box .btn.btn-outline { color: #444444; border: 1px solid #aaaaaa; } .box a.btn.btn-outline:hover, .box .btn.btn-outline:hover { color: black !important; border: 1px solid #777777; background-color: rgba(255, 255, 255, 0.25); } .box a.btn.btn-outline:active, .box a.btn.btn-outline:focus, .box .btn.btn-outline:active, .box .btn.btn-outline:focus { color: black !important; border: 1px solid #444444; background-color: rgba(255, 255, 255, 0.5); } /* BUTTON SUCCESS */ a.btn-success, .btn-success { background-color: #d5d644; color: #40400e; border-color: #d0d12f; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); } a.btn-success:hover, .btn-success:hover { color: #444444 !important; background-color: #e3e483; border-color: #d0d12f; } a.btn.btn-squishy.btn-success, .btn.btn-squishy.btn-success { background-color: #d5d644; border-color: #d0d12f; border-bottom-color: #c5c62b; box-shadow: 0 3px 0 #c5c62b; } a.btn.btn-squishy.btn-success:hover, .btn.btn-squishy.btn-success:hover { background-color: #dadb59; box-shadow: 0 1px 0 #c5c62b; } a.btn-success:focus, .btn-success:focus, a.btn-success:active, .btn-success:active, a.btn.btn-squishy.btn-success:focus, .btn.btn-squishy.btn-success:focus, a.btn.btn-squishy.btn-success:active, .btn.btn-squishy.btn-success:active { color: #444444 !important; background-color: #bcbd2a; border-bottom-color: #bcbd2a; } /* BUTTON DANGER */ a.btn-danger, .btn-danger { color: white !important; background-color: #ea6558; border-color: #e64838; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); } a.btn-danger:hover, .btn-danger:hover { color: white !important; background-color: #ec766a; border-color: #e64838; border-bottom-color: #e33322; } a.btn.btn-squishy.btn-danger, .btn.btn-squishy.btn-danger { background-color: #ea6558; border-bottom-color: #e33322; box-shadow: 0 3px 0 #d64739; } a.btn.btn-squishy.btn-danger:hover, .btn.btn-squishy.btn-danger:hover { border-color: #e74c3d; background-color: #ec7266; box-shadow: 0 1px 0 #d12b1a; } a.btn-danger:focus, .btn-danger:focus, a.btn-danger:active, .btn-danger:active, a.btn.btn-squishy.btn-danger:focus, .btn.btn-squishy.btn-danger:focus, a.btn.btn-squishy.btn-danger:active, .btn.btn-squishy.btn-danger:active { color: white !important; background-color: #e33322; border-bottom-color: #df2e1c; } /* BUTTON WARNING */ a.btn-warning, .btn-warning { color: #523202; background-color: #fbbb5e; border-color: #faab36; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } a.btn-warning:hover, .btn-warning:hover { color: #2b2b2b !important; background-color: #fcc87c; border-color: #faab36; border-bottom-color: #e78d06; } a.btn.btn-squishy.btn-warning, .btn.btn-squishy.btn-warning { background-color: #fbbb5e; border-bottom-color: #f69606; box-shadow: 0 3px 0 #e68e0c; } a.btn.btn-squishy.btn-warning:hover, .btn.btn-squishy.btn-warning:hover { background-color: #fcc87c; box-shadow: 0 1px 0 #e78d06; } a.btn-warning:focus, .btn-warning:focus, a.btn-warning:active, .btn-warning:active, a.btn.btn-squishy.btn-warning:focus, .btn.btn-squishy.btn-warning:focus, a.btn.btn-squishy.btn-warning:active, .btn.btn-squishy.btn-warning:active { color: #444444 !important; background-color: #f99a0e; } /* BUTTON INFO */ a.btn-info, .btn-info { color: white !important; background-color: #52b7e3; border-color: #37acdf; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); } a.btn-info:hover, .btn-info:hover { color: white !important; background-color: #6cc2e7; border-color: #37acdf; border-bottom-color: #1e88b6; } a.btn.btn-squishy.btn-info, .btn.btn-squishy.btn-info { background-color: #52b7e3; border-bottom-color: #2092c3; box-shadow: 0 3px 0 #239fd5; } a.btn.btn-squishy.btn-info:hover, .btn.btn-squishy.btn-info:hover { background-color: #6cc2e7; box-shadow: 0 1px 0 #2aa7dc; } a.btn-info:focus, .btn-info:focus, a.btn-info:active, .btn-info:active, a.btn.btn-squishy.btn-info:focus, .btn.btn-squishy.btn-info:focus, a.btn.btn-squishy.btn-info:active, .btn.btn-squishy.btn-info:active { color: white !important; background-color: #2199cc; border-bottom-color: #2092c3; } /* BUTTON EXTERNAL */ a.btn.external { border-bottom: 2px solid rgba(255, 136, 68, 0.2); } a.btn.external:after { content: ""; float: right; font-size: 75%; color: rgba(68, 68, 68, 0.6); position: absolute; top: 6px; right: 8px; font-family: "FontAwesome"; } /* Tiny cute lil buttons */ .btn-xs { font-size: 90%; } /* // BUTTONS */ /* TABS */ .nav-tabs li:after { content: ""; } /* Inactive tabs */ .nav-tabs > li > a { color: #444444; border-color: transparent; cursor: pointer; transition: color 0.1s, opacity 0.1s; } /* Mouse over inactive tab */ .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs.nav-justified > li > a:hover, .nav-tabs.nav-justified > li > a:focus { border: none; background-color: transparent; color: #0c7ec1; border-color: transparent; border-bottom: 2px solid #40b1f3 !important; } /* Active tab */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs.nav-justified > li.active > a, .nav-tabs.nav-justified > li.active > a:hover, .nav-tabs.nav-justified > li.active > a:focus { border: none; background-color: transparent; color: #109df0; border-color: transparent; border-bottom: 2px solid #109df0 !important; cursor: default; } .nav-tabs.nav-justified > li > a { border-bottom: 2px solid #dfdfdf !important; } /* Tab content */ .tab-content { position: relative; height: 100%; background-color: white; border: none; overflow: hidden; /* for backicons */ border-radius: 3px; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); } .tab-content p { padding: 10px; } /* LABELS */ .label { padding: 0.2em 0.7em 0.3em; font-size: 90%; font-weight: normal; color: white; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); border-radius: 3px; } .label.label-2x { font-size: 100%; } .label-info { background-color: #40b0e0; color: white; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); border: thin solid #2aa7dc; } .label-danger { background-color: #e95d4f; color: white; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); border: thin solid #e64838; } .label-warning { background-color: #faaf40; color: #523202; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); border: thin solid #f9a527; } .label-success { background-color: #d5d644; color: #40400e; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); border: thin solid #d0d12f; } .disabled label { color: #515151; } /* // LABELS */ /* CARDS */ ** swap a "front" div with a "back" div ** both inside a "card" div, with a nice flip effect. */ .flip { -webkit-perspective: 1170px; -moz-perspective: 0; -o-perspective: 1170px; perspective: 1170px; position: relative; clear: both; } .flip .card { height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .flip .card .face { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index: 3; } .flip .card .front { position: absolute; width: 100%; z-index: 2; -webkit-backface-visibility: hidden !important; -moz-backface-visibility: hidden !important; -o-backface-visibility: hidden !important; backface-visibility: hidden !important; transition: opacity 0.15s ease-in-out; } .flip .card .back { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); -o-transform: rotatey(-180deg); transform: rotatey(-180deg); } .flip .face > h1, .flip .face > h2, .flip .face > h3, .flip .face > h4 { /* Special case when card starts with a title */ margin-top: 0; } .flip .card.flipped { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); -o-transform: rotatey(-180deg); transform: rotatey(-180deg); } .flipped .front { /* FF */ opacity: 0; -webkit-backface-visibility: hidden !important; -moz-backface-visibility: hidden !important; -o-backface-visibility: hidden !important; backface-visibility: hidden !important; } .flip_toggle { display: block; position: absolute; right: 0; top: 5px; padding: 2px; min-width: 40px; min-height: 40px; z-index: 2; transition: color 0.15s ease-in-out; } .flip_toggle:hover { cursor: pointer; color: #40b1f3; } .flip_toggle:before { content: ""; font-family: "FontAwesome"; right: 12px; position: absolute; } /* BOX ** Use it to put content inside a neat little box */ .box, .breadcrumb { position: relative; background-color: white; border: thin solid #f1f1f1; overflow: hidden; word-break: break-word; border-radius: 3px; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); } @media (max-width: 767px) { .box { margin-bottom: 14px; } } @media (min-width: 768px) and (max-width: 991px) { .box { margin-bottom: 14px; } } .box p { position: relative; margin: 15px; } .box p + ul { margin-top: -7px; } .box a { text-shadow: none; } .box h1 { margin: 10px 10px 0 15px; text-shadow: none; } .box h2 { margin: 10px 10px 0 15px; text-shadow: none; } .box h3, .box h4, .box h5, .box h6 { margin: 10px 0 0 15px; text-shadow: none; } .box h2 + p { margin-top: 10px; } .box h3 + p, .box h4 + p, .box h5 + p { margin-top: 5px; } .box hr { width: 95%; opacity: 0.8; } .box ul { margin-top: 10px; margin-left: 0; padding-left: 30px; } .box ul li { margin-bottom: 10px; padding-right: 15px; } .box ul li:after { content: "·"; top: -1px; left: -13px; color: #aaaaaa; } .box ul li:last-child { margin-bottom: 35px; } .box .bottom { width: 100%; } .box + .box { margin-top: 20px; } .box ul.nav.nav-tabs { margin: 0; padding: 0; list-style: none; } .box ul.nav.nav-tabs li { margin: 0; padding: 0; background-color: #ebebeb; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } .box ul.nav.nav-tabs li:first-child { border-top-left-radius: 3px; } .box ul.nav.nav-tabs li:last-child { border-top-right-radius: 3px; } .box ul.nav.nav-tabs li:after { content: ""; } .box ul.nav.nav-tabs li.active { background-color: white; } .box ul.nav.nav-tabs li a { border: none; border-right-color: white; border-bottom-color: white; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } /* // BOX */ /* FEATURED - (our own jumbotron) */ .featured { height: 350px; overflow: hidden; position: relative; background-color: white; border: none; border-bottom: thin solid #eaeaea; background-image: url(https://www.blender.org/wp-content/themes/bthree/assets/images/placeholder_background.jpg); background-size: cover; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.1); } @media (max-width: 767px) { .featured { height: 160px; } } .featured-xs { height: 100px; } .featured-sm { height: 160px; } .featured-md { height: 250px; } .featured-lg { height: 350px; } .featured-xl { height: 450px; } .featured h1, .featured h2, .featured h3, .featured h4, .featured h5, .featured h6 { color: white; } .featured h1 { font-size: 360%; } @media (max-width: 767px) { .featured h1 { font-size: 200%; padding: 0; margin: 0; } } .featured h3 { font-size: 180%; } @media (max-width: 767px) { .featured h3 { font-size: 130%; padding: 0; margin: 0; } } .featured .backicon { font-size: 2500%; top: 116.66667px; } .featured-xs .backicon { top: -50px; } .featured-sm .backicon { top: -40px; } .featured-md .backicon { top: 31.25px; } .featured-lg .backicon { top: 116.66667px; } .featured-xl .backicon { top: 180px; } /* THUMBNAILS */ .thumbnail { padding: 4px; border: none; background-color: white; box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.25); transition: all 0.1s ease-out; } a img.thumbnail:hover { opacity: 0.9; } /* // THUMBNAILS */ /* ADMIN POWERS */ .soyadmin { float: right; color: #444444; font-size: 150%; position: fixed; right: 17px; top: 12px; z-index: 10; opacity: 0.3; } .soyadmin:hover { color: #109df0; opacity: 1; } /* // ADMIN POWERS */ /* ALERTS */ .alert { margin-bottom: 0; border: none; position: fixed; z-index: 9; width: 100%; border-radius: 0; text-align: center; color: #2b2b2b; font-size: 110%; padding: 0; -webkit-animation: fade-in-pause-out 6s; -webkit-animation-fill-mode: both; -moz-animation: fade-in-pause-out 6s; -moz-animation-fill-mode: both; -o-animation: fade-in-pause-out 6s; -o-animation-fill-mode: both; -ms-animation: fade-in-pause-out 6s; -ms-animation-fill-mode: both; } .alert .container { padding: 0.5em 0; } .alert-info, .alert-warning, .alert-danger, .alert-success { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } .alert-info { background-color: rgba(64, 176, 224, 0.9); color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .alert-warning { background-color: #ff9b08; color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); } .alert-warning .close { color: #444444; } .alert-warning .close:hover { color: #2b2b2b !important; } .alert-danger { background-color: rgba(233, 93, 79, 0.9); color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } .alert-success { background-color: rgba(239, 240, 83, 0.9); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); } .alert-success .close { color: #444444; } .alert-success .close:hover { color: #2b2b2b !important; } .alert button.close { font-size: 90%; padding: 0.2em 0.5em 0 0; } .alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-danger h1, .alert-danger h2, .alert-danger h3, .alert-danger h4 { color: white; } .close { color: white; text-shadow: none; opacity: 0.5; } .close:hover { color: white !important; background-color: transparent; opacity: 1; } .alert button.close { box-shadow: none; } .alert button.close:hover { border: none; box-shadow: none; } /* // ALERTS */ /* TABLES (yeah they're still used every now and then */ .table { border-collapse: initial; } /* No ugly borders! */ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top: thin solid transparent; border-bottom: thin solid transparent; } /* Only on mouse over */ .table tr:hover td { border-top: thin solid #d8d8d8 !important; border-bottom: thin solid #d8d8d8 !important; } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #f0f0f0; } /* First odd, then even */ .table-striped > tbody > tr:nth-child(2n+1):hover > td, .table-striped > tbody > tr:nth-child(2n+1):hover > th, .table-striped > tbody > tr:nth-child(2n):hover > td, .table-striped > tbody > tr:nth-child(2n):hover > th { background-color: #eeeeee; } .table .table-row-link:hover > tr, .table .table-row-link:hover > td { color: #109df0; cursor: pointer; } /* Tables with status */ tbody > tr.danger > td a, tbody > tr.info > td a, tbody > tr.warning > td a, tbody > tr.success > td a { font-weight: bold; } tbody > tr.danger > td a:hover, tbody > tr.info > td a:hover, tbody > tr.warning > td a:hover, tbody > tr.success > td a:hover { text-decoration: underline !important; } tbody > tr.danger > td a, tbody > tr.info > td a { color: white; } tbody > tr.warning > td a, tbody > tr.success > td a { color: #444444; } .table tr.info:hover td { background-color: #2199cc !important; border-top: thin solid #2199cc !important; border-bottom: thin solid #2199cc !important; } .table tr.danger:hover td { background-color: #e64838 !important; border-top: thin solid #e95d4f !important; border-bottom: thin solid #e95d4f !important; } .table tr.warning:hover td { background-color: #f9a527 !important; border-top: thin solid #faaf40 !important; border-bottom: thin solid #faaf40 !important; } .table tr.success:hover td { background-color: #d0d12f !important; border-top: thin solid #d5d644 !important; border-bottom: thin solid #d5d644 !important; } .table-striped > tbody > tr.danger:nth-child(2n) > td, .table-striped > tbody > tr.danger:nth-child(2n) > th, .table-striped > tbody > tr.danger:nth-child(2n+1) > td, .table-striped > tbody > tr.danger:nth-child(2n+1) > th, .table-striped > tbody > tr.info:nth-child(2n) > td, .table-striped > tbody > tr.info:nth-child(2n) > th, .table-striped > tbody > tr.info:nth-child(2n+1) > td, .table-striped > tbody > tr.info:nth-child(2n+1) > th { color: white; } .table > tbody > tr.success > td, .table-striped > tbody > tr.success:nth-child(2n) > td, .table-striped > tbody > tr.success:nth-child(2n) > th, .table-striped > tbody > tr.success:nth-child(2n+1) > td, .table-striped > tbody > tr.success:nth-child(2n+1) > th, .table-striped > tbody > tr.warning:nth-child(2n) > td, .table-striped > tbody > tr.warning:nth-child(2n) > th, .table-striped > tbody > tr.warning:nth-child(2n+1) > td, .table-striped > tbody > tr.warning:nth-child(2n+1) > th { color: #444444; } /* Danger */ .table-striped > tbody > tr.danger:nth-child(2n) > td, .table-striped > tbody > tr.danger:nth-child(2n) > th { background-color: #ec7266; } .table-striped > tbody > tr.danger:nth-child(2n+1) > td, .table-striped > tbody > tr.danger:nth-child(2n+1) > th { background-color: #e95d4f; } /* Success */ .table-striped > tbody > tr.success:nth-child(2n) > td, .table-striped > tbody > tr.success:nth-child(2n) > th { background-color: #d0d12f; } .table > tbody > tr.success > td, .table-striped > tbody > tr.success:nth-child(2n+1) > td, .table-striped > tbody > tr.success:nth-child(2n+1) > th { background-color: #d5d644; } /* Warning */ .table-striped > tbody > tr.warning:nth-child(2n) > td, .table-striped > tbody > tr.warning:nth-child(2n) > th { background-color: #fbc472; } .table-striped > tbody > tr.warning:nth-child(2n+1) > td, .table-striped > tbody > tr.warning:nth-child(2n+1) > th { background-color: #faaf40; } /* Info */ .table-striped > tbody > tr.info:nth-child(2n) > td, .table-striped > tbody > tr.info:nth-child(2n) > th { background-color: #6cc2e7; } .table-striped > tbody > tr.info:nth-child(2n+1) > td, .table-striped > tbody > tr.info:nth-child(2n+1) > th { background-color: #40b0e0; } /* Data Tables */ .dataTable .group { font-size: 200%; font-family: "Open Sans Condensed", "Lucida Sans", "Lucida Grande", sans-serif; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .dataTable .group td, .dataTable .group td:hover { background-color: #40b0e0 !important; color: white !important; border: none !important; border-bottom: 2px solid #2199cc !important; padding-top: 7px; padding-bottom: 0; } .dataTable .sorting { position: relative; } .dataTable .fa-sort { font-size: 80%; position: absolute; color: #aaaaaa; top: 12px; right: 2px; } /* // Data Tables */ /* LOGO */ header a.logo { display: block; position: relative; float: left; height: 36px; font-family: "Open Sans Condensed", "Lucida Sans", "Lucida Grande", sans-serif !important; color: #515151; text-align: right; font-size: 120%; background: url(https://www.blender.org/wp-content/themes/bthree/assets/images/logo.png) no-repeat; font-weight: lighter; line-height: 180%; width: 123px; opacity: 1; margin: 8px 0 0 0; background-size: 123px 36px; transition: opacity 0.2s ease-in; } @media (max-width: 767px) { header a.logo { margin: 12px 0 0 15px; } } header a.logo:hover { color: #444444; opacity: 0.8; } /* // LOGO */ /* FOOTER */ /* Footer Navigation */ footer { font-size: 80%; } footer a { color: #777777 !important; } footer a:hover { color: #109df0 !important; } #footer-navigation { font-size: 85%; margin-bottom: 5px; color: #6a6a6a; border-top: thick solid #dddddd; } #footer-navigation ul { position: relative; margin: 0; padding: 0 0 10px 16px; list-style-type: none; } #footer-navigation li { position: relative; } #footer-navigation a { color: #6a6a6a; } #footer-navigation a:hover { color: #109df0; } #footer-navigation i { font-size: 80%; position: absolute; left: -14px; top: 20%; } #footer-navigation h4 { color: #585858; margin-bottom: 5px; } /* Bootstrap Overrides */ /* Breadcrumb */ .breadcrumb > li + li:before { content: ""; font-family: "FontAwesome"; } .breadcrumb > .active { color: #919191; } /* // Breadcrumb */ .well { overflow: hidden; } .tooltip { font-size: 14px; position: absolute; } .tooltip.in { opacity: 1; } .tooltip-inner { margin: 0 auto; background-color: #f8f8f8; color: #444444; border-radius: 3px; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.2); } .tooltip.bottom .tooltip-arrow { border-bottom-color: #f8f8f8; border-radius: 6px; } .tooltip.top .tooltip-arrow { border-top-color: #f8f8f8; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #f8f8f8; } .tooltip.left .tooltip-arrow { border-left-color: #f8f8f8; } .tooltip.right .tooltip-arrow { border-left-color: #f8f8f8; } .popover .arrow { display: none; } .popover { min-width: 250px; background-color: transparent; border: none; border-radius: 3px; } .popover-title { background-color: #f8f8f8; font-size: 110%; border-radius: 0; display: none; } .popover-content { font-size: 14px; border-radius: 3px; background-color: #f8f8f8; box-shadow: 2px 2px 0 rgba(95, 95, 95, 0.2); } .blink { transition: all 2s ease-in-out; animation: blink 2s infinite ease-in-out; animation-name: blink; -moz-animation-name: blink; animation-direction: normal; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .blink.slowest { animation-duration: 12s; } .blink.slow { animation-duration: 6s; } .blink.fast { animation-duration: 1s; } .blink.fastest { animation-duration: 0.5s; }