tvgids/style.sass

$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

.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

.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