@import "_common"
@import "_demo"
@import "_blog"
@import "_search"

$header-height = 40px

#header
    background-color #fff
    box-shadow 0 0 4px rgba(0,0,0,.25)
    padding 25px 60px
    position relative
    z-index 2

#nav
    list-style-type none
    margin 0
    padding 0
    position absolute
    right 60px
    top 25px
    height $header-height
    line-height $header-height
    .break
        display none
    li
        display inline-block
        position relative
        margin 0 .6em

.nav-link
    padding-bottom 3px
    &:hover, &.current
        border-bottom 3px solid $green

.content
    li
        list-style-type circle;

#search-query
    height 30px
    line-height 30px
    box-sizing border-box
    padding 0 15px 0 30px
    border 1px solid #e3e3e3
    outline none
    border-radius 15px
    margin-right 10px
    transition border-color .2s ease
    background #fff url(/images/search.png) 8px 5px no-repeat
    background-size 20px
    &:focus
        border-color $green

#logo
    display inline-block
    font-size 1.5em
    line-height $header-height
    color $dark
    font-family $logo-font
    font-weight 500
    img
        vertical-align middle
        margin-right 6px
        width $header-height
        height $header-height

#mobile-bar
    position fixed
    top 0
    left 0
    width 100%
    height 40px
    background-color #fff
    z-index 9
    display none
    box-shadow 0 0 4px rgba(0,0,0,.25)
    .menu-button
        position absolute
        width 24px
        height 24px
        top 8px
        left 12px
        background url(../images/menu.png) center center no-repeat
        background-size 24px
    .logo
        position absolute
        width 30px
        height 30px
        background url(../images/logo.png) center center no-repeat
        top 5px
        left 50%
        margin-left -15px
        background-size 30px

.sidebar
    position absolute
    z-index 10
    top 0
    left 60px
    bottom 0
    padding 2.2em 0
    width 250px
    margin-right 20px
    overflow-x hidden
    overflow-y auto
    -webkit-overflow-scrolling touch
    -ms-overflow-style none
    h2
        margin-top .2em
    ul
        list-style-type none
        margin 0
        line-height 1.8em
        padding-left 1em
    .version-select
        vertical-align middle
        margin-left 5px
    .menu-root
        padding-left 0
    .menu-sub
        font-size .85em
    .sub-menu 
        padding-left 0
    .sidebar-link
        color $light
        &.current
            font-weight 600
            color $green
        &.new
            &:after
                content "NEW"
                display inline-block
                font-size 10px
                font-weight 600
                color #fff
                background-color $green
                line-height 14px
                padding 0 4px
                border-radius 3px
                margin-left 5px
                vertical-align middle
                position relative
                top -1px
        &:hover
            border-bottom 2px solid $green
    .section-link
        &.active
            font-weight bold
            color $green
    .main-menu
        margin-bottom 20px
        display none
        padding-left 0

.content
    padding 2.2em 0
    max-width 600px
    margin 0 auto
    &.api
        ul
            padding-left 1.25em
            line-height 1.4em
            ul, p
                margin .6em 0
    a.button
        font-size .9em
        color #fff
        margin .2em 0
        width 180px
        text-align center
        padding 12px 24px
        display inline-block
        vertical-align middle
    img
        max-width 100%
    span.light
        color $light
    span.info
        font-size .85em
        display inline-block
        vertical-align middle
        width 280px
        margin-left 20px
    h1
        margin 0 0 1em
    h2
        margin 2em 0 .8em
        padding-bottom .7em
        border-bottom 1px solid $border
    h3
        margin 3em 0 1.2em
        position relative
        &:before
            content "#"
            color $green
            position absolute
            left -0.7em
            top -2px
            font-size 1.2em
            font-weight bold
    figure, p, ul, ol
        margin 1.2em 0
    p, ul, ol
        line-height 1.6em
    ul, ol
        padding-left 1.5em
    a
        color $green
        font-weight 600
    blockquote
        margin 2em 0
        padding-left 20px
        border-left 4px solid $green
        p
            font-weight 600
            margin-left 0
    iframe
        margin 1em 0
    p.tip
        padding 12px 24px 12px 30px
        margin 2em 0
        border-left 4px solid $red
        background-color $codebg
        position relative
        border-bottom-right-radius $radius
        border-top-right-radius $radius
        &:before
            position absolute
            top 14px
            left -12px
            background-color $red
            color #fff
            content "!"
            width 20px
            height 20px
            border-radius 100%
            text-align center
            line-height 20px
            font-weight bold
            font-family $logo-font
            font-size 14px

