/*
 * Basic styles
 */
body {
    background: #e4e6e5;
}

.justify, .dib-box .justify {
    line-height: inherit;
}

/* 全局hover颜色和背景色动画 */
a {
    color: #3187DB;
    -webkit-transition: color .2s linear, background-color .2s linear, border-color .3s linear;
    -moz-transition: color .2s linear, background-color .2s linear, border-color .3s linear;
    -o-transition: color .2s linear, background-color .2s linear, border-color .3s linear;
    -ms-transition: color .2s linear, background-color .2s linear, border-color .3s linear;
    transition: color .2s linear, background-color .2s linear, border-color .3s linear;
}

.highlight {
    background: none;
}

/*
 * Shamelessly copied from https://github.com/lepture/yue.css/blob/master/yue.css
 */
.type h1,
.type h2,
.type h3,
.type h4,
.type h5,
.type h6 {
    color: #222223;
}
.type h1 {
    font-size: 1.8em;
    margin: 0.67em 0;
}
.type > h1 {
    margin-top: 0;
    font-size: 1.8em;
}
.type h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
    border-bottom: 1px solid #E5E5E5;
}
.type h3 {
    font-size: 1.17em;
    margin: 1em 0;
}
.type h4,
.type h5,
.type h6 {
    font-size: 1em;
    margin: 1.6em 0 1em 0;
}
.type h6 {
    font-weight: 500;
}

/**
 * 引入Logo字体图标
 */
@font-face {
  font-family: 'logo';
  src: url('//at.alicdn.com/t/font_1428998095_2751799.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1428998095_2751799.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1428998095_2751799.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1428998095_2751799.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1428998095_2751799.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconlogo,
.type .iconlogo {
    font-family: "logo";
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    display: inline-block;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * icons
 */
.mi-projects:before {
    content: '\f082';
}
.mi-mobile:before {
    content: '\f086';
}
.mi-brix:before {
    content: '\3433';
}
.mi-rap:before {
    content: '\3434';
}
.mi-magix:before {
    content: '\3432';
}
.mi-mock:before {
    content: '\3435';
}
.mi-crox:before {
    content: '\3436';
}
.mi-cube:before {
    content: '\3439';
}
.mi-iconfont:before {
    content: '\343a';
}
.mi-canvax:before {
    content: '\e600';
}
.mi-chartx:before {
    content: '\3437';
}
.mi-bisheng:before {
    content: '\3438';
}
.mi-releases:before {
    content: '\0030';
}
.mi-tutorial:before {
    content: '\016b';
}
.mi-whos-using:before {
    content: '\00fa';
}
.mi-articles:before {
    content: '\0123';
}
.mi-products:before {
    content: '\0199';
}

.mi-diamond:before {
    content: '\f005';
}
.mi-gaming:before {
    content: '\007a';
}

.mi-services:before {
    content: '\013e';
}

.mi-activity:before{
    content: "\123"
}
/*
 * Aside styles
 */
#nav {
    background-color: #fff;
    z-index: 1;
}
#nav .logo {
    display: block;
    width: 160px;
    overflow: hidden;
    text-align: center;
    line-height: 60px;
    height: 60px;
    vertical-align: middle;
    background-color: #ed4242;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

#nav .logo:hover {
    color: #fff;
}

#nav.fixed .logo {
    height: 30px;
    line-height: 30px;
}

#nav .logo .dib {
    vertical-align: middle;
}

#nav .iconlogo {
    color: #fff;
    /*width: 130px;*/
    font-size: 56px;
}

#nav .logo-text {
    color: #fff;
    font-size: 32px;
    margin-left: 10px;
}

#nav.fixed .iconlogo {
    font-size: 30px;
}

#nav.fixed .logo-text {
    font-size: 20px;
}

/**
 * 皮肤
 */

/* 首页 */
.skin-home #nav .iconlogo {
    font-size: 80px;
}

.skin-home #nav.fixed .iconlogo {
    font-size: 50px;
}


.skin-magix #nav a.logo {
    background-color: #da1e38;
}

.skin-cube #nav a.logo {
    background-color: #0e76bc;
}

.skin-brix-core #nav a.logo {
    background-color: #0e76bc;
}

.skin-crox #nav a.logo {
    background-color: #22a478;
}


#nav .logo:hover {
    border-bottom: none;
    color: #FC4349;
}
#nav .logo .iconfont {
    display: block;
    font-size: 500%;
}
#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


