/*2.1 栅格系统
Name: style_span
Example:
Explain: 栅格系统
*/
.container { padding: 0px; margin-right: auto; margin-left: auto; }
@media print {
.container { width: auto; }
}
.row.cl { }
.row { box-sizing: border-box; }
[class^="col-"], [class*=" col-"] { box-sizing: border-box; float: left; min-height: 1px; position: relative; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-5 { width: 41.66667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }
.col-offset-0 { margin-left: 0; }
.col-offset-1 { margin-left: 8.33333%; }
.col-offset-2 { margin-left: 16.66667%; }
.col-offset-3 { margin-left: 25%; }
.col-offset-4 { margin-left: 33.33333%; }
.col-offset-5 { margin-left: 41.66667%; }
.col-offset-6 { margin-left: 50%; }
.col-offset-7 { margin-left: 58.33333%; }
.col-offset-8 { margin-left: 66.66667%; }
.col-offset-9 { margin-left: 75%; }
.col-offset-10 { margin-left: 83.33333%; }
.col-offset-11 { margin-left: 91.66667%; }
/*局部模块平分*/
.col-1-1 { width: 100%; }
.col-2-1 { width: 50%; }
.col-3-1 { width: 33.333333%; }
.col-3-2 { width: 66.666667%; }
.col-4-1 { width: 25%; }
.col-4-3 { width: 75%; }
.col-5-1 { width: 20%; }
.col-5-2 { width: 40%; }
.col-5-3 { width: 60%; }
.col-5-4 { width: 80%; }
.col-6-1 { width: 16.666667%; }
.col-6-5 { width: 83.333333%; }
@media (max-width:767px) {
.responsive [class^="col-"], .responsive [class*=" col-"] { float: none !important; width: auto !important; }
.responsive [class^="col-offset-"], .responsive [class*=" col-offset-"] { margin-left: 0px !important; }
}
/*3.0 基础样式*/
/*3.1 排版*/
/*3.1.1 标题
Example：
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题
*/
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; color: inherit; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small { font-weight: 400; line-height: 1; color: #999; }
h1, h2, h3 { padding-top: 20px; padding-bottom: 10px; }
h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { font-size: 65%; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h4 small, h5 small, h6 small, h4 .small, h5 .small, h6 .small { font-size: 75%; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
/*3.1.2 强调
Example:
这是段落，向下10像素间距
小型文本，是父容器字体大小的85%
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
预格式化的文本
*/
p { margin-bottom: 10px; }
/*段落*/
small { font-size: 85%; }
/*小型文本*/
b, strong { font-weight: bold; }
/*重要的文本，加粗*/
em { font-style: italic; }
/*被强调的文本*/
i { }
/*斜体*/
u { }
/*加下划线*/
cite { font-style: normal; }
/*引用*/
mark { color: #000; background: #ff0; }
/*突出显示文本*/
var { }
/*变量*/
kbd { }
/*键盘文本*/
code { }
/*计算机代码文本*/
dfn { font-style: italic; }
/*一个定义项目*/
del { font-family: Simsun; }
/*删除线*/
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
/*预格式化的文本*/
.uppercase { text-transform: uppercase; }
/*文字大写*/
.lowercase { text-transform: lowercase; }
/*文字小写*/
.capitalize { text-transform: capitalize; }
/*首字母大写*/
.en { font-family: Arial !important; }
/*3.1.3 对齐
Name: style_text-align
Example: class="text-l|text-r|text-c|va-t|va-m|va-b"
Explain: .text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-l { text-align: left; }
.text-r { text-align: right; }
.text-c { text-align: center; }
.va * { vertical-align: sub !important; *vertical-align: middle !important; _vertical-align: middle !important; }
.va-t { vertical-align: top !important; }
.va-m { vertical-align: middle !important; }
.va-b { vertical-align: bottom !important; }
/*3.1.4 定位
Name: style_position
Example: class="pos-r|pos-a|pos-f"
Explain: .pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
*/
.pos-r { position: relative; }
.pos-a { position: absolute; }
.pos-f { position: fixed; }
/*3.1.5 浮动
Name: style_float
Example: class="l|r"
Explain: .l 左浮动|.r 右浮动
*/
.l, .f-l { float: left !important; _display: inline; }
.r, .f-r { float: right !important; _display: inline; }
[class*="span"].r,
[class*="span"].f-r { float: right; }
/*控制元素对定位的位置：居左|居右|j居上|居下*/
.left { left: 0; right: auto; }
.right { right: 0; left: auto; }
.top { top: auto; bottom: 0; }
.bottom { top: 0; bottom: auto; }
/*3.1.6 文字单行溢出省略号
Name: style_text-overflow
Example: class="text-overflow"
*/
.text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*3.1.7 线条
Name: style_line
Example: class="line"
*/
.line { font-size: 0px; line-height: 0px; border-top: solid 1px #eee; float: none; }
/*3.1.8 外边距
Name: style_margin
Example: class="mt-5|mt-10..."
Explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
*/
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.mr-3 { margin-right: 3px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mg-5 { margin: 5px; }
.mg-10 { margin: 10px; }
.mg-15 { margin: 15px; }
.mg-20 { margin: 20px; }
.mg-30 { margin: 30px; }
.mg-40 { margin: 40px; }
/*3.1.9 内填充
Name: style_padding
Example: class="pt-5|pt-10|……"
Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
*/
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pd-5 { padding: 5px; }
.pd-10 { padding: 10px; }
.pd-15 { padding: 15px; }
.pd-20 { padding: 20px; }
.pd-30 { padding: 30px; }
.pd-40 { padding: 40px; }
/*3.1.10 边框，css3圆角
Name: style-border
Example: class="bk_gray radius"
Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.bk-gray { border: solid 1px #eee; }
.radius { border-radius: 4px; overflow: hidden; }
.radius-15 { border-radius: 15px; overflow: hidden; }
.size-MINI.radius { border-radius: 3px; }
.size-L.radius { border-radius: 5px; }
.size-XL.radius { border-radius: 6px; }
.round { border-radius: 50%; overflow: hidden; }
/*3.1.11 css3阴影
Name: style_shadow
Example: class="box_shadow|text-shadow"
Explain: box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
text-shadow 文字阴影
*/
.box-shadow { -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); box-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.text-shadow { -webkit-text-shadow: 0 0 2px rgba(0,0,0,0.2); text-shadow: 0 0 2px rgba(0,0,0,0.2); }
/*3.1.12 行内分割竖线
Name: style_pipe
Example: |
*/
.pipe { margin: 0 5px; color: #CCC; font-size: 10px !important; }
/*3.1.13 文字尺寸
Name: style_font-size
Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
Explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
*/
.f-12 { font-size: 12px; }
.f-14 { font-size: 14px; }
.f-16 { font-size: 16px; }
.f-18 { font-size: 18px; }
.f-20 { font-size: 20px; }
.f-24 { font-size: 24px; }
.f-26 { font-size: 26px; }
.f-28 { font-size: 28px; }
.f-30 { font-size: 30px; }
/*3.1.14 文字行距
Name: mod_line-height
Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
Explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
*/
.lh-16 { line-height: 16px; }
.lh-18 { line-height: 18px; }
.lh-20 { line-height: 20px; }
.lh-22 { line-height: 22px; }
.lh-24 { line-height: 24px; }
.lh-26 { line-height: 26px; }
.lh-28 { line-height: 28px; }
.lh-30 { line-height: 30px; }
/*3.1.15 文字颜色
Name: style_color
Example: class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
Explain: 主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/
/*全局默认链接颜色*/
body { background-color: #fff; color: #333; }
.bg-fff { background-color: #fff; }
a { color: #333; }
a:hover { color: #06c; }
/*主要颜色*/
.c-primary, .c-primary a, a.c-primary { color: #5a98de; }
.c-primary a:hover, a.c-primary:hover { color: #5a98de; }
/*次主色*/
.c-secondary, .c-secondary a, a.c-secondary { color: #555; }
.c-secondary a:hover, a.c-secondary:hover { color: #555; }
/*强调色—成功*/
.c-success, .c-success a, a.c-success { color: #5eb95e; }
.c-success a:hover, a.c-success:hover { color: #5eb95e; }
/*强调色—危险*/
.c-danger, .c-danger a, a.c-danger { color: #dd514c; }
.c-danger a:hover, a.c-danger:hover { color: #dd514c; }
/*强调色—警告*/
.c-warning, .c-warning a, a.c-warning { color: #f37b1d; }
.c-warning a:hover, a.c-warning:hover { color: #f37b1d; }
/*强调色—错误*/
.c-error, .c-error a, a.c-error { color: #c00; }
.c-error a:hover, a.c-error:hover { color: #c00; }
/*辅助色—浅黑*/
.c-333, .c-333 a, a.c-333 { color: #333; }
.c-333 a:hover, a.c-333:hover { color: #333; }
/*辅助色—灰色*/
.c-666, .c-666 a, a.c-666 { color: #666; }
.c-666 a:hover, a.c-666:hover { color: #666; }
.c-999, .c-999 a, a.c-999 { color: #999; }
.c-999 a:hover, a.c-999:hover { color: #999; }
/*标准色—红色*/
.c-red, .c-red a, a.c-red { color: red; }
.c-red a:hover, a.c-red:hover { color: red; }
/*标准色—绿色*/
.c-green, .c-green a, a.c-green { color: green; }
.c-red a:hover, a.c-red:hover { color: green; }
/*标准色—蓝色*/
.c-blue, .c-blue a, a.c-blue { color: blue; }
.c-blue a:hover, a.c-blue:hover { color: blue; }
/*标准色—白色*/
.c-white, .c-white a, a.c-white { color: white; }
.c-white a:hover, a.c-white:hover { color: white; }
/*标准色—黑色*/
.c-black, .c-black a { color: black; }
.c-black a:hover, a.c-black:hover { color: black; }
/*标准色—橙色*/
.c-orange, .c-orange a, a.c-orange { color: orange; }
.c-orange a:hover, a.c-orange:hover { color: orange; }
/*3.1.19 引用
Example: 这是引用的内容
Explain:
*/
blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #eee; }
blockquote p { margin-bottom: 0; font-size: 17.5px; font-weight: 300; line-height: 1.25; }
blockquote small { display: block; line-height: 20px; color: #999; }
blockquote small:before { content: '\2014 \00A0'; }
blockquote.text-r { padding-right: 15px; padding-left: 0; border-right: 5px solid #eee; border-left: 0; }
blockquote.text-r p, blockquote.text-r small { text-align: right; }
blockquote.text-r small:before { content: ''; }
blockquote.text-r small:after { content: '\00A0 \2014'; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
q { /*短的引用*/ quotes: "\201C" "\201D" "\2018" "\2019"; }
/*3.1.20 上标，下标
Example: 2 2
Explain: 上标|下标
*/
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/*3.1.21 内容样式
Name: style_content
Example:
Explain: 内容样式
*/
.content { position: relative; font-size: 14px; line-height: 1.6; overflow: hidden; text-align: left; }
.content h3 { margin-top: 20px; font-size: 16px; }
.content p { margin-top: 20px; }
.indent { text-indent: 2em; }
.content img { max-width: 100%; }
.content ul { text-indent: 2em; }
@media (max-width: 480px) {
.content img { max-width: 100% !important; height: auto !important; width: expression(this.width > 320 ? "320px" : this.width) !important; }
*html .content img { width: expression(this.width>320&&this.width>this.height?320:"auto"); }
}
/*3.1.22 列表
Name: style_ulolli
Example:
- 有序列表
- 有序列表
- 有序列表
Explain:
*/
ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; }
ul.inline, ol.inline { margin-left: 0; list-style: none; }
ul.inline > li, ol.inline > li { display: inline-block; *display: inline; padding-right: 5px; padding-left: 5px; *zoom: 1; }
.tlist li { line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/*禁止换行*/
.dot-1 { padding-left: 10px; background: url(../images/dot_1.gif) no-repeat 3px center; }
/*圆点*/
.box-1 { padding-left: 10px; background: url(../images/box_1.gif) no-repeat 3px center; }
/*小方块*/
.jt-1 { padding-left: 18px; background: url(../images/jt_1.gif) no-repeat 3px center; }
/*箭头1*/
.jt-2 { padding-left: 18px; background: url(../images/jt_2.gif) no-repeat 3px center; }
/*箭头2*/
.jt-3 { padding-left: 18px; background: url(../images/jt_3.gif) no-repeat 3px center; }
/*箭头3*/
/*排行榜*/
/*- 1排行榜列表12
*/
.top-list li { height: 20px; line-height: 20px; margin-bottom: 15px; overflow: hidden; padding-left: 30px; position: relative; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.top-list em { background-color: #F8F8F8; border: 1px solid #EBEBEB; color: #333; height: 18px; left: 0; line-height: 18px; position: absolute; text-align: center; top: 0; width: 20px; font-style: normal; }
.top-list .top em { background-color: #390; border: none; color: #fff; height: 20px; line-height: 20px; width: 22px; }
.top-list .date { color: #999; font-size: 12px; position: absolute; right: 0; top: 0; }
.tlist .time { font-size: 12px; font-family: Arial; color: #999; }
.listview { }
/*横向手机 竖向平板*/
@media (max-width: 767px) {
.tlist li { position: relative; font-size: 18px; border-bottom: 1px solid #eee; }
.tlist li a { display: block; padding: 0.7em 30px 0.7em 12px; }
.dot_1 { padding-left: 0px; }
.night .tlist li { border-bottom: 1px solid #1F1F1F; }
.tlist .time { display: none; }
.tlist i { background: url(../images/article/arrow.png) no-repeat 0 0; background-size: 9px auto; height: 15px; margin-top: -7px; position: absolute; right: 10px; top: 50%; width: 9px; }
.night .tlist i { background-position: 0 -75px; }
}
/*3.1.23 描述
Name: style_dldtdd
Example: - H-ui
- 基于Bootstrap框架的改进扩展的前端框架
Explain: .dl-horizontal 水平描述，默认不加为垂直模式。
*/
.dl-horizontal.cl { }
.dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.dl-horizontal dd { margin-left: 180px; }
/*3.1.24 隐藏 显示
Name: style_display
Example: 隐藏的内容
显示的内容
Explain: .hide 隐藏 / .show 显示
*/
.hide { display: none; }
[hidden] { display: none; }
.hidden { display: none !important; visibility: hidden !important; }
.f-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
[class*="span"].hide, .row-fluid [class*="span"].hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }
/*3.1.25 尺寸 新增尺寸全局类名，用于表单、按钮、表格、头像、标签等元素上，要与元素一起配合使用，方能看到效果*/
.size-MINI { }
/*迷你*/
.size-S { }
/*小*/
.size-M { }
/*中 缺省默认尺寸，可以不写，可以理解为：均码*/
.size-L { }
/*L*/
.size-XL { }
/*大*/
.size-XXL { }
/*加大*/
.size-XXXL { }
/*超大*/
.input-text, .btn, .input-text.size-M, .btn.size-M { font-size: 14px; height: 31px; line-height: 1.42857; padding: 4px; }
/*默认为M，可以不写，可以理解为：均码*/
a.btn, a.btn.size-M, span.btn, span.btn.size-M { line-height: 21px; }
.btn, .btn.size-M { padding: 4px 12px; }
.input-text.size-MINI, .btn.size-MINI { font-size: 14px; height: 23px; padding: 1px 2px; line-height: 1.42857; }
/*迷你*/
a.btn.size-MINI, span.btn.size-MINI { line-height: 21px; }
.btn.size-MINI { padding: 1px 4px; }
.input-text.size-S, .btn.size-S { font-size: 14px; height: 27px; padding: 3px; line-height: 1.42857; }
/*小*/
a.btn.size-S, span.btn.size-S { line-height: 19px; }
.btn.size-S { padding: 3px 8px; }
.input-text.size-L, .btn.size-L { font-size: 16px; height: 41px; padding: 8px; }
/*大*/
a.btn.size-L, span.btn.size-L { line-height: 23px; }
.btn.size-L { padding: 8px 16px; }
.input-text.size-XL, .btn.size-XL { font-size: 18px; height: 48px; padding: 10px; }
/*特大*/
a.btn.size-XL, span.btn.size-XL { line-height: 26px; }
.btn.size-XL { padding: 10px 24px; }
@media (max-width: 767px) {
.responsive .input-text.size-MINI, .responsive .btn.size-MINI { height: auto; }
.responsive .input-text.size-S, .responsive .btn.size-S { font-size: 14px; height: auto; }
.responsive .input-text, .btn, .responsive .input-text.size-M, .responsive .btn.size-M { font-size: 16px; height: auto; }
.responsive .input-text.size-L, .responsive .btn.size-L { font-size: 18px; height: auto; }
.responsive .input-text.size-XL, .responsive .btn.size-XL { font-size: 20px; height: auto; }
}
/*3.2 代码
Name: style_pre
Example: 转义过的代码
Explain: code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code { padding: 0 3px 2px; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; }
pre .title, pre .keyword, pre .body, pre .des { color: #333; }
/*关键词*/
pre { display: block; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; padding: 9.5px; margin-bottom: 10px; font-size: 12px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; color: #333; }
.prettyprint { margin-bottom: 20px; padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8; }
.prettyprint .com { color: #998; font-style: italic; }
/*注释*/
.prettyprint .tag { color: #007; }
/*标签*/
.prettyprint .lit { color: #195f91; }
.prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #93a1a1; }
/*等于*/
.prettyprint .fun { color: #dc322f; }
.prettyprint .str, .prettyprint .atv { color: #D14; }
/*值*/
.prettyprint .kwd, .prettyprint .prettyprint .tag { color: #1e347b; }
.prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var { color: teal; }
/*文档声明，属性*/
.prettyprint .pln { color: #48484c; }
.prettyprint.linenums { box-shadow: inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0; }
.pre-scrollable { max-height: 340px; overflow-y: scroll; }
ol.linenums { list-style: decimal outside none; margin-left: 20px; }
ol.linenums li { line-height: 28px; padding-left: 10px; }
pre ol.linenums { margin: 0 0 0 33px; }
pre ol.linenums li { padding-left: 12px; color: #bbb; line-height: 18px; text-shadow: 0 1px 0 #fff; }
@media (max-width: 767px) {
pre ol.linenums { margin-left: 0; list-style: none; }
ol.linenums li { padding-left: 0; }
.prettyprint.linenums { box-shadow: inset 0px 0 0 #fbfbfc,inset 0px 0 0 #ececf0; }
}
/*3.3 表格
Name: style_table
Example:
Explain: 表格，None无样式，仅仅有列和行|.table行与行之间以水平线相隔|.table-bordered表格外围均有外边框|.table-striped奇数行背景设为浅灰色|.table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table { width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0;}
table th { text-align: left; font-weight: 400; }
/*带水平线*/
.table thead th { padding: 8px; line-height: 20px; word-break: break-all; font-weight: bold;font-size:14px; }
.table tfoot th { padding: 5px; line-height: 20px; word-break: break-all; }
.table td { padding: 5px; line-height: 20px; word-break: break-all; }
.table td { text-align: left; }
.table tbody tr.success > td { background-color: #dff0d8; }
.table tbody tr.error > td { background-color: #f2dede; }
.table tbody tr.warning > td { background-color: #fcf8e3; }
.table tbody tr.info > td { background-color: #d9edf7; }
.table tbody + tbody { border-top: 2px solid #ddd; }
.table .table { background-color: #fff; }
/*带横向分割线*/
.table-border { border-top: 1px solid #ddd; }
.table-border th, .table-border td { border-bottom: 1px solid #ddd; }
/*th带背景*/
.table-bg thead th { background-color: #F5FAFE; }
/*带外边框*/
.table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; border-left: 0; }
.table-bordered th, .table-bordered td { border-left: 1px solid #ddd; }
.table-border.table-bordered { border-bottom: 0; }
/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }
/*竖直方向padding缩减一半*/
.table-condensed th,
.table-condensed td { padding: 4px 5px; }
/*鼠标悬停样式*/
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th { background-color: #fffbbb; }
/*鼠标选择整行样式*/
.table tbody tr.selected td { background-color: #F3F3F3; }
/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,
.table tbody tr.active > td,
.table tbody tr.active > th,
.table tbody tr .active { background-color: #F5F5F5 !important; }
/*成功或积极*/
.table tbody tr.success,
.table tbody tr.success > td,
.table tbody tr.success > th,
.table tbody tr .success { background-color: #DFF0D8 !important; }
/*警告或出错*/
.table tbody tr.warning,
.table tbody tr.warning > td,
.table tbody tr.warning > th,
.table tbody tr .warning { background-color: #FCF8E3 !important; }
/*危险*/
.table tbody tr.danger,
.table tbody tr.danger > td,
.table tbody tr.danger > th,
.table tbody tr .danger { background-color: #F2DEDE !important; }
/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th, .table .text-c td { text-align: center; }
/*整行居中*/
.table .text-r th, .table .text-r td { text-align: right; }
/*整行居右*/
.table th.text-l, .table td.text-l { text-align: left !important; }
/*单独列居左*/
.table th.text-c, .table td.text-c { text-align: center !important; }
/*单独列居中*/
.table th.text-r, .table td.text-r { text-align: right !important; }
/*单独列居右*/
@media screen and (max-width: 767px) {
.table { border: 0; }
.table thead { display: none; }
.table tr { margin-bottom: 10px; display: block; border: 1px solid #ddd; border-bottom: 2px solid #ddd; }
.table th { display: block; text-align: left; font-size: 13px; border-bottom: 1px dotted #ccc; }
.table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; min-height:20px; }
.table th.text-l, .table td.text-l { text-align: right !important; }
.table th.text-c, .table td.text-c { text-align: right !important; }
.table-bordered th, .table-bordered td { border-left: 0px; }
.table td:last-child { border-bottom: 0; }
.table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; }
}
/*datatable*/
table.dataTable { width: 100%; clear: both; border-collapse: separate; border-spacing: 0; }
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { cursor: pointer; background-repeat: no-repeat; background-position: right center; }
table.dataTable thead .sorting { background-image: url(../../images/web/dataTable/sort_both.png); }
table.dataTable thead .sorting_asc { background-image: url(../../images/web/dataTable/sort_asc.png); }
table.dataTable thead .sorting_desc { background-image: url(../../images/web/dataTable/sort_desc.png); }
.dataTable td.sorting_1 { background-color: #f5fafe; }
.dataTables_wrapper { position: relative; clear: both; *zoom: 1; zoom: 1; }
.dataTables_wrapper .dataTables_length { float: left; padding-bottom: 10px; }
.dataTables_wrapper .dataTables_length .select { width: 60px; }
.dataTables_wrapper .dataTables_filter { float: right; text-align: right; }
.dataTables_wrapper .dataTables_filter .input-text { width: auto; }
.dataTables_wrapper .dataTables_info { clear: both; float: left; margin-top: 10px; font-size: 14px; color: #666; }
.dataTables_wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
.dataTables_wrapper .dataTables_paginate { float: right; margin-top: 10px; text-align: right; border: 1px solid #ccc; border-radius: 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { cursor: pointer; display: inline-block; text-align: center; text-decoration: none; color: #666; height: 30px; line-height: 30px; text-decoration: none; margin: 0; padding: 0 10px; font-size: 14px; border-left: 1px #ccc solid; *zoom: 1; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #5a98de; color: #fff; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #5a98de; color: #fff; cursor: default; }
.dataTables_wrapper .dataTables_paginate .disabled, .dataTables_wrapper .dataTables_paginate .disabled:hover { color: #999; cursor: default; background-color: transparent; }
.dataTables_wrapper .dataTables_paginate .first { border-left: 0px; }
.dataTables_wrapper .dataTables_processing { position: absolute; z-index: 9999; width: 200px; top: 0; left: 50%; padding: 5px 10px; margin-left: -100px; border-radius: 5px; color: #fff; background: #5a98de; }
.dataTables_wrapper .dataTables_paginate .ellipsis { display: inline-block; height: 30px; line-height: 30px; padding: 0 1em; border-left: 1px #ccc solid; }
@media screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
.dataTables_wrapper .dataTables_paginate { margin-top: 0.5em; }
}
@media screen and (max-width: 640px) {
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { float: none; text-align: center; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 0.5em; }
}
/*表格尺寸*/
.table.size-MINI { }
/*迷你*/
.table.size-S { }
/*小*/
.table.size-M { }
/*中*/
.table.size-L { }
/*默认为L，可以不写，可以理解为：均码*/
.table.size-XL { }
/*大*/
.table.size-XXL { }
/*加大*/
.table.size-XXXL { }
/*超大*/
/*让表格支持响应式*/
/*
*/
@media (max-width: 767px) {
table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; border: 1px solid #ddd; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; }
table-responsive > .table { margin-bottom: 0; }
table-responsive > .table > thead > tr > th,
table-responsive > .table > tbody > tr > th,
table-responsive > .table > tfoot > tr > th,
table-responsive > .table > thead > tr > td,
table-responsive > .table > tbody > tr > td,
table-responsive > .table > tfoot > tr > td { white-space: nowrap; }
table-responsive > .table-bordered { border: 0; }
table-responsive > .table-bordered > thead > tr > th:first-child,
table-responsive > .table-bordered > tbody > tr > th:first-child,
table-responsive > .table-bordered > tfoot > tr > th:first-child,
table-responsive > .table-bordered > thead > tr > td:first-child,
table-responsive > .table-bordered > tbody > tr > td:first-child,
table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; }
table-responsive > .table-bordered > thead > tr > th:last-child,
table-responsive > .table-bordered > tbody > tr > th:last-child,
table-responsive > .table-bordered > tfoot > tr > th:last-child,
table-responsive > .table-bordered > thead > tr > td:last-child,
table-responsive > .table-bordered > tbody > tr > td:last-child,
table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; }
table-responsive > .table-bordered > tbody > tr:last-child > th,
table-responsive > .table-bordered > tfoot > tr:last-child > th,
table-responsive > .table-bordered > tbody > tr:last-child > td,
table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; }
}
/*3.4.1 input,textarea 文本域 文本区域*/
/*默认状态*/
.input-text, .textarea { box-sizing: border-box; border: solid 1px #ddd; width: 100%; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; }
.textarea { height: 100px; resize: none; font-size: 14px; padding: 4px; }
.textarea-numberbar { position: absolute; right: 20px; bottom: 5px; z-index: 1; margin-bottom: 0; }
.textarea-length { font-style: normal; }
.input-text:hover,
.textarea:hover { border: solid 1px #3bb4f2; }
/*得到焦点后*/
.input-text.focus,
.textarea.focus { border: solid 1px #0f9ae0 \9; border-color: rgba(82,168,236,0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); }
/*不可点击*/
.input-text.disabled, .textarea.disabled,
.input-text.disabled.focus,
.textarea.disabled.focus { background-color: #ededed; cursor: default; border-color: #ddd; -webkit-box-shadow: inset 0 2px 2px #e8e7e7; -moz-box-shadow: inset 0 2px 2px #e8e7e7; box-shadow: inset 0 2px 2px #e8e7e7; }
/*只读状态*/
.input-text.disabled,
.textarea.disabled { background-color: #e6e6e6; cursor: default; }
/*阴影*/
.input-text.box-shadow,
.textarea.box-shadow { -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); }
/*行内元素*/
.input-text.inline { display: inline-block; width: auto; }
/*3.4.4 input-file 文件上传
Example:
浏览文件
Explain：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。
*/
.btn-upload { position: relative; display: inline-block; height: 31px; *display: inline; overflow: hidden; vertical-align: middle; cursor: pointer; }
.upload-url { cursor: pointer; width: 300px; }
.input-file { position: absolute; right: 0; top: 0; cursor: pointer; z-index: 1; font-size: 30em; opacity: 0; filter: alpha(opacity=0); }
.form-group .upload-btn { margin-left: -1px; }
.btn-upload .icon-add, .btn-upload .icon-minus { cursor: pointer; display: inline-block; font-family: Arial; font-size: 30px; height: 31px; line-height: 31px; text-align: center; vertical-align: middle; width: 36px; }
/* Fixes for IE < 8 */
@media screen\9 {
.btn-upload input { filter: alpha(opacity=0); font-size: 100%; height: 100%; }
}
.fileinput-progress { height: 10px; width: 90%; border: 1px #ccc solid; margin-top: 5px; display: none; border-radius: 2px; }
.fileinput-progress .progress-bar { height: 10px; width: 50%; background: url("../images/progressbar.gif") repeat-x !important; filter: none; }
.fileinput-files { border: 1px #ccc dotted; padding: 3px; margin-top: 5px; display: none; }
.fileinput-files div { border: 1px #ccc solid; width: 130px; height: 158px; padding: 1px; overflow: hidden; float: left; margin: 2px; }
.fileinput-files div i { display: block; height: 20px; font-size: 12px; font-style: normal; line-height: 20px; padding: 2px 5px; overflow: hidden; background: rgba(0,0,0,0.5); color: #fff; }
.fileinput-files div a.thumb { width: 120px; height: 100px; display: block; text-align: center; padding: 5px; }
.fileinput-files div span { display: block; height: 20px; line-height: 20px; }
.fileinput-files div a.delf { display: block; color: #fff; background: #dd514c; text-align: center; padding: 2px 5px; font-size: 18px; overflow: hidden; }
.fileinput-files div a.delf:hover { background: #aa2924; text-decoration: none; color: #fff; }
.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle { margin-bottom: 5px; }
.progress-animated .progress-bar,
.progress-animated .bar { background: url("../images/progressbar.gif") !important; filter: none; }
.fileupload-process { float: right; display: none; }
.fileupload-processing .fileupload-process,
.files .processing .preview { display: block; width: 32px; height: 32px; background: url("../images/loading-f.gif") center no-repeat; background-size: contain; }
.files audio, .files video { max-width: 300px; }
@media (max-width: 767px) {
.fileupload-buttonbar .toggle,
.files .toggle,
.files .btn span { display: none; }
.files .name { width: 80px; word-wrap: break-word; }
.files audio,
.files video { max-width: 80px; }
.files img,
.files canvas { max-width: 100%; }
}
@media (max-width: 767px) {
.upload-btn { display: none; }
.upload-url { display: none; }
}
/*3.4.3 select 下拉框
Explain:
select 是表单元素中最难美化的一个，有两种美化方式：
1、修改源生的，修改有限，只能修改个边框，背景，字体。优点：程序方便操作；缺点：丑，浏览器之间存在很大差异。
2、将源生的隐藏掉，用其他元素（如div li）通过js模拟下拉交互，然后再传值给源生的select。优点：好看，兼容好；缺点：代码冗余，依赖JS，不方便操作
*/
/*方法一、修改源生*/
.selectbox { border: solid 1px #ccc; box-sizing: border-box; vertical-align: middle; display: inline-block; background: #fff; }
.select-box { border: solid 1px #ccc; box-sizing: border-box; vertical-align: middle; display: inline-block; background: #fff; overflow: hidden; }
.select { border: solid 1px #ccc; box-sizing: border-box; cursor: pointer; line-height: normal; font-weight: normal; width: 100%; overflow: hidden; background: #fff; }
.select-box .select, .selectbox .select { border: none; }
.select-box.inline, .select-box.inline .select, .selectbox.inline, .selectbox.inline .select { width: auto; }
.select-box, .selectbox,
.select-box.size-M { height: 31px; padding: 4px 5px; }
.select, .size-M .select { font-size: 14px; }
.select-box.size-MINI { height: 23px; padding: 0px 5px; }
.size-MINI .select { font-size: 12px; }
.select-box.size-S { height: 27px; padding: 3px 5px; }
.selectbox.size-S { height: 27px; padding: 0px 5px; }
.size-S .select { font-size: 12px; height: 20px; }
.select-box.size-L { height: 41px; padding: 8px 5px; }
.size-L .select { font-size: 16px; }
.select-box.size-XL { height: 48px; padding: 10px 5px; }
.size-XL .select { font-size: 18px; }
@media (max-width: 767px) {
.responsive .select-box { border: none; }
.responsive .select-box .select, .responsive .select { border: solid 1px #ccc; padding: 10px; font-size: 16px; }
.responsive .select-box, .responsive .select-box.size-M, .responsive .select-box.size-MINI, .responsive .select-box.size-S, .responsive .select-box.size-L, .responsive .select-box.size-XL { height: auto; padding: 0; }
}
/*3.4.5 表单布局*/
label, .placeholder { }
.form legend { /*font-size: 20px;*/ }
/*表单名称*/
.form .row { margin-top: 15px; }
/*表单行*/
.form-label { display: block; color: #555; }
/*表单标题*/
.formControls { position: relative; }
/*表单控制区*/
.formControls > * { vertical-align: middle; }
.placeholder { position: absolute; left: 4px; top: 4px; color: #c6c6c6; cursor: text; }
/*表单默认值*/
.form-horizontal .form-label { margin-top: 3px; cursor: text; text-align: right; }
.form-horizontal .Validform_checktip { margin-top: 5px; }
/*设置placeholder颜色*/
::-webkit-input-placeholder { color: #b3b3b3; }
/* WebKit browsers */
:-moz-placeholder { color: #b3b3b3; }
/* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #b3b3b3; }
/* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #b3b3b3; }
/* Internet Explorer 10+ */
.placeholder { color: #adb0be; position: absolute; z-index: 9; }
/*不兼容placeholder属性的浏览器，可使用表单默认值*/
@media (max-width: 767px) {
.form-horizontal .form-label { text-align: left; }
}
/*3.4.6 表单验证*/
/*文本框的错误状态*/
.Validform_error { background-color: #fbe2e2; border-color: #c66161; color: #c00; }
.Validform_wrong, .Validform_right, .Validform_warning { display: inline-block; height: 20px; font-size: 12px; vertical-align: middle; padding-left: 25px; }
/*错误*/
.Validform_wrong { background: url(../images/icon_error_s.png) no-repeat 0 center; color: #ef392b; }
/*正确*/
.Validform_right { background: url(../images/icon_right_s.png) no-repeat 0 center; }
/*警告*/
.Validform_warning { background: url(../images/icon_warning_s.png) no-repeat 0 center; color: #777; }
/*密码等级*/
.passwordStrength b { font-weight: 400; }
.passwordStrength b, .passwordStrength span { display: inline-block; vertical-align: middle; line-height: 16px; line-height: 18px\9; height: 16px; }
.passwordStrength span { width: 57px; text-align: center; background-color: #d0d0d0; border-right: 1px solid #fff; }
.passwordStrength .last { border-right: none; }
.passwordStrength .bgStrength { color: #fff; background-color: #fcc900; }
/*Validform对话框*/
#Validform_msg { font-size: 14px; width: 300px; -webkit-box-shadow: 2px 2px 3px #aaa; -moz-box-shadow: 2px 2px 3px #aaa; background: rgba(0,0,0,0.6); position: absolute; top: 0px; right: 50px; z-index: 99999999999; display: none; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); border-radius: 5px; }
#Validform_msg .iframe { position: absolute; left: 0px; top: -1px; z-index: -1; }
#Validform_msg .Validform_title { font-size: 14px; padding: 5px 10px 0 10px; text-align: left; color: #fff; position: relative; }
#Validform_msg a.Validform_close:link, #Validform_msg a.Validform_close:visited { position: absolute; right: 8px; top: 5px; color: #fff; text-decoration: none; font-family: Verdana; }
#Validform_msg a.Validform_close:hover { color: #fff; }
#Validform_msg .Validform_info { padding: 10px 10px 15px 20px; text-align: left; color: #fff; }
@media (max-width: 767px) {
.responsive .Validform_checktip { margin-top: 10px; }
}
/*3.5 按钮
Name: style_button
Example:
Explain: btn-primary：主要|btn-info：信息|btn-success：成功|btn-warning：警告|btn-danger：危险|btn-inverse：反向|btn-link：链接
*/
/*关闭*/
.close { font-size: 20px; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }
/*按钮*/
.btn { display: inline-block; box-sizing: border-box; cursor: pointer; text-align: center; font-weight: 400; white-space: nowrap; vertical-align: middle; -moz-padding-start: npx; -moz-padding-end: npx; border: solid 1px #ddd; background-color: #fff; width: auto; *zoom: 1; *overflow: visible; -webkit-transition: background-color .1s linear; -moz-transition: background-color .1s linear; -o-transition: background-color .1s linear; transition: background-color .1s linear; }
a.btn:hover, a.btn:focus, a.btn:active, a.btn.active, a.btn.disabled, a.btn[disabled] { text-decoration: none; }
.btn:active, .btn.active { background-color: #ccc; }
.btn:first-child { *margin-left: 0; }
.btn.active, .btn:active { -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; }
/*默认——灰色 通常用于取消*/
.btn-default { background-color: #e6e6e6; border-color: #e6e6e6; }
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active { color: #333; background-color: #c7c7c7; border-color: #c7c7c7; }
/*主要——主色 通常用于确定、提交、购买、支付等*/
.btn-primary { color: #fff; background-color: #5a98de; border-color: #5a98de; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active { color: #fff; background-color: #0a6999; border-color: #0a6999; }
/*次要按钮*/
.btn-secondary { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; }
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active { color: #fff; background-color: #0f9ae0; border-color: #0f9ae0; }
/*成功*/
.btn-success { color: #fff; background-color: #5eb95e; border-color: #5eb95e; }
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active { color: #fff; background-color: #429842; border-color: #429842; }
/*警告*/
.btn-warning { color: #fff; background-color: #f37b1d; border-color: #f37b1d; }
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active { color: #fff; background-color: #c85e0b; border-color: #c85e0b; }
/*危险*/
.btn-danger { color: #fff; background-color: #dd514c; border-color: #dd514c; }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active { color: #fff; background-color: #c62b26; border-color: #c62b26; }
/*链接*/
.btn-link { color: #0e90d2; cursor: pointer; border-color: transparent; background-color: transparent; }
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active { color: #095f8a; text-decoration: underline; background-color: transparent; }
/*禁用状态*/
.btn.disabled { cursor: not-allowed; background-image: none; opacity: .65; filter: alpha(opacity=65); box-shadow: none; pointer-events: none; }
/*块级按钮*/
.btn-block { -moz-box-sizing: border-box; display: block; padding-left: 0; padding-right: 0; width: 100%; }
/* Outline buttons */
.btn-link-outline,.btn-lock-outline,.btn-del-outline { color: #0e90d2; cursor: pointer; background-color: #fff;border-color: #e6e6e6; }
.btn-lock-outline{color: #f37b1d;}
.btn-lock-outline1{color:#009749;}
.btn-lock-outline1:hover,
.btn-lock-outline1:focus,
.btn-lock-outline1:active,
.btn-lock-outline1.active { color: #fff; text-decoration: underline; background-color: #009749; }
.btn-lock-outline2{color:#7A57D1;}
.btn-lock-outline2:hover,
.btn-lock-outline2:focus,
.btn-lock-outline2:active,
.btn-lock-outline2.active { color: #fff; text-decoration: underline; background-color: #7A57D1; }
.btn-lock-outline3{color:#D25565;}
.btn-lock-outline3:hover,
.btn-lock-outline3:focus,
.btn-lock-outline3:active,
.btn-lock-outline3.active { color: #fff; text-decoration: underline; background-color:#D25565; }
.btn-link-outline:hover,
.btn-link-outline:focus,
.btn-link-outline:active,
.btn-link-outline.active { color: #fff; text-decoration: underline; background-color: #0e90d2; }
.btn-lock-outline:hover,
.btn-lock-outline:focus,
.btn-lock-outline:active,
.btn-lock-outline.active { color: #fff; text-decoration: underline; background-color: #f37b1d; }
.btn-del-outline:hover,
.btn-del-outline:focus,
.btn-del-outline:active,
.btn-del-outline.active { color: #fff; text-decoration: underline; background-color: #dd514c; }
.btn-primary-outline { color: #5a98de; background-color: transparent; background-image: none; border-color: #5a98de; }
.btn-primary-outline.active, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline:focus, .open > .btn-primary-outline.dropdown-toggle { color: #fff; background-color: #5a98de; border-color: #5a98de; }
.btn-primary-outline:hover { color: #fff; background-color: #5a98de; border-color: #5a98de; }
.btn-primary-outline.disabled.focus, .btn-primary-outline.disabled:focus, .btn-primary-outline:disabled.focus, .btn-primary-outline:disabled:focus, fieldset[disabled] .btn-primary-outline.focus, fieldset[disabled] .btn-primary-outline:focus { border-color: #0a6999; }
.btn-primary-outline.disabled:hover, .btn-primary-outline:disabled:hover, fieldset[disabled] .btn-primary-outline:hover { border-color: #0a6999; }
.btn-secondary-outline { color: #3bb4f2; background-color: transparent; background-image: none; border-color: #3bb4f2; }
.btn-secondary-outline.active, .btn-secondary-outline.focus, .btn-secondary-outline:active, .btn-secondary-outline:focus, .open > .btn-secondary-outline.dropdown-toggle { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; }
.btn-secondary-outline:hover { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; }
.btn-secondary-outline.disabled.focus, .btn-secondary-outline.disabled:focus, .btn-secondary-outline:disabled.focus, .btn-secondary-outline:disabled:focus, fieldset[disabled] .btn-secondary-outline.focus, fieldset[disabled] .btn-secondary-outline:focus { border-color: #0f9ae0; }
.btn-secondary-outline.disabled:hover, .btn-secondary-outline:disabled:hover, fieldset[disabled] .btn-secondary-outline:hover { border-color: #0f9ae0; }
.btn-success-outline { color: #5eb95e; background-color: transparent; background-image: none; border-color: #5eb95e; }
.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .open > .btn-success-outline.dropdown-toggle { color: #fff; background-color: #5eb95e; border-color: #5eb95e; }
.btn-success-outline:hover { color: #fff; background-color: #5eb95e; border-color: #5eb95e; }
.btn-success-outline.disabled.focus, .btn-success-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-success-outline:disabled:focus, fieldset[disabled] .btn-success-outline.focus, fieldset[disabled] .btn-success-outline:focus { border-color: #429842; }
.btn-success-outline.disabled:hover, .btn-success-outline:disabled:hover, fieldset[disabled] .btn-success-outline:hover { border-color: #429842; }
.btn-warning-outline { color: #f37b1d; background-color: transparent; background-image: none; border-color: #f37b1d; }
.btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .open > .btn-warning-outline.dropdown-toggle { color: #fff; background-color: #f37b1d; border-color: #f37b1d; }
.btn-warning-outline:hover { color: #fff; background-color: #f37b1d; border-color: #f37b1d; }
.btn-warning-outline.disabled.focus, .btn-warning-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-warning-outline:disabled:focus, fieldset[disabled] .btn-warning-outline.focus, fieldset[disabled] .btn-warning-outline:focus { border-color: #c85e0b; }
.btn-warning-outline.disabled:hover, .btn-warning-outline:disabled:hover, fieldset[disabled] .btn-warning-outline:hover { border-color: #c85e0b; }
.btn-danger-outline { color: #dd514c; background-color: transparent; background-image: none; border-color: #dd514c; }
.btn-danger-outline.active, .btn-danger-outline.focus, .btn-danger-outline:active, .btn-danger-outline:focus, .open > .btn-danger-outline.dropdown-toggle { color: #fff; background-color: #dd514c; border-color: #dd514c; }
.btn-danger-outline:hover { color: #fff; background-color: #dd514c; border-color: #dd514c; }
.btn-danger-outline.disabled.focus, .btn-danger-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-danger-outline:disabled:focus, fieldset[disabled] .btn-danger-outline.focus, fieldset[disabled] .btn-danger-outline:focus { border-color: #c62b26; }
.btn-danger-outline.disabled:hover, .btn-danger-outline:disabled:hover, fieldset[disabled] .btn-danger-outline:hover { border-color: #c62b26; }
.btn-outline_mail { color: #5a98de; background-color: transparent; background-image: none; border-color: #5a98de; }
.btn-outline_mail:hover { color: #fff; background-color: #5a98de; border-color: #5a98de; }
.btn-outline_mail_active { color: #fff; background-color: #5a98de; border-color: #5a98de; }
/*表单组*/
.form-group { display: inline-block; vertical-align: middle; }
.form-group .input-text { position: relative; vertical-align: top; }
.form-group.radius .input-text { border-radius: 4px 0 0 4px; }
.form-group.round .input-text { border-radius: 1000px 0 0 1000px; }
.form-group .btn { position: relative; margin-left: -1px; }
.form-group.radius .btn { border-radius: 0 4px 4px 0; }
.form-group.round .btn { border-radius: 0 1000px 1000px 0; }
/*3.6 图片*/
/*3.6.1 图片效果
![]()
img-responsive 响应式 .radius 圆角图片 .round 圆形图片 .thumbnail 缩略图
*/
.img-responsive { display: block; max-width: 100%; height: auto; }
.thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
@media (max-width: 480px) {
.responsive img { max-width: 100% !important; height: auto !important; width: expression(this.width > 320 ? "320px" : this.width) !important; }
}
.duang-opacity img { -webkit-transition: opacity .1s linear; -moz-transition: opacity .1s linear; -o-transition: opacity .1s linear; transition: opacity .1s linear; }
.duang-opacity a:hover img, a:hover .opacity img { opacity: 0.85; filter: alpha(opacity=85); }
/*3.6.2 图集效果
Name: modal_album
Example:
*/
.album-item { }
.album-img { border: 1px solid #e0e0e0; }
.album-img img { display: block; width: 100%; }
.album-title { display: block; text-align: left; padding: 7px 5px; line-height: 18px; color: #555; text-decoration: none; font-size: 12px; border: solid 1px #e0e0e0; border-top: 0; }
.album-bg-Fir, .album-bg-Sec { border: 1px solid #e6e6e6; border-top: 1px solid #f5f5f5; height: 1px; margin: 0 auto; overflow: hidden; }
.album-bg-Fir { margin: 0 3px; }
.album-bg-Sec { margin: 0 6px; }
/*3.6.3 头像
Name: mod_avatar
Example: 
*/
.avatar { display: inline-block; position: relative; overflow: hidden; }
.avatar img { display: block; }
.avatar.radius, .avatar.radius img { border-radius: 50%; }
.avatar, .avatar img { width: 32px; height: 32px; }
.avatar.size-MINI { width: 16px; height: 16px; }
.avatar.size-S, .avatar.size-S img { width: 24px; height: 24px; }
.avatar.size-M, .avatar.size-M img { width: 32px; height: 32px; }
/*默认为中，可以不写，可以理解为：均码*/
.avatar.size-L, .avatar.size-L img { width: 40px; height: 40px; }
.avatar.size-XL, .avatar.size-XL img { width: 64px; height: 64px; }
.avatar.size-XXL, .avatar.size-XXL img { width: 100px; height: 100px; }
.avatar.size-XXXL, .avatar.size-XXXL img { width: 128px; height: 128px; }
/*4.1 按钮组
Name: mod_btn-group
Example:
左边按钮
中间按钮
中间按钮
右边按钮
Explain:
*/
.btn-group { font-size: 0; }
.btn-group .btn { margin-left: -1px; }
.btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; }
/*4.2.5 向导
Name: mod_steps
Sample:
第一步
第二步
第三步
第四步
*/
.steps, .step { display: inline-block; position: relative; padding: 0.5em 2em 0.5em 2em; vertical-align: top; background-color: #FFF; color: #888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.step:after, .steps .step:after { position: absolute; z-index: 2; content: ''; top: 0; right: -1em; border-bottom: 1em solid transparent; border-left: 1em solid #FFF; border-top: 1em solid transparent; width: 0; height: 0; }
.step, .steps .step, .steps .step:after { -webkit-transition: opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease; transition: opacity .1s ease,color .1s ease,box-shadow .1s ease; }
.steps { cursor: pointer; display: inline-block; font-size: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1); line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: .3125rem; }
.steps .step:first-child { padding-left: 1em; border-radius: .3125em 0 0 .3125em; }
.steps .step:last-child { border-radius: 0 .3125em .3125em 0; }
.steps .step:only-child { border-radius: .3125em; }
.steps .step:last-child { margin-right: 0; }
.steps .step:last-child:after { display: none; }
.step:hover, .step.hover { background-color: #F7F7F7; color: rgba(0,0,0,.8); }
.steps .step.hover:after, .steps .step:hover:after, .step:hover, .step.hover::after { border-left-color: #F7F7F7; }
.steps .step.down, .steps .step:active, .step.down, .step:active { background-color: #F0F0F0; }
.steps .step.down:after, .steps .step:active:after, .steps.down::after, .steps:active::after { border-left-color: #F0F0F0; }
.steps .step.active, .active.step { cursor: auto; background-color: #428BCA; color: #FFF; font-weight: 700; }
.steps .step.active:after, .active.steps:after { border-left-color: #428BCA; }
.steps .disabled.step, .disabled.step { cursor: auto; background-color: #FFF; color: #CBCBCB; }
.disabled.step:after { border: 0; background-color: #FFF; top: .25em; right: -1em; width: 1.5em; height: 1.5em; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: -1px -1px 0 0 rgba(0,0,0,.1) inset; }
.attached.steps { margin: 0; border-radius: .3125em .3125em 0 0; }
.attached.steps .step:first-child { border-radius: .3125em 0 0; }
.attached.steps .step:last-child { border-radius: 0 .3125em 0 0; }
.bottom.attached.steps { margin-top: -1px; border-radius: 0 0 .3125em .3125em; }
.bottom.attached.steps .step:first-child { border-radius: 0 0 0 .3125em; }
.bottom.attached.steps .step:last-child { border-radius: 0 0 .3125em; }
/*向导数量*/
.one.steps, .two.steps, .three.steps, .four.steps, .five.steps, .six.steps, .seven.steps, .eight.steps { display: block; }
.one.steps > .step { width: 100%; }
.two.steps > .step { width: 50%; }
.three.steps > .step { width: 33.333%; }
.four.steps > .step { width: 25%; }
.five.steps > .step { width: 20%; }
.six.steps > .step { width: 16.666%; }
.seven.steps > .step { width: 14.285%; }
.eight.steps > .step { width: 12.5%; }
/*向导尺寸*/
.small.step, .small.steps .step { font-size: .8rem; }
/*小*/
.step, .steps .step { font-size: 1rem; }
/*默认*/
.large.step, .large.steps .step { font-size: 1.25rem; }
/*大*/
/*4.5 选项卡
Name: module_slider
Sample:
选项卡一选项卡二自适应宽度
内容一
内容二
内容三
*/
.tabBar { border-bottom: 2px solid #598db7; }
.tabBar span, .tabBar a { background-color: #e8e8e8; cursor: pointer; display: inline-block; float: left; font-weight: bold; height: 30px; line-height: 30px; padding: 0 15px; }
.tabBar span.current, .tabBar a.current { background-color: #598db7; color: #fff; }
.tabCon { display: none; }
/*4.6 标签与标号
Name: style_label
Example: 默认
Explain: .label-default 默认|.label-primary 主要|.label-secondary 次要|.label-success 成功|.label-warning 警告|.label-danger 危险
Name: style_badge
Example: 默认
Explain: .badge-default 默认|.badge-primary 主要|.badge-secondary 次要|.badge-success 成功|.badge-warning 警告|.badge-danger 危险
*/
.label, .badge { display: inline-block; padding: 2px 4px; font-size: 12px; font-weight: bold; line-height: 14px; color: #fff; white-space: nowrap; vertical-align: middle; background-color: #999; }
/*圆角*/
.label.radius { border-radius: 3px; }
.badge { padding-right: 9px; padding-left: 9px; border-radius: 9px; }
.label:empty, .badge:empty { display: none; }
a.label:hover, a.label:focus, a.badge:hover, a.badge:focus { color: #fff; text-decoration: none; cursor: pointer; }
/*默认*/
.label-default, .badge-default { background-color: #e6e6e6; color: #333; }
.label-default[href], .badge-default[href] { background-color: #e6e6e6; color: #333; }
/*主要*/
.label-primary, .badge-primary { background-color: #5a98de; }
.label-primary[href], .badge-primary[href] { background-color: #5a98de; }
/*主要*/
.label-secondary, .badge-secondary { background-color: #3bb4f2; }
.label-secondary[href], .badge-secondary[href] { background-color: #3bb4f2; }
/*成功*/
.label-success, .badge-success { background-color: #5eb95e; }
.label-success[href], .badge-success[href] { background-color: #5eb95e; }
/*警告*/
.label-warning, .badge-warning { background-color: #f37b1d; }
.label-warning[href], .badge-warning[href] { background-color: #f37b1d; }
/*警告2*/
.label-warning2, .badge-warning { background-color: #7A57D1; }
.label-warning2[href], .badge-warning2[href] { background-color: #7A57D1; }
/*危险*/
.label-danger, .badge-danger { background-color: #dd514c; }
.label-danger[href], .badge-danger[href] { background-color: #dd514c; }
/*帮助*/
.label-help, .badge-help { background-color: #dff0d8; padding: 5px; color: #666; font-weight: normal; letter-spacing: 1px; }
.label-help[href], .badge-help[href] { background-color: #dd514c; color: #333; }
/*4.3 下拉菜单
Name: mod_dropDown
Example:
下拉菜单
Explain: 如需要在不同的地方显示不同的样式，请在 追加class，采用覆盖的方式重写默认样式。
*/
.dropDown { display: inline-block; }
.dropDown_A { display: inline-block; }
.dropDown-menu { display: none; transition: all 0.3s ease 0s;}
.dropDown:focus, .dropDown-menu:focus { outline: 0; }
.dropDown-menu li.arrow { position: absolute; display: block; width: 12px; height: 8px; margin-top: -13px; margin-left: 20%; line-height: 0; background: url(../images/dropDown/icon-jt.png) no-repeat 0 0; }
/*鼠标经过*/
.dropDown.hover .dropDown_A,
.dropDown.open .dropDown_A { text-decoration: none; background-color: rgba(255,255,255,0.2); }
.dropDown.open .dropDown_A .menu_dropdown-arrow { transition-duration: 0.3s; transition-property: all; _background-position: 0 0; transform: rotate(180deg); }
.menu { background-color: #fff; border: solid 1px #f2f2f2; display: inline-block; padding:5px 0; }
.menu.radius { border-top-left-radius: 0; border-top-right-radius: 0; }
.menu.box-shadow { border-top: none; }
.menu > li { position: relative; clear: both; *float: left; }
.menu > li > a { display: block; padding: 5px 15px; line-height: 1.5; text-align: left; font-weight: normal; white-space: nowrap; vertical-align: top; }
.menu > li:last-child > a { border-bottom: none; }
.menu > li > a:hover, .menu > li > a:focus, .menu > li.open > a { text-decoration: none; background-color: #edf1f2; color: #141719; }
.menu > li > a .arrow { position: absolute; top: 50%; margin-top: -10px; right: 5px; line-height: 20px; height: 20px; color: #999; }
.menu > li > .menu { display: none; }
.menu > li.open > .menu { display: inline-block; position: absolute; left: 100%; top: -1px; min-width: 100%; }
/*禁用菜单*/
.menu > li.disabled > a { color: #999; text-decoration: none; cursor: no-drop; background-color: transparent; }
/*线条*/
.menu > li.divider { display: block; height: 0px; line-height: 0px; margin: 9px 0; overflow: hidden; border-top: solid 1px #e5e5e5; }
/*打开菜单*/
.dropDown > .dropDown-menu { display: none; }
.dropDown.open { position: relative; z-index: 990; }
/*默认左对齐*/
.dropDown.open > .dropDown-menu { position: absolute; z-index: 1000; display: inline-block; top: 100%; left: 0px; min-width: 160px;background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #dee5e7;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 2px;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
/*右对齐*/
.dropDown.open.right > .dropDown-menu { right: -1px !important; left: auto !important; }
/*4.8 警告
Name: mod_-alert
Example:
Explain: 警告,使用警告框jQuery插件
*/
.alert { position: relative; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; }
.alert, .alert h4 { color: #c09853; }
.alert h4 { margin: 0; }
.alert .c-iconfont { position: absolute; top: 9px; right: 10px; line-height: 20px; cursor: pointer; color: #000; opacity: 0.2; _color: #666; font-style: normal; }
.alert .c-iconfont.hover { color: #000; opacity: 0.8; }
.alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-success h4 { color: #468847; }
.alert-danger { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
.alert-danger h4 { color: #b94a48; }
.alert-error { color: #fff; background-color: #f37b1d; border-color: #e56c0c; }
.alert-error h4 { color: #fff; }
.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-info h4 { color: #31708f; }
.alert-block { padding-top: 14px; padding-bottom: 14px; }
.alert-block > p, .alert-block > ul { margin-bottom: 0; }
.alert-block p + p { margin-top: 5px; }
/*4.9 进度条 loading
Name: mod_progress
Example:
Explain: 警告,使用警告框jQuery插件
*/
.progress, .progress-bar, .sr-only { height: 10px; font-size: 0; line-height: 0; }
.progress { overflow: hidden; width: 400px; }
.progress.radius { }
/*自定义圆角*/
.progress-bar { width: 100%; background-color: #efefef; text-align: left; }
.sr-only { display: inline-block; background-color: #58b957; }
/*4.14 Panel 面板
Name: mod_panel
Sample:
*/
.panel { background-color: #fff; border: solid 1px transparent; }
.panel-header { position: relative; border-bottom: solid 1px transparent; padding: 5px 15px; font-size: 14px; font-weight: 700; }
.panel-header b { position: absolute; width: 15px; display: block; right: 12px; top: 3px; text-align: center; font-size: 18px; }
.panel-header-info { position: relative; border-bottom: solid 1px transparent; padding: 5px 15px; font-size: 19px; font-weight: 700; }
.panel-header-new {text-align: center; position: relative; border-bottom: solid 1px transparent; padding: 5px 55px; font-size: 29px; font-weight: 700; }
/*.panel-header-new span { position: absolute; width: 35px; display: block; right: 12px; top: 3px; text-align: center; font-size: 18px; }*/
/*面板标题*/
.panel-body { padding: 10px; }
/*面板内容*/
.panel-footer { background-color: #f5f5f5; border-top: 1px solid #ddd; padding: 5px 15px; }
/*面板页脚*/
/*默认面板*/
.panel-default { border-color: #ddd; }
.panel-default > .panel-header { border-color: #ddd; background-color: #f5f5f5; color: #444; }
/*主要面板*/
.panel-primary { border-color: #5a98de; }
.panel-primary > .panel-header { border-color: #5a98de; background-color: #5a98de; color: #fff; }
.panel-primary > .panel-header-new { border-color: #5a98de; background-color: #5a98de; color: #fff; }
.panel-primary > .panel-header-info { border-color: #5a98de; background-color: #5a98de; color: #fff; }
/*次要面板*/
.panel-secondary { border-color: #3bb4f2; }
.panel-secondary > .panel-header { border-color: #3bb4f2; background-color: #3bb4f2; color: #fff; }
/*成功面板*/
.panel-success { border-color: #5eb95e; }
.panel-success > .panel-header { border-color: #5eb95e; background-color: #5eb95e; color: #fff; }
.panel-success > .panel-header-new { border-color: #5eb95e; background-color: #5eb95e; color: #fff; }
.panel-success > .panel-header-info { border-color: #5eb95e; background-color: #5eb95e; color: #fff; }
/*警告面板*/
.panel-warning { border-color: #f37b1d; }
.panel-warning > .panel-header { border-color: #f37b1d; background-color: #f37b1d; color: #fff; }
/*危险面板*/
.panel-danger { border-color: #dd514c; }
.panel-danger > .panel-header { border-color: #dd514c; background-color: #dd514c; color: #fff; }
/*新加的*/
.panel-new { border-color: #778899; }
.panel-new > .panel-header { border-color: #778899; background-color: #778899; color: #fff; }
/*用户信息登录*/
.panel-userinfo { border-color: #5db0ba; }
.panel-userinfo > .panel-header-info { border-color: #5db0ba; background-color: #5db0ba; color: #fff; }
.panel-body-primary-new{text-align: center; font-size: 30px; font-weight: 700; color: #5a98de;}
.panel-body-success-new{text-align: center; font-size: 30px; font-weight: 700; color: #5eb95e;}
.panel-new-i{display: block;font-size: 65px; color: #fff;}
/*4.15 案例
Name: mod_docs-example
Example: ……
*/
.docs-example { position: relative; *position: static; *padding-top: 19px; margin: 15px 0; padding: 39px 19px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
.docs-example:after { content: "Example"; position: absolute; top: -1px; left: -1px; *position: static; padding: 3px 7px; font-size: 12px; font-weight: bold; background-color: #f5f5f5; border: 1px solid #ddd; color: #9da0a4; border-radius: 4px 0 4px 0; }
/*4.19 标签*/
/*4.19.1 标签输入效果
Name: mod_ui-tags
Sample:
*/
.ui-tags { border: solid 1px #dedede; padding: 0 10px; }
.ui-tags-editor { position: relative; padding: 10px 0 10px 24px; }
.ui-tags-editor .ui-tags-icon { position: absolute; left: 0; top: 11px; font-size: 14px; color: #666; }
.ui-tags-token { color: #aaa; float: left; font-size: 12px; height: 20px; line-height: 20px; margin-right: 8px; padding: 0 1px; white-space: nowrap; cursor: pointer; }
.ui-tags-token:before { content: "#"; }
.ui-tags-token:hover { text-decoration: line-through; }
.ui-tags-iptwrap { position: relative; float: left; }
.ui-tags-input { position: relative; height: 20px; min-width: 60px; border: 0 none; vertical-align: top; line-height: 20px; color: #333; z-index: 2; background: url(../images/empty.png) repeat scroll 0 0; display: inline-block; width: 100%; }
.ui-tags-label { position: absolute; top: 0; left: 2px; width: 240px; height: 20px; line-height: 20px; font-size: 14px; overflow: hidden; z-index: 1; color: #ccc; }
.ui-tags-list { padding: 0 0 10px 0; display: none; }
.ui-notag { font-size: 12px; }
.ui-tags-has span { cursor: pointer; font-size: 12px; white-space: nowrap; margin-right: 10px; }
/*4.19.2 标签混排效果
Name: mod_tags
Sample:
*/
.tags a { height: 26px; line-height: 26px; padding-right: 6px; }
.tags0 { }
.tags1 { color: #C00; font-size: 24px; }
.tags2 { color: #030; font-size: 16px; }
.tags3 { color: #00F; }
.tags4 { font-size: 16px; }
.tags5 { color: #C00; font-size: 20px; }
.tags6 { color: #F06; font-size: 20px; }
.tags7 { color: #030; font-weight: bold; font-size: 18px; }
.tags8 { color: #F06; font-weight: bold; }
.tags9 { color: #C00; font-weight: bold; font-size: 16px; }
.tags a:hover { color: #F00; text-decoration: underline; }
/*4.19.3 tag云标签*/
#tagyun { position: relative; }
#tagyun a { position: absolute; top: 0px; left: 0px; font-weight: bold; text-decoration: none; padding: 3px 6px; }
/*4.22 评论列表
Name: mod_comment
Sample:
*/
.commentList .item { list-style: none outside none; margin: 1.6rem 0 0; }
.commentList .avatar { border: 1px solid transparent; float: left; }
.comment-main { position: relative; margin-left: 0px; border: 1px solid #dedede; border-radius: 2px;margin-right: 300px; }
.comment-main:before, .comment-main:after { position: absolute; top: 11px; left: -16px; right: 100%; width: 0; height: 0; display: block; content: " "; border-color: transparent; border-style: solid solid outset; pointer-events: none; }
.comment-main:before { border-right-color: #dedede; border-width: 8px; }
.comment-main:after { border-width: 7px; border-right-color: #f8f8f8; margin-top: 1px; margin-left: 2px; }
.comment-header { padding: 10px 15px; background: #f8f8f8; border-bottom: 1px solid #eee; }
.comment-title { margin: 0 0 8px 0; font-size: 1.6rem; line-height: 1.2; }
.comment-meta { font-size: 13px; color: #999; line-height: 1.2; }
.comment-meta a { color: #999; }
.comment-author { font-weight: 700; color: #999; }
.comment-body { padding: 15px; overflow: hidden; }
.comment-body > :last-child { margin-bottom: 0; }
.commentList .comment-flip .avatar { float: right; }
.comment-flip .comment-main { margin-left: 300px; margin-right: 0px; }
.comment-flip .comment-main:before { border-left-color: #dedede; border-right-color: transparent; }
.comment-flip .comment-main:before, .comment-flip .comment-main:after { left: 100%; position: absolute; right: -16px; }
.comment-flip .comment-main:after { border-left-color: #f8f8f8; border-right-color: transparent; margin-left: auto; margin-right: 2px; }
/*4.24 右侧贴边导航*/
.quick_links_wrap, .mui-mbar-tabs { height: 100%; width: 40px; right: 0; position: fixed; right: 0; bottom: 0; z-index: 9; height: 100%; -webkit-transition: width linear .4s; -moz-transition: width linear .4s; -ms-transition: width linear .4s; transition: width linear .4s; _position: fixed; _bottom: auto; _top: expression(document.scrollTop+document.clientHeight-this.offsetHeight-10); }
.quick_links_wraper.quick_links_dockright { margin-left: 0; left: auto; right: 4px; }
.mui-mbar-tabs i, .ibar_closebtn, .login_order, .login_favorite { display: inline-block; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAACdCAMAAADWiUtxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkE3NjVCQUY5NjAwMTFFNTg5ODNGNzk5MUUyQkY5MDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkE3NjVCQjA5NjAwMTFFNTg5ODNGNzk5MUUyQkY5MDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQTc2NUJBRDk2MDAxMUU1ODk4M0Y3OTkxRTJCRjkwMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQTc2NUJBRTk2MDAxMUU1ODk4M0Y3OTkxRTJCRjkwMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmwTPxAAAACxUExURf///9jY2FdbZTE0O1xcXERIUWlpaXZ2doyMjM3NzfX19XFxcdHR0fz8/GVlZXl5ec7OztDQ0Kamppubm/7+/nR0dJeXl6mpqWNjY+bm5v39/X9/f8/P0Pb29oWFhe3t7ejo6cvLy25ubszMzImJifn5+fDw8F9fX2JlbWZqcURGTfPz8/Ly8j1AR/v7+7/AwaCgoOvr656enuPj49zc28XFxo2Pkru7u6usr/T09AAAACuzUxQAAAA7dFJOU/////////////////////////////////////////////////////////////////////////////8AocQ7HgAAAehJREFUeNrs2QdzgjAUB/B/2kcAEdyj7lHt0Nq9+P4frCzRWiohp3Rc3h0R7/hdwstL7oxwo2BuSiD5K2MpEkASZCxFAjsSG7dPArsSrmT8AAxfbrtNTMt2u+6RueuLJc8n4gubMR4IJs/JFtwzVDetR/dAMMzqHhhm9W9WjoJ/CF6ffhM3KfDq5Ju4VFn9XVCThpo01KShJg21vHvMO6uqyBXMF0IaQhpCGkIaIu8e886qKnIFc946/LCnTZ3zUnNqC6+W4MGeRUS87TVWLwOsV4kMsw8UTIOoWheGLeLF6Oc6ipxaorBC/AxxnHGqiMGO7j057oRsVEWR9I4QLJMBWC8z3w2tAWBQWQjWyAQeJ90FMG90C4BJNSGoU9/vq9QYLXXfoU+6EHR48HaFAW+UFsEtd8SgE+Zlyek5vHO44FD98WE2aNxd3AZ9U0k8OVidW0O8XrzVxZMTTMfKmNx73GzXxKfDK4AiHiaj4PWezv0CsMVL7n0eVZwtXnLyRR4tq0L2ZRUt5HawkMuZdgDY46bueFvHOMPWoTZkBeUgi09zWeq57mcYfrL4uFIcrg8BN3f/D8omR3Y6frpy/DZ7crLCeDoysMPAaMzs+FA2OfF8ZIRqe1RQQQUVVFBBBb/GEf4q/RBgAGFFGpMRZpkWAAAAAElFTkSuQmCC") no-repeat; cursor: pointer; height: 19px; width: 18px; vertical-align: top; position: absolute; }
.quick_links_panel { width: 40px; height: 100%; position: absolute; background: #444851; z-index: 2; top: 0; right: 0; font-family: 'microsoft yahei',arial; }
.quick_links_panel a { display: block; line-height: 38px; width: 40px; height: 38px; text-decoration: none; color: #d8d8d8; font-size: 20px; text-align: center; background-color: #444851; color: #d8d8d8; position: relative; /*overflow: hidden;*/ top: 0; left: 0px; *left: -15px; z-index: 1; margin: 0; padding: 0; }
.quick_links_panel .quick_toggle { position: absolute; bottom: 0; left: 0; width: 40px; background: #444851; z-index: 1; }
.quick_links_panel .mp_tooltip { height: 38px; line-height: 38px; width: 92px; position: absolute; z-index: 2; left: -121px; top: 0; background: #444851; color: #d8d8d8; text-align: center; display: block; visibility: hidden; }
.quick_links_panel .mp_qrcode { padding: 10px; width: 150px; height: 175px; top: -157px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.4); border-radius: 5px 0 0 5px; z-index: 3; position: absolute; left: -170px; display: none; }
.quick_links_panel .icon_arrow_white { position: absolute; right: -5px; top: 172px; width: 5px; height: 9px; background-position: 0 -53px; }
.quick_links_panel .icon_arrow_right_black { position: absolute; right: -5px; top: 15px; width: 5px; height: 9px; background-position: 0 -34px; overflow: hidden; }
/*.quick_toggle .return_top { display: none; }
.quick_links_allow_gotop .return_top { display: block; }*/
.quick_links { position: absolute; top: 50%; left: 0; margin-top: -190px; *margin-top: -220px; background: #444851; z-index: 2; width: 40px; }
.quick_links a.message_list { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAACdCAMAAADWiUtxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkE3NjVCQUY5NjAwMTFFNTg5ODNGNzk5MUUyQkY5MDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkE3NjVCQjA5NjAwMTFFNTg5ODNGNzk5MUUyQkY5MDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQTc2NUJBRDk2MDAxMUU1ODk4M0Y3OTkxRTJCRjkwMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQTc2NUJBRTk2MDAxMUU1ODk4M0Y3OTkxRTJCRjkwMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmwTPxAAAACxUExURf///9jY2FdbZTE0O1xcXERIUWlpaXZ2doyMjM3NzfX19XFxcdHR0fz8/GVlZXl5ec7OztDQ0Kamppubm/7+/nR0dJeXl6mpqWNjY+bm5v39/X9/f8/P0Pb29oWFhe3t7ejo6cvLy25ubszMzImJifn5+fDw8F9fX2JlbWZqcURGTfPz8/Ly8j1AR/v7+7/AwaCgoOvr656enuPj49zc28XFxo2Pkru7u6usr/T09AAAACuzUxQAAAA7dFJOU/////////////////////////////////////////////////////////////////////////////8AocQ7HgAAAehJREFUeNrs2QdzgjAUB/B/2kcAEdyj7lHt0Nq9+P4frCzRWiohp3Rc3h0R7/hdwstL7oxwo2BuSiD5K2MpEkASZCxFAjsSG7dPArsSrmT8AAxfbrtNTMt2u+6RueuLJc8n4gubMR4IJs/JFtwzVDetR/dAMMzqHhhm9W9WjoJ/CF6ffhM3KfDq5Ju4VFn9XVCThpo01KShJg21vHvMO6uqyBXMF0IaQhpCGkIaIu8e886qKnIFc946/LCnTZ3zUnNqC6+W4MGeRUS87TVWLwOsV4kMsw8UTIOoWheGLeLF6Oc6ipxaorBC/AxxnHGqiMGO7j057oRsVEWR9I4QLJMBWC8z3w2tAWBQWQjWyAQeJ90FMG90C4BJNSGoU9/vq9QYLXXfoU+6EHR48HaFAW+UFsEtd8SgE+Zlyek5vHO44FD98WE2aNxd3AZ9U0k8OVidW0O8XrzVxZMTTMfKmNx73GzXxKfDK4AiHiaj4PWezv0CsMVL7n0eVZwtXnLyRR4tq0L2ZRUt5HawkMuZdgDY46bueFvHOMPWoTZkBeUgi09zWeq57mcYfrL4uFIcrg8BN3f/D8omR3Y6frpy/DZ7crLCeDoysMPAaMzs+FA2OfF8ZIRqe1RQQQUVVFBBBb/GEf4q/RBgAGFFGpMRZpkWAAAAAElFTkSuQmCC") no-repeat; line-height: 16px; height: 118px; background-position: -23px -25px; color: #fff; margin: 20px 0 10px; font-size: 12px; padding-top: 15px; }
.quick_links a.message_list .span { width: 16px; display: block; font-size: 12px; height: 48px; margin: 10px 0 0 13px; cursor: pointer; }
.quick_links a.message_list .cart_num { width: 21px; height: 21px; display: block; border-radius: 50%; background: #ed145b; text-align: center; line-height: 21px; margin: 9px 0 0 10px; cursor: pointer; color: #fff; }
.quick_links_min .quick_links_panel { right: 280px; }
.quick_links li, .quick_toggle li { position: relative; display: block; left: 0; top: 0px; }
.history_list, .leave_message, .mpbtn_histroy, .mpbtn_wdsc, .mpbtn_recharge { margin-bottom: 6px; }
.quick_links a:hover, .quick_links a.current, .quick_toggle a:hover { background: #ed145b; color: #fff; text-decoration: none; }
.quick_toggle .mpbtn_qrcode { width: 18px; height: 18px; top: 11px; left: 11px; background-position: 0 -101px; }
.quick_toggle .top { background-position: 0 0; width: 17px; height: 14px; top: 12px; left: 12px; }
.quick_toggle a:hover .top, .quick_links a.current .top { background-position: -33px 0px; }
.ibar_plugin_title { height: 38px; line-height: 38px; border-bottom: 1px solid #dedede; color: #333; font-size: 14px; font-weight: 700; width: 267px; margin: 0 auto; }
.ibar_closebtn { width: 20px; height: 20px; background-position: 5px -67px; padding: 5px; overflow: hidden; position: absolute; top: 4px; right: 4px; }
.ibar_plugin_content { position: absolute; width: 100%; top: 0; bottom: 0; _height: expression((document.documentElement.clientHeight-100-40)+"px"); overflow: hidden; }
/* quick_links_pop */
.quick_links_pop { position: absolute; top: 0; right: 0; display: none; box-shadow: 0 0 5px #999; border-radius: 5px 0 0 5px; border: 1px solid #999; behavior: url(js/htc.htc); z-index: 99999999; background: #fff; }
.quick_links_pop .arrow, .quick_links_pop .arrow i { display: none; border-color: transparent #ddd; border-style: dashed solid; border-width: 12px 0 12px 12px; font-size: 0; height: 0; width: 0; position: absolute; left: 100%; top: 12px; }
.quick_links_pop .arrow i { border-color: transparent #f9fafc; margin: -12px 0 0 -13px; left: 0; top: 0; }
.quick_links_pop .fix_bg { display: none; border-top-width: 0; border-radius: 0 0 3px 3px; margin: 0 0 -4px -250px; height: 2px; width: 500px; overflow: hidden; position: absolute; bottom: 0; left: 50%; }
.quick_links_pop .pop_panel { font-size: 12px; width: 100%; height: 628px; position: relative; }
.ibar_nav_box { width: 267px; min-height: 185px; padding: 10px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.4); border-radius: 5px 0 0 5px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; z-index: 3; position: absolute; top: 0px; left: -287px; left: -288px\0; display: none; }
.ibar_nav_box ul { list-style: none; width: 260px; }
.ibar_nav_box ul li { width: 260px; }
.ibar_nav_box ul li a { width: 260px; background: none; font-size: 14px; text-align: left; height: 26px; line-height: 26px; color: #333; border-bottom: 1px #fff solid; }
.ibar_nav_box ul li a:hover { background: none; border-bottom: 1px #5a98de dotted; color: #5a98de; }
.ibar_nav_box .icon_arrow_white { position: absolute; right: -5px; top: 15px; width: 5px; height: 9px; background-position: 0 -53px; }
/*ToolTip*/
.tooltip { position: absolute; z-index: 1030; display: block; font-size: 12px; line-height: 1.4; visibility: visible; filter: alpha(opacity=0); opacity: 0; }
.tooltip.in { filter: alpha(opacity=100); opacity: 1; }
.tooltip.top { padding: 5px 0; margin-top: -3px; }
.tooltip.right { padding: 0 5px; margin-left: 3px; }
.tooltip.bottom { padding: 5px 0; margin-top: 3px; }
.tooltip.left { padding: 0 5px; margin-left: -3px; }
.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #353535; border-radius: 4px; }
.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #353535; }
.tooltip.top-left .tooltip-arrow { bottom: 0; left: 5px; border-width: 5px 5px 0; border-top-color: #353535; }
.tooltip.top-right .tooltip-arrow { right: 5px; bottom: 0; border-width: 5px 5px 0; border-top-color: #353535; }
.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #353535; }
.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #353535; }
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #353535; }
.tooltip.bottom-left .tooltip-arrow { top: 0; left: 5px; border-width: 0 5px 5px; border-bottom-color: #353535; }
.tooltip.bottom-right .tooltip-arrow { top: 0; right: 5px; border-width: 0 5px 5px; border-bottom-color: #353535; }
.ultree{}
.ultree li{padding:2px 0;}
.ultree li span{background:#f0f0f0;height:24px;line-height:24px; display:block;padding:0 5px;}
.ultree li span em{font-style:normal;}
.ultree li>ul{margin-left:24px;}
@某人 你是猴子派来的救兵吗？