.guide-links
    margin-top 2em
    height 1em

.footer
    color $light
    margin-top 2em
    padding-top 2em
    border-top 1px solid #e5e5e5
    font-size .9em

#main.fix-sidebar
    .sidebar
        position fixed

#donate
    margin-top 15px

@media screen and (max-width: 1300px)
    .content.with-sidebar
        margin-left 290px
    #ad
        z-index 8
        position relative
        width 140px
        height 60px
        padding 0
        bottom 0
        right 0
        margin 0 0 15px -6px
        .carbon-wrap, .carbon-img, .carbon-text, .carbon-poweredby
            display inline-block
            vertical-align top
        .carbon-text
            width 130px
            margin-left 15px
        .carbon-poweredby
            position absolute
            bottom 0
            left 145px

@media screen and (max-width: 720px)
    #ad
        width 100%
    body
        -webkit-text-size-adjust none
        font-size 14px
    #header
        display none
    #logo
        display none
    .nav-link
        padding-bottom 1px
        &:hover, &.current
            border-bottom 2px solid $green
    #search-query
        width 200px
        margin-bottom 10px
    #mobile-bar
        display block
    #main
        padding 2em 1.4em 0
    .highlight pre
        padding 1.2em 1em
    .sidebar
        position fixed
        background-color #f9f9f9
        height 100%
        top 0
        left 0
        padding 60px 30px 20px
        box-shadow 0 0 10px rgba(0,0,0,.2)
        box-sizing border-box
        transition all .4s cubic-bezier(0.4, 0, 0, 1)
        -webkit-transform translate(-280px, 0)
        transform translate(-280px, 0)
        .main-menu
            display block
        &.open
            -webkit-transform translate(0, 0)
            transform translate(0, 0)
    .content
        &.with-sidebar
            margin-left 0
    .footer
        margin-left 0
        text-align center

@media screen and (max-width: 560px)
    #downloads
        text-align center
        margin-bottom 25px
        .info
            margin-top 5px
            margin-left 0
    iframe
        margin: 0 !important




.comp-button
    .f-btn
        margin-left 5px;
        margin-top 5px;




.comp-icon
    li
        list-style-type none;
        display inline-block;
        min-width 140px;
        padding 1em 0;
        margin 10px;
        text-align center;
        transition all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        border-radius 5px;
        [class^=fi-],code
            display block;
        [class^=fi-]
            font-size 24px;
            margin-bottom 10px;

    li:hover
        background gray;
        color white;
        cursor pointer;
        code 
            color white;


.comp-grid
    .row
        margin-bottom 6px;

        .f-col,>div
            text-align center;
            border-radius  0px;
            color white;
            margin 2px;
            height  40px;
            line-height  40px;


        .color-1
            background-color  #1fc8db;
        .color-2
            background-color  #42afe3;
        .color-3
            background-color  #97cd76;
        .color-4
            background-color  #fce473;
            color gray;
        .color-5
            background-color  #ed6c63;

.comp-toast
    .f-btn 
        margin-right 5px;




table
    width 100%;
    tr
        th,td
            border 1px solid #ddd;
            padding 10px;
        th
            font-weight bold;
            background #eee;

        td