@import "ColumnViewCommon.less";

@row-header-width: 70px;
@secondary-sheet-height: 0px;
@sheet-top: @column-header-height;

.claro .dojoxCalendarSimpleColumnView {	
	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;
	}
	
	.dojoxCalendarGridTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
		
		td {
			border-top: dotted 1px #B5BCC7;	
			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;
		}
	
	}
	
	.claro .dojoxCalendarColumnView {
		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;
		}
	
	}
	
	.dojoxCalendarContainer {
		position: absolute;
		top: 0;
		left: @row-header-width;
		right: 0;
		cursor: default;
	}
	
	.dojoxCalendarContainerTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
	
		td {
			height: 100%;
			padding: 0;
			vertical-align: top;
		}
	
	}
	
	.dojoxCalendarContainerColumn {
		position:	relative;
		margin-left: 2px;
		margin-right: 9px;
	}
	
	.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;	
	}
	
	.dojoxCalendarYearColumnHeader table {
		position:relative;
		width:100%;
		height:100%;	

		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;
	}
	
	.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;
		}
	
	}
	
	.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 {	
			vertical-align: top;			
			text-align: right;	
			border-top: @outer-border; 	
			background-color: @row-color;
			color: @label-color;
			.border-box;
		}
	
		 tr:first-child td	{
			border-top: 1px solid @row-color;
		}
		
	}
		
	 
	.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-header-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();		
	}

	.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;
	}
}

