#calendarHeader {
    position: relative;
    top: 0;
    height: 38px;
    right: 0px;
    .dayLabels {
        height: 35px;
        left: 0;
        margin-left: 50px;
        overflow: hidden;
        position: relative;
        .day {
            height: 100%;
            position: absolute;
            text-align: center;
        }
    }
}

.monthView, .daysViewFor7Days {
    .day {
        width: 14.2857%;
    }
    $i: 0;
    @while $i < 7 {
        .day#{$i} { left: 1% * 100 / 7 * $i; }
        $i: $i + 1;
    }
}

.daysViewFor1Days {
    .day {
        width: 100%;
    }
}

#daysView {
    position: relative;
    top: 0;
    bottom: 0;
    overflow: auto;
    overflow-x: hidden;
    .hours {
        height: auto;
        display: inline-block;
        position: relative;
        float: left;
        top: 0;
        left: 0;
        width: 50px;
        .hour {
            border-bottom: 1px solid #ccc;
            height: 40px;
            left: 0;
            padding-right: 2px;
            //padding-top: 2px;
            position: relative;
            right: 0;
            top: 0;
        }
    }
    .days {
        left: 0;
        right: 0;
        top: 0;
        margin-left: 50px;
        position: relative;
        .day {
            border-left: 1px solid #ccc;
            position: absolute;
            .clickableHourCell {
                height: 40px;
                border-bottom: 1px solid #ccc;
            }
        }
    }
    .event {
        cursor: default;
        margin-right: 1px;
        position: absolute;
        left: 0%;
        right: 0%;
        $i: 0;
        @while $i < 96 {
            &.starts#{$i} { top: 10px * $i; }
            &.lasts#{$i} { height: 10px * $i; }
            $i: $i + 1;
        }
        .eventInside {
            position: absolute;
            overflow: hidden;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            cursor:move;
        }
    }
}

.minutes15, .minutes30, .minutes45 {
    display: block;
    height: 25%;
}

.minutes30 {
    border-bottom: 1px dotted #ccc;
}

.gradient, .text {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    overflow: hidden;
}

.gradient > IMG {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 15px; /* for 15-minute events */
    width: 100%;
}