UNPKG

chicago

Version:

A front-end JavaScript library for user-interface developers.

2,818 lines (2,808 loc) 81.5 kB
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, html { margin: 0; padding: 0; color: #555; background-color: #fff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } :focus { outline: 0; } a { cursor: pointer; text-decoration: none; color: #07d; background-color: transparent; } a, a button, a input { -webkit-tap-highlight-color: transparent; } a:hover { text-decoration: underline; color: #059; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } :not(pre) > code, :not(pre) > kbd, :not(pre) > samp { padding: 0 4px; white-space: nowrap; color: #d05; border: 1px solid #ddd; background-color: #fff; font-family: Consolas, monospace, serif; font-size: 12px; } em, q { font-style: italic; } ins { text-decoration: none; color: #555; background-color: #ffa; } mark { color: #555; background-color: #ffa; } small { font-size: 80%; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -.5em; } sub { bottom: -.25em; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } svg:not(:root) { overflow: hidden; } address, blockquote, dl, fieldset, figure, ol, p, pre, ul { margin: 0 0 15px; } * + address, * + blockquote, * + dl, * + fieldset, * + figure, * + ol, * + p, * + pre, * + ul { margin-top: 15px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; color: inherit; font-weight: 400; } * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 25px; } .h1, h1 { font-size: 36px; line-height: 1.16666667; } .h2, h2 { font-size: 24px; line-height: 1.25; } .h3, h3 { font-size: 18px; line-height: 1.33333333; } .h4, h4 { font-size: 16px; line-height: 1.375; } .h5, h5 { font-size: 14px; line-height: 1.42857143; } .h6, h6 { font-size: 12px; line-height: 1.5; } ol, ul { padding-left: 30px; } ol > li > ol, ol > li > ul, ul > li > ol, ul > li > ul { margin: 0; } dt { font-weight: 700; } dd { margin-left: 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; margin: 15px 0; border: 0; border-top: 1px solid #ddd; } * + hr { margin-top: 15px; } address { font-style: normal; } blockquote { padding-left: 15px; border-left: 5px solid #ddd; font-size: 16px; font-style: italic; line-height: 1.375; } pre { overflow: auto; padding: 10px; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; color: #444; border: 1px solid #ddd; background-color: #fff; font: 12px/18px Consolas,monospace,serif; } pre > code { margin: -10px; padding: 10px; } ::-moz-selection { color: #fff; background-color: #39f; text-shadow: none; } ::selection { color: #fff; background-color: #39f; text-shadow: none; } article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } progress { vertical-align: baseline; } [hidden], audio:not([controls]), template { display: none; } iframe { border: 0; } @media screen and (max-width:400px) { @-ms-viewport { width: device-width; } } [class*=row] > * { max-width: 100%; } .row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 -20px; padding: 0; list-style: none; } .noflex .row { display: block; } .noflex .row:after, .noflex .row:before { display: block; overflow: hidden; content: ''; } .noflex .row:after { clear: both; } .noflex .row > * { float: left; } .noflex .row > :only-child { float: none; } .row > * { -webkit-flex: none; flex: none; margin: 0; padding-left: 20px; -webkit-box-flex: none; -moz-box-flex: none; } .row > * > :last-child { margin-bottom: 0; } .row + .row, .row > * > .panel+.panel { margin-top: 20px; } @media (min-width:1220px) { .row { margin-left: -30px; } .row > * { padding-left: 30px; } .row + .row, .row > * > .panel+.panel { margin-top: 30px; } } .row-collapse { margin-left: 0; } .row-collapse > * { padding-left: 0; } .row-collapse + .row-collapse, .row-collapse > * > .panel+.panel { margin-top: 0; } .row-small { margin-left: -10px; } .row-small > * { padding-left: 10px; } .row-small + .row-small, .row-small > * > .panel+.panel { margin-top: 10px; } .row-medium { margin-left: -20px; } .row-medium > * { padding-left: 20px; } .row-medium + .row-medium, .row-medium > * > .panel+.panel { margin-top: 20px; } .row-divider:not(:empty) { margin-right: -20px; margin-left: -20px; } .row-divider > * { padding-right: 20px; padding-left: 20px; } .row-divider > [class*=col-8-]:nth-child(n+2), .row-divider > [class*=col-9-]:nth-child(n+2), .row-divider > [class*=col-1-]:not(.col-1-1):nth-child(n+2), .row-divider > [class*=col-2-]:nth-child(n+2), .row-divider > [class*=col-3-]:nth-child(n+2), .row-divider > [class*=col-4-]:nth-child(n+2), .row-divider > [class*=col-5-]:nth-child(n+2), .row-divider > [class*=col-6-]:nth-child(n+2), .row-divider > [class*=col-7-]:nth-child(n+2) { border-left: 1px solid #ddd; } @media (min-width:1220px) { .row-divider:not(:empty) { margin-right: -30px; margin-left: -30px; } .row-divider > * { padding-right: 30px; padding-left: 30px; } .row-divider:empty { margin-top: 30px; margin-bottom: 30px; } } .row-divider:empty { margin-top: 20px; margin-bottom: 20px; border-top: 1px solid #ddd; } .row-match > * { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .row-match > * > * { -webkit-flex: none; flex: none; width: 100%; -webkit-box-flex: none; -moz-box-flex: none; } .row-12-cols > * { width: 8.33333333%; } .row-11-cols > * { width: 9.09090909%; } .row-10-cols > * { width: 10%; } .row-9-cols > * { width: 11.11111111%; } .row-8-cols > * { width: 12.5%; } .row-7-cols > * { width: 14.28571429%; } .row-6-cols > * { width: 16.66666667%; } .row-5-cols > * { width: 20%; } .row-4-cols > * { width: 25%; } .row-3-cols > * { width: 33.33333333%; } .row-2-cols > * { width: 50%; } @media (max-width:480px) { .row-12-cols-xsmall > * { width: 8.33333333%; } .row-11-cols-xsmall > * { width: 9.09090909%; } .row-10-cols-xsmall > * { width: 10%; } .row-9-cols-xsmall > * { width: 11.11111111%; } .row-8-cols-xsmall > * { width: 12.5%; } .row-7-cols-xsmall > * { width: 14.28571429%; } .row-6-cols-xsmall > * { width: 16.66666667%; } .row-5-cols-xsmall > * { width: 20%; } .row-4-cols-xsmall > * { width: 25%; } .row-3-cols-xsmall > * { width: 33.33333333%; } .row-2-cols-xsmall > * { width: 50%; } } @media (min-width:480px) { .row-12-cols-small > * { width: 8.33333333%; } .row-11-cols-small > * { width: 9.09090909%; } .row-10-cols-small > * { width: 10%; } .row-9-cols-small > * { width: 11.11111111%; } .row-8-cols-small > * { width: 12.5%; } .row-7-cols-small > * { width: 14.28571429%; } .row-6-cols-small > * { width: 16.66666667%; } .row-5-cols-small > * { width: 20%; } .row-4-cols-small > * { width: 25%; } .row-3-cols-small > * { width: 33.33333333%; } .row-2-cols-small > * { width: 50%; } } @media (min-width:768px) { .row-divider > [class*=col-medium-]:not(.col-medium-1-1):nth-child(n+2) { border-left: 1px solid #ddd; } .row-12-cols-medium > * { width: 8.33333333%; } .row-11-cols-medium > * { width: 9.09090909%; } .row-10-cols-medium > * { width: 10%; } .row-9-cols-medium > * { width: 11.11111111%; } .row-8-cols-medium > * { width: 12.5%; } .row-7-cols-medium > * { width: 14.28571429%; } .row-6-cols-medium > * { width: 16.66666667%; } .row-5-cols-medium > * { width: 20%; } .row-4-cols-medium > * { width: 25%; } .row-3-cols-medium > * { width: 33.33333333%; } .row-2-cols-medium > * { width: 50%; } } @media (min-width:960px) { .row-divider > [class*=col-large-]:not(.col-large-1-1):nth-child(n+2) { border-left: 1px solid #ddd; } .row-12-cols-large > * { width: 8.33333333%; } .row-11-cols-large > * { width: 9.09090909%; } .row-10-cols-large > * { width: 10%; } .row-9-cols-large > * { width: 11.11111111%; } .row-8-cols-large > * { width: 12.5%; } .row-7-cols-large > * { width: 14.28571429%; } .row-6-cols-large > * { width: 16.66666667%; } .row-5-cols-large > * { width: 20%; } .row-4-cols-large > * { width: 25%; } .row-3-cols-large > * { width: 33.33333333%; } .row-2-cols-large > * { width: 50%; } } @media (min-width:1220px) { .row-12-cols-xlarge > * { width: 8.33333333%; } .row-11-cols-xlarge > * { width: 9.09090909%; } .row-10-cols-xlarge > * { width: 10%; } .row-9-cols-xlarge > * { width: 11.11111111%; } .row-8-cols-xlarge > * { width: 12.5%; } .row-7-cols-xlarge > * { width: 14.28571429%; } .row-6-cols-xlarge > * { width: 16.66666667%; } .row-5-cols-xlarge > * { width: 20%; } .row-4-cols-xlarge > * { width: 25%; } .row-3-cols-xlarge > * { width: 33.33333333%; } .row-2-cols-xlarge > * { width: 50%; } } .col-12-12 { width: 100%; } .col-11-12 { width: 91.66666667%; } .col-10-12 { width: 83.33333333%; } .col-9-12 { width: 75%; } .col-8-12 { width: 66.66666667%; } .col-7-12 { width: 58.33333333%; } .col-6-12 { width: 50%; } .col-5-12 { width: 41.66666667%; } .col-4-12 { width: 33.33333333%; } .col-3-12 { width: 25%; } .col-2-12 { width: 16.66666667%; } .col-1-12 { width: 8.33333333%; } @media (max-width:480px) { .col-12-12-xsmall { width: 100%; } .col-11-12-xsmall { width: 91.66666667%; } .col-10-12-xsmall { width: 83.33333333%; } .col-9-12-xsmall { width: 75%; } .col-8-12-xsmall { width: 66.66666667%; } .col-7-12-xsmall { width: 58.33333333%; } .col-6-12-xsmall { width: 50%; } .col-5-12-xsmall { width: 41.66666667%; } .col-4-12-xsmall { width: 33.33333333%; } .col-3-12-xsmall { width: 25%; } .col-2-12-xsmall { width: 16.66666667%; } .col-1-12-xsmall { width: 8.33333333%; } } @media (min-width:480px) { .col-12-12-small { width: 100%; } .col-11-12-small { width: 91.66666667%; } .col-10-12-small { width: 83.33333333%; } .col-9-12-small { width: 75%; } .col-8-12-small { width: 66.66666667%; } .col-7-12-small { width: 58.33333333%; } .col-6-12-small { width: 50%; } .col-5-12-small { width: 41.66666667%; } .col-4-12-small { width: 33.33333333%; } .col-3-12-small { width: 25%; } .col-2-12-small { width: 16.66666667%; } .col-1-12-small { width: 8.33333333%; } } @media (min-width:768px) { .col-12-12-medium { width: 100%; } .col-11-12-medium { width: 91.66666667%; } .col-10-12-medium { width: 83.33333333%; } .col-9-12-medium { width: 75%; } .col-8-12-medium { width: 66.66666667%; } .col-7-12-medium { width: 58.33333333%; } .col-6-12-medium { width: 50%; } .col-5-12-medium { width: 41.66666667%; } .col-4-12-medium { width: 33.33333333%; } .col-3-12-medium { width: 25%; } .col-2-12-medium { width: 16.66666667%; } .col-1-12-medium { width: 8.33333333%; } } @media (min-width:960px) { .col-12-12-large { width: 100%; } .col-11-12-large { width: 91.66666667%; } .col-10-12-large { width: 83.33333333%; } .col-9-12-large { width: 75%; } .col-8-12-large { width: 66.66666667%; } .col-7-12-large { width: 58.33333333%; } .col-6-12-large { width: 50%; } .col-5-12-large { width: 41.66666667%; } .col-4-12-large { width: 33.33333333%; } .col-3-12-large { width: 25%; } .col-2-12-large { width: 16.66666667%; } .col-1-12-large { width: 8.33333333%; } } @media (min-width:768px) { [class*=push-] { position: relative; } .push-11-12 { left: 91.66666667%; } .push-10-12 { left: 83.33333333%; } .push-9-12 { left: 75%; } .push-8-12 { left: 66.66666667%; } .push-7-12 { left: 58.33333333%; } .push-6-12 { left: 50%; } .push-5-12 { left: 41.66666667%; } .push-4-12 { left: 33.33333333%; } .push-3-12 { left: 25%; } .push-2-12 { left: 16.66666667%; } .push-1-12 { left: 8.33333333%; } } .panel { position: relative; display: block; } .panel, .panel:hover { text-decoration: none; } .panel > :last-child:not(.panel-title) { margin-bottom: 0; } .panel-title { margin-top: 0; margin-bottom: 15px; color: #555; font-size: 18px; line-height: 1.33333333; } .panel-badge { position: absolute; z-index: 1; top: 0; right: 0; } .panel-teaser { margin-bottom: 15px; } .panel-box { padding: 15px; color: #555; border: 1px solid #ddd; background-color: #f5f5f5; } .panel-box .panel-badge { top: 10px; right: 10px; } .panel-box .panel-teaser { overflow: hidden; margin-top: -16px; margin-right: -16px; margin-left: -16px; -webkit-transform: translateZ(0); transform: translateZ(0); } .panel-box > .nav-side { margin: 0 -15px; } .panel-box-hover:hover { color: #555; } .panel-box-primary { color: #2d7091; border-color: rgba(45,112,145,.3); background-color: #ebf7fd; } .panel-box-primary .panel-title, .panel-box-primary-hover:hover { color: #2d7091; } .panel-box-secondary { color: #555; background-color: #fff; } .panel-box-secondary-hover:hover { color: #555; } .panel-hover { padding: 15px; color: #555; border: 1px solid transparent; } .panel-hover:hover { color: #555; border-color: #ddd; background-color: #f5f5f5; } .panel-hover .panel-badge { top: 10px; right: 10px; } .panel-hover .panel-teaser { margin-top: -15px; margin-right: -15px; margin-left: -15px; } .panel-header .panel-title { padding-bottom: 3px; color: #555; border-bottom: 1px solid #ddd; } .panel + .panel-divider { margin-top: 50px!important; } .panel + .panel-divider:before { position: absolute; top: -25px; right: 0; left: 0; display: block; content: ''; border-top: 1px solid #ddd; } @media (min-width:1220px) { .panel + .panel-divider { margin-top: 70px!important; } .panel + .panel-divider:before { top: -35px; } } .article:after, .article:before { display: table; content: ''; } .article:after { clear: both; } .article > :last-child { margin-bottom: 0; } .article + .article { margin-top: 25px; padding-top: 25px; border-top: 1px solid #ddd; } .article-title { font-size: 36px; font-weight: 200; line-height: 1.16666667; } .article-title a { text-decoration: none; color: inherit; } .article-meta { line-height: 1.28571429; } .article-lead { font-size: 22px; font-weight: 200; line-height: 1.36363636; } .comment-header { margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; background-color: #fafafa; } .comment-header:after, .comment-header:before { display: table; content: ''; } .comment-header:after { clear: both; } .comment-avatar { float: left; height: 50px; margin-right: 15px; } .comment-title { margin: 5px 0 0; font-size: 16px; line-height: 1.375; } .comment-meta { margin: 2px 0 0; color: #999; font-size: 11px; line-height: 1.45454545; } .comment-body { padding-right: 10px; padding-left: 10px; } .comment-body > :last-child { margin-bottom: 0; } .comment-list { padding: 0; list-style: none; } .comment-list .comment + ul { margin: 15px 0 0; list-style: none; } @media (min-width:768px) { .comment-list .comment + ul { padding-left: 100px; } } .comment-list .comment + ul > li:nth-child(n+2), .comment-list > li:nth-child(n+2) { margin-top: 15px; } .comment-primary .comment-header { color: #2d7091; border-color: rgba(45,112,145,.3); background-color: #ebf7fd; } .cover { overflow: hidden; } .cover-background { background-repeat: no-repeat; background-position: center; background-size: cover; } .cover-object { position: relative; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } [data-cover] { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .nav, .nav ul { margin: 0; padding: 0; list-style: none; } .nav a { display: block; padding: 5px 15px; text-decoration: none; color: inherit; } .nav li > a > div { font-size: 12px; line-height: 1.5; } .nav-header { padding: 5px 15px; text-transform: uppercase; font-size: 12px; font-weight: 700; } .nav-header:not(:first-child) { margin-top: 15px; } .nav-divider { margin: 9px 15px; } .nav-sub ul { padding-left: 15px; } .nav-sub a { padding-left: 30px; } .nav-parent-icon > .parent > a { position: relative; } .nav-parent-icon > .parent > a:after { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; content: '\e601'; -webkit-transition: 400ms ease-in-out -webkit-transform; -moz-transition: 400ms ease-in-out -moz-transform; transition: 400ms ease-in-out -webkit-transform,400ms ease-in-out -moz-transform,400ms ease-in-out -o-transform,400ms ease-in-out transform; -webkit-transform: translate(0,-50%)rotate(0); transform: translate(0,-50%)rotate(0); font-family: icomoon; text-align: center; } .nav-parent-icon > .parent.open > a:after { -webkit-transform: translate(0,-50%)rotate(-90deg); transform: translate(0,-50%)rotate(-90deg); } .nav-side > li > a:hover { color: #555; background-color: rgba(0,0,0,.05); } .nav-side > li.active > a { color: #fff; background-color: #00a8e6; } .nav-side .nav-divider { border-top: 1px solid #ddd; } .nav-side ul a { color: #07d; } .nav-side ul a:hover { color: #059; } .nav-dropdown > li > a:hover { color: #fff; outline: 0; background-color: #00a8e6; } .nav-dropdown .nav-divider { border-top: 1px solid #ddd; } .nav-dropdown ul a { color: #07d; } .nav-dropdown ul a:hover { color: #059; } .nav-navbar > li > a { color: #555; } .nav-navbar > li > a:hover { color: #fff; outline: 0; background-color: #00a8e6; } .nav-navbar .nav-divider { border-top: 1px solid #ddd; } .nav-navbar ul a { color: #07d; } .nav-navbar ul a:hover { color: #059; } .nav-offcanvas { border-bottom: 1px solid rgba(0,0,0,.3); } .nav-offcanvas a, .nav-offcanvas ul a { color: #ccc; } .nav-offcanvas ul a:hover { color: #fff; } .nav-offcanvas > li > a { padding: 10px 15px; border-top: 1px solid rgba(0,0,0,.3); } .nav-offcanvas > li > a:hover { color: #fff; outline: 0; background-color: #00a8e6; } .nav-offcanvas > .active > a { color: #fff; background-color: #00a8e6; } .nav-offcanvas .nav-header { margin-top: 0; color: #777; border-top: 1px solid rgba(0,0,0,.3); background-color: #404040; } .nav-offcanvas .nav-divider { height: 2px; margin: 0; border-top: 1px solid #1a1a1a; background-color: rgba(0,0,0,.2); } .nav-offcanvas .nav-sub { border-top: 1px solid rgba(0,0,0,.3); } .navbar { border: 1px solid rgba(17,17,17,.1); background-color: #eee; } .navbar:after, .navbar:before { display: table; content: ''; } .navbar:after { clear: both; } .navbar a:hover { text-decoration: none; } .navbar-nav { float: left; margin: 0; padding: 0; list-style: none; } .navbar-nav > li { position: relative; float: left; } .navbar-nav > li > a { display: block; height: 40px; margin-top: -1px; margin-left: -1px; padding: 0 15px; color: inherit; border: 1px solid transparent; border-bottom-width: 0; line-height: 2.85714286; } .navbar-nav > .active > a, .navbar-nav > .open > a, .navbar-nav > li > a:active, .navbar-nav > li > a:focus, .navbar-nav > li > a:hover { position: relative; z-index: 1; border-top-color: rgba(0,0,0,.1); border-right-color: rgba(0,0,0,.1); border-left-color: rgba(0,0,0,.1); background-color: #f5f5f5; } .navbar-nav .navbar-nav-subtitle { line-height: 2; } .navbar-nav .navbar-nav-subtitle > div { margin-top: -6px; font-size: 10px; line-height: 1.2; } .navbar-brand, .navbar-content, .navbar-toggle { display: block; float: left; height: 40px; margin-top: -1px; padding: 1px 15px; } .container > .navbar-brand, .container > .navbar-content, .container > .navbar-toggle { padding-right: 0; padding-left: 0; } .navbar-content { line-height: 40px; } .navbar-content + .navbar-content:not(.navbar-center) { padding-left: 0; } .navbar-content > a:not([class]) { color: #07d; } .navbar-content > a:not([class]):hover { text-decoration: underline; color: #059; } .navbar-brand { color: inherit; font-size: 18px; line-height: 2.22222222; } .navbar-toggle { font-size: 18px; line-height: 2.11111111; } .navbar-toggle:after { content: '\e9bd'; font-family: icomoon; } .navbar-center { float: none; max-width: 50%; margin-right: auto; margin-left: auto; text-align: center; } .navbar-flip { float: right; margin-right: -1px; } .navbar-flip .navbar-nav > li > a { margin-right: -1px; margin-left: 0; } .subnav { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; list-style: none; } .subnav > * > * { display: inline-block; color: #555; } .subnav > * > :focus, .subnav > * > :hover { text-decoration: none; color: #07d; } .subnav > :nth-child(n+2) { padding-left: 10px; } .subnav > .active > * { color: #07d; } .subnav > .disabled > * { cursor: default; text-decoration: none; color: #999; background-color: transparent; } .subnav-line > li + li:before { margin-right: 10px; content: ''; border-left: 1px solid #ddd; } .subnav-pill > * > * { padding: 3px 9px; } .subnav-pill > * > :focus, .subnav-pill > * > :hover { text-decoration: none; color: #555; background-color: #eee; } .subnav-pill > .active > * { color: #fff; background-color: #00a8e6; } .breadcrumb { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; list-style: none; } .breadcrumb > li + li:before { display: inline-block; margin: 0 8px; content: '/'; color: #999; } .breadcrumb > .active > * { color: #555; } .pagination { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; list-style: none; line-height: 1.57142857; text-align: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .pagination > li { font-size: 14px; } .pagination > li + li { margin-left: 5px; } .pagination > li > * { position: relative; display: block; min-width: 28px; height: 28px; padding: 3px 5px; text-decoration: none; border: 1px solid rgba(0,0,0,.06); text-align: center; } .pagination > li > a { color: #555; background-color: #eee; } .pagination > li > a:focus, .pagination > li > a:hover { border-color: rgba(0,0,0,.16); background-color: #f5f5f5; } .pagination > li > a:active { background-color: #ddd; } .pagination > li [class*=icon-] { display: inline-block; font-size: 12px; } .pagination > .active > *, .pagination > .active > :focus, .pagination > .active > :hover { color: #fff; border-color: transparent; background-color: #00a8e6; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.05); box-shadow: inset 0 0 5px rgba(0,0,0,.05); } .pagination > .disabled > * { color: #999; border: 1px solid rgba(0,0,0,.06); background-color: #f5f5f5; } .pagination-previous > a [class*=icon-], .pagination-previous > span [class*=icon-] { padding-right: 5px; } .pagination-next > a [class*=icon-], .pagination-next > span [class*=icon-] { padding-left: 5px; } .pagination-left { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .pagination-right { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .tab { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ddd; } .tab > li { position: relative; margin-bottom: -1px; padding-left: 5px; } .tab > li > a { display: block; padding: 8px 12px; text-decoration: none; color: #07d; border: 1px solid transparent; border-bottom-width: 0; text-align: center; } .tab > li > a:hover { color: #059; border-top-color: #ddd; border-right-color: #ddd; border-left-color: #ddd; } .tab > li:not(.active) > a:focus, .tab > li:not(.active) > a:hover { margin-bottom: 1px; padding-bottom: 7px; } .tab > .open > a { color: #059; border-color: #f5f5f5; background-color: #f5f5f5; } .tab > .open:not(.active) > a { margin-bottom: 1px; padding-bottom: 7px; } .tab > .active > a { border-top-color: #ddd; border-right-color: #ddd; border-left-color: #ddd; background-color: #fff; } .tab > .active > a, .tab > .active > a:hover { color: #555; } .tab > .disabled > a { cursor: text; } .tab > .disabled > a, .tab > .disabled > a:focus, .tab > .disabled > a:hover { color: #999; border-color: transparent; background-color: transparent; } .tab > .disabled > a:focus, .tab > .disabled > a:hover { margin-bottom: 1px; padding-bottom: 7px; } .tab > .disabled.active > a { border-color: transparent; background-color: transparent; } .tab-flip { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; } .tab-flip > li:nth-child(n+2) > a { margin-right: 5px; margin-left: 0; } .tab-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .tab-bottom { border-top: 1px solid #ddd; border-bottom: none; } .tab-bottom > li { margin-top: -1px; margin-bottom: 0; } .tab-bottom > li > a { padding-top: 8px; padding-bottom: 8px; border-top-width: 0; border-bottom-width: 1px; } .tab-bottom > li > a:focus, .tab-bottom > li > a:hover { border-top-color: transparent; border-bottom-color: #ddd; } .tab-bottom > .open:not(.active) > a, .tab-bottom > li:not(.active):not(.disabled) > a:focus, .tab-bottom > li:not(.active):not(.disabled) > a:hover { margin-top: 1px; margin-bottom: 0; padding-top: 7px; padding-bottom: 8px; } .tab-bottom > .active > a { border-top-color: transparent; border-bottom-color: #ddd; } @media (min-width:768px) { .tab-left, .tab-right { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-bottom: none; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; } .tab-left > li, .tab-right > li { margin-bottom: 0; } .tab-left > li > a, .tab-right > li > a { padding-top: 8px; padding-bottom: 8px; } .tab-left > li > a:focus, .tab-left > li > a:hover, .tab-right > li > a:focus, .tab-right > li > a:hover { border-top-color: #ddd; border-bottom-color: #ddd; } .tab-left > li:not(.active):not(.disabled) > a:focus, .tab-left > li:not(.active):not(.disabled) > a:hover, .tab-right > li:not(.active):not(.disabled) > a:focus, .tab-right > li:not(.active):not(.disabled) > a:hover { margin-bottom: 0; padding-bottom: 8px; } .tab-left > li:nth-child(n+2) > a, .tab-right > li:nth-child(n+2) > a { margin-top: 5px; margin-left: 0; } .tab-left > .active > a, .tab-right > .active > a { border-top-color: #ddd; border-bottom-color: #ddd; } .tab-left { border-right: 1px solid #ddd; } .tab-left > li { margin-right: -1px; } .tab-left > li > a { border-right-width: 0; border-bottom-width: 1px; } .tab-left > li > a:focus, .tab-left > li > a:hover { border-right-color: transparent; border-left-color: #ddd; } .tab-left > li:not(.active):not(.disabled) > a:focus, .tab-left > li:not(.active):not(.disabled) > a:hover { margin-right: 1px; padding-right: 11px; } .tab-left > .active > a { border-right-color: transparent; border-left-color: #ddd; } .tab-right { border-left: 1px solid #ddd; } .tab-right > li { margin-left: -1px; } .tab-right > li > a { border-bottom-width: 1px; border-left-width: 0; } .tab-right > li > a:focus, .tab-right > li > a:hover { border-right-color: #ddd; border-left-color: transparent; } .tab-right > li:not(.active):not(.disabled) > a:focus, .tab-right > li:not(.active):not(.disabled) > a:hover { margin-left: 1px; padding-left: 11px; } .tab-right > .active > a { border-right-color: #ddd; border-left-color: transparent; } } .list { padding: 0; list-style: none; } .list > li:after, .list > li:before { display: table; content: ''; } .list > li:after { clear: both; } .list > li > :last-child { margin-bottom: 0; } .list ul { margin: 0; padding-left: 20px; list-style: none; } .list-inline { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 0; } .list-inline > li { -webkit-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-flex: 0; -moz-box-flex: 0; } .list-inline > li:nth-child(n+2) { margin-left: 5px; padding-left: 5px; } .list-line > li + li { margin-top: 5px; padding-top: 5px; border-top: 1px solid #ddd; } .list-striped > li { padding: 5px; border-bottom: 1px solid #ddd; } .list-striped > li:first-child { border-top: 1px solid #ddd; } .list-striped > li:nth-of-type(odd) { background-color: #f5f5f5; } .list-space > li:nth-child(n+2) { margin-top: 10px; } @media (min-width:768px) { .dl-horizontal { overflow: hidden; } .dl-horizontal > dt { float: left; clear: both; overflow: hidden; width: 160px; white-space: nowrap; text-overflow: ellipsis; } .dl-horizontal > dd { margin-left: 180px; } } .dl-line > dt:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid #ddd; } table { width: 100%; margin-bottom: 15px; border-spacing: 0; border-collapse: collapse; border-bottom: 1px solid #ddd; } table:last-child { margin-bottom: 0; } table .sep td { border-top: 1px solid #e5e5e5; } table td, table th { padding: 8px; border-bottom: 1px solid #e5e5e5; } table th { text-align: left; } table td { vertical-align: top; } table thead th { vertical-align: bottom; } table caption, table footer { font-size: 12px; font-style: italic; } table caption { color: #999; text-align: left; } table table { border-bottom: 0; } table table td { padding: 4px; border-bottom: 0; } table table td:first-child { padding-left: 0; } table table td:last-child { padding-right: 0; } * + table { margin-top: 15px; } .table-middle, .table-middle td { vertical-align: middle!important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fcfcfc; } .table-striped > tbody > tr:only-child { background-color: transparent; } .table-condensed td { padding: 4px 8px; } .table-hover > tbody > tr:hover { background-color: #fcfcfc; } input, select, textarea { margin: 0; -webkit-appearance: none; appearance: none; border: 1px solid #ddd; -webkit-border-radius: 0; border-radius: 0; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; font: inherit; } input, select { vertical-align: middle; } select { text-transform: none; } optgroup { font: inherit; font-weight: 700; } input::-moz-focus-inner { padding: 0; border: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; -moz-appearance: textfield; } fieldset { margin: 0; padding: 0; border: 0; } textarea { overflow: auto; min-height: 150px; vertical-align: top; } ::-moz-placeholder { opacity: 1; color: #999; } :invalid { -webkit-box-shadow: none; box-shadow: none; } ::-ms-clear { display: none; } form :last-child { margin-bottom: 0; } :-ms-input-placeholder { color: #999!important; } ::-webkit-input-placeholder { color: #999; } :disabled:-ms-input-placeholder { color: #dbdbdb!important; } :disabled::-moz-placeholder { color: #dbdbdb; } :disabled::-webkit-input-placeholder { color: #dbdbdb; } [class*=col-] > input:not([type]), [class*=col-] > input[type=number], [class*=col-] > input[type=text], [class*=col-] > input[type=password], [class*=col-] > input[type=datetime], [class*=col-] > input[type=datetime-local], [class*=col-] > input[type=date], [class*=col-] > input[type=month], [class*=col-] > input[type=time], [class*=col-] > input[type=week], [class*=col-] > input[type=email], [class*=col-] > input[type=url], [class*=col-] > input[type=search], [class*=col-] > input[type=tel], [class*=col-] > input[type=color], [class*=col-] > select, [class*=col-] > textarea { display: block; width: 100%; } input, select, textarea { display: inline-block; max-width: 100%; height: 30px; padding: 4px 6px; -webkit-transition: all linear 200ms; -moz-transition: all linear 200ms; transition: all linear 200ms; color: #555; font-size: 14px; line-height: 2; } input:focus, select:focus, textarea:focus { color: #555; border-color: #99baca; background-color: #f5fbfe; } input:disabled, select:disabled, textarea:disabled { color: #dbdbdb; border-color: #dbdbdb; background-color: #fcfcfc; } legend { width: 100%; padding: 0 0 15px; border: 0; font-size: 18px; line-height: 1.33333333; } legend:after { display: block; width: 100%; content: ''; border-bottom: 1px solid #ddd; } input.form-small, select.form-small, textarea.form-small { height: 24px; padding: 3px; font-size: 12px; line-height: 1.83333333; } input.form-large, select.form-large, textarea.form-large { height: 40px; padding: 8px 6px; font-size: 16px; line-height: 2.375; } .form-checkbox, .form-radio { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 2px; vertical-align: middle; } label > .form-checkbox, label > .form-radio { top: -2px; } .form-checkbox input, .form-radio input { position: relative; z-index: 2; display: inline-block; width: 18px; height: 18px; opacity: 0; } .form-checkbox input:focus + span, .form-radio input:focus + span { border-color: #99baca; background-color: #f5fbfe; } .form-checkbox input:not(:disabled), .form-radio input:not(:disabled) { cursor: pointer; } .form-checkbox input[disabled] + span, .form-radio input[disabled] + span { opacity: .5; background-color: #f5f5f5; } .form-checkbox input + span, .form-radio input + span { position: absolute; z-index: 1; top: 50%; left: 0; display: inline-block; width: 18px; height: 18px; -webkit-transition: 300ms cubic-bezier(.68,-.55,.265,1.55); -moz-transition: 300ms cubic-bezier(.68,-.55,.265,1.55); transition: 300ms cubic-bezier(.68,-.55,.265,1.55); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); border: 1px solid #ddd; background-color: #fff; } .form-checkbox input + span:after, .form-radio input + span:after { position: absolute; content: ''; -webkit-transition: 300ms cubic-bezier(.68,-.55,.265,1.55); -moz-transition: 300ms cubic-bezier(.68,-.55,.265,1.55); transition: 300ms cubic-bezier(.68,-.55,.265,1.55); } .form-checkbox input + span { -webkit-border-radius: 3px; border-radius: 3px; -webkit-background-clip: padding-box; background-clip: padding-box; } .form-checkbox input + span:after { bottom: 2px; left: 5px; width: 7px; height: 13px; -webkit-transform: rotate(45deg)scale(0); transform: rotate(45deg)scale(0); border-right: 3px solid #1fa5db; border-bottom: 3px solid #1fa5db; -webkit-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; } .form-checkbox input:checked + span:after { -webkit-transform: rotate(45deg)scale(1); transform: rotate(45deg)scale(1); } .form-checkbox input[disabled] + span:after { border-color: #dbdbdb; } .form-checkbox .form-danger + span { border-color: #dc8d99!important; background-color: #fff7f8!important; } .form-checkbox .form-success + span { border-color: #8ec73b!important; background-color: #fafff2!important; } .form-radio input + span { -webkit-border-radius: 50%; border-radius: 50%; -webkit-background-clip: padding-box; background-clip: padding-box; } .form-radio input + span:after { top: 4px; right: 4px; bottom: 4px; left: 4px; -webkit-transform: scale(0); transform: scale(0); -webkit-border-radius: 100%; border-radius: 100%; background-color: #1fa5db; -webkit-background-clip: padding-box; background-clip: padding-box; } .form-radio input:checked + span:after { -webkit-transform: scale(1); transform: scale(1); } .form-radio input[disabled] + span:after { background-color: #dbdbdb; } .form-radio .form-danger + span { border-color: #dc8d99!important; background-color: #fff7f8!important; } .form-radio .form-success + span { border-color: #8ec73b!important; background-color: #fafff2!important; } .form-danger { color: #d85030!important; border-color: #dc8d99!important; background-color: #fff7f8!important; } .form-success { color: #659f13!important; border-color: #8ec73b!important; background-color: #fafff2!important; } .form-row:after, .form-row:before { display: table; content: ''; } .form-row:after { clear: both; } .form-row + .form-row { margin-top: 15px; } .form-row label + label { margin-left: 15px; } .form-help-inline { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; } .form-help-block { margin: 5px 0 0; } .form-controls > :first-child { margin-top: 0; } .form-controls > :last-child { margin-bottom: 0; } .form-controls-condensed { margin: 5px 0; } .form-stacked .form-label { display: block; margin-bottom: 5px; } @media (max-width:959px) { .form-horizontal .form-label { display: block; margin-bottom: 5px; font-weight: 700; } } @media (min-width:960px) { .form-horizontal .form-label { float: left; width: 200px; margin-top: 5px; } .form-horizontal .form-controls { margin-left: 215px; } } .form-icon { position: relative; display: inline-block; max-width: 100%; } .form-icon > [class*=icon-] { position: absolute; top: 50%; width: 30px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); pointer-events: none; text-align: center; } .form-icon:not(.form-icon-flip) > input { padding-left: 30px!important; } .form-icon-flip > [class*=icon-] { right: 0; } .form-icon-flip > input { padding-right: 30px!important; } .form-select { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; -webkit-border-radius: 3px; border-radius: 3px; -webkit-background-clip: padding-box; background-clip: padding-box; } .form-select select { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .form-file { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; } .form-file input[type=file] { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; cursor: pointer; opacity: 0; font-size: 500px; } select[multiple], select[size], textarea { height: auto; } label { position: relative; display: inline-block; cursor: pointer; vertical-align: middle; } .select { position: relative; display: inline-block; } .select > .dropdown { width: 100%; } .select-link { position: relative; display: block; width: 100%; max-width: 100%; height: 30px; padding: 4px 30px 4px 6px; -webkit-transition: 200ms linear; -moz-transition: 200ms linear; transition: 200ms linear; border: 1px solid #ddd; line-height: 1.42857143; } .select-link:after { position: absolute; top: 50%; right: 10px; content: '\e600'; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); font-family: icomoon; line-height: .85714286; } .open .select-link:after { content: '\e603'; } .select-link, .select-link:focus, .select-link:hover { text-decoration: none; color: #555; } .open .select-link { border-color: #99baca; background-color: #f5fbfe; } .button { display: inline-block; overflow: visible; height: 30px; margin: 0; padding: 0 12px; cursor: pointer; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-property: background-color,border-color,color; transition-property: background-color,border-color,color; vertical-align: middle; text-decoration: none; color: #555; border: 0; border: 1px solid rgba(0,0,0,.06); background-color: #eee; font-family: inherit; font-size: 14px; line-height: 2.14285714; text-align: center; } .button:focus, .button:hover { text-decoration: none; color: #4b4b4b; border-color: rgba(0,0,0,.16); background-color: #e4e4e4; } .button.active, .button:active { -webkit-transition-duration: 0; transition-duration: 0; color: #4b4b4b; border-color: rgba(0,0,0,.3)rgba(0,0,0,.2)rgba(0,0,0,.2); background-color: #e4e4e4; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); box-shadow: inset 0 2px 4px rgba(0,0,0,.1); } .button::-moz-focus-inner { padding: 0; border: 0; } .button.disabled, .button:disabled { cursor: default; color: #999!important; border-color: rgba(0,0,0,.06); background-color: #f5f5f5!important; } .button.disabled.active, .button.disabled:active, .button:disabled.active, .button:disabled:active { -webkit-box-shadow: none; box-shadow: none; } .button-block { display: block; width: 100%; } .button-danger.active, .button-danger:active, .button-primary.active, .button-primary:active, .button-success.active, .button-success:active { border-color: rgba(0,0,0,.4)rgba(0,0,0,.2)rgba(0,0,0,.2); -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.2); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); } .button-primary { color: #fff; background-color: #00a8e6; } .button-primary.active, .button-primary:active, .button-primary:focus, .button-primary:hover { color: #fff; background-color: #0099d2; } .button-primary.disabled, .button-primary.disabled.active, .button-primary.disabled:active, .button-primary.disabled:focus, .button-primary.disabled:hover { color: #fff !important; background-color: rgba(0, 153, 210, 0.5) !important; } .button-success { color: #fff; background-color: #8cc14c; } .button-success.active, .button-success:active, .button-success:focus, .button-success:hover { color: #fff; background-color: #82b940; } .button-danger { color: #fff; background-color: #da314b; } .button-danger.active, .button-danger:active, .button-danger:focus, .button-danger:hover { color: #fff; background-color: #d12640; } .button-link { color: #07d; -webkit-box-shadow: none; box-shadow: none; } .button-link, .button-link.active, .button-link:active, .button-link:disabled, .button-link:focus, .button-link:hover { border-color: transparent; background-color: transparent; } .button-link.active, .button-link:active, .button-link:focus, .button-link:hover { text-decoration: underline; color: #059; } .button-link:disabled { color: #999; } .button-mini { height: 20px; padding: 0 6px; font-size: 11px; line-height: 1.81818182; } .button-small { height: 26px; padding: 0 10px; font-size: 12px; line-height: 2.16666667; } .button-large { height: 40px; padding: 0 15px; font-size: 16px; line-height: 2.5; } .button-group { position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; font-size: 0; } .button-group > * { display: inline-block; } .button-group > :nth-child(n+2) { margin-left: -1px; } .button-group .button { position: relative; z-index: 1; vertical-align: top; } .button-group .button:active, .button-group .button:focus, .button-group .button:hover { z-index: 2; } .button-group .button.active { z-index: 3; } .badge { display: inline-block; margin-top: -2px; padding: 2px 5px; vertical-align: middle; color: #fff; border: 1px solid rgba(0,0,0,.1); background-color: #00a8e6; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; } a.badge:hover { color: #fff; } .badge-notification { min-width: 22px; -webkit-border-radius: 12px; border-radius: 12px; -webkit-background-clip: padding-box; background-clip: padding-box; } .badge-success { background-color: #8cc14c; } .badge-warning { background-color: #faa732; } .badge-danger { background-color: #da314b; } .alert { padding: 15px; color: #2d7091; border: 1px solid rgba(45,112,145,.3); background-color: #ebf7fd; } * + .alert { margin-top: 15px; } .alert > :last-child { margin-bottom: 0; } .alert > .close:first-child { float: right; } .alert > .close:first-child + * { margin-top: 0; } .alert-success { color: #659f13; border-color: rgba(101,159,19,.3); background-color: #f2fae3; } .alert-warning { color: #e28327; border-color: rgba(226,131,39,.3); background-color: #fffceb; } .alert-danger { color: #d85030; border-color: rgba(216,80,48,.3); background-color: #fff1f0; } .alert-large { padding: 30px; } .alert-large > .close:first-child { margin: -15px -15px 0 0; } .thumbnail { display: inline-block; max-width: 100%; margin: 0; padding: 4px; border: 1px solid #ddd; background-color: #fff; } a.thumbnail:focus, a.thumbnail:hover { text-decoration: none; border-color: #aaa; outline: 0; background-color: #fff; } .thumbnail-caption { padding-top: 4px; color: #555; text-align: center; } .thumbnail-large > img, .thumbnail-medium > img, .thumbnail-mini > img, .thumbnail-small > img { width: 100%; } .thumbnail-mini { width: 150px; } .thumbnail-small { width: 200px; } .thumbnail-medium { width: 300px; } .thumbnail-large { width: 400px; } .thumbnail-expand, .thumbnail-expand > img { width: 100%; } .overlay { position: relative; display: inline-block; overflow: hidden; max-width: 100%; margin: 0; -webkit-transform: translateZ(0); transform: translateZ(0); vertical-align: middle; } .overlay.border-circle { -webkit-mask-image: -webkit-radial-gradient(circle,#fff 100%,#000 100%); } .overlay > :first-child { margin-bottom: 0; } .overlay-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; color: #fff; } .overlay-panel.flex > * > :last-child, .overlay-panel > :last-child { margin-bottom: 0; } .overlay-panel a:not([class]) { text-decoration: underline; color: inherit; } .overlay-panel a[class*=icon-]:not(.icon-button) { color: inherit; } .overlay-active:not(.active) > .overlay-panel:not(.ignore), .overlay-hover:not(:hover):not(.hover) .overlay-panel:not(.ignore) { opacity: 0; } .overlay-background { background-color: rgba(0,0,0,.5); } .overlay-top { bottom: auto; } .overlay-bottom { top: auto; } .overlay-left { right: auto; } .overlay-right { left: auto; } .overlay-icon:before { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; content: '\e9be'; color: #fff; font-family: icomoon; font-size: 50px; line-height: 1; text-align: center; } .overlay [class*=overlay-slide], .overlay-blur, .overlay-fade, .overlay-grayscale, .overlay-scale, .overlay-spin { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: opacity,-webkit-transform,-webkit-filter; transition-property: opacity,-webkit-transform,-moz-transform,-o-transform,transform,-webkit-filter,-moz-filter,-o-filter,filter; } .overlay-active .overlay-blur, .overlay-active .overlay-fade, .overlay-active .overlay-grayscale, .overlay-active .overlay-scale, .overlay-active .overlay-spin, .overlay-active [class*=overlay-slide] { -webkit-transition-duration: 800ms; transition-duration: 800ms; } .overlay-fade { opacity: .7; } .overlay-hover:hover .overlay-fade { opacity: 1; } .overlay-hover:hover .overlay-scale { -webkit-transform: scale(1.1); transform: scale(1.1); } .overlay-hover:hover .overlay-spin { -webkit-transform: scale(1.1)rotate(3deg); transform: scale(1.1)rotate(3deg); } .overlay-hover:hover .overlay-grayscale { -webkit-filter: grayscale(0); filter: grayscale(0); -moz-filter: grayscale(0); } .overlay-hover:hover [class*=overlay-slide] { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; } .overlay-active .active > .overlay-fade { opacity: 1; } .overlay-active .active > .overlay-scale { -webkit-transform: scale(1.1); transform: scale(1.1); } .overlay-active .active > .overlay-spin { -webkit-transform: scale(1.1)rotate(3deg); transform: scale(1.1)rotate(3deg); } .overlay-active .active > .overlay-grayscale { -webkit-filter: grayscale(0); filter: grayscale(0); -moz-filter: grayscale(0); } .overlay-active .active > [class*=overlay-slide-] { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; } .overlay-scale { -webkit-transform: scale(1); transform: scale(1); } .overlay-spin { -webkit-transform: scale(1)rotate(0); transform: scale(1)rotate(0); } .overlay-grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); } .overlay-slide-top { -webkit-transform: translate(0,-100%); transform: translate(0,-100%); } .overlay-slide-bottom { -webkit-transform: translate(0,100%); transform: translate(0,100%); } .overlay-slide-left { -webkit-transform: translate(-100%,0); transform: translate(-100%,0); } .overlay-slide-right { -webkit-transform: translate(100%,0); transform: translate(100%,0); } [class*=overlay-slide-] { opacity: 0; } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-top { 0% { -webkit-transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes fade-top { 0% { -moz-transform: translateY(-100%); opacity: 0; } 100% { -moz-transform: translateY(0);