@charset "utf-8"; /* *懒人CSS Bate V0.10 *作者：懒人建站 http://www.51xuediannao.com/ *2015-02-04——— */ /*（必需）*/ /*---------重置和全局使用的基本定义---------*/ /*---------重置---------*/ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; *overflow: auto; _overflow-x: hidden; } body { margin: 0; } p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } dl, dd { margin-left: 0; } ul, ol { padding-left: 0; *margin-left: 0; list-style-type: none; } ul li { *zoom: 1; *vertical-align: bottom; } em, var, cite, i { font-style: normal; } small { font-size: 12px; } s, a { text-decoration: none; } :focus, :active { outline: none; } /*.fn-btn::-moz-focus-inner{border-color:transparent!important;}*/ [type="radio"]:focus { outline: #666 dotted 1px; } blockquote, q { quotes: none; margin: 0; } table { border-collapse: collapse; border-spacing: 0; empty-cells: show; /**table-layout:fixed;word-wrap:break-word;*/ } img, iframe { border: none; } img { vertical-align: top; -ms-interpolation-mode: bicubic; /*ie7防止图片缩小失真的*/ } /*表单*/ textarea, select, button, .tinput, .submit, .button { margin: 0; vertical-align: middle; outline: 0; background: transparent; resize: none; } textarea { overflow: auto; vertical-align: top; padding: 0 } input[type='checkbox'], input[type='radio'] { vertical-align: -2px; *vertical-align: middle; margin: 0 4px 0 0; } label, button, .button, .submit, .reset { cursor: pointer; } button, input { *overflow: visible; line-height: normal; } /*修正IE67的input宽度bug*/ /*---------基础样式---------*/ hr, .fn-hr { width: 100%; height: 0; *height: 2px; font-size: 0; line-height: 0; border: none; border-top: #eee solid 1px; margin: 0 auto; } .fn-clear { width: 100%; clear: both; display: block; } .fn-clear-left { clear: left; } .fn-clear-left { clear: right; } .fn-cf:before, .fn-cf:after { content: ""; display: table; line-height: 0; } .fn-cf:after { clear: both; } .fn-cf { *zoom: 1; } /*clearfix*/ .fn-hide { display: none; } .fn-vhide, .fn-vhid { visibility: hidden; } .fn-ohide { overflow: hidden; *zoom: 1; } .fn-fl { float: left; } .fn-fr { float: right; } .fn-unf { float: none; } .fn-tl { text-align: left; } .fn-tr { text-align: right; } .fn-tc { text-align: center; } .fn-abs { position: absolute; } .fn-rel { position: relative; } .fn-fix { position: fixed; _position: absolute; } .fn-sta { position: static; } .fn-db { display: block; } .fn-dib { display: inline-block; *display: inline; *zoom: 1; } .fn-di { display: inline; } .fn-dbox { display: -webkit-box; display: -moz-box; display: box; } .fn-tablecell { display: table; } .fn-ttr { display: table-row; } .fn-ttd, .fn-tth { display: table-cell; *display: inline-block; *zoom: 1; *vertical-align: top; } .fn-dib-otw { display: inline-block; *display: inline; *zoom: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fn-otw { display: block; *zoom: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fn-mt0 { margin-top: 0 !important; } .fn-mt4 { margin-top: 4px; } .fn-mt6 { margin-top: 6px; } .fn-mt8 { margin-top: 8px; } .fn-mt10 { margin-top: 10px; } .fn-mt12 { margin-top: 12px; } .fn-mt14 { margin-top: 14px; } .fn-mt16 { margin-top: 16px; } .fn-mt20 { margin-top: 20px; } .fn-mt30 { margin-top: 30px; } .fn-mb0 { margin-bottom: 0 !important; } .fn-mb4 { margin-bottom: 4px; } .fn-mb6 { margin-bottom: 6px; } .fn-mb8 { margin-bottom: 8px; } .fn-mb10 { margin-bottom: 10px; } .fn-mb12 { margin-bottom: 12px; } .fn-mb14 { margin-bottom: 14px; } .fn-mb16 { margin-bottom: 16px; } .fn-mb20 { margin-bottom: 20px; } .fn-mb30 { margin-bottom: 30px; } .fn-mr0 { margin-right: 0 !important; } .fn-mr4 { margin-right: 4px; } .fn-mr6 { margin-right: 6px; } .fn-mr8 { margin-right: 8px; } .fn-mr10 { margin-right: 10px; } .fn-mr12 { margin-right: 12px; } .fn-mr14 { margin-right: 14px; } .fn-mr16 { margin-right: 16px; } .fn-mr18 { margin-right: 18px; } .fn-mr20 { margin-right: 20px; } .fn-mr22 { margin-right: 22px; } .fn-mr26 { margin-right: 26px; } .fn-mr28 { margin-right: 28px; } .fn-mr30 { margin-right: 30px; } .fn-ml0 { margin-left: 0 !important; } .fn-ml4 { margin-left: 4px; } .fn-ml6 { margin-left: 6px; } .fn-ml8 { margin-left: 8px; } .fn-ml10 { margin-left: 10px; } .fn-ml12 { margin-left: 12px; } .fn-ml14 { margin-left: 14px; } .fn-ml16 { margin-left: 16px; } .fn-ml18 { margin-left: 18px; } .fn-ml20 { margin-left: 20px; } .fn-ul { list-style: disc outside none; margin: 0 0 0.5em 0; padding-left: 2em; } .fn-ol { list-style: decimal outside none; margin: 0.5em 0; padding-left: 2em; } .fn-opa-0 { opacity: 0; filter: alpha(opacity=0); } .fn-rgba { background-color: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#5F000000, endcolorstr=#5F000000); color: #fff; cursor: pointer; *zoom: 1; } /*背景半透明样式*/ .fn-lockscreen, .fn-lockscreen body { width: 100%; height: 100%; overflow: hidden; } /*锁屏*/ .fn-vl { width: 0; height: 100%; font-size: 0; line-height: 0; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-left: -1px; } .fn-vm { vertical-align: middle; } .fn-vt { vertical-align: top; } .fn-vb { vertical-align: bottom; } .fn-bw { word-wrap: break-word !important; } .ime-disabled { ime-mode: disabled; } /* 屏蔽输入法 Safari/Chrome/Opera不支持*/ /*触发css3动画的硬件加速 过多使用会出现cpu占用过多*/ .trigger-gpu { -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /*transform 在 webkit 内核有闪屏现象*/ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } /*---------基础布局---------*/ .ui-fl { float: left; _margin-right: -3px; } .ui-fr { float: right; _margin-left: -3px; } .ui-negmr { margin-right: -1px; _margin-right: -4px; } /*和fn-fl配合使用*/ .ui-negml { margin-left: -1px; _margin-left: -4px; } /*和fn-fr配合使用*/ .ui-first { margin-left: 0; padding-left: 0; } .ui-last { margin-right: 0; padding-right: 0; overflow: hidden; min-height: 0; } .ui-100 { width: 100%; } /*宽100%*/ .ui-50 { width: 50%; } /*2col*/ .ui-33 { width: 33.33%; } /*3col*/ .ui-30 { width: 30%; } .ui-25 { width: 25%; } /*4col*/ .ui-20 { width: 20%; } /*5col*/ .ui-16 { width: 16.66%; } /*6col*/ .ui-40 { width: 40%; } .ui-45 { width: 45%; } .ui-48 { width: 48%; } .ui-60 { width: 60%; } /*等分列*/ .ui-cols-2, .ui-cols-3, .ui-cols-4, .ui-cols-5, .ui-cols-6, .ui-cols-7 { overflow: hidden; *zoom: 1; } .ui-cols-2>.col { width: 50%; float: left; } /*2col*/ .ui-cols-3>.col { width: 33.3333%; float: left; *width: 33.3%; } /*3col*/ .ui-cols-4>.col { width: 25%; *width: 24%; float: left; } /*4col*/ .ui-cols-5>.col { width: 20%; float: left; } /*5col*/ .ui-cols-6>.col { width: 16.6666%; float: left; *width: 16.6%; } /*6col*/ .ui-cols-7>.col { width: 14.28%; float: left; } /*7col*/ .ui-cols-2>.col-join-2 { width: 100% } .ui-cols-3>.col-join-3 { width: 100% } .ui-cols-4>.col-join-2 { width: 50% } /*两端对齐 IE8及以上*/ .ui-justify { text-align: justify; font-size: 0; } .ui-justify:after { content: ""; display: inline-block; width: 100%; height: 0; line-height: 0; overflow: hidden; font-size: 0; } .ui-justify li { display: inline-block; } @font-face { font-family: "iconfont"; src: url(../images/iconfont.eot?e1500c79); /* IE9*/ src: url(../images/iconfont.eot?e1500c79#iefix) format('embedded-opentype'), url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url(../images/iconfont.ttf?9f415a34) format('truetype'), url(../images/iconfont.svg?4c85db62#iconfont) format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before { content: "\E610"; } .icon-arrow-left:before { content: "\E604"; } .icon-arrow-up:before { content: "\E60B"; } .icon-arrow-down:before { content: "\E61A"; } .icon-arrow-right:before { content: "\E622"; } .icon-search:before { content: "\E6AC"; } .icon-triangle-down:before { content: "\E61B"; } .icon-qq:before { content: "\E625"; } .icon-wx:before { content: "\E626"; } .icon-share:before { content: "\E631"; } .icon-mail:before { content: "\E611"; } .icon-huifu:before { content: "\E7AC"; } .icon-right:before { content: "\E608"; } .icon-close:before { content: "\E613"; } .icon-kefu:before { content: "\E643"; } .icon-kefu1:before { content: "\E60E"; } .icon-dian:before { content: "\E616"; } .icon-shouji:before { content: "\E644"; } .icon-zhifeiji:before { content: "\E61D"; } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @charset "utf-8"; /* *懒人CSS Bate V0.10 *作者：懒人建站 http://www.51xuediannao.com/ *2015-02-04——— */ /*---------表单（非必需）---------*/ form [type='radio']:first-child, form [type='checkbox']:first-child { margin-left: 0; } textarea { width: 98%; min-height: 100px; overflow: auto; border: #ddd solid 1px; line-height: 1.75; padding: 1%; /**float:left;*/ *width: 96.6%; _padding: 0; } .fn-tinput { width: 200px; height: 18px; line-height: 18px\9; padding: 5px 6px; border: #ddd solid 1px; /*color:#8F8F8F\9;*/ /*background:#F8F8F8;*/ vertical-align: middle; } .fn-tinput:focus, .bl-form textarea:focus { border-color: #EB7351; /*box-shadow: 1px 1px 1px 0 #ddd inset; */ color: #000; background: #fff; } [readonly]:focus { border-color: #ddd; box-shadow: none; } .fn-tinput:-webkit-autofill, .fn-tinput:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } .form-input-short .fn-tinput, .fn-tinput-short { width: 135px; } .form-input-long .fn-tinput, .fn-tinput-long { width: 240px; } .form-input-longer .fn-tinput, .fn-tinput-longer { width: 340px; } .form-help { color: #999; } span.form-help { margin-left: 4px; vertical-align: middle; } div.form-help { padding-top: 4px; } .bl-form-btns { padding-top: 4px; margin-bottom: 0; } .bl-form .vhid { visibility: hidden; } .bl-form .vdbox img { vertical-align: middle; } .bl-form .vd-input { width: 60px; } .form-dominput { height: 18px; padding: 5px; display: inline-block; *display: inline; *zoom: 1; } select { border: #ddd solid 1px; padding: 3px 6px; } .mno { color: red; padding: 0 5px; font-family: simsun; font-weight: 100; } .bl-form .s-checkbox, .bl-form .s-radio { margin-right: 6px; } .bl-form .controls { position: relative; } span.fn-tinput { display: block; } .input-blank { border: none; } /*表单验证 大部分情况走 jquery.validate */ .cktip { padding-left: 4px; font-family: simsun, tahoma, arial; color: #999; font-size: 13px; background-repeat: no-repeat; background-position: left center; } .cktip-block { margin-top: 4px; margin-left: 0; display: block; } .form-error .fn-tinput, .form-error .fn-textarea { border: #FE5341 solid 1px; } .form-ok .fn-tinput { border: #669900 solid 1px; } .form-error { position: relative; } .cktip-abs { position: absolute; left: 0; bottom: -20px; margin: 0; background-color: #fff } .submit-failure { vertical-align: middle; } span.error, label.error { color: #FE5341; margin-left: 4px; vertical-align: middle; } /*单行表单*/ .form-one-row .bl-form-group { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin-right: 4px; } .form-one-row .fn-tinput {} .form-one-row .fn-btn {} /*---------水平表单---------*/ .bl-formhor .bl-form-group { /*padding-left:106px;*/ margin-bottom: 16px; } .qtip .bl-formhor .bl-form-group { margin-bottom: 12px; } .bl-formhor .bl-form-group>label { width: 120px; padding-top: 6px; text-align: right; float: left; /*clear:left; margin-left:-106px;*/ } .bl-formhor .controls { margin-left: 124px; *margin-left: 0; } .bl-formhor .controls label { width: auto; padding-top: 0; text-align: left; float: none; } /*原来兼容IE6 的，不在刻意兼容IE6 .bl-formhor .controls{ margin-bottom:12px; vertical-align:top; *display: inline-block;*margin-left: 0;*padding-left:3px; } .bl-formhor .controls label{width:auto;padding:0;text-align:left;font-weight: normal; float:none;clear: none;margin: 0;}*/ .bl-formhor .form-text, .bl-formhor .bl-form-text { line-height: 20px; } .bl-formhor .form-text>label, .bl-formhor .bl-form-text>label { padding-top: 0 !important; } .bl-formhor .controls-simple { padding-top: 5px; } .bl-formhor .controls-simple a { font-size: 13px; } /*---------竖向表单---------*/ .bl-formver li { margin-bottom: 16px; } .bl-formver li>label { display: block; margin-bottom: 4px; color: #999; } /*简单表单*/ .bl-form-simform li { margin-bottom: 14px; } .bl-form-simform>label { display: inline-block; *display: inline; *zoom: 1; text-align: right; } .bl-form-simform .controls label { width: auto; padding: 0; text-align: left; font-weight: normal; float: none; clear: none; margin: 0; } .form-title { padding: 20px 10px; font-weight: 700; } /*尺寸控制*/ .bl-form .w100 { width: 100%; } /*S 小号 M中号 L大号 XL特大号 XXL超大号*/ .bl-form .ddmenu-select { min-height: 30px; } .bl-form .ddmenu-select .menu-btn, .bl-form .ddmenu-select .f-icon { line-height: 28px; } .bl-form .fn-btn { padding: 5px 12px; font-size: 14px; } /*.bl-form button.fn-btn,.bl-form input.fn-btn{padding: 6px 16px;}*/ .bl-form .btn-tool { padding: 6px; font-size: 16px; color: #666; } /*.label-placeholder,.bl-formhor .controls .label-placeholder{ padding: 4px 0;}*/ .form-S .fn-tinput, .tinput-S { padding: 3px 6px; } .form-S select { padding: 1px 6px; } .form-S .bl-form-group>label { padding-top: 3px; } .form-S .ddmenu-select { min-height: 28px; } .form-S .ddmenu-select .menu-btn, .form-S .ddmenu-select .f-icon { line-height: 26px; } .form-S .fn-btn { padding: 3px 10px; } /*.form-S button.fn-btn,.form-S input.fn-btn{padding: 5px 16px;}*/ .form-S .btn-tool { padding: 4px; } .form-M .fn-tinput, .tinput-M { padding: 5px 6px; } .form-M select { padding: 3px 6px; } /*.form-M .label-placeholder{ padding: 4px 0;}*/ .form-M .bl-form-group>label { padding-top: 5px; } .form-M .ddmenu-select { min-height: 30px; } .form-M .ddmenu-select .menu-btn, .form-M .ddmenu-select .f-icon { line-height: 28px; } .form-M .fn-btn { padding: 5px 12px; } /*.form-M button.fn-btn,.form-M input.fn-btn{padding: 7px 16px;}*/ .form-M .btn-tool { padding: 6px; } .form-L .fn-tinput, .tinput-L { padding: 8px; } .form-L select { padding: 6px 8px; } /*.form-L .label-placeholder{ padding: 6px 0;}*/ .form-L .bl-form-group>label { padding-top: 8px; } .form-L .ddmenu-select { min-height: 36px; } .form-L .ddmenu-select .menu-btn, .form-L .ddmenu-select .f-icon { line-height: 34px; } .form-L .fn-btn { padding: 8px 16px; font-size: 14px; } /*.form-L button.fn-btn,.form-L input.fn-btn{padding: 9px 16px;}*/ .form-L .btn-icon { padding: 8px; } .form-L .select2-container .select2-choice { height: 36px; line-height: 36px; } .form-L .select2-container .select2-choice .select2-arrow b { background-position: 0 7px; } .form-L .selectinput .selectinput-icon i { height: 36px; line-height: 36px; } .form-L .multistage-tandem .mt-col { height: 34px; line-height: 34px; } .form-L .multistage-tandem .mt-select { line-height: 34px; } .form-XL .fn-tinput, .tinput-XL { padding: 10px; } .form-XL select { padding: 8px 10px; } /*.form-XL .label-placeholder{ padding:8px 0;}*/ .form-XL .bl-form-group>label { padding-top: 10px; } .form-XL .ddmenu-select { min-height: 40px; } .form-XL .ddmenu-select .menu-btn, .form-XL .ddmenu-select .f-icon { line-height: 38px; } .form-XL .fn-btn { padding: 10px 16px; font-size: 18px; } /*.form-XL button.fn-btn,.form-XL input.fn-btn{padding: 11px 16px;}*/ .form-XL .btn-tool { padding: 10px; } .bl-form-btns .fn-btn { margin-right: 6px; padding-left: 18px; padding-right: 18px; } .bl-form-btns .text-dom { line-height: 30px; } /*模拟 checkbox*/ .s-checkbox { display: inline-block; *display: inline; *zoom: 1; position: relative; cursor: pointer; height: 18px; line-height: 18px; } .s-checkbox .ck-icon { width: 15px; height: 15px; line-height: 15px; text-align: center; display: inline-block; *display: inline; *zoom: 1; border: #ddd solid 1px; margin-right: 4px; } .s-checkbox input { cursor: pointer; width: 100%; height: 100%; border: none; margin: 0; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .s-checkbox .ck-icon i { font-size: 12px; visibility: hidden; *vertical-align: middle; margin-top: -2px; } .s-sChecked .ck-icon { border-color: #6c3499; background: #6c3499; color: #fff; } .s-sChecked .ck-icon i { visibility: visible } .sim-checkbox-one { cursor: pointer; } .sim-checkbox-one:hover {} /*皮肤定制测试 s-checkbox-skin1*/ .s-checkbox-skin-block {} .s-checkbox-skin-block .s-checkbox { border: #ddd solid 1px; padding: 1px 8px; height: 18px; line-height: 18px; } .s-checkbox-skin-block .ck-icon { width: 14px; height: 14px; display: none; } .s-checkbox-skin-block .s-sChecked { border-color: #6c3499; background-color: #6c3499; color: #fff; } .s-checkbox-skin-block .s-checkbox:hover .ck-icon { border-color: #6c3499; } /*开关*/ .s-checkbox-switch { display: inline-block; position: relative; height: 20px; line-height: 1; vertical-align: middle } .s-checkbox-switch input { cursor: pointer; width: 100%; height: 100%; border: none; margin: 0; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; } .s-checkbox-switch:before, .bl-switch:after { font-family: 'fontello'; font-size: 22px; color: #bbb } .s-checkbox-switch:before { content: "\E86D" } .s-checkbox-switch.s-sChecked:before { content: "\E86E"; color: #6c3499; } /*模拟 radio*/ .s-radio { display: inline-block; *display: inline; *zoom: 1; position: relative; cursor: pointer; height: 18px; line-height: 18px; } .s-radio .ck-icon { width: 16px; height: 16px; line-height: 1; text-align: center; vertical-align: top; display: inline-block; *display: inline; *zoom: 1; margin-right: 4px; } .s-radio input { cursor: pointer; width: 100%; *width: auto; height: 100%; border: none; margin: 0; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .s-radio .f-icon { font-size: 18px; color: #ccc; } .s-radio .i-1 { display: none } .s-radio .i-0 { display: inline-block; } .radio-group-db .s-radio { display: block; } .s-rChecked .i-1 { display: inline-block; } .s-rChecked .i-0 { display: none } .s-rChecked .f-icon { /*color: #6c3499;*/ color: #6c3499; } /*皮肤测试 可根据实际情况定制*/ .s-radio-skin-group { overflow: hidden; padding-right: 1px; } .s-radio-skin-group .ck-icon { display: none; } .s-radio-skin-group .s-radio { border: #ddd solid 1px; float: left; margin-right: -1px; padding: 1px 8px; } .s-radio-skin-group .s-rChecked { border-color: #6c3499; background-color: #6c3499; color: #fff; } /*信息列表和编辑列表的 编辑开关*/ .form-edit { padding: 16px; overflow: hidden; position: relative; } .form-edit .edit-btn { position: absolute; right: 16px; top: 16px; z-index: 10; padding: 4px; } .form-edit-off .btn-edit { display: inline-block; } .form-edit-off .info-edit { display: none; } .form-edit-on .edit-btn, .form-edit-on .info-list { display: none; } .form-edit-on .info-edit { display: block; } .form-edit-on .up-img-btn { opacity: 0.7 !important; filter: alpha(opacity=70) !important; } .bl-quick-select .input-num { width: 110px; } .bl-quick-select .fn-btn { margin-left: 2px; } .bl-quick-select .f-icon-ask { margin-left: 4px; color: #999 } .bl-quick-select .cur, .bl-quick-select .cur:hover { border-color: #EB7351; background-color: #EB7351; color: #fff; } .bl-quick-select .cur .f-icon-ask { color: #fff; } /* input遮罩 注意三个类名： input-mask-wrap mask-auxiliary mask-target 和 tabindex=-1（不允许tab选中） 结构：
*/ .input-mask-wrap { position: relative; } .input-mask-wrap .mask-target { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; filter: alpha(opacity=0); } .input-mask-reverse { position: relative; } .input-mask-reverse .mask-target { width: 100%; position: relative; z-index: 1; opacity: 0; filter: alpha(opacity=0); } .input-mask-reverse .mask-auxiliary { width: 100%; position: absolute; left: 0; top: 0; z-index: 2; } .input-mask-reverse div.mask-auxiliary { z-index: 3; opacity: 0; height: 3.4rem; } .input-group .fn-tinput, .input-group .fn-btn { vertical-align: middle; } .opacity-input { margin: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; filter: alpha(opacity=0); } /*type="checkbox"*/ .label-checkbox { position: relative; } .label-checkbox [type="checkbox"] { width: 18px; height: 18px; width: 12px\9; height: 12px\9; display: inline-block; *display: inline; *zoom: 1; line-height: 1; position: relative; z-index: 2; vertical-align: top; margin: 0 4px 0 0; cursor: pointer; border: none; background-color: transparent; opacity: 0; filter: alpha(opacity=0); } .label-checkbox-mask:after { width: 15px; height: 15px; line-height: 15px; position: absolute; left: 0; top: 0; z-index: 1; content: ""; background-color: #fff; border: #ddd solid 1px; display: block; text-align: center; font-size: 14px; } .label-checkbox.checked .label-checkbox-mask:after { font-family: "iconfont" !important; content: "\E602"; background-color: #3C8DBC; border-color: #3C8DBC; color: #fff; } /*type="checkbox"*/ .label-radio { position: relative; } .label-radio [type="radio"] { width: 18px; height: 18px; width: 12px\9; height: 12px\9; display: inline-block; *display: inline; *zoom: 1; line-height: 1; position: relative; z-index: 2; vertical-align: middle; margin: 0; cursor: pointer; border: none; background-color: transparent; opacity: 0; filter: alpha(opacity=0); } .label-radio-mask:after { width: 15px; height: 15px; line-height: 15px; display: block; position: absolute; left: 0; top: 0; z-index: 1; text-align: center; font-size: 18px; color: #999; font-family: "iconfont" !important; content: "\E62D"; } .label-radio.checked .label-radio-mask:after { content: "\E62E"; color: #3C8DBC; } @charset "utf-8"; /* *懒人CSS Bate V0.10 *作者：懒人建站 http://www.51xuediannao.com/ *2015-02-04——— */ /*---------表格（非必需）---------*/ /*默认没有任何边线*/ .bl-table { width: 100%; position: relative; z-index: 3; } .bl-table td, .bl-table th { line-height: 20px; text-align: left; } .bl-table th { white-space: nowrap } .bl-treven td { background-color: #F2F2F2; } .bl-table caption { padding: 8px 0; font-weight: 700; } .bl-table .checkbox { width: 20px; padding-right: 0; } .tdeven { background: #EFEFEF } .bl-table tbody tr:hover { background: #FFF9EE; transition: background-color .1s ease-in .1s; } /*对齐*/ .table-tc th, .table-tc td { text-align: center } .table-tl th, .table-tl td { text-align: left } .table-tr th, .table-tr td { text-align: right } .bl-table .tl { text-align: left; } .bl-table .tc { text-align: center; } .bl-table .tr { text-align: right; } /*S 小号 M中号 L大号 XL特大号 XXL超大号*/ .table-S td, .table-S th { padding: 6px; } .table-M td, .table-M th, .table-M td, .table-M th { padding: 10px; } /*与默认相同*/ .table-L td, .table-L th { padding: 10px 14px; } .table-XL td, .table-XL th { padding: 14px 20px; } .table-S th { padding-top: 4px; padding-bottom: 4px; } .table-M th, .table-M th { padding-top: 6px; padding-bottom: 6px; } .table-L th { padding-top: 8px; padding-bottom: 8px; } .table-XL th { padding-top: 10px; padding-bottom: 10px; } .table-L td, .table-L th, .table-L a { font-size: 14px; } .table-XL td, .table-XL th, .table-XL a { font-size: 14px; } .bl-table .bl-progress { min-width: 90px; } /*只有上边线的table*/ .bl-table-li { border-top: #eee solid 1px; border-bottom: #eee solid 1px } .bl-table-li td { border-top: #eee solid 1px; } /*边线table*/ .bl-table-brd {} .bl-table-brd td, .bl-table-brd th { border: #eee solid 1px; } /*只有外边框和上边线的table*/ .bl-table-brdli { border: #eee solid 1px; } .bl-table-brdli td { border-top: #eee solid 1px; } /*模拟table*/ .sim-table { display: table; width: 100%; } .sim-table>li { display: table-row; } .sim-table .col-con { display: table-cell; *display: inline-block; *zoom: 1; *vertical-align: top; padding: 8px; border-bottom: #ddd solid 1px; } /*.sim-table > li:first-child .col-con{border-top:none;}*/ .sim-table>li:hover { background-color: #f8f9fc } .sim-table .checkbox { width: 37px; text-align: center; } .sim-table-head, .sim-table-footer { border: #ddd solid 1px; background-color: #f8f9fc; padding: 6px; } .sim-table-head { border-bottom: none; } .sim-table-footer { border-top: none } .sim-table-btns .fn-btn { margin-right: 2px; } .sim-table div, .sim-table label { vertical-align: middle } .sim-table .sim-checkbox { margin-top: -2px; } .sim-table>li:hover .hidden-tools { visibility: visible } .sim-table .head { font-weight: 700; } .operation .fn-btn { margin: 0 2px } .bl-table .fn-btn, .sim-table .fn-btn { padding: 2px 8px; font-weight: 100; font-size: 12px; } .bl-table button.fn-btn, .sim-table button.fn-btn { padding-top: 3px; padding-bottom: 3px; } .bl-table button.fn-btn-smaller, .bl-table input.fn-btn-smaller { padding-left: 6px; padding-right: 6px; } .bl-table .f-icon, .sim-table .f-icon, .bl-table .fn-dib-otw, .sim-table .fn-dib-otw { vertical-align: middle; } .bl-table .bl-label .f-icon { vertical-align: baseline; } /*小标签里面使用基线对齐比较好*/ /*table的相关操作功能*/ /*隐藏的工具栏*/ .hidden-tools, .hidden-tools a { display: inline-block; *display: inline; *zoom: 1; } .hidden-tools { visibility: hidden; } .bl-table tr:hover .hidden-tools { visibility: visible; } .hidden-tools a { margin-left: 2px } .btn-tool, .btn-tool:hover { background-color: transparent; border: none; } .bl-table .oper-more {} .bl-table .oper-more, .bl-table .oper-more a { font-size: 12px; } .bl-table .oper-more .menu-btn { border: #ddd solid 1px; padding: 0 6px; height: 20px; line-height: 18px; background-color: #fff; } .bl-table .oper-more .menu-btn span { vertical-align: middle } .bl-table .oper-more .menu-con { width: auto; } .bl-table .oper-more .menu-con li { height: 26px; line-height: 26px; padding: 0 10px; } /*模拟checkbox*/ .sim-checkbox {} .sim-checkbox .i-2 { display: none; } .selected .sim-checkbox .i-1 { display: none; } .selected .sim-checkbox .i-2 { display: inline-block; } .sim-checkbox:hover .f-icon, .selected .f-icon { color: #3091F2; } .bl-table .bl-ddmenu .menu-list { text-align: left; } .bl-table .bl-ddmenu li { font-weight: 100; } .caption-l-t { /*position: absolute; top:-30px; left: 0;*/ margin-top: -32px; text-align: left } @charset "utf-8"; /* *懒人CSS Bate V0.10 *作者：懒人建站 http://www.51xuediannao.com/ *2015-02-04——— */ /*---------字体、字号、颜色、小功能块---------*/ /*字体参考 font-family:"simsun"; font-family:Tahoma,Arial,Helvetica,STHeiti; font-family:Georgia, "Times New Roman","simsun"; font-family:'Microsoft YaHei UI','Microsoft YaHei',DengXian,SimSun,'Segoe UI',Tahoma,Helvetica,sans-serif; font-family:'Hiragino Sans GB','Microsoft Yahei',SimSun,Tahoma,Arial,Helvetica,STHeiti; font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif */ /*transition:color .2s linear,background-color .2s linear,border-color .2s linear,opacity .2s linear;*/ /*---------通用---------*/ body, button, input, textarea, select { color: #333; } body, button, input, textarea, select, a { font-family: 'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti; font-size: 14px; } .f-size-S, .f-size-S a, .fz-S, .fz-S a { font-size: 80% } .f-size-M, .f-size-M a, .fz-M, .fz-M a { font-size: 100% } .f-size-L, .f-size-L a, .fz-L, .fz-L a { font-size: 120% } .f-size-XL, .f-size-XL a, .fz-XL, .fz-XL a { font-size: 140% } .f-size-XXL, .f-size-XXL a, .fz-XXL, .fz-XXL a { font-size: 160% } var, .var { font-family: Arial, Helvetica, sans-serif } a { color: #333; /*transition:background-color .1s ease-in .1s,color .1s ease-in .1s;*/ } a:hover { color: #118850; text-decoration: none; } a.cur, .cur a { color: #118850; } ::-moz-selection { background: #d3d3d3; color: #555; } ::-webkit-selection { background: #d3d3d3; color: #555; } ::selection { background: #d3d3d3; color: #555; } /*文本选中以后的颜色*/ /*placeholder颜色*/ /*::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; }*/ small, .fn-time { color: #999; font-size: 12px; font-weight: 100; } .des { color: #666; } .bg-muted { background-color: #eaeaea; color: #666; } .t-muted { color: #999; } /*弱化*/ .bg-primary { background-color: #428BCA; color: #fff; } .t-primary { color: #E84C3D; } /*主要*/ .bg-warning { background-color: #FCF8E3; color: #C09853; } .t-warning { color: #C09853; } /*警告*/ .bg-danger { background-color: #f2dede; color: #b94a48; } .t-danger { color: #b94a48; } /*危险*/ .bg-error { background-color: #f2dede; color: #DD1144; } .t-error { color: #DD1144; } /*错误*/ .bg-info { background-color: #D9EDF7; color: #3A87AD; } .t-info { color: #3A87AD; } /*信息*/ .bg-success { background-color: #DFF0D8; color: #468847; } .t-success { color: #468847; } /*成功*/ .p-h { color: #666; } .h1 { font-size: 38px; } .h2 { font-size: 31px; } .h3 { font-size: 24px; } .h4 { font-size: 16px; } .h5, .h6 { font-size: 100%; } .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 100; /*text-transform: uppercase;*/ } .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-size: 65%; } .mt_-1 { margin-top: -1px; } .mb_-1 { margin-bottom: -1px; } /*上标*/ .sup, .sup-icon { font-size: 88%; position: relative; top: -0.3em; } .sup-icon { display: inline-block; *display: inline; *zoom: 1; margin-left: 2px; background: #EA7351; color: #fff !important; padding: 3px; line-height: 1; border-radius: 2px; } .w-1em, .w-2em, .w-3em, .w-4em, .w-5em, .w-6em, .w-7em, .w-8em, .w-9em, .w-10em { display: inline-block; *display: inline; *zoom: 1; } .w-1em { width: 2em; } .w-2em { width: 2em; } .w-3em { width: 3em; } .w-4em { width: 4em; } .w-5em { width: 5em; } .w-6em { width: 6em; } .w-7em { width: 7em; } .w-8em { width: 8em; } .w-9em { width: 9em; } .w-10em { width: 10em; } /*---------小功能块---------*/ code { background: #F7F7F9; border: #E1E1E8 solid 1px; color: #DD1144; padding: 2px 4px; margin-left: 2px; margin-right: 2px; border-radius: 3px; } /*pre强制换行*/ .pre { border: #CCC solid 1px; padding: 10px; background-color: #F9F9F9; font-size: 12px; line-height: 1.5; max-height: 350px; _height: 350px; overflow: auto; white-space: pre-wrap !important; word-wrap: break-word !important; *white-space: normal !important; } .pre-text, blockquote { background-color: #F9F9F9; padding: 14px 16px; border-left: #ed4040 solid 4px; /*font-size:12px; */ line-height: 1.75; margin: 0 0 16px 0; white-space: pre-wrap !important; word-wrap: break-word !important; /**white-space:normal!important;*/ font-family: "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", "SimSun,Tahoma", "Arial", "Helvetica", "STHeiti" } blockquote p:first-child { margin-bottom: 0; } /*垂直定位块*/ .bl-va-t .fn-dib, .bl-va-t .fn-btn, .bl-va-t .fn-tinput { vertical-align: top; } .bl-va-m .fn-dib, .bl-va-m .fn-btn, .bl-va-m .fn-tinput { vertical-align: middle; } /*文档区*/ .bl-text { line-height: 1.75; padding-bottom: 10px; padding-top: 10px; } .bl-text p { margin-top: 12px; } .bl-text p:first-child { margin-top: 0; } .bl-fix { position: fixed; _display: none; } /*评分
*/ /*.bl-score{ height: 26px; line-height: normal; overflow:hidden;*zoom:1; background:url(../../images/score-icon.gif) repeat-x left top; width: 130px; vertical-align: middle; margin-top: -4px; margin-right: 4px;} .score-tip{ font-size: 18px; color: #999;} .bl-score span{ float: left; width: 26px;height: 26px; } .bl-score .score-icon,.bl-score .score-icon i{display: inline-block; *display: inline;*zoom:1; vertical-align: top;} .bl-score .score-icon{ width:100%; height: 100%; cursor: pointer;} .bl-score .on i{background: url(../../images/score-icon.gif) no-repeat left bottom; width: 100%; height: 100%;} .bl-score .on .si-2{ background-position: right bottom;}*/ /*载入更多*/ div.loading { text-align: center; height: 50px; line-height: 50px; clear: both; width: 100%; } .btn-load-more { border: transparent solid 1px; color: #666; padding: 10px 0; text-align: center; margin-top: 24px; cursor: pointer; font-size: 14px; display: none; } .btn-load-more:hover { border-color: #ddd; } .btn-load-more .icon-loading { visibility: hidden; } .loading-show .icon-loading { visibility: visible } .parabolaCopy { width: 16px; height: 16px; background-color: #EB7350; border-radius: 50%; } .no-data { padding: 30px 0 50px; text-align: center; font-size: 20px; color: #999; } /*! * ui-dialog.css * Date: 2014-07-03 * https://github.com/aui/artDialog * (c) 2009-2014 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html */ .ui-dialog { *zoom: 1; _float: left; position: relative; background-color: #FFF; border: 1px solid #999; border-radius: 4px; outline: 0; background-clip: padding-box; font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out; transition: transform .15s ease-in-out, opacity .15s ease-in-out; } .ui-popup-show .ui-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .ui-popup-focus .ui-dialog { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .ui-popup-modal .ui-dialog { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 256px rgba(255, 255, 255, .3); } .ui-dialog-grid { width: auto; margin: 0; border: 0 none; border-collapse: collapse; border-spacing: 0; background: transparent; } .ui-dialog-header, .ui-dialog-body, .ui-dialog-footer { padding: 0; border: 0 none; text-align: left; background: transparent; } .ui-dialog-header { white-space: nowrap; border-bottom: 1px solid #E5E5E5; } .ui-dialog-close { position: relative; _position: absolute; float: right; top: 13px; right: 13px; _height: 26px; padding: 0 4px; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #FFF; opacity: .2; filter: alpha(opacity=20); cursor: pointer; background: transparent; _background: #FFF; border: 0; -webkit-appearance: none; } .ui-dialog-close:hover, .ui-dialog-close:focus { color: #000000; text-decoration: none; cursor: pointer; outline: 0; opacity: 0.5; filter: alpha(opacity=50); } .ui-dialog-title { margin: 0; line-height: 1.428571429; min-height: 16.428571429px; padding: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; cursor: default; } .ui-dialog-body { padding: 20px; text-align: center; } .ui-dialog-content { display: inline-block; position: relative; vertical-align: middle; *zoom: 1; *display: inline; text-align: left; } .ui-dialog-footer { padding: 0 20px 20px 20px; } .ui-dialog-statusbar { float: left; margin-right: 20px; padding: 6px 0; line-height: 1.428571429; font-size: 14px; color: #888; white-space: nowrap; } .ui-dialog-statusbar label:hover { color: #333; } .ui-dialog-statusbar input, .ui-dialog-statusbar .label { vertical-align: middle; } .ui-dialog-button { float: right; white-space: nowrap; } .ui-dialog-footer button+button { margin-bottom: 0; margin-left: 5px; } .ui-dialog-footer button { width: auto; overflow: visible; display: inline-block; padding: 6px 12px; _margin-left: 5px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .ui-dialog-footer button:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .ui-dialog-footer button:hover, .ui-dialog-footer button:focus { color: #333333; text-decoration: none; } .ui-dialog-footer button:active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .ui-dialog-footer button[disabled] { pointer-events: none; cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } .ui-dialog-footer button { color: #333333; background-color: #ffffff; border-color: #cccccc; } .ui-dialog-footer button:hover, .ui-dialog-footer button:focus, .ui-dialog-footer button:active { color: #333333; background-color: #ebebeb; border-color: #adadad; } .ui-dialog-footer button:active { background-image: none; } .ui-dialog-footer button[disabled], .ui-dialog-footer button[disabled]:hover, .ui-dialog-footer button[disabled]:focus, .ui-dialog-footer button[disabled]:active { background-color: #ffffff; border-color: #cccccc; } .ui-dialog-footer button.ui-dialog-autofocus { color: #ffffff; background-color: #428bca; border-color: #357ebd; } .ui-dialog-footer button.ui-dialog-autofocus:hover, .ui-dialog-footer button.ui-dialog-autofocus:focus, .ui-dialog-footer button.ui-dialog-autofocus:active { color: #ffffff; background-color: #3276b1; border-color: #285e8e; } .ui-dialog-footer button.ui-dialog-autofocus:active { background-image: none; } .ui-popup-top-left .ui-dialog, .ui-popup-top .ui-dialog, .ui-popup-top-right .ui-dialog { top: -8px; } .ui-popup-bottom-left .ui-dialog, .ui-popup-bottom .ui-dialog, .ui-popup-bottom-right .ui-dialog { top: 8px; } .ui-popup-left-top .ui-dialog, .ui-popup-left .ui-dialog, .ui-popup-left-bottom .ui-dialog { left: -8px; } .ui-popup-right-top .ui-dialog, .ui-popup-right .ui-dialog, .ui-popup-right-bottom .ui-dialog { left: 8px; } .ui-dialog-arrow-a, .ui-dialog-arrow-b { position: absolute; display: none; width: 0; height: 0; overflow: hidden; _color: #FF3FFF; _filter: chroma(color=#FF3FFF); border: 8px dashed transparent; } .ui-popup-follow .ui-dialog-arrow-a, .ui-popup-follow .ui-dialog-arrow-b { display: block; } .ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-a { bottom: -16px; border-top: 8px solid #7C7C7C; } .ui-popup-top-left .ui-dialog-arrow-b, .ui-popup-top .ui-dialog-arrow-b, .ui-popup-top-right .ui-dialog-arrow-b { bottom: -15px; border-top: 8px solid #fff; } .ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top-left .ui-dialog-arrow-b { left: 15px; } .ui-popup-top .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-b { left: 50%; margin-left: -8px; } .ui-popup-top-right .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-b { right: 15px; } .ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-a { top: -16px; border-bottom: 8px solid #7C7C7C; } .ui-popup-bottom-left .ui-dialog-arrow-b, .ui-popup-bottom .ui-dialog-arrow-b, .ui-popup-bottom-right .ui-dialog-arrow-b { top: -15px; border-bottom: 8px solid #fff; } .ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom-left .ui-dialog-arrow-b { left: 15px; } .ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-b { margin-left: -8px; left: 50%; } .ui-popup-bottom-right .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-b { right: 15px; } .ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-a { right: -16px; border-left: 8px solid #7C7C7C; } .ui-popup-left-top .ui-dialog-arrow-b, .ui-popup-left .ui-dialog-arrow-b, .ui-popup-left-bottom .ui-dialog-arrow-b { right: -15px; border-left: 8px solid #fff; } .ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left-top .ui-dialog-arrow-b { top: 15px; } .ui-popup-left .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-b { margin-top: -8px; top: 50%; } .ui-popup-left-bottom .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-b { bottom: 15px; } .ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-a { left: -16px; border-right: 8px solid #7C7C7C; } .ui-popup-right-top .ui-dialog-arrow-b, .ui-popup-right .ui-dialog-arrow-b, .ui-popup-right-bottom .ui-dialog-arrow-b { left: -15px; border-right: 8px solid #fff; } .ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right-top .ui-dialog-arrow-b { top: 15px; } .ui-popup-right .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-b { margin-top: -8px; top: 50%; } .ui-popup-right-bottom .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-b { bottom: 15px; } @-webkit-keyframes ui-dialog-loading { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes ui-dialog-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ui-dialog-loading { vertical-align: middle; position: relative; display: block; *zoom: 1; *display: inline; overflow: hidden; width: 32px; height: 32px; top: 50%; margin: -16px auto 0 auto; font-size: 0; text-indent: -999em; color: #666; } .ui-dialog-loading { width: 100%\9; text-indent: 0\9; line-height: 32px\9; text-align: center\9; font-size: 12px\9; } .ui-dialog-loading::after { position: absolute; content: ''; width: 3px; height: 3px; margin: 14.5px 0 0 14.5px; border-radius: 100%; box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc; -webkit-transform: rotate(360deg); -webkit-animation: ui-dialog-loading 1.5s infinite linear; transform: rotate(360deg); animation: ui-dialog-loading 1.5s infinite linear; display: none\9; } /*皮肤*/ .dialog-skin-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .dialog-skin-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .dialog-skin-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .dialog-skin-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .dialog-skin-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } @charset "utf-8"; /* *懒人CSS Bate V0.10 *作者：懒人建站 http://www.51xuediannao.com/ *2015-02-04——— */ /*---------压缩的时候复制此文件为base.dev.css,然后用压缩工具把base.dev.css压缩成base.min.css---------*/ /*这里放置的比较全，实际应用部一定会用到所有*/