.wf-planner.vflex {
	height: 100%;
	box-sizing: border-box;
}

.ui-planner {
/*	width: 1024px;*/
	height: 600px;
	-moz-user-select: -moz-none;	/* '-moz-none' instead of 'none' as it is overrideable in sub-elements (https://developer.mozilla.org/en/CSS/-moz-user-select) */
}

.ui-planner.vflex {
	height: 100%;
}

/* Scheduler base-styling. Do not override! */

.planner-needs {
	margin-right: 5px;
	border: 1px solid #C0C0C0;
}

.planner-needs-actions {
	border-bottom: 1px solid #C0C0C0;
	text-align: right;
	padding: 2px;
}

.planner-needs-needs {
	overflow-y: auto;		/* TODO: get this to work properly */
}

.planner-need {
	position: relative;
	border: 1px solid #2952A3;
	background-color: #668CD9;
	color: white;
	padding-left: 3px;
	overflow: hidden;
	height: 3em;
	margin: 2px;
	z-index: 10;
	cursor: pointer;
}

.planner-need-placeholder {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.planner-sidebar {
	width: 150px;
}

.planner-header {
	position: relative;
}

.planner-content {
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
}

.ui-planner table {
	table-layout: fixed;
	width: 100%;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}

.planner-header table {
	table-layout: fixed;
}

.ui-planner table td {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.planner-times-column {
	width: 60px;
	position: relative;
}

.planner-grid {
	position: relative;
}

.planner-timelines {
	position: absolute;
	z-index: 2;
	width: 100%;
}

.planner-resources {
	position: relative;
	z-index: 1;
	width: 100%;
}

.planner-resources-overlay {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 3;
}

.planner-resources table,
.planner-resources-overlay table,
.planner-resource-column,
.planner-resource-overlay-column,
.planner-resource,
.planner-resource-overlay {
	height: 100%;
	overflow-y: hidden;
}

.planner-resource-overlay {
	position: relative;
}


/* Scheduler cosmetic styling */

.planner-content {
	background-color: white;
	border-top: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
}

.planner-time,
.planner-timeline {
	position: relative;
	height: 60px;
}
/*
.planner-time-first,
.planner-timeline-first {
	height: 59px;
}
*/
.planner-time .planner-timeblock {
	border-top: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;
	border-left: 1px solid #C0C0C0;
	text-align: right;
	padding-right: 3px;
	height: 100%;
}

.planner-time-height {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 4px;
	cursor: s-resize;
}

.planner-time-last .planner-time-height {
	display: none;
}

.planner-time-height:hover {
	background-color: #C0C0D0;
}

.planner-time-sizing {
	background-color: #F0F0FF;
}

/*
.planner-time-first .planner-timeblock {
	border-top: 0px;
}
*/
.planner-timeline .planner-timelineblock {
	border-top: 1px solid #C0C0C0;
	height: 50%;
	border-bottom: 1px dotted #C0C0C0;
}
/*
.planner-timeline-first .planner-timelineblock {
	border-top: 0px;
}
*/
.planner-resource-header,
.planner-resource-header-date {
	margin-left: 1px;
	margin-right: 1px;
	border: 1px solid #A0A0A0;
	background-color: #F8F8FF;
	margin-bottom: 2px;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}

.planner-resource {
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
	height: 100%;
	border-left: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;

	background-color: #DDDDDD;
}

.planner-nowmarker {
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: red;
}

.planner-resource-available {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 210px;
	width: 100%;
	background-color: white;
	margin-top: -1px;
	border-top: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
}

.planner-resource-overlay {
	margin-left: 1px;
	margin-right: 1px;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}

.planner-resource-droptarget {
	border-color: red;
}

.planner-claim-container {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0;
	margin: 0;
	width: 100%;
	z-index: 1;
}

.planner-claim-container-content {
	position: relative;
	z-index: 1;
}

.planner-claim {
	position: relative;
	border: 1px solid #2952A3;
	background-color: #668CD9;
	color: white;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: -1px;
	height: 100%;
	overflow: hidden;
	z-index: 10;
	cursor: pointer;
}

.planner-claim-syncing {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.planner-claim-time {
	font-size: 75%;
	border-bottom: 1px solid #2952A3;
	white-space: nowrap;
	padding: 1px;
}

.planner-claim-content {
	padding-left: 3px;
	overflow: hidden;
}

.planner-margin-container {
/*	background-color: green;*/
}

.planner-margin {
	position: relative;
	z-index: 5;
	margin-left: 1px;
	margin-right: 1px;
	border: 1px dotted black;
	height: 100%;
}

.planner-margin-claim-invalid .planner-margin {
	border-color: red;
	z-index: 20;
/*	background-color: rgba(255,160,96,0.2);*/ /* done through opacity for IE7/8 */
	background-color: #FFC7A1; 
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.planner-margin {
/*	background-color: rgba(96,160,255,0.2);*/ /* done through opacity for IE7/8 */
	background-color: #4CFF00; 
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.planner-margin-top {
	border-bottom: 0px;
}

.planner-margin-bottom {
	border-top: 0px;
}

.planner-subheader {
	margin-left: 1px;
	margin-right: 1px;
	border: 1px solid #A0A0A0;
	background-color: #F8F8FF;
	margin-bottom: 2px;
	padding: 0px;
	overflow: hidden;
}

.planner-date-container {
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
	vertical-align: top;
	-moz-user-select: text;
}

.planner-button {
	display: inline-block;
	box-sizing: content-box;
	background-color: transparent;
	cursor: pointer;
	height: 20px;
	padding: 4px 2px;
	margin: 2px;
	vertical-align: top;
	border: 1px solid #ccc;
}

.planner-menu-button {
	width: 100px;
}

.ui-draggable-dragging .planner-claim {
	-moz-box-shadow: 5px 5px 1px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 1px rgba(0,0,0,0.2);
}






.ui-popupmenu {
	position: absolute;
	z-index: 100;
	background-color: white;
	border: 1px solid #404040;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-moz-box-shadow: 5px 5px 1px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 1px rgba(0,0,0,0.2);
}
.ui-popupmenu-item {
	white-space: nowrap;
	cursor: pointer;
}
.ui-popupmenu-icon {
	display: inline-block;
	width: 16px;
	padding: 2px;
	height: 1.4em;
	border-right: 1px solid #A0A0A0;
	background-color: #D0D0E0;
	vertical-align: top;
}
.ui-popupmenu-label {
	display: inline-block;
	padding: 0px 10px 0px 5px;
	height: 1.4em;
	line-height: 1.4em;
}

.ui-popupmenu-hover,
.ui-popupmenu-hover .ui-popupmenu-icon {
	background-color: #C0C0D0;
}

.planner-subheader .widgets-arrayofcontrols {
	display: inline-block;
}

.planner-subheader .wf-control {
	width: 150px;
	display: inline-block;
	margin: 2px;
}

.planner-subheader .wf-input-button {
	background-color: white;
	box-shadow: none;
	border-left: 0px;
}
.planner-subheader .wf-input-button:hover {
	border-color: #ccc;
}

.planner-tooltip {
	position: absolute;
	z-index: 50;
	background-color: white;
	display: inline-block;
	padding: 4px;
	border: 1px solid #A0A0A0;
	-moz-box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
	box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
}


.wf-planner-disabled .planner-time .planner-timeblock,
.wf-planner-disabled .planner-resource-available,
.wf-planner-disabled .planner-needs-needs {
	background-color: #F8F8F8;
}