﻿

/************ Calendar Related Styles ***********************/
/* Calendar 容器所用的樣式 */
.cssCalendar .ajax__calendar_container
{
    padding: 4px;
    position: absolute;
    cursor: default;
    width: 200px;
    text-align: center;
    font: .95em;
    background-color: #ffffcc;
    border: 5px outset #646464;
    color: blue;
}

/* Calendar Body 所用的樣式 */
.cssCalendar .ajax__calendar_body
{
    border: thin solid #FFFFCC;
    --height: 200px;
    padding-bottom:10px;
    width: 180px;
    position: relative;
    overflow: hidden;
    margin: auto;
    --border: 1px solid #000000;
}

/*
於顯示日期、月份、年份所用的樣式，
務必指定高度與寬度
*/
.cssCalendar .ajax__calendar_days, .cssCalendar .ajax__calendar_months, .cssCalendar .ajax__calendar_years
{
    top: 0px;
    left: 0px;
    --height: 130px;
    width: 170px;
    position: absolute;
    text-align: center;
    margin: 2px;
    --border: 1px solid #000000;
}

/* 指定標頭、註腳所需的高度與寬度 */
.cssCalendar .ajax__calendar_header, .cssCalendar .ajax__calendar_footer
{
    height: 20px;
    width: 100%;
    --border: 1px solid #000000;
}

/*
指定「上一個」圖示的樣式，
若不指定圖檔來源時，會自動使用內建的圖示
*/
.cssCalendar .ajax__calendar_prev
{
    cursor: pointer;
    width: 20px;
    height: 20px;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("Images/Calendar_3D_arrow_left.gif");
}

/*
指定「下一個」圖示的樣式，
若不指定圖檔來源時，會自動使用內建的圖示
*/
.cssCalendar .ajax__calendar_next
{
    cursor: pointer;
    width: 20px;
    height: 20px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("Images/Calendar_3D_arrow_right.gif");
}

/* 月曆第一行的標題所用的樣式 */
.cssCalendar .ajax__calendar_title
{
    cursor: pointer;
    font-weight: bold;
    color: black;
}

/* 月曆最後一行的今日所用的樣式 */
.cssCalendar .ajax__calendar_today
{
    cursor: pointer;
    padding-top: 3px;
    font-weight: bold;
    color: black;
}

/* 「星期」所用的樣式 */
.cssCalendar .ajax__calendar_dayname
{
    height: 20px;
    width: 15px;
    text-align: right;
    color: Maroon;
    padding: 0px 2px;
}

/* 日曆所用的樣式 */
.cssCalendar .ajax__calendar_day
{
    height: 18px;
    width: 15px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    padding: 2px 2px 2px;
}

/* 月份、年份所用的樣式 */
.cssCalendar .ajax__calendar_month, .cssCalendar .ajax__calendar_year
{
    height: 38px;
    width: 52px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

/* 已經被啟用的日期、月份與年份所用的樣式 */
.cssCalendar .ajax__calendar_active .ajax__calendar_day, .cssCalendar .ajax__calendar_active .ajax__calendar_month, .cssCalendar .ajax__calendar_active .ajax__calendar_year
{
    background-color: #edf9ff;
}

/* 非目前所選取的日期、月份或年份所用的樣式 */
.cssCalendar .ajax__calendar_other .ajax__calendar_day, .cssCalendar .ajax__calendar_other .ajax__calendar_month, .cssCalendar .ajax__calendar_other .ajax__calendar_year
{
    background-color: #ffffcc;
    color: #646464;
}

/* 當滑鼠移至月曆的第一行、最後一行時，所使用的樣式 */
.cssCalendar .ajax__calendar_hover .ajax__calendar_title, .cssCalendar .ajax__calendar_hover .ajax__calendar_today
{
    background-color: #ffffcc;
    color: #00ff00;
}

/* 當滑鼠移至日期、月份、年份上時，所使用的樣式 */
.cssCalendar .ajax__calendar_hover .ajax__calendar_day, .cssCalendar .ajax__calendar_hover .ajax__calendar_month, .cssCalendar .ajax__calendar_hover .ajax__calendar_year
{
    background-color: #0f2543;
    color: #ffffff;
}
