@import "ColumnViewCommon.less";

.claro .dojoxCalendarColumnView {	
  cursor: default;
	-webkit-user-select: none;
}

.claro .dojoxCalendarColumnView .dojoxCalendarHeader {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: @column-header-height - 1px;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarScrollContainer {
	left: 0;
	right: 0;
	bottom: 0;
	top: @sheet-top;
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
	border-top: @outer-border;
	border-bottom: @outer-border;
	.border-box;
}
	
.claro .dojoxCalendarColumnView .dojoxCalendarGrid {
	position: absolute;
	left: @row-header-width;
	right: 0;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable td {
	border-top: dotted 1px #B5BCC7;	
	border-right: @inner-border;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable .hour	{
	border-top: @hour-stroke;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable tr:first-child td	{
	border-top: 1px solid transparent;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable .halfhour	{
	border-top: @half-hour-stroke;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable .quarterhour	{
	border-top: @quarter-hour-stroke;
}

/* 
 * The dojoxCalendarToday & dojoxCalendarWeekend classes is added by the 
 * ColumnView.styleGridColumn method that can be subclassed to add/remove css classes
 */
.claro .dojoxCalendarColumnView .dojoxCalendarGridTable .dojoxCalendarToday {
	background-color: @today-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable tr td.last-child	{
	border-right: @outer-border;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable tr:first-child td.dojoxCalendarToday	{
	border-top: 1px solid @today-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable .dojoxCalendarWeekend {
	background-color: @week-end-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarGridTable tr:first-child td.dojoxCalendarWeekend	{
	border-top: 1px solid @week-end-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarContainer {
	position: absolute;
	top: 0;
	left: @row-header-width;
	right: 0;
	cursor: default;
}

.claro .dojoxCalendarColumnView .dojoxCalendarContainerTable {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}

.claro .dojoxCalendarColumnView .dojoxCalendarContainerTable td {
	height: 100%;
	padding: 0;
	vertical-align: top;
}

.claro .dojoxCalendarColumnView .dojoxCalendarContainerColumn {
	position:	relative;
	margin-left: 2px;
	margin-right: 9px;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEventContainer {
	position: absolute;
	overflow: hidden;
	.select-none;
}

.claro .dojoxCalendarColumnView .dojoxCalendarYearColumnHeader{
	position: absolute;
	height: @column-header-height - 1px;
	left: 0;
	width: @row-header-width - 2px;
	top: 0;	
	border-left: @outer-border;
	border-top: @outer-border;
	border-right: @outer-border;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarYearColumnHeader table {
	position:relative;
	width:100%;
	height:100%;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarYearColumnHeader table td {
	text-align: center;
	vertical-align: middle;
	border-bottom: @outer-border;	
	color: @label-color;
	.header-background;
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeader {
	position: absolute;
	height: @column-header-height;	 
	left: @row-header-width;
	right: 0;
	top: 0;
	cursor: default;
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable {
	border-collapse: collapse;
	table-layout: fixed;
	position: relative;
	margin: 0;
	padding: 0;			
	width: 100%;
	height: 100%;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable td {	
	overflow:hidden;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	.header-background;
	border-right: @inner-border;
	border-top: @outer-border;
	border-bottom: @outer-border;
	.select-none;
	color: @label-color;
	.transition-duration(0.2s);
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable td.last-child {	
	border-right: @outer-border;	
}

/* 
 * The dojoxCalendarToday & dojoxCalendarWeekend classes is added by the 
 * ColumnView.styleColumnHeaderCell method that can be subclassed to add/remove css classes
 */
.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable .dojoxCalendarToday {
	font-weight: bold;
	color: @today-label-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable .dojoxCalendarWeekend {
	color: @week-end-label-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable td.Hover{	
	cursor: pointer;		
	.header-hover-background;
}

.claro .dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable td.Active{	
	.header-active-background;
}

.claro .dojoxCalendarColumnView .dojoxCalendarRowHeader {
	position: absolute;
	width: @row-header-width - 2px;
	cursor: default;
	border-left: @outer-border;
	border-right: @outer-border;
	height: 100%;
	.select-none;
}

.claro .dojoxCalendarColumnView .dojoxCalendarRowHeaderTable {
	border-collapse: collapse;
	table-layout: fixed;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.claro .dojoxCalendarColumnView .dojoxCalendarRowHeaderTable td.dummy{
	border-top: 1px solid @row-color;
}

/* 
 * The ColumnView.styleRowHeaderCell method that can be subclassed to add/remove css classes per hour.
 */
.claro .dojoxCalendarColumnView .dojoxCalendarRowHeaderTable td {	
	vertical-align: top;			
	text-align: right;	
	border-top: @outer-border; 	
	background-color: @row-color;
	color: @label-color;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarRowHeaderTable tr:first-child td	{
	border-top: 1px solid @row-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarRowHeaderTable td span {
	padding-right: 4px;
}
 
.claro .dojoxCalendarColumnView .dojoxCalendarEvent {
	position: absolute;	
	text-align: left;
	color: #FFF;
	cursor: default;
	overflow: hidden;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	border: @event-border;
	.rounded-corners;
	background-color: #9F0000;
	.opacity(90);
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Hovered .bg {
	background-color: #CC0000;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Selected .bg {
	background-color: #660000;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Edited .bg {
	border: @event-border-focused;
	.opacity(70);
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Focused .bg {
	border: @event-border-focused;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .summary {
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .startTime {
	font-weight: bold;	
	.top-rounded-corners;
	background-color: #9F0000 - #330000;
	white-space: nowrap;
	padding: 1px 2px 2px 1px;	
	.top-left-right-border(@event-border);
	
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Focused .startTime {
	font-weight: bold;	
	.top-rounded-corners;
	background-color: #9F0000 - #330000;
	white-space: nowrap;
	padding: 1px 2px 2px 1px;
	.top-left-right-border(@event-border-focused);
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Hovered .startTime {
	background-color: #CC0000 - #330000;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Selected .startTime {
	background-color: #660000 - #330000;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent.Edited .startTime {
	background-color: #9F0000 - #330000;
	.top-left-right-border(@event-border-focused);
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .endTime {
	position: absolute;		
	font-weight: bold;	
	bottom:3px;
	left: 6px;
	white-space:nowrap;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .beforeIcon {
	text-align: center;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .afterIcon {
	position: absolute;
	bottom: 2px;
	width: 100%;
	text-align: center;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .handle {
	.glass-view;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .moveHandle {
	position: absolute;
	top:0;
	width:100%;
	bottom:0;
	cursor:move;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .resizeStartHandle {
	position: absolute;
	top:0;
	width:100%;
	height:10px;
	cursor:n-resize;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent .resizeEndHandle {
	position: absolute;
	bottom:0;
	width:100%;
	height:10px;
	cursor:n-resize;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent dl {
	margin: 0;
}

.claro .dojoxCalendarColumnView .dojoxCalendarEvent dd {
	margin: 0;
	padding: 0 3px;
	text-align: left;
}

.claro .dojoxCalendarColumnView .dojoxCalendarVScrollBar {
	position: absolute;
	top: @sheet-top;
	bottom: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView {	
	position: absolute;
	left: 0;
	right: 0;
	top: @column-header-height;
	height: @secondary-sheet-height;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarGrid {	
	position: absolute;
	left: @row-header-width;
	right: 0;
	top: 0;
	bottom: 0;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarContainer {	
	position: absolute;
	top: 0;
	left: @row-header-width;
	right: 0;
	bottom: 0;
	cursor: default;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarRowHeader {
	position: absolute;
	left: 0;				
	top: 0;
	width: @row-header-width;
	bottom: 0;
	
	border-right: none;
	border-left: none;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarGridTable td {
	text-align: right;
	vertical-align: top;	
	border-top: @inner-border;
	border-bottom: @inner-border;
	border-right: @inner-border;
	.border-box;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarGridTable tr.last-child td	{
	border-bottom: @outer-border;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarGridTable td.last-child	{
	border-right: @outer-border;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td {
	border-top: @inner-border;
	border-left: @outer-border;
	border-right: @outer-border;
	border-bottom: @outer-border;
	background-color: @row-color;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .handle {
	.glass-view;
	position: absolute;
	width:5px;
	height:100%;
	cursor:e-resize;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .moveHandle {
	left:0;
	top:0;
	width:100%;
	cursor:move;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal .labels {
	position: absolute;
	left: 3px;
	right: 1px;
	bottom: 2px;
	overflow: hidden;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeStartHandle {
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeEndHandle {
	right:0px;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .afterIcon {
	width:auto;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .endTime {
	position: relative;				
	bottom:auto;
	left: auto;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand {
	position: absolute;
	text-align: center;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand .bg {
	position: relative;
	margin-right: 10%;
	margin-left: 10%;
	border-radius: 5px;
	height: 100%;
	.select-none;
	border: 1px solid transparent;
	-moz-border-radius: 5px;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;	
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand.Up .bg {
	background-color: @expand-up-color;
	border: 1px solid @expand-up-color - #555555;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand.Down .bg {
	background-color: @expand-down-color;
	border: 1px solid @expand-down-color - #555555;
}

.claro .dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent div {
	white-space:nowrap;
}