tutorial / directive

@charset "utf-8";body,pre{font-family:"Microsoft Yahei";font-size:14px}.home{background:#39f}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0}article,aside,details,dialog,figcaption,figure,footer,header,menu,nav,section{display:block}pre{background:0 0}li,ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{margin:0;padding:0;color:#333}label{font-weight:400}body{line-height:1.5;background:#fff;color:#333}a{cursor:pointer}.font-red{color:#ea281a}.font-white{color:#fff}.font-orange{color:#f90}.font-green{color:#1aad3e}.font-blue{color:#39f}.font-yellow{color:#ffce53}.font-black{color:#333}.font-gray{color:#666}.font-light{color:#999}.xn-fw{font-weight:700}.xn-center,.xn-text-center{text-align:center}.xn-text-right{text-align:right}.xn-text-left{text-align:left}.btn,.xn-table-wrap .table tbody .center{text-align:center}.xn-inline{display:inline-block}.xn-block{display:block}.xn-relative{position:relative}.xn-absolute{position:absolute}.none{display:none}.f-left{float:left}.f-right{float:right}:focus{outline:0}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.auto{margin:0 auto}input[type=file].none{display:none}input[type=radio],input[type=checkbox]{width:20px;height:20px;float:left;margin-right:5px;margin-top:7px}a img{border:none}.xn-width{width:980px}@media screen and (min-width:1200px){.xn-width{width:1190px}}.line{height:0;border-top:1px solid #ddd;margin:20px 0;line-height:0}.btn-normal,.btn-normal-disable{height:36px;font-size:14px;line-height:36px;padding:0 20px;font-weight:600}.btn{display:inline-block;width:auto;font-size:14px;border-radius:2px;border:none}.btn-normal{color:#333;background:#ddd}.btn-normal:hover{background:#eee}.btn-normal:focus{background:#ccc}.btn-normal-disable{color:#ccc;background:#eee}.btn-sm,.btn-sm-disable{height:30px;font-size:14px;line-height:30px;padding:0 15px}.btn-normal-disable:focus,.btn-normal-disable:hover{color:#ccc}.btn-sm{color:#333;background:#ddd}.btn-sm-disable,.btn-sm:hover{background:#eee}.btn-sm-disable,.btn-sm-disable:focus,.btn-sm-disable:hover{color:#ccc}.btn-sm:focus{background:#ccc}.btn-primary{color:#fff;background:#39f}.btn-primary:hover{color:#fff;background:#69f}.btn-primary:focus{background:#2976eb}.btn-special{height:48px;color:#fff;font-weight:600;line-height:48px;padding:0;width:300px;background:#f90;font-size:18px}.btn-special:hover{background:#ffcb7e;color:#fff}.btn-special:focus{color:#fff;background:#ffb344}.xn-col-sm-1{width:2.0833333%}.xn-col-sm-2{width:4.1666666%}.xn-col-sm-3{width:6.2499999%}.xn-col-sm-4{width:8.3333332%}.xn-col-sm-5{width:10.4166665%}.xn-col-sm-6{width:12.4999998%}.xn-col-sm-7{width:14.5833331%}.xn-col-sm-8{width:16.6666664%}.xn-col-sm-9{width:18.7499997%}.xn-col-sm-10{width:20.833333%}.xn-col-sm-11{width:22.9166663%}.xn-col-sm-12{width:24.9999996%}.xn-col-sm-13{width:27.083333%}.xn-col-sm-14{width:29.1666662%}.xn-col-sm-15{width:31.2499995%}.xn-col-sm-16{width:33.3333328%}.xn-col-sm-17{width:35.4166661%}.xn-col-sm-18{width:37.4999994%}.xn-col-sm-19{width:39.5833327%}.xn-col-sm-20{width:41.666666%}.xn-col-sm-21{width:43.7499993%}.xn-col-sm-22{width:45.8333326%}.xn-col-sm-23{width:47.9166659%}.xn-col-sm-24{width:49.9999992%}.xn-col-sm-25{width:52.083333%}.xn-col-sm-26{width:54.166666%}.xn-col-sm-27{width:56.249999%}.xn-col-sm-28{width:58.3333324%}.xn-col-sm-29{width:60.4166657%}.xn-col-sm-30{width:62.499999%}.xn-col-sm-31{width:64.5833323%}.xn-col-sm-32{width:66.6666656%}.xn-col-sm-33{width:68.749999%}.xn-col-sm-34{width:70.8333322%}.xn-col-sm-35{width:72.916666%}.xn-col-sm-36{width:74.9999988%}.xn-col-sm-37{width:77.0833321%}.xn-col-sm-38{width:79.1666654%}.xn-col-sm-39{width:81.2499987%}.xn-col-sm-40{width:83.333332%}.xn-col-sm-41{width:85.4166653%}.xn-col-sm-42{width:87.4999986%}.xn-col-sm-43{width:89.5833319%}.xn-col-sm-44{width:91.6666652%}.xn-col-sm-45{width:93.7499985%}.xn-col-sm-46{width:95.8333318%}.xn-col-sm-47{width:97.9166651%}.xn-col-sm-48{width:100%}.xn-col-md-1{width:4.1666666%}.xn-col-md-2{width:8.3333332%}.xn-col-md-3{width:12.4999998%}.xn-col-md-4{width:16.6666664%}.xn-col-md-5{width:20.833333%}.xn-col-md-6{width:24.9999996%}.xn-col-md-7{width:29.1666662%}.xn-col-md-8{width:33.3333328%}.xn-col-md-9{width:37.4999994%}.xn-col-md-10{width:41.666666%}.xn-col-md-11{width:45.8333326%}.xn-col-md-12{width:49.9999992%}.xn-col-md-13{width:54.166666%}.xn-col-md-14{width:58.3333324%}.xn-col-md-15{width:62.499999%}.xn-col-md-16{width:66.6666656%}.xn-col-md-17{width:70.8333322%}.xn-col-md-18{width:74.9999988%}.xn-col-md-19{width:79.1666654%}.xn-col-md-20{width:83.333332%}.xn-col-md-21{width:87.4999986%}.xn-col-md-22{width:91.6666652%}.xn-col-md-23{width:95.8333318%}.xn-col-md-24{width:100%}.xn-table-wrap{margin:0;padding:0;font-size:14px}.xn-table-wrap .table{border:none;margin-bottom:0}.xn-table-wrap .table thead tr{border-top:solid 1px #cdcdcd;border-bottom:solid 1px #cdcdcd}.xn-table-wrap .table thead tr th{border:none;font-size:14px;color:#333;font-weight:400}.xn-table-wrap .table tbody tr{border-bottom:solid 1px #cdcdcd}.xn-table-wrap .table tbody tr .selectCl{background:#F8F8FF;color:#333;font-weight:700}.xn-table-wrap .table tbody tr .selectCl:last-child,.xn-table-wrap .table tbody tr .selectCl:nth-last-child(2){font-weight:400}.xn-table-wrap .table tbody tr .selectCl pre{color:#333}.xn-table-wrap .table tbody tr td{border:none;background:#fff;padding:5px 8px;color:#666;font-size:14px}.xn-table-wrap .table tbody tr td pre{color:#666}.xn-table-wrap .table tbody tr td .icon-closed{padding-top:15px;width:85px;height:50px;font-size:45px;line-height:50px;display:inline-block}.xn-table-wrap .pagination{float:none;margin:20px 0}.xn-table-wrap input[type=radio],.xn-table-wrap input[type=checkbox]{float:none;margin-right:5px;margin-top:7px}.xn-table-wrap .table thead th{font-size:16px;height:30px;vertical-align:middle;line-height:30px;padding:0 8px;background:#ececf1}.xn-table-wrap .table tbody td{border-top:none;border-left:none;border-right:none;border-bottom:1px solid #ddd}.xn-table-wrap .table-bordered>thead>tr>th{border-bottom:1px solid #ddd}.xn-table-wrap .table-bordered>tbody>tr>td,.xn-table-wrap .table-bordered>tfoot>tr>td,.xn-table-wrap .table-bordered>tfoot>tr>th,.xn-table-wrap .table-bordered>thead>tr>td,.xn-table-wrap .table-bordered>thead>tr>th{border-color:#dcdcdc}.xn-table-wrap .table-striped>tbody>tr>td,.xn-table-wrap .table-striped>tbody>tr>th{background:#fff}.xn-table-wrap .table-striped>tbody>tr>td{vertical-align:middle;color:#34495e;min-height:50px;height:50px}.xn-table-wrap .table-striped>tbody>tr>td>i{width:20px;height:20px;display:inline-block;margin-right:5px}.xn-table-wrap .table-striped>tbody>tr>td>i.table-tel{background:url(images/xn_body.png) -780px top no-repeat}.xn-table-wrap .table-striped>tbody>tr>td>i.table-email{background:url(images/xn_body.png) -780px -37px no-repeat}.xn-table-wrap .table-striped>tbody>tr>td>i.table-ext{background:url(images/xn_body.png) -780px -78px no-repeat}.xn-table-wrap .table tbody .top{vertical-align:top}.xn-table-wrap .table tbody .state-true{color:#5f8459;font-weight:700}.xn-table-wrap .table tbody .state-false{color:#ea281a;font-weight:700}.xn-table-wrap .table tbody .view{position:relative;width:92px}.xn-table-wrap .table tbody .view .view-a{padding-left:10px;text-align:left;width:90px;height:34px;line-height:34px;border:1px solid transparent;display:inline-block;cursor:pointer;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;-khtml-border-radius:4px 4px 0 0}.xn-table-wrap .table tbody .view .view-a-center{text-align:center;padding-left:0}.xn-table-wrap .table tbody .view .view-a:hover{text-decoration:none;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;background:#f0ad4e;color:#fff}.xn-table-wrap .table tbody .view .view-a i{width:15px;height:15px;display:inline-block;position:absolute;line-height:34px;right:5px}.xn-table-wrap .table tbody .view .view-ul{position:absolute;top:34px;left:1px;width:90px;background:#fff;z-index:99;display:none;border-bottom:1px solid transparent;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-khtml-border-radius:0 0 4px 4px}.xn-table-wrap .table tbody .view li{width:100%;overflow:hidden;border-top:1px solid #bbb;height:34px}.xn-table-wrap .table tbody .view li a{text-align:center;line-height:34px;overflow:hidden;display:inline-block;width:100%}.xn-table-wrap .table tbody .view li a:hover{text-decoration:none;background:#f0ad4e;color:#fff}.xn-table-wrap .table tbody .showMessage .view-a{border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;background:#fff}.xn-table-wrap .table tbody .showMessage .view-a i{display:none}.xn-table-wrap .table tbody .showMessage .view-ul{display:inline-block;border-bottom:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb}.xn-table-wrap .order{margin-top:5px;width:20px;display:inline-block;float:right;overflow:hidden;margin-left:5px}.xn-table-wrap .order i.icon-downward-1,.xn-table-wrap .order i.icon-upward-1{text-align:center;float:right;line-height:10px;font-size:12px;height:10px;width:100%;color:#dcdcdc;cursor:pointer}.xn-breadcrumb .breadcrumb{background:#fff;font-size:12px;margin-bottom:0;color:#39f;padding:10px 0}#footer a,#footer span{line-height:24px;margin:10px 8px;text-align:center}.xn-breadcrumb .breadcrumb>li+li:before{padding:0 5px;color:#999;content:">"}.xn-breadcrumb .breadcrumb>.active{color:#999}#footer{border-top:1px solid #eee;line-height:24px;padding:5px auto;text-align:center;color:#bbb}#footer span{color:#bbb}#footer a,#footer a:hover{color:#bbb;text-decoration:none}