body.project
    background #31344a
    color #ffffff

    .label
        font-size 10px
        margin-bottom 2px

    header
        position relative
        height 80px
        overflow hidden

        .logo
            position absolute
            top 40px
            left -35px

            .disks
                .disk
                    position absolute
                    border-radius 50%
                    background #fff
                    transform translateX(-50%) translateY(-50%)

                    &.index-0
                        width 70px
                        height 70px
                        background #fff
                    &.index-1
                        width 140px
                        height 140px
                        background #666b99
                    &.index-2
                        width 210px
                        height 210px
                        background #555980
                    &.index-3
                        width 280px
                        height 280px
                        background #474a6b
                    &.index-4
                        width 350px
                        height 350px
                        background #3b3e59
            .title
                position absolute
                top 0
                left 80px
                line-height 4px
                font-size 28px
                font-family 'Stellar'
                text-transform uppercase
                letter-spacing 2px

    aside.aside
        position fixed
        top 80px
        left 0
        bottom 0
        width 240px

        header.aside-header
            position relative
            width 100%
            height 115px
            padding 12px 20px 0 20px
            border-top 1px solid #515771
            border-bottom 1px solid #515771
            background rgba(0,0,0,0.2)

            .name
                position absolute
                top 15px
                left 20px
                font-weight bold

            .details
                text-align right

                .detail
                    margin-bottom 6px

                    .value
                        font-weight bold


        .aside-tree
            position absolute
            top 115px
            left 0
            width 100%
            bottom 110px
            overflow-y scroll

            nav.files-tree-nav
                position absolute
                top 0
                left 0
                width 100%

                li
                    line-height 24px
                    font-size 12px
                    cursor pointer

                    .name
                        position relative
                        display inline-block
                        padding-left 20px
                        padding-right 6px
                        font-smoothing(auto)
                        +retina()
                            font-smoothing(antialiased)

                    .notif
                        display inline-block
                        height 12px
                        margin 0 2px 0 3px
                        padding 0 4px
                        line-height 12px
                        border-radius 6px
                        font-size 8px
                        font-smoothing(auto)

                        &.new-file
                            background #748bd5

                        &.new-version
                            background #ec399e
                            line-height 13px

                    > span
                        display block
                        padding-left 16px * 1
                    li > span
                        padding-left 16px * 2
                    li li > span
                        padding-left 16px * 3
                    li li li > span
                        padding-left 16px * 4
                    li li li li > span
                        padding-left 16px * 5
                    li li li li li > span
                        padding-left 16px * 6
                    li li li li li li > span
                        padding-left 16px * 7
                    li li li li li li li > span
                        padding-left 16px * 8
                    li li li li li li li li > span
                        padding-left 16px * 9

                    &.active
                        background #4d5b8d

                i
                    position absolute
                    top 25%
                    left 0
                    display block
                    width 12px
                    height 50%
                    background center center no-repeat

                    &.folder
                        background-image url('../svg/folder.svg')
                    &.folder-active
                        background-image url('../svg/folder-active.svg')
                    &.js
                        background-image url('../svg/js.svg')
                    &.html
                        background-image url('../svg/html.svg')
                    &.sass
                        background-image url('../svg/sass.svg')
                    &.less
                        background-image url('../svg/less.svg')
                    &.css
                        background-image url('../svg/css.svg')
                    &.php
                        background-image url('../svg/php.svg')
                    &.json
                        background-image url('../svg/json.svg')
                    &.jade
                        background-image url('../svg/jade.svg')
                    &.md
                        background-image url('../svg/md.svg')
                    &.sql
                        background-image url('../svg/sql.svg')
                    &.apache
                        background-image url('../svg/apache.svg')
                    &.yml
                        background-image url('../svg/yml.svg')
                    &.svg
                        background-image url('../svg/svg.svg')
                    &.font
                        background-image url('../svg/font.svg')
                    &.image
                        background-image url('../svg/image.svg')
                    &.video
                        background-image url('../svg/video.svg')
                    &.audio
                        background-image url('../svg/audio.svg')
                    &.zip
                        background-image url('../svg/zip.svg')
                    &.txt
                        background-image url('../svg/txt.svg')
                    &.coffee
                        background-image url('../svg/coffee.svg')
                    &.git
                        background-image url('../svg/git.svg')
                    &.xml
                        background-image url('../svg/xml.svg')
                    &.twig
                        background-image url('../svg/twig.svg')
                    &.c
                        background-image url('../svg/c.svg')
                    &.random
                        background-image url('../svg/random.svg')

        footer.aside-footer
            position absolute
            bottom 0
            left 0
            width 100%
            height 110px
            padding 15px 20px 0 20px
            border-top 1px solid #515771
            background rgba(0,0,0,0.2)


    section.main
        position fixed
        top 80px
        left 240px
        right 0
        bottom 0

        section.no-file
            position absolute
            top 0
            left 0
            width 100%
            height 100%
            border-top 1px solid #515771
            border-left 1px solid #515771

            .text
                position absolute
                top 50%
                left 0
                width 100%
                text-align center
                color #c6c0d8
                text-transform uppercase
                font-size 20px
                opacity 0.2
                font-weight bold

        section.file
            top 0
            left 0
            width 100%
            height 100%

            header.file-header
                position absolute
                top 0
                left 200px
                right 0
                height 30px
                background #4d5b8d