/*对齐
	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}
/*定位
	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}
/*浮动
	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居上|居下*/
.pos-left{left:0; right:auto}
.pos-right{right:0; left:auto}
.pos-top{top:0; bottom:auto}
.pos-bottom{top:auto; bottom:0}
/*清除浮动
	Name:			style_clearfix
	Example:		class="clearfix|cl"
	Explain:		clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
/*文字单行溢出省略号
	Name:			style_text-overflow
	Example:		class="text-overflow"
*/
.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*外边距
	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-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-25{margin:25px}.mg-30{margin:30px}.mg-40{margin:40px}
/*内填充
	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-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}
.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}
.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-25{padding-left:25px}.pl-30{padding-left:30px}
.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-25{padding-right:25px}.pr-30{padding-right:30px}
.pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-25{padding:25px}.pd-30{padding:30px}.pd-40{padding:40px}
/*边框，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}
.size-MINI.radius{ border-radius:3px}
.size-L.radius{ border-radius:5px}
.size-XL.radius{ border-radius:6px}
.round{border-radius:50%; overflow:hidden}
/*css3阴影
	Name:			style_shadow
	Example:		class="box_shadow|text-shadow"
	Explain:		box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
					text-shadow 文字阴影
*/
.box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}

/**边框
    Name:           style_border
    Example:		class="border-no|border-b"
    Explain:		border-no 无边框
					border-b 只有下边框
 */
.border-no{
    border: 0;-webkit-box-shadow: 0 0 0 0;box-shadow:0 0 0 0}
.border-b{
    border: 0;
    border-bottom: 1px rgb(204, 204, 204) solid;
    -webkit-box-shadow: 0 0 0 0;
    box-shadow:0 0 0 0;
    border-radius: 0;
}
/*文字尺寸
	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-22 { font-size: 22px }.f-24{font-size:24px}.f-26{font-size:26px}.f-28{font-size:28px}.f-30{font-size:30px}
/*文字行距
	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}
/*背景色*/
.bg-333{background:#333}
.bg-666{background:#666}
.bg-999{background:#999}
.bg-aaa{background:#aaa}
.bg-bbb{background:#bbb}
.bg-ccc{background:#ccc}
.bg-ddd{background:#ddd}
.bg-eee{background:#eee}
.bg-fff{background:#fff}
/*辅助色—浅黑*/
.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-aaa,.c-aaa a,a.c-aaa{color:#aaa}
.c-aaa a:hover,a.c-aaa:hover{ color:#aaa}
.c-bbb,.c-bbb a,a.c-bbb{color:#bbb}
.c-bbb a:hover,a.c-bbb:hover{color:#bbb}
.c-ccc,.c-ccc a,a.c-ccc{color:#ccc}
.c-ccc a:hover,a.c-ccc:hover{ color:#ccc}
.c-ddd,.c-ddd a,a.c-ddd{color:#ddd}
.c-ddd a:hover,a.c-ddd:hover{color:#ddd}
.c-eee,.c-eee a,a.c-eee{color:#eee}
.c-eee a:hover,a.c-eee:hover{ color:#eee}
.c-fff,.c-fff a,a.c-fff{color:#fff}
.c-fff a:hover,a.c-fff:hover{color:#fff}
/*标准色—红色*/
.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}
/*隐藏 显示
  Name:				style_display
  Example:    <div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
  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}
/*鼠标指针*/
.c-pointer{cursor: pointer}
.c-crosshair{cursor: crosshair}
.c-help{cursor: help}
/*滚动条*/
.of-auto{overflow: auto !important;}
.of-visible{overflow: visible !important;}
.of-hidden{overflow: hidden !important;}
.of-scroll{overflow: scroll !important;}
.of-inherit{overflow: inherit !important;}