LargeScreenVisualization/viewdata-master/新增75套源码/75/content/ui/css/layout.css

/***样式初始化***/
html{margin:0;padding:0;border:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, input, fieldset, form, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section{margin:0;padding:0;border:0;font-size:14px;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section{display:block;}
body{font-size:12px;color:#000;background:#fff;font-family:"Microsoft YaHei","simsun","Helvetica Neue", Arial, Helvetica, sans-serif;}
img{border:0;}
::-webkit-input-placeholder{color:#999;}
:-moz-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
:-ms-input-placeholder{color:#ccc;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
textarea{overflow:auto;}
/*a{text-decoration: none;}*/
b,strong{font-weight: bold;}
input:focus,textarea:focus,button:focus,select:focus{outline:none;}
input::-ms-clear{display:none;}
button[disabled],html input[disabled]{cursor:default;}
table{border-collapse:collapse;border-spacing:0;}
/*清除浮动*/
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
.clear { clear:both; }
/***样式初始化 END***/
/***float***/
.fl { float: left !important; }
.fr { float: right !important; }
/***动画过渡时间***/
.transition-0-3s{transition: all 0.3s;}
.transition-0-5s{transition: all 0.5s;}
.transition-0-8s{transition: all 0.8s;}
.transition-1-0s{transition: all 1s;}
.transition-1-5s{transition: all 1.5s;}
.transition-2-0s{transition: all 2s;}
.no-transition{transition:none !important;}
/***文本类容***/
/*标题*/
h1,.h1{font-size:28px;}
h2,.h2{font-size:24px;}
h3,.h3{font-size:18px;}
h4,.h4{font-size:16px;}
h5,.h5{font-size:14px;}
h6,.h6{font-size:12px;}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small{font-size:60%;filter:alpha(opacity=60);opacity:.6;}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small{font-size:12px;filter:alpha(opacity=60);opacity:.6;}
/*自定义链接颜色(可自由更换)*/
a{color:#333;text-decoration:none;} /*链接-颜色*/
a:hover{color:#098cba;} /*链接-悬浮颜色*/
.text-underline:hover {text-decoration:underline;}
/*段落*/
p,.p{line-height:25px;}
.text-indent,.text-indent p,.text-indent div{text-indent:2em;}
/*粗体*/
.strong{font-weight:bold;}
.text-normal{font-weight:normal;}
/*对齐*/
.text-left{text-align:left !important;}
.text-center{text-align:center !important;}
.text-right{text-align:right !important;}
.text-justify{text-align:justify !important;}
/*文本省略*/
.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.no-ellipsis{overflow:auto;text-overflow:initial;white-space:normal;}
/***input***/
.input{font-size:14px;padding:6px;border:solid 1px #ccc;width:100%;height:34px;line-height:20px;display:block;background-color: #fff; -webkit-appearance:none;/*transition:all 1s;*/}
.input:focus,.input-focus{border-color:#40b2da;background-color:#f5f8fd;/*transition:all 0.3s*/}
.input:hover,.input-hover{border-color:#40b2da;}
.input-error,.input-error:hover{border-color:#d93600;}
.input-error:focus{border-color:#d93600;background-color:#fff;}
.input-disabled, .input-disabled:hover, .input[disabled], .input[disabled]:hover {border-color:#999;background-color: #eee;}
.input-readonly, .input[readonly], .input[readonly]:hover { border-color: #ccc; background-color: #fff; }
/***Button***/
.button {display:inline-block;padding: 6px 20px;border: 1px solid #ddd;border-radius: 3px;color: #3a3a3a;font-size:12px; line-height: 22px; text-align: center; background:transparent; /*transition: all 0.3s;*/ cursor: pointer; }
.button-full{display:block;width:100%;}
.button:hover{background:#f1f1f1;}
.button.bg-black,.button.bg-dark-grey,.button.bg-main,.button.bg-dot,.button.bg-gray,.button.bg-light-gray,.button.bg-sub,.button.bg-mix,.button.bg-pink,.button.bg-red,.button.bg-orange,.button.bg-blue,.button.bg-green {color:#fff;border:0;}
.button.bg-black:hover{background:#222;}
.button.bg-dark-grey:hover{background:#444;}
.button.bg-main:hover{background:#098cba;}
.button.bg-dot:hover{background:#d93600;}
.button.bg-gray:hover{background:#aaa;}
.button.bg-light-gray:hover{background:#aaa;}
.button.bg-sub:hover{background:#40b2da;}
.button.bg-mix:hover{background:#ff5a00;}
.button.bg-white:hover{background:#f1f1f1;}
.button.bg-gray-white:hover{background:#fff;}
.button.bg-pink:hover{background: #e13538;}
.button.bg-red:hover{background: #d10;}
.button.bg-orange:hover{background: #f60;}
.button.bg-blue:hover{background: #0ae;}
.button.bg-green:hover{background: green;}
.button.border-gray:hover,.button.border-main:hover,.button.border-dot:hover,.button.border-mix:hover,.button.border-sub:hover,.button.border-black:hover{color:#fff;}
.button.border-gray-white:hover{background: #eee;}
.button.border-light-gray:hover{background:#ccc;}
.button.border-gray:hover{background:#999;}
.button.border-black:hover{background:#000;}
.button.border-main:hover{background:#40b2da;}
.button.border-sub:hover{background:#098cba;}
.button.border-mix:hover{background: #d93600;}
.button.border-dot:hover{background: #ff5a00;}
/***select***/
.select{width:100%;height:26px;border:1px solid #ccc;}
.select:focus,.select:hover{border-color:#40b2da;}
/***textarea***/
.textarea{border:1px solid #ccc;resize: none;}
.textarea:hover{border-color:#40b2da;}
.textarea:focus{border-color:#40b2da;background-color:#f5f8fd;}
/***margin***/
/***border***/
.border{border:solid 1px #ddd;}
.border-top{border-top:solid 1px #ddd;}
.border-right{border-right:solid 1px #ddd;}
.border-bottom{border-bottom:solid 1px #ddd;}
.border-left{border-left:solid 1px #ddd;}
.border-top-bottom{border-top:solid 1px #ddd;border-bottom:solid 1px #ddd;}
.border-left-right{border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
/*边框样式*/
.border-dashed{border-style:dashed;}
.border-dotted{border-style:dotted;}
.border-double{border-style:double;}
.border-inset{border-style:inset;}
.border-outset{border-style:outset;}
/*边框大小*/
.border-large{border-width:10px;}
.border-big{border-width:5px;}
.border-middle{border-width:3px;}
.border-small{border-width:2px;}
.border-none{border: none !important;}
/*边框颜色*/
.border-gray-white { border-color: #eee; }
.border-light-gray { border-color:#ccc; }
.border-gray { border-color:#999; }
.border-main { border-color:#40b2da; }
.border-sub{border-color:#098cba;}
.border-mix{border-color: #d93600;}
.border-dot{border-color: #ff5a00;}
.border-white{border-color: #fff;}
.border-black{border-color: #000;}
/***border radius***/
.radius-none{border-radius:0;}
.radius-small{border-radius:2px;}
.radius{border-radius:4px;}
.radius-big{border-radius:6px;}
.radius-rounded{border-radius:2em;}
.radius-circle{border-radius:50%;}
/***boxshadow***/
.box-shadow{box-shadow: 0 3px 5px #ccc;}
/***background***/
.bg{ background: #eee; }
.bg-gray{background: #999;}
.bg-dark-grey{background: #3a3a3a;}
.bg-black{background: #000;}
.bg-white{background: #fff;}
.bg-gray-white{background: #f7f7f7;}
.bg-main{background: #40b2da;}
.bg-sub{background: #098cba;}
.bg-mix{background: #d93600;}
.bg-dot{background: #ff5a00;}
.bg-pink{background: #e13538;}
.bg-red{background: #d10;}
.bg-orange{background: #f60;}
.bg-blue{background: #0ae;}
.bg-green{background: green;}
.bg-inverse,.bg-inverse a{color: #fff;}
.bg-none{background:none !important;}
/*内边距,全,上,下,左,右*/
.padding-large{padding:30px;}
.padding-large-top{padding-top:30px;}
.padding-large-right{padding-right:30px;}
.padding-large-bottom{padding-bottom:30px;}
.padding-large-left{padding-left:30px;}

.padding-big{padding:20px;}
.padding-big-top{padding-top:20px;}
.padding-big-right{padding-right:20px;}
.padding-big-bottom{padding-bottom:20px;}
.padding-big-left{padding-left:20px;}

.padding{padding:10px;}
.padding-tb{padding:10px 0;}
.padding-lr{padding:0 10px;}
.padding-top{padding-top:10px;}
.padding-right{padding-right:10px;}
.padding-bottom{padding-bottom:10px;}
.padding-left{padding-left:10px;}

.padding-small{padding:5px;}
.padding-small-top{padding-top:5px;}
.padding-small-right{padding-right:5px;}
.padding-small-bottom{padding-bottom:5px;}
.padding-small-left{padding-left:5px;}

.padding-little{padding:2px;}
.padding-little-top{padding-top:2px;}
.padding-little-right{padding-right:2px;}
.padding-little-bottom{padding-bottom:2px;}
.padding-little-left{padding-left:2px;}

.padding-none{padding:0 !important;}
/*外边距,全,上,下,左,右*/
.margin-large{margin:30px;}
.margin-large-top{margin-top:30px;}
.margin-large-right{margin-right:30px;}
.margin-large-bottom{margin-bottom:30px;}
.margin-large-left{margin-left:30px;}

.margin-big{margin:20px;}
.margin-big-top{margin-top:20px;}
/* .margin-big-right{margin-right:20px;} */
.margin-big-bottom{margin-bottom:20px;}
.margin-big-left{margin-left:20px;}

.margin{margin:10px !important;clear:both;}
.margin-tb{margin:10px 0;}
.margin-lr{margin:0 10px;}
.margin-top{margin-top:10px;}
.margin-right{margin-right:10px;}
.margin-bottom{margin-bottom:10px;}
.margin-left{margin-left:10px;}

.margin-around{margin: 0 10px;}

.margin-small{margin:5px;}
.margin-small-top{margin-top:5px;}
.margin-small-right{margin-right:5px;}
.margin-small-bottom{margin-bottom:5px;}
.margin-small-left{margin-left:5px;}

.margin-little{margin:2px;}
.margin-little-top{margin-top:2px;}
.margin-little-right{margin-right:2px;}
.margin-little-bottom{margin-bottom:2px;}
.margin-little-left{margin-left:2px;}

.margin-none{margin:0 !important;}
/*无序有序列表*/
ul{list-style:none;}
ol{padding-left: 24px;}
.list-cn{list-style-type:cjk-ideographic;}
.list-alpha{list-style-type:upper-alpha;}
.list-unstyle{list-style:none;padding-left:0;}
.list-unstyle ul{list-style:disc;}
.list-inline li{display:inline-block;padding:0 10px;width:auto;}
/***布局***/
.layout{width: 100%;}
.container{margin: 0 auto;width: 1200px;}
/*宽度比例*/
.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w5 { width: 5%; }
.w15 { width: 15%; }
.w25 { width: 25%; }
.w35 { width: 35%; }
.w33 { width: 33.333%; }
.w45 { width: 45%; }
.w55 { width: 55%; }
.w65 { width: 65%; }
.w75 { width: 75%; }
.w85 { width: 85%; }
.w95 { width: 95%; }
/*HR*/
.hr-gray { width: 100%; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #fff; }
.hr-black { width: 100%; border-top: 1px solid #171717; border-bottom: 1px solid #707070; }
.hr-blue { width: 100%; border-top: 1px solid #2969a6; border-bottom: 1px solid #488bcb; }
/*spacer*/
.spacer-gray { border-left: 1px solid #d6d6d6; border-right: 1px solid #fff; }
/***隐藏与显示***/
.show{display:block !important;}
.hidden{display:none !important;}
.visible-hidden { visibility: hidden; }
.over-initial{overflow: initial !important;}
.over-hidden{overflow: hidden;}
/*字号*/
.text-large{font-size:24px !important;}
.text-big{font-size:16px !important;}
.text-default{font-size:14px !important;}
.text-small{font-size:12px !important;}
.text-little{font-size:10px !important;}
/*字体颜色*/
.text-main{color:#40b2da;}/*主色*/
.text-sub{color:#098cba;}/*辅色*/
.text-dot{color:#ff5a00;}/*点缀色*/
.text-mix{color:#d93600;}/*融合色*/
.text-white{color:#fff;}/*白色*/
.text-black{color:#000;}/*黑色*/
.text-gray{color:#999;}/*浅灰色*/
.text-drak-grey{color:#3a3a3a;}/*深灰色*/
.text-red{color:#b10;}
.text-orange{color:#f60;}
.text-blue{color:#0ae;}
.text-green{color:green;}
/*行高*/
.text-lh-little{line-height: 16px;}
.text-lh-small{line-height: 18px;}
.text-lh{line-height: 22px;}
.text-lh-big{line-height: 24px;}
.text-lh-large{line-height: 28px;}