/*** TIME CHOOSER ***/
/**
 * To control the font-size of the time chooser
 * a) to modify all text sizes change font-size in .timeChooserBox table
 * b) to modify individual elements, such as current time or hours etc change the relevant font-size.
 *
 * To change the border color modify the background color in .timeChooserBox
 *
 * To change the background color of the panels modify the background-color in .timeChooser tbody tr td
 *
 * To change the background color of current time modify the background-color in .timeChooserCurrentSelection
 *
 * NOTE: changes to this file will affect both public and SM versions of the Time Chooser
 */

.timeChooserBox {		
	z-index: 1000;
	width:130px;
	min-width: 130px;
	display:none;
	color:#000;
	padding:0 !important;
	/*margin:2px 0 0 210px;*/
	margin:2px 0 0 0;
	position: absolute;	
    background:#5E78A6 !important;
	
}
.timeChooserBox table {
margin: 0;
padding: 0;
border-collapse: separate;
border-spacing: 1px;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}

.ieIframe {	
	z-index:-1;
	width:130px;
	height:280px;
	position:absolute;
	background-color:#5E78A6 !important;
	border: none;
}

.timeChooser {
	z-index:100;
	width:100%;
	background: #5E78A6;
}

.timeChooser table {
	margin:auto;
	background: none;
}

.timeChooser tbody tr td {
	margin: 0;
	padding: 2px 1px 1px;
	vertical-align: middle;
	text-align: center;
	font-size: 14px;
	background-color: #FFFFFF;
	color:#000;
	border: none;
}
.timeChooser tbody tr td.button-td {
	background: #E8EBF2;
	padding: 0;
}
.timeChooserCurrentSelection {
	font:bold 12px arial, sans-serif;
	background:#5E78A6 !important;
	color:#fff !important;
}
.timeChooser a {
	display:block;
	color: #000;
	line-height: 1em;
	text-decoration: none;
	border-bottom: none;
}
.timeChooser a:hover {
	color:#000;
	background: #E8EBF2;

}

.timeChooserHour a {	
	width:100% !important;
}
.timeChooserMinute a {
	padding:3px 0;
	font:normal 14px arial, sans-serif !important;
}
.timeChooserMeridiem a {
	font:normal 16px arial, sans-serif !important;
	
}

/** CALENDAR **/
.calendarBox {    
	position: absolute;	
    z-index:1000;
    width: 220px !important;
    margin:3px 0;   	
    background:#fff;
    color:#000;
	display: none;
}

.calendarBox table {
	margin: 0;
	padding: 0;
}

.ieCalendarIframe {
	z-index:1;
	width:232px;
	position:absolute;
}

.calendarBox option {
	padding:0 2px;
}

.calendar {
	font:normal 12px arial, sans-serif;	
	margin:0 !important;
	padding:0 !important;
    width:100%;
    border-collapse:collapse;
    border:1px solid #5E78A6;    
}

.calendar td {
	border:1px solid #5E78A6;	
	background:#fff !important;
	padding: 0;
	vertical-align:middle !important;
	text-align:center;	
	margin: 0;
	color:inherit;	
	
}
.calendar td a {
	display:block;	
	height:23px;
	width:32px !important;
	padding:7px 0 0 0 ;
	color:#000 !important;
	background-color:inherit;	
	line-height: 1em;
	border-bottom: none;
}
.calendar td a.invalid {
	color:#666 !important;
	background:#ccc;
	cursor: default;
}
.calendar td a:hover {
	background-color:#e8ebf2;
	color:inherit;
}
.calendar td a.invalid:hover {
	background-color:#ccc;
}
.calendarNav  {	
	width:100%;	
	height:24px;	
	background :#E8EBF2 !important;	
	color:inherit;
}

.calendarNav td {
	border:none;	
	width:auto !important;
	height:auto !important;
	background :#E8EBF2 !important;	
	color:inherit;
}

.calendarNav td a{
	height:auto !important;
	padding:0 !important;
	background-color: #E8EBF2;
	color:inherit;
}

.calendarNav td a:hover{
	background-color: #E8EBF2;
	color:inherit;
}

.calendar th{
	color:#999;
	background :#E8EBF2 !important;
	text-align:center !important;
	font-weight:bold;
	font-size:11px;
   	margin:0 !important;   	
}

.calendarBox input, .calendarBox select {
	width:auto !important;
	padding:0 ;
	margin:0;
}
#DateTime input,
.calendar select, .calendar input{
	font:normal 11px Arial, Helvetica, sans-serif;	
	margin:1px 0 !important;
	padding:0 !important;
	width:auto !important;	
}

.calendar #year{
	width:30px;	
}

.calendarNav td a.calUpArrow, .calendarNav td a.calDownArrow {
	background:#fff url('images/cal-up-arrow.gif') no-repeat 0 0;
	margin:2px 0 0 0 !important;
	padding:0 !important;
	display:block;
	width:15px !important;
	height:10px !important;
	font-size:8px;
	color:inherit;
}

.calendarNav td a.calDownArrow {
	background:#fff url('images/cal-down-arrow.gif') no-repeat 0 0;
	margin:0 0 2px 0 !important;
	color:inherit;
}

.dateField{
	text-align:center;
	background-color:#5E78A6;
	color:#FFF;
	width:100%;
	font:bold 11px Arial, Helvetica, sans-serif;	
	padding:2px 0 2px 0;
}
a.calendarLink,
.timepicker{
    cursor: pointer;
}

a.calendarLink{
    border-bottom: none;
}
a.calendarLink img{
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
img.timepicker{
    vertical-align: middle;
}