﻿
/************ Calendar Related Styles ***********************/
/* Calendar 容器所用的樣式 */
.cssAjaxCal .ajax__calendar_container
{
    padding: 1px;
    position: absolute;
    cursor: default;
    width: 160px;
    text-align: center;
    background-color: #DDDDDD;
    border: 1px solid #AAAAAA;
    color: #000000;
}

/* Calendar Body 所用的樣式 */
.cssAjaxCal .ajax__calendar_body
{
    height: 112px;
    width: 162px;
    position: relative;
    overflow: hidden;
    background-color: #E8E8E8;
    border: 1px solid #AAAAAA;
    margin: 0px -2px ;
}

/*
於顯示日期、月份、年份所用的樣式，
務必指定高度與寬度
*/
.cssAjaxCal .ajax__calendar_days,
.cssAjaxCal .ajax__calendar_months,
.cssAjaxCal .ajax__calendar_years
{
    top: 0px;
    left: 0px;
    height: 110px;
    width: 160px;
    position: absolute;
    text-align: center;
    margin: 2px;
}

/* 指定標頭、註腳所需的高度與寬度 */
.cssAjaxCal .ajax__calendar_header,
.cssAjaxCal .ajax__calendar_footer
{
    height: 18px;
    width: 100%;
}

/*
指定「上一個」圖示的樣式，
若不指定圖檔來源時，會自動使用內建的圖示
*/
.cssAjaxCal .ajax__calendar_prev
{

}

/*
指定「下一個」圖示的樣式，
若不指定圖檔來源時，會自動使用內建的圖示
*/
.cssAjaxCal .ajax__calendar_next
{

}

/* 月曆第一行的標題所用的樣式 */
.cssAjaxCal .ajax__calendar_title
{
    cursor: pointer;
    font-weight: bold;
    color: #444444;
    padding-bottom: 4px;
}

/* 月曆最後一行的今日所用的樣式 */
.cssAjaxCal .ajax__calendar_today
{
    cursor: pointer;
    padding-top: 3px;
    font-weight: bold;
    color:  #444444;
}

/* 「星期」所用的樣式 */
.cssAjaxCal .ajax__calendar_dayname
{
    height: 12px;
    width: 18px;
    text-align: right;
    color: #CC2222;
    padding: 1px 2px;
    font-weight: bold;
}

/* 日曆所用的樣式 */
.cssAjaxCal .ajax__calendar_day
{
    height: 11px;
    width: 18px;
    text-align: right;
    cursor: pointer;
    overflow: hidden;
    padding: 2px;
}

/* 月份、年份所用的樣式 */
.cssAjaxCal .ajax__calendar_month,
.cssAjaxCal .ajax__calendar_year
{
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    padding: 2px;

}

/* 已經被啟用的日期、月份與年份所用的樣式 */
.cssAjaxCal .ajax__calendar_active .ajax__calendar_day
.cssAjaxCal .ajax__calendar_active .ajax__calendar_month, 
.cssAjaxCal .ajax__calendar_active .ajax__calendar_year
{
    background-color: #edf9ff;
    border-color: #0066cc;
    color: blue;
    font-weight: bold;
}

/* 非目前所選取的日期所用的樣式 */
.cssAjaxCal .ajax__calendar_other .ajax__calendar_day
{
    color: #888888;
}

/* 非目前所選取的月份或年份所用的樣式 */
.cssAjaxCal .ajax__calendar_other .ajax__calendar_month,
.cssAjaxCal .ajax__calendar_other .ajax__calendar_year 
{

}

/* 當滑鼠移至月曆的第一行、最後一行時，所使用的樣式 */
.cssAjaxCal .ajax__calendar_hover .ajax__calendar_title
{
	background-color: #FFFFFF;
}

.cssAjaxCal .ajax__calendar_hover .ajax__calendar_today
{
	background-color: #FFFFFF;
}


/* 當滑鼠移至日期上時，所使用的樣式 */
.cssAjaxCal .ajax__calendar_hover .ajax__calendar_day
{
    height: 11px;
    width: 18px;
    padding: 1px;
    border: 1px solid #8888CC;
    background-color: #EEEEFF;
    color: #000000;
}

/* 當滑鼠移至月份、年份上時，所使用的樣式 */
.cssAjaxCal .ajax__calendar_hover .ajax__calendar_month,
.cssAjaxCal .ajax__calendar_hover .ajax__calendar_year 
{
    height: 30px;
    width: 30px;
    padding: 1px;
    border: 1px solid #8888CC;
    background-color: #EEEEFF;
    color: #000000;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}