#nav .entry {
    display: block;
    height: 100%;
    line-height: 60px;
    padding: 0 20px;
}
#nav .entry:hover {
    background: #d6d6d6;
    border-bottom: none;
}
#nav a {
    color: #313131;
}

/*
 * Ceiling
 */
#ceiling {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 45px;
    line-height: 45px;
    background: #f4f4f4;
    border-bottom: 1px solid #d6d6d6;
    color: #aaa;
}
#ceiling a {
    float: left;
    display: block;
}
#ceiling a:link,
#ceiling a:visited {
    color: #aaa;
}
#ceiling .products {
    /*float: left;*/
}
#ceiling .products a {
    border-right: 1px solid #d6d6d6;
}
#ceiling a:hover {
    border-bottom: none;
    color: #313131;
}
#ceiling .portal {
    /*float: right;*/
}

#ceiling .dib {
    vertical-align: middle;
}

.ds-thread {
    margin-top: 30px;
}

#footer {
    margin: 40px auto 20px;
    text-align: center;
}
#footer a {
    color: #313131;
}
#footer a:hover {
    border-bottom: none;
}
#footer .cnzz,
#footer address {
    display: inline-block;
    vertical-align: top;
}
#footer .cnzz {
    padding-top: 3px;
}
#footer address {
    font-size: 12px;
    font-style: normal;
}


/*
 * At least give me 320px, would you?
 */
#content {
    min-width: 320px;
}

#page .stoc ol {
    padding-left: 14px;
    padding-right: 1px;
    padding-bottom: 10px;
}

.stoc li .level2 {
    font-weight: bold;
}

@media (max-width: 799px) {
    html {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #page {
        position: relative;
        left: 0;
        top: 0;
    /*    -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);*/

        -webkit-transition: left .2s;
        -moz-transition: left .2s;
        -ms-transition: left .2s;
        -o-transition: left .2s;
        transition: left .2s;
        height: 100%;
        list-style: disc outside;
        /* padding-left: 40px; */
    }

    #content-wrap {
        padding: 40px 15px 20px;
        position: relative;
        overflow: hidden;
    }

    #ceiling {
        height: 40px;
        line-height: 40px;
    }

    #ceiling a {
        padding: 0 10px;
    }
    #ceiling .products {
        margin-left: 45px;
        /*width: 72%;*/
        /*height: 40px;*/
        /*overflow: hidden;*/
    }
    #ceiling .products a {
        padding: 0 2px;
        border-right: none;
    }
    #ceiling .products .name {
        display: none;
    }
    #ceiling .products .iconfont,
    #ceiling .portal .iconfont {
        font-size: 20px;
    }
    #ceiling .portal a {
        padding: 0 10px;
    }
    #ceiling .portal .name {
        display: none;
    }

    #page .projects .banner a {
        font-size: 36px;
    }

    #nav {
        position: absolute;

        /* 移动平台使用 transform 获得更流程的动画效果*/
    /*    -webkit-transform: translate3d(-200px,0,0);
        -moz-transform: translate3d(-200px,0,0);
        -ms-transform: translate3d(-200px,0,0);
        -o-transform: translate3d(-200px,0,0);
        transform: translate3d(-200px,0,0);*/
        top: 0;
        left: -200px;
        height: 100%;
        width: 199px;
        background: #f4f4f4;
        border-right: 1px solid #d6d6d6;
    }
    #nav .toggler {
        height: 40px;
        line-height: 40px;
        position: absolute;
        padding:0 12px;
        top: 0;
        left: 200px;
        /*background: #f4f4f4;*/
        border-right: 1px solid #d6d6d6;
        border-bottom: 1px solid #d6d6d6;
    }
    #nav .toggler:hover {
        border-bottom: 1px solid #d6d6d6;
    }

    #nav a.logo {
        margin-bottom: 28px;
    }
    #nav .entry {
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #nav .logo {
        width: 100%;
    }

    /* 移出侧边导航栏的动画 */
    .page-dodged {
        left: 200px !important;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    #ceiling .products {
        margin-left: 90px;
    }

    #ceiling .bd {
        line-height: inherit;
    }

    #ceiling a {
        padding: 10px 20px;
    }
    #ceiling .products a {
        padding: 0 15px;
    }
    #ceiling .portal a {
        padding: 0 15px;
    }
    #ceiling .portal .name {
        display: inline-block;
    }

    #nav .toggler {
        width: 50px;
        height: 45px;
        line-height: 45px;
        padding: 0 20px;
        text-align: center;
        color: #808080;
    }

    #nav .toggler .iconfont {
        font-size: 28px;
    }

    #nav .toggler .label {
        display: inline-block;
    }

    #page .stoc li a:hover,
    #page .stoc .current {
        color:#333;
    }
}

