/* ------------------------------------------------------------------------- *
 *    Style Fix : > 960px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 960px)
    #header
        padding-bottom: sidebar-toggle-width
        .nav-container-inner
            display: block !important

    .main-body
        margin-top: - sidebar-toggle-width

    .main-body-inner
        if sidebar is right
            padding-right: sidebar-toggle-width
            background-position: -340px 0 !important
        else
            padding-left: sidebar-toggle-width
            background-position: -290px 0 !important
        #sidebar
            clearfix()
            if sidebar is right
                right: 0
                background: url(images/s-left.png) repeat-y right 0
            else
                left: 0
                background: url(images/s-left.png) repeat-y left 0
            margin: 0
            height: 100%
            position: absolute
            overflow: hidden
            width: sidebar-toggle-width
            transition: width 0.2s ease-in 0.2s
            .sidebar-toggle
                display: block
                padding: 6px
                color: rgba(255,255,255,0.7)
                text-align: center
                height: sidebar-toggle-width
                background: color-theme
                box-sizing: border-box
                .toggle
                    line-height: 38px
                    font-size: 38px
                    width: 38px
                    font-family: fontawesome
                    &:before
                        if sidebar is right
                            content: '\f100'
                        else
                            content: '\f101'
            .sidebar-top
                padding: 10px 30px
                background: none
                border-bottom: 1px solid color-border
                p, a, i
                    color: #666
            #article-nav, .widgets-container, .sidebar-top
                opacity: 0
                transition: opacity 0.2s ease-in
            &.expend
                width: sidebar-width
                overflow-y: auto
                z-index: 2
                transition: width 0.2s ease-in
                .toggle
                    &:before
                        content: '\f100'
                #article-nav, .widgets-container, .sidebar-top
                    opacity: 1
                    transition: opacity 0.2s ease-in 0.2s
                .sidebar-top
                    display: block
                    .social-links
                        .social-tooltip
                            &:after,
                            &:before
                                display: none

/* ------------------------------------------------------------------------- *
 *    Toggle Sidebar s1 : 959px > 480px
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 959px)
    #header
        padding-bottom: sidebar-toggle-width
        .nav-container-inner
            display: block !important
            #main-nav
                .main-nav-more > ul
                    .main-nav-list-child
                        position: relative
                        padding: 0px
            .search-form-input
                &:focus
                    width: 100px
    .main-body
        margin-top: - sidebar-toggle-width
    .main-body-inner
        if sidebar is right
            padding-right: sidebar-toggle-width
            background-position: -340px 0 !important
        else
            padding-left: sidebar-toggle-width
            background-position: -290px 0 !important
        #sidebar
            clearfix()
            if sidebar is right
                right: 0
                background: url(images/s-left.png) repeat-y right 0
            else
                left: 0
                background: url(images/s-left.png) repeat-y left 0
            margin: 0
            height: 100%
            position: absolute
            overflow: hidden
            width: sidebar-toggle-width
            transition: width 0.2s ease-in 0.2s
            .sidebar-toggle
                display: block
                padding: 6px
                color: rgba(255,255,255,0.7)
                text-align: center
                height: sidebar-toggle-width
                background: color-theme
                box-sizing: border-box
                .toggle
                    line-height: 38px
                    font-size: 38px
                    width: 38px
                    font-family: fontawesome
                    &:before
                        if sidebar is right
                            content: '\f100'
                        else
                            content: '\f101'
            .sidebar-top
                padding: 10px 30px
                background: none
                border-bottom: 1px solid color-border
                p, a, i
                    color: #666
            #article-nav, .widgets-container, .sidebar-top
                opacity: 0
                transition: opacity 0.2s ease-in
            &.expend
                width: sidebar-width
                overflow-y: auto
                z-index: 2
                transition: width 0.2s ease-in
                .toggle
                    &:before
                        content: '\f100'
                #article-nav, .widgets-container, .sidebar-top
                    opacity: 1
                    transition: opacity 0.2s ease-in 0.2s
                .sidebar-top
                    display: block
                    .social-links
                        .social-tooltip
                            &:after,
                            &:before
                                display: none

    #main
        .main-body-header,
        .archive-year-wrap
            padding: 12px 30px

/* ------------------------------------------------------------------------- *
 *    Mobile (Low Res) : 479px > 0 (320px)
/* ------------------------------------------------------------------------- */
@media only screen and (max-width: 479px)
    .container
        padding: 0px
    #header
        .logo-wrap
            width: 100%
            display: block
            text-align: center
            .logo
                margin: 0 auto
        .subtitle-wrap
            display: block
            width: 100%
            margin-left: 0px
        .nav-container
            padding: 0px
            #main-nav-toggle
                float: none
                display: block
            .nav-container-inner
                display: none
            #main-nav
                display: block
                float: none
                .main-nav-list-item,
                .main-nav-list-link
                    clearfix()
                    display: block
                    float: none
                    box-shadow: none
                    box-sizing: border-box
                    font-size: font-size
                .main-nav-list-item
                    &.top-level-menu
                        & > a
                            position: relative
                            &:after
                                display: none
                        &:hover > a
                            background: none
                            color: color-nav-foreground
                        & > a:hover
                            color: #fff
                            background: color-nav-hover-background
                    .main-nav-list-child
                        display: block !important
                        position: relative
                        width: 100%
                        padding: 0px
                        background: none
                        .main-nav-list-link
                            padding-left: 30px
                a
                    border-bottom: 1px solid rgba(255,255,255,0.06)
            #sub-nav
                float: none
                .search-form
                    &:before
                        font-size: font-size
                .search-form-input
                    font-size: font-size
                    width: 90%
    .main-body-inner
        padding: 0px
        background: none
    #main
        float: none
        .main-body-header,
        .archive-year-wrap
            padding: 13px 15px 12px;
        .main-body-content
            .article-single,
            #comments
                padding: 15px
            #page-nav
                padding-right: 15px
                box-sizing: border-box
    .article-row
        padding: 0 0 0 15px
        border: none
    .article-summary
        width: 100%
        .article-summary-inner
            margin: 15px 15px 15px 0
    #sidebar
        float: none
        margin: 0px
        width: 100%
        background: color-sidebar-background
        .sidebar-top,
        .widget-wrap
            padding: 15px
        .widgets-container
            padding-bottom: 15px
    #footer
        margin-top: 0px
        #back-to-top
            box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05);
        .logo
            margin: 0 auto
        .credit
            text-align: center