@import "ColumnViewCommon.less";

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

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

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

.claro .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .dojoxCalendarGrid {
	position: absolute;
	left: @row-header-width;
	right: 0;
}

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

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

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

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

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

.claro .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .dojoxCalendarGridTable .dojoxCalendarToday {
	background-color: @today-color;
}

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

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

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

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

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

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

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

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

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

.claro .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .dojoxCalendarYearColumnHeader table {
	position:relative;
	width:100%;
	height:100%;	
}

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

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

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

.claro .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .dojoxCalendarColumnHeaderTable .dojoxCalendarToday {
	font-weight: bold;
	color: @today-label-color;
}

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

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

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

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

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

.claro .dojoxCalendarSimpleColumnView .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 .dojoxCalendarSimpleColumnView .dojoxCalendarRowHeaderTable td {	
	vertical-align: top;			
	text-align: right;	
	border-top: @outer-border; 	
	background-color: @row-color;
	color: @label-color;
	.border-box;
}

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

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

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

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

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

.claro .dojoxCalendarSimpleColumnView .dojoxCalendarEvent.Edited .bg {
	border: dashed 1px #FFFFFF;
	.opacity(70);
}

.claro .dojoxCalendarSimpleColumnView .dojoxCalendarEvent.Focused .bg {
	border: dashed 1px #FFFFFF;
}

.claro .dojoxCalendarSimpleColumnView .dojoxCalendarEvent .summary {
}

.claro .dojoxCalendarSimpleColumnView .dojoxCalendarEvent .startTime {
	font-weight: bold;
}

.claro .dojoxCalendarSimpleColumnView .dojoxCalendarEvent .endTime {
	position: absolute;		
	font-weight: bold;	
	bottom:3px;
	left: 6px;
}

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

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

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

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

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

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

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

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

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