DIV#leftPanel { position: absolute; top: 5.5em; left: 0px; width: 17em; bottom: 0px; overflow: hidden; } DIV#schedulerTabs { position: absolute; top: 0.5em; left: .2em; right: .2em; height: 15em; } DIV#tasksListView { position: absolute; top: 18em; bottom: 0px; left: .2em; right: .7em; padding: 0px; } DIV#tasksListView H2 { font-size: 12pt; margin: 0px; margin-left: .25em; padding: 0px; } DIV#tasksListView LABEL { margin: .25em; } DIV#calendarsList { height: 100%; padding: 0px; margin: 0px; } UL#tasksList, UL#uixselector-calendarsList-display { cursor: default; margin: .25px; padding: 0px; overflow: auto; border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-top: 2px solid #222; border-left: 2px solid #222; background: #fff; -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow transparent; -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow transparent; list-style-type: none; list-style-image: none; } UL#tasksList { position: absolute; width: 100%; top: 3em; left: .25em; right: .25em; bottom: .25em; } UL#uixselector-calendarsList-display { height: 10.5em; margin: 0px; } UL#tasksList LI { white-space: nowrap; } UL#tasksList LI.overdue { color: #f00; } UL#tasksList LI.duetoday { color: #00f; } UL#tasksList LI.completed { text-decoration: line-through; color: #000; } UL#tasksList LI.duelater { color: #999; } UL#tasksList LI[class~="_selected"].overdue { color: #fff !important; background-color: #f00 !important; } UL#tasksList LI[class~="_selected"].duetoday { color: #fff !important; background-color: #00f !important; } UL#tasksList LI[class~="_selected"].duelater { color: #fff !important; background-color: #999 !important; } DIV#rightPanel { position: absolute; top: 5.5em; left: 17em; right: 0px; bottom: 0px; margin: 0px; padding: 0px; padding-left: 5px; overflow: hidden; } DIV#appointmentsListView { position: absolute; background: #fff; width: 100%; height: 15.7em; top: 2em; overflow: auto; } DIV#calendarView { position: absolute; background: #fff; top: 18em; bottom: 0px; width: 100%; overflow: hidden; border-top: 1px solid #aaa; border-left: 1px solid #aaa; } DIV#calendarView A { text-decoration: none; font: inherit; color: inherit; } #verticalDragHandle { cursor: e-resize; top: 7.5em; left: 17em; width: 5px; bottom: 0px; } #rightDragHandle { cursor: n-resize; top: 17.7em; left: 0px; right: 0px; height: 5px; } #filterPanel { height: 2em; padding-right: .5em; vertical-align: middle; width: 100%; } #dateSelector { margin: 0px auto; background: #fff; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; } #dateSelector > .header { background: #efefef; width: 100%; white-space: nowrap; vertical-align: middle; text-align: center; padding: .2em 0px; margin: 0px; border: 0px; } #dateSelector > .header A { width: 1em; padding: .4em .2em; } #dateSelector > .header #leftArrow { float: left; } #dateSelector > .header #rightArrow { float: right; } #dateSelector > .header SPAN { cursor: default; font-size: medium; vertical-align: middle; font-weight: bold; border: 1px solid transparent; margin: .5em .2em; } #dateSelector > .header SPAN:hover { border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #dateSelector .dayOfWeek { color: #00f; } #dateSelector TABLE#dateSelectorTable TD { width: 14%; } #dateSelector TABLE#dateSelectorTable TD TABLE TD { width: 100% } #dateSelector TABLE, #dateSelector TABLE TABLE { border-collapse: collapse; margin: 0px auto; width: 100%; } #dateSelector TABLE TABLE TD { cursor: pointer; margin: 0px; padding: 0px; width: 100%; border: 1px solid #fff; } #dateSelector TABLE TABLE TD:hover { color: #f00; border: 1px solid #deebf7; } #dateSelector .inactiveDay { color: #dedfde; } #dateSelector .dayOfToday { background: #deebf7; border: 1px solid #deebf7; } #dateSelector TD SPAN { width: 1.5em; height: 1.5em; text-align: center; display: block; } #dateSelector TD SPAN A { color: inherit; background: inherit; text-decoration: none; } #dateSelector TD:active { background: #ddd; border: 1px solid #deebf7; } TABLE#appointmentsList { width: 100%; } #dateSelector TD._selected, UL > LI._selected, TABLE#appointmentsList TR._selected TD { background: #4b6983 !important; color: #fff !important; } ._unfocused#dateSelector TD._selected, UL._unfocused > LI._selected, TABLE._unfocused#appointmentsList TR._selected TD { background: #dbdad5 !important;; color: #fff !important;; } TABLE.dayOverview, TABLE.weekOverview { margin: 0 auto; padding: 1em; border-collapse: collapse; } TABLE.dayOverview TD, TABLE.weekOverview TD { border: 1px solid #99f; } TABLE.dayOverview TD.header { text-align: center; color: #77a; width: 100%; font-weight: bold; background: #eef; } TABLE.weekOverview TD.header { text-align: center; color: #77a; width: 15%; font-weight: bold; background: #eef; } TABLE.dayOverview TD.nullheader, TABLE.weekOverview TD.nullheader { border: 0px solid #fff; } TABLE.dayOverview TD.hourOfDay, TABLE.weekOverview TD.hourOfDay { text-align: right; vertical-align: top; height: 4em; font-weight: bold; overflow: auto; width: 5em; color: #77a; background: #eef; } SPAN.daysHeader, SPAN.weeksHeader, SPAN.monthsHeader { display: block; white-space: nowrap; background: #dbdad5; overflow: hidden; width: 100%; margin: 0px; height: 2.5em; padding: .1em 1.5em; border-top: 1px solid #aaa; border-bottom: 1px solid #ccc; } SPAN.daysHeader SPAN, SPAN.weeksHeader SPAN, SPAN.monthsHeader SPAN { display: block; margin: .1em; float: left; width: 18%; padding: 0px; text-align: center; border: 1px solid transparent; vertical-align: top; } SPAN.daysHeader A, SPAN.weeksHeader A, SPAN.monthsHeader A { padding: 0px .5em; } A.leftNavigationArrow, A.rightNavigationArrow { border: 1px solid transparent; padding: .5em; text-align: center; vertical-align: bottom; } A.leftNavigationArrow:hover, A.rightNavigationArrow:hover, SPAN.daysHeader A:hover, SPAN.weeksHeader A:hover, SPAN.monthsHeader A:hover { border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } A.leftNavigationArrow:active, A.rightNavigationArrow:active, SPAN.daysHeader A:active, SPAN.weeksHeader A:active, SPAN.monthsHeader A:active { border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .week2, .month2 { font-size: small; } .day2, .week1, .month1 { font-size: medium; } .day1, .week0, .month0 { font-size: large; } .day0 { font-size: x-large; } .day0, .week0, .month0 { border-top: 1px solid #aaa !important; border-left: 1px solid #aaa !important; border-bottom: 1px solid #fff !important; border-right: 1px solid #fff !important; background: #ccc; color: #222; } A.leftNavigationArrow { position: absolute; display: block; top: .5em; left: .5em; } A.rightNavigationArrow { position: absolute; display: block; top: .5em; right: .5em; } DIV#calendarContent { position: absolute; top: 3em; padding: 0px; margin: 0px; bottom: 0px; left: 0px; right: 0px; overflow: auto; } .menu LI.currentMonth, .menu LI.currentYear { border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-bottom: 1px solid #fff; border-right: 1px solid #fff; background: #ccc; color: #222; } SPAN.appointmentView { display: block; border: 1px solid #000; } SPAN.colorBox { display: block; float: right; border: 1px solid #333; margin: .12em; width: 1em; height: .75em; }