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

.datepickerContainer,
.datepicker{
	width: 100% !important;

}
.datepicker{
	position:relative;
	z-index:320;
}
.calendar{
	font-size: 11px;

	/*border:1px solid #E5E5E5;
	border-left:none;
	border-bottom:none;*/
}

/* -----------------------------   Calendar Common */


/* ----------------------------- ^ Calendar Common */

/* -----------------------------   Calendar Month */
.datepicker thead a,
.datepicker thead a span{
	display:block;
}
.datepicker thead tr{	
/*	background:url(/img/i/calendar-grad.png) repeat-x bottom #FFF;	*/
}
.datepickerViewYears thead a,
.datepickerViewMonths thead a,
.datepickerViewDays thead a{
	padding:3px 7px;	
}

.datepicker thead .datepickerGoPrev span,
.datepicker thead .datepickerGoNext span{
	text-indent:-9999px;
	background:url(/img/i/calendar-arrow-sprite.png) no-repeat 0 0 transparent;
}
.datepicker thead .datepickerGoNext span{
	background-position:100% 0;
	}
.datepicker thead .datepickerGoPrev span{
	background-position:0 -22px;
}

.datepicker thead .datepickerGoNext,
.datepicker thead .datepickerMonth,
.datepicker thead .datepickerGoPrev,
.hide-ctr{
	text-align:center;
	font:bold 15px/22px Arial,Helvetica,sans-serif;
	color:#555;
	border:1px solid #ccc;
	border-bottom-color:#FFF;
}
#archive-tpl .datepicker thead .datepickerMonth span,
#inner-tpl  .datepicker thead .datepickerMonth span{
	display:none;
	}
.datepickerGoPrev,
.datepickerMonth{
	border-right:none !important;
}
.datepickerGoNext,
.datepickerMonth{
	border-left:none !important;

}
.datepickerGoNext a,
.datepickerGoPrev a{
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	color:#333;
}
.datepickerMonth a{	
	color:#333;
	width:100% !important;
}
.datepickerMonth a:hover,
.datepickerGoNext a:hover,
.datepickerGoPrev a:hover{
	text-decoration:none;
}
.datepickerMonth a:hover span,
.datepickerGoNext a:hover span,
.datepickerGoPrev a:hover span{
	color:#316DB6;

}
/* ----------------------------- ^ Calendar Month */


/* -----------------------------   Calendar Disable Week Column */

.datepickerDoW .first-child,
.datepickerDays th{
	display:none;
}


table.datepickerViewDays tbody.datepickerMonths, 
table.datepickerViewDays tbody.datepickerYears {
    display: none;
}

/* ----------------------------- ^  Calendar Disable Week Column */


/* -----------------------------   Calendar Week Days */

.datepickerDoW th{

}

.datepickerDoW th span{
	display:block;
	background: none repeat scroll 0 0 #878787;
    border: medium none;
    color: #FFFFFF;
    padding: 2px;
    text-align: center;	
}

/* ----------------------------- ^ Calendar Week Days */

/* -----------------------------   Calendar Days */
.datepickerMonths a,
.datepickerMonths a span,
.datepickerYears a,
.datepickerYears a span,
.datepickerDays a,
.datepickerDays a span{
	display:block;
}

.datepickerViewMonths tbody,
.datepickerViewYears tbody{
	height:138px;
}

.datepickerMonths a,
.datepickerYears a{
	font:bold 13px/22px Arial,Helvetica,sans-serif;

	color:#333;
	text-decoration:none;
}
.datepickerYears td:hover,
.datepickerMonths td:hover{
	background: none repeat scroll 0 0 #D2E8FF;
}
.datepickerMonths td:hover span,
.datepickerYears td:hover span{
	color:#316DB6;
}
.datepickerMonths a span,
.datepickerYears a span{
	padding:3px 2px;
	line-height:39px;
	background:#f9f9f9;
}

.datepickerDays a{
	cursor:default;
	text-decoration:none;
	color:#777;
	background:#f9f9f9;
	font-weight:normal;
}
.datepickerDays .datepickerDisabled a{
	color:#aaa;
}
.datepickerDays a span{
	padding:2px;
	text-align:center;
	/*width:36px;*/
}

.datepickerNotInMonth a{
	cursor:default !important;
	background:#fff !important;
}
.datepickerMonths .datepickerDisabled a:hover,
.datepickerMonths .datepickerDisabled:hover span,
.datepickerMonths .datepickerDisabled:hover a,
.datepickerMonths .datepickerDisabled a,
.datepickerYears .datepickerDisabled a:hover,
.datepickerYears .datepickerDisabled:hover a,
.datepickerYears .datepickerDisabled:hover span,
.datepickerYears .datepickerDisabled a{
	color:#ccc !important;
}
.datepickerNotInMonth span{
	visibility:hidden;
}
/* ----------------------------- ^ Calendar Days */



