/* 
KJCMS_UI_SYS
Author:linmoco
QQ:284499169
Ver:1.0
Date:2013-05-04
Copyright 2013 KJCMS, Inc
E-mail:linmoco@163.com
Http://www.kjcms.com
*/
/*Element_Sys*/

/*Label*/
.label			{display:inline-block; *display:inline; *zoom:1; margin:0.1em; vertical-align:middle; background-color:rgba(80,80,80,0.3); border-color:rgba(0,0,0,0.4); padding:0.4em 0.8em; color:rgba(0,0,0,0.6); font-weight:normal; font-size:.8rem; -webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-transition:background 0.1s linear; -moz-transition:background 0.1s linear; -o-transition:background 0.1s linear; -ms-transition:background 0.1s linear; transition:background 0.1s linear; line-height:1;}
.label > *		{vertical-align:middle;}
.label:first-child	{margin-left:0;}
.label:last-child	{margin-right:0;}
a.label,.label a	{color:rgba(0,0,0,0.6);}
a.label:hover,.label a:hover{color:rgba(0,0,0,0.7);}

/*Progress*/
.progress		{height:20px; margin:5px 0; overflow:hidden; background-color:#f1f1f1; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
[class^="loading_"],[class*=" loading_"]{float:left; width:0; height:100%; font-size:.8rem; text-align:center; background-color:#999; border-radius:inherit; -webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:width 0.6s ease; -moz-transition:width 0.6s ease; -o-transition:width 0.6s ease; transition:width 0.6s ease; color:rgba(50,50,50,0.8); text-shadow:0 1px 0px rgba(255,255,255,0.4); line-height:1.6; background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size:40px 40px; -moz-background-size:40px 40px; -o-background-size:40px 40px; background-size:40px 40px;}
[class^="loading_"].active,[class*=" loading_"].active{-webkit-animation:progress-bar-stripes 2s linear infinite; -moz-animation:progress-bar-stripes 2s linear infinite; -ms-animation:progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation:progress-bar-stripes 2s linear infinite;}

@-webkit-keyframes progress-bar-stripes {
from			{background-position:40px 0;}
to				{background-position:0 0;}
}

@-moz-keyframes progress-bar-stripes {
from			{background-position:40px 0;}
to				{background-position:0 0;}
}

@-ms-keyframes progress-bar-stripes {
from			{background-position:40px 0;}
to				{background-position:0 0;}
}

@-o-keyframes progress-bar-stripes {
from			{background-position:0 0;}
to				{background-position:40px 0;}
}

@keyframes progress-bar-stripes {
from			{background-position:40px 0;}
to				{background-position:0 0;}
}
/*Steps*/
.steps						{cursor:pointer; display:inline-block; *display:inline; *zoom:1; font-size:0; -moz-box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2); box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2); line-height:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:0.3rem; -webkit-border-radius:0.3rem; border-radius:0.3rem;}
.steps > .step				{display:inline-block; *display:inline; *zoom:1; position:relative; padding:1em 2em 1em 3em; line-height:1; background-color:#fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; vertical-align:middle;}
.steps > .step:after		{position:absolute; z-index:2; content: ''; top:0; right:-1.5em; border-bottom:1.5em solid transparent; border-left:1.5em solid #fff; border-top:1.5em solid transparent; width:0; height:0;}
.steps > .step:after		{-webkit-transition:opacity 0.1s ease,color 0.1s ease,box-shadow 0.1s ease; -moz-transition:opacity 0.1s ease,color 0.1s ease,box-shadow 0.1s ease; -o-transition:opacity 0.1s ease,color 0.1s ease,box-shadow 0.1s ease; -ms-transition:opacity 0.1s ease,color 0.1s ease,box-shadow 0.1s ease; transition:opacity 0.1s ease,color 0.1s ease,box-shadow 0.1s ease;}
.steps > .step:first-child	{padding-left:1.35em; -webkit-border-radius:0.3em 0em 0em 0.3em; -moz-border-radius:0.3em 0em 0em 0.3em; border-radius:0.3em 0em 0em 0.3em;}
.steps > .step:last-child	{-webkit-border-radius:0em 0.3em 0.3em 0em; -moz-border-radius:0em 0.3em 0.3em 0em; border-radius:0em 0.3em 0.3em 0em;}
.steps > .step:only-child	{-webkit-border-radius:0.3em; -moz-border-radius:0.3em; border-radius:0.3em;}
.steps > .step:last-child	{margin-right:0em;}
.steps > .step:last-child:after {display: none;}
.steps > .step:hover,.steps > .step.hover{background-color:#f5f5f5; color:rgba(0,0,0,0.8);}
.steps > .step:hover:after,.steps > .step.hover:after{border-left-color:#f5f5f5;}
.steps > .step.active,.steps > .active.step{cursor:auto; background-color:#333; color:#fff;}
.steps > .step.active:after		{border-left-color:#333;}
.steps > .step.disable			{cursor:not-allowed; background-color:#fff; color:#ccc;}
.steps > .step.disable:after	{border:none; background-color:#fff; top:0.425em; right:-1em; width:2.15em; height:2.15em; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-box-shadow:-1px -1px 0px 0px rgba(0,0,0,0.15) inset; -moz-box-shadow:-1px -1px 0px 0px rgba(0,0,0,0.15) inset; box-shadow:-1px -1px 0px 0px rgba(0,0,0,0.15) inset;}

/*Item_Sys*/
.logo			{display:inline-block; *display:inline; *zoom:1; overflow:hidden; padding:0; margin:0; background:url(../images/logo.png) no-repeat left -60px; width:140px; height:40px; font-size:0;}

[class^="vip_"],[class*="vip_"]	{background-image:url(../images/badge.png); background-repeat:no-repeat; width:20px; height:20px; vertical-align:middle; display:inline-block; *display:inline; *zoom:1; font-size:0; padding:0; margin:2px auto; line-height:0; line-height:0;}
.vip_0			{background-position:-60px top;}
.vip_1			{background-position:-60px -20px;}
.vip_2			{background-position:-60px -40px;}
.vip_3			{background-position:-60px -60px;}
.vip_4			{background-position:-60px -80px;}
.vip_5			{background-position:-60px -100px;}
.vip_6			{background-position:-60px -120px;}
.vip_7			{background-position:-60px -140px;}
.vip_8			{background-position:-60px -160px;}
.vip_9			{background-position:-60px -180px;}