* { margin: 0; padding: 0; }
ul { list-style: none; padding: 0; }
img { border: 0; }
table { border-collapse: collapse; border: 0; }

/************************************* Common **************************************/

/* font */
.f12  { font-size: 12px; }
.f12b { font-size: 12px; font-weight: bold; }
.f14  { font-size: 14px; }
.f14b { font-size: 14px; font-weight: bold; }
.f16  { font-size: 16px; }
.f16b { font-size: 16px; font-weight: bold; }
.f18  { font-size: 18px; }
.f18b { font-size: 18px; font-weight: bold; }
.fb   { font-weight: bold; }
.p12n { font-size: 12px; line-height: 18px; vertical-align: middle; }
.p12d { font-size: 12px; line-height: 24px; vertical-align: middle; }

/* text alignment */
.tal  { text-align: left; }
.tac  { text-align: center; }
.tar  { text-align: right; }

/* float */
.fl { float: left; }
.fr { float: right; }

/* position */
.abs { position: absolute; }
.rel { position: relative; }

/* z index */
.z1    { z-index: 1; }
.z2    { z-index: 2; }
.z5    { z-index: 5; }
.z10   { z-index: 10; }
.z20   { z-index: 20; }
.z50   { z-index: 50; }
.z100  { z-index: 100; }
.z500  { z-index: 500; }
.z1000 { z-index: 1000; }
.z9999 { z-index: 9999; }

/* width & height */
.w10   { width: 10px; }
.w20   { width: 20px; }
.w30   { width: 30px; }
.w40   { width: 40px; }
.w50   { width: 50px; }
.w60   { width: 60px; }
.w70   { width: 70px; }
.w80   { width: 80px; }
.w90   { width: 90px; }
.w100  { width: 100px; }
.w110  { width: 110px; }
.w120  { width: 120px; }
.w130  { width: 130px; }
.w140  { width: 140px; }
.w150  { width: 150px; }
.w160  { width: 160px; }
.w200  { width: 200px; }
.w250  { width: 250px; }
.w300  { width: 300px; }
.w400  { width: 400px; }
.w500  { width: 500px; }
.w100p { width: 100%; }
.wauto { width: auto; }
.h10   { height: 10px; }
.h20   { height: 20px; }
.h50   { height: 50px; }
.h80   { height: 80px; }
.h100  { height: 100px; }
.h150  { height: 150px; }
.h200  { height: 200px; }
.h250  { height: 250px; }
.h300  { height: 300px; }
.h350  { height: 350px; }
.h500  { height: 500px; }
.hauto { height: auto; }

