
#contentsArea {
    padding: 5px 10px 5px 5px;
}

.yearMonthRow {
    vertical-align: top;
}
.yearMonthRow:after {
    /* clearfix */
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.yearMonthLabel {
    display: inline;
    float: left;
    color: #555;
    font-size: 9pt;
}
.yearMonthLabel:hover {
    background-color: #00f;
    color: #ff0;
}
.calTableArea {
    display: inline;
    float: right;
    margin-bottom: 5px;
}
TABLE#calendarTable {
    border: thin solid #5c5;
    border-radius: 5px;
    box-shadow: 1px 2px 10px 2px #888;
    background-color: #fff;
    font-family: Times, Arial, Helvetica;
    font-size: 9pt;
}

.dateTip {
    text-align: right;
    margin-right: 5px;
    padding: 0px 5px;
    margin-right: 5px;
}

.greenDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #3c9;
    color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 1px #555;
    text-shadow: 1px 1px 0px #000;
}
.greenDateTip:hover {
    background: #00f;
    color: #ff0;
}

.yellowDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #ffa;
    color: #888;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #888;
}
.yellowDateTip:hover {
    background: #00f;
    color: #ff0;
}

.orangeDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #ffa;
    text-shadow: 1px 1px 0px #000;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #888;
}
.orangeDateTip:hover {
    background: #00f;
    color: #ff0;
}

.pinkDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #fcc;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 1px #555;
}
.pinkDateTip:hover {
    background: #00f;
    color: #ff0;
}

