$indicator-color: red
$hour-width: 200px
$channel-height: 34px
$header-height: 64px
$channel-label-width: 180px

html, body
    width: 100%
    height: 100%
    overflow: hidden
    margin: 0
    padding: 0

.navbar
    background-color: #232323
    width: 100%
    position: fixed
    top: 0

    .navitem
        color: #9a9a9a
        text-decoration: none
        font: normal 13px/18px Helvetica
        display: inline-block
        padding: 10px 20px

        &:hover
            color: #bcbcbc

        &.active
            color: #fff
            background-color: #1a1a1a

        &.disabled
            color: #676767
            cursor: default

.guide
    width: 100%
    //height: 100%
    overflow-x: scroll
    position: relative

.timeline-bg
    width: 100%
    height: 21px
    top: 38px
    position: fixed
    position: fixed
    background-color: #fdfdfd

.timeline
    width: 24 * $hour-width
    height: 26px
    position: absolute
    top: 38px
    background-color: #fdfdfd
    margin-left: $channel-label-width - 1px

    .hour
        font: normal 13px Helvetica
        float: left
        width: $hour-width - 7px
        border-left: 1px solid #444
        padding: 5px 0 0 6px
        height: 20px

    //.label
    //    width: 50px
    //    margin-left: -25px
    //    text-align: center

.channels
    margin: $header-height 0 0 ($channel-label-width - 1px)
    width: 24 * $hour-width
    overflow: hidden

.channel
    position: relative
    height: $channel-height

    .program
        position: absolute
        white-space: nowrap
        height: $channel-height - 10px
        padding: 8px 0 0 8px
        border-left: 1px solid white
        border-right: 1px solid white
        background-color: #eee
        font: normal 13px/15px Helvetica
        overflow: hidden
        color: #555

        &.past
            background-color: #ececec
            color: #aaa

        &.current
            background-color: #ddd
            color: #444

        .favlink
            position: absolute
            right: 10px
            top: 10px
            visibility: hidden
            color: #fff

            &:hover
                color: #bcbcbc

            &.favourite
                color: orange
                visibility: visible

        &:hover .favlink
            visibility: visible

.indicator
    position: absolute
    width: 1px
    height: 100%
    top: $header-height
    background-color: $indicator-color

.channel-labels
    width: $channel-label-width - 2px
    position: fixed
    top: $header-height
    left: 0
    border-right: 2px solid #fff

    .label
        width: $channel-label-width - 13px
        background-color: #e5e5e5
        color: #666
        font: bold 13px/15px Helvetica
        padding: 8px 10px 0 0
        text-align: right
        height: $channel-height - 10px
        margin-bottom: 2px
        border-right: 1px solid #bbb

.select-channels
    margin-top: 38px

    label
        padding: 5px
        margin: 4px 4px 0 0
        display: inline-block
        background-color: #f1f1f1

        &.disabled
            opacity: 0.5

    button
        margin: 6px 0 6px 6px

$loader-size: 66px

.loading-screen
    display: none
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0

    .bg
        width: 100%
        height: 100%
        background-color: #000
        opacity: 0.8

    .loader
        position: absolute
        width: $loader-size
        height: $loader-size
        top: 50%
        left: 50%
        margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
        background: url("loading.gif") no-repeat left top