.calendar {
    DISPLAY: none;
    FONT-SIZE: 12px;
    BACKGROUND: #e6e6e6;
    CURSOR: default;
    COLOR: #000;
    FONT-FAMILY: Calibri;
    POSITION: relative;
    BOX-SHADOW: 3px 3px 10px #888888;
    WIDTH: 200px;
}

    .calendar TABLE {
        border-spacing:0px;
        WIDTH: 100%;
        FONT-SIZE: 12px;
        BACKGROUND: #fff;
        CURSOR: default;
        COLOR: #000;
    }

    .calendar .button {
        BORDER: #e6e6e6 1px solid;
        TEXT-ALIGN: center;
        COLOR: #000;
        FONT-WEIGHT: bold;
        BACKGROUND: #fff;
        PADDING: 2px;
    }

    .calendar .nav {
        /*BACKGROUND: url(menuarrow.gif) no-repeat 100% 100%*/
    }

    .calendar THEAD .title {
        BORDER: #cc0000 1px solid;
        FONT-WEIGHT: bold;
        BACKGROUND: #EA0000;
        COLOR: #fff;
        TEXT-ALIGN: center;
        PADDING: 2px;
    }

    .calendar THEAD .headrow {
    }

    .calendar THEAD .daynames {
        margin-top:5px;
    }

    /*row with day names*/
    .calendar THEAD .name {
        BACKGROUND: #fff;
        COLOR: #000;
        BORDER-TOP: #e6e6e6 1px solid;
        BORDER-LEFT: #cccccc 1px solid;
        BORDER-BOTTOM: #cccccc 2px solid;
        TEXT-ALIGN: center
    }

    .calendar THEAD .weekend {
        COLOR: #000;
    }

    .calendar THEAD .hilite {
        COLOR: #000;
        BACKGROUND-COLOR: #e6e6e6;
        BORDER: #e6e6e6 1px solid;
    }

    .calendar THEAD .active {
        BORDER: #e6e6e6 1px solid;
        BACKGROUND-COLOR: #EA0000;
    }

    .calendar TBODY .day {
        BORDER: #e6e6e6 1px solid;
        WIDTH: 2em;
        TEXT-ALIGN: right;
        PADDING: 2px;
    }

    .calendar TBODY .othermonth {
        FONT-SIZE: 80%;
        COLOR: #aaa
    }

    .calendar TBODY .oweekend {
        COLOR: #fff
    }

    /*column - week*/
    .calendar TABLE .wn {
        BORDER-RIGHT: #cccccc 2px solid;
        BORDER-TOP: #e6e6e6 1px solid;
        BORDER-LEFT: none;
        BACKGROUND: #fff;
        PADDING: 2px;
        COLOR: #000;
        TEXT-ALIGN: center;
    }

    .calendar TBODY .rowhilite TD {
        BACKGROUND: #e6e6e6;
    }

        .calendar TBODY .rowhilite TD.wn {
            BACKGROUND: #e6e6e6;
        }

    .calendar TBODY TD.hilite {
        BACKGROUND: #5d78ff;
        COLOR: #fff;
        PADDING: 2px;
    }

    .calendar TBODY TD.active {
        BORDER-RIGHT: #fff 1px solid;
        PADDING-RIGHT: 2px;
        BORDER-TOP: #000 1px solid;
        PADDING-LEFT: 2px;
        PADDING-BOTTOM: 0px;
        BORDER-LEFT: #000 1px solid;
        PADDING-TOP: 2px;
        BORDER-BOTTOM: #fff 1px solid
    }

    /*Selected day*/
    .calendar TBODY TD.selected {
        BACKGROUND: #5d78ff;
        FONT-WEIGHT: bold;
        COLOR: #fff;
    }

    .calendar TBODY TD.weekend {
        COLOR: #EA0000;
    }

    .calendar TBODY TD.today {
        BACKGROUND: rgba(93, 120, 255, 0.5);
        COLOR: #000;
    }

    .calendar TBODY .disabled {
        COLOR: #999
    }

    .calendar TBODY .emptycell {
        VISIBILITY: hidden
    }

    .calendar TBODY .emptyrow {
        DISPLAY: none
    }

    .calendar TFOOT .footrow {
    }

    .calendar TFOOT .ttip {
        BACKGROUND: #fff;
        COLOR: #000;
        TEXT-ALIGN: center
    }

    .calendar TFOOT .hilite {
        BORDER-RIGHT: #000 1px solid;
        PADDING-RIGHT: 1px;
        BORDER-TOP: #fff 1px solid;
        PADDING-LEFT: 1px;
        BACKGROUND: #d8e0e4;
        PADDING-BOTTOM: 1px;
        BORDER-LEFT: #fff 1px solid;
        PADDING-TOP: 1px;
        BORDER-BOTTOM: #000 1px solid
    }

    .calendar TFOOT .active {
        BORDER-RIGHT: #fff 1px solid;
        PADDING-RIGHT: 0px;
        BORDER-TOP: #000 1px solid;
        PADDING-LEFT: 2px;
        PADDING-BOTTOM: 0px;
        BORDER-LEFT: #000 1px solid;
        PADDING-TOP: 2px;
        BORDER-BOTTOM: #fff 1px solid
    }

    .calendar .combo {
        BORDER-RIGHT: #000 1px solid;
        PADDING-RIGHT: 1px;
        BORDER-TOP: #fff 1px solid;
        DISPLAY: none;
        PADDING-LEFT: 1px;
        FONT-SIZE: 90%;
        Z-INDEX: 100;
        BACKGROUND: #d8e0e4;
        LEFT: 0px;
        PADDING-BOTTOM: 1px;
        BORDER-LEFT: #fff 1px solid;
        WIDTH: 4em;
        CURSOR: default;
        PADDING-TOP: 1px;
        BORDER-BOTTOM: #000 1px solid;
        POSITION: absolute;
        TOP: 0px
    }

        .calendar .combo .label {
            PADDING-RIGHT: 1px;
            PADDING-LEFT: 1px;
            PADDING-BOTTOM: 1px;
            PADDING-TOP: 1px;
            TEXT-ALIGN: center
        }

        .calendar .combo .label-IEfix {
            PADDING-RIGHT: 1px;
            PADDING-LEFT: 1px;
            PADDING-BOTTOM: 1px;
            PADDING-TOP: 1px;
            TEXT-ALIGN: center
        }

        .calendar .combo .label-IEfix {
            WIDTH: 4em
        }

        .calendar .combo .active {
            BORDER-RIGHT: #fff 1px solid;
            PADDING-RIGHT: 0px;
            BORDER-TOP: #000 1px solid;
            PADDING-LEFT: 0px;
            BACKGROUND: #c8d0d4;
            PADDING-BOTTOM: 0px;
            BORDER-LEFT: #000 1px solid;
            PADDING-TOP: 0px;
            BORDER-BOTTOM: #fff 1px solid
        }

        .calendar .combo .hilite {
            BACKGROUND: #048;
            COLOR: #aef
        }

    .calendar TD.time {
        PADDING-RIGHT: 0px;
        BORDER-TOP: #000 1px solid;
        PADDING-LEFT: 0px;
        PADDING-BOTTOM: 1px;
        PADDING-TOP: 1px;
        BACKGROUND-COLOR: #e8f0f4;
        TEXT-ALIGN: center
    }

        .calendar TD.time .hour {
            BORDER-RIGHT: #889 1px solid;
            PADDING-RIGHT: 3px;
            BORDER-TOP: #889 1px solid;
            PADDING-LEFT: 4px;
            FONT-WEIGHT: bold;
            PADDING-BOTTOM: 0px;
            BORDER-LEFT: #889 1px solid;
            PADDING-TOP: 0px;
            BORDER-BOTTOM: #889 1px solid;
            BACKGROUND-COLOR: #fff
        }

        .calendar TD.time .minute {
            BORDER-RIGHT: #889 1px solid;
            PADDING-RIGHT: 3px;
            BORDER-TOP: #889 1px solid;
            PADDING-LEFT: 4px;
            FONT-WEIGHT: bold;
            PADDING-BOTTOM: 0px;
            BORDER-LEFT: #889 1px solid;
            PADDING-TOP: 0px;
            BORDER-BOTTOM: #889 1px solid;
            BACKGROUND-COLOR: #fff
        }

        .calendar TD.time .ampm {
            BORDER-RIGHT: #889 1px solid;
            PADDING-RIGHT: 3px;
            BORDER-TOP: #889 1px solid;
            PADDING-LEFT: 4px;
            FONT-WEIGHT: bold;
            PADDING-BOTTOM: 0px;
            BORDER-LEFT: #889 1px solid;
            PADDING-TOP: 0px;
            BORDER-BOTTOM: #889 1px solid;
            BACKGROUND-COLOR: #fff
        }

        .calendar TD.time .ampm {
            TEXT-ALIGN: center
        }

        .calendar TD.time .colon {
            PADDING-RIGHT: 2px;
            PADDING-LEFT: 3px;
            FONT-WEIGHT: bold;
            PADDING-BOTTOM: 0px;
            PADDING-TOP: 0px
        }

        .calendar TD.time SPAN.hilite {
            BORDER-LEFT-COLOR: #000;
            BORDER-BOTTOM-COLOR: #000;
            COLOR: #fff;
            BORDER-TOP-COLOR: #000;
            BACKGROUND-COLOR: #667;
            BORDER-RIGHT-COLOR: #000
        }

        .calendar TD.time SPAN.active {
            BORDER-LEFT-COLOR: #f00;
            BORDER-BOTTOM-COLOR: #f00;
            COLOR: #0f0;
            BORDER-TOP-COLOR: #f00;
            BACKGROUND-COLOR: #000;
            BORDER-RIGHT-COLOR: #f00
        }
