/* default dimensions and justification for each month including title */
.jCal {
    /* each day width + border-left + border-right */
    text-align: center;
    vertical-align: top;
}

/* default dimensions and justification for each month not including title */
.jCalMo {
    /* each day width + border-left + border-right */
    float: left;
    overflow: visible;
    height: 100%;
    white-space: nowrap;
}

/* top month display block - i.e. January */
.jCal .month, .jCal .monthSelect, .jCal .monthName, .jCal .monthYear {
    line-height: 16px;
    height: 16px;
    text-align: center;
    vertical-align: bottom;
    font-family: Tahoma;
    font-size: 8pt;
    color: #000000;
    cursor: pointer;
    float: left;
}

/* month name per calendar style - includes left/right padding and alignment */
.jCal .monthName {
    padding-left: 2px;
    padding-right: 2px;
    text-align: right;
}

/* year per calendar style - includes left/right padding and alignment */
.jCal .monthYear {
    float: right;
    padding-left: 2px;
    padding-right: 2px;
    text-align: left;
}

/* hilight style for new month combobox pulldown for hover */
.jCal .monthSelect {
    background: #EEE url(eeGrad2.gif) bottom repeat-x;
}

/* do not edit - this enables the new month combobox selector */
.jCal .monthSelector {
    position: absolute;
}

/* do not edit - this enables the new month combobox selector "shadow" for capturing auto-hide */
.jCal .monthSelectorShadow {
    position: absolute;
    background: #808080;
    padding: 0px;
}

/* this is the hover for the month name */
.jCal .monthNameHover {
    background: #EDEDED url(double-arrow-vert.gif) center left no-repeat;
    color: #808080;
}

/* this is the hover for the year */
.jCal .monthYearHover {
    background: #EDEDED url(double-arrow-vert.gif) center right no-repeat;
    color: #808080;
}

/* this is the hover for the new month or year hover in the new combobox selection */
.jCal .monthSelectHover {
    background: #069;
    color: #FFF;
}

/* day block dimensions and style - for all day blocks */
.jCalMo .dow, .jCalMo .day, .jCalMo .pday, .jCalMo .aday, .jCalMo .overDay, .jCalMo .invday, .jCalMo .selectedDay {
    font-family: Tahoma;
    font-size: 8pt;
    color: #000000;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #EEE;
    text-align: center;
    cursor: default;
    float: left;
}

/* day of week header specific style */
.jCalMo .dow {
    background: #EEE url(eeGrad.gif) bottom repeat-x;
    border-bottom: 0px;
}

/* actual calendar day default style */
.jCalMo .day, .jCalMo .invday {
    text-align: center;
}

/* selectable calendar day specific style */
.jCalMo .day {
    cursor: pointer;
    background: #FFF;
}

/* blacked-out calendar day specific style */
.jCalMo .invday {
    color: #808080;
    background: #eeeeee;
    text-decoration: line-through;
}

/* previous and subsequent months calendar day specific style */
.jCalMo .pday, .jCalMo .aday {
    background: #e3e3e3;
    color: #CCC;
}

/* selected day */
.jCalMo .day.selectedDay {
    color: #FFF;
    /* must use rgb() syntax for jquery.color.js compliance */
    background: rgb(0, 143, 214) !important;
}

/* mouseover hilighted selectable day */
.jCalMo .day.overDay {
    color: #FFF;
    /* must use rgb() syntax for jquery.color.js compliance */
    background: rgb(0, 102, 153) !important;
}

/* left month navigation button - no need to change */
.jCal .left {
    background: url(_left.gif) center center no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    float: left;
}

/* right month navigation button - no need to change */
.jCal .right {
    background: url(_right.gif) center center no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

/* no need to change - this is for carousel opacity */
.jCalMask, .jCalMove {
    position: absolute;
    overflow: hidden;
}

.jCalMo .dow,
.jCalMo .day,
.jCalMo .pday,
.jCalMo .aday,
.jCalMo .overDay,
.jCalMo .invday,
.jCalMo .selectedDay {
    height: 40px;
    width: 13%;
}

.jCalMo .dow {
    height: 20px;
}

.jCal {
    height: 21px;
}