/**
 * This file contains common style for UICalendar component
 */

/**
 * main calendar container
 * @tag div
 */
div.ui-calendar{
	z-index: 1; position: absolute;
	visibility: hidden; border: outset 2px ButtonHighlight;
	background-color: Menu; font-family: Tahoma;
	font-size: 11px; cursor: default; padding: 0; top: 0; left: 0;
	width:169px;>hei44ght:173px;
	min-width:175px;
	border:groove 2px window;
}

/**
 * main calendar input element
 * @tag input
 * @type text
 */
input.ui-calendar-input{font-family: Tahoma;font-size:11px;}

/**
 * main calendar button element
 * @tag input
 * @type button
 */
input.ui-calendar-button{
	font-family: Tahoma;font-size:11px;
	width: 22px;
}

/**
 * calendar title element
 * @tag div
 */
div.ui-calendar-title{
	background-color: #0A246A;/*ActiveCaption; safari doesn't support this color*/
	border: solid 0px ButtonHighlight;
	cursor: default;
	height: 20px;
	max-height:17px;
	margin: 0;
	padding: 2px 2px 1px 0;
	font-family: Tahoma;
	font-size: 11px;
	/*filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=50, FinishOpacity=0, Style=1, StartX=0,  FinishX=100, StartY=0, FinishY=100);*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,  EndColorStr='#FFA1C5EC', StartColorStr='#200A246A');
	-moz-opacity:0.8;
}
/**
 * calendar title button element. (clear, close)
 * @tag div
 */
div.ui-calendar-title-btn{
	float:right;
	font-family:Lucida Console !important;
	font-size:14px;
	font-weight:bold; 
	background:ButtonFace;
	color:ButtonText; cursor: default;
	text-align:center; 
	border:2px solid ButtonHighlight;
	border-right-color:ButtonShadow;
	border-bottom-color:ButtonShadow;
	padding:0 1px 1px 1px;
	_padding:1px 2px;
	margin:0 0 0 1px;
	display:table;
	line-height:10px;
	_line-height:11px;
	/*max-height:12px; max-width:9px; 
	min-height:12px; min-width:9px; 
	width:16px; height:16px; padding:0 0 0 2px; margin:0 0 0 2px;*/
}
/**
 * calendar navigation panel element.
 * @tag div
 */
div.ui-calendar-navigation{
	border:groove 2px window;
	text-align:center
}

/**
 * calendar navigation panel button element. (next/previous month)
 * @tag button
 */
button.ui-calendar-navigation-btn{
	cursor: default;
	font-family: Tahoma !important;
	font-weight: bold;
	font-size: 10px;
	width: 18px;
	height: 18px;	
	border-style: outset;
	border-width: 1px;
	border-color: ButtonHighlight;
	text-align: center;
	margin: 1px;
}
/**
 * calendar navigation panel select box element. (month/year)
 * @tag select
 */
select.ui-calendar-navigation-sel{
	font-family: Tahoma;
	font-size: 11px;
	width: 58px;
	min-width: 60px;
	margin: 1px;
}

/**
 * main calendar date picker table.
 * @tag table
 */
table.ui-calendar-table{
	/*margin:1px;*/
	border:groove 2px window;
}

/**
 * calendar date picker header. Contains days of week.
 * @tag td
 */
td.ui-calendar-table-header{
	background-color: Gray;/*ThreedShadow;*/
	font-family: Tahoma;
	font-size: 11px;
	color: menu;
	height: 22px;
	* html td width: 1%;
	width:24px;
	padding: 0 3px 0 3px;
	text-align: center;
}

/**
 * calendar date picker cell.
 * @tag td
 */
td.ui-calendar-table-cell{
	padding-right: 5px;
	cursor: pointer;
	>cursor:hand;
	font-family: Tahoma;
	font-size: 11px;
	width: 24px;
	height: 18px;
	border-width: 0px;
	border-color: Window;
	background-color: Window;
	text-align: right;
	border: solid 1px Window;
}

/**
 * active calendar date picker cell.
 * @tag td
 */
td.ui-calendar-table-cell-active{
	padding-right: 5px;
	cursor: pointer;
	>cursor:hand;
	font-family: Tahoma;
	font-size: 11px;
	width: 24px;
	height: 18px;
	background-color:  #0A246A;/*Highlight;*/
	text-align: right;
	color: HighlightText;
	border: inset 1px Window;
}

/**
 * clock container.
 * @tag div
 */
div.ui-calendar-clock {
	font-family: Tahoma;
	font-size: 11px;
	text-align:center;
	border:groove 2px window;
	vertical-align: middle;
}

/**
 * clock select box. (hours/minutes)
 * @tag select
 */
div.ui-calendar-clock select{
	font-family: Tahoma;
	font-size: 11px;
	font-weight:normal;
	vertical-align: middle;
}

/**
 * separator beetwin hours and minutes selec boxes. (:)
 * @tag span
 */
div.ui-calendar-clock span{
	height:16px;
	font-weight:bold;
	font-family: Tahoma;
	font-size: 11px;
	/*margin-top:6px;*/
	vertical-align: middle;
	border:0px solid;
	line-height: 6px;
}

