#header
    z-index 10
    position absolute
    top 0
    width 100%
    opacity 1
    height $TitleHeight
    background-color $TitleBarBg
    padding 13px 0 0
    text-align center
    -webkit-app-region drag

    .tooltip
        white-space nowrap

    h1
        color $TitleBarText
        font-size 0.9em
        top -3px
        position relative

    .btn-set
        position absolute
        left 15px
        z-index 10

    nav
        -webkit-app-region no-drag

        &.darwin
            position absolute
            left 15px

        &.fs-darwin
            top 0px
            right 7px
            left initial

        &.win32,
        &.linux
            right 7px
            left initial

        &.fs-win32,
        &.fs-linux
            position absolute
            left 2px
            top 2px

    .btn-os
        float left
        margin 0 6px 0 0
        background-color #000
        background-size 77px 12px
        background-image url('../images/icons/topbar_sprite.png')
        border-radius 30px
        border 0
        color transparent
        display inline-block
        font-size 10px
        height 12px
        padding 0
        text-align center
        width 12px
        cursor pointer

        &.os-min
            background-position 0px 0px
        &.os-max
            background-position -13px 0px
        &.os-close
            background-position -26px 0px

        &.os-min:hover
            background-position -39px 0px
        &.os-max:hover
            background-position -52px 0px
        &.os-close:hover
            background-position -65px 0px

        &.fullscreen
            color $FullScreenButton
            background transparent
            margin 0
            z-index 10
            width 30px
            height 28px
            border-radius 0
            display block

        &.fullscreen::before
            content "\e000"
            font-family VideoJS
            font-size 1.85em
            line-height 0.2em
            background none
            display block
            text-shadow 0 1px 0 rgba(255,255,255,0.1)

        &.fullscreen.active::before
            content "\e00B"

        &.fullscreen:hover
            color $FullScreenButtonHover

    .btn-set.win32
        background-size auto auto
        top 0px
        right 0px
        .btn-os
            float left
            margin 0
            background-color transparent
            -webkit-border-radius 0px
            border-radius 0px
            border 0
            color transparent
            display inline-block
            font-size 10px
            height 32px
            padding 0
            text-align center
            width 40px
            cursor pointer
            background-image url("../images/icons/topbar_sprite_win.png")
            background-size cover
            -webkit-filter $PngLogo
            &.os-close
                background-position -80px 0px
            &.os-max
                background-position -40px 0px
                &.os-is-max
                    background-position -240px 0px
            &.os-min
                background-position 0px 0px
            &.os-close:hover
                background-position -200px 0px
                -webkit-filter brightness(1)
            &.os-max:hover
                background-position -160px 0px
                -webkit-filter brightness(1)
                &.os-is-max:hover
                    background-position -280px 0px
            &.os-min:hover
                background-position -120px 0px
                -webkit-filter brightness(1)

    .btn-set.darwin
        .btn-os
            background-image none
            background-repeat no-repeat
            &.os-close
                background-color #FC5753
            &.os-max
                background-color #33C748
            &.os-min
                background-color #FDBC40

        &:hover
            .btn-os
                background-image url('../images/icons/topbar_sprite.png')
                &.os-min
                    background-position -39px 0px
                &.os-max
                    background-position -52px 0px
                &.os-close
                    background-position -65px 0px

.header-shadow
    box-shadow $TopBarShadow

.events
    width 28px
    height 28px
    position absolute
    top -6px
    left calc(50% + 52px)
    display none

    &.img-newyear
        background URL('../images/icons/events/newyear.png')
        background-repeat no-repeat
        background-size 28px 28px
    &.img-pt_anniv
        background URL('../images/icons/events/pt_anniv.png')
        background-repeat no-repeat
        background-size 28px 28px
    &.img-halloween
        background URL('../images/icons/events/halloween.png')
        background-repeat no-repeat
        background-size 28px 28px
    &.img-stvalentine
        background URL('../images/icons/events/stvalentine.png')
        background-repeat no-repeat
        background-size 48px 28px
        width 48px
        height 28px
    &.img-stpatrick
        background URL('../images/icons/events/stpatrick.png')
        background-repeat no-repeat
        background-size 28px 28px
    &.img-aprilsfool
        background URL('../images/icons/events/aprilsfool.png')
        background-repeat no-repeat
        background-size 28px 28px
    &.img-xmas
        background URL('../images/icons/events/xmas.png')
        background-repeat no-repeat
        background-size 28px 28px