/* margin & padding */
.ml0   { margin-left:    0px; }
.mr0   { margin-right:   0px; }
.mt0   { margin-top:     0px; }
.mb0   { margin-bottom:  0px; }
.pl0   { padding-left:   0px; }
.pr0   { padding-right:  0px; }
.pt0   { padding-top:    0px; }
.pb0   { padding-bottom: 0px; }
.ml1   { margin-left:    1px; }
.mr1   { margin-right:   1px; }
.mt1   { margin-top:     1px; }
.mb1   { margin-bottom:  1px; }
.pl1   { padding-left:   1px; }
.pr1   { padding-right:  1px; }
.pt1   { padding-top:    1px; }
.pb1   { padding-bottom: 1px; }
.ml2   { margin-left:    2px; }
.mr2   { margin-right:   2px; }
.mt2   { margin-top:     2px; }
.mb2   { margin-bottom:  2px; }
.pl2   { padding-left:   2px; }
.pr2   { padding-right:  2px; }
.pt2   { padding-top:    2px; }
.pb2   { padding-bottom: 2px; }
.ml5   { margin-left:    5px; }
.mr5   { margin-right:   5px; }
.mt5   { margin-top:     5px; }
.mb5   { margin-bottom:  5px; }
.pl5   { padding-left:   5px; }
.pr5   { padding-right:  5px; }
.pt5   { padding-top:    5px; }
.pb5   { padding-bottom: 5px; }
.ml10  { margin-left:    10px; }
.mr10  { margin-right:   10px; }
.mt10  { margin-top:     10px; }
.mb10  { margin-bottom:  10px; }
.pl10  { padding-left:   10px; }
.pr10  { padding-right:  10px; }
.pt10  { padding-top:    10px; }
.pb10  { padding-bottom: 10px; }
.ml20  { margin-left:    20px; }
.mr20  { margin-right:   20px; }
.mt20  { margin-top:     20px; }
.mb20  { margin-bottom:  20px; }
.pl20  { padding-left:   20px; }
.pr20  { padding-right:  20px; }
.pt20  { padding-top:    20px; }
.pb20  { padding-bottom: 20px; }
.ml50  { margin-left:    50px; }
.mr50  { margin-right:   50px; }
.mt50  { margin-top:     50px; }
.mb50  { margin-bottom:  50px; }
.pl50  { padding-left:   50px; }
.pr50  { padding-right:  50px; }
.pt50  { padding-top:    50px; }
.pb50  { padding-bottom: 50px; }
.ml100 { margin-left:    100px; }
.mr100 { margin-right:   100px; }
.mt100 { margin-top:     100px; }
.mb100 { margin-bottom:  100px; }
.pl100 { padding-left:   100px; }
.pr100 { padding-right:  100px; }
.pt100 { padding-top:    100px; }
.pb100 { padding-bottom: 100px; }
.ml150 { margin-left:    150px; }
.mr150 { margin-right:   150px; }
.mt150 { margin-top:     150px; }
.mb150 { margin-bottom:  150px; }
.pl150 { padding-left:   150px; }
.pr150 { padding-right:  150px; }
.pt150 { padding-top:    150px; }
.pb150 { padding-bottom: 150px; }
.ml200 { margin-left:    200px; }
.mr200 { margin-right:   200px; }
.mt200 { margin-top:     200px; }
.mb200 { margin-bottom:  200px; }
.pl200 { padding-left:   200px; }
.pr200 { padding-right:  200px; }
.pt200 { padding-top:    200px; }
.pb200 { padding-bottom: 200px; }
.ml250 { margin-left:    250px; }
.mr250 { margin-right:   250px; }
.mt250 { margin-top:     250px; }
.mb250 { margin-bottom:  250px; }
.pl250 { padding-left:   250px; }
.pr250 { padding-right:  250px; }
.pt250 { padding-top:    250px; }
.pb250 { padding-bottom: 250px; }
.ml300 { margin-left:    300px; }
.mr300 { margin-right:   300px; }
.mt300 { margin-top:     300px; }
.mb300 { margin-bottom:  300px; }
.pl300 { padding-left:   300px; }
.pr300 { padding-right:  300px; }
.pt300 { padding-top:    300px; }
.pb300 { padding-bottom: 300px; }

/* cursor */
.cp { cursor: pointer; }
.cm { cursor: move; }
.cn { cursor: default; }

/* word break */
.wb { word-break: break-all; word-wrap: break-word; }

/**
* @brief float fixed
*/
.clearfix:after { clear: both; }
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; }
.clearfix { zoom: 1; }

/* special style */
.no { display: none; }
.no-ie { display: none\9; }
.dp-inline{ display: inline; }
.dp-block{ display: block; }
.dp-ib { display: inline-block; zoom: 1; }

/* columns */
.col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { float: left; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }

/* panel */
.panel { margin-bottom: 20px; background-color: #FFF; border: 1px solid rgba(0, 0, 0, 0); }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0); }
.panel-body { padding: 15px; }

/* css3 styles */
.shadow  { box-shadow:5px 5px 20px #CCCCCC; -moz-box-shadow:5px 5px 20px #CCCCCC; -webkit-box-shadow:5px 5px 20px #CCCCCC; }

.radius3  { border-radius: 3px;  -moz-border-radius: 3px;  }
.radius5  { border-radius: 5px;  -moz-border-radius: 5px;  }
.radius8  { border-radius: 8px;  -moz-border-radius: 8px;  }
.radius10 { border-radius: 10px; -moz-border-radius: 10px; }
.radius20 { border-radius: 20px; -moz-border-radius: 20px; }

.bottom-radius3  { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px;  -moz-border-radius-bottomright: 3px;}
.bottom-radius5  { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;  -moz-border-radius-bottomright: 5px;  }
.bottom-radius8  { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px;  -moz-border-radius-bottomright: 8px;  }
.bottom-radius10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px;  -moz-border-radius-bottomright: 10px; }
.bottom-radius20 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px;  -moz-border-radius-bottomright: 20px; }

/* html5 element */
header, footer, nav, section { display: block; }