@media (min-width: 800px) {
    body {
        text-align: center;
    }

    #ceiling a {
        padding:0 10px;
    }

    #ceiling .products a {
        border-right: none;
    }

    #page {
        text-align: left;
        width: 700px;
        margin: 130px auto 0;
    }

    #nav {
        position: absolute;
        top: 46px;
        left: 0;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #d6d6d6;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }
    #nav .logo {
        float: left;
    }
    #nav .menu,
    #nav li {
        float: right;
        height: 100%;
    }
    #nav .entry {
        border-left: 1px solid #d6d6d6;
    }
    #nav li:last-child .entry {
        border-left: none;
    }
    #nav .toggler {
        display: none;
    }
    #nav.fixed {
        position: fixed;
        top: 0;
        background: #f4f4f4;
        height: 30px;
    }
    #nav.fixed .entry {
        line-height: 30px;
    }
    #nav.fixed .logo .iconfont {
        display: inline-block;
        font-size: 20px;
        margin-right: 5px;
    }

    #content {
        max-width: 680px;
        /*margin-top: 130px;*/
        padding: 1em 2em;
    }
}

@media (max-width: 1199px) {
    #page .stoc {
        position: static;
        background: none;
        border-bottom: 1px solid #CCC;
    }

    #page .stoc a {
        padding: 0 5px;
    }

    #page .stoc a:hover {
        background: none;
        color: inherit;
    }

    #page .type-toc h2 {
        padding: 0;
    }

    #nav .toggler .label {
        display: none;
    }

    /* 2014-01-25 小屏幕上也要目录折叠功能 */
    #page .stoc .folded ol {
        display: none;
    }
}

@media (min-width: 1200px) {
    #ceiling a {
        padding: 0 25px 0 20px;
    }

    #ceiling .products a {
        border-right: 1px solid #d6d6d6;
    }

    #page .stoc {
        background: none;
        -webkit-transition: opacity 5s ease-in-out;
        -moz-transition: opacity 5s ease-in-out;
        -ms-transition: opacity 5s ease-in-out;
        -o-transition: opacity 5s ease-in-out;
        transition: opacity 5s ease-in-out;
        opacity: .3
    }

    #page .stoc:hover {
        -webkit-transition: opacity .3s ease-out;
        -moz-transition: opacity .3s ease-out;
        -ms-transition: opacity .3s ease-out;
        -o-transition: opacity .3s ease-out;
        transition: opacity .3s ease-out;
        opacity: .999999;
    }

    #page .stoc {
        top: 113px;
        bottom: 20px;
        left: 50%;
        right: auto;
        width: 230px;
        padding: 0;
        overflow-y: auto;
        margin-left: 360px;
        /*padding:0 16px 16px 0;*/
    }

    #page .stoc a {
        height: auto;
        border-bottom: 1px solid transparent;
        padding: 0 .5em;
        *zoom:1;
        overflow: hidden;
    }
    #page .fixed .stoc {
        top: 15px;
    }
    #page .stoc .folded ol {
        display: none;
    }
}

#page .stoc .decimal li:before,
#page .stoc .cjk li:before{
    color: #96B0D8;
    float: left;
}


/* --------------------------------------------------------------------------
   ol 自动生成编号
   -------------------------------------------------------------------------- */

/**
 * 数字编号，兼容 IE8+
 * 通常用来生成一个目录，为了更好的语义，只支持 ol。
 * @demo: http://jsbin.com/IpIPinu/3/edit?css,output
 * 使用方法：
 <ol class="type-toc">...</ol>
 * 将会生成如下格式编号：
        1.
        1.1
        1.1.1
        ...

 * 1. 为每个 ol 元素创建新的计数器实例
 * 2. 隐藏默认的列表项
 */
.type-toc {
    margin: 16px auto;
    -webkit-overflow-scrolling: touch;
    /*background-color: #fff !important;*/
    /*border-bottom: 1px solid #EAEAEA;*/
}


input ~ ol >li >ol {
    display: none;
}

input:checked ~ ol >li >ol {
    display: block;
}


.type-toc li {
    overflow: hidden;
    margin-top: 1px;
}

.type-toc li a {
    display: block;
    padding-left: .5em;
    overflow: hidden;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    /*border: 0 none;*/
    color: #666;
    /*background-color: #ccc;*/
}

.type-toc li a:hover,
.type-toc .current {
    background-color: #eee !important;
    border-bottom: 1px solid #CECECE !important;
    border-radius: 0 0 3px 3px;
    color: #3187DB !important;
}


