/* 
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
*/
/*Base*/
button,input,select,textarea{font-family:inherit; margin:0; font-size:100%; display:inline-block; *display:inline; *zoom:1; vertical-align:middle; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0; padding:0;}
/*Input_Sys*/
.input{font-size:0; *word-spacing:-1px; line-height:0; position:relative;}
.input > i{padding:0.5em; font-size:1.1rem;}
.input > .left{position:absolute; left:0; top:0; height:100%;}
.input > .right{position:absolute; right:0; top:0; height:100%;}
.input > input ~ i		{opacity:0.5;}
.input > input:focus ~ i{opacity:1;}
.input.disable			{opacity:0.5; cursor:not-allowed;}
.input.disable > input	{cursor:not-allowed;}
/*Input_Size*/
.input.mini	> *			{font-size:0.7rem;}
.input.mini	> i			{padding:1.2em 1em;}
.input.small > *		{font-size:0.8rem;}
.input.small > i		{padding:1.2em 1em;}
.input.medium > *		{font-size:0.9rem;}
.input.medium > i		{padding:1.2em 1em;}
.input.normal > *		{font-size:1rem;}
.input.normal > i		{padding:1.2em 1em;}
.input.lager > *		{font-size:1.2rem;}
.input.lager > i		{padding:1.2em 1em;}
.input.big > *			{font-size:1.5rem;}
.input.big > i			{padding:1em;}
.input.massive > *		{font-size:2.5rem;}
.input.massive > i		{padding:1em;}

