/* Qianglong Mo (SukeBeta) 2015 */

/* --------------------------------------------
 * font reset
 * -------------------------------------------- */
/* font family */
.ffam {  font-family: "microsoft yahei", Arial, "Helvetica Neue", Helvetica, sans-serif;  }

/* font size */
.font-size(@size){
  font-size: @size!important;
}

.fs9 { .font-size(9px)}
.fs10 { .font-size(10px)}
.fs12 { .font-size(12px)}
.fs14 { .font-size(14px)}
.fs16 { .font-size(16px)}
.fs18 { .font-size(18px)}
.fs20 { .font-size(20px)}
.fs22 { .font-size(22px)}
.fs24 { .font-size(24px)}
.fs26 { .font-size(26px)}
.fs28 { .font-size(28px)}
.fs30 { .font-size(30px)}
.fs32 { .font-size(32px)}
.fs34 { .font-size(34px)}
.fs36 { .font-size(36px)}

/* font style */
.fn { font-weight: normal;}
.fb { font-weight: bold;}
.fsn{ font-style: normal;}
.fsi{ font-style: italic;}

.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right { text-align: right;}

/* color */
.c_black { color: #000;}
.c_heavy { color: #333;}
.c_strong { color: #6c7280;}
.c_normal { color: #666;}
.c_light { color: #999;}
.c_white { color: #fff;}

.c_blue { color: #1aa9eb;}

/* --------------------------------------------
 * view reset
 * -------------------------------------------- */
/* padding margin */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  margin:0;
  padding:0;
}

/* float */
.fl { float: left;}
.fr { float: right;}
.float_n { float: none;}
.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
  overflow:hidden;
}
.clearfix {
  zoom:1;
}

.show, .block { display: block;}
.hide { display: none;}
.oh { overflow: hidden;}

button { border: none; cursor: pointer; .ffam;}

/* margin */
.margin-top(@margin-top){
  margin-top: @margin-top!important;
}

.margin-right(@margin-right){
  margin-right: @margin-right!important;;
}

.margin-bottom(@margin-bottom){
  margin-bottom: @margin-bottom!important;;
}

.margin-left(@margin-left){
  margin-left: @margin-left!important;;
}

.mt5 { .margin-top(5px)}
.mt10 { .margin-top(10px)}
.mt15 { .margin-top(15px)}
.mt20 { .margin-top(20px)}
.mt25 { .margin-top(25px)}
.mt30 { .margin-top(30px)}
.mt35 { .margin-top(35px)}
.mt40 { .margin-top(40px)}
.mt45 { .margin-top(45px)}
.mt50 { .margin-top(50px)}
.mt55 { .margin-top(55px)}
.mt60 { .margin-top(60px)}
.mt70 { .margin-top(70px)}
.mt80 { .margin-top(80px)}
.mt100 { .margin-top(100px)}

.mr5 { .margin-right(5px)}
.mr10 { .margin-right(10px)}
.mr15 { .margin-right(15px)}
.mr20 { .margin-right(20px)}
.mr25 { .margin-right(25px)}
.mr30 { .margin-right(30px)}
.mr35 { .margin-right(35px)}
.mr40 { .margin-right(40px)}
.mr45 { .margin-right(45px)}
.mr50 { .margin-right(50px)}
.mr55 { .margin-right(55px)}
.mr60 { .margin-right(60px)}
.mr70 { .margin-right(70px)}
.mr80 { .margin-right(80px)}
.mr100 { .margin-right(100px)}

.mb5 { .margin-bottom(5px)}
.mb10 { .margin-bottom(10px)}
.mb15 { .margin-bottom(15px)}
.mb20 { .margin-bottom(20px)}
.mb25 { .margin-bottom(25px)}
.mb30 { .margin-bottom(30px)}
.mb35 { .margin-bottom(35px)}
.mb40 { .margin-bottom(40px)}
.mb45 { .margin-bottom(45px)}
.mb50 { .margin-bottom(50px)}
.mb55 { .margin-bottom(55px)}
.mb60 { .margin-bottom(60px)}
.mb70 { .margin-bottom(70px)}
.mb80 { .margin-bottom(80px)}
.mb100 { .margin-bottom(100px)}

.ml5 { .margin-left(5px)}
.ml10 { .margin-left(10px)}
.ml15 { .margin-left(15px)}
.ml20 { .margin-left(20px)}
.ml25 { .margin-left(25px)}
.ml30 { .margin-left(30px)}
.ml35 { .margin-left(35px)}
.ml40 { .margin-left(40px)}
.ml45 { .margin-left(45px)}
.ml50 { .margin-left(50px)}
.ml55 { .margin-left(55px)}
.ml60 { .margin-left(60px)}
.ml70 { .margin-left(70px)}
.ml80 { .margin-left(80px)}
.ml100 { .margin-left(100px)}

/* --------------------------------------------
 * border
 * -------------------------------------------- */
/* border */
.border1 { border: 1px solid #d9d9de;}
.border1t { border-top: 1px solid #d9d9de;}
.border1r { border-right: 1px solid #d9d9de;}
.border1b { border-bottom: 1px solid #d9d9de;}
.border1l { border-left: 1px solid #d9d9de;}

.enableSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box-sizing(@value){
  -webkit-box-sizing: @value;
  -moz-box-sizing: @value;
  box-sizing: @value
}


.transition(@key:all, @duration:.2s){
  -webkit-transition: @key @duration;
  -moz-transition: @key @duration;
  -ms-transition: @key @duration;
  -o-transition: @key @duration;
  transition: @key @duration;
}

.transform(@property){
  -webkit-transform: @property;
  -moz-transform: @property;
  -ms-transform: @property;
  -o-transform: @property;
  transform: @property;
}

.transform-origin(@origin){
  -webkit-transform-origin: @origin;
  -moz-transform-origin: @origin;
  -ms-transform-origin: @origin;
  -o-transform-origin: @origin;
  transform-origin: @origin;
}

.box-shadow(@x, @y, @size, @color){
  box-shadow: @x @y @size @color;
  -webkit-box-shadow: @x @y @size @color;
  -moz-box-shadow: @x @y @size @color;
  -o-box-shadow: @x @y @size @color;
  -ms-box-shadow: @x @y @size @color;
}

.animation(@name, @duration, @infinite){
  animation: @name @duration @infinite;
  -webkit-animation: @name @duration @infinite;
  -moz-animation: @name @duration @infinite;
  -o-animation: @name @duration @infinite;
}