article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 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; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * 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. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * 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. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ 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; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* ======================================== units ======================================== */ /* ======================================== colors ======================================== */ /* ======================================== font families ======================================== */ /* ======================================== colors ======================================== */ /* ======================================== font awesome icon constants ======================================== */ /* ======================================== grid ======================================== */ /* === breakpoints === */ /* ======================================== UI ======================================== */ /* === swatches === */ /* 14 - basic text, large bg */ /* shadows */ /* 17 - icon bg*/ /* 24 - border on dark bg, button bg */ /* 40 */ /* 49 - icons */ /* 56 - small text, buttons on dark bg */ /* 64 - text? */ /* 66 - small text on dark bg*/ /* 69 - tree lines */ /* 74 - smaller text */ /* 80 - border*/ /* 88 - border, icon bg */ /* white */ /* inactive tab bg, bg */ /* light blue grayish - bg*/ /* icons */ /* 24 - selected bg */ /* border, bg */ /* main green color - backgrounds */ /* tab button icon */ /* button bg, icons */ /* border */ /* bright blue */ /* === other stuff === */ /* === basic elements === */ /* ======================================== typography ======================================== */ /* === typography scale === */ /* === body copy === */ /* === headings === */ /* === links === */ /* link + heading */ /* ======================================== icons ======================================== */ /* ======================================== fonts ======================================== */ @font-face { font-family: 'Font Awesome'; src: url("../fonts/fontawesome.eot"); src: url("../fonts/fontawesome.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome.woff") format("woff"), url("../fonts/fontawesome.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url("../../fonts/opensans-bold.eot"); src: url("../fonts/opensans-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-bold.svg#open_sansbold") format("svg"), url("../fonts/opensans-bold.woff") format("woff"), url("../fonts/opensans-bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: 'Open Sans'; src: url("../fonts/opensans-regular.eot"); src: url("../fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-regular.svg#open_sansregular") format("svg"), url("../fonts/opensans-regular.woff") format("woff"), url("../fonts/opensans-regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } /* ======================================== images ======================================== */ /* ======================================== grid & layout ======================================== */ /* === clearfix === */ /* clear */ /* === grid === */ /* grid */ /* grid__column */ /* grid__column */ /* grid__centered */ /* === positions, sizes, paddings & margins === */ /* ======================================== typography ======================================== */ /* ======================================== properties ======================================== */ /* === borders === */ /* ======================================== symbols, icons & sprites ======================================== */ /* set__sprite */ /* ======================================== properties ======================================== */ /* === container === */ /* === item === */ /* ======================================== page ======================================== */ html { background-color: white; font-size: 16px; height: 100%; } body { position: relative; z-index: 0; width: 100%; height: auto; min-height: 100%; color: #242424; font-size: 16px; line-height: 24px; font-size: 1rem; line-height: 1.5rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ======================================== typography ======================================== */ p { margin: 0; } /* p */ ::-moz-selection { color: white; background: #2c2c2c; text-shadow: none; } /* ::-moz-selection */ ::selection { color: white; background: #000000; text-shadow: none; } /* ::selection */ a { border-bottom: 1px solid #242424; color: #242424; background-color: transparent; text-decoration: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; /*&:link { color: $link__color; }*/ } a:visited { border-bottom: 1px solid #242424; color: #242424; background-color: transparent; } a:hover { border-bottom: 1px solid transparent; color: #242424; background-color: transparent; } a:focus { border-bottom: 1px solid transparent; outline: 1px dotted #242424; color: #242424; background-color: transparent; } a:active { border-bottom: 1px solid transparent; color: #242424; background-color: transparent; } /* === headings === */ .heading-tera, .heading-giga, .heading-mega, .heading-alpha, h1, .heading-beta, h2, .heading-gamma, h3, .heading-delta, h4, .heading-epsilon, h5, .heading-zeta, h6 { margin-top: 0; margin-bottom: 0; color: #242424; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; text-rendering: optimizeLegibility; } .heading-tera, .heading-giga, .heading-mega, .heading-alpha, h1, .heading-beta, h2, .heading-gamma, h3, .heading-delta, h4, .heading-epsilon, h5, .heading-zeta, h6 { font-size: 72px; line-height: 96px; font-size: 4.5rem; line-height: 6rem; } .heading-giga { font-size: 60px; line-height: 72px; font-size: 3.75rem; line-height: 4.5rem; } .heading-mega { font-size: 48px; line-height: 72px; font-size: 3rem; line-height: 4.5rem; } .heading-alpha, h1 { font-size: 36px; line-height: 48px; font-size: 2.25rem; line-height: 3rem; } .heading-beta, h2 { font-size: 30px; line-height: 48px; font-size: 1.875rem; line-height: 3rem; } .heading-gamma, h3 { font-size: 24px; line-height: 48px; font-size: 1.5rem; line-height: 3rem; } .heading-delta, h4 { font-size: 18px; line-height: 24px; font-size: 1.125rem; line-height: 1.5rem; } .heading-epsilon, h5 { font-size: 14px; line-height: 24px; font-size: 0.875rem; line-height: 1.5rem; } .heading-zeta, h6 { font-size: 12px; line-height: 24px; font-size: 0.75rem; line-height: 1.5rem; } .heading-tera a, .heading-giga a, .heading-mega a, .heading-alpha a, h1 a, .heading-beta a, h2 a, .heading-gamma a, h3 a, .heading-delta a, h4 a, .heading-epsilon a, h5 a, .heading-zeta a, h6 a, .heading-giga a, .heading-mega a, .heading-alpha a, h1 a, .heading-beta a, h2 a, .heading-gamma a, h3 a, .heading-delta a, h4 a, .heading-epsilon a, h5 a, .heading-zeta a, h6 a { color: #242424; background-color: transparent; border-bottom: 0 none; -moz-transition: none; -webkit-transition: none; transition: none; } .heading-tera a:visited, .heading-giga a:visited, .heading-mega a:visited, .heading-alpha a:visited, h1 a:visited, .heading-beta a:visited, h2 a:visited, .heading-gamma a:visited, h3 a:visited, .heading-delta a:visited, h4 a:visited, .heading-epsilon a:visited, h5 a:visited, .heading-zeta a:visited, h6 a:visited, .heading-giga a:visited, .heading-mega a:visited, .heading-alpha a:visited, h1 a:visited, .heading-beta a:visited, h2 a:visited, .heading-gamma a:visited, h3 a:visited, .heading-delta a:visited, h4 a:visited, .heading-epsilon a:visited, h5 a:visited, .heading-zeta a:visited, h6 a:visited { color: #242424; } .heading-tera a:focus, .heading-giga a:focus, .heading-mega a:focus, .heading-alpha a:focus, h1 a:focus, .heading-beta a:focus, h2 a:focus, .heading-gamma a:focus, h3 a:focus, .heading-delta a:focus, h4 a:focus, .heading-epsilon a:focus, h5 a:focus, .heading-zeta a:focus, h6 a:focus, .heading-giga a:focus, .heading-mega a:focus, .heading-alpha a:focus, h1 a:focus, .heading-beta a:focus, h2 a:focus, .heading-gamma a:focus, h3 a:focus, .heading-delta a:focus, h4 a:focus, .heading-epsilon a:focus, h5 a:focus, .heading-zeta a:focus, h6 a:focus { outline: 1px dotted #242424; color: #242424; background-color: transparent; border-bottom: 0 none; } .heading-tera a:hover, .heading-giga a:hover, .heading-mega a:hover, .heading-alpha a:hover, h1 a:hover, .heading-beta a:hover, h2 a:hover, .heading-gamma a:hover, h3 a:hover, .heading-delta a:hover, h4 a:hover, .heading-epsilon a:hover, h5 a:hover, .heading-zeta a:hover, h6 a:hover, .heading-giga a:hover, .heading-mega a:hover, .heading-alpha a:hover, h1 a:hover, .heading-beta a:hover, h2 a:hover, .heading-gamma a:hover, h3 a:hover, .heading-delta a:hover, h4 a:hover, .heading-epsilon a:hover, h5 a:hover, .heading-zeta a:hover, h6 a:hover { color: #242424; background-color: transparent; border-bottom: 0 none; } .heading-tera a:active, .heading-giga a:active, .heading-mega a:active, .heading-alpha a:active, h1 a:active, .heading-beta a:active, h2 a:active, .heading-gamma a:active, h3 a:active, .heading-delta a:active, h4 a:active, .heading-epsilon a:active, h5 a:active, .heading-zeta a:active, h6 a:active, .heading-giga a:active, .heading-mega a:active, .heading-alpha a:active, h1 a:active, .heading-beta a:active, h2 a:active, .heading-gamma a:active, h3 a:active, .heading-delta a:active, h4 a:active, .heading-epsilon a:active, h5 a:active, .heading-zeta a:active, h6 a:active { color: #242424; background-color: transparent; border-bottom: 0 none; } /* === lists === */ ul { margin: 0; } ol { margin: 0; } /* ======================================== forms ======================================== */ form { margin: 0; /* form controls reset */ } form fieldset { margin: 0; padding: 0; border: 0 none; } form label[for] { cursor: pointer; } form input[type='text'], form input[type='email'], form input[type='password'], form input[type='search'], form input[type='tel'], form input[type='url'] { color: inherit; font-size: inherit; line-height: inherit; } form input[type='radio'], form input[type='checkbox'] { vertical-align: middle; } form input[type='submit'] { color: inherit; font-size: inherit; line-height: inherit; } form textarea { resize: vertical; color: inherit; font-size: inherit; line-height: inherit; min-height: 96px; } /* ======================================== other stuff ======================================== */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #242424; margin: 1em 0; padding: 0; } img { vertical-align: middle; } /* ======================================== helper classes ======================================== */ .hidden { display: none !important; visibility: hidden !important; } .invisible { visibility: hidden !important; } .for-blind { border: 0; clip: rect(0, 0, 0, 0); height: 1px !important; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px !important; opacity: 0; } .for-blind.focusable:active, .for-blind.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .cleared:after { content: ''; display: block; clear: both; } /* ======================================== print styles ======================================== */ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a { text-decoration: underline; } a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* === UI === */ #js-font-resize { border: 0; clip: rect(0, 0, 0, 0); height: 1px !important; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px !important; } /* ======================================== form ======================================== */ /* === UI form reset === */ .ui-form > * { -webkit-appearance: none; -moz-appearance: none; } .ui-form input[type='text'], .ui-form input[type='email'], .ui-form input[type='password'], .ui-form input[type='search'], .ui-form input[type='tel'], .ui-form input[type='url'] { width: 100%; margin: 0; padding: 0; border: 0 none; outline: 0 none; background: transparent; } .ui-form input[type='text']:invalid, .ui-form input[type='email']:invalid, .ui-form input[type='password']:invalid, .ui-form input[type='search']:invalid, .ui-form input[type='tel']:invalid, .ui-form input[type='url']:invalid { box-shadow: none; } .ui-form input[type='radio'], .ui-form input[type='checkbox'] { vertical-align: middle; } .ui-form input[type='submit'] { width: 100%; margin: 0; padding: 0; border: 0 none; outline: 0 none; background: transparent; } .ui-form textarea { width: 100%; margin: 0; padding: 0; border: 0 none; outline: 0 none; background: transparent; } /* ======================================== form UI elements ======================================== */ /* === common form elements definitions === */ /* default required invalid selected focus hover selected-focus selected-hover disabled disabled-selected */ .ui-edit-box, .ui-text-box, .ui-radio-box, .ui-check-box, .ui-choose-box, .ui-choose-box--multiple, .ui-date-box { -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; font-size: 14px; line-height: 24px; font-size: 0.875rem; line-height: 1.5rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } /* === edit box & text box === */ .ui-edit-box, .ui-text-box { overflow: hidden; margin-bottom: 0px; margin-bottom: 0rem; padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 6px; padding-left: 0.375rem; padding-right: 6px; padding-right: 0.375rem; color: #666666; background-color: white; border: 1px solid #cbcbcb; border-radius: 0.375rem; box-shadow: none; /* required */ /* invalid */ /* focus */ /* hover */ /* selected-focus */ /* N/A */ /* selected-hover */ /* N/A */ /* disabled */ /* disabled-selected */ /* N/A */ } .ui-edit-box > input, .ui-text-box > input { -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; height: 24px; height: 1.5rem; } .ui-edit-box > input::-webkit-input-placeholder, .ui-text-box > input::-webkit-input-placeholder { color: #8f8f8f; opacity: 1; } .ui-edit-box > input:-moz-placeholder, .ui-text-box > input:-moz-placeholder { color: #8f8f8f; opacity: 1; } .ui-edit-box > input::-moz-placeholder, .ui-text-box > input::-moz-placeholder { color: #8f8f8f; opacity: 1; } .ui-edit-box > input:-ms-input-placeholder, .ui-text-box > input:-ms-input-placeholder { color: #8f8f8f; opacity: 1; } .ui-edit-box > textarea, .ui-text-box > textarea { height: 72px; height: 4.5rem; } .ui-edit-box.required, .ui-text-box.required { /*@include set__icon('exclamation-sign', 'padding right', 1, 0.5, $ui-element--required__main__icon-color); color: $ui-element--required__main__color; background-color: $ui-element--required__main__background-color; border: $ui-element--required__main__border; @include set__border-radius($ui-element--required__main__border-radius); @include set__box-shadow($ui-element--required__main__box-shadow); > input { @include set__placeholder-color($ui-element--required__placeholder__color); }*/ } .ui-edit-box.required:before, .ui-text-box.required:before { /* !!! ICON !!! */ } .ui-edit-box.required:after, .ui-text-box.required:after { content: ''; position: absolute; right: 0; top: 0; width: 0; height: 0; border-bottom: 24px solid transparent; border-bottom: 1.5rem solid transparent; border-right: 24px solid #77d729; border-right: 1.5rem solid #77d729; } .ui-edit-box.invalid, .ui-text-box.invalid { /* color: ; background-color: ; border: ; border-radius: ; box-shadow: ; &:before { } &:after { } > input { @include set__placeholder-color(); } */ } .ui-edit-box.focus, .ui-text-box.focus { /* color: ; background-color: ; border: ; border-radius: ; box-shadow: ; &:before { } &:after { } > input { @include set__placeholder-color(); } */ } .ui-edit-box:hover, .ui-text-box:hover { border-color: #77d729; /* color: ; background-color: ; border: ; border-radius: ; box-shadow: ; &:before { } &:after { } > input { @include set__placeholder-color(); } */ } .ui-edit-box.disabled, .ui-text-box.disabled { background-color: #f2f2f5; border-color: #cbcbcb; /* color: ; background-color: ; border: ; border-radius: ; box-shadow: ; &:before { } &:after { } > input { @include set__placeholder-color(); } */ } .ui-edit-box.disabled:after, .ui-text-box.disabled:after { display: none; } /* .ui-edit-box, .ui-text-box */ .ui-text-box { height: auto; } .ui-text-box.required:before { top: 24px; top: 1.5rem; } /* .ui-text-box */ /* === radio box === */ .ui-radio-box { height: 36px; height: 2.25rem; margin-bottom: 0px; margin-bottom: 0rem; padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 36px; padding-left: 2.25rem; padding-right: 12px; padding-right: 0.75rem; color: #242424; /* default required invalid selected focus hover selected-focus selected-hover disabled disabled-selected */ /* */ /* */ /* &.focus { color: $ui-element--focus__color; > label { &:before { background-color: $ui-element--focus__toggle__background-color; @include set__linear-gradient($ui-element--focus__toggle__gradient, $ui-element--focus__toggle__background-color, $ui-element--focus__toggle__gradient-orientation); border: $ui-element--focus__toggle__border; @include set__border-radius($ui-element--focus__toggle__border-radius); @include set__box-shadow($ui-element--focus__toggle__box-shadow); } &:after { color: $ui-element--focus__toggle__icon-color; } } }*/ /* &.selected.focus { > label { color: $ui-element--selected-focus__color; &:before { background-color: $ui-element--selected-focus__toggle__background-color; @include set__linear-gradient($ui-element--selected-focus__toggle__gradient, $ui-element--selected-focus__toggle__background-color, $ui-element--selected-focus__toggle__gradient-orientation); border: $ui-element--selected-focus__toggle__border; @include set__border-radius($ui-element--selected-focus__toggle__border-radius); @include set__box-shadow($ui-element--selected-focus__toggle__box-shadow); } &:after { color: $ui-element--selected-focus__toggle__icon-color; } } } &.selected { > label:hover { color: $ui-element--selected-hover__color; &:before { background-color: $ui-element--selected-hover__toggle__background-color; @include set__linear-gradient($ui-element--selected-hover__toggle__gradient, $ui-element--selected-hover__toggle__background-color, $ui-element--selected-hover__toggle__gradient-orientation); border: $ui-element--selected-hover__toggle__border; @include set__border-radius($ui-element--selected-hover__toggle__border-radius); @include set__box-shadow($ui-element--selected-hover__toggle__box-shadow); } &:after { color: $ui-element--selected-hover__toggle__icon-color; } } } &.disabled { > label { color: $ui-element--disabled__color; &:before { background-color: $ui-element--disabled__toggle__background-color; @include set__linear-gradient($ui-element--disabled__toggle__gradient, $ui-element--disabled__toggle__background-color, $ui-element--disabled__toggle__gradient-orientation); border: $ui-element--disabled__toggle__border; @include set__border-radius($ui-element--disabled__toggle__border-radius); @include set__box-shadow($ui-element--disabled__toggle__box-shadow); } &:after { color: $ui-element--disabled__toggle__icon-color; } } } &.disabled.selected { > label { color: $ui-element--disabled-selected__color; &:before { background-color: $ui-element--disabled-selected__toggle__background-color; @include set__linear-gradient($ui-element--disabled-selected__toggle__gradient, $ui-element--disabled-selected__toggle__background-color, $ui-element--disabled-selected__toggle__gradient-orientation); border: $ui-element--disabled-selected__toggle__border; @include set__border-radius($ui-element--disabled-selected__toggle__border-radius); @include set__box-shadow($ui-element--disabled-selected__toggle__box-shadow); } &:after { color: $ui-element--disabled-selected__toggle__icon-color; } } } */ } .ui-radio-box > input { position: absolute; opacity: 0; clip: rect(0, 0, 0, 0); outline: 0 none; } .ui-radio-box > label { margin: 0; } .ui-radio-box > label:after { content: ''; position: absolute; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; top: 6px; top: 0.375rem; width: 24px; width: 1.5rem; height: 24px; height: 1.5rem; background-color: white; border: 4px solid #a9a9b0; border: 0.25rem solid #a9a9b0; border-radius: 50%; box-shadow: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-radio-box > label:before { content: "\f111"; position: absolute; z-index: 1; left: 0px; left: 0rem; top: 50%; width: 24px; width: 1.5rem; color: #a9a9b0; font-size: 11px; line-height: 24px; font-size: 0.6875rem; line-height: 1.5rem; line-height: 0 !important; font-family: "Font Awesome"; text-align: center; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-radio-box.is-selected > label:after { border-color: #77d729; } .ui-radio-box.is-selected > label:before { color: #77d729; } .ui-radio-box:hover > label:after { border-color: #77d729; } /* === check box === */ .ui-check-box { height: 36px; height: 2.25rem; margin-bottom: 12px; margin-bottom: 0.75rem; padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 36px; padding-left: 2.25rem; padding-right: 12px; padding-right: 0.75rem; color: #242424; /* default required invalid selected focus hover selected-focus selected-hover disabled disabled-selected */ /* */ /* */ /* &.focus { color: $ui-element--focus__color; > label { &:before { background-color: $ui-element--focus__toggle__background-color; @include set__linear-gradient($ui-element--focus__toggle__gradient, $ui-element--focus__toggle__background-color, $ui-element--focus__toggle__gradient-orientation); border: $ui-element--focus__toggle__border; @include set__border-radius($ui-element--focus__toggle__border-radius); @include set__box-shadow($ui-element--focus__toggle__box-shadow); } &:after { color: $ui-element--focus__toggle__icon-color; } } }*/ /* &.selected.focus { > label { color: $ui-element--selected-focus__color; &:before { background-color: $ui-element--selected-focus__toggle__background-color; @include set__linear-gradient($ui-element--selected-focus__toggle__gradient, $ui-element--selected-focus__toggle__background-color, $ui-element--selected-focus__toggle__gradient-orientation); border: $ui-element--selected-focus__toggle__border; @include set__border-radius($ui-element--selected-focus__toggle__border-radius); @include set__box-shadow($ui-element--selected-focus__toggle__box-shadow); } &:after { color: $ui-element--selected-focus__toggle__icon-color; } } } &.selected { > label:hover { color: $ui-element--selected-hover__color; &:before { background-color: $ui-element--selected-hover__toggle__background-color; @include set__linear-gradient($ui-element--selected-hover__toggle__gradient, $ui-element--selected-hover__toggle__background-color, $ui-element--selected-hover__toggle__gradient-orientation); border: $ui-element--selected-hover__toggle__border; @include set__border-radius($ui-element--selected-hover__toggle__border-radius); @include set__box-shadow($ui-element--selected-hover__toggle__box-shadow); } &:after { color: $ui-element--selected-hover__toggle__icon-color; } } } &.disabled { > label { color: $ui-element--disabled__color; &:before { background-color: $ui-element--disabled__toggle__background-color; @include set__linear-gradient($ui-element--disabled__toggle__gradient, $ui-element--disabled__toggle__background-color, $ui-element--disabled__toggle__gradient-orientation); border: $ui-element--disabled__toggle__border; @include set__border-radius($ui-element--disabled__toggle__border-radius); @include set__box-shadow($ui-element--disabled__toggle__box-shadow); } &:after { color: $ui-element--disabled__toggle__icon-color; } } } &.disabled.selected { > label { color: $ui-element--disabled-selected__color; &:before { background-color: $ui-element--disabled-selected__toggle__background-color; @include set__linear-gradient($ui-element--disabled-selected__toggle__gradient, $ui-element--disabled-selected__toggle__background-color, $ui-element--disabled-selected__toggle__gradient-orientation); border: $ui-element--disabled-selected__toggle__border; @include set__border-radius($ui-element--disabled-selected__toggle__border-radius); @include set__box-shadow($ui-element--disabled-selected__toggle__box-shadow); } &:after { color: $ui-element--disabled-selected__toggle__icon-color; } } } */ } .ui-check-box > input { position: absolute; opacity: 0; clip: rect(0, 0, 0, 0); outline: 0 none; } .ui-check-box > label { margin: 0; } .ui-check-box > label:after { content: ''; position: absolute; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; top: 6px; top: 0.375rem; width: 24px; width: 1.5rem; height: 24px; height: 1.5rem; background-color: white; border: 4px solid #a9a9b0; border: 0.25rem solid #a9a9b0; box-shadow: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-check-box > label:before { content: "\f00d"; position: absolute; z-index: 1; left: 0px; left: 0rem; top: 50%; width: 24px; width: 1.5rem; color: #a9a9b0; font-size: 13px; line-height: 24px; font-size: 0.8125rem; line-height: 1.5rem; line-height: 0 !important; font-family: "Font Awesome"; text-align: center; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-check-box.is-selected > label:after { border-color: #77d729; } .ui-check-box.is-selected > label:before { content: "\f00c"; color: #77d729; } .ui-check-box:hover > label:after { border-color: #77d729; } /* .ui-check-box */ /* === choose box === */ .ui-choose-box, .ui-choose-box--multiple { margin-bottom: 0px; margin-bottom: 0rem; cursor: pointer; /* .ui-choose-box__chosen */ /* ul */ /* hover */ } .ui-choose-box select, .ui-choose-box--multiple select { border: 0; clip: rect(0, 0, 0, 0); height: 1px !important; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px !important; opacity: 0; } .ui-choose-box select.focusable:active, .ui-choose-box--multiple select.focusable:active, .ui-choose-box select.focusable:focus, .ui-choose-box--multiple select.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .ui-choose-box .ui-choose-box__placeholder, .ui-choose-box--multiple .ui-choose-box__placeholder { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 12px; padding-left: 0.75rem; padding-right: 48px; padding-right: 3rem; /*@include set__icon('reorder', 'padding right after', 1, 0.5, $ui-element__control__icon-color);*/ color: #666666; background-color: white; border: 1px solid #cbcbcb; border-radius: 0.375rem; box-shadow: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-choose-box .ui-choose-box__placeholder:before, .ui-choose-box--multiple .ui-choose-box__placeholder:before { content: "\f0d7"; position: absolute; top: 50%; right: 0; width: 36px; width: 2.25rem; font-size: 18px; line-height: 24px; font-size: 1.125rem; line-height: 1.5rem; line-height: 0 !important; font-family: "Font Awesome"; text-align: center; } .ui-choose-box .ui-choose-box__placeholder:after, .ui-choose-box--multiple .ui-choose-box__placeholder:after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 36px; width: 2.25rem; border-left: 1px solid #cbcbcb; } .ui-choose-box .ui-choose-box__placeholder.is-empty, .ui-choose-box--multiple .ui-choose-box__placeholder.is-empty { color: #8f8f8f; } .ui-choose-box .ui-choose-box__chosen, .ui-choose-box--multiple .ui-choose-box__chosen { position: relative; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; margin-top: 3px; margin-top: 0.1875rem; margin-bottom: 3px; margin-bottom: 0.1875rem; margin-left: 3px; margin-left: 0.1875rem; margin-right: 3px; margin-right: 0.1875rem; padding-left: 3px; padding-left: 0.1875rem; padding-right: 24px; padding-right: 1.5rem; background-color: #e1e1e1; font-size: 12px; line-height: 24px; font-size: 0.75rem; line-height: 1.5rem; border-radius: 0.25rem 0.75rem 0.75rem 0.25rem; } .ui-choose-box .ui-choose-box__remove-button, .ui-choose-box--multiple .ui-choose-box__remove-button { position: absolute; top: 3px; top: 0.1875rem; right: 3px; right: 0.1875rem; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 9px; padding-top: 0.5625rem; padding-bottom: 9px; padding-bottom: 0.5625rem; padding-left: 9px; padding-left: 0.5625rem; padding-right: 9px; padding-right: 0.5625rem; border: 0 none; } .ui-choose-box .ui-choose-box__remove-button:before, .ui-choose-box--multiple .ui-choose-box__remove-button:before, .ui-choose-box .ui-choose-box__remove-button:after, .ui-choose-box--multiple .ui-choose-box__remove-button:after { content: ''; position: absolute; } .ui-choose-box .ui-choose-box__remove-button:before, .ui-choose-box--multiple .ui-choose-box__remove-button:before { z-index: 1; content: "\f00d"; top: 9px; top: 0.5625rem; left: 0; width: 18px; width: 1.125rem; color: white; font-size: 14px; line-height: 0px; font-size: 0.875rem; line-height: 0rem; font-family: "Font Awesome"; text-align: center; } .ui-choose-box .ui-choose-box__remove-button:after, .ui-choose-box--multiple .ui-choose-box__remove-button:after { left: 0; top: 0; width: 18px; width: 1.125rem; height: 18px; height: 1.125rem; background-color: #3e3e3e; border-radius: 50%; } .ui-choose-box > ul, .ui-choose-box--multiple > ul { position: absolute; overflow-y: scroll; z-index: 2; top: 100%; left: 6px; left: 0.375rem; right: 6px; right: 0.375rem; max-height: 180px; max-height: 11.25rem; margin: 0; padding: 0; visibility: hidden; *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; background-color: white; list-style: none; border: 1px solid #cbcbcb; border-top-width: 0; border-radius: 0 0 0.375rem 0.375rem; box-shadow: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; /* > li */ } .ui-choose-box > ul > li, .ui-choose-box--multiple > ul > li { display: block; padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; color: #666666; background-color: white; border: 0 none; border-radius: 0; box-shadow: none; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .ui-choose-box.is-opened > span:before, .is-opened.ui-choose-box--multiple > span:before { content: "\f0d8"; } .ui-choose-box.is-opened > ul, .is-opened.ui-choose-box--multiple > ul { visibility: visible; *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 100 ")"; filter: alpha(opacity=100); opacity: 1; } .ui-choose-box:hover > span, .ui-choose-box--multiple:hover > span { border-color: #77d729; } .ui-choose-box ul > li:hover, .ui-choose-box--multiple ul > li:hover, .ui-choose-box ul > li.is-focused, .ui-choose-box--multiple ul > li.is-focused { color: #77d729; } .ui-choose-box ul > li.is-selected, .ui-choose-box--multiple ul > li.is-selected { font-weight: bold; } /* .ui-choose-box */ .ui-choose-box--multiple .ui-choose-box__placeholder { padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 6px; padding-left: 0.375rem; padding-right: 42px; padding-right: 2.625rem; } /* ======================================== slider ======================================== */ .ui-slider { position: relative; overflow: hidden; width: 100%; /*perspective: 1200px;*/ transform-style: preserve-3d; } .ui-slider .ui-slider__pager { position: absolute; z-index: 2; } .ui-slider .ui-slider__item { width: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .ui-slider .ui-slider__item--current { visibility: visible; } .ui-slider .ui-slider__item--on-top { z-index: 1; } .ui-slider .ui-slider__item--delay-1 { -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } /* .ui-slider */ /* animation sets */ /* move from / to */ .ui-slider__item--move-to-left { -moz-animation: ui-slider__move-to-left 0.6s ease both; -o-animation: ui-slider__move-to-left 0.6s ease both; -webkit-animation: ui-slider__move-to-left 0.6s ease both; animation: ui-slider__move-to-left 0.6s ease both; } .ui-slider__item--move-from-left { -moz-animation: ui-slider__move-from-left 0.6s ease both; -o-animation: ui-slider__move-from-left 0.6s ease both; -webkit-animation: ui-slider__move-from-left 0.6s ease both; animation: ui-slider__move-from-left 0.6s ease both; } .ui-slider__item--move-to-right { -moz-animation: ui-slider__move-to-right 0.6s ease both; -o-animation: ui-slider__move-to-right 0.6s ease both; -webkit-animation: ui-slider__move-to-right 0.6s ease both; animation: ui-slider__move-to-right 0.6s ease both; } .ui-slider__item--move-from-right { -moz-animation: ui-slider__move-from-right 0.6s ease both; -o-animation: ui-slider__move-from-right 0.6s ease both; -webkit-animation: ui-slider__move-from-right 0.6s ease both; animation: ui-slider__move-from-right 0.6s ease both; } .ui-slider__item--move-to-top { -moz-animation: ui-slider__move-to-top 0.6s ease both; -o-animation: ui-slider__move-to-top 0.6s ease both; -webkit-animation: ui-slider__move-to-top 0.6s ease both; animation: ui-slider__move-to-top 0.6s ease both; } .ui-slider__item--move-from-top { -moz-animation: ui-slider__move-from-top 0.6s ease both; -o-animation: ui-slider__move-from-top 0.6s ease both; -webkit-animation: ui-slider__move-from-top 0.6s ease both; animation: ui-slider__move-from-top 0.6s ease both; } .ui-slider__item--move-to-bottom { -moz-animation: ui-slider__move-to-bottom 0.6s ease both; -o-animation: ui-slider__move-to-bottom 0.6s ease both; -webkit-animation: ui-slider__move-to-bottom 0.6s ease both; animation: ui-slider__move-to-bottom 0.6s ease both; } .ui-slider__item--move-from-bottom { -moz-animation: ui-slider__move-from-bottom 0.6s ease both; -o-animation: ui-slider__move-from-bottom 0.6s ease both; -webkit-animation: ui-slider__move-from-bottom 0.6s ease both; animation: ui-slider__move-from-bottom 0.6s ease both; } /* fade */ .ui-slider__item--fade { -moz-animation: ui-slider__fade 0.7s ease both; -o-animation: ui-slider__fade 0.7s ease both; -webkit-animation: ui-slider__fade 0.7s ease both; animation: ui-slider__fade 0.7s ease both; } /* move from / to and fade */ .ui-slider__item--move-to-left-fade { -moz-animation: ui-slider__move-to-left-fade 0.7s ease both; -o-animation: ui-slider__move-to-left-fade 0.7s ease both; -webkit-animation: ui-slider__move-to-left-fade 0.7s ease both; animation: ui-slider__move-to-left-fade 0.7s ease both; } .ui-slider__item--move-from-left-fade { -moz-animation: ui-slider__move-from-left-fade 0.7s ease both; -o-animation: ui-slider__move-from-left-fade 0.7s ease both; -webkit-animation: ui-slider__move-from-left-fade 0.7s ease both; animation: ui-slider__move-from-left-fade 0.7s ease both; } .ui-slider__item--move-to-right-fade { -moz-animation: ui-slider__move-to-right-fade 0.7s ease both; -o-animation: ui-slider__move-to-right-fade 0.7s ease both; -webkit-animation: ui-slider__move-to-right-fade 0.7s ease both; animation: ui-slider__move-to-right-fade 0.7s ease both; } .ui-slider__item--move-from-right-fade { -moz-animation: ui-slider__move-from-right-fade 0.7s ease both; -o-animation: ui-slider__move-from-right-fade 0.7s ease both; -webkit-animation: ui-slider__move-from-right-fade 0.7s ease both; animation: ui-slider__move-from-right-fade 0.7s ease both; } .ui-slider__item--move-to-top-fade { -moz-animation: ui-slider__move-to-top-fade 0.7s ease both; -o-animation: ui-slider__move-to-top-fade 0.7s ease both; -webkit-animation: ui-slider__move-to-top-fade 0.7s ease both; animation: ui-slider__move-to-top-fade 0.7s ease both; } .ui-slider__item--move-from-top-fade { -moz-animation: ui-slider__move-from-top-fade 0.7s ease both; -o-animation: ui-slider__move-from-top-fade 0.7s ease both; -webkit-animation: ui-slider__move-from-top-fade 0.7s ease both; animation: ui-slider__move-from-top-fade 0.7s ease both; } .ui-slider__item--move-to-bottom-fade { -moz-animation: ui-slider__move-to-bottom-fade 0.7s ease both; -o-animation: ui-slider__move-to-bottom-fade 0.7s ease both; -webkit-animation: ui-slider__move-to-bottom-fade 0.7s ease both; animation: ui-slider__move-to-bottom-fade 0.7s ease both; } .ui-slider__item--move-from-bottom-fade { -moz-animation: ui-slider__move-from-bottom-fade 0.7s ease both; -o-animation: ui-slider__move-from-bottom-fade 0.7s ease both; -webkit-animation: ui-slider__move-from-bottom-fade 0.7s ease both; animation: ui-slider__move-from-bottom-fade 0.7s ease both; } /* move to with different easing */ .ui-slider__item--move-to-left-easing { -moz-animation: ui-slider__move-to-left 0.7s ease-in-out both; -o-animation: ui-slider__move-to-left 0.7s ease-in-out both; -webkit-animation: ui-slider__move-to-left 0.7s ease-in-out both; animation: ui-slider__move-to-left 0.7s ease-in-out both; } .ui-slider__item--move-to-right-easing { -moz-animation: ui-slider__move-to-right 0.7s ease-in-out both; -o-animation: ui-slider__move-to-right 0.7s ease-in-out both; -webkit-animation: ui-slider__move-to-right 0.7s ease-in-out both; animation: ui-slider__move-to-right 0.7s ease-in-out both; } .ui-slider__item--move-to-top-easing { -moz-animation: ui-slider__move-to-top 0.7s ease-in-out both; -o-animation: ui-slider__move-to-top 0.7s ease-in-out both; -webkit-animation: ui-slider__move-to-top 0.7s ease-in-out both; animation: ui-slider__move-to-top 0.7s ease-in-out both; } .ui-slider__item--move-to-bottom-easing { -moz-animation: ui-slider__move-to-bottom 0.7s ease-in-out both; -o-animation: ui-slider__move-to-bottom 0.7s ease-in-out both; -webkit-animation: ui-slider__move-to-bottom 0.7s ease-in-out both; animation: ui-slider__move-to-bottom 0.7s ease-in-out both; } /* scale and fade */ .ui-slider__item--scale-to-down { -moz-animation: ui-slider__scale-to-down 0.7s ease both; -o-animation: ui-slider__scale-to-down 0.7s ease both; -webkit-animation: ui-slider__scale-to-down 0.7s ease both; animation: ui-slider__scale-to-down 0.7s ease both; } .ui-slider__item--scale-from-down { -moz-animation: ui-slider__scale-from-down 0.7s ease both; -o-animation: ui-slider__scale-from-down 0.7s ease both; -webkit-animation: ui-slider__scale-from-down 0.7s ease both; animation: ui-slider__scale-from-down 0.7s ease both; } .ui-slider__item--scale-from-up { -moz-animation: ui-slider__scale-from-up 0.5s ease both; -o-animation: ui-slider__scale-from-up 0.5s ease both; -webkit-animation: ui-slider__scale-from-up 0.5s ease both; animation: ui-slider__scale-from-up 0.5s ease both; } .ui-slider__item--scale-to-up { -moz-animation: ui-slider__scale-to-up 0.5s ease both; -o-animation: ui-slider__scale-to-up 0.5s ease both; -webkit-animation: ui-slider__scale-to-up 0.5s ease both; animation: ui-slider__scale-to-up 0.5s ease both; } /********************************* keyframes **************************************/ /* move from / to */ @-webkit-keyframes ui-slider__move-to-left { to { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes ui-slider__move-to-left { to { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes ui-slider__move-to-left { to { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes ui-slider__move-to-left { to { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes ui-slider__move-from-left { from { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes ui-slider__move-from-left { from { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes ui-slider__move-from-left { from { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes ui-slider__move-from-left { from { -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes ui-slider__move-to-right { to { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes ui-slider__move-to-right { to { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes ui-slider__move-to-right { to { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @keyframes ui-slider__move-to-right { to { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes ui-slider__move-from-right { from { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes ui-slider__move-from-right { from { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes ui-slider__move-from-right { from { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @keyframes ui-slider__move-from-right { from { -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes ui-slider__move-to-top { to { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes ui-slider__move-to-top { to { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes ui-slider__move-to-top { to { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes ui-slider__move-to-top { to { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes ui-slider__move-from-top { from { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes ui-slider__move-from-top { from { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes ui-slider__move-from-top { from { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes ui-slider__move-from-top { from { -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes ui-slider__move-to-bottom { to { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-moz-keyframes ui-slider__move-to-bottom { to { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes ui-slider__move-to-bottom { to { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @keyframes ui-slider__move-to-bottom { to { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes ui-slider__move-from-bottom { from { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-moz-keyframes ui-slider__move-from-bottom { from { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes ui-slider__move-from-bottom { from { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @keyframes ui-slider__move-from-bottom { from { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } /* fade */ @-webkit-keyframes ui-slider__fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } } @-moz-keyframes ui-slider__fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } } @-o-keyframes ui-slider__fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } } @keyframes ui-slider__fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; } } /* move from / to and fade */ @-webkit-keyframes ui-slider__move-to-left-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes ui-slider__move-to-left-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes ui-slider__move-to-left-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes ui-slider__move-to-left-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes ui-slider__move-from-left-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes ui-slider__move-from-left-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes ui-slider__move-from-left-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes ui-slider__move-from-left-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes ui-slider__move-to-right-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes ui-slider__move-to-right-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes ui-slider__move-to-right-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @keyframes ui-slider__move-to-right-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes ui-slider__move-from-right-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes ui-slider__move-from-right-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes ui-slider__move-from-right-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @keyframes ui-slider__move-from-right-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes ui-slider__move-to-top-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes ui-slider__move-to-top-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes ui-slider__move-to-top-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes ui-slider__move-to-top-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes ui-slider__move-from-top-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes ui-slider__move-from-top-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes ui-slider__move-from-top-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes ui-slider__move-from-top-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes ui-slider__move-to-bottom-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-moz-keyframes ui-slider__move-to-bottom-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes ui-slider__move-to-bottom-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @keyframes ui-slider__move-to-bottom-fade { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes ui-slider__move-from-bottom-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-moz-keyframes ui-slider__move-from-bottom-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes ui-slider__move-from-bottom-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } @keyframes ui-slider__move-from-bottom-fade { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); opacity: 0.3; -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } } /********************************* keyframes **************************************/ /* scale and fade */ @-webkit-keyframes ui-slider__scale-to-down { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-moz-keyframes ui-slider__scale-to-down { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-o-keyframes ui-slider__scale-to-down { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @keyframes ui-slider__scale-to-down { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes ui-slider__scale-from-down { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-moz-keyframes ui-slider__scale-from-down { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-o-keyframes ui-slider__scale-from-down { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @keyframes ui-slider__scale-from-down { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes ui-slider__scale-from-up { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @-moz-keyframes ui-slider__scale-from-up { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @-o-keyframes ui-slider__scale-from-up { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @keyframes ui-slider__scale-from-up { from { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes ui-slider__scale-to-up { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @-moz-keyframes ui-slider__scale-to-up { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @-o-keyframes ui-slider__scale-to-up { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } @keyframes ui-slider__scale-to-up { to { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } } /* ======================================== image cover ======================================== */ .image-cover--tall { width: 100% !important; height: auto !important; } .image-cover--wide { width: auto !important; height: 100% !important; } /*========================================forms========================================*/ form, div.form { margin-top: 24px; margin-top: 1.5rem; margin-bottom: 24px; margin-bottom: 1.5rem; margin-left: -24px; margin-left: -1.5rem; margin-right: -24px; margin-right: -1.5rem; } form fieldset { padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; border-bottom: 1px solid #f2f2f5; } form fieldset:first-child { padding-top: 0; } form fieldset + .ui-form__row { margin-top: 12px; margin-top: 0.75rem; } form .ui-form__row { padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; padding-left: 24px; padding-left: 1.5rem; padding-right: 24px; padding-right: 1.5rem; } form .ui-form__row:after { content: ''; display: block; clear: both; } form .ui-form__row.highlighted { margin-bottom: 12px; margin-bottom: 0.75rem; padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; padding-left: 24px; padding-left: 1.5rem; padding-right: 24px; padding-right: 1.5rem; background-color: #f2f2f5; } form .ui-form__row.highlighted .ui-form__row-label label { font-weight: bold; } form .ui-form__row .ui-form__row-label { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 25%; min-width: 25%; min-height: 24px; min-height: 1.5rem; padding-right: 24px; padding-right: 1.5rem; } form .ui-form__row .ui-form__row-label label { font-size: 14px; line-height: 24px; font-size: 0.875rem; line-height: 1.5rem; } form .ui-form__row .ui-form__row-label p { color: #8f8f8f; font-size: 12px; line-height: 24px; font-size: 0.75rem; line-height: 1.5rem; } form .ui-form__row .ui-form__row-fields { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 75%; } form .ui-form__row .ui-form__row-fields:after { content: ''; display: block; clear: both; } form .ui-form__row .ui-form__row-fields > .ui-edit-box, form .ui-form__row .ui-form__row-fields > .ui-radio-box, form .ui-form__row .ui-form__row-fields > .ui-check-box, form .ui-form__row .ui-form__row-fields > .ui-text-box, form .ui-form__row .ui-form__row-fields > .ui-choose-box, form .ui-form__row .ui-form__row-fields > .ui-choose-box--multiple { float: left; width: 480px; width: 30rem; } form .ui-form__row .ui-form__row-fields > .ui-date-box { display: inline-block; width: 216px; width: 13.5rem; vertical-align: top; } form .ui-form__row .ui-form__row-fields > * + p { float: left; margin-left: 12px; margin-left: 0.75rem; } form .ui-form__row .ui-form__row-fields > .ui-choose-box, form .ui-form__row .ui-form__row-fields > .ui-choose-box--multiple { width: 432px; width: 27rem; } form .ui-form__row .ui-form__row-fields .ui-radio-box { float: left; width: auto; } form .ui-form__row .ui-form__row-fields .ui-radio-box + .ui-radio-box { margin-left: 24px; margin-left: 1.5rem; } form .ui-form__row .ui-form__row-fields p { padding-top: 6px; padding-top: 0.375rem; padding-bottom: 6px; padding-bottom: 0.375rem; width: auto; color: #8f8f8f; font-size: 12px; line-height: 24px; font-size: 0.75rem; line-height: 1.5rem; } form .controls .ui-form__row-fields { margin-left: 25%; } form .hint { position: relative; margin-top: 24px; margin-top: 1.5rem; padding-left: 72px; padding-left: 4.5rem; padding-right: 24px; padding-right: 1.5rem; color: #8f8f8f; font-size: 12px; line-height: 24px; font-size: 0.75rem; line-height: 1.5rem; } form .hint:before { content: '?'; position: absolute; left: 21px; left: 1.3125rem; top: 24px; top: 1.5rem; width: 30px; width: 1.875rem; height: 30px; height: 1.875rem; color: #6adc0e; font-size: 16px; line-height: 0px; font-size: 1rem; line-height: 0rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; } form .hint:after { content: ''; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 21px; left: 1.3125rem; top: 9px; top: 0.5625rem; width: 30px; width: 1.875rem; height: 30px; height: 1.875rem; border: 0.1875rem solid #6adc0e; border-radius: 50%; } /* form */ /* === layout === */ /*========================================page========================================*/ body { background: #e4e4eb url("../images/bg-default.jpg"); } /*========================================header========================================*/ #upload { position: fixed; left: 0; right: 0; top: 0; bottom: 0; font-size: 0; text-align: center; /* .upload__gallery */ } #upload.scroll { position: relative; } #upload:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } #upload > * { font-size: 16px; line-height: 24px; font-size: 1rem; line-height: 1.5rem; text-align: left; } #upload .upload__gallery { position: absolute; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; } #upload .upload__gallery p { width: 100%; height: 100%; } #upload .upload__gallery p img { width: 100%; height: auto; } #upload .upload__files { margin-top: 24px; margin-top: 1.5rem; margin-bottom: 24px; margin-bottom: 1.5rem; margin-left: 24px; margin-left: 1.5rem; margin-right: 24px; margin-right: 1.5rem; padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; background-color: #3e3e3e; background-color: rgba(62, 62, 62, 0.2); border-radius: 0.5rem; border: 1px solid #676767; border: 1px solid rgba(110, 110, 110, 0.75); box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.4) inset; } #upload .upload__files.type1 { margin-top: 0; margin-bottom: 12px; margin-bottom: 0.75rem; } #upload .upload__files:after { content: ''; display: block; clear: both; } #upload .upload__files-drop { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; padding-top: 36px; padding-top: 2.25rem; padding-bottom: 36px; padding-bottom: 2.25rem; padding-left: 36px; padding-left: 2.25rem; padding-right: 36px; padding-right: 2.25rem; text-align: center; border: 4px dashed #2c7971; } #upload .upload__files-drop a { position: relative; display: inline-block; padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; padding-left: 42px; padding-left: 2.625rem; padding-right: 18px; padding-right: 1.125rem; color: #fff; background-color: #1abc9c; font-weight: bold; text-align: center; border: 0; border-radius: 0.25rem; } #upload .upload__files-drop a:hover { background-color: #55beb1; } #upload .upload__files-drop a:before { content: '+'; position: absolute; left: 0; top: 50%; width: 42px; width: 2.625rem; color: #098d73; font-size: 28px; line-height: 0px; font-size: 1.75rem; line-height: 0rem; text-align: center; } #upload .upload__files-list { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; } #upload .upload__files-list span { padding-right: 6px; padding-right: 0.37rem; display: block; float: left; color: #fff; font-size: 14px; line-height: 24px; font-size: 0.875rem; line-height: 1.5rem; } #upload .upload__files-list b { display: block; float: left; color: #1abc9c; font-weight: normal; } #upload .upload__files-list a { display: block; float: left; padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; border: 0 none; font-size: 16px; line-height: 24px; font-size: 1rem; line-height: 1.5rem; position: relative; } #upload .upload__files-list a:before { content: "\f00d"; position: absolute; left: 0; top: 50%; width: 24px; width: 1.5rem; color: #1abc9c; font-size: 16px; line-height: 0px; font-size: 1rem; line-height: 0rem; font-family: "Font Awesome"; text-align: center; } #upload .read__files-list { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; } #upload .read__files-list b { color: #1abc9c; font-weight: normal; } #upload .read__files-list a { float: left; border-bottom: 1px dotted #ffffff; padding: 0; margin-bottom: 8px; margin-bottom: 0.5rem; color: #ffffff; font-size: 16px; line-height: 24px; font-size: 1rem; line-height: 1.5rem; position: relative; } #upload .read__files-list a:hover { border-bottom: 1px dotted #242424; } #upload form, #upload div.form { position: relative; z-index: 2; display: inline-block; vertical-align: middle; width: 50%; min-width: 320px; max-width: 960px; background-color: black; background-color: rgba(0, 0, 0, 0.75); border-radius: 0.5rem; /* .ui-form__row-fields */ } #upload form fieldset { padding: 0; border: 0 none; } #upload form fieldset:after { content: ''; display: block; clear: both; } #upload form .ui-form__column { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; margin-bottom: 24px; margin-bottom: 1.5rem; } #upload form .ui-form__column:first-child { border-right: 1px solid #383e44; border-right: 1px solid rgba(255, 255, 255, 0.2); } #upload form .ui-form__column:first-child .ui-form__row { padding-left: 24px; padding-left: 1.5rem; padding-right: 12px; padding-right: 0.75rem; } #upload form .ui-form__list { padding-top: 12px; padding-top: 0.75rem; } #upload form .ui-form__list span { padding-right: 6px; padding-right: 0.37rem; display: block; float: left; color: #fff; font-size: 14px; line-height: 24px; font-size: 0.875rem; line-height: 1.5rem; } #upload form .ui-form__list a { display: block; float: left; padding-top: 12px; padding-top: 0.75rem; padding-bottom: 12px; padding-bottom: 0.75rem; padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; border: 0 none; font-size: 16px; line-height: 24px; font-size: 1rem; line-height: 1.5rem; position: relative; } #upload form .ui-form__list a:before { content: "\f00d"; position: absolute; left: 0; top: 50%; width: 24px; width: 1.5rem; color: #1abc9c; font-size: 16px; line-height: 0px; font-size: 1rem; line-height: 0rem; font-family: "Font Awesome"; text-align: center; } #upload form .ui-form__row { position: relative; padding-left: 12px; padding-left: 0.75rem; padding-right: 24px; padding-right: 1.5rem; } #upload form .ui-form__row-label { display: none; } #upload form .ui-form__row-fields { width: auto; float: none; } #upload form .ui-form__row-fields > * { width: auto; float: none; } #upload form .ui-form__row-fields .ui-edit-box, #upload form .ui-form__row-fields .ui-text-box { height: auto; padding-top: 9px; padding-top: 0.5625rem; padding-bottom: 9px; padding-bottom: 0.5625rem; padding-left: 9px; padding-left: 0.5625rem; padding-right: 9px; padding-right: 0.5625rem; color: #666; border: 0 none; } #upload form .ui-form__row-fields .ui-add-button { position: absolute; right: 18px; right: 1.125rem; top: 12px; top: 0.75rem; height: 30px; height: 1.875rem; line-height: 30px; line-height: 1.875rem; width: 30px; width: 1.875rem; border-radius: 0.25rem; background-color: #1abc9c; } #upload form .ui-form__row-fields .ui-add-button input { padding: 0; margin-top: -4px; margin-top: -0.250rem; height: 30px; height: 1.875rem; color: #098d73; font-size: 28px; line-height: 30px; font-size: 1.75rem; line-height: 1.875rem; font-weight: bold; } #upload form .ui-form__row-fields .ui-add-button:hover { background-color: #55beb1; } #upload form .ui-form__row-fields .ui-upload-button { min-width: 288px; min-width: 18rem; margin-top: 12px; margin-top: 0.75rem; position: relative; display: inline-block; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 60px; height: 3.75rem; line-height: 60px; line-height: 3.75rem; border-radius: 0.25rem; background-color: #ff2933; } #upload form .ui-form__row-fields .ui-upload-button:before { content: "\f0ee"; position: absolute; top: 50%; left: 12px; left: 0.75rem; width: 48px; width: 3rem; color: #b81820; font-size: 28px; line-height: 0px; font-size: 1.75rem; line-height: 0rem; font-family: "Font Awesome"; text-align: center; } #upload form .ui-form__row-fields .ui-upload-button input { padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; height: 60px; height: 3.75rem; text-align: left; color: #fff; font-size: 22px; line-height: 60px; font-size: 1.375rem; line-height: 3.75rem; font-weight: bold; text-align: center; } #upload form .ui-form__row-fields .ui-upload-button:hover { background-color: #ed4d2a; } #upload .title__logo { margin: 28px 28px 0 28px; margin: 1.5rem 1.5rem 0 1.5rem; text-align: left; } #upload .title__logo a, #upload .title__logo a:hover { text-decoration: none; border: 0; } #upload .text, #upload .text1, #upload .text2 { padding: 14px 28px 0 28px; padding: 0.75rem 1.5rem 0 1.5rem; text-align: left; color: #ffffff; } #upload .text1 { padding: 0 28px 14px 28px; padding: 0 1.5rem 0.75rem 1.5rem; } #upload .text2 { padding: 14px 28px; padding: 0.75rem 1.5rem; } #upload h1, #upload h2, #upload h3, #upload .perex { color: #ffffff; } #upload .perex { font-size: 120%; margin: 14px 0; margin: 0.75rem 0; } #upload .text a, #upload .text1 a, #upload .text2 a { font-weight: bold; color: #1ABC9C; border-bottom: 1px dotted #1ABC9C; } #upload .text2 p { padding-bottom: 14px; padding-bottom: 0.75rem; } .w50 { width: 50%; float: left; } .w100 { width: 100%; } .padd1 { padding: 0 !important; margin: 0px 12px 0px 24px !important; margin: 0rem 0.75rem 0rem 1.5rem !important; } #file_list { padding-left: 12px; padding-left: 0.75rem; padding-right: 12px; padding-right: 0.75rem; width: 100%; height: 125px; overflow: hidden; color: #ffffff; } #user_list { padding: 0 !important; margin: 0 !important; width: 100%; height: 120px; overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; } #file_list a, #user_list a, #read_list a { margin-right: 12px; margin-right: 0.75rem; } #read_list a, #read_list span, #read_list b { margin-right: 12px; margin-right: 0.75rem; float: left; color: #ffffff !important; } #read_list a { color: #1ABC9C !important; border-bottom: 1px dotted #1ABC9C !important; } #read_list a:hover { border-bottom: 1px dotted #ffffff !important; } #read_list a.disabled { color: #cccccc !important; cursor: default; border-bottom: 0 !important; } .item { clear: both; } br.clear { border: 0 !important; padding: 0 !important; height: 1px; overflow: hidden; clear: both; } dl { padding: 0 28px; padding: 0 1.5rem; text-align: left; color: #ffffff; } dl:after { content: ''; display: block; clear: both; } dl dt { margin: 0; float: left; width: 23%; } dl dd { margin: 0; float: left; width: 77%; } .error { border: 1px solid #ff0000 !important; } .moxie-shim { z-index: 10000; } .small { color: #ffffff; font-size: 80%; } .small a { color: #1ABC9C; border-bottom: 1px dotted #1ABC9C; } #uploadpanel { display: none; width: 100%; height: 100%; overflow: hidden; position: relative; text-align: center; } #uploadpanel .preloader { display: block; width: 200px; height: 200px; overflow: hidden; position: relative; margin: 0 auto; padding: 0; top: 10%; } #uploadpanel input { border: 0; color: #ffffff; } #uploadpanel h2 { color: #1ABC9C; font-size: 24px; line-height: 24px; font-size: 1.5rem; line-height: 1.5rem; margin-bottom: 40px; } #readform { padding: 14px; padding: 0.75rem; background: none !important; } #the_iframe, .none { display: none; }