.type-toc h2 {
    padding: 0 12px;
    font-size: 18px;
    color: #666;
    border: 0 none;
    margin: 0;
}

.type-toc label .iconfont {
    margin-right: 10px;
}


.type-toc > ol {
    margin: 0;
    padding: 16px 20px;
}

.type-toc.fixed {
    position: fixed;
    left: 100px;
    top: 20px;
}

.type-toc.fixed h2 {
    font-size: 18px;
    float: none;
    width: 100%;
    padding: 6px 16px;
    margin: 0;
}

.type-toc.fixed h2 + ol {
    padding-left: 0;
}

/*.type-toc > ol > li {
    display: inline-block;
    vertical-align: top;
}*/

ol.type-toc,
.type-toc ol {
    counter-reset: list;/* 1 */
    list-style-type: none !important; /* 2 */
    *list-style-type: type-toc !important;
}

.type-toc li:before {
    color: #666;
    margin-right: .25em;
    padding-left: .5em;
    float: left;
}

/**
 * 1. 只增加当前计数器(直接设置在 li 上其他列表会影响序号)
 * 2. 所有计数器中间以“.”分隔的值
 */
.type-toc li:before {
    counter-increment: list; /* 1 */
    content: counters(list, ".")" "; /* 2 */
}

/**
 * ol 中的 ul 不生成序号
 */
.type-toc ul {
    list-style-type: square;
    list-style-position: inside;
}

.type-toc ul li:before {
    content: none !important;
}

/**
 * 避免目录中的标题影响正文编号
 */
.type .type-toc h2:before,
.type .type-toc h3:before,
.type .type-toc h4:before {
    content: none;
}

/**
 * 去除上下间距
 */
.type-toc ol,
.type-toc ul {
    margin-top: 0;
    margin-bottom: 8px;
}


/* 自定义滚动条样式 */

.type-toc::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.type-toc::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .26);
}
.type-toc::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .36);
}


/**
 * 锚点高亮
 */
