/* -----------H-ui前端框架------------- * H-ui.css v3.1.4 * http://www.h-ui.net/ * Created & Modified by guojunhui * Date modified 2017.07.19 * * Copyright 2013-2017 北京颖杰联创科技有限公司 All rights reserved. * Licensed under MIT license. * http://opensource.org/licenses/MIT * */ @charset "utf-8"; * { word-wrap: break-word } html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset { margin: 0; padding: 0 } ul, ol, dl { list-style-type: none } html, body { *position: static } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400 } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit } input, button { overflow: visible; vertical-align: middle; outline: 0 } input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"] { -webkit-appearance: none; outline: 0 } body, th, td, button, input, select, textarea { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "\5B8B\4F53"; font-size: 12px; color: #333; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } @media (max-width: 767px) { html { overflow-y: auto } body, th, td, button, input, select, textarea { font-size: 14px } } body { line-height: 1.6; position: relative } h1, h2, h3, h4, h5, h6 { font-size: 100% } a, area { outline: 0; blr: expression(this.onFocus=this.blur()) } a { text-decoration: none; cursor: pointer } a:hover { text-decoration: underline; outline: 0 } a.ie6:hover { zoom: 1 } a:focus { outline: 0 } a:hover, a:active { outline: 0 } :focus { outline: 0 } sub, sup { vertical-align: baseline } button, input[type="button"], input[type="submit"] { line-height: normal !important } img { border: 0; vertical-align: middle } a img, img { -ms-interpolation-mode: bicubic } * html { overflow: -moz-scrollbars-vertical; zoom: expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this)) } header, footer, section, aside, details, menu, article, section, nav, address, hgroup, figure, figcaption, legend { display: block; margin: 0; padding: 0 } time { display: inline } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 } audio:not([controls]) { display: none } legend { width: 100%; margin-bottom: 20px; font-size: 21px; line-height: 40px; border: 0; border-bottom: 1px solid #e5e5e5 } legend small { font-size: 15px; color: #999 } svg:not(:root) { overflow: hidden } fieldset { border-width: 0; padding: .35em .625em .75em; margin: 0 2px; border: 1px solid #c0c0c0 } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto } input[type="search"] { -webkit-appearance: textfield } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } .cl:after, .clearfix:after { content: "\20"; display: block; height: 0; clear: both; visibility: hidden } .cl, .clearfix { zoom: 1 } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } @media (min-width: 992px) { .container { width: 960px } } @media (min-width: 1200px) { .container { width: 1170px } } @media (min-width: 1300px) { .container { width: 1270px } } @media print { .container { width: auto } } .row { box-sizing: border-box; margin-left: -15px; margin-right: -15px } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; position: relative; padding-left: 15px; padding-right: 15px; box-sizing: border-box; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in } .col-1 { width: 8.33333% } .col-2 { width: 16.66667% } .col-3 { width: 25% } .col-4 { width: 33.33333% } .col-5 { width: 41.66667% } .col-6 { width: 50% } .col-7 { width: 58.33333% } .col-8 { width: 66.66667% } .col-9 { width: 75% } .col-10 { width: 83.33333% } .col-11 { width: 91.66667% } .col-12 { width: 100% } .col-offset-0 { margin-left: 0 } .col-offset-1 { margin-left: 8.33333% } .col-offset-2 { margin-left: 16.66667% } .col-offset-3 { margin-left: 25% } .col-offset-4 { margin-left: 33.33333% } .col-offset-5 { margin-left: 41.66667% } .col-offset-6 { margin-left: 50% } .col-offset-7 { margin-left: 58.33333% } .col-offset-8 { margin-left: 66.66667% } .col-offset-9 { margin-left: 75% } .col-offset-10 { margin-left: 83.33333% } .col-offset-11 { margin-left: 91.66667% } .col-push-0 { position: relative; left: 0; right: auto } .col-pull-0 { right: 0; left: auto } .col-push-1 { left: 8.33333%; right: auto } .col-pull-1 { right: 8.33333%; left: auto } .col-push-2 { left: 16.66667%; right: auto } .col-pull-2 { right: 16.66667%; left: auto } .col-push-3 { left: 25%; right: auto } .col-pull-3 { right: 25%; left: auto } .col-push-4 { left: 33.33333%; right: auto } .col-pull-4 { right: 33.33333%; left: auto } .col-push-5 { left: 41.66667%; right: auto } .col-pull-5 { right: 41.66667%; left: auto } .col-push-6 { left: 50%; right: auto } .col-pull-6 { right: 50%; left: auto } .col-push-7 { left: 58.33333%; right: auto } .col-pull-7 { right: 58.33333%; left: auto } .col-push-8 { left: 66.66667%; right: auto } .col-pull-8 { right: 66.66667%; left: auto } .col-push-9 { left: 75%; right: auto } .col-pull-9 { right: 75%; left: auto } .col-push-10 { left: 83.33333%; right: auto } .col-pull-10 { right: 83.33333%; left: auto } .col-push-11 { left: 91.66667%; right: auto } .col-pull-11 { right: 91.66667%; left: auto } .col-1-1 { width: 100% } .col-2-1 { width: 50% } .col-3-1 { width: 33.333333% } .col-3-2 { width: 66.666667% } .col-4-1 { width: 25% } .col-4-3 { width: 75% } .col-5-1 { width: 20% } .col-5-2 { width: 40% } .col-5-3 { width: 60% } .col-5-4 { width: 80% } .col-6-1 { width: 16.666667% } .col-6-5 { width: 83.333333% } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-pull-12 { right: 100% } .col-xs-pull-11 { right: 91.66666667% } .col-xs-pull-10 { right: 83.33333333% } .col-xs-pull-9 { right: 75% } .col-xs-pull-8 { right: 66.66666667% } .col-xs-pull-7 { right: 58.33333333% } .col-xs-pull-6 { right: 50% } .col-xs-pull-5 { right: 41.66666667% } .col-xs-pull-4 { right: 33.33333333% } .col-xs-pull-3 { right: 25% } .col-xs-pull-2 { right: 16.66666667% } .col-xs-pull-1 { right: 8.33333333% } .col-xs-pull-0 { right: auto } .col-xs-push-12 { left: 100% } .col-xs-push-11 { left: 91.66666667% } .col-xs-push-10 { left: 83.33333333% } .col-xs-push-9 { left: 75% } .col-xs-push-8 { left: 66.66666667% } .col-xs-push-7 { left: 58.33333333% } .col-xs-push-6 { left: 50% } .col-xs-push-5 { left: 41.66666667% } .col-xs-push-4 { left: 33.33333333% } .col-xs-push-3 { left: 25% } .col-xs-push-2 { left: 16.66666667% } .col-xs-push-1 { left: 8.33333333% } .col-xs-push-0 { left: auto } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (max-width: 767px) { .responsive [class^="col-"], .responsive [class*=" col-"] { float: none !important; width: auto !important } .responsive [class^="col-offset-"], .responsive [class*=" col-offset-"] { margin-left: 0 !important } } @media (min-width: 768px) { .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666666666666% } .col-sm-10 { width: 83.33333333333334% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666666666666% } .col-sm-7 { width: 58.333333333333336% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666666666667% } .col-sm-4 { width: 33.33333333333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.666666666666664% } .col-sm-1 { width: 8.333333333333332% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666666666666% } .col-sm-pull-10 { right: 83.33333333333334% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666666666666% } .col-sm-pull-7 { right: 58.333333333333336% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666666666667% } .col-sm-pull-4 { right: 33.33333333333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.666666666666664% } .col-sm-pull-1 { right: 8.333333333333332% } .col-sm-pull-0 { right: 0 } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666666666666% } .col-sm-push-10 { left: 83.33333333333334% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666666666666% } .col-sm-push-7 { left: 58.333333333333336% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666666666667% } .col-sm-push-4 { left: 33.33333333333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.666666666666664% } .col-sm-push-1 { left: 8.333333333333332% } .col-sm-push-0 { left: 0 } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666666666666% } .col-sm-offset-10 { margin-left: 83.33333333333334% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666666666666% } .col-sm-offset-7 { margin-left: 58.333333333333336% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666666666667% } .col-sm-offset-4 { margin-left: 33.33333333333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.666666666666664% } .col-sm-offset-1 { margin-left: 8.333333333333332% } .col-sm-offset-0 { margin-left: 0 } } @media (min-width: 992px) { .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666666666666% } .col-md-10 { width: 83.33333333333334% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666666666666% } .col-md-7 { width: 58.333333333333336% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666666666667% } .col-md-4 { width: 33.33333333333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.666666666666664% } .col-md-1 { width: 8.333333333333332% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666666666666% } .col-md-pull-10 { right: 83.33333333333334% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666666666666% } .col-md-pull-7 { right: 58.333333333333336% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666666666667% } .col-md-pull-4 { right: 33.33333333333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.666666666666664% } .col-md-pull-1 { right: 8.333333333333332% } .col-md-pull-0 { right: 0 } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666666666666% } .col-md-push-10 { left: 83.33333333333334% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666666666666% } .col-md-push-7 { left: 58.333333333333336% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666666666667% } .col-md-push-4 { left: 33.33333333333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.666666666666664% } .col-md-push-1 { left: 8.333333333333332% } .col-md-push-0 { left: 0 } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666666666666% } .col-md-offset-10 { margin-left: 83.33333333333334% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666666666666% } .col-md-offset-7 { margin-left: 58.333333333333336% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666666666667% } .col-md-offset-4 { margin-left: 33.33333333333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.666666666666664% } .col-md-offset-1 { margin-left: 8.333333333333332% } .col-md-offset-0 { margin-left: 0 } } @media (min-width: 1200px) { .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666666666666% } .col-lg-10 { width: 83.33333333333334% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666666666666% } .col-lg-7 { width: 58.333333333333336% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666666666667% } .col-lg-4 { width: 33.33333333333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.666666666666664% } .col-lg-1 { width: 8.333333333333332% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666666666666% } .col-lg-pull-10 { right: 83.33333333333334% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666666666666% } .col-lg-pull-7 { right: 58.333333333333336% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666666666667% } .col-lg-pull-4 { right: 33.33333333333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.666666666666664% } .col-lg-pull-1 { right: 8.333333333333332% } .col-lg-pull-0 { right: 0 } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666666666666% } .col-lg-push-10 { left: 83.33333333333334% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666666666666% } .col-lg-push-7 { left: 58.333333333333336% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666666666667% } .col-lg-push-4 { left: 33.33333333333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.666666666666664% } .col-lg-push-1 { left: 8.333333333333332% } .col-lg-push-0 { left: 0 } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666666666666% } .col-lg-offset-10 { margin-left: 83.33333333333334% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666666666666% } .col-lg-offset-7 { margin-left: 58.333333333333336% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666666666667% } .col-lg-offset-4 { margin-left: 33.33333333333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.666666666666664% } .col-lg-offset-1 { margin-left: 8.333333333333332% } .col-lg-offset-0 { margin-left: 0 } } .visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important } @media (max-width: 767px) { .visible-xs { display: block !important } table.visible-xs { display: table } tr.visible-xs { display: table-row !important } th.visible-xs, td.visible-xs { display: table-cell !important } .hidden-xs { display: none !important } .visible-xs-block { display: block !important } .visible-xs-inline { display: inline !important } .visible-xs-inline-block { display: inline-block !important } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important } table.visible-sm { display: table } tr.visible-sm { display: table-row !important } th.visible-sm, td.visible-sm { display: table-cell !important } .hidden-sm { display: none !important } .visible-sm-block { display: block !important } .visible-sm-inline { display: inline !important } .visible-sm-inline-block { display: inline-block !important } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important } table.visible-md { display: table } tr.visible-md { display: table-row !important } th.visible-md, td.visible-md { display: table-cell !important } .hidden-md { display: none !important } .visible-md-block { display: block !important } .visible-md-inline { display: inline !important } .visible-md-inline-block { display: inline-block !important } } @media (min-width: 1200px) { .visible-lg { display: block !important } table.visible-lg { display: table } tr.visible-lg { display: table-row !important } th.visible-lg, td.visible-lg { display: table-cell !important } .hidden-lg { display: none !important } .visible-lg-block { display: block !important } .visible-lg-inline { display: inline !important } .visible-lg-inline-block { display: inline-block !important } } .visible-print { display: none !important } .visible-print-block { display: none !important } .visible-print-inline { display: none !important } .visible-print-inline-block { display: none !important } @media print { .visible-print { display: block !important } table.visible-print { display: table } tr.visible-print { display: table-row !important } th.visible-print, td.visible-print { display: table-cell !important } .visible-print-block { display: block !important } .visible-print-inline { display: inline !important } .visible-print-inline-block { display: inline-block !important } .hidden-print { display: none !important } } .containBox { background-color: #fff; position: relative; z-index: 100; zoom: 1; -moz-transition: -moz-transform .2s ease-out; -webkit-transition: -webkit-transform .2s ease-out; -o-transition: -o-transform .2s ease-out; transition: transform .2s ease-out; top: 0 } .sideBox { display: none } .containBox-bg { display: none } @media (max-width: 767px) { body, .content { font-size: 16px; line-height: 1.6 } html, body { height: 100% } .containBox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden } .containBox-bg { position: fixed; width: 100%; top: 0; left: 0; display: block; z-index: 2000 } .sideBox { position: absolute; display: block; z-index: 99; right: 0; top: 0; bottom: 0; width: 250px; background-color: #303135 } .sideBox .navbar-nav { display: block } .sideBox .navbar-nav li { border-bottom: 1px solid #222; display: block } .sideBox .navbar-nav a { color: #fff; display: block; padding-left: 20px; padding: 10px 30px } .sideBox .navbar-nav a:hover { text-decoration: none } .Hui-wraper { width: auto; padding: 0 10px } .AD-img img { width: 100%; height: auto } body.sideBox-open .containBox { -moz-transform: translate3d(-250px, 0, 0); -webkit-transform: translate3d(-250px, 0, 0); transform: translate3d(-250px, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden } .wap-container { height: 100%; width: 100%; min-width: 320px; overflow: auto } body.sideBox-open .containBox-bg { bottom: 0; right: 0 } } .Hui-wraper, .wp { margin-left: auto; margin-right: auto; text-align: left } .sd { float: right } .ct2 .mn { float: left } .ct2 .sd { float: right } .ct2_r .leftmenu { float: left } .ct2_r .mn { float: right } .ct3 .app { float: left; margin-right: 20px } .ct3 .mn { float: left; border-left: solid 1px #ddd } .ct3 .sd { float: right } .w-1000 { width: 1000px } .w-980 { width: 980px } .w-300 { width: 300px } .w-200 { width: 200px } @media (max-width: 1000px) { .Hui-wraper, .wp, { width: auto !important; padding: 0 15px !important } } @media print { .Hui-wraper { width: auto } } h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; color: inherit } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small { font-weight: 400; line-height: 1; color: #999 } h1, h2, h3 { padding-top: 20px; padding-bottom: 10px } h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { font-size: 65% } h4, h5, h6 { margin-top: 10px; margin-bottom: 10px } h4 small, h5 small, h6 small, h4 .small, h5 .small, h6 .small { font-size: 75% } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 18px } h5 { font-size: 14px } h6 { font-size: 12px } p { margin-bottom: 10px } small { font-size: 85% } b, strong { font-weight: bold } em { font-style: italic } cite { font-style: normal } mark { color: #000; background: #ff0 } dfn { font-style: italic } del { } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em } pre { white-space: pre-wrap } .uppercase { text-transform: uppercase } .lowercase { text-transform: lowercase } .capitalize { text-transform: capitalize } .en { font-family: Arial !important } .text-l { text-align: left } .text-r { text-align: right } .text-c { text-align: center } .va * { vertical-align: sub !important; *vertical-align: middle !important; _vertical-align: middle !important } .va-t { vertical-align: top !important } .va-m { vertical-align: middle !important } .va-b { vertical-align: bottom !important } .pos-r { position: relative } .pos-a { position: absolute } .pos-f { position: fixed } .l, .f-l { float: left !important; _display: inline } .r, .f-r { float: right !important; _display: inline } [class*="span"].r, [class*="span"].f-r { float: right } .pos-left { left: 0; right: auto } .pos-right { right: 0; left: auto } .pos-top { top: 0; bottom: auto } .pos-bottom { top: auto; bottom: 0 } .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .line { font-size: 0; line-height: 0; border-top: solid 1px #eee; float: none } .mt-5 { margin-top: 5px } .mt-10 { margin-top: 10px } .mt-15 { margin-top: 15px } .mt-20 { margin-top: 20px } .mt-25 { margin-top: 25px } .mt-30 { margin-top: 30px } .mt-35 { margin-top: 35px } .mt-40 { margin-top: 40px } .mt-50 { margin-top: 50px } .mb-5 { margin-bottom: 5px } .mb-10 { margin-bottom: 10px } .mb-15 { margin-bottom: 15px } .mb-20 { margin-bottom: 20px } .mb-30 { margin-bottom: 30px } .mb-40 { margin-bottom: 40px } .mb-50 { margin-bottom: 50px } .ml-5 { margin-left: 5px } .ml-10 { margin-left: 10px } .ml-15 { margin-left: 15px } .ml-20 { margin-left: 20px } .ml-30 { margin-left: 30px } .ml-40 { margin-left: 40px } .ml-50 { margin-left: 50px } .mr-5 { margin-right: 5px } .mr-10 { margin-right: 10px } .mr-15 { margin-right: 15px } .mr-20 { margin-right: 20px } .mr-30 { margin-right: 30px } .mr-40 { margin-right: 40px } .mr-50 { margin-right: 50px } .pt-5 { padding-top: 5px } .pt-10 { padding-top: 10px } .pt-15 { padding-top: 15px } .pt-20 { padding-top: 20px } .pt-25 { padding-top: 25px } .pt-30 { padding-top: 30px } .pb-5 { padding-bottom: 5px } .pb-10 { padding-bottom: 10px } .pb-15 { padding-bottom: 15px } .pb-20 { padding-bottom: 20px } .pb-25 { padding-bottom: 25px } .pb-30 { padding-bottom: 30px } .pl-5 { padding-left: 5px } .pl-10 { padding-left: 10px } .pl-15 { padding-left: 15px } .pl-20 { padding-left: 20px } .pl-25 { padding-left: 25px } .pl-30 { padding-left: 30px } .pr-5 { padding-right: 5px } .pr-10 { padding-right: 10px } .pr-15 { padding-right: 15px } .pr-20 { padding-right: 20px } .pr-25 { padding-right: 25px } .pr-30 { padding-right: 30px } .pd-5 { padding: 5px } .pd-10 { padding: 10px } .pd-15 { padding: 15px } .pd-20 { padding: 20px } .pd-25 { padding: 25px } .pd-30 { padding: 30px } .pd-40 { padding: 40px } .bk-gray { border: solid 1px #eee } .radius { border-radius: 4px } .size-MINI.radius { border-radius: 3px } .size-L.radius { border-radius: 5px } .size-XL.radius { border-radius: 6px } .round { border-radius: 50%; overflow: hidden } .box-shadow { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) } .text-shadow { -webkit-text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); text-shadow: 0 0 2px rgba(0, 0, 0, 0.2) } .pipe { margin: 0 5px; color: #CCC; font-size: 10px !important } .f-12 { font-size: 12px } .f-14 { font-size: 14px } .f-16 { font-size: 16px } .f-18 { font-size: 18px } .f-20 { font-size: 20px } .f-22 { font-size: 22px } .f-24 { font-size: 24px } .f-26 { font-size: 26px } .f-28 { font-size: 28px } .f-30 { font-size: 30px } .lh-16 { line-height: 16px } .lh-18 { line-height: 18px } .lh-20 { line-height: 20px } .lh-22 { line-height: 22px } .lh-24 { line-height: 24px } .lh-26 { line-height: 26px } .lh-28 { line-height: 28px } .lh-30 { line-height: 30px } .l16 { line-height: 16px } .l18 { line-height: 18px } .l20 { line-height: 20px } .l22 { line-height: 22px } .l-24 { line-height: 24px } .l-26 { line-height: 26px } .l-28 { line-height: 28px } .l-30 { line-height: 30px } body { background-color: #fff; color: #333 } .bg-fff { background-color: #fff } a { color: #333 } a:hover, .active a { color: #06c } .c-primary, .c-primary a, a.c-primary { color: #5a98de } .c-primary a:hover, a.c-primary:hover { color: #5a98de } .c-secondary, .c-secondary a, a.c-secondary { color: #555 } .c-secondary a:hover, a.c-secondary:hover { color: #555 } .c-success, .c-success a, a.c-success { color: #5eb95e } .c-success a:hover, a.c-success:hover { color: #5eb95e } .c-danger, .c-danger a, a.c-danger { color: #dd514c } .c-danger a:hover, a.c-danger:hover { color: #dd514c } .c-warning, .c-warning a, a.c-warning { color: #f37b1d } .c-warning a:hover, a.c-warning:hover { color: #f37b1d } .c-error, .c-error a, a.c-error { color: #c00 } .c-error a:hover, a.c-error:hover { color: #c00 } .c-333, .c-333 a, a.c-333 { color: #333 } .c-333 a:hover, a.c-333:hover { color: #333 } .c-666, .c-666 a, a.c-666 { color: #666 } .c-666 a:hover, a.c-666:hover { color: #666 } .c-999, .c-999 a, a.c-999 { color: #999 } .c-999 a:hover, a.c-999:hover { color: #999 } .c-red, .c-red a, a.c-red { color: red } .c-red a:hover, a.c-red:hover { color: red } .c-green, .c-green a, a.c-green { color: green } .c-red a:hover, a.c-red:hover { color: green } .c-blue, .c-blue a, a.c-blue { color: blue } .c-blue a:hover, a.c-blue:hover { color: blue } .c-white, .c-white a, a.c-white { color: white } .c-white a:hover, a.c-white:hover { color: white } .c-black, .c-black a { color: black } .c-black a:hover, a.c-black:hover { color: black } .c-orange, .c-orange a, a.c-orange { color: orange } .c-orange a:hover, a.c-orange:hover { color: orange } abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #999 } abbr.initialism { font-size: 90%; text-transform: uppercase } address { display: block; margin-bottom: 20px; font-style: normal; line-height: 20px } blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #eee } blockquote p { margin-bottom: 0; font-size: 17.5px; font-weight: 300; line-height: 1.25 } blockquote small { display: block; line-height: 20px; color: #999 } blockquote small:before { content: '\2014 \00A0' } blockquote.text-r { padding-right: 15px; padding-left: 0; border-right: 5px solid #eee; border-left: 0 } blockquote.text-r p, blockquote.text-r small { text-align: right } blockquote.text-r small:before { content: '' } blockquote.text-r small:after { content: '\00A0 \2014' } q:before, q:after, blockquote:before, blockquote:after { content: "" } q { quotes: "\201C" "\201D" "\2018" "\2019" } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } .content { position: relative; font-size: 17px; line-height: 1.8; overflow: hidden; text-align: left; word-break: break-all; word-wrap: break-word } .content h3 { font-size: 18px } .content h4 { font-size: 16px } .content p { margin-bottom: 1.5rem; text-align: justify; word-break: break-all } .content p.text-c { text-align: center } .indent { text-indent: 2em } .content img { max-width: 100% } .content ul { text-indent: 2em } @media (max-width: 767px) { .content { font-size: 16px } } @media (max-width: 480px) { .content img { max-width: 100% !important; height: auto !important; width: expression(this.width>320 ? "320px":this.width) !important } * html .content img { width: expression(this.width>320&&this.width>this.height?320:auto) } } ul.unstyled, ol.unstyled { margin-left: 0; list-style: none } ul.inline, ol.inline { margin-left: 0; list-style: none } ul.inline > li, ol.inline > li { display: inline-block; *display: inline; padding-right: 5px; padding-left: 5px; *zoom: 1 } .list-view > .item { padding: 10px; position: relative; overflow: hidden } .list-view > .item .date { font-size: 12px; font-family: Arial; color: #999 } @media (max-width: 767px) { .list-view > .item { font-size: 18px; padding: 11px 15px; border-bottom: 1px solid #eee } .list-view > .item > a { display: block; margin: -11px -15px } .night .list-view > .item { border-bottom: 1px solid #1f1f1f } .list-view > .item .date { display: none } .list-view > .item .Hui-iconfont { background-size: 9px auto; margin-top: -7px; position: absolute; right: 15px; top: 50% } } .list-top > .item { padding-left: 30px } .list-top > .item .num { position: absolute; top: 11px; display: block; width: 20px; height: 20px; color: #fff; background-color: #5a98de; text-align: center } .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap } .dl-horizontal dd { margin-left: 180px } .hide { display: none } [hidden] { display: none } .hidden { display: none !important; visibility: hidden !important } .f-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0 } [class*="span"].hide, .row-fluid [class*="span"].hide { display: none } .show { display: block } .invisible { visibility: hidden } .input-text, .btn, .input-text.size-M, .btn.size-M { font-size: 14px; height: 31px; *height: auto; line-height: 1.42857; padding: 4px } a.btn, a.btn.size-M, span.btn, span.btn.size-M { line-height: 21px } .btn, .btn.size-M { padding: 4px 12px } .input-text.size-MINI, .btn.size-MINI { font-size: 12px; height: 23px; padding: 1px 2px; line-height: 1.42857 } a.btn.size-MINI, span.btn.size-MINI { line-height: 21px } .btn.size-MINI { padding: 1px 4px } .input-text.size-S, .btn.size-S { font-size: 12px; height: 27px; padding: 3px; line-height: 1.42857 } a.btn.size-S, span.btn.size-S { line-height: 19px } .btn.size-S { padding: 3px 8px } .input-text.size-L, .btn.size-L { font-size: 16px; height: 41px; padding: 8px } a.btn.size-L, span.btn.size-L { line-height: 23px } .btn.size-L { padding: 8px 16px } .input-text.size-XL, .btn.size-XL { font-size: 18px; height: 48px; padding: 10px } a.btn.size-XL, span.btn.size-XL { line-height: 26px } .btn.size-XL { padding: 10px 24px } @media (max-width: 767px) { .responsive .input-text.size-MINI, .responsive .btn.size-MINI { height: 24px } .responsive .input-text.size-S, .responsive .btn.size-S { font-size: 14px; height: 30px } .responsive .input-text, .btn, .responsive .input-text.size-M, .responsive .btn.size-M { font-size: 16px; height: 36px } .responsive .input-text.size-L, .responsive .btn.size-L { font-size: 18px; height: 42px } .responsive .input-text.size-XL, .responsive .btn.size-XL { font-size: 20px; height: 48px } } code { padding: 0 3px 2px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace } pre .title, pre .keyword, pre .body, pre .des { color: #333 } pre { display: block; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; padding: 9.5px; margin-bottom: 10px; font-size: 12px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; color: #333 } .prettyprint { margin-bottom: 20px; padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8 } .prettyprint .com { color: #998; font-style: italic } .prettyprint .tag { color: #007 } .prettyprint .lit { color: #195f91 } .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #93a1a1 } .prettyprint .fun { color: #dc322f } .prettyprint .str, .prettyprint .atv { color: #D14 } .prettyprint .kwd, .prettyprint .prettyprint .tag { color: #1e347b } .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var { color: teal } .prettyprint .pln { color: #48484c } .prettyprint.linenums { box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0 } .pre-scrollable { max-height: 340px; overflow-y: scroll } ol.linenums { list-style: decimal outside none; margin-left: 20px } ol.linenums li { line-height: 28px; padding-left: 10px } pre ol.linenums { margin: 0 0 0 33px } pre ol.linenums li { padding-left: 12px; color: #bbb; line-height: 18px; text-shadow: 0 1px 0 #fff } @media (max-width: 767px) { pre ol.linenums { margin-left: 0; list-style: none } ol.linenums li { padding-left: 0 } .prettyprint.linenums { box-shadow: inset 0 0 0 #fbfbfc, inset 0 0 0 #ececf0 } } table { width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0 } table th { text-align: left; font-weight: 400 } .table th { font-weight: bold } .table th, .table td { padding: 8px; line-height: 20px; word-break: break-all } .table td { text-align: left } .table tbody tr.success > td { background-color: #dff0d8 } .table tbody tr.error > td { background-color: #f2dede } .table tbody tr.warning > td { background-color: #fcf8e3 } .table tbody tr.info > td { background-color: #d9edf7 } .table tbody + tbody { border-top: 2px solid #ddd } .table .table { background-color: #fff } .table-border { border-top: 1px solid #ddd } .table-border th, .table-border td { border-bottom: 1px solid #ddd } .table-bg thead th { background-color: #f5fafe } .table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; border-left: 0 } .table-bordered th, .table-bordered td { border-left: 1px solid #ddd } .table-border.table-bordered { border-bottom: 0 } .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background-color: #f9f9f9 } .table-condensed th, .table-condensed td { padding: 4px 5px } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #f5f5f5 } .table tbody tr.selected td { background-color: #f3f3f3 } .table tbody tr.active, .table tbody tr.active > td, .table tbody tr.active > th, .table tbody tr .active { background-color: #f5f5f5 !important } .table tbody tr.success, .table tbody tr.success > td, .table tbody tr.success > th, .table tbody tr .success { background-color: #dff0d8 !important } .table tbody tr.warning, .table tbody tr.warning > td, .table tbody tr.warning > th, .table tbody tr .warning { background-color: #fcf8e3 !important } .table tbody tr.danger, .table tbody tr.danger > td, .table tbody tr.danger > th, .table tbody tr .danger { background-color: #f2dede !important } .table .text-c th, .table .text-c td { text-align: center } .table .text-r th, .table .text-r td { text-align: right } .table th.text-l, .table td.text-l { text-align: left !important } .table th.text-c, .table td.text-c { text-align: center !important } .table th.text-r, .table td.text-r { text-align: right !important } table.dataTable { border-collapse: separate; border-spacing: 0; clear: both } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { cursor: pointer; background-repeat: no-repeat; background-position: right center } table.dataTable thead .sorting { background-image: url(../static/h-ui/images/dataTable/sort_both.png) } table.dataTable thead .sorting_asc { background-image: url(../static/h-ui/images/dataTable/sort_asc.png) } table.dataTable thead .sorting_desc { background-image: url(../static/h-ui/images/dataTable/sort_desc.png) } .dataTable td.sorting_1 { background-color: #f5fafe } .dataTables_wrapper .dataTables_length { float: left; padding-bottom: 20px } .dataTables_wrapper .dataTables_length .select { width: 50px } .dataTables_wrapper .dataTables_filter { float: right; text-align: right } .dataTables_wrapper .dataTables_filter .input-text { width: auto } .dataTables_wrapper .dataTables_info { clear: both; float: left; padding-top: 10px; font-size: 14px; color: #666 } .dataTables_wrapper .dataTables_paginate { float: right; padding-top: 10px; text-align: right } .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid #ccc; cursor: pointer; display: inline-block; margin-left: 2px; text-align: center; text-decoration: none; color: #666; height: 26px; line-height: 26px; text-decoration: none; margin: 0 0 6px 6px; padding: 0 10px; font-size: 14px } .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #5a98de; color: #fff } @media (max-width: 767px) { .table-responsive th, .table-responsive td { display: block; width: 100% !important; box-sizing: border-box } } .input-text, .textarea { box-sizing: border-box; border: solid 1px #ddd; width: 100%; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition: all .2s linear 0s } .textarea { height: 100px; resize: none; font-size: 14px; padding: 4px } .textarea-numberbar { position: absolute; right: 20px; bottom: 5px; z-index: 1; margin-bottom: 0 } .textarea-length { font-style: normal } .input-text:hover, .textarea:hover { border: solid 1px #3bb4f2 } .input-text.focus, .textarea.focus { border: solid 1px #0f9ae0 \9; border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6) } .input-text.disabled, .textarea.disabled, .input-text.disabled.focus, .textarea.disabled.focus { background-color: #ededed; cursor: default; border-color: #ddd; -webkit-box-shadow: inset 0 2px 2px #e8e7e7; -moz-box-shadow: inset 0 2px 2px #e8e7e7; box-shadow: inset 0 2px 2px #e8e7e7 } .input-text.disabled, .textarea.disabled { background-color: #e6e6e6; cursor: default } .input-text.box-shadow, .textarea.box-shadow { -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) } .input-text.inline { display: inline-block; width: auto } input[type="radio"], input[type="checkbox"] { line-height: normal; margin-top: -4px } .check-box, .radio-box { display: inline-block; box-sizing: border-box; cursor: pointer; position: relative; padding-left: 30px; padding-right: 20px } .icheckbox, .icheckbox-red, .icheckbox-green, .icheckbox-blue, .icheckbox-aero, .icheckbox-grey, .icheckbox-orange, .icheckbox-yellow, .icheckbox-pink, .icheckbox-purple, .iradio, .iradio-red, .iradio-green, .iradio-blue, .iradio-aero, .iradio-grey, .iradio-orange, .iradio-yellow, .iradio-pink, .iradio-purple { position: absolute; top: 4px; left: 0 } @media (max-width: 767px) { .responsive .check-box, .responsive .radio-box { display: block } } .icheckbox, .iradio { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/minimal.png) no-repeat; border: 0; cursor: pointer } .icheckbox, .icheckbox.static:hover { background-position: 0 0 } .icheckbox.hover, .icheckbox:hover { background-position: -20px 0 } .icheckbox.checked { background-position: -40px 0 } .icheckbox.disabled { background-position: -60px 0; cursor: default } .icheckbox.checked.disabled { background-position: -80px 0 } .iradio, .iradio.static:hover { background-position: -100px 0 } .iradio.hover, .iradio:hover { background-position: -120px 0 } .iradio.checked { background-position: -140px 0 } .iradio.disabled { background-position: -160px 0; cursor: default } .iradio.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox, .iradio { background-image: url(../static/h-ui/images/iCheck/minimal@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-red, .iradio-red { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/red.png) no-repeat; border: 0; cursor: pointer } .icheckbox-red, .icheckbox-red.static:hover { background-position: 0 0 } .icheckbox-red.hover, .icheckbox-red:hover { background-position: -20px 0 } .icheckbox-red.checked { background-position: -40px 0 } .icheckbox-red.disabled { background-position: -60px 0; cursor: default } .icheckbox-red.checked.disabled { background-position: -80px 0 } .iradio-red, .iradio-red.static:hover { background-position: -100px 0 } .iradio-red.hover, .iradio-red:hover { background-position: -120px 0 } .iradio-red.checked { background-position: -140px 0 } .iradio-red.disabled { background-position: -160px 0; cursor: default } .iradio-red.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-red, .iradio-red { background-image: url(../static/h-ui/images/iCheck/red@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-green, .iradio-green { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/green.png) no-repeat; border: 0; cursor: pointer } .icheckbox-green, .icheckbox-green.static:hover { background-position: 0 0 } .icheckbox-green.hover, .icheckbox-green:hover { background-position: -20px 0 } .icheckbox-green.checked { background-position: -40px 0 } .icheckbox-green.disabled { background-position: -60px 0; cursor: default } .icheckbox-green.checked.disabled { background-position: -80px 0 } .iradio-green, .iradio-green.static:hover { background-position: -100px 0 } .iradio-green.hover, .iradio-green:hover { background-position: -120px 0 } .iradio-green.checked { background-position: -140px 0 } .iradio-green.disabled { background-position: -160px 0; cursor: default } .iradio-green.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-green, .iradio-green { background-image: url(../static/h-ui/images/iCheck/green@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-blue, .iradio-blue { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/blue.png) no-repeat; border: 0; cursor: pointer } .icheckbox-blue, .icheckbox-blue.static:hover { background-position: 0 0 } .icheckbox-blue.hover, .icheckbox-blue:hover { background-position: -20px 0 } .icheckbox-blue.checked { background-position: -40px 0 } .icheckbox-blue.disabled { background-position: -60px 0; cursor: default } .icheckbox-blue.checked.disabled { background-position: -80px 0 } .iradio-blue, .iradio-blue.static:hover { background-position: -100px 0 } .iradio-blue.hover, .iradio-blue:hover { background-position: -120px 0 } .iradio-blue.checked { background-position: -140px 0 } .iradio-blue.disabled { background-position: -160px 0; cursor: default } .iradio-blue.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-blue, .iradio-blue { background-image: url(../static/h-ui/images/iCheck/blue@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-aero, .iradio-aero { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/aero.png) no-repeat; border: 0; cursor: pointer } .icheckbox-aero, .icheckbox-aero.static:hover { background-position: 0 0 } .icheckbox-aero.hover, .icheckbox-aero:hover { background-position: -20px 0 } .icheckbox-aero.checked { background-position: -40px 0 } .icheckbox-aero.disabled { background-position: -60px 0; cursor: default } .icheckbox-aero.checked.disabled { background-position: -80px 0 } .iradio-aero, .iradio-aero.static:hover { background-position: -100px 0 } .iradio-aero.hover, .iradio-aero:hover { background-position: -120px 0 } .iradio-aero.checked { background-position: -140px 0 } .iradio-aero.disabled { background-position: -160px 0; cursor: default } .iradio-aero.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-aero, .iradio-aero { background-image: url(../static/h-ui/images/iCheck/aero@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-grey, .iradio-grey { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/grey.png) no-repeat; border: 0; cursor: pointer } .icheckbox-grey, .icheckbox-grey.static:hover { background-position: 0 0 } .icheckbox-grey.hover, .icheckbox-grey:hover { background-position: -20px 0 } .icheckbox-grey.checked { background-position: -40px 0 } .icheckbox-grey.disabled { background-position: -60px 0; cursor: default } .icheckbox-grey.checked.disabled { background-position: -80px 0 } .iradio-grey, .iradio-grey.static:hover { background-position: -100px 0 } .iradio-grey.hover, .iradio-grey:hover { background-position: -120px 0 } .iradio-grey.checked { background-position: -140px 0 } .iradio-grey.disabled { background-position: -160px 0; cursor: default } .iradio-grey.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-grey, .iradio-grey { background-image: url(../static/h-ui/images/iCheck/grey@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-orange, .iradio-orange { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/orange.png) no-repeat; border: 0; cursor: pointer } .icheckbox-orange, .icheckbox-orange.static:hover { background-position: 0 0 } .icheckbox-orange.hover, .icheckbox-orange:hover { background-position: -20px 0 } .icheckbox-orange.checked { background-position: -40px 0 } .icheckbox-orange.disabled { background-position: -60px 0; cursor: default } .icheckbox-orange.checked.disabled { background-position: -80px 0 } .iradio-orange, .iradio-orange.static:hover { background-position: -100px 0 } .iradio-orange.hover, .iradio-orange:hover { background-position: -120px 0 } .iradio-orange.checked { background-position: -140px 0 } .iradio-orange.disabled { background-position: -160px 0; cursor: default } .iradio-orange.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-orange, .iradio-orange { background-image: url(../static/h-ui/images/iCheck/orange@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-yellow, .iradio-yellow { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/yellow.png) no-repeat; border: 0; cursor: pointer } .icheckbox-yellow, .icheckbox-yellow.static:hover { background-position: 0 0 } .icheckbox-yellow.hover, .icheckbox-yellow:hover { background-position: -20px 0 } .icheckbox-yellow.checked { background-position: -40px 0 } .icheckbox-yellow.disabled { background-position: -60px 0; cursor: default } .icheckbox-yellow.checked.disabled { background-position: -80px 0 } .iradio-yellow, .iradio-yellow.static:hover { background-position: -100px 0 } .iradio-yellow.hover, .iradio-yellow:hover { background-position: -120px 0 } .iradio-yellow.checked { background-position: -140px 0 } .iradio-yellow.disabled { background-position: -160px 0; cursor: default } .iradio-yellow.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-yellow, .iradio-yellow { background-image: url(../static/h-ui/images/iCheck/yellow@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-pink, .iradio-pink { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/pink.png) no-repeat; border: 0; cursor: pointer } .icheckbox-pink, .icheckbox-pink.static:hover { background-position: 0 0 } .icheckbox-pink.hover, .icheckbox-pink:hover { background-position: -20px 0 } .icheckbox-pink.checked { background-position: -40px 0 } .icheckbox-pink.disabled { background-position: -60px 0; cursor: default } .icheckbox-pink.checked.disabled { background-position: -80px 0 } .iradio-pink, .iradio-pink.static:hover { background-position: -100px 0 } .iradio-pink.hover, .iradio-pink:hover { background-position: -120px 0 } .iradio-pink.checked { background-position: -140px 0 } .iradio-pink.disabled { background-position: -160px 0; cursor: default } .iradio-pink.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-pink, .iradio-pink { background-image: url(../static/h-ui/images/iCheck/pink@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .icheckbox-purple, .iradio-purple { display: block; margin: 0; padding: 0; width: 18px; height: 18px; background: url(../static/h-ui/images/iCheck/purple.png) no-repeat; border: 0; cursor: pointer } .icheckbox-purple, .icheckbox-purple.static:hover { background-position: 0 0 } .icheckbox-purple.hover, .icheckbox-purple:hover { background-position: -20px 0 } .icheckbox-purple.checked { background-position: -40px 0 } .icheckbox-purple.disabled { background-position: -60px 0; cursor: default } .icheckbox-purple.checked.disabled { background-position: -80px 0 } .iradio-purple, .iradio-purple.static:hover { background-position: -100px 0 } .iradio-purple.hover, .iradio-purple:hover { background-position: -120px 0 } .iradio-purple.checked { background-position: -140px 0 } .iradio-purple.disabled { background-position: -160px 0; cursor: default } .iradio-purple.checked.disabled { background-position: -180px 0 } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox-purple, .iradio-purple { background-image: url(../static/h-ui/images/iCheck/purple@2x.png); -webkit-background-size: 200px 20px; background-size: 200px 20px } } .has-switch { display: inline-block; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); position: relative; text-align: left; overflow: hidden; line-height: 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; min-width: 100px } .has-switch.size-MINI { min-width: 72px } .has-switch.size-S { min-width: 80px } .has-switch.size-L { min-width: 120px } .has-switch.deactivate { opacity: .5; filter: alpha(opacity=50); cursor: default !important } .has-switch.deactivate label, .has-switch.deactivate span { cursor: default !important } .has-switch > div { display: inline-block; width: 150%; position: relative; top: 0 } .has-switch > div.switch-animate { -webkit-transition: left .5s; -moz-transition: left .5s; -o-transition: left .5s; transition: left .5s } .has-switch > div.switch-off { left: -50% } .has-switch > div.switch-on { left: 0 } .has-switch input[type=checkbox] { display: none } .has-switch span, .has-switch label { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: relative; display: inline-block; padding-bottom: 4px; padding-top: 4px; font-size: 14px; line-height: 20px } .has-switch span.size-MINI, .has-switch label.size-MINI { padding-bottom: 4px; padding-top: 4px; font-size: 10px; line-height: 9px } .has-switch span.size-S, .has-switch label.size-S { padding-bottom: 3px; padding-top: 3px; font-size: 12px; line-height: 18px } .has-switch span.size-L, .has-switch label.size-L { padding-bottom: 9px; padding-top: 9px; font-size: 16px; line-height: normal } .has-switch label { text-align: center; margin-top: -1px; margin-bottom: -1px; z-index: 100; width: 34%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #fff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); background-image: -o-linear-gradient(top, #fff, #e6e6e6); background-image: linear-gradient(to bottom, #fff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #e6e6e6; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch label:hover, .has-switch label:focus, .has-switch label:active, .has-switch label.active, .has-switch label.disabled, .has-switch label[disabled] { color: #fff; background-color: #e6e6e6; *background-color: #d9d9d9 } .has-switch label:active, .has-switch label.active { background-color: #ccc \9 } .has-switch label i { color: #000; text-shadow: 0 1px 0 #fff; line-height: 18px; pointer-events: none } .has-switch span { text-align: center; z-index: 1; width: 33% } .has-switch span.switch-left { -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px } .has-switch span.switch-right { color: #333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #f0f0f0; background-image: -moz-linear-gradient(top, #e6e6e6, #fff); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff)); background-image: -webkit-linear-gradient(top, #e6e6e6, #fff); background-image: -o-linear-gradient(top, #e6e6e6, #fff); background-image: linear-gradient(to bottom, #e6e6e6, #fff); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); border-color: #fff #fff #d9d9d9; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #fff; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-right:hover, .has-switch span.switch-right:focus, .has-switch span.switch-right:active, .has-switch span.switch-right.active, .has-switch span.switch-right.disabled, .has-switch span.switch-right[disabled] { color: #333; background-color: #fff; *background-color: #f2f2f2 } .has-switch span.switch-right:active, .has-switch span.switch-right.active { background-color: #e6e6e6 \9 } .has-switch span.switch-primary, .has-switch span.switch-left { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #005fcc; background-image: -moz-linear-gradient(top, #04c, #08c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04c), to(#08c)); background-image: -webkit-linear-gradient(top, #04c, #08c); background-image: -o-linear-gradient(top, #04c, #08c); background-image: linear-gradient(to bottom, #04c, #08c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); border-color: #08c #08c #005580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #08c; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-primary:hover, .has-switch span.switch-left:hover, .has-switch span.switch-primary:focus, .has-switch span.switch-left:focus, .has-switch span.switch-primary:active, .has-switch span.switch-left:active, .has-switch span.switch-primary.active, .has-switch span.switch-left.active, .has-switch span.switch-primary.disabled, .has-switch span.switch-left.disabled, .has-switch span.switch-primary[disabled], .has-switch span.switch-left[disabled] { color: #fff; background-color: #08c; *background-color: #0077b3 } .has-switch span.switch-primary:active, .has-switch span.switch-left:active, .has-switch span.switch-primary.active, .has-switch span.switch-left.active { background-color: #069 \9 } .has-switch span.switch-info { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #41a7c5; background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de)); background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de); background-image: -o-linear-gradient(top, #2f96b4, #5bc0de); background-image: linear-gradient(to bottom, #2f96b4, #5bc0de); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0); border-color: #5bc0de #5bc0de #28a1c5; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #5bc0de; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-info:hover, .has-switch span.switch-info:focus, .has-switch span.switch-info:active, .has-switch span.switch-info.active, .has-switch span.switch-info.disabled, .has-switch span.switch-info[disabled] { color: #fff; background-color: #5bc0de; *background-color: #46b8da } .has-switch span.switch-info:active, .has-switch span.switch-info.active { background-color: #31b0d5 \9 } .has-switch span.switch-success { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #58b058; background-image: -moz-linear-gradient(top, #51a351, #62c462); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462)); background-image: -webkit-linear-gradient(top, #51a351, #62c462); background-image: -o-linear-gradient(top, #51a351, #62c462); background-image: linear-gradient(to bottom, #51a351, #62c462); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0); border-color: #62c462 #62c462 #3b9e3b; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #62c462; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-success:hover, .has-switch span.switch-success:focus, .has-switch span.switch-success:active, .has-switch span.switch-success.active, .has-switch span.switch-success.disabled, .has-switch span.switch-success[disabled] { color: #fff; background-color: #62c462; *background-color: #4fbd4f } .has-switch span.switch-success:active, .has-switch span.switch-success.active { background-color: #42b142 \9 } .has-switch span.switch-warning { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #f9a123; background-image: -moz-linear-gradient(top, #f89406, #fbb450); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450)); background-image: -webkit-linear-gradient(top, #f89406, #fbb450); background-image: -o-linear-gradient(top, #f89406, #fbb450); background-image: linear-gradient(to bottom, #f89406, #fbb450); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0); border-color: #fbb450 #fbb450 #f89406; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #fbb450; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-warning:hover, .has-switch span.switch-warning:focus, .has-switch span.switch-warning:active, .has-switch span.switch-warning.active, .has-switch span.switch-warning.disabled, .has-switch span.switch-warning[disabled] { color: #fff; background-color: #fbb450; *background-color: #faa937 } .has-switch span.switch-warning:active, .has-switch span.switch-warning.active { background-color: #fa9f1e \9 } .has-switch span.switch-danger { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #d14641; background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b)); background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b); background-image: -o-linear-gradient(top, #bd362f, #ee5f5b); background-image: linear-gradient(to bottom, #bd362f, #ee5f5b); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0); border-color: #ee5f5b #ee5f5b #e51d18; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #ee5f5b; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .has-switch span.switch-danger:hover, .has-switch span.switch-danger:focus, .has-switch span.switch-danger:active, .has-switch span.switch-danger.active, .has-switch span.switch-danger.disabled, .has-switch span.switch-danger[disabled] { color: #fff; background-color: #ee5f5b; *background-color: #ec4844 } .has-switch span.switch-danger:active, .has-switch span.switch-danger.active { background-color: #e9322d \9 } .select-box { border: solid 1px #ddd; box-sizing: border-box; vertical-align: middle; width: 100%; display: inline-block } .select { border: solid 1px #ddd; box-sizing: border-box; cursor: pointer; line-height: normal; font-weight: normal; width: 100%; white-space: nowrap } .select-box .select { border: 0 } .select-box.inline, .select-box.inline .select { width: auto } .select-box, .select-box.size-M { padding: 4px 5px } .select, .size-M .select { font-size: 14px } .select-box.size-MINI { padding: 0 5px } .size-MINI .select { font-size: 12px } .select-box.size-S { padding: 3px 5px } .size-S .select { font-size: 12px } .select-box.size-L { padding: 8px 5px } .size-L .select { font-size: 16px } .select-box.size-XL { padding: 10px 5px } .size-XL .select { font-size: 18px } @media (max-width: 767px) { .responsive .select-box { border: 0 } .responsive .select-box .select, .responsive .select { border: solid 1px #ddd; padding: 10px; font-size: 16px } .responsive .select-box, .responsive .select-box.size-M, .responsive .select-box.size-MINI, .responsive .select-box.size-S, .responsive .select-box.size-L, .responsive .select-box.size-XL { height: auto; padding: 0 } } .select-wrapper { position: relative; display: inline-block; font-size: 14px; cursor: default } .select-default { zoom: 1; display: block; padding-left: 10px; padding-right: 30px; background-color: #fff; border: solid 1px #d0d0d0; height: 34px; line-height: 34px } .jsselect.radius { overflow: visible } .jsselect.radius .select-default { border-radius: 4px } .jsselect.radius .select-list { border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0 } .select-icon { position: absolute; height: 8px; width: 12px; right: 10px; top: 50%; margin-top: -4px; background: url(../static/h-ui/images/jselect/iconpic-arrow-down2.png) no-repeat center } .unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none } .select-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; line-height: 34px; max-height: 320px; overflow: auto; background-color: #fff; background-clip: padding-box; _height: expression(this.scrollHeight>319 ? "320px":"auto"); -moz-box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2); -webkit-box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2); box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2); box-sizing: border-box; border: solid 1px #d0d0d0 } .select-item { margin: 0; padding: 0 } .select-option { background: #fff; line-height: 34px; text-align: left; white-space: nowrap; cursor: pointer; border-bottom: 1px solid #f2f2f2; padding: 0 10px } .select-item .selected { background-color: #148cf1; color: #fff } .btn-upload { position: relative; display: inline-block; height: 31px; *display: inline; overflow: hidden; vertical-align: middle; cursor: pointer } .upload-url { cursor: pointer; width: 300px } .input-file { position: absolute; right: 0; top: 0; cursor: pointer; z-index: 1; font-size: 30em; opacity: 0; filter: alpha(opacity=0) } .form-group .upload-btn { margin-left: -1px } .btn-upload .icon-add, .btn-upload .icon-minus { cursor: pointer; display: inline-block; font-family: Arial; font-size: 30px; height: 31px; line-height: 31px; text-align: center; vertical-align: middle; width: 36px } @media (max-width: 767px) { .upload-btn { display: none } .upload-url { display: none } } .numberControlBox { display: inline-block; overflow: hidden; vertical-align: middle } .ncb-up, .ncb-down { font-size: 0; display: block; height: 10px; background-color: #f4f4f4; background: -moz-linear-gradient(top, #fff 0, #e6e6e6 50%, #fff 100%); width: 24px; border: 1px solid #d1d1d1; cursor: pointer } .ncb-up { margin-bottom: 1px } .numberControlBox .ncb_ico { display: block; height: 10px; background-image: url(../static/h-ui/images/iconpic-arrow.png); background-repeat: no-repeat } .ncb-up .ncb_ico { background-position: -22px center } .ncb-down .ncb_ico { background-position: 1px center } .ncb_btn_hover { border: 1px solid #9dc7e7; background-color: #dff2fc; background: -moz-linear-gradient(top, #fff 0, #d2edfa 50%, #fff 100%) } .ncb_btn_selected { border: 1px solid #6198c2; background-color: #aee1fb; background: -moz-linear-gradient(top, #fff 0, #aee1fb 50%, #fff 100%) } .input-text[type="number"] { width: 80px } .spinner { display: block; overflow: hidden; width: 100px; position: relative; padding-left: 29px; padding-right: 29px } .spinner .input-text { height: 30px; text-align: center; width: 100% } .spinner a { display: inline-block; position: absolute; top: 0; bottom: 0; height: 28px; line-height: 28px; width: 28px; cursor: pointer; outline: 0; text-decoration: none; text-align: center; font-size: 16px; border: 1px solid #ddd; background-color: #f7f7f7 } .spinner a:hover { text-decoration: none } .spinner a i { font-style: normal } .spinner a.subtract { left: 0 } .spinner a.add { right: 0 } .spinner a.add.disabled, .spinner a.subtract.disabled { color: #999; cursor: not-allowed } .emailSug-wrapper { position: absolute; background: #fff; text-align: left; z-index: 999 } .emailSug-wrapper .emailSug-list .emailSug-item { font-size: 14px; height: 25px; line-height: 25px; padding-left: 10px; color: #333 } .emailSug-wrapper .emailSug-list .emailSug-item.active { background: #5a98de; cursor: pointer; color: #fff } label, .placeholder { font-size: 14px } .form legend { font-size: 20px } .form .row { margin-top: 15px } .form-label { display: block; color: #555 } .formControls { position: relative } .formControls > * { vertical-align: middle } .placeholder { position: absolute; left: 4px; top: 4px; color: #c6c6c6; cursor: text } .form-horizontal .form-label { margin-top: 3px; cursor: text; text-align: right } .form-horizontal .Validform_checktip { margin-top: 5px } ::-webkit-input-placeholder { color: #b3b3b3 } :-moz-placeholder { color: #b3b3b3 } ::-moz-placeholder { color: #b3b3b3 } :-ms-input-placeholder { color: #b3b3b3 } .placeholder { color: #adb0be; position: absolute; z-index: 9 } @media (max-width: 767px) { .form-horizontal .form-label { text-align: left } } .Validform_error, input.error, select.error, textarea.error { background-color: #fbe2e2; border-color: #c66161; color: #c00 } .Validform_wrong, .Validform_right, .Validform_warning { display: inline-block; height: 20px; font-size: 12px; vertical-align: middle; padding-left: 25px } .Validform_wrong { background: url(../static/h-ui/images/validform/iconpic-error.png) no-repeat 0 center; color: #ef392b } .Validform_right { background: url(../static/h-ui/images/validform/iconpic-right.png) no-repeat 0 center } .Validform_warning { background: url(../static/h-ui/images/validform/iconpic-warning.png) no-repeat 0 center; color: #777 } label.error { position: absolute; right: 18px; top: 5px; color: #ef392b; font-size: 12px } .check-box label.error, .radio-box label.error { right: auto; width: 150px; left: 210px; top: -2px } .passwordStrength b { font-weight: 400 } .passwordStrength b, .passwordStrength span { display: inline-block; vertical-align: middle; line-height: 16px; line-height: 18px \9; height: 16px } .passwordStrength span { width: 57px; text-align: center; background-color: #d0d0d0; border-right: 1px solid #fff } .passwordStrength .last { border-right: 0 } .passwordStrength .bgStrength { color: #fff; background-color: #fcc900 } #Validform_msg { font-size: 14px; width: 300px; -webkit-box-shadow: 2px 2px 3px #aaa; -moz-box-shadow: 2px 2px 3px #aaa; background: #fff; position: absolute; top: 0; right: 50px; z-index: 99999; display: none; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) } #Validform_msg .iframe { position: absolute; left: 0; top: -1px; z-index: -1 } #Validform_msg .Validform_title { font-size: 20px; padding: 10px; text-align: left; color: #fff; position: relative; background-color: #fcc900 } #Validform_msg a.Validform_close:link, #Validform_msg a.Validform_close:visited { position: absolute; right: 8px; top: 6px; color: #fff; text-decoration: none; font-family: Verdana } #Validform_msg a.Validform_close:hover { color: #fff } #Validform_msg .Validform_info { padding: 10px; border: 1px solid #bbb; border-top: 0; text-align: left } @media (max-width: 767px) { .responsive .Validform_checktip { margin-top: 10px } } .close { font-size: 20px; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; filter: alpha(opacity=20) } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .4; filter: alpha(opacity=40) } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none } .btn { display: inline-block; box-sizing: border-box; cursor: pointer; text-align: center; font-weight: 400; white-space: nowrap; vertical-align: middle; -moz-padding-start: npx; -moz-padding-end: npx; border: solid 1px #ddd; background-color: #fff; width: auto; *zoom: 1; *overflow: visible; -webkit-transition: background-color .1s linear; -moz-transition: background-color .1s linear; -o-transition: background-color .1s linear; transition: background-color .1s linear } a.btn:hover, a.btn:focus, a.btn:active, a.btn.active, a.btn.disabled, a.btn[disabled] { text-decoration: none } .btn:active, .btn.active { background-color: #ccc } .btn:first-child { *margin-left: 0 } .btn.active, .btn:active { -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset } .btn-default { background-color: #e6e6e6; border-color: #e6e6e6 } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { color: #333; background-color: #c7c7c7; border-color: #c7c7c7 } .btn-primary { color: #fff; background-color: #5a98de; border-color: #5a98de } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color: #0a6999; border-color: #0a6999 } .btn-secondary { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2 } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active { color: #fff; background-color: #0f9ae0; border-color: #0f9ae0 } .btn-success { color: #fff; background-color: #5eb95e; border-color: #5eb95e } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { color: #fff; background-color: #429842; border-color: #429842 } .btn-warning { color: #fff; background-color: #f37b1d; border-color: #f37b1d } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { color: #fff; background-color: #c85e0b; border-color: #c85e0b } .btn-danger { color: #fff; background-color: #dd514c; border-color: #dd514c } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { color: #fff; background-color: #c62b26; border-color: #c62b26 } .btn-link { color: #0e90d2; cursor: pointer; border-color: transparent; background-color: transparent } .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active { color: #095f8a; text-decoration: underline; background-color: transparent } .btn-block { -moz-box-sizing: border-box; display: block; padding-left: 0; padding-right: 0; width: 100% } .btn-default-outline { background-color: transparent; border-color: #e6e6e6 } .btn-default-outline:hover, .btn-default-outline:focus, .btn-default-outline:active, .btn-default-outline.active { color: #333; background-color: transparent; border-color: #c7c7c7 } .btn-primary-outline { color: #5a98de; background-color: transparent; border-color: #5a98de } .btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline:active, .btn-primary-outline.active { color: #0a6999; background-color: transparent; border-color: #0a6999 } .btn-secondary-outline { color: #3bb4f2; background-color: transparent; background-image: none; border-color: #3bb4f2 } .btn-secondary-outline.active, .btn-secondary-outline.focus, .btn-secondary-outline:active, .btn-secondary-outline:focus, .open > .btn-secondary-outline.dropdown-toggle { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2 } .btn-secondary-outline:hover { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2 } .btn-secondary-outline.disabled.focus, .btn-secondary-outline.disabled:focus, .btn-secondary-outline:disabled.focus, .btn-secondary-outline:disabled:focus, fieldset[disabled] .btn-secondary-outline.focus, fieldset[disabled] .btn-secondary-outline:focus { border-color: #0f9ae0 } .btn-success-outline { color: #5eb95e; background-color: transparent; background-image: none; border-color: #5eb95e } .btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .open > .btn-success-outline.dropdown-toggle { color: #fff; background-color: #5eb95e; border-color: #5eb95e } .btn-success-outline:hover { color: #fff; background-color: #5eb95e; border-color: #5eb95e } .btn-success-outline.disabled.focus, .btn-success-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-success-outline:disabled:focus, fieldset[disabled] .btn-success-outline.focus, fieldset[disabled] .btn-success-outline:focus { border-color: #429842 } .btn-warning-outline { color: #f37b1d; background-color: transparent; background-image: none; border-color: #f37b1d } .btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .open > .btn-warning-outline.dropdown-toggle { color: #fff; background-color: #f37b1d; border-color: #f37b1d } .btn-warning-outline:hover { color: #fff; background-color: #f37b1d; border-color: #f37b1d } .btn-warning-outline.disabled.focus, .btn-warning-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-warning-outline:disabled:focus, fieldset[disabled] .btn-warning-outline.focus, fieldset[disabled] .btn-warning-outline:focus { border-color: #c85e0b } .btn-danger-outline { color: #dd514c; background-color: transparent; background-image: none; border-color: #dd514c } .btn-danger-outline.active, .btn-danger-outline.focus, .btn-danger-outline:active, .btn-danger-outline:focus, .open > .btn-danger-outline.dropdown-toggle { color: #fff; background-color: #dd514c; border-color: #dd514c } .btn-danger-outline:hover { color: #fff; background-color: #dd514c; border-color: #dd514c } .btn-danger-outline.disabled.focus, .btn-danger-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-danger-outline:disabled:focus, fieldset[disabled] .btn-danger-outline.focus, fieldset[disabled] .btn-danger-outline:focus { border-color: #c62b26 } .btn.disabled { cursor: not-allowed; background-image: none; opacity: .65; filter: alpha(opacity=65); box-shadow: none; pointer-events: none } .form-group { display: inline-block; vertical-align: middle } .form-group .input-text { position: relative; vertical-align: top } .form-group.radius { overflow: hidden } .form-group.radius .input-text { border-radius: 4px 0 0 4px } .form-group.round .input-text { border-radius: 1000px 0 0 1000px } .form-group .btn { position: relative; margin-left: -1px } .form-group.radius .btn { border-radius: 0 4px 4px 0 } .form-group.round .btn { border-radius: 0 1000px 1000px 0 } .img-responsive { display: inline-block; max-width: 100%; height: auto } .thumbnail { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } @media (max-width: 767px) { .img-responsive { width: 100% } } .duang-opacity img { -webkit-transition: opacity .1s linear; -moz-transition: opacity .1s linear; -o-transition: opacity .1s linear; transition: opacity .1s linear } .duang-opacity a:hover img, a:hover .opacity img { opacity: .85; filter: alpha(opacity=85) } .album-img { border: 1px solid #e0e0e0 } .album-img img { display: block; width: 100% } .album-title { display: block; text-align: left; padding: 7px 5px; line-height: 18px; color: #555; text-decoration: none; font-size: 12px; border: solid 1px #e0e0e0; border-top: 0 } .album-bg-Fir, .album-bg-Sec { border: 1px solid #e6e6e6; border-top: 1px solid #f5f5f5; height: 1px; margin: 0 auto; overflow: hidden } .album-bg-Fir { margin: 0 3px } .album-bg-Sec { margin: 0 6px } .avatar { display: inline-block; position: relative; overflow: hidden } .avatar img { display: block } .avatar.radius, .avatar.radius img { border-radius: 50% } .avatar, .avatar img { width: 32px; height: 32px } .avatar.size-MINI { width: 16px; height: 16px } .avatar.size-S, .avatar.size-S img { width: 24px; height: 24px } .avatar.size-M, .avatar.size-M img { width: 32px; height: 32px } .avatar.size-L, .avatar.size-L img { width: 48px; height: 48px } .avatar.size-XL, .avatar.size-XL img { width: 64px; height: 64px } .avatar.size-XXL, .avatar.size-XXL img { width: 100px; height: 100px } .avatar.size-XXXL, .avatar.size-XXXL img { width: 128px; height: 128px } .iconpic { display: inline-block; vertical-align: sub; *vertical-align: middle; _vertical-align: middle; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat } .hui-bounce, .hui-flip, .hui-flash, .hui-shake, .hui-swing, .hui-wobble, .hui-ring { -webkit-animation: 1s ease; -moz-animation: 1s ease; -ms-animation: 1s ease; animation: 1s ease } .hui-fadein, .hui-fadeinT, .hui-fadeinR, .hui-fadeinB, .hui-fadeinL, .hui-bouncein, .hui-bounceinT, .hui-bounceinR, .hui-bounceinB, .hui-bounceinL, .hui-rotatein, .hui-rotateinLT, .hui-rotateinLB, .hui-rotateinRT, .hui-rotateinRB, .hui-flipin, .hui-flipinX, .hui-flipinY { -webkit-animation: 1s ease-out backwards; -moz-animation: 1s ease-out backwards; -ms-animation: 1s ease-out backwards; animation: 1s ease-out backwards } .hui-fadeout, .hui-fadeoutT, .hui-fadeoutR, .hui-fadeoutB, .hui-fadeoutL, .hui-bounceout, .hui-bounceoutT, .hui-bounceoutR, .hui-bounceoutB, .hui-bounceoutL, .hui-rotateout, .hui-rotateoutLT, .hui-rotateoutLB, .hui-rotateoutRT, .hui-rotateoutRB, .hui-flipout, .hui-flipoutX, .hui-flipoutY { -webkit-animation: 1s ease-in forwards; -moz-animation: 1s ease-in forwards; -ms-animation: 1s ease-in forwards; animation: 1s ease-in forwards } .hui-fadein { -webkit-animation-name: fadein; -moz-animation-name: fadein; -ms-animation-name: fadein; animation-name: fadein } .hui-fadeinT { -webkit-animation-name: fadeinT; -moz-animation-name: fadeinT; -ms-animation-name: fadeinT; animation-name: fadeinT } .hui-fadeinR { -webkit-animation-name: fadeinR; -moz-animation-name: fadeinR; -ms-animation-name: fadeinR; animation-name: fadeinR } .hui-fadeinB { -webkit-animation-name: fadeinB; -moz-animation-name: fadeinB; -ms-animation-name: fadeinB; animation-name: fadeinB } .hui-fadeinL { -webkit-animation-name: fadeinL; -moz-animation-name: fadeinL; -ms-animation-name: fadeinL; animation-name: fadeinL } .hui-fadeout { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; -ms-animation-name: fadeout; animation-name: fadeout } .hui-fadeoutT { -webkit-animation-name: fadeoutT; -moz-animation-name: fadeoutT; -ms-animation-name: fadeoutT; animation-name: fadeoutT } .hui-fadeoutR { -webkit-animation-name: fadeoutR; -moz-animation-name: fadeoutR; -ms-animation-name: fadeoutR; animation-name: fadeoutR } .hui-fadeoutB { -webkit-animation-name: fadeoutB; -moz-animation-name: fadeoutB; -ms-animation-name: fadeoutB; animation-name: fadeoutB } .hui-fadeoutL { -webkit-animation-name: fadeoutL; -moz-animation-name: fadeoutL; -ms-animation-name: fadeoutL; animation-name: fadeoutL } .hui-bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; animation-name: bounce } .hui-bouncein { -webkit-animation-name: bouncein; -moz-animation-name: bouncein; -ms-animation-name: bouncein; animation-name: bouncein } .hui-bounceinT { -webkit-animation-name: bounceinT; -moz-animation-name: bounceinT; -ms-animation-name: bounceinT; animation-name: bounceinT } .hui-bounceinR { -webkit-animation-name: bounceinR; -moz-animation-name: bounceinR; -ms-animation-name: bounceinR; animation-name: bounceinR } .hui-bounceinB { -webkit-animation-name: bounceinB; -moz-animation-name: bounceinB; -ms-animation-name: bounceinB; animation-name: bounceinB } .hui-bounceinL { -webkit-animation-name: bounceinL; -moz-animation-name: bounceinL; -ms-animation-name: bounceinL; animation-name: bounceinL } .hui-bounceout { -webkit-animation-name: bounceout; -moz-animation-name: bounceout; -ms-animation-name: bounceout; animation-name: bounceout } .hui-bounceoutT { -webkit-animation-name: bounceoutT; -moz-animation-name: bounceoutT; -ms-animation-name: bounceoutT; animation-name: bounceoutT } .hui-bounceoutR { -webkit-animation-name: bounceoutR; -moz-animation-name: bounceoutR; -ms-animation-name: bounceoutR; animation-name: bounceoutR } .hui-bounceoutB { -webkit-animation-name: bounceoutB; -moz-animation-name: bounceoutB; -ms-animation-name: bounceoutB; animation-name: bounceoutB } .hui-bounceoutL { -webkit-animation-name: bounceoutL; -moz-animation-name: bounceoutL; -ms-animation-name: bounceoutL; animation-name: bounceoutL } .hui-rotatein { -webkit-animation-name: rotatein; -moz-animation-name: rotatein; -ms-animation-name: rotatein; animation-name: rotatein } .hui-rotateinLT { -webkit-animation-name: rotateinLT; -moz-animation-name: rotateinLT; -ms-animation-name: rotateinLT; animation-name: rotateinLT } .hui-rotateinLB { -webkit-animation-name: rotateinLB; -moz-animation-name: rotateinLB; -ms-animation-name: rotateinLB; animation-name: rotateinLB } .hui-rotateinRT { -webkit-animation-name: rotateinRT; -moz-animation-name: rotateinRT; -ms-animation-name: rotateinRT; animation-name: rotateinRT } .hui-rotateinRB { -webkit-animation-name: rotateinRB; -moz-animation-name: rotateinRB; -ms-animation-name: rotateinRB; animation-name: rotateinRB } .hui-rotateout { -webkit-animation-name: rotateout; -moz-animation-name: rotateout; -ms-animation-name: rotateout; animation-name: rotateout } .hui-rotateoutLT { -webkit-animation-name: rotateoutLT; -moz-animation-name: rotateoutLT; -ms-animation-name: rotateoutLT; animation-name: rotateoutLT } .hui-rotateoutLB { -webkit-animation-name: rotateoutLB; -moz-animation-name: rotateoutLB; -ms-animation-name: rotateoutLB; animation-name: rotateoutLB } .hui-rotateoutRT { -webkit-animation-name: rotateoutRT; -moz-animation-name: rotateoutRT; -ms-animation-name: rotateoutRT; animation-name: rotateoutRT } .hui-rotateoutRB { -webkit-animation-name: rotateoutRB; -moz-animation-name: rotateoutRB; -ms-animation-name: rotateoutRB; animation-name: rotateoutRB } .hui-flip { -webkit-animation-name: flip; -moz-animation-name: flip; -ms-animation-name: flip; animation-name: flip } .hui-flipinX { -webkit-animation-name: flipinX; -moz-animation-name: flipinX; -ms-animation-name: flipinX; animation-name: flipinX } .hui-flipin, .hui-flipinY { -webkit-animation-name: flipinY; -moz-animation-name: flipinY; -ms-animation-name: flipinY; animation-name: flipinY } .hui-flipoutX { -webkit-animation-name: flipoutX; -moz-animation-name: flipoutX; -ms-animation-name: flipoutX; animation-name: flipoutX } .hui-flipout, .hui-flipoutY { -webkit-animation-name: flipoutY; -moz-animation-name: flipoutY; -ms-animation-name: flipoutY; animation-name: flipoutY } .hui-flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash } .hui-shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; animation-name: shake } .hui-swing { -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; animation-name: swing } .hui-wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; animation-name: wobble } .hui-ring { -webkit-animation-name: ring; -moz-animation-name: ring; -ms-animation-name: ring; animation-name: ring } @-webkit-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fadeinT { 0% { opacity: 0; -webkit-transform: translateY(-100px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeinT { 0% { opacity: 0; -moz-transform: translateY(-100px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeinT { 0% { opacity: 0; -ms-transform: translateY(-100px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @keyframes fadeinT { 0% { opacity: 0; transform: translateY(-100px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes fadeinR { 0% { opacity: 0; -webkit-transform: translateX(100px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeinR { 0% { opacity: 0; -moz-transform: translateX(100px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeinR { 0% { opacity: 0; -ms-transform: translateX(100px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @keyframes fadeinR { 0% { opacity: 0; transform: translateX(100px) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeinB { 0% { opacity: 0; -webkit-transform: translateY(100px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeinB { 0% { opacity: 0; -moz-transform: translateY(100px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeinB { 0% { opacity: 0; -ms-transform: translateY(100px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @keyframes fadeinB { 0% { opacity: 0; transform: translateY(100px) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes fadeinL { 0% { opacity: 0; -webkit-transform: translateX(-100px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeinL { 0% { opacity: 0; -moz-transform: translateX(-100px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeinL { 0% { opacity: 0; -ms-transform: translateX(-100px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @keyframes fadeinL { 0% { opacity: 0; transform: translateX(-100px) } 100% { opacity: 1; transform: translateX(0) } } @-webkit-keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes fadeoutT { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-100px) } } @-moz-keyframes fadeoutT { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-100px) } } @-ms-keyframes fadeoutT { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(-100px) } } @keyframes fadeoutT { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-100px) } } @-webkit-keyframes fadeoutR { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(100px) } } @-moz-keyframes fadeoutR { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(100px) } } @-ms-keyframes fadeoutR { 0% { opacity: 1; -ms-transform: translateX(0) } 100% { opacity: 0; -ms-transform: translateX(100px) } } @keyframes fadeoutR { 0% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(100px) } } @-webkit-keyframes fadeoutB { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(100px) } } @-moz-keyframes fadeoutB { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(100px) } } @-ms-keyframes fadeoutB { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(100px) } } @keyframes fadeoutB { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(100px) } } @-webkit-keyframes fadeoutL { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-100px) } } @-moz-keyframes fadeoutL { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-100px) } } @-ms-keyframes fadeoutL { 0% { opacity: 1; -ms-transform: translateX(0) } 100% { opacity: 0; -ms-transform: translateX(-100px) } } @keyframes fadeoutL { 0% { opacity: 1; transform: translateX(0) } 100% { opacity: 0; transform: translateX(-100px) } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px) } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-30px) } 60% { -moz-transform: translateY(-15px) } } @-ms-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -ms-transform: translateY(0) } 40% { -ms-transform: translateY(-30px) } 60% { -ms-transform: translateY(-15px) } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) } 40% { transform: translateY(-30px) } 60% { transform: translateY(-15px) } } @-webkit-keyframes bouncein { 0% { opacity: 0; -webkit-transform: scale(0.3) } 50% { opacity: 1; -webkit-transform: scale(1.05) } 70% { -webkit-transform: scale(0.9) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes bouncein { 0% { opacity: 0; -moz-transform: scale(0.3) } 50% { opacity: 1; -moz-transform: scale(1.05) } 70% { -moz-transform: scale(0.9) } 100% { -moz-transform: scale(1) } } @-ms-keyframes bouncein { 0% { opacity: 0; -ms-transform: scale(0.3) } 50% { opacity: 1; -ms-transform: scale(1.05) } 70% { -ms-transform: scale(0.9) } 100% { -ms-transform: scale(1) } } @keyframes bouncein { 0% { opacity: 0; transform: scale(0.3) } 50% { opacity: 1; transform: scale(1.05) } 70% { transform: scale(0.9) } 100% { transform: scale(1) } } @-webkit-keyframes bounceinT { 0% { opacity: 0; -webkit-transform: translateY(-100px) } 60% { opacity: 1; -webkit-transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceinT { 0% { opacity: 0; -moz-transform: translateY(-100px) } 60% { opacity: 1; -moz-transform: translateY(30px) } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY(0) } } @-ms-keyframes bounceinT { 0% { opacity: 0; -ms-transform: translateY(-100px) } 60% { opacity: 1; -ms-transform: translateY(30px) } 80% { -ms-transform: translateY(-10px) } 100% { -ms-transform: translateY(0) } } @keyframes bounceinT { 0% { opacity: 0; transform: translateY(-100px) } 60% { opacity: 1; transform: translateY(30px) } 80% { transform: translateY(-10px) } 100% { transform: translateY(0) } } @-webkit-keyframes bounceinR { 0% { opacity: 0; -webkit-transform: translateX(100px) } 60% { opacity: 1; -webkit-transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceinR { 0% { opacity: 0; -moz-transform: translateX(100px) } 60% { opacity: 1; -moz-transform: translateX(-30px) } 80% { -moz-transform: translateX(10px) } 100% { -moz-transform: translateX(0) } } @-ms-keyframes bounceinR { 0% { opacity: 0; -ms-transform: translateX(100px) } 60% { opacity: 1; -ms-transform: translateX(-30px) } 80% { -ms-transform: translateX(10px) } 100% { -ms-transform: translateX(0) } } @keyframes bounceinR { 0% { opacity: 0; transform: translateX(100px) } 60% { opacity: 1; transform: translateX(-30px) } 80% { transform: translateX(10px) } 100% { transform: translateX(0) } } @-webkit-keyframes bounceinB { 0% { opacity: 0; -webkit-transform: translateY(100px) } 60% { opacity: 1; -webkit-transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceinB { 0% { opacity: 0; -moz-transform: translateY(100px) } 60% { opacity: 1; -moz-transform: translateY(-30px) } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY(0) } } @-ms-keyframes bounceinB { 0% { opacity: 0; -ms-transform: translateY(100px) } 60% { opacity: 1; -ms-transform: translateY(-30px) } 80% { -ms-transform: translateY(10px) } 100% { -ms-transform: translateY(0) } } @keyframes bounceinB { 0% { opacity: 0; transform: translateY(100px) } 60% { opacity: 1; transform: translateY(-30px) } 80% { transform: translateY(10px) } 100% { transform: translateY(0) } } @-webkit-keyframes bounceinL { 0% { opacity: 0; -webkit-transform: translateX(-100px) } 60% { opacity: 1; -webkit-transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceinL { 0% { opacity: 0; -moz-transform: translateX(-100px) } 60% { opacity: 1; -moz-transform: translateX(30px) } 80% { -moz-transform: translateX(-10px) } 100% { -moz-transform: translateX(0) } } @-ms-keyframes bounceinL { 0% { opacity: 0; -ms-transform: translateX(-100px) } 60% { opacity: 1; -ms-transform: translateX(30px) } 80% { -ms-transform: translateX(-10px) } 100% { -ms-transform: translateX(0) } } @keyframes bounceinL { 0% { opacity: 0; transform: translateX(-100px) } 60% { opacity: 1; transform: translateX(30px) } 80% { transform: translateX(-10px) } 100% { transform: translateX(0) } } @-webkit-keyframes bounceout { 0% { -webkit-transform: scale(1) } 25% { -webkit-transform: scale(0.95) } 50% { opacity: 1; -webkit-transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(0.3) } } @-moz-keyframes bounceout { 0% { -moz-transform: scale(1) } 25% { -moz-transform: scale(0.95) } 50% { opacity: 1; -moz-transform: scale(1.1) } 100% { opacity: 0; -moz-transform: scale(0.3) } } @-ms-keyframes bounceout { 0% { -ms-transform: scale(1) } 25% { -ms-transform: scale(0.95) } 50% { opacity: 1; -ms-transform: scale(1.1) } 100% { opacity: 0; -ms-transform: scale(0.3) } } @keyframes bounceout { 0% { transform: scale(1) } 25% { transform: scale(0.95) } 50% { opacity: 1; transform: scale(1.1) } 100% { opacity: 0; transform: scale(0.3) } } @-webkit-keyframes bounceoutT { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-100px) } } @-moz-keyframes bounceoutT { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(20px) } 100% { opacity: 0; -moz-transform: translateY(-100px) } } @-ms-keyframes bounceoutT { 0% { -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(20px) } 100% { opacity: 0; -ms-transform: translateY(-100px) } } @keyframes bounceoutT { 0% { transform: translateY(0) } 20% { opacity: 1; transform: translateY(20px) } 100% { opacity: 0; transform: translateY(-100px) } } @-webkit-keyframes bounceoutR { 0% { -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-20px) } 100% { opacity: 0; -webkit-transform: translateX(100px) } } @-moz-keyframes bounceoutR { 0% { -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(-20px) } 100% { opacity: 0; -moz-transform: translateX(100px) } } @-ms-keyframes bounceoutR { 0% { -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(-20px) } 100% { opacity: 0; -ms-transform: translateX(100px) } } @keyframes bounceoutR { 0% { transform: translateX(0) } 20% { opacity: 1; transform: translateX(-20px) } 100% { opacity: 0; transform: translateX(100px) } } @-webkit-keyframes bounceoutB { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(100px) } } @-moz-keyframes bounceoutB { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(-20px) } 100% { opacity: 0; -moz-transform: translateY(100px) } } @-ms-keyframes bounceoutB { 0% { -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(-20px) } 100% { opacity: 0; -ms-transform: translateY(100px) } } @keyframes bounceoutB { 0% { transform: translateY(0) } 20% { opacity: 1; transform: translateY(-20px) } 100% { opacity: 0; transform: translateY(100px) } } @-webkit-keyframes bounceoutL { 0% { -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(20px) } 100% { opacity: 0; -webkit-transform: translateX(-100px) } } @-moz-keyframes bounceoutL { 0% { -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(20px) } 100% { opacity: 0; -moz-transform: translateX(-100px) } } @-ms-keyframes bounceoutL { 0% { -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(20px) } 100% { opacity: 0; -ms-transform: translateX(-100px) } } @keyframes bounceoutL { 0% { transform: translateX(0) } 20% { opacity: 1; transform: translateX(20px) } 100% { opacity: 0; transform: translateX(-200px) } } @-webkit-keyframes rotatein { 0% { opacity: 0; -webkit-transform: rotate(-200deg) } 100% { opacity: 1; -webkit-transform: rotate(0) } } @-moz-keyframes rotatein { 0% { opacity: 0; -moz-transform: rotate(-200deg) } 100% { opacity: 1; -moz-transform: rotate(0) } } @-ms-keyframes rotatein { 0% { opacity: 0; -ms-transform: rotate(-200deg) } 100% { opacity: 1; -ms-transform: rotate(0) } } @keyframes rotatein { 0% { opacity: 0; transform: rotate(-200deg) } 100% { opacity: 1; transform: rotate(0) } } @-webkit-keyframes rotateinLT { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateinLT { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes rotateinLT { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0 } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1 } } @keyframes rotateinLT { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0 } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1 } } @-webkit-keyframes rotateineftB { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateineftB { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes rotateineftB { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0 } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1 } } @keyframes rotateineftB { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0 } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1 } } @-webkit-keyframes rotateinRT { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateinRT { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes rotateinRT { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0 } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1 } } @keyframes rotateinRT { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0 } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1 } } @-webkit-keyframes rotateinRB { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateinRB { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes rotateinRB { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0 } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1 } } @keyframes rotateinRB { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0 } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1 } } @-webkit-keyframes rotateout { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0 } } @-moz-keyframes rotateout { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0 } } @-ms-keyframes rotateout { 0% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1 } 100% { -ms-transform-origin: center center; -ms-transform: rotate(200deg); opacity: 0 } } @keyframes rotateout { 0% { transform-origin: center center; transform: rotate(0); opacity: 1 } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0 } } @-webkit-keyframes rotateoutLT { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateoutLT { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } } @-ms-keyframes rotateoutLT { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1 } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0 } } @keyframes rotateoutLT { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1 } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0 } } @-webkit-keyframes rotateoutLB { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0 } } @-moz-keyframes rotateoutLB { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0 } } @-ms-keyframes rotateoutLB { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1 } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0 } } @keyframes rotateoutLB { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1 } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0 } } @-webkit-keyframes rotateoutRT { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0 } } @-moz-keyframes rotateoutRT { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0 } } @-ms-keyframes rotateoutRT { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1 } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0 } } @keyframes rotateoutRT { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1 } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0 } } @-webkit-keyframes rotateoutBR { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateoutBR { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } } @-ms-keyframes rotateoutBR { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1 } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0 } } @keyframes rotateoutBR { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1 } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0 } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in } } @-ms-keyframes flip { 0% { -ms-transform: perspective(400px) rotateY(0); -ms-animation-timing-function: ease-out } 40% { -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-animation-timing-function: ease-out } 50% { -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-animation-timing-function: ease-in } 80% { -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-animation-timing-function: ease-in } 100% { -ms-transform: perspective(400px) scale(1); -ms-animation-timing-function: ease-in } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in } } @-webkit-keyframes flipinX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-10deg) } 70% { -webkit-transform: perspective(400px) rotateX(10deg) } 100% { -webkit-transform: perspective(400px) rotateX(0); opacity: 1 } } @-moz-keyframes flipinX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateX(-10deg) } 70% { -moz-transform: perspective(400px) rotateX(10deg) } 100% { -moz-transform: perspective(400px) rotateX(0); opacity: 1 } } @-ms-keyframes flipinX { 0% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -ms-transform: perspective(400px) rotateX(-10deg) } 70% { -ms-transform: perspective(400px) rotateX(10deg) } 100% { -ms-transform: perspective(400px) rotateX(0); opacity: 1 } } @keyframes flipinX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { transform: perspective(400px) rotateX(-10deg) } 70% { transform: perspective(400px) rotateX(10deg) } 100% { transform: perspective(400px) rotateX(0); opacity: 1 } } @-webkit-keyframes flipinY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-10deg) } 70% { -webkit-transform: perspective(400px) rotateY(10deg) } 100% { -webkit-transform: perspective(400px) rotateY(0); opacity: 1 } } @-moz-keyframes flipinY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateY(-10deg) } 70% { -moz-transform: perspective(400px) rotateY(10deg) } 100% { -moz-transform: perspective(400px) rotateY(0); opacity: 1 } } @-ms-keyframes flipinY { 0% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -ms-transform: perspective(400px) rotateY(-10deg) } 70% { -ms-transform: perspective(400px) rotateY(10deg) } 100% { -ms-transform: perspective(400px) rotateY(0); opacity: 1 } } @keyframes flipinY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { transform: perspective(400px) rotateY(-10deg) } 70% { transform: perspective(400px) rotateY(10deg) } 100% { transform: perspective(400px) rotateY(0); opacity: 1 } } @-webkit-keyframes flipoutX { 0% { -webkit-transform: perspective(400px) rotateX(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-moz-keyframes flipoutX { 0% { -moz-transform: perspective(400px) rotateX(0); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-ms-keyframes flipoutX { 0% { -ms-transform: perspective(400px) rotateX(0); opacity: 1 } 100% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipoutX { 0% { transform: perspective(400px) rotateX(0); opacity: 1 } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-webkit-keyframes flipoutY { 0% { -webkit-transform: perspective(400px) rotateY(0); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-moz-keyframes flipoutY { 0% { -moz-transform: perspective(400px) rotateY(0); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-ms-keyframes flipoutY { 0% { -ms-transform: perspective(400px) rotateY(0); opacity: 1 } 100% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipoutY { 0% { transform: perspective(400px) rotateY(0); opacity: 1 } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } @-ms-keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px) } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px) } } @-ms-keyframes shake { 0%, 100% { -ms-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px) } } @keyframes shake { 0%, 100% { transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(10px) } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0) } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0) } } @-ms-keyframes swing { 20% { -ms-transform: rotate(15deg) } 40% { -ms-transform: rotate(-10deg) } 60% { -ms-transform: rotate(5deg) } 80% { -ms-transform: rotate(-5deg) } 100% { -ms-transform: rotate(0) } } @keyframes swing { 20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } 100% { transform: rotate(0) } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0) } 15% { -webkit-transform: translateX(-100px) rotate(-5deg) } 30% { -webkit-transform: translateX(80px) rotate(3deg) } 45% { -webkit-transform: translateX(-65px) rotate(-3deg) } 60% { -webkit-transform: translateX(40px) rotate(2deg) } 75% { -webkit-transform: translateX(-20px) rotate(-1deg) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0) } 15% { -moz-transform: translateX(-100px) rotate(-5deg) } 30% { -moz-transform: translateX(80px) rotate(3deg) } 45% { -moz-transform: translateX(-65px) rotate(-3deg) } 60% { -moz-transform: translateX(40px) rotate(2deg) } 75% { -moz-transform: translateX(-20px) rotate(-1deg) } 100% { -moz-transform: translateX(0) } } @-ms-keyframes wobble { 0% { -ms-transform: translateX(0) } 15% { -ms-transform: translateX(-100px) rotate(-5deg) } 30% { -ms-transform: translateX(80px) rotate(3deg) } 45% { -ms-transform: translateX(-65px) rotate(-3deg) } 60% { -ms-transform: translateX(40px) rotate(2deg) } 75% { -ms-transform: translateX(-20px) rotate(-1deg) } 100% { -ms-transform: translateX(0) } } @keyframes wobble { 0% { transform: translateX(0) } 15% { transform: translateX(-100px) rotate(-5deg) } 30% { transform: translateX(80px) rotate(3deg) } 45% { transform: translateX(-65px) rotate(-3deg) } 60% { transform: translateX(40px) rotate(2deg) } 75% { transform: translateX(-20px) rotate(-1deg) } 100% { transform: translateX(0) } } @-webkit-keyframes ring { 0% { -webkit-transform: scale(1) } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0) } } @-moz-keyframes ring { 0% { -moz-transform: scale(1) } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg) } 100% { -moz-transform: scale(1) rotate(0) } } @-ms-keyframes ring { 0% { -ms-transform: scale(1) } 10%, 20% { -ms-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -ms-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -ms-transform: scale(1.1) rotate(-3deg) } 100% { -ms-transform: scale(1) rotate(0) } } @keyframes ring { 0% { transform: scale(1) } 10%, 20% { transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0) } } .btn-group { font-size: 0 } .btn-group .btn { margin-left: -1px } .btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0 } .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0; border-top-right-radius: 0 } .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0 } .navbar-wrapper { height: 45px } .navbar { position: relative; z-index: 1030; background-color: #fff } .navbar-black { background-color: #222 } .navbar-fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1030 } .logo { display: inline-block; text-decoration: none; cursor: pointer; background-repeat: no-repeat; background-position: left center; background-size: auto 100% } a.logo:hover { text-decoration: none } .navbar .logo { height: 44px; line-height: 44px; margin-right: 10px; float: left } .navbar-logo, .navbar-logo-m { font-size: 16px } .navbar-slogan { font-size: 12px; cursor: default } .navbar .container { position: relative } .navbar .container .navbar-userbar { right: 0 } .nav { z-index: 1 } .nav > ul { font-size: 0; line-height: 0 } .nav > ul > li { position: relative; float: left } .nav > ul > li, .nav > ul > li > a { display: inline-block; text-align: center } .nav > ul > li > a { padding: 0 20px } .nav > ul > li > a:hover, .nav > ul > li.current > a { background-color: rgba(255, 255, 255, 0.2); text-decoration: none; -webkit-transition: background-color .3s ease 0s; -moz-transition: background-color .3s ease 0s; -o-transition: background-color .3s ease 0s; -ms-transition: background-color .3s ease 0s; transition: background-color .3s ease 0s } .navbar-nav > ul > li, .navbar-nav > ul > li > a { line-height: 44px; font-size: 14px } @media (max-width: 767px) { .navbar-wrapper { height: 45px !important } .logo { margin-right: 0 } .navbar .logo { height: 44px !important; line-height: 44px !important } .navbar-nav { display: none; float: none !important } .navbar-nav > ul > li { width: 100%; text-align: left; border-bottom: solid 1px #eee } .navbar-nav > ul > li > a { display: block; padding: 0 15px; text-align: left } .navbar-nav > ul > li.dropDown.open > .dropDown-menu { display: none } .navbar-nav > ul > li.dropDown > .dropDown_A > .Hui-iconfont { display: none } .navbar-nav > ul > li, .navbar-nav > ul > li > a { height: 44px !important; line-height: 44px !important } .nav-collapse > ul, .nav-collapse > ul > li { width: 100%; display: block } .js .nav-collapse { position: absolute; display: block; float: none; clear: both; max-height: 0; clip: rect(0 0 0 0); margin-left: -15px; margin-right: -15px; overflow: hidden; -webkt-transition: max-height 284ms ease 0s; -moz-transition: max-height 284ms ease 0s; -o-transition: max-height 284ms ease 0s; -ms-transition: max-height 284ms ease 0s; transition: max-height 284ms ease 0s } .js-nav-active .nav-collapse.closed { max-height: none } .nav-collapse.opened { max-height: 9999px } } .navbar-black { background-color: #222; border-bottom: #080808 1px solid; -moz-box-shadow: 0 0 4px #333; -webkit-box-shadow: 0 0 4px #333; box-shadow: 0 0 4px #333 } .navbar-black .logo { color: #fff } .navbar-black .navbar-logo-m { color: #eee } .navbar-black .navbar-nav > ul > li, .navbar-black .navbar-nav > ul > li > a { color: #fff } .navbar-black .navbar-nav > ul > li > a:hover, .navbar-black .navbar-nav > ul > li.current > a { color: #fff } .navbar-black .navbar-userbar { color: #fff } @media (max-width: 767px) { .navbar-black .navbar-nav > ul > li { border-bottom: solid 1px #222 } .navbar-black .navbar-nav > ul > li > a:hover, .navbar-black .navbar-nav > ul > li.current > a { background: #777 } } .nav-toggle, a.nav-toggle { position: absolute; top: 0; right: 15px; font-size: 20px; color: #999; padding: 6px 11px; background-color: rgba(0, 0, 0, 0.5); color: #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none } .nav-toggle:hover, a.nav-toggle:hover { text-decoration: none; color: #fff } .mainnav { z-index: 1; background-color: #222 } .mainnav > ul { font-size: 0; line-height: 0 } .mainnav > ul > li, .mainnav > ul > li > a { height: 40px; line-height: 40px } .mainnav > ul > li { display: inline-block; color: #fff; font-size: 14px; font-weight: bold } .mainnav > ul > li > a { display: inline-block; padding: 0 20px; color: #fff; text-align: center } .mainnav > ul > li > a:hover, .mainnav > ul > li.current > a { color: #fff; text-decoration: none; background-color: #000; -webkit-transition: background-color .3s ease 0s; -moz-transition: background-color .3s ease 0s; -o-transition: background-color .3s ease 0s; -ms-transition: background-color .3s ease 0s; transition: background-color .3s ease 0s } .Hui-nav-toggle, a.Hui-nav-toggle { position: absolute; top: 0; right: 15px; font-size: 20px; color: #999; padding: 6px 11px; background-color: rgba(0, 0, 0, 0.5); color: #fff } .Hui-nav-toggle:hover, a.Hui-nav-toggle:hover { text-decoration: none; color: #fff } @media (max-width: 767px) { .mainnav > ul > li { font-size: 1.125em } } @media (max-width: 480px) { .mainnav > ul > li { text-align: center } .mainnav > ul > li { width: 20% } .mainnav > ul > li > a { padding: 0; padding: 0; display: block } } .breadcrumb { border-bottom: 1px solid #e5e5e5; line-height: 39px; height: 39px; overflow: hidden } .breadcrumb span { padding: 0 5px } @media (max-width: 767px) { .breadcrumb > .container { padding: 0 } } .pageNav { float: none; clear: both; font-size: 0; font-family: Arial, Helvetica, sans-serif; padding: 18px 0; text-align: center } .pageNav span, .pageNav a, .pageNav b { font-size: 14px; margin-right: 5px; overflow: hidden; padding: 3px 8px } .pageNav a { border: 1px solid #ccdbe4; cursor: pointer } .pageNav b { color: #000 } .pageNav .mor { padding: 3px; font-weight: bold } .topnav { height: 30px; line-height: 30px; background-color; #f7f7f7; border-bottom: 1px solid #ebebeb; font-size: 12px } .topbar { background-color: #ececec; border-bottom: 1px solid #ddd } .topbar a { margin-right: 5px } .r_nav { display: inline-block; color: #999 } .steps, .step { display: inline-block; position: relative; padding: 1em 2em 1em 3em; vertical-align: top; background-color: #FFF; color: #888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .step:after, .steps .step:after { position: absolute; z-index: 2; content: ''; top: 0; right: -1.45em; border-bottom: 1.5em solid transparent; border-left: 1.5em solid #FFF; border-top: 1.5em solid transparent; width: 0; height: 0 } .step, .steps .step, .steps .step:after { -webkit-transition: opacity .1s ease, color .1s ease, -webkit-box-shadow .1s ease; transition: opacity .1s ease, color .1s ease, box-shadow .1s ease } .steps { cursor: pointer; display: inline-block; font-size: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); border-radius: .3125rem; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .steps .step:first-child { padding-left: 1.35em; border-radius: .3125em 0 0 .3125em } .steps .step:last-child { border-radius: 0 .3125em .3125em 0 } .steps .step:only-child { border-radius: .3125em } .steps .step:last-child { margin-right: 0 } .steps .step:last-child:after { display: none } .step:hover, .step.hover { background-color: #f7f7f7; color: rgba(0, 0, 0, .8) } .steps .step.hover:after, .steps .step:hover:after, .step:hover, .step.hover::after { border-left-color: #f7f7f7 } .steps .step.down, .steps .step:active, .step.down, .step:active { background-color: #f0f0f0 } .steps .step.down:after, .steps .step:active:after, .steps.down::after, .steps:active::after { border-left-color: #f0f0f0 } .steps .step.active, .active.step { cursor: auto; background-color: #428bca; color: #FFF; font-weight: 700 } .steps .step.active:after, .active.steps:after { border-left-color: #428bca } .steps .disabled.step, .disabled.step { cursor: auto; background-color: #FFF; color: #cbcbcb } .disabled.step:after { border: 0; background-color: #FFF; top: .42em; right: -1em; width: 2.15em; height: 2.15em; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: -1px -1px 0 0 rgba(0, 0, 0, .1) inset } .attached.steps { margin: 0; border-radius: .3125em .3125em 0 0 } .attached.steps .step:first-child { border-radius: .3125em 0 0 } .attached.steps .step:last-child { border-radius: 0 .3125em 0 0 } .bottom.attached.steps { margin-top: -1px; border-radius: 0 0 .3125em .3125em } .bottom.attached.steps .step:first-child { border-radius: 0 0 0 .3125em } .bottom.attached.steps .step:last-child { border-radius: 0 0 .3125em } .one.steps, .two.steps, .three.steps, .four.steps, .five.steps, .six.steps, .seven.steps, .eight.steps { display: block } .one.steps > .step { width: 100% } .two.steps > .step { width: 50% } .three.steps > .step { width: 33.333% } .four.steps > .step { width: 25% } .five.steps > .step { width: 20% } .six.steps > .step { width: 16.666% } .seven.steps > .step { width: 14.285% } .eight.steps > .step { width: 12.5% } .small.step, .small.steps .step { font-size: .8rem } .step, .steps .step { font-size: 1rem } .large.step, .large.steps .step { font-size: 1.25rem } .steps-ie, .step-ie, .step-ie .arrow { height: 44px; line-height: 44px } .steps-ie { background-color: #eaf4fd; border: solid 1px #afcfcc } .step-ie { position: relative; display: inline-block; float: left; cursor: pointer; padding: 0 20px 0 40px; background: url(../static/h-ui/images/steps/step_bg.png) repeat-x 0 center } .step-ie .arrow { position: absolute; right: -21px; top: 0; width: 21px; height: 44px; display: block; cursor: pointer; background: url(../static/h-ui/images/steps/step_arrow.png) no-repeat 0 center; z-index: 50 } .step-ie.active { background-image: url(../static/h-ui/images/steps/step_bg-active.png); color: #fff; z-index: 100 } .step-ie.active .arrow { background-image: url(../static/h-ui/images/steps/step_arrow-active.png) } .verticalTab { background: #fff url(../static/h-ui/images/verticalTab/tab_bg.png) repeat-y 0 0; width: 38px } .verticalTab a { position: relative; display: block; width: 18px; height: auto; text-align: center; position: relative; padding: 26px 10px 6px 10px; background: url(../static/h-ui/images/verticalTab/tabNav.png) no-repeat 0 0 } .verticalTab a em { position: absolute; left: 0; bottom: -20px; width: 38px; height: 20px; background: url(../images/tabNav_right.png) no-repeat 0 0; z-index: 50 } .verticalTab a.active { background-image: url(../static/h-ui/images/verticalTab/tabNav-active.png); color: #fff; z-index: 99 } .verticalTab a.active em { background-image: url(../static/h-ui/images/verticalTab/tabNav_right-active.png) } .acrossTab, .acrossTab li, .acrossTab li em { background-image: url(../static/h-ui/images/acrossTab/acrossTab-bg.png) } .acrossTab { height: 29px; background-repeat: repeat-x; background-position: 0 0; padding-top: 1px } .acrossTab li, .acrossTab li em { background-repeat: no-repeat; background-position: 0 0 } .acrossTab li { position: relative; float: left; display: inline-block; height: 29px; line-height: 29px; font-size: 12px; cursor: pointer; padding: 0 30px; white-space: nowrap; color: #282828; background-position: 0 0 } .acrossTab li em { position: absolute; width: 23px; height: 29px; right: -20px; top: 0; z-index: 50; background-position: right -30px } .acrossTab li:hover { background-position: 0 -60px } .acrossTab li:hover em { background-position: right -90px } .acrossTab li.active { background-position: 0 -120px; z-index: 99 } .acrossTab li.active em { background-position: right -150px } .acrossTab li i { position: absolute; display: block; width: 13px; height: 13px; top: 50%; margin-top: -6px; right: 5px; font-size: 0; line-height: 0; cursor: pointer; background-image: url(../static/h-ui/images/acrossTab/acrossTab-close.png); background-repeat: no-repeat; background-position: 0 0 } .acrossTab li i:hover { background-position: 0 bottom } .dropDown { display: inline-block } .dropDown_A { display: inline-block } .dropDown-menu { display: none; transition: all .3s ease 0s } .dropDown:focus, .dropDown-menu:focus { outline: 0 } .dropDown-menu li.arrow { position: absolute; display: block; width: 12px; height: 8px; margin-top: -13px; margin-left: 20%; line-height: 0; background: url(../static/h-ui/images/dropDown/icon-jt.png) no-repeat 0 0 } .dropDown.hover .dropDown_A, .dropDown.open .dropDown_A { text-decoration: none; background-color: rgba(255, 255, 255, 0.2) } .dropDown.open .dropDown_A .menu_dropdown-arrow { transition-duration: .3s; transition-property: all; _background-position: 0 0; transform: rotate(180deg) } .menu { background-color: #fff; border: solid 1px #f2f2f2; display: inline-block } .menu.radius { border-top-left-radius: 0; border-top-right-radius: 0 } .menu.box-shadow { border-top: 0 } .menu > li { position: relative; clear: both; *float: left } .menu > li > a { display: block; border-bottom: solid 1px #f2f2f2; padding: 5px 20px; line-height: 1.8; text-align: left; font-weight: normal; white-space: nowrap; vertical-align: top } .menu > li:last-child > a { border-bottom: 0 } .menu > li > a:hover, .menu > li > a:focus, .menu > li.open > a { text-decoration: none; background-color: #fafafa } .menu > li > a .arrow { position: absolute; top: 50%; margin-top: -10px; right: 5px; line-height: 20px; height: 20px; color: #999 } .menu > li > .menu { display: none } .menu > li.open > .menu { display: inline-block; position: absolute; left: 100%; top: -1px; min-width: 100% } .menu > li.disabled > a { color: #999; text-decoration: none; cursor: no-drop; background-color: transparent } .menu > li.divider { display: block; height: 0; line-height: 0; margin: 9px 0; overflow: hidden; border-top: solid 1px #eee } .dropDown > .dropDown-menu { display: none } .dropDown.open { position: relative; z-index: 990 } .dropDown.open > .dropDown-menu { position: absolute; z-index: 1000; display: inline-block; top: 100%; left: -1px; min-width: 100%; background-color: #fff; border: solid 1px #f2f2f2 } .dropDown.open.right > .dropDown-menu { right: -1px !important; left: auto !important } .slider { position: relative; text-align: center; margin: 0 auto; z-index: 1 } .slider .bd, .slider .bd li, .slider .bd img { width: 100%; height: 100% } .slider .bd { z-index: 2; overflow: hidden } .slider .bd li { float: left; width: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat } .slider .bd li a { display: block; width: 100%; height: 100% } .slider .bd li img { display: block } .slider .hd { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; padding: 0 10px; text-align: center } .slider .hd li { display: inline-block; text-align: center; margin-right: 10px; cursor: pointer; background-color: #c2c2c2 } .slider .hd li.active { background-color: #222 } .dots li { width: 10px; height: 10px; font-size: 0; line-height: 0; border-radius: 50% } .numbox li { width: 20px; height: 20px; line-height: 20px; font-size: 13px; font-family: Arial; font-weight: bold; text-indent: inherit } .numbox li.active { color: #fff } .rectangle li { width: 40px; height: 10px; font-size: 0; line-height: 0 } .slider-arrow { display: block; position: absolute; top: 50%; margin-top: -25px; height: 50px; width: 50px; line-height: 50px; text-align: center; z-index: 3; opacity: .7; filter: alpha(opacity=70) } .slider-arrow:hover { opacity: 1; filter: alpha(opacity=100) } .slider-arrow.prev { left: 0 } .slider-arrow.next { right: 0 } .tabBar { border-bottom: 2px solid #222 } .tabBar span { background-color: #e8e8e8; cursor: pointer; display: inline-block; float: left; font-weight: bold; height: 30px; line-height: 30px; padding: 0 15px } .tabBar span.current { background-color: #222; color: #fff } .tabCon { display: none } .label, .badge { display: inline-block; padding: 2px 4px; font-size: 11.844px; font-weight: bold; line-height: 14px; color: #fff; white-space: nowrap; vertical-align: middle; background-color: #999; overflow: hidden } .label.radius { border-radius: 3px } .badge { padding-right: 9px; padding-left: 9px; border-radius: 9px } .label:empty, .badge:empty { display: none } a.label:hover, a.label:focus, a.badge:hover, a.badge:focus { color: #fff; text-decoration: none; cursor: pointer } .label-default, .badge-default { background-color: #e6e6e6; color: #333 } .label-default[href], .badge-default[href] { background-color: #e6e6e6; color: #333 } .label-primary, .badge-primary { background-color: #5a98de } .label-primary[href], .badge-primary[href] { background-color: #5a98de } .label-secondary, .badge-secondary { background-color: #3bb4f2 } .label-secondary[href], .badge-secondary[href] { background-color: #3bb4f2 } .label-success, .badge-success { background-color: #5eb95e } .label-success[href], .badge-success[href] { background-color: #5eb95e } .label-warning, .badge-warning { background-color: #f37b1d } .label-warning[href], .badge-warning[href] { background-color: #f37b1d } .label-danger, .badge-danger { background-color: #dd514c } .label-danger[href], .badge-danger[href] { background-color: #dd514c } .Huialert { position: relative; padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5 } .Huialert, .Huialert h4 { color: #c09853 } .Huialert h4 { margin: 0 } .Huialert .Hui-iconfont { position: absolute; top: 9px; right: 10px; line-height: 20px; cursor: pointer; color: #000; opacity: .2; _color: #666 } .Huialert .Hui-iconfont.hover { color: #000; opacity: .8 } .Huialert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6 } .Huialert-success h4 { color: #468847 } .Huialert-danger { color: #b94a48; background-color: #f2dede; border-color: #eed3d7 } .Huialert-danger h4 { color: #b94a48 } .Huialert-error { color: #fff; background-color: #f37b1d; border-color: #e56c0c } .Huialert-error h4 { color: #fff } .Huialert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1 } .Huialert-info h4 { color: #31708f } .Huialert-block { padding-top: 14px; padding-bottom: 14px } .Huialert-block > p, .Huialert-block > ul { margin-bottom: 0 } .Huialert-block p + p { margin-top: 5px } .progress, .progress-bar, .sr-only { height: 10px; font-size: 0; line-height: 0 } .progress { overflow: hidden; width: 400px } .progress-bar { width: 100%; background-color: #efefef } .sr-only { display: inline-block; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease } .progress-bar-success .sr-only { background-color: #5cb85c } .progress-bar-warning .sr-only { background-color: #f0ad4e } .progress-bar-danger .sr-only { background-color: #d9534f } .fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear } .fade.in { opacity: 1 } .modal-open { overflow: hidden } .modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1040; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0 } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%) } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0) } .modal-open .modal { overflow-x: hidden; overflow-y: auto } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000 } .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0 } .modal-backdrop.in { filter: alpha(opacity=50); opacity: .5 } .modal-dialog { position: relative; margin: 10px } .modal-content { position: relative; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5) } .modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #eee; position: relative } .modal-header .close { position: absolute; right: 15px; top: 15px } .modal-close { position: absolute; right: 15px; top: 15px; font-size: 24px; z-index: 9 } a.modal-close:hover { text-decoration: none } .modal-header h3, .modal-header .modal-title { margin: 0; padding: 10px 0; font-size: 16px } .modal-body { position: relative; padding: 15px; overflow-y: visible; word-break: break-all } .modal-form { margin-bottom: 0 } .modal-footer { padding: 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #eee; *zoom: 1 } .modal-footer:before, .modal-footer:after { display: table; content: "" } .modal-footer:after { clear: both } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0 } .modal-footer .btn-group .btn + .btn { margin-left: -1px } .modal-footer .btn-block + .btn-block { margin-left: 0 } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll } .radius .modal-content { border-radius: 6px } .radius .modal-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px } .modal.middle .modal-dialog { position: absolute; margin: 10px; left: 0; right: 0; top: 50% } .modal.fade.middle .modal-dialog { -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%) } .modal.in.middle .modal-dialog { -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%) } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto } .modal.middle .modal-dialog { margin: 10px auto } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5) } .modal-sm { width: 300px } } @media (min-width: 992px) { .modal-lg { width: 900px } } .modal-alert { position: fixed; right: auto; bottom: auto; width: 300px; left: 50%; margin-left: -150px; top: 50%; margin-top: -30px; z-index: 9999; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); outline: 0; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5) } .modal-alert-info { padding: 30px; text-align: center; font-size: 14px; background-color: #fff } .loading { height: 50px; width: 50px; background: #fff url(../static/h-ui/images/loading/loading-b.gif) no-repeat center } .mask { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -moz-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in } * html .mask { position: absolute; left: expression(documentElement.scrollLeft+documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop+documentElement.clientHeight - this.offsetHeight) } .mask_box { background-image: none; display: none; z-index: 99 } .hover .mask_box { position: absolute; bottom: 0; left: 0; display: block; background-color: rgba(0, 0, 0, 0.3); text-align: left } .modal-open .dropdown-menu { z-index: 2050 } .modal-open .dropdown.open { *z-index: 2050 } .modal-open .popover { z-index: 2060 } .modal-open .tooltip { z-index: 2070 } .tools-right { position: fixed; right: 15px; z-index: 999; cursor: pointer; visibility: visible; background-color: #fff; border: 1px solid #d9d9d9; color: #9c9c9c; font-size: 16px; width: 38px; height: 38px; line-height: 38px; text-align: center; text-decoration: none; _position: absolute; _top: expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight) } .tools-right:hover { color: #fff; text-decoration: none; background-color: #999; border-color: #999 } .tools-right.toTop { bottom: 60px; display: none } .tools-right.feedback { bottom: 110px } .bdsharebuttonbox.Hui-share a.bds_more, .bdsharebuttonbox.Hui-share a.bds_weixin, .bdsharebuttonbox.Hui-share a.bds_qzone, .bdsharebuttonbox.Hui-share a.bds_sqq, .bdsharebuttonbox.Hui-share a.bds_tsina, .bdsharebuttonbox.Hui-share a.bds_tqq, .bdsharebuttonbox.Hui-share a.bds_douban { display: inline-block; background: 0; padding-left: 0; text-decoration: none; margin: 0; margin-right: 6px; height: auto; line-height: auto } .bdsharebuttonbox.Hui-share a:hover { text-decoration: none } .bdsharebuttonbox.Hui-share .share-text { display: inline-block; margin-right: 6px; color: #999; cursor: default; float: left } .bdsharebuttonbox.bdshare-button-style0-16.Hui-share a, .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text, .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont { line-height: 16px } .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text, .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont { font-size: 16px } .bdsharebuttonbox.bdshare-button-style0-24.Hui-share a, .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text, .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont { line-height: 24px } .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text, .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont { font-size: 24px } .Hui-share.jiathis_style_24x24 .jtico { background: 0; padding-left: 0 !important } .Hui-share.jiathis_style_24x24 .jiathis_separator { margin-left: 0; margin-right: 6px } .panel { background-color: #fff; border: solid 1px transparent } .panel-header { border-bottom: solid 1px transparent; padding: 8px 15px; font-size: 14px; font-weight: 700; margin-bottom: -1px } .panel-body { padding: 15px } .panel-footer { background-color: #f5f5f5; border-top: 1px solid #ddd; padding: 5px 20px } .panel-default { border-color: #ddd } .panel-default > .panel-header { border-color: #ddd; background-color: #f5f5f5; color: #444 } .panel-primary { border-color: #5a98de } .panel-primary > .panel-header { border-color: #5a98de; background-color: #5a98de; color: #fff } .panel-secondary { border-color: #3bb4f2 } .panel-secondary > .panel-header { border-color: #3bb4f2; background-color: #3bb4f2; color: #fff } .panel-success { border-color: #5eb95e } .panel-success > .panel-header { border-color: #5eb95e; background-color: #5eb95e; color: #fff } .panel-warning { border-color: #f37b1d } .panel-warning > .panel-header { border-color: #f37b1d; background-color: #f37b1d; color: #fff } .panel-danger { border-color: #dd514c } .panel-danger > .panel-header { border-color: #dd514c; background-color: #dd514c; color: #fff } .docs-example { position: relative; *position: static; *padding-top: 19px; margin: 15px 0; padding: 39px 19px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px } .docs-example:after { content: "Example"; position: absolute; top: -1px; left: -1px; *position: static; padding: 3px 7px; font-size: 12px; font-weight: bold; background-color: #f5f5f5; border: 1px solid #ddd; color: #9da0a4; border-radius: 4px 0 4px 0 } .marquee { height: 22px; overflow: hidden; line-height: 22px } .rollpic .prev, .rollpic .next { display: block; height: 38px; width: 38px; cursor: pointer; float: left; background: url(../static/h-ui/images/rollpic/unslider-arrow.png) no-repeat 0 0; margin-top: 70px } .rollpic .prev { background-position: 0 0; margin-right: 5px } .rollpic .prev:hover { background-position: 0 -38px } .rollpic .next { background-position: 0 -76px; margin-left: 5px } .rollpic .next:hover { background-position: 0 -114px } .rollpicshow { float: left; border: solid 1px #ddd } .rollpicshow li { padding: 10px } .ac_results { position: absolute; border: solid 1px #ddd; background-color: #fff; padding: 3px; display: none; margin-top: -1px; z-index: 999 } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0 } .ac_results li { padding-left: 5px; padding-right: 5px; display: block; height: 24px; line-height: 24px; cursor: pointer } .ac_results li p { float: left; margin: 0; padding: 0; overflow: hidden } .ac_results li p tt { color: #666 } .ac_results li span { margin: 0; padding: 0; display: inline; float: right; color: #f93; width: 90px; text-align: right; overflow: hidden } .ac_results li.ac_over { background-color: #f0f1f2 } .ac_loading { background: #fff url(../static/h-ui/images/loading/loading-s.gif) right center no-repeat } .AD { text-align: center } .dual { top: 260px; position: absolute; width: 102px; overflow: hidden; display: none; z-index: 100 } .dual_l { left: 6px } .dual_r { right: 6px } .dual_con { border: #CCC solid 1px; width: 100px; height: 300px; overflow: hidden; background-color: #0C9 } .dual_close { width: 100%; height: 24px; line-height: 24px; text-align: center; display: block; font-size: 13px; color: #555; text-decoration: none } .Hui-tags, .Huitags-wraper { border: solid 1px #dedede; padding: 0 10px } .Hui-tags-editor, .Huitags-editor { position: relative; padding: 10px 0 10px 24px; min-height: 20px } .Hui-tags-editor .Hui-tags-icon, .Huitags-editor .Huitags-icon { position: absolute; left: 0; top: 11px; font-size: 14px; color: #666 } .Hui-tags-token, .Huitags-token { color: #aaa; float: left; font-size: 12px; height: 20px; line-height: 20px; margin-right: 8px; padding: 0 1px; white-space: nowrap; cursor: pointer } .Hui-tags-token:before, .Huitags-token:before { content: "#" } .Hui-tags-token:hover, .Huitags-token:hover { text-decoration: line-through } .Hui-tags-iptwrap { position: relative; float: left } .Hui-tags-input { position: relative; height: 20px; min-width: 60px; border: 0 none; vertical-align: top; line-height: 20px; color: #333; z-index: 2; background: url(../static/h-ui/images/Hui-tags/empty.png) repeat scroll 0 0; display: inline-block; width: 100% } .Hui-tags-label, .Huitags-label { position: absolute; top: 0; left: 2px; width: 240px; height: 20px; line-height: 20px; font-size: 14px; overflow: hidden; z-index: 1; color: #ccc } .Hui-tags-list, .Huitags-list { padding: 0 0 10px 0 } .Hui-notag, .Huitags-notag { font-size: 12px } .Hui-tags-has span, .Huitags-has span { cursor: pointer; font-size: 12px; white-space: nowrap; margin-right: 10px } .tags a { height: 26px; line-height: 26px; padding-right: 6px } .tags1 { color: #C00; font-size: 24px } .tags2 { color: #030; font-size: 16px } .tags3 { color: #00F } .tags4 { font-size: 16px } .tags5 { color: #C00; font-size: 20px } .tags6 { color: #F06; font-size: 20px } .tags7 { color: #030; font-weight: bold; font-size: 18px } .tags8 { color: #F06; font-weight: bold } .tags9 { color: #C00; font-weight: bold; font-size: 16px } .tags a:hover { color: #F00; text-decoration: underline } #tagyun { position: relative } #tagyun a { position: absolute; top: 0; left: 0; font-weight: bold; text-decoration: none; padding: 3px 6px } .Huifold .item { position: relative } .Huifold .item h4 { margin: 0; font-weight: bold; position: relative; border-top: 1px solid #fff; font-size: 15px; line-height: 22px; padding: 7px 10px; background-color: #eee; cursor: pointer; padding-right: 30px } .Huifold .item h4 b { position: absolute; display: block; cursor: pointer; right: 10px; top: 7px; width: 16px; height: 16px; text-align: center; color: #666 } .Huifold .item .info { display: none; padding: 10px } .maskBar { position: absolute; height: auto; left: 0; bottom: -100%; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0.6); z-index: 2; color: #fff !important } .maskWraper { position: relative; overflow: hidden } .maskWraper.hover .maskBar { bottom: 0; transition: bottom 200ms; -moz-transition: bottom 200ms; -webkit-transition: bottom 200ms; -o-transition: bottom 200ms } .maskBox { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; color: #fff !important } .maskWraper.hover .maskBox { background-color: rgba(0, 0, 0, 0.6); transition: all 500ms; -moz-transition: all 500ms; -webkit-transition: all 500ms; -o-transition: all 500ms } .commentList .item { list-style: none outside none; margin: 1.6rem 0 0 } .commentList .avatar { border: 1px solid transparent; float: left } .comment-main { position: relative; margin-left: 64px; border: 1px solid #dedede; border-radius: 2px } .comment-main:before, .comment-main:after { position: absolute; top: 11px; left: -16px; right: 100%; width: 0; height: 0; display: block; content: " "; border-color: transparent; border-style: solid solid outset; pointer-events: none } .comment-main:before { border-right-color: #dedede; border-width: 8px } .comment-main:after { border-width: 7px; border-right-color: #f8f8f8; margin-top: 1px; margin-left: 2px } .comment-header { padding: 10px 15px; background: #f8f8f8; border-bottom: 1px solid #eee } .comment-title { margin: 0 0 8px 0; font-size: 1.6rem; line-height: 1.2 } .comment-meta { font-size: 13px; color: #999; line-height: 1.2 } .comment-meta a { color: #999 } .comment-author { font-weight: 700; color: #999 } .comment-body { padding: 15px; overflow: hidden } .comment-body > :last-child { margin-bottom: 0 } .commentList .comment-flip .avatar { float: right } .comment-flip .comment-main { margin-left: 0; margin-right: 64px } .comment-flip .comment-main:before { border-left-color: #dedede; border-right-color: transparent } .comment-flip .comment-main:before, .comment-flip .comment-main:after { left: 100%; position: absolute; right: -16px } .comment-flip .comment-main:after { border-left-color: #f8f8f8; border-right-color: transparent; margin-left: auto; margin-right: 2px } .footer { border-top: 1px solid #e8e8e8; padding: 15px 0; font-family: tahoma, Arial; font-size: 12px; color: #999; line-height: 22px; text-align: center } .footer a, .footer a:hover { color: #999 } .star-bar-show { background: url(../static/h-ui/images/star/iconpic-star-S-default.png) repeat-x 0 0 } .star-bar-show .star { background: url(../static/h-ui/images/star/iconpic-star-S.png) repeat-x 0 0 } .star-1 { width: 20% } .star-2 { width: 40% } .star-3 { width: 60% } .star-4 { width: 80% } .star-5 { width: 100% } .star-bar-show.size-M { width: 120px; height: 24px } .star-bar-show.size-M, .star-bar-show.size-M .star { background-size: 24px } .star-bar-show.size-M .star { height: 24px } .star-bar-show.size-S { width: 80px; height: 16px } .star-bar-show.size-S, .star-bar-show.size-S .star { background-size: 16px } .star-bar-show.size-S .star { height: 16px } .star-bar { font-size: 0; line-height: 0 } .star-bar .star { display: inline-block; text-align: center } .size-M img { width: 24px; height: 24px } .size-S img { width: 16px; height: 16px } .tooltip { position: absolute; z-index: 1070; display: block; font-size: 12px; line-height: 1.4; visibility: visible; filter: alpha(opacity=0); opacity: 0 } .tooltip.in { filter: alpha(opacity=90); opacity: .9 } .tooltip.top { padding: 5px 0; margin-top: -3px } .tooltip.right { padding: 0 5px; margin-left: 3px } .tooltip.bottom { padding: 5px 0; margin-top: 3px } .tooltip.left { padding: 0 5px; margin-left: -3px } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000 } .tooltip.top-left .tooltip-arrow { bottom: 0; left: 5px; border-width: 5px 5px 0; border-top-color: #000 } .tooltip.top-right .tooltip-arrow { right: 5px; bottom: 0; border-width: 5px 5px 0; border-top-color: #000 } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000 } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000 } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000 } .tooltip.bottom-left .tooltip-arrow { top: 0; left: 5px; border-width: 0 5px 5px; border-bottom-color: #000 } .tooltip.bottom-right .tooltip-arrow { top: 0; right: 5px; border-width: 0 5px 5px; border-bottom-color: #000 } .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: left; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2) } .popover.top { margin-top: -10px } .popover.right { margin-left: 10px } .popover.bottom { margin-top: 10px } .popover.left { margin-left: -10px } .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0 } .popover-content { padding: 9px 14px } .popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid } .popover > .arrow { border-width: 11px } .popover > .arrow:after { content: ""; border-width: 10px } .popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, .25); border-bottom-width: 0 } .popover.top > .arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0 } .popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, .25); border-left-width: 0 } .popover.right > .arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0 } .popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, .25) } .popover.bottom > .arrow:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff } .popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, .25) } .popover.left > .arrow:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff } .datetimepicker { padding: 4px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; direction: ltr; position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box } .datetimepicker-inline { width: 220px } .datetimepicker.datetimepicker-rtl { direction: rtl } .datetimepicker.datetimepicker-rtl table tr td span { float: right } .datetimepicker-dropdown, .datetimepicker-dropdown-left { top: 0; left: 0 } [class*=" datetimepicker-dropdown"]:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute } [class*=" datetimepicker-dropdown"]:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; position: absolute } [class*=" datetimepicker-dropdown-top"]:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ccc; border-top-color: rgba(0, 0, 0, 0.2); border-bottom: 0 } [class*=" datetimepicker-dropdown-top"]:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; border-bottom: 0 } .datetimepicker-dropdown-bottom-left:before { top: -7px; right: 6px } .datetimepicker-dropdown-bottom-left:after { top: -6px; right: 7px } .datetimepicker-dropdown-bottom-right:before { top: -7px; left: 6px } .datetimepicker-dropdown-bottom-right:after { top: -6px; left: 7px } .datetimepicker-dropdown-top-left:before { bottom: -7px; right: 6px } .datetimepicker-dropdown-top-left:after { bottom: -6px; right: 7px } .datetimepicker-dropdown-top-right:before { bottom: -7px; left: 6px } .datetimepicker-dropdown-top-right:after { bottom: -6px; left: 7px } .datetimepicker > div { display: none } .datetimepicker.minutes div.datetimepicker-minutes { display: block } .datetimepicker.hours div.datetimepicker-hours { display: block } .datetimepicker.days div.datetimepicker-days { display: block } .datetimepicker.months div.datetimepicker-months { display: block } .datetimepicker.years div.datetimepicker-years { display: block } .datetimepicker table { margin: 0 } .datetimepicker td, .datetimepicker th { text-align: center; width: 20px; height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0 } .table-striped .datetimepicker table tr td, .table-striped .datetimepicker table tr th { background-color: transparent } .datetimepicker table tr td.minute:hover { background: #eee; cursor: pointer } .datetimepicker table tr td.hour:hover { background: #eee; cursor: pointer } .datetimepicker table tr td.day:hover { background: #eee; cursor: pointer } .datetimepicker table tr td.old, .datetimepicker table tr td.new { color: #999 } .datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover { background: 0; color: #999; cursor: default } .datetimepicker table tr td.today, .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today.disabled:hover { background-color: #fde19a; background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a); background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a)); background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a); background-image: -o-linear-gradient(top, #fdd49a, #fdf59a); background-image: linear-gradient(top, #fdd49a, #fdf59a); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0); border-color: #fdf59a #fdf59a #fbed50; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today:hover:hover, .datetimepicker table tr td.today.disabled:hover, .datetimepicker table tr td.today.disabled:hover:hover, .datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today:hover.disabled, .datetimepicker table tr td.today.disabled.disabled, .datetimepicker table tr td.today.disabled:hover.disabled, .datetimepicker table tr td.today[disabled], .datetimepicker table tr td.today:hover[disabled], .datetimepicker table tr td.today.disabled[disabled], .datetimepicker table tr td.today.disabled:hover[disabled] { background-color: #fdf59a } .datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active { background-color: #fbf069 } .datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover { background-color: #006dcc; background-image: -moz-linear-gradient(top, #08c, #04c); background-image: -ms-linear-gradient(top, #08c, #04c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c)); background-image: -webkit-linear-gradient(top, #08c, #04c); background-image: -o-linear-gradient(top, #08c, #04c); background-image: linear-gradient(top, #08c, #04c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #04c #04c #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) } .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active:hover:hover, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled:hover:hover, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active:hover.disabled, .datetimepicker table tr td.active.disabled.disabled, .datetimepicker table tr td.active.disabled:hover.disabled, .datetimepicker table tr td.active[disabled], .datetimepicker table tr td.active:hover[disabled], .datetimepicker table tr td.active.disabled[disabled], .datetimepicker table tr td.active.disabled:hover[disabled] { background-color: #04c } .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active { background-color: #039 } .datetimepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; margin: 1%; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px } .datetimepicker .datetimepicker-hours span { height: 26px; line-height: 26px } .datetimepicker .datetimepicker-hours table tr td span.hour_am, .datetimepicker .datetimepicker-hours table tr td span.hour_pm { width: 14.6% } .datetimepicker .datetimepicker-hours fieldset legend, .datetimepicker .datetimepicker-minutes fieldset legend { margin-bottom: inherit; line-height: 30px } .datetimepicker .datetimepicker-minutes span { height: 26px; line-height: 26px } .datetimepicker table tr td span:hover { background: #eee } .datetimepicker table tr td span.disabled, .datetimepicker table tr td span.disabled:hover { background: 0; color: #999; cursor: default } .datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active.disabled:hover { background-color: #006dcc; background-image: -moz-linear-gradient(top, #08c, #04c); background-image: -ms-linear-gradient(top, #08c, #04c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c)); background-image: -webkit-linear-gradient(top, #08c, #04c); background-image: -o-linear-gradient(top, #08c, #04c); background-image: linear-gradient(top, #08c, #04c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #04c #04c #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) } .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active:hover:hover, .datetimepicker table tr td span.active.disabled:hover, .datetimepicker table tr td span.active.disabled:hover:hover, .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active:hover.disabled, .datetimepicker table tr td span.active.disabled.disabled, .datetimepicker table tr td span.active.disabled:hover.disabled, .datetimepicker table tr td span.active[disabled], .datetimepicker table tr td span.active:hover[disabled], .datetimepicker table tr td span.active.disabled[disabled], .datetimepicker table tr td span.active.disabled:hover[disabled] { background-color: #04c } .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active { background-color: #039 } .datetimepicker table tr td span.old { color: #999 } .datetimepicker th.switch { width: 145px } .datetimepicker th span.glyphicon { pointer-events: none } .datetimepicker thead tr:first-child th, .datetimepicker tfoot th { cursor: pointer } .datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot th:hover { background: #eee } .input-append.date .add-on i, .input-prepend.date .add-on i, .input-group.date .input-group-addon span { cursor: pointer; width: 14px; height: 14px } .select-category .item { padding: 5px; position: relative; border-bottom: solid 1px #ddd } .select-category .item .dt { width: 90px; float: left; white-space: nowrap } .select-category .item .dd { margin-left: 100px; text-align: left; font-size: 14px; height: auto } .select-category .item .dd a { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; padding: 0 5px; text-decoration: none } .ui-state-highlight { height: 50px; margin-top: 20px; border: 1px solid #fcefa1; background: #fbf9ee; color: #363636 } .sortable-control { cursor: move } .page-404 { color: #afb5bf; padding-top: 60px; padding-bottom: 90px } .page-404 .error-title { font-size: 80px } .page-404 .error-title .iconfont { font-size: 80px } .page-404 .error-description { font-size: 24px } .page-404 .error-info { font-size: 14px }