/* The main calendar widget.  DIV containing a table. */

div.calendar { position: relative; }

/**
	日历表格
		border:	边框、边框颜色
		background:	表格背景色
*/
.calendar, .calendar table {
  border: 1px solid #B6F0FE;
  font-size: 11px;
  color: #3A3A3A;
  cursor: default;
  background: #28B8E2;
  font-family: tahoma,verdana,sans-serif;
  width:177px;
  margin:auto;
}

/* Header part -- contains navigation buttons and day names. */

/* 
	头部 -- 包含导航按钮和每一日的名称.
	导航按钮(上一年,上个月,下个月,下一年) 
	height: 导航按钮所在行的行高
*/
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
}

/* 导航按钮区域的背景色,背景图片(向下的箭头) */
.calendar .nav {
  background: #61DCFF url(../calendar/menuarrow.gif) no-repeat 100% 100%;
}

/** 
	显示"xx月, xx年"的顶部标题,如"一月,2008"
		font-weight:	字号
		background:		背景色
		color:			标题文字颜色
*/
.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  background: #10BAEB;
  color: #07617E;
  padding: 2px;
}

/**
	导航按钮区域 和 标题区域
		background:		背景颜色
		color:			行文字颜色
*/
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  background: #61DCFF;
  color: #07617E;
}

/** 每一日的名称行(周,周一,周二,...,周日)
	background:		背景色
*/
.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #28B8E2;
}

/** 每一日的名称行(周,周一,周二,...,周日)
	border-bottom:	底部边框和颜色
	color:			文字颜色
	width:			列宽
*/
.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #28B8E2;
  padding: 1px;
  text-align: center;
  color: #07617E;
}

/**
	"周六","周日"的文字颜色	
*/
.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #f00;
}

/**
	鼠标事件
	当鼠标在头部各区域("?","<<","<","今天",">",">>","周一","周二",...,"周日")悬停时的
		background-color:	背景色
		color			:	文字颜色
		border			:	区域边框和边框颜色

*/
.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background-color: #BFF2FF;
  color: #28B8E2;
  border: 1px solid #BFF2FF;
  padding: 1px;
}

/**
	鼠标事件
	当鼠标在头部各区域("?","<<","<","今天",">",">>","周一","周二",...,"周日")按下时的
		background-color:	背景色
		border			:	区域边框和边框颜色
*/
.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: #BFF2FF;
  padding: 2px 0px 0px 2px;
}

/* The body part -- contains all the days in month. */
/**
	日期单元格
		color:		日期文字颜色
*/
.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  color: #456;
  text-align:center;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
  color: #fbb;
}

/**
	显示周次的表格列("周",1,2,3,...)
		background:		背景
		height:			行高
*/
.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #28B8E2;
  background: #28B8E2;
}

/**
	鼠标事件
	鼠标悬停在某一日上时,该日所在行的
		background:		背景
*/
.calendar tbody .rowhilite td {
  background: #28B8E2;
}

/**
	鼠标事件
	鼠标悬停在某一日上时,该日所在行的对应的周次行的
		background:		背景
*/
.calendar tbody .rowhilite td.wn {
  background: #28B8E2;
}

/**
	鼠标事件
	鼠标悬停在某一日上时,该日单元格的
		background:		背景
		border:			边框及边框的颜色
*/
.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #BFF2FF;
  padding: 1px 3px 1px 1px;
  border: 1px solid #BFF2FF;
}

/**
	鼠标事件
	鼠标悬停在某一日的单元格上按下时,该日单元格的
		background:		背景
*/
.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #BFF2FF;
  padding: 2px 2px 0px 2px;
}

/**
	鼠标事件
	鼠标悬停在某一日的单元格上按下选中该单元格后,被选中的单元格的
		border:			边框及边框的颜色
		background:		背景
		color	  :		文字颜色
*/
.calendar tbody td.selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #BFF2FF;
  padding: 1px 3px 1px 1px;
  background: #BFF2FF;
  color: #07617E;
}

/**
	"周六","周日"的天的日期单元格的文字的
		color:		文字颜色
*/
.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #f00;
}

/**
	当天的日期单元格的文字的
		color:		文字颜色
*/
.calendar tbody td.today { /* Cell showing selected date */
  font-weight: bold;
  color: #07617E;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */
/**
	日历的底部区域的
		background: 背景
  		color: 		文字颜色
		height:		行高
	
*/
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #556;
  color: #fff;
}

/**
	日历的底部区域的状态条(覆盖在底部区域上),提示日期的单元格的
		background: 背景
  		color: 		文字颜色
		border:		边框及边框的颜色
	
*/
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #fff;
  color: #445;
  border-top: 1px solid #556;
  padding: 1px;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #aaf;
  border: 1px solid #04f;
  color: #07617E;
  padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #77c;
  padding: 2px 0px 0px 2px;
}

/* Combo boxes (menus that display months/years for direct selection) */
/**
	导航按钮下拉列表
	width: 宽度
		如果如果设置或修改了样式 ".calendar thead .name"的 width 属性,
		那么最好将此处的width属性修改与之相同,默认值为 4em.
*/
.calendar .combo {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 4em;
  cursor: default;
  border: 1px solid #655;
  background: #def;
  color: #07617E;
  font-size: 90%;
  z-index: 100;
  text-align: center;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

/**
	鼠标事件
	鼠标悬停在导航按钮下拉列表上的选择项
*/
.calendar .combo .hilite {
  background: #acf;
}

/**
	在导航按钮下拉列表上当前所处的年,月份选择项
*/
.calendar .combo .active {
  border-top: 1px solid #46a;
  border-bottom: 1px solid #46a;
  background: #eef;
  font-weight: bold;
}

.calendar td.time {
  border-top: 1px solid #07617E;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #07617E;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #07617E;
  color: #0f0;
}