@-webkit-keyframes highlight {
    0% { background-color: #FFAD00;}
    33% { background-color: transparent;}
    66% { background-color: #FFAD00;  }
    100% { background-color: transparent; }
}

@-moz-keyframes highlight {
    0% { background-color: #FFAD00;}
    33% { background-color: transparent;}
    66% { background-color: #FFAD00;  }
    100% { background-color: transparent; }
}

@-ms-keyframes highlight {
    0% { background-color: #FFAD00;}
    33% { background-color: transparent;}
    66% { background-color: #FFAD00;  }
    100% { background-color: transparent; }
}

@keyframes highlight {
    0% { background-color: #FFAD00;}
    33% { background-color: transparent;}
    66% { background-color: #FFAD00;  }
    100% { background-color: transparent; }
}

:target {
    -webkit-animation: highlight 1.6s ease;
    -moz-animation: highlight 1.6s ease;
    -ms-animation: highlight 1.6s ease;
    -o-animation: highlight 1.6s ease;
    animation: highlight 1.6s ease;
}


.anchor:target ~ .anchor-link {
    visibility: visible;
    -webkit-animation: highlight 1.6s ease;
    -moz-animation: highlight 1.6s ease;
    -ms-animation: highlight 1.6s ease;
    -o-animation: highlight 1.6s ease;
    animation: highlight 1.6s ease;
}

/* 修复顶部带有Fixed导航锚点定位不准确问题 */
.type h2,
.type h3,
.type h4,
.type h5,
.type h6 {
    position: relative;
/*    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
    border-top: 80px solid transparent;
    margin-top: -70px; */
}

/**
 * 防止遮挡住上面的内容，导致无法选中
 * 每个 z-index 递减，防止 h2+h3 这样的结构导致 h2 无法选中
 */

/*.type h2 {
    z-index: -2;
}

.type h3 {
    z-index: -3;
}

.type h4 {
    z-index: -4;
}

.type h5 {
    z-index: -5;
}

.type h6 {
    z-index: -6;
}*/
.type {
    position: relative;
    z-index: 1;
}


/**
 * 生成行内锚点链接符号
 * http://www.fileformat.info/info/unicode/char/a7/index.htm
 */
.anchor-link {
    visibility: hidden;
    position: absolute;
    left: -1.4em;
    padding-left: .5em;
    top: 0px;
    z-index: 9;
    width: 2em;
    /*text-indent: .5em;*/
    /*padding: 0 2px 0 5px;*/
    /*background: rgba(255, 0, 0, 0.2);*/
}

.anchor-link:hover {
    border: 0 none !important;
    text-decoration: none;
}

h2 .anchor-link {
    width: 2em;
}

h3 .anchor-link {
    width: 2.5em;
}

h4 .anchor-link {
    width: 3.5em;
}


/**
 * 生成章节号
 */

.anchor-link:before {
    content: "\00A7";
}


h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link {
    visibility: visible;
}

.anchor {
    position: absolute;
    top: -50px;
    overflow: hidden;
}

/**
 * 移动端阅读优化
 */

@media (max-width: 800px) {
    .type {
        font-size: 16px;
    }
}

.type-set-label {
    display: block;
    vertical-align: middle;
    height: 36px;
    line-height: 36px;
    border: 0 none;
    text-align: right;
    overflow: hidden;
}

.settings {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 1024;
    height: 0;
    overflow: hidden;
    -webkit-transition: .32s ease;
    -moz-transition: .32s ease;
    -ms-transition: .32s ease;
    -o-transition: .32s ease;
    transition: .32s ease;
}

.settings-visible {
    height: 144px;
}

.type-set-label .bd {
    display: inline-block;
    width: 130px;
    background-color: #eee;
    pointer-events: auto;
}

.type-set-label .bd:hover {
    background-color: #ddd;
}

.body-night .type-set-label .bd:hover {
    background-color: #333;
}

.set-icon {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    text-align: center;
}

.set-first .bd{
    /*border-top: 1px solid #999;*/
}


/* 文字大小 */
.set-font-small{
    font-size: 14px;
}

.set-font-middle {
    font-size: 18px;
}

.set-font-large {
    font-size: 26px;
}

.body-font-small #page .type {
    font-size: 14px;
    line-height: 1.7;
}

.body-font-small #page .type p {
    line-height: 1.7;
}

.body-font-large #page .type {
    font-size: 18px;
    line-height: 2;
}

.body-font-large #page .type p {
    line-height: 2;
}

/* 夜晚模式配色 */
.body-night {
    background: #2f2f2f;
}
.body-night #page #content {
    background-color: #2f2f2f;
    color: #CACCD1;
}

.body-night #page h1,
.body-night #page h2,
.body-night #page h3,
.body-night #page h4,
.body-night #page h5,
.body-night #page h6,
.body-night #page .type-toc a {
    color: #E9EAEC;
}

.body-night #page #ceiling,
.body-night #page #nav,
.body-night #page .stoc {
    background-color: #222;
}

.body-night #page #ceiling a,
.body-night #page #nav a {
    color: #fff;
}

.body-night #page a {
    color: #DAECFD;
}
.body-night #page a:hover {
    color: #fff;
}

.body-night #page .type h2,
.body-night #page #ceiling,
.body-night #page #nav .toggler,
.body-night #page .stoc {
    border-bottom-color: #555;
    border-right-color: #555;
}
.body-night .type-set-label .bd{
    background-color: #3f3f3f;
    color: #fff;
}
.body-night #ceiling .products a,
.body-night #nav,
.body-night #nav .entry,
.body-night .projects .project,
.body-night .projects .project-table .banner {
    border-color: #555 !important;
}

/* 代码 */
.body-night .type pre,
.body-night .type code {
    background-color: #3F3F3F;
    border-color: #555;
}

.body-night .type-demo {
    border-color: #555;
}

/* 多说评论框 */
.body-night #ds-thread #ds-reset .ds-textarea-wrapper textarea {
    background-color: #2F2F2F;
    color: #CACCD1;
}

.body-night #ds-thread #ds-reset .ds-textarea-wrapper textarea:focus {
    color: #CACCD1;
}


.body-night #ds-reset .ds-gradient-bg {
    background: none;
}

.body-night #ds-thread a:hover {
    color: #fff !important;
}

/* ==========================================================================
   代码示例
   ========================================================================== */

.type-demo {
    padding: 45px 16px 16px;
    margin-top: 16px;
    position: relative;
    border: 1px solid #ddd;
    margin-bottom: -1px;
    border-radius: 3px 3px 0 0; 
}

.type-demo:after {
    content: "演示";
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 14px;
    color: #BBB;
    letter-spacing: 1px;
}

.type-demo .well {
    padding: 16px;
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 6px;
}

.type-demo + .highlight pre {
    border-radius: 0 0 3px 3px;
}

.type-demo a + a {
    margin: 0;
}

.type-demo .btn {
    margin-top: 6px;
    margin-bottom: 6px;
}