/* ----------------------------- ^ Calendar Events */
.has-events a{
	cursor:pointer;
    background-color: #719BD5;
    color: #FFFFFF;
	font-weight:bold;
}
.has-events a:hover{
    background:none repeat scroll 0 0 #D2E8FF;
	color:#316DB6;
	text-decoration:none;
}
.has-events.datepickerSelected a{
	background:none repeat scroll 0 0 #D2E8FF;
	color:#316DB6;
}
.hide,
.hide-ctr {
	height:22px;
	visibility:hidden;
}
.hide-ctr a,
.hide-ctr span{
	display:none;
	}

/* -----------------------------   Calendar Events */


.calendar table{
	/*max-width: 100%;
width: 320px;*/
	font-size: 11px;
	color: #636363;
	cursor: default;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	border-collapse:collapse;
	width: 100%;
}
.calendar table tbody{ 
	}
.calendar thead .headrow{
	background:url(../i/cal-th.png) repeat-x bottom #FFF;
}

.calendar thead .headrow TD{
	text-align:center;
	font:bold 14px/22px "Myriad Pro","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#3d3d3d;
	border:1px solid #e5e5e5;
	border-bottom-color:#FFF;
	border-left:none;
	border-right:none;
	padding:3px 7px;
}

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

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
	text-align: center;
	padding:1px;
}
.calendar thead .title { /* This holds the current "month, year" */
	font-weight: bold;
	padding:1px;
	text-align: right;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
	/*border-bottom: 2px solid #333;*/
	background:#474747;
	color:#FFF;
	padding: 2px;
	text-align: center;
/*	background: #f4f0e8;*/
	border:none;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
	color: #e96b6b;
}

/* styles for archive by 1 date, photogallery, archive-block on main page */
/* How do the buttons in header appear when hover */
#tab1 .calendar thead .hilite, #photo-calendar-container .calendar thead .hilite, #archive .calendar thead .hilite{
	cursor:pointer;
	/*background-color:#006699;*/
	color:#000;
}
#tab2 .calendar thead .hilite{
	cursor:pointer;
	background-color:#CC9966;
	color:#fff;
}

.calendar thead .daynames .hilite{
	color:#FFF !important;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
/*	text-align: right;
	padding: 2px 4px 2px 2px;*/
	width: 2em;
	padding:2px;
	text-align:center;
	border:1px solid #E5E5E5;
	border-right:none;
	border-bottom:none;
}
.calendar tbody .day, .calendar tbody .emptycell {
	border:1px solid #E5E5E5;
	border-right:none;
	border-bottom:none;
}

.calendar tbody .day.othermonth {
	font-size: 80%;
	color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
	color: #faa;
}
.calendar table .wn {
	padding: 2px 3px 2px 2px;
	border-right: 1px solid #000;
	background: #f4f0e8;
}

/* styles for archive by 1 date, photogallery, archive-block on main page */
#tab1 .calendar tbody td.hilite, #photo-calendar-container .calendar tbody td.hilite, #archive .calendar tbody td.hilite{ /* Hovered cells <TD> */
/*	padding: 1px 3px 1px 1px;
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;*/
	background-color:#769BF7;
	color:#fff;
	cursor:pointer;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
	background-color:#769bf7;
}

#tab1 .calendar tbody td.selected, #photo-calendar-container .calendar tbody td.selected, #archive .calendar tbody td.selected{ 
/* Cell showing selected date */
	background-color:#769bf7;
	color:#fff;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
	color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
	font-weight: bold;
	color: #00f;
	color:#09f;
}

.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 */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
	padding: 1px;
	border: 1px solid #DDD;
	border-top-color:#FFF;
	background: #EEE;
	color: #777;
	text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
	padding: 1px;
	background: #e4e0d8;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
	padding: 2px 0px 0px 2px;
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
	position: absolute;
	display: none;
	width: 4em;
	top: 0px;
	left: 0px;
	cursor: default;
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
	background: #e4e0d8;
	font-size: 90%;
	padding: 1px;
	z-index: 100;
}

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

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

.calendar .combo .active {
	background: #c4c0b8;
	padding: 0px;
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
}

.calendar .combo .hilite {
	background: #048;
	color: #fea;
}

.calendar td.time {
	border-top: 1px solid #000;
	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: #000;
	background-color: #766;
	color: #fff;
}
.calendar td.time span.active {
	border-color: #f00;
	background-color: #000;
	color: #0f0;
}
#content .tabberlive #tab2 .calendar tbody td.selected,
#content #tab2 .calendar tbody td.selected.today{
	background-color:#cc9966;
	color:#fff;
}
#tab2 .calendar tbody td.active{
	background-color:#FFC15F;
}
#tab2 .calendar tbody td.hilite{
	background-color:#FFCC99;
	color:#333;
}
#tab2 .calendar tbody td.today{
	color:#996600;
}
#photo-calendar-container .calendar{
	margin-bottom:43px;
}
#photo-calendar-container .calendar table{
	width:100%;
}
#photo-calendar-container .calendar thead .title{
	color:#616161;
	line-height:36px;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:capitalize;
}
#archive .calendar{
	/*padding:0 2px 18px;*/
}

.calendar table TBODY TD{
	border:1px solid #e1e1e1;

	/*border-left:none;*/ 
}

.calendar .selected{
		
}