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

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: #666
            cursor: default

    .help
        position: relative
        cursor: pointer

        .popup
            cursor: default
            background-color: white
            border-radius: 6px
            padding: 0 15px
            font: 12px/18px Helvetica
            position: absolute
            left: 8px
            top: 39px
            color: #333
            width: 300px
            display: none

            ul
                padding-left: 15px

            // Arrow up (from Twitter Bootstrap)
            background-color: white
            border: 1px solid #ccc
            border: 1px solid rgba(0, 0, 0, 0.2)
            border-right-width: 2px
            border-bottom-width: 2px
            border-radius: 6px
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
            background-clip: padding-box

            &:before
                position: absolute
                top: -7px
                left: 9px
                display: inline-block
                border-right: 7px solid transparent
                border-bottom: 7px solid #ccc
                border-left: 7px solid transparent
                border-bottom-color: rgba(0, 0, 0, 0.2)
                content: ''

            &:after
                position: absolute
                top: -6px
                left: 10px
                display: inline-block
                border-right: 6px solid transparent
                border-bottom: 6px solid #ffffff
                border-left: 6px solid transparent
                content: ''

.guide
    width: 100%
    max-height: 100%
    overflow-x: scroll
    position: relative
    -webkit-overflow-scrolling: touch

    .scroll-wrapper
        width: 100%
        height: 100%
        position: relative

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

.timeline
    width: ($hours-before + 24 + $hours-after) * $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: ($hours-before + 24 + $hours-after) * $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
            cursor: pointer

            &:hover
                color: #bcbcbc

        &:hover .favlink
            visibility: visible

        &.favourite
            background-color: rgb(250, 218, 160)

            .favlink
                color: orange
                visibility: visible

            &.past
                background-color: rgba(250, 218, 160, 0.5)
                color: rgb(131, 131, 131)

                .favlink
                    color: rgba(255, 165, 0, 0.5)

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

.channel-labels
    position: absolute
    top: $header-height
    left: 0
    width: $channel-label-width - 2px
    padding-right: 2px
    background-color: #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, .program-details
    display: none
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0

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

.loading-screen .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

$details-width: 500px
$details-initial-offset: 150px
$img-ratio: 310px / 550px

.program-details .content
    position: absolute
    background: white
    top: 50%
    left: 50%
    width: $details-width
    margin: -$details-initial-offset 0 0 (-$details-width / 2)
    border-radius: 6px
    padding: 12px 15px 0
    font: 12px/18px Helvetica
    box-shadow: 0 0 7px 5px #0f0f0f
    overflow-x: hidden
    overflow-y: auto

    *
        max-width: $details-width

    // Set default image height, to be overwritten with 'auto' when the image
    // is loaded. This prevents a shift of the details window on image load.
    img
        height: $details-width * $img-ratio

    .summary
        font-weight: bold

    .properties
        padding-left: 15px
        margin-top: 1px

        strong
            display: inline-block
            width: 130px

.select-label
    margin-left: 10px
    font: 13px/17px Arial

.copyright
    margin: 10px 0 0 12px
    font: 13px/17px Arial
    color: #646464