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

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

/* top month display block - i.e. January */
.jCal .month,
.jCal .monthSelect,
.jCal .monthName,
.jCal .monthYear {
    line-height: 16px;
    text-align: center;
    vertical-align: bottom;
    font-family: Tahoma;
    font-size: 92%;
    color: #333;
    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 .today,
.jCalMo .pday,
.jCalMo .aday,
.jCalMo .overDay,
.jCalMo .invday,
.jCalMo .selectedDay {
    width: 24px;
    padding: 4px 0;
    margin: -1px -1px 0 0;
    border: solid 1px #ccc;
    font-family: Tahoma;
    font-size: 92%;
    color: #333;
    text-align: center;
    cursor: default;
    float: left;
}

/* day of week header specific style */
.jCalMo .dow {
    width: 24px;
    padding: 4px 0;
    background-color: #3b378c;
    border-right: solid 1px #ccc;
    border-bottom: 0px;
    color: white;
}

.jCalMo .dow.sun {
    color: red;
}

.jCalMo .dow.sat {
    color: #31d0f8;
}

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

/* selectable calendar day specific style */
.jCalMo .day {
    background: white;
}

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

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

.jCalMo .weekend {
    color: #31d0f8;
}

.jCalMo .weekstart {
    color: red;
}

.jCalMo .today {
    background-color: #0072B9;
    font-weight: bold;
    color: white;
}

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

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

/* left month navigation button - no need to change */
.jCal .left {
    background: url(../image/previousMonth.png) 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(../image/nextMonth.png) 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;
}