/*
    Document   : Availability
    Created on : Apr 8, 2009, 5:25:51 PM
    Author     : paul
    Description:
        Purpose of the stylesheet follows.

		Old class names: dijitDialog dialogbox calendarAvailability
		New class names: dijitDialog CalendarAvailability
*/

/**
* Calendar Availability
* TODO: move css styles away from using as the first class to use .CalendarAvailability
* TODO: move general styles to be specific to elements requiring those styles.
**/
.CalendarAvailability {
	width: 780px;
        /* We need the height for now because the components on this dialog do not
        calculate their height properly on their own */
	/* height: 540px; */
	margin: 0;
	padding: 0;
}


.CalendarAvailability .CalendarAvailability-availabilityToolbar {
	margin: 0;
	padding: 12px 8px 8px 8px;
	height: auto;
	border-top: 1px solid;
}


.CalendarAvailability .CalendarAvailability-availabilityToolbar .buttonSection {
	float: right;
}

/* colors of legend and bars */

.CalendarAvailability .CalendarAvailability-legend {
	margin: 0 .5em 0 0;
	padding: 0;
}

.CalendarAvailability .timeGraphLayer .confirmed,
.CalendarAvailability .CalendarAvailability-legend .confirmed {
	color:#FFF;
}
.CalendarAvailability .timeGraphLayer .tentative,
.CalendarAvailability .CalendarAvailability-legend .tentative {
	color:#FFF;
}
.CalendarAvailability .timeGraphLayer .busy,
.CalendarAvailability .CalendarAvailability-legend .busy {
	color:#FFF;
}
.CalendarAvailability .timeGraphLayer .unknown,
.CalendarAvailability .CalendarAvailability-legend .unknown {
}

.CalendarAvailability .CalendarAvailability-legend .legendIcon {
	display: inline-block;
	width:12px;
	height:12px;
	border:1px solid #999;
        margin: 0 4px;
}

/*Same as the ABS Overlay */
.CalendarAvailability .CalendarAvailability-form {
	height: 400px;
	width: 100%;
	padding: 0;
	margin: 0;
}

/*
.CalendarAvailability .dijitDownArrowButton,
.CalendarAvailability .dijitUpArrowButton {
    font-size: 67%;
}
*/

.CalendarAvailability .CalendarAvailability-availabilityGridContainer {
	margin: 0;
	border-bottom: 1px solid;
	background: #FFF;
	color: #333;
}

.CalendarAvailability .availabilityHeader{
	height: 37px;
	overflow:hidden;
	border-bottom:1px solid;
	border-top: 1px solid;
}
.CalendarAvailability .availabilityHeader .dateCell{
	font-weight:bold;
	position: relative;
	border-right:1px solid;
	width: 220px;

}
.CalendarAvailability .availabilityHeader .timeHeaderContainer{
	overflow: hidden;
	width: 580px;
	cursor: pointer;
}
.CalendarAvailability .availabilityHeader .timeHeaders{
	position: relative;
	height:37px;
}
.CalendarAvailability .availabilityHeader .timeHeader {
	position: absolute;
	height:37px;
	top:0px;
	border-right:1px solid;
}
.CalendarAvailability .availabilityHeader .timeHeaderTime{
	text-align:center;
	padding:2px 0;
	border-bottom: 1px solid;
}

.CalendarAvailability .availabilityFooter{
	overflow:hidden;
}

.CalendarAvailability .availabilityFooter .blankCell{
	overflow:hidden;
	border-right:1px solid;
	width: 220px;
}
.CalendarAvailability .availabilityFooter .bottomScrollContainer{
	position: relative;
	overflow:hidden;
	overflow-x:auto;
}
	
.CalendarAvailability .availabilityClient{
	overflow:hidden;
}
.CalendarAvailability .availabilityClient .inviteeListContainer{
	width:220px;
	overflow: hidden;
	border-right:1px solid;
}
.CalendarAvailability .availabilityClient .inviteeListContainer .inviteeList{
	position: relative;
	width: 220px;
}
.CalendarAvailability .availabilityClient .timeBodyContainer{
	width:580px;
	overflow: hidden;
	overflow-y:auto;
}

.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody{
	position: relative;
}

.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody .timeInviteesLayer{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody .timeBaseLayer{
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}
.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody .timeBaseLayer div {
	position: absolute;
	height: 100%;
}

.CalendarAvailability .availabilityClient .half-hour,
.CalendarAvailability .availabilityClient .hour {
	border-right: 1px solid;
}

.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody .timeGraphLayer{
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}

.CalendarAvailability .availabilityClient .timeBodyContainer .timeBody .timeGraphLayer .availability-bar{
	/* CSS3 anticipated border radii */
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
}

.CalendarAvailability .availabilityHeader .timeWindowHeader{
	position: absolute;
	bottom:0px;
	z-index:1000;
	font-size: 11px;
	padding: 2px 0;
	padding-left:4px;
	text-align:left;
	color: #FFF;
	cursor: default;

	/* CSS3 anticipated border radii */
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
}
.CalendarAvailability .availabilityClient .timeWindowLayer{
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
	background-color: transparent;
	border:4px solid;
	
	/* CSS3 anticipated border radii */
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
}

.CalendarAvailability .availabilityClient .loadIndicator {
	display: none;
	position: absolute;
	top:0;
	left:0;
	z-index:9999;
	border: 1px solid;
	padding: 20px;
}

.CalendarAvailability .availabilityClient .loadIndicator div {
	font-size: 14px;
	padding-top: 3px;
	padding-left: 24px;
}

/* Auto selection controls */
.CalendarAvailability .CalendarAvailability-availabilityControls {
	padding: 10px;
	border-bottom: 1px solid;
}

.CalendarAvailability .CalendarAvailability-availabilityButtons {
	width: 385px;
}

.CalendarAvailability .CalendarAvailability-availabilityTimes {
	width: 375px;
}

.CalendarAvailability .CalendarAvailability-availabilityTimes .availabilityTime {
	margin: 0.5em 0.5em 0 0;
	text-align: right;
}

/* Day and time spinners */
.CalendarAvailability .CalendarAvailability-availabilityTimes label {
	display: inline-block;
	width: 6em;
}

.CalendarAvailability .CalendarAvailability-availabilityTimes .dijitSpinner {
	width: 8em;
}

.dj_gecko .CalendarAvailability .CalendarAvailability-availabilityTimes .dijitSpinner {
	width: 9em;
}

/* Dialog overrides default dialog padding so we have to readd it
for the buttons */
.CalendarAvailability .DialogButtons {
        margin: 10px 1em 1em 1em;
}