@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, ul, ol, li, dl, dd, input, button, textarea, fieldset, legend, figure, menu, th, td, pre{
	margin:0;
	padding:0;
}
body{font-size: 12px;font-family: "Arial", "Microsoft YaHei";color: #666;}
h1, h2, h3, h4, h5, h6{font-weight: normal;font-size: inherit;}
a{color: #999;text-decoration: none;outline: none;}
img{border: none;}
ul, ol{list-style: none;}
i, em{font-style: normal;}
table{border-collapse: collapse;}
td,th{padding:0}

.fl{float: left;}
.fr{float: right;}
.container:after,
.clearfix:after{content: "";display: block;clear: both;}

.side{position: fixed;top: 0;left: 0;width: 1920px;padding: 0 10px;background: #f5f5f5;height: 100%;box-shadow: 1px 0 3px rgba(51, 51, 51, .3);}
.side h1{margin: 20px 0;line-height: 20px;padding-top: 50px;background: url(img/logo.png) no-repeat;font-size: 14px;text-align: right;}
.side .anchor{position: relative !important;overflow: hidden;border-top: 1px solid #ccc;}
.side .anchor a{float: left;width: 100px;line-height: 24px;margin-top: 15px;background: #333;color: #fff;text-align: center;}
.side .anchor a:nth-child(even){float: right;}
.side .anchor a:hover,
.side .anchor a.active{background: #09c;color: #fff;}
.side .btn{margin-top: 50px;}
.side .btn a{display: block;line-height: 60px;color: #fff;text-align: center;font-weight: bold;font-size: 20px;-webkit-transition: all .3s;transition: all .3s;margin-bottom: 20px;}
.side .btn .github{background: #e0869f;}
.side .btn .github:hover{box-shadow: 1px 1px 5px #e0869f;}
.side .btn .download{background: #ef7520;}
.side .btn .download sub{font-weight:normal;font-size:14px;vertical-align:baseline;margin-left:5px;}
.side .btn .download:hover{box-shadow: 1px 1px 5px #ef7520;}

.main{
	overflow: hidden;
}
.main .container{position: relative;opacity: 0;}
.main .container:first-child{opacity: 1;}
.main h2{width: 960px;margin-bottom: 10px;font-weight: bold;font-size: 18px;color: #333;}
.main p{width: 960px;line-height: 24px;margin-bottom: 5px;font-size: 14px;}
.main .box{width: 960px;overflow: hidden;}
.main .banner{float: left;width: 1920px;height: 540px;margin-right: 10px;}
.main .code{float: left;width: calc(100% - 970px);}
.main pre{padding: 2px;border: 1px solid #23241f;}
.main pre .hljs{font: 14px/1.4 "Consolas";}
@media (max-width: 1580px){.main .code{width: 960px;margin-top: 5px;}}

.custom .tb-arrow a{width: 64px;height: 64px;opacity: 0;-webkit-transition: all .3s;transition: all .3s;}
.custom .tb-arrow a.prev{background: url(img/icon-prev.png) no-repeat;}
.custom .tb-arrow a.next{background: url(img/icon-next.png) no-repeat;}
.custom .banner:hover .tb-arrow a{opacity: 1;}
.custom .tb-btn{bottom: 0;height: 10px;}
.custom .tb-btn a{width: 200px;margin: 0;box-sizing: border-box;background: #666;border-right: 1px solid #fff;border-radius: 0;}
.custom .tb-btn a:last-child{border: none;}
.custom .tb-btn a.active{background: #f80;}

.animation .select{position: absolute;top: 35px;left: 860px;z-index: 10;width: 100px;cursor: default;font-family: "Consolas";}
.animation .select:after{position: absolute;top: 10px;right: 10px;content: "";border: 5px solid rgba(0, 0, 0, 0);border-top: 6px solid #fff;}
.animation .select span{display: block;line-height: 26px;background: #333;color: #fff;text-indent: 10px;}
.animation .select ul{position: absolute;top: 26px;left: 0;width: 100%;height: 0;overflow: hidden;-webkit-transition: all .3s;transition: all .3s;}
.animation .select.active ul{height: 107px ;}
.animation .select li{display: block;line-height: 26px;background: rgba(0, 0, 0, .7);border-top: 1px solid #fff;color: #fff;text-indent: 10px;cursor: pointer;}
.animation .select li:hover{background: #09c;}

.thumbnail .tb-thumb dl dd{opacity: .7;-webkit-transition: opacity .3s;transition: opacity .3s;border: 3px solid #fff;}
.thumbnail .tb-thumb dl dd.active{border-color: #09c;opacity: 1;}

.adaptive .scale{position: absolute;top: 35px;left: 600px;}
.adaptive .scale span{float: left;line-height: 24px;font-size: 14px;}
.adaptive .scale a{float: left;width: 40px;line-height: 24px;margin-left: 10px;background: #333;cursor: pointer;font-size: 14px;font-family: "Microsoft YaHei";color: #fff;text-align: center;}
.adaptive .widescreen{position: absolute;top: 35px;left: 880px;width: 80px;line-height: 24px;background: #333;cursor: pointer;color: #fff;text-align: center;}
.adaptive .scale a:hover,
.adaptive .widescreen:hover{background: #09c;}

.lazyload .reload{position: absolute;top: 35px;left: 860px;width: 100px;line-height: 24px;background: #333;cursor: pointer;color: #fff;text-align: center;}
.lazyload .reload:hover{background: #09c;}

.switch .btn{position: absolute;top: 35px;left: 668px;width: 292px;}
.switch .btn a{float: left;line-height: 24px;padding: 0 10px;background: #333;cursor: pointer;font-size: 14px;color: #fff;}
.switch .btn ul{float: left;margin: 0 15px;}
.switch .btn ul li{float: left;width: 24px;line-height: 24px;background: #333;font-size: 14px;color: #fff;text-align: center;margin: 0 2px;cursor: pointer;}
.switch .btn a:hover,
.switch .btn ul li:hover{background: #09c;}

.callback ul li em{position: absolute;top: -120px;left: 50%;width: 120px;font: bold 50px/120px "Microsoft YaHei";margin-left: -60px;background: rgba(0, 0, 0, .9);color: #fff;text-align: center;-webkit-transition: all .6s;transition: all .6s;}

.options table{width: 960px;border: 1px solid #ddd;}
.options table tr:first-child{font-weight: bold;}
.options table tr:first-child td{font-weight: bold;}
.options table td{border: 1px solid #ddd;padding-left: 10px;vertical-align: top;font: 14px/32px "Consolas" "Microsoft YaHei";}
.options table td:nth-child(1){width: 100px;color: #000;font-weight: bold;}
.options table td:nth-child(2){width: 100px;}
.options table td:nth-child(3){width: 160px;}
.options table td:nth-child(4){width: 200px;}
.options table td:nth-child(5){width: 400px;font-size: 12px;}


/****************************** highlight ******************************/
.hljs{display: block;padding: .5em;overflow-x: auto;background: #23241f;}

.hljs,
.hljs-tag,
.hljs-subst{color: #f8f8f2;}

.hljs-strong,
.hljs-emphasis{color: #a8a8a2;}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link{color: #ae81ff;}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class{color: #a6e22e;}

.hljs-strong{font-weight: bold;}

.hljs-emphasis{font-style: italic;}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr{color: #f92672;}

.hljs-symbol,
.hljs-attribute{color: #66d9ef;}

.hljs-params,
.hljs-class .hljs-title{color: #f8f8f2;}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable{color: #e6db74;}

.hljs-comment,
.hljs-deletion,
.hljs-meta{color: #75715e;}