@import "ColumnViewCommon.less";

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

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

	.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;
	}
	
	.dojoxCalendarGrid {
		position: absolute;
		left: @row-header-width;
		right: 0;
		overflow: hidden;
	}
	
	.dojoxCalendarGrid.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}

	.dojoxCalendarGridTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
		
	 	td {
			border-top: dotted 1px @outer-border;	
			border-right: @inner-border;
			.border-box;
		}
	
		tr:first-child td	{
			border-top: 1px solid transparent;
		}

		.dojoxCalendarToday {
			background-color: @today-color;
		}
		
		tr td.last-child	{
			border-right: @outer-border;
		}
		
		.tr:first-child td.dojoxCalendarToday	{
			border-top: 1px solid @today-color;
		}
		
		.dojoxCalendarWeekend {
			background-color: @week-end-color;
		}
		
		tr:first-child td.dojoxCalendarWeekend	{
			border-top: 1px solid @week-end-color;
		}	
	}

	 
	td.hour {
		border-top: @hour-stroke;
	}

	td.halfhour{
		border-top: @half-hour-stroke;	
	}

	td.quarterhour{
		border-top: @quarter-hour-stroke;
	}

	span.hour {
		color: @label-color;
		background-color: @row-color;
	}

	span.halfhour,
	span.quarterhour{
		color: @secondary-label-color;
		background-color: @row-color;
	}

	.dojoxCalendarContainer {
		position: absolute;
		top: 0;
		left: @row-header-width;
		right: 0;
		cursor: default;
		overflow: hidden;
	}
	
	.dojoxCalendarContainer.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}
	
	.dojoxCalendarContainerTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
	
		td {
			height: 100%;
			padding: 0;
			vertical-align: top;
			border-right: 1px solid transparent;
		}
	}
	
	.dojoxCalendarContainerColumn {
		position: relative;
		width:100%;		
	}
	
	.dojoxCalendarSubContainerColumn {
		position: absolute;		
		top: 0;
		.border-box;
		height:100%;	
	}
	
	.dojoxCalendarEventContainerColumn {
		position: absolute;		
		height: 100%;
		left:0;
		top:0;
		right:0;
		margin-left: 1px;
		margin-right: 5px;		
	}
	
	.dojoxCalendarDecorationContainerColumn {
		position: absolute;		
		height: 100%;
		left:0;
		top:0;
		right:0;	
	}
	
	.dojoxCalendarSubContainerColumn.subColumn {
		border-right: @sub-column-border;		
	}

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

	.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;	
	
		table {
			position:relative;
			width:100%;
			height:100%;	
		}
		
		table td {
			text-align: center;
			vertical-align: middle;
			border-bottom: @outer-border;	
			color: @label-color;
			.header-background;
		}
	}

	.dojoxCalendarColumnHeader {
		position: absolute;
		height: @column-header-height;	 
		left: @row-header-width;
		right: 0;
		top: 0;
		cursor: default;
		overflow: hidden;
	}
	
	.dojoxCalendarColumnHeader.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}
	
	.dojoxCalendarColumnHeaderTable {
		border-collapse: collapse;
		table-layout: fixed;
		position: relative;
		margin: 0;
		padding: 0;			
		width: 100%;
		height: 100%;	

		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);
		}
		
		td.last-child {	
			border-right: @outer-border;	
		}
		
		.dojoxCalendarToday {
			font-weight: bold;
			color: @today-label-color;
		}
		
		.dojoxCalendarWeekend {
			color: @week-end-label-color;
		}
		
		td.Hover{	
			cursor: pointer;		
			.header-hover-background;
		}
		
		td.Active{	
			.header-active-background;
		}
	}
	
	.dojoxCalendarSubHeader {
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		height: @sub-column-header-height;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: none;
	}
	
	.dojoxCalendarSubColumnHeader {
		position: absolute;
		height: @sub-column-header-height;
		left: @row-header-width;
		right: 0;
		top: 0px;
		cursor: default;
		overflow: hidden;
	}
	
	.dojoxCalendarSubColumnHeader.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}
		
	.dojoxCalendarSubColumnHeaderTable {
		border-collapse: collapse;
		table-layout: fixed;
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		
		td {
			overflow: hidden;
			white-space: nowrap;
			vertical-align: middle;
			text-align: center;  
			border-right: @inner-border; 
			border-top: @outer-border;
			-moz-user-select: none;
			-webkit-user-select: none;
			khtml-user-select: none;
			user-select: none;
			color: #000000;  
		}
		td.last-child {
			border-right: @outer-border;
		}
		td.dojoxCalendarToday { 
			background-color: @today-color;
		}
		td.dojoxCalendarWeekend {
			background-color: @week-end-color;
		}					
	}
	
	.dojoxCalendarSubHeaderContainer {			
		position: relative;
		width:100%;		
		height: @sub-column-header-height - 2px;
	}	
	
	.dojoxCalendarSubHeaderCell {
		position: absolute;		
		top: 0;
		.border-box;
		height:100%;	
		overflow: hidden;
		text-overflow: ellipsis;
	}	
	
	.dojoxCalendarSubHeaderCell.subColumn {
		border-right: @sub-column-border;		
	}	
	
	.dojoxCalendarSubHeaderLabel {
		font-size: 0.9em;
		color: #555;
	}
	
	.dojoxCalendarSubRowHeader {
		position: absolute;
		height: @sub-column-header-height;
		left: 0;
		width: @row-header-width - 2px;
		top: 0;
		border-left: @outer-border;
		border-right: @outer-border;

		table {
			position: relative;
			width: 100%;
			height: 100%;
			
			td {
				border-top: @outer-border;
				background-color: #efefef;  
			}			
		}
	}

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

	.dojoxCalendarRowHeaderLabelContainer{
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	.dojoxCalendarRowHeaderLabel{	
		right: 4px;		
		position: absolute;	
	}

	.dojoxCalendarRowHeaderTable {
		border-collapse: collapse;
		table-layout: fixed;
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	
		td.dummy{
			border-top: 1px solid @row-color;
		}
		
		td {
			background-color: @row-color;
			color: @label-color;
			.border-box;
		}
		
		tr:first-child td	{
			border-top: 1px solid @row-color;
		}
	}
	
	.dojoxCalendarDecoration {
		position:absolute;
		background-color: rgb(167, 233, 68);
		.opacity(20);
	}
 
	.dojoxCalendarEvent {
		position: absolute;	
		text-align: left;
		color: #FFF;
		cursor: default;
		overflow: hidden;
	
		.bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
			border: @event-border;
			.rounded-corners;
			background-color: @event-bg-color;
			.opacity(90);
		}
				
		.endTime {
			position: absolute;		
			font-weight: bold;	
			bottom:3px;
			left: 6px;
			white-space:nowrap;
		}

		.beforeIcon {
			text-align: center;
		}

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

		.handle {
			.glass-view;
		}

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

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

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

		dl {
			margin: 0;
		}

		dd {
			margin: 0;
			padding: 0 3px;
			text-align: left;
		}
	}

	.dojoxCalendarEvent.Hovered .bg {
		background-color: @event-hovered-bg-color;	
	}

	.dojoxCalendarEvent.Selected .bg {
		background-color: @event-selected-bg-color;
	}

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

	.dojoxCalendarEvent.Focused .bg {
		border: @event-border-focused;
	}
	
	.dojoxCalendarEvent .startTime {
		.event-header;	
		background-color: @event-header-bg-color;	
		.top-left-right-border(@event-border);
	}

	.dojoxCalendarEvent.Focused .startTime {
		.top-left-right-border(@event-border-focused);
	}

	.dojoxCalendarEvent.Hovered .startTime {
		background-color: @event-header-hovered-bg-color;
	}

	.dojoxCalendarEvent.Selected .startTime {
		background-color: @event-header-selected-bg-color;
	}

	.dojoxCalendarEvent.Edited .startTime {
		background-color: @event-header-bg-color;
		.top-left-right-border(@event-border-focused);
	}

	.dojoxCalendarVScrollBar {
		position: absolute;
		top: @sheet-top;
		bottom: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	.dojoxCalendarHScrollBar {
		position: absolute;		
		bottom: 0;
		left: @row-header-width;		
		overflow-x: scroll;
		overflow-y: hidden;
	}

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

		.dojoxCalendarGrid {	
			position: absolute;
			left: @row-header-width;
			right: 0;
			top: 0;
			bottom: 0;
			.border-box;
		}
		
		.dojoxCalendarContainer {	
			position: absolute;
			top: 0;
			left: @row-header-width;
			right: 0;
			bottom: 0;
			cursor: default;
		}
		
		.dojoxCalendarRowHeader {
			position: absolute;
			left: 0;				
			top: 0;
			width: @row-header-width;
			bottom: 0;
			
			border-right: none;
			border-left: none;
			.border-box;
		}
		
		.dojoxCalendarGridTable{
			
			td {
				text-align: right;
				vertical-align: top;	
				border-top: @inner-border;
				border-bottom: @inner-border;
				border-right: @inner-border;
				.border-box;
			}
			
			tr.last-child td	{
				border-bottom: @outer-border;
			}
			
			td.last-child	{
				border-right: @outer-border;
			}
			
		}
		
		.dojoxCalendarRowHeaderTable td {
			border-top: @inner-border;
			border-left: @outer-border;
			border-right: @outer-border;
			border-bottom: @outer-border;
			background-color: @row-color;
		}
		
		.dojoxCalendarEvent {
			.handle {
				.glass-view;
				position: absolute;
				width:5px;
				height:100%;
				cursor:e-resize;	
			}
			
			.moveHandle {
				left:0;
				top:0;
				width:100%;
				cursor:move;	
			}

			.resizeEndHandle {
				right:0px;
			}
			
			.afterIcon {
				width:auto;
			}
			
			.endTime {
				position: relative;				
				bottom:auto;
				left: auto;
			}
		}
		
		.dojoxCalendarEvent.dojoxCalendarHorizontal .labels {
			position: absolute;
			left: 3px;
			right: 1px;
			bottom: 2px;
			overflow: hidden;
		}
		
		.dojoxCalendarExpand {
			position: absolute;
			text-align: center;
			
			.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;			
			}	
		}
		
		.dojoxCalendarExpand.Up .bg {
			background-color: @expand-up-color;
			border: 1px solid @expand-up-color - #555;
		}
		
		.dojoxCalendarExpand.Down .bg {
			background-color: @expand-down-color;
			border: 1px solid @expand-down-color - #555;
		}
		
		.dojoxCalendarEvent div {
			white-space:nowrap;
		}
	}
	
	.dojoxCalendarTimeIndicator {
		position: absolute;
		left:0;
		height: 2px;
		width:100%;
		background-color: red;			
	}					
}

.claro .dojoxCalendarColumnView.subColumns {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-subcolumns;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + 3px;
		display: block;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-subcolumns;
	}	
		
}

.claro .dojoxCalendarColumnView.secondarySheet {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-secondary-sheet;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + @secondary-sheet-height + 3px;
		display: none;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-secondary-sheet;
	}
}

.claro .dojoxCalendarColumnView.subColumns.secondarySheet {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-subcolumns-secondary-sheet;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + @secondary-sheet-height + 3px;
		display: block;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-subcolumns-secondary-sheet;
	}
}