$indicator-color: red
$hour-width: 200px
$channel-height: 34px

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

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

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

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

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

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

.channels
    margin-top: 66px
    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: 2px 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

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