textarea,input[type="text"],input[type="date"],input[type="password"]{width:100%; margin:0; padding:0.785em 1em; font-size:0.8rem; background-color:#fff; border:1px solid rgba(0,0,0,0.2); outline:none; color:rgba(0,0,0,0.7); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus{color:rgba(0,0,0,0.85); border-color:rgba(0,0,0,0.35); -webkit-appearance:none;}
/*Input_Color*/
.input.black			{color:#000;}
.input.black > textarea,.input.black > input[type="text"],.input.black > input[type="date"],.input.black > input[type="password"]{border:1px solid rgba(0,0,0,0.3); color:#000;}
.input.black > textarea:focus,.input.black > input[type="text"]:focus,.input.black > input[type="date"]:focus,.input.black > input[type="password"]:focus{border:1px solid rgba(0,0,0,0.6); color:#000;}
.input.blue				{color:#0cf;}
.input.blue > textarea,.input.blue > input[type="text"],.input.blue > input[type="date"],.input.blue > input[type="password"]{border:1px solid rgba(0,200,255,0.3); color:#0cf;}
.input.blue > textarea:focus,.input.blue > input[type="text"]:focus,.input.blue > input[type="date"]:focus,.input.blue > input[type="password"]:focus{border:1px solid rgba(0,200,255,0.6);}
.input.Dblue			{color:#039;}
.input.Dblue > textarea,.input.Dblue > input[type="text"],.input.Dblue > input[type="date"],.input.Dblue > input[type="password"]{border:1px solid rgba(0,51,153,0.3); color:#039;}
.input.Dblue > textarea:focus,.input.Dblue > input[type="text"]:focus,.input.Dblue > input[type="date"]:focus,.input.Dblue > input[type="password"]:focus{border:1px solid rgba(0,51,153,0.6);}
.input.gray				{color:#999;}
.input.gray > textarea,.input.gray > input[type="text"],.input.gray > input[type="date"],.input.gray > input[type="password"]{border:1px solid rgba(153,153,153,0.3); color:#999;}
.input.gray > textarea:focus,.input.gray > input[type="text"]:focus,.input.gray > input[type="date"]:focus,.input.gray > input[type="password"]:focus{border:1px solid rgba(153,153,153,0.6);}
.input.green			{color:#9c0;}
.input.green > textarea,.input.green > input[type="text"],.input.green > input[type="date"],.input.green > input[type="password"]{border:1px solid rgba(153,204,0,0.3); color:#9c0;}
.input.green > textarea:focus,.input.green > input[type="text"]:focus,.input.green > input[type="date"]:focus,.input.green > input[type="password"]:focus{border:1px solid rgba(153,204,0,0.6);}
.input.red				{color:#d00;}
.input.red > textarea,.input.red > input[type="text"],.input.red > input[type="date"],.input.red > input[type="password"]{border:1px solid rgba(221,0,0,0.3); color:#d00;}
.input.red > textarea:focus,.input.red > input[type="text"]:focus,.input.red > input[type="date"]:focus,.input.red > input[type="password"]:focus{border:1px solid rgba(221,0,0,0.6);}
.input.orange			{color:#f60;}
.input.orange > textarea,.input.orange > input[type="text"],.input.orange > input[type="date"],.input.orange > input[type="password"]{border:1px solid rgba(255,102,0,0.3); color:#f60;}
.input.orange > textarea:focus,.input.orange > input[type="text"]:focus,.input.orange > input[type="date"]:focus,.input.orange > input[type="password"]:focus{border:1px solid rgba(255,102,0,0.6);}
.input.pink				{color:#f09;}
.input.pink > textarea,.input.pink > input[type="text"],.input.pink > input[type="date"],.input.pink > input[type="password"]{border:1px solid rgba(255,0,153,0.3); color:#f09;}
.input.pink > textarea:focus,.input.pink > input[type="text"]:focus,.input.pink > input[type="date"]:focus,.input.pink > input[type="password"]:focus{border:1px solid rgba(255,0,153,0.6);}
.input.purpl			{color:#909;}
.input.purple > textarea,.input.purple > input[type="text"],.input.purple > input[type="date"],.input.purple > input[type="password"]{border:1px solid rgba(153,0,153,0.3); color:#909;}
.input.purple > textarea:focus,.input.purple > input[type="text"]:focus,.input.purple > input[type="date"]:focus,.input.purple > input[type="password"]:focus{border:1px solid rgba(153,0,153,0.6);}
.input.white			{color:#fff;}
.input.white > textarea,.input.white > input[type="text"],.input.white > input[type="date"],.input.white > input[type="password"]{border:1px solid rgba(0,0,0,0.3); color:#fff; background-color:rgba(50,50,50,0.8);}
.input.white > textarea:focus,.input.white > input[type="text"]:focus,.input.white > input[type="date"]:focus,.input.white > input[type="password"]:focus{border:1px solid rgba(0,0,0,0.6);}
.input.yellow			{color:#fc0;}
.input.yellow > textarea,.input.yellow > input[type="text"],.input.yellow > input[type="date"],.input.yellow > input[type="password"]{border:1px solid rgba(255,204,0,0.3); color:#fc0;}
.input.yellow > textarea:focus,.input.yellow > input[type="text"]:focus,.input.yellow > input[type="date"]:focus,.input.yellow > input[type="password"]:focus{border:1px solid rgba(255,204,0,0.6);}
textarea				{line-height:1.33; min-height:8em; height:12em; max-height:24em; resize:vertical;}
select					{-webkit-tap-highlight-color:rgba(255,255,255,0); width:auto; margin:0; vertical-align:middle; font-size:0.8rem; padding:.7em; line-height:1;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select{height:35px; line-height:35px;}
}
select,input[type="file"]{}
select[multiple],select[size]{height:auto;}
/*Button_Sys*/
button,[class^="btn_"],[class*=" btn_"],input[type="button"]{cursor:pointer; font-family:inherit; background:#333; outline:none; position:relative; display:inline-block; *display:inline; *zoom:1; line-height:normal; letter-spacing:normal; border:none; text-decoration:none; vertical-align:middle; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; padding:0.5em 1em; margin:0; color:rgba(255,255,255,0.8) !important; text-shadow:0 1px 0px rgba(0,0,0,0.3); font-size:1rem; text-align:center !important; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-transition:opacity 0.25s ease,background-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease; -moz-transition:opacity 0.25s ease,background-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease; -o-transition:opacity 0.25s ease,background-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease; -ms-transition:opacity 0.25s ease,background-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease; transition:opacity 0.25s ease,background-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease;}
a[class^="btn_"],a[class*=" btn_"],a[class^="btn_"]:link,a[class*=" btn_"]:link,a[class^="btn_"]:visited,a[class*=" btn_"]:visited{color:rgba(255,255,255,0.8) !important;}
[class^="btn_"]:hover,[class*=" btn_"]:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background-color:#111;}
[class^="btn_"].active,[class*=" btn_"].active,button.active,input[type="submit"].active,input[type="reset"].active,input[type="button"].active{background-color:#111;}
/*Button_Size*/
button.mini,[class^="btn_"].mini,[class*=" btn_"].mini,input[type="button"].mini{font-size:0.7rem;}
button.small,[class^="btn_"].small,[class*=" btn_"].small,input[type="button"].small{font-size:0.8rem;}
button.medium,[class^="btn_"].medium,[class*=" btn_"].medium,input[type="button"].medium{font-size:0.9rem;}
button.normal,[class^="btn_"].normal,[class*=" btn_"].normal,input[type="button"].normal{font-size:1.2rem;}
button.lager,[class^="btn_"].lager,[class*=" btn_"].lager,input[type="button"].lager{font-size:2rem;}
button.big,[class^="btn_"].big,[class*=" btn_"].big,input[type="button"].big{font-size:3rem;}
button.massive,[class^="btn_"].massive,[class*=" btn_"].massive,input[type="button"].massive{font-size:8rem;}
/*Button_Color*/
button.black,[class^="btn_"].black,[class*=" btn_"].black,input[type="button"].black{background-color:#222;}
button.black:hover,[class^="btn_"].black:hover,[class*=" btn_"].black:hover,input[type="button"].black:hover{background-color:#000;}
button.black.active,[class^="btn_"].black.active,[class*=" btn_"].black.active,input[type="button"].black.active{background-color:#000;}
button.blue,[class^="btn_"].blue,[class*=" btn_"].blue,input[type="button"].blue{background-color:#0cf;}
button.blue:hover,[class^="btn_"].blue:hover,[class*=" btn_"].blue:hover,input[type="button"].blue:hover{background-color:#09f;}
button.blue.active,[class^="btn_"].blue.active,[class*=" btn_"].blue.active,input[type="button"].blue.active{background-color:#09f;}
button.Dblue,[class^="btn_"].Dblue,[class*=" btn_"].Dblue,input[type="button"].Dblue{background-color:#039;}
button.Dblue:hover,[class^="btn_"].Dblue:hover,[class*=" btn_"].Dblue:hover,input[type="button"].Dblue:hover{background-color:#009;}
button.Dblue.active,[class^="btn_"].Dblue.active,[class*=" btn_"].Dblue.active,input[type="button"].Dblue.active{background-color:#009;}
button.gray,[class^="btn_"].gray,[class*=" btn_"].gray,input[type="button"].gray{background-color:#ddd; color:rgba(0,0,0,0.8) !important; text-shadow:0 -1px 0px rgba(255,255,255,0.3);}
a[class^="btn_"].gray,a[class*=" btn_"].gray{color:rgba(0,0,0,0.8) !important;}
button.gray:hover,[class^="btn_"].gray:hover,[class*=" btn_"].gray:hover,input[type="button"].gray:hover{background-color:#aaa;}
button.gray.active,[class^="btn_"].gray.active,[class*=" btn_"].gray.active,input[type="button"].gray.active{background-color:#aaa;}
button.green,[class^="btn_"].green,[class*=" btn_"].green,input[type="button"].green{background-color:#9c0;}
button.green:hover,[class^="btn_"].green:hover,[class*=" btn_"].green:hover,input[type="button"].green:hover{background-color:#6c0;}
button.green.active,[class^="btn_"].green.active,[class*=" btn_"].green.active,input[type="button"].green.active{background-color:#6c0;}
button.red,[class^="btn_"].red,[class*=" btn_"].red,input[type="button"].red{background-color:#d00;}
button.red:hover,[class^="btn_"].red:hover,[class*=" btn_"].red:hover,input[type="button"].red:hover{background-color:#b00;}
button.red.active,[class^="btn_"].red.active,[class*=" btn_"].red.active,input[type="button"].red.active{background-color:#b00;}
button.orange,[class^="btn_"].orange,[class*=" btn_"].orange,input[type="button"].orange{background-color:#f60;}
button.orange:hover,[class^="btn_"].orange:hover,[class*=" btn_"].orange:hover,input[type="button"].orange:hover{background-color:#f30;}
button.orange.active,[class^="btn_"].orange.active,[class*=" btn_"].orange.active,input[type="button"].orange.active{background-color:#f30;}
button.pink,[class^="btn_"].pink,[class*=" btn_"].pink,input[type="button"].pink{background-color:#f03;}
button.pink:hover,[class^="btn_"].pink:hover,[class*=" btn_"].pink:hover,input[type="button"].pink:hover{background-color:#f09;}
button.pink.active,[class^="btn_"].pink.active,[class*=" btn_"].pink.active,input[type="button"].pink.active{background-color:#f09;}
button.purple,[class^="btn_"].purple,[class*=" btn_"].purple,input[type="button"].purple{background-color:#909;}
button.purple:hover,[class^="btn_"].purple:hover,[class*=" btn_"].purple:hover,input[type="button"].purple:hover{background-color:#606;}
button.purple.active,[class^="btn_"].purple.active,[class*=" btn_"].purple.active,input[type="button"].purple.active{background-color:#606;}
button.white,[class^="btn_"].white,[class*=" btn_"].white,input[type="button"].white{background-color:#eee; color:rgba(0,0,0,0.8) !important; text-shadow:0 -1px 0px rgba(255,255,255,0.3);}
button.white:hover,[class^="btn_"].white:hover,[class*=" btn_"].white:hover,input[type="button"].white:hover{background-color:#ddd;}
button.white.active,[class^="btn_"].white.active,[class*=" btn_"].white.active,input[type="button"].white.active{background-color:#ddd;}
button.yellow,[class^="btn_"].yellow,[class*=" btn_"].yellow,input[type="button"].yellow{background-color:#fc0;}
button.yellow:hover,[class^="btn_"].yellow:hover,[class*=" btn_"].yellow:hover,input[type="button"].yellow:hover{background-color:#ff3;}
button.yellow.active,[class^="btn_"].yellow.active,[class*=" btn_"].yellow.active,input[type="button"].yellow.active{background-color:#ff3;}
button.disable,[class^="btn_"].disable,[class*=" btn_"].disable,input[type="button"].disable{opacity:0.3; cursor:not-allowed;}
/*CheckBox*/
.checkBox{display:inline-block; *display:inline; *zoom:1; position:relative; vertical-align:middle; font-size:.85rem; padding:0; line-height:1;}
.checkBox input{top:0; right:0; bottom:0; left:0; opacity:0; z-index:100; position:absolute; width:100%; height:100%; cursor:pointer;}
.checkBox label{display:inline-block; *display:inline; *zoom:1; position:relative; width:1.5em; height:1.5em; padding:0; border:1px solid rgba(0,0,0,0.5); position:relative; vertical-align:middle;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -webkit-box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5); -ms-box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5); -o-box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5); background-color:rgba(255,255,255,0.8);}
.checkBox label i:before{vertical-align:middle; font-family:'kjcmsregular'; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; vertical-align:middle; line-height:1; position:absolute; left:0; top:0; width:100%; height:100%; line-height:1.5; font-size:1em; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.checkBox input:checked ~ label i:before{content: "\0056";}
.checkBox font{font-size:.8rem;}

.checkBox.radio label{-moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}
.checkBox.radio input:checked ~  label i:before{display:block; background-color:rgba(0,0,0,0.8); width:60%; height:60%; left:20%; top:20%; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; -webkit-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -ms-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -o-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); font-size:0;}

.checkBox.switch label{padding-right:1.5em; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}
.checkBox.switch label i:before{content:" "; display:block; background-color:rgba(50,50,50,0.9); width:1em; height:1em; left:.25em; top:.25em; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; border:1px solid rgba(0,0,0,0.5); -webkit-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -ms-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); -o-box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:0 3px 8px 1px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.5);}
.checkBox.switch input:checked ~ label i:before{content:" "; margin-left:1.5em; background-color:rgba(153,204,0,1);}
.checkBox.switch font:before{content:"off"; text-transform:uppercase;}
.checkBox.switch input:checked ~ font:before{content:"on";}

.form{position:relative;}
.form li{vertical-align:middle;}
.form_normal{position:relative;}
.form_normal li{padding:5px;}
form .help_info{font-size:12px; color:#999;}