From 81bea17aefb26859f825b9293c7c99192874806e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 8 Nov 2011 20:40:44 +0400 Subject: upgrade Dojo to 1.6.1 --- lib/dijit/themes/a11y/colors3x4-rtl.png | Bin 282 -> 0 bytes lib/dijit/themes/a11y/colors7x10-rtl.png | Bin 808 -> 0 bytes lib/dijit/themes/claro/Calendar.css | 370 +- lib/dijit/themes/claro/Calendar.less | 273 ++ lib/dijit/themes/claro/Calendar_rtl.css | 14 +- lib/dijit/themes/claro/Calendar_rtl.less | 19 + lib/dijit/themes/claro/ColorPalette.css | 45 +- lib/dijit/themes/claro/ColorPalette.less | 44 + lib/dijit/themes/claro/Common.css | 95 +- lib/dijit/themes/claro/Common.less | 76 + lib/dijit/themes/claro/Dialog.css | 265 +- lib/dijit/themes/claro/Dialog.less | 203 + lib/dijit/themes/claro/Dialog_rtl.css | 10 +- lib/dijit/themes/claro/Dialog_rtl.less | 13 + lib/dijit/themes/claro/Editor.css | 62 +- lib/dijit/themes/claro/Editor.less | 59 + lib/dijit/themes/claro/Editor_rtl.css | 6 +- lib/dijit/themes/claro/Editor_rtl.less | 9 + lib/dijit/themes/claro/InlineEditBox.css | 19 +- lib/dijit/themes/claro/InlineEditBox.less | 25 + lib/dijit/themes/claro/Menu.css | 235 +- lib/dijit/themes/claro/Menu.less | 188 + lib/dijit/themes/claro/Menu_rtl.css | 8 +- lib/dijit/themes/claro/Menu_rtl.less | 11 + lib/dijit/themes/claro/ProgressBar.css | 61 +- lib/dijit/themes/claro/ProgressBar.less | 56 + lib/dijit/themes/claro/README | 64 + lib/dijit/themes/claro/TimePicker.css | 164 +- lib/dijit/themes/claro/TimePicker.less | 124 + lib/dijit/themes/claro/TimePicker_rtl.css | 8 +- lib/dijit/themes/claro/TimePicker_rtl.less | 12 + lib/dijit/themes/claro/TitlePane.css | 79 +- lib/dijit/themes/claro/TitlePane.less | 74 + lib/dijit/themes/claro/TitlePane_rtl.css | 4 +- lib/dijit/themes/claro/TitlePane_rtl.less | 7 + lib/dijit/themes/claro/Toolbar.css | 233 +- lib/dijit/themes/claro/Toolbar.less | 157 + lib/dijit/themes/claro/Toolbar_rtl.css | 30 + lib/dijit/themes/claro/Toolbar_rtl.less | 32 + lib/dijit/themes/claro/Tree.css | 156 +- lib/dijit/themes/claro/Tree.less | 133 + lib/dijit/themes/claro/claro.css | 4715 +------------------- lib/dijit/themes/claro/claro_rtl.css | 396 +- lib/dijit/themes/claro/compile.js | 62 + lib/dijit/themes/claro/document.css | 118 +- lib/dijit/themes/claro/document.less | 45 + lib/dijit/themes/claro/form/Button.css | 185 +- lib/dijit/themes/claro/form/Button.less | 154 + lib/dijit/themes/claro/form/Button_rtl.css | 23 +- lib/dijit/themes/claro/form/Button_rtl.less | 16 + lib/dijit/themes/claro/form/Checkbox.css | 91 +- lib/dijit/themes/claro/form/Checkbox.less | 79 + lib/dijit/themes/claro/form/Common.css | 227 +- lib/dijit/themes/claro/form/Common.less | 194 + lib/dijit/themes/claro/form/Common_rtl.css | 11 +- lib/dijit/themes/claro/form/Common_rtl.less | 13 + lib/dijit/themes/claro/form/NumberSpinner.css | 160 +- lib/dijit/themes/claro/form/NumberSpinner.less | 150 + lib/dijit/themes/claro/form/RadioButton.css | 96 +- lib/dijit/themes/claro/form/RadioButton.less | 84 + lib/dijit/themes/claro/form/Select.css | 124 +- lib/dijit/themes/claro/form/Select.less | 124 + lib/dijit/themes/claro/form/Select_rtl.css | 4 +- lib/dijit/themes/claro/form/Select_rtl.less | 6 + lib/dijit/themes/claro/form/Slider.css | 422 +- lib/dijit/themes/claro/form/Slider.less | 362 ++ lib/dijit/themes/claro/form/Slider_rtl.css | 20 +- lib/dijit/themes/claro/form/Slider_rtl.less | 33 + lib/dijit/themes/claro/images/loading.gif | Bin 751 -> 0 bytes lib/dijit/themes/claro/images/tooltip.png | Bin 1941 -> 1818 bytes lib/dijit/themes/claro/images/tooltipGradient.png | Bin 0 -> 1030 bytes .../themes/claro/layout/AccordionContainer.css | 145 +- .../themes/claro/layout/AccordionContainer.less | 116 + lib/dijit/themes/claro/layout/BorderContainer.css | 130 +- lib/dijit/themes/claro/layout/BorderContainer.less | 128 + lib/dijit/themes/claro/layout/ContentPane.css | 39 +- lib/dijit/themes/claro/layout/ContentPane.less | 43 + lib/dijit/themes/claro/layout/TabContainer.css | 536 ++- lib/dijit/themes/claro/layout/TabContainer.less | 408 ++ lib/dijit/themes/claro/layout/TabContainer_rtl.css | 72 +- .../themes/claro/layout/TabContainer_rtl.less | 81 + lib/dijit/themes/claro/layout/images/tabBottom.png | Bin 753 -> 718 bytes lib/dijit/themes/claro/layout/images/tabTop.png | Bin 748 -> 721 bytes lib/dijit/themes/claro/variables.less | 189 + lib/dijit/themes/dijit.css | 880 ++-- lib/dijit/themes/dijit_rtl.css | 62 +- lib/dijit/themes/nihilo/Calendar.css | 66 +- lib/dijit/themes/nihilo/Calendar_rtl.css | 4 +- lib/dijit/themes/nihilo/ColorPalette.css | 4 +- lib/dijit/themes/nihilo/Common.css | 6 +- lib/dijit/themes/nihilo/Dialog.css | 84 +- lib/dijit/themes/nihilo/Dialog_rtl.css | 1 + lib/dijit/themes/nihilo/Editor.css | 9 +- lib/dijit/themes/nihilo/Editor_rtl.css | 8 +- lib/dijit/themes/nihilo/Menu.css | 27 +- lib/dijit/themes/nihilo/Menu_rtl.css | 8 +- lib/dijit/themes/nihilo/ProgressBar.css | 21 +- lib/dijit/themes/nihilo/TimePicker.css | 13 +- lib/dijit/themes/nihilo/TimePicker_rtl.css | 2 +- lib/dijit/themes/nihilo/TitlePane.css | 13 +- lib/dijit/themes/nihilo/TitlePane_rtl.css | 6 +- lib/dijit/themes/nihilo/Toolbar.css | 23 +- lib/dijit/themes/nihilo/Tree.css | 37 +- lib/dijit/themes/nihilo/Tree_rtl.css | 12 +- lib/dijit/themes/nihilo/form/Button.css | 43 +- lib/dijit/themes/nihilo/form/Button_rtl.css | 3 +- lib/dijit/themes/nihilo/form/Checkbox.css | 47 +- lib/dijit/themes/nihilo/form/Common.css | 33 +- lib/dijit/themes/nihilo/form/RadioButton.css | 46 +- lib/dijit/themes/nihilo/form/Select.css | 18 +- lib/dijit/themes/nihilo/form/Slider.css | 35 +- lib/dijit/themes/nihilo/form/Slider_rtl.css | 11 +- lib/dijit/themes/nihilo/form/TimeTextBox.css | 2 +- .../themes/nihilo/layout/AccordionContainer.css | 11 + .../nihilo/layout/AccordionContainer_rtl.css | 5 +- lib/dijit/themes/nihilo/layout/BorderContainer.css | 35 +- lib/dijit/themes/nihilo/layout/ContentPane.css | 10 +- lib/dijit/themes/nihilo/layout/SplitContainer.css | 17 +- lib/dijit/themes/nihilo/layout/TabContainer.css | 247 +- .../themes/nihilo/layout/TabContainer_rtl.css | 19 +- lib/dijit/themes/nihilo/nihilo.css | 3444 +------------- lib/dijit/themes/nihilo/nihilo_rtl.css | 251 +- lib/dijit/themes/soria/Calendar.css | 66 +- lib/dijit/themes/soria/Calendar_rtl.css | 4 +- lib/dijit/themes/soria/ColorPalette.css | 4 +- lib/dijit/themes/soria/Common.css | 6 +- lib/dijit/themes/soria/Dialog.css | 84 +- lib/dijit/themes/soria/Dialog_rtl.css | 2 +- lib/dijit/themes/soria/Editor.css | 10 +- lib/dijit/themes/soria/Editor_rtl.css | 6 +- lib/dijit/themes/soria/Menu.css | 27 +- lib/dijit/themes/soria/Menu_rtl.css | 4 +- lib/dijit/themes/soria/ProgressBar.css | 21 +- lib/dijit/themes/soria/TimePicker.css | 11 +- lib/dijit/themes/soria/TimePicker_rtl.css | 2 +- lib/dijit/themes/soria/TitlePane.css | 14 +- lib/dijit/themes/soria/TitlePane_rtl.css | 6 +- lib/dijit/themes/soria/Toolbar.css | 27 +- lib/dijit/themes/soria/Tree.css | 37 +- lib/dijit/themes/soria/Tree_rtl.css | 12 +- lib/dijit/themes/soria/form/Button.css | 35 +- lib/dijit/themes/soria/form/Button_rtl.css | 2 +- lib/dijit/themes/soria/form/Checkbox.css | 47 +- lib/dijit/themes/soria/form/Common.css | 33 +- lib/dijit/themes/soria/form/RadioButton.css | 46 +- lib/dijit/themes/soria/form/Select.css | 18 +- lib/dijit/themes/soria/form/Slider.css | 36 +- lib/dijit/themes/soria/form/Slider_rtl.css | 11 +- lib/dijit/themes/soria/form/TimeTextBox.css | 2 +- .../themes/soria/layout/AccordionContainer.css | 13 +- .../themes/soria/layout/AccordionContainer_rtl.css | 5 +- lib/dijit/themes/soria/layout/BorderContainer.css | 36 +- lib/dijit/themes/soria/layout/ContentPane.css | 10 +- lib/dijit/themes/soria/layout/SplitContainer.css | 17 +- lib/dijit/themes/soria/layout/TabContainer.css | 178 +- lib/dijit/themes/soria/layout/TabContainer_rtl.css | 19 +- lib/dijit/themes/soria/soria.css | 3384 +------------- lib/dijit/themes/soria/soria_rtl.css | 252 +- lib/dijit/themes/tundra/Calendar.css | 69 +- lib/dijit/themes/tundra/Calendar_rtl.css | 4 +- lib/dijit/themes/tundra/ColorPalette.css | 4 +- lib/dijit/themes/tundra/Common.css | 8 +- lib/dijit/themes/tundra/Dialog.css | 80 +- lib/dijit/themes/tundra/Dialog_rtl.css | 2 +- lib/dijit/themes/tundra/Editor.css | 6 +- lib/dijit/themes/tundra/Editor_rtl.css | 6 +- lib/dijit/themes/tundra/Menu.css | 25 +- lib/dijit/themes/tundra/Menu_rtl.css | 4 +- lib/dijit/themes/tundra/ProgressBar.css | 15 +- lib/dijit/themes/tundra/TimePicker.css | 12 +- lib/dijit/themes/tundra/TimePicker_rtl.css | 2 +- lib/dijit/themes/tundra/TitlePane.css | 12 +- lib/dijit/themes/tundra/TitlePane_rtl.css | 4 +- lib/dijit/themes/tundra/Toolbar.css | 31 +- lib/dijit/themes/tundra/Tree.css | 34 +- lib/dijit/themes/tundra/Tree_rtl.css | 8 +- lib/dijit/themes/tundra/form/Button.css | 40 +- lib/dijit/themes/tundra/form/Checkbox.css | 31 +- lib/dijit/themes/tundra/form/Common.css | 40 +- lib/dijit/themes/tundra/form/RadioButton.css | 28 +- lib/dijit/themes/tundra/form/Select.css | 18 +- lib/dijit/themes/tundra/form/Slider.css | 40 +- lib/dijit/themes/tundra/form/Slider_rtl.css | 13 +- .../themes/tundra/layout/AccordionContainer.css | 8 +- lib/dijit/themes/tundra/layout/BorderContainer.css | 22 +- lib/dijit/themes/tundra/layout/ContentPane.css | 10 +- lib/dijit/themes/tundra/layout/SplitContainer.css | 3 + lib/dijit/themes/tundra/layout/TabContainer.css | 128 +- .../themes/tundra/layout/TabContainer_rtl.css | 21 +- lib/dijit/themes/tundra/tundra.css | 3476 +-------------- lib/dijit/themes/tundra/tundra_rtl.css | 225 +- 191 files changed, 9163 insertions(+), 18560 deletions(-) delete mode 100644 lib/dijit/themes/a11y/colors3x4-rtl.png delete mode 100644 lib/dijit/themes/a11y/colors7x10-rtl.png create mode 100644 lib/dijit/themes/claro/Calendar.less create mode 100644 lib/dijit/themes/claro/Calendar_rtl.less create mode 100644 lib/dijit/themes/claro/ColorPalette.less create mode 100644 lib/dijit/themes/claro/Common.less create mode 100644 lib/dijit/themes/claro/Dialog.less create mode 100644 lib/dijit/themes/claro/Dialog_rtl.less create mode 100644 lib/dijit/themes/claro/Editor.less create mode 100644 lib/dijit/themes/claro/Editor_rtl.less create mode 100644 lib/dijit/themes/claro/InlineEditBox.less create mode 100644 lib/dijit/themes/claro/Menu.less create mode 100644 lib/dijit/themes/claro/Menu_rtl.less create mode 100644 lib/dijit/themes/claro/ProgressBar.less create mode 100644 lib/dijit/themes/claro/README create mode 100644 lib/dijit/themes/claro/TimePicker.less create mode 100644 lib/dijit/themes/claro/TimePicker_rtl.less create mode 100644 lib/dijit/themes/claro/TitlePane.less create mode 100644 lib/dijit/themes/claro/TitlePane_rtl.less create mode 100644 lib/dijit/themes/claro/Toolbar.less create mode 100644 lib/dijit/themes/claro/Toolbar_rtl.css create mode 100644 lib/dijit/themes/claro/Toolbar_rtl.less create mode 100644 lib/dijit/themes/claro/Tree.less create mode 100644 lib/dijit/themes/claro/compile.js create mode 100644 lib/dijit/themes/claro/document.less create mode 100644 lib/dijit/themes/claro/form/Button.less create mode 100644 lib/dijit/themes/claro/form/Button_rtl.less create mode 100644 lib/dijit/themes/claro/form/Checkbox.less create mode 100644 lib/dijit/themes/claro/form/Common.less create mode 100644 lib/dijit/themes/claro/form/Common_rtl.less create mode 100644 lib/dijit/themes/claro/form/NumberSpinner.less create mode 100644 lib/dijit/themes/claro/form/RadioButton.less create mode 100644 lib/dijit/themes/claro/form/Select.less create mode 100644 lib/dijit/themes/claro/form/Select_rtl.less create mode 100644 lib/dijit/themes/claro/form/Slider.less create mode 100644 lib/dijit/themes/claro/form/Slider_rtl.less delete mode 100644 lib/dijit/themes/claro/images/loading.gif create mode 100644 lib/dijit/themes/claro/images/tooltipGradient.png create mode 100644 lib/dijit/themes/claro/layout/AccordionContainer.less create mode 100644 lib/dijit/themes/claro/layout/BorderContainer.less create mode 100644 lib/dijit/themes/claro/layout/ContentPane.less create mode 100644 lib/dijit/themes/claro/layout/TabContainer.less create mode 100644 lib/dijit/themes/claro/layout/TabContainer_rtl.less create mode 100644 lib/dijit/themes/claro/variables.less (limited to 'lib/dijit/themes') diff --git a/lib/dijit/themes/a11y/colors3x4-rtl.png b/lib/dijit/themes/a11y/colors3x4-rtl.png deleted file mode 100644 index 51a7d11a2..000000000 Binary files a/lib/dijit/themes/a11y/colors3x4-rtl.png and /dev/null differ diff --git a/lib/dijit/themes/a11y/colors7x10-rtl.png b/lib/dijit/themes/a11y/colors7x10-rtl.png deleted file mode 100644 index c191e9056..000000000 Binary files a/lib/dijit/themes/a11y/colors7x10-rtl.png and /dev/null differ diff --git a/lib/dijit/themes/claro/Calendar.css b/lib/dijit/themes/claro/Calendar.css index 3a3256ef0..ff8e64fa7 100644 --- a/lib/dijit/themes/claro/Calendar.css +++ b/lib/dijit/themes/claro/Calendar.css @@ -1,206 +1,282 @@ - +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ .claro .dijitCalendar { - border:solid 1px #b5bcc7; - background-color:#d4ebff; - background-image:url("images/calendarContainerImages.png"); - background-position:0px -448px; - background-repeat:repeat-x; - text-align:center; - padding:6px 5px 3px 5px; - -moz-border-radius:4px; - -webkit-border-radius:4px; + border: solid 1px #b5bcc7; + background-color: #cfe5fa; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -448px; + background-repeat: repeat-x; + text-align: center; + padding: 6px 5px 3px 5px; + -moz-border-radius: 4px; + border-radius: 4px; } .dj_ie6 .claro .dijitCalendar { - background-image:none; + background-image: none; } .claro .dijitCalendar img { - border:none; + border: none; } -.claro .dijitCalendarHover, -.claro .dijitCalendarActive { - background-color: #b7dcff; - border:solid 1px #769dc0; +.claro .dijitCalendarHover, .claro .dijitCalendarActive { + /* treat dijitCalenderActive like hover since there's + * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) + */ + + background-color: #abd6ff; + border: solid 1px #769dc0; } .claro .dijitCalendarMonthContainer th { - text-align:center; - padding-bottom:4px; - vertical-align:middle; -} -.claro .dijitCalendarMonthLabelSpacer { - display:none; + text-align: center; + padding-bottom: 4px; + vertical-align: middle; } .claro .dijitCalendarMonthLabel { - color:#000000; - font-size: 1.091em; - display: block; + color: #000000; + font-size: 1.091em; + padding: 0 4px; } +/* next/previous month arrows */ .claro .dijitCalendarIncrementControl { - width:18px; - height:16px; - background-image: url("images/calendarArrows.png"); - background-repeat: no-repeat; + width: 18px; + height: 16px; + background-image: url("images/calendarArrows.png"); + background-repeat: no-repeat; } .dj_ie6 .claro .dijitCalendarIncrementControl { - background-image: url("images/calendarArrows8bit.png"); + background-image: url("images/calendarArrows8bit.png"); } .claro .dijitCalendarIncrease { - background-position:-18px 0px; + background-position: -18px 0; } .claro .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position:-36px 0px; + background-position: -36px 0; } .claro .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position:-55px 0px; + background-position: -55px 0; } .claro .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position:-72px 0px; + background-position: -72px 0; } .claro .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position:-91px 0px; + background-position: -91px 0; } .claro .dijitA11ySideArrow { - - display: none; + /* text +/- labels instead of arrow icons, for high contrast mode */ + + display: none; } .claro .dijitDayLabels th { - padding:0px 4px 0px 4px; - border-bottom:solid 1px #99b5cd; - font-weight:bold; - text-align:center; + padding: 0 4px 0 4px; + font-weight: bold; + text-align: center; } .claro .dijitCalendarDayLabelTemplate { - padding-bottom:0em; - text-align:center; - border-bottom:1px solid #99B5CD; - font-size:0.909em; - padding:0 3px 2px; + padding-bottom: 0; + text-align: center; + border-bottom: 1px solid #b5bcc7; + font-size: 0.909em; + padding: 0 3px 2px; } .claro .dijitCalendarDateTemplate { - text-align:center; - background-color:#fff; - background-image:url("images/calendarContainerImages.png"); - background-position:0px 0px; - background-repeat:repeat-x; - border-bottom: 1px solid #dadde1; - padding-top:0px; - font-size:0.909em; - font-family: Arial; - font-weight:bold; - letter-spacing:.05em; - text-align:center; + text-align: center; + background-color: #ffffff; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-bottom: 1px solid #d3d3d3; + padding-top: 0; + font-size: 0.909em; + font-family: Arial; + font-weight: bold; + letter-spacing: .05em; + text-align: center; } .dj_ie6 .claro .dijitCalendarDateTemplate { - background-image: none; + background-image: none; } -.claro .dijitCalendarPreviousMonth, -.claro .dijitCalendarNextMonth { - background-color:#ebf3f9; - background-image:none; - border-bottom:solid 1px #d2dae8; - color:#547da1; +.claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { + background-color: #e9f4fe; + background-image: none; + border-bottom: solid 1px #d3d3d3; + /* todo: redundant with above .dijitCalendarDateTemplate rule */ } .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { - text-decoration:none; - display:block; - padding:3px 5px 3px 4px; - border:solid 1px #fff; - color:#1e1e1e; - background-color:rgba(171,212,251,0); - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; -} -.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, -.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{ - color:#547da1; - border-color:#ebf3f9; + text-decoration: none; + display: block; + padding: 3px 5px 3px 4px; + border: solid 1px #ffffff; + /* intentionally matches background-color, no visible border until hover/selection */ + + background-color: rgba(171, 212, 251, 0); + /* transparent causes black-flash animation problem on webkit */ + + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; +} +.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { + color: #769dc0; + border-color: #e9f4fe; + /* intentionally matches background-color, no visible border until hover/selection */ + } .claro .dijitCalendarYearContainer { - vertical-align:middle; + vertical-align: middle; } .claro .dijitCalendarYearControl { - padding: 1px 2px 2px 2px; + padding: 1px 2px 2px 2px; } .claro .dijitCalendarYearLabel { - padding:2px 0px 0px 0px; - margin:0; + padding: 2px 0 0 0; + margin: 0; } .claro .dijitCalendarYearLabel span { - - vertical-align:middle; + /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ + + vertical-align: middle; } .claro .dijitCalendarSelectedYear { - padding:0px 3px; + padding: 0 3px; } -.claro .dijitCalendarNextYear, -.claro .dijitCalendarPreviousYear { - padding: 1px 6px 1px 6px; - font-size:0.909em; +.claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { + padding: 1px 6px 1px 6px; + font-size: 0.909em; } .claro .dijitCalendarSelectedYear { - font-size:1.091em; - color:#000; -} -.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{ - background-color:#abd4fb; - border:solid 1px #729dc2; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitCalendarNextYearHover, -.claro .dijitCalendarPreviousYearHover { - color:#000; - border:solid 1px #fefefe; - padding: 0px 5px 0px 5px; - background-color:#eaf4fe; -} -.claro .dijitCalendarNextYearActive, -.claro .dijitCalendarPreviousYearActive { - border: solid 1px #87b3d9; - padding: 0px 5px 0px 5px; - background-color:#90bde6; + font-size: 1.091em; + color: #000000; +} +/* End Normal Calendar Style */ +/* Hovered Calendar Style */ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel { + background-color: #abd6ff; + border: solid 1px #769dc0; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.claro .dijitCalendarNextYearHover, .claro .dijitCalendarPreviousYearHover { + color: #000000; + border: solid 1px #ffffff; + padding: 0 5px 0 5px; + /* reduced by 1 to make room for border */ + + background-color: #e9f4fe; +} +/* End Hovered Calendar Style */ +/* Active Calendar Style */ +.claro .dijitCalendarNextYearActive, .claro .dijitCalendarPreviousYearActive { + border: solid 1px #769dc0; + padding: 0 5px 0 5px; + /* reduced by 1 to make room for border */ + + background-color: #cfe5fa; } .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:url("images/calendarContainerImages.png"); - background-position:0px -300px; - background-color:#75b5f0; - border:solid 1px #fff; - -webkit-transition-duration:.1s; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -300px; + background-color: #7dbefa; + border: solid 1px #ffffff; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:none; + background-image: none; } +/* End Active Calendar Style */ +/* Selected Calendar Style */ .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { - color:#000; - background-color:#e7f4ff; - border-color:#accfed; + color: #000000; + background-color: #abd6ff; + border-color: #769dc0; } +/* End Selected Calendar Style */ +/* Disabled Calendar Style*/ .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { - text-decoration:line-through; - - - background-color: transparent; - border-width: 0px; - padding: 4px 6px 4px 5px; - color: #547DA1; -} -.claro .dijitCalendarMonthContainer .dijitMenu{ - - top: 20px !important; - left: 0px; - border-color: #769dc0; - background-color: #fff; - text-align:center; - background-image: none; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitCalendarMonthLabel{ - border-top: solid 1px #fff; - border-bottom: solid 1px #fff; - padding: 2px 20px; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitMenuItemHover { - background-color: #abd6ff; - border-color: #769dc0; - border-width:1px 0px; - background-image: url("images/commonHighlight.png"); - background-repeat:repeat-x; + text-decoration: line-through; + /* override hover effects above, hover and click on disabled date should have no effect */ + + background-color: transparent; + border-width: 0; + padding: 4px 6px 4px 5px; + color: #818181; +} +/* End Disabled Calendar Style */ +/* Styling for month DropDownButton */ +.claro .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.claro .dijitCalendar .dijitButtonText { + padding: 1px 0 3px; + margin-right: -4px; +} +.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { + background-color: transparent; + background-image: none; + padding: 0 3px 0 2px; + border: solid 1px #b5bcc7; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { + background-color: #e9f4fe; + border: solid 1px #ffffff; +} +/* Styling for month drop down list */ +.claro .dijitCalendarMonthMenu { + border-color: #769dc0; + background-color: #ffffff; + text-align: center; + background-image: none; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + border-top: solid 1px #ffffff; + /* intentionally invisible until hover */ + + border-bottom: solid 1px #ffffff; + padding: 2px 0; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { + background-color: #abd6ff; + border-color: #769dc0; + border-width: 1px 0; + background-image: url("images/commonHighlight.png"); + background-repeat: repeat-x; } diff --git a/lib/dijit/themes/claro/Calendar.less b/lib/dijit/themes/claro/Calendar.less new file mode 100644 index 000000000..ec6aa4696 --- /dev/null +++ b/lib/dijit/themes/claro/Calendar.less @@ -0,0 +1,273 @@ +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ + +@import "variables"; + +.claro .dijitCalendar { + border:solid 1px @border-color; + background-color: @calendar-background-color; + background-image:url("images/calendarContainerImages.png"); + background-position:0 -448px; + background-repeat:repeat-x; + text-align:center; + padding:6px 5px 3px 5px; + .border-radius(4px); +} +.dj_ie6 .claro .dijitCalendar { + background-image:none; +} +.claro .dijitCalendar img { + border:none; +} +.claro .dijitCalendarHover, +.claro .dijitCalendarActive { + /* treat dijitCalenderActive like hover since there's + * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) + */ + background-color: @hovered-background-color; + border:solid 1px @hovered-border-color; +} +.claro .dijitCalendarMonthContainer th { + text-align:center; + padding-bottom:4px; + vertical-align:middle; +} +.claro .dijitCalendarMonthLabel { + color: @text-color; + font-size: 1.091em; + padding: 0 4px; +} + +/* next/previous month arrows */ +.claro .dijitCalendarIncrementControl { + width:18px; + height:16px; + background-image: url("images/calendarArrows.png"); + background-repeat: no-repeat; +} +.dj_ie6 .claro .dijitCalendarIncrementControl { + background-image: url("images/calendarArrows8bit.png"); +} +.claro .dijitCalendarIncrease { + background-position:-18px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position:-36px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position:-55px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position:-72px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position:-91px 0; +} +.claro .dijitA11ySideArrow { + /* text +/- labels instead of arrow icons, for high contrast mode */ + display: none; +} + + +.claro .dijitDayLabels th { + padding:0 4px 0 4px; + font-weight:bold; + text-align:center; +} +.claro .dijitCalendarDayLabelTemplate { + padding-bottom:0; + text-align:center; + border-bottom:1px solid @border-color; + font-size:0.909em; + padding:0 3px 2px; +} +.claro .dijitCalendarDateTemplate { + text-align:center; + background-color:@calendar-currentmonth-background-color; + background-image:url("images/calendarContainerImages.png"); + background-position:0 0; + background-repeat:repeat-x; + border-bottom: 1px solid @minor-border-color; + padding-top:0; + font-size:0.909em; + font-family: Arial; + font-weight:bold; + letter-spacing:.05em; + text-align:center; +} +.dj_ie6 .claro .dijitCalendarDateTemplate { + background-image: none; +} +.claro .dijitCalendarPreviousMonth, +.claro .dijitCalendarNextMonth { + background-color: @calendar-adjacentmonth-background-color; + background-image:none; + border-bottom:solid 1px @minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */ +} +.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { + text-decoration:none; + display:block; + padding:3px 5px 3px 4px; + border:solid 1px @calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */ + background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */ + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, +.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{ + color: @calendar-adjacentmonth-text-color; + border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */ +} + +.claro .dijitCalendarYearContainer { + vertical-align:middle; +} +.claro .dijitCalendarYearControl { + padding: 1px 2px 2px 2px; +} +.claro .dijitCalendarYearLabel { + padding:2px 0 0 0; + margin:0; +} +.claro .dijitCalendarYearLabel span { + /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ + vertical-align:middle; +} +.claro .dijitCalendarSelectedYear { + padding:0 3px; +} +.claro .dijitCalendarNextYear, +.claro .dijitCalendarPreviousYear { + padding: 1px 6px 1px 6px; + font-size:0.909em; +} +.claro .dijitCalendarSelectedYear { + font-size:1.091em; + color:@selected-text-color; +} +/* End Normal Calendar Style */ +/* Hovered Calendar Style */ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{ + background-color:@hovered-background-color; + border:solid 1px @hovered-border-color; + color:@hovered-text-color; + .transition-duration(.2s); +} +.claro .dijitCalendarNextYearHover, +.claro .dijitCalendarPreviousYearHover { + color:@hovered-text-color; + border:solid 1px @calendar-button-hovered-border-color; + padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ + background-color: @calendar-button-hovered-background-color; +} +/* End Hovered Calendar Style */ +/* Active Calendar Style */ +.claro .dijitCalendarNextYearActive, +.claro .dijitCalendarPreviousYearActive { + border: solid 1px @calendar-button-pressed-border-color; + padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ + background-color:@calendar-button-pressed-background-color; +} +.claro .dijitCalendarActiveDate .dijitCalendarDateLabel { + background-image:url("images/calendarContainerImages.png"); + background-position:0 -300px; + background-color: @calendar-date-pressed-background-color; + border:solid 1px @calendar-date-pressed-border-color; + .transition-duration(.1s); +} +.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { + background-image:none; +} +/* End Active Calendar Style */ +/* Selected Calendar Style */ +.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { + color:@selected-text-color; + background-color: @calendar-date-selected-background-color; + border-color: @calendar-date-selected-border-color; +} +/* End Selected Calendar Style */ +/* Disabled Calendar Style*/ +.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { + text-decoration:line-through; + + /* override hover effects above, hover and click on disabled date should have no effect */ + background-color: transparent; + border-width: 0; + padding: 4px 6px 4px 5px; + color: @disabled-text-color; +} + +/* End Disabled Calendar Style */ + +/* Styling for month DropDownButton */ + +.claro .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.claro .dijitCalendar .dijitButtonText { + padding: 1px 0 3px; + margin-right:-4px; +} +.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { + background-color: transparent; + background-image: none; + padding: 0 3px 0 2px; + border:solid 1px @border-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { + background-color: @calendar-button-hovered-background-color; + border:solid 1px @calendar-button-hovered-border-color; +} + +/* Styling for month drop down list */ + +.claro .dijitCalendarMonthMenu { + border-color: @popup-border-color; + background-color: @menu-background-color; + text-align:center; + background-image: none; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */ + border-bottom: solid 1px @menu-background-color; + padding: 2px 0; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { + background-color: @hovered-background-color; + border-color: @hovered-border-color; + border-width:1px 0; + background-image: url("images/commonHighlight.png"); + background-repeat:repeat-x; +} diff --git a/lib/dijit/themes/claro/Calendar_rtl.css b/lib/dijit/themes/claro/Calendar_rtl.css index 0f35d60ef..5892a64bf 100644 --- a/lib/dijit/themes/claro/Calendar_rtl.css +++ b/lib/dijit/themes/claro/Calendar_rtl.css @@ -1,18 +1,18 @@ -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; +.claro .dijitCalendarRtl .dijitCalendarIncrease { + background-position: 0 0; } .claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; + background-position: -18px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; + background-position: -36px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; + background-position: -55px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; + background-position: -72px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; + background-position: -91px 0; } diff --git a/lib/dijit/themes/claro/Calendar_rtl.less b/lib/dijit/themes/claro/Calendar_rtl.less new file mode 100644 index 000000000..713717bd7 --- /dev/null +++ b/lib/dijit/themes/claro/Calendar_rtl.less @@ -0,0 +1,19 @@ +.claro .dijitCalendarRtl .dijitCalendarIncrease{ + background-position: 0 0; +} +.claro .dijitCalendarRtl .dijitCalendarDecrease { + background-position: -18px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position: -36px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position: -55px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position: -72px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position: -91px 0; +} + diff --git a/lib/dijit/themes/claro/ColorPalette.css b/lib/dijit/themes/claro/ColorPalette.css index 87a25ae25..34d1c72b2 100644 --- a/lib/dijit/themes/claro/ColorPalette.css +++ b/lib/dijit/themes/claro/ColorPalette.css @@ -1,18 +1,41 @@ - +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ .claro .dijitColorPalette { - outline: 1px solid #769dc0; - border: 1px solid #c0ccdf; - background:#fff; - -moz-border-radius: 0px; + border: 1px solid #b5bcc7; + background: #ffffff; + -moz-border-radius: 0; + border-radius: 0; } .claro .dijitColorPalette .dijitPaletteImg { - - border: 1px solid #cecece; + /* transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + + border: 1px solid #d3d3d3; } .claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 1px solid #000; + border: 1px solid #000000; } -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; +.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, .claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid #000000; } diff --git a/lib/dijit/themes/claro/ColorPalette.less b/lib/dijit/themes/claro/ColorPalette.less new file mode 100644 index 000000000..e0327334d --- /dev/null +++ b/lib/dijit/themes/claro/ColorPalette.less @@ -0,0 +1,44 @@ +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ + +@import "variables"; + +.claro .dijitColorPalette { + border: 1px solid @border-color; + background: @colorpalette-background-color; + .border-radius(0); +} + +.claro .dijitColorPalette .dijitPaletteImg { + /* transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + border: 1px solid @minor-border-color; +} +.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { + border: 1px solid @swatch-hovered-border-color; +} +.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, +.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid @swatch-selected-border-color; +} diff --git a/lib/dijit/themes/claro/Common.css b/lib/dijit/themes/claro/Common.css index dd68ce14c..110b303e2 100644 --- a/lib/dijit/themes/claro/Common.css +++ b/lib/dijit/themes/claro/Common.css @@ -1,70 +1,75 @@ - +/* ========= Styling rules to affect widgets ========= */ .claro .dijitPopup { - box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); } .claro .dijitTooltipDialogPopup { - - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; + /* exception popups: do not use a shadow on these because they aren't rectangular */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ .claro .dijitComboBoxHighlightMatch { - background-color:#a5beda; + background-color: #abd6ff; } .claro .dijitFocusedLabel { - - outline: 1px dotted #666666; + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + + outline: 1px dotted #4a4a4a; } .claro .dijitContentPaneLoading { - background:url('images/loadingAnimation.gif') no-repeat left center; - padding-left:25px; + background: url('images/loadingAnimation.gif') no-repeat left center; + padding-left: 25px; } +/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ .claro .dijitContentPaneError { - background:url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; - background-position: -496px; - no-repeat left center; - padding-left:25px; + background: url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; + background-position: -496px; + padding-left: 25px; } -.claro .dojoDndItemBefore, -.claro .dojoDndItemAfter{ - border-top: 1px solid #769DC0; +/* Drag and Drop */ +.claro .dojoDndItemBefore, .claro .dojoDndItemAfter { + border-top: 1px solid #769dc0; } .claro .dojoDndItemOver { - cursor:pointer; - } + cursor: pointer; +} .claro table.dojoDndAvatar { - border: 1px solid #b5bcc7; - border-collapse: collapse; - background-color: #fff; - -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .25); + border: 1px solid #b5bcc7; + border-collapse: collapse; + background-color: #ffffff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } -.claro .dojoDndAvatarHeader td { - height: 20px; - padding-left:21px; +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left: 21px; } .claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); - background-repeat: no-repeat; - background-position:2px -122px; + background-image: url(images/dnd.png); + background-repeat: no-repeat; + background-position: 2px -122px; } .claro .dojoDndAvatarItem td { - padding: 5px; + padding: 5px; } -.claro.dojoDndMove .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -103px; +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -103px; } -.claro.dojoDndCopy .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -68px; +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -68px; } -.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px -33px; +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px -33px; } -.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px 2px; +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px 2px; } diff --git a/lib/dijit/themes/claro/Common.less b/lib/dijit/themes/claro/Common.less new file mode 100644 index 000000000..872cf8913 --- /dev/null +++ b/lib/dijit/themes/claro/Common.less @@ -0,0 +1,76 @@ +/* ========= Styling rules to affect widgets ========= */ + +@import "variables"; + +.claro .dijitPopup { + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} +.claro .dijitTooltipDialogPopup { + /* exception popups: do not use a shadow on these because they aren't rectangular */ + .box-shadow(none); +} + +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ +.claro .dijitComboBoxHighlightMatch { + background-color: @select-matchedtext-background-color; +} + +.claro .dijitFocusedLabel { + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + outline: 1px dotted @focus-outline-color; +} + +.claro .dijitContentPaneLoading { + background:url('images/loadingAnimation.gif') no-repeat left center; + padding-left:25px; +} + +/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ +.claro .dijitContentPaneError { + background:url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; + background-position: -496px; + padding-left:25px; +} + +/* Drag and Drop */ +.claro .dojoDndItemBefore, +.claro .dojoDndItemAfter{ + border-top: 1px solid @dnd-dropseparator-color; +} +.claro .dojoDndItemOver { + cursor:pointer; + } +.claro table.dojoDndAvatar { + border: 1px solid @border-color; + border-collapse: collapse; + background-color: @dnd-avatar-background-color; + .box-shadow(0 1px 3px rgba(0, 0, 0, .25)); +} +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left:21px; +} +.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { + background-image: url(images/dnd.png); + background-repeat: no-repeat; + background-position:2px -122px; +} +.claro .dojoDndAvatarItem td { + padding: 5px; +} +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -103px; +} +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -68px; +} +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px -33px; +} +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px 2px; +} diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css index 10b513485..119900eca 100644 --- a/lib/dijit/themes/claro/Dialog.css +++ b/lib/dijit/themes/claro/Dialog.css @@ -1,162 +1,203 @@ - +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ .claro .dijitDialog { - border: 1px solid #769dc0; - box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} + border: 1px solid #769dc0; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); +} .claro .dijitDialogPaneContent { - background: #fff repeat-x top left; - border-top: 1px solid #769dc0; - padding:10px 8px; - position: relative; + background: #ffffff repeat-x top left; + border-top: 1px solid #769dc0; + padding: 10px 8px; + position: relative; } .claro .dijitDialogPaneContentArea { - - margin: -10px -8px; - padding: 10px 8px; + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; } .claro .dijitDialogPaneActionBar { - - background-color: #f2f2f2; - padding: 3px 5px 2px 7px; - text-align: right; - border-top: 1px solid #cdcdcd; - margin: 10px -8px -10px; + /* gray bar at bottom of dialog with OK/Cancel buttons */ + + background-color: #efefef; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid #d3d3d3; + margin: 10px -8px -10px; } .claro .dijitDialogPaneActionBar .dijitButton { - float: none; + float: none; } .claro .dijitDialogTitleBar { - - border: 1px solid #fff; - border-top:none; - background-color: #abd6ff; - background-image: url("images/titlebar.png"); - background-repeat:repeat-x; - padding: 5px 7px 4px 7px; + /* outer container for the titlebar of the dialog */ + + border: 1px solid #ffffff; + border-top: none; + background-color: #abd6ff; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + padding: 5px 7px 4px 7px; } .claro .dijitDialogTitle { - - padding: 0px 1px; - font-size:1.091em; + /* typography and styling of the dialog title */ + + padding: 0 1px; + font-size: 1.091em; } .claro .dijitDialogCloseIcon { - - background: url("images/dialogCloseIcon.png"); - background-repeat:no-repeat; - position: absolute; - right: 5px; - height: 15px; - width: 21px; + /* the default close icon for the dialog */ + + background: url("images/dialogCloseIcon.png"); + background-repeat: no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; } .dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url("images/dialogCloseIcon8bit.png"); + background-image: url("images/dialogCloseIcon8bit.png"); } .claro .dijitDialogCloseIconHover { - background-position:-21px; + background-position: -21px; } .claro .dijitDialogCloseIconActive { - background-position:-42px; + background-position: -42px; } -.claro .dijitTooltip, -.claro .dijitTooltipDialog { - - background: transparent; +/* Tooltip and TooltipDialog */ +.claro .dijitTooltip, .claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + + background: transparent; + /* make the area on the sides of the arrow transparent */ + } .dijitTooltipBelow { - - padding-top: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow above content */ + + padding-top: 13px; + padding-left: 3px; + padding-right: 3px; } .dijitTooltipAbove { - - padding-bottom: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow below content */ + + padding-bottom: 13px; + padding-left: 3px; + padding-right: 3px; } .claro .dijitTooltipContainer { - - background-color:#fff; - background-image:url("images/tooltip.png"); - background-repeat:repeat-x; - background-position:-575px 100%; - border:1px solid #769DC0; - padding:6px 8px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); - font-size: 1em; -} + /* the part with the text */ + + background-color: #ffffff; + background-image: url("images/tooltipGradient.png"); + background-repeat: repeat-x; + background-position: bottom; + border: 1px solid #769dc0; + padding: 6px 8px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + font-size: 1em; +} .dj_ie6 .claro .dijitTooltipContainer { - background-image: none; + background-image: none; } .claro .dijitTooltipConnector { - - border: 0px; - z-index: 2; - background-image:url("images/tooltip.png"); - background-repeat:no-repeat; - width:16px; - height:14px; + /* the arrow piece */ + + border: 0; + z-index: 2; + background-image: url("images/tooltip.png"); + background-repeat: no-repeat; + width: 16px; + height: 14px; } .dj_ie6 .claro .dijitTooltipConnector { - background-image:url("images/tooltip8bit.png"); + background-image: url("images/tooltip8bit.png"); } .claro .dijitTooltipABRight .dijitTooltipConnector { - - left: auto !important; - right: 3px; + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + + left: auto !important; + right: 3px; } .claro .dijitTooltipBelow .dijitTooltipConnector { - - top: 0px; - left: 3px; - background-position:-31px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips below an element */ + + top: 0; + left: 3px; + background-position: -31px 0; + width: 16px; + height: 14px; } .claro .dijitTooltipAbove .dijitTooltipConnector { - - bottom: 0px; - left: 3px; - background-position:-15px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips above an element */ + + bottom: 0; + left: 3px; + background-position: -15px 0; + width: 16px; + height: 14px; } -.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, -.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { - bottom: -1px; +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; } .claro .dijitTooltipLeft { - padding-right: 14px; -} -.dj_ie6 .claro .dijitTooltipLeft { - padding-left: 15px; + padding-right: 14px; } .claro .dijitTooltipLeft .dijitTooltipConnector { - - right: 0px; - bottom: 3px; - background-position:0px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + + right: 0; + background-position: 0 0; + width: 16px; + height: 14px; } .claro .dijitTooltipRight { - padding-left: 14px; + padding-left: 14px; } .claro .dijitTooltipRight .dijitTooltipConnector { - - left: 0px; - bottom: 3px; - background-position:-48px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + + left: 0; + background-position: -48px 0; + width: 16px; + height: 14px; } .claro .dijitDialogUnderlay { - background: #fff; + background: #ffffff; } diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less new file mode 100644 index 000000000..ff5c1e656 --- /dev/null +++ b/lib/dijit/themes/claro/Dialog.less @@ -0,0 +1,203 @@ +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ + +@import "variables"; + +.claro .dijitDialog { + border: 1px solid @popup-border-color; + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} + +.claro .dijitDialogPaneContent { + background: @pane-background-color repeat-x top left; + border-top: 1px solid @popup-border-color; + padding:10px 8px; + position: relative; +} + +.claro .dijitDialogPaneContentArea { + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; +} + +.claro .dijitDialogPaneActionBar { + /* gray bar at bottom of dialog with OK/Cancel buttons */ + background-color: @bar-background-color; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid @minor-border-color; + margin: 10px -8px -10px; +} +.claro .dijitDialogPaneActionBar .dijitButton { + float: none; +} + +.claro .dijitDialogTitleBar { + /* outer container for the titlebar of the dialog */ + border: 1px solid @dialog-titlebar-border-color; + border-top:none; + background-color: @dialog-titlebar-background-color; + background-image: url("images/titlebar.png"); + background-repeat:repeat-x; + padding: 5px 7px 4px 7px; +} + +.claro .dijitDialogTitle { + /* typography and styling of the dialog title */ + padding: 0 1px; + font-size:1.091em; +} + +.claro .dijitDialogCloseIcon { + /* the default close icon for the dialog */ + background: url("images/dialogCloseIcon.png"); + background-repeat:no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; +} +.dj_ie6 .claro .dijitDialogCloseIcon { + background-image: url("images/dialogCloseIcon8bit.png"); +} +.claro .dijitDialogCloseIconHover { + background-position:-21px; +} +.claro .dijitDialogCloseIconActive { + background-position:-42px; +} + +/* Tooltip and TooltipDialog */ + +.claro .dijitTooltip, +.claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + background: transparent; /* make the area on the sides of the arrow transparent */ +} +.dijitTooltipBelow { + /* leave room for arrow above content */ + padding-top: 13px; + padding-left:3px; + padding-right:3px; +} + +.dijitTooltipAbove { + /* leave room for arrow below content */ + padding-bottom: 13px; + padding-left:3px; + padding-right:3px; +} + +.claro .dijitTooltipContainer { + /* the part with the text */ + background-color:@popup-background-color; + background-image:url("images/tooltipGradient.png"); + background-repeat:repeat-x; + background-position:bottom; + border:1px solid @popup-border-color; + padding:6px 8px; + .border-radius(4px); + .box-shadow(0 1px 3px rgba(0,0,0,0.25)); + font-size: 1em; +} + +.dj_ie6 .claro .dijitTooltipContainer { + background-image: none; +} +.claro .dijitTooltipConnector { + /* the arrow piece */ + border: 0; + z-index: 2; + background-image:url("images/tooltip.png"); + background-repeat:no-repeat; + width:16px; + height:14px; +} +.dj_ie6 .claro .dijitTooltipConnector { + background-image:url("images/tooltip8bit.png"); +} +.claro .dijitTooltipABRight .dijitTooltipConnector { + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + left: auto !important; + right: 3px; +} + +.claro .dijitTooltipBelow .dijitTooltipConnector { + /* the arrow piece for tooltips below an element */ + top: 0; + left: 3px; + background-position:-31px 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipAbove .dijitTooltipConnector { + /* the arrow piece for tooltips above an element */ + bottom: 0; + left: 3px; + background-position:-15px 0; + width:16px; + height:14px; +} +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, +.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; +} + +.claro .dijitTooltipLeft { + padding-right: 14px; +} +.claro .dijitTooltipLeft .dijitTooltipConnector { + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + right: 0; + background-position:0 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipRight { + padding-left: 14px; +} +.claro .dijitTooltipRight .dijitTooltipConnector { + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + left: 0; + background-position:-48px 0; + width:16px; + height:14px; +} + +.claro .dijitDialogUnderlay { + background: @dialog-underlay-color; +} diff --git a/lib/dijit/themes/claro/Dialog_rtl.css b/lib/dijit/themes/claro/Dialog_rtl.css index 7bb72e75a..34930eb64 100644 --- a/lib/dijit/themes/claro/Dialog_rtl.css +++ b/lib/dijit/themes/claro/Dialog_rtl.css @@ -1,9 +1,9 @@ - +/* Dialog */ .claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; + right: auto; + left: 5px; } .claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; + text-align: left; + padding: 3px 7px 2px 5px; } diff --git a/lib/dijit/themes/claro/Dialog_rtl.less b/lib/dijit/themes/claro/Dialog_rtl.less new file mode 100644 index 000000000..452fe930b --- /dev/null +++ b/lib/dijit/themes/claro/Dialog_rtl.less @@ -0,0 +1,13 @@ +/* Dialog */ + +@import "variables"; + +.claro .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 5px; +} + +.claro .dijitDialogRtl .dijitDialogPaneActionBar { + text-align: left; + padding: 3px 7px 2px 5px; +} diff --git a/lib/dijit/themes/claro/Editor.css b/lib/dijit/themes/claro/Editor.css index b9af7e798..641990a09 100644 --- a/lib/dijit/themes/claro/Editor.css +++ b/lib/dijit/themes/claro/Editor.css @@ -1,36 +1,50 @@ - -.claro .dijitEditorIFrameContainer{ - padding:3px 3px 1px 10px; +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ +.claro .dijitEditorIFrameContainer { + padding: 3px 3px 1px 10px; } .claro .dijitEditorIFrame { - background-color: #fff; + background-color: #ffffff; } .claro .dijitEditor { - border: 1px solid #b5bcc7; + border: 1px solid #b5bcc7; } -.claro .dijitEditor .dijitEditorIFrameContainer{ - background-color: #fff; - background-image: url('form/images/textBox_back.png'); - background-repeat:repeat-x; +.claro .dijitEditor .dijitEditorIFrameContainer { + background-color: #ffffff; + background-image: url('form/images/textBox_back.png'); + background-repeat: repeat-x; } -.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ - background-image: none; +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer { + background-image: none; } -.claro .dijitEditorHover .dijitEditorIFrameContainer, -.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ - background-color: #eef7ff; +.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #e9f4fe; } -.claro .dijitEditorFocused .dijitEditorIFrameContainer, -.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ - - background-color: #fff; +.claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { + /* TODO: contradicts rule above, which background-color do you want? */ + + background-color: #ffffff; } +/* Disabled */ .claro .dijitEditorDisabled { - border: 1px solid #d3d3d3; - color: #818181; + border: 1px solid #d3d3d3; + color: #818181; } -.claro .dijitDisabled .dijitEditorIFrame, -.claro .dijitDisabled .dijitEditorIFrameContainer { - background-color: #efefef; - background-image: none; +.claro .dijitDisabled .dijitEditorIFrame, .claro .dijitDisabled .dijitEditorIFrameContainer, .claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #efefef; + background-image: none; } diff --git a/lib/dijit/themes/claro/Editor.less b/lib/dijit/themes/claro/Editor.less new file mode 100644 index 000000000..43e6d39ae --- /dev/null +++ b/lib/dijit/themes/claro/Editor.less @@ -0,0 +1,59 @@ +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ + +@import "variables"; + +.claro .dijitEditorIFrameContainer{ + padding:3px 3px 1px 10px; +} +.claro .dijitEditorIFrame { + background-color: @textbox-background-color; +} +.claro .dijitEditor { + border: 1px solid @border-color; +} +.claro .dijitEditor .dijitEditorIFrameContainer{ + background-color: @textbox-background-color; + background-image: url('form/images/textBox_back.png'); + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ + background-image: none; +} +.claro .dijitEditorHover .dijitEditorIFrameContainer, +.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ + background-color: @textbox-hovered-background-color; +} +.claro .dijitEditorFocused .dijitEditorIFrameContainer, +.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ + /* TODO: contradicts rule above, which background-color do you want? */ + background-color: @textbox-focused-background-color; +} + + +/* Disabled */ +.claro .dijitEditorDisabled { + border: 1px solid @disabled-border-color; + color: @disabled-text-color; +} + +.claro .dijitDisabled .dijitEditorIFrame, +.claro .dijitDisabled .dijitEditorIFrameContainer, +.claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: @textbox-disabled-background-color; + background-image: none; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/Editor_rtl.css b/lib/dijit/themes/claro/Editor_rtl.css index b09efaac8..f63355867 100644 --- a/lib/dijit/themes/claro/Editor_rtl.css +++ b/lib/dijit/themes/claro/Editor_rtl.css @@ -1,4 +1,4 @@ - -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; +/* Editor */ +.claro .dijitEditorRtl .dijitEditorIFrameContainer { + padding: 3px 10px 1px 3px; } diff --git a/lib/dijit/themes/claro/Editor_rtl.less b/lib/dijit/themes/claro/Editor_rtl.less new file mode 100644 index 000000000..8ebc013d9 --- /dev/null +++ b/lib/dijit/themes/claro/Editor_rtl.less @@ -0,0 +1,9 @@ +/* Editor */ + +@import "variables"; + +.claro .dijitEditorRtl .dijitEditorIFrameContainer{ + padding:3px 10px 1px 3px; +} + + diff --git a/lib/dijit/themes/claro/InlineEditBox.css b/lib/dijit/themes/claro/InlineEditBox.css index b92c24e97..e6058f780 100644 --- a/lib/dijit/themes/claro/InlineEditBox.css +++ b/lib/dijit/themes/claro/InlineEditBox.css @@ -1,11 +1,20 @@ - +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ .claro .dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; + border: 1px solid transparent; } .claro .dijitInlineEditBoxDisplayModeHover { - background-color: #e2f1ff; - border: solid 1px #769dc0; + background-color: #e9f4fe; + border: solid 1px #769dc0; } .dj_ie6 .claro .dijitInlineEditBoxDisplayMode { - border: none; + border: none; } diff --git a/lib/dijit/themes/claro/InlineEditBox.less b/lib/dijit/themes/claro/InlineEditBox.less new file mode 100644 index 000000000..a7162be1b --- /dev/null +++ b/lib/dijit/themes/claro/InlineEditBox.less @@ -0,0 +1,25 @@ +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ + +@import "variables"; + +.claro .dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; +} + +.claro .dijitInlineEditBoxDisplayModeHover { + background-color: @textbox-hovered-background-color; + border: solid 1px @hovered-border-color; +} + +.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { + border: none; +} diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css index 4bb0be6e0..c55176d54 100644 --- a/lib/dijit/themes/claro/Menu.css +++ b/lib/dijit/themes/claro/Menu.css @@ -1,143 +1,184 @@ +/* Menu +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ .claro .dijitMenuBar { - border: 1px solid #b5bcc7; - margin: 0px; - padding: 0px; - background-color: #e6e6e7; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; + border: 1px solid #b5bcc7; + margin: 0; + padding: 0; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; } .dj_ie6 .claro .dijitMenuBar { - background-image:none; + background-image: none; } .claro .dijitMenu { - background-repeat:repeat-y; - background-color:#fff; - border: 1px solid #769dc0; - - margin: -1px 0; -} -.claro .dijitMenuBar .dijitMenuItem { - padding: 6px 10px 7px; - background-position:0px 100px; - color:#4a4a4a; - margin:-1px; -} + background-repeat: repeat-y; + background-color: #ffffff; + border: 1px solid #769dc0; + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; + /* above -1px makes top/bottom borders disappear on IE6 */ + +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position: 0 100px; + color: #4a4a4a; + margin: -1px; +} .claro .dijitMenuItem { - background-image: url("images/menuHighlight.png"); - background-position:0px -40px; - background-repeat:repeat-x; + background-image: url("images/menuHighlight.png"); + background-position: 0 -40px; + background-repeat: repeat-x; } +/* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { - border-collapse:separate; - border-spacing:0 0; - padding:0px; -} -.claro .dijitMenuItem td{ - padding:1px; -} -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { - background-color: #abd6ff; - border:solid 1px #769dc0; - background-position:0px 0px; - color:#000; - padding: 5px 9px 6px; -} -.claro .dijitMenuPassive .dijitMenuItemActive{ - background-position:0px -177px; -} -.dj_ie6 .claro .dijitMenuItem, -.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { - background-image: none; -} -.claro .dijitMenuActive .dijitMenuItemHover, -.claro .dijitMenuActive .dijitMenuItemSelected { - border:solid 1px #769dc0; - padding: 5px 9px 6px; - background-color: #9dcfff; - background-position:0px 0px; - color:#000; + border-collapse: separate; + border-spacing: 0 0; + padding: 0; +} +.claro .dijitMenuItem td { + padding: 1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: #abd6ff; + border: solid 1px #769dc0; + background-position: 0 0; + color: #000000; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive { + background-position: 0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected { + border: solid 1px #769dc0; + padding: 5px 9px 6px; + background-color: #abd6ff; + background-position: 0 0; + color: #000000; } .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { - padding-top: 6px; - padding-bottom: 5px; - margin-top: -3px; + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; } -.claro .dijitMenuActive .dijitMenuItemActive{ - background-color: #7dbefa; - background-position:0px -177px; +.claro .dijitMenuActive .dijitMenuItemActive { + background-color: #7dbefa; + background-position: 0 -177px; } .claro .dijitMenuItemActive { - background-position:0px -177px; + background-position: 0 -177px; } .claro td.dijitMenuItemIconCell { - padding: 2px; - margin: 0px 0px 0px 4px; + padding: 2px; + margin: 0 0 0 4px; } .claro td.dijitMenuItemLabel { - padding-top: 5px; - padding-bottom: 5px; + padding-top: 5px; + padding-bottom: 5px; } .claro .dijitMenuExpand { - width: 7px; - height: 7px; - background-image: url('images/spriteArrows.png'); - background-position: -14px 0px; - margin-right:3px; + width: 7px; + height: 7px; + background-image: url('images/spriteArrows.png'); + background-position: -14px 0; + margin-right: 3px; } .claro .dijitMenuItemDisabled .dijitMenuItemIconCell { - opacity:1; + opacity: 1; } .claro .dijitMenuSeparatorTop { - height: auto; - margin-top:1px; - border-bottom: 1px solid #b5bcc7 + height: auto; + margin-top: 1px; + /* prevents spacing above/below separator */ + + border-bottom: 1px solid #b5bcc7; } -.claro .dijitMenuSeparatorBottom{ - height: auto; - margin-bottom:1px; +.claro .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; } +/* the checked menu item */ .claro .dijitCheckedMenuItemIconChar { - display: none; + display: none; } .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxRadioButtonStates.png'); - background-repeat:no-repeat; - background-position: -15px 50%; - width:15px; - height:16px; + background-image: url('form/images/checkboxRadioButtonStates.png'); + background-repeat: no-repeat; + background-position: -15px 50%; + width: 15px; + height: 16px; } .dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); + background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { - background-position: 0 50%; + background-position: 0 50%; } +/*ComboBox Menu*/ .claro .dijitComboBoxMenu { - margin-left:0px; - background-image: none; + margin-left: 0; + background-image: none; } -.claro .dijitComboBoxMenu .dijitMenuItem{ - padding:2px 0px; - text-indent:6px; - border-width:1px 0px 1px 0px; - border-style:solid; - border-color:#fff; +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: 2px; + border-width: 1px 0 1px 0; + border-style: solid; + border-color: #ffffff; } .claro .dijitComboBoxMenu .dijitMenuItemSelected { - color:#000; - border-color:#768dc0; - background-color:#abd6ff; + color: #000000; + border-color: #769dc0; + background-color: #abd6ff; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position:0px -177px; - background-color:#7dbefa; + background-position: 0 -177px; + background-color: #7dbefa; + /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ + } .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { - font-style: italic; + font-style: italic; } diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less new file mode 100644 index 000000000..1528df40b --- /dev/null +++ b/lib/dijit/themes/claro/Menu.less @@ -0,0 +1,188 @@ +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ + +@import "variables"; + +.claro .dijitMenuBar { + border: 1px solid @border-color; + margin: 0; + padding: 0; + background-color: @bar-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitMenuBar { + background-image:none; +} +.claro .dijitMenu { + background-repeat:repeat-y; + background-color:@menu-background-color; + border: 1px solid @popup-border-color; + + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position:0 100px; + color:@unselected-text-color; + margin:-1px; +} +.claro .dijitMenuItem { + background-image: url("images/menuHighlight.png"); + background-position:0 -40px; + background-repeat:repeat-x; +} + +/* this prevents jiggling upon hover of a menu item */ +.claro .dijitMenuTable { + border-collapse:separate; + border-spacing:0 0; + padding:0; +} +.claro .dijitMenuItem td{ + padding:1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, +.claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: @hovered-background-color; + border:solid 1px @hovered-border-color; + background-position:0 0; + color:@text-color; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive{ + background-position:0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, +.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} + +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, +.claro .dijitMenuActive .dijitMenuItemSelected { + border:solid 1px @hovered-border-color; + padding: 5px 9px 6px; + background-color: @hovered-background-color; + background-position:0 0; + color:@hovered-text-color; +} +.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; +} +.claro .dijitMenuActive .dijitMenuItemActive{ + background-color: @pressed-background-color; + background-position:0 -177px; +} +.claro .dijitMenuItemActive { + background-position:0 -177px; +} +.claro td.dijitMenuItemIconCell { + padding: 2px; + margin: 0 0 0 4px; +} +.claro td.dijitMenuItemLabel { + padding-top: 5px; + padding-bottom: 5px; +} +.claro .dijitMenuExpand { + width: 7px; + height: 7px; + background-image: url('images/spriteArrows.png'); + background-position: -14px 0; + margin-right:3px; +} +.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { + opacity:1; +} +.claro .dijitMenuSeparatorTop { + height: auto; + margin-top:1px; /* prevents spacing above/below separator */ + border-bottom: 1px solid @border-color +} +.claro .dijitMenuSeparatorBottom{ + height: auto; + margin-bottom:1px; +} +/* the checked menu item */ +.claro .dijitCheckedMenuItemIconChar { + display: none; +} +.claro .dijitCheckedMenuItemIcon { + background-image: url('form/images/checkboxRadioButtonStates.png'); + background-repeat:no-repeat; + background-position: -15px 50%; + width:15px; + height:16px; +} +.dj_ie6 .claro .dijitCheckedMenuItemIcon { + background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); +} +.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { + background-position: 0 50%; +} + +/*ComboBox Menu*/ +.claro .dijitComboBoxMenu { + margin-left:0; + background-image: none; +} + +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: @textbox-padding; // Make drop down menu text line up with text in . + border-width:1px 0 1px 0; + border-style:solid; + border-color: @select-dropdownitem-background-color; +} +.claro .dijitComboBoxMenu .dijitMenuItemSelected { + color:@selected-text-color; + border-color:@hovered-border-color; + background-color:@hovered-background-color; +} +.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { + background-position:0 -177px; + background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ +} +.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { + font-style: italic; +} diff --git a/lib/dijit/themes/claro/Menu_rtl.css b/lib/dijit/themes/claro/Menu_rtl.css index 6ba061bec..2b96cbae7 100644 --- a/lib/dijit/themes/claro/Menu_rtl.css +++ b/lib/dijit/themes/claro/Menu_rtl.css @@ -1,8 +1,8 @@ .claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; } .claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; + margin: 0 4px 0 0; } diff --git a/lib/dijit/themes/claro/Menu_rtl.less b/lib/dijit/themes/claro/Menu_rtl.less new file mode 100644 index 000000000..6f669f5fd --- /dev/null +++ b/lib/dijit/themes/claro/Menu_rtl.less @@ -0,0 +1,11 @@ +@import "variables"; + +.claro .dijitMenuItemRtl .dijitMenuExpand { + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; +} + +.claro .dijitMenuItemRtl .dijitMenuItemIcon { + margin:0 4px 0 0; +} diff --git a/lib/dijit/themes/claro/ProgressBar.css b/lib/dijit/themes/claro/ProgressBar.css index 13e8f266f..c735e5c2f 100644 --- a/lib/dijit/themes/claro/ProgressBar.css +++ b/lib/dijit/themes/claro/ProgressBar.css @@ -1,28 +1,57 @@ - - +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ .claro .dijitProgressBar { - margin:2px 0px 2px 0px; + margin: 2px 0 2px 0; } .claro .dijitProgressBarEmpty { - - background:#fff url("images/progressBarEmpty.png") repeat-none left; - border-color: #769dc0; + /* outer container and background of the bar that's not finished yet*/ + + background: #ffffff url("images/progressBarEmpty.png") repeat-none left; + border-color: #769dc0; } .claro .dijitProgressBarTile { - - background:#9dcfff url("images/progressBarFull.png") repeat-x top; + /* inner container for finished portion when in 'tile' (image) mode */ + + background: #abd6ff url("images/progressBarFull.png") repeat-x top; } .dj_ie6 .claro .dijitProgressBarTile { - background-image: none; -} + background-image: none; +} .claro .dijitProgressBarFull { - border-right:1px solid #769dc0; + border-right: 1px solid #769dc0; } .claro .dijitProgressBarLabel { - - color:#293a4b; + /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ + + color: #000000; } .claro .dijitProgressBarIndeterminate .dijitProgressBarTile { - - background:#cad2de url("images/progressBarAnim.gif") repeat-x top; -} + /* use an animated gif for the progress bar in 'indeterminate' mode; + background-color won't appear unless user has turned off background images */ + + background: #efefef url("images/progressBarAnim.gif") repeat-x top; +} diff --git a/lib/dijit/themes/claro/ProgressBar.less b/lib/dijit/themes/claro/ProgressBar.less new file mode 100644 index 000000000..d361952ee --- /dev/null +++ b/lib/dijit/themes/claro/ProgressBar.less @@ -0,0 +1,56 @@ +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ + + @import "variables"; + +.claro .dijitProgressBar { + margin:2px 0 2px 0; +} +.claro .dijitProgressBarEmpty { + /* outer container and background of the bar that's not finished yet*/ + background: @progressbar-empty-background-color url("images/progressBarEmpty.png") repeat-none left; + border-color: @progressbar-border-color; +} +.claro .dijitProgressBarTile { + /* inner container for finished portion when in 'tile' (image) mode */ + background: @progressbar-full-background-color url("images/progressBarFull.png") repeat-x top; +} +.dj_ie6 .claro .dijitProgressBarTile { + background-image: none; +} +.claro .dijitProgressBarFull { + border-right:1px solid @progressbar-border-color; +} +.claro .dijitProgressBarLabel { + /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ + color: @progressbar-text-color; +} +.claro .dijitProgressBarIndeterminate .dijitProgressBarTile { + /* use an animated gif for the progress bar in 'indeterminate' mode; + background-color won't appear unless user has turned off background images */ + background: @bar-background-color url("images/progressBarAnim.gif") repeat-x top; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/README b/lib/dijit/themes/claro/README new file mode 100644 index 000000000..5ef4714ad --- /dev/null +++ b/lib/dijit/themes/claro/README @@ -0,0 +1,64 @@ +These are "less" files that compile into the CSS of claro. + +--------- +Installing and running on Windows: + +1. Install node: + a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip" + b) unzip the file into C:\ + +2. Install less: + + a) Go to https://github.com/cloudhead/less.js/archives/master, press download button, and select "download zip" + b) unzip the file into C:\ + +2. Add node and lessc environment variables: + + a) open Control Panel --> click System icon --> select Advanced tab --> click Environment variables button + b) press "edit" on path + c) depending on what directory you unzipped to and the exact filenames, you will add something like + + ;C:\ajaxorg-node-builds-0fcee7d\win32;C:\cloudhead-less.js-7fb09f\bin + + d) add new environment variable NODE_PATH with value like this (depending on exact download name): + + C:\cloudhead-less.js-7fb09f\lib + +4. To compile all the files: + + C:\> cd C:\myworkspace\dijit\themes\claro + C:\> node compile.js + +-------- +To install/run less version 2 on mac: + +1. Install Node.js + Download a built copy from https://github.com/ajaxorg/node-builds. + Alternately, o to http://nodejs.org/#download (./configure, make, make install). + +2. Download less from https://github.com/cloudhead/less.js/archives/master + +3. Edit .bash_profile etc. to add node to your path, and lessc to NODE_PATH: + + export PATH=$PATH:/opt/less/bin + export NODE_PATH=$NODE_PATH:/opt/less/lib + +To compile all the files: + + $ cd dijit/themes/claro + $ node compile.js + + +------- +Alternately, you can install less version 1, but I'd rather not use it for checked in files +since it breaks a part a lot of rules into multiple rules, causing spurious diffs. + +To install on a mac: + $ sudo gem install less + +On Windows or Linux, make sure you have ruby and ruby-gems installed first. +If you need help installing ruby please check out ruby-lang.org for more details. + +----- + +See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information. diff --git a/lib/dijit/themes/claro/TimePicker.css b/lib/dijit/themes/claro/TimePicker.css index a5ddf9129..fb8bf5efa 100644 --- a/lib/dijit/themes/claro/TimePicker.css +++ b/lib/dijit/themes/claro/TimePicker.css @@ -1,102 +1,130 @@ - +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +/* override Button.css */ .claro .dijitTimePicker .dijitButtonNode { - padding: 0 0; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; -} -.claro .dijitTimePicker{ - border:1px #b5bcc7 solid; - border-top:none; - border-bottom:none; - background-color:#fff; -} -.claro .dijitTimePickerItem{ - - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; - border-top:solid 1px #b5bcc7; - border-bottom:solid 1px #b5bcc7; - margin-right:-1px; - margin-left:-1px; - margin-top:-1px; + padding: 0 0; + -moz-border-radius: 0; + border-radius: 0; +} +.claro .dijitTimePicker { + border: 1px #b5bcc7 solid; + border-top: none; + border-bottom: none; + background-color: #fff; + /* TODO: useless? Appears to be overridden by settings on individual elements */ + } +.claro .dijitTimePickerItem { + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; + border-top: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; + margin-right: -1px; + margin-left: -1px; + margin-top: -1px; +} +/* to make up for lack of alpha transparency in IE6 */ .dj_ie6 .claro .dijitTimePickerItem { - background-image: none; + background-image: none; } .claro .dijitTimePickerTick { - - color:#7a7a7a; - background-color:#f2f2f2; - font-size:0.818em; + /* minor value */ + + color: #818181; + background-color: #efefef; + font-size: 0.818em; } .claro .dijitTimePickerMarker { - - color:#000; - background-color:#e3f2ff; - font-size: 1em; - white-space: nowrap; + /* major value - 1:00, 2:00, times on the hour */ + + background-color: #e9f4fe; + font-size: 1em; + white-space: nowrap; } .claro .dijitTimePickerTickHover, .claro .dijitTimePickerMarkerHover, .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { - background-color: #83c0fa; - color:#000; - border:solid 1px #b5bcc7; - margin-left:-7px; - margin-right:-7px; + background-color: #7dbefa; + border: solid 1px #b5bcc7; + margin-left: -7px; + margin-right: -7px; + color: #000000; +} +.claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { + font-size: 1em; } -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - font-size: 1em; - } .dj_ie .claro .dijitTimePickerTickHover, .dj_ie .claro .dijitTimePickerMarkerHover, .dj_ie .claro .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerTickSelected { - width: 114%; +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; } .dj_ie6 .claro .dijitTimePickerTickHover, .dj_ie6 .claro .dijitTimePickerMarkerHover, .dj_ie6 .claro .dijitTimePickerMarkerSelected, -.dj_ie6 .claro .dijitTimePickerTickSelected { - position: relative; - zoom: 1; +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; + /* creates widening of element */ + zoom: 1; + /* creates widening of element */ + } .claro .dijitTimePickerTick .dijitTimePickerItemInner { - padding:1px; - margin:0px; + padding: 1px; + margin: 0; } .claro .dijitTimePicker .dijitButtonNode { - border-left:none; - border-right:none; - border-color:#b5bcc7; - background-color: #f6f7fa; - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; + border-left: none; + border-right: none; + border-color: #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; } .dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; + background-image: none; } -.claro .dijitTimePicker .dijitArrowButtonInner{ - height: 100%; - background-image: url("form/images/commonFormArrows.png"); - background-repeat: no-repeat; - background-position:-140px 45%; +.claro .dijitTimePicker .dijitArrowButtonInner { + height: 100%; + /* hack claro.button.css */ + + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position: -140px 45%; } -.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ - background-position:-35px 45%; +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { + background-position: -35px 45%; } -.claro .dijitTimePicker .dijitUpArrowHover, -.claro .dijitTimePicker .dijitDownArrowHover { - background-color: #abd6ff; +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { + background-color: #abd6ff; } .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { - background-position:-175px 45%; + background-position: -175px 45%; } .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { - background-position:-70px 45%; + background-position: -70px 45%; } diff --git a/lib/dijit/themes/claro/TimePicker.less b/lib/dijit/themes/claro/TimePicker.less new file mode 100644 index 000000000..cd07a63d8 --- /dev/null +++ b/lib/dijit/themes/claro/TimePicker.less @@ -0,0 +1,124 @@ +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ + +@import "variables"; + +/* override Button.css */ +.claro .dijitTimePicker .dijitButtonNode { + padding: 0 0; + .border-radius(0); +} +.claro .dijitTimePicker{ + border:1px @border-color solid; + border-top:none; + border-bottom:none; + background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ +} +.claro .dijitTimePickerItem{ + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + background-image: url("images/commonHighlight.png"); + background-position:0 -1px; + background-repeat:repeat-x; + border-top:solid 1px @border-color; + border-bottom:solid 1px @border-color; + margin-right:-1px; + margin-left:-1px; + margin-top:-1px; +} +/* to make up for lack of alpha transparency in IE6 */ +.dj_ie6 .claro .dijitTimePickerItem { + background-image: none; +} +.claro .dijitTimePickerTick { + /* minor value */ + color:@timepicker-minorvalue-text-color; + background-color:@timepicker-minorvalue-background-color; + font-size:0.818em; +} +.claro .dijitTimePickerMarker { + /* major value - 1:00, 2:00, times on the hour */ + background-color: @timepicker-majorvalue-background-color; + font-size: 1em; + white-space: nowrap; +} +.claro .dijitTimePickerTickHover, +.claro .dijitTimePickerMarkerHover, +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + background-color: @timepicker-value-hovered-background-color; + border:solid 1px @border-color; + margin-left:-7px; + margin-right:-7px; + color:@timepicker-value-hovered-text-color; +} +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + font-size: 1em; +} +.dj_ie .claro .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; +} +.dj_ie6 .claro .dijitTimePickerTickHover, +.dj_ie6 .claro .dijitTimePickerMarkerHover, +.dj_ie6 .claro .dijitTimePickerMarkerSelected, +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; /* creates widening of element */ + zoom: 1; /* creates widening of element */ +} +.claro .dijitTimePickerTick .dijitTimePickerItemInner { + padding:1px; + margin:0; +} +.claro .dijitTimePicker .dijitButtonNode { + border-left:none; + border-right:none; + border-color:@border-color; + background-color: @unselected-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 -1px; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { + background-image: none; +} +.claro .dijitTimePicker .dijitArrowButtonInner{ + height: 100%; /* hack claro.button.css */ + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position:-140px 45%; +} +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ + background-position:-35px 45%; +} +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, +.claro .dijitTimePicker .dijitDownArrowHover { + background-color: @timepicker-arrow-hovered-background-color; +} +.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { + background-position:-175px 45%; +} +.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { + background-position:-70px 45%; +} diff --git a/lib/dijit/themes/claro/TimePicker_rtl.css b/lib/dijit/themes/claro/TimePicker_rtl.css index a1bf2fbf0..6dfcf839e 100644 --- a/lib/dijit/themes/claro/TimePicker_rtl.css +++ b/lib/dijit/themes/claro/TimePicker_rtl.css @@ -1,9 +1,9 @@ - +/* TimePicker */ .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; + margin-left: -6px; + margin-right: -8px; + width: 114%; } diff --git a/lib/dijit/themes/claro/TimePicker_rtl.less b/lib/dijit/themes/claro/TimePicker_rtl.less new file mode 100644 index 000000000..44f5da5bd --- /dev/null +++ b/lib/dijit/themes/claro/TimePicker_rtl.less @@ -0,0 +1,12 @@ +/* TimePicker */ + +@import "variables"; + +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { + margin-left:-6px; + margin-right:-8px; + width: 114%; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css index a0191fc53..7f0cdbfb7 100644 --- a/lib/dijit/themes/claro/TitlePane.css +++ b/lib/dijit/themes/claro/TitlePane.css @@ -1,54 +1,73 @@ - +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ .claro .dijitTitlePaneTitle { - background-color: #e6e6e7; - background-image: url("images/titlebar.png"); - background-repeat:repeat-x; - border:1px solid #b5bcc7; - padding: 0px 7px 3px 7px; - min-height:17px; - color:#131313; + background-color: #efefef; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + border: 1px solid #b5bcc7; + padding: 0 7px 3px 7px; + min-height: 17px; } .dj_ie6 .claro .dijitTitlePaneTitle { - background-image: none; + background-image: none; } .claro .dijitTitlePaneTitleHover { - background-color: #abd6ff; - border-color: #769dc0; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitTitlePaneTitleActive { - background-color: #7dbefa; - border-color: #769dc0; - background-position:0px -136px; + background-color: #7dbefa; + border-color: #769dc0; + background-position: 0 -136px; } .claro .dijitTitlePaneTitleFocus { - margin-top:3px; - padding-bottom:2px; + margin-top: 3px; + padding-bottom: 2px; } .claro .dijitTitlePane .dijitArrowNode { - background-image: url('images/spriteArrows.png'); - background-repeat: no-repeat; - height: 8px; - width: 7px; + background-image: url('images/spriteArrows.png'); + background-repeat: no-repeat; + height: 8px; + width: 7px; } .claro .dijitTitlePane .dijitOpen .dijitArrowNode { - background-position: 0px 0px; + background-position: 0 0; } .claro .dijitTitlePane .dijitClosed .dijitArrowNode { - background-position: -14px 0px; + background-position: -14px 0; } .claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { - color:#000; + color: #000000; + /* TODO: do we need this? we usually don't change text color on focus */ + } .claro .dijitTitlePaneContentOuter { - background: #ffffff; - border:1px solid #b5bcc7; - border-top:none; + background: #ffffff; + border: 1px solid #b5bcc7; + border-top: none; } .claro .dijitTitlePaneContentInner { - padding:10px; + padding: 10px; } .claro .dijitTitlePaneTextNode { - margin-left: 4px; - margin-right: 4px; - vertical-align:text-top; + margin-left: 4px; + margin-right: 4px; + vertical-align: text-top; } diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less new file mode 100644 index 000000000..22bacca0f --- /dev/null +++ b/lib/dijit/themes/claro/TitlePane.less @@ -0,0 +1,74 @@ +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ + +@import "variables"; + +.claro .dijitTitlePaneTitle { + background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened? + background-image: url("images/titlebar.png"); + background-repeat:repeat-x; + border:1px solid @border-color; + padding: 0 7px 3px 7px; + min-height:17px; +} +.dj_ie6 .claro .dijitTitlePaneTitle { + background-image: none; +} +.claro .dijitTitlePaneTitleHover { + background-color: @hovered-background-color; + border-color: @hovered-border-color; +} +.claro .dijitTitlePaneTitleActive { + background-color: @pressed-background-color; + border-color: @pressed-border-color; + background-position:0 -136px; +} +.claro .dijitTitlePaneTitleFocus { + margin-top:3px; + padding-bottom:2px; +} +.claro .dijitTitlePane .dijitArrowNode { + background-image: url('images/spriteArrows.png'); + background-repeat: no-repeat; + height: 8px; + width: 7px; +} +.claro .dijitTitlePane .dijitOpen .dijitArrowNode { + background-position: 0 0; +} +.claro .dijitTitlePane .dijitClosed .dijitArrowNode { + background-position: -14px 0; +} +.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { + color:@text-color; /* TODO: do we need this? we usually don't change text color on focus */ +} +.claro .dijitTitlePaneContentOuter { + background: @pane-background-color; + border:1px solid @border-color; + border-top:none; +} +.claro .dijitTitlePaneContentInner { + padding:10px; +} +.claro .dijitTitlePaneTextNode { + margin-left: 4px; + margin-right: 4px; + vertical-align:text-top; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/TitlePane_rtl.css b/lib/dijit/themes/claro/TitlePane_rtl.css index 09ca395f7..3f68ab30e 100644 --- a/lib/dijit/themes/claro/TitlePane_rtl.css +++ b/lib/dijit/themes/claro/TitlePane_rtl.css @@ -1,4 +1,4 @@ - +/* TitlePane */ .claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; + background-position: -7px 0; } diff --git a/lib/dijit/themes/claro/TitlePane_rtl.less b/lib/dijit/themes/claro/TitlePane_rtl.less new file mode 100644 index 000000000..693584f67 --- /dev/null +++ b/lib/dijit/themes/claro/TitlePane_rtl.less @@ -0,0 +1,7 @@ +/* TitlePane */ + +@import "variables"; + +.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { + background-position: -7px 0; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/Toolbar.css b/lib/dijit/themes/claro/Toolbar.css index 2189dcd4d..a9e6f4f5e 100644 --- a/lib/dijit/themes/claro/Toolbar.css +++ b/lib/dijit/themes/claro/Toolbar.css @@ -1,133 +1,158 @@ - +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ .claro .dijitToolbar { - border-bottom: 1px solid #b5bcc7; - background-color: #f1f1f1; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 2px 0px 2px 4px; - zoom: 1; + border-bottom: 1px solid #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; } .claro .dijitToolbar label { - padding: 0px 3px 0 6px; + padding: 0 3px 0 6px; } +/** override claro/form/Button.css **/ .claro .dijitToolbar .dijitButtonNode { - border:none; - padding: 2px; - background-image: url("images/commonHighlight.png"); - background-position:0 -30px; - background-repeat:repeat-x; - background-color:rgba(171,214,255,0); - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s, .35s; -} -.claro .dijitToolbar .dijitComboButton .dijitButtonNode{ - padding: 3px 2px 3px 2px; + border-width: 0; + /* on hover/active, border-->1px, padding-->1px */ + + padding: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s, 0.35s; + -moz-transition-duration: 0.3s, 0.35s; + transition-duration: 0.3s, 0.35s; + background-image: url("images/commonHighlight.png"); + background-position: 0 -30px; + background-repeat: repeat-x; + background-color: rgba(171, 214, 255, 0); } .dj_ie .claro .dijitToolbar .dijitButtonNode { - background-color: transparent; + background-color: transparent; + /* for IE, which doesn't understand rgba(...) */ + } .dj_ie6 .claro .dijitToolbar .dijitButtonNode { - background: none; + background: none; + /* because background-color: transparent above doesn't work */ + } -.claro .dijitToolbar .dijitComboBox .dijitButtonNode { - padding: 0px; +.claro .dijitToolbar .dijitComboButton .dijitStretch { + /* no rounded border on side adjacent to arrow */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; } -.claro .dijitToolbar .dijitComboButton { - padding: 1px; +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; } +/* hover status */ .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { - background-position:0 0; - border:solid 1px #769dc0; - background-color: #abd6ff; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonHover { - background-color: #abd6ff; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-position:0 0; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-color: #7dd6fa; -} -.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { - border:solid 1px #769dc0; - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position: 0 0; + border-width: 1px; + background-color: #abd6ff; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position: 0 0; + background-color: #f4ffff; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color: #7dbefa; + background-position: 0 -177px; + padding: 1px; } .claro .dijitToolbar .dijitComboButtonActive { - -webkit-transition-duration:.2s; - border: solid 1px #769dc0; - padding: 0px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + border-width: 1px; + padding: 0; } -.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode { - background-color: #7dbefa; - background-position:0px -177px; - padding: 2px; +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: #f4ffff; + background-position: 0 -177px; + padding: 2px; } -.claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - background-color: #7dbefa; +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: #7dbefa; } -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - border-color: #769dc0; - background-color:#fff; - padding: 1px; +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: #7dbefa; } -.dj_ie6 .claro .dijitToolbar .dijitButtonContents, -.dj_ie7 .claro .dijitToolbar .dijitButtonContents { - margin: -2px 0; - padding: 0; +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; } -.dj_ie6 .claro .dijitToolbar { - background-image: none; +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; + /* since there's no left border, don't reduce from 2px --> 1px */ + } -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - margin: 1px; - border: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode, +/* toggle button checked status */ .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - margin: 0; - border-width: 1px; - border-style: solid; - background-image: none; + margin: 0; + /* remove margin and add a border */ + + border-width: 1px; + border-style: solid; + background-image: none; + border-color: #769dc0; + background-color: #ffffff; + padding: 1px; } -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - padding: 1px; +.dj_ie6 .claro .dijitToolbar { + background-image: none; } .claro .dijitToolbarSeparator { - - background: url('../../icons/images/editorIconsEnabled.png'); + /* separator icon in the editor sprite */ + + background: url('../../icons/images/editorIconsEnabled.png'); } +/* Toolbar inside of disabled Editor */ .claro .dijitDisabled .dijitToolbar { - background:none; - background-color:#f5f5f5; - border-bottom: 1px solid #d3d3d3; + background: none; + background-color: #efefef; + border-bottom: 1px solid #d3d3d3; +} +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position: 0 50%; } diff --git a/lib/dijit/themes/claro/Toolbar.less b/lib/dijit/themes/claro/Toolbar.less new file mode 100644 index 000000000..eb99f2f23 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar.less @@ -0,0 +1,157 @@ +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ + +@import "variables"; + +.claro .dijitToolbar { + border-bottom: 1px solid @border-color; + background-color: @bar-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; +} + +.claro .dijitToolbar label { + padding: 0 3px 0 6px; +} + +/** override claro/form/Button.css **/ +.claro .dijitToolbar .dijitButtonNode { + border-width: 0; /* on hover/active, border-->1px, padding-->1px */ + padding: 2px; + .border-radius(@toolbar-button-border-radius); + .box-shadow(none); + .transition-property(background-color); + .transition-duration(.3s, .35s); + + background-image: url("images/commonHighlight.png"); + background-position:0 -30px; + background-repeat:repeat-x; + background-color:rgba(171,214,255,0); +} +.dj_ie .claro .dijitToolbar .dijitButtonNode { + background-color: transparent; /* for IE, which doesn't understand rgba(...) */ +} +.dj_ie6 .claro .dijitToolbar .dijitButtonNode { + background: none; /* because background-color: transparent above doesn't work */ +} + +.claro .dijitToolbar .dijitComboButton .dijitStretch { + /* no rounded border on side adjacent to arrow */ + .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius); +} +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0); +} + +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; +} + +/* hover status */ +.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position:0 0; + border-width:1px; + background-color: @hovered-background-color; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position:0 0; + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: @hovered-background-color; +} + +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color:@pressed-background-color; + background-position:0 -177px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonActive { + .transition-duration(.2s); + border-width: 1px; + padding: 0; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; + background-position:0 -177px; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: @pressed-background-color; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: @pressed-background-color; +} + +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; /* since there's no left border, don't reduce from 2px --> 1px */ +} + +/* toggle button checked status */ +.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + margin: 0; /* remove margin and add a border */ + border-width: 1px; + border-style: solid; + background-image: none; + border-color: @selected-border-color; + background-color: @toolbar-button-checked-background-color; + padding: 1px; +} + +.dj_ie6 .claro .dijitToolbar { + background-image: none; +} + +.claro .dijitToolbarSeparator { + /* separator icon in the editor sprite */ + background: url('../../icons/images/editorIconsEnabled.png'); +} + +/* Toolbar inside of disabled Editor */ +.claro .dijitDisabled .dijitToolbar { + background:none; + background-color:@disabled-background-color; + border-bottom: 1px solid @disabled-border-color; +} + +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position:0 50%; +} + diff --git a/lib/dijit/themes/claro/Toolbar_rtl.css b/lib/dijit/themes/claro/Toolbar_rtl.css new file mode 100644 index 000000000..2fab1de32 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar_rtl.css @@ -0,0 +1,30 @@ +/* Toolbar RTL */ +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/lib/dijit/themes/claro/Toolbar_rtl.less b/lib/dijit/themes/claro/Toolbar_rtl.less new file mode 100644 index 000000000..8d31c88f4 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar_rtl.less @@ -0,0 +1,32 @@ +/* Toolbar RTL */ + +@import "variables"; + +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} + +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + .border-radius(0 2px 2px 0); +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(2px 0 0 2px); +} + +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css index 739a4931e..069deb80a 100644 --- a/lib/dijit/themes/claro/Tree.css +++ b/lib/dijit/themes/claro/Tree.css @@ -1,88 +1,134 @@ - +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ .claro .dijitTreeNode { - zoom: 1; + zoom: 1; + /* force layout on IE (TODO: may not be needed anymore) */ + } .claro .dijitTreeIsRoot { - background-image: none; -} -.claro .dijitTreeRow { - - padding: 4px 1px 2px 0px; - margin-left: 1px; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - border-color: rgba(118,157,192,0); - background-color: rgba(171,214,255,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.25s ; - -webkit-transition-timing-function: ease-out; + background-image: none; +} +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + + padding: 4px 1px 2px 0; + margin: 0 1px; + /* replaced by border for selected/hovered row */ + + background-color: none; + background-color: transparent; + background-color: rgba(171, 214, 255, 0); + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-color: rgba(118, 157, 192, 0); + border-width: 0; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + transition-timing-function: ease-out; } .dj_ie6 .claro .dijitTreeRow { - background-image: none; + background-image: none; } .claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:#d8edff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #c3e2fd; - color:#000; + background-repeat: repeat-x; + background-color: #cfe5fa; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; } .claro .dijitTreeRowHover { - background-color:#abd6ff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; - -webkit-transition-duration:.25s ; + background-color: #abd6ff; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTreeRowActive { - background-color:#7dbefa; - background-position:0px -177px; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; + background-color: #7dbefa; + background-position: 0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border: solid 1px #769dc0; + color: #000000; } .dj_ie6 .claro .dijitTreeRowActive { - background-image: none; + background-image: none; } .claro .dijitTreeRowFocused { - background-repeat: repeat; + background-repeat: repeat; } +/* expando (open/closed) icon */ .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages.png'); - width: 16px; - height: 16px; - background-position: -35px 0px + background-image: url('images/treeExpandImages.png'); + width: 16px; + height: 16px; + background-position: -35px 0; + /* for dijitTreeExpandoOpened */ + } .dj_ie6 .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages8bit.png'); + background-image: url('images/treeExpandImages8bit.png'); } .claro .dijitTreeRowHover .dijitTreeExpandoOpened { - background-position: -53px 0px; + background-position: -53px 0; } .claro .dijitTreeExpandoClosed { - background-position: 1px 0px; + background-position: 1px 0; } .claro .dijitTreeRowHover .dijitTreeExpandoClosed { - background-position: -17px 0px; + background-position: -17px 0; } -.claro .dijitTreeExpandoLeaf{ - background-image:none; +.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image: none; } .claro .dijitTreeExpandoLoading { - background-image: url('images/loadingAnimation.gif'); -} -.claro .dijitTreeNode .dojoDndItemBefore, -.claro .dijitTreeNode .dojoDndItemAfter { - border-bottom: none; - border-top: none; + background-image: url('images/loadingAnimation.gif'); } +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #369; + border-top: 2px solid #769dc0; } .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #369; + border-bottom: 2px solid #769dc0; } diff --git a/lib/dijit/themes/claro/Tree.less b/lib/dijit/themes/claro/Tree.less new file mode 100644 index 000000000..4e639ca4f --- /dev/null +++ b/lib/dijit/themes/claro/Tree.less @@ -0,0 +1,133 @@ +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ + +@import "variables"; + +.claro .dijitTreeNode { + zoom: 1; /* force layout on IE (TODO: may not be needed anymore) */ +} +.claro .dijitTreeIsRoot { + background-image: none; +} + +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, +.claro .dijitTreeNode .dojoDndItemBefore, +.claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + padding: 4px 1px 2px 0; + margin: 0 1px; /* replaced by border for selected/hovered row */ + + background-color: none; // IE6 doesn't understand rgba() or transparent below + background-color: transparent; // IE8 doesn't understand rgba() below + background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + + border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in + border-width: 0; + + .transition-property(background-color, border-color); + .transition-duration(.25s); + .transition-timing-function(ease-out); +} +.dj_ie6 .claro .dijitTreeRow { + background-image: none; +} + +.claro .dijitTreeRowSelected { + background-repeat:repeat-x; + background-color:@selected-background-color; + padding: 3px 0 1px; + margin: 0; + border:solid 1px @selected-border-color; + color:@selected-text-color; +} +.claro .dijitTreeRowHover { + background-color:@hovered-background-color; + padding: 3px 0 1px; + margin: 0; + border:solid 1px @hovered-border-color; + color:@hovered-text-color; + .transition-duration(.25s); +} +.claro .dijitTreeRowActive { + background-color:@pressed-background-color; + background-position:0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border:solid 1px @pressed-border-color; + color:@selected-text-color; +} +.dj_ie6 .claro .dijitTreeRowActive { + background-image: none; +} +.claro .dijitTreeRowFocused { + background-repeat: repeat; +} + +/* expando (open/closed) icon */ + +.claro .dijitTreeExpando { + background-image: url('images/treeExpandImages.png'); + width: 16px; + height: 16px; + background-position: -35px 0; /* for dijitTreeExpandoOpened */ +} +.dj_ie6 .claro .dijitTreeExpando { + background-image: url('images/treeExpandImages8bit.png'); +} +.claro .dijitTreeRowHover .dijitTreeExpandoOpened { + background-position: -53px 0; +} +.claro .dijitTreeExpandoClosed { + background-position: 1px 0; +} +.claro .dijitTreeRowHover .dijitTreeExpandoClosed { + background-position: -17px 0; +} +.claro .dijitTreeExpandoLeaf, +.dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image:none; +} +.claro .dijitTreeExpandoLoading { + background-image: url('images/loadingAnimation.gif'); +} + +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ +.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { + border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} +.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { + border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} diff --git a/lib/dijit/themes/claro/claro.css b/lib/dijit/themes/claro/claro.css index 7ed7f1856..d3cb2688c 100644 --- a/lib/dijit/themes/claro/claro.css +++ b/lib/dijit/themes/claro/claro.css @@ -1,4689 +1,28 @@ +@import url("../dijit.css"); +@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/ +@import url("Common.css"); +@import url("form/Common.css"); +@import url("form/Button.css"); +@import url("form/Checkbox.css"); +@import url("form/RadioButton.css"); +@import url("form/Select.css"); +@import url("layout/TabContainer.css"); +@import url("Dialog.css"); +@import url("layout/AccordionContainer.css"); +@import url("layout/ContentPane.css"); +@import url("Calendar.css"); +@import url("Menu.css"); +@import url("form/Slider.css"); +@import url("ColorPalette.css"); +@import url("InlineEditBox.css"); +@import url("ProgressBar.css"); +@import url("TimePicker.css"); +@import url("layout/BorderContainer.css"); +@import url("Tree.css"); +@import url("Toolbar.css"); +@import url("Editor.css");/*in order to test button or menu item with icon */ +@import url("../../icons/editorIcons.css"); /*sprite for editor icons to be used by all themes*/ +@import url("TitlePane.css"); +@import url("form/NumberSpinner.css"); -.dijitReset { - - margin:0; - border:0; - padding:0; - line-height:normal; - font: inherit; - color: inherit; -} -.dijit_a11y .dijitReset { - -moz-appearance: none; -} -.dijitInline { - - display:inline-block; - #zoom: 1; - #display:inline; - border:0; - padding:0; - vertical-align:middle; - #vertical-align: auto; -} -.dijitHidden { - - display: none !important; -} -.dijitVisible { - - display: block !important; - position: relative; -} -.dijitInputContainer { - - #zoom: 1; - overflow: hidden; - float: none !important; - position:relative; -} -.dj_ie INPUT.dijitTextBox, -.dj_ie .dijitTextBox INPUT { - font-size: 100%; -} -.dijitTextBox .dijitSpinnerButtonContainer, -.dijitTextBox .dijitArrowButtonContainer, -.dijitTextBox .dijitValidationContainer { - float: right; - text-align: center; -} -.dijitTextBox INPUT.dijitInputField { - - padding-left: 0 !important; - padding-right: 0 !important; -} -.dijitTextBox .dijitValidationContainer { - display: none; -} -.dijitInlineTable { - - display:inline-table; - display:inline-block; - #zoom: 1; - #display:inline; - box-sizing: content-box; -moz-box-sizing: content-box; - border:0; - padding:0; -} -.dijitTeeny { - font-size:1px; - line-height:1px; -} -.dijitOffScreen { - position: absolute; - visibility: hidden; - left: 50%; - top: -10000px; -} -.dijitPopup { - position: absolute; - background-color: transparent; - margin: 0; - border: 0; - padding: 0; -} -.dijit_a11y .dijitPopup, -.dijit_ally .dijitPopup DIV, -.dijit_a11y .dijitPopup TABLE, -.dijit_a11y .dijitTooltipContainer { - background-color: white !important; -} -.dijitPositionOnly { - - padding: 0 !important; - border: 0 !important; - background-color: transparent !important; - background-image: none !important; - height: auto !important; - width: auto !important; -} -.dijitNonPositionOnly { - - float: none !important; - position: static !important; - margin: 0 0 0 0 !important; - vertical-align: middle !important; -} -.dijitBackgroundIframe { - - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -1; - border: 0; - padding: 0; - margin: 0; -} -.dijitDisplayNone { - - display:none !important; -} -.dijitContainer { - - overflow: hidden; -} -.dijit_a11y * { - background-image:none !important; -} -.dijit_a11y .dijitIcon, -.dijit_a11y DIV.dijitArrowButtonInner, -.dijit_a11y SPAN.dijitArrowButtonInner, -.dijit_a11y IMG.dijitArrowButtonInner, -.dijit_a11y .dijitCalendarIncrementControl { - - display: none; -} -.dijitSpinner DIV.dijitArrowButtonInner { - display: block; -} -.dijit_a11y .dijitA11ySideArrow { - display: inline !important; - cursor: pointer; -} -.dijit_a11y .dijitCalendarDateLabel { - padding: 1px; -} -.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { - border-style: dotted !important; - border-width: 1px; - padding: 0px; -} -.dijit_a11y .dijitCalendarDateTemplate { - padding-bottom: 0.1em !important; -} -.dijit_a11y .dijit * { - background:white !important; - color:black !important; -} -.dijit_a11y .dijitButtonNode { - border-color: black!important; - border-style: outset!important; - border-width: medium!important; -} -.dijit_a11y .dijitTextBoxReadOnly .dijitInputField, -.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode { - border-style: outset!important; - border-width: medium!important; - border-color: #999 !important; - color:#999 !important; -} -.dijitButtonNode * { - vertical-align: middle; -} -.dijitButtonNode .dijitArrowButtonInner { - - background: no-repeat center; - width: 12px; - height: 12px; - direction: ltr; -} -.dijitLeft { - - background-position:left top; - background-repeat:no-repeat; -} -.dijitStretch { - - white-space:nowrap; - background-repeat:repeat-x; -} -.dijitRight { - - #display:inline; - background-position:right top; - background-repeat:no-repeat; -} -.dijitToggleButton, -.dijitButton, -.dijitDropDownButton, -.dijitComboButton { - - margin: 0.2em; -} -.dijitButtonContents { - display: block; -} -td.dijitButtonContents { - display: table-cell; -} -.dijitButtonNode IMG { - - vertical-align:middle; - -} -TABLE.dijitComboButton { - - border-collapse: collapse; - border:0; - padding:0; - margin:0; -} -.dijitToolbar .dijitComboButton { - - border-collapse: separate; -} -.dijitToolbar .dijitToggleButton, -.dijitToolbar .dijitButton, -.dijitToolbar .dijitDropDownButton, -.dijitToolbar .dijitComboButton { - margin: 0; -} -.dijitToolbar .dijitButtonContents { - - padding: 1px 2px; -} -.dj_ie .dijitComboButton { - - margin-bottom: -3px; -} -.dj_webkit .dijitToolbar .dijitDropDownButton { - padding-left: 0.3em; -} -.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { - padding:0; -} -.dijitButtonNode { - - border:1px solid gray; - margin:0; - line-height:normal; - vertical-align: middle; - #vertical-align: auto; - text-align:center; - white-space: nowrap; -} -.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { - - line-height:inherit; -} -.dijitTextBox .dijitButtonNode { - border-width: 0; -} -.dijitButtonNode, -.dijitButtonNode * { - cursor: pointer; -} -.dj_ie .dijitButtonNode { - - zoom: 1; -} -.dj_ie .dijitButtonNode button { - - overflow: visible; -} -DIV.dijitArrowButton { - float: right; -} -.dijitTextBox { - border: solid black 1px; - #overflow: hidden; - width: 15em; - vertical-align: middle; - #vertical-align: auto; -} -.dijitTextBoxReadOnly, -.dijitTextBoxDisabled { - color: gray; -} -.dj_webkit .dijitTextBoxDisabled INPUT { - color: #eee; -} -.dj_webkit TEXTAREA.dijitTextAreaDisabled { - color: #333; -} -.dj_gecko .dijitTextBoxReadOnly INPUT, -.dj_gecko .dijitTextBoxDisabled INPUT { - -moz-user-input: none; -} -.dijitPlaceHolder { - - color: #AAAAAA; - font-style: italic; - position: absolute; - top: 0; - left: 0; - #filter: ""; -} -.dijitTimeTextBox { - width: 8em; -} -.dijitTextBox INPUT:focus { - outline: none; -} -.dijitTextBoxFocused { - outline: auto 5px -webkit-focus-ring-color; -} -.dijitTextBox INPUT { - float: left; -} -.dijitInputInner { - - border:0 !important; - vertical-align:middle !important; - background-color:transparent !important; - width:100% !important; - - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; -} -.dijit_a11y .dijitTextBox INPUT { - margin: 0 !important; -} -.dijitTextBoxError INPUT.dijitValidationInner, -.dijitTextBox INPUT.dijitArrowButtonInner { - - text-indent: -1em !important; - direction: ltr !important; - text-align: left !important; - height: auto !important; - #text-indent: 0 !important; - #letter-spacing: -5em !important; - #text-align: right !important; -} -.dj_ie .dijitTextBox INPUT, -.dj_ie INPUT.dijitTextBox { - overflow-y: visible; - line-height: normal; -} -.dj_ie7 .dijitTextBox INPUT.dijitValidationInner, -.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner { - line-height: 86%; -} -.dj_ie6 .dijitTextBox INPUT, -.dj_ie6 INPUT.dijitTextBox, -.dj_iequirks .dijitTextBox INPUT.dijitValidationInner, -.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitInputInner, -.dj_iequirks INPUT.dijitTextBox { - line-height: 100%; -} -.dijit_a11y INPUT.dijitValidationInner, -.dijit_a11y INPUT.dijitArrowButtonInner { - - text-indent: 0 !important; - width: 1em !important; - #text-align: left !important; -} -.dijitTextBoxError .dijitValidationContainer { - display: inline; - cursor: default; -} -.dijitSpinner .dijitSpinnerButtonContainer, -.dijitComboBox .dijitArrowButtonContainer { - - border-width: 0 0 0 1px !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - - border-width: 0; -} -.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - clear: both; -} -.dijit_a11y .dijitTextBox .dijitValidationContainer, -.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBox .dijitArrowButtonContainer { - - border: solid black !important; - border-width: 0 0 0 1px !important; -} -.dj_ie .dijitToolbar .dijitComboBox { - - vertical-align: middle; -} -.dijitTextBox .dijitSpinnerButtonContainer { - width: 1em; - position: relative !important; - overflow: hidden; -} -.dijitSpinner .dijitSpinnerButtonInner { - width:1em; - visibility:hidden !important; - overflow-x:hidden; -} -.dijitComboBox .dijitButtonNode, -.dijitSpinnerButtonContainer .dijitButtonNode { - border-width: 0; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode { - border: 0 none !important; -} -.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, -.dijit_a11y .dijitSpinner .dijitArrowButtonInner, -.dijit_a11y .dijitSpinnerButtonContainer INPUT { - width: 1em !important; -} -.dijit_a11y .dijitSpinner .dijitArrowButtonInner { - margin: 0 auto !important; -} -.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding-left: 0.3em !important; - padding-right: 0.3em !important; - margin-left: 0.3em !important; - margin-right: 0.3em !important; - width: 1.4em !important; -} -.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding-left: 0.0em !important; - padding-right: 0.0em !important; - width: 1em !important; -} -.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - margin-left: 0.1em !important; - margin-right: 0.1em !important; - width: 1em !important; -} -.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - margin-left: 0 !important; - margin-right: 0 !important; - width: 2em !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - - padding: 0; - position: absolute !important; - right: 0; - float: none; - height: 50%; - width: 100%; - bottom: auto; - left: 0; - right: auto; -} -.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: auto; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton { - overflow: visible !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton { - top: 50%; - border-top-width: 1px !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton { - #bottom: 50%; - top: 0; -} -.dijitSpinner .dijitArrowButtonInner { - margin: auto; - overflow-x: hidden; - height: 100% !important; -} -.dj_iequirks .dijitSpinner .dijitArrowButtonInner { - height: auto !important; -} -.dijitSpinner .dijitArrowButtonInner .dijitInputField { - -moz-transform: scale(0.5); - -moz-transform-origin: center top; - -webkit-transform: scale(0.5); - -webkit-transform-origin: center top; - -o-transform: scale(0.5); - -o-transform-origin: center top; - transform: scale(0.5); - transform-origin: left top; - padding-top: 0; - padding-bottom: 0; - padding-left: 0 !important; - padding-right: 0 !important; - width: 100%; -} -.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField { - zoom: 50%; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner { - overflow: hidden; -} -.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: 100%; -} -.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: 1em; -} -.dijitSpinner .dijitArrowButtonInner .dijitInputField { - visibility: hidden; -} -.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - vertical-align:top; - visibility: visible; -} -.dijit_a11y .dijitSpinnerButtonContainer { - width: 1em; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode { - border-width: 1px 0px 0px 0px; - border-style: solid !important; -} -.dijitCheckBox, -.dijitRadio, -.dijitCheckBoxInput { - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position:center center; - background-repeat:no-repeat; - overflow: hidden; -} -.dijitCheckBox INPUT, -.dijitRadio INPUT { - margin: 0; - padding: 0; - display: block; -} -.dijitCheckBoxInput { - - opacity: 0.01; -} -.dj_ie .dijitCheckBoxInput { - filter: alpha(opacity=0); -} -.dijit_a11y .dijitCheckBox, -.dijit_a11y .dijitRadio { - - width: auto !important; - height: auto !important; -} -.dijit_a11y .dijitCheckBoxInput { - opacity: 1; - filter: none; - width: auto; - height: auto; -} -.dijitProgressBarEmpty { - - position:relative;overflow:hidden; - border:1px solid black; - z-index:0; -} -.dijitProgressBarFull { - - position:absolute; - overflow:hidden; - z-index:-1; - top:0; - width:100%; -} -.dj_ie6 .dijitProgressBarFull { - height:1.6em; -} -.dijitProgressBarTile { - - position:absolute; - overflow:hidden; - top:0; - left:0; - bottom:0; - right:0; - margin:0; - padding:0; - width:auto; - height:auto; - background-color:#aaa; - background-attachment: fixed; -} -.dijit_a11y .dijitProgressBarTile { - - border-width:2px; - border-style:solid; - background-color:transparent !important; -} -.dj_ie6 .dijitProgressBarTile { - - position:static; - - height:1.6em; -} -.dijitProgressBarIndeterminate .dijitProgressBarLabel { - visibility:hidden; -} -.dijitProgressBarIndeterminate .dijitProgressBarTile { - -} -.dijitProgressBarIndeterminateHighContrastImage { - display:none; -} -.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage { - display:block; - position:absolute; - top:0; - bottom:0; - margin:0; - padding:0; - width:100%; - height:auto; -} -.dijitProgressBarLabel { - display:block; - position:static; - width:100%; - text-align:center; - background-color:transparent !important; -} -.dijitTooltip { - position: absolute; - z-index: 2000; - display: block; - - left: 50%; - top: -10000px; - overflow: visible; -} -.dijitTooltipContainer { - border: solid black 2px; - background: #b8b5b5; - color: black; - font-size: small; -} -.dijitTooltipFocusNode { - padding: 2px 2px 2px 2px; -} -.dijitTooltipConnector { - position: absolute; -} -.dijit_a11y .dijitTooltipConnector { - display: none; -} -.dijitTooltipData { - display:none; -} -.dijitLayoutContainer { - position: relative; - display: block; - overflow: hidden; -} -body .dijitAlignTop, -body .dijitAlignBottom, -body .dijitAlignLeft, -body .dijitAlignRight { - position: absolute; - overflow: hidden; -} -body .dijitAlignClient { position: absolute; } -.dijitBorderContainer, .dijitBorderContainerNoGutter { - position:relative; - overflow: hidden; -} -.dijitBorderContainerPane, -.dijitBorderContainerNoGutterPane { - position: absolute !important; - z-index: 2; -} -.dijitBorderContainer > .dijitTextArea { - - resize: none; -} -.dijitGutter { - - position: absolute; - font-size: 1px; -} -.dijitSplitter { - position: absolute; - overflow: hidden; - z-index: 10; - background-color: #fff; - border-color: gray; - border-style: solid; - border-width: 0; -} -.dj_ie .dijitSplitter { - z-index: 1; -} -.dijitSplitterActive { - z-index: 11 !important; -} -.dijitSplitterCover { - position:absolute; - z-index:-1; - top:0; - left:0; - width:100%; - height:100%; -} -.dijitSplitterCoverActive { - z-index:3 !important; -} -.dj_ie .dijitSplitterCover { - background: white; - filter: alpha(opacity=0); -} -.dijitSplitterH { - height: 7px; - border-top:1px; - border-bottom:1px; - cursor: ns-resize; -} -.dijitSplitterV { - width: 7px; - border-left:1px; - border-right:1px; - cursor: ew-resize; -} -.dijitSplitContainer { - position: relative; - overflow: hidden; - display: block; -} -.dj_ff3 .dijit_a11y div.dijitSplitter:focus { - outline-style:dotted; - outline-width: 2px; -} -.dijitSplitPane { - position: absolute; -} -.dijitSplitContainerSizerH, -.dijitSplitContainerSizerV { - position:absolute; - font-size: 1px; - cursor: move; - cursor: w-resize; - background-color: ThreeDFace; - border: 1px solid; - border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight; - margin: 0; -} -.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb { - overflow:hidden; - position:absolute; - top:49%; -} -.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb { - position:absolute; - left:49%; -} -.dijitSplitterShadow, -.dijitSplitContainerVirtualSizerH, -.dijitSplitContainerVirtualSizerV { - font-size: 1px; - background-color: ThreeDShadow; - -moz-opacity: 0.5; - opacity: 0.5; - filter: Alpha(Opacity=50); - margin: 0; -} -.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH { - cursor: w-resize; -} -.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { - cursor: n-resize; -} -.dijit_a11y .dijitSplitterH { - border-top:1px solid #d3d3d3 !important; - border-bottom:1px solid #d3d3d3 !important; -} -.dijit_a11y .dijitSplitterV { - border-left:1px solid #d3d3d3 !important; - border-right:1px solid #d3d3d3 !important; -} -.dijitContentPane { - display: block; - overflow: auto; -} -.dijitContentPaneSingleChild { - - overflow: hidden; -} -.dijitTitlePane { - display: block; - overflow: hidden; -} -.dijitTitlePaneTitle { - cursor: pointer; -} -.dijitFixedOpen { - - cursor: default; -} -.dijitTitlePaneTitle * { - vertical-align: middle; -} -.dijitTitlePane .dijitArrowNodeInner { - - display: none; -} -.dijit_a11y .dijitTitlePane .dijitArrowNodeInner { - - display:inline !important; - font-family: monospace; -} -.dijit_a11y .dijitTitlePane .dijitArrowNode { - - display:none; -} -.dj_ie6 .dijitTitlePaneContentOuter, -.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle { - - zoom: 1; -} -.dijitColorPalette { - border: 1px solid #999; - background: #fff; - position: relative; -} -img.dijitColorPaletteUnder { - - border-style: none; - position: absolute; - left: 0; - top: 0; -} -.dijitColorPalette .dijitPaletteTable { - - padding: 2px 3px 3px 3px; - position: relative; - overflow: hidden; - outline: 0; - border-collapse: separate; -} -.dj_ie6 .dijitColorPalette .dijitPaletteTable, -.dj_ie7 .dijitColorPalette .dijitPaletteTable, -.dj_iequirks .dijitColorPalette .dijitPaletteTable { - - padding: 0; - margin: 2px 3px 3px 3px; -} -.dijitColorPalette .dijitPaletteCell { - - height: 20px; - width: 20px; - font-size: 1px; - vertical-align: middle; - text-align: center; -} -.dijitColorPalette .dijitPaletteImg { - - width: 16px; - height: 14px; - border: 1px solid #999; - cursor: default; - vertical-align: middle; -} -.dj_iequirks .dijitColorPalette .dijitPaletteImg { - margin: 1px; -} -.dijitPaletteTable td { - padding: 0px; -} -.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - - border: 1px solid #000; -} -.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; -} -.dijit_a11y .dijitColorPalette .dijitPaletteTable, -.dijit_a11y .dijitColorPalette .dijitPaletteTable * { - - background-color: transparent !important; -} -.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg { - border: 3px dotted #000; - margin: -1px; -} -.dijit_a11y .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 2px solid #000 !important; -} -.dijitAccordionContainer { - border:1px solid #b7b7b7; - border-top:0 !important; -} -.dijitAccordionTitle { - cursor: pointer; -} -.dijitAccordionTitleSelected { - cursor: default; -} -.dijitAccordionTitle .arrowTextUp, -.dijitAccordionTitle .arrowTextDown { - display: none; - font-size: 0.65em; - font-weight: normal !important; -} -.dijit_a11y .dijitAccordionTitle .arrowTextUp, -.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown { - display: inline; -} -.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp { - display: none; -} -.dj_ie6 .dijitAccordionTitle, -.dj_iequirks .dijitAccordionTitle { - - zoom: 1; -} -.dijitCalendarContainer { - width: auto; -} -.dijitCalendarContainer th, .dijitCalendarContainer td { - padding: 0; -} -.dijitCalendarNextYear { - margin:0 0 0 0.55em; -} -.dijitCalendarPreviousYear { - margin:0 0.55em 0 0; -} -.dijitCalendarIncrementControl { - vertical-align: middle; -} -.dijitCalendarIncrementControl, -.dijitCalendarDateTemplate, -.dijitCalendarMonthLabel, -.dijitCalendarPreviousYear, -.dijitCalendarNextYear { - cursor: pointer; -} -.dijitCalendarDisabledDate { - color: gray; - text-decoration: line-through; - cursor: default; -} -.dijitSpacer { - - position: relative; - height: 1px; - overflow: hidden; - visibility: hidden; -} -.dijitMenu { - border:1px solid black; - background-color:white; -} -.dijitMenuTable { - border-collapse:collapse; - border-width:0; - background-color:white; -} -.dj_webkit .dijitMenuTable td[colspan="2"]{ - border-right:hidden; -} -.dijitMenuItem { - text-align: left; - white-space: nowrap; - padding:.1em .2em; - cursor:pointer; -} -.dijitMenuPassive .dijitMenuItemHover, -.dijitMenuItemSelected { - - background-color:black; - color:white; -} -.dijitMenuItemIcon, .dijitMenuExpand { - background-repeat: no-repeat; -} -.dijitMenuItemDisabled * { - - opacity:0.5; - cursor:default; -} -.dj_ie .dijit_a11y .dijitMenuItemDisabled, -.dj_ie .dijit_a11y .dijitMenuItemDisabled td, -.dj_ie .dijitMenuItemDisabled *, -.dj_ie .dijitMenuItemDisabled td { - color:gray !important; - filter: alpha(opacity=35); -} -.dijitMenuItemLabel { - position: relative; - vertical-align: middle; -} -.dijit_a11y .dijitMenuItemSelected { - border: 1px dotted black !important; -} -.dj_ff3 .dijit_a11y .dijitMenuItem td { - padding: none !important; - background:none !important; -} -.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel { - border-width: 1px; - border-style: solid; -} -.dj_ie8 .dijit_a11y .dijitMenuItemLabel { - position:static; -} -.dijitMenuExpandA11y { - display: none; -} -.dijit_a11y .dijitMenuExpandA11y { - display: inline; -} -.dijitMenuSeparator td { - border: 0; - padding: 0; -} -.dijitMenuSeparatorTop { - height: 50%; - margin: 0; - margin-top:3px; - font-size: 1px; -} -.dijitMenuSeparatorBottom { - height: 50%; - margin: 0; - margin-bottom:3px; - font-size: 1px; -} -.dijitCheckedMenuItemIconChar { - vertical-align: middle; - visibility:hidden; -} -.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar { - visibility: visible; -} -.dijit_a11y .dijitCheckedMenuItemIconChar { - display:inline !important; -} -.dijit_a11y .dijitCheckedMenuItemIcon { - display: none; -} -.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem { - - margin: 0px; -} -.dijitStackController .dijitToggleButtonChecked * { - cursor: default; -} -.dijitTabContainerNoLayout { - width: 100%; -} -.dijitTabContainerBottom-tabs, -.dijitTabContainerTop-tabs, -.dijitTabContainerLeft-tabs, -.dijitTabContainerRight-tabs { - overflow: visible !important; -} -.dijitTabContainerBottom-container, -.dijitTabContainerTop-container, -.dijitTabContainerLeft-container, -.dijitTabContainerRight-container { - z-index:0; - overflow: hidden; - border: 1px solid black; -} -.nowrapTabStrip { - width: 50000px; - display: block; - position: relative; -} -.dijitTabListWrapper { - overflow: hidden; -} -.dijit_a11y .tabStripButton img { - - display: none; -} -.dijitTabContainerTop-tabs { - border-bottom: 1px solid black; -} -.dijitTabContainerTop-container { - border-top: 0px; -} -.dijitTabContainerLeft-tabs { - border-right: 1px solid black; - float: left; -} -.dijitTabContainerLeft-container { - border-left: 0px; -} -.dijitTabContainerBottom-tabs { - border-top: 1px solid black; -} -.dijitTabContainerBottom-container { - border-bottom: 0px; -} -.dijitTabContainerRight-tabs { - border-left: 1px solid black; - float: left; -} -.dijitTabContainerRight-container { - border-right: 0px; -} -DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { - cursor: auto; -} -.dijitTab { - position:relative; - cursor:pointer; - white-space:nowrap; - z-index:3; -} -.dijitTab * { - - vertical-align: middle; -} -.dijitTabChecked { - cursor: default; -} -.dijitTabContainerTop-tabs .dijitTab { - top: 1px; -} -.dijitTabContainerBottom-tabs .dijitTab { - top: -1px; -} -.dijitTabContainerLeft-tabs .dijitTab { - left: 1px; -} -.dijitTabContainerRight-tabs .dijitTab { - left: -1px; -} -.dijitTabContainerTop-tabs .dijitTab, -.dijitTabContainerBottom-tabs .dijitTab { - - display:inline-block; - #zoom: 1; - #display:inline; -} -.dijitTabInnerDiv { - position:relative; -} -.tabStripButton { - z-index: 12; -} -.dijitTabButtonDisabled .tabStripButton { - display: none; -} -.dijitTabCloseButton { - margin-left: 1em; -} -.dijitTabCloseText { - display:none; -} -.dijit_a11y .dijitTabCloseButton { - background-image: none !important; - width: auto !important; - height: auto !important; - border: thin dotted; -} -.dijit_a11y .dijitTabCloseButtonHover { - border:thin solid; -} -.dijit_a11y .dijitTabCloseText { - display: inline; -} -.dijit_a11y .dijitTabChecked { - - border-style:dashed !important; -} -.dijit_a11y .dijitTabInnerDiv { - border-left:none !important; - } -.dijitTabPane, -.dijitStackContainer-child, -.dijitAccordionContainer-child { - - border: none !important; -} -.dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; - cursor: text; -} -.dijit_a11y .dijitInlineEditBoxDisplayMode, -.dj_ie6 .dijitInlineEditBoxDisplayMode { - - border: none; -} -.dijitInlineEditBoxDisplayModeHover, -.dijit_a11y .dijitInlineEditBoxDisplayModeHover, -.dj_ie6 .dijitInlineEditBoxDisplayModeHover { - - background-color: #e2ebf2; - border: solid 1px black; -} -.dijitInlineEditBoxDisplayModeDisabled { - cursor: default; -} -.dijitTreeIndent { - - width: 19px; -} -.dijitTreeRow, .dijitTreeContent { - white-space: nowrap; -} -.dijitTreeRow img { - - vertical-align: middle; -} -.dijitTreeContent { - cursor: default; -} -.dijitExpandoText { - display: none; -} -.dijit_a11y .dijitExpandoText { - display: inline; - padding-left: 10px; - padding-right: 10px; - font-family: monospace; - border-style: solid; - border-width: thin; - cursor: pointer; -} -.dijitTreeLabel { - margin: 0px 4px; -} -.dijitDialog { - position: absolute; - z-index: 999; - overflow: hidden; -} -.dijitDialogTitleBar { - cursor: move; -} -.dijitDialogFixed .dijitDialogTitleBar { - cursor:default; -} -.dijitDialogCloseIcon { - cursor: pointer; -} -.dijitDialogUnderlayWrapper { - position: absolute; - left: 0; - top: 0; - z-index: 998; - display: none; - background: transparent !important; -} -.dijitDialogUnderlay { - background: #eee; - opacity: 0.5; -} -.dj_ie .dijitDialogUnderlay { - filter: alpha(opacity=50); -} -.dijit_a11y .dijitSpinnerButtonContainer, -.dijit_a11y .dijitDialog { - opacity: 1 !important; - background-color: white !important; -} -.dijitDialog .closeText { - display:none; - - position:absolute; -} -.dijit_a11y .dijitDialog .closeText { - display:inline; -} -.dijitSliderMoveable { - z-index:99; - position:absolute !important; - display:block; - vertical-align:middle; -} -.dijitSliderMoveableH { - right:0; -} -.dijitSliderMoveableV { - right:50%; -} -.dijit_a11y DIV.dijitSliderImageHandle, -.dijitSliderImageHandle { - margin:0; - padding:0; - position:relative !important; - border:8px solid gray; - width:0; - height:0; - cursor: pointer; -} -.dj_iequirks .dijit_a11y .dijitSliderImageHandle { - font-size: 0; -} -.dj_ie7 .dijitSliderImageHandle { - overflow: hidden; -} -.dj_ie7 .dijit_a11y .dijitSliderImageHandle { - overflow: visible; -} -.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle { - border:4px solid #000; - height:8px; - width:8px; -} -.dijitSliderImageHandleV { - top:-8px; - right: -50%; -} -.dijitSliderImageHandleH { - left:50%; - top:-5px; - vertical-align:top; -} -.dijitSliderBar { - border-style:solid; - border-color:black; - cursor: pointer; -} -.dijitSliderBarContainerV { - position:relative; - height:100%; - z-index:1; -} -.dijitSliderBarContainerH { - position:relative; - z-index:1; -} -.dijitSliderBarH { - height:4px; - border-width:1px 0; -} -.dijitSliderBarV { - width:4px; - border-width:0 1px; -} -.dijitSliderProgressBar { - background-color:red; - z-index:1; -} -.dijitSliderProgressBarV { - position:static !important; - height:0%; - vertical-align:top; - text-align:left; -} -.dijitSliderProgressBarH { - position:absolute !important; - width:0%; - vertical-align:middle; - overflow:visible; -} -.dijitSliderRemainingBar { - overflow:hidden; - background-color:transparent; - z-index:1; -} -.dijitSliderRemainingBarV { - height:100%; - text-align:left; -} -.dijitSliderRemainingBarH { - width:100% !important; -} -.dijitSliderBumper { - overflow:hidden; - z-index:1; -} -.dijitSliderBumperV { - width:4px; - height:8px; - border-width:0 1px; -} -.dijitSliderBumperH { - width:8px; - height:4px; - border-width:1px 0; -} -.dijitSliderBottomBumper, -.dijitSliderLeftBumper { - background-color:red; -} -.dijitSliderTopBumper, -.dijitSliderRightBumper { - background-color:transparent; -} -.dijitSliderDecoration { - text-align:center; -} -.dijitSliderV TD { - position: relative; -} -.dijitSliderDecorationH { - width: 100%; -} -.dijitSliderDecorationV { - height: 100%; -} -.dijitSliderButton { - font-family:monospace; - margin:0; - padding:0; - display:block; -} -.dijit_a11y .dijitSliderButtonInner { - visibility:visible !important; -} -.dijitSliderButtonContainer { - text-align:center; - height:0; -} -.dijitSliderButtonContainer * { - cursor: pointer; -} -.dijitSlider .dijitButtonNode { - padding:0; - display:block; -} -.dijitRuleContainer { - position:relative; - overflow:visible; -} -.dijitRuleContainerV { - height:100%; - line-height:0; - float:left; - text-align:left; -} -.dj_opera .dijitRuleContainerV { - line-height:2%; -} -.dj_ie .dijitRuleContainerV { - line-height:normal; -} -.dj_gecko .dijitRuleContainerV { - margin:0 0 1px 0; -} -.dijitRuleMark { - position:absolute; - border:1px solid black; - line-height:0; - height:100%; -} -.dijitRuleMarkH { - width:0; - border-top-width:0 !important; - border-bottom-width:0 !important; - border-left-width:0 !important; -} -.dijitRuleLabelContainer { - position:absolute; -} -.dijitRuleLabelContainerH { - text-align:center; - display:inline-block; -} -.dijitRuleLabelH { - position:relative; - left:-50%; -} -.dijitRuleLabelV { - - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.dijitRuleMarkV { - height:0; - border-right-width:0 !important; - border-bottom-width:0 !important; - border-left-width:0 !important; - width:100%; - left:0; -} -.dj_ie .dijitRuleLabelContainerV { - margin-top:-.55em; -} -.dijit_a11y .dijitSliderReadOnly, -.dijit_a11y .dijitSliderDisabled { - opacity:0.6; -} -.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar, -.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar { - filter: alpha(opacity=40); -} -.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV { - font-family: monospace; - font-size: 1em; - line-height: 1em; - height: auto; - width: auto; - margin: 0px 4px; -} -.dijit_a11y .dijitButtonContents .dijitButtonText, -.dijit_a11y .dijitTab .tabLabel { - display: inline !important; -} -.dijitTextArea { - width:100%; - overflow-y: auto; -} -.dijitTextArea[cols] { - width:auto; -} -.dj_ie .dijitTextAreaCols { - width:auto; -} -.dijitToolbarSeparator { - height: 18px; - width: 5px; - padding: 0 1px; - margin: 0; -} -.dijitIEFixedToolbar { - position:absolute; - - top: expression(eval((document.documentElement||document.body).scrollTop)); -} -.dijitEditor { - display: block; -} -.dijitEditorDisabled, -.dijitEditorReadOnly { - color: gray; -} -.dijitTimePickerItemInner { - text-align:center; - border:0; - padding:2px 8px 2px 8px; -} -.dijitTimePickerTick, -.dijitTimePickerMarker { - border-bottom:1px solid gray; -} -.dijitTimePicker .dijitDownArrowButton { - border-top: none !important; -} -.dijitTimePickerTick { - color:#CCC; -} -.dijitTimePickerMarker { - color:black; - background-color:#CCC; -} -.dijitTimePickerItemSelected { - font-weight:bold; - color:#333; - background-color:#b7cdee; -} -.dijitTimePickerItemHover { - background-color:gray; - color:white; - cursor:pointer; -} -.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner { - border: solid 4px black; -} -.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner { - border: dashed 4px black; -} -.dijitToggleButtonIconChar { - - display:none !important; -} -.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar { - display:inline !important; - visibility:hidden; -} -.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText { - font-family: "Arial Unicode MS"; -} -.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar { - display: inline !important; - visibility:visible !important; -} -.dijitArrowButtonChar { - display:none !important; -} -.dijit_a11y .dijitArrowButtonChar { - display:inline !important; -} -.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner, -.dijit_a11y .dijitComboButton .dijitArrowButtonInner { - display:none !important; -} -.dijitSelect { - margin: 0.2em; - border-collapse: collapse; -} -.dj_ie .dijitSelect, -.dj_ie7 .dijitSelect, -.dj_iequirks .dijitSelect { - vertical-align: middle; -} -.dj_ie8 .dijitSelect .dijitButtonText { - vertical-align: top; -} -.dijitToolbar .dijitSelect { - margin: 0; -} -.dj_webkit .dijitToolbar .dijitSelect { - padding-left: 0.3em; -} -.dijit_a11y .dijitSelectDisabled .dijitButtonNode { - border-style: outset!important; - border-width: medium!important; - border-color: #999 !important; - color:#999 !important; -} -.dijitSelect .dijitButtonContents { - padding: 0px; - background: transparent none; - white-space: nowrap; - text-align: left; -} -.dijitSelectFixedWidth .dijitButtonContents { - width: 100%; -} -.dijitSelectMenu .dijitMenuItemIcon { - - display:none; -} -.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel, -.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel { - - position: static; -} -.dijitSelectLabel * -{ - vertical-align: baseline; -} -.dijitSelectSelectedOption * { - font-weight: bold; -} -.dijitSelectMenu { - border-width: 1px; -} -.dijitSelectMenu .dijitMenuTable { - margin: 0px; - background-color: transparent; -} -.dijitForceStatic { - position: static !important; -} -.dijitReadOnly *, -.dijitDisabled *, -.dijitReadOnly, -.dijitDisabled { - - cursor: default; -} -.claro { - font-family:Verdana,Arial,Helvetica,sans-serif; - font-size: .688em; - color: #131313; -} -h1 { - font-size: 1.545em; - font-weight: normal; - line-height: 1em; - margin-top: 1em; - margin-bottom:0.727em; -} -.claro .dijitDialog h1 { - margin-top:0em; -} -h2 { - font-size: 1.364em; - line-height: 1.455em; - margin-top:1em; - margin-bottom:0.60em; - font-weight: normal; -} -h3, h4, h5, h6 { - font-size:1.091em; - font-weight: normal; - line-height: 1.5em; - margin-top: 1.5em; - margin-bottom: 0; -} -p { - font-size: 1em; - line-height: 1.3em; -} -blockquote { - font-size: 0.916em; - margin-top: 3.272em; - margin-bottom: 3.272em; - line-height: 1.636em; - padding: 1.636em; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} -ol li, ul li { - font-size: 1em; - line-height: 1.5em; - margin: 0; -} -pre, code { - font-size:115%; - *font-size:100%; - font-family:inherit; - background-color: #efefef; - border: 1px solid #ccc; -} -pre { - border-width: 1px 0; - padding: 1.5em; -} -table { font-size:100%; } -table.dojoTabular { - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #ccc; - margin: 0 1.5em; -} -.dojoTabular th { - text-align: center; - font-weight: bold; -} -table.dojoTabular thead, table.dojoTabular tfoot { - background-color: #efefef; - border: 1px solid #ccc; - border-width: 1px 0; -} -table.dojoTabular thead tr th, -table.dojoTabular thead tr td, -table.dojoTabular tbody tr td, -table.dojoTabular tfoot tr td { - padding: 0.25em 0.5em; -} - -.dijitIconSave, -.dijitIconPrint, -.dijitIconCut, -.dijitIconCopy, -.dijitIconClear, -.dijitIconDelete, -.dijitIconUndo, -.dijitIconEdit, -.dijitIconNewTask, -.dijitIconEditTask, -.dijitIconEditProperty, -.dijitIconTask, -.dijitIconFilter, -.dijitIconConfigure, -.dijitIconSearch, -.dijitIconApplication, -.dijitIconBookmark, -.dijitIconChart, -.dijitIconConnector, -.dijitIconDatabase, -.dijitIconDocuments, -.dijitIconMail, -.dijitLeaf, -.dijitIconFile, -.dijitIconFunction, -.dijitIconKey, -.dijitIconPackage, -.dijitIconSample, -.dijitIconTable, -.dijitIconUsers, -.dijitFolderClosed, -.dijitIconFolderClosed, -.dijitFolderOpened, -.dijitIconFolderOpen, -.dijitIconError { - background-image: url(../../icons/images/commonIconsObjActEnabled.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitIconSave, -.dj_ie6 .dijitIconPrint, -.dj_ie6 .dijitIconCut, -.dj_ie6 .dijitIconCopy, -.dj_ie6 .dijitIconClear, -.dj_ie6 .dijitIconDelete, -.dj_ie6 .dijitIconUndo, -.dj_ie6 .dijitIconEdit, -.dj_ie6 .dijitIconNewTask, -.dj_ie6 .dijitIconEditTask, -.dj_ie6 .dijitIconEditProperty, -.dj_ie6 .dijitIconTask, -.dj_ie6 .dijitIconFilter, -.dj_ie6 .dijitIconConfigure, -.dj_ie6 .dijitIconSearch, -.dj_ie6 .dijitIconApplication, -.dj_ie6 .dijitIconBookmark, -.dj_ie6 .dijitIconChart, -.dj_ie6 .dijitIconConnector, -.dj_ie6 .dijitIconDatabase, -.dj_ie6 .dijitIconDocuments, -.dj_ie6 .dijitIconMail, -.dj_ie6 .dijitLeaf, -.dj_ie6 .dijitIconFile, -.dj_ie6 .dijitIconFunction, -.dj_ie6 .dijitIconKey, -.dj_ie6 .dijitIconPackage, -.dj_ie6 .dijitIconSample, -.dj_ie6 .dijitIconTable, -.dj_ie6 .dijitIconUsers, -.dj_ie6 .dijitFolderClosed, -.dj_ie6 .dijitIconFolderClosed, -.dj_ie6 .dijitFolderOpened, -.dj_ie6 .dijitIconFolderOpen, -.dj_ie6 .dijitIconError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit.png); -} -.dijitDisabled .dijitIconSave, -.dijitDisabled .dijitIconPrint, -.dijitDisabled .dijitIconCut, -.dijitDisabled .dijitIconCopy, -.dijitDisabled .dijitIconClear, -.dijitDisabled .dijitIconDelete, -.dijitDisabled .dijitIconUndo, -.dijitDisabled .dijitIconEdit, -.dijitDisabled .dijitIconNewTask, -.dijitDisabled .dijitIconEditTask, -.dijitDisabled .dijitIconEditProperty, -.dijitDisabled .dijitIconTask, -.dijitDisabled .dijitIconFilter, -.dijitDisabled .dijitIconConfigure, -.dijitDisabled .dijitIconSearch, -.dijitDisabled .dijitIconApplication, -.dijitDisabled .dijitIconBookmark, -.dijitDisabled .dijitIconChart, -.dijitDisabled .dijitIconConnector, -.dijitDisabled .dijitIconDatabase, -.dijitDisabled .dijitIconDocuments, -.dijitDisabled .dijitIconMail, -.dijitDisabled .dijitLeaf, -.dijitDisabled .dijitIconFile, -.dijitDisabled .dijitIconFunction, -.dijitDisabled .dijitIconKey, -.dijitDisabled .dijitIconPackage, -.dijitDisabled .dijitIconSample, -.dijitDisabled .dijitIconTable, -.dijitDisabled .dijitIconUsers, -.dijitDisabled .dijitFolderClosed, -.dijitDisabled .dijitIconFolderClosed, -.dijitDisabled .dijitFolderOpened, -.dijitDisabled .dijitIconFolderOpen, -.dijitDisabled .dijitIconError { - background-image: url(../../icons/images/commonIconsObjActDisabled.png); -} -.dijitIconSave { background-position: 0px; } -.dijitIconPrint { background-position: -16px; } -.dijitIconCut { background-position: -32px; } -.dijitIconCopy { background-position: -48px; } -.dijitIconClear { background-position: -64px; } -.dijitIconDelete { background-position: -80px; } -.dijitIconUndo { background-position: -96px; } -.dijitIconEdit { background-position: -112px; } -.dijitIconNewTask { background-position: -128px; } -.dijitIconEditTask { background-position: -144px; } -.dijitIconEditProperty { background-position: -166px; } -.dijitIconTask { background-position: -176px; } -.dijitIconFilter { background-position: -192px; } -.dijitIconConfigure { background-position: -208px; } -.dijitIconSearch { background-position: -224px; } -.dijitIconError { background-position: -496px; } -.dijitIconApplication { background-position: -240px; } -.dijitIconBookmark { background-position: -256px; } -.dijitIconChart { background-position: -272px; } -.dijitIconConnector { background-position: -288px; } -.dijitIconDatabase { background-position: -304px; } -.dijitIconDocuments { background-position: -320px; } -.dijitIconMail { background-position: -336px; } -.dijitIconFile, .dijitLeaf { background-position: -352px; } -.dijitIconFunction { background-position: -368px; } -.dijitIconKey { background-position: -384px; } -.dijitIconPackage{ background-position: -400px; } -.dijitIconSample { background-position: -416px; } -.dijitIconTable { background-position: -432px; } -.dijitIconUsers { background-position: -448px; } -.dijitIconFolderClosed, .dijitFolderClosed { background-position: -464px; } -.dijitIconFolderOpen, .dijitFolderOpened { background-position: -480px; } -.claro .dijitPopup { - box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} -.claro .dijitTooltipDialogPopup { - - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; -} -.claro .dijitComboBoxHighlightMatch { - background-color:#a5beda; -} -.claro .dijitFocusedLabel { - - outline: 1px dotted #666666; -} -.claro .dijitContentPaneLoading { - background:url(images/loadingAnimation.gif) no-repeat left center; - padding-left:25px; -} -.claro .dijitContentPaneError { - background:url(../../icons/images/commonIconsObjActEnabled.png) no-repeat left center; - background-position: -496px; - no-repeat left center; - padding-left:25px; -} -.claro .dojoDndItemBefore, -.claro .dojoDndItemAfter{ - border-top: 1px solid #769DC0; -} -.claro .dojoDndItemOver { - cursor:pointer; - } -.claro table.dojoDndAvatar { - border: 1px solid #b5bcc7; - border-collapse: collapse; - background-color: #fff; - -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .25); -} -.claro .dojoDndAvatarHeader td { - height: 20px; - padding-left:21px; -} -.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); - background-repeat: no-repeat; - background-position:2px -122px; -} -.claro .dojoDndAvatarItem td { - padding: 5px; -} -.claro.dojoDndMove .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -103px; -} -.claro.dojoDndCopy .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -68px; -} -.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px -33px; -} -.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px 2px; -} -.claro .dijitTextBoxError .dijitValidationContainer { - background-color: #d46363; - background-image: url(form/images/error.png); - background-position: top center; - border: solid #d46464 0px; - border-left-width: 1px; - width: 9px; -} -.claro .dijitTextBoxError .dijitValidationIcon { - width: 0px; - background-color: transparent !important; -} -.claro .dijitTextBox .dijitInputContainer, -.claro .dijitTextArea, -.claro .dijitInputField .dijitPlaceHolder { - padding: 2px; -} -.claro .dijitTextBox, -.claro .dijitTextBox .dijitButtonNode { - - border-color: #b5bcc7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; -} -.claro .dijitTextBox { - background-color: #f7fcff; -} -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; - -webkit-transition-duration:.25s; -} -.claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; -} -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: #fdf7f7; -} -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color:#769dc0; - -webkit-transition-duration:.1s; -} -.claro .dijitTextBoxFocused { - background-color: #fff; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitTextBoxFocused .dijitInputContainer { - background: #fff; -} -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; -} -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; -} -.claro .dijitTextBoxDisabled { - background-color: #efefef; - background-image: none; - color: #818181; -} -.claro .dijitComboBox .dijitArrowButtonInner { - background-image: url(form/images/commonFormArrows.png); - background-position:-35px 53%; - background-repeat: no-repeat; - margin: 0px; - width:16px; - height:100%; - border: 1px solid #fff; -} -.claro .dijitTextBox .dijitInputField { - padding-top: 1px; - padding-bottom: 1px; -} -.claro .dijitTextBox .dijitInputInner { - - padding: 1px 2px 1px 0; -} -.claro .dijitTextBox .dijitValidationContainer { - padding: 0 0 2px 0; -} -.claro .dijitComboBox .dijitButtonNode { - background-color: #ebeef4; - background-image: url(form/images/formHighlight.png); - background-repeat:repeat-x; -} -.claro .dijitComboBoxHover .dijitButtonNode { - background-color:#abd6ff; -} -.claro .dijitComboBoxHover .dijitArrowButtonInner { - background-position:-70px 53%; -} -.claro .dijitComboBoxFocused .dijitButtonNode { - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitComboBoxFocused .dijitArrowButtonInner { - background-position:-70px 53%; - border: 0px none; -} -.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { - - background-position:0px 50%; - background-color:#f1f1f1; -} -.dj_ff3 .claro .dijitInputField input[type="hidden"] { - display: none; - height: 0; - width: 0; -} -.dj_ie6 .claro .dijitTextBox, -.dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; -} -.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner { - border: 0px; -} -.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer { - padding: 1px; -} -.claro .dijitButtonNode { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; -} -.claro .dijitButton .dijitButtonNode, -.claro .dijitDropDownButton .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNode, -.claro .dijitToggleButton .dijitButtonNode { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url(form/images/button.png); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); -} -.claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; -} -.claro .dijitArrowButtonInner { - width: 15px; - height: 15px; - margin: 0 auto; - background-image:url(form/images/buttonArrows.png); - background-repeat:no-repeat; - background-position:-51px 53%; -} -.claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; -} -.claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; -} -.claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; -} -.claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; -} -.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; -} -.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; -} -.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; -} -.claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; -} -.claro .dijitButtonHover .dijitButtonNode, -.claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, -.claro .dijitComboButton .dijitDownArrowButtonHover, -.claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, -.claro .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitComboButtonActive .dijitButtonNode, -.claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} -.claro .dijitButtonDisabled, -.claro .dijitDropDownButtonDisabled, -.claro .dijitComboButtonDisabled, -.claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; -} -.claro .dijitButtonDisabled .dijitButtonNode, -.claro .dijitDropDownButtonDisabled .dijitButtonNode, -.claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} -.claro table.dijitComboButton { - border-collapse: separate; -} -.dj_ie6 .claro .dijitButtonNode { - background-image: none; -} -.claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; -} -.claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url(images/checkmarkNoBorder.png); -} -.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url(images/checkmarkNoBorder.gif); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, -.dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; -} -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; -} -.claro .dijitCheckBoxDisabled { - - background-position: -75px; -} -.claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; -} -.claro .dijitCheckBoxHover { - - background-position: -45px; -} -.claro .dijitCheckBoxCheckedHover { - - background-position: -30px; -} -.claro .dijitToggleButton .dijitRadio, -.claro .dijitToggleButton .dijitRadioIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); -} -.dj_ie6 .claro .dijitToggleButton .dijitRadio, -.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitRadio, -.claro .dijitRadioIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0px 2px 0px 0px; - padding: 0px; -} -.dj_ie6 .claro .dijitRadio, -.dj_ie6 .claro .dijitRadioIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitRadio{ - - background-position: -105px; -} -.claro .dijitToggleButton .dijitRadioIcon { - - background-position: -107px; -} -.claro .dijitRadioDisabled { - - background-position: -165px; -} -.claro .dijitRadioHover { - - background-position: -135px; -} -.claro .dijitRadioChecked{ - background-position: -90px; -} -.claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; -} -.claro .dijitRadioCheckedHover{ - background-position: -120px; -} -.claro .dijitRadioCheckedDisabled { - - background-position: -150px; -} -.claro .dijitSelect .dijitButtonText { - padding: 0px 5px 2px 5px; -} -.claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #f7fcff; - border-collapse: separate; -} -.dj_ie6 .claro .dijitSelect, -.dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image:none; -} -.claro .dijitSelect .dijitButtonContents { - border: 0px solid #b5bcc7; - border-right-width: 1px; -} -.claro .dijitSelect .dijitArrowButton { - padding: 0; - border: 1px solid #fff; - border-top:none; - background-color:#ebeef4; - background-image: url(form/images/formHighlight.png); - background-repeat:repeat-x; -} -.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url(form/images/commonFormArrows.png); - background-position:-35px 70%; - background-repeat: no-repeat; - width:16px; - height:16px; - display:block; -} -.claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitSelectHover .dijitButtonContents { - border-color:#81a5c6; -} -.claro .dijitSelectHover .dijitArrowButton { - background-color:#abd6ff; -} -.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; -} -.claro .dijitSelectFocused { - border: 1px solid #769dc0; -} -.claro .dijitSelectFocused .dijitButtonContents { - border-color:#81a5c6; -} -.claro .dijitSelectFocused .dijitArrowButton { - background-color:#7dbefa; - background-position:0px -177px; - border: none; - padding: 0px 1px; -} -.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; -} -.claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; -} -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; -} -.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position:0px 70% -} -.claro .dijitSelectMenu td.dijitMenuItemIconCell, -.claro .dijitSelectMenu td.dijitMenuArrowCell { - - display: none; -} -.claro .dijitSelectMenu td.dijitMenuItemLabel { - - padding-left: 5px; - padding-right: 5px; -} -.claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom:1px solid #769dc0; -} -.claro .dijitTabPaneWrapper { - background:#fff; -} -.claro .dijitTabPaneWrapper, -.claro .dijitTabContainerTop-tabs, -.claro .dijitTabContainerBottom-tabs, -.claro .dijitTabContainerLeft-tabs, -.claro .dijitTabContainerRight-tabs { - - border-color: #b5bcc7; -} -.claro .dijitTabCloseButton { - background: url(layout/images/tabClose.png) no-repeat; - width: 14px; - height: 14px; - margin-left: 5px; - margin-right:-3px; -} -.claro .dijitTabCloseButtonHover { - background-position:-14px; -} -.claro .dijitTabCloseButtonActive { - background-position:-28px; -} -.claro .dijitTabSpacer { - - display: none; -} -.claro .dijitTabInnerDiv { - background-color:#e6e6e7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; - color:#4a4a4a; -} -.claro .dijitTabHover .dijitTabInnerDiv { - background-color:#a9d6ff; - -webkit-transition-duration:.25s; - color:#000; -} -.claro .dijitTabActive .dijitTabInnerDiv { - background-color:#8bc4f9; - color:#000; - -webkit-transition-duration:.1s; -} -.claro .dijitTabChecked .dijitTabInnerDiv { - background-color:#b2d4f3; - color:#000; -} -.claro .dijitTabContent { - border: 1px solid #b5bcc7; -} -.claro .dijitTabHover .dijitTabContent, -.claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; -} -.claro .dijitTabChecked .dijitTabContent { - color:#000; - border-color: #b5bcc7; -} -.claro .tabStripButton .dijitTabInnerDiv { - background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { - border: none; -} -.claro .dijitTabContainerTop-tabs .dijitTab { - top: 1px; - margin-right: 1px; - padding-top: 3px; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { - top: 3px; -} -.claro .dijitTabContainerTop-tabs .dijitTabContent { - padding:3px 8px 3px 4px; - border-bottom: 1px; - background-image:url(layout/images/tabTop.png); - background-position:0px 0px; - background-repeat:repeat-x; - min-width: 60px; - text-align: center; -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 4px; - padding-top: 6px; -} -.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - border-bottom: none; -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url(layout/images/tabTop.png); - background-position:0px -248px; - background-position:bottom; - background-repeat:repeat-x; - box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - background-position:0px -102px; - background-repeat:repeat-x; -} -.claro .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; - margin-right: 1px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - border-top: none; - background-image: url(layout/images/tabBottom.png); - background-position:0px -249px; - background-repeat: repeat-x; - background-position:bottom; - min-width: 60px; - text-align: center; -} -.claro .dijitTabContainerBottom-tabs .dijitTab { - padding-bottom: 3px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabBottom.png); - background-position: top; - background-repeat: repeat-x; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 7px; - padding-top: 4px; - background-position:0px -119px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; - margin-bottom: 1px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabLeft.png); - background-position: -347px -340px; - background-repeat: repeat-y; -} -.claro .dijitTabContainerLeft-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url(layout/images/tabLeft.png); - background-repeat: repeat-y; - background-position:0px 0px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { - padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0px -179px; - background-repeat:repeat-y; - box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerRight-tabs .dijitTab { - left: -1px; - margin-bottom: 1px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabRight.png); - background-repeat: repeat-y; - background-position: -1px -347px; -} -.claro .dijitTabContainerRight-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url(layout/images/tabRight.png); - background-position:right top; - background-repeat: repeat-y; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { - padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; - box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { - border-radius: 2px 2px 0px 0px; - -moz-border-radius: 2px 2px 0px 0px; - -webkit-border-top-left-radius:2px; - -webkit-border-top-right-radius:2px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ - border-radius: 0px 0px 2px 2px; - -moz-border-radius: 0px 0px 2px 2px; - -webkit-border-bottom-right-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ - border-radius: 2px 0px 0px 2px; - -moz-border-radius: 2px 0px 0px 2px; - -webkit-border-top-left-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ - border-radius: 0px 2px 2px 0px; - -moz-border-radius: 0px 2px 2px 0px; - -webkit-border-top-right-radius:2px; - -webkit-border-bottom-right-radius:2px; -} -.claro .tabStripButton { - background-color:#deecf9; - border: 1px solid #b5bcc7; -} -.claro .dijitTabListContainer-top .tabStripButton { - padding: 4px 3px; - margin-top:7px; - background-image: url(layout/images/tabTop.png); - background-position:0px 0px; -} -.claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url(layout/images/tabTop.png); - background-position:0px -248px; - background-position:bottom; -} -.claro .tabStripButtonHover { - background-color:#a6d2fb; -} -.claro .tabStripButtonActive { - background-color:#7dbefa; -} -.claro .dijitTabStripIcon { - height:15px; - width:15px; - margin: 0 auto; - background:url(form/images/buttonArrows.png) no-repeat -75px 50%; - background-color: transparent; -} -.claro .dijitTabStripSlideRightIcon{ - background-position: -24px 50%; -} -.claro .dijitTabStripMenuIcon { - background-position: -51px 50%; -} -.claro .dijitTabListContainer-top .tabStripButtonDisabled, -.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { - background-color:#dddddd; - border:1px solid #c9c9c9; -} -.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { - background-position:-175px 50%; -} -.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { - background-position: -124px 50%; -} -.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { - background-position: -151px 50%; -} -.claro .dijitTabContainerNested .dijitTabListWrapper { - height: auto; -} -.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { - border-bottom:solid 1px #b5bcc7; - padding:1px 2px 4px; - margin-top:-2px; -} -.claro .dijitTabContainerTabListNested .dijitTabContent { - background:rgba(255, 255, 255, 0) none repeat scroll 0 0; - border: none; - padding: 4px; - border-color: rgba(118,157,192,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.3s; -} -.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - - background: none; - border: none; - top: 0px; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; -} -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color:#eaf4fc; - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #c8dff3; - padding: 3px; - webkit-transition-duration:.2s; -} -.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { - text-decoration: none; -} -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #a8c7e2; - padding: 3px; - background:#b9d9f5 url(layout/images/tabNested.png) repeat-x; - -webkit-transition-duration:.1s; -} -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - padding: 3px; - border:solid 1px #a8c7e2; - background-position: 0px 105px; - background-color:#d4e8f9; -} -.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { - text-decoration: none; - background-image:none; -} -.claro .dijitTabPaneWrapperNested { - border: none; -} -.dj_ie6 .claro .dijitTabContent, -.dj_ie6 .claro .dijitTabInnerDiv, -.dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ - background-image: none; -} -.claro .dijitDialog { - border: 1px solid #769dc0; - box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} -.claro .dijitDialogPaneContent { - background: #fff repeat-x top left; - border-top: 1px solid #769dc0; - padding:10px 8px; - position: relative; -} -.claro .dijitDialogPaneContentArea { - - margin: -10px -8px; - padding: 10px 8px; -} -.claro .dijitDialogPaneActionBar { - - background-color: #f2f2f2; - padding: 3px 5px 2px 7px; - text-align: right; - border-top: 1px solid #cdcdcd; - margin: 10px -8px -10px; -} -.claro .dijitDialogPaneActionBar .dijitButton { - float: none; -} -.claro .dijitDialogTitleBar { - - border: 1px solid #fff; - border-top:none; - background-color: #abd6ff; - background-image: url(images/titlebar.png); - background-repeat:repeat-x; - padding: 5px 7px 4px 7px; -} -.claro .dijitDialogTitle { - - padding: 0px 1px; - font-size:1.091em; -} -.claro .dijitDialogCloseIcon { - - background: url(images/dialogCloseIcon.png); - background-repeat:no-repeat; - position: absolute; - right: 5px; - height: 15px; - width: 21px; -} -.dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url(images/dialogCloseIcon8bit.png); -} -.claro .dijitDialogCloseIconHover { - background-position:-21px; -} -.claro .dijitDialogCloseIconActive { - background-position:-42px; -} -.claro .dijitTooltip, -.claro .dijitTooltipDialog { - - background: transparent; -} -.dijitTooltipBelow { - - padding-top: 13px; - padding-left:3px; - padding-right:3px; -} -.dijitTooltipAbove { - - padding-bottom: 13px; - padding-left:3px; - padding-right:3px; -} -.claro .dijitTooltipContainer { - - background-color:#fff; - background-image:url(images/tooltip.png); - background-repeat:repeat-x; - background-position:-575px 100%; - border:1px solid #769DC0; - padding:6px 8px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); - font-size: 1em; -} -.dj_ie6 .claro .dijitTooltipContainer { - background-image: none; -} -.claro .dijitTooltipConnector { - - border: 0px; - z-index: 2; - background-image:url(images/tooltip.png); - background-repeat:no-repeat; - width:16px; - height:14px; -} -.dj_ie6 .claro .dijitTooltipConnector { - background-image:url(images/tooltip8bit.png); -} -.claro .dijitTooltipABRight .dijitTooltipConnector { - - left: auto !important; - right: 3px; -} -.claro .dijitTooltipBelow .dijitTooltipConnector { - - top: 0px; - left: 3px; - background-position:-31px 0%; - width:16px; - height:14px; -} -.claro .dijitTooltipAbove .dijitTooltipConnector { - - bottom: 0px; - left: 3px; - background-position:-15px 0%; - width:16px; - height:14px; -} -.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, -.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { - bottom: -1px; -} -.claro .dijitTooltipLeft { - padding-right: 14px; -} -.dj_ie6 .claro .dijitTooltipLeft { - padding-left: 15px; -} -.claro .dijitTooltipLeft .dijitTooltipConnector { - - right: 0px; - bottom: 3px; - background-position:0px 0%; - width:16px; - height:14px; -} -.claro .dijitTooltipRight { - padding-left: 14px; -} -.claro .dijitTooltipRight .dijitTooltipConnector { - - left: 0px; - bottom: 3px; - background-position:-48px 0%; - width:16px; - height:14px; -} -.claro .dijitDialogUnderlay { - background: #fff; -} -.claro .dijitAccordionContainer { - border:none; -} -.claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; -} -.claro .dijitAccordionTitle { - background-color: transparent; - background-image: url(layout/images/accordion.png); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; -} -.dj_ie6 .claro .dijitAccordionTitle { - background-image: none; -} -.claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; -} -.claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; -} -.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; -} -.claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; -} -.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; -} -.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; -} -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; -} -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); -} -.claro .dijitContentPane { - padding: 8px; -} -.claro .dijitTabContainerTop-dijitContentPane, -.claro .dijitTabContainerLeft-dijitContentPane, -.claro .dijitTabContainerBottom-dijitContentPane, -.claro .dijitTabContainerRight-dijitContentPane, -.claro .dijitAccordionContainer-dijitContentPane { - background-color: #fff; - padding: 8px; -} -.claro .dijitSplitContainer-dijitContentPane, -.claro .dijitBorderContainer-dijitContentPane { - background-color: #fff; - padding: 8px; -} -.claro .dijitCalendar { - border:solid 1px #b5bcc7; - background-color:#d4ebff; - background-image:url(images/calendarContainerImages.png); - background-position:0px -448px; - background-repeat:repeat-x; - text-align:center; - padding:6px 5px 3px 5px; - -moz-border-radius:4px; - -webkit-border-radius:4px; -} -.dj_ie6 .claro .dijitCalendar { - background-image:none; -} -.claro .dijitCalendar img { - border:none; -} -.claro .dijitCalendarHover, -.claro .dijitCalendarActive { - background-color: #b7dcff; - border:solid 1px #769dc0; -} -.claro .dijitCalendarMonthContainer th { - text-align:center; - padding-bottom:4px; - vertical-align:middle; -} -.claro .dijitCalendarMonthLabelSpacer { - display:none; -} -.claro .dijitCalendarMonthLabel { - color:#000000; - font-size: 1.091em; - display: block; -} -.claro .dijitCalendarIncrementControl { - width:18px; - height:16px; - background-image: url(images/calendarArrows.png); - background-repeat: no-repeat; -} -.dj_ie6 .claro .dijitCalendarIncrementControl { - background-image: url(images/calendarArrows8bit.png); -} -.claro .dijitCalendarIncrease { - background-position:-18px 0px; -} -.claro .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position:-36px 0px; -} -.claro .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position:-55px 0px; -} -.claro .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position:-72px 0px; -} -.claro .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position:-91px 0px; -} -.claro .dijitA11ySideArrow { - - display: none; -} -.claro .dijitDayLabels th { - padding:0px 4px 0px 4px; - border-bottom:solid 1px #99b5cd; - font-weight:bold; - text-align:center; -} -.claro .dijitCalendarDayLabelTemplate { - padding-bottom:0em; - text-align:center; - border-bottom:1px solid #99B5CD; - font-size:0.909em; - padding:0 3px 2px; -} -.claro .dijitCalendarDateTemplate { - text-align:center; - background-color:#fff; - background-image:url(images/calendarContainerImages.png); - background-position:0px 0px; - background-repeat:repeat-x; - border-bottom: 1px solid #dadde1; - padding-top:0px; - font-size:0.909em; - font-family: Arial; - font-weight:bold; - letter-spacing:.05em; - text-align:center; -} -.dj_ie6 .claro .dijitCalendarDateTemplate { - background-image: none; -} -.claro .dijitCalendarPreviousMonth, -.claro .dijitCalendarNextMonth { - background-color:#ebf3f9; - background-image:none; - border-bottom:solid 1px #d2dae8; - color:#547da1; -} -.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { - text-decoration:none; - display:block; - padding:3px 5px 3px 4px; - border:solid 1px #fff; - color:#1e1e1e; - background-color:rgba(171,212,251,0); - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; -} -.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, -.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{ - color:#547da1; - border-color:#ebf3f9; -} -.claro .dijitCalendarYearContainer { - vertical-align:middle; -} -.claro .dijitCalendarYearControl { - padding: 1px 2px 2px 2px; -} -.claro .dijitCalendarYearLabel { - padding:2px 0px 0px 0px; - margin:0; -} -.claro .dijitCalendarYearLabel span { - - vertical-align:middle; -} -.claro .dijitCalendarSelectedYear { - padding:0px 3px; -} -.claro .dijitCalendarNextYear, -.claro .dijitCalendarPreviousYear { - padding: 1px 6px 1px 6px; - font-size:0.909em; -} -.claro .dijitCalendarSelectedYear { - font-size:1.091em; - color:#000; -} -.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{ - background-color:#abd4fb; - border:solid 1px #729dc2; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitCalendarNextYearHover, -.claro .dijitCalendarPreviousYearHover { - color:#000; - border:solid 1px #fefefe; - padding: 0px 5px 0px 5px; - background-color:#eaf4fe; -} -.claro .dijitCalendarNextYearActive, -.claro .dijitCalendarPreviousYearActive { - border: solid 1px #87b3d9; - padding: 0px 5px 0px 5px; - background-color:#90bde6; -} -.claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:url(images/calendarContainerImages.png); - background-position:0px -300px; - background-color:#75b5f0; - border:solid 1px #fff; - -webkit-transition-duration:.1s; -} -.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:none; -} -.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { - color:#000; - background-color:#e7f4ff; - border-color:#accfed; -} -.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { - text-decoration:line-through; - - - background-color: transparent; - border-width: 0px; - padding: 4px 6px 4px 5px; - color: #547DA1; -} -.claro .dijitCalendarMonthContainer .dijitMenu{ - - top: 20px !important; - left: 0px; - border-color: #769dc0; - background-color: #fff; - text-align:center; - background-image: none; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitCalendarMonthLabel{ - border-top: solid 1px #fff; - border-bottom: solid 1px #fff; - padding: 2px 20px; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitMenuItemHover { - background-color: #abd6ff; - border-color: #769dc0; - border-width:1px 0px; - background-image: url(images/commonHighlight.png); - background-repeat:repeat-x; -} -.claro .dijitMenuBar { - border: 1px solid #b5bcc7; - margin: 0px; - padding: 0px; - background-color: #e6e6e7; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitMenuBar { - background-image:none; -} -.claro .dijitMenu { - background-repeat:repeat-y; - background-color:#fff; - border: 1px solid #769dc0; - - margin: -1px 0; -} -.claro .dijitMenuBar .dijitMenuItem { - padding: 6px 10px 7px; - background-position:0px 100px; - color:#4a4a4a; - margin:-1px; -} -.claro .dijitMenuItem { - background-image: url(images/menuHighlight.png); - background-position:0px -40px; - background-repeat:repeat-x; -} -.claro .dijitMenuTable { - border-collapse:separate; - border-spacing:0 0; - padding:0px; -} -.claro .dijitMenuItem td{ - padding:1px; -} -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { - background-color: #abd6ff; - border:solid 1px #769dc0; - background-position:0px 0px; - color:#000; - padding: 5px 9px 6px; -} -.claro .dijitMenuPassive .dijitMenuItemActive{ - background-position:0px -177px; -} -.dj_ie6 .claro .dijitMenuItem, -.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { - background-image: none; -} -.claro .dijitMenuActive .dijitMenuItemHover, -.claro .dijitMenuActive .dijitMenuItemSelected { - border:solid 1px #769dc0; - padding: 5px 9px 6px; - background-color: #9dcfff; - background-position:0px 0px; - color:#000; -} -.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, -.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, -.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, -.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { - padding-top: 6px; - padding-bottom: 5px; - margin-top: -3px; -} -.claro .dijitMenuActive .dijitMenuItemActive{ - background-color: #7dbefa; - background-position:0px -177px; -} -.claro .dijitMenuItemActive { - background-position:0px -177px; -} -.claro td.dijitMenuItemIconCell { - padding: 2px; - margin: 0px 0px 0px 4px; -} -.claro td.dijitMenuItemLabel { - padding-top: 5px; - padding-bottom: 5px; -} -.claro .dijitMenuExpand { - width: 7px; - height: 7px; - background-image: url(images/spriteArrows.png); - background-position: -14px 0px; - margin-right:3px; -} -.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { - opacity:1; -} -.claro .dijitMenuSeparatorTop { - height: auto; - margin-top:1px; - border-bottom: 1px solid #b5bcc7 -} -.claro .dijitMenuSeparatorBottom{ - height: auto; - margin-bottom:1px; -} -.claro .dijitCheckedMenuItemIconChar { - display: none; -} -.claro .dijitCheckedMenuItemIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat:no-repeat; - background-position: -15px 50%; - width:15px; - height:16px; -} -.dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { - background-position: 0 50%; -} -.claro .dijitComboBoxMenu { - margin-left:0px; - background-image: none; -} -.claro .dijitComboBoxMenu .dijitMenuItem{ - padding:2px 0px; - text-indent:6px; - border-width:1px 0px 1px 0px; - border-style:solid; - border-color:#fff; -} -.claro .dijitComboBoxMenu .dijitMenuItemSelected { - color:#000; - border-color:#768dc0; - background-color:#abd6ff; -} -.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position:0px -177px; - background-color:#7dbefa; -} -.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { - font-style: italic; -} -.claro .dijitSliderBar { - border-style: solid; - outline: 1px; -} -.claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; -} -.claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url(form/images/sliderHorizontal.png); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url(form/images/sliderHorizontal.png); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; -} -.claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; -} -.claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; -} -.claro .dijitRuleLabelsContainerV { - padding: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url(form/images/sliderVertical.png); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url(form/images/sliderVertical.png); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; -} -.claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; -} -.claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; -} -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; -} -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, -.claro .dijitSliderDisabled .dijitSliderTopBumper{ - background-color: #efefef; -} -.claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url(form/images/sliderThumbs.png); - background-repeat:no-repeat; - background-position:0 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; -} -.claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url(form/images/sliderThumbs.png); - background-repeat:no-repeat; - background-position:-289px 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; -} -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; -} -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH, -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - background-image: url(form/images/commonFormArrows.png); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH, -.claro .dijitSliderActive .dijitSliderIncrementIconH, -.claro .dijitSliderActive .dijitSliderDecrementIconV, -.claro .dijitSliderActive .dijitSliderIncrementIconV, -.claro .dijitSliderHover .dijitSliderDecrementIconH, -.claro .dijitSliderHover .dijitSliderIncrementIconH, -.claro .dijitSliderHover .dijitSliderDecrementIconV, -.claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; -} -.claro .dijitSliderDecrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; -} -.claro .dijitSliderIncrementIconH { - background-position:-251px 50%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; -} -.claro .dijitSliderDecrementIconV { - background-position:-38px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; -} -.claro .dijitSliderIncrementIconV { - background-position:-143px 49%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 49%; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cce3fc; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; -} -.claro .dijitSliderButtonInner { - visibility: hidden; -} -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; -} -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, -.claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position:-215px 50%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, -.claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position:-3px 49%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, -.claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position:-107px 49%; - background-color:#e9e9e9; -} -.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, -.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, -.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, -.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, -.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; -} -.claro .dijitColorPalette { - outline: 1px solid #769dc0; - border: 1px solid #c0ccdf; - background:#fff; - -moz-border-radius: 0px; -} -.claro .dijitColorPalette .dijitPaletteImg { - - border: 1px solid #cecece; -} -.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 1px solid #000; -} -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; -} -.claro .dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; -} -.claro .dijitInlineEditBoxDisplayModeHover { - background-color: #e2f1ff; - border: solid 1px #769dc0; -} -.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { - border: none; -} - -.claro .dijitProgressBar { - margin:2px 0px 2px 0px; -} -.claro .dijitProgressBarEmpty { - - background:#fff url(images/progressBarEmpty.png) repeat-none left; - border-color: #769dc0; -} -.claro .dijitProgressBarTile { - - background:#9dcfff url(images/progressBarFull.png) repeat-x top; -} -.dj_ie6 .claro .dijitProgressBarTile { - background-image: none; -} -.claro .dijitProgressBarFull { - border-right:1px solid #769dc0; -} -.claro .dijitProgressBarLabel { - - color:#293a4b; -} -.claro .dijitProgressBarIndeterminate .dijitProgressBarTile { - - background:#cad2de url(images/progressBarAnim.gif) repeat-x top; -} -.claro .dijitTimePicker .dijitButtonNode { - padding: 0 0; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; -} -.claro .dijitTimePicker{ - border:1px #b5bcc7 solid; - border-top:none; - border-bottom:none; - background-color:#fff; -} -.claro .dijitTimePickerItem{ - - background-image: url(images/commonHighlight.png); - background-position:0px -1px; - background-repeat:repeat-x; - border-top:solid 1px #b5bcc7; - border-bottom:solid 1px #b5bcc7; - margin-right:-1px; - margin-left:-1px; - margin-top:-1px; -} -.dj_ie6 .claro .dijitTimePickerItem { - background-image: none; -} -.claro .dijitTimePickerTick { - - color:#7a7a7a; - background-color:#f2f2f2; - font-size:0.818em; -} -.claro .dijitTimePickerMarker { - - color:#000; - background-color:#e3f2ff; - font-size: 1em; - white-space: nowrap; -} -.claro .dijitTimePickerTickHover, -.claro .dijitTimePickerMarkerHover, -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - background-color: #83c0fa; - color:#000; - border:solid 1px #b5bcc7; - margin-left:-7px; - margin-right:-7px; -} -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - font-size: 1em; - } -.dj_ie .claro .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerTickSelected { - width: 114%; -} -.dj_ie6 .claro .dijitTimePickerTickHover, -.dj_ie6 .claro .dijitTimePickerMarkerHover, -.dj_ie6 .claro .dijitTimePickerMarkerSelected, -.dj_ie6 .claro .dijitTimePickerTickSelected { - position: relative; - zoom: 1; -} -.claro .dijitTimePickerTick .dijitTimePickerItemInner { - padding:1px; - margin:0px; -} -.claro .dijitTimePicker .dijitButtonNode { - border-left:none; - border-right:none; - border-color:#b5bcc7; - background-color: #f6f7fa; - background-image: url(images/commonHighlight.png); - background-position:0px -1px; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; -} -.claro .dijitTimePicker .dijitArrowButtonInner{ - height: 100%; - background-image: url(form/images/commonFormArrows.png); - background-repeat: no-repeat; - background-position:-140px 45%; -} -.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ - background-position:-35px 45%; -} -.claro .dijitTimePicker .dijitUpArrowHover, -.claro .dijitTimePicker .dijitDownArrowHover { - background-color: #abd6ff; -} -.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { - background-position:-175px 45%; -} -.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { - background-position:-70px 45%; -} -.claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; -} -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; -} -.claro .dijitBorderContainer-dijitTabContainerTop, -.claro .dijitBorderContainer-dijitTabContainerBottom, -.claro .dijitBorderContainer-dijitTabContainerLeft, -.claro .dijitBorderContainer-dijitTabContainerRight, -.claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; -} -.claro .dijitBorderContainer-dijitBorderContainer { - - border: 1px #c0ccdf solid; - padding: 5px; -} -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; -} -.claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; -} -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; -} -.claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; -} -.claro .dijitSplitterHHover { - font-size: 1px; - background: url(layout/images/splitterHorizontalHover.png) no-repeat center top; -} -.claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; -} -.claro .dijitSplitterVHover { - font-size: 1px; - background: url(layout/images/splitterVerticalHover.png) no-repeat center left; -} -.claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; -} -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; -} -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; -} -.claro .dijitTreeNode { - zoom: 1; -} -.claro .dijitTreeIsRoot { - background-image: none; -} -.claro .dijitTreeRow { - - padding: 4px 1px 2px 0px; - margin-left: 1px; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - border-color: rgba(118,157,192,0); - background-color: rgba(171,214,255,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.25s ; - -webkit-transition-timing-function: ease-out; -} -.dj_ie6 .claro .dijitTreeRow { - background-image: none; -} -.claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:#d8edff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #c3e2fd; - color:#000; -} -.claro .dijitTreeRowHover { - background-color:#abd6ff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; - -webkit-transition-duration:.25s ; -} -.claro .dijitTreeRowActive { - background-color:#7dbefa; - background-position:0px -177px; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; -} -.dj_ie6 .claro .dijitTreeRowActive { - background-image: none; -} -.claro .dijitTreeRowFocused { - background-repeat: repeat; -} -.claro .dijitTreeExpando { - background-image: url(images/treeExpandImages.png); - width: 16px; - height: 16px; - background-position: -35px 0px -} -.dj_ie6 .claro .dijitTreeExpando { - background-image: url(images/treeExpandImages8bit.png); -} -.claro .dijitTreeRowHover .dijitTreeExpandoOpened { - background-position: -53px 0px; -} -.claro .dijitTreeExpandoClosed { - background-position: 1px 0px; -} -.claro .dijitTreeRowHover .dijitTreeExpandoClosed { - background-position: -17px 0px; -} -.claro .dijitTreeExpandoLeaf{ - background-image:none; -} -.claro .dijitTreeExpandoLoading { - background-image: url(images/loadingAnimation.gif); -} -.claro .dijitTreeNode .dojoDndItemBefore, -.claro .dijitTreeNode .dojoDndItemAfter { - border-bottom: none; - border-top: none; -} -.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #369; -} -.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #369; -} - -.claro .dijitToolbar { - border-bottom: 1px solid #b5bcc7; - background-color: #f1f1f1; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 2px 0px 2px 4px; - zoom: 1; -} -.claro .dijitToolbar label { - padding: 0px 3px 0 6px; -} -.claro .dijitToolbar .dijitButtonNode { - border:none; - padding: 2px; - background-image: url(images/commonHighlight.png); - background-position:0 -30px; - background-repeat:repeat-x; - background-color:rgba(171,214,255,0); - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s, .35s; -} -.claro .dijitToolbar .dijitComboButton .dijitButtonNode{ - padding: 3px 2px 3px 2px; -} -.dj_ie .claro .dijitToolbar .dijitButtonNode { - background-color: transparent; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - background: none; -} -.claro .dijitToolbar .dijitComboBox .dijitButtonNode { - padding: 0px; -} -.claro .dijitToolbar .dijitComboButton { - padding: 1px; -} -.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { - background-position:0 0; - border:solid 1px #769dc0; - background-color: #abd6ff; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonHover { - background-color: #abd6ff; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-position:0 0; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-color: #7dd6fa; -} -.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { - border:solid 1px #769dc0; - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonActive { - -webkit-transition-duration:.2s; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode { - background-color: #7dbefa; - background-position:0px -177px; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - background-color: #7dbefa; -} -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - border-color: #769dc0; - background-color:#fff; - padding: 1px; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonContents, -.dj_ie7 .claro .dijitToolbar .dijitButtonContents { - margin: -2px 0; - padding: 0; -} -.dj_ie6 .claro .dijitToolbar { - background-image: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - margin: 1px; - border: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - margin: 0; - border-width: 1px; - border-style: solid; - background-image: none; -} -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - padding: 1px; -} -.claro .dijitToolbarSeparator { - - background: url(../../icons/images/editorIconsEnabled.png); -} -.claro .dijitDisabled .dijitToolbar { - background:none; - background-color:#f5f5f5; - border-bottom: 1px solid #d3d3d3; -} -.claro .dijitEditorIFrameContainer{ - padding:3px 3px 1px 10px; -} -.claro .dijitEditorIFrame { - background-color: #fff; -} -.claro .dijitEditor { - border: 1px solid #b5bcc7; -} -.claro .dijitEditor .dijitEditorIFrameContainer{ - background-color: #fff; - background-image: url(form/images/textBox_back.png); - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ - background-image: none; -} -.claro .dijitEditorHover .dijitEditorIFrameContainer, -.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ - background-color: #eef7ff; -} -.claro .dijitEditorFocused .dijitEditorIFrameContainer, -.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ - - background-color: #fff; -} -.claro .dijitEditorDisabled { - border: 1px solid #d3d3d3; - color: #818181; -} -.claro .dijitDisabled .dijitEditorIFrame, -.claro .dijitDisabled .dijitEditorIFrameContainer { - background-color: #efefef; - background-image: none; -} -.dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled.png); - background-repeat: no-repeat; - width: 18px; - height: 18px; - text-align: center; -} -.dijitDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled.png); -} -.dijitEditorIconSep { background-position: 0px; } -.dijitEditorIconSave { background-position: -18px; } -.dijitEditorIconPrint { background-position: -36px; } -.dijitEditorIconCut { background-position: -54px; } -.dijitEditorIconCopy { background-position: -72px; } -.dijitEditorIconPaste { background-position: -90px; } -.dijitEditorIconDelete { background-position: -108px; } -.dijitEditorIconCancel { background-position: -126px; } -.dijitEditorIconUndo { background-position: -144px; } -.dijitEditorIconRedo { background-position: -162px; } -.dijitEditorIconSelectAll { background-position: -180px; } -.dijitEditorIconBold { background-position: -198px; } -.dijitEditorIconItalic { background-position: -216px; } -.dijitEditorIconUnderline { background-position: -234px; } -.dijitEditorIconStrikethrough { background-position: -252px; } -.dijitEditorIconSuperscript { background-position: -270px; } -.dijitEditorIconSubscript { background-position: -288px; } -.dijitEditorIconJustifyCenter { background-position: -306px; } -.dijitEditorIconJustifyFull { background-position: -324px; } -.dijitEditorIconJustifyLeft { background-position: -342px; } -.dijitEditorIconJustifyRight { background-position: -360px; } -.dijitEditorIconIndent { background-position: -378px; } -.dijitEditorIconOutdent { background-position: -396px; } -.dijitEditorIconListBulletIndent { background-position: -414px; } -.dijitEditorIconListBulletOutdent { background-position: -432px; } -.dijitEditorIconListNumIndent { background-position: -450px; } -.dijitEditorIconListNumOutdent { background-position: -468px; } -.dijitEditorIconTabIndent { background-position: -486px; } -.dijitEditorIconLeftToRight { background-position: -504px; } -.dijitEditorIconRightToLeft, .dijitEditorIconToggleDir { background-position: -522px; } -.dijitEditorIconBackColor { background-position: -540px; } -.dijitEditorIconForeColor { background-position: -558px; } -.dijitEditorIconHiliteColor { background-position: -576px; } -.dijitEditorIconNewPage { background-position: -594px; } -.dijitEditorIconInsertImage { background-position: -612px; } -.dijitEditorIconInsertTable { background-position: -630px; } -.dijitEditorIconSpace { background-position: -648px; } -.dijitEditorIconInsertHorizontalRule { background-position: -666px; } -.dijitEditorIconInsertOrderedList { background-position: -684px; } -.dijitEditorIconInsertUnorderedList { background-position: -702px; } -.dijitEditorIconCreateLink { background-position: -720px; } -.dijitEditorIconUnlink { background-position: -738px; } -.dijitEditorIconViewSource { background-position: -756px; } -.dijitEditorIconRemoveFormat { background-position: -774px; } -.dijitEditorIconFullScreen { background-position: -792px; } -.dijitEditorIconWikiword { background-position: -810px; } - -.claro .dijitTitlePaneTitle { - background-color: #e6e6e7; - background-image: url(images/titlebar.png); - background-repeat:repeat-x; - border:1px solid #b5bcc7; - padding: 0px 7px 3px 7px; - min-height:17px; - color:#131313; -} -.dj_ie6 .claro .dijitTitlePaneTitle { - background-image: none; -} -.claro .dijitTitlePaneTitleHover { - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitTitlePaneTitleActive { - background-color: #7dbefa; - border-color: #769dc0; - background-position:0px -136px; -} -.claro .dijitTitlePaneTitleFocus { - margin-top:3px; - padding-bottom:2px; -} -.claro .dijitTitlePane .dijitArrowNode { - background-image: url(images/spriteArrows.png); - background-repeat: no-repeat; - height: 8px; - width: 7px; -} -.claro .dijitTitlePane .dijitOpen .dijitArrowNode { - background-position: 0px 0px; -} -.claro .dijitTitlePane .dijitClosed .dijitArrowNode { - background-position: -14px 0px; -} -.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { - color:#000; -} -.claro .dijitTitlePaneContentOuter { - background: #ffffff; - border:1px solid #b5bcc7; - border-top:none; -} -.claro .dijitTitlePaneContentInner { - padding:10px; -} -.claro .dijitTitlePaneTextNode { - margin-left: 4px; - margin-right: 4px; - vertical-align:text-top; -} -.claro .dijitSpinnerButtonContainer { - overflow: hidden; - position: relative; - width: auto; - padding: 0 2px; -} -.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - border-style: solid none; -} -.claro .dijitSpinner .dijitArrowButton { - width:auto; - background-color: #ebeef4; - background-image: url(form/images/formHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - overflow: hidden; -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; -} -.claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; -} -.claro .dijitSpinner .dijitArrowButtonInner { - border:solid 1px #fff; - border-bottom-width: 0; - background-image: url(form/images/commonFormArrows.png); - background-repeat: no-repeat; - height: 100%; - width:15px; - padding-left: 1px; - padding-right: 1px; - - background-position:-139px center; - - display: block; - margin: -1px 0px -1px 0px; - #margin-top: 0; -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; -} -.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position:-34px; -} -.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; -} -.claro .dijitUpArrowButtonActive, -.claro .dijitDownArrowButtonActive { - background-color:#abd6ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover, -.claro .dijitSpinner .dijitDownArrowButtonHover, -.claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #a0d1ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position:-174px; -} -.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position:-69px; -} -.claro .dijitSpinnerFocused { - background-color: #fff; - background-image: none; -} -.claro .dijitSpinner .dijitDownArrowButtonActive, -.claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #3299f9; - background-position:0px -177px; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - - border: 0px; - padding: 1px; - margin-right:2px; - margin-bottom:1px; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { - background-position:-173px; -} -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position:-68px; -} -.claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #f1f1f1; -} -.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position:-104px; -} -.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position:1px; -} -.dj_ie7 .claro .dijitSpinner { - overflow:visible; -} -.dijitRtl .dijitPlaceHolder { - left: auto; - right: 0; -} -.dijitMenuItemRtl { - text-align: right; -} -.dj_iequirks .dijitComboButtonRtl BUTTON { - - float:left; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitComboBoxRtl .dijitArrowButtonContainer { - - border-right-width: 1px !important; - border-right-style: solid !important; - border-left-width: 0px !important; - border-left-style: none !important; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer { - border-right: 1px solid black !important; - border-left: 0px none black !important; -} -.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { - right: 0; - left: auto; -} -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitArrowButtonContainer { - float: left; -} -.dijitCalendarRtl .dijitCalendarNextYear { - margin:0 0.55em 0 0; -} -.dijitCalendarRtl .dijitCalendarPreviousYear { - margin:0 0 0 0.55em; -} -.dijitSliderRtl .dijitSliderImageHandleV { - left:auto; -} -.dijitSliderRtl .dijitSliderImageHandleH { - left:-50%; -} -.dijitSliderRtl .dijitSliderMoveableH { - right:auto; - left:0; -} -.dijitSliderRtl .dijitRuleContainerV { - float:right; -} -.dj_ie .dijitSliderRtl .dijitRuleContainerV { - text-align:right; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelV { - text-align:left; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelH { - zoom:1; -} -.dijitSliderRtl .dijitSliderProgressBarH { - - float:right; - right:0; - left:auto; -} -.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError { - background-position:right; - padding-right:25px; -} -.dijitTabRtl .dijitTabCloseButton { - margin-left: 0px; - margin-right: 1em; -} -.dj_ie .dijitTimePickerRtl .dijitTimePickerItem { - width:100%; -} -.dijitColorPaletteRtl .dijitColorPaletteUnder { - - left: auto; - right: 0; -} -.dijitSelectRtl .dijitButtonContents { - text-align: right; -} -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; -} -.claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; -} -.dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; -} -.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; -} -.dj_ie6 .claro .dijitTabRtl .tabLabel, -.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, -.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; -} -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; -} -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; -} -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; -} -.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; -} -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; -} -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; -} -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; -} -.dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; -} -.claro .dijitSliderRtl .dijitSliderProgressBarH, -.claro .dijitSliderRtl .dijitSliderRemainingBarH, -.claro .dijitSliderRtl .dijitSliderLeftBumper, -.claro .dijitSliderRtl .dijitSliderRightBumper, -.claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; -} -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; -} -.claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; -} -.claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; -} -.claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; -} -.claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; -} -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; -} -.dijitEditorRtl .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitEditorRtlDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled_rtl.png); -} -.dijitToolbarRtl .dijitToolbarSeparator { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitRtl .dijitIconSave, -.dijitRtl .dijitIconPrint, -.dijitRtl .dijitIconCut, -.dijitRtl .dijitIconCopy, -.dijitRtl .dijitIconClear, -.dijitRtl .dijitIconDelete, -.dijitRtl .dijitIconUndo, -.dijitRtl .dijitIconEdit, -.dijitRtl .dijitIconNewTask, -.dijitRtl .dijitIconEditTask, -.dijitRtl .dijitIconEditProperty, -.dijitRtl .dijitIconTask, -.dijitRtl .dijitIconFilter, -.dijitRtl .dijitIconConfigure, -.dijitRtl .dijitIconSearch, -.dijitRtl .dijitIconApplication, -.dijitRtl .dijitIconBookmark, -.dijitRtl .dijitIconChart, -.dijitRtl .dijitIconConnector, -.dijitRtl .dijitIconDatabase, -.dijitRtl .dijitIconDocuments, -.dijitRtl .dijitIconMail, -.dijitRtl .dijitLeaf, -.dijitRtl .dijitIconFile, -.dijitRtl .dijitIconFunction, -.dijitRtl .dijitIconKey, -.dijitRtl .dijitIconPackage, -.dijitRtl .dijitIconSample, -.dijitRtl .dijitIconTable, -.dijitRtl .dijitIconUsers, -.dijitRtl .dijitFolderClosed, -.dijitRtl .dijitIconFolderClosed, -.dijitRtl .dijitFolderOpened, -.dijitRtl .dijitIconFolderOpen, -.dijitRtl .dijitIconError, .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled_rtl.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitRtl .dijitIconSave, -.dj_ie6 .dijitRtl .dijitIconPrint, -.dj_ie6 .dijitRtl .dijitIconCut, -.dj_ie6 .dijitRtl .dijitIconCopy, -.dj_ie6 .dijitRtl .dijitIconClear, -.dj_ie6 .dijitRtl .dijitIconDelete, -.dj_ie6 .dijitRtl .dijitIconUndo, -.dj_ie6 .dijitRtl .dijitIconEdit, -.dj_ie6 .dijitRtl .dijitIconNewTask, -.dj_ie6 .dijitRtl .dijitIconEditTask, -.dj_ie6 .dijitRtl .dijitIconEditProperty, -.dj_ie6 .dijitRtl .dijitIconTask, -.dj_ie6 .dijitRtl .dijitIconFilter, -.dj_ie6 .dijitRtl .dijitIconConfigure, -.dj_ie6 .dijitRtl .dijitIconSearch, -.dj_ie6 .dijitRtl .dijitIconApplication, -.dj_ie6 .dijitRtl .dijitIconBookmark, -.dj_ie6 .dijitRtl .dijitIconChart, -.dj_ie6 .dijitRtl .dijitIconConnector, -.dj_ie6 .dijitRtl .dijitIconDatabase, -.dj_ie6 .dijitRtl .dijitIconDocuments, -.dj_ie6 .dijitRtl .dijitIconMail, -.dj_ie6 .dijitRtl .dijitLeaf, -.dj_ie6 .dijitRtl .dijitIconFile, -.dj_ie6 .dijitRtl .dijitIconFunction, -.dj_ie6 .dijitRtl .dijitIconKey, -.dj_ie6 .dijitRtl .dijitIconPackage, -.dj_ie6 .dijitRtl .dijitIconSample, -.dj_ie6 .dijitRtl .dijitIconTable, -.dj_ie6 .dijitRtl .dijitIconUsers, -.dj_ie6 .dijitRtl .dijitFolderClosed, -.dj_ie6 .dijitRtl .dijitIconFolderClosed, -.dj_ie6 .dijitRtl .dijitFolderOpened, -.dj_ie6 .dijitRtl .dijitIconFolderOpen, -.dj_ie6 .dijitRtl .dijitIconError, .dj_ie6 .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit_rtl.png); -} -.dijitRtl .dijitDisabled .dijitIconSave, -.dijitRtl .dijitDisabled .dijitIconPrint, -.dijitRtl .dijitDisabled .dijitIconCut, -.dijitRtl .dijitDisabled .dijitIconCopy, -.dijitRtl .dijitDisabled .dijitIconClear, -.dijitRtl .dijitDisabled .dijitIconDelete, -.dijitRtl .dijitDisabled .dijitIconUndo, -.dijitRtl .dijitDisabled .dijitIconEdit, -.dijitRtl .dijitDisabled .dijitIconNewTask, -.dijitRtl .dijitDisabled .dijitIconEditTask, -.dijitRtl .dijitDisabled .dijitIconEditProperty, -.dijitRtl .dijitDisabled .dijitIconTask, -.dijitRtl .dijitDisabled .dijitIconFilter, -.dijitRtl .dijitDisabled .dijitIconConfigure, -.dijitRtl .dijitDisabled .dijitIconSearch, -.dijitRtl .dijitDisabled .dijitIconApplication, -.dijitRtl .dijitDisabled .dijitIconBookmark, -.dijitRtl .dijitDisabled .dijitIconChart, -.dijitRtl .dijitDisabled .dijitIconConnector, -.dijitRtl .dijitDisabled .dijitIconDatabase, -.dijitRtl .dijitDisabled .dijitIconDocuments, -.dijitRtl .dijitDisabled .dijitIconMail, -.dijitRtl .dijitDisabled .dijitLeaf, -.dijitRtl .dijitDisabled .dijitIconFile, -.dijitRtl .dijitDisabled .dijitIconFunction, -.dijitRtl .dijitDisabled .dijitIconKey, -.dijitRtl .dijitDisabled .dijitIconPackage, -.dijitRtl .dijitDisabled .dijitIconSample, -.dijitRtl .dijitDisabled .dijitIconTable, -.dijitRtl .dijitDisabled .dijitIconUsers, -.dijitRtl .dijitDisabled .dijitFolderClosed, -.dijitRtl .dijitDisabled .dijitIconFolderClosed, -.dijitRtl .dijitDisabled .dijitFolderOpened, -.dijitRtl .dijitDisabled .dijitIconFolderOpen, -.dijitRtl .dijitDisabled .dijitIconError, .dijitRtl .dijitDisabled .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActDisabled_rtl.png); -} -.dijitRtl .dijitContentPaneLoading { - background:url(../../icons/images/loadingAnimation_rtl.gif) no-repeat; -} -.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; -} -.claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; -} -.claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; -} -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; -} +@import url("claro_rtl.css"); diff --git a/lib/dijit/themes/claro/claro_rtl.css b/lib/dijit/themes/claro/claro_rtl.css index 01a0342cd..6f85707f5 100644 --- a/lib/dijit/themes/claro/claro_rtl.css +++ b/lib/dijit/themes/claro/claro_rtl.css @@ -1,380 +1,16 @@ - -.dijitRtl .dijitPlaceHolder { - left: auto; - right: 0; -} -.dijitMenuItemRtl { - text-align: right; -} -.dj_iequirks .dijitComboButtonRtl BUTTON { - - float:left; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitComboBoxRtl .dijitArrowButtonContainer { - - border-right-width: 1px !important; - border-right-style: solid !important; - border-left-width: 0px !important; - border-left-style: none !important; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer { - border-right: 1px solid black !important; - border-left: 0px none black !important; -} -.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { - right: 0; - left: auto; -} -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitArrowButtonContainer { - float: left; -} -.dijitCalendarRtl .dijitCalendarNextYear { - margin:0 0.55em 0 0; -} -.dijitCalendarRtl .dijitCalendarPreviousYear { - margin:0 0 0 0.55em; -} -.dijitSliderRtl .dijitSliderImageHandleV { - left:auto; -} -.dijitSliderRtl .dijitSliderImageHandleH { - left:-50%; -} -.dijitSliderRtl .dijitSliderMoveableH { - right:auto; - left:0; -} -.dijitSliderRtl .dijitRuleContainerV { - float:right; -} -.dj_ie .dijitSliderRtl .dijitRuleContainerV { - text-align:right; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelV { - text-align:left; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelH { - zoom:1; -} -.dijitSliderRtl .dijitSliderProgressBarH { - - float:right; - right:0; - left:auto; -} -.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError { - background-position:right; - padding-right:25px; -} -.dijitTabRtl .dijitTabCloseButton { - margin-left: 0px; - margin-right: 1em; -} -.dj_ie .dijitTimePickerRtl .dijitTimePickerItem { - width:100%; -} -.dijitColorPaletteRtl .dijitColorPaletteUnder { - - left: auto; - right: 0; -} -.dijitSelectRtl .dijitButtonContents { - text-align: right; -} -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; -} -.claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; -} -.dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; -} -.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; -} -.dj_ie6 .claro .dijitTabRtl .tabLabel, -.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, -.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; -} -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; -} -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; -} -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; -} -.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; -} -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; -} -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; -} -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; -} -.dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; -} -.claro .dijitSliderRtl .dijitSliderProgressBarH, -.claro .dijitSliderRtl .dijitSliderRemainingBarH, -.claro .dijitSliderRtl .dijitSliderLeftBumper, -.claro .dijitSliderRtl .dijitSliderRightBumper, -.claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; -} -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; -} -.claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; -} -.claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; -} -.claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; -} -.claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; -} -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; -} -.dijitEditorRtl .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitEditorRtlDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled_rtl.png); -} -.dijitToolbarRtl .dijitToolbarSeparator { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitRtl .dijitIconSave, -.dijitRtl .dijitIconPrint, -.dijitRtl .dijitIconCut, -.dijitRtl .dijitIconCopy, -.dijitRtl .dijitIconClear, -.dijitRtl .dijitIconDelete, -.dijitRtl .dijitIconUndo, -.dijitRtl .dijitIconEdit, -.dijitRtl .dijitIconNewTask, -.dijitRtl .dijitIconEditTask, -.dijitRtl .dijitIconEditProperty, -.dijitRtl .dijitIconTask, -.dijitRtl .dijitIconFilter, -.dijitRtl .dijitIconConfigure, -.dijitRtl .dijitIconSearch, -.dijitRtl .dijitIconApplication, -.dijitRtl .dijitIconBookmark, -.dijitRtl .dijitIconChart, -.dijitRtl .dijitIconConnector, -.dijitRtl .dijitIconDatabase, -.dijitRtl .dijitIconDocuments, -.dijitRtl .dijitIconMail, -.dijitRtl .dijitLeaf, -.dijitRtl .dijitIconFile, -.dijitRtl .dijitIconFunction, -.dijitRtl .dijitIconKey, -.dijitRtl .dijitIconPackage, -.dijitRtl .dijitIconSample, -.dijitRtl .dijitIconTable, -.dijitRtl .dijitIconUsers, -.dijitRtl .dijitFolderClosed, -.dijitRtl .dijitIconFolderClosed, -.dijitRtl .dijitFolderOpened, -.dijitRtl .dijitIconFolderOpen, -.dijitRtl .dijitIconError, .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled_rtl.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitRtl .dijitIconSave, -.dj_ie6 .dijitRtl .dijitIconPrint, -.dj_ie6 .dijitRtl .dijitIconCut, -.dj_ie6 .dijitRtl .dijitIconCopy, -.dj_ie6 .dijitRtl .dijitIconClear, -.dj_ie6 .dijitRtl .dijitIconDelete, -.dj_ie6 .dijitRtl .dijitIconUndo, -.dj_ie6 .dijitRtl .dijitIconEdit, -.dj_ie6 .dijitRtl .dijitIconNewTask, -.dj_ie6 .dijitRtl .dijitIconEditTask, -.dj_ie6 .dijitRtl .dijitIconEditProperty, -.dj_ie6 .dijitRtl .dijitIconTask, -.dj_ie6 .dijitRtl .dijitIconFilter, -.dj_ie6 .dijitRtl .dijitIconConfigure, -.dj_ie6 .dijitRtl .dijitIconSearch, -.dj_ie6 .dijitRtl .dijitIconApplication, -.dj_ie6 .dijitRtl .dijitIconBookmark, -.dj_ie6 .dijitRtl .dijitIconChart, -.dj_ie6 .dijitRtl .dijitIconConnector, -.dj_ie6 .dijitRtl .dijitIconDatabase, -.dj_ie6 .dijitRtl .dijitIconDocuments, -.dj_ie6 .dijitRtl .dijitIconMail, -.dj_ie6 .dijitRtl .dijitLeaf, -.dj_ie6 .dijitRtl .dijitIconFile, -.dj_ie6 .dijitRtl .dijitIconFunction, -.dj_ie6 .dijitRtl .dijitIconKey, -.dj_ie6 .dijitRtl .dijitIconPackage, -.dj_ie6 .dijitRtl .dijitIconSample, -.dj_ie6 .dijitRtl .dijitIconTable, -.dj_ie6 .dijitRtl .dijitIconUsers, -.dj_ie6 .dijitRtl .dijitFolderClosed, -.dj_ie6 .dijitRtl .dijitIconFolderClosed, -.dj_ie6 .dijitRtl .dijitFolderOpened, -.dj_ie6 .dijitRtl .dijitIconFolderOpen, -.dj_ie6 .dijitRtl .dijitIconError, .dj_ie6 .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit_rtl.png); -} -.dijitRtl .dijitDisabled .dijitIconSave, -.dijitRtl .dijitDisabled .dijitIconPrint, -.dijitRtl .dijitDisabled .dijitIconCut, -.dijitRtl .dijitDisabled .dijitIconCopy, -.dijitRtl .dijitDisabled .dijitIconClear, -.dijitRtl .dijitDisabled .dijitIconDelete, -.dijitRtl .dijitDisabled .dijitIconUndo, -.dijitRtl .dijitDisabled .dijitIconEdit, -.dijitRtl .dijitDisabled .dijitIconNewTask, -.dijitRtl .dijitDisabled .dijitIconEditTask, -.dijitRtl .dijitDisabled .dijitIconEditProperty, -.dijitRtl .dijitDisabled .dijitIconTask, -.dijitRtl .dijitDisabled .dijitIconFilter, -.dijitRtl .dijitDisabled .dijitIconConfigure, -.dijitRtl .dijitDisabled .dijitIconSearch, -.dijitRtl .dijitDisabled .dijitIconApplication, -.dijitRtl .dijitDisabled .dijitIconBookmark, -.dijitRtl .dijitDisabled .dijitIconChart, -.dijitRtl .dijitDisabled .dijitIconConnector, -.dijitRtl .dijitDisabled .dijitIconDatabase, -.dijitRtl .dijitDisabled .dijitIconDocuments, -.dijitRtl .dijitDisabled .dijitIconMail, -.dijitRtl .dijitDisabled .dijitLeaf, -.dijitRtl .dijitDisabled .dijitIconFile, -.dijitRtl .dijitDisabled .dijitIconFunction, -.dijitRtl .dijitDisabled .dijitIconKey, -.dijitRtl .dijitDisabled .dijitIconPackage, -.dijitRtl .dijitDisabled .dijitIconSample, -.dijitRtl .dijitDisabled .dijitIconTable, -.dijitRtl .dijitDisabled .dijitIconUsers, -.dijitRtl .dijitDisabled .dijitFolderClosed, -.dijitRtl .dijitDisabled .dijitIconFolderClosed, -.dijitRtl .dijitDisabled .dijitFolderOpened, -.dijitRtl .dijitDisabled .dijitIconFolderOpen, -.dijitRtl .dijitDisabled .dijitIconError, .dijitRtl .dijitDisabled .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActDisabled_rtl.png); -} -.dijitRtl .dijitContentPaneLoading { - background:url(../../icons/images/loadingAnimation_rtl.gif) no-repeat; -} -.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; -} -.claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; -} -.claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; -} -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; -} +/* RTL files */ +@import url("../dijit_rtl.css"); +@import url("form/Common_rtl.css"); +@import url("form/Button_rtl.css"); +@import url("layout/TabContainer_rtl.css"); +@import url("form/Slider_rtl.css"); +@import url("form/Select_rtl.css"); +@import url("Dialog_rtl.css"); +@import url("Editor_rtl.css"); +@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/ +@import url("../../icons/commonIcons_rtl.css");/* RTL sprite for common icons to be used by all themes*/ +@import url("TitlePane_rtl.css"); +@import url("Menu_rtl.css"); +@import url("Calendar_rtl.css"); +@import url("TimePicker_rtl.css"); +@import url("Toolbar_rtl.css"); diff --git a/lib/dijit/themes/claro/compile.js b/lib/dijit/themes/claro/compile.js new file mode 100644 index 000000000..14762b592 --- /dev/null +++ b/lib/dijit/themes/claro/compile.js @@ -0,0 +1,62 @@ +/* + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. + Available via Academic Free License >= 2.1 OR the modified BSD license. + see: http://dojotoolkit.org/license for details +*/ + + +// Script to process all the less files and convert them to CSS files +// Run from themes/dijit/claro like: +// +// $ node compile.js + +// Some guesses for where to find less +require.paths.unshift('/opt/less/lib', 'C:/less/lib'); + +var fs = require('fs'), // file system access + path = require('path'), // get directory from file name + less = require('less'); // less processor + +var options = { + compress: false, + optimization: 1, + silent: false +}; + +var allFiles = [].concat( + fs.readdirSync("."), + fs.readdirSync("form").map(function(fname){ return "form/"+fname; }), + fs.readdirSync("layout").map(function(fname){ return "layout/"+fname; }) + ), + lessFiles = allFiles.filter(function(name){ return name && name != "variables.less" && /\.less$/.test(name); }); + +lessFiles.forEach(function(fname){ + console.log("=== " + fname); + fs.readFile(fname, 'utf-8', function (e, data){ + if(e){ + console.error("lessc: " + e.message); + process.exit(1); + } + + new(less.Parser)({ + paths: [path.dirname(fname)], + optimization: options.optimization, + filename: fname + }).parse(data, function(err, tree){ + if(err){ + less.writeError(err, options); + process.exit(1); + }else{ + try{ + var css = tree.toCSS({ compress: options.compress }), + outputFname = fname.replace('.less', '.css'); + fd = fs.openSync(outputFname, "w"); + fs.writeSync(fd, css, 0, "utf8"); + }catch(e){ + less.writeError(e, options); + process.exit(2); + } + } + }); + }); +}); diff --git a/lib/dijit/themes/claro/document.css b/lib/dijit/themes/claro/document.css index 72f9b1b40..64e470cf3 100644 --- a/lib/dijit/themes/claro/document.css +++ b/lib/dijit/themes/claro/document.css @@ -1,81 +1,41 @@ - +@import url("../../../dojo/resources/dojo.css"); +/* ======= Styling for the document itself (overriding dojo.css) ======== */ .claro { - font-family:Verdana,Arial,Helvetica,sans-serif; - font-size: .688em; - color: #131313; -} -h1 { - font-size: 1.545em; - font-weight: normal; - line-height: 1em; - margin-top: 1em; - margin-bottom:0.727em; -} -.claro .dijitDialog h1 { - margin-top:0em; -} -h2 { - font-size: 1.364em; - line-height: 1.455em; - margin-top:1em; - margin-bottom:0.60em; - font-weight: normal; -} -h3, h4, h5, h6 { - font-size:1.091em; - font-weight: normal; - line-height: 1.5em; - margin-top: 1.5em; - margin-bottom: 0; -} -p { - font-size: 1em; - line-height: 1.3em; -} -blockquote { - font-size: 0.916em; - margin-top: 3.272em; - margin-bottom: 3.272em; - line-height: 1.636em; - padding: 1.636em; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} -ol li, ul li { - font-size: 1em; - line-height: 1.5em; - margin: 0; -} -pre, code { - font-size:115%; - *font-size:100%; - font-family:inherit; - background-color: #efefef; - border: 1px solid #ccc; -} -pre { - border-width: 1px 0; - padding: 1.5em; -} -table { font-size:100%; } -table.dojoTabular { - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #ccc; - margin: 0 1.5em; -} -.dojoTabular th { - text-align: center; - font-weight: bold; -} -table.dojoTabular thead, table.dojoTabular tfoot { - background-color: #efefef; - border: 1px solid #ccc; - border-width: 1px 0; -} -table.dojoTabular thead tr th, -table.dojoTabular thead tr td, -table.dojoTabular tbody tr td, -table.dojoTabular tfoot tr td { - padding: 0.25em 0.5em; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: #131313; +} +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom: 0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top: 1em; + margin-bottom: 0.60em; + font-weight: normal; +} +.claro h3, +.claro h4, +.claro h5, +.claro h6 { + font-size: 1.091em; + font-weight: normal; +} +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} +/* pre and code */ +.claro pre, .claro code { + font-family: inherit; + background-color: #efefef; + border: 1px solid #d3d3d3; +} +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: #efefef; + border: 1px solid #d3d3d3; } diff --git a/lib/dijit/themes/claro/document.less b/lib/dijit/themes/claro/document.less new file mode 100644 index 000000000..7f8635672 --- /dev/null +++ b/lib/dijit/themes/claro/document.less @@ -0,0 +1,45 @@ +/* ======= Styling for the document itself (overriding dojo.css) ======== */ + +@import "variables"; +@import url("../../../dojo/resources/dojo.css"); + +.claro { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: @document-text-color; +} + +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom:0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top:1em; + margin-bottom:0.60em; + font-weight: normal; +} +.claro h3, .claro h4, .claro h5, .claro h6 { + font-size:1.091em; + font-weight: normal; +} + +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} + +/* pre and code */ +.claro pre, .claro code { + font-family:inherit; + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} + +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index a2a15c0cc..e01a1d313 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -1,125 +1,160 @@ - +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ .claro .dijitButtonNode { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; } .claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode, .claro .dijitComboButton .dijitButtonNode, .claro .dijitToggleButton .dijitButtonNode { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url("images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + + border: 1px solid #769dc0; + padding: 2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: #e9f4fe; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; + border-left-width: 0; + padding: 4px 2px 4px 2px; + /* TODO: still needed? */ + } +/*arrow styles for down/up/left/right directions*/ .claro .dijitArrowButtonInner { - width: 15px; - height: 15px; - margin: 0 auto; - background-image:url("images/buttonArrows.png"); - background-repeat:no-repeat; - background-position:-51px 53%; + width: 15px; + height: 15px; + margin: 0 auto; + background-image: url("images/buttonArrows.png"); + background-repeat: no-repeat; + background-position: -51px 53%; } .claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; + background-position: -77px 53%; } .claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; + background-position: -26px 53%; } .claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; + background-position: 0 53%; } .claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; + background-position: -151px 53%; } .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; + background-position: -177px 53%; } .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; + background-position: -126px 53%; } .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; + background-position: -100px 53%; } .claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; + padding: 0 0.3em; + text-align: center; } +/* hover status */ .claro .dijitButtonHover .dijitButtonNode, .claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, + background-color: #abd6ff; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} + background-color: #abd6ff; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +/* disabled status */ .claro .dijitButtonDisabled, .claro .dijitDropDownButtonDisabled, .claro .dijitComboButtonDisabled, .claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; + background-image: none; + outline: none; } .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position: 0 -149px; + background-color: #efefef; + border: solid 1px #d3d3d3; + color: #818181; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +/* for ComboButton */ .claro table.dijitComboButton { - border-collapse: separate; + border-collapse: separate; + /* override dijit.css so that ComboBox rounded corners work */ + } .dj_ie6 .claro .dijitButtonNode { - background-image: none; + background-image: none; } .claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less new file mode 100644 index 000000000..b076d2a16 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button.less @@ -0,0 +1,154 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ + +@import "../variables"; + +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + .transition-property(background-color); + .transition-duration(.3s); +} + +.claro .dijitButton .dijitButtonNode, +.claro .dijitDropDownButton .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNode, +.claro .dijitToggleButton .dijitButtonNode { + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + border: 1px solid @button-border-color; + padding:2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: @button-background-color; + .border-radius(@button-border-radius); + .box-shadow(0 1px 1px rgba(0,0,0,0.15)); +} + +.claro .dijitComboButton .dijitArrowButton { + border-left-width: 0; + padding: 4px 2px 4px 2px; /* TODO: still needed? */ +} + +/*arrow styles for down/up/left/right directions*/ +.claro .dijitArrowButtonInner { + width: 15px; + height: 15px; + margin: 0 auto; + background-image:url("images/buttonArrows.png"); + background-repeat:no-repeat; + background-position:-51px 53%; +} +.claro .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -77px 53%; +} +.claro .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -26px 53%; +} +.claro .dijitUpArrowButton .dijitArrowButtonInner { + background-position: 0 53%; +} +.claro .dijitDisabled .dijitArrowButtonInner { + background-position: -151px 53%; +} +.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -177px 53%; +} +.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -126px 53%; +} +.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -100px 53%; +} + +.claro .dijitButtonText { + padding: 0 0.3em; + text-align: center; +} + + + + + +/* hover status */ +.claro .dijitButtonHover .dijitButtonNode, +.claro .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitDownArrowButtonHover, +.claro .dijitToggleButtonHover .dijitButtonNode { + background-color: @button-hovered-background-color; + color:@text-color; + .transition-duration(.2s); +} + +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode { + background-color: @button-pressed-background-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); + .transition-duration(.1s); +} + +/* disabled status */ +.claro .dijitButtonDisabled, +.claro .dijitDropDownButtonDisabled, +.claro .dijitComboButtonDisabled, +.claro .dijitToggleButtonDisabled { + background-image: none; + outline: none; +} + +.claro .dijitButtonDisabled .dijitButtonNode, +.claro .dijitDropDownButtonDisabled .dijitButtonNode, +.claro .dijitComboButtonDisabled .dijitButtonNode, +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position:0 -149px; + background-color: @disabled-background-color; + border: solid 1px @disabled-border-color; + color: @disabled-text-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitComboButtonDisabled .dijitArrowButton{ + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} + +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} + +.claro .dijitComboButton .dijitStretch { + .border-radius(@button-border-radius 0 0 @button-border-radius); +} +.claro .dijitComboButton .dijitArrowButton { + .border-radius(0 @button-border-radius @button-border-radius 0); +} diff --git a/lib/dijit/themes/claro/form/Button_rtl.css b/lib/dijit/themes/claro/form/Button_rtl.css index f1484b127..2d5b08bff 100644 --- a/lib/dijit/themes/claro/form/Button_rtl.css +++ b/lib/dijit/themes/claro/form/Button_rtl.css @@ -1,18 +1,13 @@ - +/* Combo Button */ .claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } .claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + padding: 3px 0 4px; + border-left-width: 1px; + border-right-width: 0; } +/* End Combo Button */ \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Button_rtl.less b/lib/dijit/themes/claro/form/Button_rtl.less new file mode 100644 index 000000000..6225d6847 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button_rtl.less @@ -0,0 +1,16 @@ +@import "../variables"; + +/* Combo Button */ + +.claro .dijitComboButtonRtl .dijitStretch { + .border-radius(0 @button-border-radius @button-border-radius 0); +} + +.claro .dijitComboButtonRtl .dijitArrowButton { + .border-radius(@button-border-radius 0 0 @button-border-radius); + padding:3px 0 4px; + border-left-width: 1px; + border-right-width: 0; +} + +/* End Combo Button */ \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Checkbox.css b/lib/dijit/themes/claro/form/Checkbox.css index be3604ddd..5765bb370 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -1,46 +1,71 @@ - +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.png'); + background-image: url('../images/checkmarkNoBorder.png'); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, -.dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; + background-image: url('../images/checkmarkNoBorder.gif'); +} +.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; } -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; +.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + +} +.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + + background-position: -15px; +} +.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + + background-position: 0; } .claro .dijitCheckBoxDisabled { - - background-position: -75px; + /* disabled */ + + background-position: -75px; } .claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; + /* disabled but checked */ + + background-position: -60px; } .claro .dijitCheckBoxHover { - - background-position: -45px; + /* hovering over an unchecked enabled checkbox */ + + background-position: -45px; } .claro .dijitCheckBoxCheckedHover { - - background-position: -30px; + /* hovering over an checked enabled checkbox */ + + background-position: -30px; } diff --git a/lib/dijit/themes/claro/form/Checkbox.less b/lib/dijit/themes/claro/form/Checkbox.less new file mode 100644 index 000000000..21769dca1 --- /dev/null +++ b/lib/dijit/themes/claro/form/Checkbox.less @@ -0,0 +1,79 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.gif'); +} + +.claro .dijitCheckBox, +.claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitCheckBox, +.dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ +} + +.claro .dijitCheckBox, +.claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + background-position: -15px; +} + +.claro .dijitCheckBoxChecked, +.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + background-position: -0; +} + +.claro .dijitCheckBoxDisabled { + /* disabled */ + background-position: -75px; +} + +.claro .dijitCheckBoxCheckedDisabled { + /* disabled but checked */ + background-position: -60px; +} + +.claro .dijitCheckBoxHover { + /* hovering over an unchecked enabled checkbox */ + background-position: -45px; +} + +.claro .dijitCheckBoxCheckedHover { + /* hovering over an checked enabled checkbox */ + background-position: -30px; +} + + diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index b04061b65..ab8bb5c3b 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -1,132 +1,163 @@ - +/* claro/form/Common.css */ +/*========================= common css =========================*/ +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ .claro .dijitTextBoxError .dijitValidationContainer { - background-color: #d46363; - background-image: url('images/error.png'); - background-position: top center; - border: solid #d46464 0px; - border-left-width: 1px; - width: 9px; + background-color: #d46464; + background-image: url('images/error.png'); + background-position: top center; + border: solid #d46464 0; + border-left-width: 1px; + width: 9px; } .claro .dijitTextBoxError .dijitValidationIcon { - width: 0px; - background-color: transparent !important; + width: 0; + background-color: transparent !important; + /* so the INPUT doesn't obscure the border in rtl+a11y */ + +} +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { + padding: 2px; } -.claro .dijitTextBox .dijitInputContainer, -.claro .dijitTextArea, -.claro .dijitInputField .dijitPlaceHolder { - padding: 2px; +.claro .dijitTextBox .dijitInputField { + padding: 1px 2px; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { + padding: 1px; } -.claro .dijitTextBox, -.claro .dijitTextBox .dijitButtonNode { - - border-color: #b5bcc7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; +.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + + border-color: #b5bcc7; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; } .claro .dijitTextBox { - background-color: #f7fcff; + background-color: #ffffff; } -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; - -webkit-transition-duration:.25s; +/* hover */ +.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; +/* error state */ +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { + border-color: #d46464; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: #fdf7f7; +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { + background-color: #ffffff; } -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color:#769dc0; - -webkit-transition-duration:.1s; +/* focused state */ +.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTextBoxFocused { - background-color: #fff; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #ffffff; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitTextBoxFocused .dijitInputContainer { - background: #fff; + background: #ffffff; } -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; +.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: #ce4f4f; } -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; +/* disabled state */ +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled { - background-color: #efefef; - background-image: none; - color: #818181; +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: #efefef; + background-image: none; + color: #818181; } +/*========================= for special widgets =========================*/ +/* Input boxes with an arrow (for a drop down) */ .claro .dijitComboBox .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); - background-position:-35px 53%; - background-repeat: no-repeat; - margin: 0px; - width:16px; - height:100%; - border: 1px solid #fff; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 53%; + background-repeat: no-repeat; + margin: 0; + width: 16px; + border: 1px solid #ffffff; } -.claro .dijitTextBox .dijitInputField { - padding-top: 1px; - padding-bottom: 1px; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitInputInner { - - padding: 1px 2px 1px 0; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitValidationContainer { - padding: 0 0 2px 0; +/* Add 1px vertical padding to the where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { - background-color: #ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; -} -.claro .dijitComboBoxHover .dijitButtonNode { - background-color:#abd6ff; -} -.claro .dijitComboBoxHover .dijitArrowButtonInner { - background-position:-70px 53%; -} -.claro .dijitComboBoxFocused .dijitButtonNode { - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitComboBoxFocused .dijitArrowButtonInner { - background-position:-70px 53%; - border: 0px none; -} + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-repeat: repeat-x; +} +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position: -70px 53%; +} +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { + background-color: #7dbefa; + background-position: 0 -177px; + padding: 1px; +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position: -70px 53%; + border: 0 none; +} +/* disabled state */ .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { - - background-position:0px 50%; - background-color:#f1f1f1; + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + + background-position: 0 50%; + background-color: #efefef; } +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ .dj_ff3 .claro .dijitInputField input[type="hidden"] { - display: none; - height: 0; - width: 0; + display: none; + height: 0; + width: 0; } -.dj_ie6 .claro .dijitTextBox, -.dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner { - border: 0px; +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 18px; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer { - padding: 1px; +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 16px; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less new file mode 100644 index 000000000..729867a67 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common.less @@ -0,0 +1,194 @@ +/* claro/form/Common.css */ + +/*========================= common css =========================*/ + +@import "../variables"; + +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ + +.claro .dijitTextBoxError .dijitValidationContainer { + background-color: @erroricon-background-color; + background-image: url('images/error.png'); + background-position: top center; + border: solid @erroricon-background-color 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ +} + +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, +.claro .dijitInputField .dijitPlaceHolder { + padding: @textbox-padding; +} +.claro .dijitTextBox .dijitInputField { + // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below. + // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right, + // although that varies by so compensate for that too. + padding: @textbox-padding - 1px @textbox-padding; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, +.dj_webkit .claro .dijitTextBox .dijitInputInner { + // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right, + // so compensate for that too. + padding: @textbox-padding - 1px; +} + +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + border-color: @border-color; + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitTextBox { + background-color: @textbox-background-color; +} + +/* hover */ +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { + border-color: @hovered-border-color; + .transition-duration(.25s); +} +.claro .dijitTextBoxHover { + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +/* error state */ +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { + border-color: @error-border-color; +} +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitInputContainer { + background-color: @textbox-error-background-color; +} + +/* focused state */ +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { + border-color:@focused-border-color; + .transition-duration(.1s); +} +.claro .dijitTextBoxFocused { + background-color: @textbox-focused-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: @textbox-focused-background-color; +} + +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: @error-focused-border-color; +} + +/* disabled state */ +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: @disabled-border-color; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: @textbox-disabled-background-color; + background-image: none; + color: @disabled-text-color; +} + +/*========================= for special widgets =========================*/ + +/* Input boxes with an arrow (for a drop down) */ + +.claro .dijitComboBox .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 53%; + background-repeat: no-repeat; + margin: 0; + width:16px; + border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +/* Add 1px vertical padding to the where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, +.claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} + +.claro .dijitComboBox .dijitButtonNode { + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, +.claro .dijitComboBox .dijitDownArrowButtonHover { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, +.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-70px 53%; +} + +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node + background-color: @pressed-background-color; + background-position:0 -177px; + padding: 1px; // Since no border on arrow button (see rule below) +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position:-70px 53%; + border: 0 none; +} + +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + background-position:0 50%; + background-color:@disabled-background-color; +} + +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + width: 0; +} + +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, +.dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; +} +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) +} +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width:16px; // when no border, then back to 16px just like content-box sizing +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index 065f0c70d..74827c16f 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,5 +1,10 @@ - -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; +/* claro/form/Common_rtl.css */ +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less new file mode 100644 index 000000000..fd4975a51 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common_rtl.less @@ -0,0 +1,13 @@ +/* claro/form/Common_rtl.css */ + +@import "../variables"; + +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; + border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index 66b97da62..bc6e1aeb6 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -1,100 +1,138 @@ - +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ .claro .dijitSpinnerButtonContainer { - overflow: hidden; - position: relative; - width: auto; - padding: 0 2px; + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; } .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - border-style: solid none; + border-width: 1px 0; + /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + + border-style: solid none; } +/* button */ .claro .dijitSpinner .dijitArrowButton { - width:auto; - background-color: #ebeef4; - background-image: url("images/formHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - overflow: hidden; + width: auto; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; + overflow: visible; + /* 0 height w/o this */ + } .claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; + width: 15px; } +/* up & down button icons */ .claro .dijitSpinner .dijitArrowButtonInner { - border:solid 1px #fff; - border-bottom-width: 0; - background-image: url("images/commonFormArrows.png"); - background-repeat: no-repeat; - height: 100%; - width:15px; - padding-left: 1px; - padding-right: 1px; - - background-position:-139px center; - - display: block; - margin: -1px 0px -1px 0px; - #margin-top: 0; + border: solid 1px #ffffff; + border-bottom-width: 0; + /* 2 top borders = 1 top+bottom border in ComboBox */ + + background-image: url("images/commonFormArrows.png"); + background-repeat: no-repeat; + height: 100%; + width: 15px; + padding-left: 1px; + padding-right: 1px; + /* for up arrow */ + + background-position: -139px center; + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + + display: block; + margin: -1px 0 -1px 0; + /* compensate for inner border */ + +} +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; + /* since its bottom aligned */ + } .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; + width: 19px; } .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position:-34px; + background-position: -34px; } .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; + padding: 0; } -.claro .dijitUpArrowButtonActive, -.claro .dijitDownArrowButtonActive { - background-color:#abd6ff; +/** hover & focused status **/ +.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { + background-color: #abd6ff; } -.claro .dijitSpinner .dijitUpArrowButtonHover, -.claro .dijitSpinner .dijitDownArrowButtonHover, -.claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #a0d1ff; +.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { + background-color: #abd6ff; } .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position:-174px; + background-position: -174px; } .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position:-69px; + background-position: -69px; } .claro .dijitSpinnerFocused { - background-color: #fff; - background-image: none; + background-color: #ffffff; + background-image: none; } -.claro .dijitSpinner .dijitDownArrowButtonActive, -.claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #3299f9; - background-position:0px -177px; +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; + background-position: 0 -177px; } -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - - border: 0px; - padding: 1px; - margin-right:2px; - margin-bottom:1px; +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + + border: 0; + padding: 1px; + margin-right: 2px; + margin-bottom: 1px; } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { - background-position:-173px; + background-position: -173px; } .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position:-68px; + background-position: -68px; } +/* disabled */ .claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #f1f1f1; + background-color: #efefef; } .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position:-104px; + background-position: -104px; } .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position:1px; + background-position: 1px; } +/** hacks for browsers **/ +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ .dj_ie7 .claro .dijitSpinner { - overflow:visible; -} + overflow: visible; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less new file mode 100644 index 000000000..ca78afb35 --- /dev/null +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -0,0 +1,150 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ + +@import "../variables"; + +.claro .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; +} +.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { + border-width: 1px 0; /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + border-style: solid none; +} + +/* button */ +.claro .dijitSpinner .dijitArrowButton { + width:auto; + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + overflow: hidden; +} +.dj_iequirks .claro .dijitSpinner .dijitArrowButton { + overflow: visible; /* 0 height w/o this */ +} + +.claro .dijitSpinner .dijitSpinnerButtonInner { + width: 15px; +} +/* up & down button icons */ +.claro .dijitSpinner .dijitArrowButtonInner { + border:solid 1px @arrowbutton-inner-border-color; + border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ + background-image: url("images/commonFormArrows.png"); + background-repeat: no-repeat; + height: 100%; + width:15px; + padding-left: 1px; + padding-right: 1px; + + /* for up arrow */ + background-position:-139px center; + + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + display: block; + margin: -1px 0 -1px 0; /* compensate for inner border */ +} + +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; /* since its bottom aligned */ +} + +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { + width: 19px; +} +.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { + background-position:-34px; +} +.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} + +/** hover & focused status **/ + +.claro .dijitUpArrowButtonActive, +.claro .dijitDownArrowButtonActive { + background-color:@arrowbutton-pressed-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover, +.claro .dijitSpinner .dijitDownArrowButtonHover, +.claro .dijitSpinnerFocused .dijitArrowButton { + background-color: @arrowbutton-hovered-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { + background-position:-174px; +} +.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-69px; +} + +.claro .dijitSpinnerFocused { + background-color: @textbox-focused-background-color; + background-image: none; +} + +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, +.claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + border: 0; + padding: 1px; + margin-right:2px; + margin-bottom:1px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { + background-position:-173px; +} +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + background-position:-68px; +} + +/* disabled */ + +.claro .dijitSpinnerDisabled .dijitArrowButtonInner { + background-color: @disabled-background-color; +} +.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position:-104px; +} +.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { + background-position:1px; +} + +/** hacks for browsers **/ + +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ +.dj_ie7 .claro .dijitSpinner { + overflow:visible; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/RadioButton.css b/lib/dijit/themes/claro/form/RadioButton.css index b9058d1b9..4dc3ad47d 100644 --- a/lib/dijit/themes/claro/form/RadioButton.css +++ b/lib/dijit/themes/claro/form/RadioButton.css @@ -1,51 +1,79 @@ - -.claro .dijitToggleButton .dijitRadio, -.claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ +.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxRadioButtonStates.png'); } -.dj_ie6 .claro .dijitToggleButton .dijitRadio, -.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); } -.claro .dijitRadio, -.claro .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0px 2px 0px 0px; - padding: 0px; +.claro .dijitRadio, .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; } -.dj_ie6 .claro .dijitRadio, -.dj_ie6 .claro .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + } -.claro .dijitRadio{ - - background-position: -105px; +.claro .dijitRadio { + /* unselected */ + + background-position: -105px; } .claro .dijitToggleButton .dijitRadioIcon { - - background-position: -107px; + /* unselected */ + + background-position: -107px; } .claro .dijitRadioDisabled { - - background-position: -165px; + /* unselected and disabled */ + + background-position: -165px; } .claro .dijitRadioHover { - - background-position: -135px; + /* hovering over an unselected enabled radio button */ + + background-position: -135px; } -.claro .dijitRadioChecked{ - background-position: -90px; +.claro .dijitRadioChecked { + background-position: -90px; } .claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; + background-position: -92px; } -.claro .dijitRadioCheckedHover{ - background-position: -120px; +.claro .dijitRadioCheckedHover { + background-position: -120px; } .claro .dijitRadioCheckedDisabled { - - background-position: -150px; + /* selected but disabled */ + + background-position: -150px; } diff --git a/lib/dijit/themes/claro/form/RadioButton.less b/lib/dijit/themes/claro/form/RadioButton.less new file mode 100644 index 000000000..18f1cc163 --- /dev/null +++ b/lib/dijit/themes/claro/form/RadioButton.less @@ -0,0 +1,84 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitRadio, +.claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxRadioButtonStates.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitRadio, +.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); +} + +.claro .dijitRadio, +.claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitRadio, +.dj_ie6 .claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ +} + +.claro .dijitRadio{ + /* unselected */ + background-position: -105px; +} + +.claro .dijitToggleButton .dijitRadioIcon { + /* unselected */ + background-position: -107px; +} + +.claro .dijitRadioDisabled { + /* unselected and disabled */ + background-position: -165px; +} + +.claro .dijitRadioHover { + /* hovering over an unselected enabled radio button */ + background-position: -135px; +} + +.claro .dijitRadioChecked{ + background-position: -90px; +} + +.claro .dijitToggleButtonChecked .dijitRadioIcon { + background-position: -92px; +} + +.claro .dijitRadioCheckedHover{ + background-position: -120px; +} + +.claro .dijitRadioCheckedDisabled { + /* selected but disabled */ + background-position: -150px; +} diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index c8f1d43fa..a30ede640 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -1,89 +1,109 @@ - +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ .claro .dijitSelect .dijitButtonText { - padding: 0px 5px 2px 5px; + padding: 2px; } +/* normal status */ .claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #f7fcff; - border-collapse: separate; + border: 1px solid #b5bcc7; + background-color: #ffffff; + border-collapse: separate; } -.dj_ie6 .claro .dijitSelect, -.dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image:none; +.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image: none; } .claro .dijitSelect .dijitButtonContents { - border: 0px solid #b5bcc7; - border-right-width: 1px; + border: 0 solid #b5bcc7; + border-right-width: 1px; } .claro .dijitSelect .dijitArrowButton { - padding: 0; - border: 1px solid #fff; - border-top:none; - background-color:#ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; + padding: 0; + border: 1px solid #ffffff; + border-top: none; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-repeat: repeat-x; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); - background-position:-35px 70%; - background-repeat: no-repeat; - width:16px; - height:16px; - display:block; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 70%; + background-repeat: no-repeat; + width: 16px; + height: 16px; } +/* hover status */ .claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + border: 1px solid #769dc0; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitSelectHover .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectHover .dijitArrowButton { - background-color:#abd6ff; + background-color: #abd6ff; } .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; + background-position: -70px 70%; } +/* focused status */ .claro .dijitSelectFocused { - border: 1px solid #769dc0; + border: 1px solid #769dc0; } .claro .dijitSelectFocused .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectFocused .dijitArrowButton { - background-color:#7dbefa; - background-position:0px -177px; - border: none; - padding: 0px 1px; + background-color: #7dbefa; + background-position: 0 -177px; + border: none; + padding: 0 1px; } .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; + background-position: -70px 70%; + margin-bottom: 1px; } +/* disable status */ .claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; + border: 1px solid #d3d3d3; + background-color: #efefef; + background-image: none; + color: #818181; } -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: #efefef; } .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position:0px 70% + background-position: 0 70%; } -.claro .dijitSelectMenu td.dijitMenuItemIconCell, -.claro .dijitSelectMenu td.dijitMenuArrowCell { - - display: none; +/* Dropdown menu style for select */ +.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + + display: none; } .claro .dijitSelectMenu td.dijitMenuItemLabel { - - padding-left: 5px; - padding-right: 5px; + /* line up menu text with text in select box (in LTR and RTL modes) */ + + padding: 2px; } .claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom:1px solid #769dc0; + border-bottom: 1px solid #769dc0; } diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less new file mode 100644 index 000000000..c429b2e48 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select.less @@ -0,0 +1,124 @@ +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ + +@import "../variables"; + +.claro .dijitSelect .dijitButtonText { + padding: @textbox-padding; +} + +/* normal status */ +.claro .dijitSelect { + border: 1px solid @border-color; + background-color: @textbox-background-color; + border-collapse: separate; +} +.dj_ie6 .claro .dijitSelect, +.dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image:none; +} + +.claro .dijitSelect .dijitButtonContents { + border: 0 solid @border-color; + border-right-width: 1px; +} + +.claro .dijitSelect .dijitArrowButton { + padding: 0; + border: 1px solid @arrowbutton-inner-border-color; + border-top:none; + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 70%; + background-repeat: no-repeat; + width:16px; + height:16px; +} + +/* hover status */ +.claro .dijitSelectHover { + border: 1px solid @hovered-border-color; + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +.claro .dijitSelectHover .dijitButtonContents { + border-color:@hovered-border-color; +} + +.claro .dijitSelectHover .dijitArrowButton { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; +} + +/* focused status */ +.claro .dijitSelectFocused { + border: 1px solid @focused-border-color; +} +.claro .dijitSelectFocused .dijitButtonContents { + border-color:@focused-border-color; +} +.claro .dijitSelectFocused .dijitArrowButton { + background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; + border: none; + padding: 0 1px; +} +.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; + margin-bottom: 1px; +} + +/* disable status */ +.claro .dijitSelectDisabled { + border: 1px solid @disabled-border-color; + background-color: @disabled-background-color; + background-image: none; + color: @disabled-text-color; +} +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: @disabled-background-color; +} +.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { + background-position:0 70% +} + +/* Dropdown menu style for select */ + +.claro .dijitSelectMenu td.dijitMenuItemIconCell, +.claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} +.claro .dijitSelectMenu td.dijitMenuItemLabel { + /* line up menu text with text in select box (in LTR and RTL modes) */ + padding: @textbox-padding; +} + +.claro .dijitSelectMenu .dijitMenuSeparatorTop { + border-bottom:1px solid @focused-border-color; +} diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css index 43797508f..a14d4ec42 100644 --- a/lib/dijit/themes/claro/form/Select_rtl.css +++ b/lib/dijit/themes/claro/form/Select_rtl.css @@ -1,4 +1,4 @@ .claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; + border-right-width: 0; + border-left-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Select_rtl.less b/lib/dijit/themes/claro/form/Select_rtl.less new file mode 100644 index 000000000..ffa40dc44 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select_rtl.less @@ -0,0 +1,6 @@ +@import "../variables"; + +.claro .dijitSelectRtl .dijitButtonContents { + border-right-width: 0; + border-left-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index 51c2c2313..5694e8c76 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -1,204 +1,242 @@ - +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ .claro .dijitSliderBar { - border-style: solid; - outline: 1px; + border-style: solid; + outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; + background-image: none; + border-color: #d3d3d3; } +/* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -20px; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -11px; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; + border-right: solid 1px #b5bcc7; } .claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; + border-left: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { + background-position: 0 -20px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { + background-position: 0 0; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { + background-position: 0 -30px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { + background-position: 0 -9px; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { + background-color: #d3d3d3; + /* left side of slider, fill matches border */ + + background-image: none; } +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { + background-color: #efefef; +} +/* Vertical Slider */ .claro .dijitRuleLabelsContainerV { - padding: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -36px 0; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -3px 0; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; } .claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; + border-top: solid 1px #b5bcc7; } -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; +.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { + background-position: -36px 0; + background-color: #abd6ff; } -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; +.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { + background-position: 0 0; + background-color: #ffffff; } -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; +.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { + background-position: -56px 0; + background-color: #abd6ff; } -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; +.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { + background-position: -18px 0; + background-color: #ffffff; } -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; +.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { + background-color: #d3d3d3; + /* bottom side of slider, fill matches border */ + } -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, -.claro .dijitSliderDisabled .dijitSliderTopBumper{ - background-color: #efefef; +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { + background-color: #efefef; } +/* ------- Thumbs ------- */ .claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:0 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: 0 0; } .claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; + background-position: -18px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbHover { + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbActive { + background-position: -36px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position: -54px 0; } .claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:-289px 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: -289px 0; } .claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; + background-position: -307px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbHover { + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbActive { + background-position: -325px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position: -343px 0; } -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; +/* ---- Increment/Decrement Buttons ---- */ +.claro .dijitSliderButtonContainerH { + padding: 1px 3px 1px 2px; } -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; +.claro .dijitSliderButtonContainerV { + padding: 3px 1px 2px 1px; } .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; + background-image: url('images/commonFormArrows.png'); + background-repeat: no-repeat; + background-color: #efefef; + -moz-border-radius: 2px; + border-radius: 2px; + border: solid 1px #b5bcc7; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; } .claro .dijitSliderActive .dijitSliderDecrementIconH, .claro .dijitSliderActive .dijitSliderIncrementIconH, @@ -208,79 +246,73 @@ .claro .dijitSliderHover .dijitSliderIncrementIconH, .claro .dijitSliderHover .dijitSliderDecrementIconV, .claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + + border: solid 1px #769dc0; + background-color: #ffffff; } .claro .dijitSliderDecrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position: -393px 50%; } .claro .dijitSliderIncrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; +.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position: -283px 50%; } .claro .dijitSliderDecrementIconV { - background-position:-38px 50%; + background-position: -38px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position: -73px 50%; } .claro .dijitSliderIncrementIconV { - background-position:-143px 49%; + background-position: -143px 49%; } -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 49%; +.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position: -178px 49%; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cce3fc; + background-color: #cfe5fa; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitSliderButtonInner { - visibility: hidden; + visibility: hidden; } -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; +.claro .dijitSliderDisabled .dijitSliderBar { + border-color: #d3d3d3; } -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; +.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { + border-color: #d3d3d3; + color: #818181; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position: -321px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, -.claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position:-215px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position: -215px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, -.claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position:-3px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position: -3px 49%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, -.claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position:-107px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position: -107px 49%; + background-color: #efefef; } .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, @@ -290,5 +322,5 @@ .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; + background-image: none; } diff --git a/lib/dijit/themes/claro/form/Slider.less b/lib/dijit/themes/claro/form/Slider.less new file mode 100644 index 000000000..82451b506 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider.less @@ -0,0 +1,362 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ + +@import "../variables"; + +.claro .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.claro .dijitSliderFocused .dijitSliderBar { + border-color: @focused-border-color; +} +.claro .dijitSliderHover .dijitSliderBar { + border-color: @hovered-border-color; +} +.claro .dijitSliderDisabled .dijitSliderBar { + background-image: none; + border-color: @disabled-border-color; +} + +/* Horizontal Slider */ + +.claro .dijitRuleLabelsContainerH { + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, +.claro .dijitSlider .dijitSliderLeftBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -20px; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarH, +.claro .dijitSlider .dijitSliderRightBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -11px; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderRightBumper { + border-right: solid 1px @border-color; +} +.claro .dijitSliderLeftBumper { + border-left: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, +.claro .dijitSliderHover .dijitSliderLeftBumper{ + background-position:0 -20px; + background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, +.claro .dijitSliderHover .dijitSliderRightBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, +.claro .dijitSliderFocused .dijitSliderLeftBumper{ + background-position:0 -30px; + background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, +.claro .dijitSliderFocused .dijitSliderRightBumper{ + background-position:0 -9px; + background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, +.claro .dijitSliderDisabled .dijitSliderLeftBumper{ + background-color: @disabled-border-color; /* left side of slider, fill matches border */ + background-image:none; +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, +.claro .dijitSliderDisabled .dijitSliderRightBumper{ + background-color: @disabled-background-color; +} + +/* Vertical Slider */ + +.claro .dijitRuleLabelsContainerV { + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, +.claro .dijitSlider .dijitSliderBottomBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-36px 0; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarV, +.claro .dijitSlider .dijitSliderTopBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-3px 0; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderBottomBumper { + border-bottom: solid 1px @border-color; +} +.claro .dijitSliderTopBumper { + border-top: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarV, +.claro .dijitSliderHover .dijitSliderBottomBumper{ + background-position:-36px 0; + background-color: @slider-hovered-fullbar-background-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarV, +.claro .dijitSliderHover .dijitSliderTopBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarV, +.claro .dijitSliderFocused .dijitSliderBottomBumper{ + background-position:-56px 0; + background-color: @slider-focused-fullbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarV, +.claro .dijitSliderFocused .dijitSliderTopBumper{ + background-position:-18px 0; + background-color: @slider-focused-remainingbar-background-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarV, +.claro .dijitSliderDisabled .dijitSliderBottomBumper{ + background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, +.claro .dijitSliderDisabled .dijitSliderTopBumper{ + background-color: @disabled-background-color; +} + + +/* ------- Thumbs ------- */ + +.claro .dijitSliderImageHandleH { + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat:no-repeat; + background-position:0 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleH { + background-position:-18px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleH { + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ + background-position:-36px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, +.claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position:-54px 0; +} +.claro .dijitSliderImageHandleV { + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat:no-repeat; + background-position:-289px 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleV { + background-position:-307px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleV { + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ + background-position:-325px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, +.claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position:-343px 0; +} + +/* ---- Increment/Decrement Buttons ---- */ + +.claro .dijitSliderButtonContainerH{ + padding: 1px 3px 1px 2px; +} +.claro .dijitSliderButtonContainerV{ + padding: 3px 1px 2px 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH, +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + background-image: url('images/commonFormArrows.png'); + background-repeat:no-repeat; + background-color: @arrowbutton-background-color; + .border-radius(2px); + border: solid 1px @border-color; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH, +.claro .dijitSliderActive .dijitSliderIncrementIconH, +.claro .dijitSliderActive .dijitSliderDecrementIconV, +.claro .dijitSliderActive .dijitSliderIncrementIconV, +.claro .dijitSliderHover .dijitSliderDecrementIconH, +.claro .dijitSliderHover .dijitSliderIncrementIconH, +.claro .dijitSliderHover .dijitSliderDecrementIconV, +.claro .dijitSliderHover .dijitSliderIncrementIconV { + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + border: solid 1px @hovered-border-color; + background-color: @slider-hoveredButton-background-color; +} + +.claro .dijitSliderDecrementIconH { + background-position:-357px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH +.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position:-393px 50%; +} +.claro .dijitSliderIncrementIconH { + background-position:-251px 50%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconH +.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position:-283px 50%; +} +.claro .dijitSliderDecrementIconV { + background-position:-38px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconV +.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position:-73px 50%; +} +.claro .dijitSliderIncrementIconV { + background-position:-143px 49%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconV +.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position:-178px 49%; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { + background-color: @slider-button-hovered-background-color; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { + background-color: @slider-button-pressed-background-color; + border-color:@pressed-border-color; +} +.claro .dijitSliderButtonInner { + visibility: hidden; +} +.claro .dijitSliderDisabled .dijitSliderBar{ + border-color: @disabled-border-color; +} +.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { + border-color: @disabled-border-color; + color: @disabled-text-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, +.claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position:-321px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, +.claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position:-215px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, +.claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position:-3px 49%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, +.claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position:-107px 49%; + background-color:@disabled-background-color; +} + +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { + background-image:none; +} diff --git a/lib/dijit/themes/claro/form/Slider_rtl.css b/lib/dijit/themes/claro/form/Slider_rtl.css index ebff4268d..97e078b9f 100644 --- a/lib/dijit/themes/claro/form/Slider_rtl.css +++ b/lib/dijit/themes/claro/form/Slider_rtl.css @@ -3,24 +3,22 @@ .claro .dijitSliderRtl .dijitSliderLeftBumper, .claro .dijitSliderRtl .dijitSliderRightBumper, .claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; + background-position: top right; } -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; +.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; } .claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; + border-left-width: 0; + border-right-width: 1px; } .claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; + border-left-width: 1px; + border-right-width: 0; } .claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } .claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } diff --git a/lib/dijit/themes/claro/form/Slider_rtl.less b/lib/dijit/themes/claro/form/Slider_rtl.less new file mode 100644 index 000000000..66a711668 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider_rtl.less @@ -0,0 +1,33 @@ +@import "../variables"; + +.claro .dijitSliderRtl .dijitSliderProgressBarH, +.claro .dijitSliderRtl .dijitSliderRemainingBarH, +.claro .dijitSliderRtl .dijitSliderLeftBumper, +.claro .dijitSliderRtl .dijitSliderRightBumper, +.claro .dijitSliderRtl .dijitSliderTopBumper { + background-position: top right; +} + +.claro .dijitSliderRtl .dijitSliderProgressBarV, +.claro .dijitSliderRtl .dijitSliderRemainingBarV, +.claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; +} + +.claro .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; +} + +.claro .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; +} + +.claro .dijitSliderRtl .dijitSliderIncrementIconH { + background-position:-357px 50%; +} + +.claro .dijitSliderRtl .dijitSliderDecrementIconH { + background-position:-251px 50%; +} diff --git a/lib/dijit/themes/claro/images/loading.gif b/lib/dijit/themes/claro/images/loading.gif deleted file mode 100644 index 6e7c8e5ec..000000000 Binary files a/lib/dijit/themes/claro/images/loading.gif and /dev/null differ diff --git a/lib/dijit/themes/claro/images/tooltip.png b/lib/dijit/themes/claro/images/tooltip.png index aca14988a..2b222739c 100644 Binary files a/lib/dijit/themes/claro/images/tooltip.png and b/lib/dijit/themes/claro/images/tooltip.png differ diff --git a/lib/dijit/themes/claro/images/tooltipGradient.png b/lib/dijit/themes/claro/images/tooltipGradient.png new file mode 100644 index 000000000..ce4860e79 Binary files /dev/null and b/lib/dijit/themes/claro/images/tooltipGradient.png differ diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 77b8bd967..f76947959 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -1,65 +1,124 @@ - +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ .claro .dijitAccordionContainer { - border:none; + border: none; } .claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; + background-color: #efefef; + /* gray, for closed pane */ + + border: solid 1px #b5bcc7; + margin-bottom: 1px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; } .claro .dijitAccordionTitle { - background-color: transparent; - background-image: url("images/accordion.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; + background-color: transparent; + /* pick up color from dijitAccordionInnerContainer */ + + background-image: url("images/accordion.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 5px 7px 2px 7px; + min-height: 17px; + color: #4a4a4a; +} +.claro .dijitAccordionTitleHover { + color: #000000; } .dj_ie6 .claro .dijitAccordionTitle { - background-image: none; + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + + background-color: #ffffff; + border: 1px solid #769dc0; + margin: 0 2px 2px; } .claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; + /* this is affecting the child widget itself */ + + padding: 9px; } +/* Active state for closed pane */ .claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; + border: 1px solid #769dc0; + background-color: #7dbefa; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; + background-position: 0 -136px; + color: #000000; } +/* Open (a.k.a. selected) pane */ .claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; + border-color: #769dc0; + background-color: #cfe5fa; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; + color: #000000; + background-position: 0 0; + /* avoid effect when clicking the title of the open pane */ + } +/* Hovering open or closed pane */ .claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; + /* both open and closed */ + + color: #000000; } -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; +.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + + border: 1px solid #769dc0; + background-color: #abd6ff; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color: #ffffff; + border: 1px solid #769dc0 !important; + -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); } diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less new file mode 100644 index 000000000..01f4427f4 --- /dev/null +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -0,0 +1,116 @@ +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ + +@import "../variables"; + +.claro .dijitAccordionContainer { + border:none; +} +.claro .dijitAccordionInnerContainer { + background-color: @unselected-background-color; /* gray, for closed pane */ + border:solid 1px @border-color; + margin-bottom:1px; + .transition-property(background-color,border); + .transition-duration(.3s); + .transition-timing-function(linear); +} +.claro .dijitAccordionTitle { + background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ + background-image: url("images/accordion.png"); + background-position:0 0; + background-repeat:repeat-x; + padding: 5px 7px 2px 7px; + min-height:17px; + color:@unselected-text-color; +} +.claro .dijitAccordionTitleHover { + color:@hovered-text-color; +} +.dj_ie6 .claro .dijitAccordionTitle { + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + background-color:@pane-background-color; + border:1px solid @selected-border-color; + margin: 0 2px 2px; +} + +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + padding: 9px; +} + +/* Active state for closed pane */ + +.claro .dijitAccordionInnerContainerActive { + border:1px solid @selected-border-color; + background-color:@pressed-background-color; + .transition-duration(.1s); +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position:0 -136px; + color:@selected-text-color; +} + +/* Open (a.k.a. selected) pane */ + +.claro .dijitAccordionInnerContainerSelected { + border-color:@selected-border-color; + background-color: @selected-background-color; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color:@selected-text-color; + background-position: 0 0; /* avoid effect when clicking the title of the open pane */ +} + +/* Hovering open or closed pane */ + +.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { + /* both open and closed */ + color:@hovered-text-color; +} + +.claro .dijitAccordionInnerContainerHover, +.claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + border:1px solid @hovered-border-color; + background-color:@hovered-background-color; + .transition-duration(.2s); +} + +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, +.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color:@pane-background-color; + border:1px solid @hovered-border-color !important; + .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); +} diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css index 333a45890..ede2a56c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -1,77 +1,109 @@ +/* BorderContainer +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ .claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; + /* matches the width of the splitters between panes */ + + padding: 5px; } -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; +.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + + border: 1px #b5bcc7 solid; } .claro .dijitBorderContainer-dijitTabContainerTop, .claro .dijitBorderContainer-dijitTabContainerBottom, .claro .dijitBorderContainer-dijitTabContainerLeft, .claro .dijitBorderContainer-dijitTabContainerRight, .claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + + border: none; } .claro .dijitBorderContainer-dijitBorderContainer { - - border: 1px #c0ccdf solid; - padding: 5px; + /* make nested BorderContainers look like a single big widget with lots of splitters */ + + border: 0; + padding: 0; } -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; +/* Splitters and gutters */ +.claro .dijitSplitterH, .claro .dijitGutterH { + background: none; + border: 0; + height: 5px; } .claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; + background: #b5bcc7 none; + height: 1px; + top: 2px; + width: 19px; } -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; +.claro .dijitSplitterV, .claro .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; } .claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; + background: #b5bcc7 none; + height: 19px; + left: 2px; + width: 1px; + margin: 0; } +/* hovered splitter */ .claro .dijitSplitterHHover { - font-size: 1px; - background: url("images/splitterHorizontalHover.png") no-repeat center top; + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; } .claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; + background: #769dc0 none; } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; + background: #769dc0 none; } -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; +.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { + background-color: #cfe5fa; + background-image: none; } -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; +/* active splitter */ +.claro .dijitSplitterHActive, .claro .dijitSplitterVActive { + font-size: 1px; + background-color: #abd6ff; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less new file mode 100644 index 000000000..17c4b63cb --- /dev/null +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -0,0 +1,128 @@ +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ + +@import "../variables"; + +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + padding: 5px; +} + +.claro .dijitSplitContainer-child, +.claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + border: 1px @border-color solid; +} + +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; + +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + border: 0; + padding: 0; +} + +/* Splitters and gutters */ + +.claro .dijitSplitterH, +.claro .dijitGutterH { + background:none; + border:0; + height:5px; +} + +.claro .dijitSplitterH .dijitSplitterThumb { + background:@border-color none; + height:1px; + top:2px; + width:19px; +} + +.claro .dijitSplitterV, +.claro .dijitGutterV { + background:none; + border:0; + width:5px; + margin: 0; +} + +.claro .dijitSplitterV .dijitSplitterThumb { + background:@border-color none; + height:19px; + left:2px; + width:1px; + margin: 0; +} + +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; +} + + +.claro .dijitSplitterHHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; +} + +.claro .dijitSplitterVHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.dj_ie6 .dijitSplitterHHover, +.dj_ie6 .claro .dijitSplitterVHover { + background-color: @splitter-hovered-background-color; + background-image:none; +} + +/* active splitter */ +.claro .dijitSplitterHActive, +.claro .dijitSplitterVActive { + font-size: 1px; + background-color:@splitter-dragged-background-color; +} diff --git a/lib/dijit/themes/claro/layout/ContentPane.css b/lib/dijit/themes/claro/layout/ContentPane.css index f9f543cd1..a7753de1d 100644 --- a/lib/dijit/themes/claro/layout/ContentPane.css +++ b/lib/dijit/themes/claro/layout/ContentPane.css @@ -1,17 +1,38 @@ - +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ .claro .dijitContentPane { - padding: 8px; -} + padding: 8px; +} +/* nested layouts */ .claro .dijitTabContainerTop-dijitContentPane, .claro .dijitTabContainerLeft-dijitContentPane, .claro .dijitTabContainerBottom-dijitContentPane, .claro .dijitTabContainerRight-dijitContentPane, .claro .dijitAccordionContainer-dijitContentPane { - background-color: #fff; - padding: 8px; + background-color: #ffffff; + padding: 8px; } -.claro .dijitSplitContainer-dijitContentPane, -.claro .dijitBorderContainer-dijitContentPane { - background-color: #fff; - padding: 8px; +.claro .dijitSplitContainer-dijitContentPane, .claro .dijitBorderContainer-dijitContentPane { + background-color: #ffffff; + padding: 8px; } diff --git a/lib/dijit/themes/claro/layout/ContentPane.less b/lib/dijit/themes/claro/layout/ContentPane.less new file mode 100644 index 000000000..83329bdb7 --- /dev/null +++ b/lib/dijit/themes/claro/layout/ContentPane.less @@ -0,0 +1,43 @@ +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ + +@import "../variables"; + +.claro .dijitContentPane { + padding: 8px; +} + +/* nested layouts */ +.claro .dijitTabContainerTop-dijitContentPane, +.claro .dijitTabContainerLeft-dijitContentPane, +.claro .dijitTabContainerBottom-dijitContentPane, +.claro .dijitTabContainerRight-dijitContentPane, +.claro .dijitAccordionContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} +.claro .dijitSplitContainer-dijitContentPane, +.claro .dijitBorderContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 95fe2c262..030e4b761 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -1,348 +1,434 @@ - +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ +/*** some common features ***/ .claro .dijitTabPaneWrapper { - background:#fff; + background: #ffffff; } .claro .dijitTabPaneWrapper, .claro .dijitTabContainerTop-tabs, .claro .dijitTabContainerBottom-tabs, .claro .dijitTabContainerLeft-tabs, .claro .dijitTabContainerRight-tabs { - - border-color: #b5bcc7; + /* todo: add common class name for this div */ + + border-color: #b5bcc7; } .claro .dijitTabCloseButton { - background: url("images/tabClose.png") no-repeat; - width: 14px; - height: 14px; - margin-left: 5px; - margin-right:-3px; + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right: -5px; } .claro .dijitTabCloseButtonHover { - background-position:-14px; + background-position: -14px; } .claro .dijitTabCloseButtonActive { - background-position:-28px; + background-position: -28px; } .claro .dijitTabSpacer { - - display: none; + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + + display: none; } .claro .dijitTabInnerDiv { - background-color:#e6e6e7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; - color:#4a4a4a; + background-color: #efefef; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; + color: #4a4a4a; } .claro .dijitTabHover .dijitTabInnerDiv { - background-color:#a9d6ff; - -webkit-transition-duration:.25s; - color:#000; + background-color: #abd6ff; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + color: #000000; } .claro .dijitTabActive .dijitTabInnerDiv { - background-color:#8bc4f9; - color:#000; - -webkit-transition-duration:.1s; + background-color: #7dbefa; + color: #000000; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabChecked .dijitTabInnerDiv { - background-color:#b2d4f3; - color:#000; + background-color: #cfe5fa; + color: #000000; } .claro .dijitTabContent { - border: 1px solid #b5bcc7; + border: 1px solid #b5bcc7; +} +.claro .dijitTabHover .dijitTabContent { + border-color: #769dc0; } -.claro .dijitTabHover .dijitTabContent, .claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitTabChecked .dijitTabContent { - color:#000; - border-color: #b5bcc7; + color: #000000; + border-color: #b5bcc7; } .claro .tabStripButton .dijitTabInnerDiv { - background-color: transparent; + background-color: transparent; } .claro .tabStripButton .dijitTabContent { - border: none; + border: none; } +/*** end common ***/ +/*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { - top: 1px; - margin-right: 1px; - padding-top: 3px; + top: 1px; + /* used for overlap */ + + margin-right: 1px; + padding-top: 3px; } .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { - top: 3px; + top: 3px; } +/* for top tab padding. change height when status changes */ .claro .dijitTabContainerTop-tabs .dijitTabContent { - padding:3px 8px 3px 4px; - border-bottom: 1px; - background-image:url("images/tabTop.png"); - background-position:0px 0px; - background-repeat:repeat-x; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-bottom-width: 0; + background-image: url("images/tabTop.png"); + background-position: 0 0; + background-repeat: repeat-x; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 4px; - padding-top: 6px; -} -.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - border-bottom: none; + padding-bottom: 4px; + padding-top: 6px; } +/* normal status */ .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; - background-repeat:repeat-x; - box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); -} + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; + background-repeat: repeat-x; + -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - background-position:0px -102px; - background-repeat:repeat-x; + background-position: 0 -102px; + background-repeat: repeat-x; } +/** end top tab **/ +/*************** bottom tab ***************/ .claro .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; - margin-right: 1px; + top: -1px; + /* used for overlap */ + + margin-right: 1px; } +/* calculate the position and size */ .claro .dijitTabContainerBottom-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - border-top: none; - background-image: url("images/tabBottom.png"); - background-position:0px -249px; - background-repeat: repeat-x; - background-position:bottom; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position: 0 -249px; + background-repeat: repeat-x; + background-position: bottom; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerBottom-tabs .dijitTab { - padding-bottom: 3px; + padding-bottom: 3px; } +/* normal status */ .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url("images/tabBottom.png"); - background-position: top; - background-repeat: repeat-x; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -} + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 7px; - padding-top: 4px; - background-position:0px -119px; + padding-bottom: 7px; + padding-top: 4px; + background-position: 0 -119px; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; + padding-bottom: 0; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } +/** end bottom tab **/ +/*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; - margin-bottom: 1px; + border-right-width: 0; + left: 1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("images/tabLeft.png"); - background-position: -347px -340px; - background-repeat: repeat-y; + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; } .claro .dijitTabContainerLeft-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabLeft.png"); - background-repeat: repeat-y; - background-position:0px 0px; + padding: 3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position: 0 0; } +/* checked status */ .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { - padding-right: 9px; - border-right: none; - background-image: none; + padding-right: 9px; + border-right: none; + background-image: none; } .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0px -179px; - background-repeat:repeat-y; - box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); -} + background-position: 0 -179px; + background-repeat: repeat-y; + -webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); +} +/** end left tab **/ +/*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - left: -1px; - margin-bottom: 1px; + border-left-width: 0; + left: -1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("images/tabRight.png"); - background-repeat: repeat-y; - background-position: -1px -347px; + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; } .claro .dijitTabContainerRight-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabRight.png"); - background-position:right top; - background-repeat: repeat-y; + padding: 3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position: right top; + background-repeat: repeat-y; } +/* checked status */ .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { - padding-left: 5px; - border-left: none; - background-image: none; + padding-left: 5px; + border-left: none; + background-image: none; } .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; - box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { - border-radius: 2px 2px 0px 0px; - -moz-border-radius: 2px 2px 0px 0px; - -webkit-border-top-left-radius:2px; - -webkit-border-top-right-radius:2px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ - border-radius: 0px 0px 2px 2px; - -moz-border-radius: 0px 0px 2px 2px; - -webkit-border-bottom-right-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ - border-radius: 2px 0px 0px 2px; - -moz-border-radius: 2px 0px 0px 2px; - -webkit-border-top-left-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ - border-radius: 0px 2px 2px 0px; - -moz-border-radius: 0px 2px 2px 0px; - -webkit-border-top-right-radius:2px; - -webkit-border-bottom-right-radius:2px; -} + background-position: -348px -179px; + -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); +} +/** end right tab **/ +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent { + -moz-border-radius: 2px 2px 0 0; + border-radius: 2px 2px 0 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { + -moz-border-radius: 0 0 2px 2px; + border-radius: 0 0 2px 2px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +/************ left/right scroll buttons + menu button ************/ .claro .tabStripButton { - background-color:#deecf9; - border: 1px solid #b5bcc7; + background-color: #e9f4fe; + border: 1px solid #b5bcc7; } .claro .dijitTabListContainer-top .tabStripButton { - padding: 4px 3px; - margin-top:7px; - background-image: url("images/tabTop.png"); - background-position:0px 0px; + padding: 4px 3px; + margin-top: 7px; + background-image: url("images/tabTop.png"); + background-position: 0 0; } .claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; + padding: 5px 3px; + margin-bottom: 4px; + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; } .claro .tabStripButtonHover { - background-color:#a6d2fb; + background-color: #abd6ff; } .claro .tabStripButtonActive { - background-color:#7dbefa; + background-color: #7dbefa; } .claro .dijitTabStripIcon { - height:15px; - width:15px; - margin: 0 auto; - background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; - background-color: transparent; + height: 15px; + width: 15px; + margin: 0 auto; + background: url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; } -.claro .dijitTabStripSlideRightIcon{ - background-position: -24px 50%; +.claro .dijitTabStripSlideRightIcon { + background-position: -24px 50%; } .claro .dijitTabStripMenuIcon { - background-position: -51px 50%; + background-position: -51px 50%; } -.claro .dijitTabListContainer-top .tabStripButtonDisabled, -.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { - background-color:#dddddd; - border:1px solid #c9c9c9; +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color: #d3d3d3; + border: 1px solid #b5bcc7; + /* to match border of TabContainer itself */ + } .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { - background-position:-175px 50%; + background-position: -175px 50%; } .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { - background-position: -124px 50%; + background-position: -124px 50%; } .claro .tabStripButtonDisabled .dijitTabStripMenuIcon { - background-position: -151px 50%; -} + background-position: -151px 50%; +} +/* Nested Tabs */ .claro .dijitTabContainerNested .dijitTabListWrapper { - height: auto; + height: auto; } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { - border-bottom:solid 1px #b5bcc7; - padding:1px 2px 4px; - margin-top:-2px; + border-bottom: solid 1px #b5bcc7; + padding: 1px 2px 4px; + margin-top: -2px; } .claro .dijitTabContainerTabListNested .dijitTabContent { - background:rgba(255, 255, 255, 0) none repeat scroll 0 0; - border: none; - padding: 4px; - border-color: rgba(118,157,192,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.3s; + background: rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118, 157, 192, 0); + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -moz-border-radius: 2px; + border-radius: 2px; } .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - - background: none; - border: none; - top: 0px; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + + background: none; + border: none; + top: 0; + /* to override top: 1px/-1px for normal tabs */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color:#eaf4fc; - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #c8dff3; - padding: 3px; - webkit-transition-duration:.2s; + background-color: #e9f4fe; + border: solid 1px #cfe5fa; + padding: 3px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { - text-decoration: none; + text-decoration: none; } .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #a8c7e2; - padding: 3px; - background:#b9d9f5 url("images/tabNested.png") repeat-x; - -webkit-transition-duration:.1s; + border: solid 1px #769dc0; + padding: 3px; + background: #abd6ff url("images/tabNested.png") repeat-x; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - padding: 3px; - border:solid 1px #a8c7e2; - background-position: 0px 105px; - background-color:#d4e8f9; + padding: 3px; + border: solid 1px #769dc0; + background-position: 0 105px; + background-color: #cfe5fa; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { - text-decoration: none; - background-image:none; + text-decoration: none; + background-image: none; } .claro .dijitTabPaneWrapperNested { - border: none; + border: none; + /* prevent double border */ + } .dj_ie6 .claro .dijitTabContent, .dj_ie6 .claro .dijitTabInnerDiv, .dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ - background-image: none; +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { + background-image: none; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less new file mode 100644 index 000000000..691900eba --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -0,0 +1,408 @@ +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ + +@import "../variables"; + +/*** some common features ***/ +.claro .dijitTabPaneWrapper { + background:@pane-background-color; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + /* todo: add common class name for this div */ + border-color: @border-color; +} +.claro .dijitTabCloseButton { + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right:-5px; +} +.claro .dijitTabCloseButtonHover { + background-position:-14px; +} +.claro .dijitTabCloseButtonActive { + background-position:-28px; +} +.claro .dijitTabSpacer { + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + display: none; +} +.claro .dijitTabInnerDiv { + background-color:@unselected-background-color; + .transition-property(background-color, border); + .transition-duration(.35s); + color:@unselected-text-color; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color:@hovered-background-color; + .transition-duration(.25s); + color:@hovered-text-color; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color:@pressed-background-color; + color:@selected-text-color; + .transition-duration(.1s); +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color:@selected-background-color; + color:@selected-text-color; +} + +.claro .dijitTabContent { + border: 1px solid @border-color; +} +.claro .dijitTabHover .dijitTabContent { + border-color: @hovered-border-color; +} +.claro .dijitTabActive .dijitTabContent { + border-color: @pressed-border-color; +} +.claro .dijitTabChecked .dijitTabContent { + color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above? + border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer +} + +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +/*** end common ***/ + + +/*************** top tab ***************/ +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; /* used for overlap */ + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +/* for top tab padding. change height when status changes */ +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding:3px 6px; + border-bottom-width: 0; + background-image:url("images/tabTop.png"); + background-position:0 0; + background-repeat:repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} + +/* normal status */ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image:url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; + background-repeat:repeat-x; + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); +} + +/* checked status */ +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05)); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position:0 -102px; + background-repeat:repeat-x; +} +/** end top tab **/ + + +/*************** bottom tab ***************/ +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; /* used for overlap */ + margin-right: 1px; +} +/* calculate the position and size */ +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding:3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position:0 -249px; + background-repeat: repeat-x; + background-position:bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +/* normal status */ +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); + +} + +/* checked status */ +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position:0 -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); +} +/** end bottom tab **/ + +/*************** left tab ***************/ +.claro .dijitTabContainerLeft-tabs .dijitTab { + border-right-width: 0; + left: 1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position:0 0; +} +/* checked status */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:0 -179px; + background-repeat:repeat-y; + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); +} +/** end left tab **/ + +/*************** right tab ***************/ +.claro .dijitTabContainerRight-tabs .dijitTab { + border-left-width: 0; + left: -1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position:right top; + background-repeat: repeat-y; +} +/* checked status */ +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:-348px -179px; + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); +} +/** end right tab **/ + +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerTop-tabs .dijitTabContent { + .border-radius(2px 2px 0 0); +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerBottom-tabs .dijitTabContent{ + .border-radius(0 0 2px 2px); +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerLeft-tabs .dijitTabContent{ + .border-radius(2px 0 0 2px); +} + +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerRight-tabs .dijitTabContent{ + .border-radius(0 2px 2px 0); +} + +/************ left/right scroll buttons + menu button ************/ +.claro .tabStripButton { + background-color:@button-background-color; + border: 1px solid @border-color; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top:7px; + background-image: url("images/tabTop.png"); + background-position:0 0; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding:5px 3px; + margin-bottom:4px; + background-image: url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; +} +.claro .tabStripButtonHover { + background-color:@hovered-background-color; +} +.claro .tabStripButtonActive { + background-color:@pressed-background-color; +} +.claro .dijitTabStripIcon { + height:15px; + width:15px; + margin: 0 auto; + background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon{ + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} + +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, +.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color:@tab-disabled-background-color; + border:1px solid @border-color; /* to match border of TabContainer itself */ +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position:-175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +/* Nested Tabs */ +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom:solid 1px @border-color; + padding:1px 2px 4px; + margin-top:-2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background:rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118,157,192,0); + .transition-property(background-color, border-color); + .transition-duration(.3s); + .border-radius(2px); +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + background: none; + border: none; + top: 0;/* to override top: 1px/-1px for normal tabs */ + .box-shadow(none); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color: @nestedtab-hovered-background-color; + border:solid 1px @nestedtab-hovered-border-color; + padding: 3px; + .transition-duration(.2s); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border:solid 1px @nestedtab-selected-border-color; + padding: 3px; + background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + .transition-duration(.1s); +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { + padding: 3px; + border:solid 1px @selected-border-color; + background-position: 0 105px; + background-color:@selected-background-color; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image:none; +} +.claro .dijitTabPaneWrapperNested { + border: none;/* prevent double border */ +} + + +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ + background-image: none; +} diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css index 156cea977..89fdff097 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css @@ -1,67 +1,67 @@ -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; +.claro .dijitTabContainerTop-tabs .dijitTabRtl, .claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; } .claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; + -moz-box-orient: horizontal; + text-align: right; } .dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; + display: block; + left: 0; } -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; } .dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, .dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; + float: left; } .dj_ie6 .claro .dijitTabRtl .tabLabel, .dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, .dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + + zoom: 1; } -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right: 5px; } -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width: 1%; } -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; +.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip { + position: absolute; } .dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; + padding-top: 10px; } .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; + background-position: -341px -179px; } -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; } -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + padding-left: 3px; } .dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; } diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.less b/lib/dijit/themes/claro/layout/TabContainer_rtl.less new file mode 100644 index 000000000..eaada0d0a --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less @@ -0,0 +1,81 @@ +@import "../variables"; + +.claro .dijitTabContainerTop-tabs .dijitTabRtl, +.claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; +} +.claro .dijitTabRtl { + -moz-box-orient:horizontal; + text-align: right; +} +.dj_ie7 .claro .dijitTabRtl .dijitTabContent { + display: block; + left: 0; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; +} + +// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks +.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { + float:left; +} +.dj_ie6 .claro .dijitTabRtl .tabLabel, +.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, +.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + zoom:1; +} +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right:5px; +} + +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, +.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width:1%; +} + +.dj_ie6 .dijitTabContainerTopStrip, +.dj_ie6 .dijitTabContainerBottomStrip { + position:absolute; +} +.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { + padding-top: 10px; +} +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { + background-position:-341px -179px; +} + +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, +.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; +} + + +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + padding-left: 3px; +} + +.dj_iequirks-rtl .claro .dijitTabListWrapper { + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + border-left: 1px solid @pane-background-color; + border-right: 1px solid @pane-background-color; +} diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png index bf232406f..dbcfc851b 100644 Binary files a/lib/dijit/themes/claro/layout/images/tabBottom.png and b/lib/dijit/themes/claro/layout/images/tabBottom.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png index db7626ea8..2822487ed 100644 Binary files a/lib/dijit/themes/claro/layout/images/tabTop.png and b/lib/dijit/themes/claro/layout/images/tabTop.png differ diff --git a/lib/dijit/themes/claro/variables.less b/lib/dijit/themes/claro/variables.less new file mode 100644 index 000000000..8d09c2519 --- /dev/null +++ b/lib/dijit/themes/claro/variables.less @@ -0,0 +1,189 @@ +// General +@text-color: #000000; // Text color for enabled widgets + +@border-color: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer +@popup-border-color: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match +@minor-border-color: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar + +@disabled-border-color: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets +@disabled-background-color: #efefef;// Disabled button, textbox, etc. +@disabled-text-color: #818181; // Text color for disabled/readonly widgets + +@unselected-background-color: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items +@unselected-text-color: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items + +@hovered-border-color: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. +@hovered-background-color: #abd6ff; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover +@hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. + +@pressed-border-color: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc. +@pressed-background-color: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. + +@selected-border-color: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) +@selected-background-color: #cfe5fa;// Selected Accordion pane, nested tab label, Tree row +@selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. + +@bar-background-color: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog +@pane-background-color: #fff; // Background color of Accordion panes, Dialogs, etc. +@popup-background-color: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. + + + +// Buttons +@button-border-color: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state +@button-background-color: #e9f4fe; // Background color for (unhovered) buttons +@button-hovered-background-color: #abd6ff; // Background color for hovered buttons +@button-pressed-background-color: #abd6ff; // Background color for active buttons +@button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) + +// Input widgets +@focused-border-color: #769dc0; // Focused textbox, editor, select, etc. +@error-border-color: #d46464; // Border for textbox in error state +@error-focused-border-color: #ce4f4f; // Border of textbox in error state, and focused +@erroricon-background-color: #d46464; // Background color for exclamation point validation icon (for TextBox in error state) +@textbox-background-color: #fff; // Default background color of TextBox based widgets +@textbox-hovered-background-color: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget +@textbox-focused-background-color: @textbox-background-color; +@textbox-error-background-color: @textbox-background-color; +@textbox-disabled-background-color: @disabled-background-color; + +@textbox-padding: 2px; // Padding for Textbox, Textarea, etc. + +// CheckBox, RadioButton +@focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes + +// TabContainer +@nestedtab-hovered-background-color: @textbox-hovered-background-color; +@nestedtab-hovered-border-color: #cfe5fa; +@nestedtab-selected-border-color: @selected-border-color; +@nestedtab-selected-background-color: #abd6ff; +@tab-disabled-background-color: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported) + +// Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. +@arrowbutton-background-color: #efefef; +@arrowbutton-hovered-background-color: #abd6ff; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) +@arrowbutton-pressed-background-color: #abd6ff; +@arrowbutton-inner-border-color: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border + +// Slider +// Note: any changes here require corresponding changes in form/images/sliderThumbs.png +@slider-fullbar-background-color: #cfe5fa; // Background color for part of slider bar before (to the left or below) the handle +@slider-remainingbar-background-color: #fff; // Background color for part of slider bar after (to the right or above) the handle +@slider-hovered-fullbar-background-color: #abd6ff; // Background color for part of bar of hovered slider before (to the left or below) the handle +@slider-hovered-remainingbar-background-color: #fff;// Background color for part of bar of hovered slider after (to the right or above) the handle +@slider-hoveredButton-background-color: #fff; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons +@slider-focused-fullbar-background-color: #abd6ff; // Background color for part of bar of focused slider before (to the left or below) the handle +@slider-focused-remainingbar-background-color: #fff;// Background color for part of bar of focused slider after (to the right or above) the handle +@slider-button-hovered-background-color: #cfe5fa; // Background color of slider increment/decrement buttons when mouse is over the buttons +@slider-button-pressed-background-color: #abd6ff; // Background color of slider increment/decrement buttons while button is depressed + +// Select, ComboBox +@select-dropdownitem-background-color: #fff; // Background color for items in the drop down list of a ComboBox/Select +@select-dropdownitem-hovered-background-color: #7dbefa; // Background color for the hovered item in the drop down list of a ComboBox/Select +@select-matchedtext-background-color: #abd6ff; // Background color of text in ComboBox drop down that matches typed in phrase + +// Menus +@menu-background-color: @popup-background-color; + +// Calendar +@calendar-background-color: #cfe5fa; +@calendar-currentmonth-background-color: #fff; // Background color for days of the current month +@calendar-adjacentmonth-background-color: #e9f4fe; // Background color used for days from previous or next month +@calendar-adjacentmonth-text-color: #769dc0; // Text color used for days from previous or next month +@calendar-date-pressed-border-color: #fff; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? +@calendar-date-pressed-background-color: @pressed-background-color; +@calendar-date-selected-border-color: @selected-border-color; +@calendar-date-selected-background-color: #abd6ff; +@calendar-button-hovered-background-color: #e9f4fe; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) +@calendar-button-hovered-border-color: #fff; // for hover or next/previous year, and month drop down +@calendar-button-pressed-background-color: #cfe5fa; +@calendar-button-pressed-border-color: @pressed-border-color; + + +// ProgressBar +@progressbar-border-color: @popup-border-color; // Border color of progress bar +@progressbar-full-background-color:#abd6ff; // Background color for part of progress bar indicating amount completed +@progressbar-empty-background-color: #fff; // Background color for part of progress bar indicating amount remaining +@progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. + +// TimePicker +@timepicker-minorvalue-background-color: #efefef; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 +@timepicker-minorvalue-text-color: #818181; +@timepicker-majorvalue-background-color: #e9f4fe; // For 3:00, 4:00, 5:00, etc. +@timepicker-value-hovered-background-color: #7dbefa; +@timepicker-value-hovered-text-color: @hovered-text-color; +@timepicker-arrow-hovered-background-color: #abd6ff; + +// ColorPalette +@colorpalette-background-color: #fff; +@swatch-border-color: @minor-border-color; +@swatch-hovered-border-color: #000; +@swatch-selected-border-color: #000; + +// Dialog +@dialog-underlay-color: #fff; // the thing that grays out the screen when a dialog is shown +@dialog-titlebar-border-color: #fff; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content +@dialog-titlebar-background-color: #abd6ff; + +// BorderContainer +@splitter-hovered-background-color: #cfe5fa; // Color of splitter when user hovers it, before mouse down +@splitter-dragged-background-color: #abd6ff; // Color of splitter while it's being dragged + +// Toolbar +@toolbar-button-checked-background-color: #fff; // a toggled-on button in the toolbar +@toolbar-combobutton-hovered-unhoveredsection-background-color: #f4ffff; // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color +@toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar + +// DnD +@dnd-avatar-background-color: #fff; // Background color of little Dialog-type box indicating dragged items +@dnd-avatar-header-background-color: #f58383; // Title bar for dragged items +@dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped +@dnd-dropseparator-color: #769dc0; // Color of line indicating that user is about to drop between items A & B + +// Document level +@document-text-color: #131313; // Text color for document itself (text outside of widgets) +@document-shadedsection-background-color: @bar-background-color;// background color used for 
, , and table header rows
+@document-border-color: #d3d3d3;								// Border for 
, , tables, etc.
+
+// Mixins
+
+.border-radius (@radius) {
+	-moz-border-radius: @radius;
+	border-radius: @radius;
+}
+
+.box-shadow (@value) {
+	-webkit-box-shadow: @value;
+	-moz-box-shadow: @value;
+	box-shadow: @value;
+}
+
+.transition-property (@value) {
+	-webkit-transition-property: @value;
+	-moz-transition-property: @value;
+	transition-property: @value;
+}
+
+.transition-property (@value1, @value2) {
+	-webkit-transition-property: @value1, @value2;
+	-moz-transition-property: @value1, @value2;
+	transition-property: @value1, @value2;
+}
+
+.transition-duration (@value) {
+	-webkit-transition-duration: @value;
+	-moz-transition-duration: @value;
+	transition-duration: @value;
+}
+
+.transition-duration (@value1, @value2) {
+	-webkit-transition-duration: @value1, @value2;
+	-moz-transition-duration: @value1, @value2;
+	transition-duration: @value1, @value2;
+}
+
+.transition-timing-function (@value) {
+	-webkit-transition-timing-function: @value;
+	-moz-transition-timing-function: @value;
+	transition-timing-function: @value;
+}
diff --git a/lib/dijit/themes/dijit.css b/lib/dijit/themes/dijit.css
index 0d8302344..b6d57dca1 100644
--- a/lib/dijit/themes/dijit.css
+++ b/lib/dijit/themes/dijit.css
@@ -1,6 +1,19 @@
+/*
+	Essential styles that themes can inherit.
+	In other words, works but doesn't look great.
+*/
+
+
+
+/****
+		GENERIC PIECES
+ ****/
 
 .dijitReset {
-	
+	/* Use this style to null out padding, margin, border in your template elements
+		so that page specific styles don't break them.
+		- Use in all TABLE, TR and TD tags.
+	*/
 	margin:0;
 	border:0;
 	padding:0;
@@ -9,34 +22,44 @@
 	color: inherit;
 }
 .dijit_a11y .dijitReset {
-	-moz-appearance: none; 
+	-moz-appearance: none; /* remove predefined high-contrast styling in Firefox */
 }
+
 .dijitInline {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
+	/*  To inline block elements.
+		Similar to InlineBox below, but this has fewer side-effects in Moz.
+		Also, apparently works on a DIV as well as a FIELDSET.
+	*/
+	display:inline-block;			/* webkit and FF3 */
+	#zoom: 1; /* set hasLayout:true to mimic inline-block */
+	#display:inline; /* don't use .dj_ie since that increases the priority */
 	border:0;
 	padding:0;
 	vertical-align:middle;
-	#vertical-align: auto;	
+	#vertical-align: auto;	/* makes TextBox,Button line up w/native counterparts on IE6 */
 }
+
 .dijitHidden {
-	
+	/* To hide unselected panes in StackContainer etc. */
 	display: none !important;
 }
+
 .dijitVisible {
-	
-	display: block !important;	
-	position: relative;			
+	/* To show selected pane in StackContainer etc. */
+	display: block !important;	/* override user's display:none setting via style setting or indirectly via class */
+	position: relative;			/* to support setting width/height, see #2033 */
 }
+
 .dijitInputContainer {
-	
+	/* for positioning of placeHolder */
 	#zoom: 1;
 	overflow: hidden;
-	float: none !important; 
-	position:relative;
+	float: none !important; /* needed by FF to squeeze the INPUT in */
+	position: relative;
+	vertical-align: middle;
+	#display: inline;
 }
+
 .dj_ie INPUT.dijitTextBox,
 .dj_ie .dijitTextBox INPUT {
 	font-size: 100%;
@@ -48,7 +71,7 @@
 	text-align: center;
 }
 .dijitTextBox INPUT.dijitInputField {
-	
+	/* override unreasonable user styling of buttons and icons */
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
@@ -56,25 +79,31 @@
 	display: none;
 }
 .dijitInlineTable {
-	
+	/* To inline tables with a given width set (otherwise, use dijitInline above) */
 	display:inline-table;
-	display:inline-block;		
-	#zoom: 1; 
-	#display:inline; 
+	display:inline-block;		/* webkit and FF3 */
+	#zoom: 1; /* set hasLayout:true to mimic inline-block */
+	#display:inline; /* don't use .dj_ie since that increases the priority */
 	box-sizing: content-box; -moz-box-sizing: content-box;
 	border:0;
 	padding:0;
 }
+
 .dijitTeeny {
 	font-size:1px;
 	line-height:1px;
 }
+
 .dijitOffScreen {
 	position: absolute;
-	visibility: hidden;
 	left: 50%;
 	top: -10000px;
 }
+
+/*
+ * Popup items have a wrapper div (dijitPopup)
+ * with the real popup inside, and maybe an iframe too
+ */
 .dijitPopup {
 	position: absolute;
 	background-color: transparent;
@@ -82,14 +111,9 @@
 	border: 0;
 	padding: 0;
 }
-.dijit_a11y .dijitPopup,
-.dijit_ally .dijitPopup DIV,
-.dijit_a11y .dijitPopup TABLE,
-.dijit_a11y .dijitTooltipContainer {
-	background-color: white !important;
-}
+
 .dijitPositionOnly {
-	
+	/* Null out all position-related properties */
 	padding: 0 !important;
 	border: 0 !important;
 	background-color: transparent !important;
@@ -97,15 +121,17 @@
 	height: auto !important;
 	width: auto !important;
 }
+
 .dijitNonPositionOnly {
-	
+	/* Null position-related properties */
 	float: none !important;
 	position: static !important;
 	margin: 0 0 0 0 !important;
 	vertical-align: middle !important;
 }
+
 .dijitBackgroundIframe {
-	
+	/* iframe used to prevent problems with PDF or other applets overlaying menus etc */
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -116,52 +142,65 @@
 	padding: 0;
 	margin: 0;
 }
+
 .dijitDisplayNone {
-	
+	/* hide something.  Use this as a class rather than element.style so another class can override */
 	display:none !important;
 }
+
 .dijitContainer {
-	
-	overflow: hidden;	
-}
-.dijit_a11y * {
-	background-image:none !important;
+	/* for all layout containers */
+	overflow: hidden;	/* need on IE so something can be reduced in size, and so scrollbars aren't temporarily displayed when resizing */
 }
+
+/****
+		A11Y
+ ****/
 .dijit_a11y .dijitIcon,
-.dijit_a11y DIV.dijitArrowButtonInner, 
+.dijit_a11y DIV.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
 .dijit_a11y SPAN.dijitArrowButtonInner,
 .dijit_a11y IMG.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl {
-	
+.dijit_a11y .dijitCalendarIncrementControl,
+.dijit_a11y .dijitTreeExpando {
+	/* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents
+	 * exception for INPUT.dijitArrowButtonInner, because the icon and character are controlled by the same node */
 	display: none;
 }
 .dijitSpinner DIV.dijitArrowButtonInner {
-	display: block; 
+	display: block; /* override previous rule */
 }
+
 .dijit_a11y .dijitA11ySideArrow {
-	display: inline !important; 
+	display: inline !important; /* display text instead */
 	cursor: pointer;
 }
+
+/*
+ * Since we can't use shading in a11y mode, and since the underline indicates today's date,
+ * use a border to show the selected date.
+ * Avoid screen jitter when switching selected date by compensating for the selected node's
+ * border w/padding on other nodes.
+ */
 .dijit_a11y .dijitCalendarDateLabel {
 	padding: 1px;
 }
 .dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 	border-style: dotted !important;
 	border-width: 1px;
-	padding: 0px;
+	padding: 0;
 }
 .dijit_a11y .dijitCalendarDateTemplate {
-	padding-bottom: 0.1em !important;	
-}
-.dijit_a11y .dijit * {
-	background:white !important;
-	color:black !important;
+	padding-bottom: 0.1em !important;	/* otherwise bottom border doesn't appear on IE */
 }
 .dijit_a11y .dijitButtonNode {
-	border-color: black!important;
-	border-style: outset!important;
-	border-width: medium!important;
+	border: black outset medium !important;
+
+	/* In claro, hovering a toolbar button reduces padding and adds a border.
+	 * Not needed in a11y mode since Toolbar buttons always have a border.
+	 */
+	padding: 0 !important;
 }
+
 .dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
 .dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
 	border-style: outset!important;
@@ -169,83 +208,94 @@
 	border-color: #999 !important;
 	color:#999 !important;
 }
+
+/* button inner contents - labels, icons etc. */
 .dijitButtonNode * {
 	vertical-align: middle;
 }
 .dijitButtonNode .dijitArrowButtonInner {
-	
+	/* the arrow icon node */
 	background: no-repeat center;
 	width: 12px;
 	height: 12px;
-	direction: ltr; 
+	direction: ltr; /* needed by IE/RTL */
 }
+
+/****
+	3-element borders:  ( dijitLeft + dijitStretch + dijitRight )
+	These were added for rounded corners on dijit.form.*Button but never actually used.
+ ****/
+
 .dijitLeft {
-	
+	/* Left part of a 3-element border */
 	background-position:left top;
 	background-repeat:no-repeat;
 }
+
 .dijitStretch {
-	
-	white-space:nowrap;			
+	/* Middle (stretchy) part of a 3-element border */
+	white-space:nowrap;			/* MOW: move somewhere else */
 	background-repeat:repeat-x;
 }
+
 .dijitRight {
-	
-	#display:inline;				
+	/* Right part of a 3-element border */
+	#display:inline;				/* IE7 sizes to outer size w/o this */
 	background-position:right top;
 	background-repeat:no-repeat;
 }
+
+/* Buttons */
+
 .dijitToggleButton,
 .dijitButton,
 .dijitDropDownButton,
 .dijitComboButton {
-	
+	/* outside of button */
 	margin: 0.2em;
+	vertical-align: middle;
 }
+
 .dijitButtonContents {
-	display: block;		
+	display: block;		/* to make focus border rectangular */
 }
 td.dijitButtonContents {
-	display: table-cell;	
+	display: table-cell;	/* but don't affect Select, ComboButton */
 }
+
 .dijitButtonNode IMG {
-	
+	/* make text and images line up cleanly */
 	vertical-align:middle;
-	
-}
-TABLE.dijitComboButton { 
-	
-	border-collapse: collapse;
-	border:0;
-	padding:0;
-	margin:0;
+	/*margin-bottom:.2em;*/
 }
+
 .dijitToolbar .dijitComboButton {
-	
+	/* because Toolbar only draws a border around the hovered thing */
 	border-collapse: separate;
 }
+
 .dijitToolbar .dijitToggleButton,
 .dijitToolbar .dijitButton,
 .dijitToolbar .dijitDropDownButton,
 .dijitToolbar .dijitComboButton {
 	margin: 0;
 }
+
 .dijitToolbar .dijitButtonContents {
-	
+	/* just because it used to be this way */
 	padding: 1px 2px;
 }
-.dj_ie .dijitComboButton {
-	
-	margin-bottom: -3px;
-}
+
+
 .dj_webkit .dijitToolbar .dijitDropDownButton {
 	padding-left: 0.3em;
 }
 .dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
 	padding:0;
 }
+
 .dijitButtonNode {
-	
+	/* Node that is acting as a button -- may or may not be a BUTTON element */
 	border:1px solid gray;
 	margin:0;
 	line-height:normal;
@@ -255,76 +305,95 @@ TABLE.dijitComboButton {
 	white-space: nowrap;
 }
 .dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
-	
+	/* apparent WebKit bug where messing with the font coupled with line-height:normal X 2 (dijitReset & dijitButtonNode)
+	can be different than just a single line-height:normal, visible in InlineEditBox/Spinner */
 	line-height:inherit;
 }
 .dijitTextBox .dijitButtonNode {
 	border-width: 0;
 }
+
 .dijitButtonNode,
 .dijitButtonNode * {
 	cursor: pointer;
 }
+
 .dj_ie .dijitButtonNode {
-	
+	/* ensure hasLayout */
 	zoom: 1;
 }
+
 .dj_ie .dijitButtonNode button {
-	
+	/*
+		disgusting hack to get rid of spurious padding around button elements
+		on IE. MSIE is truly the web's boat anchor.
+	*/
 	overflow: visible;
 }
+
 DIV.dijitArrowButton {
 	float: right;
 }
+
+/******
+	TextBox related.
+	Everything that has an 
+*******/
+
 .dijitTextBox {
 	border: solid black 1px;
-	#overflow: hidden; 
-	width: 15em;	
+	#overflow: hidden; /* #6027, #6067 */
+	width: 15em;	/* need to set default size on outer node since inner nodes say  and .  user can override */
 	vertical-align: middle;
-	#vertical-align: auto;
 }
+
 .dijitTextBoxReadOnly,
 .dijitTextBoxDisabled {
 	color: gray;
 }
 .dj_webkit .dijitTextBoxDisabled INPUT {
-	color: #eee; 
+	color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */
 }
 .dj_webkit TEXTAREA.dijitTextAreaDisabled {
-	color: #333; 
+	color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */
 }
-.dj_gecko .dijitTextBoxReadOnly INPUT,
+.dj_gecko .dijitTextBoxReadOnly INPUT.dijitInputField, /* disable arrow and validation presentation INPUTs but allow real INPUT for text selection */
 .dj_gecko .dijitTextBoxDisabled INPUT {
-	-moz-user-input: none; 
+	-moz-user-input: none; /* prevent focus of disabled textbox buttons */
 }
+
 .dijitPlaceHolder {
-	
+	/* hint text that appears in a textbox until user starts typing */
 	color: #AAAAAA;
 	font-style: italic;
 	position: absolute;
 	top: 0;
 	left: 0;
-	#filter: ""; 
+	#filter: ""; /* make this showup in IE6 after the rendering of the widget */
 }
+
 .dijitTimeTextBox {
 	width: 8em;
 }
+
+/* rules for webkit to deal with fuzzy blue focus border */
 .dijitTextBox INPUT:focus {
-	outline: none;	
+	outline: none;	/* blue fuzzy line looks wrong on combobox or something w/validation icon showing */
 }
 .dijitTextBoxFocused {
 	outline: auto 5px -webkit-focus-ring-color;
 }
+
 .dijitTextBox INPUT {
-	float: left; 
+	float: left; /* needed by IE to remove secret margin */
 }
 .dijitInputInner {
-	
+	/* for when an  is embedded inside an inline-block 
 with a size and border */
 	border:0 !important;
 	vertical-align:middle !important;
 	background-color:transparent !important;
 	width:100% !important;
-	
+	/* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	margin-left: 0 !important;
@@ -335,7 +404,9 @@ DIV.dijitArrowButton {
 }
 .dijitTextBoxError INPUT.dijitValidationInner,
 .dijitTextBox INPUT.dijitArrowButtonInner {
-	
+	/*  used to display arrow icon/validation icon, or in arrow character in high contrast mode.
+	 * The css below is a trick to hide the character in non-high-contrast mode
+	 */
 	text-indent: -1em !important;
 	direction: ltr !important;
 	text-align: left !important;
@@ -346,12 +417,12 @@ DIV.dijitArrowButton {
 }
 .dj_ie .dijitTextBox INPUT,
 .dj_ie INPUT.dijitTextBox {
-	overflow-y: visible; 
-	line-height: normal; 
+	overflow-y: visible; /* INPUTs need help expanding when padding is added or line-height is adjusted */
+	line-height: normal; /* strict mode */
 }
 .dj_ie7 .dijitTextBox INPUT.dijitValidationInner,
 .dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner {
-	line-height: 86%; 
+	line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */
 }
 .dj_ie6 .dijitTextBox INPUT,
 .dj_ie6 INPUT.dijitTextBox,
@@ -360,11 +431,11 @@ DIV.dijitArrowButton {
 .dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner,
 .dj_iequirks .dijitTextBox INPUT.dijitInputInner,
 .dj_iequirks INPUT.dijitTextBox {
-	line-height: 100%; 
+	line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */
 }
 .dijit_a11y INPUT.dijitValidationInner,
 .dijit_a11y INPUT.dijitArrowButtonInner {
-	
+	/* (in high contrast mode) revert rules from above so character displays */
 	text-indent: 0 !important;
 	width: 1em !important;
 	#text-align: left !important;
@@ -373,29 +444,38 @@ DIV.dijitArrowButton {
 	display: inline;
 	cursor: default;
 }
+
+/* ComboBox & Spinner */
+
 .dijitSpinner .dijitSpinnerButtonContainer,
 .dijitComboBox .dijitArrowButtonContainer {
-	
-	border-width: 0 0 0 1px !important; 
+	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
+	border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
+}
+.dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
+	/* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */
+	border-width: 0 !important;
+}
+
+.dijitComboBoxMenu {
+	/* Drop down menu is implemented as 
     
  •  
  •  ... but we don't want circles before each item */
+	list-style-type: none;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	
+	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 	border-width: 0;
 }
 .dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	clear: both; 
-}
-.dijit_a11y .dijitTextBox .dijitValidationContainer,
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBox .dijitArrowButtonContainer {
-	
-	border: solid black !important;
-	border-width: 0 0 0 1px !important;
+	clear: both; /* IE workaround */
 }
+
 .dj_ie .dijitToolbar .dijitComboBox {
-	
+	/* make combobox buttons align properly with other buttons in a toolbar */
 	vertical-align: middle;
 }
+
+/* Spinner */
+
 .dijitTextBox .dijitSpinnerButtonContainer {
 	width: 1em;
 	position: relative !important;
@@ -403,7 +483,7 @@ DIV.dijitArrowButton {
 }
 .dijitSpinner .dijitSpinnerButtonInner {
 	width:1em;
-	visibility:hidden !important; 
+	visibility:hidden !important; /* just a sizing element */
 	overflow-x:hidden;
 }
 .dijitComboBox .dijitButtonNode,
@@ -419,7 +499,7 @@ DIV.dijitArrowButton {
 	width: 1em !important;
 }
 .dijit_a11y .dijitSpinner .dijitArrowButtonInner {
-	margin: 0 auto !important; 
+	margin: 0 auto !important; /* should auto-center */
 }
 .dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	padding-left: 0.3em !important;
@@ -429,8 +509,8 @@ DIV.dijitArrowButton {
 	width: 1.4em !important;
 }
 .dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.0em !important; 
-	padding-right: 0.0em !important;
+	padding-left: 0 !important; /* manually center INPUT: character is .5em and total width = 1em */
+	padding-right: 0 !important;
 	width: 1em !important;
 }
 .dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
@@ -444,7 +524,9 @@ DIV.dijitArrowButton {
 	width: 2em !important;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	
+	/* note: .dijitInputLayoutContainer makes this rule override .dijitArrowButton settings
+	 * for dijit.form.Button
+	 */
 	padding: 0;
 	position: absolute !important;
 	right: 0;
@@ -466,7 +548,7 @@ DIV.dijitArrowButton {
 	border-top-width: 1px !important;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
-	#bottom: 50%;	
+	#bottom: 50%;	/* otherwise (on some machines) top arrow icon too close to splitter border (IE6/7) */
 	top: 0;
 }
 .dijitSpinner .dijitArrowButtonInner {
@@ -493,16 +575,17 @@ DIV.dijitArrowButton {
 	width: 100%;
 }
 .dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	zoom: 50%; 
+	zoom: 50%; /* emulate transform: scale(0.5) */
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
 	overflow: hidden;
 }
+
 .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 	width: 100%;
 }
 .dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; 
+	width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
 }
 .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	visibility: hidden;
@@ -515,9 +598,16 @@ DIV.dijitArrowButton {
 	width: 1em;
 }
 .dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0px 0px 0px;
+	border-width: 1px 0 0 0;
 	border-style: solid !important;
 }
+
+/****
+		dijit.form.CheckBox
+ 	 &
+  		dijit.form.RadioButton
+ ****/
+
 .dijitCheckBox,
 .dijitRadio,
 .dijitCheckBoxInput {
@@ -529,22 +619,26 @@ DIV.dijitArrowButton {
 	background-repeat:no-repeat;
 	overflow: hidden;
 }
+
 .dijitCheckBox INPUT,
 .dijitRadio INPUT {
 	margin: 0;
 	padding: 0;
 	display: block;
 }
+
 .dijitCheckBoxInput {
-	
+	/* place the actual input on top, but all-but-invisible */
 	opacity: 0.01;
 }
+
 .dj_ie .dijitCheckBoxInput {
 	filter: alpha(opacity=0);
 }
+
 .dijit_a11y .dijitCheckBox,
 .dijit_a11y .dijitRadio {
-	
+	/* in a11y mode we display the native checkbox (not the icon), so don't restrict the size */
 	width: auto !important;
 	height: auto !important;
 }
@@ -554,14 +648,21 @@ DIV.dijitArrowButton {
 	width: auto;
 	height: auto;
 }
+
+
+/****
+		dijit.ProgressBar
+ ****/
+
 .dijitProgressBarEmpty {
-	
+	/* outer container and background of the bar that's not finished yet*/
 	position:relative;overflow:hidden;
-	border:1px solid black; 	
-	z-index:0;			
+	border:1px solid black; 	/* a11y: border necessary for high-contrast mode */
+	z-index:0;			/* establish a stacking context for this progress bar */
 }
+
 .dijitProgressBarFull {
-	
+	/* outer container for background of bar that is finished */
 	position:absolute;
 	overflow:hidden;
 	z-index:-1;
@@ -571,8 +672,9 @@ DIV.dijitArrowButton {
 .dj_ie6 .dijitProgressBarFull {
 	height:1.6em;
 }
+
 .dijitProgressBarTile {
-	
+	/* inner container for finished portion */
 	position:absolute;
 	overflow:hidden;
 	top:0;
@@ -586,27 +688,29 @@ DIV.dijitArrowButton {
 	background-color:#aaa;
 	background-attachment: fixed;
 }
+
 .dijit_a11y .dijitProgressBarTile {
-	
+	/* a11y:  The border provides visibility in high-contrast mode */
 	border-width:2px;
 	border-style:solid;
 	background-color:transparent !important;
 }
+
 .dj_ie6 .dijitProgressBarTile {
-	
+	/* width:auto works in IE6 with position:static but not position:absolute */
 	position:static;
-	
+	/* height:auto or 100% does not work in IE6 */
 	height:1.6em;
 }
-.dijitProgressBarIndeterminate .dijitProgressBarLabel {
-	visibility:hidden;
-}
+
 .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
+	/* animated gif for 'indeterminate' mode */
 }
+
 .dijitProgressBarIndeterminateHighContrastImage {
 	display:none;
 }
+
 .dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
 	display:block;
 	position:absolute;
@@ -617,6 +721,7 @@ DIV.dijitArrowButton {
 	width:100%;
 	height:auto;
 }
+
 .dijitProgressBarLabel {
 	display:block;
 	position:static;
@@ -624,38 +729,52 @@ DIV.dijitArrowButton {
 	text-align:center;
 	background-color:transparent !important;
 }
+
+/****
+		dijit.Tooltip
+ ****/
+
 .dijitTooltip {
 	position: absolute;
 	z-index: 2000;
 	display: block;
-	
-	left: 50%;
+	/* make visible but off screen */
+	left: 0;
 	top: -10000px;
 	overflow: visible;
 }
+
 .dijitTooltipContainer {
 	border: solid black 2px;
 	background: #b8b5b5;
 	color: black;
 	font-size: small;
 }
+
 .dijitTooltipFocusNode {
 	padding: 2px 2px 2px 2px;
 }
+
 .dijitTooltipConnector {
 	position: absolute;
 }
 .dijit_a11y .dijitTooltipConnector {
-	display: none;	
+	display: none;	/* won't show b/c it's background-image; hide to avoid border gap */
 }
+
 .dijitTooltipData {
 	display:none;
 }
+
+/* Layout widgets. This is essential CSS to make layout work (it isn't "styling" CSS)
+   make sure that the position:absolute in dijitAlign* overrides other classes */
+
 .dijitLayoutContainer {
 	position: relative;
 	display: block;
 	overflow: hidden;
 }
+
 body .dijitAlignTop,
 body .dijitAlignBottom,
 body .dijitAlignLeft,
@@ -663,40 +782,61 @@ body .dijitAlignRight {
 	position: absolute;
 	overflow: hidden;
 }
+
 body .dijitAlignClient { position: absolute; }
+
+/*
+ * BorderContaienr
+ *
+ * .dijitBorderContainer is a stylized layout where panes have border and margin.
+ * .dijitBorderContainerNoGutter is a raw layout.
+ */
 .dijitBorderContainer, .dijitBorderContainerNoGutter {
 	position:relative;
 	overflow: hidden;
 }
+
 .dijitBorderContainerPane,
 .dijitBorderContainerNoGutterPane {
-	position: absolute !important;	
-	z-index: 2;		
+	position: absolute !important;	/* !important to override position:relative in dijitTabContainer etc. */
+	z-index: 2;		/* above the splitters so that off-by-one browser errors don't cover up border of pane */
 }
+
 .dijitBorderContainer > .dijitTextArea {
-	
+	/* On Safari, for SimpleTextArea inside a BorderContainer,
+		don't want to display the grip to resize */
 	resize: none;
 }
+
 .dijitGutter {
-	
+	/* gutter is just a place holder for empty space between panes in BorderContainer */
 	position: absolute;
-	font-size: 1px;		
+	font-size: 1px;		/* needed by IE6 even though div is empty, otherwise goes to 15px */
 }
+
+/* SplitContainer
+
+	'V' == container that splits vertically (up/down)
+	'H' = horizontal (left/right)
+*/
+
 .dijitSplitter {
 	position: absolute;
 	overflow: hidden;
-	z-index: 10;		
+	z-index: 10;		/* above the panes so that splitter focus is visible on FF, see #7583*/
 	background-color: #fff;
 	border-color: gray;
 	border-style: solid;
 	border-width: 0;
 }
 .dj_ie .dijitSplitter {
-	z-index: 1;	
+	z-index: 1;	/* behind the panes so that pane borders aren't obscured see test_Gui.html/[14392] */
 }
+
 .dijitSplitterActive {
 	z-index: 11 !important;
 }
+
 .dijitSplitterCover {
 	position:absolute;
 	z-index:-1;
@@ -705,13 +845,17 @@ body .dijitAlignClient { position: absolute; }
 	width:100%;
 	height:100%;
 }
+
 .dijitSplitterCoverActive {
 	z-index:3 !important;
 }
+
+/* #6945: stop mouse events */
 .dj_ie .dijitSplitterCover {
 	background: white;
 	filter: alpha(opacity=0);
 }
+
 .dijitSplitterH {
 	height: 7px;
 	border-top:1px;
@@ -733,9 +877,11 @@ body .dijitAlignClient { position: absolute; }
 	outline-style:dotted;
 	outline-width: 2px;
 }
+
 .dijitSplitPane {
 	position: absolute;
 }
+
 .dijitSplitContainerSizerH,
 .dijitSplitContainerSizerV {
 	position:absolute;
@@ -747,15 +893,18 @@ body .dijitAlignClient { position: absolute; }
 	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
 	margin: 0;
 }
+
 .dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
 	overflow:hidden;
 	position:absolute;
 	top:49%;
 }
+
 .dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
 	position:absolute;
 	left:49%;
 }
+
 .dijitSplitterShadow,
 .dijitSplitContainerVirtualSizerH,
 .dijitSplitContainerVirtualSizerV {
@@ -766,12 +915,14 @@ body .dijitAlignClient { position: absolute; }
 	filter: Alpha(Opacity=50);
 	margin: 0;
 }
+
 .dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH {
 	cursor: w-resize;
 }
 .dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
 	cursor: n-resize;
 }
+
 .dijit_a11y .dijitSplitterH {
 	border-top:1px solid #d3d3d3 !important;
 	border-bottom:1px solid #d3d3d3 !important;
@@ -780,14 +931,24 @@ body .dijitAlignClient { position: absolute; }
 	border-left:1px solid #d3d3d3 !important;
 	border-right:1px solid #d3d3d3 !important;
 }
+
+/* ContentPane */
+
 .dijitContentPane {
 	display: block;
-	overflow: auto;	
+	overflow: auto;	/* if we don't have this (or overflow:hidden), then Widget.resizeTo() doesn't make sense for ContentPane */
 }
+
 .dijitContentPaneSingleChild {
-	
+	/*
+	 * if the ContentPane holds a single layout widget child which is being sized to match the content pane,
+	 * then the ContentPane should never get a scrollbar (but it does due to browser bugs, see #9449
+	 */
 	overflow: hidden;
 }
+
+/* TitlePane */
+
 .dijitTitlePane {
 	display: block;
 	overflow: hidden;
@@ -795,45 +956,48 @@ body .dijitAlignClient { position: absolute; }
 .dijitTitlePaneTitle {
 	cursor: pointer;
 }
-.dijitFixedOpen {
-	
+.dijitFixedOpen, .dijitFixedClosed {
+	/* TitlePane that cannot be toggled */
 	cursor: default;
 }
 .dijitTitlePaneTitle * {
 	vertical-align: middle;
 }
 .dijitTitlePane .dijitArrowNodeInner {
-	
+	/* normally, hide arrow text in favor of icon */
 	display: none;
 }
 .dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
-	
+	/* ... except in a11y mode, then show text arrow */
 	display:inline !important;
-	font-family: monospace;		
+	font-family: monospace;		/* because - and + are different widths */
 }
 .dijit_a11y .dijitTitlePane .dijitArrowNode {
-	
+	/* ... and hide icon */
 	display:none;
 }
+
 .dj_ie6 .dijitTitlePaneContentOuter,
 .dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
-	
+	/* force hasLayout to ensure borders etc, show up */
 	zoom: 1;
 }
+
+/* Color Palette
+ * Sizes designed so that table cell positions match icons in underlying image,
+ * which appear at 20x20 intervals.
+ */
+
 .dijitColorPalette {
 	border: 1px solid #999;
 	background: #fff;
 	position: relative;
 }
-img.dijitColorPaletteUnder {
-	
-	border-style: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
+
 .dijitColorPalette .dijitPaletteTable {
-	
+	/* Table that holds the palette cells, and overlays image file with color swatches.
+	 * padding/margin to align table with image.
+	 */
 	padding: 2px 3px 3px 3px;
 	position: relative;
 	overflow: hidden;
@@ -843,52 +1007,59 @@ img.dijitColorPaletteUnder {
 .dj_ie6 .dijitColorPalette .dijitPaletteTable,
 .dj_ie7 .dijitColorPalette .dijitPaletteTable,
 .dj_iequirks .dijitColorPalette .dijitPaletteTable {
-	
+	/* using padding above so that focus border isn't cutoff on moz/webkit,
+	 * but using margin on IE because padding doesn't seem to work
+	 */
 	padding: 0;
 	margin: 2px 3px 3px 3px;
 }
+
 .dijitColorPalette .dijitPaletteCell {
-	
-	height: 20px;
-	width: 20px;
+	/*  in the  */
 	font-size: 1px;
 	vertical-align: middle;
 	text-align: center;
+	background: none;
 }
 .dijitColorPalette .dijitPaletteImg {
-	
-	width: 16px;
-	height: 14px;
+	/* Called dijitPaletteImg for back-compat, this actually wraps the color swatch with a border and padding */
+	padding: 1px;		/* white area between gray border and color swatch */
 	border: 1px solid #999;
+	margin: 2px 1px;
 	cursor: default;
-	vertical-align: middle;
+	font-size: 1px;		/* prevent  from getting bigger just to hold a character */
 }
-.dj_iequirks .dijitColorPalette .dijitPaletteImg {
-	margin: 1px;	
+.dj_gecko .dijitColorPalette .dijitPaletteImg {
+	padding-bottom: 0;	/* workaround rendering glitch on FF, it adds an extra pixel at the bottom */
+}
+.dijitColorPalette .dijitColorPaletteSwatch {
+	/* the actual part where the color is */
+	width: 14px;
+	height: 12px;
 }
 .dijitPaletteTable td {
-		padding: 0px;
+		padding: 0;
 }
 .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	
+	/* hovered color swatch */
 	border: 1px solid #000;
 }
+
 .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
 .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
 	border: 2px solid #000;
+	margin: 1px 0;	/* reduce margin to compensate for increased border */
 }
+
+
 .dijit_a11y .dijitColorPalette .dijitPaletteTable,
 .dijit_a11y .dijitColorPalette .dijitPaletteTable * {
-	
+	/* table cells are to catch events, but the swatches are in the PaletteImg behind the table */
 	background-color: transparent !important;
 }
-.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg {
-	border: 3px dotted #000;	
-	margin: -1px;
-}
-.dijit_a11y  .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	border: 2px solid #000 !important;
-}
+
+/* AccordionContainer */
+
 .dijitAccordionContainer {
 	border:1px solid #b7b7b7;
 	border-top:0 !important;
@@ -899,39 +1070,51 @@ img.dijitColorPaletteUnder {
 .dijitAccordionTitleSelected {
 	cursor: default;
 }
+
+/* images off, high-contrast mode styles */
 .dijitAccordionTitle .arrowTextUp,
 .dijitAccordionTitle .arrowTextDown {
 	display: none;
 	font-size: 0.65em;
 	font-weight: normal !important;
 }
+
 .dijit_a11y .dijitAccordionTitle .arrowTextUp,
 .dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
 	display: inline;
 }
+
 .dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
 	display: none;
 }
-.dj_ie6 .dijitAccordionTitle,
-.dj_iequirks .dijitAccordionTitle {
-	
-	zoom: 1;
+
+.dijitAccordionChildWrapper {
+	/* this is the node whose height is adjusted */
+	overflow: hidden;
 }
+
+/* Calendar */
+
 .dijitCalendarContainer {
-	width: auto;	
+	width: auto;	/* in case user has specified a width for the TABLE nodes, see #10553 */
 }
 .dijitCalendarContainer th, .dijitCalendarContainer td {
 	padding: 0;
+	vertical-align: middle;
 }
+
 .dijitCalendarNextYear {
 	margin:0 0 0 0.55em;
 }
+
 .dijitCalendarPreviousYear {
 	margin:0 0.55em 0 0;
 }
+
 .dijitCalendarIncrementControl {
 	vertical-align: middle;
 }
+
 .dijitCalendarIncrementControl,
 .dijitCalendarDateTemplate,
 .dijitCalendarMonthLabel,
@@ -939,18 +1122,29 @@ img.dijitColorPaletteUnder {
 .dijitCalendarNextYear {
 	cursor: pointer;
 }
+
 .dijitCalendarDisabledDate {
 	color: gray;
 	text-decoration: line-through;
 	cursor: default;
 }
+
 .dijitSpacer {
-	
+	/* don't display it, but make it affect the width */
   	position: relative;
   	height: 1px;
   	overflow: hidden;
   	visibility: hidden;
 }
+
+/* Styling for month drop down list */
+
+.dijitCalendarMonthMenu .dijitCalendarMonthLabel {
+	text-align:center;
+}
+
+/* Menu */
+
 .dijitMenu {
 	border:1px solid black;
 	background-color:white;
@@ -960,26 +1154,38 @@ img.dijitColorPaletteUnder {
 	border-width:0;
 	background-color:white;
 }
+
+/* workaround for webkit bug #8427, remove this when it is fixed upstream */
 .dj_webkit .dijitMenuTable td[colspan="2"]{
 	border-right:hidden;
 }
+
 .dijitMenuItem {
 	text-align: left;
 	white-space: nowrap;
 	padding:.1em .2em;
 	cursor:pointer;
 }
+
 .dijitMenuPassive .dijitMenuItemHover,
 .dijitMenuItemSelected {
-	
+	/*
+	 * dijitMenuItemHover refers to actual mouse over
+	 * dijitMenuItemSelected is used after a menu has been "activated" by
+	 * clicking it, tabbing into it, or being opened from a parent menu,
+	 * and denotes that the menu item has focus or that focus is on a child
+	 * menu
+	 */
 	background-color:black;
 	color:white;
 }
+
 .dijitMenuItemIcon, .dijitMenuExpand {
 	background-repeat: no-repeat;
 }
+
 .dijitMenuItemDisabled * {
-	
+	/* for a disabled menu item, just set it to mostly transparent */
 	opacity:0.5;
 	cursor:default;
 }
@@ -990,10 +1196,12 @@ img.dijitColorPaletteUnder {
 	color:gray !important;
 	filter: alpha(opacity=35);
 }
+
 .dijitMenuItemLabel {
 	position: relative;
 	vertical-align: middle;
 }
+
 .dijit_a11y .dijitMenuItemSelected {
 	border: 1px dotted black !important;
 }
@@ -1008,28 +1216,35 @@ img.dijitColorPaletteUnder {
 .dj_ie8 .dijit_a11y .dijitMenuItemLabel {
 	position:static;
 }
+
 .dijitMenuExpandA11y {
 	display: none;
 }
 .dijit_a11y .dijitMenuExpandA11y {
 	display: inline;
 }
+
 .dijitMenuSeparator td {
 	border: 0;
 	padding: 0;
 }
+
+/* separator can be two pixels -- set border of either one to 0 to have only one */
 .dijitMenuSeparatorTop {
 	height: 50%;
 	margin: 0;
 	margin-top:3px;
 	font-size: 1px;
 }
+
 .dijitMenuSeparatorBottom {
 	height: 50%;
 	margin: 0;
 	margin-bottom:3px;
 	font-size: 1px;
 }
+
+/* the checked menu item */
 .dijitCheckedMenuItemIconChar {
 	vertical-align: middle;
 	visibility:hidden;
@@ -1044,21 +1259,29 @@ img.dijitColorPaletteUnder {
 	display: none;
 }
 .dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
-	
-	margin: 0px;
+	/* so bottom border of MenuBar appears on IE7 in high-contrast mode */
+	margin: 0;
 }
+
+/* StackContainer */
+
 .dijitStackController .dijitToggleButtonChecked * {
-	cursor: default;	
+	cursor: default;	/* because pressing it has no effect */
 }
+
+/* TabContainer */
+
 .dijitTabContainerNoLayout {
-	width: 100%;	
+	width: 100%;	/* otherwise ScrollingTabController goes to 50K pixels wide */
 }
+
 .dijitTabContainerBottom-tabs,
 .dijitTabContainerTop-tabs,
 .dijitTabContainerLeft-tabs,
 .dijitTabContainerRight-tabs {
-	overflow: visible !important;  
+	overflow: visible !important;  /* so tabs can cover up border adjacent to container */
 }
+
 .dijitTabContainerBottom-container,
 .dijitTabContainerTop-container,
 .dijitTabContainerLeft-container,
@@ -1075,39 +1298,46 @@ img.dijitColorPaletteUnder {
 .dijitTabListWrapper {
 	overflow: hidden;
 }
+
 .dijit_a11y .tabStripButton img {
-	
+	/* hide the icons (or rather the empty space where they normally appear) because text will appear instead */
 	display: none;
 }
+
 .dijitTabContainerTop-tabs {
 	border-bottom: 1px solid black;
 }
 .dijitTabContainerTop-container {
-	border-top: 0px;
+	border-top: 0;
 }
+
 .dijitTabContainerLeft-tabs {
 	border-right: 1px solid black;
 	float: left;
 }
 .dijitTabContainerLeft-container {
-	border-left: 0px;
+	border-left: 0;
 }
+
 .dijitTabContainerBottom-tabs {
 	border-top: 1px solid black;
 }
 .dijitTabContainerBottom-container {
-	border-bottom: 0px;
+	border-bottom: 0;
 }
+
 .dijitTabContainerRight-tabs {
 	border-left: 1px solid black;
 	float: left;
 }
 .dijitTabContainerRight-container {
-	border-right: 0px;
+	border-right: 0;
 }
+
 DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	cursor: auto;
 }
+
 .dijitTab {
 	position:relative;
 	cursor:pointer;
@@ -1115,107 +1345,147 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	z-index:3;
 }
 .dijitTab * {
-	
+	/* make tab icons and close icon line up w/text */
 	vertical-align: middle;
 }
 .dijitTabChecked {
-	cursor: default;	
+	cursor: default;	/* because clicking will have no effect */
 }
+
 .dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;	
+	top: 1px;	/* to overlap border on .dijitTabContainerTop-tabs */
 }
 .dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;	
+	top: -1px;	/* to overlap border on .dijitTabContainerBottom-tabs */
 }
 .dijitTabContainerLeft-tabs .dijitTab {
-	left: 1px;	
+	left: 1px;	/* to overlap border on .dijitTabContainerLeft-tabs */
 }
 .dijitTabContainerRight-tabs .dijitTab {
-	left: -1px;	
+	left: -1px;	/* to overlap border on .dijitTabContainerRight-tabs */
 }
+
+
 .dijitTabContainerTop-tabs .dijitTab,
 .dijitTabContainerBottom-tabs .dijitTab {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
+	/* Inline-block */
+	display:inline-block;			/* webkit and FF3 */
+	#zoom: 1; /* set hasLayout:true to mimic inline-block */
+	#display:inline; /* don't use .dj_ie since that increases the priority */
 }
+
 .dijitTabInnerDiv {
 	position:relative;
 }
+
+
 .tabStripButton {
 	z-index: 12;
 }
+
 .dijitTabButtonDisabled .tabStripButton {
 	display: none;
 }
+
+
 .dijitTabCloseButton {
 	margin-left: 1em;
 }
+
 .dijitTabCloseText {
 	display:none;
 }
+
+.dijitTab .tabLabel {
+	/* make sure tabs w/close button and w/out close button are same height, even w/small (<15px) font.
+	 * assumes <=15px height for close button icon.
+	 */
+	min-height: 15px;
+	display: inline-block;
+}
+.dijitNoIcon {
+	/* applied to / node when there is no icon specified */
+	display: none;
+}
+.dj_ie6 .dijitTab .dijitNoIcon {
+	/* because min-height (on .tabLabel, above) doesn't work on IE6 */
+	display: inline;
+	height: 15px;
+	width: 1px;
+}
+
+/* images off, high-contrast mode styles */
+
 .dijit_a11y .dijitTabCloseButton {
 	background-image: none !important;
 	width: auto !important;
 	height: auto !important;
-	border: thin dotted;	
-}
-.dijit_a11y .dijitTabCloseButtonHover {
-	border:thin solid;	
 }
+
 .dijit_a11y .dijitTabCloseText {
 	display: inline;
 }
-.dijit_a11y .dijitTabChecked {
-	
-	border-style:dashed !important;
-}
-.dijit_a11y .dijitTabInnerDiv {
-	border-left:none !important;
- }
+
 .dijitTabPane,
 .dijitStackContainer-child,
 .dijitAccordionContainer-child {
-	
+	/* children of TabContainer, StackContainer, and AccordionContainer shouldn't have borders
+	 * b/c a border is already there from the TabContainer/StackContainer/AccordionContainer itself.
+	 */
     border: none !important;
 }
+
+/* InlineEditBox */
 .dijitInlineEditBoxDisplayMode {
-	border: 1px solid transparent;	
+	border: 1px solid transparent;	/* so keyline (border) on hover can appear without screen jump */
 	cursor: text;
 }
+
 .dijit_a11y .dijitInlineEditBoxDisplayMode,
 .dj_ie6 .dijitInlineEditBoxDisplayMode {
-	
+	/* except that IE6 doesn't support transparent borders, nor does high contrast mode */
 	border: none;
 }
+
 .dijitInlineEditBoxDisplayModeHover,
 .dijit_a11y .dijitInlineEditBoxDisplayModeHover,
 .dj_ie6 .dijitInlineEditBoxDisplayModeHover {
-	
+	/* An InlineEditBox in view mode (click this to edit the text) */
 	background-color: #e2ebf2;
 	border: solid 1px black;
 }
+
 .dijitInlineEditBoxDisplayModeDisabled {
 	cursor: default;
 }
+
+/* Tree */
+.dijitTree {
+	overflow: auto;	/* for scrollbars when Tree has a height setting, and to prevent wrapping around float elements, see #11491 */
+}
+
 .dijitTreeIndent {
-	
+	/* amount to indent each tree node (relative to parent node) */
 	width: 19px;
 }
+
 .dijitTreeRow, .dijitTreeContent {
 	white-space: nowrap;
 }
+
 .dijitTreeRow img {
-	
+	/* make the expando and folder icons line up with the label */
 	vertical-align: middle;
 }
+
 .dijitTreeContent {
     cursor: default;
 }
+
 .dijitExpandoText {
 	display: none;
 }
+
 .dijit_a11y .dijitExpandoText {
 	display: inline;
 	padding-left: 10px;
@@ -1225,14 +1495,19 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	border-width: thin;
 	cursor: pointer;
 }
+
 .dijitTreeLabel {
-	margin: 0px 4px;
+	margin: 0 4px;
 }
+
+/* Dialog */
+
 .dijitDialog {
 	position: absolute;
 	z-index: 999;
-	overflow: hidden;       
+	overflow: hidden;       /* override overflow: auto; from ContentPane to make dragging smoother */
 }
+
 .dijitDialogTitleBar {
 	cursor: move;
 }
@@ -1250,38 +1525,49 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	display: none;
 	background: transparent !important;
 }
+
 .dijitDialogUnderlay {
 	background: #eee;
 	opacity: 0.5;
 }
+
 .dj_ie .dijitDialogUnderlay {
 	filter: alpha(opacity=50);
 }
+
+/* images off, high-contrast mode styles */
 .dijit_a11y .dijitSpinnerButtonContainer,
 .dijit_a11y .dijitDialog {
 	opacity: 1 !important;
 	background-color: white !important;
 }
+
 .dijitDialog .closeText {
 	display:none;
-	
+	/* for the onhover border in high contrast on IE: */
 	position:absolute;
 }
+
 .dijit_a11y .dijitDialog .closeText {
 	display:inline;
 }
+
+/* Slider */
+
 .dijitSliderMoveable {
 	z-index:99;
 	position:absolute !important;
 	display:block;
 	vertical-align:middle;
 }
+
 .dijitSliderMoveableH {
 	right:0;
 }
 .dijitSliderMoveableV {
 	right:50%;
 }
+
 .dijit_a11y DIV.dijitSliderImageHandle,
 .dijitSliderImageHandle {
 	margin:0;
@@ -1296,177 +1582,217 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	font-size: 0;
 }
 .dj_ie7 .dijitSliderImageHandle {
-	overflow: hidden; 
+	overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */
 }
 .dj_ie7 .dijit_a11y .dijitSliderImageHandle {
-	overflow: visible; 
+	overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */
 }
 .dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
 	border:4px solid #000;
 	height:8px;
 	width:8px;
 }
+
 .dijitSliderImageHandleV {
 	top:-8px;
 	right: -50%;
 }
+
 .dijitSliderImageHandleH {
 	left:50%;
 	top:-5px;
 	vertical-align:top;
 }
+
 .dijitSliderBar {
 	border-style:solid;
 	border-color:black;
 	cursor: pointer;
 }
+
 .dijitSliderBarContainerV {
 	position:relative;
 	height:100%;
 	z-index:1;
 }
+
 .dijitSliderBarContainerH {
 	position:relative;
 	z-index:1;
 }
+
 .dijitSliderBarH {
 	height:4px;
 	border-width:1px 0;
 }
+
 .dijitSliderBarV {
 	width:4px;
 	border-width:0 1px;
 }
+
 .dijitSliderProgressBar {
 	background-color:red;
 	z-index:1;
 }
+
 .dijitSliderProgressBarV {
 	position:static !important;
-	height:0%;
+	height:0;
 	vertical-align:top;
 	text-align:left;
 }
+
 .dijitSliderProgressBarH {
 	position:absolute !important;
-	width:0%;
+	width:0;
 	vertical-align:middle;
 	overflow:visible;
 }
+
 .dijitSliderRemainingBar {
 	overflow:hidden;
 	background-color:transparent;
 	z-index:1;
 }
+
 .dijitSliderRemainingBarV {
 	height:100%;
 	text-align:left;
 }
+
 .dijitSliderRemainingBarH {
 	width:100% !important;
 }
+
+/* the slider bumper is the space consumed by the slider handle when it hangs over an edge */
 .dijitSliderBumper {
 	overflow:hidden;
 	z-index:1;
 }
+
 .dijitSliderBumperV {
 	width:4px;
 	height:8px;
 	border-width:0 1px;
 }
+
 .dijitSliderBumperH {
 	width:8px;
 	height:4px;
 	border-width:1px 0;
 }
+
 .dijitSliderBottomBumper,
 .dijitSliderLeftBumper {
 	background-color:red;
 }
+
 .dijitSliderTopBumper,
 .dijitSliderRightBumper {
 	background-color:transparent;
 }
+
 .dijitSliderDecoration {
 	text-align:center;
 }
-.dijitSliderV TD {
-	position: relative; 
+
+.dijitSliderDecorationC,
+.dijitSliderDecorationV {
+	position: relative; /* needed for IE+quirks+RTL+vertical (rendering bug) but add everywhere for custom styling consistency but this messes up IE horizontal sliders */
 }
+
 .dijitSliderDecorationH {
 	width: 100%;
 }
+
 .dijitSliderDecorationV {
 	height: 100%;
 }
+
 .dijitSliderButton {
 	font-family:monospace;
 	margin:0;
 	padding:0;
 	display:block;
 }
+
 .dijit_a11y .dijitSliderButtonInner {
 	visibility:visible !important;
 }
+
 .dijitSliderButtonContainer {
 	text-align:center;
-	height:0;	
+	height:0;	/* ??? */
 }
 .dijitSliderButtonContainer * {
 	cursor: pointer;
 }
+
 .dijitSlider .dijitButtonNode {
 	padding:0;
 	display:block;
 }
+
 .dijitRuleContainer {
 	position:relative;
 	overflow:visible;
 }
+
 .dijitRuleContainerV {
 	height:100%;
 	line-height:0;
 	float:left;
 	text-align:left;
 }
+
 .dj_opera .dijitRuleContainerV {
 	line-height:2%;
 }
+
 .dj_ie .dijitRuleContainerV {
 	line-height:normal;
 }
+
 .dj_gecko .dijitRuleContainerV {
-	margin:0 0 1px 0; 
+	margin:0 0 1px 0; /* mozilla bug workaround for float:left,height:100% block elements */
 }
+
 .dijitRuleMark {
 	position:absolute;
 	border:1px solid black;
 	line-height:0;
 	height:100%;
 }
+
 .dijitRuleMarkH {
 	width:0;
 	border-top-width:0 !important;
 	border-bottom-width:0 !important;
 	border-left-width:0 !important;
 }
+
 .dijitRuleLabelContainer {
 	position:absolute;
 }
+
 .dijitRuleLabelContainerH {
 	text-align:center;
 	display:inline-block;
 }
+
 .dijitRuleLabelH {
 	position:relative;
 	left:-50%;
 }
+
 .dijitRuleLabelV {
-	
+	/* so that long labels don't overflow to multiple rows, or overwrite slider itself */
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 }
+
 .dijitRuleMarkV {
 	height:0;
 	border-right-width:0 !important;
@@ -1475,9 +1801,11 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	width:100%;
 	left:0;
 }
+
 .dj_ie .dijitRuleLabelContainerV {
 	margin-top:-.55em;
 }
+
 .dijit_a11y .dijitSliderReadOnly,
 .dijit_a11y .dijitSliderDisabled {
 	opacity:0.6;
@@ -1486,70 +1814,100 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 .dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
 	filter: alpha(opacity=40);
 }
+
+/* + and - Slider buttons: override theme settings to display icons */
 .dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV {
-	font-family: monospace; 
+	font-family: monospace; /* otherwise hyphen is larger and more vertically centered */
 	font-size: 1em;
 	line-height: 1em;
 	height: auto;
 	width: auto;
-	margin: 0px 4px;
+	margin: 0 4px;
 }
+
+/* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */
 .dijit_a11y .dijitButtonContents .dijitButtonText,
 .dijit_a11y .dijitTab .tabLabel {
 	display: inline !important;
 }
+
+/* TextArea, SimpleTextArea */
 .dijitTextArea {
 	width:100%;
-	overflow-y: auto;	
+	overflow-y: auto;	/* w/out this IE's SimpleTextArea goes to overflow: scroll */
 }
 .dijitTextArea[cols] {
-	width:auto; 
+	width:auto; /* SimpleTextArea cols */
 }
 .dj_ie .dijitTextAreaCols {
 	width:auto;
 }
+
+.dijitExpandingTextArea {
+	/* for auto exanding textarea (called Textarea currently, rename for 2.0) don't want to display the grip to resize */
+	resize: none;
+}
+
+
+/* Toolbar
+ * Note that other toolbar rules (for objects in toolbars) are scattered throughout this file.
+ */
+
 .dijitToolbarSeparator {
 	height: 18px;
 	width: 5px;
 	padding: 0 1px;
 	margin: 0;
 }
+
+/* Editor */
 .dijitIEFixedToolbar {
 	position:absolute;
-	
+	/* top:0; */
 	top: expression(eval((document.documentElement||document.body).scrollTop));
 }
+
 .dijitEditor {
-	display: block;	
+	display: block;	/* prevents glitch on FF with InlineEditBox, see #8404 */
 }
+
 .dijitEditorDisabled,
 .dijitEditorReadOnly {
 	color: gray;
 }
+
+/* TimePicker */
+
 .dijitTimePickerItemInner {
 	text-align:center;
 	border:0;
 	padding:2px 8px 2px 8px;
 }
+
 .dijitTimePickerTick,
 .dijitTimePickerMarker {
 	border-bottom:1px solid gray;
 }
+
 .dijitTimePicker .dijitDownArrowButton {
 	border-top: none !important;
 }
+
 .dijitTimePickerTick {
 	color:#CCC;
 }
+
 .dijitTimePickerMarker {
 	color:black;
 	background-color:#CCC;
 }
+
 .dijitTimePickerItemSelected {
 	font-weight:bold;
 	color:#333;
 	background-color:#b7cdee;
 }
+
 .dijitTimePickerItemHover {
 	background-color:gray;
 	color:white;
@@ -1561,8 +1919,10 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 .dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
 	border: dashed 4px black;
 }
+
+
 .dijitToggleButtonIconChar {
-	
+	/* character (instead of icon) to show that ToggleButton is checked */
 	display:none !important;
 }
 .dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
@@ -1570,22 +1930,26 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	visibility:hidden;
 }
 .dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
-	font-family: "Arial Unicode MS";	
+	font-family: "Arial Unicode MS";	/* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */
 }
 .dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
-	display: inline !important; 
+	display: inline !important; /* In high contrast mode, display the check symbol */
 	visibility:visible !important;
 }
+
 .dijitArrowButtonChar {
         display:none !important;
 }
 .dijit_a11y .dijitArrowButtonChar {
         display:inline !important;
 }
+
 .dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
 .dijit_a11y .dijitComboButton .dijitArrowButtonInner {
 	display:none !important;
 }
+
+/* Select */
 .dijitSelect {
 	margin: 0.2em;
 	border-collapse: collapse;
@@ -1593,7 +1957,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 .dj_ie .dijitSelect,
 .dj_ie7 .dijitSelect,
 .dj_iequirks .dijitSelect {
-	vertical-align: middle; 
+	vertical-align: middle; /* Set this back for what we hack in dijit inline */
 }
 .dj_ie8 .dijitSelect .dijitButtonText {
 	vertical-align: top;
@@ -1611,7 +1975,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 	color:#999 !important;
 }
 .dijitSelect .dijitButtonContents {
-	padding: 0px;
+	padding: 0;
 	background: transparent none;
 	white-space: nowrap;
 	text-align: left;
@@ -1619,36 +1983,50 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
 .dijitSelectFixedWidth .dijitButtonContents {
 	width: 100%;
 }
+
 .dijitSelectMenu .dijitMenuItemIcon {
-	
+	/* avoid blank area in left side of menu (since we have no icons) */
 	display:none;
 }
 .dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
 .dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
-	
+	/* Set back to static due to bug in ie6/ie7 - See Bug #9651 */
 	position: static;
 }
+
+/* Fix the baseline of our label (for multi-size font elements) */
 .dijitSelectLabel *
 {
 	vertical-align: baseline;
 }
+
+/* Styling for the currently-selected option (rich text can mess this up) */
 .dijitSelectSelectedOption * {
 	font-weight: bold;
 }
+
+/* Fix the styling of the dropdown menu to be more combobox-like */
 .dijitSelectMenu {
 	border-width: 1px;
 }
+
+/* Style the different areas of the button to look like a "real" dropdown */
+/* Remove margins on the sub-table */
 .dijitSelectMenu .dijitMenuTable {
-	margin: 0px;
+	margin: 0;
 	background-color: transparent;
 }
+
+/* Used in cases, such as FullScreen plugin, when we need to force stuff to static positioning. */
 .dijitForceStatic {
 	position: static !important;
 }
+
+/**** Disabled cursor *****/
 .dijitReadOnly *,
 .dijitDisabled *,
 .dijitReadOnly,
 .dijitDisabled {
-	
+	/* a region the user would be able to click on, but it's disabled */
 	cursor: default;
 }
diff --git a/lib/dijit/themes/dijit_rtl.css b/lib/dijit/themes/dijit_rtl.css
index d1dc4fe15..8ef3a285d 100644
--- a/lib/dijit/themes/dijit_rtl.css
+++ b/lib/dijit/themes/dijit_rtl.css
@@ -2,87 +2,117 @@
 	left: auto;
 	right: 0;
 }
+
+/* Menu */
+
 .dijitMenuItemRtl {
 	text-align: right;
 }
+
+/* Button */
+
 .dj_iequirks .dijitComboButtonRtl BUTTON {
-	
+	/* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */
 	float:left;
 }
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
+
+/* TextBox, ComboBox, Spinner */
+
+.dijitTextBoxRtl .dijitValidationContainer,
 .dijitTextBoxRtl .dijitSpinnerButtonContainer,
 .dijitComboBoxRtl .dijitArrowButtonContainer {
-	
+	/* combobox and spinner: line between the input area and the drop down button */
 	border-right-width: 1px !important;
-	border-right-style: solid !important;
-	border-left-width: 0px !important;
-	border-left-style: none !important;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer {
-	border-right: 1px solid black !important;
-	border-left: 0px none black !important;
+	border-left-width: 0 !important;
 }
+
 .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
 	right: 0;
 	left: auto;
 }
+
 .dijitTextBoxRtl .dijitSpinnerButtonContainer,
 .dijitTextBoxRtl .dijitValidationContainer,
 .dijitTextBoxRtl .dijitArrowButtonContainer {
 	float: left;
 }
+
+/* Calendar */
+
 .dijitCalendarRtl .dijitCalendarNextYear {
 	margin:0 0.55em 0 0;
 }
+
 .dijitCalendarRtl .dijitCalendarPreviousYear {
 	margin:0 0 0 0.55em;
 }
+
+
+/* Slider */
+
 .dijitSliderRtl .dijitSliderImageHandleV {
 	left:auto;
 }
+
 .dijitSliderRtl .dijitSliderImageHandleH {
 	left:-50%;
 }
+
 .dijitSliderRtl .dijitSliderMoveableH {
 	right:auto;
 	left:0;
 }
+
 .dijitSliderRtl .dijitRuleContainerV {
 	float:right;
 }
+
 .dj_ie .dijitSliderRtl .dijitRuleContainerV {
 	text-align:right;
 }
+
 .dj_ie .dijitSliderRtl .dijitRuleLabelV {
 	text-align:left;
 }
+
 .dj_ie .dijitSliderRtl .dijitRuleLabelH {
 	zoom:1;
 }
+
 .dijitSliderRtl .dijitSliderProgressBarH {
-	
+	/* workarounds for IE and FF */
 	float:right;
 	right:0;
 	left:auto;
 }
+
+/* ContentPane*/
 .dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError {
 	background-position:right;
 	padding-right:25px;
 }
+
+/* TabContainer */
+
 .dijitTabRtl .dijitTabCloseButton {
-	margin-left: 0px;
+	margin-left: 0;
 	margin-right: 1em;
 }
+
+/* TimePicker */
 .dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
 	width:100%;
 }
+
+
+/* ColorPalette */
 .dijitColorPaletteRtl .dijitColorPaletteUnder {
-	
+	/* needed in RTL mode when DropDownButton expands the ColorPalette beyond it's natural width */
 	left: auto;
 	right: 0;
 }
+
+/* Select */
 .dijitSelectRtl .dijitButtonContents {
 	text-align: right;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Calendar.css b/lib/dijit/themes/nihilo/Calendar.css
index a193f8ddf..2c9248b08 100644
--- a/lib/dijit/themes/nihilo/Calendar.css
+++ b/lib/dijit/themes/nihilo/Calendar.css
@@ -1,6 +1,7 @@
+/* Calendar*/
 
 .nihilo .dijitCalendarIncrementControl {
-	
+	/* next/prev month buttons */
 	width:15px;
 	height:15px;
 	background-image: url("images/spriteRoundedIconsSmall.png");
@@ -10,15 +11,18 @@
 	font-size:.1em;
 	background-image: url("images/spriteRoundedIconsSmall.gif");
 }
+
 .nihilo .dijitA11ySideArrow {
 	display: none;
 }
+
 .nihilo .dijitCalendarDecrease {
 	background-position: top left;
 }
 .nihilo .dijitCalendarIncrease {
 	background-position: -30px top;
 }
+
 .nihilo table.dijitCalendarContainer {
 	font-size: 100%;
 	border-spacing: 0;
@@ -26,8 +30,9 @@
 	border: 1px solid #ccc;
 	margin: 0;
 }
+
 .nihilo .dijitCalendarMonthContainer th {
-	
+	/* month header cell */
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;
 	padding-bottom:.2em;
@@ -37,8 +42,9 @@
 	padding-top:.2em;
 	padding-bottom:.1em;
 }
+
 .nihilo .dijitCalendarDayLabelTemplate {
-	
+	/* day of week labels */
 	background:#fefefe;
 	font-weight:normal;
 	padding-top:.15em;
@@ -47,15 +53,19 @@
 	color:#293a4b;
 	text-align:center;
 }
+
 .nihilo .dijitCalendarBodyContainer {
 	border-bottom: 1px solid #eeeeee;
 }
+
 .nihilo .dijitCalendarMonthLabel {
 	color:#293a4b;
 	font-weight: bold;
+	padding: 0 4px;
 }
+
 .nihilo .dijitCalendarDateTemplate {
-	
+	/* style for each day cell */
 	font-size: 0.9em;
 	font-weight: bold;
 	text-align: center;
@@ -64,54 +74,86 @@
 	background-color: #fdfdfd;
 	border:#fdfdfd solid 1px !important;
 }
+
 .dj_ie .nihilo .dijitCalendarDateTemplate {
 	padding: 0.1em .33em 0.02em .33em;
 }
+
 .nihilo .dijitCalendarPreviousMonth,
 .nihilo .dijitCalendarNextMonth 		{
-	
+	/* days that are part of the previous or next month */
 	color:#999999;
 	background-color:#f5f5f5 !important;
 	border:#f5f5f5 solid 1px !important;
 }
+
 .nihilo .dijitCalendarCurrentMonth {
-	
+	/* days that are part of this month */
 }
+
 .nihilo .dijitCalendarDisabledDate {
 	text-decoration:line-through !important;
 }
+
 .nihilo .dijitCalendarCurrentDate {
-	
+	/* cell for today's date */
 	text-decoration:underline;
 	font-weight:bold;
 }
+
 .nihilo .dijitCalendarSelectedDate {
-	
+	/* cell for the selected date */
 	background-color:#ffe284 !important;
 	color:black !important;
 	border:#f7c95c solid 1px !important;
 }
+
+
 .nihilo .dijitCalendarYearContainer {
-	
+	/* footer of the table that contains the year display/selector */
 	background:white url("images/titleBar.png") repeat-x top;
 }
+
 .nihilo .dijitCalendarYearLabel {
-	
+	/* container for all of 3 year labels */
 	margin:0;
 	padding:0.4em 0 0.25em 0;
 	text-align:center;
 }
+
 .nihilo .dijitCalendarSelectedYear {
-	
+	/* label for selected year */
 	color:black;
 	padding:0.2em;
 	padding-bottom:0.1em;
 	background-color:#ffe284 !important;
 	border:#f7c95c solid 1px !important;
 }
+
 .nihilo .dijitCalendarNextYear,
 .nihilo .dijitCalendarPreviousYear {
-	
+	/* label for next/prev years */
 	color:black !important;
 	font-weight:normal;
 }
+
+/* Styling for month DropDownButton */
+
+.nihilo .dijitCalendar .dijitDropDownButton {
+	margin: 0;
+}
+.nihilo .dijitCalendar .dijitButtonText {
+	padding: 0;
+}
+.nihilo .dijitCalendar .dijitDropDownButton .dijitButtonNode {
+	background-color: transparent;
+	background-image: none;
+	padding: 0;
+}
+
+/* Styling for month drop down list */
+
+.nihilo .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+	background-color: #ffe284;
+	color: #243C5F;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Calendar_rtl.css b/lib/dijit/themes/nihilo/Calendar_rtl.css
index 245d93fef..6fc06f4e3 100644
--- a/lib/dijit/themes/nihilo/Calendar_rtl.css
+++ b/lib/dijit/themes/nihilo/Calendar_rtl.css
@@ -1,7 +1,9 @@
+/* Calendar */
 
 .dijitRtl .nihilo .dijitCalendarDecrease {
 	background-position: -30px top;
 }
+
 .dijitRtl .nihilo .dijitCalendarIncrease {
-	background-position: 0px top;
+	background-position: 0 top;
 }
diff --git a/lib/dijit/themes/nihilo/ColorPalette.css b/lib/dijit/themes/nihilo/ColorPalette.css
index 328bc84a4..8fbe9d7ef 100644
--- a/lib/dijit/themes/nihilo/ColorPalette.css
+++ b/lib/dijit/themes/nihilo/ColorPalette.css
@@ -1,5 +1,5 @@
 .dijitColorPalette {
 	border:1px solid #d3d3d3;
 	background:#fff;
-	-moz-border-radius: 0px !important;
-}
+	-moz-border-radius: 0 !important;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Common.css b/lib/dijit/themes/nihilo/Common.css
index c894deadf..498699083 100644
--- a/lib/dijit/themes/nihilo/Common.css
+++ b/lib/dijit/themes/nihilo/Common.css
@@ -1,13 +1,17 @@
-
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 .nihilo .dojoDndItemBefore {
 	border-top: 2px solid #369;
 }
+
 .nihilo .dojoDndItemAfter {
 	border-bottom: 2px solid #369;
 }
+
 .nihilo .dojoDndItemOver {
 	cursor:pointer;
 }
+
 .nihilo table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .nihilo .dojoDndAvatar td	{ border: none; }
 .nihilo .dojoDndAvatar tr	{ border: none; }
diff --git a/lib/dijit/themes/nihilo/Dialog.css b/lib/dijit/themes/nihilo/Dialog.css
index 1c2ff2e3d..4affeb866 100644
--- a/lib/dijit/themes/nihilo/Dialog.css
+++ b/lib/dijit/themes/nihilo/Dialog.css
@@ -1,33 +1,39 @@
+/* Dialog */
 
 .nihilo .dijitDialog {
 	background: #eee;
 	border: 1px solid #d3d3d3;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-	padding: 0px;
+	-webkit-box-shadow: 0 5px 10px #adadad;
+	padding: 0;
 }
+
 .nihilo .dijitDialog .dijitDialogTitle {
-	
+	/* typography and styling of the dialog title */
 	font-size: 0.9em;
-	color: #3243C5F;
+	color: #243C5F;
 	font-weight: bold;
-	padding: 0px 4px;
+	padding: 0 4px;
 }
+
 .nihilo .dijitDialog .dijitDialogPaneContent {
 	background: #ffffff;
 	border-top: 1px solid #d3d3d3;
 	padding:10px;
+
 }
+
 .nihilo .dijitDialogTitleBar {
-	
+	/* outer container for the titlebar of the dialog */
 	background: #fafafa url("images/titleBar.png") repeat-x top left;
 	padding: 5px 6px 3px 6px;
-	outline:0; 
+	outline:0; /* remove this line if keyboard focus on dialog startup is an issue. tab still takes you to first focusable element */
 }
+
 .nihilo .dijitDialogCloseIcon {
-	
+	/* the default close icon for the dialog */
 	background-image: url("images/spriteRoundedIconsSmall.png");
 	background-repeat: no-repeat;
-	background-position: -60px 0px;
+	background-position: -60px 0;
 	position: absolute;
 	vertical-align: middle;
 	right: 6px;
@@ -41,49 +47,69 @@
 .nihilo .dijitDialogCloseIconHover {
 	background-position: -60px -15px;
 }
+
+/* Tooltip and TooltipDialog */
+
 .nihilo .dijitTooltip,
 .nihilo .dijitTooltipDialog {
-	
-	background: transparent;	
+	/* the outermost dom node, holding the connector and container */
+	background: transparent;	/* make the area on the sides of the arrow transparent */
 }
+
 .dijitTooltipBelow {
-	
+	/* leave room for arrow above content */
 	padding-top: 10px;
 }
+
 .dijitTooltipAbove {
-	
+	/* leave room for arrow below content */
 	padding-bottom: 10px;
 }
+
 .nihilo .dijitTooltipContainer {
-	
+	/*
+		The part with the text.
+
+		NOTE:
+			FF doesn't clip images used as CSS bgs if you specify a border
+			radius. If you use a solid color, it does. Webkit gets it right.
+			Sigh.
+		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
+	*/
 	background-color: #fff;
 	border:1px solid #d3d3d3;
 	padding:0.45em;
 }
+
 .nihilo .dijitTooltipConnector {
-	
-	border:0px;
+	/* the arrow piece */
+	border:0;
 	z-index: 2;
 }
+
 .nihilo .dijitTooltipABRight .dijitTooltipConnector {
-	
+	/* above or below tooltip, but the arrow appears on the right,
+		and the right edges of target and tooltip are aligned rather than the left */
 	left: auto !important;
 	right: 6px;
 }
+
 .nihilo .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
+	/* the arrow piece for tooltips below an element */
+	top: 0;
 	left: 6px;
 	background:url("images/tooltipConnectorUp.png") no-repeat top left;
 	width:17px;
 	height:11px;
 }
+
 .dj_ie .nihilo .dijitTooltipBelow .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorUp.gif");
 }
+
 .nihilo .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
+	/* the arrow piece for tooltips above an element */
+	bottom: 0;
 	left: 6px;
 	background:url("images/tooltipConnectorDown.png") no-repeat top left;
 	width:17px;
@@ -95,16 +121,13 @@
 .dj_ie6 .nihilo .dijitTooltipAbove .dijitTooltipConnector {
 	bottom: -5px;
 }
+
 .nihilo .dijitTooltipLeft {
 	padding-right: 10px;
 }
-.dj_ie6 .nihilo .dijitTooltipLeft {
-	padding-left: 11px;
-}
 .nihilo .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+	right: 0;
 	background:url("images/tooltipConnectorRight.png") no-repeat top left;
 	width:11px;
 	height:17px;
@@ -112,13 +135,13 @@
 .dj_ie .nihilo .dijitTooltipLeft .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorRight.gif");
 }
+
 .nihilo .dijitTooltipRight {
 	padding-left: 10px;
 }
 .nihilo .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+	left: 0;
 	background:url("images/tooltipConnectorLeft.png") no-repeat top left;
 	width:11px;
 	height:17px;
@@ -126,3 +149,4 @@
 .dj_ie .nihilo .dijitTooltipRight .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorLeft.gif");
 }
+
diff --git a/lib/dijit/themes/nihilo/Dialog_rtl.css b/lib/dijit/themes/nihilo/Dialog_rtl.css
index 105d5040c..5e0cffc3d 100644
--- a/lib/dijit/themes/nihilo/Dialog_rtl.css
+++ b/lib/dijit/themes/nihilo/Dialog_rtl.css
@@ -1,3 +1,4 @@
+/* Dialog */
 
 .dijitRtl .nihilo .dijitDialogTitleBar .dijitDialogCloseIcon {
 	right: auto;
diff --git a/lib/dijit/themes/nihilo/Editor.css b/lib/dijit/themes/nihilo/Editor.css
index 77280d9af..108aae78c 100644
--- a/lib/dijit/themes/nihilo/Editor.css
+++ b/lib/dijit/themes/nihilo/Editor.css
@@ -1,13 +1,16 @@
 .nihilo .dijitToolbar .dijitToolbarSeparator {
-	background: url('../../icons/images/editorIconsEnabled.png'); 
+	background: url('../../icons/images/editorIconsEnabled.png'); /* separator in editor icons sprite image - enabled state */
 }
+
+/**** ICONS *****/
+
 .nihilo .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled.png'); /* editor icons sprite image - enabled state */
 	background-repeat: no-repeat;
 	width: 18px;
 	height: 18px;
 	text-align: center;
 }
 .nihilo .dijitDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled.png'); /* editor icons sprite image - disabled state */
 }
diff --git a/lib/dijit/themes/nihilo/Editor_rtl.css b/lib/dijit/themes/nihilo/Editor_rtl.css
index 37849a5bd..ca1cc0c86 100644
--- a/lib/dijit/themes/nihilo/Editor_rtl.css
+++ b/lib/dijit/themes/nihilo/Editor_rtl.css
@@ -1,7 +1,9 @@
-
+/* Editor */
 .dijitRtl .nihilo .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); /* editor icons sprite image - enabled state */
 }
 .dijitRtl .nihilo .dijitDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); /* editor icons sprite image - disabled state */
 }
+
+
diff --git a/lib/dijit/themes/nihilo/Menu.css b/lib/dijit/themes/nihilo/Menu.css
index b530a90b1..cad469863 100644
--- a/lib/dijit/themes/nihilo/Menu.css
+++ b/lib/dijit/themes/nihilo/Menu.css
@@ -1,37 +1,44 @@
 
+/* Menu */
 .nihilo .dijitMenu,
 .nihilo .dijitMenuBar {
 	border: 1px solid #d3d3d3;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	background-color: #fff;
 }
+
 .nihilo .dijitBorderContainer .dijitMenuBar {
 	border: 1px #ccc solid;
 }
+
 .nihilo .dijitMenuItem {
 	font-family: sans-serif;
-	margin: 0px;
+	margin: 0;
 	color: #243C5F;
 }
 .nihilo .dijitMenuBar .dijitMenuItem {
 	padding: 4px 5px;
 }
+
 .nihilo .dijitMenuPreviousButton, .nihilo .dijitMenuNextButton {
 	font-style: italic;
 }
 .nihilo .dijitMenuItem TD {
 	padding:1px;
 }
+
 .nihilo .dijitMenuPassive .dijitMenuItemHover,
 .nihilo .dijitMenuItemSelected {
-	background-color: #ffe284; 
+	background-color: #ffe284; /* #95a0b0; #555555; #aaaaaa; #646464;  #60a1ea; #848484; */
 	color: #243C5F;
 }
+
 .nihilo .dijitMenuItemIcon {
 	width: 15px;
 	height: 15px;
 }
+
 .nihilo .dijitMenuExpand {
 	width:15px;
 	height:15px;
@@ -41,22 +48,30 @@
 .dj_ie6 .nihilo .dijitMenuExpand {
 	background-image:url('images/spriteRoundedIconsSmall.gif');
 }
+
 .nihilo .dijitMenuSeparator {
 	height: 1px;
 }
+
+/* separator can be two pixels -- set border of either one to 0 to have only one */
 .nihilo .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
+	border-bottom: 1px solid #fff; /*97adcb; */
 }
+
 .nihilo .dijitMenuSeparatorBottom {
 	border-top: 1px solid #d3d3d3;
 }
+
+/* the checked menu item */
 .nihilo .dijitCheckedMenuItemIconChar {
 	display: none;
 }
+
 .nihilo .dijitCheckedMenuItemIcon {
 	background-image: url('images/spriteCheckbox.gif');
 	background-position: -80px;
 }
+
 .nihilo .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Menu_rtl.css b/lib/dijit/themes/nihilo/Menu_rtl.css
index 06fccbf81..40b3b4124 100644
--- a/lib/dijit/themes/nihilo/Menu_rtl.css
+++ b/lib/dijit/themes/nihilo/Menu_rtl.css
@@ -1,8 +1,10 @@
+/* Menu */
 
 .dijitRtl .nihilo .dijitMenuItem .dijitMenuItemIcon {
 	padding-left: 3px;
-	padding-right: 0px;
+	padding-right: 0;
 }
+
 .dijitRtl .nihilo .dijitMenuItem .dijitMenuExpand {
-	background-position: 0px top;
-}
+	background-position: 0 top;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/ProgressBar.css b/lib/dijit/themes/nihilo/ProgressBar.css
index 7713aeb7c..6c50a7ef6 100644
--- a/lib/dijit/themes/nihilo/ProgressBar.css
+++ b/lib/dijit/themes/nihilo/ProgressBar.css
@@ -1,24 +1,33 @@
 
+/****
+		dijit.ProgressBar
+ ****/
+
 .nihilo .dijitProgressBar {
-	margin:2px 0px 2px 0px;
+	margin:2px 0 2px 0;
 }
+
 .nihilo .dijitProgressBarEmpty{
-	
+	/* outer container and background of the bar that's not finished yet*/
 	background:#fff url("images/progressBarEmpty.png") repeat-x center center;
 	border-color: #f8d582 #f8d582 #f8d582 #f8d582;
 }
+
 .nihilo .dijitProgressBarTile{
-	
+	/* inner container for finished portion when in 'tile' (image) mode */
 	background:#f0f0f0 url("images/progressBarFull.png") repeat-x center center;
 }
+
 .nihilo .dijitProgressBarFull {
 	border-right:1px solid #f8d582;
 }
+
 .nihilo .dijitProgressBarLabel {
-	
+	/* Set to a color that contrasts with both the "Empty" and "Full" parts. */
 	color:#293a4b;
 }
+
 .nihilo .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
+	/* use an animated gif for the progress bar in 'indeterminate' mode */
 	background:#cad2de url("images/progressBarAnim.gif") repeat-x center center;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/TimePicker.css b/lib/dijit/themes/nihilo/TimePicker.css
index 63157f29c..cffdbf55f 100644
--- a/lib/dijit/themes/nihilo/TimePicker.css
+++ b/lib/dijit/themes/nihilo/TimePicker.css
@@ -1,42 +1,51 @@
-
+/* Time Picker */
 .nihilo .dijitTimePickerTick,
 .nihilo .dijitTimePickerMarker {
 	border-color: #eeeeee;
 }
+
 .nihilo .dijitTimePickerTick {
 	color:white;
 }
+
 .nihilo .dijitTimePickerMarker {
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	color:#293a4b;
 	font-weight: bold;
 }
+
 .nihilo .dijitTimePickerItemSelected {
 	color: black;
 	background: #ffe284 none;
 }
+
 .nihilo .dijitTimePickerItemHover {
 	background: #d6d6dd none;
 	color:black;
 }
+
 .nihilo .dijitTimePickerItemHover,
 .nihilo .dijitTimePickerItemSelected {
 	position: relative;
 	z-index: 10;
 }
+
 .nihilo .dijitTimePickerTick .dijitTimePickerItemInner {
 	font-size:0.4em;
 }
+
 .nihilo .dijitTimePickerItemHover .dijitTimePickerItemInner,
 .nihilo .dijitTimePickerItemSelected .dijitTimePickerItemInner {
 	font-size:1em;
 }
+
 .nihilo .dijitTimePickerMarkerHover {
 	border-top: 1px solid #eeeeee;
 }
+
 .nihilo .dijitTimePickerTickHover,
 .nihilo .dijitTimePickerTickSelected {
 	margin-top:-0.3em;
 	margin-bottom:-0.3em;
 	border-bottom: none;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/TimePicker_rtl.css b/lib/dijit/themes/nihilo/TimePicker_rtl.css
index a6c0a68e7..50848c3fb 100644
--- a/lib/dijit/themes/nihilo/TimePicker_rtl.css
+++ b/lib/dijit/themes/nihilo/TimePicker_rtl.css
@@ -1,4 +1,4 @@
 .dj_ie6-rtl .nihilo .dijitTimePickerMarkerHover,
 .dj_ie7-rtl .nihilo .dijitTimePickerMarkerHover {
-        border-top: 0px; 
+        border-top: 0; /* IE6/7 bug causes mouseover/out event storm */
 }
diff --git a/lib/dijit/themes/nihilo/TitlePane.css b/lib/dijit/themes/nihilo/TitlePane.css
index 58ca8e56c..6d16ff940 100644
--- a/lib/dijit/themes/nihilo/TitlePane.css
+++ b/lib/dijit/themes/nihilo/TitlePane.css
@@ -1,3 +1,7 @@
+/**
+ * dijit.TitlePane
+ *
+ */
 
 .nihilo .dijitTitlePaneTitle {
 	background: #cccccc;
@@ -11,14 +15,17 @@
 .nihilo .dijitTitlePaneTitleHover  {
 	background: #f9f9f9 url("images/accordionItemActive.png") top repeat-x;
 }
+
 .nihilo .dijitTitlePane .dijitOpen .dijitArrowNode,
 .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
 	width:15px;
 	height:15px;
 }
+
 .nihilo .dijitTitlePaneTextNode {
 	color: #243C5F;
 }
+
 .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
 	background: url('images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 }
@@ -31,15 +38,17 @@
 .dj_ie6 .nihilo .dijitTitlePane .dijitOpen .dijitArrowNode {
 	background:url('images/spriteRoundedIconsSmall.gif') no-repeat -15px top;
 }
+
 .nihilo .dijitTitlePaneContentOuter {
 	background: #ffffff;
 	border:1px solid #bfbfbf;
-	border-top: 0px;
+	border-top: 0;
 }
 .nihilo .dijitTitlePaneContentInner {
 	padding:10px;
 }
+
 .nihilo .dijitTitlePaneTextNode {
 	margin-left: 4px;
 	margin-right: 4px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/TitlePane_rtl.css b/lib/dijit/themes/nihilo/TitlePane_rtl.css
index a8aef8334..7b3ba21f2 100644
--- a/lib/dijit/themes/nihilo/TitlePane_rtl.css
+++ b/lib/dijit/themes/nihilo/TitlePane_rtl.css
@@ -1,6 +1,6 @@
 .dijitRtl .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
+	background-position: 0 top;
 }
 .dj_ie6-rtl .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
+	background-position: 0 top;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Toolbar.css b/lib/dijit/themes/nihilo/Toolbar.css
index aeee9e4ed..1c3e32702 100644
--- a/lib/dijit/themes/nihilo/Toolbar.css
+++ b/lib/dijit/themes/nihilo/Toolbar.css
@@ -2,32 +2,38 @@
 	border-bottom: 1px solid #ccc;
 	background:#eaeaea url("images/titleBar.png") repeat-x top left;
 }
+
+/* setting a min-height on ditor toolbar */
 .dj_ie6 .nihilo .dijitToolbar {
 	height: 10px;
 }
+
 .nihilo .dijitToolbar .dijitButtonNode,
 .nihilo .dijitToolbar .dijitComboButton .dijitButtonContents,
 .nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButton {
 	background: none;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	border: none;
 	font-size: 12px;
 }
+
 .nihilo .dijitToolbar .dijitButton,
 .nihilo .dijitToolbar .dijitToggleButton,
 .nihilo .dijitToolbar .dijitDropDownButton,
 .nihilo .dijitToolbar .dijitComboButton .dijitButtonContents,
 .nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButton {
 	background: none;
-	padding: 1px;	
+	padding: 1px;	/* on hover etc., margin replaced w/border */
 }
+
 .nihilo .dijitToolbar .dijitButtonChecked,
 .nihilo .dijitToolbar .dijitToggleButtonChecked {
 	background-color:#ffeeb9;
 	border:1px solid #f7c95c;
 	padding: 0;
 }
+
 .nihilo .dijitToolbar .dijitButtonCheckedHover,
 .nihilo .dijitToolbar .dijitToggleButtonCheckedHover
  {
@@ -35,22 +41,25 @@
 	border:1px solid #f7c95c;
 	padding: 0;
 }
+
 .nihilo .dijitToolbar .dijitButtonHover,
 .nihilo .dijitToolbar .dijitToggleButtonHover,
 .nihilo .dijitToolbar .dijitDropDownButtonHover,
 .nihilo .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
 .nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
+	/* TODO: change this from Hover to Selected so that button is still highlighted while drop down is being used */
 	border: 1px solid #f7c95c;
 	padding: 0;
 	background-color:#ffe284;
 }
+
 .nihilo .dijitToolbar label {
 	padding: 3px 3px 0 6px;
 }
+
 .dj_ie .nihilo .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
 .dj_ie .nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
+	/* focus border doesn't appear on 
     for IE, so need to add it manually */
 	border: 1px #555 dotted !important;
-	padding: 0px;
-}
+	padding: 0;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Tree.css b/lib/dijit/themes/nihilo/Tree.css
index b0012be1e..a33b9696e 100644
--- a/lib/dijit/themes/nihilo/Tree.css
+++ b/lib/dijit/themes/nihilo/Tree.css
@@ -1,75 +1,100 @@
+/* Tree */
 
 .nihilo .dijitTreeNode {
     background : url('images/treeI.gif') no-repeat;
     background-position : top left;
     background-repeat : repeat-y;
-    zoom: 1;	
+    zoom: 1;
 }
+
+/* left vertical line (grid) for all nodes */
 .nihilo .dijitTreeIsLast {
     background: url('images/treeI_half.gif') no-repeat;
 }
+
 .nihilo .dijitTreeRowHover {
-	
+	/* using a transparent png so that we can still see grid lines, which are (unfortunately) behind the dijitRowNode that we are hovering over */
 	background-image: url(images/treeHover.png);
 	background-repeat: repeat;
 	background-color: transparent !important;
 }
+
 .nihilo .dijitTreeLabel {
 	font-weight: normal;
 	margin-left: 3px;
 }
+
 .nihilo .dijitTreeIsRoot {
     margin-left: 0;
     background-image: none;
 }
+
 .nihilo .dijitTreeExpando {
     width: 18px;
     height: 18px;
 }
+
 .nihilo .dijitTreeRow {
-	
+	/* so insert line shows up on IE when dropping after a target element */
 	padding-bottom: 2px;
 }
+
 .nihilo .dijitTreeContent {
     min-height: 18px;
     min-width: 18px;
     padding-left:1px;
 }
+
 .nihilo .dijitTreeExpandoOpened {
 	background: url('images/spriteTree.gif') no-repeat -18px top;
 }
+
 .nihilo .dijitTreeExpandoClosed {
 	background-image: url('images/spriteTree.gif');
 }
+
 .nihilo .dijitTreeExpandoLeaf {
 	background: url('images/spriteTree.gif') no-repeat -36px top;
 }
+
 .nihilo .dijitTreeExpandoLoading {
 	background-image: url('images/treeExpand_loading.gif');
 }
+
 .nihilo .dijitTreeIcon {
 	width: 16px;
 	height: 16px;
 }
+
 .nihilo .dijitFolderOpened {
 	background: url('images/spriteDivIcons.gif') no-repeat -16px top;
 }
+
 .nihilo .dijitFolderClosed {
 	background: url('images/spriteDivIcons.gif') no-repeat top left;
 }
+
 .nihilo .dijitLeaf {
 	background: url('images/spriteDivIcons.gif') no-repeat -32px top;
 }
+
+/* Drag and Drop on TreeNodes
+ * Put insert line on dijitTreeContent node so it's aligned w/
+ * (ie, indented equally with) target element, even
+ * though dijitTreeRowNode is the actual "drag object"
+ */
 .nihilo .dijitTreeNode .dojoDndItemBefore,
 .nihilo .dijitTreeNode .dojoDndItemAfter {
 	border-bottom: none;
 	border-top: none;
 }
+
 .nihilo .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-top: 2px solid #369;
 }
+
 .nihilo .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-bottom: 2px solid #369;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/Tree_rtl.css b/lib/dijit/themes/nihilo/Tree_rtl.css
index 6a7a889ba..4462ed1bf 100644
--- a/lib/dijit/themes/nihilo/Tree_rtl.css
+++ b/lib/dijit/themes/nihilo/Tree_rtl.css
@@ -1,18 +1,22 @@
+/* Tree */
 
 .dijitRtl .nihilo .dijitTreeNode,
 .dijitRtl .nihilo .dijitTreeExpandoLeaf {
-	
+	/* disable grid lines for Tree in RTL mode, too hard to support */
     background-image: none;
 }
+
 .dijitRtl .nihilo .dijitTreeContent {
-    padding-left: 0px;
+    padding-left: 0;
     padding-right: 1px;
 }
+
 .dijitRtl .nihilo .dijitTreeExpandoOpened {
-	
+	/* todo: icon contains grid line but grid lines disabled above */
 	background: url('images/spriteTree_rtl.gif') no-repeat -18px top;
 }
+
 .dijitRtl .nihilo .dijitTreeExpandoClosed {
-	
+	/* todo: icon contains grid line but grid lines disabled above */
 	background-image: url('images/spriteTree_rtl.gif');
 }
diff --git a/lib/dijit/themes/nihilo/form/Button.css b/lib/dijit/themes/nihilo/form/Button.css
index b1ea84e96..0be9ea4a3 100644
--- a/lib/dijit/themes/nihilo/form/Button.css
+++ b/lib/dijit/themes/nihilo/form/Button.css
@@ -1,28 +1,42 @@
 
+/*****
+		dijit.form.Button
+		dijit.form.DropDownButton
+		dijit.form.ComboButton
+		dijit.form.ComboBox (partial)
+		dijit.form.Spinner (partial) (TODO: create NumberSpinner.css file like claro has)
+ *****/
+
 .nihilo .dijitButtonNode {
-	
-	
+	/* enabled state - inner */
+	/* border:1px outset #a0a0a0; */
 	border:1px solid #dedede;
 	border-bottom:1px solid #dedede;
 	padding: 0.1em 0.2em 0.2em 0.2em;
 	background: #fff url("../images/buttonEnabled.png") repeat-x top left;
 }
+
 .nihilo .dijitSelect .dijitButtonContents {
 	border-right: none;
 }
+
 .nihilo .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+
 .nihilo .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
+	border-width: 0 0 0 1px;
 }
+
 .nihilo .dijitArrowButton {
 	color: #111;
 }
+
 .nihilo .dijitComboButton .dijitDownArrowButton {
 	padding-right:4px;
 }
+
 .nihilo .dijitComboBoxReadOnly,
 .nihilo .dijitSpinnerReadOnly,
 .nihilo .dijitSpinnerReadOnly .dijitButtonNode,
@@ -33,7 +47,7 @@
 .nihilo .dijitComboBoxDisabled,
 .nihilo .dijitSpinnerDisabled,
 .nihilo .dijitSpinnerDisabled .dijitButtonNode {
-	
+	/* disabled state - inner */
 	border-color: #dedede;
 	background:#fafafa url("../images/buttonDisabled.png") top repeat-x;
 	opacity: 0.60;
@@ -42,9 +56,11 @@
 .dj_ie7 .nihilo .dijitReadOnly INPUT,
 .dj_ie6 .nihilo .dijitComboButtonDisabled .dijitButtonText,
 .dj_ie7 .nihilo .dijitComboButtonDisabled .dijitButtonText {
-	
+	/* opacity doesn't work on table node in IE, work around here */
 	color: #aaa;
 }
+
+
 .nihilo .dijitButtonHover .dijitButtonNode,
 .nihilo .dijitButtonNodeHover,
 .nihilo .dijitToggleButtonHover .dijitButtonNode,
@@ -52,11 +68,12 @@
 .nihilo .dijitButtonContentsHover,
 .nihilo .dijitDownArrowButtonHover,
 .nihilo .dijitUpArrowButtonHover {
-	
-	
+	/* hover state - inner */
+	/* TODO: change from Hover to Selected so that button is still highlighted while drop down is being used */
 	color:#243C5F;
 	background:#fcfcfc url("../images/buttonHover.png") repeat-x top left;
 }
+
 .nihilo .dijitUpArrowButtonActive,
 .nihilo .dijitDownArrowButtonActive,
 .nihilo .dijitButtonActive .dijitButtonNode,
@@ -64,14 +81,18 @@
 .nihilo .dijitDropDownButtonActive .dijitButtonNode,
 .nihilo .dijitComboButton .dijitButtonContentsActive,
 .nihilo .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
+	/* active state - inner (for when you are pressing a normal button, or
+	 * when a radio-type button is in a depressed state
+	 */
 	border-color:#dedede;
 	background: #f5f5f5 url("../images/buttonActive.png") top left repeat-x;
 }
+
+
 .nihilo .dijitArrowButtonInner {
 	background-image: url("../images/spriteArrows.png");
 	background-repeat: no-repeat;
-	background-position: 0px center;
+	background-position: 0 center;
 	width: 11px;
 	height: 11px;
 }
@@ -88,10 +109,10 @@
 	background-image: url("../images/spriteArrows.gif");
 }
 .dj_webkit .nihilo .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
+	margin-top: -1px; /* image has too many blank pixels on top */
 }
 .dj_ie .nihilo .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: 1px; 
+	margin-top: 1px; /* image has too many blank pixels on top */
 }
 .nihilo .dijitSpinnerButtonContainer {
 	width: auto;
diff --git a/lib/dijit/themes/nihilo/form/Button_rtl.css b/lib/dijit/themes/nihilo/form/Button_rtl.css
index 3a7acc04c..60d4c4da4 100644
--- a/lib/dijit/themes/nihilo/form/Button_rtl.css
+++ b/lib/dijit/themes/nihilo/form/Button_rtl.css
@@ -1,7 +1,8 @@
 .dijitRtl .nihilo .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
+	border-width: 0 0 0 1px;
 }
 .dijitRtl .nihilo .dijitSelect .dijitButtonContents {
 	border-left: none;
 	border-right-width: 1px;
 }
+
diff --git a/lib/dijit/themes/nihilo/form/Checkbox.css b/lib/dijit/themes/nihilo/form/Checkbox.css
index ceee44ffe..260666f99 100644
--- a/lib/dijit/themes/nihilo/form/Checkbox.css
+++ b/lib/dijit/themes/nihilo/form/Checkbox.css
@@ -1,40 +1,67 @@
 
+/*
+ *  CheckBox and Radio Widgets,
+ *	and the CSS to embed a checkbox or radio icon inside a ToggleButton.
+ *
+ *	Order of images in the default sprite (from L to R, checkbox and radio in same image):
+ *		checkbox	normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+ *
+ *		radio		normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+*/
+
 .nihilo .dijitToggleButton .dijitCheckBox,
 .nihilo .dijitToggleButton .dijitCheckBoxIcon {
 	background-image: url('../images/spriteCheckbox.gif');
 }
+
 .nihilo .dijitCheckBox,
-.nihilo .dijitCheckBoxIcon {		
-	background-image: url('../images/spriteCheckbox.gif'); 
+.nihilo .dijitCheckBoxIcon {		/* inside a toggle button */
+	background-image: url('../images/spriteCheckbox.gif'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
 	margin: 0;
 	padding: 0;
 }
+
 .nihilo .dijitCheckBox,
 .nihilo .dijitToggleButton .dijitCheckBoxIcon {
-	
+	/* unchecked */
 	background-position: -16px;
 }
+
 .nihilo .dijitCheckBoxChecked,
 .nihilo .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
+	/* checked */
+	background-position: 0;
 }
+
 .nihilo .dijitCheckBoxDisabled {
-	
+	/* disabled */
 	background-position: -48px;
 }
+
 .nihilo .dijitCheckBoxCheckedDisabled {
-	
+	/* disabled but checked */
 	background-position: -32px;
 }
+
 .nihilo .dijitCheckBoxHover {
-	
+	/* hovering over an unchecked enabled checkbox */
 	background-position: -80px;
 }
+
 .nihilo .dijitCheckBoxCheckedHover {
-	
+	/* hovering over a checked enabled checkbox */
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/form/Common.css b/lib/dijit/themes/nihilo/form/Common.css
index fab63eba8..65dddc637 100644
--- a/lib/dijit/themes/nihilo/form/Common.css
+++ b/lib/dijit/themes/nihilo/form/Common.css
@@ -1,25 +1,42 @@
 
+/****
+		dijit.form.TextBox
+		dijit.form.ValidationTextBox
+		dijit.form.SerializableTextBox
+		dijit.form.RangeBoundTextBox
+		dijit.form.NumberTextBox
+		dijit.form.CurrencyTextBox
+		dijit.form.NumberSpinner
+		dijit.form.ComboBox (partial)
+ ****/
+
 .nihilo .dijitInputContainer INPUT,
 .nihilo .dijitTextBox {
-	margin: 0em 0.1em;
+	margin: 0 0.1em;
 }
+
 .nihilo .dijitTextBox,
 .nihilo .dijitTextArea {
-	
+	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
+		For TextBox, ComboBox, Spinner: the table that contains the input.
+		Otherwise the actual input element.
+	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
 	border:1px solid #d3d3d3;
 }
+
 .nihilo .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em !important;
 }
 .nihilo .dijitTextBox .dijitButtonNode {
-	
+	/* line between the input area and the drop down button */
 	border-color: #d3d3d3;
 }
+
 .nihilo .dijitTextBoxFocused,
 .nihilo .dijitTextAreaFocused {
-	
+	/* input field when focused (ie: typing affects it) */
 	border-color:#b3b3b3;
 }
 .nihilo .dijitTextBoxFocused .dijitButtonNode,
@@ -32,20 +49,26 @@
 .nihilo .dijitSpinner .dijitDownArrowButtonActive {
 	border-top-color:#d3d3d3;
 }
+
 .nihilo .dijitError {
 	border-color:#b3b3b3;
 	background-color:#f9f7ba;
 	background-image:none;
 }
+
 .nihilo .dijitErrorFocused {
 	background-color:#ff6;
 	background-image:none;
 }
+
+/* Validation errors  */
 .nihilo .dijitValidationIcon {
-	
+	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
 }
+
+/* The highlight is shown in the ComboBox menu. */
 .nihilo .dijitComboBoxHighlightMatch {
 	background-color:#d3d3d3;
 }
diff --git a/lib/dijit/themes/nihilo/form/RadioButton.css b/lib/dijit/themes/nihilo/form/RadioButton.css
index c876f590e..d0dba3020 100644
--- a/lib/dijit/themes/nihilo/form/RadioButton.css
+++ b/lib/dijit/themes/nihilo/form/RadioButton.css
@@ -1,40 +1,66 @@
+/*
+ *  CheckBox and Radio Widgets,
+ *	and the CSS to embed a checkbox or radio icon inside a ToggleButton.
+ *
+ *	Order of images in the default sprite (from L to R, checkbox and radio in same image):
+ *		checkbox	normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+ *
+ *		radio		normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+*/
 
 .nihilo .dijitToggleButton .dijitRadio,
 .nihilo .dijitToggleButton .dijitRadioIcon {
 	background-image: url('../images/spriteRadio.gif');
 }
+
 .nihilo .dijitRadio,
-.nihilo .dijitRadioIcon	{		
-	background-image: url('../images/spriteRadio.gif'); 
+.nihilo .dijitRadioIcon	{		/* inside a toggle button */
+	background-image: url('../images/spriteRadio.gif'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
 	margin: 0;
 	padding: 0;
 }
+
 .nihilo .dijitRadio,
 .nihilo .dijitToggleButton .dijitRadioIcon {
-	
+	/* unselected */
 	background-position: -16px;
 }
+
 .nihilo .dijitRadioChecked,
 .nihilo .dijitToggleButtonChecked .dijitRadioIcon {
-	
-	background-position: 0px;
+	/* selected */
+	background-position: 0;
 }
+
 .nihilo .dijitRadioDisabled {
-	
+	/* unselected and disabled */
 	background-position: -48px;
 }
+
 .nihilo .dijitRadioCheckedDisabled {
-	
+	/* selected but disabled */
 	background-position: -32px;
 }
+
 .nihilo .dijitRadioHover {
-	
+	/* hovering over an unselected enabled radio button */
 	background-position: -80px;
 }
+
 .nihilo .dijitRadioCheckedHover {
-	
+	/* hovering over a selected enabled radio button */
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/form/Select.css b/lib/dijit/themes/nihilo/form/Select.css
index af811f50e..61967e550 100644
--- a/lib/dijit/themes/nihilo/form/Select.css
+++ b/lib/dijit/themes/nihilo/form/Select.css
@@ -1,6 +1,8 @@
 .nihilo .dijitSelect .dijitButtonNode {
-	padding: 0px;
+	padding: 0;
 }
+
+/* Make unselected "look" more like a text box and less like a button */
 .nihilo .dijitSelect .dijitButtonContents {
 	padding-top: 1px;
     background:#fff url("../images/validationInputBg.png") repeat-x top left;
@@ -14,11 +16,14 @@
 	background: transparent none;
 }
 .dj_ie .nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
+	padding-top: 0;
 }
+
 .nihilo .dijitSelect .dijitArrowButton {
-	padding: 0px 2px;
+	padding: 0 2px;
 }
+
+/* Mirror DropDownButton */
 .nihilo .dijitSelectDisabled .dijitButtonNode {
     border-color: #dedede;
     background:#fafafa url("../images/buttonDisabled.png") top repeat-x;
@@ -26,19 +31,24 @@
 .dj_ie .nihilo .dijitSelectDisabled  .dijitButtonNode * {
 	filter: gray() alpha(opacity=50);
 }
+
 .nihilo .dijitSelectHover .dijitButtonNode {
     color:#000;
     background:#fcfcfc url("../images/buttonHover.png") repeat-x top left;
 }
+
 .nihilo .dijitSelectActive .dijitButtonNode,
 .nihilo .dijitSelectOpened .dijitButtonNode {
     border-color:#dedede;
     background: #f5f5f5 url("../images/buttonActive.png") top left repeat-x;
 }
+
+/* Make the menu look more combobox-like */
 .nihilo .dijitSelectMenu td {
-	padding: 0em;
+	padding: 0;
 }
 .nihilo .dijitSelectMenu .dijitMenuItemLabel,
 .nihilo .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
+
diff --git a/lib/dijit/themes/nihilo/form/Slider.css b/lib/dijit/themes/nihilo/form/Slider.css
index 6458e89f0..16bcd0980 100644
--- a/lib/dijit/themes/nihilo/form/Slider.css
+++ b/lib/dijit/themes/nihilo/form/Slider.css
@@ -1,38 +1,49 @@
 
+/****
+ 	SLIDER
+****/
+
 .nihilo .dijitSliderProgressBarH {
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .nihilo .dijitSliderProgressBarV {
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .nihilo .dijitSliderFocused .dijitSliderProgressBarH,
 .nihilo .dijitSliderFocused .dijitSliderLeftBumper {
 	background-image:url("../images/sliderFullFocus.png");
 }
+
 .nihilo .dijitSliderFocused .dijitSliderProgressBarV,
 .nihilo .dijitSliderFocused .dijitSliderBottomBumper {
 	background-image:url("../images/sliderFullVerticalFocus.png");
 }
+
 .nihilo .dijitSliderRemainingBarV {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y bottom left;
 }
+
 .nihilo .dijitSliderRemainingBarH {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 }
+
 .nihilo .dijitSliderBar {
 	border-style: solid;
 	outline:1px;
-	
+	/* border-color: #b4b4b4; */
 }
 .nihilo .dijitSliderFocused .dijitSliderBar {
 	border-color:#727272;
 }
+
 .nihilo .dijitSliderImageHandleH {
-	border:0px;
+	border:0;
 	width:15px;
 	height:18px;
 	background:url("../images/preciseSliderThumb.png") no-repeat center top;
@@ -42,37 +53,44 @@
 	background-image:url("../images/preciseSliderThumbFocus.png");
 	#background-image:url("../images/preciseSliderThumbFocus.gif");
 }
+
 .nihilo .dijitSliderLeftBumper {
 	border-left-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .nihilo .dijitSliderRightBumper {
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 	border-color: #b4b4b4;
 	border-right-width: 1px;
 }
+
 .nihilo .dijitSliderImageHandleV {
-	border:0px;
+	border:0;
 	width:20px;
 	height:15px;
 	background:url("../images/sliderThumb.png") no-repeat center center;
 	#background:url("../images/sliderThumb.gif") no-repeat center center;
 }
+
 .nihilo .dijitSliderFocused .dijitSliderImageHandleV {
 	background-image:url("../images/sliderThumbFocus.png");
 	#background-image:url("../images/sliderThumbFocus.gif");
 }
+
 .nihilo .dijitSliderBottomBumper {
 	border-bottom-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .nihilo .dijitSliderTopBumper {
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y top left;
 	border-color: #b4b4b4;
 	border-top-width: 1px;
 }
+
 .nihilo .dijitSliderIncrementIconH,
 .nihilo .dijitSliderIncrementIconV {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -45px top;
@@ -83,6 +101,7 @@
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -30px top;
 }
+
 .nihilo .dijitSliderDecrementIconH,
 .nihilo .dijitSliderDecrementIconV {
 	width:15px;
@@ -91,12 +110,14 @@
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -15px top;
 }
 .nihilo .dijitSliderDecrementIconH {
-	background:url('../images/spriteRoundedIconsSmall.png') no-repeat 0px top;
-	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat 0px top;
+	background:url('../images/spriteRoundedIconsSmall.png') no-repeat 0 top;
+	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat 0 top;
 }
+
 .nihilo .dijitSliderButtonInner {
 	visibility:hidden;
 }
+
 .nihilo .dijitSliderReadOnly *,
 .nihilo .dijitSliderDisabled * {
 	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
@@ -104,7 +125,7 @@
 }
 .nihilo .dijitSliderReadOnly .dijitSliderDecrementIconH,
 .nihilo .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: 0px -15px;
+	background-position: 0 -15px;
 }
 .nihilo .dijitSliderReadOnly .dijitSliderIncrementIconH,
 .nihilo .dijitSliderDisabled .dijitSliderIncrementIconH {
@@ -117,4 +138,4 @@
 .nihilo .dijitSliderReadOnly .dijitSliderIncrementIconV,
 .nihilo .dijitSliderDisabled .dijitSliderIncrementIconV {
 	background-position: -45px -15px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/form/Slider_rtl.css b/lib/dijit/themes/nihilo/form/Slider_rtl.css
index fc40452de..1523d4a96 100644
--- a/lib/dijit/themes/nihilo/form/Slider_rtl.css
+++ b/lib/dijit/themes/nihilo/form/Slider_rtl.css
@@ -1,4 +1,6 @@
 
+/* Slider */
+
 .dijitRtl .nihilo .dijitSliderProgressBarH,
 .dijitRtl .nihilo .dijitSliderRemainingBarH,
 .dijitRtl .nihilo .dijitSliderLeftBumper,
@@ -6,23 +8,28 @@
 .dijitRtl .nihilo .dijitSliderTopBumper {
 	background-position: top right;
 }
+
 .dijitRtl .nihilo .dijitSliderProgressBarV,
 .dijitRtl .nihilo .dijitSliderRemainingBarV,
 .dijitRtl .nihilo .dijitSliderBottomBumper {
 	background-position: bottom right;
 }
+
 .dijitRtl .nihilo .dijitSliderLeftBumper {
-	border-left-width: 0px;
+	border-left-width: 0;
 	border-right-width: 1px;
 }
+
 .dijitRtl .nihilo .dijitSliderRightBumper {
 	border-left-width: 1px;
-	border-right-width: 0px;
+	border-right-width: 0;
 }
+
 .dijitRtl .nihilo .dijitSliderIncrementIconH {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat left top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat left top;
 }
+
 .dijitRtl .nihilo .dijitSliderDecrementIconH {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -30px top;
diff --git a/lib/dijit/themes/nihilo/form/TimeTextBox.css b/lib/dijit/themes/nihilo/form/TimeTextBox.css
index d450925b4..bf67b66d0 100644
--- a/lib/dijit/themes/nihilo/form/TimeTextBox.css
+++ b/lib/dijit/themes/nihilo/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
+@CHARSET "UTF-8";
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/layout/AccordionContainer.css b/lib/dijit/themes/nihilo/layout/AccordionContainer.css
index a74b01a2e..f42db806c 100644
--- a/lib/dijit/themes/nihilo/layout/AccordionContainer.css
+++ b/lib/dijit/themes/nihilo/layout/AccordionContainer.css
@@ -1,8 +1,15 @@
+/**
+ * dijit.layout.Accordioncontainer
+ *
+ */
 
 .nihilo .dijitAccordionContainer {
 	border-color: #ccc;
 	background-color: #fff;
 }
+
+/* common */
+
 .nihilo .dijitAccordionTitle {
 	background:#fafafa url("../images/titleBar.png") repeat-x top left;
 	border-top: 1px solid #dedede;
@@ -11,6 +18,7 @@
 	font-weight: bold;
 	color: #6d6d6d;
 }
+
 .nihilo .dijitAccordionTitleSelected  {
 	background: #f9f9f9 url("../images/accordionItemActive.png") top repeat-x;
 	font-weight: bold;
@@ -19,16 +27,19 @@
 	padding: 5px 4px 5px 8px;
 	color: #243C5F;
 }
+
 .nihilo .dijitAccordionArrow {
 	background:url("../images/spriteRoundedIconsSmall.gif") no-repeat -30px top;
 	width:15px;
 	height:15px;
 	margin-top:-1px;
 }
+
 .nihilo .dijitAccordionTitleSelected .dijitAccordionArrow {
 	background:url("../images/spriteRoundedIconsSmall.gif") no-repeat -15px top;
 	margin-top:-1px;
 }
+
 .nihilo .dijitAccordionText {
 	margin-left: 4px;
 	margin-right: 4px;
diff --git a/lib/dijit/themes/nihilo/layout/AccordionContainer_rtl.css b/lib/dijit/themes/nihilo/layout/AccordionContainer_rtl.css
index b71afbacf..f669a4753 100644
--- a/lib/dijit/themes/nihilo/layout/AccordionContainer_rtl.css
+++ b/lib/dijit/themes/nihilo/layout/AccordionContainer_rtl.css
@@ -1,7 +1,8 @@
 .dijitRtl .nihilo .dijitAccordionArrow {
-	background-position: 0px top;
+	background-position: 0 top;
 }
+
 .dijitRtl .nihilo .dijitAccordionTitleSelected .dijitAccordionArrow {
-	
+	/* same rule as LTR mode, just listed to override previous rule in this file */
 	background-position: -15px top;
 }
diff --git a/lib/dijit/themes/nihilo/layout/BorderContainer.css b/lib/dijit/themes/nihilo/layout/BorderContainer.css
index 29fcc39da..493da54e1 100644
--- a/lib/dijit/themes/nihilo/layout/BorderContainer.css
+++ b/lib/dijit/themes/nihilo/layout/BorderContainer.css
@@ -1,53 +1,70 @@
+/**
+ * dijit.layout.BorderContainer
+ *
+ */
 
 .nihilo .dijitBorderContainer {
 	background-color: #fcfcfc;
 	padding: 5px;
 }
+
 .nihilo .dijitSplitContainer-child,
 .nihilo .dijitBorderContainer-child {
-	
+	/* By default, put borders on all children of BorderContainer,
+	 *  to give illusion of borders on the splitters themselves.
+	 */
     border: 1px #ccc solid;
 }
+
 .nihilo .dijitBorderContainer-dijitTabContainerTop,
 .nihilo .dijitBorderContainer-dijitTabContainerBottom,
 .nihilo .dijitBorderContainer-dijitTabContainerLeft,
 .nihilo .dijitBorderContainer-dijitTabContainerRight {
-	
+	/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+	 * so override rule setting border on domNode
+	 */
 	 border: none;
 }
+
 .nihilo .dijitBorderContainer-dijitBorderContainer {
-	
+	/* also, make nested BorderContainers look like a single big widget with lots of splitters */
 	border: none;
-	padding: 0px;
+	padding: 0;
 }
+
 .nihilo .dijitSplitterH,
 .nihilo .dijitGutterH {
 	background:#FCFCFC;
 	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
+	border-left:0 solid #d3d3d3;
+	border-right:0 solid #d3d3d3;
 	height:5px;
 }
+
 .nihilo .dijitSplitterH .dijitSplitterThumb {
 	background:#8BA0BD none;
 	height:1px;
 	top:2px;
 	width:19px;
 }
+
 .nihilo .dijitSplitterV,
 .nihilo .dijitGutterV {
 	background:#FCFCFC;
 	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
+	border-top:0 solid #d3d3d3;
+	border-bottom:0 solid #d3d3d3;
 	width:5px;
 }
+
 .nihilo .dijitSplitterV .dijitSplitterThumb {
 	background:#8BA0BD none;
 	height:19px;
 	left:2px;
 	width:1px;
 }
+
+/* active splitter */
 .nihilo .dijitSplitterActive {
 	font-size: 1px;
 	background-image: none;
@@ -56,4 +73,4 @@
 	opacity: 0.6;
 	filter: Alpha(Opacity=60);
 	margin: 0;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/layout/ContentPane.css b/lib/dijit/themes/nihilo/layout/ContentPane.css
index 2bd0a191b..75272db5a 100644
--- a/lib/dijit/themes/nihilo/layout/ContentPane.css
+++ b/lib/dijit/themes/nihilo/layout/ContentPane.css
@@ -1,7 +1,10 @@
+/* ContentPane */
 
 .nihilo .dijitContentPane {
-    padding: 0px;
+    padding: 0;
 }
+
+/* nested layouts */
 .nihilo .dijitTabContainerTop-dijitContentPane,
 .nihilo .dijitTabContainerLeft-dijitContentPane,
 .nihilo .dijitTabContainerRight-dijitContentPane,
@@ -10,8 +13,9 @@
     background-color: #fff;
     padding: 5px;
 }
+
 .nihilo .dijitSplitContainer-dijitContentPane,
 .nihilo .dijitBorderContainer-dijitContentPane {
-    background-color: #fff;		
+    background-color: #fff;		/* override background-color setting on parent .dijitBorderContainer */
     padding: 5px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/layout/SplitContainer.css b/lib/dijit/themes/nihilo/layout/SplitContainer.css
index 79d8fbdde..9f4defadd 100644
--- a/lib/dijit/themes/nihilo/layout/SplitContainer.css
+++ b/lib/dijit/themes/nihilo/layout/SplitContainer.css
@@ -1,27 +1,34 @@
+/**
+ * dijit.layout.SplitContainer
+ *
+ */
 
 .nihilo .dijitSplitContainerSizerH {
 	background:url("../images/splitContainerSizerV.png") repeat-y #fff;
 	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
+	border-left:0 solid #d3d3d3;
+	border-right:0 solid #d3d3d3;
 	width:5px;
 }
+
 .nihilo .dijitSplitContainerSizerH .thumb {
 	background:url("../images/splitContainerSizerV-thumb.png") no-repeat;
 	left:1px;
 	width:2px;
 	height:19px;
 }
+
 .nihilo .dijitSplitContainerSizerV {
 	background:url("../images/splitContainerSizerH.png") repeat-x #fff;
 	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
+	border-top:0 solid #d3d3d3;
+	border-bottom:0 solid #d3d3d3;
 	height:2px;
 }
+
 .nihilo .dijitSplitContainerSizerV .thumb {
 	background:url("../images/splitContainerSizerH-thumb.png") no-repeat;
 	top:1px;
 	width:19px;
 	height:5px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/layout/TabContainer.css b/lib/dijit/themes/nihilo/layout/TabContainer.css
index 3652f229b..21266577e 100644
--- a/lib/dijit/themes/nihilo/layout/TabContainer.css
+++ b/lib/dijit/themes/nihilo/layout/TabContainer.css
@@ -1,133 +1,99 @@
+/**
+ * dijit.layout.TabContainer
+ *
+ * To style TabContainer with rounded corners
+ * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
+ * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
+ */
+@import url("../Menu.css");
+
+/* Classes for all types of tabs (top/bottom/left/right) */
 
-.nihilo .dijitMenu,
-.nihilo .dijitMenuBar {
-	border: 1px solid #d3d3d3;
-	margin: 0px;
-	padding: 0px;
-	background-color: #fff;
-}
-.nihilo .dijitBorderContainer .dijitMenuBar {
-	border: 1px #ccc solid;
-}
-.nihilo .dijitMenuItem {
-	font-family: sans-serif;
-	margin: 0px;
-	color: #243C5F;
-}
-.nihilo .dijitMenuBar .dijitMenuItem {
-	padding: 4px 5px;
-}
-.nihilo .dijitMenuPreviousButton, .nihilo .dijitMenuNextButton {
-	font-style: italic;
-}
-.nihilo .dijitMenuItem TD {
-	padding:1px;
-}
-.nihilo .dijitMenuPassive .dijitMenuItemHover,
-.nihilo .dijitMenuItemSelected {
-	background-color: #ffe284; 
-	color: #243C5F;
-}
-.nihilo .dijitMenuItemIcon {
-	width: 15px;
-	height: 15px;
-}
-.nihilo .dijitMenuExpand {
-	width:15px;
-	height:15px;
-	background-image: url(../images/spriteRoundedIconsSmall.png);
-	background-position: -30px top;
-}
-.dj_ie6 .nihilo .dijitMenuExpand {
-	background-image:url(../images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitMenuSeparator {
-	height: 1px;
-}
-.nihilo .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
-}
-.nihilo .dijitMenuSeparatorBottom {
-	border-top: 1px solid #d3d3d3;
-}
-.nihilo .dijitCheckedMenuItemIconChar {
-	display: none;
-}
-.nihilo .dijitCheckedMenuItemIcon {
-	background-image: url(../images/spriteCheckbox.gif);
-	background-position: -80px;
-}
-.nihilo .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-	background-position: -64px;
-}
 .nihilo .dijitTabContainer .tabStripRBtn {
 	margin-right: 21px;
 }
 .nihilo .dijitTabContainer .tabStripLBtn {
 	margin-left: 21px;
 }
+
 .nihilo .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
-	top: 0px;
+	top: 0;
 }
+
+/* Tabs, shared classes */
 .nihilo .dijitTabPaneWrapper {
 	background:#fff;
 	border:1px solid #ccc;
 	margin: 0;
 	padding: 0;
 }
+
 .nihilo .dijitTabInnerDiv {
-	padding:0px 3px 0px 0px;
+	padding:0 3px 0 0;
 	margin: 0 0 0 4px;
 	background: url("../images/tabContainerSprite.gif") no-repeat;
 	background-position: right -400px;
 }
+
 .nihilo .dijitTab {
 	line-height:normal;
-	margin:0 2px 0 0;	
-	padding:0px;
+	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
+	padding:0;
 	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
 	color: #6d6d6d;
 	border-bottom: 1px #ccc solid;
 }
+
 .nihilo .dijitTabInnerDiv .dijitTabContent {
 	padding:3px 3px 3px 4px;
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
 	position: relative;
 }
+
+/* hovered tab */
 .nihilo .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px;
+	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
 }
+
 .nihilo .dijitTabHover .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
 }
+
 .nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
 }
+
+/* checked tab*/
 .nihilo .dijitTabChecked
 {
-	
-	background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px;
+	/* the selected tab (with or without hover) */
+	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
 }
+
 .nihilo .dijitTabChecked .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
 }
+
 .nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
 	color: #243C5F !important;
 }
+
+/* Nested Tabs */
 .nihilo .dijitTabContainerNested .dijitTabListWrapper {
 	height: auto;
 }
+
 .nihilo .dijitTabContainerTabListNested {
 	background: #FDFDFD;
 	border: none;
-	margin-bottom: 0px;		
+	margin-bottom: 0;		/* override margin: -1px; */
 }
 .nihilo .dijitTabContainerTabListNested .dijitTab {
 	background: none;
 	border: none;
-	top: 0px;	
+	top: 0;	/* override top:1px setting of top-level tabs */
 }
 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
 .nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
@@ -141,19 +107,23 @@
 	font-weight: bold;
 }
 .nihilo .dijitTabContainerSpacerNested {
-	
-	height: 0px;
-	border-bottom: 0px;
+	/* thinner line between tab (labels) and content */
+	height: 0;
+	border-bottom: 0;
 }
 .nihilo .dijitTabPaneWrapperNested {
-	border: none;	
+	border: none;	/* prevent double border */
 }
+
+
+/* Close button */
 .nihilo .dijitTabCloseButton {
 	background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
 	width: 15px;
 	height: 15px;
 	margin-top: -1px;
 }
+
 .dj_ie6 .nihilo .dijitTabCloseButton {
 	background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 }
@@ -163,40 +133,42 @@
 .dj_ie6 .nihilo .dijitTabCloseButtonHover {
 	background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px;
 }
-.nihilo .dijitTab .tabLabel {
-	
-	min-height: 15px;
-	display: inline-block;
-}
-.dj_ie6 .nihilo .dijitTabButtonIcon {
-	
-	height: 18px;
-	width: 1px;
-}
+
+/* ================================ */
+/* top tabs */
 .nihilo .dijitTabContainerTop-tabs {
 	border-bottom: none;
 	padding-bottom: 1px;
 	background-position: bottom;
 	padding-left: 3px;
 }
+
 .dj_ie6 .nihilo .dijitTabListContainer-top,
 .dj_ie7 .nihilo .dijitTabListContainer-top {
 	z-index: 3;
 }
+
 .dj_ie6 .nihilo .dijitTabContainerTop-tabs,
 .dj_ie7 .nihilo .dijitTabContainerTop-tabs {
 	border-bottom: 1px solid #ccc;
-	padding-bottom: 0px;
+	padding-bottom: 0;
 }
+
 .nihilo .dijitTabContainerTopNoStrip {
 	padding-top: 3px;
 }
+
+/* top container */
 .nihilo .dijitTabContainerTop-container {
 	border-top: none;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #f8f8f8;
 }
+
+/* strip */
 .nihilo .dijitTabContainer .dijitTabContainerTopStrip {
 	border-bottom: none;
 	padding-top: 1px;
@@ -206,77 +178,105 @@
 	border-right: 1px solid #CCC;
 	border-left: 1px solid #CCC;
 }
+
+
+/* ================================ */
+/* bottom tabs */
 .nihilo .dijitTabContainerBottom-tabs {
 	border-top: none;
 	background-position: top;
 	padding-left: 3px;
 }
+
 .dj_ie6 .nihilo .dijitTabListContainer-bottom,
 .dj_ie7 .nihilo .dijitTabListContainer-bottom {
 	z-index: 3;
 }
+
 .dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
 .dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
 	border-top: 1px solid #ccc;
 	margin-top: -1px;
 }
+
+/* bottom container */
 .nihilo .dijitTabContainerBottom-container {
 	border-bottom: none;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTab {
 	border-bottom: none;
 	border-top: 1px solid #ccc;
 	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
 	border-top-color: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
 	padding-top: 3px;
 	padding-bottom: 3px;
 	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
 	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
 	color: #243C5F;
 	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
 	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-	
+	/* the selected tab (with or without hover) */
 	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
 	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
 }
+
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
+
+/* strip */
 .nihilo .dijitTabContainer .dijitTabContainerBottomStrip {
 	border: 1px solid #ccc;
 	background: #f2f2f2;
 	border-top: none;
 	padding-bottom: 2px;
 }
+
+/* top/bottom strip */
 .nihilo .dijitTabContainerBottom-spacer,
 .nihilo .dijitTabContainerTop-spacer {
 	height: 2px;
 	border: 1px solid #ccc;
 	background: #f8f8f8;
 }
+
 .nihilo  .dijitTabContainerTop-spacer {
 	margin-top: -1px;
 }
 .nihilo .dijitTabContainerBottom-spacer {
 	margin-bottom: -1px;
 }
+
+
+/* ================================ */
+/* right tabs */
 .nihilo .dijitTabContainerRight-tabs {
 	border-color: #ccc;
 	padding-top: 3px;
@@ -284,53 +284,76 @@
 .nihilo .dijitTabContainerRight .dijitTabListWrapper {
 	padding-right: 3px;
 }
+
+/* right container */
 .nihilo .dijitTabContainerRight-container {
 	border-right: none;
 }
+
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: none;
 	border-left: 1px solid #ccc;
 	border-bottom: 1px solid #dedede !important;
 }
+
+
+/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
 	border-bottom: solid #fff 1px;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
 }
+
+/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 	border-bottom: solid #efefef 1px;
 }
+
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
 }
 .nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
 	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
 }
+
+/* strip */
 .nihilo .dijitTabContainerRightStrip {
 	padding-right: 2px;
 	border: 1px solid #ccc;
 	border-left: none;
 	background: #f2f2f2;
 }
+
+/* ================================ */
+/* left tabs */
 .nihilo .dijitTabContainerLeft-tabs {
 	border-color: #ccc;
 	padding-top: 3px;
 }
+
+/* left conatiner */
 .nihilo .dijitTabContainerLeft-container {
 	border-left: none;
 }
+
 .nihilo .dijitTabContainerLeft-tabs .dijitTab {
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #dedede;
 }
+
+/* checked tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #f8f8f8;
 }
+
 .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
 }
@@ -341,35 +364,47 @@
 .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 	background: url("../images/tabLeftChecked.gif") no-repeat right top;
 }
+
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 	border-bottom: solid #efefef 1px;
 }
+
 .dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 	border-bottom: solid #fff 1px;
 }
+
+/* strip */
 .nihilo .dijitTabContainerLeftStrip {
 	padding-left: 2px;
 	border: 1px solid #ccc;
 	border-right: none;
 }
+
 .nihilo .dijitTabContainerLeftStrip {
 	background: #f2f2f2;
 }
+
+/* ================================ */
+/* left/right tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
 	margin-right:auto;
-	margin-bottom:2px;	
+	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
 }
+
+/* left/right tabstrip */
 .nihilo .dijitTabContainerLeft-spacer,
 .nihilo .dijitTabContainerRight-spacer {
 	width: 2px;
 	border: 1px solid #ccc;
 	background: #f8f8f8;
 }
+
 .nihilo .dijitTabContainerRight-spacer {
 	border-right: none;
 }
+
 .nihilo .dijitTabContainerRight-tabs {
 	padding-top: 3px;
 	height: 100%;
@@ -377,63 +412,85 @@
 .nihilo .dijitTabContainerLeft-tabs {
 	height: 100%;
 }
+
 .nihilo .dijitTabContainerLeft-spacer {
 	border-left: none;
 }
+
+/* ================================ */
+
+/* this resets the tabcontainer stripe when within a contentpane */
 .nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
+	border-left: 0 solid #ccc;
+	border-top: 0 solid #ccc;
+	border-right: 0 solid #ccc;
+	padding-top: 0;
+	padding-left: 0;
 }
+
+/* ================================ */
+
+/* Menu and slider control styles */
 .nihilo .dijitTabContainer .tabStripButton {
-	margin-right: 0px;
+	margin-right: 0;
 }
+
 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 	padding: 5px 0 6px;
 }
+
 .dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_ie7 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_opera .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 	padding-bottom: 7px;
 }
+
 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 	padding: 3px 0 5px;
 }
+
 .dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
 	padding-top: 4px;
 }
+
 .nihilo .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
 	background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top;
 }
+
 .dj_ie6 .nihilo .dijitTabStripIcon {
 	background-image: url(../images/spriteRoundedIconsSmall.gif);
 }
+
 .nihilo .dijitTabStripSlideRightIcon {
 	background-position: -30px top;
 }
+
 .nihilo .dijitTabStripMenuIcon {
 	background-position: -15px top;
 }
+
 .nihilo .dijitTabContainerTopNone {
-	padding-top: 0px;
+	padding-top: 0;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-top {
 	margin-top: 1px;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
 	border-bottom: medium none;
 	border-top: 1px solid #CCCCCC;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 }
+
 .nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
 	background: transparent;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/layout/TabContainer_rtl.css b/lib/dijit/themes/nihilo/layout/TabContainer_rtl.css
index 8a55f5026..225fc3eba 100644
--- a/lib/dijit/themes/nihilo/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/nihilo/layout/TabContainer_rtl.css
@@ -1,10 +1,13 @@
 .dijitRtl .nihilo .dijitTab {
 	margin-right:0;
-	margin-left:2px;		
+	margin-left:2px;		/* space between one tab and the next in top/bottom mode */
 }
+
+/* tab strips */
 .dijitRtl .nihilo .dijitTabContainer .tabStripButton {
 	margin-left: 0;
 }
+
 .dijitRtl .nihilo .dijitTabContainerTopStrip,
 .dijitRtl .nihilo .dijitTabContainerBottomStrip,
 .dijitRtl .nihilo .dijitTabContainerTop-tabs,
@@ -12,23 +15,29 @@
 	padding-left: 0;
 	padding-right: 3px;
 }
+
 .dijitRtl .nihilo .dijitTabInnerDiv {
 	padding-left: 3px;
 	padding-right: 4px;
 }
+
 .dijitRtl .nihilo .dijitTabPaneWrapper {
 	#zoom: 1;
 }
+
 .dj_ie-rtl .nihilo .dijitTabContainerLeft-tabs {
-	margin-left: 0px !important;
+	margin-left: 0 !important;
 }
+
 .dj_ie-rtl .nihilo .dijitTabContainerRight-tabs {
-	margin-right: 0px !important;
+	margin-right: 0 !important;
 }
+
 .dijitRtl .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 .dijitRtl .nihilo .dijitTabContainerRight-tabs .dijitTab {
-	margin-left:0px;
+	margin-left:0;
 }
+
 .dj_ie-rtl .nihilo .dijitTab .dijitTabInnerDiv{
 	width : 1%;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/nihilo.css b/lib/dijit/themes/nihilo/nihilo.css
index 5a0bc3e3d..97ba8f6eb 100644
--- a/lib/dijit/themes/nihilo/nihilo.css
+++ b/lib/dijit/themes/nihilo/nihilo.css
@@ -1,3404 +1,42 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitReset {
-	
-	margin:0;
-	border:0;
-	padding:0;
-	line-height:normal;
-	font: inherit;
-	color: inherit;
-}
-.dijit_a11y .dijitReset {
-	-moz-appearance: none; 
-}
-.dijitInline {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-	border:0;
-	padding:0;
-	vertical-align:middle;
-	#vertical-align: auto;	
-}
-.dijitHidden {
-	
-	display: none !important;
-}
-.dijitVisible {
-	
-	display: block !important;	
-	position: relative;			
-}
-.dijitInputContainer {
-	
-	#zoom: 1;
-	overflow: hidden;
-	float: none !important; 
-	position:relative;
-}
-.dj_ie INPUT.dijitTextBox,
-.dj_ie .dijitTextBox INPUT {
-	font-size: 100%;
-}
-.dijitTextBox .dijitSpinnerButtonContainer,
-.dijitTextBox .dijitArrowButtonContainer,
-.dijitTextBox .dijitValidationContainer {
-	float: right;
-	text-align: center;
-}
-.dijitTextBox INPUT.dijitInputField {
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-}
-.dijitTextBox .dijitValidationContainer {
-	display: none;
-}
-.dijitInlineTable {
-	
-	display:inline-table;
-	display:inline-block;		
-	#zoom: 1; 
-	#display:inline; 
-	box-sizing: content-box; -moz-box-sizing: content-box;
-	border:0;
-	padding:0;
-}
-.dijitTeeny {
-	font-size:1px;
-	line-height:1px;
-}
-.dijitOffScreen {
-	position: absolute;
-	visibility: hidden;
-	left: 50%;
-	top: -10000px;
-}
-.dijitPopup {
-	position: absolute;
-	background-color: transparent;
-	margin: 0;
-	border: 0;
-	padding: 0;
-}
-.dijit_a11y .dijitPopup,
-.dijit_ally .dijitPopup DIV,
-.dijit_a11y .dijitPopup TABLE,
-.dijit_a11y .dijitTooltipContainer {
-	background-color: white !important;
-}
-.dijitPositionOnly {
-	
-	padding: 0 !important;
-	border: 0 !important;
-	background-color: transparent !important;
-	background-image: none !important;
-	height: auto !important;
-	width: auto !important;
-}
-.dijitNonPositionOnly {
-	
-	float: none !important;
-	position: static !important;
-	margin: 0 0 0 0 !important;
-	vertical-align: middle !important;
-}
-.dijitBackgroundIframe {
-	
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-.dijitDisplayNone {
-	
-	display:none !important;
-}
-.dijitContainer {
-	
-	overflow: hidden;	
-}
-.dijit_a11y * {
-	background-image:none !important;
-}
-.dijit_a11y .dijitIcon,
-.dijit_a11y DIV.dijitArrowButtonInner, 
-.dijit_a11y SPAN.dijitArrowButtonInner,
-.dijit_a11y IMG.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl {
-	
-	display: none;
-}
-.dijitSpinner DIV.dijitArrowButtonInner {
-	display: block; 
-}
-.dijit_a11y .dijitA11ySideArrow {
-	display: inline !important; 
-	cursor: pointer;
-}
-.dijit_a11y .dijitCalendarDateLabel {
-	padding: 1px;
-}
-.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
-	border-style: dotted !important;
-	border-width: 1px;
-	padding: 0px;
-}
-.dijit_a11y .dijitCalendarDateTemplate {
-	padding-bottom: 0.1em !important;	
-}
-.dijit_a11y .dijit * {
-	background:white !important;
-	color:black !important;
-}
-.dijit_a11y .dijitButtonNode {
-	border-color: black!important;
-	border-style: outset!important;
-	border-width: medium!important;
-}
-.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
-.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitButtonNode * {
-	vertical-align: middle;
-}
-.dijitButtonNode .dijitArrowButtonInner {
-	
-	background: no-repeat center;
-	width: 12px;
-	height: 12px;
-	direction: ltr; 
-}
-.dijitLeft {
-	
-	background-position:left top;
-	background-repeat:no-repeat;
-}
-.dijitStretch {
-	
-	white-space:nowrap;			
-	background-repeat:repeat-x;
-}
-.dijitRight {
-	
-	#display:inline;				
-	background-position:right top;
-	background-repeat:no-repeat;
-}
-.dijitToggleButton,
-.dijitButton,
-.dijitDropDownButton,
-.dijitComboButton {
-	
-	margin: 0.2em;
-}
-.dijitButtonContents {
-	display: block;		
-}
-td.dijitButtonContents {
-	display: table-cell;	
-}
-.dijitButtonNode IMG {
-	
-	vertical-align:middle;
-	
-}
-TABLE.dijitComboButton { 
-	
-	border-collapse: collapse;
-	border:0;
-	padding:0;
-	margin:0;
-}
-.dijitToolbar .dijitComboButton {
-	
-	border-collapse: separate;
-}
-.dijitToolbar .dijitToggleButton,
-.dijitToolbar .dijitButton,
-.dijitToolbar .dijitDropDownButton,
-.dijitToolbar .dijitComboButton {
-	margin: 0;
-}
-.dijitToolbar .dijitButtonContents {
-	
-	padding: 1px 2px;
-}
-.dj_ie .dijitComboButton {
-	
-	margin-bottom: -3px;
-}
-.dj_webkit .dijitToolbar .dijitDropDownButton {
-	padding-left: 0.3em;
-}
-.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
-	padding:0;
-}
-.dijitButtonNode {
-	
-	border:1px solid gray;
-	margin:0;
-	line-height:normal;
-	vertical-align: middle;
-	#vertical-align: auto;
-	text-align:center;
-	white-space: nowrap;
-}
-.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
-	
-	line-height:inherit;
-}
-.dijitTextBox .dijitButtonNode {
-	border-width: 0;
-}
-.dijitButtonNode,
-.dijitButtonNode * {
-	cursor: pointer;
-}
-.dj_ie .dijitButtonNode {
-	
-	zoom: 1;
-}
-.dj_ie .dijitButtonNode button {
-	
-	overflow: visible;
-}
-DIV.dijitArrowButton {
-	float: right;
-}
-.dijitTextBox {
-	border: solid black 1px;
-	#overflow: hidden; 
-	width: 15em;	
-	vertical-align: middle;
-	#vertical-align: auto;
-}
-.dijitTextBoxReadOnly,
-.dijitTextBoxDisabled {
-	color: gray;
-}
-.dj_webkit .dijitTextBoxDisabled INPUT {
-	color: #eee; 
-}
-.dj_webkit TEXTAREA.dijitTextAreaDisabled {
-	color: #333; 
-}
-.dj_gecko .dijitTextBoxReadOnly INPUT,
-.dj_gecko .dijitTextBoxDisabled INPUT {
-	-moz-user-input: none; 
-}
-.dijitPlaceHolder {
-	
-	color: #AAAAAA;
-	font-style: italic;
-	position: absolute;
-	top: 0;
-	left: 0;
-	#filter: ""; 
-}
-.dijitTimeTextBox {
-	width: 8em;
-}
-.dijitTextBox INPUT:focus {
-	outline: none;	
-}
-.dijitTextBoxFocused {
-	outline: auto 5px -webkit-focus-ring-color;
-}
-.dijitTextBox INPUT {
-	float: left; 
-}
-.dijitInputInner {
-	
-	border:0 !important;
-	vertical-align:middle !important;
-	background-color:transparent !important;
-	width:100% !important;
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-}
-.dijit_a11y .dijitTextBox INPUT {
-	margin: 0 !important;
-}
-.dijitTextBoxError INPUT.dijitValidationInner,
-.dijitTextBox INPUT.dijitArrowButtonInner {
-	
-	text-indent: -1em !important;
-	direction: ltr !important;
-	text-align: left !important;
-	height: auto !important;
-	#text-indent: 0 !important;
-	#letter-spacing: -5em !important;
-	#text-align: right !important;
-}
-.dj_ie .dijitTextBox INPUT,
-.dj_ie INPUT.dijitTextBox {
-	overflow-y: visible; 
-	line-height: normal; 
-}
-.dj_ie7 .dijitTextBox INPUT.dijitValidationInner,
-.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner {
-	line-height: 86%; 
-}
-.dj_ie6 .dijitTextBox INPUT,
-.dj_ie6 INPUT.dijitTextBox,
-.dj_iequirks .dijitTextBox INPUT.dijitValidationInner,
-.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitInputInner,
-.dj_iequirks INPUT.dijitTextBox {
-	line-height: 100%; 
-}
-.dijit_a11y INPUT.dijitValidationInner,
-.dijit_a11y INPUT.dijitArrowButtonInner {
-	
-	text-indent: 0 !important;
-	width: 1em !important;
-	#text-align: left !important;
-}
-.dijitTextBoxError .dijitValidationContainer {
-	display: inline;
-	cursor: default;
-}
-.dijitSpinner .dijitSpinnerButtonContainer,
-.dijitComboBox .dijitArrowButtonContainer {
-	
-	border-width: 0 0 0 1px !important; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	
-	border-width: 0;
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	clear: both; 
-}
-.dijit_a11y .dijitTextBox .dijitValidationContainer,
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBox .dijitArrowButtonContainer {
-	
-	border: solid black !important;
-	border-width: 0 0 0 1px !important;
-}
-.dj_ie .dijitToolbar .dijitComboBox {
-	
-	vertical-align: middle;
-}
-.dijitTextBox .dijitSpinnerButtonContainer {
-	width: 1em;
-	position: relative !important;
-	overflow: hidden;
-}
-.dijitSpinner .dijitSpinnerButtonInner {
-	width:1em;
-	visibility:hidden !important; 
-	overflow-x:hidden;
-}
-.dijitComboBox .dijitButtonNode,
-.dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 0;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border: 0 none !important;
-}
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
-.dijit_a11y .dijitSpinnerButtonContainer INPUT {
-	width: 1em !important;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
-	margin: 0 auto !important; 
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.3em !important;
-	padding-right: 0.3em !important;
-	margin-left: 0.3em !important;
-	margin-right: 0.3em !important;
-	width: 1.4em !important;
-}
-.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.0em !important; 
-	padding-right: 0.0em !important;
-	width: 1em !important;
-}
-.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0.1em !important;
-	margin-right: 0.1em !important;
-	width: 1em !important;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-	width: 2em !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	
-	padding: 0;
-	position: absolute !important;
-	right: 0;
-	float: none;
-	height: 50%;
-	width: 100%;
-	bottom: auto;
-	left: 0;
-	right: auto;
-}
-.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: auto;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
-	overflow: visible !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
-	top: 50%;
-	border-top-width: 1px !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
-	#bottom: 50%;	
-	top: 0;
-}
-.dijitSpinner .dijitArrowButtonInner {
-	margin: auto;
-	overflow-x: hidden;
-	height: 100% !important;
-}
-.dj_iequirks .dijitSpinner .dijitArrowButtonInner {
-	height: auto !important;
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	-moz-transform: scale(0.5);
-	-moz-transform-origin: center top;
-	-webkit-transform: scale(0.5);
-	-webkit-transform-origin: center top;
-	-o-transform: scale(0.5);
-	-o-transform-origin: center top;
-	transform: scale(0.5);
-	transform-origin: left top;
-	padding-top: 0;
-	padding-bottom: 0;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	width: 100%;
-}
-.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	zoom: 50%; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
-	overflow: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 100%;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; 
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	visibility: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	vertical-align:top;
-	visibility: visible;
-}
-.dijit_a11y .dijitSpinnerButtonContainer {
-	width: 1em;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0px 0px 0px;
-	border-style: solid !important;
-}
-.dijitCheckBox,
-.dijitRadio,
-.dijitCheckBoxInput {
-	padding: 0;
-	border: 0;
-	width: 16px;
-	height: 16px;
-	background-position:center center;
-	background-repeat:no-repeat;
-	overflow: hidden;
-}
-.dijitCheckBox INPUT,
-.dijitRadio INPUT {
-	margin: 0;
-	padding: 0;
-	display: block;
-}
-.dijitCheckBoxInput {
-	
-	opacity: 0.01;
-}
-.dj_ie .dijitCheckBoxInput {
-	filter: alpha(opacity=0);
-}
-.dijit_a11y .dijitCheckBox,
-.dijit_a11y .dijitRadio {
-	
-	width: auto !important;
-	height: auto !important;
-}
-.dijit_a11y .dijitCheckBoxInput {
-	opacity: 1;
-	filter: none;
-	width: auto;
-	height: auto;
-}
-.dijitProgressBarEmpty {
-	
-	position:relative;overflow:hidden;
-	border:1px solid black; 	
-	z-index:0;			
-}
-.dijitProgressBarFull {
-	
-	position:absolute;
-	overflow:hidden;
-	z-index:-1;
-	top:0;
-	width:100%;
-}
-.dj_ie6 .dijitProgressBarFull {
-	height:1.6em;
-}
-.dijitProgressBarTile {
-	
-	position:absolute;
-	overflow:hidden;
-	top:0;
-	left:0;
-	bottom:0;
-	right:0;
-	margin:0;
-	padding:0;
-	width:auto;
-	height:auto;
-	background-color:#aaa;
-	background-attachment: fixed;
-}
-.dijit_a11y .dijitProgressBarTile {
-	
-	border-width:2px;
-	border-style:solid;
-	background-color:transparent !important;
-}
-.dj_ie6 .dijitProgressBarTile {
-	
-	position:static;
-	
-	height:1.6em;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarLabel {
-	visibility:hidden;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-}
-.dijitProgressBarIndeterminateHighContrastImage {
-	display:none;
-}
-.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
-	display:block;
-	position:absolute;
-	top:0;
-	bottom:0;
-	margin:0;
-	padding:0;
-	width:100%;
-	height:auto;
-}
-.dijitProgressBarLabel {
-	display:block;
-	position:static;
-	width:100%;
-	text-align:center;
-	background-color:transparent !important;
-}
-.dijitTooltip {
-	position: absolute;
-	z-index: 2000;
-	display: block;
-	
-	left: 50%;
-	top: -10000px;
-	overflow: visible;
-}
-.dijitTooltipContainer {
-	border: solid black 2px;
-	background: #b8b5b5;
-	color: black;
-	font-size: small;
-}
-.dijitTooltipFocusNode {
-	padding: 2px 2px 2px 2px;
-}
-.dijitTooltipConnector {
-	position: absolute;
-}
-.dijit_a11y .dijitTooltipConnector {
-	display: none;	
-}
-.dijitTooltipData {
-	display:none;
-}
-.dijitLayoutContainer {
-	position: relative;
-	display: block;
-	overflow: hidden;
-}
-body .dijitAlignTop,
-body .dijitAlignBottom,
-body .dijitAlignLeft,
-body .dijitAlignRight {
-	position: absolute;
-	overflow: hidden;
-}
-body .dijitAlignClient { position: absolute; }
-.dijitBorderContainer, .dijitBorderContainerNoGutter {
-	position:relative;
-	overflow: hidden;
-}
-.dijitBorderContainerPane,
-.dijitBorderContainerNoGutterPane {
-	position: absolute !important;	
-	z-index: 2;		
-}
-.dijitBorderContainer > .dijitTextArea {
-	
-	resize: none;
-}
-.dijitGutter {
-	
-	position: absolute;
-	font-size: 1px;		
-}
-.dijitSplitter {
-	position: absolute;
-	overflow: hidden;
-	z-index: 10;		
-	background-color: #fff;
-	border-color: gray;
-	border-style: solid;
-	border-width: 0;
-}
-.dj_ie .dijitSplitter {
-	z-index: 1;	
-}
-.dijitSplitterActive {
-	z-index: 11 !important;
-}
-.dijitSplitterCover {
-	position:absolute;
-	z-index:-1;
-	top:0;
-	left:0;
-	width:100%;
-	height:100%;
-}
-.dijitSplitterCoverActive {
-	z-index:3 !important;
-}
-.dj_ie .dijitSplitterCover {
-	background: white;
-	filter: alpha(opacity=0);
-}
-.dijitSplitterH {
-	height: 7px;
-	border-top:1px;
-	border-bottom:1px;
-	cursor: ns-resize;
-}
-.dijitSplitterV {
-	width: 7px;
-	border-left:1px;
-	border-right:1px;
-	cursor: ew-resize;
-}
-.dijitSplitContainer {
-	position: relative;
-	overflow: hidden;
-	display: block;
-}
-.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
-	outline-style:dotted;
-	outline-width: 2px;
-}
-.dijitSplitPane {
-	position: absolute;
-}
-.dijitSplitContainerSizerH,
-.dijitSplitContainerSizerV {
-	position:absolute;
-	font-size: 1px;
-	cursor: move;
-	cursor: w-resize;
-	background-color: ThreeDFace;
-	border: 1px solid;
-	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
-	margin: 0;
-}
-.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
-	overflow:hidden;
-	position:absolute;
-	top:49%;
-}
-.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
-	position:absolute;
-	left:49%;
-}
-.dijitSplitterShadow,
-.dijitSplitContainerVirtualSizerH,
-.dijitSplitContainerVirtualSizerV {
-	font-size: 1px;
-	background-color: ThreeDShadow;
-	-moz-opacity: 0.5;
-	opacity: 0.5;
-	filter: Alpha(Opacity=50);
-	margin: 0;
-}
-.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH {
-	cursor: w-resize;
-}
-.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
-	cursor: n-resize;
-}
-.dijit_a11y .dijitSplitterH {
-	border-top:1px solid #d3d3d3 !important;
-	border-bottom:1px solid #d3d3d3 !important;
-}
-.dijit_a11y .dijitSplitterV {
-	border-left:1px solid #d3d3d3 !important;
-	border-right:1px solid #d3d3d3 !important;
-}
-.dijitContentPane {
-	display: block;
-	overflow: auto;	
-}
-.dijitContentPaneSingleChild {
-	
-	overflow: hidden;
-}
-.dijitTitlePane {
-	display: block;
-	overflow: hidden;
-}
-.dijitTitlePaneTitle {
-	cursor: pointer;
-}
-.dijitFixedOpen {
-	
-	cursor: default;
-}
-.dijitTitlePaneTitle * {
-	vertical-align: middle;
-}
-.dijitTitlePane .dijitArrowNodeInner {
-	
-	display: none;
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
-	
-	display:inline !important;
-	font-family: monospace;		
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNode {
-	
-	display:none;
-}
-.dj_ie6 .dijitTitlePaneContentOuter,
-.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
-	
-	zoom: 1;
-}
-.dijitColorPalette {
-	border: 1px solid #999;
-	background: #fff;
-	position: relative;
-}
-img.dijitColorPaletteUnder {
-	
-	border-style: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-.dijitColorPalette .dijitPaletteTable {
-	
-	padding: 2px 3px 3px 3px;
-	position: relative;
-	overflow: hidden;
-	outline: 0;
-	border-collapse: separate;
-}
-.dj_ie6 .dijitColorPalette .dijitPaletteTable,
-.dj_ie7 .dijitColorPalette .dijitPaletteTable,
-.dj_iequirks .dijitColorPalette .dijitPaletteTable {
-	
-	padding: 0;
-	margin: 2px 3px 3px 3px;
-}
-.dijitColorPalette .dijitPaletteCell {
-	
-	height: 20px;
-	width: 20px;
-	font-size: 1px;
-	vertical-align: middle;
-	text-align: center;
-}
-.dijitColorPalette .dijitPaletteImg {
-	
-	width: 16px;
-	height: 14px;
-	border: 1px solid #999;
-	cursor: default;
-	vertical-align: middle;
-}
-.dj_iequirks .dijitColorPalette .dijitPaletteImg {
-	margin: 1px;	
-}
-.dijitPaletteTable td {
-		padding: 0px;
-}
-.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	
-	border: 1px solid #000;
-}
-.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
-.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
-	border: 2px solid #000;
-}
-.dijit_a11y .dijitColorPalette .dijitPaletteTable,
-.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
-	
-	background-color: transparent !important;
-}
-.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg {
-	border: 3px dotted #000;	
-	margin: -1px;
-}
-.dijit_a11y  .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	border: 2px solid #000 !important;
-}
-.dijitAccordionContainer {
-	border:1px solid #b7b7b7;
-	border-top:0 !important;
-}
-.dijitAccordionTitle {
-	cursor: pointer;
-}
-.dijitAccordionTitleSelected {
-	cursor: default;
-}
-.dijitAccordionTitle .arrowTextUp,
-.dijitAccordionTitle .arrowTextDown {
-	display: none;
-	font-size: 0.65em;
-	font-weight: normal !important;
-}
-.dijit_a11y .dijitAccordionTitle .arrowTextUp,
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
-	display: inline;
-}
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
-	display: none;
-}
-.dj_ie6 .dijitAccordionTitle,
-.dj_iequirks .dijitAccordionTitle {
-	
-	zoom: 1;
-}
-.dijitCalendarContainer {
-	width: auto;	
-}
-.dijitCalendarContainer th, .dijitCalendarContainer td {
-	padding: 0;
-}
-.dijitCalendarNextYear {
-	margin:0 0 0 0.55em;
-}
-.dijitCalendarPreviousYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarIncrementControl {
-	vertical-align: middle;
-}
-.dijitCalendarIncrementControl,
-.dijitCalendarDateTemplate,
-.dijitCalendarMonthLabel,
-.dijitCalendarPreviousYear,
-.dijitCalendarNextYear {
-	cursor: pointer;
-}
-.dijitCalendarDisabledDate {
-	color: gray;
-	text-decoration: line-through;
-	cursor: default;
-}
-.dijitSpacer {
-	
-  	position: relative;
-  	height: 1px;
-  	overflow: hidden;
-  	visibility: hidden;
-}
-.dijitMenu {
-	border:1px solid black;
-	background-color:white;
-}
-.dijitMenuTable {
-	border-collapse:collapse;
-	border-width:0;
-	background-color:white;
-}
-.dj_webkit .dijitMenuTable td[colspan="2"]{
-	border-right:hidden;
-}
-.dijitMenuItem {
-	text-align: left;
-	white-space: nowrap;
-	padding:.1em .2em;
-	cursor:pointer;
-}
-.dijitMenuPassive .dijitMenuItemHover,
-.dijitMenuItemSelected {
-	
-	background-color:black;
-	color:white;
-}
-.dijitMenuItemIcon, .dijitMenuExpand {
-	background-repeat: no-repeat;
-}
-.dijitMenuItemDisabled * {
-	
-	opacity:0.5;
-	cursor:default;
-}
-.dj_ie .dijit_a11y .dijitMenuItemDisabled,
-.dj_ie .dijit_a11y .dijitMenuItemDisabled td,
-.dj_ie .dijitMenuItemDisabled *,
-.dj_ie .dijitMenuItemDisabled td {
-	color:gray !important;
-	filter: alpha(opacity=35);
-}
-.dijitMenuItemLabel {
-	position: relative;
-	vertical-align: middle;
-}
-.dijit_a11y .dijitMenuItemSelected {
-	border: 1px dotted black !important;
-}
-.dj_ff3 .dijit_a11y .dijitMenuItem td {
-	padding: none !important;
-	background:none !important;
-}
-.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
-	border-width: 1px;
-	border-style: solid;
-}
-.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
-	position:static;
-}
-.dijitMenuExpandA11y {
-	display: none;
-}
-.dijit_a11y .dijitMenuExpandA11y {
-	display: inline;
-}
-.dijitMenuSeparator td {
-	border: 0;
-	padding: 0;
-}
-.dijitMenuSeparatorTop {
-	height: 50%;
-	margin: 0;
-	margin-top:3px;
-	font-size: 1px;
-}
-.dijitMenuSeparatorBottom {
-	height: 50%;
-	margin: 0;
-	margin-bottom:3px;
-	font-size: 1px;
-}
-.dijitCheckedMenuItemIconChar {
-	vertical-align: middle;
-	visibility:hidden;
-}
-.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
-	visibility: visible;
-}
-.dijit_a11y .dijitCheckedMenuItemIconChar {
-	display:inline !important;
-}
-.dijit_a11y .dijitCheckedMenuItemIcon {
-	display: none;
-}
-.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
-	
-	margin: 0px;
-}
-.dijitStackController .dijitToggleButtonChecked * {
-	cursor: default;	
-}
-.dijitTabContainerNoLayout {
-	width: 100%;	
-}
-.dijitTabContainerBottom-tabs,
-.dijitTabContainerTop-tabs,
-.dijitTabContainerLeft-tabs,
-.dijitTabContainerRight-tabs {
-	overflow: visible !important;  
-}
-.dijitTabContainerBottom-container,
-.dijitTabContainerTop-container,
-.dijitTabContainerLeft-container,
-.dijitTabContainerRight-container {
-	z-index:0;
-	overflow: hidden;
-	border: 1px solid black;
-}
-.nowrapTabStrip {
-	width: 50000px;
-	display: block;
-	position: relative;
-}
-.dijitTabListWrapper {
-	overflow: hidden;
-}
-.dijit_a11y .tabStripButton img {
-	
-	display: none;
-}
-.dijitTabContainerTop-tabs {
-	border-bottom: 1px solid black;
-}
-.dijitTabContainerTop-container {
-	border-top: 0px;
-}
-.dijitTabContainerLeft-tabs {
-	border-right: 1px solid black;
-	float: left;
-}
-.dijitTabContainerLeft-container {
-	border-left: 0px;
-}
-.dijitTabContainerBottom-tabs {
-	border-top: 1px solid black;
-}
-.dijitTabContainerBottom-container {
-	border-bottom: 0px;
-}
-.dijitTabContainerRight-tabs {
-	border-left: 1px solid black;
-	float: left;
-}
-.dijitTabContainerRight-container {
-	border-right: 0px;
-}
-DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
-	cursor: auto;
-}
-.dijitTab {
-	position:relative;
-	cursor:pointer;
-	white-space:nowrap;
-	z-index:3;
-}
-.dijitTab * {
-	
-	vertical-align: middle;
-}
-.dijitTabChecked {
-	cursor: default;	
-}
-.dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;	
-}
-.dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;	
-}
-.dijitTabContainerLeft-tabs .dijitTab {
-	left: 1px;	
-}
-.dijitTabContainerRight-tabs .dijitTab {
-	left: -1px;	
-}
-.dijitTabContainerTop-tabs .dijitTab,
-.dijitTabContainerBottom-tabs .dijitTab {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-}
-.dijitTabInnerDiv {
-	position:relative;
-}
-.tabStripButton {
-	z-index: 12;
-}
-.dijitTabButtonDisabled .tabStripButton {
-	display: none;
-}
-.dijitTabCloseButton {
-	margin-left: 1em;
-}
-.dijitTabCloseText {
-	display:none;
-}
-.dijit_a11y .dijitTabCloseButton {
-	background-image: none !important;
-	width: auto !important;
-	height: auto !important;
-	border: thin dotted;	
-}
-.dijit_a11y .dijitTabCloseButtonHover {
-	border:thin solid;	
-}
-.dijit_a11y .dijitTabCloseText {
-	display: inline;
-}
-.dijit_a11y .dijitTabChecked {
-	
-	border-style:dashed !important;
-}
-.dijit_a11y .dijitTabInnerDiv {
-	border-left:none !important;
- }
-.dijitTabPane,
-.dijitStackContainer-child,
-.dijitAccordionContainer-child {
-	
-    border: none !important;
-}
-.dijitInlineEditBoxDisplayMode {
-	border: 1px solid transparent;	
-	cursor: text;
-}
-.dijit_a11y .dijitInlineEditBoxDisplayMode,
-.dj_ie6 .dijitInlineEditBoxDisplayMode {
-	
-	border: none;
-}
-.dijitInlineEditBoxDisplayModeHover,
-.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
-.dj_ie6 .dijitInlineEditBoxDisplayModeHover {
-	
-	background-color: #e2ebf2;
-	border: solid 1px black;
-}
-.dijitInlineEditBoxDisplayModeDisabled {
-	cursor: default;
-}
-.dijitTreeIndent {
-	
-	width: 19px;
-}
-.dijitTreeRow, .dijitTreeContent {
-	white-space: nowrap;
-}
-.dijitTreeRow img {
-	
-	vertical-align: middle;
-}
-.dijitTreeContent {
-    cursor: default;
-}
-.dijitExpandoText {
-	display: none;
-}
-.dijit_a11y .dijitExpandoText {
-	display: inline;
-	padding-left: 10px;
-	padding-right: 10px;
-	font-family: monospace;
-	border-style: solid;
-	border-width: thin;
-	cursor: pointer;
-}
-.dijitTreeLabel {
-	margin: 0px 4px;
-}
-.dijitDialog {
-	position: absolute;
-	z-index: 999;
-	overflow: hidden;       
-}
-.dijitDialogTitleBar {
-	cursor: move;
-}
-.dijitDialogFixed .dijitDialogTitleBar {
-	cursor:default;
-}
-.dijitDialogCloseIcon {
-	cursor: pointer;
-}
-.dijitDialogUnderlayWrapper {
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 998;
-	display: none;
-	background: transparent !important;
-}
-.dijitDialogUnderlay {
-	background: #eee;
-	opacity: 0.5;
-}
-.dj_ie .dijitDialogUnderlay {
-	filter: alpha(opacity=50);
-}
-.dijit_a11y .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitDialog {
-	opacity: 1 !important;
-	background-color: white !important;
-}
-.dijitDialog .closeText {
-	display:none;
-	
-	position:absolute;
-}
-.dijit_a11y .dijitDialog .closeText {
-	display:inline;
-}
-.dijitSliderMoveable {
-	z-index:99;
-	position:absolute !important;
-	display:block;
-	vertical-align:middle;
-}
-.dijitSliderMoveableH {
-	right:0;
-}
-.dijitSliderMoveableV {
-	right:50%;
-}
-.dijit_a11y DIV.dijitSliderImageHandle,
-.dijitSliderImageHandle {
-	margin:0;
-	padding:0;
-	position:relative !important;
-	border:8px solid gray;
-	width:0;
-	height:0;
-	cursor: pointer;
-}
-.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
-	font-size: 0;
-}
-.dj_ie7 .dijitSliderImageHandle {
-	overflow: hidden; 
-}
-.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
-	overflow: visible; 
-}
-.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
-	border:4px solid #000;
-	height:8px;
-	width:8px;
-}
-.dijitSliderImageHandleV {
-	top:-8px;
-	right: -50%;
-}
-.dijitSliderImageHandleH {
-	left:50%;
-	top:-5px;
-	vertical-align:top;
-}
-.dijitSliderBar {
-	border-style:solid;
-	border-color:black;
-	cursor: pointer;
-}
-.dijitSliderBarContainerV {
-	position:relative;
-	height:100%;
-	z-index:1;
-}
-.dijitSliderBarContainerH {
-	position:relative;
-	z-index:1;
-}
-.dijitSliderBarH {
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBarV {
-	width:4px;
-	border-width:0 1px;
-}
-.dijitSliderProgressBar {
-	background-color:red;
-	z-index:1;
-}
-.dijitSliderProgressBarV {
-	position:static !important;
-	height:0%;
-	vertical-align:top;
-	text-align:left;
-}
-.dijitSliderProgressBarH {
-	position:absolute !important;
-	width:0%;
-	vertical-align:middle;
-	overflow:visible;
-}
-.dijitSliderRemainingBar {
-	overflow:hidden;
-	background-color:transparent;
-	z-index:1;
-}
-.dijitSliderRemainingBarV {
-	height:100%;
-	text-align:left;
-}
-.dijitSliderRemainingBarH {
-	width:100% !important;
-}
-.dijitSliderBumper {
-	overflow:hidden;
-	z-index:1;
-}
-.dijitSliderBumperV {
-	width:4px;
-	height:8px;
-	border-width:0 1px;
-}
-.dijitSliderBumperH {
-	width:8px;
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBottomBumper,
-.dijitSliderLeftBumper {
-	background-color:red;
-}
-.dijitSliderTopBumper,
-.dijitSliderRightBumper {
-	background-color:transparent;
-}
-.dijitSliderDecoration {
-	text-align:center;
-}
-.dijitSliderV TD {
-	position: relative; 
-}
-.dijitSliderDecorationH {
-	width: 100%;
-}
-.dijitSliderDecorationV {
-	height: 100%;
-}
-.dijitSliderButton {
-	font-family:monospace;
-	margin:0;
-	padding:0;
-	display:block;
-}
-.dijit_a11y .dijitSliderButtonInner {
-	visibility:visible !important;
-}
-.dijitSliderButtonContainer {
-	text-align:center;
-	height:0;	
-}
-.dijitSliderButtonContainer * {
-	cursor: pointer;
-}
-.dijitSlider .dijitButtonNode {
-	padding:0;
-	display:block;
-}
-.dijitRuleContainer {
-	position:relative;
-	overflow:visible;
-}
-.dijitRuleContainerV {
-	height:100%;
-	line-height:0;
-	float:left;
-	text-align:left;
-}
-.dj_opera .dijitRuleContainerV {
-	line-height:2%;
-}
-.dj_ie .dijitRuleContainerV {
-	line-height:normal;
-}
-.dj_gecko .dijitRuleContainerV {
-	margin:0 0 1px 0; 
-}
-.dijitRuleMark {
-	position:absolute;
-	border:1px solid black;
-	line-height:0;
-	height:100%;
-}
-.dijitRuleMarkH {
-	width:0;
-	border-top-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-}
-.dijitRuleLabelContainer {
-	position:absolute;
-}
-.dijitRuleLabelContainerH {
-	text-align:center;
-	display:inline-block;
-}
-.dijitRuleLabelH {
-	position:relative;
-	left:-50%;
-}
-.dijitRuleLabelV {
-	
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.dijitRuleMarkV {
-	height:0;
-	border-right-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-	width:100%;
-	left:0;
-}
-.dj_ie .dijitRuleLabelContainerV {
-	margin-top:-.55em;
-}
-.dijit_a11y .dijitSliderReadOnly,
-.dijit_a11y .dijitSliderDisabled {
-	opacity:0.6;
-}
-.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
-.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
-	filter: alpha(opacity=40);
-}
-.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV {
-	font-family: monospace; 
-	font-size: 1em;
-	line-height: 1em;
-	height: auto;
-	width: auto;
-	margin: 0px 4px;
-}
-.dijit_a11y .dijitButtonContents .dijitButtonText,
-.dijit_a11y .dijitTab .tabLabel {
-	display: inline !important;
-}
-.dijitTextArea {
-	width:100%;
-	overflow-y: auto;	
-}
-.dijitTextArea[cols] {
-	width:auto; 
-}
-.dj_ie .dijitTextAreaCols {
-	width:auto;
-}
-.dijitToolbarSeparator {
-	height: 18px;
-	width: 5px;
-	padding: 0 1px;
-	margin: 0;
-}
-.dijitIEFixedToolbar {
-	position:absolute;
-	
-	top: expression(eval((document.documentElement||document.body).scrollTop));
-}
-.dijitEditor {
-	display: block;	
-}
-.dijitEditorDisabled,
-.dijitEditorReadOnly {
-	color: gray;
-}
-.dijitTimePickerItemInner {
-	text-align:center;
-	border:0;
-	padding:2px 8px 2px 8px;
-}
-.dijitTimePickerTick,
-.dijitTimePickerMarker {
-	border-bottom:1px solid gray;
-}
-.dijitTimePicker .dijitDownArrowButton {
-	border-top: none !important;
-}
-.dijitTimePickerTick {
-	color:#CCC;
-}
-.dijitTimePickerMarker {
-	color:black;
-	background-color:#CCC;
-}
-.dijitTimePickerItemSelected {
-	font-weight:bold;
-	color:#333;
-	background-color:#b7cdee;
-}
-.dijitTimePickerItemHover {
-	background-color:gray;
-	color:white;
-	cursor:pointer;
-}
-.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	border: solid 4px black;
-}
-.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
-	border: dashed 4px black;
-}
-.dijitToggleButtonIconChar {
-	
-	display:none !important;
-}
-.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
-	display:inline !important;
-	visibility:hidden;
-}
-.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
-	font-family: "Arial Unicode MS";	
-}
-.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
-	display: inline !important; 
-	visibility:visible !important;
-}
-.dijitArrowButtonChar {
-        display:none !important;
-}
-.dijit_a11y .dijitArrowButtonChar {
-        display:inline !important;
-}
-.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
-.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
-	display:none !important;
-}
-.dijitSelect {
-	margin: 0.2em;
-	border-collapse: collapse;
-}
-.dj_ie .dijitSelect,
-.dj_ie7 .dijitSelect,
-.dj_iequirks .dijitSelect {
-	vertical-align: middle; 
-}
-.dj_ie8 .dijitSelect .dijitButtonText {
-	vertical-align: top;
-}
-.dijitToolbar .dijitSelect {
-	margin: 0;
-}
-.dj_webkit .dijitToolbar .dijitSelect {
-	padding-left: 0.3em;
-}
-.dijit_a11y .dijitSelectDisabled .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitSelect .dijitButtonContents {
-	padding: 0px;
-	background: transparent none;
-	white-space: nowrap;
-	text-align: left;
-}
-.dijitSelectFixedWidth .dijitButtonContents {
-	width: 100%;
-}
-.dijitSelectMenu .dijitMenuItemIcon {
-	
-	display:none;
-}
-.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
-.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
-	
-	position: static;
-}
-.dijitSelectLabel *
-{
-	vertical-align: baseline;
-}
-.dijitSelectSelectedOption * {
-	font-weight: bold;
-}
-.dijitSelectMenu {
-	border-width: 1px;
-}
-.dijitSelectMenu .dijitMenuTable {
-	margin: 0px;
-	background-color: transparent;
-}
-.dijitForceStatic {
-	position: static !important;
-}
-.dijitReadOnly *,
-.dijitDisabled *,
-.dijitReadOnly,
-.dijitDisabled {
-	
-	cursor: default;
-}
-.dijitIconSave,
-.dijitIconPrint,
-.dijitIconCut,
-.dijitIconCopy,
-.dijitIconClear,
-.dijitIconDelete,
-.dijitIconUndo,
-.dijitIconEdit,
-.dijitIconNewTask,
-.dijitIconEditTask,
-.dijitIconEditProperty,
-.dijitIconTask,
-.dijitIconFilter,
-.dijitIconConfigure,
-.dijitIconSearch,
-.dijitIconApplication,
-.dijitIconBookmark,
-.dijitIconChart,
-.dijitIconConnector,
-.dijitIconDatabase,
-.dijitIconDocuments,
-.dijitIconMail,
-.dijitLeaf,
-.dijitIconFile,
-.dijitIconFunction,
-.dijitIconKey,
-.dijitIconPackage,
-.dijitIconSample,
-.dijitIconTable,
-.dijitIconUsers,
-.dijitFolderClosed,
-.dijitIconFolderClosed,
-.dijitFolderOpened,
-.dijitIconFolderOpen,
-.dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled.png); 
-	width: 16px;
-	height: 16px;
-}
-.dj_ie6 .dijitIconSave,
-.dj_ie6 .dijitIconPrint,
-.dj_ie6 .dijitIconCut,
-.dj_ie6 .dijitIconCopy,
-.dj_ie6 .dijitIconClear,
-.dj_ie6 .dijitIconDelete,
-.dj_ie6 .dijitIconUndo,
-.dj_ie6 .dijitIconEdit,
-.dj_ie6 .dijitIconNewTask,
-.dj_ie6 .dijitIconEditTask,
-.dj_ie6 .dijitIconEditProperty,
-.dj_ie6 .dijitIconTask,
-.dj_ie6 .dijitIconFilter,
-.dj_ie6 .dijitIconConfigure,
-.dj_ie6 .dijitIconSearch,
-.dj_ie6 .dijitIconApplication,
-.dj_ie6 .dijitIconBookmark,
-.dj_ie6 .dijitIconChart,
-.dj_ie6 .dijitIconConnector,
-.dj_ie6 .dijitIconDatabase,
-.dj_ie6 .dijitIconDocuments,
-.dj_ie6 .dijitIconMail,
-.dj_ie6 .dijitLeaf,
-.dj_ie6 .dijitIconFile,
-.dj_ie6 .dijitIconFunction,
-.dj_ie6 .dijitIconKey,
-.dj_ie6 .dijitIconPackage,
-.dj_ie6 .dijitIconSample,
-.dj_ie6 .dijitIconTable,
-.dj_ie6 .dijitIconUsers,
-.dj_ie6 .dijitFolderClosed,
-.dj_ie6 .dijitIconFolderClosed,
-.dj_ie6 .dijitFolderOpened,
-.dj_ie6 .dijitIconFolderOpen,
-.dj_ie6 .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled8bit.png);
-}
-.dijitDisabled .dijitIconSave,
-.dijitDisabled .dijitIconPrint,
-.dijitDisabled .dijitIconCut,
-.dijitDisabled .dijitIconCopy,
-.dijitDisabled .dijitIconClear,
-.dijitDisabled .dijitIconDelete,
-.dijitDisabled .dijitIconUndo,
-.dijitDisabled .dijitIconEdit,
-.dijitDisabled .dijitIconNewTask,
-.dijitDisabled .dijitIconEditTask,
-.dijitDisabled .dijitIconEditProperty,
-.dijitDisabled .dijitIconTask,
-.dijitDisabled .dijitIconFilter,
-.dijitDisabled .dijitIconConfigure,
-.dijitDisabled .dijitIconSearch,
-.dijitDisabled .dijitIconApplication,
-.dijitDisabled .dijitIconBookmark,
-.dijitDisabled .dijitIconChart,
-.dijitDisabled .dijitIconConnector,
-.dijitDisabled .dijitIconDatabase,
-.dijitDisabled .dijitIconDocuments,
-.dijitDisabled .dijitIconMail,
-.dijitDisabled .dijitLeaf,
-.dijitDisabled .dijitIconFile,
-.dijitDisabled .dijitIconFunction,
-.dijitDisabled .dijitIconKey,
-.dijitDisabled .dijitIconPackage,
-.dijitDisabled .dijitIconSample,
-.dijitDisabled .dijitIconTable,
-.dijitDisabled .dijitIconUsers,
-.dijitDisabled .dijitFolderClosed,
-.dijitDisabled .dijitIconFolderClosed,
-.dijitDisabled .dijitFolderOpened,
-.dijitDisabled .dijitIconFolderOpen,
-.dijitDisabled .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActDisabled.png); 
-}
-.dijitIconSave { background-position: 0px; }
-.dijitIconPrint { background-position: -16px; }
-.dijitIconCut { background-position: -32px; }
-.dijitIconCopy { background-position: -48px; }
-.dijitIconClear { background-position: -64px; }
-.dijitIconDelete { background-position: -80px; }
-.dijitIconUndo { background-position: -96px; }
-.dijitIconEdit { background-position: -112px; }
-.dijitIconNewTask { background-position: -128px; }
-.dijitIconEditTask { background-position: -144px; }
-.dijitIconEditProperty { background-position: -166px; }
-.dijitIconTask { background-position: -176px; }
-.dijitIconFilter { background-position: -192px; }
-.dijitIconConfigure { background-position: -208px; }
-.dijitIconSearch { background-position: -224px; }
-.dijitIconError { background-position: -496px; } 
-.dijitIconApplication { background-position: -240px; }
-.dijitIconBookmark { background-position: -256px; }
-.dijitIconChart { background-position: -272px; }
-.dijitIconConnector { background-position: -288px; }
-.dijitIconDatabase { background-position: -304px; }
-.dijitIconDocuments { background-position: -320px; }
-.dijitIconMail { background-position: -336px; }
-.dijitIconFile, .dijitLeaf { background-position: -352px; }
-.dijitIconFunction { background-position: -368px; }
-.dijitIconKey { background-position: -384px; }
-.dijitIconPackage{ background-position: -400px; }
-.dijitIconSample { background-position: -416px; }
-.dijitIconTable { background-position: -432px; }
-.dijitIconUsers { background-position: -448px; }
-.dijitIconFolderClosed, .dijitFolderClosed { background-position: -464px; }
-.dijitIconFolderOpen, .dijitFolderOpened { background-position: -480px; }
-.nihilo .dojoDndItemBefore {
-	border-top: 2px solid #369;
-}
-.nihilo .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
-}
-.nihilo .dojoDndItemOver {
-	cursor:pointer;
-}
-.nihilo table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
-.nihilo .dojoDndAvatar td	{ border: none; }
-.nihilo .dojoDndAvatar tr	{ border: none; }
-.nihilo .dojoDndAvatarHeader td	{ height: 20px; padding: 0 0 0 21px; }
-.nihilo .dojoDndAvatarItem td { padding: 2px;}
-.nihilo.dojoDndMove .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.nihilo.dojoDndCopy .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.nihilo.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.nihilo.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.nihilo .dijitContentPane {
-    padding: 0px;
-}
-.nihilo .dijitTabContainerTop-dijitContentPane,
-.nihilo .dijitTabContainerLeft-dijitContentPane,
-.nihilo .dijitTabContainerRight-dijitContentPane,
-.nihilo .dijitTabContainerBottom-dijitContentPane,
-.nihilo .dijitAccordionContainer-dijitContentPane {
-    background-color: #fff;
-    padding: 5px;
-}
-.nihilo .dijitSplitContainer-dijitContentPane,
-.nihilo .dijitBorderContainer-dijitContentPane {
-    background-color: #fff;		
-    padding: 5px;
-}
-.nihilo .dijitMenu,
-.nihilo .dijitMenuBar {
-	border: 1px solid #d3d3d3;
-	margin: 0px;
-	padding: 0px;
-	background-color: #fff;
-}
-.nihilo .dijitBorderContainer .dijitMenuBar {
-	border: 1px #ccc solid;
-}
-.nihilo .dijitMenuItem {
-	font-family: sans-serif;
-	margin: 0px;
-	color: #243C5F;
-}
-.nihilo .dijitMenuBar .dijitMenuItem {
-	padding: 4px 5px;
-}
-.nihilo .dijitMenuPreviousButton, .nihilo .dijitMenuNextButton {
-	font-style: italic;
-}
-.nihilo .dijitMenuItem TD {
-	padding:1px;
-}
-.nihilo .dijitMenuPassive .dijitMenuItemHover,
-.nihilo .dijitMenuItemSelected {
-	background-color: #ffe284; 
-	color: #243C5F;
-}
-.nihilo .dijitMenuItemIcon {
-	width: 15px;
-	height: 15px;
-}
-.nihilo .dijitMenuExpand {
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-position: -30px top;
-}
-.dj_ie6 .nihilo .dijitMenuExpand {
-	background-image:url(images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitMenuSeparator {
-	height: 1px;
-}
-.nihilo .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
-}
-.nihilo .dijitMenuSeparatorBottom {
-	border-top: 1px solid #d3d3d3;
-}
-.nihilo .dijitCheckedMenuItemIconChar {
-	display: none;
-}
-.nihilo .dijitCheckedMenuItemIcon {
-	background-image: url(images/spriteCheckbox.gif);
-	background-position: -80px;
-}
-.nihilo .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-	background-position: -64px;
-}
-.nihilo .dijitTabContainer .tabStripRBtn {
-	margin-right: 21px;
-}
-.nihilo .dijitTabContainer .tabStripLBtn {
-	margin-left: 21px;
-}
-.nihilo .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
-	top: 0px;
-}
-.nihilo .dijitTabPaneWrapper {
-	background:#fff;
-	border:1px solid #ccc;
-	margin: 0;
-	padding: 0;
-}
-.nihilo .dijitTabInnerDiv {
-	padding:0px 3px 0px 0px;
-	margin: 0 0 0 4px;
-	background: url(images/tabContainerSprite.gif) no-repeat;
-	background-position: right -400px;
-}
-.nihilo .dijitTab {
-	line-height:normal;
-	margin:0 2px 0 0;	
-	padding:0px;
-	background: url(images/tabContainerSprite.gif) no-repeat 0 -300px;
-	color: #6d6d6d;
-	border-bottom: 1px #ccc solid;
-}
-.nihilo .dijitTabInnerDiv .dijitTabContent {
-	padding:3px 3px 3px 4px;
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -350px;
-	position: relative;
-}
-.nihilo .dijitTabHover {
-	color: #243C5F;
-	background: url(images/tabContainerSprite.gif) no-repeat 0px -150px;
-}
-.nihilo .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -250px;
-}
-.nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -200px;
-}
-.nihilo .dijitTabChecked
-{
-	
-	background: url(images/tabContainerSprite.gif) no-repeat 0px -0px;
-}
-.nihilo .dijitTabChecked .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -100px;
-}
-.nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -50px;
-	color: #243C5F !important;
-}
-.nihilo .dijitTabContainerNested .dijitTabListWrapper {
-	height: auto;
-}
-.nihilo .dijitTabContainerTabListNested {
-	background: #FDFDFD;
-	border: none;
-	margin-bottom: 0px;		
-}
-.nihilo .dijitTabContainerTabListNested .dijitTab {
-	background: none;
-	border: none;
-	top: 0px;	
-}
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.nihilo .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
-	text-decoration: underline;
-}
-.nihilo .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
-	text-decoration: underline;
-	font-weight: bold;
-}
-.nihilo .dijitTabContainerSpacerNested {
-	
-	height: 0px;
-	border-bottom: 0px;
-}
-.nihilo .dijitTabPaneWrapperNested {
-	border: none;	
-}
-.nihilo .dijitTabCloseButton {
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -60px top;
-	width: 15px;
-	height: 15px;
-	margin-top: -1px;
-}
-.dj_ie6 .nihilo .dijitTabCloseButton {
-	background: url(images/spriteRoundedIconsSmall.gif) no-repeat -60px top;
-}
-.nihilo .dijitTabCloseButtonHover {
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -60px -15px;
-}
-.dj_ie6 .nihilo .dijitTabCloseButtonHover {
-	background: url(images/spriteRoundedIconsSmall.gif) no-repeat -60px -15px;
-}
-.nihilo .dijitTab .tabLabel {
-	
-	min-height: 15px;
-	display: inline-block;
-}
-.dj_ie6 .nihilo .dijitTabButtonIcon {
-	
-	height: 18px;
-	width: 1px;
-}
-.nihilo .dijitTabContainerTop-tabs {
-	border-bottom: none;
-	padding-bottom: 1px;
-	background-position: bottom;
-	padding-left: 3px;
-}
-.dj_ie6 .nihilo .dijitTabListContainer-top,
-.dj_ie7 .nihilo .dijitTabListContainer-top {
-	z-index: 3;
-}
-.dj_ie6 .nihilo .dijitTabContainerTop-tabs,
-.dj_ie7 .nihilo .dijitTabContainerTop-tabs {
-	border-bottom: 1px solid #ccc;
-	padding-bottom: 0px;
-}
-.nihilo .dijitTabContainerTopNoStrip {
-	padding-top: 3px;
-}
-.nihilo .dijitTabContainerTop-container {
-	border-top: none;
-}
-.nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
-	border-bottom-color: #f8f8f8;
-}
-.nihilo .dijitTabContainer .dijitTabContainerTopStrip {
-	border-bottom: none;
-	padding-top: 1px;
-	margin-top: 1px;
-	background: #f2f2f2;
-	border-top: 1px solid #CCC;
-	border-right: 1px solid #CCC;
-	border-left: 1px solid #CCC;
-}
-.nihilo .dijitTabContainerBottom-tabs {
-	border-top: none;
-	background-position: top;
-	padding-left: 3px;
-}
-.dj_ie6 .nihilo .dijitTabListContainer-bottom,
-.dj_ie7 .nihilo .dijitTabListContainer-bottom {
-	z-index: 3;
-}
-.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
-.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
-	border-top: 1px solid #ccc;
-	margin-top: -1px;
-}
-.nihilo .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #ccc;
-	background: url(images/tabBottomEnabledSpriteLR.gif) no-repeat bottom left;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color: #f8f8f8;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url(images/tabBottomEnabledC.gif) repeat-x bottom left;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url(images/tabBottomEnabledSpriteLR.gif) no-repeat bottom right;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
-	color: #243C5F;
-	background: url(images/tabBottomHoverSpriteLR.gif) no-repeat bottom left;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabBottomHoverSpriteLR.gif) no-repeat bottom right;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabBottomHoverC.gif) repeat-x bottom left;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-	
-	background: url(images/tabBottomActiveSpriteLR.gif) no-repeat bottom left;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url(images/tabBottomActiveSpriteLR.gif) no-repeat bottom right;
-}
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabBottomActiveC.gif) repeat-x bottom left;
-}
-.nihilo .dijitTabContainer .dijitTabContainerBottomStrip {
-	border: 1px solid #ccc;
-	background: #f2f2f2;
-	border-top: none;
-	padding-bottom: 2px;
-}
-.nihilo .dijitTabContainerBottom-spacer,
-.nihilo .dijitTabContainerTop-spacer {
-	height: 2px;
-	border: 1px solid #ccc;
-	background: #f8f8f8;
-}
-.nihilo  .dijitTabContainerTop-spacer {
-	margin-top: -1px;
-}
-.nihilo .dijitTabContainerBottom-spacer {
-	margin-bottom: -1px;
-}
-.nihilo .dijitTabContainerRight-tabs {
-	border-color: #ccc;
-	padding-top: 3px;
-}
-.nihilo .dijitTabContainerRight .dijitTabListWrapper {
-	padding-right: 3px;
-}
-.nihilo .dijitTabContainerRight-container {
-	border-right: none;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #ccc;
-	border-bottom: 1px solid #dedede !important;
-}
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
-	border-bottom: solid #fff 1px;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
-	border-left-color: #f8f8f8;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url(images/tabRightChecked.gif) no-repeat left top !important;
-}
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	border-bottom: solid #efefef 1px;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	background: url(images/tabContainerSprite.gif) no-repeat left -350px;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url(images/tabContainerSprite.gif) no-repeat left -200px;
-}
-.nihilo .dijitTabContainerRightStrip {
-	padding-right: 2px;
-	border: 1px solid #ccc;
-	border-left: none;
-	background: #f2f2f2;
-}
-.nihilo .dijitTabContainerLeft-tabs {
-	border-color: #ccc;
-	padding-top: 3px;
-}
-.nihilo .dijitTabContainerLeft-container {
-	border-left: none;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #ccc;
-	border-bottom: 1px solid #dedede;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
-	border-right: 1px solid #f8f8f8;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -350px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -200px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url(images/tabLeftChecked.gif) no-repeat right top;
-}
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	border-bottom: solid #efefef 1px;
-}
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	border-bottom: solid #fff 1px;
-}
-.nihilo .dijitTabContainerLeftStrip {
-	padding-left: 2px;
-	border: 1px solid #ccc;
-	border-right: none;
-}
-.nihilo .dijitTabContainerLeftStrip {
-	background: #f2f2f2;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTab,
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	
-}
-.nihilo .dijitTabContainerLeft-spacer,
-.nihilo .dijitTabContainerRight-spacer {
-	width: 2px;
-	border: 1px solid #ccc;
-	background: #f8f8f8;
-}
-.nihilo .dijitTabContainerRight-spacer {
-	border-right: none;
-}
-.nihilo .dijitTabContainerRight-tabs {
-	padding-top: 3px;
-	height: 100%;
-}
-.nihilo .dijitTabContainerLeft-tabs {
-	height: 100%;
-}
-.nihilo .dijitTabContainerLeft-spacer {
-	border-left: none;
-}
-.nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
-}
-.nihilo .dijitTabContainer .tabStripButton {
-	margin-right: 0px;
-}
-.nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 5px 0 6px;
-}
-.dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
-.dj_ie7 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
-.dj_opera .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding-bottom: 7px;
-}
-.nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 3px 0 5px;
-}
-.dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
-.dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
-.dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 4px;
-}
-.nihilo .dijitTabStripIcon {
-	height: 14px;
-	width: 14px;
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat left top;
-}
-.dj_ie6 .nihilo .dijitTabStripIcon {
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitTabStripSlideRightIcon {
-	background-position: -30px top;
-}
-.nihilo .dijitTabStripMenuIcon {
-	background-position: -15px top;
-}
-.nihilo .dijitTabContainerTopNone {
-	padding-top: 0px;
-}
-.nihilo .dijitTabContainer .tabStripButton-top {
-	margin-top: 1px;
-}
-.nihilo .dijitTabContainer .tabStripButton-bottom {
-	background: transparent url(images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
-	border-bottom: medium none;
-	border-top: 1px solid #CCCCCC;
-}
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
-	background: transparent url(images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
-}
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
-.nihilo .dijitAccordionContainer {
-	border-color: #ccc;
-	background-color: #fff;
-}
-.nihilo .dijitAccordionTitle {
-	background:#fafafa url(images/titleBar.png) repeat-x top left;
-	border-top: 1px solid #dedede;
-	padding: 5px 4px 6px 8px;
-	font-size: 0.9em;
-	font-weight: bold;
-	color: #6d6d6d;
-}
-.nihilo .dijitAccordionTitleSelected  {
-	background: #f9f9f9 url(images/accordionItemActive.png) top repeat-x;
-	font-weight: bold;
-	border-top: 1px solid #dedede;
-	border-bottom: 1px solid #dedede;
-	padding: 5px 4px 5px 8px;
-	color: #243C5F;
-}
-.nihilo .dijitAccordionArrow {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-	width:15px;
-	height:15px;
-	margin-top:-1px;
-}
-.nihilo .dijitAccordionTitleSelected .dijitAccordionArrow {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -15px top;
-	margin-top:-1px;
-}
-.nihilo .dijitAccordionText {
-	margin-left: 4px;
-	margin-right: 4px;
-}
-.nihilo .dijitSplitContainerSizerH {
-	background:url(images/splitContainerSizerV.png) repeat-y #fff;
-	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
-	width:5px;
-}
-.nihilo .dijitSplitContainerSizerH .thumb {
-	background:url(images/splitContainerSizerV-thumb.png) no-repeat;
-	left:1px;
-	width:2px;
-	height:19px;
-}
-.nihilo .dijitSplitContainerSizerV {
-	background:url(images/splitContainerSizerH.png) repeat-x #fff;
-	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
-	height:2px;
-}
-.nihilo .dijitSplitContainerSizerV .thumb {
-	background:url(images/splitContainerSizerH-thumb.png) no-repeat;
-	top:1px;
-	width:19px;
-	height:5px;
-}
-.nihilo .dijitBorderContainer {
-	background-color: #fcfcfc;
-	padding: 5px;
-}
-.nihilo .dijitSplitContainer-child,
-.nihilo .dijitBorderContainer-child {
-	
-    border: 1px #ccc solid;
-}
-.nihilo .dijitBorderContainer-dijitTabContainerTop,
-.nihilo .dijitBorderContainer-dijitTabContainerBottom,
-.nihilo .dijitBorderContainer-dijitTabContainerLeft,
-.nihilo .dijitBorderContainer-dijitTabContainerRight {
-	
-	 border: none;
-}
-.nihilo .dijitBorderContainer-dijitBorderContainer {
-	
-	border: none;
-	padding: 0px;
-}
-.nihilo .dijitSplitterH,
-.nihilo .dijitGutterH {
-	background:#FCFCFC;
-	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
-	height:5px;
-}
-.nihilo .dijitSplitterH .dijitSplitterThumb {
-	background:#8BA0BD none;
-	height:1px;
-	top:2px;
-	width:19px;
-}
-.nihilo .dijitSplitterV,
-.nihilo .dijitGutterV {
-	background:#FCFCFC;
-	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
-	width:5px;
-}
-.nihilo .dijitSplitterV .dijitSplitterThumb {
-	background:#8BA0BD none;
-	height:19px;
-	left:2px;
-	width:1px;
-}
-.nihilo .dijitSplitterActive {
-	font-size: 1px;
-	background-image: none;
-	background-color: #aaa;
-	-moz-opacity: 0.6;
-	opacity: 0.6;
-	filter: Alpha(Opacity=60);
-	margin: 0;
-}
-.nihilo .dijitInputContainer INPUT,
-.nihilo .dijitTextBox {
-	margin: 0em 0.1em;
-}
-.nihilo .dijitTextBox,
-.nihilo .dijitTextArea {
-	
-	background:#fff url(images/validationInputBg.png) repeat-x top left;
-	#background:#fff url(images/validationInputBg.gif) repeat-x top left;
-	border:1px solid #d3d3d3;
-}
-.nihilo .dijitComboBox .dijitButtonNode {
-	padding: 0 0.2em !important;
-}
-.nihilo .dijitTextBox .dijitButtonNode {
-	
-	border-color: #d3d3d3;
-}
-.nihilo .dijitTextBoxFocused,
-.nihilo .dijitTextAreaFocused {
-	
-	border-color:#b3b3b3;
-}
-.nihilo .dijitTextBoxFocused .dijitButtonNode,
-.nihilo .dijitSpinner .dijitUpArrowButtonActive,
-.nihilo .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#d3d3d3;
-}
-.nihilo .dijitSpinnerFocused .dijitDownArrowButton,
-.nihilo .dijitSpinner .dijitUpArrowButtonActive,
-.nihilo .dijitSpinner .dijitDownArrowButtonActive {
-	border-top-color:#d3d3d3;
-}
-.nihilo .dijitError {
-	border-color:#b3b3b3;
-	background-color:#f9f7ba;
-	background-image:none;
-}
-.nihilo .dijitErrorFocused {
-	background-color:#ff6;
-	background-image:none;
-}
-.nihilo .dijitValidationIcon {
-	
-	width: 16px;
-	background: transparent url(images/warning.png) no-repeat center center;
-}
-.nihilo .dijitComboBoxHighlightMatch {
-	background-color:#d3d3d3;
-}
-.nihilo .dijitButtonNode {
-	
-	
-	border:1px solid #dedede;
-	border-bottom:1px solid #dedede;
-	padding: 0.1em 0.2em 0.2em 0.2em;
-	background: #fff url(images/buttonEnabled.png) repeat-x top left;
-}
-.nihilo .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
-.nihilo .dijitButtonText {
-	text-align: center;
-	padding: 0 0.3em;
-}
-.nihilo .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
-}
-.nihilo .dijitArrowButton {
-	color: #111;
-}
-.nihilo .dijitComboButton .dijitDownArrowButton {
-	padding-right:4px;
-}
-.nihilo .dijitComboBoxReadOnly,
-.nihilo .dijitSpinnerReadOnly,
-.nihilo .dijitSpinnerReadOnly .dijitButtonNode,
-.nihilo .dijitButtonDisabled .dijitButtonNode,
-.nihilo .dijitToggleButtonDisabled .dijitButtonNode,
-.nihilo .dijitDropDownButtonDisabled .dijitButtonNode,
-.nihilo .dijitComboButtonDisabled .dijitButtonNode,
-.nihilo .dijitComboBoxDisabled,
-.nihilo .dijitSpinnerDisabled,
-.nihilo .dijitSpinnerDisabled .dijitButtonNode {
-	
-	border-color: #dedede;
-	background:#fafafa url(images/buttonDisabled.png) top repeat-x;
-	opacity: 0.60;
-}
-.dj_ie6 .nihilo .dijitReadOnly INPUT,
-.dj_ie7 .nihilo .dijitReadOnly INPUT,
-.dj_ie6 .nihilo .dijitComboButtonDisabled .dijitButtonText,
-.dj_ie7 .nihilo .dijitComboButtonDisabled .dijitButtonText {
-	
-	color: #aaa;
-}
-.nihilo .dijitButtonHover .dijitButtonNode,
-.nihilo .dijitButtonNodeHover,
-.nihilo .dijitToggleButtonHover .dijitButtonNode,
-.nihilo .dijitDropDownButtonHover .dijitButtonNode,
-.nihilo .dijitButtonContentsHover,
-.nihilo .dijitDownArrowButtonHover,
-.nihilo .dijitUpArrowButtonHover {
-	
-	
-	color:#243C5F;
-	background:#fcfcfc url(images/buttonHover.png) repeat-x top left;
-}
-.nihilo .dijitUpArrowButtonActive,
-.nihilo .dijitDownArrowButtonActive,
-.nihilo .dijitButtonActive .dijitButtonNode,
-.nihilo .dijitToggleButtonActive .dijitButtonNode,
-.nihilo .dijitDropDownButtonActive .dijitButtonNode,
-.nihilo .dijitComboButton .dijitButtonContentsActive,
-.nihilo .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
-	border-color:#dedede;
-	background: #f5f5f5 url(images/buttonActive.png) top left repeat-x;
-}
-.nihilo .dijitArrowButtonInner {
-	background-image: url(images/spriteArrows.png);
-	background-repeat: no-repeat;
-	background-position: 0px center;
-	width: 11px;
-	height: 11px;
-}
-.nihilo .dijitLeftArrowButton .dijitArrowButtonInner {
-	background-position: -11px center;
-}
-.nihilo .dijitUpArrowButton .dijitArrowButtonInner {
-	background-position: -22px center;
-}
-.nihilo .dijitRightArrowButton .dijitArrowButtonInner {
-	background-position: -33px center;
-}
-.dj_ie6 .nihilo .dijitArrowButtonInner {
-	background-image: url(images/spriteArrows.gif);
-}
-.dj_webkit .nihilo .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
-}
-.dj_ie .nihilo .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: 1px; 
-}
-.nihilo .dijitSpinnerButtonContainer {
-	width: auto;
-	padding: 0;
-}
-.nihilo .dijitSpinner .dijitArrowButton {
-	width: 15px;
-}
-.nihilo .dijitSpinner .dijitSpinnerButtonInner {
-	width: 15px;
-}
-.nihilo .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding: 0;
-}
-.nihilo .dijitToggleButton .dijitCheckBox,
-.nihilo .dijitToggleButton .dijitCheckBoxIcon {
-	background-image: url(images/spriteCheckbox.gif);
-}
-.nihilo .dijitCheckBox,
-.nihilo .dijitCheckBoxIcon {		
-	background-image: url(images/spriteCheckbox.gif); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0;
-	padding: 0;
-}
-.nihilo .dijitCheckBox,
-.nihilo .dijitToggleButton .dijitCheckBoxIcon {
-	
-	background-position: -16px;
-}
-.nihilo .dijitCheckBoxChecked,
-.nihilo .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
-}
-.nihilo .dijitCheckBoxDisabled {
-	
-	background-position: -48px;
-}
-.nihilo .dijitCheckBoxCheckedDisabled {
-	
-	background-position: -32px;
-}
-.nihilo .dijitCheckBoxHover {
-	
-	background-position: -80px;
-}
-.nihilo .dijitCheckBoxCheckedHover {
-	
-	background-position: -64px;
-}
-.nihilo .dijitToggleButton .dijitRadio,
-.nihilo .dijitToggleButton .dijitRadioIcon {
-	background-image: url(images/spriteRadio.gif);
-}
-.nihilo .dijitRadio,
-.nihilo .dijitRadioIcon	{		
-	background-image: url(images/spriteRadio.gif); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0;
-	padding: 0;
-}
-.nihilo .dijitRadio,
-.nihilo .dijitToggleButton .dijitRadioIcon {
-	
-	background-position: -16px;
-}
-.nihilo .dijitRadioChecked,
-.nihilo .dijitToggleButtonChecked .dijitRadioIcon {
-	
-	background-position: 0px;
-}
-.nihilo .dijitRadioDisabled {
-	
-	background-position: -48px;
-}
-.nihilo .dijitRadioCheckedDisabled {
-	
-	background-position: -32px;
-}
-.nihilo .dijitRadioHover {
-	
-	background-position: -80px;
-}
-.nihilo .dijitRadioCheckedHover {
-	
-	background-position: -64px;
-}
-.nihilo .dijitSliderProgressBarH {
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.nihilo .dijitSliderProgressBarV {
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.nihilo .dijitSliderFocused .dijitSliderProgressBarH,
-.nihilo .dijitSliderFocused .dijitSliderLeftBumper {
-	background-image:url(images/sliderFullFocus.png);
-}
-.nihilo .dijitSliderFocused .dijitSliderProgressBarV,
-.nihilo .dijitSliderFocused .dijitSliderBottomBumper {
-	background-image:url(images/sliderFullVerticalFocus.png);
-}
-.nihilo .dijitSliderRemainingBarV {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y bottom left;
-}
-.nihilo .dijitSliderRemainingBarH {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-}
-.nihilo .dijitSliderBar {
-	border-style: solid;
-	outline:1px;
-	
-}
-.nihilo .dijitSliderFocused .dijitSliderBar {
-	border-color:#727272;
-}
-.nihilo .dijitSliderImageHandleH {
-	border:0px;
-	width:15px;
-	height:18px;
-	background:url(images/preciseSliderThumb.png) no-repeat center top;
-	#background:url(images/preciseSliderThumb.gif) no-repeat center top;
-}
-.nihilo .dijitSliderFocused .dijitSliderImageHandleH {
-	background-image:url(images/preciseSliderThumbFocus.png);
-	#background-image:url(images/preciseSliderThumbFocus.gif);
-}
-.nihilo .dijitSliderLeftBumper {
-	border-left-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.nihilo .dijitSliderRightBumper {
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-	border-color: #b4b4b4;
-	border-right-width: 1px;
-}
-.nihilo .dijitSliderImageHandleV {
-	border:0px;
-	width:20px;
-	height:15px;
-	background:url(images/sliderThumb.png) no-repeat center center;
-	#background:url(images/sliderThumb.gif) no-repeat center center;
-}
-.nihilo .dijitSliderFocused .dijitSliderImageHandleV {
-	background-image:url(images/sliderThumbFocus.png);
-	#background-image:url(images/sliderThumbFocus.gif);
-}
-.nihilo .dijitSliderBottomBumper {
-	border-bottom-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.nihilo .dijitSliderTopBumper {
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y top left;
-	border-color: #b4b4b4;
-	border-top-width: 1px;
-}
-.nihilo .dijitSliderIncrementIconH,
-.nihilo .dijitSliderIncrementIconV {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -45px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -45px top;
-	width:15px; height:15px;
-}
-.nihilo .dijitSliderIncrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.nihilo .dijitSliderDecrementIconH,
-.nihilo .dijitSliderDecrementIconV {
-	width:15px;
-	height:15px;
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -15px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -15px top;
-}
-.nihilo .dijitSliderDecrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat 0px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat 0px top;
-}
-.nihilo .dijitSliderButtonInner {
-	visibility:hidden;
-}
-.nihilo .dijitSliderReadOnly *,
-.nihilo .dijitSliderDisabled * {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
-	color: #bdbdbd;
-}
-.nihilo .dijitSliderReadOnly .dijitSliderDecrementIconH,
-.nihilo .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: 0px -15px;
-}
-.nihilo .dijitSliderReadOnly .dijitSliderIncrementIconH,
-.nihilo .dijitSliderDisabled .dijitSliderIncrementIconH {
-	background-position: -30px -15px;
-}
-.nihilo .dijitSliderReadOnly .dijitSliderDecrementIconV,
-.nihilo .dijitSliderDisabled .dijitSliderDecrementIconV {
-	background-position: -15px -15px;
-}
-.nihilo .dijitSliderReadOnly .dijitSliderIncrementIconV,
-.nihilo .dijitSliderDisabled .dijitSliderIncrementIconV {
-	background-position: -45px -15px;
-}
-.nihilo .dijitSelect .dijitButtonNode {
-	padding: 0px;
-}
-.nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url(images/validationInputBg.png) repeat-x top left;
-    #background:#fff url(images/validationInputBg.gif) repeat-x top left;
-}
-.nihilo .dijitSelectHover .dijitButtonContents,
-.nihilo .dijitSelectActive .dijitButtonContents,
-.nihilo .dijitSelectOpened .dijitButtonContents,
-.nihilo .dijitSelectDisabled .dijitButtonContents,
-.nihilo .dijitSelectReadOnly .dijitButtonContents{
-	background: transparent none;
-}
-.dj_ie .nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
-}
-.nihilo .dijitSelect .dijitArrowButton {
-	padding: 0px 2px;
-}
-.nihilo .dijitSelectDisabled .dijitButtonNode {
-    border-color: #dedede;
-    background:#fafafa url(images/buttonDisabled.png) top repeat-x;
-}
-.dj_ie .nihilo .dijitSelectDisabled  .dijitButtonNode * {
-	filter: gray() alpha(opacity=50);
-}
-.nihilo .dijitSelectHover .dijitButtonNode {
-    color:#000;
-    background:#fcfcfc url(images/buttonHover.png) repeat-x top left;
-}
-.nihilo .dijitSelectActive .dijitButtonNode,
-.nihilo .dijitSelectOpened .dijitButtonNode {
-    border-color:#dedede;
-    background: #f5f5f5 url(images/buttonActive.png) top left repeat-x;
-}
-.nihilo .dijitSelectMenu td {
-	padding: 0em;
-}
-.nihilo .dijitSelectMenu .dijitMenuItemLabel,
-.nihilo .dijitSelectMenu .dijitMenuArrowCell {
-	padding: 0.1em 0.2em;
-}
-.nihilo .dijitTreeNode {
-    background : url(images/treeI.gif) no-repeat;
-    background-position : top left;
-    background-repeat : repeat-y;
-    zoom: 1;	
-}
-.nihilo .dijitTreeIsLast {
-    background: url(images/treeI_half.gif) no-repeat;
-}
-.nihilo .dijitTreeRowHover {
-	
-	background-image: url(images/treeHover.png);
-	background-repeat: repeat;
-	background-color: transparent !important;
-}
-.nihilo .dijitTreeLabel {
-	font-weight: normal;
-	margin-left: 3px;
-}
-.nihilo .dijitTreeIsRoot {
-    margin-left: 0;
-    background-image: none;
-}
-.nihilo .dijitTreeExpando {
-    width: 18px;
-    height: 18px;
-}
-.nihilo .dijitTreeRow {
-	
-	padding-bottom: 2px;
-}
-.nihilo .dijitTreeContent {
-    min-height: 18px;
-    min-width: 18px;
-    padding-left:1px;
-}
-.nihilo .dijitTreeExpandoOpened {
-	background: url(images/spriteTree.gif) no-repeat -18px top;
-}
-.nihilo .dijitTreeExpandoClosed {
-	background-image: url(images/spriteTree.gif);
-}
-.nihilo .dijitTreeExpandoLeaf {
-	background: url(images/spriteTree.gif) no-repeat -36px top;
-}
-.nihilo .dijitTreeExpandoLoading {
-	background-image: url(images/treeExpand_loading.gif);
-}
-.nihilo .dijitTreeIcon {
-	width: 16px;
-	height: 16px;
-}
-.nihilo .dijitFolderOpened {
-	background: url(images/spriteDivIcons.gif) no-repeat -16px top;
-}
-.nihilo .dijitFolderClosed {
-	background: url(images/spriteDivIcons.gif) no-repeat top left;
-}
-.nihilo .dijitLeaf {
-	background: url(images/spriteDivIcons.gif) no-repeat -32px top;
-}
-.nihilo .dijitTreeNode .dojoDndItemBefore,
-.nihilo .dijitTreeNode .dojoDndItemAfter {
-	border-bottom: none;
-	border-top: none;
-}
-.nihilo .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
-	border-top: 2px solid #369;
-}
-.nihilo .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
-	border-bottom: 2px solid #369;
-}
-.nihilo .dijitProgressBar {
-	margin:2px 0px 2px 0px;
-}
-.nihilo .dijitProgressBarEmpty{
-	
-	background:#fff url(images/progressBarEmpty.png) repeat-x center center;
-	border-color: #f8d582 #f8d582 #f8d582 #f8d582;
-}
-.nihilo .dijitProgressBarTile{
-	
-	background:#f0f0f0 url(images/progressBarFull.png) repeat-x center center;
-}
-.nihilo .dijitProgressBarFull {
-	border-right:1px solid #f8d582;
-}
-.nihilo .dijitProgressBarLabel {
-	
-	color:#293a4b;
-}
-.nihilo .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-	background:#cad2de url(images/progressBarAnim.gif) repeat-x center center;
-}
-.nihilo .dijitTitlePaneTitle {
-	background: #cccccc;
-	background:#fff url(images/titleBar.png) repeat-x top left;
-	border:1px solid #bfbfbf;
-	padding:3px 4px;
-	font-size: 0.9em;
-	font-weight: bold;
-	color: #6d6d6d;
-}
-.nihilo .dijitTitlePaneTitleHover  {
-	background: #f9f9f9 url(images/accordionItemActive.png) top repeat-x;
-}
-.nihilo .dijitTitlePane .dijitOpen .dijitArrowNode,
-.nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	width:15px;
-	height:15px;
-}
-.nihilo .dijitTitlePaneTextNode {
-	color: #243C5F;
-}
-.nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-}
-.dj_ie6 .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.nihilo .dijitTitlePane .dijitOpen .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -15px top;
-}
-.dj_ie6 .nihilo .dijitTitlePane .dijitOpen .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -15px top;
-}
-.nihilo .dijitTitlePaneContentOuter {
-	background: #ffffff;
-	border:1px solid #bfbfbf;
-	border-top: 0px;
-}
-.nihilo .dijitTitlePaneContentInner {
-	padding:10px;
-}
-.nihilo .dijitTitlePaneTextNode {
-	margin-left: 4px;
-	margin-right: 4px;
-}
-.nihilo .dijitCalendarIncrementControl {
-	
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-repeat: no-repeat
-}
-.dj_ie6 .nihilo .dijitCalendarIncrementControl {
-	font-size:.1em;
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitA11ySideArrow {
-	display: none;
-}
-.nihilo .dijitCalendarDecrease {
-	background-position: top left;
-}
-.nihilo .dijitCalendarIncrease {
-	background-position: -30px top;
-}
-.nihilo table.dijitCalendarContainer {
-	font-size: 100%;
-	border-spacing: 0;
-	border-collapse: separate;
-	border: 1px solid #ccc;
-	margin: 0;
-}
-.nihilo .dijitCalendarMonthContainer th {
-	
-	background:#d3d3d3 url(images/titleBar.png) repeat-x top;
-	padding-top:.3em;
-	padding-bottom:.2em;
-	text-align:center;
-}
-.dj_ie6 .nihilo .dijitCalendarMonthContainer th {
-	padding-top:.2em;
-	padding-bottom:.1em;
-}
-.nihilo .dijitCalendarDayLabelTemplate {
-	
-	background:#fefefe;
-	font-weight:normal;
-	padding-top:.15em;
-	padding-bottom:.2em;
-	border-bottom: 1px solid #eeeeee;
-	color:#293a4b;
-	text-align:center;
-}
-.nihilo .dijitCalendarBodyContainer {
-	border-bottom: 1px solid #eeeeee;
-}
-.nihilo .dijitCalendarMonthLabel {
-	color:#293a4b;
-	font-weight: bold;
-}
-.nihilo .dijitCalendarDateTemplate {
-	
-	font-size: 0.9em;
-	font-weight: bold;
-	text-align: center;
-	padding: 0.3em 0.3em 0.05em 0.3em;
-	letter-spacing: 1px;
-	background-color: #fdfdfd;
-	border:#fdfdfd solid 1px !important;
-}
-.dj_ie .nihilo .dijitCalendarDateTemplate {
-	padding: 0.1em .33em 0.02em .33em;
-}
-.nihilo .dijitCalendarPreviousMonth,
-.nihilo .dijitCalendarNextMonth 		{
-	
-	color:#999999;
-	background-color:#f5f5f5 !important;
-	border:#f5f5f5 solid 1px !important;
-}
-.nihilo .dijitCalendarCurrentMonth {
-	
-}
-.nihilo .dijitCalendarDisabledDate {
-	text-decoration:line-through !important;
-}
-.nihilo .dijitCalendarCurrentDate {
-	
-	text-decoration:underline;
-	font-weight:bold;
-}
-.nihilo .dijitCalendarSelectedDate {
-	
-	background-color:#ffe284 !important;
-	color:black !important;
-	border:#f7c95c solid 1px !important;
-}
-.nihilo .dijitCalendarYearContainer {
-	
-	background:white url(images/titleBar.png) repeat-x top;
-}
-.nihilo .dijitCalendarYearLabel {
-	
-	margin:0;
-	padding:0.4em 0 0.25em 0;
-	text-align:center;
-}
-.nihilo .dijitCalendarSelectedYear {
-	
-	color:black;
-	padding:0.2em;
-	padding-bottom:0.1em;
-	background-color:#ffe284 !important;
-	border:#f7c95c solid 1px !important;
-}
-.nihilo .dijitCalendarNextYear,
-.nihilo .dijitCalendarPreviousYear {
-	
-	color:black !important;
-	font-weight:normal;
-}
-.nihilo .dijitTimePickerTick,
-.nihilo .dijitTimePickerMarker {
-	border-color: #eeeeee;
-}
-.nihilo .dijitTimePickerTick {
-	color:white;
-}
-.nihilo .dijitTimePickerMarker {
-	background:#d3d3d3 url(images/titleBar.png) repeat-x top;
-	color:#293a4b;
-	font-weight: bold;
-}
-.nihilo .dijitTimePickerItemSelected {
-	color: black;
-	background: #ffe284 none;
-}
-.nihilo .dijitTimePickerItemHover {
-	background: #d6d6dd none;
-	color:black;
-}
-.nihilo .dijitTimePickerItemHover,
-.nihilo .dijitTimePickerItemSelected {
-	position: relative;
-	z-index: 10;
-}
-.nihilo .dijitTimePickerTick .dijitTimePickerItemInner {
-	font-size:0.4em;
-}
-.nihilo .dijitTimePickerItemHover .dijitTimePickerItemInner,
-.nihilo .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	font-size:1em;
-}
-.nihilo .dijitTimePickerMarkerHover {
-	border-top: 1px solid #eeeeee;
-}
-.nihilo .dijitTimePickerTickHover,
-.nihilo .dijitTimePickerTickSelected {
-	margin-top:-0.3em;
-	margin-bottom:-0.3em;
-	border-bottom: none;
-}
-.nihilo .dijitToolbar {
-	border-bottom: 1px solid #ccc;
-	background:#eaeaea url(images/titleBar.png) repeat-x top left;
-}
-.dj_ie6 .nihilo .dijitToolbar {
-	height: 10px;
-}
-.nihilo .dijitToolbar .dijitButtonNode,
-.nihilo .dijitToolbar .dijitComboButton .dijitButtonContents,
-.nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButton {
-	background: none;
-	margin: 0px;
-	padding: 0px;
-	border: none;
-	font-size: 12px;
-}
-.nihilo .dijitToolbar .dijitButton,
-.nihilo .dijitToolbar .dijitToggleButton,
-.nihilo .dijitToolbar .dijitDropDownButton,
-.nihilo .dijitToolbar .dijitComboButton .dijitButtonContents,
-.nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButton {
-	background: none;
-	padding: 1px;	
-}
-.nihilo .dijitToolbar .dijitButtonChecked,
-.nihilo .dijitToolbar .dijitToggleButtonChecked {
-	background-color:#ffeeb9;
-	border:1px solid #f7c95c;
-	padding: 0;
-}
-.nihilo .dijitToolbar .dijitButtonCheckedHover,
-.nihilo .dijitToolbar .dijitToggleButtonCheckedHover
- {
-	background-color:#ffe284;
-	border:1px solid #f7c95c;
-	padding: 0;
-}
-.nihilo .dijitToolbar .dijitButtonHover,
-.nihilo .dijitToolbar .dijitToggleButtonHover,
-.nihilo .dijitToolbar .dijitDropDownButtonHover,
-.nihilo .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
-.nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
-	border: 1px solid #f7c95c;
-	padding: 0;
-	background-color:#ffe284;
-}
-.nihilo .dijitToolbar label {
-	padding: 3px 3px 0 6px;
-}
-.dj_ie .nihilo .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
-.dj_ie .nihilo .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
-	border: 1px #555 dotted !important;
-	padding: 0px;
-}
-.nihilo .dijitDialog {
-	background: #eee;
-	border: 1px solid #d3d3d3;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-	padding: 0px;
-}
-.nihilo .dijitDialog .dijitDialogTitle {
-	
-	font-size: 0.9em;
-	color: #3243C5F;
-	font-weight: bold;
-	padding: 0px 4px;
-}
-.nihilo .dijitDialog .dijitDialogPaneContent {
-	background: #ffffff;
-	border-top: 1px solid #d3d3d3;
-	padding:10px;
-}
-.nihilo .dijitDialogTitleBar {
-	
-	background: #fafafa url(images/titleBar.png) repeat-x top left;
-	padding: 5px 6px 3px 6px;
-	outline:0; 
-}
-.nihilo .dijitDialogCloseIcon {
-	
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-repeat: no-repeat;
-	background-position: -60px 0px;
-	position: absolute;
-	vertical-align: middle;
-	right: 6px;
-	top: 4px;
-	height: 15px;
-	width: 15px;
-}
-.dj_ie6 .nihilo .dijitDialogCloseIcon {
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitDialogCloseIconHover {
-	background-position: -60px -15px;
-}
-.nihilo .dijitTooltip,
-.nihilo .dijitTooltipDialog {
-	
-	background: transparent;	
-}
-.dijitTooltipBelow {
-	
-	padding-top: 10px;
-}
-.dijitTooltipAbove {
-	
-	padding-bottom: 10px;
-}
-.nihilo .dijitTooltipContainer {
-	
-	background-color: #fff;
-	border:1px solid #d3d3d3;
-	padding:0.45em;
-}
-.nihilo .dijitTooltipConnector {
-	
-	border:0px;
-	z-index: 2;
-}
-.nihilo .dijitTooltipABRight .dijitTooltipConnector {
-	
-	left: auto !important;
-	right: 6px;
-}
-.nihilo .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
-	left: 6px;
-	background:url(images/tooltipConnectorUp.png) no-repeat top left;
-	width:17px;
-	height:11px;
-}
-.dj_ie .nihilo .dijitTooltipBelow .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorUp.gif);
-}
-.nihilo .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
-	left: 6px;
-	background:url(images/tooltipConnectorDown.png) no-repeat top left;
-	width:17px;
-	height:11px;
-}
-.dj_ie .nihilo .dijitTooltipAbove .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorDown.gif);
-}
-.dj_ie6 .nihilo .dijitTooltipAbove .dijitTooltipConnector {
-	bottom: -5px;
-}
-.nihilo .dijitTooltipLeft {
-	padding-right: 10px;
-}
-.dj_ie6 .nihilo .dijitTooltipLeft {
-	padding-left: 11px;
-}
-.nihilo .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorRight.png) no-repeat top left;
-	width:11px;
-	height:17px;
-}
-.dj_ie .nihilo .dijitTooltipLeft .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorRight.gif);
-}
-.nihilo .dijitTooltipRight {
-	padding-left: 10px;
-}
-.nihilo .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorLeft.png) no-repeat top left;
-	width:11px;
-	height:17px;
-}
-.dj_ie .nihilo .dijitTooltipRight .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorLeft.gif);
-}
-.nihilo .dijitMenu,
-.nihilo .dijitMenuBar {
-	border: 1px solid #d3d3d3;
-	margin: 0px;
-	padding: 0px;
-	background-color: #fff;
-}
-.nihilo .dijitBorderContainer .dijitMenuBar {
-	border: 1px #ccc solid;
-}
-.nihilo .dijitMenuItem {
-	font-family: sans-serif;
-	margin: 0px;
-	color: #243C5F;
-}
-.nihilo .dijitMenuBar .dijitMenuItem {
-	padding: 4px 5px;
-}
-.nihilo .dijitMenuPreviousButton, .nihilo .dijitMenuNextButton {
-	font-style: italic;
-}
-.nihilo .dijitMenuItem TD {
-	padding:1px;
-}
-.nihilo .dijitMenuPassive .dijitMenuItemHover,
-.nihilo .dijitMenuItemSelected {
-	background-color: #ffe284; 
-	color: #243C5F;
-}
-.nihilo .dijitMenuItemIcon {
-	width: 15px;
-	height: 15px;
-}
-.nihilo .dijitMenuExpand {
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-position: -30px top;
-}
-.dj_ie6 .nihilo .dijitMenuExpand {
-	background-image:url(images/spriteRoundedIconsSmall.gif);
-}
-.nihilo .dijitMenuSeparator {
-	height: 1px;
-}
-.nihilo .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
-}
-.nihilo .dijitMenuSeparatorBottom {
-	border-top: 1px solid #d3d3d3;
-}
-.nihilo .dijitCheckedMenuItemIconChar {
-	display: none;
-}
-.nihilo .dijitCheckedMenuItemIcon {
-	background-image: url(images/spriteCheckbox.gif);
-	background-position: -80px;
-}
-.nihilo .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-	background-position: -64px;
-}
-.nihilo .dijitToolbar .dijitToolbarSeparator {
-	background: url(../../icons/images/editorIconsEnabled.png); 
-}
-.nihilo .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.nihilo .dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIconSep { background-position: 0px; }
-.dijitEditorIconSave { background-position: -18px; }
-.dijitEditorIconPrint { background-position: -36px; }
-.dijitEditorIconCut { background-position: -54px; }
-.dijitEditorIconCopy { background-position: -72px; }
-.dijitEditorIconPaste { background-position: -90px; }
-.dijitEditorIconDelete { background-position: -108px; }
-.dijitEditorIconCancel { background-position: -126px; }
-.dijitEditorIconUndo { background-position: -144px; }
-.dijitEditorIconRedo { background-position: -162px; }
-.dijitEditorIconSelectAll { background-position: -180px; }
-.dijitEditorIconBold { background-position: -198px; }
-.dijitEditorIconItalic { background-position: -216px; }
-.dijitEditorIconUnderline { background-position: -234px; }
-.dijitEditorIconStrikethrough { background-position: -252px; }
-.dijitEditorIconSuperscript { background-position: -270px; }
-.dijitEditorIconSubscript { background-position: -288px; }
-.dijitEditorIconJustifyCenter { background-position: -306px; }
-.dijitEditorIconJustifyFull { background-position: -324px; }
-.dijitEditorIconJustifyLeft { background-position: -342px; }
-.dijitEditorIconJustifyRight { background-position: -360px; }
-.dijitEditorIconIndent { background-position: -378px; }
-.dijitEditorIconOutdent { background-position: -396px; }
-.dijitEditorIconListBulletIndent { background-position: -414px; }
-.dijitEditorIconListBulletOutdent { background-position: -432px; }
-.dijitEditorIconListNumIndent { background-position: -450px; }
-.dijitEditorIconListNumOutdent { background-position: -468px; }
-.dijitEditorIconTabIndent { background-position: -486px; }
-.dijitEditorIconLeftToRight { background-position: -504px; }
-.dijitEditorIconRightToLeft, .dijitEditorIconToggleDir { background-position: -522px; }
-.dijitEditorIconBackColor { background-position: -540px; }
-.dijitEditorIconForeColor { background-position: -558px; }
-.dijitEditorIconHiliteColor { background-position: -576px; }
-.dijitEditorIconNewPage { background-position: -594px; }
-.dijitEditorIconInsertImage { background-position: -612px; }
-.dijitEditorIconInsertTable { background-position: -630px; }
-.dijitEditorIconSpace { background-position: -648px; }
-.dijitEditorIconInsertHorizontalRule { background-position: -666px; }
-.dijitEditorIconInsertOrderedList { background-position: -684px; }
-.dijitEditorIconInsertUnorderedList { background-position: -702px; }
-.dijitEditorIconCreateLink { background-position: -720px; }
-.dijitEditorIconUnlink { background-position: -738px; }
-.dijitEditorIconViewSource { background-position: -756px; }
-.dijitEditorIconRemoveFormat { background-position: -774px; }
-.dijitEditorIconFullScreen { background-position: -792px; }
-.dijitEditorIconWikiword { background-position: -810px; }
- 
-.dijitColorPalette {
-	border:1px solid #d3d3d3;
-	background:#fff;
-	-moz-border-radius: 0px !important;
-}
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+
+@import url("../dijit.css");
+@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/
+@import url("Common.css");
+
+@import url("layout/ContentPane.css");
+@import url("layout/TabContainer.css");
+@import url("layout/AccordionContainer.css");
+@import url("layout/SplitContainer.css");
+@import url("layout/BorderContainer.css");
+@import url("form/Common.css");
+@import url("form/Button.css");
+@import url("form/Checkbox.css");
+@import url("form/RadioButton.css");
+@import url("form/Slider.css");
+@import url("form/Select.css");
+@import url("Tree.css");
+@import url("ProgressBar.css");
+@import url("TitlePane.css");
+@import url("Calendar.css");
+@import url("TimePicker.css");
+@import url("Toolbar.css");
+@import url("Dialog.css");
+@import url("Menu.css");
+@import url("Editor.css");
+@import url("../../icons/editorIcons.css"); /* sprite for editor icons to be used by all themes */
+@import url("ColorPalette.css");
\ No newline at end of file
diff --git a/lib/dijit/themes/nihilo/nihilo_rtl.css b/lib/dijit/themes/nihilo/nihilo_rtl.css
index b47f8431b..1e9a6af85 100644
--- a/lib/dijit/themes/nihilo/nihilo_rtl.css
+++ b/lib/dijit/themes/nihilo/nihilo_rtl.css
@@ -1,224 +1,29 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitRtl .dijitPlaceHolder {
-	left: auto;
-	right: 0;
-}
-.dijitMenuItemRtl {
-	text-align: right;
-}
-.dj_iequirks .dijitComboButtonRtl BUTTON {
-	
-	float:left;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitComboBoxRtl .dijitArrowButtonContainer {
-	
-	border-right-width: 1px !important;
-	border-right-style: solid !important;
-	border-left-width: 0px !important;
-	border-left-style: none !important;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer {
-	border-right: 1px solid black !important;
-	border-left: 0px none black !important;
-}
-.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
-	right: 0;
-	left: auto;
-}
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitArrowButtonContainer {
-	float: left;
-}
-.dijitCalendarRtl .dijitCalendarNextYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarRtl .dijitCalendarPreviousYear {
-	margin:0 0 0 0.55em;
-}
-.dijitSliderRtl .dijitSliderImageHandleV {
-	left:auto;
-}
-.dijitSliderRtl .dijitSliderImageHandleH {
-	left:-50%;
-}
-.dijitSliderRtl .dijitSliderMoveableH {
-	right:auto;
-	left:0;
-}
-.dijitSliderRtl .dijitRuleContainerV {
-	float:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleContainerV {
-	text-align:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelV {
-	text-align:left;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelH {
-	zoom:1;
-}
-.dijitSliderRtl .dijitSliderProgressBarH {
-	
-	float:right;
-	right:0;
-	left:auto;
-}
-.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError {
-	background-position:right;
-	padding-right:25px;
-}
-.dijitTabRtl .dijitTabCloseButton {
-	margin-left: 0px;
-	margin-right: 1em;
-}
-.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
-	width:100%;
-}
-.dijitColorPaletteRtl .dijitColorPaletteUnder {
-	
-	left: auto;
-	right: 0;
-}
-.dijitSelectRtl .dijitButtonContents {
-	text-align: right;
-}
-.dijitRtl .nihilo .dijitTab {
-	margin-right:0;
-	margin-left:2px;		
-}
-.dijitRtl .nihilo .dijitTabContainer .tabStripButton {
-	margin-left: 0;
-}
-.dijitRtl .nihilo .dijitTabContainerTopStrip,
-.dijitRtl .nihilo .dijitTabContainerBottomStrip,
-.dijitRtl .nihilo .dijitTabContainerTop-tabs,
-.dijitRtl .nihilo .dijitTabContainerBottom-tabs {
-	padding-left: 0;
-	padding-right: 3px;
-}
-.dijitRtl .nihilo .dijitTabInnerDiv {
-	padding-left: 3px;
-	padding-right: 4px;
-}
-.dijitRtl .nihilo .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-.dj_ie-rtl .nihilo .dijitTabContainerLeft-tabs {
-	margin-left: 0px !important;
-}
-.dj_ie-rtl .nihilo .dijitTabContainerRight-tabs {
-	margin-right: 0px !important;
-}
-.dijitRtl .nihilo .dijitTabContainerLeft-tabs .dijitTab,
-.dijitRtl .nihilo .dijitTabContainerRight-tabs .dijitTab {
-	margin-left:0px;
-}
-.dj_ie-rtl .nihilo .dijitTab .dijitTabInnerDiv{
-	width : 1%;
-}
-.dijitRtl .nihilo .dijitAccordionArrow {
-	background-position: 0px top;
-}
-.dijitRtl .nihilo .dijitAccordionTitleSelected .dijitAccordionArrow {
-	
-	background-position: -15px top;
-}
-.dijitRtl .nihilo .dijitSliderProgressBarH,
-.dijitRtl .nihilo .dijitSliderRemainingBarH,
-.dijitRtl .nihilo .dijitSliderLeftBumper,
-.dijitRtl .nihilo .dijitSliderRightBumper,
-.dijitRtl .nihilo .dijitSliderTopBumper {
-	background-position: top right;
-}
-.dijitRtl .nihilo .dijitSliderProgressBarV,
-.dijitRtl .nihilo .dijitSliderRemainingBarV,
-.dijitRtl .nihilo .dijitSliderBottomBumper {
-	background-position: bottom right;
-}
-.dijitRtl .nihilo .dijitSliderLeftBumper {
-	border-left-width: 0px;
-	border-right-width: 1px;
-}
-.dijitRtl .nihilo .dijitSliderRightBumper {
-	border-left-width: 1px;
-	border-right-width: 0px;
-}
-.dijitRtl .nihilo .dijitSliderIncrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat left top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat left top;
-}
-.dijitRtl .nihilo .dijitSliderDecrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.dijitRtl .nihilo .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
-}
-.dijitRtl .nihilo .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
-.dijitRtl .nihilo .dijitTreeNode,
-.dijitRtl .nihilo .dijitTreeExpandoLeaf {
-	
-    background-image: none;
-}
-.dijitRtl .nihilo .dijitTreeContent {
-    padding-left: 0px;
-    padding-right: 1px;
-}
-.dijitRtl .nihilo .dijitTreeExpandoOpened {
-	
-	background: url(images/spriteTree_rtl.gif) no-repeat -18px top;
-}
-.dijitRtl .nihilo .dijitTreeExpandoClosed {
-	
-	background-image: url(images/spriteTree_rtl.gif);
-}
-.dijitRtl .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
-.dj_ie6-rtl .nihilo .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
-.dijitRtl .nihilo .dijitCalendarDecrease {
-	background-position: -30px top;
-}
-.dijitRtl .nihilo .dijitCalendarIncrease {
-	background-position: 0px top;
-}
-.dj_ie6-rtl .nihilo .dijitTimePickerMarkerHover,
-.dj_ie7-rtl .nihilo .dijitTimePickerMarkerHover {
-        border-top: 0px; 
-}
-.dijitRtl .nihilo .dijitDialogTitleBar .dijitDialogCloseIcon {
-	right: auto;
-	left: 5px;
-}
-.dijitRtl .nihilo .dijitMenuItem .dijitMenuItemIcon {
-	padding-left: 3px;
-	padding-right: 0px;
-}
-.dijitRtl .nihilo .dijitMenuItem .dijitMenuExpand {
-	background-position: 0px top;
-}
-.dijitRtl .nihilo .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitRtl .nihilo .dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitToolbarRtl .dijitToolbarSeparator {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png);
-}
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+
+@import url("../dijit_rtl.css");
+@import url("layout/TabContainer_rtl.css");
+@import url("layout/AccordionContainer_rtl.css");
+@import url("form/Slider_rtl.css");
+@import url("form/Button_rtl.css");
+@import url("Tree_rtl.css");
+@import url("TitlePane_rtl.css");
+@import url("Calendar_rtl.css");
+@import url("TimePicker_rtl.css");
+@import url("Dialog_rtl.css");
+@import url("Menu_rtl.css");
+@import url("Editor_rtl.css");
+@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Calendar.css b/lib/dijit/themes/soria/Calendar.css
index b2576c0e0..78572dab0 100644
--- a/lib/dijit/themes/soria/Calendar.css
+++ b/lib/dijit/themes/soria/Calendar.css
@@ -1,6 +1,7 @@
+/* Calendar*/
 
 .soria .dijitCalendarIncrementControl {
-	
+	/* next/prev month buttons */
 	width:15px;
 	height:15px;
 	background-image: url("images/spriteRoundedIconsSmall.png");
@@ -10,15 +11,18 @@
 	font-size:.1em;
 	background-image: url("images/spriteRoundedIconsSmall.gif");
 }
+
 .soria .dijitA11ySideArrow {
 	display: none;
 }
+
 .soria .dijitCalendarDecrease {
 	background-position: top left;
 }
 .soria .dijitCalendarIncrease {
 	background-position: -30px top;
 }
+
 .soria table.dijitCalendarContainer {
 	font-size: 100%;
 	border-spacing: 0;
@@ -26,8 +30,9 @@
 	border: 1px solid #b1badf;
 	margin: 0;
 }
+
 .soria .dijitCalendarMonthContainer th {
-	
+	/* month header cell */
 	background:#bed7f0 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;
 	padding-bottom:.2em;
@@ -37,8 +42,9 @@
 	padding-top:.2em;
 	padding-bottom:.1em;
 }
+
 .soria .dijitCalendarDayLabelTemplate {
-	
+	/* day of week labels */
 	background:#bed7f0;
 	font-weight:normal;
 	padding-top:.15em;
@@ -47,15 +53,19 @@
 	color:#293a4b;
 	text-align:center;
 }
+
 .soria .dijitCalendarBodyContainer {
 	border-bottom: 1px solid #eeeeee;
 }
+
 .soria .dijitCalendarMonthLabel {
 	color:#293a4b;
 	font-weight: bold;
+	padding: 0 4px;
 }
+
 .soria .dijitCalendarDateTemplate {
-	
+	/* style for each day cell */
 	font-size: 0.9em;
 	font-weight: bold;
 	text-align: center;
@@ -64,54 +74,86 @@
 	background-color: #fff;
 	border:#fff solid 1px !important;
 }
+
 .dj_ie .soria .dijitCalendarDateTemplate {
 	padding: 0.1em .33em 0.02em .33em;
 }
+
 .soria .dijitCalendarPreviousMonth,
 .soria .dijitCalendarNextMonth 		{
-	
+	/* days that are part of the previous or next month */
 	color:#999999;
 	background-color:#fdfdfd !important;
 	border:#fdfdfd solid 1px !important;
 }
+
 .soria .dijitCalendarCurrentMonth {
-	
+	/* days that are part of this month */
 }
+
 .soria .dijitCalendarDisabledDate {
 	text-decoration:line-through !important;
 }
+
 .soria .dijitCalendarCurrentDate {
-	
+	/* cell for today's date */
 	text-decoration:underline;
 	font-weight:bold;
 }
+
 .soria .dijitCalendarSelectedDate {
-	
+	/* cell for the selected date */
 	background-color:#b9cbf1 !important;
 	color:black !important;
 	border:#4b5aaa solid 1px !important;
 }
+
+
 .soria .dijitCalendarYearContainer {
-	
+	/* footer of the table that contains the year display/selector */
 	background:white url("images/titleBar.png") repeat-x top;
 }
+
 .soria .dijitCalendarYearLabel {
-	
+	/* container for all of 3 year labels */
 	margin:0;
 	padding:0.4em 0 0.25em 0;
 	text-align:center;
 }
+
 .soria .dijitCalendarSelectedYear {
-	
+	/* label for selected year */
 	color:black;
 	padding:0.2em;
 	padding-bottom:0.1em;
 	background-color:#b9cbf1 !important;
 	border:#4b5aaa solid 1px !important;
 }
+
 .soria .dijitCalendarNextYear,
 .soria .dijitCalendarPreviousYear {
-	
+	/* label for next/prev years */
 	color:black !important;
 	font-weight:normal;
 }
+
+/* Styling for month DropDownButton */
+
+.soria .dijitCalendar .dijitDropDownButton {
+	margin: 0;
+}
+.soria .dijitCalendar .dijitButtonText {
+	padding: 0;
+}
+.soria .dijitCalendar .dijitDropDownButton .dijitButtonNode {
+	background-color: transparent;
+	background-image: none;
+	padding: 0;
+}
+
+/* Styling for month drop down list */
+
+.soria .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+	background-color: #d9e6f9;
+	color: #243C5F;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Calendar_rtl.css b/lib/dijit/themes/soria/Calendar_rtl.css
index bcfa495d8..c2350b4ed 100644
--- a/lib/dijit/themes/soria/Calendar_rtl.css
+++ b/lib/dijit/themes/soria/Calendar_rtl.css
@@ -1,7 +1,9 @@
+/* Calendar */
 
 .dijitRtl .soria .dijitCalendarDecrease {
 	background-position: -30px top;
 }
+
 .dijitRtl .soria .dijitCalendarIncrease {
-	background-position: 0px top;
+	background-position: 0 top;
 }
diff --git a/lib/dijit/themes/soria/ColorPalette.css b/lib/dijit/themes/soria/ColorPalette.css
index 5a51275d9..85d6dd819 100644
--- a/lib/dijit/themes/soria/ColorPalette.css
+++ b/lib/dijit/themes/soria/ColorPalette.css
@@ -1,5 +1,5 @@
 .dijitColorPalette {
 	border:1px solid #cbcbcb;
 	background:#fff;
-	-moz-border-radius: 0px !important;
-}
+	-moz-border-radius: 0 !important;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Common.css b/lib/dijit/themes/soria/Common.css
index 362a867f1..d5a7c9df6 100644
--- a/lib/dijit/themes/soria/Common.css
+++ b/lib/dijit/themes/soria/Common.css
@@ -1,13 +1,17 @@
-
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 .soria .dojoDndItemBefore {
 	border-top: 2px solid #369;
 }
+
 .soria .dojoDndItemAfter {
 	border-bottom: 2px solid #369;
 }
+
 .soria .dojoDndItemOver {
 	cursor:pointer;
 }
+
 .soria table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .soria .dojoDndAvatar td	{ border: none; }
 .soria .dojoDndAvatar tr	{ border: none; }
diff --git a/lib/dijit/themes/soria/Dialog.css b/lib/dijit/themes/soria/Dialog.css
index b4a185115..1e0503a0b 100644
--- a/lib/dijit/themes/soria/Dialog.css
+++ b/lib/dijit/themes/soria/Dialog.css
@@ -1,33 +1,39 @@
+/* Dialog */
 
 .soria .dijitDialog {
 	background: #eee;
 	border: 1px solid #cbcbcb;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-	padding: 0px;
+	-webkit-box-shadow: 0 5px 10px #adadad;
+	padding: 0;
 }
+
 .soria .dijitDialog .dijitDialogTitle {
-	
+	/* typography and styling of the dialog title */
 	font-weight: bold;
-	padding: 0px 4px;
+	padding: 0 4px;
 	font-size: 0.9em;
-	color: #3243C5F;
+	color: #243C5F;
 }
+
 .soria .dijitDialog .dijitDialogPaneContent {
 	background: #ffffff;
 	border-top: 1px solid #b1badf;
 	padding:10px;
+
 }
+
 .soria .dijitDialogTitleBar {
-	
+	/* outer container for the titlebar of the dialog */
 	background: #fafafa url("images/titleBar.png") repeat-x top left;
 	padding: 5px 6px 3px 6px;
-	outline:0; 
+	outline:0; /* remove this line if keyboard focus on dialog startup is an issue. tab still takes you to first focusable element */
 }
+
 .soria .dijitDialogCloseIcon {
-	
+	/* the default close icon for the dialog */
 	background-image: url("images/spriteRoundedIconsSmallBl.png");
 	background-repeat: no-repeat;
-	background-position: -60px 0px;
+	background-position: -60px 0;
 	position: absolute;
 	vertical-align: middle;
 	right: 6px;
@@ -41,49 +47,69 @@
 .soria .dijitDialogCloseIconHover {
 	background-position: -60px -15px;
 }
+
+/* Tooltip and TooltipDialog */
+
 .soria .dijitTooltip,
 .soria .dijitTooltipDialog {
-	
-	background: transparent;	
+	/* the outermost dom node, holding the connector and container */
+	background: transparent;	/* make the area on the sides of the arrow transparent */
 }
+
 .dijitTooltipBelow {
-	
+	/* leave room for arrow above content */
 	padding-top: 10px;
 }
+
 .dijitTooltipAbove {
-	
+	/* leave room for arrow below content */
 	padding-bottom: 10px;
 }
+
 .soria .dijitTooltipContainer {
-	
+	/*
+		The part with the text.
+
+		NOTE:
+			FF doesn't clip images used as CSS bgs if you specify a border
+			radius. If you use a solid color, it does. Webkit gets it right.
+			Sigh.
+		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
+	*/
 	background-color: #fff;
 	border:1px solid #cbcbcb;
 	padding:0.45em;
 }
+
 .soria .dijitTooltipConnector {
-	
-	border:0px;
+	/* the arrow piece */
+	border:0;
 	z-index: 2;
 }
+
 .soria .dijitTooltipABRight .dijitTooltipConnector {
-	
+	/* above or below tooltip, but the arrow appears on the right,
+		and the right edges of target and tooltip are aligned rather than the left */
 	left: auto !important;
 	right: 6px;
 }
+
 .soria .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
+	/* the arrow piece for tooltips below an element */
+	top: 0;
 	left: 6px;
 	background:url("images/tooltipConnectorUp.png") no-repeat top left;
 	width:17px;
 	height:11px;
 }
+
 .dj_ie .soria .dijitTooltipBelow .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorUp.gif");
 }
+
 .soria .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
+	/* the arrow piece for tooltips above an element */
+	bottom: 0;
 	left: 6px;
 	background:url("images/tooltipConnectorDown.png") no-repeat top left;
 	width:17px;
@@ -98,16 +124,13 @@
 .dj_ie6 .soria .dijitTooltipAbove .dijitTooltipConnector {
 	bottom: -5px;
 }
+
 .soria .dijitTooltipLeft {
 	padding-right: 10px;
 }
-.dj_ie6 .soria .dijitTooltipLeft {
-	padding-left: 11px;
-}
 .soria .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+	right: 0;
 	background:url("images/tooltipConnectorRight.png") no-repeat top left;
 	width:11px;
 	height:17px;
@@ -115,13 +138,13 @@
 .dj_ie .soria .dijitTooltipLeft .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorRight.gif");
 }
+
 .soria .dijitTooltipRight {
 	padding-left: 10px;
 }
 .soria .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+	left: 0;
 	background:url("images/tooltipConnectorLeft.png") no-repeat top left;
 	width:11px;
 	height:17px;
@@ -129,3 +152,4 @@
 .dj_ie .soria .dijitTooltipRight .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorLeft.gif");
 }
+
diff --git a/lib/dijit/themes/soria/Dialog_rtl.css b/lib/dijit/themes/soria/Dialog_rtl.css
index 41db9ce02..838700af5 100644
--- a/lib/dijit/themes/soria/Dialog_rtl.css
+++ b/lib/dijit/themes/soria/Dialog_rtl.css
@@ -1,4 +1,4 @@
-
+/* Dialog */
 .dijitRtl .soria .dijitDialogTitleBar .dijitDialogCloseIcon {
 	right: auto;
 	left: 5px;
diff --git a/lib/dijit/themes/soria/Editor.css b/lib/dijit/themes/soria/Editor.css
index c30665986..d2dd29303 100644
--- a/lib/dijit/themes/soria/Editor.css
+++ b/lib/dijit/themes/soria/Editor.css
@@ -1,13 +1,17 @@
 .soria .dijitToolbar .dijitToolbarSeparator {
-	background: url('../../icons/images/editorIconsEnabled.png'); 
+	background: url('../../icons/images/editorIconsEnabled.png'); /* separator in editor icons sprite image - enabled state */
 }
+
+/**** ICONS *****/
+
 .soria .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled.png'); /* editor icons sprite image - enabled state */
 	background-repeat: no-repeat;
 	width: 18px;
 	height: 18px;
 	text-align: center;
 }
 .soria .dijitDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled.png'); /* editor icons sprite image - disabled state */
 }
+
diff --git a/lib/dijit/themes/soria/Editor_rtl.css b/lib/dijit/themes/soria/Editor_rtl.css
index 4499e5232..a1f76e8c4 100644
--- a/lib/dijit/themes/soria/Editor_rtl.css
+++ b/lib/dijit/themes/soria/Editor_rtl.css
@@ -1,7 +1,7 @@
-
+/* Editor */
 .dijitRtl .soria .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); /* editor icons sprite image - enabled state */
 }
 .dijitRtl .soria .dijitDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); /* editor icons sprite image - disabled state */
 }
diff --git a/lib/dijit/themes/soria/Menu.css b/lib/dijit/themes/soria/Menu.css
index 9d6b97a0e..4d9d06811 100644
--- a/lib/dijit/themes/soria/Menu.css
+++ b/lib/dijit/themes/soria/Menu.css
@@ -1,37 +1,44 @@
 
+/* Menu */
 .soria .dijitMenu,
 .soria .dijitMenuBar {
 	border: 1px solid #cbcbcb;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	background-color: #fff;
 }
+
 .soria .dijitBorderContainer .dijitMenuBar {
 	border:1px solid #B1BADF;
 }
+
 .soria .dijitMenuItem {
 	font-family: sans-serif;
-	margin: 0px;
+	margin: 0;
 	color: #243C5F;
 }
 .soria .dijitMenuBar .dijitMenuItem {
 	padding: 4px 5px;
 }
+
 .soria .dijitMenuPreviousButton, .soria .dijitMenuNextButton {
 	font-style: italic;
 }
 .soria .dijitMenuItem TD {
 	padding:1px;
 }
+
 .soria .dijitMenuPassive .dijitMenuItemHover,
 .soria .dijitMenuItemSelected {
-	background-color: #d9e6f9; 
+	background-color: #d9e6f9; /* #95a0b0; #555555; #aaaaaa; #646464;  #60a1ea; #848484; */
 	color: #243C5F;
 }
+
 .soria .dijitMenuItemIcon {
 	width: 15px;
 	height: 15px;
 }
+
 .soria .dijitMenuExpand {
 	width:15px;
 	height:15px;
@@ -41,22 +48,30 @@
 .dj_ie6 .soria .dijitMenuExpand {
 	background-image: url('images/spriteRoundedIconsSmall.gif');
 }
+
 .soria .dijitMenuSeparator {
 	height: 1px;
 }
+
+/* separator can be two pixels -- set border of either one to 0 to have only one */
 .soria .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
+	border-bottom: 1px solid #fff; /*97adcb; */
 }
+
 .soria .dijitMenuSeparatorBottom {
 	border-top: 1px solid #8ba0bd;
 }
+
+/* the checked menu item */
 .soria .dijitCheckedMenuItemIconChar {
 	display: none;
 }
+
 .soria .dijitCheckedMenuItemIcon {
 	background-image: url('images/spriteCheckbox.gif');
 	background-position: -80px;
 }
+
 .soria .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Menu_rtl.css b/lib/dijit/themes/soria/Menu_rtl.css
index 6fa9a6a6a..0e0148394 100644
--- a/lib/dijit/themes/soria/Menu_rtl.css
+++ b/lib/dijit/themes/soria/Menu_rtl.css
@@ -1,8 +1,10 @@
+/* Menu */
 
 .dijitRtl .soria .dijitMenuItem .dijitMenuItemIcon {
 	padding-left: 3px;
-	padding-right: 0px;
+	padding-right: 0;
 }
+
 .dijitRtl .soria .dijitMenuItem .dijitMenuExpand {
 	background-position: left top;
 }
diff --git a/lib/dijit/themes/soria/ProgressBar.css b/lib/dijit/themes/soria/ProgressBar.css
index 566d0488c..b2f6d1fbe 100644
--- a/lib/dijit/themes/soria/ProgressBar.css
+++ b/lib/dijit/themes/soria/ProgressBar.css
@@ -1,24 +1,33 @@
 
+/****
+		dijit.ProgressBar
+ ****/
+
 .soria .dijitProgressBar {
-	margin:2px 0px 2px 0px;
+	margin:2px 0 2px 0;
 }
+
 .soria .dijitProgressBarEmpty{
-	
+	/* outer container and background of the bar that's not finished yet*/
 	background:#fff url("images/progressBarEmpty.png") repeat-x center center;
 	border-color: #8ba0bd;
 }
+
 .soria .dijitProgressBarTile{
-	
+	/* inner container for finished portion when in 'tile' (image) mode */
 	background:#f0f0f0 url("images/progressBarFull.png") repeat-x center center;
 }
+
 .soria .dijitProgressBarFull {
 	border-right:1px solid #8ba0bd;
 }
+
 .soria .dijitProgressBarLabel {
-	
+	/* Set to a color that contrasts with both the "Empty" and "Full" parts. */
 	color:#293a4b;
 }
+
 .soria .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
+	/* use an animated gif for the progress bar in 'indeterminate' mode */
 	background:#cad2de url("images/progressBarAnim.gif") repeat-x center center;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/TimePicker.css b/lib/dijit/themes/soria/TimePicker.css
index 761aac944..757d746d8 100644
--- a/lib/dijit/themes/soria/TimePicker.css
+++ b/lib/dijit/themes/soria/TimePicker.css
@@ -1,39 +1,48 @@
-
+/* Time Picker */
 .soria .dijitTimePickerTick,
 .soria .dijitTimePickerMarker {
 	border-color: #b1badf;
 }
+
 .soria .dijitTimePickerTick {
 	color:white;
 }
+
 .soria .dijitTimePickerMarker {
 	background:#bed7f0 url("images/titleBar.png") repeat-x top;
 	color:#293a4b;
 	font-weight: bold;
 }
+
 .soria .dijitTimePickerItemSelected {
 	color: black;
 	background: #b9cbf1 none;
 }
+
 .soria .dijitTimePickerItemHover {
 	background: #60a1ea none;
 	color:white;
 }
+
 .soria .dijitTimePickerItemHover,
 .soria .dijitTimePickerItemSelected {
 	position: relative;
 	z-index: 10;
 }
+
 .soria .dijitTimePickerTick .dijitTimePickerItemInner {
 	font-size:0.4em;
 }
+
 .soria .dijitTimePickerItemHover .dijitTimePickerItemInner,
 .soria .dijitTimePickerItemSelected .dijitTimePickerItemInner {
 	font-size:1em;
 }
+
 .soria .dijitTimePickerMarkerHover {
 	border-top: 1px solid #94b9ef;
 }
+
 .soria .dijitTimePickerTickHover,
 .soria .dijitTimePickerTickSelected {
 	margin-top:-0.3em;
diff --git a/lib/dijit/themes/soria/TimePicker_rtl.css b/lib/dijit/themes/soria/TimePicker_rtl.css
index 39835b00f..a802ba6b6 100644
--- a/lib/dijit/themes/soria/TimePicker_rtl.css
+++ b/lib/dijit/themes/soria/TimePicker_rtl.css
@@ -1,4 +1,4 @@
 .dj_ie6-rtl .soria .dijitTimePickerMarkerHover,
 .dj_ie7-rtl .soria .dijitTimePickerMarkerHover {
-        border-top: 0px; 
+        border-top: 0; /* IE6/7 bug causes mouseover/out event storm */
 }
diff --git a/lib/dijit/themes/soria/TitlePane.css b/lib/dijit/themes/soria/TitlePane.css
index a1676796a..7e1042e2a 100644
--- a/lib/dijit/themes/soria/TitlePane.css
+++ b/lib/dijit/themes/soria/TitlePane.css
@@ -1,3 +1,7 @@
+/**
+ * dijit.TitlePane
+ *
+ */
 
 .soria .dijitTitlePaneTitle {
 	background: #cccccc;
@@ -11,17 +15,21 @@
 .soria .dijitTitlePaneTitleHover {
 	background: #f9f9f9 url("images/accordionItemActive.png") top repeat-x;
 }
+
 .soria .dijitTitlePaneTitle * {
 	vertical-align: middle;
 }
+
 .soria .dijitTitlePane .dijitOpen .dijitArrowNode,
 .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
 	width:15px;
 	height:15px;
 }
+
 .soria .dijitTitlePaneTextNode {
 	color: #243C5F;
 }
+
 .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
 	background: url('images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 }
@@ -34,15 +42,17 @@
 .dj_ie6 .soria .dijitTitlePane .dijitOpen .dijitArrowNode {
 	background:url('images/spriteRoundedIconsSmall.gif') no-repeat -15px top;
 }
+
 .soria .dijitTitlePaneContentOuter {
 	background: #ffffff;
 	border: 1px solid #bfbfbf;
-	border-top: 0px;
+	border-top: 0;
 }
 .soria .dijitTitlePaneContentInner {
 	padding:10px;
 }
+
 .soria .dijitTitlePaneTextNode {
 	margin-left: 4px;
 	margin-right: 4px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/TitlePane_rtl.css b/lib/dijit/themes/soria/TitlePane_rtl.css
index 1ac12452f..8a1b73d4e 100644
--- a/lib/dijit/themes/soria/TitlePane_rtl.css
+++ b/lib/dijit/themes/soria/TitlePane_rtl.css
@@ -1,6 +1,6 @@
 .dijitRtl .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
+	background-position: 0 top;
 }
 .dj_ie6-rtl .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
+	background-position: 0 top;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Toolbar.css b/lib/dijit/themes/soria/Toolbar.css
index 4eb55a4e1..8af426a11 100644
--- a/lib/dijit/themes/soria/Toolbar.css
+++ b/lib/dijit/themes/soria/Toolbar.css
@@ -2,55 +2,64 @@
 	border-bottom: 1px solid #ccc;
 	background:#eaeaea url("images/titleBar.png") repeat-x top left;
 }
+
+/* setting a min-height on ditor toolbar */
 .dj_ie6 .soria .dijitToolbar {
 	height: 10px;
 }
+
 .soria .dijitToolbar .dijitButtonNode,
 .soria .dijitToolbar .dijitComboButton .dijitButtonContents,
 .soria .dijitToolbar .dijitComboButton .dijitDownArrowButton {
 	background: none;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	border: none;
 	font-size: 12px;
 }
+
 .soria .dijitToolbar .dijitButton,
 .soria .dijitToolbar .dijitToggleButton,
 .soria .dijitToolbar .dijitDropDownButton,
 .soria .dijitToolbar .dijitComboButton .dijitButtonContents,
 .soria .dijitToolbar .dijitComboButton .dijitDownArrowButton {
 	background: none;
-	padding: 1px;	
+	padding: 1px;	/* on hover etc., margin replaced w/border */
 }
+
 .soria .dijitToolbar .dijitButtonChecked,
 .soria .dijitToolbar .dijitToggleButtonChecked {
 	background-color:#d8e5f8;
 	border:1px solid #316ac5;
-	padding: 0px;
+	padding: 0;
 }
+
 .soria .dijitToolbar .dijitButtonCheckedHover,
 .soria .dijitToolbar .dijitToggleButtonCheckedHover
  {
 	background-color:#9abbea;
 	border:1px solid #316ac5;
-	padding: 0px;
+	padding: 0;
 }
+
 .soria .dijitToolbar .dijitButtonHover,
 .soria .dijitToolbar .dijitToggleButtonHover,
 .soria .dijitToolbar .dijitDropDownButtonHover,
 .soria .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
 .soria .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
+	/* TODO: change this from Hover to Selected so that button is still highlighted while drop down is being used */
 	border: 1px solid #316ac5;
-	padding: 0px;
+	padding: 0;
 	background-color:#9abbea;
 }
+
 .soria .dijitToolbar label {
 	padding: 3px 3px 0 6px;
 }
+
 .dj_ie .soria .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
 .dj_ie .soria .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
+	/* focus border doesn't appear on  for IE, so need to add it manually */
 	border: 1px #777 dotted !important;
-	padding: 0px;
+	padding: 0;
 }
diff --git a/lib/dijit/themes/soria/Tree.css b/lib/dijit/themes/soria/Tree.css
index 60934d414..d8edb67df 100644
--- a/lib/dijit/themes/soria/Tree.css
+++ b/lib/dijit/themes/soria/Tree.css
@@ -1,78 +1,105 @@
+/* Tree */
 
 .soria .dijitTreeNode {
     background : url('images/treeI.gif') no-repeat;
     background-position : top left;
     background-repeat : repeat-y;
-    zoom: 1;	
+    zoom: 1;
 }
+
 .soria .dijitTreeRowHover {
-	
+	/* using a transparent png so that we can still see grid lines, which are (unfortunately) behind the dijitRowNode that we are hovering over */
 	background-image: url(images/treeHover.png);
 	background-repeat: repeat;
 	background-color: transparent !important;
 }
+
+
+/* left vertical line (grid) for all nodes */
 .soria .dijitTreeIsLast {
     background: url('images/treeI_half.gif') no-repeat;
 }
+
 .soria .dijitTreeLabel {
 	font-weight: normal;
 	margin-left: 3px;
 }
+
 .soria .dijitTreeIsRoot {
     margin-left: 0;
     background-image: none;
 }
+
 .soria .dijitTreeExpando {
     width: 18px;
     height: 18px;
 }
+
 .soria .dijitTreeRow {
-	
+	/* so insert line shows up on IE when dropping after a target element */
 	padding-bottom: 2px;
 }
+
 .soria .dijitTreeContent {
     min-height: 18px;
     min-width: 18px;
     padding-left:1px;
 }
+
 .soria .dijitTreeRowSelected .dijitTreeLabel{
 	background:#b8cbec;
 }
+
 .soria .dijitTreeExpandoOpened {
 	background: url('images/spriteTree.gif') no-repeat -18px top;
 }
+
 .soria .dijitTreeExpandoClosed {
 	background-image: url('images/spriteTree.gif');
 }
+
 .soria .dijitTreeExpandoLeaf {
 	background: url('images/spriteTree.gif') no-repeat -36px top;
 }
+
 .soria .dijitTreeExpandoLoading {
 	background-image: url('images/treeExpand_loading.gif');
 }
+
 .soria .dijitTreeIcon {
 	width: 16px;
 	height: 16px;
 }
+
 .soria .dijitFolderOpened {
 	background: url('images/spriteDivIcons.gif') no-repeat -16px top;
 }
+
 .soria .dijitFolderClosed {
 	background: url('images/spriteDivIcons.gif') no-repeat top left;
 }
+
 .soria .dijitLeaf {
 	background: url('images/spriteDivIcons.gif') no-repeat -32px top;
 }
+
+/* Drag and Drop on TreeNodes
+ * Put insert line on dijitTreeContent node so it's aligned w/
+ * (ie, indented equally with) target element, even
+ * though dijitTreeRowNode is the actual "drag object"
+ */
 .soria .dijitTreeNode .dojoDndItemBefore,
 .soria .dijitTreeNode .dojoDndItemAfter {
 	border-bottom: none;
 	border-top: none;
 }
+
 .soria .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-top: 2px solid #369;
 }
+
 .soria .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-bottom: 2px solid #369;
 }
diff --git a/lib/dijit/themes/soria/Tree_rtl.css b/lib/dijit/themes/soria/Tree_rtl.css
index 41dd308b4..44daf3aa8 100644
--- a/lib/dijit/themes/soria/Tree_rtl.css
+++ b/lib/dijit/themes/soria/Tree_rtl.css
@@ -1,18 +1,22 @@
+/* Tree */
 
 .dijitRtl .soria .dijitTreeNode,
 .dijitRtl .soria .dijitTreeExpandoLeaf {
-	
+	/* disable grid lines for Tree in RTL mode, too hard to support */
     background-image: none;
 }
+
 .dijitRtl .soria .dijitTreeContent {
-    padding-left: 0px;
+    padding-left: 0;
     padding-right: 1px;
 }
+
 .dijitRtl .soria .dijitTreeExpandoOpened {
-	
+	/* todo: icon contains grid line but grid lines disabled above */
 	background: url('images/spriteTree_rtl.gif') no-repeat -18px top;
 }
+
 .dijitRtl .soria .dijitTreeExpandoClosed {
-	
+	/* todo: icon contains grid line but grid lines disabled above */
 	background-image: url('images/spriteTree_rtl.gif');
 }
diff --git a/lib/dijit/themes/soria/form/Button.css b/lib/dijit/themes/soria/form/Button.css
index 9bf643709..6b813a6dd 100644
--- a/lib/dijit/themes/soria/form/Button.css
+++ b/lib/dijit/themes/soria/form/Button.css
@@ -1,6 +1,14 @@
 
+/*****
+		dijit.form.Button
+		dijit.form.DropDownButton
+		dijit.form.ComboButton
+		dijit.form.ComboBox (partial)
+		dijit.form.Spinner (partial) (TODO: create NumberSpinner.css file like claro has)
+ *****/
+
 .soria .dijitButtonNode {
-	
+	/* enabled state - inner */
 	border: 1px solid #8ba0bd;
 	border-bottom:1px solid #657c9c;
 	padding: 0.1em 0.2em 0.2em 0.2em;
@@ -9,16 +17,20 @@
 .soria .dijitSelect .dijitButtonContents {
 	border-right: none;
 }
+
 .soria .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+
 .soria .dijitArrowButton {
 	color: #111;
 }
+
 .soria .dijitComboButton .dijitDownArrowButton {
 	padding-right:4px;
 }
+
 .soria .dijitTextBoxReadOnly,
 .soria .dijitTextBoxReadOnly .dijitButtonNode,
 .soria .dijitButtonDisabled .dijitButtonNode,
@@ -27,7 +39,7 @@
 .soria .dijitComboButtonDisabled .dijitButtonNode,
 .soria .dijitTextBoxDisabled,
 .soria .dijitTextBoxDisabled .dijitButtonNode {
-	
+	/* disabled state - inner */
 	border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
 	background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
 	opacity: 0.60;
@@ -36,7 +48,7 @@
 .dj_ie7 .soria .dijitReadOnly INPUT,
 .dj_ie6 .soria .dijitComboButtonDisabled .dijitButtonText,
 .dj_ie7 .soria .dijitComboButtonDisabled .dijitButtonText {
-	
+	/* opacity doesn't work on table node in IE, work around here */
 	color: #aaa;
 }
 .soria .dijitButtonHover .dijitButtonNode,
@@ -46,29 +58,34 @@
 .soria .dijitButtonContentsHover,
 .soria .dijitUpArrowButtonHover,
 .soria .dijitDownArrowButtonHover {
-	
-	
+	/* hover state - inner */
+	/* TODO: change from Hover to Selected so that button is still highlighted while drop down is being used */
 	color:#243C5F;
 	background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
 }
+
 .soria .dijitButtonActive .dijitButtonNode,
 .soria .dijitToggleButtonActive .dijitButtonNode,
 .soria .dijitDropDownButtonActive .dijitButtonNode,
 .soria .dijitComboButtonActive .dijitButtonContents,
 .soria .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
+	/* active state - inner (for when you are pressing a normal button, or
+	 * when a radio-type button is in a depressed state
+	 */
 	border-color:#657c9c;
 	background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
 }
 .soria .dijitUpArrowButtonActive,
 .soria .dijitDownArrowButtonActive {
-	
+	/* same as above except don't adjust border color (it's controlled by the containing Spinner/ComboBox) */
 	background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
 }
+
+
 .soria .dijitArrowButtonInner {
 	background-image: url("../images/spriteArrows.png");
 	background-repeat: no-repeat;
-	background-position: 0px center;
+	background-position: 0 center;
 	width: 11px;
 	height: 11px;
 }
@@ -88,7 +105,7 @@
 	background-image: url("../images/spriteArrows.gif");
 }
 .dj_ie .soria .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: 1px; 
+	margin-top: 1px; /* image has too many blank pixels on top */
 }
 .soria .dijitSpinnerButtonContainer {
 	width: auto;
diff --git a/lib/dijit/themes/soria/form/Button_rtl.css b/lib/dijit/themes/soria/form/Button_rtl.css
index 50a5c5e0b..e2f3728f3 100644
--- a/lib/dijit/themes/soria/form/Button_rtl.css
+++ b/lib/dijit/themes/soria/form/Button_rtl.css
@@ -1,5 +1,5 @@
 .dijitRtl .soria .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
+	border-width: 0 0 0 1px;
 }
 .dijitRtl .soria .dijitSelect .dijitButtonContents {
 	border-left: none;
diff --git a/lib/dijit/themes/soria/form/Checkbox.css b/lib/dijit/themes/soria/form/Checkbox.css
index 8227dcb74..5a72bfc06 100644
--- a/lib/dijit/themes/soria/form/Checkbox.css
+++ b/lib/dijit/themes/soria/form/Checkbox.css
@@ -1,40 +1,67 @@
 
+/*
+ *  CheckBox and Radio Widgets,
+ *	and the CSS to embed a checkbox or radio icon inside a ToggleButton.
+ *
+ *	Order of images in the default sprite (from L to R, checkbox and radio in same image):
+ *		checkbox	normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+ *
+ *		radio		normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+*/
+
 .soria .dijitToggleButton .dijitCheckBox,
 .soria .dijitToggleButton .dijitCheckBoxIcon {
 	background-image: url('../images/spriteCheckbox.gif');
 }
+
 .soria .dijitCheckBox,
-.soria .dijitCheckBoxIcon {		
-	background-image: url('../images/spriteCheckbox.gif'); 
+.soria .dijitCheckBoxIcon {		/* inside a toggle button */
+	background-image: url('../images/spriteCheckbox.gif'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
 	margin: 0;
 	padding: 0;
 }
+
 .soria .dijitCheckBox,
 .soria .dijitToggleButton .dijitCheckBoxIcon {
-	
+	/* unchecked */
 	background-position: -16px;
 }
+
 .soria .dijitCheckBoxChecked,
 .soria .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
+	/* checked */
+	background-position: 0;
 }
+
 .soria .dijitCheckBoxDisabled {
-	
+	/* disabled */
 	background-position: -48px;
 }
+
 .soria .dijitCheckBoxCheckedDisabled {
-	
+	/* disabled but checked */
 	background-position: -32px;
 }
+
 .soria .dijitCheckBoxHover {
-	
+	/* hovering over an unchecked enabled checkbox */
 	background-position: -80px;
 }
+
 .soria .dijitCheckBoxCheckedHover {
-	
+	/* hovering over a checked enabled checkbox */
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/form/Common.css b/lib/dijit/themes/soria/form/Common.css
index 0fe92d2a1..8e3688e82 100644
--- a/lib/dijit/themes/soria/form/Common.css
+++ b/lib/dijit/themes/soria/form/Common.css
@@ -1,25 +1,42 @@
 
+/****
+		dijit.form.TextBox
+		dijit.form.ValidationTextBox
+		dijit.form.SerializableTextBox
+		dijit.form.RangeBoundTextBox
+		dijit.form.NumberTextBox
+		dijit.form.CurrencyTextBox
+		dijit.form.NumberSpinner
+		dijit.form.ComboBox (partial)
+ ****/
+
 .soria .dijitInputContainer INPUT,
 .soria .dijitTextBox {
-	margin: 0em 0.1em;
+	margin: 0 0.1em;
 }
+
 .soria .dijitTextBox,
 .soria .dijitTextArea {
-	
+	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
+		For TextBox, ComboBox, Spinner: the table that contains the input.
+		Otherwise the actual input element.
+	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
 	border:1px solid #8ba0bd;
 }
+
 .soria .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
 .soria .dijitTextBox .dijitButtonNode {
-	
+	/* line between the input area and the drop down button */
 	border-color: #8ba0bd;
 }
+
 .soria .dijitTextBoxFocused,
 .soria .dijitTextAreaFocused {
-	
+	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
 .soria .dijitTextBoxFocused .dijitButtonNode,
@@ -32,20 +49,26 @@
 .soria .dijitSpinner .dijitDownArrowButtonActive {
 	border-top-color:#8ba0bd;
 }
+
 .soria .dijitError {
 	border-color:#f3d118;
 	background-color:#f9f7ba;
 	background-image:none;
 }
+
 .soria .dijitErrorFocused {
 	background-color:#ff6;
 	background-image:none;
 }
+
+/* Validation errors  */
 .soria .dijitValidationIcon {
-	
+	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
 }
+
+/* The highlight is shown in the ComboBox menu. */
 .soria .dijitComboBoxHighlightMatch {
 	background-color:#f9f7ba;
 }
diff --git a/lib/dijit/themes/soria/form/RadioButton.css b/lib/dijit/themes/soria/form/RadioButton.css
index 543694e28..1ea27bf65 100644
--- a/lib/dijit/themes/soria/form/RadioButton.css
+++ b/lib/dijit/themes/soria/form/RadioButton.css
@@ -1,40 +1,66 @@
+/*
+ *  CheckBox and Radio Widgets,
+ *	and the CSS to embed a checkbox or radio icon inside a ToggleButton.
+ *
+ *	Order of images in the default sprite (from L to R, checkbox and radio in same image):
+ *		checkbox	normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+ *
+ *		radio		normal 	 - checked
+ *							 - unchecked
+ *					disabled - checked
+ *							 - unchecked
+ *					hover 	 - checked
+ *							 - unchecked
+*/
 
 .soria .dijitToggleButton .dijitRadio,
 .soria .dijitToggleButton .dijitRadioIcon {
 	background-image: url('../images/spriteRadio.gif');
 }
+
 .soria .dijitRadio,
-.soria .dijitRadioIcon	{		
-	background-image: url('../images/spriteRadio.gif'); 
+.soria .dijitRadioIcon	{		/* inside a toggle button */
+	background-image: url('../images/spriteRadio.gif'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
 	margin: 0;
 	padding: 0;
 }
+
 .soria .dijitRadio,
 .soria .dijitToggleButton .dijitRadioIcon {
-	
+	/* unselected */
 	background-position: -16px;
 }
+
 .soria .dijitRadioChecked,
 .soria .dijitToggleButtonChecked .dijitRadioIcon {
-	
-	background-position: 0px;
+	/* selected */
+	background-position: 0;
 }
+
 .soria .dijitRadioDisabled {
-	
+	/* unselected and disabled */
 	background-position: -48px;
 }
+
 .soria .dijitRadioCheckedDisabled {
-	
+	/* selected but disabled */
 	background-position: -32px;
 }
+
 .soria .dijitRadioHover {
-	
+	/* hovering over an unselected enabled radio button */
 	background-position: -80px;
 }
+
 .soria .dijitRadioCheckedHover {
-	
+	/* hovering over a selected enabled radio button */
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/form/Select.css b/lib/dijit/themes/soria/form/Select.css
index eb85ceaeb..18567720e 100644
--- a/lib/dijit/themes/soria/form/Select.css
+++ b/lib/dijit/themes/soria/form/Select.css
@@ -1,6 +1,8 @@
 .soria .dijitSelect .dijitButtonNode {
-	padding: 0px;
+	padding: 0;
 }
+
+/* Make unselected "look" more like a text box and less like a button */
 .soria .dijitSelect .dijitButtonContents {
 	padding-top: 1px;
     background:#fff url("../images/validationInputBg.png") repeat-x top left;
@@ -14,11 +16,14 @@
 	background: transparent none;
 }
 .dj_ie .soria .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
+	padding-top: 0;
 }
+
 .soria .dijitSelect .dijitArrowButton {
-	padding: 0px 2px;
+	padding: 0 2px;
 }
+
+/* Mirror DropDownButton */
 .soria .dijitSelectDisabled .dijitButtonNode {
     border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
     background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
@@ -26,19 +31,24 @@
 .dj_ie .soria .dijitSelectDisabled  .dijitButtonNode * {
 	filter: gray() alpha(opacity=50);
 }
+
 .soria .dijitSelectHover .dijitButtonNode {
     color:#000;
     background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
 }
+
 .soria .dijitSelectActive .dijitButtonNode,
 .soria .dijitSelectOpened .dijitButtonNode {
     border-color:#657c9c;
     background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
 }
+
+/* Make the menu look more combobox-like */
 .soria .dijitSelectMenu td {
-	padding: 0em;
+	padding: 0;
 }
 .soria .dijitSelectMenu .dijitMenuItemLabel,
 .soria .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
+
diff --git a/lib/dijit/themes/soria/form/Slider.css b/lib/dijit/themes/soria/form/Slider.css
index 72e48b678..3a68f4631 100644
--- a/lib/dijit/themes/soria/form/Slider.css
+++ b/lib/dijit/themes/soria/form/Slider.css
@@ -1,38 +1,49 @@
 
+/****
+ 	SLIDER
+****/
+
 .soria .dijitSliderProgressBarH {
 	border-color: #b1badf;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .soria .dijitSliderProgressBarV {
 	border-color: #b1badf;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .soria .dijitSliderFocused .dijitSliderProgressBarH,
 .soria .dijitSliderFocused .dijitSliderLeftBumper {
 	background-image:url("../images/sliderFullFocus.png");
 }
+
 .soria .dijitSliderFocused .dijitSliderProgressBarV,
 .soria .dijitSliderFocused .dijitSliderBottomBumper {
 	background-image:url("../images/sliderFullVerticalFocus.png");
 }
+
 .soria .dijitSliderRemainingBarV {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y bottom left;
 }
+
 .soria .dijitSliderRemainingBarH {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 }
+
 .soria .dijitSliderBar {
 	border-style: solid;
 	outline:1px;
-	
+	/* border-color: #b4b4b4; */
 }
 .soria .dijitSliderFocused .dijitSliderBar {
 	border-color:#8ba0bd;
 }
+
 .soria .dijitSliderImageHandleH {
-	border:0px;
+	border:0;
 	width:15px;
 	height:18px;
 	background:url("../images/preciseSliderThumb.png") no-repeat center top;
@@ -41,40 +52,48 @@
 	background-image:url("../images/preciseSliderThumbFocus.png");
 	#background-image:url("../images/preciseSliderThumbFocus.gif");
 }
+
 .dj_ie6 .soria .dijitSliderImageHandleH {
 	background-image:url("../images/preciseSliderThumb.gif");
 }
+
 .soria .dijitSliderLeftBumper {
 	border-left-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .soria .dijitSliderRightBumper {
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 	border-color: #b4b4b4;
 	border-right-width: 1px;
 }
+
 .soria .dijitSliderImageHandleV {
-	border:0px;
+	border:0;
 	width:20px;
 	height:15px;
 	background:url("../images/sliderThumb.png") no-repeat center center;
 	#background:url("../images/sliderThumb.gif") no-repeat center center;
 }
+
 .soria .dijitSliderFocused .dijitSliderImageHandleV {
 	background-image:url("../images/sliderThumbFocus.png");
 	#background-image:url("../images/sliderThumbFocus.gif");
 }
+
 .soria .dijitSliderBottomBumper {
 	border-bottom-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .soria .dijitSliderTopBumper {
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y top left;
 	border-color: #b4b4b4;
 	border-top-width: 1px;
 }
+
 .soria .dijitSliderIncrementIconH,
 .soria .dijitSliderIncrementIconV {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -45px top;
@@ -85,6 +104,7 @@
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -30px top;
 }
+
 .soria .dijitSliderDecrementIconH,
 .soria .dijitSliderDecrementIconV {
 	width:15px;
@@ -93,12 +113,14 @@
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -15px top;
 }
 .soria .dijitSliderDecrementIconH {
-	background:url('../images/spriteRoundedIconsSmall.png') no-repeat 0px top;
-	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat 0px top;
+	background:url('../images/spriteRoundedIconsSmall.png') no-repeat 0 top;
+	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat 0 top;
 }
+
 .soria .dijitSliderButtonInner {
 	visibility:hidden;
 }
+
 .soria .dijitSliderReadOnly *,
 .soria .dijitSliderDisabled * {
 	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
@@ -106,7 +128,7 @@
 }
 .soria .dijitSliderReadOnly .dijitSliderDecrementIconH,
 .soria .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: 0px -15px;
+	background-position: 0 -15px;
 }
 .soria .dijitSliderReadOnly .dijitSliderIncrementIconH,
 .soria .dijitSliderDisabled .dijitSliderIncrementIconH {
@@ -119,4 +141,4 @@
 .soria .dijitSliderReadOnly .dijitSliderIncrementIconV,
 .soria .dijitSliderDisabled .dijitSliderIncrementIconV {
 	background-position: -45px -15px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/form/Slider_rtl.css b/lib/dijit/themes/soria/form/Slider_rtl.css
index c1d8de322..d9b67c504 100644
--- a/lib/dijit/themes/soria/form/Slider_rtl.css
+++ b/lib/dijit/themes/soria/form/Slider_rtl.css
@@ -1,4 +1,6 @@
 
+/* Slider */
+
 .dijitRtl .soria .dijitSliderProgressBarH,
 .dijitRtl .soria .dijitSliderRemainingBarH,
 .dijitRtl .soria .dijitSliderLeftBumper,
@@ -6,23 +8,28 @@
 .dijitRtl .soria .dijitSliderTopBumper {
 	background-position: top right;
 }
+
 .dijitRtl .soria .dijitSliderProgressBarV,
 .dijitRtl .soria .dijitSliderRemainingBarV,
 .dijitRtl .soria .dijitSliderBottomBumper {
 	background-position: bottom right;
 }
+
 .dijitRtl .soria .dijitSliderLeftBumper {
-	border-left-width: 0px;
+	border-left-width: 0;
 	border-right-width: 1px;
 }
+
 .dijitRtl .soria .dijitSliderRightBumper {
 	border-left-width: 1px;
-	border-right-width: 0px;
+	border-right-width: 0;
 }
+
 .dijitRtl .soria .dijitSliderIncrementIconH {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat left top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat left top;
 }
+
 .dijitRtl .soria .dijitSliderDecrementIconH {
 	background:url('../images/spriteRoundedIconsSmall.png') no-repeat -30px top;
 	#background:url('../images/spriteRoundedIconsSmall.gif') no-repeat -30px top;
diff --git a/lib/dijit/themes/soria/form/TimeTextBox.css b/lib/dijit/themes/soria/form/TimeTextBox.css
index d450925b4..bf67b66d0 100644
--- a/lib/dijit/themes/soria/form/TimeTextBox.css
+++ b/lib/dijit/themes/soria/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
+@CHARSET "UTF-8";
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/AccordionContainer.css b/lib/dijit/themes/soria/layout/AccordionContainer.css
index b65187f6b..3e2d22d57 100644
--- a/lib/dijit/themes/soria/layout/AccordionContainer.css
+++ b/lib/dijit/themes/soria/layout/AccordionContainer.css
@@ -1,8 +1,15 @@
+/**
+ * dijit.layout.Accordioncontainer
+ *
+ */
 
 .soria .dijitAccordionContainer {
 	border-color: #b1badf;
 	background-color: #fff;
 }
+
+/* common */
+
 .soria .dijitAccordionTitle {
 	background:#fafafa url("../images/titleBar.png") repeat-x top left;
 	border-top: 1px solid #b9bbdd;
@@ -11,6 +18,7 @@
 	font-weight: bold;
 	color: #373941;
 }
+
 .soria .dijitAccordionTitleSelected  {
 	background: #f9f9f9 url("../images/accordionItemActive.png") top repeat-x;
 	font-weight: bold;
@@ -19,17 +27,20 @@
 	padding: 5px 4px 5px 8px;
 	color: #243C5F;
 }
+
 .soria .dijitAccordionArrow {
 	background:url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -30px top;
 	width:15px;
 	height:15px;
 	margin-top:-1px;
 }
+
 .soria .dijitAccordionTitleSelected .dijitAccordionArrow {
 	background:url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -15px top;
 	margin-top:-1px;
 }
+
 .soria .dijitAccordionText {
 	margin-left: 4px;
 	margin-right: 4px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/AccordionContainer_rtl.css b/lib/dijit/themes/soria/layout/AccordionContainer_rtl.css
index c9f07e067..c6bb820f3 100644
--- a/lib/dijit/themes/soria/layout/AccordionContainer_rtl.css
+++ b/lib/dijit/themes/soria/layout/AccordionContainer_rtl.css
@@ -1,7 +1,8 @@
 .dijitRtl .soria .dijitAccordionArrow {
-	background-position: 0px top;
+	background-position: 0 top;
 }
+
 .dijitRtl .soria .dijitAccordionTitleSelected .dijitAccordionArrow {
-	
+	/* same rule as LTR mode, just listed to override previous rule in this file */
 	background-position: -15px top;
 }
diff --git a/lib/dijit/themes/soria/layout/BorderContainer.css b/lib/dijit/themes/soria/layout/BorderContainer.css
index aec147ae6..63f2bf365 100644
--- a/lib/dijit/themes/soria/layout/BorderContainer.css
+++ b/lib/dijit/themes/soria/layout/BorderContainer.css
@@ -1,53 +1,71 @@
+/**
+ * dijit.layout.BorderContainer
+ *
+ */
 
 .soria .dijitBorderContainer {
 	background-color: #e1ebfb;
 	padding: 5px;
 }
+
 .soria .dijitSplitContainer-child,
 .soria .dijitBorderContainer-child {
-	
+	/* By default put borders on all children of BorderContainer,
+	 *  to give illusion of borders on the splitters themselves.
+	 */
 	border: 1px #b1badf solid;
 }
+
 .soria .dijitBorderContainer-dijitTabContainerTop,
 .soria .dijitBorderContainer-dijitTabContainerBottom,
 .soria .dijitBorderContainer-dijitTabContainerLeft,
 .soria .dijitBorderContainer-dijitTabContainerRight {
-	
+	/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+	 * so no border on domNode
+	 */
 	 border: none;
 }
+
 .soria .dijitBorderContainer-dijitBorderContainer {
-	
+	/* also, make nested BorderContainers look like a single big widget with lots of splitters */
 	border: none;
-	padding: 0px;
+	padding: 0;
 }
+
+
 .soria .dijitSplitterH,
 .soria .dijitGutterH {
 	background: #E1EBFB;
 	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
+	border-left:0 solid #d3d3d3;
+	border-right:0 solid #d3d3d3;
 	height:5px;
 }
+
 .soria .dijitSplitterH .dijitSplitterThumb {
 	background:#B0B0B0 none;
 	height:1px;
 	top:2px;
 	width:19px;
 }
+
 .soria .dijitSplitterV,
 .soria .dijitGutterV {
 	background: #E1EBFB;
 	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
+	border-top:0 solid #d3d3d3;
+	border-bottom:0 solid #d3d3d3;
 	width:5px;
 }
+
 .soria .dijitSplitterV .dijitSplitterThumb {
 	background:#B0B0B0 none;
 	height:19px;
 	left:2px;
 	width:1px;
 }
+
+/* active splitter */
 .soria .dijitSplitterActive {
 	font-size: 1px;
 	background-image: none;
@@ -56,4 +74,4 @@
 	opacity: 0.6;
 	filter: Alpha(Opacity=60);
 	margin: 0;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/ContentPane.css b/lib/dijit/themes/soria/layout/ContentPane.css
index 9308d50ee..32398dc08 100644
--- a/lib/dijit/themes/soria/layout/ContentPane.css
+++ b/lib/dijit/themes/soria/layout/ContentPane.css
@@ -1,7 +1,10 @@
+/* ContentPane */
 
 .soria .dijitContentPane {
-    padding: 0px;
+    padding: 0;
 }
+
+/* nested layouts */
 .soria .dijitTabContainerTop-dijitContentPane,
 .soria .dijitTabContainerLeft-dijitContentPane,
 .soria .dijitTabContainerBottom-dijitContentPane,
@@ -10,8 +13,9 @@
     background-color: #fff;
     padding: 5px;
 }
+
 .soria .dijitSplitContainer-dijitContentPane,
 .soria .dijitBorderContainer-dijitContentPane {
-    background-color: #fff;		
+    background-color: #fff;		/* override background-color setting on parent .dijitBorderContainer */
     padding: 5px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/SplitContainer.css b/lib/dijit/themes/soria/layout/SplitContainer.css
index 87f065752..bf7ca1625 100644
--- a/lib/dijit/themes/soria/layout/SplitContainer.css
+++ b/lib/dijit/themes/soria/layout/SplitContainer.css
@@ -1,27 +1,34 @@
+/**
+ * dijit.layout.SplitContainer
+ *
+ */
 
 .soria .dijitSplitContainerSizerH {
 	background:url("../images/splitContainerSizerV.png") repeat-y #cddef4;
 	border:0;
-	border-left:0px solid #436496;
-	border-right:0px solid #436496;
+	border-left:0 solid #436496;
+	border-right:0 solid #436496;
 	width:5px;
 }
+
 .soria .dijitSplitContainerSizerH .thumb {
 	background:url("../images/splitContainerSizerV-thumb.png") no-repeat #ccc;
 	left:1px;
 	width:2px;
 	height:19px;
 }
+
 .soria .dijitSplitContainerSizerV {
 	background:url("../images/splitContainerSizerH.png") repeat-x #cddef4;
 	border:0;
-	border-top:0px solid #436496;
-	border-bottom:0px solid #436496;
+	border-top:0 solid #436496;
+	border-bottom:0 solid #436496;
 	height:2px;
 }
+
 .soria .dijitSplitContainerSizerV .thumb {
 	background:url("../images/splitContainerSizerH-thumb.png") no-repeat #ccc;
 	top:1px;
 	width:19px;
 	height:5px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/TabContainer.css b/lib/dijit/themes/soria/layout/TabContainer.css
index 0cf156dec..b96d16955 100644
--- a/lib/dijit/themes/soria/layout/TabContainer.css
+++ b/lib/dijit/themes/soria/layout/TabContainer.css
@@ -1,3 +1,12 @@
+/**
+ * dijit.layout.TabContainer
+ *
+ * To style TabContainer with rounded corners
+ * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
+ * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
+ */
+
+/* Classes for all types of tabs (top/bottom/left/right) */
 
  .soria .dijitTabContainer .tabStripRBtn {
 	margin-right: 21px;
@@ -5,63 +14,84 @@
  .soria .dijitTabContainer .tabStripLBtn {
 	margin-left: 21px;
 }
+
  .soria .nowrapTabStrip .dijitTab {
 	top: 2px;
 }
+
  .soria .dijitTabContainerBottom-tabs .dijitTab {
 	top: -1px;
 	bottom: 2px;
 }
+
+/* Tabs, shared classes */
 .soria .dijitTabPaneWrapper {
 	background:#fff;
 	border:1px solid #B1BADF;
 	margin: 0;
-	padding-left: 0px;
+	padding-left: 0;
 }
+
 .soria .dijitTabInnerDiv {
-	padding:0px 3px 0px 0px;
+	padding:0 3px 0 0;
 	margin: 0 0 0 4px;
 	background: url("../images/tabContainerSprite.gif") no-repeat;
 	background-position: right -400px;
 }
+
 .soria .dijitTab {
 	line-height:normal;
-	margin:0 2px 0 0;	
-	padding:0px;
+	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
+	padding:0;
 	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
 	color: #243C5F;
 	border-bottom: 1px #B1BADF solid;
 }
+
 .soria .dijitTabInnerDiv .dijitTabContent {
 	padding:4px 3px 2px 4px;
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
 	position: relative;
 }
+
+
+
 .soria .dijitTabListWrapper {
 	z-index: 10;
 }
+
+/* hovered tab */
 .soria .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px;
+	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
 }
+
 .soria .dijitTabHover .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
 }
+
 .soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
 }
+
+/* checked tab*/
 .soria .dijitTabChecked
 {
-	
-	background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px;
+	/* the selected tab (with or without hover) */
+	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
 }
+
 .soria .dijitTabChecked .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
 }
+
 .soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
 	color: #243C5F !important;
 }
+
+/* Nested Tabs */
+
 .soria .dijitTabContainerTabListNested {
 	background: #F0F4FC;
 	background: #D9E9F9;
@@ -70,7 +100,7 @@
 .soria .dijitTabContainerTabListNested .dijitTab {
 	background: none;
 	border: none;
-	top: 0px;	
+	top: 0;	/* override top:1px setting of top-level tabs */
 }
 .soria .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
 .soria .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
@@ -84,12 +114,15 @@
 	font-weight: bold;
 }
 .soria .dijitTabContainerSpacerNested .dijitTabSpacer {
-	
-	height: 0px;
+	/* thinner line between tab (labels) and content */
+	height: 0;
 }
 .soria .dijitTabPaneWrapperNested {
-	border: none;	
+	border: none;	/* prevent double border */
 }
+
+
+/* Close Button */
 .soria .dijitTabCloseButton {
 	width: 15px;
 	height: 15px;
@@ -99,146 +132,192 @@
 .dj_ie6 .soria .dijitTabCloseButton {
 	background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
 }
+
 .soria .dijitTabCloseButtonHover {
 	background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px -15px;
 }
 .dj_ie6 .soria .dijitTabCloseButtonHover {
 	background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px -15px;
 }
-.soria .dijitTab .tabLabel {
-	
-	min-height: 15px;
-	display: inline-block;
-}
-.dj_ie6 .soria .dijitTabButtonIcon {
-	
-	height: 18px;
-	width: 1px;
-}
+
+/* ================================ */
+/* top tabs */
 .soria .dijitTabContainerTop-tabs {
 	border-color: #B1BADF;
 	padding-left: 3px;
 }
+
 .soria .dijitTabContainerTopNoStrip {
 	padding-top: 3px;
 }
+
+/* top container */
 .soria .dijitTabContainerTop-container {
 	border-top: none;
 }
+
 .soria .dijitTabContainerTop .dijitTabListWrapper {
 	border-bottom: none;
 }
+
+/*non-checked tabs */
 .soria .dijitTabContainerTop-tabs .dijitTab {
 	top: 1px;
 }
+
+/* checked tabs */
 .soria .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #94b4e6;
 }
+
+/* strip */
 .soria .dijitTabContainerTopStrip {
 	border: 1px solid #B1BADF;
 	margin-top: 1px;
 	padding-top: 1px;
 	background: #F0F4FC;
 }
+
 .soria .dijitTabContainerTopStrip .dijitTabContainerTop-tabs {
 	padding-left: 3px;
 }
+
+
 .soria .dijitTabContainerNested .dijitTabListWrapper {
 	height: auto;
 }
+
+/* ================================ */
+/* bottom tabs */
 .soria .dijitTabContainerBottom-tabs {
 	margin-top: -1px;
 	padding-left: 3px;
 	border-top: 1px solid #B1BADF;
 }
+
 .soria .dijitTabContainerBottom .dijitTabListWrapper {
 	border-top: none;
 	padding-top: 1px;
 	padding-bottom: 1px;
 	float: left;
 }
+
+/* bottom container */
 .soria .dijitTabContainerBottom-container {
 	border-bottom: none;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTab {
 	border-bottom: none;
 	border-top: 1px solid #B1BADF;
 	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
 }
+
+/* checked tabs */
 .soria .dijitTabContainerBottom-tabs .dijitTabChecked {
 	border-top-color:#94b4e6;
 }
+
+
 .soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
 	padding-top: 3px;
 	padding-bottom: 3px;
 	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
 	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabHover {
 	color: #243C5F;
 	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
 	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	
+	/* the selected tab (with or without hover) */
 	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
 	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
 }
+
 .soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
+
+/* strip */
 .soria .dijitTabContainerBottomStrip {
 	padding-bottom: 2px;
 	border: 1px solid #B1BADF;
 }
+
 .soria .dijitTabContainerBottomStrip {
 	background: #F0F4FC;
 }
+
+/* top/bottom strip */
 .soria .dijitTabContainerBottom-spacer,
 .soria .dijitTabContainerTop-spacer {
 	height: 2px;
 	border: 1px solid #8ba0bd;
 	background: #94b4e6;
 }
+
 .soria .dijitTabContainerTop-spacer {
 	border-top: none;
 }
+
 .soria .dijitTabContainerBottom-spacer {
 	border-bottom: none;
 }
+
+/* ================================ */
+/* right tabs */
 .soria .dijitTabContainerRight-tabs {
 	height: 100%;
 	border-color: #ccc;
 	padding-top: 3px;
 }
+
+/* right container */
 .soria .dijitTabContainerRight-container {
 	border-right: none;
 }
+
 .soria .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: none;
 	border-left: 1px solid #B1BADF;
 	border-bottom: 1px solid #B1BADF !important;
 }
+
+
+/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 .dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv,
 .dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
+
+/* checked tabs */
 .soria .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color: #94b4e6;
 }
+
 .soria .dijitTabContainerRight-tabs .dijitTabChecked {
 	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
 }
+
+/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
 .dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
@@ -246,33 +325,45 @@
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
+
 .soria .dijitTabContainerRight-tabs .dijitTab {
 	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
 }
 .soria .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
 	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
 }
+
+/* strip */
 .soria .dijitTabContainerRightStrip {
 	padding-right: 2px;
 	border: 1px solid #B1BADF;
 	background: #F0F4FC;
 	border-left: none;
 }
+
+/* ================================ */
+/* left tabs */
 .soria .dijitTabContainerLeft-tabs {
 	border-color: #ccc;
 	padding-top: 3px;
 	height: 100%;
 }
+
+/* left conatiner */
 .soria .dijitTabContainerLeft-container {
 	border-left: none;
 }
+
 .soria .dijitTabContainerLeft-tabs .dijitTab {
 	border-right: 1px solid #B1BADF;
 	border-bottom: 1px solid #B1BADF;
 }
+
+/* checked tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #94b4e6;
 }
+
 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
 }
@@ -283,11 +374,13 @@
 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
 	background: url("../images/tabLeftChecked.gif") no-repeat right top;
 }
+
 .dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
 .dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
+
 .dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
 .dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
@@ -295,78 +388,105 @@
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
+
+/* strip */
 .soria .dijitTabContainerLeftStrip {
 	padding-left: 2px;
 	border: 1px solid #B1BADF;
 	background: #F0F4FC;
 	border-right: none;
 }
+
+/* ================================ */
+/* left/right tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTab,
 .soria .dijitTabContainerRight-tabs .dijitTab {
 	margin-right:auto;
-	margin-bottom:2px;	
+	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
 }
+
+/* left/right tabstrip */
 .soria .dijitTabContainerLeft-spacer,
 .soria .dijitTabContainerRight-spacer {
 	width: 2px;
 	border: 1px solid #8ba0bd;
 	background: #94b4e6;
 }
+
 .soria .dijitTabContainerLeft-spacer {
 	border-left: none;
 }
 .soria .dijitTabContainerRight-spacer {
 	border-right: none;
 }
+/* ================================ */
+
+/* this resets the tabcontainer stripe when within a contentpane */
 .soria .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
+	border-left: 0 solid #ccc;
+	border-top: 0 solid #ccc;
+	border-right: 0 solid #ccc;
+	padding-top: 0;
+	padding-left: 0;
 }
+
+
+/* ================================ */
+
+/* Menu and slider control styles */
 .soria .dijitTabContainer .tabStripButton {
 	margin-right: 0;
 }
 .soria .dijitTabContainer .tabStripButton-top {
 	margin-top: 1px;
 }
+
 .soria .tabStripButton .dijitTabContent{
 	padding: 6px 0 5px 0;
 }
+
 .dj_ie6 .soria .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStripButton .dijitTabContent {
 	padding-top: 7px;
 }
+
 .soria .tabStrip-disabled .tabStripButton .dijitTabContent {
 	padding: 5px 0 3px 0;
 }
+
 .dj_ie6 .soria .tabStrip-disabled .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStrip-disabled .tabStripButton .dijitTabContent {
 	padding-top: 6px;
 }
+
 .soria .dijitTabContainer .tabStripButton-bottom {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
 	border-bottom: medium none;
 	border-top: 1px solid #B1BADF;
 }
+
 .soria .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 }
+
 .soria .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
 	background: transparent;
 }
+
 .soria .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
 	background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top ;
 }
+
 .dj_ie6 .soria .dijitTabStripIcon {
 	background-image: url(../images/spriteRoundedIconsSmall.gif);
 }
+
 .soria .dijitTabStripSlideRightIcon {
 	background-position: -30px top;
 }
+
 .soria .dijitTabStripMenuIcon {
 	background-position: -15px top;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/layout/TabContainer_rtl.css b/lib/dijit/themes/soria/layout/TabContainer_rtl.css
index 863849813..eba3963b9 100644
--- a/lib/dijit/themes/soria/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/soria/layout/TabContainer_rtl.css
@@ -1,10 +1,13 @@
 .dijitRtl .soria .dijitTab {
 	margin-right:0;
-	margin-left:2px;		
+	margin-left:2px;		/* space between one tab and the next in top/bottom mode */
 }
+
+/* tab strips */
 .dijitRtl .soria .dijitTabContainer .tabStripButton {
 	margin-left: 0;
 }
+
 .dijitRtl .soria .dijitTabContainerTopStrip,
 .dijitRtl .soria .dijitTabContainerBottomStrip,
 .dijitRtl .soria .dijitTabContainerTop-tabs,
@@ -12,23 +15,29 @@
 	padding-left: 0;
 	padding-right: 3px;
 }
+
 .dijitRtl .soria .dijitTabInnerDiv {
 	padding-left: 3px;
 	padding-right: 4px;
 }
+
 .dijitRtl .soria .dijitTabPaneWrapper {
 	#zoom: 1;
 }
+
 .dj_ie-rtl .soria .dijitTabContainerLeft-tabs {
-	margin-left: 0px !important;
+	margin-left: 0 !important;
 }
+
 .dj_ie-rtl .soria .dijitTabContainerRight-tabs {
-	margin-right: 0px !important;
+	margin-right: 0 !important;
 }
+
 .dijitRtl .soria .dijitTabContainerLeft-tabs .dijitTab,
 .dijitRtl .soria .dijitTabContainerRight-tabs .dijitTab {
-	margin-left:0px;
+	margin-left:0;
 }
+
 .dj_ie-rtl .soria .dijitTab .dijitTabInnerDiv{
 	width : 1%;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/soria.css b/lib/dijit/themes/soria/soria.css
index e7f4ac6ab..36471d03a 100644
--- a/lib/dijit/themes/soria/soria.css
+++ b/lib/dijit/themes/soria/soria.css
@@ -1,3345 +1,41 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitReset {
-	
-	margin:0;
-	border:0;
-	padding:0;
-	line-height:normal;
-	font: inherit;
-	color: inherit;
-}
-.dijit_a11y .dijitReset {
-	-moz-appearance: none; 
-}
-.dijitInline {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-	border:0;
-	padding:0;
-	vertical-align:middle;
-	#vertical-align: auto;	
-}
-.dijitHidden {
-	
-	display: none !important;
-}
-.dijitVisible {
-	
-	display: block !important;	
-	position: relative;			
-}
-.dijitInputContainer {
-	
-	#zoom: 1;
-	overflow: hidden;
-	float: none !important; 
-	position:relative;
-}
-.dj_ie INPUT.dijitTextBox,
-.dj_ie .dijitTextBox INPUT {
-	font-size: 100%;
-}
-.dijitTextBox .dijitSpinnerButtonContainer,
-.dijitTextBox .dijitArrowButtonContainer,
-.dijitTextBox .dijitValidationContainer {
-	float: right;
-	text-align: center;
-}
-.dijitTextBox INPUT.dijitInputField {
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-}
-.dijitTextBox .dijitValidationContainer {
-	display: none;
-}
-.dijitInlineTable {
-	
-	display:inline-table;
-	display:inline-block;		
-	#zoom: 1; 
-	#display:inline; 
-	box-sizing: content-box; -moz-box-sizing: content-box;
-	border:0;
-	padding:0;
-}
-.dijitTeeny {
-	font-size:1px;
-	line-height:1px;
-}
-.dijitOffScreen {
-	position: absolute;
-	visibility: hidden;
-	left: 50%;
-	top: -10000px;
-}
-.dijitPopup {
-	position: absolute;
-	background-color: transparent;
-	margin: 0;
-	border: 0;
-	padding: 0;
-}
-.dijit_a11y .dijitPopup,
-.dijit_ally .dijitPopup DIV,
-.dijit_a11y .dijitPopup TABLE,
-.dijit_a11y .dijitTooltipContainer {
-	background-color: white !important;
-}
-.dijitPositionOnly {
-	
-	padding: 0 !important;
-	border: 0 !important;
-	background-color: transparent !important;
-	background-image: none !important;
-	height: auto !important;
-	width: auto !important;
-}
-.dijitNonPositionOnly {
-	
-	float: none !important;
-	position: static !important;
-	margin: 0 0 0 0 !important;
-	vertical-align: middle !important;
-}
-.dijitBackgroundIframe {
-	
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-.dijitDisplayNone {
-	
-	display:none !important;
-}
-.dijitContainer {
-	
-	overflow: hidden;	
-}
-.dijit_a11y * {
-	background-image:none !important;
-}
-.dijit_a11y .dijitIcon,
-.dijit_a11y DIV.dijitArrowButtonInner, 
-.dijit_a11y SPAN.dijitArrowButtonInner,
-.dijit_a11y IMG.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl {
-	
-	display: none;
-}
-.dijitSpinner DIV.dijitArrowButtonInner {
-	display: block; 
-}
-.dijit_a11y .dijitA11ySideArrow {
-	display: inline !important; 
-	cursor: pointer;
-}
-.dijit_a11y .dijitCalendarDateLabel {
-	padding: 1px;
-}
-.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
-	border-style: dotted !important;
-	border-width: 1px;
-	padding: 0px;
-}
-.dijit_a11y .dijitCalendarDateTemplate {
-	padding-bottom: 0.1em !important;	
-}
-.dijit_a11y .dijit * {
-	background:white !important;
-	color:black !important;
-}
-.dijit_a11y .dijitButtonNode {
-	border-color: black!important;
-	border-style: outset!important;
-	border-width: medium!important;
-}
-.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
-.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitButtonNode * {
-	vertical-align: middle;
-}
-.dijitButtonNode .dijitArrowButtonInner {
-	
-	background: no-repeat center;
-	width: 12px;
-	height: 12px;
-	direction: ltr; 
-}
-.dijitLeft {
-	
-	background-position:left top;
-	background-repeat:no-repeat;
-}
-.dijitStretch {
-	
-	white-space:nowrap;			
-	background-repeat:repeat-x;
-}
-.dijitRight {
-	
-	#display:inline;				
-	background-position:right top;
-	background-repeat:no-repeat;
-}
-.dijitToggleButton,
-.dijitButton,
-.dijitDropDownButton,
-.dijitComboButton {
-	
-	margin: 0.2em;
-}
-.dijitButtonContents {
-	display: block;		
-}
-td.dijitButtonContents {
-	display: table-cell;	
-}
-.dijitButtonNode IMG {
-	
-	vertical-align:middle;
-	
-}
-TABLE.dijitComboButton { 
-	
-	border-collapse: collapse;
-	border:0;
-	padding:0;
-	margin:0;
-}
-.dijitToolbar .dijitComboButton {
-	
-	border-collapse: separate;
-}
-.dijitToolbar .dijitToggleButton,
-.dijitToolbar .dijitButton,
-.dijitToolbar .dijitDropDownButton,
-.dijitToolbar .dijitComboButton {
-	margin: 0;
-}
-.dijitToolbar .dijitButtonContents {
-	
-	padding: 1px 2px;
-}
-.dj_ie .dijitComboButton {
-	
-	margin-bottom: -3px;
-}
-.dj_webkit .dijitToolbar .dijitDropDownButton {
-	padding-left: 0.3em;
-}
-.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
-	padding:0;
-}
-.dijitButtonNode {
-	
-	border:1px solid gray;
-	margin:0;
-	line-height:normal;
-	vertical-align: middle;
-	#vertical-align: auto;
-	text-align:center;
-	white-space: nowrap;
-}
-.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
-	
-	line-height:inherit;
-}
-.dijitTextBox .dijitButtonNode {
-	border-width: 0;
-}
-.dijitButtonNode,
-.dijitButtonNode * {
-	cursor: pointer;
-}
-.dj_ie .dijitButtonNode {
-	
-	zoom: 1;
-}
-.dj_ie .dijitButtonNode button {
-	
-	overflow: visible;
-}
-DIV.dijitArrowButton {
-	float: right;
-}
-.dijitTextBox {
-	border: solid black 1px;
-	#overflow: hidden; 
-	width: 15em;	
-	vertical-align: middle;
-	#vertical-align: auto;
-}
-.dijitTextBoxReadOnly,
-.dijitTextBoxDisabled {
-	color: gray;
-}
-.dj_webkit .dijitTextBoxDisabled INPUT {
-	color: #eee; 
-}
-.dj_webkit TEXTAREA.dijitTextAreaDisabled {
-	color: #333; 
-}
-.dj_gecko .dijitTextBoxReadOnly INPUT,
-.dj_gecko .dijitTextBoxDisabled INPUT {
-	-moz-user-input: none; 
-}
-.dijitPlaceHolder {
-	
-	color: #AAAAAA;
-	font-style: italic;
-	position: absolute;
-	top: 0;
-	left: 0;
-	#filter: ""; 
-}
-.dijitTimeTextBox {
-	width: 8em;
-}
-.dijitTextBox INPUT:focus {
-	outline: none;	
-}
-.dijitTextBoxFocused {
-	outline: auto 5px -webkit-focus-ring-color;
-}
-.dijitTextBox INPUT {
-	float: left; 
-}
-.dijitInputInner {
-	
-	border:0 !important;
-	vertical-align:middle !important;
-	background-color:transparent !important;
-	width:100% !important;
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-}
-.dijit_a11y .dijitTextBox INPUT {
-	margin: 0 !important;
-}
-.dijitTextBoxError INPUT.dijitValidationInner,
-.dijitTextBox INPUT.dijitArrowButtonInner {
-	
-	text-indent: -1em !important;
-	direction: ltr !important;
-	text-align: left !important;
-	height: auto !important;
-	#text-indent: 0 !important;
-	#letter-spacing: -5em !important;
-	#text-align: right !important;
-}
-.dj_ie .dijitTextBox INPUT,
-.dj_ie INPUT.dijitTextBox {
-	overflow-y: visible; 
-	line-height: normal; 
-}
-.dj_ie7 .dijitTextBox INPUT.dijitValidationInner,
-.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner {
-	line-height: 86%; 
-}
-.dj_ie6 .dijitTextBox INPUT,
-.dj_ie6 INPUT.dijitTextBox,
-.dj_iequirks .dijitTextBox INPUT.dijitValidationInner,
-.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitInputInner,
-.dj_iequirks INPUT.dijitTextBox {
-	line-height: 100%; 
-}
-.dijit_a11y INPUT.dijitValidationInner,
-.dijit_a11y INPUT.dijitArrowButtonInner {
-	
-	text-indent: 0 !important;
-	width: 1em !important;
-	#text-align: left !important;
-}
-.dijitTextBoxError .dijitValidationContainer {
-	display: inline;
-	cursor: default;
-}
-.dijitSpinner .dijitSpinnerButtonContainer,
-.dijitComboBox .dijitArrowButtonContainer {
-	
-	border-width: 0 0 0 1px !important; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	
-	border-width: 0;
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	clear: both; 
-}
-.dijit_a11y .dijitTextBox .dijitValidationContainer,
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBox .dijitArrowButtonContainer {
-	
-	border: solid black !important;
-	border-width: 0 0 0 1px !important;
-}
-.dj_ie .dijitToolbar .dijitComboBox {
-	
-	vertical-align: middle;
-}
-.dijitTextBox .dijitSpinnerButtonContainer {
-	width: 1em;
-	position: relative !important;
-	overflow: hidden;
-}
-.dijitSpinner .dijitSpinnerButtonInner {
-	width:1em;
-	visibility:hidden !important; 
-	overflow-x:hidden;
-}
-.dijitComboBox .dijitButtonNode,
-.dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 0;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border: 0 none !important;
-}
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
-.dijit_a11y .dijitSpinnerButtonContainer INPUT {
-	width: 1em !important;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
-	margin: 0 auto !important; 
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.3em !important;
-	padding-right: 0.3em !important;
-	margin-left: 0.3em !important;
-	margin-right: 0.3em !important;
-	width: 1.4em !important;
-}
-.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.0em !important; 
-	padding-right: 0.0em !important;
-	width: 1em !important;
-}
-.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0.1em !important;
-	margin-right: 0.1em !important;
-	width: 1em !important;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-	width: 2em !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	
-	padding: 0;
-	position: absolute !important;
-	right: 0;
-	float: none;
-	height: 50%;
-	width: 100%;
-	bottom: auto;
-	left: 0;
-	right: auto;
-}
-.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: auto;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
-	overflow: visible !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
-	top: 50%;
-	border-top-width: 1px !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
-	#bottom: 50%;	
-	top: 0;
-}
-.dijitSpinner .dijitArrowButtonInner {
-	margin: auto;
-	overflow-x: hidden;
-	height: 100% !important;
-}
-.dj_iequirks .dijitSpinner .dijitArrowButtonInner {
-	height: auto !important;
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	-moz-transform: scale(0.5);
-	-moz-transform-origin: center top;
-	-webkit-transform: scale(0.5);
-	-webkit-transform-origin: center top;
-	-o-transform: scale(0.5);
-	-o-transform-origin: center top;
-	transform: scale(0.5);
-	transform-origin: left top;
-	padding-top: 0;
-	padding-bottom: 0;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	width: 100%;
-}
-.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	zoom: 50%; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
-	overflow: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 100%;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; 
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	visibility: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	vertical-align:top;
-	visibility: visible;
-}
-.dijit_a11y .dijitSpinnerButtonContainer {
-	width: 1em;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0px 0px 0px;
-	border-style: solid !important;
-}
-.dijitCheckBox,
-.dijitRadio,
-.dijitCheckBoxInput {
-	padding: 0;
-	border: 0;
-	width: 16px;
-	height: 16px;
-	background-position:center center;
-	background-repeat:no-repeat;
-	overflow: hidden;
-}
-.dijitCheckBox INPUT,
-.dijitRadio INPUT {
-	margin: 0;
-	padding: 0;
-	display: block;
-}
-.dijitCheckBoxInput {
-	
-	opacity: 0.01;
-}
-.dj_ie .dijitCheckBoxInput {
-	filter: alpha(opacity=0);
-}
-.dijit_a11y .dijitCheckBox,
-.dijit_a11y .dijitRadio {
-	
-	width: auto !important;
-	height: auto !important;
-}
-.dijit_a11y .dijitCheckBoxInput {
-	opacity: 1;
-	filter: none;
-	width: auto;
-	height: auto;
-}
-.dijitProgressBarEmpty {
-	
-	position:relative;overflow:hidden;
-	border:1px solid black; 	
-	z-index:0;			
-}
-.dijitProgressBarFull {
-	
-	position:absolute;
-	overflow:hidden;
-	z-index:-1;
-	top:0;
-	width:100%;
-}
-.dj_ie6 .dijitProgressBarFull {
-	height:1.6em;
-}
-.dijitProgressBarTile {
-	
-	position:absolute;
-	overflow:hidden;
-	top:0;
-	left:0;
-	bottom:0;
-	right:0;
-	margin:0;
-	padding:0;
-	width:auto;
-	height:auto;
-	background-color:#aaa;
-	background-attachment: fixed;
-}
-.dijit_a11y .dijitProgressBarTile {
-	
-	border-width:2px;
-	border-style:solid;
-	background-color:transparent !important;
-}
-.dj_ie6 .dijitProgressBarTile {
-	
-	position:static;
-	
-	height:1.6em;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarLabel {
-	visibility:hidden;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-}
-.dijitProgressBarIndeterminateHighContrastImage {
-	display:none;
-}
-.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
-	display:block;
-	position:absolute;
-	top:0;
-	bottom:0;
-	margin:0;
-	padding:0;
-	width:100%;
-	height:auto;
-}
-.dijitProgressBarLabel {
-	display:block;
-	position:static;
-	width:100%;
-	text-align:center;
-	background-color:transparent !important;
-}
-.dijitTooltip {
-	position: absolute;
-	z-index: 2000;
-	display: block;
-	
-	left: 50%;
-	top: -10000px;
-	overflow: visible;
-}
-.dijitTooltipContainer {
-	border: solid black 2px;
-	background: #b8b5b5;
-	color: black;
-	font-size: small;
-}
-.dijitTooltipFocusNode {
-	padding: 2px 2px 2px 2px;
-}
-.dijitTooltipConnector {
-	position: absolute;
-}
-.dijit_a11y .dijitTooltipConnector {
-	display: none;	
-}
-.dijitTooltipData {
-	display:none;
-}
-.dijitLayoutContainer {
-	position: relative;
-	display: block;
-	overflow: hidden;
-}
-body .dijitAlignTop,
-body .dijitAlignBottom,
-body .dijitAlignLeft,
-body .dijitAlignRight {
-	position: absolute;
-	overflow: hidden;
-}
-body .dijitAlignClient { position: absolute; }
-.dijitBorderContainer, .dijitBorderContainerNoGutter {
-	position:relative;
-	overflow: hidden;
-}
-.dijitBorderContainerPane,
-.dijitBorderContainerNoGutterPane {
-	position: absolute !important;	
-	z-index: 2;		
-}
-.dijitBorderContainer > .dijitTextArea {
-	
-	resize: none;
-}
-.dijitGutter {
-	
-	position: absolute;
-	font-size: 1px;		
-}
-.dijitSplitter {
-	position: absolute;
-	overflow: hidden;
-	z-index: 10;		
-	background-color: #fff;
-	border-color: gray;
-	border-style: solid;
-	border-width: 0;
-}
-.dj_ie .dijitSplitter {
-	z-index: 1;	
-}
-.dijitSplitterActive {
-	z-index: 11 !important;
-}
-.dijitSplitterCover {
-	position:absolute;
-	z-index:-1;
-	top:0;
-	left:0;
-	width:100%;
-	height:100%;
-}
-.dijitSplitterCoverActive {
-	z-index:3 !important;
-}
-.dj_ie .dijitSplitterCover {
-	background: white;
-	filter: alpha(opacity=0);
-}
-.dijitSplitterH {
-	height: 7px;
-	border-top:1px;
-	border-bottom:1px;
-	cursor: ns-resize;
-}
-.dijitSplitterV {
-	width: 7px;
-	border-left:1px;
-	border-right:1px;
-	cursor: ew-resize;
-}
-.dijitSplitContainer {
-	position: relative;
-	overflow: hidden;
-	display: block;
-}
-.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
-	outline-style:dotted;
-	outline-width: 2px;
-}
-.dijitSplitPane {
-	position: absolute;
-}
-.dijitSplitContainerSizerH,
-.dijitSplitContainerSizerV {
-	position:absolute;
-	font-size: 1px;
-	cursor: move;
-	cursor: w-resize;
-	background-color: ThreeDFace;
-	border: 1px solid;
-	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
-	margin: 0;
-}
-.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
-	overflow:hidden;
-	position:absolute;
-	top:49%;
-}
-.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
-	position:absolute;
-	left:49%;
-}
-.dijitSplitterShadow,
-.dijitSplitContainerVirtualSizerH,
-.dijitSplitContainerVirtualSizerV {
-	font-size: 1px;
-	background-color: ThreeDShadow;
-	-moz-opacity: 0.5;
-	opacity: 0.5;
-	filter: Alpha(Opacity=50);
-	margin: 0;
-}
-.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH {
-	cursor: w-resize;
-}
-.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
-	cursor: n-resize;
-}
-.dijit_a11y .dijitSplitterH {
-	border-top:1px solid #d3d3d3 !important;
-	border-bottom:1px solid #d3d3d3 !important;
-}
-.dijit_a11y .dijitSplitterV {
-	border-left:1px solid #d3d3d3 !important;
-	border-right:1px solid #d3d3d3 !important;
-}
-.dijitContentPane {
-	display: block;
-	overflow: auto;	
-}
-.dijitContentPaneSingleChild {
-	
-	overflow: hidden;
-}
-.dijitTitlePane {
-	display: block;
-	overflow: hidden;
-}
-.dijitTitlePaneTitle {
-	cursor: pointer;
-}
-.dijitFixedOpen {
-	
-	cursor: default;
-}
-.dijitTitlePaneTitle * {
-	vertical-align: middle;
-}
-.dijitTitlePane .dijitArrowNodeInner {
-	
-	display: none;
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
-	
-	display:inline !important;
-	font-family: monospace;		
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNode {
-	
-	display:none;
-}
-.dj_ie6 .dijitTitlePaneContentOuter,
-.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
-	
-	zoom: 1;
-}
-.dijitColorPalette {
-	border: 1px solid #999;
-	background: #fff;
-	position: relative;
-}
-img.dijitColorPaletteUnder {
-	
-	border-style: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-.dijitColorPalette .dijitPaletteTable {
-	
-	padding: 2px 3px 3px 3px;
-	position: relative;
-	overflow: hidden;
-	outline: 0;
-	border-collapse: separate;
-}
-.dj_ie6 .dijitColorPalette .dijitPaletteTable,
-.dj_ie7 .dijitColorPalette .dijitPaletteTable,
-.dj_iequirks .dijitColorPalette .dijitPaletteTable {
-	
-	padding: 0;
-	margin: 2px 3px 3px 3px;
-}
-.dijitColorPalette .dijitPaletteCell {
-	
-	height: 20px;
-	width: 20px;
-	font-size: 1px;
-	vertical-align: middle;
-	text-align: center;
-}
-.dijitColorPalette .dijitPaletteImg {
-	
-	width: 16px;
-	height: 14px;
-	border: 1px solid #999;
-	cursor: default;
-	vertical-align: middle;
-}
-.dj_iequirks .dijitColorPalette .dijitPaletteImg {
-	margin: 1px;	
-}
-.dijitPaletteTable td {
-		padding: 0px;
-}
-.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	
-	border: 1px solid #000;
-}
-.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
-.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
-	border: 2px solid #000;
-}
-.dijit_a11y .dijitColorPalette .dijitPaletteTable,
-.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
-	
-	background-color: transparent !important;
-}
-.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg {
-	border: 3px dotted #000;	
-	margin: -1px;
-}
-.dijit_a11y  .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	border: 2px solid #000 !important;
-}
-.dijitAccordionContainer {
-	border:1px solid #b7b7b7;
-	border-top:0 !important;
-}
-.dijitAccordionTitle {
-	cursor: pointer;
-}
-.dijitAccordionTitleSelected {
-	cursor: default;
-}
-.dijitAccordionTitle .arrowTextUp,
-.dijitAccordionTitle .arrowTextDown {
-	display: none;
-	font-size: 0.65em;
-	font-weight: normal !important;
-}
-.dijit_a11y .dijitAccordionTitle .arrowTextUp,
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
-	display: inline;
-}
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
-	display: none;
-}
-.dj_ie6 .dijitAccordionTitle,
-.dj_iequirks .dijitAccordionTitle {
-	
-	zoom: 1;
-}
-.dijitCalendarContainer {
-	width: auto;	
-}
-.dijitCalendarContainer th, .dijitCalendarContainer td {
-	padding: 0;
-}
-.dijitCalendarNextYear {
-	margin:0 0 0 0.55em;
-}
-.dijitCalendarPreviousYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarIncrementControl {
-	vertical-align: middle;
-}
-.dijitCalendarIncrementControl,
-.dijitCalendarDateTemplate,
-.dijitCalendarMonthLabel,
-.dijitCalendarPreviousYear,
-.dijitCalendarNextYear {
-	cursor: pointer;
-}
-.dijitCalendarDisabledDate {
-	color: gray;
-	text-decoration: line-through;
-	cursor: default;
-}
-.dijitSpacer {
-	
-  	position: relative;
-  	height: 1px;
-  	overflow: hidden;
-  	visibility: hidden;
-}
-.dijitMenu {
-	border:1px solid black;
-	background-color:white;
-}
-.dijitMenuTable {
-	border-collapse:collapse;
-	border-width:0;
-	background-color:white;
-}
-.dj_webkit .dijitMenuTable td[colspan="2"]{
-	border-right:hidden;
-}
-.dijitMenuItem {
-	text-align: left;
-	white-space: nowrap;
-	padding:.1em .2em;
-	cursor:pointer;
-}
-.dijitMenuPassive .dijitMenuItemHover,
-.dijitMenuItemSelected {
-	
-	background-color:black;
-	color:white;
-}
-.dijitMenuItemIcon, .dijitMenuExpand {
-	background-repeat: no-repeat;
-}
-.dijitMenuItemDisabled * {
-	
-	opacity:0.5;
-	cursor:default;
-}
-.dj_ie .dijit_a11y .dijitMenuItemDisabled,
-.dj_ie .dijit_a11y .dijitMenuItemDisabled td,
-.dj_ie .dijitMenuItemDisabled *,
-.dj_ie .dijitMenuItemDisabled td {
-	color:gray !important;
-	filter: alpha(opacity=35);
-}
-.dijitMenuItemLabel {
-	position: relative;
-	vertical-align: middle;
-}
-.dijit_a11y .dijitMenuItemSelected {
-	border: 1px dotted black !important;
-}
-.dj_ff3 .dijit_a11y .dijitMenuItem td {
-	padding: none !important;
-	background:none !important;
-}
-.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
-	border-width: 1px;
-	border-style: solid;
-}
-.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
-	position:static;
-}
-.dijitMenuExpandA11y {
-	display: none;
-}
-.dijit_a11y .dijitMenuExpandA11y {
-	display: inline;
-}
-.dijitMenuSeparator td {
-	border: 0;
-	padding: 0;
-}
-.dijitMenuSeparatorTop {
-	height: 50%;
-	margin: 0;
-	margin-top:3px;
-	font-size: 1px;
-}
-.dijitMenuSeparatorBottom {
-	height: 50%;
-	margin: 0;
-	margin-bottom:3px;
-	font-size: 1px;
-}
-.dijitCheckedMenuItemIconChar {
-	vertical-align: middle;
-	visibility:hidden;
-}
-.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
-	visibility: visible;
-}
-.dijit_a11y .dijitCheckedMenuItemIconChar {
-	display:inline !important;
-}
-.dijit_a11y .dijitCheckedMenuItemIcon {
-	display: none;
-}
-.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
-	
-	margin: 0px;
-}
-.dijitStackController .dijitToggleButtonChecked * {
-	cursor: default;	
-}
-.dijitTabContainerNoLayout {
-	width: 100%;	
-}
-.dijitTabContainerBottom-tabs,
-.dijitTabContainerTop-tabs,
-.dijitTabContainerLeft-tabs,
-.dijitTabContainerRight-tabs {
-	overflow: visible !important;  
-}
-.dijitTabContainerBottom-container,
-.dijitTabContainerTop-container,
-.dijitTabContainerLeft-container,
-.dijitTabContainerRight-container {
-	z-index:0;
-	overflow: hidden;
-	border: 1px solid black;
-}
-.nowrapTabStrip {
-	width: 50000px;
-	display: block;
-	position: relative;
-}
-.dijitTabListWrapper {
-	overflow: hidden;
-}
-.dijit_a11y .tabStripButton img {
-	
-	display: none;
-}
-.dijitTabContainerTop-tabs {
-	border-bottom: 1px solid black;
-}
-.dijitTabContainerTop-container {
-	border-top: 0px;
-}
-.dijitTabContainerLeft-tabs {
-	border-right: 1px solid black;
-	float: left;
-}
-.dijitTabContainerLeft-container {
-	border-left: 0px;
-}
-.dijitTabContainerBottom-tabs {
-	border-top: 1px solid black;
-}
-.dijitTabContainerBottom-container {
-	border-bottom: 0px;
-}
-.dijitTabContainerRight-tabs {
-	border-left: 1px solid black;
-	float: left;
-}
-.dijitTabContainerRight-container {
-	border-right: 0px;
-}
-DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
-	cursor: auto;
-}
-.dijitTab {
-	position:relative;
-	cursor:pointer;
-	white-space:nowrap;
-	z-index:3;
-}
-.dijitTab * {
-	
-	vertical-align: middle;
-}
-.dijitTabChecked {
-	cursor: default;	
-}
-.dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;	
-}
-.dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;	
-}
-.dijitTabContainerLeft-tabs .dijitTab {
-	left: 1px;	
-}
-.dijitTabContainerRight-tabs .dijitTab {
-	left: -1px;	
-}
-.dijitTabContainerTop-tabs .dijitTab,
-.dijitTabContainerBottom-tabs .dijitTab {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-}
-.dijitTabInnerDiv {
-	position:relative;
-}
-.tabStripButton {
-	z-index: 12;
-}
-.dijitTabButtonDisabled .tabStripButton {
-	display: none;
-}
-.dijitTabCloseButton {
-	margin-left: 1em;
-}
-.dijitTabCloseText {
-	display:none;
-}
-.dijit_a11y .dijitTabCloseButton {
-	background-image: none !important;
-	width: auto !important;
-	height: auto !important;
-	border: thin dotted;	
-}
-.dijit_a11y .dijitTabCloseButtonHover {
-	border:thin solid;	
-}
-.dijit_a11y .dijitTabCloseText {
-	display: inline;
-}
-.dijit_a11y .dijitTabChecked {
-	
-	border-style:dashed !important;
-}
-.dijit_a11y .dijitTabInnerDiv {
-	border-left:none !important;
- }
-.dijitTabPane,
-.dijitStackContainer-child,
-.dijitAccordionContainer-child {
-	
-    border: none !important;
-}
-.dijitInlineEditBoxDisplayMode {
-	border: 1px solid transparent;	
-	cursor: text;
-}
-.dijit_a11y .dijitInlineEditBoxDisplayMode,
-.dj_ie6 .dijitInlineEditBoxDisplayMode {
-	
-	border: none;
-}
-.dijitInlineEditBoxDisplayModeHover,
-.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
-.dj_ie6 .dijitInlineEditBoxDisplayModeHover {
-	
-	background-color: #e2ebf2;
-	border: solid 1px black;
-}
-.dijitInlineEditBoxDisplayModeDisabled {
-	cursor: default;
-}
-.dijitTreeIndent {
-	
-	width: 19px;
-}
-.dijitTreeRow, .dijitTreeContent {
-	white-space: nowrap;
-}
-.dijitTreeRow img {
-	
-	vertical-align: middle;
-}
-.dijitTreeContent {
-    cursor: default;
-}
-.dijitExpandoText {
-	display: none;
-}
-.dijit_a11y .dijitExpandoText {
-	display: inline;
-	padding-left: 10px;
-	padding-right: 10px;
-	font-family: monospace;
-	border-style: solid;
-	border-width: thin;
-	cursor: pointer;
-}
-.dijitTreeLabel {
-	margin: 0px 4px;
-}
-.dijitDialog {
-	position: absolute;
-	z-index: 999;
-	overflow: hidden;       
-}
-.dijitDialogTitleBar {
-	cursor: move;
-}
-.dijitDialogFixed .dijitDialogTitleBar {
-	cursor:default;
-}
-.dijitDialogCloseIcon {
-	cursor: pointer;
-}
-.dijitDialogUnderlayWrapper {
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 998;
-	display: none;
-	background: transparent !important;
-}
-.dijitDialogUnderlay {
-	background: #eee;
-	opacity: 0.5;
-}
-.dj_ie .dijitDialogUnderlay {
-	filter: alpha(opacity=50);
-}
-.dijit_a11y .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitDialog {
-	opacity: 1 !important;
-	background-color: white !important;
-}
-.dijitDialog .closeText {
-	display:none;
-	
-	position:absolute;
-}
-.dijit_a11y .dijitDialog .closeText {
-	display:inline;
-}
-.dijitSliderMoveable {
-	z-index:99;
-	position:absolute !important;
-	display:block;
-	vertical-align:middle;
-}
-.dijitSliderMoveableH {
-	right:0;
-}
-.dijitSliderMoveableV {
-	right:50%;
-}
-.dijit_a11y DIV.dijitSliderImageHandle,
-.dijitSliderImageHandle {
-	margin:0;
-	padding:0;
-	position:relative !important;
-	border:8px solid gray;
-	width:0;
-	height:0;
-	cursor: pointer;
-}
-.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
-	font-size: 0;
-}
-.dj_ie7 .dijitSliderImageHandle {
-	overflow: hidden; 
-}
-.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
-	overflow: visible; 
-}
-.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
-	border:4px solid #000;
-	height:8px;
-	width:8px;
-}
-.dijitSliderImageHandleV {
-	top:-8px;
-	right: -50%;
-}
-.dijitSliderImageHandleH {
-	left:50%;
-	top:-5px;
-	vertical-align:top;
-}
-.dijitSliderBar {
-	border-style:solid;
-	border-color:black;
-	cursor: pointer;
-}
-.dijitSliderBarContainerV {
-	position:relative;
-	height:100%;
-	z-index:1;
-}
-.dijitSliderBarContainerH {
-	position:relative;
-	z-index:1;
-}
-.dijitSliderBarH {
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBarV {
-	width:4px;
-	border-width:0 1px;
-}
-.dijitSliderProgressBar {
-	background-color:red;
-	z-index:1;
-}
-.dijitSliderProgressBarV {
-	position:static !important;
-	height:0%;
-	vertical-align:top;
-	text-align:left;
-}
-.dijitSliderProgressBarH {
-	position:absolute !important;
-	width:0%;
-	vertical-align:middle;
-	overflow:visible;
-}
-.dijitSliderRemainingBar {
-	overflow:hidden;
-	background-color:transparent;
-	z-index:1;
-}
-.dijitSliderRemainingBarV {
-	height:100%;
-	text-align:left;
-}
-.dijitSliderRemainingBarH {
-	width:100% !important;
-}
-.dijitSliderBumper {
-	overflow:hidden;
-	z-index:1;
-}
-.dijitSliderBumperV {
-	width:4px;
-	height:8px;
-	border-width:0 1px;
-}
-.dijitSliderBumperH {
-	width:8px;
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBottomBumper,
-.dijitSliderLeftBumper {
-	background-color:red;
-}
-.dijitSliderTopBumper,
-.dijitSliderRightBumper {
-	background-color:transparent;
-}
-.dijitSliderDecoration {
-	text-align:center;
-}
-.dijitSliderV TD {
-	position: relative; 
-}
-.dijitSliderDecorationH {
-	width: 100%;
-}
-.dijitSliderDecorationV {
-	height: 100%;
-}
-.dijitSliderButton {
-	font-family:monospace;
-	margin:0;
-	padding:0;
-	display:block;
-}
-.dijit_a11y .dijitSliderButtonInner {
-	visibility:visible !important;
-}
-.dijitSliderButtonContainer {
-	text-align:center;
-	height:0;	
-}
-.dijitSliderButtonContainer * {
-	cursor: pointer;
-}
-.dijitSlider .dijitButtonNode {
-	padding:0;
-	display:block;
-}
-.dijitRuleContainer {
-	position:relative;
-	overflow:visible;
-}
-.dijitRuleContainerV {
-	height:100%;
-	line-height:0;
-	float:left;
-	text-align:left;
-}
-.dj_opera .dijitRuleContainerV {
-	line-height:2%;
-}
-.dj_ie .dijitRuleContainerV {
-	line-height:normal;
-}
-.dj_gecko .dijitRuleContainerV {
-	margin:0 0 1px 0; 
-}
-.dijitRuleMark {
-	position:absolute;
-	border:1px solid black;
-	line-height:0;
-	height:100%;
-}
-.dijitRuleMarkH {
-	width:0;
-	border-top-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-}
-.dijitRuleLabelContainer {
-	position:absolute;
-}
-.dijitRuleLabelContainerH {
-	text-align:center;
-	display:inline-block;
-}
-.dijitRuleLabelH {
-	position:relative;
-	left:-50%;
-}
-.dijitRuleLabelV {
-	
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.dijitRuleMarkV {
-	height:0;
-	border-right-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-	width:100%;
-	left:0;
-}
-.dj_ie .dijitRuleLabelContainerV {
-	margin-top:-.55em;
-}
-.dijit_a11y .dijitSliderReadOnly,
-.dijit_a11y .dijitSliderDisabled {
-	opacity:0.6;
-}
-.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
-.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
-	filter: alpha(opacity=40);
-}
-.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV {
-	font-family: monospace; 
-	font-size: 1em;
-	line-height: 1em;
-	height: auto;
-	width: auto;
-	margin: 0px 4px;
-}
-.dijit_a11y .dijitButtonContents .dijitButtonText,
-.dijit_a11y .dijitTab .tabLabel {
-	display: inline !important;
-}
-.dijitTextArea {
-	width:100%;
-	overflow-y: auto;	
-}
-.dijitTextArea[cols] {
-	width:auto; 
-}
-.dj_ie .dijitTextAreaCols {
-	width:auto;
-}
-.dijitToolbarSeparator {
-	height: 18px;
-	width: 5px;
-	padding: 0 1px;
-	margin: 0;
-}
-.dijitIEFixedToolbar {
-	position:absolute;
-	
-	top: expression(eval((document.documentElement||document.body).scrollTop));
-}
-.dijitEditor {
-	display: block;	
-}
-.dijitEditorDisabled,
-.dijitEditorReadOnly {
-	color: gray;
-}
-.dijitTimePickerItemInner {
-	text-align:center;
-	border:0;
-	padding:2px 8px 2px 8px;
-}
-.dijitTimePickerTick,
-.dijitTimePickerMarker {
-	border-bottom:1px solid gray;
-}
-.dijitTimePicker .dijitDownArrowButton {
-	border-top: none !important;
-}
-.dijitTimePickerTick {
-	color:#CCC;
-}
-.dijitTimePickerMarker {
-	color:black;
-	background-color:#CCC;
-}
-.dijitTimePickerItemSelected {
-	font-weight:bold;
-	color:#333;
-	background-color:#b7cdee;
-}
-.dijitTimePickerItemHover {
-	background-color:gray;
-	color:white;
-	cursor:pointer;
-}
-.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	border: solid 4px black;
-}
-.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
-	border: dashed 4px black;
-}
-.dijitToggleButtonIconChar {
-	
-	display:none !important;
-}
-.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
-	display:inline !important;
-	visibility:hidden;
-}
-.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
-	font-family: "Arial Unicode MS";	
-}
-.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
-	display: inline !important; 
-	visibility:visible !important;
-}
-.dijitArrowButtonChar {
-        display:none !important;
-}
-.dijit_a11y .dijitArrowButtonChar {
-        display:inline !important;
-}
-.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
-.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
-	display:none !important;
-}
-.dijitSelect {
-	margin: 0.2em;
-	border-collapse: collapse;
-}
-.dj_ie .dijitSelect,
-.dj_ie7 .dijitSelect,
-.dj_iequirks .dijitSelect {
-	vertical-align: middle; 
-}
-.dj_ie8 .dijitSelect .dijitButtonText {
-	vertical-align: top;
-}
-.dijitToolbar .dijitSelect {
-	margin: 0;
-}
-.dj_webkit .dijitToolbar .dijitSelect {
-	padding-left: 0.3em;
-}
-.dijit_a11y .dijitSelectDisabled .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitSelect .dijitButtonContents {
-	padding: 0px;
-	background: transparent none;
-	white-space: nowrap;
-	text-align: left;
-}
-.dijitSelectFixedWidth .dijitButtonContents {
-	width: 100%;
-}
-.dijitSelectMenu .dijitMenuItemIcon {
-	
-	display:none;
-}
-.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
-.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
-	
-	position: static;
-}
-.dijitSelectLabel *
-{
-	vertical-align: baseline;
-}
-.dijitSelectSelectedOption * {
-	font-weight: bold;
-}
-.dijitSelectMenu {
-	border-width: 1px;
-}
-.dijitSelectMenu .dijitMenuTable {
-	margin: 0px;
-	background-color: transparent;
-}
-.dijitForceStatic {
-	position: static !important;
-}
-.dijitReadOnly *,
-.dijitDisabled *,
-.dijitReadOnly,
-.dijitDisabled {
-	
-	cursor: default;
-}
-.dijitIconSave,
-.dijitIconPrint,
-.dijitIconCut,
-.dijitIconCopy,
-.dijitIconClear,
-.dijitIconDelete,
-.dijitIconUndo,
-.dijitIconEdit,
-.dijitIconNewTask,
-.dijitIconEditTask,
-.dijitIconEditProperty,
-.dijitIconTask,
-.dijitIconFilter,
-.dijitIconConfigure,
-.dijitIconSearch,
-.dijitIconApplication,
-.dijitIconBookmark,
-.dijitIconChart,
-.dijitIconConnector,
-.dijitIconDatabase,
-.dijitIconDocuments,
-.dijitIconMail,
-.dijitLeaf,
-.dijitIconFile,
-.dijitIconFunction,
-.dijitIconKey,
-.dijitIconPackage,
-.dijitIconSample,
-.dijitIconTable,
-.dijitIconUsers,
-.dijitFolderClosed,
-.dijitIconFolderClosed,
-.dijitFolderOpened,
-.dijitIconFolderOpen,
-.dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled.png); 
-	width: 16px;
-	height: 16px;
-}
-.dj_ie6 .dijitIconSave,
-.dj_ie6 .dijitIconPrint,
-.dj_ie6 .dijitIconCut,
-.dj_ie6 .dijitIconCopy,
-.dj_ie6 .dijitIconClear,
-.dj_ie6 .dijitIconDelete,
-.dj_ie6 .dijitIconUndo,
-.dj_ie6 .dijitIconEdit,
-.dj_ie6 .dijitIconNewTask,
-.dj_ie6 .dijitIconEditTask,
-.dj_ie6 .dijitIconEditProperty,
-.dj_ie6 .dijitIconTask,
-.dj_ie6 .dijitIconFilter,
-.dj_ie6 .dijitIconConfigure,
-.dj_ie6 .dijitIconSearch,
-.dj_ie6 .dijitIconApplication,
-.dj_ie6 .dijitIconBookmark,
-.dj_ie6 .dijitIconChart,
-.dj_ie6 .dijitIconConnector,
-.dj_ie6 .dijitIconDatabase,
-.dj_ie6 .dijitIconDocuments,
-.dj_ie6 .dijitIconMail,
-.dj_ie6 .dijitLeaf,
-.dj_ie6 .dijitIconFile,
-.dj_ie6 .dijitIconFunction,
-.dj_ie6 .dijitIconKey,
-.dj_ie6 .dijitIconPackage,
-.dj_ie6 .dijitIconSample,
-.dj_ie6 .dijitIconTable,
-.dj_ie6 .dijitIconUsers,
-.dj_ie6 .dijitFolderClosed,
-.dj_ie6 .dijitIconFolderClosed,
-.dj_ie6 .dijitFolderOpened,
-.dj_ie6 .dijitIconFolderOpen,
-.dj_ie6 .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled8bit.png);
-}
-.dijitDisabled .dijitIconSave,
-.dijitDisabled .dijitIconPrint,
-.dijitDisabled .dijitIconCut,
-.dijitDisabled .dijitIconCopy,
-.dijitDisabled .dijitIconClear,
-.dijitDisabled .dijitIconDelete,
-.dijitDisabled .dijitIconUndo,
-.dijitDisabled .dijitIconEdit,
-.dijitDisabled .dijitIconNewTask,
-.dijitDisabled .dijitIconEditTask,
-.dijitDisabled .dijitIconEditProperty,
-.dijitDisabled .dijitIconTask,
-.dijitDisabled .dijitIconFilter,
-.dijitDisabled .dijitIconConfigure,
-.dijitDisabled .dijitIconSearch,
-.dijitDisabled .dijitIconApplication,
-.dijitDisabled .dijitIconBookmark,
-.dijitDisabled .dijitIconChart,
-.dijitDisabled .dijitIconConnector,
-.dijitDisabled .dijitIconDatabase,
-.dijitDisabled .dijitIconDocuments,
-.dijitDisabled .dijitIconMail,
-.dijitDisabled .dijitLeaf,
-.dijitDisabled .dijitIconFile,
-.dijitDisabled .dijitIconFunction,
-.dijitDisabled .dijitIconKey,
-.dijitDisabled .dijitIconPackage,
-.dijitDisabled .dijitIconSample,
-.dijitDisabled .dijitIconTable,
-.dijitDisabled .dijitIconUsers,
-.dijitDisabled .dijitFolderClosed,
-.dijitDisabled .dijitIconFolderClosed,
-.dijitDisabled .dijitFolderOpened,
-.dijitDisabled .dijitIconFolderOpen,
-.dijitDisabled .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActDisabled.png); 
-}
-.dijitIconSave { background-position: 0px; }
-.dijitIconPrint { background-position: -16px; }
-.dijitIconCut { background-position: -32px; }
-.dijitIconCopy { background-position: -48px; }
-.dijitIconClear { background-position: -64px; }
-.dijitIconDelete { background-position: -80px; }
-.dijitIconUndo { background-position: -96px; }
-.dijitIconEdit { background-position: -112px; }
-.dijitIconNewTask { background-position: -128px; }
-.dijitIconEditTask { background-position: -144px; }
-.dijitIconEditProperty { background-position: -166px; }
-.dijitIconTask { background-position: -176px; }
-.dijitIconFilter { background-position: -192px; }
-.dijitIconConfigure { background-position: -208px; }
-.dijitIconSearch { background-position: -224px; }
-.dijitIconError { background-position: -496px; } 
-.dijitIconApplication { background-position: -240px; }
-.dijitIconBookmark { background-position: -256px; }
-.dijitIconChart { background-position: -272px; }
-.dijitIconConnector { background-position: -288px; }
-.dijitIconDatabase { background-position: -304px; }
-.dijitIconDocuments { background-position: -320px; }
-.dijitIconMail { background-position: -336px; }
-.dijitIconFile, .dijitLeaf { background-position: -352px; }
-.dijitIconFunction { background-position: -368px; }
-.dijitIconKey { background-position: -384px; }
-.dijitIconPackage{ background-position: -400px; }
-.dijitIconSample { background-position: -416px; }
-.dijitIconTable { background-position: -432px; }
-.dijitIconUsers { background-position: -448px; }
-.dijitIconFolderClosed, .dijitFolderClosed { background-position: -464px; }
-.dijitIconFolderOpen, .dijitFolderOpened { background-position: -480px; }
-.soria .dojoDndItemBefore {
-	border-top: 2px solid #369;
-}
-.soria .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
-}
-.soria .dojoDndItemOver {
-	cursor:pointer;
-}
-.soria table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
-.soria .dojoDndAvatar td	{ border: none; }
-.soria .dojoDndAvatar tr	{ border: none; }
-.soria .dojoDndAvatarHeader td	{ height: 20px; padding: 0 0 0 21px; }
-.soria .dojoDndAvatarItem td { padding: 2px;}
-.soria.dojoDndMove .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.soria.dojoDndCopy .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.soria.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.soria.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.soria .dijitContentPane {
-    padding: 0px;
-}
-.soria .dijitTabContainerTop-dijitContentPane,
-.soria .dijitTabContainerLeft-dijitContentPane,
-.soria .dijitTabContainerBottom-dijitContentPane,
-.soria .dijitTabContainerRight-dijitContentPane,
-.soria .dijitAccordionContainer-dijitContentPane {
-    background-color: #fff;
-    padding: 5px;
-}
-.soria .dijitSplitContainer-dijitContentPane,
-.soria .dijitBorderContainer-dijitContentPane {
-    background-color: #fff;		
-    padding: 5px;
-}
- .soria .dijitTabContainer .tabStripRBtn {
-	margin-right: 21px;
-}
- .soria .dijitTabContainer .tabStripLBtn {
-	margin-left: 21px;
-}
- .soria .nowrapTabStrip .dijitTab {
-	top: 2px;
-}
- .soria .dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;
-	bottom: 2px;
-}
-.soria .dijitTabPaneWrapper {
-	background:#fff;
-	border:1px solid #B1BADF;
-	margin: 0;
-	padding-left: 0px;
-}
-.soria .dijitTabInnerDiv {
-	padding:0px 3px 0px 0px;
-	margin: 0 0 0 4px;
-	background: url(images/tabContainerSprite.gif) no-repeat;
-	background-position: right -400px;
-}
-.soria .dijitTab {
-	line-height:normal;
-	margin:0 2px 0 0;	
-	padding:0px;
-	background: url(images/tabContainerSprite.gif) no-repeat 0 -300px;
-	color: #243C5F;
-	border-bottom: 1px #B1BADF solid;
-}
-.soria .dijitTabInnerDiv .dijitTabContent {
-	padding:4px 3px 2px 4px;
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -350px;
-	position: relative;
-}
-.soria .dijitTabListWrapper {
-	z-index: 10;
-}
-.soria .dijitTabHover {
-	color: #243C5F;
-	background: url(images/tabContainerSprite.gif) no-repeat 0px -150px;
-}
-.soria .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -250px;
-}
-.soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -200px;
-}
-.soria .dijitTabChecked
-{
-	
-	background: url(images/tabContainerSprite.gif) no-repeat 0px -0px;
-}
-.soria .dijitTabChecked .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -100px;
-}
-.soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabContainerSprite.gif) repeat-x 0 -50px;
-	color: #243C5F !important;
-}
-.soria .dijitTabContainerTabListNested {
-	background: #F0F4FC;
-	background: #D9E9F9;
-	border: none;
-}
-.soria .dijitTabContainerTabListNested .dijitTab {
-	background: none;
-	border: none;
-	top: 0px;	
-}
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.soria .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
-	text-decoration: underline;
-}
-.soria .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
-	text-decoration: underline;
-	font-weight: bold;
-}
-.soria .dijitTabContainerSpacerNested .dijitTabSpacer {
-	
-	height: 0px;
-}
-.soria .dijitTabPaneWrapperNested {
-	border: none;	
-}
-.soria .dijitTabCloseButton {
-	width: 15px;
-	height: 15px;
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -60px top;
-	margin-top: -1px;
-}
-.dj_ie6 .soria .dijitTabCloseButton {
-	background: url(images/spriteRoundedIconsSmall.gif) no-repeat -60px top;
-}
-.soria .dijitTabCloseButtonHover {
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -60px -15px;
-}
-.dj_ie6 .soria .dijitTabCloseButtonHover {
-	background: url(images/spriteRoundedIconsSmall.gif) no-repeat -60px -15px;
-}
-.soria .dijitTab .tabLabel {
-	
-	min-height: 15px;
-	display: inline-block;
-}
-.dj_ie6 .soria .dijitTabButtonIcon {
-	
-	height: 18px;
-	width: 1px;
-}
-.soria .dijitTabContainerTop-tabs {
-	border-color: #B1BADF;
-	padding-left: 3px;
-}
-.soria .dijitTabContainerTopNoStrip {
-	padding-top: 3px;
-}
-.soria .dijitTabContainerTop-container {
-	border-top: none;
-}
-.soria .dijitTabContainerTop .dijitTabListWrapper {
-	border-bottom: none;
-}
-.soria .dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;
-}
-.soria .dijitTabContainerTop-tabs .dijitTabChecked {
-	border-bottom-color: #94b4e6;
-}
-.soria .dijitTabContainerTopStrip {
-	border: 1px solid #B1BADF;
-	margin-top: 1px;
-	padding-top: 1px;
-	background: #F0F4FC;
-}
-.soria .dijitTabContainerTopStrip .dijitTabContainerTop-tabs {
-	padding-left: 3px;
-}
-.soria .dijitTabContainerNested .dijitTabListWrapper {
-	height: auto;
-}
-.soria .dijitTabContainerBottom-tabs {
-	margin-top: -1px;
-	padding-left: 3px;
-	border-top: 1px solid #B1BADF;
-}
-.soria .dijitTabContainerBottom .dijitTabListWrapper {
-	border-top: none;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	float: left;
-}
-.soria .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #B1BADF;
-	background: url(images/tabBottomEnabledSpriteLR.gif) no-repeat bottom left;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color:#94b4e6;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url(images/tabBottomEnabledC.gif) repeat-x bottom left;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url(images/tabBottomEnabledSpriteLR.gif) no-repeat bottom right;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabHover {
-	color: #243C5F;
-	background: url(images/tabBottomHoverSpriteLR.gif) no-repeat bottom left;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabBottomHoverSpriteLR.gif) no-repeat bottom right;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabBottomHoverC.gif) repeat-x bottom left;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	
-	background: url(images/tabBottomActiveSpriteLR.gif) no-repeat bottom left;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url(images/tabBottomActiveSpriteLR.gif) no-repeat bottom right;
-}
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url(images/tabBottomActiveC.gif) repeat-x bottom left;
-}
-.soria .dijitTabContainerBottomStrip {
-	padding-bottom: 2px;
-	border: 1px solid #B1BADF;
-}
-.soria .dijitTabContainerBottomStrip {
-	background: #F0F4FC;
-}
-.soria .dijitTabContainerBottom-spacer,
-.soria .dijitTabContainerTop-spacer {
-	height: 2px;
-	border: 1px solid #8ba0bd;
-	background: #94b4e6;
-}
-.soria .dijitTabContainerTop-spacer {
-	border-top: none;
-}
-.soria .dijitTabContainerBottom-spacer {
-	border-bottom: none;
-}
-.soria .dijitTabContainerRight-tabs {
-	height: 100%;
-	border-color: #ccc;
-	padding-top: 3px;
-}
-.soria .dijitTabContainerRight-container {
-	border-right: none;
-}
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF !important;
-}
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv {
-	border-bottom: solid #B1BADF 1px;
-	margin-bottom: -1px;
-}
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	border-left-color: #94b4e6;
-}
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url(images/tabRightChecked.gif) no-repeat left top !important;
-}
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	border-bottom: solid #94b4e6 1px;
-	margin-bottom: -1px;
-}
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	background: url(images/tabContainerSprite.gif) no-repeat left -350px;
-}
-.soria .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url(images/tabContainerSprite.gif) no-repeat left -200px;
-}
-.soria .dijitTabContainerRightStrip {
-	padding-right: 2px;
-	border: 1px solid #B1BADF;
-	background: #F0F4FC;
-	border-left: none;
-}
-.soria .dijitTabContainerLeft-tabs {
-	border-color: #ccc;
-	padding-top: 3px;
-	height: 100%;
-}
-.soria .dijitTabContainerLeft-container {
-	border-left: none;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabChecked {
-	border-right: 1px solid #94b4e6;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -350px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url(images/tabContainerSprite.gif) no-repeat right -200px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url(images/tabLeftChecked.gif) no-repeat right top;
-}
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	border-bottom: solid #B1BADF 1px;
-	margin-bottom: -1px;
-}
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	border-bottom: solid #94b4e6 1px;
-	margin-bottom: -1px;
-}
-.soria .dijitTabContainerLeftStrip {
-	padding-left: 2px;
-	border: 1px solid #B1BADF;
-	background: #F0F4FC;
-	border-right: none;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTab,
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	
-}
-.soria .dijitTabContainerLeft-spacer,
-.soria .dijitTabContainerRight-spacer {
-	width: 2px;
-	border: 1px solid #8ba0bd;
-	background: #94b4e6;
-}
-.soria .dijitTabContainerLeft-spacer {
-	border-left: none;
-}
-.soria .dijitTabContainerRight-spacer {
-	border-right: none;
-}
-.soria .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
-}
-.soria .dijitTabContainer .tabStripButton {
-	margin-right: 0;
-}
-.soria .dijitTabContainer .tabStripButton-top {
-	margin-top: 1px;
-}
-.soria .tabStripButton .dijitTabContent{
-	padding: 6px 0 5px 0;
-}
-.dj_ie6 .soria .tabStripButton .dijitTabContent,
-.dj_ie7 .soria .tabStripButton .dijitTabContent {
-	padding-top: 7px;
-}
-.soria .tabStrip-disabled .tabStripButton .dijitTabContent {
-	padding: 5px 0 3px 0;
-}
-.dj_ie6 .soria .tabStrip-disabled .tabStripButton .dijitTabContent,
-.dj_ie7 .soria .tabStrip-disabled .tabStripButton .dijitTabContent {
-	padding-top: 6px;
-}
-.soria .dijitTabContainer .tabStripButton-bottom {
-	background: transparent url(images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
-	border-bottom: medium none;
-	border-top: 1px solid #B1BADF;
-}
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
-	background: transparent url(images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
-}
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
-.soria .dijitTabStripIcon {
-	height: 14px;
-	width: 14px;
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat left top ;
-}
-.dj_ie6 .soria .dijitTabStripIcon {
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.soria .dijitTabStripSlideRightIcon {
-	background-position: -30px top;
-}
-.soria .dijitTabStripMenuIcon {
-	background-position: -15px top;
-}
-.soria .dijitAccordionContainer {
-	border-color: #b1badf;
-	background-color: #fff;
-}
-.soria .dijitAccordionTitle {
-	background:#fafafa url(images/titleBar.png) repeat-x top left;
-	border-top: 1px solid #b9bbdd;
-	padding: 5px 4px 6px 8px;
-	font-size: 0.9em;
-	font-weight: bold;
-	color: #373941;
-}
-.soria .dijitAccordionTitleSelected  {
-	background: #f9f9f9 url(images/accordionItemActive.png) top repeat-x;
-	font-weight: bold;
-	border-top: 1px solid #b9bbdd;
-	border-bottom: 1px solid #b9bbdd;
-	padding: 5px 4px 5px 8px;
-	color: #243C5F;
-}
-.soria .dijitAccordionArrow {
-	background:url(images/spriteRoundedIconsSmallBl.gif) no-repeat -30px top;
-	width:15px;
-	height:15px;
-	margin-top:-1px;
-}
-.soria .dijitAccordionTitleSelected .dijitAccordionArrow {
-	background:url(images/spriteRoundedIconsSmallBl.gif) no-repeat -15px top;
-	margin-top:-1px;
-}
-.soria .dijitAccordionText {
-	margin-left: 4px;
-	margin-right: 4px;
-}
-.soria .dijitSplitContainerSizerH {
-	background:url(images/splitContainerSizerV.png) repeat-y #cddef4;
-	border:0;
-	border-left:0px solid #436496;
-	border-right:0px solid #436496;
-	width:5px;
-}
-.soria .dijitSplitContainerSizerH .thumb {
-	background:url(images/splitContainerSizerV-thumb.png) no-repeat #ccc;
-	left:1px;
-	width:2px;
-	height:19px;
-}
-.soria .dijitSplitContainerSizerV {
-	background:url(images/splitContainerSizerH.png) repeat-x #cddef4;
-	border:0;
-	border-top:0px solid #436496;
-	border-bottom:0px solid #436496;
-	height:2px;
-}
-.soria .dijitSplitContainerSizerV .thumb {
-	background:url(images/splitContainerSizerH-thumb.png) no-repeat #ccc;
-	top:1px;
-	width:19px;
-	height:5px;
-}
-.soria .dijitBorderContainer {
-	background-color: #e1ebfb;
-	padding: 5px;
-}
-.soria .dijitSplitContainer-child,
-.soria .dijitBorderContainer-child {
-	
-	border: 1px #b1badf solid;
-}
-.soria .dijitBorderContainer-dijitTabContainerTop,
-.soria .dijitBorderContainer-dijitTabContainerBottom,
-.soria .dijitBorderContainer-dijitTabContainerLeft,
-.soria .dijitBorderContainer-dijitTabContainerRight {
-	
-	 border: none;
-}
-.soria .dijitBorderContainer-dijitBorderContainer {
-	
-	border: none;
-	padding: 0px;
-}
-.soria .dijitSplitterH,
-.soria .dijitGutterH {
-	background: #E1EBFB;
-	border:0;
-	border-left:0px solid #d3d3d3;
-	border-right:0px solid #d3d3d3;
-	height:5px;
-}
-.soria .dijitSplitterH .dijitSplitterThumb {
-	background:#B0B0B0 none;
-	height:1px;
-	top:2px;
-	width:19px;
-}
-.soria .dijitSplitterV,
-.soria .dijitGutterV {
-	background: #E1EBFB;
-	border:0;
-	border-top:0px solid #d3d3d3;
-	border-bottom:0px solid #d3d3d3;
-	width:5px;
-}
-.soria .dijitSplitterV .dijitSplitterThumb {
-	background:#B0B0B0 none;
-	height:19px;
-	left:2px;
-	width:1px;
-}
-.soria .dijitSplitterActive {
-	font-size: 1px;
-	background-image: none;
-	background-color: #aaa;
-	-moz-opacity: 0.6;
-	opacity: 0.6;
-	filter: Alpha(Opacity=60);
-	margin: 0;
-}
-.soria .dijitInputContainer INPUT,
-.soria .dijitTextBox {
-	margin: 0em 0.1em;
-}
-.soria .dijitTextBox,
-.soria .dijitTextArea {
-	
-	background:#fff url(images/validationInputBg.png) repeat-x top left;
-	#background:#fff url(images/validationInputBg.gif) repeat-x top left;
-	border:1px solid #8ba0bd;
-}
-.soria .dijitComboBox .dijitButtonNode {
-	padding: 0 0.2em;
-}
-.soria .dijitTextBox .dijitButtonNode {
-	
-	border-color: #8ba0bd;
-}
-.soria .dijitTextBoxFocused,
-.soria .dijitTextAreaFocused {
-	
-	border-color:#406b9b;
-}
-.soria .dijitTextBoxFocused .dijitButtonNode,
-.soria .dijitSpinner .dijitUpArrowButtonActive,
-.soria .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#8ba0bd;
-}
-.soria .dijitSpinnerFocused .dijitDownArrowButton,
-.soria .dijitSpinner .dijitUpArrowButtonActive,
-.soria .dijitSpinner .dijitDownArrowButtonActive {
-	border-top-color:#8ba0bd;
-}
-.soria .dijitError {
-	border-color:#f3d118;
-	background-color:#f9f7ba;
-	background-image:none;
-}
-.soria .dijitErrorFocused {
-	background-color:#ff6;
-	background-image:none;
-}
-.soria .dijitValidationIcon {
-	
-	width: 16px;
-	background: transparent url(images/warning.png) no-repeat center center;
-}
-.soria .dijitComboBoxHighlightMatch {
-	background-color:#f9f7ba;
-}
-.soria .dijitButtonNode {
-	
-	border: 1px solid #8ba0bd;
-	border-bottom:1px solid #657c9c;
-	padding: 0.1em 0.2em 0.2em 0.2em;
-	background: #bcd5f0 url(images/buttonEnabled.png) repeat-x top left;
-}
-.soria .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
-.soria .dijitButtonText {
-	text-align: center;
-	padding: 0 0.3em;
-}
-.soria .dijitArrowButton {
-	color: #111;
-}
-.soria .dijitComboButton .dijitDownArrowButton {
-	padding-right:4px;
-}
-.soria .dijitTextBoxReadOnly,
-.soria .dijitTextBoxReadOnly .dijitButtonNode,
-.soria .dijitButtonDisabled .dijitButtonNode,
-.soria .dijitToggleButtonDisabled .dijitButtonNode,
-.soria .dijitDropDownButtonDisabled .dijitButtonNode,
-.soria .dijitComboButtonDisabled .dijitButtonNode,
-.soria .dijitTextBoxDisabled,
-.soria .dijitTextBoxDisabled .dijitButtonNode {
-	
-	border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
-	background:#c3d3e5 url(images/buttonDisabled.png) top repeat-x;
-	opacity: 0.60;
-}
-.dj_ie6 .soria .dijitReadOnly INPUT,
-.dj_ie7 .soria .dijitReadOnly INPUT,
-.dj_ie6 .soria .dijitComboButtonDisabled .dijitButtonText,
-.dj_ie7 .soria .dijitComboButtonDisabled .dijitButtonText {
-	
-	color: #aaa;
-}
-.soria .dijitButtonHover .dijitButtonNode,
-.soria .dijitButtonNodeHover,
-.soria .dijitToggleButtonHover .dijitButtonNode,
-.soria .dijitDropDownButtonHover .dijitButtonNode,
-.soria .dijitButtonContentsHover,
-.soria .dijitUpArrowButtonHover,
-.soria .dijitDownArrowButtonHover {
-	
-	
-	color:#243C5F;
-	background:#acc5e2 url(images/buttonHover.png) repeat-x top left;
-}
-.soria .dijitButtonActive .dijitButtonNode,
-.soria .dijitToggleButtonActive .dijitButtonNode,
-.soria .dijitDropDownButtonActive .dijitButtonNode,
-.soria .dijitComboButtonActive .dijitButtonContents,
-.soria .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
-	border-color:#657c9c;
-	background: #91b4e5 url(images/buttonActive.png) top left repeat-x;
-}
-.soria .dijitUpArrowButtonActive,
-.soria .dijitDownArrowButtonActive {
-	
-	background: #91b4e5 url(images/buttonActive.png) top left repeat-x;
-}
-.soria .dijitArrowButtonInner {
-	background-image: url(images/spriteArrows.png);
-	background-repeat: no-repeat;
-	background-position: 0px center;
-	width: 11px;
-	height: 11px;
-}
-.soria .dijitComboBox .dijitArrowButtonInner {
-        background-position: 0 center;
-}
-.soria .dijitLeftArrowButton .dijitArrowButtonInner {
-	background-position: -11px center;
-}
-.soria .dijitUpArrowButton .dijitArrowButtonInner {
-	background-position: -22px center;
-}
-.soria .dijitRightArrowButton .dijitArrowButtonInner {
-	background-position: -33px center;
-}
-.dj_ie6 .soria .dijitArrowButtonInner {
-	background-image: url(images/spriteArrows.gif);
-}
-.dj_ie .soria .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: 1px; 
-}
-.soria .dijitSpinnerButtonContainer {
-	width: auto;
-	padding: 0;
-}
-.soria .dijitSpinner .dijitArrowButton {
-	width: 15px;
-}
-.soria .dijitSpinner .dijitSpinnerButtonInner {
-	width: 15px;
-}
-.soria .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding: 0;
-}
-.soria .dijitToggleButton .dijitCheckBox,
-.soria .dijitToggleButton .dijitCheckBoxIcon {
-	background-image: url(images/spriteCheckbox.gif);
-}
-.soria .dijitCheckBox,
-.soria .dijitCheckBoxIcon {		
-	background-image: url(images/spriteCheckbox.gif); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0;
-	padding: 0;
-}
-.soria .dijitCheckBox,
-.soria .dijitToggleButton .dijitCheckBoxIcon {
-	
-	background-position: -16px;
-}
-.soria .dijitCheckBoxChecked,
-.soria .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
-}
-.soria .dijitCheckBoxDisabled {
-	
-	background-position: -48px;
-}
-.soria .dijitCheckBoxCheckedDisabled {
-	
-	background-position: -32px;
-}
-.soria .dijitCheckBoxHover {
-	
-	background-position: -80px;
-}
-.soria .dijitCheckBoxCheckedHover {
-	
-	background-position: -64px;
-}
-.soria .dijitToggleButton .dijitRadio,
-.soria .dijitToggleButton .dijitRadioIcon {
-	background-image: url(images/spriteRadio.gif);
-}
-.soria .dijitRadio,
-.soria .dijitRadioIcon	{		
-	background-image: url(images/spriteRadio.gif); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0;
-	padding: 0;
-}
-.soria .dijitRadio,
-.soria .dijitToggleButton .dijitRadioIcon {
-	
-	background-position: -16px;
-}
-.soria .dijitRadioChecked,
-.soria .dijitToggleButtonChecked .dijitRadioIcon {
-	
-	background-position: 0px;
-}
-.soria .dijitRadioDisabled {
-	
-	background-position: -48px;
-}
-.soria .dijitRadioCheckedDisabled {
-	
-	background-position: -32px;
-}
-.soria .dijitRadioHover {
-	
-	background-position: -80px;
-}
-.soria .dijitRadioCheckedHover {
-	
-	background-position: -64px;
-}
-.soria .dijitSliderProgressBarH {
-	border-color: #b1badf;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.soria .dijitSliderProgressBarV {
-	border-color: #b1badf;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.soria .dijitSliderFocused .dijitSliderProgressBarH,
-.soria .dijitSliderFocused .dijitSliderLeftBumper {
-	background-image:url(images/sliderFullFocus.png);
-}
-.soria .dijitSliderFocused .dijitSliderProgressBarV,
-.soria .dijitSliderFocused .dijitSliderBottomBumper {
-	background-image:url(images/sliderFullVerticalFocus.png);
-}
-.soria .dijitSliderRemainingBarV {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y bottom left;
-}
-.soria .dijitSliderRemainingBarH {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-}
-.soria .dijitSliderBar {
-	border-style: solid;
-	outline:1px;
-	
-}
-.soria .dijitSliderFocused .dijitSliderBar {
-	border-color:#8ba0bd;
-}
-.soria .dijitSliderImageHandleH {
-	border:0px;
-	width:15px;
-	height:18px;
-	background:url(images/preciseSliderThumb.png) no-repeat center top;
-}
-.soria .dijitSliderFocused .dijitSliderImageHandleH {
-	background-image:url(images/preciseSliderThumbFocus.png);
-	#background-image:url(images/preciseSliderThumbFocus.gif);
-}
-.dj_ie6 .soria .dijitSliderImageHandleH {
-	background-image:url(images/preciseSliderThumb.gif);
-}
-.soria .dijitSliderLeftBumper {
-	border-left-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.soria .dijitSliderRightBumper {
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-	border-color: #b4b4b4;
-	border-right-width: 1px;
-}
-.soria .dijitSliderImageHandleV {
-	border:0px;
-	width:20px;
-	height:15px;
-	background:url(images/sliderThumb.png) no-repeat center center;
-	#background:url(images/sliderThumb.gif) no-repeat center center;
-}
-.soria .dijitSliderFocused .dijitSliderImageHandleV {
-	background-image:url(images/sliderThumbFocus.png);
-	#background-image:url(images/sliderThumbFocus.gif);
-}
-.soria .dijitSliderBottomBumper {
-	border-bottom-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.soria .dijitSliderTopBumper {
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y top left;
-	border-color: #b4b4b4;
-	border-top-width: 1px;
-}
-.soria .dijitSliderIncrementIconH,
-.soria .dijitSliderIncrementIconV {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -45px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -45px top;
-	width:15px; height:15px;
-}
-.soria .dijitSliderIncrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.soria .dijitSliderDecrementIconH,
-.soria .dijitSliderDecrementIconV {
-	width:15px;
-	height:15px;
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -15px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -15px top;
-}
-.soria .dijitSliderDecrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat 0px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat 0px top;
-}
-.soria .dijitSliderButtonInner {
-	visibility:hidden;
-}
-.soria .dijitSliderReadOnly *,
-.soria .dijitSliderDisabled * {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
-	color: #bdbdbd;
-}
-.soria .dijitSliderReadOnly .dijitSliderDecrementIconH,
-.soria .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: 0px -15px;
-}
-.soria .dijitSliderReadOnly .dijitSliderIncrementIconH,
-.soria .dijitSliderDisabled .dijitSliderIncrementIconH {
-	background-position: -30px -15px;
-}
-.soria .dijitSliderReadOnly .dijitSliderDecrementIconV,
-.soria .dijitSliderDisabled .dijitSliderDecrementIconV {
-	background-position: -15px -15px;
-}
-.soria .dijitSliderReadOnly .dijitSliderIncrementIconV,
-.soria .dijitSliderDisabled .dijitSliderIncrementIconV {
-	background-position: -45px -15px;
-}
-.soria .dijitSelect .dijitButtonNode {
-	padding: 0px;
-}
-.soria .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url(images/validationInputBg.png) repeat-x top left;
-    #background:#fff url(images/validationInputBg.gif) repeat-x top left;
-}
-.soria .dijitSelectHover .dijitButtonContents,
-.soria .dijitSelectActive .dijitButtonContents,
-.soria .dijitSelectOpened .dijitButtonContents,
-.soria .dijitSelectDisabled .dijitButtonContents,
-.soria .dijitSelectReadOnly .dijitButtonContents{
-	background: transparent none;
-}
-.dj_ie .soria .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
-}
-.soria .dijitSelect .dijitArrowButton {
-	padding: 0px 2px;
-}
-.soria .dijitSelectDisabled .dijitButtonNode {
-    border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
-    background:#c3d3e5 url(images/buttonDisabled.png) top repeat-x;
-}
-.dj_ie .soria .dijitSelectDisabled  .dijitButtonNode * {
-	filter: gray() alpha(opacity=50);
-}
-.soria .dijitSelectHover .dijitButtonNode {
-    color:#000;
-    background:#acc5e2 url(images/buttonHover.png) repeat-x top left;
-}
-.soria .dijitSelectActive .dijitButtonNode,
-.soria .dijitSelectOpened .dijitButtonNode {
-    border-color:#657c9c;
-    background: #91b4e5 url(images/buttonActive.png) top left repeat-x;
-}
-.soria .dijitSelectMenu td {
-	padding: 0em;
-}
-.soria .dijitSelectMenu .dijitMenuItemLabel,
-.soria .dijitSelectMenu .dijitMenuArrowCell {
-	padding: 0.1em 0.2em;
-}
-.soria .dijitTreeNode {
-    background : url(images/treeI.gif) no-repeat;
-    background-position : top left;
-    background-repeat : repeat-y;
-    zoom: 1;	
-}
-.soria .dijitTreeRowHover {
-	
-	background-image: url(images/treeHover.png);
-	background-repeat: repeat;
-	background-color: transparent !important;
-}
-.soria .dijitTreeIsLast {
-    background: url(images/treeI_half.gif) no-repeat;
-}
-.soria .dijitTreeLabel {
-	font-weight: normal;
-	margin-left: 3px;
-}
-.soria .dijitTreeIsRoot {
-    margin-left: 0;
-    background-image: none;
-}
-.soria .dijitTreeExpando {
-    width: 18px;
-    height: 18px;
-}
-.soria .dijitTreeRow {
-	
-	padding-bottom: 2px;
-}
-.soria .dijitTreeContent {
-    min-height: 18px;
-    min-width: 18px;
-    padding-left:1px;
-}
-.soria .dijitTreeRowSelected .dijitTreeLabel{
-	background:#b8cbec;
-}
-.soria .dijitTreeExpandoOpened {
-	background: url(images/spriteTree.gif) no-repeat -18px top;
-}
-.soria .dijitTreeExpandoClosed {
-	background-image: url(images/spriteTree.gif);
-}
-.soria .dijitTreeExpandoLeaf {
-	background: url(images/spriteTree.gif) no-repeat -36px top;
-}
-.soria .dijitTreeExpandoLoading {
-	background-image: url(images/treeExpand_loading.gif);
-}
-.soria .dijitTreeIcon {
-	width: 16px;
-	height: 16px;
-}
-.soria .dijitFolderOpened {
-	background: url(images/spriteDivIcons.gif) no-repeat -16px top;
-}
-.soria .dijitFolderClosed {
-	background: url(images/spriteDivIcons.gif) no-repeat top left;
-}
-.soria .dijitLeaf {
-	background: url(images/spriteDivIcons.gif) no-repeat -32px top;
-}
-.soria .dijitTreeNode .dojoDndItemBefore,
-.soria .dijitTreeNode .dojoDndItemAfter {
-	border-bottom: none;
-	border-top: none;
-}
-.soria .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
-	border-top: 2px solid #369;
-}
-.soria .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
-	border-bottom: 2px solid #369;
-}
-.soria .dijitProgressBar {
-	margin:2px 0px 2px 0px;
-}
-.soria .dijitProgressBarEmpty{
-	
-	background:#fff url(images/progressBarEmpty.png) repeat-x center center;
-	border-color: #8ba0bd;
-}
-.soria .dijitProgressBarTile{
-	
-	background:#f0f0f0 url(images/progressBarFull.png) repeat-x center center;
-}
-.soria .dijitProgressBarFull {
-	border-right:1px solid #8ba0bd;
-}
-.soria .dijitProgressBarLabel {
-	
-	color:#293a4b;
-}
-.soria .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-	background:#cad2de url(images/progressBarAnim.gif) repeat-x center center;
-}
-.soria .dijitTitlePaneTitle {
-	background: #cccccc;
-	background:#fff url(images/titleBar.png) repeat-x top left;
-	border:1px solid #bfbfbf;
-	padding:3px 4px;
-	font-size: 0.9em;
-	font-weight: bold;
-	color: #6d6d6d;
-}
-.soria .dijitTitlePaneTitleHover {
-	background: #f9f9f9 url(images/accordionItemActive.png) top repeat-x;
-}
-.soria .dijitTitlePaneTitle * {
-	vertical-align: middle;
-}
-.soria .dijitTitlePane .dijitOpen .dijitArrowNode,
-.soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	width:15px;
-	height:15px;
-}
-.soria .dijitTitlePaneTextNode {
-	color: #243C5F;
-}
-.soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-}
-.dj_ie6 .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.soria .dijitTitlePane .dijitOpen .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -15px top;
-}
-.dj_ie6 .soria .dijitTitlePane .dijitOpen .dijitArrowNode {
-	background:url(images/spriteRoundedIconsSmall.gif) no-repeat -15px top;
-}
-.soria .dijitTitlePaneContentOuter {
-	background: #ffffff;
-	border: 1px solid #bfbfbf;
-	border-top: 0px;
-}
-.soria .dijitTitlePaneContentInner {
-	padding:10px;
-}
-.soria .dijitTitlePaneTextNode {
-	margin-left: 4px;
-	margin-right: 4px;
-}
-.soria .dijitCalendarIncrementControl {
-	
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-repeat: no-repeat;
-}
-.dj_ie6 .soria .dijitCalendarIncrementControl {
-	font-size:.1em;
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.soria .dijitA11ySideArrow {
-	display: none;
-}
-.soria .dijitCalendarDecrease {
-	background-position: top left;
-}
-.soria .dijitCalendarIncrease {
-	background-position: -30px top;
-}
-.soria table.dijitCalendarContainer {
-	font-size: 100%;
-	border-spacing: 0;
-	border-collapse: separate;
-	border: 1px solid #b1badf;
-	margin: 0;
-}
-.soria .dijitCalendarMonthContainer th {
-	
-	background:#bed7f0 url(images/titleBar.png) repeat-x top;
-	padding-top:.3em;
-	padding-bottom:.2em;
-	text-align:center;
-}
-.dj_ie6 .soria .dijitCalendarMonthContainer th {
-	padding-top:.2em;
-	padding-bottom:.1em;
-}
-.soria .dijitCalendarDayLabelTemplate {
-	
-	background:#bed7f0;
-	font-weight:normal;
-	padding-top:.15em;
-	padding-bottom:.2em;
-	border-bottom: 1px solid #b1badf;
-	color:#293a4b;
-	text-align:center;
-}
-.soria .dijitCalendarBodyContainer {
-	border-bottom: 1px solid #eeeeee;
-}
-.soria .dijitCalendarMonthLabel {
-	color:#293a4b;
-	font-weight: bold;
-}
-.soria .dijitCalendarDateTemplate {
-	
-	font-size: 0.9em;
-	font-weight: bold;
-	text-align: center;
-	padding: 0.3em 0.3em 0.05em 0.3em;
-	letter-spacing: 1px;
-	background-color: #fff;
-	border:#fff solid 1px !important;
-}
-.dj_ie .soria .dijitCalendarDateTemplate {
-	padding: 0.1em .33em 0.02em .33em;
-}
-.soria .dijitCalendarPreviousMonth,
-.soria .dijitCalendarNextMonth 		{
-	
-	color:#999999;
-	background-color:#fdfdfd !important;
-	border:#fdfdfd solid 1px !important;
-}
-.soria .dijitCalendarCurrentMonth {
-	
-}
-.soria .dijitCalendarDisabledDate {
-	text-decoration:line-through !important;
-}
-.soria .dijitCalendarCurrentDate {
-	
-	text-decoration:underline;
-	font-weight:bold;
-}
-.soria .dijitCalendarSelectedDate {
-	
-	background-color:#b9cbf1 !important;
-	color:black !important;
-	border:#4b5aaa solid 1px !important;
-}
-.soria .dijitCalendarYearContainer {
-	
-	background:white url(images/titleBar.png) repeat-x top;
-}
-.soria .dijitCalendarYearLabel {
-	
-	margin:0;
-	padding:0.4em 0 0.25em 0;
-	text-align:center;
-}
-.soria .dijitCalendarSelectedYear {
-	
-	color:black;
-	padding:0.2em;
-	padding-bottom:0.1em;
-	background-color:#b9cbf1 !important;
-	border:#4b5aaa solid 1px !important;
-}
-.soria .dijitCalendarNextYear,
-.soria .dijitCalendarPreviousYear {
-	
-	color:black !important;
-	font-weight:normal;
-}
-.soria .dijitTimePickerTick,
-.soria .dijitTimePickerMarker {
-	border-color: #b1badf;
-}
-.soria .dijitTimePickerTick {
-	color:white;
-}
-.soria .dijitTimePickerMarker {
-	background:#bed7f0 url(images/titleBar.png) repeat-x top;
-	color:#293a4b;
-	font-weight: bold;
-}
-.soria .dijitTimePickerItemSelected {
-	color: black;
-	background: #b9cbf1 none;
-}
-.soria .dijitTimePickerItemHover {
-	background: #60a1ea none;
-	color:white;
-}
-.soria .dijitTimePickerItemHover,
-.soria .dijitTimePickerItemSelected {
-	position: relative;
-	z-index: 10;
-}
-.soria .dijitTimePickerTick .dijitTimePickerItemInner {
-	font-size:0.4em;
-}
-.soria .dijitTimePickerItemHover .dijitTimePickerItemInner,
-.soria .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	font-size:1em;
-}
-.soria .dijitTimePickerMarkerHover {
-	border-top: 1px solid #94b9ef;
-}
-.soria .dijitTimePickerTickHover,
-.soria .dijitTimePickerTickSelected {
-	margin-top:-0.3em;
-	margin-bottom:-0.3em;
-	border-bottom: none;
-}
-.soria .dijitToolbar {
-	border-bottom: 1px solid #ccc;
-	background:#eaeaea url(images/titleBar.png) repeat-x top left;
-}
-.dj_ie6 .soria .dijitToolbar {
-	height: 10px;
-}
-.soria .dijitToolbar .dijitButtonNode,
-.soria .dijitToolbar .dijitComboButton .dijitButtonContents,
-.soria .dijitToolbar .dijitComboButton .dijitDownArrowButton {
-	background: none;
-	margin: 0px;
-	padding: 0px;
-	border: none;
-	font-size: 12px;
-}
-.soria .dijitToolbar .dijitButton,
-.soria .dijitToolbar .dijitToggleButton,
-.soria .dijitToolbar .dijitDropDownButton,
-.soria .dijitToolbar .dijitComboButton .dijitButtonContents,
-.soria .dijitToolbar .dijitComboButton .dijitDownArrowButton {
-	background: none;
-	padding: 1px;	
-}
-.soria .dijitToolbar .dijitButtonChecked,
-.soria .dijitToolbar .dijitToggleButtonChecked {
-	background-color:#d8e5f8;
-	border:1px solid #316ac5;
-	padding: 0px;
-}
-.soria .dijitToolbar .dijitButtonCheckedHover,
-.soria .dijitToolbar .dijitToggleButtonCheckedHover
- {
-	background-color:#9abbea;
-	border:1px solid #316ac5;
-	padding: 0px;
-}
-.soria .dijitToolbar .dijitButtonHover,
-.soria .dijitToolbar .dijitToggleButtonHover,
-.soria .dijitToolbar .dijitDropDownButtonHover,
-.soria .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
-.soria .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
-	border: 1px solid #316ac5;
-	padding: 0px;
-	background-color:#9abbea;
-}
-.soria .dijitToolbar label {
-	padding: 3px 3px 0 6px;
-}
-.dj_ie .soria .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
-.dj_ie .soria .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
-	border: 1px #777 dotted !important;
-	padding: 0px;
-}
-.soria .dijitDialog {
-	background: #eee;
-	border: 1px solid #cbcbcb;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-	padding: 0px;
-}
-.soria .dijitDialog .dijitDialogTitle {
-	
-	font-weight: bold;
-	padding: 0px 4px;
-	font-size: 0.9em;
-	color: #3243C5F;
-}
-.soria .dijitDialog .dijitDialogPaneContent {
-	background: #ffffff;
-	border-top: 1px solid #b1badf;
-	padding:10px;
-}
-.soria .dijitDialogTitleBar {
-	
-	background: #fafafa url(images/titleBar.png) repeat-x top left;
-	padding: 5px 6px 3px 6px;
-	outline:0; 
-}
-.soria .dijitDialogCloseIcon {
-	
-	background-image: url(images/spriteRoundedIconsSmallBl.png);
-	background-repeat: no-repeat;
-	background-position: -60px 0px;
-	position: absolute;
-	vertical-align: middle;
-	right: 6px;
-	top: 4px;
-	height: 15px;
-	width: 15px;
-}
-.dj_ie6 .soria .dijitDialogCloseIcon {
-	background-image: url(images/spriteRoundedIconsSmallBl.gif);
-}
-.soria .dijitDialogCloseIconHover {
-	background-position: -60px -15px;
-}
-.soria .dijitTooltip,
-.soria .dijitTooltipDialog {
-	
-	background: transparent;	
-}
-.dijitTooltipBelow {
-	
-	padding-top: 10px;
-}
-.dijitTooltipAbove {
-	
-	padding-bottom: 10px;
-}
-.soria .dijitTooltipContainer {
-	
-	background-color: #fff;
-	border:1px solid #cbcbcb;
-	padding:0.45em;
-}
-.soria .dijitTooltipConnector {
-	
-	border:0px;
-	z-index: 2;
-}
-.soria .dijitTooltipABRight .dijitTooltipConnector {
-	
-	left: auto !important;
-	right: 6px;
-}
-.soria .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
-	left: 6px;
-	background:url(images/tooltipConnectorUp.png) no-repeat top left;
-	width:17px;
-	height:11px;
-}
-.dj_ie .soria .dijitTooltipBelow .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorUp.gif);
-}
-.soria .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
-	left: 6px;
-	background:url(images/tooltipConnectorDown.png) no-repeat top left;
-	width:17px;
-	height:11px;
-}
-.dj_ie .soria .dijitTooltipAbove .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorDown.gif);
-}
-.dj_ie .soria .dijitTooltipAbove .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorDown.gif);
-}
-.dj_ie6 .soria .dijitTooltipAbove .dijitTooltipConnector {
-	bottom: -5px;
-}
-.soria .dijitTooltipLeft {
-	padding-right: 10px;
-}
-.dj_ie6 .soria .dijitTooltipLeft {
-	padding-left: 11px;
-}
-.soria .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorRight.png) no-repeat top left;
-	width:11px;
-	height:17px;
-}
-.dj_ie .soria .dijitTooltipLeft .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorRight.gif);
-}
-.soria .dijitTooltipRight {
-	padding-left: 10px;
-}
-.soria .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorLeft.png) no-repeat top left;
-	width:11px;
-	height:17px;
-}
-.dj_ie .soria .dijitTooltipRight .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorLeft.gif);
-}
-.soria .dijitMenu,
-.soria .dijitMenuBar {
-	border: 1px solid #cbcbcb;
-	margin: 0px;
-	padding: 0px;
-	background-color: #fff;
-}
-.soria .dijitBorderContainer .dijitMenuBar {
-	border:1px solid #B1BADF;
-}
-.soria .dijitMenuItem {
-	font-family: sans-serif;
-	margin: 0px;
-	color: #243C5F;
-}
-.soria .dijitMenuBar .dijitMenuItem {
-	padding: 4px 5px;
-}
-.soria .dijitMenuPreviousButton, .soria .dijitMenuNextButton {
-	font-style: italic;
-}
-.soria .dijitMenuItem TD {
-	padding:1px;
-}
-.soria .dijitMenuPassive .dijitMenuItemHover,
-.soria .dijitMenuItemSelected {
-	background-color: #d9e6f9; 
-	color: #243C5F;
-}
-.soria .dijitMenuItemIcon {
-	width: 15px;
-	height: 15px;
-}
-.soria .dijitMenuExpand {
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-position: -30px top;
-}
-.dj_ie6 .soria .dijitMenuExpand {
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.soria .dijitMenuSeparator {
-	height: 1px;
-}
-.soria .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #fff; 
-}
-.soria .dijitMenuSeparatorBottom {
-	border-top: 1px solid #8ba0bd;
-}
-.soria .dijitCheckedMenuItemIconChar {
-	display: none;
-}
-.soria .dijitCheckedMenuItemIcon {
-	background-image: url(images/spriteCheckbox.gif);
-	background-position: -80px;
-}
-.soria .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-	background-position: -64px;
-}
-.soria .dijitToolbar .dijitToolbarSeparator {
-	background: url(../../icons/images/editorIconsEnabled.png); 
-}
-.soria .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.soria .dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIconSep { background-position: 0px; }
-.dijitEditorIconSave { background-position: -18px; }
-.dijitEditorIconPrint { background-position: -36px; }
-.dijitEditorIconCut { background-position: -54px; }
-.dijitEditorIconCopy { background-position: -72px; }
-.dijitEditorIconPaste { background-position: -90px; }
-.dijitEditorIconDelete { background-position: -108px; }
-.dijitEditorIconCancel { background-position: -126px; }
-.dijitEditorIconUndo { background-position: -144px; }
-.dijitEditorIconRedo { background-position: -162px; }
-.dijitEditorIconSelectAll { background-position: -180px; }
-.dijitEditorIconBold { background-position: -198px; }
-.dijitEditorIconItalic { background-position: -216px; }
-.dijitEditorIconUnderline { background-position: -234px; }
-.dijitEditorIconStrikethrough { background-position: -252px; }
-.dijitEditorIconSuperscript { background-position: -270px; }
-.dijitEditorIconSubscript { background-position: -288px; }
-.dijitEditorIconJustifyCenter { background-position: -306px; }
-.dijitEditorIconJustifyFull { background-position: -324px; }
-.dijitEditorIconJustifyLeft { background-position: -342px; }
-.dijitEditorIconJustifyRight { background-position: -360px; }
-.dijitEditorIconIndent { background-position: -378px; }
-.dijitEditorIconOutdent { background-position: -396px; }
-.dijitEditorIconListBulletIndent { background-position: -414px; }
-.dijitEditorIconListBulletOutdent { background-position: -432px; }
-.dijitEditorIconListNumIndent { background-position: -450px; }
-.dijitEditorIconListNumOutdent { background-position: -468px; }
-.dijitEditorIconTabIndent { background-position: -486px; }
-.dijitEditorIconLeftToRight { background-position: -504px; }
-.dijitEditorIconRightToLeft, .dijitEditorIconToggleDir { background-position: -522px; }
-.dijitEditorIconBackColor { background-position: -540px; }
-.dijitEditorIconForeColor { background-position: -558px; }
-.dijitEditorIconHiliteColor { background-position: -576px; }
-.dijitEditorIconNewPage { background-position: -594px; }
-.dijitEditorIconInsertImage { background-position: -612px; }
-.dijitEditorIconInsertTable { background-position: -630px; }
-.dijitEditorIconSpace { background-position: -648px; }
-.dijitEditorIconInsertHorizontalRule { background-position: -666px; }
-.dijitEditorIconInsertOrderedList { background-position: -684px; }
-.dijitEditorIconInsertUnorderedList { background-position: -702px; }
-.dijitEditorIconCreateLink { background-position: -720px; }
-.dijitEditorIconUnlink { background-position: -738px; }
-.dijitEditorIconViewSource { background-position: -756px; }
-.dijitEditorIconRemoveFormat { background-position: -774px; }
-.dijitEditorIconFullScreen { background-position: -792px; }
-.dijitEditorIconWikiword { background-position: -810px; }
- 
-.dijitColorPalette {
-	border:1px solid #cbcbcb;
-	background:#fff;
-	-moz-border-radius: 0px !important;
-}
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+
+@import url("../dijit.css");
+@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/
+@import url("Common.css");
+@import url("layout/ContentPane.css");
+@import url("layout/TabContainer.css");
+@import url("layout/AccordionContainer.css");
+@import url("layout/SplitContainer.css");
+@import url("layout/BorderContainer.css");
+@import url("form/Common.css");
+@import url("form/Button.css");
+@import url("form/Checkbox.css");
+@import url("form/RadioButton.css");
+@import url("form/Slider.css");
+@import url("form/Select.css");
+@import url("Tree.css");
+@import url("ProgressBar.css");
+@import url("TitlePane.css");
+@import url("Calendar.css");
+@import url("TimePicker.css");
+@import url("Toolbar.css");
+@import url("Dialog.css");
+@import url("Menu.css");
+@import url("Editor.css");
+@import url("../../icons/editorIcons.css"); /* sprite for editor icons to be used by all themes */
+@import url("ColorPalette.css");
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/soria_rtl.css b/lib/dijit/themes/soria/soria_rtl.css
index 97246a28f..b804011a4 100644
--- a/lib/dijit/themes/soria/soria_rtl.css
+++ b/lib/dijit/themes/soria/soria_rtl.css
@@ -1,225 +1,29 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitRtl .dijitPlaceHolder {
-	left: auto;
-	right: 0;
-}
-.dijitMenuItemRtl {
-	text-align: right;
-}
-.dj_iequirks .dijitComboButtonRtl BUTTON {
-	
-	float:left;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitComboBoxRtl .dijitArrowButtonContainer {
-	
-	border-right-width: 1px !important;
-	border-right-style: solid !important;
-	border-left-width: 0px !important;
-	border-left-style: none !important;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer {
-	border-right: 1px solid black !important;
-	border-left: 0px none black !important;
-}
-.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
-	right: 0;
-	left: auto;
-}
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitArrowButtonContainer {
-	float: left;
-}
-.dijitCalendarRtl .dijitCalendarNextYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarRtl .dijitCalendarPreviousYear {
-	margin:0 0 0 0.55em;
-}
-.dijitSliderRtl .dijitSliderImageHandleV {
-	left:auto;
-}
-.dijitSliderRtl .dijitSliderImageHandleH {
-	left:-50%;
-}
-.dijitSliderRtl .dijitSliderMoveableH {
-	right:auto;
-	left:0;
-}
-.dijitSliderRtl .dijitRuleContainerV {
-	float:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleContainerV {
-	text-align:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelV {
-	text-align:left;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelH {
-	zoom:1;
-}
-.dijitSliderRtl .dijitSliderProgressBarH {
-	
-	float:right;
-	right:0;
-	left:auto;
-}
-.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError {
-	background-position:right;
-	padding-right:25px;
-}
-.dijitTabRtl .dijitTabCloseButton {
-	margin-left: 0px;
-	margin-right: 1em;
-}
-.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
-	width:100%;
-}
-.dijitColorPaletteRtl .dijitColorPaletteUnder {
-	
-	left: auto;
-	right: 0;
-}
-.dijitSelectRtl .dijitButtonContents {
-	text-align: right;
-}
-.dijitRtl .soria .dijitTab {
-	margin-right:0;
-	margin-left:2px;		
-}
-.dijitRtl .soria .dijitTabContainer .tabStripButton {
-	margin-left: 0;
-}
-.dijitRtl .soria .dijitTabContainerTopStrip,
-.dijitRtl .soria .dijitTabContainerBottomStrip,
-.dijitRtl .soria .dijitTabContainerTop-tabs,
-.dijitRtl .soria .dijitTabContainerBottom-tabs {
-	padding-left: 0;
-	padding-right: 3px;
-}
-.dijitRtl .soria .dijitTabInnerDiv {
-	padding-left: 3px;
-	padding-right: 4px;
-}
-.dijitRtl .soria .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-.dj_ie-rtl .soria .dijitTabContainerLeft-tabs {
-	margin-left: 0px !important;
-}
-.dj_ie-rtl .soria .dijitTabContainerRight-tabs {
-	margin-right: 0px !important;
-}
-.dijitRtl .soria .dijitTabContainerLeft-tabs .dijitTab,
-.dijitRtl .soria .dijitTabContainerRight-tabs .dijitTab {
-	margin-left:0px;
-}
-.dj_ie-rtl .soria .dijitTab .dijitTabInnerDiv{
-	width : 1%;
-}
-.dijitRtl .soria .dijitAccordionArrow {
-	background-position: 0px top;
-}
-.dijitRtl .soria .dijitAccordionTitleSelected .dijitAccordionArrow {
-	
-	background-position: -15px top;
-}
-.dijitRtl .soria .dijitSliderProgressBarH,
-.dijitRtl .soria .dijitSliderRemainingBarH,
-.dijitRtl .soria .dijitSliderLeftBumper,
-.dijitRtl .soria .dijitSliderRightBumper,
-.dijitRtl .soria .dijitSliderTopBumper {
-	background-position: top right;
-}
-.dijitRtl .soria .dijitSliderProgressBarV,
-.dijitRtl .soria .dijitSliderRemainingBarV,
-.dijitRtl .soria .dijitSliderBottomBumper {
-	background-position: bottom right;
-}
-.dijitRtl .soria .dijitSliderLeftBumper {
-	border-left-width: 0px;
-	border-right-width: 1px;
-}
-.dijitRtl .soria .dijitSliderRightBumper {
-	border-left-width: 1px;
-	border-right-width: 0px;
-}
-.dijitRtl .soria .dijitSliderIncrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat left top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat left top;
-}
-.dijitRtl .soria .dijitSliderDecrementIconH {
-	background:url(images/spriteRoundedIconsSmall.png) no-repeat -30px top;
-	#background:url(images/spriteRoundedIconsSmall.gif) no-repeat -30px top;
-}
-.dijitRtl .soria .dijitComboBox .dijitButtonNode {
-	border-width: 0px 0px 0px 1px;
-}
-.dijitRtl .soria .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
-.dijitRtl .soria .dijitTreeNode,
-.dijitRtl .soria .dijitTreeExpandoLeaf {
-	
-    background-image: none;
-}
-.dijitRtl .soria .dijitTreeContent {
-    padding-left: 0px;
-    padding-right: 1px;
-}
-.dijitRtl .soria .dijitTreeExpandoOpened {
-	
-	background: url(images/spriteTree_rtl.gif) no-repeat -18px top;
-}
-.dijitRtl .soria .dijitTreeExpandoClosed {
-	
-	background-image: url(images/spriteTree_rtl.gif);
-}
-.dijitRtl .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
-.dj_ie6-rtl .soria .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: 0px top;
-}
-.dijitRtl .soria .dijitCalendarDecrease {
-	background-position: -30px top;
-}
-.dijitRtl .soria .dijitCalendarIncrease {
-	background-position: 0px top;
-}
-.dj_ie6-rtl .soria .dijitTimePickerMarkerHover,
-.dj_ie7-rtl .soria .dijitTimePickerMarkerHover {
-        border-top: 0px; 
-}
-.dijitRtl .soria .dijitDialogTitleBar .dijitDialogCloseIcon {
-	right: auto;
-	left: 5px;
-}
-.dijitRtl .soria .dijitMenuItem .dijitMenuItemIcon {
-	padding-left: 3px;
-	padding-right: 0px;
-}
-.dijitRtl .soria .dijitMenuItem .dijitMenuExpand {
-	background-position: left top;
-}
-.dijitRtl .soria .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitRtl .soria .dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitToolbarRtl .dijitToolbarSeparator {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png);
-}
- 
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+
+@import url("../dijit_rtl.css");
+@import url("layout/TabContainer_rtl.css");
+@import url("layout/AccordionContainer_rtl.css");
+@import url("form/Slider_rtl.css");
+@import url("form/Button_rtl.css");
+@import url("Tree_rtl.css");
+@import url("TitlePane_rtl.css");
+@import url("Calendar_rtl.css");
+@import url("TimePicker_rtl.css");
+@import url("Dialog_rtl.css");
+@import url("Menu_rtl.css");
+@import url("Editor_rtl.css");
+@import url("../../icons/editorIcons_rtl.css"); /*sprite for editor icons to be used by all themes*/
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/Calendar.css b/lib/dijit/themes/tundra/Calendar.css
index 19d8bf76a..5fef68ee1 100644
--- a/lib/dijit/themes/tundra/Calendar.css
+++ b/lib/dijit/themes/tundra/Calendar.css
@@ -1,6 +1,7 @@
+/* Calendar*/
 
 .tundra .dijitCalendarIncrementControl {
-	
+	/* next/prev month buttons */
 	width:15px;
 	height:15px;
 	background-image: url("images/spriteRoundedIconsSmall.png");
@@ -10,15 +11,18 @@
 	font-size:.1em;
 	background-image: url("images/spriteRoundedIconsSmall.gif");
 }
+
 .tundra .dijitA11ySideArrow {
 	display: none;
 }
+
 .tundra .dijitCalendarDecrease {
 	background-position: top left;
 }
 .tundra .dijitCalendarIncrease {
 	background-position: -30px top;
 }
+
 .tundra .dijitCalendarContainer {
 	font-size: 100%;
 	border-spacing: 0;
@@ -26,8 +30,9 @@
 	border: 1px solid #ccc;
 	margin: 0;
 }
+
 .tundra .dijitCalendarMonthContainer th {
-	
+	/* month header cell */
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;
 	padding-bottom:.2em;
@@ -37,82 +42,118 @@
 	padding-top:.2em;
 	padding-bottom:.1em;
 }
+
 .tundra .dijitCalendarDayLabelTemplate {
-	
+	/* day of week labels */
 	background:white url("images/calendarDayLabel.png") repeat-x bottom;
 	font-weight:normal;
 	padding-top:.15em;
-	padding-bottom:0em;
+	padding-bottom:0;
 	border-top: 1px solid #eeeeee;
 	color:#293a4b;
 	text-align:center;
 }
+
 .tundra .dijitCalendarBodyContainer {
 	border-bottom: 1px solid #eeeeee;
 }
+
 .tundra .dijitCalendarMonthLabel {
 	color:#293a4b;
 	font-weight: bold;
+	padding: 0 4px;
 }
+
 .tundra .dijitCalendarDateTemplate {
-	
+	/* style for each day cell */
 	font-size: 0.9em;
 	font-weight: bold;
 	text-align: center;
 	padding: 0.3em 0.3em 0.05em 0.3em;
 	letter-spacing: 1px;
 }
+
 .dj_ie .tundra .dijitCalendarDateTemplate {
 	padding: 0.1em .33em 0.02em .33em;
 }
+
 .tundra .dijitCalendarPreviousMonth,
 .tundra .dijitCalendarNextMonth 		{
-	
+	/* days that are part of the previous or next month */
 	color:#999999;
 	background-color:#f8f8f8;
 }
+
 .tundra .dijitCalendarCurrentMonth {
-	
+	/* days that are part of this month */
 	background-color: white;
 }
+
 .tundra .dijitCalendarCurrentDate {
-	
+	/* cell for today's date */
 	text-decoration:underline;
 	font-weight:bold;
 }
+
 .tundra .dijitCalendarHoveredDate {
 	background-color: #e2ebf2;
 }
+
 .tundra .dijitCalendarDisabledDate {
 	text-decoration: line-through;
-	background-color: white;	
+	background-color: white;	/* override hover effects above, hover and click on disabled date should have no effect */
 }
+
 .tundra .dijitCalendarSelectedDate {
-	
+	/* cell for the selected date */
 	background-color:#bbc4d0 !important;
 	color:black !important;
 }
 .tundra .dijitCalendarYearContainer {
-	
+	/* footer of the table that contains the year display/selector */
 	background:white url("images/calendarYearLabel.png") repeat-x bottom;
 	border-top:1px solid #ccc;
 }
+
 .tundra .dijitCalendarYearLabel {
-	
+	/* container for all of 3 year labels */
 	margin:0;
 	padding:0.4em 0 0.25em 0;
 	text-align:center;
 }
+
 .tundra .dijitCalendarSelectedYear {
-	
+	/* label for selected year */
 	color:black;
 	padding:0.2em;
 	padding-bottom:0.1em;
 	background-color:#bbc4d0 !important;
 }
+
 .tundra .dijitCalendarNextYear,
 .tundra .dijitCalendarPreviousYear {
-	
+	/* label for next/prev years */
 	color:black !important;
 	font-weight:normal;
 }
+
+/* Styling for month DropDownButton */
+
+.tundra .dijitCalendar .dijitDropDownButton {
+	margin: 0;
+}
+.tundra .dijitCalendar .dijitButtonText {
+	padding: 0;
+}
+.tundra .dijitCalendar .dijitDropDownButton .dijitButtonNode {
+	background-color: transparent;
+	background-image: none;
+	padding: 0;
+}
+
+/* Styling for month drop down list */
+
+.tundra .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+	background-color: #3559ac;
+	color:#fff;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/Calendar_rtl.css b/lib/dijit/themes/tundra/Calendar_rtl.css
index 9144dcfeb..fbfe27b5d 100644
--- a/lib/dijit/themes/tundra/Calendar_rtl.css
+++ b/lib/dijit/themes/tundra/Calendar_rtl.css
@@ -1,7 +1,9 @@
+/* Calendar */
 
 .tundra .dijitCalendarRtl .dijitCalendarDecrease {
 	background-position: -30px top;
 }
+
 .tundra .dijitCalendarRtl .dijitCalendarIncrease {
-	background-position: 0px top;
+	background-position: 0 top;
 }
diff --git a/lib/dijit/themes/tundra/ColorPalette.css b/lib/dijit/themes/tundra/ColorPalette.css
index 56fa5585a..38088b845 100644
--- a/lib/dijit/themes/tundra/ColorPalette.css
+++ b/lib/dijit/themes/tundra/ColorPalette.css
@@ -1,5 +1,5 @@
 .dijitColorPalette {
 	border:1px solid #7eabcd;
 	background:#fff;
-	-moz-border-radius: 0px !important;
-}
+	-moz-border-radius: 0 !important;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/Common.css b/lib/dijit/themes/tundra/Common.css
index b7f8ace85..c339263e1 100644
--- a/lib/dijit/themes/tundra/Common.css
+++ b/lib/dijit/themes/tundra/Common.css
@@ -1,13 +1,17 @@
-
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 .tundra .dojoDndItemBefore {
 	border-top: 2px solid #369;
 }
+
 .tundra .dojoDndItemAfter {
 	border-bottom: 2px solid #369;
 }
+
 .tundra .dojoDndItemOver {
 	cursor:pointer;
 }
+
 .tundra table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .tundra .dojoDndAvatar td	{ border: none; }
 .tundra .dojoDndAvatar tr	{ border: none; }
@@ -17,10 +21,12 @@
 .tundra.dojoDndCopy .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoCopy.png); background-repeat: no-repeat; background-position: 2px center;}
 .tundra.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndMove.png); background-repeat: no-repeat; background-position: 2px center;}
 .tundra.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndCopy.png); background-repeat: no-repeat; background-position: 2px center;}
+
 .tundra .dijitContentPaneLoading {
 	background:url('images/loading.gif') no-repeat left center;
 	padding-left:25px;
 }
+
 .tundra .dijitContentPaneError {
 	background:url('images/warning.png') no-repeat left center;
 	padding-left:25px;
diff --git a/lib/dijit/themes/tundra/Dialog.css b/lib/dijit/themes/tundra/Dialog.css
index 74d3d36ef..b346f6267 100644
--- a/lib/dijit/themes/tundra/Dialog.css
+++ b/lib/dijit/themes/tundra/Dialog.css
@@ -1,29 +1,35 @@
+/* Dialog and Tooltip/TooltipDialog */
 
 .tundra .dijitDialog {
 	background: #fff;
 	border: 1px solid #7eabcd;
-	padding: 0px;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
+	padding: 0;
+	-webkit-box-shadow: 0 5px 10px #adadad;
 }
+
 .tundra .dijitDialogPaneContent {
 	background: #fff;
 	border-top: 1px solid #d3d3d3;
 	padding:10px;
+
 }
+
 .tundra .dijitDialogTitleBar {
-	
+	/* outer container for the titlebar of the dialog */
 	background: #fafafa url("images/titleBar.png") repeat-x top left;
 	padding: 5px 6px 3px 6px;
-	outline:0; 
+	outline:0; /* remove this line if keyboard focus on dialog startup is an issue. tab still takes you to first focusable element */
 }
+
 .tundra .dijitDialogTitle {
-	
+	/* typography and styling of the dialog title */
 	font-weight: bold;
-	padding: 0px 4px;
+	padding: 0 4px;
 }
+
 .tundra .dijitDialogCloseIcon {
-	
-	
+	/* the default close icon for the dialog */
+	/* background : url("images/spriteRoundedIconsSmall.png") no-repeat right top; */
 	background: url("images/tabClose.png") no-repeat right top;
 	position: absolute;
 	vertical-align: middle;
@@ -35,58 +41,72 @@
 .dj_ie6 .tundra .dijitDialogCloseIcon {
 	background : url("images/tabClose.gif") no-repeat right top;
 }
+
 .tundra .dijitDialogCloseIconHover {
 	background: url("images/tabCloseHover.png") no-repeat right top;
 }
 .dj_ie6 .tundra .dijitDialogCloseIconHover {
 	background : url("images/tabCloseHover.gif") no-repeat right top;
 }
+
+/* Tooltip and TooltipDialog */
+
 .tundra .dijitTooltip,
 .tundra .dijitTooltipDialog {
-	
-	background: transparent;	
+	/* the outermost dom node, holding the connector and container */
+	background: transparent;	/* make the area on the sides of the arrow transparent */
 }
+
 .dijitTooltipBelow {
-	
+	/* leave room for arrow above content */
 	padding-top: 13px;
 }
+
 .dijitTooltipAbove {
-	
+	/* leave room for arrow below content */
 	padding-bottom: 13px;
 }
+
 .tundra .dijitTooltipContainer {
-	
+	/*
+		The part with the text.
+	*/
 	background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
 	border: 1px solid #7eabcd;
 	padding: 0.45em;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 }
+
 .tundra .dijitTooltipConnector {
-	
-	border:0px;
+	/* the arrow piece */
+	border:0;
 	z-index: 2;
 }
 .tundra .dijitTooltipABRight .dijitTooltipConnector {
-	
+	/* above or below tooltip, but the arrow appears on the right,
+		and the right edges of target and tooltip are aligned rather than the left */
 	left: auto !important;
 	right: 3px;
 }
+
 .tundra .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
+	/* the arrow piece for tooltips below an element */
+	top: 0;
 	left: 3px;
 	background:url("images/tooltipConnectorUp.png") no-repeat top left;
 	width:16px;
 	height:14px;
 }
+
 .dj_ie .tundra .dijitTooltipBelow .dijitTooltipConnector {
-	
+	/* use gif for IE7 too, due to png rendering problems on fade-in (see http://trac.dojotoolkit.org/ticket/6555) */
 	background-image: url("images/tooltipConnectorUp.gif");
 }
+
 .tundra .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
+	/* the arrow piece for tooltips above an element */
+	bottom: 0;
 	left: 3px;
 	background:url("images/tooltipConnectorDown.png") no-repeat top left;
 	width:16px;
@@ -98,16 +118,13 @@
 .dj_ie6 .tundra .dijitTooltipAbove .dijitTooltipConnector {
 	bottom: -3px;
 }
+
 .tundra .dijitTooltipLeft {
 	padding-right: 14px;
 }
-.dj_ie6 .tundra .dijitTooltipLeft {
-	padding-left: 15px;
-}
 .tundra .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+	right: 0;
 	background:url("images/tooltipConnectorRight.png") no-repeat top left;
 	width:16px;
 	height:14px;
@@ -115,13 +132,13 @@
 .dj_ie .tundra .dijitTooltipLeft .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorRight.gif");
 }
+
 .tundra .dijitTooltipRight {
 	padding-left: 14px;
 }
 .tundra .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
+	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+	left: 0;
 	background:url("images/tooltipConnectorLeft.png") no-repeat top left;
 	width:16px;
 	height:14px;
@@ -129,6 +146,7 @@
 .dj_ie .tundra .dijitTooltipRight .dijitTooltipConnector {
 	background-image: url("images/tooltipConnectorLeft.gif");
 }
+
 .dj_webkit .tundra .dijitTooltipContainer {
-	-webkit-box-shadow: 0px 5px 10px #adadad;
+	-webkit-box-shadow: 0 5px 10px #adadad;
 }
diff --git a/lib/dijit/themes/tundra/Dialog_rtl.css b/lib/dijit/themes/tundra/Dialog_rtl.css
index faeaa4139..9337680aa 100644
--- a/lib/dijit/themes/tundra/Dialog_rtl.css
+++ b/lib/dijit/themes/tundra/Dialog_rtl.css
@@ -1,4 +1,4 @@
-
+/* Dialog */
 .tundra .dijitDialogRtl .dijitDialogCloseIcon {
 	right: auto;
 	left: 5px;
diff --git a/lib/dijit/themes/tundra/Editor.css b/lib/dijit/themes/tundra/Editor.css
index d24de9557..b6f07a1f7 100644
--- a/lib/dijit/themes/tundra/Editor.css
+++ b/lib/dijit/themes/tundra/Editor.css
@@ -2,13 +2,15 @@
 	border:1px solid #bfbfbf;
 	border-top:0;
 }
+
 .tundra .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled.png'); /* editor icons sprite image - enabled state */
 	background-repeat: no-repeat;
 	width: 18px;
 	height: 18px;
 	text-align: center;
 }
 .tundra .dijitDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled.png'); /* editor icons sprite image - disabled state */
 }
+
diff --git a/lib/dijit/themes/tundra/Editor_rtl.css b/lib/dijit/themes/tundra/Editor_rtl.css
index 888c0335a..cd4849e7f 100644
--- a/lib/dijit/themes/tundra/Editor_rtl.css
+++ b/lib/dijit/themes/tundra/Editor_rtl.css
@@ -1,7 +1,7 @@
-
+/* Editor */
 .tundra .dijitEditorRtl .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsEnabled_rtl.png'); /* editor icons sprite image - enabled state */
 }
 .tundra .dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); 
+	background-image: url('../../icons/images/editorIconsDisabled_rtl.png'); /* editor icons sprite image - disabled state  */
 }
diff --git a/lib/dijit/themes/tundra/Menu.css b/lib/dijit/themes/tundra/Menu.css
index ca1198864..6229b1773 100644
--- a/lib/dijit/themes/tundra/Menu.css
+++ b/lib/dijit/themes/tundra/Menu.css
@@ -1,61 +1,76 @@
 .tundra .dijitMenu,
 .tundra .dijitMenuBar {
 	border: 1px solid #7eabcd;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	background-color: #f7f7f7;
 }
+
 .tundra .dijitBorderContainer .dijitMenuBar {
 	border:1px solid #ccc;
 }
+
 .tundra .dijitMenuItem {
 	font-family: sans-serif;
 	margin: 0;
 }
+
 .tundra .dijitMenuItem {
 	padding: 4px 5px;
 }
+
 .tundra .dijitMenuPreviousButton, .tundra .dijitMenuNextButton {
 	font-style: italic;
 }
 .tundra .dijitMenuItem td {
 	padding: 2px;
 }
+
 .tundra .dijitMenuPassive .dijitMenuItemHover,
 .tundra .dijitMenuItemSelected {
 	background-color: #3559ac;
 	color:#fff;
 }
+
 .tundra .dijitMenuItemIcon {
 	width: 16px;
 	height: 16px;
 }
+
 .tundra .dijitMenuExpand {
-	
+	/* arrow to indicate this MenuItem opens a sub-menu */
 	width: 7px;
 	height: 7px;
 	background-image: url('images/spriteArrows.png');
-	background-position: -14px 0px;
+	background-position: -14px 0;
 }
 .dj_ie6 .tundra .dijitMenuExpand {
 	background-image: url('images/spriteArrows.gif');
 }
+
+/* separator can be two pixels -- set border of either one to 0 to have only one */
 .tundra .dijitMenuSeparatorTop {
 	border-bottom: 1px solid #9b9b9b;
 }
+
 .tundra .dijitMenuSeparatorBottom {
 	border-top: 1px solid #e8e8e8;
 }
+
+/* the checked menu item */
 .tundra .dijitCheckedMenuItemIconChar {
 	display: none;
 }
+
 .tundra .dijitCheckedMenuItemIcon {
 	background-image: url('images/checkmark.png');
 	background-position: -80px;
 }
+
 .dj_ie6 .tundra .dijitCheckedMenuItemIcon {
 	background-image: url('images/checkmark.gif');
 }
+
 .tundra .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 	background-position: -64px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/Menu_rtl.css b/lib/dijit/themes/tundra/Menu_rtl.css
index 7f0a58ae3..f14859297 100644
--- a/lib/dijit/themes/tundra/Menu_rtl.css
+++ b/lib/dijit/themes/tundra/Menu_rtl.css
@@ -1,3 +1,3 @@
 .tundra .dijitMenuItemRtl .dijitMenuExpand {
-	background-position: -7px 0px;
-}
+	background-position: -7px 0;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/ProgressBar.css b/lib/dijit/themes/tundra/ProgressBar.css
index 3f555c42b..2d70e28d4 100644
--- a/lib/dijit/themes/tundra/ProgressBar.css
+++ b/lib/dijit/themes/tundra/ProgressBar.css
@@ -1,23 +1,28 @@
 .tundra .dijitProgressBar {
-	margin:2px 0px 2px 0px;
+	margin:2px 0 2px 0;
 }
+
 .tundra .dijitProgressBarEmpty {
-	
+	/* outer container and background of the bar that's not finished yet*/
 	background:#fff url("images/progressBarEmpty.png") repeat-x center center;
 	border-color: #a2a2a2 #b8b8b8 #b8b8b8 #a2a2a2;
 }
+
 .tundra .dijitProgressBarTile {
-	
+	/* inner container for finished portion when in 'tile' (image) mode */
 	background:#f0f0f0 url("images/progressBarFull.png") repeat-x center center;
 }
+
 .tundra .dijitProgressBarFull {
 	border-right:1px solid #b8b8b8;
 }
+
 .tundra .dijitProgressBarLabel {
-	
+	/* Set to a color that contrasts with both the "Empty" and "Full" parts. */
 	color:#293a4b;
 }
+
 .tundra .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
+	/* use an animated gif for the progress bar in 'indeterminate' mode */
 	background:#cad2de url("images/progressBarAnim.gif") repeat-x center center;
 }
diff --git a/lib/dijit/themes/tundra/TimePicker.css b/lib/dijit/themes/tundra/TimePicker.css
index 5811ad665..13dc7f80c 100644
--- a/lib/dijit/themes/tundra/TimePicker.css
+++ b/lib/dijit/themes/tundra/TimePicker.css
@@ -1,42 +1,52 @@
-
+/* Time Picker */
 .tundra .dijitTimePickerTick,
 .tundra .dijitTimePickerMarker {
 	border-color: #ccc;
 }
+
 .tundra .dijitTimePickerTick {
 	color:white;
 }
+
 .tundra .dijitTimePickerMarker {
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	color:#293a4b;
 	font-weight: bold;
 }
+
 .tundra .dijitTimePickerItemSelected {
 	color: black;
 	background: #bbc4d0 none;
 }
+
 .tundra .dijitTimePickerItemHover {
 	background: #60a1ea none;
 	color:white;
 }
+
 .tundra .dijitTimePickerItemHover,
 .tundra .dijitTimePickerItemSelected {
 	position: relative;
 	z-index: 10;
 }
+
 .tundra .dijitTimePickerTick .dijitTimePickerItemInner {
 	font-size:0.4em;
 }
+
 .tundra .dijitTimePickerItemHover .dijitTimePickerItemInner,
 .tundra .dijitTimePickerItemSelected .dijitTimePickerItemInner {
 	font-size:1em;
 }
+
 .tundra .dijitTimePickerMarkerHover {
 	border-top: 1px solid #ccc;
 }
+
 .tundra .dijitTimePickerTickHover,
 .tundra .dijitTimePickerTickSelected {
 	margin-top:-0.3em;
 	margin-bottom:-0.3em;
 	border-bottom: none;
 }
+
diff --git a/lib/dijit/themes/tundra/TimePicker_rtl.css b/lib/dijit/themes/tundra/TimePicker_rtl.css
index 985600778..7a4d5e58c 100644
--- a/lib/dijit/themes/tundra/TimePicker_rtl.css
+++ b/lib/dijit/themes/tundra/TimePicker_rtl.css
@@ -1,4 +1,4 @@
  .dj_ie6 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover,
 .dj_ie7 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover {
-        border-top: 0px; 
+        border-top: 0; /* IE6/7 bug causes mouseover/out event storm */
 }
diff --git a/lib/dijit/themes/tundra/TitlePane.css b/lib/dijit/themes/tundra/TitlePane.css
index 265de718c..e964bf8a8 100644
--- a/lib/dijit/themes/tundra/TitlePane.css
+++ b/lib/dijit/themes/tundra/TitlePane.css
@@ -7,28 +7,32 @@
 .tundra .dijitTitlePaneTitleHover  {
 	background: #f8fafd url("images/accordionItemHover.gif") bottom repeat-x;
 }
+
 .tundra .dijitTitlePane .dijitArrowNode {
 	background-image: url('images/spriteArrows.png');
 	background-repeat: no-repeat;
-	background-position: 0px 0px;
+	background-position: 0 0;
 	height: 7px;
 	width: 7px;
 }
 .dj_ie6 .tundra .dijitTitlePane .dijitArrowNode {
 	background-image: url('images/spriteArrows.gif');
 }
+
 .tundra .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: -14px 0px;
+	background-position: -14px 0;
 }
+
 .tundra .dijitTitlePaneContentOuter {
 	background: #ffffff;
 	border:1px solid #bfbfbf;
-	border-top: 0px;
+	border-top: 0;
 }
 .tundra .dijitTitlePaneContentInner {
 	padding:10px;
 }
+
 .tundra .dijitTitlePaneTextNode {
 	margin-left: 4px;
 	margin-right: 4px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/TitlePane_rtl.css b/lib/dijit/themes/tundra/TitlePane_rtl.css
index f3d2b91a3..5f63a03d9 100644
--- a/lib/dijit/themes/tundra/TitlePane_rtl.css
+++ b/lib/dijit/themes/tundra/TitlePane_rtl.css
@@ -1,3 +1,3 @@
 .tundra .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {
-	background-position: -7px 0px;
-}
+	background-position: -7px 0;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/Toolbar.css b/lib/dijit/themes/tundra/Toolbar.css
index 0f489fa85..ebe9cdae4 100644
--- a/lib/dijit/themes/tundra/Toolbar.css
+++ b/lib/dijit/themes/tundra/Toolbar.css
@@ -2,18 +2,22 @@
 	border-bottom: 1px solid #ccc;
 	background:#eaeaea url("images/titleBar.png") repeat-x top left;
 }
+
+/* setting a min-height on ditor toolbar */
 .dj_ie6 .tundra .dijitToolbar {
 	height: 10px;
 }
+
 .tundra .dijitToolbar .dijitButtonNode,
 .tundra .dijitToolbar .dijitComboButton .dijitButtonContents,
 .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButton {
 	background: none;
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	border: none;
 	font-size: 12px;
 }
+
 .tundra .dijitToolbar .dijitButton,
 .tundra .dijitToolbar .dijitToggleButton,
 .tundra .dijitToolbar .dijitDropDownButton,
@@ -22,43 +26,50 @@
 	background: none;
 	padding: 1px;
 }
+
 .tundra .dijitToolbar .dijitButtonChecked,
 .tundra .dijitToolbar .dijitToggleButtonChecked {
 	background-color:#d4dff2;
 	border:1px solid #316ac5;
-	padding: 0px;	
+	padding: 0;	/* reduce padding to compensate for space taken by border */
 }
+
 .tundra .dijitToolbar .dijitButtonCheckedHover,
 .tundra .dijitToolbar .dijitToggleButtonCheckedHover
  {
 	background-color:#abc1e5;
 	border:1px solid #316ac5;
-	padding: 0px;	
+	padding: 0;	/* reduce padding to compensate for space taken by border */
 }
+
 .tundra .dijitToolbar .dijitButtonHover,
 .tundra .dijitToolbar .dijitToggleButtonHover,
 .tundra .dijitToolbar .dijitDropDownButtonHover,
 .tundra .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
 .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
+	/* TODO: change this from Hover to Selected so that button is still highlighted while drop down is being used */
 	border: 1px solid #869cbf;
-	padding: 0px;	
+	padding: 0;	/* reduce padding to compensate for space taken by border */
 	background-color:#e1e5f0;
 }
+
 .tundra .dijitToolbar label {
 	padding: 3px 3px 0 6px;
 }
+
 .dj_ie .tundra .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
 .dj_ie .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
+	/* focus border doesn't appear on  for IE, so need to add it manually */
 	border: 1px #555 dotted !important;
-	padding: 0px;
+	padding: 0;
 }
+
 .tundra .dijitToolbarSeparator {
-	
+	/* separator icon in the editor sprite */
 	background: url('../../icons/images/editorIconsEnabled.png');
 }
+
 .tundra .dijitToolbarRtl .dijitToolbarSeparator {
-	
+	/* separator icon in the editor sprite */
 	background-image: url('../../icons/images/editorIconsDisabled.png');
 }
diff --git a/lib/dijit/themes/tundra/Tree.css b/lib/dijit/themes/tundra/Tree.css
index 5ba1c8804..76c81e0b1 100644
--- a/lib/dijit/themes/tundra/Tree.css
+++ b/lib/dijit/themes/tundra/Tree.css
@@ -1,72 +1,96 @@
+/* Tree */
 
 .tundra .dijitTreeNode {
     background-image : url('images/i.gif');
     background-repeat : repeat-y;
-    zoom: 1;	
+    zoom: 1;	/* force layout on IE (TODO: may not be needed anymore) */
 }
+
+/* left vertical line (grid) for all nodes */
 .tundra .dijitTreeIsLast {
     background: url('images/i_half.gif') no-repeat;
 }
+
 .tundra .dijitTreeIsRoot {
     margin-left: 0;
     background-image: none;
 }
+
 .tundra .dijitTreeExpando {
     width: 18px;
     height: 18px;
 }
+
 .tundra .dijitTreeRow {
-	
+	/* so insert line shows up on IE when dropping after a target element */
 	padding-bottom: 2px;
 }
+
 .tundra .dijitTreeContent {
     min-height: 18px;
     min-width: 18px;
 }
+
 .tundra .dijitTreeRowSelected .dijitTreeLabel {
 	background:#e2ebfe;
 }
 .tundra .dijitTreeRowHover {
-	
+	/* using a transparent png so that we can still see grid lines, which are (unfortunately) behind the dijitRowNode that we are hovering over */
 	background-image: url(images/treeHover.png);
 	background-repeat: repeat;
 	background-color: transparent !important;
 }
+
 .tundra .dijitTreeExpandoOpened {
 	background-image: url('images/treeExpand_minus.gif');
 }
+
 .tundra .dijitTreeExpandoClosed {
 	background-image: url('images/treeExpand_plus.gif');
 }
+
 .tundra .dijitTreeExpandoLeaf {
 	background-image: url('images/treeExpand_leaf.gif');
 }
+
 .tundra .dijitTreeExpandoLoading {
 	background-image: url('images/treeExpand_loading.gif');
 }
+
 .tundra .dijitTreeIcon {
 	width: 16px;
 	height: 16px;
 }
+
 .tundra .dijitFolderOpened {
 	background: url('images/folderOpened.gif') no-repeat;
 }
+
 .tundra .dijitFolderClosed {
 	background: url('images/folderClosed.gif') no-repeat;
 }
+
 .tundra .dijitLeaf {
 	background: url('images/leaf.gif') no-repeat;
 }
+
+/* Drag and Drop on TreeNodes
+ * Put insert line on dijitTreeContent node so it's aligned w/
+ * (ie, indented equally with) target element, even
+ * though dijitTreeRowNode is the actual "drag object"
+ */
 .tundra .dijitTreeNode .dojoDndItemBefore,
 .tundra .dijitTreeNode .dojoDndItemAfter {
 	border-bottom: none;
 	border-top: none;
 }
+
 .tundra .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-top: 2px solid #369;
 }
+
 .tundra .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
+	/* copied from Common.css */
 	border-bottom: 2px solid #369;
 }
diff --git a/lib/dijit/themes/tundra/Tree_rtl.css b/lib/dijit/themes/tundra/Tree_rtl.css
index 6a9d93186..607b71ce8 100644
--- a/lib/dijit/themes/tundra/Tree_rtl.css
+++ b/lib/dijit/themes/tundra/Tree_rtl.css
@@ -1,13 +1,17 @@
+/* Tree */
 
 .tundra .dijitTreeNodeRtl,
 .tundra .dijitTreeNodeRtl .dijitTreeExpandoLeaf {
-	
+	/* disable grid lines in RTL mode; too hard to support */
     background-image: none;
 }
+
 .tundra .dijitTreeNodeRtl .dijitTreeExpandoOpened {
-	
+	/* todo: get rid of transparent space in icon files,
+		and just use background-placement (or margin maybe) to get desired alignment */
 	background-image: url('images/treeExpand_minus_rtl.gif');
 }
+
 .tundra .dijitTreeNodeRtl .dijitTreeExpandoClosed {
 	background-image: url('images/treeExpand_plus_rtl.gif');
 }
diff --git a/lib/dijit/themes/tundra/form/Button.css b/lib/dijit/themes/tundra/form/Button.css
index d9d103fc1..2c68aef04 100644
--- a/lib/dijit/themes/tundra/form/Button.css
+++ b/lib/dijit/themes/tundra/form/Button.css
@@ -1,6 +1,14 @@
 
+/*****
+		dijit.form.Button
+		dijit.form.DropDownButton
+		dijit.form.ComboButton
+		dijit.form.ComboBox (partial)
+		dijit.form.Spinner (partial) (TODO: create NumberSpinner.css file like claro has)
+ *****/
+
 .tundra .dijitButtonNode {
-	
+	/* enabled state - inner */
 	border: 1px solid #c0c0c0;
 	border-bottom: 1px solid #9b9b9b;
 	padding: 0.1em 0.2em 0.2em 0.2em;
@@ -10,15 +18,19 @@
 	text-align: center;
 	padding: 0 0.3em;
 }
+
 .tundra .dijitDisabled .dijitButtonText {
 	color: #7F7F7F;
 }
+
 .tundra .dijitArrowButton {
 	color: #111;
 }
+
 .tundra .dijitComboButton .dijitDownArrowButton {
 	padding-right:4px;
 }
+
 .tundra .dijitTextBoxReadOnly,
 .tundra .dijitTextBoxReadOnly .dijitButtonNode,
 .tundra .dijitButtonDisabled .dijitButtonNode,
@@ -27,18 +39,19 @@
 .tundra .dijitComboButtonDisabled .dijitButtonNode,
 .tundra .dijitTextBoxDisabled,
 .tundra .dijitTextBoxDisabled .dijitButtonNode {
-	
+	/* disabled state - inner */
 	border-color: #d5d5d5 #d5d5d5 #bdbdbd #d5d5d5;
 	background:#e4e4e4 url("../images/buttonDisabled.png") top repeat-x;
 }
+
 .tundra .dijitButtonHover .dijitButtonNode,
 .tundra .dijitButtonNodeHover,
 .tundra .dijitToggleButtonHover .dijitButtonNode,
 .tundra .dijitDropDownButtonHover .dijitButtonNode,
 .tundra .dijitComboButton .dijitButtonContentsHover,
 .tundra .dijitComboButton .dijitDownArrowButtonHover {
-	
-	
+	/* hover state - inner */
+	/* TODO: change from Hover to Selected so that button is still highlighted while drop down is being used */
 	border-color: #a5beda;
 	border-bottom-color:#5c7590;
 	color:#243C5F;
@@ -46,10 +59,11 @@
 }
 .tundra .dijitDownArrowButtonHover,
 .tundra .dijitUpArrowButtonHover {
-	
+	/* same as above except don't adjust border color (it's controlled by the containing Spinner/ComboBox) */
 	color:#243C5F;
 	background:#fcfdff url("../images/buttonHover.png") repeat-x bottom;
 }
+
 .tundra .dijitUpArrowButtonActive,
 .tundra .dijitDownArrowButtonActive,
 .tundra .dijitButtonActive .dijitButtonNode,
@@ -57,15 +71,18 @@
 .tundra .dijitDropDownButtonActive .dijitButtonNode,
 .tundra .dijitButtonContentsActive,
 .tundra .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
+	/* active state - inner (for when you are pressing a normal button, or
+	 * when a radio-type button is in a depressed state
+	 */
 	border-color:#366dba;
 	background: #ededed url("../images/buttonActive.png") bottom repeat-x;
 }
+
 .tundra .dijitArrowButtonInner {
-	background:url("../images/spriteArrows.png") no-repeat scroll 0px center;
+	background:url("../images/spriteArrows.png") no-repeat scroll 0 center;
 	width: 7px;
 	height: 7px;
-	margin: 0px 4px 0px 4px;
+	margin: 0 4px 0 4px;
 }
 .tundra .dijitTextBox .dijitArrowButtonInner {
 	background-position: 0 center;
@@ -82,6 +99,7 @@
 .tundra .dijitUpArrowButton .dijitArrowButtonInner {
 	background-position: -21px center;
 }
+
 .tundra .dijitDisabled .dijitArrowButtonInner {
 	background-position: -28px center;
 }
@@ -95,13 +113,13 @@
 	background-position: -49px center;
 }
 .dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
+	margin-top: -1px; /* image has too many blank pixels on top */
 }
 .dj_ie .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
-	margin-top: -2px; 
+	margin-top: -2px; /* image has too many blank pixels on top */
 }
 .dj_ie8 .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
+	margin-top: -1px; /* image has too many blank pixels on top */
 }
 .tundra .dijitSpinnerButtonContainer {
 	width: auto;
diff --git a/lib/dijit/themes/tundra/form/Checkbox.css b/lib/dijit/themes/tundra/form/Checkbox.css
index e7ff2f945..28a7d79c9 100644
--- a/lib/dijit/themes/tundra/form/Checkbox.css
+++ b/lib/dijit/themes/tundra/form/Checkbox.css
@@ -1,45 +1,54 @@
 .tundra .dijitToggleButton .dijitCheckBoxIcon {
 	background-image: url('../images/checkmarkNoBorder.png');
 }
+
 .dj_ie6 .tundra .dijitToggleButton .dijitCheckBoxIcon {
 	background-image: url('../images/checkmarkNoBorder.gif');
 }
+
 .tundra .dijitCheckBox,
-.tundra .dijitCheckBoxIcon			{
-	background-image: url('../images/checkmark.png'); 
+.tundra .dijitCheckBoxIcon		/* inside a toggle button */	{
+	background-image: url('../images/checkmark.png'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
 	margin: 0 2px 0 0;
 	padding: 0;
 }
+
 .dj_ie6 .tundra .dijitCheckBox,
-.dj_ie6 .tundra .dijitCheckBoxIcon			{
-	background-image: url('../images/checkmark.gif'); 
+.dj_ie6 .tundra .dijitCheckBoxIcon		/* inside a toggle button */	{
+	background-image: url('../images/checkmark.gif'); /* checkbox sprite image */
 }
+
 .tundra .dijitCheckBox,
 .tundra .dijitToggleButton .dijitCheckBoxIcon {
-	
+	/* unchecked */
 	background-position: -16px;
 }
+
 .tundra .dijitCheckBoxChecked,
 .tundra .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
+	/* checked */
+	background-position: 0;
 }
+
 .tundra .dijitCheckBoxDisabled {
-	
+	/* disabled */
 	background-position: -48px;
 }
+
 .tundra .dijitCheckBoxCheckedDisabled {
-	
+	/* disabled but checked */
 	background-position: -32px;
 }
+
 .tundra .dijitCheckBoxHover {
-	
+	/* hovering over an unchecked enabled checkbox */
 	background-position: -80px;
 }
+
 .tundra .dijitCheckBoxCheckedHover {
-	
+	/* hovering over a checked enabled checkbox */
 	background-position: -64px;
 }
diff --git a/lib/dijit/themes/tundra/form/Common.css b/lib/dijit/themes/tundra/form/Common.css
index 999eb22ee..201368639 100644
--- a/lib/dijit/themes/tundra/form/Common.css
+++ b/lib/dijit/themes/tundra/form/Common.css
@@ -1,48 +1,76 @@
 
+/****
+		dijit.form.TextBox
+		dijit.form.ValidationTextBox
+		dijit.form.SerializableTextBox
+		dijit.form.RangeBoundTextBox
+		dijit.form.NumberTextBox
+		dijit.form.CurrencyTextBox
+		dijit.form.NumberSpinner
+		dijit.form.ComboBox (partial)
+ ****/
+
 .tundra .dijitInputContainer INPUT,
 .tundra .dijitTextBox {
-	margin: 0em 0.1em;
+	margin: 0 0.1em;
 }
+
 .tundra .dijitTextArea {
 	padding: 3px;
 }
+
 .tundra .dijitTextBox {
-	
+	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
+		For TextBox, ComboBox, Spinner: the div that contains the input.
+		Otherwise the actual input element.
+	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
 	border:1px solid #b3b3b3;
 }
+
+/* ComboBox specific rules*/
 .tundra .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
 .tundra .dijitTextBox .dijitButtonNode {
-	
+	/* line between the input area and the drop down button, and also between
+	 * the up and down buttons of a spinner
+	 */
 	border-color: #9b9b9b;
 }
+
 .tundra .dijitTextBoxFocused {
-	
+	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
 .tundra .dijitTextBoxFocused .dijitButtonNode {
 	border-color:#366dba;
 }
+
 .tundra .dijitError {
 	background-color:#f9f7ba;
 	background-image:none;
 }
+
 .tundra .dijitErrorFocused {
 	background-color:#f9f999;
 	background-image:none;
 }
+
+/* Validation errors  */
 .tundra .dijitValidationIcon {
-	
+	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
 }
+
+/* The highlight is shown in the ComboBox menu. */
 .tundra .dijitComboBoxHighlightMatch {
 	background-color:#a5beda;
 }
+
 .tundra .dijitFocusedLabel {
-	
+	/* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */
 	outline: 1px dotted #666666;
 }
diff --git a/lib/dijit/themes/tundra/form/RadioButton.css b/lib/dijit/themes/tundra/form/RadioButton.css
index 3044d0edb..4dfc0fa6d 100644
--- a/lib/dijit/themes/tundra/form/RadioButton.css
+++ b/lib/dijit/themes/tundra/form/RadioButton.css
@@ -1,7 +1,7 @@
 
-.tundra .dijitRadio,			
-.tundra .dijitRadioIcon	{		
-	background-image: url('../images/checkmark.png'); 
+.tundra .dijitRadio,			/* stand alone */
+.tundra .dijitRadioIcon	{		/* inside a toggle button */
+	background-image: url('../images/checkmark.png'); /* checkbox sprite image */
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
@@ -10,35 +10,43 @@
 }
 .dj_ie6 .tundra .dijitRadio,
 .dj_ie6 .tundra .dijitRadioIcon	{
-	background-image: url('../images/checkmark.gif'); 
+	background-image: url('../images/checkmark.gif'); /* checkbox sprite image */
 }
+
 .tundra .dijitToggleButton .dijitRadioIcon {
-	
+	/* for checkbox in a toggle button, override above setting to have no border */
 	background-image: url('../images/checkmarkNoBorder.png');
 }
 .dj_ie6 .tundra .dijitToggleButton .dijitRadioIcon {
 	background-image: url('../images/checkmarkNoBorder.gif');
 }
+
 .tundra .dijitRadio,
 .tundra .dijitRadioIcon {
-	
+	/* unselected */
 	background-position: -112px;
 }
+
 .tundra .dijitRadioDisabled {
-	
+	/* unselected and disabled */
 	background-position: -144px;
 }
+
 .tundra .dijitRadioHover {
-	
+	/* hovering over an unselected enabled radio button */
 	background-position: -176px;
 }
+
 .tundra .dijitRadioChecked,
 .tundra .dijitRadioCheckedHover,
 .tundra .dijitToggleButtonChecked .dijitRadioIcon {
-	
+	/* selected.  Since clicking a selected radio button doesn't change anything, there's
+	 * no hover effect on selected radio buttons.
+	 */
 	background-position: -96px;
 }
+
 .tundra .dijitRadioCheckedDisabled {
-	
+	/* selected but disabled */
 	background-position: -128px;
 }
diff --git a/lib/dijit/themes/tundra/form/Select.css b/lib/dijit/themes/tundra/form/Select.css
index 072b1204a..b0290167a 100644
--- a/lib/dijit/themes/tundra/form/Select.css
+++ b/lib/dijit/themes/tundra/form/Select.css
@@ -1,9 +1,11 @@
 .tundra .dijitSelect .dijitButtonNode {
-	padding: 0px;
+	padding: 0;
 }
 .tundra .dijitSelect .dijitButtonNode .dijitArrowButtonInner {
-	margin: 0px 4px 0px 5px;
+	margin: 0 4px 0 5px;
 }
+
+/* Make unselected content portion "look" more like a text box and less like a button */
 .tundra .dijitSelect .dijitButtonContents {
 	padding-top: 1px;
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
@@ -17,8 +19,10 @@
 	background: transparent none;
 }
 .dj_ie .tundra .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
+	padding-top: 0;
 }
+
+/* Mirror DropDownButton */
 .tundra .dijitSelectDisabled .dijitButtonNode {
 	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
 	background:#e4e4e4 url("../images/buttonDisabled.png") top repeat-x;
@@ -26,6 +30,7 @@
 .dj_ie .tundra .dijitSelectDisabled  .dijitButtonNode * {
 	filter: gray() alpha(opacity=50);
 }
+
 .tundra .dijitSelectHover .dijitButtonNode {
 	border-color:#a5beda;
 	border-bottom-color:#5c7590;
@@ -33,15 +38,20 @@
 	color:#243C5F;
 	background:#fcfdff url("../images/buttonHover.png") repeat-x bottom;
 }
+
 .tundra .dijitSelectActive .dijitButtonNode,
 .tundra .dijitSelectOpened .dijitButtonNode {
 	border-color:#366dba;
 	background: #ededed url("../images/buttonActive.png") bottom repeat-x;
 }
+
+/* Make the menu look more combobox-like */
 .tundra .dijitSelectMenu td {
-	padding: 0em;
+	padding: 0;
 }
 .tundra .dijitSelectMenu .dijitMenuItemLabel,
 .tundra .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
+
+
diff --git a/lib/dijit/themes/tundra/form/Slider.css b/lib/dijit/themes/tundra/form/Slider.css
index b2c2b69f8..7465e8377 100644
--- a/lib/dijit/themes/tundra/form/Slider.css
+++ b/lib/dijit/themes/tundra/form/Slider.css
@@ -2,26 +2,32 @@
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .tundra .dijitSliderProgressBarV {
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .tundra .dijitSliderFocused .dijitSliderProgressBarH,
 .tundra .dijitSliderFocused .dijitSliderLeftBumper {
 	background-image:url("../images/sliderFullFocus.png");
 }
+
 .tundra .dijitSliderFocused .dijitSliderProgressBarV,
 .tundra .dijitSliderFocused .dijitSliderBottomBumper {
 	background-image:url("../images/sliderFullVerticalFocus.png");
 }
+
 .tundra .dijitSliderRemainingBarV {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y bottom left;
 }
+
 .tundra .dijitSliderRemainingBarH {
 	border-color: #b4b4b4;
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 }
+
 .tundra .dijitSliderBar {
 	border-style: solid;
 	outline:1px;
@@ -29,8 +35,9 @@
 .tundra .dijitSliderFocused .dijitSliderBar {
 	border-color:#888;
 }
+
 .tundra .dijitSliderImageHandleH {
-	border:0px;
+	border:0;
 	width:16px;
 	height:16px;
 	background:url("../images/preciseSliderThumb.png") no-repeat center top;
@@ -39,41 +46,49 @@
 	background-image:url("../images/preciseSliderThumbFocus.png");
 	#background-image:url("../images/preciseSliderThumbFocus.gif");
 }
+
 .dj_ie6 .tundra .dijitSliderImageHandleH {
 	background-image:url("../images/preciseSliderThumb.gif");
 }
+
 .tundra .dijitSliderLeftBumper {
 	border-left-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFull.png") repeat-x top left;
 }
+
 .tundra .dijitSliderRightBumper {
 	background: #dcdcdc url("../images/sliderEmpty.png") repeat-x top left;
 	border-color: #b4b4b4;
 	border-right-width: 1px;
 }
+
 .tundra .dijitSliderImageHandleV {
-	border:0px;
+	border:0;
 	width:16px;
 	height:16px;
 	background:url("../images/sliderThumb.png") no-repeat center center;
 }
+
 .tundra .dijitSliderFocused .dijitSliderImageHandleV {
 	background-image:url("../images/sliderThumbFocus.png");
 }
 .dj_ie6 .tundra .dijitSliderFocused .dijitSliderImageHandleV {
 	background-image:url("../images/sliderThumbFocus.gif");
 }
+
 .tundra .dijitSliderBottomBumper {
 	border-bottom-width: 1px;
 	border-color: #aab0bb;
 	background: #c0c2c5 url("../images/sliderFullVertical.png") repeat-y bottom left;
 }
+
 .tundra .dijitSliderTopBumper {
 	background: #dcdcdc url("../images/sliderEmptyVertical.png") repeat-y top left;
 	border-color: #b4b4b4;
 	border-top-width: 1px;
 }
+
 .tundra .dijitSliderDecrementIconH,
 .tundra .dijitSliderDecrementIconV,
 .tundra .dijitSliderIncrementIconH,
@@ -91,21 +106,24 @@
 .dj_ie6 .tundra .dijitSliderIncrementIconV {
 	background-image: url('../images/spriteArrows.gif');
 }
+
 .tundra .dijitSliderDecrementIconH {
-	background-position: -7px 0px;
+	background-position: -7px 0;
 }
 .tundra .dijitSliderIncrementIconH {
-	background-position: -14px 0px;
+	background-position: -14px 0;
 }
 .tundra .dijitSliderDecrementIconV {
-	background-position: 0px 0px;
+	background-position: 0 0;
 }
 .tundra .dijitSliderIncrementIconV {
-	background-position: -21px 0px;
+	background-position: -21px 0;
 }
+
 .tundra .dijitSliderButtonInner {
 	visibility:hidden;
 }
+
 .tundra .dijitSliderReadOnly *,
 .tundra .dijitSliderDisabled * {
 	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
@@ -113,17 +131,17 @@
 }
 .tundra .dijitSliderReadOnly .dijitSliderDecrementIconH,
 .tundra .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: -35px 0px;
+	background-position: -35px 0;
 }
 .tundra .dijitSliderReadOnly .dijitSliderIncrementIconH,
 .tundra .dijitSliderDisabled .dijitSliderIncrementIconH {
-	background-position: -42px 0px;
+	background-position: -42px 0;
 }
 .tundra .dijitSliderReadOnly .dijitSliderDecrementIconV,
 .tundra .dijitSliderDisabled .dijitSliderDecrementIconV {
-	background-position: -28px 0px;
+	background-position: -28px 0;
 }
 .tundra .dijitSliderReadOnly .dijitSliderIncrementIconV,
 .tundra .dijitSliderDisabled .dijitSliderIncrementIconV {
-	background-position: -49px 0px;
-}
+	background-position: -49px 0;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/form/Slider_rtl.css b/lib/dijit/themes/tundra/form/Slider_rtl.css
index 979eed651..9375c4ecb 100644
--- a/lib/dijit/themes/tundra/form/Slider_rtl.css
+++ b/lib/dijit/themes/tundra/form/Slider_rtl.css
@@ -5,22 +5,27 @@
 .tundra .dijitSliderRtl .dijitSliderTopBumper {
 	background-position: top right;
 }
+
 .tundra .dijitSliderRtl .dijitSliderProgressBarV,
 .tundra .dijitSliderRtl .dijitSliderRemainingBarV,
 .tundra .dijitSliderRtl .dijitSliderBottomBumper {
 	background-position: bottom right;
 }
+
 .tundra .dijitSliderRtl .dijitSliderLeftBumper {
-	border-left-width: 0px;
+	border-left-width: 0;
 	border-right-width: 1px;
 }
+
 .tundra .dijitSliderRtl .dijitSliderRightBumper {
 	border-left-width: 1px;
-	border-right-width: 0px;
+	border-right-width: 0;
 }
+
 .tundra .dijitSliderRtl .dijitSliderIncrementIconH {
-	background-position: -7px 0px;
+	background-position: -7px 0;
 }
+
 .tundra .dijitSliderRtl .dijitSliderDecrementIconH {
-	background-position: -14px 0px;
+	background-position: -14px 0;
 }
diff --git a/lib/dijit/themes/tundra/layout/AccordionContainer.css b/lib/dijit/themes/tundra/layout/AccordionContainer.css
index 6479956e6..c5621efab 100644
--- a/lib/dijit/themes/tundra/layout/AccordionContainer.css
+++ b/lib/dijit/themes/tundra/layout/AccordionContainer.css
@@ -1,20 +1,26 @@
+/* Accordion */
 
 .tundra .dijitAccordionContainer {
 	border-color: #ccc;
 	background-color: #fff;
 }
+
+/* common */
+
 .tundra .dijitAccordionTitle {
 	background:#fafafa url("../images/titleBar.png") repeat-x bottom left;
 	border-top: 1px solid #bfbfbf;
 	padding: 4px 4px 4px 8px;
 }
+
 .tundra .dijitAccordionTitleHover  {
 	background: #f8fafd url("../images/accordionItemHover.gif") bottom repeat-x;
 }
+
 .tundra .dijitAccordionTitleSelected  {
 	background: #f9f9f9 url("../images/accordionItemActive.gif") bottom repeat-x;
 	font-weight: bold;
 	border-top: 1px solid #aaaaaa;
 	border-bottom: 1px solid #bfbfbf;
 	padding: 4px 4px 4px 8px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/layout/BorderContainer.css b/lib/dijit/themes/tundra/layout/BorderContainer.css
index 076460f15..0dd1b1b51 100644
--- a/lib/dijit/themes/tundra/layout/BorderContainer.css
+++ b/lib/dijit/themes/tundra/layout/BorderContainer.css
@@ -1,49 +1,63 @@
+/* BorderContainer */
 
 .tundra .dijitBorderContainer {
 	background-color: #fcfcfc;
 	padding: 5px;
 }
+
 .tundra .dijitSplitContainer-child,
 .tundra .dijitBorderContainer-child {
-	
+	/* By default put borders on all children of BorderContainer,
+	 *  to give illusion of borders on the splitters themselves.
+	 */
 	border: 1px #ccc solid;
 }
+
 .tundra .dijitBorderContainer-dijitTabContainerTop,
 .tundra .dijitBorderContainer-dijitTabContainerBottom,
 .tundra .dijitBorderContainer-dijitTabContainerLeft,
 .tundra .dijitBorderContainer-dijitTabContainerRight {
-	
+	/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+	 * so override rule setting border on domNode
+	 */
 	 border: none;
 }
+
 .tundra .dijitBorderContainer-dijitBorderContainer {
-	
+	/* also, make nested BorderContainers look like a single big widget with lots of splitters */
 	border: none;
-	padding: 0px;
+	padding: 0;
 }
+
 .tundra .dijitSplitterH,
 .tundra .dijitGutterH {
 	background:#fcfcfc;
 	border:0;
 	height:5px;
 }
+
 .tundra .dijitSplitterH .dijitSplitterThumb {
 	background:#B0B0B0 none;
 	height:1px;
 	top:2px;
 	width:19px;
 }
+
 .tundra .dijitSplitterV,
 .tundra .dijitGutterV {
 	background:#fcfcfc;
 	border:0;
 	width:5px;
 }
+
 .tundra .dijitSplitterV .dijitSplitterThumb {
 	background:#B0B0B0 none;
 	height:19px;
 	left:2px;
 	width:1px;
 }
+
+/* active splitter */
 .tundra .dijitSplitterActive {
 	font-size: 1px;
 	background-image: none;
diff --git a/lib/dijit/themes/tundra/layout/ContentPane.css b/lib/dijit/themes/tundra/layout/ContentPane.css
index 8b470b938..21d25d524 100644
--- a/lib/dijit/themes/tundra/layout/ContentPane.css
+++ b/lib/dijit/themes/tundra/layout/ContentPane.css
@@ -1,7 +1,10 @@
+/* ContentPane */
 
 .tundra .dijitContentPane {
-	padding: 0px;
+	padding: 0;
 }
+
+/* nested layouts */
 .tundra .dijitTabContainerTop-dijitContentPane,
 .tundra .dijitTabContainerLeft-dijitContentPane,
 .tundra .dijitTabContainerBottom-dijitContentPane,
@@ -10,8 +13,9 @@
 	background-color: #fff;
 	padding: 5px;
 }
+
 .tundra .dijitSplitContainer-dijitContentPane,
 .tundra .dijitBorderContainer-dijitContentPane {
-	background-color: #fff;		
+	background-color: #fff;		/* override background-color setting on parent .dijitBorderContainer */
 	padding: 5px;
-}
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/tundra/layout/SplitContainer.css b/lib/dijit/themes/tundra/layout/SplitContainer.css
index 278503116..5a3eed6c9 100644
--- a/lib/dijit/themes/tundra/layout/SplitContainer.css
+++ b/lib/dijit/themes/tundra/layout/SplitContainer.css
@@ -5,6 +5,7 @@
 	border-right:1px solid #bfbfbf;
 	width:7px;
 }
+
 .tundra .dijitSplitContainerSizerH .thumb {
 	background:url("../images/splitContainerSizerV-thumb.png") no-repeat #ccc;
 	left:1px;
@@ -12,6 +13,7 @@
 	height:19px;
 	overflow: hidden;
 }
+
 .tundra .dijitSplitContainerSizerV {
 	background:url("../images/splitContainerSizerH.png") repeat-x #fff;
 	border:0;
@@ -19,6 +21,7 @@
 	border-bottom:1px solid #bfbfbf;
 	height:7px;
 }
+
 .tundra .dijitSplitContainerSizerV .thumb {
 	background:url("../images/splitContainerSizerH-thumb.png") no-repeat #ccc;
 	top:1px;
diff --git a/lib/dijit/themes/tundra/layout/TabContainer.css b/lib/dijit/themes/tundra/layout/TabContainer.css
index 8e859b9b4..667da4ad9 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer.css
@@ -1,42 +1,51 @@
-
+/* Tabs, shared classes */
 .tundra .dijitTabPaneWrapper {
 	background:#fff;
 	border:1px solid #ccc;
 	margin: 0;
 	padding: 0;
 }
+
 .tundra .dijitTab {
 	line-height:normal;
-	margin-right:4px;	
-	padding:0px;
+	margin-right:4px;	/* space between one tab and the next in top/bottom mode */
+	padding:0;
 	border:1px solid #ccc;
 	background:#e2e2e2 url("../images/tabEnabled.png") repeat-x;
 }
+
 .tundra .dijitTabInnerDiv {
 	padding:2px 8px 2px 9px;
 }
+
 .tundra .dijitTabSpacer {
 	display: none;
 }
+
 .tundra .dijitTabContainer .tabStripRBtn {
 	margin-right: 20px;
 }
 .tundra .dijitTabContainer .tabStripLBtn {
 	margin-left: 20px;
 }
+
 .tundra .nowrapTabStrip .dijitTab {
 	top: 2px;
 }
 .tundra .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
-	top: 0px;
+	top: 0;
 	bottom: 2px;
 }
+
+/* checked tab*/
 .tundra .dijitTabChecked {
-	
+	/* the selected tab (with or without hover) */
 	background-color:#fff;
 	border-color: #ccc;
 	background-image:none;
 }
+
+/* hovered tab */
 .tundra .dijitTabHover {
 	color: #243C5F;
 	border-top-color:#92a0b3;
@@ -45,38 +54,49 @@
 	border-bottom-color:#92a0b3;
 	background:#e2e2e2 url("../images/tabHover.gif") repeat-x;
 }
+
 .tundra .dijitTabContainerTop .dijitTabHover {
 	border-bottom-color:#ccc;
 }
+
 .tundra .dijitTabContainerBottom .dijitTabHover {
 	border-top-color:#ccc;
 }
+
 .tundra .dijitTabContainerLeft .dijitTabHover {
 	border-right-color:#ccc;
 }
+
 .tundra .dijitTabContainerRight .dijitTabHover {
 	border-left-color:#ccc;
 }
+
 .tundra .dijitTabContainer .dijitTabCheckedHover {
 	color: inherit;
 	border:1px solid #ccc;
 	background:#fff;
 }
+
 .tundra .dijitTab .tabLabel {
-	
+	/* make sure tabs w/close button and w/out close button are same height, even w/small (<12px) font */
 	min-height: 12px;
 	display: inline-block;
 }
+
+/* Nested Tabs */
+
 .tundra .dijitTabContainerNested .dijitTabListWrapper {
 	height: auto;
 }
+
 .tundra .dijitTabContainerNested .dijitTabContainerTop-tabs {
 	border-bottom: 1px solid #CCC;
 }
+
 .tundra .dijitTabContainerTabListNested .dijitTab {
 	background: none;
 	border: none;
-	top: 0px;		
+	top: 0;		/* to override top: 1px/-1px for normal tabs */
 }
 .tundra .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
 }
@@ -86,11 +106,14 @@
 .tundra .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent .tabLabel {
 	text-decoration: underline;
 	font-weight: bold;
-	
+	/*background:#f3f3f3;*/
 }
 .tundra .dijitTabContainer .dijitTabPaneWrapperNested {
-	border: none;	
+	border: none;	/* prevent double border */
 }
+
+/* Close button */
+
 .tundra .dijitTabCloseButton {
 	background: url("../images/tabClose.png") no-repeat right top;
 	width: 12px;
@@ -99,33 +122,45 @@
 .dj_ie6 .tundra .dijitTabCloseButton {
 	background-image : url("../images/tabClose.gif");
 }
+
 .tundra .dijitTabCloseButtonHover {
 	background-image : url("../images/tabCloseHover.png");
 }
 .dj_ie6 .tundra .dijitTabCloseButtonHover {
 	background-image : url("../images/tabCloseHover.gif");
 }
+
+/* ================================ */
+/* top tabs */
+
 .tundra .dijitTabContainerTop-tabs {
-	margin-bottom: 0px;
+	margin-bottom: 0;
 	border-color: #cccccc;
 	padding-left: 3px;
 	background-position: bottom;
 }
 .tundra .dijitTabContainerTop-tabs .dijitTab {
-	top: 0px;
+	top: 0;
 	margin-bottom: -1px;
 }
+
+/* top container */
 .tundra .dijitTabContainerTop-container {
 	border-top: none;
 }
+
+/* checked tabs */
 .tundra .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color:white;
 }
+
 .tundra .dijitTabContainerTop-tabs,
 .tundra .dijitTabContainerBottom-tabs {
 	padding-left: 3px;
 	padding-right: 3px;
 }
+
+/* strip */
 .tundra .dijitTabContainerTopStrip {
 	border-top: 1px solid #CCC;
 	border-right: 1px solid #CCC;
@@ -133,96 +168,142 @@
 	padding-top: 2px;
 	background: #f2f2f2;
 }
+
 .tundra .dijitTabContainerTopNone {
-	padding-top: 0px;
+	padding-top: 0;
 }
+
+
+/* ================================ */
+/* bottom tabs */
 .tundra .dijitTabContainerBottom-tabs {
-	margin-top: 0px;
+	margin-top: 0;
 	border-color: #cccccc;
 	background-position: top;
 	padding-left: 3px;
 }
 .tundra .dijitTabContainerBottom-tabs .dijitTab {
-	bottom: 0px;
+	bottom: 0;
 	margin-top: -1px;
 }
+
+/* bottom container */
 .tundra .dijitTabContainerBottom-container {
 	border-bottom: none;
 }
+
+/* checked tabs */
 .tundra .dijitTabContainerBottom-tabs .dijitTabChecked {
 	border-top-color:white;
 }
+
+/* strip */
 .tundra .dijitTabContainerBottomStrip {
 	padding-bottom: 2px;
 	border: 1px solid #ccc;
 	background: #f2f2f2;
 	border-top: none;
 }
+
+/* ================================ */
+/* right tabs */
 .tundra .dijitTabContainerRight-tabs {
 	border-color: #ccc;
 	height: 100%;
 	padding-top: 3px;
 }
+
 .tundra .dijitTabContainerRightStrip {
 	margin-left: -1px;
 }
+
+/* right container */
 .tundra .dijitTabContainerRight-container {
 	border-right: none;
 }
+
+/* checked tabs */
 .tundra .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color:white;
 }
+
+/* strip */
 .tundra .dijitTabContainerRightStrip {
 	padding-right: 2px;
 	border: 1px solid #ccc;
 }
+
 .tundra .dijitTabContainerRightStrip {
 	background: #f2f2f2;
 }
+
+/* ================================ */
+/* left tabs */
 .tundra .dijitTabContainerLeft-tabs {
 	border-color: #ccc;
 	padding-top: 3px;
 	height: 100%;
 }
+
+/* left conatiner */
 .tundra .dijitTabContainerLeft-container {
 	border-left: none;
 }
+
+/* checked tabs */
 .tundra .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right-color:white;
 }
+
+/* strip */
 .tundra .dijitTabContainerLeftStrip {
 	padding-left: 2px;
 	border: 1px solid #ccc;
 	background: #f2f2f2;
 	border-right: none;
 }
+
+/* ================================ */
+/* left/right tabs */
 .tundra .dijitTabContainerLeft-tabs .dijitTab,
 .tundra .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:0px;
-	margin-bottom:4px;	
+	margin-right:0;
+	margin-bottom:4px;	/* space between one tab and the next in left/right mode */
 }
+
+/* ================================ */
+
+/* this resets the tabcontainer stripe when within a contentpane */
 .tundra .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
+	border-left: 0 solid #ccc;
+	border-top: 0 solid #ccc;
+	border-right: 0 solid #ccc;
+	padding-top: 0;
+	padding-left: 0;
 }
+
+/* ================================ */
+
+/* Menu and slider control styles */
 .tundra .dijitTabContainer .tabStripButton {
 	margin-right: 0;
 	padding-top: 2px;
 	z-index: 12;
 }
+
 .tundra .dijitTabContainerBottom .tabStripButton {
 	padding-top: 2px;
 }
+
 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
 	padding-bottom: 3px;
 	padding-top: 1px;
 }
+
 .tundra .tabStripButton .dijitTabInnerDiv {
 	padding: 3px 2px 4px 2px;
 }
+
 .dj_ie6 .tundra .tabStripButton .dijitTabInnerDiv,
 .dj_ie7 .tundra .tabStripButton .dijitTabInnerDiv,
 .dj_opera .tundra .tabStripButton .dijitTabInnerDiv {
@@ -233,17 +314,22 @@
 .dj_opera .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
 	padding-bottom: 4px;
 }
+
 .tundra .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
 	background: url(../images/spriteRoundedIconsSmall.png) no-repeat left top ;
 }
+
 .dj_ie6 .tundra .dijitTabStripIcon {
 	background-image: url(../images/spriteRoundedIconsSmall.gif);
 }
+
 .tundra .dijitTabStripSlideRightIcon {
 	background-position: -30px top;
 }
+
 .tundra .dijitTabStripMenuIcon {
 	background-position: -15px top;
 }
+
diff --git a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
index 1811a5b6c..fb8e28e9b 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
@@ -2,37 +2,50 @@
 	-moz-box-orient:horizontal;
 	text-align: right;
 }
+
 .tundra .dijitTabRtl .dijitTabInnerDiv {
 	padding:2px 9px 2px 8px;
 }
+
 .tundra .tabStrip-disabled .tabStripButtonRtl .dijitTabInnerDiv {
-	
+	/* this is not special for RTL mode, but just here to override rule above (for enabled tabstrip) */
 	padding-bottom: 3px;
 	padding-top: 1px;
 }
+
 .tundra .tabStripButtonRtl .dijitTabInnerDiv {
 	padding: 3px 2px 4px 2px;
 }
+
 .tundra .dijitTabPaneWrapper {
 	#zoom: 1;
 }
+
 .dj_ie-rtl .tundra .dijitTabContainerLeft-tabs {
 	margin-left: 1px !important;
 }
+
 .dj_ie-rtl .tundra .dijitTabContainerRight-tabs {
 	margin-right: 1px !important;
 }
+
 .tundra .dijitTabContainerLeft-tabs .dijitTabRtl,
 .tundra .dijitTabContainerRight-tabs .dijitTabRtl {
-	margin-left:0px;
+	margin-left:0;
 }
+
 .dj_ie .tundra .dijitTabRtl .dijitTabInnerDiv {
-	
+	/* without this the tab label and icon become invisible, as though they were set to visibility:hidden */
 	width : 0.1% !important;
 }
+
+
+
 .dj_iequirks-rtl .tundra .dijitTabContainerTopNone,
 .dj_iequirks-rtl .tundra .dijitTabContainerBottomNone {
-	
+	/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
+	 * "Closable" tab, where the other tabs disappear
+	 */
 	border-left: 1px solid #fff;
 	border-right: 1px solid #fff;
 }
diff --git a/lib/dijit/themes/tundra/tundra.css b/lib/dijit/themes/tundra/tundra.css
index ee23609b6..f1d239c88 100644
--- a/lib/dijit/themes/tundra/tundra.css
+++ b/lib/dijit/themes/tundra/tundra.css
@@ -1,3437 +1,41 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitReset {
-	
-	margin:0;
-	border:0;
-	padding:0;
-	line-height:normal;
-	font: inherit;
-	color: inherit;
-}
-.dijit_a11y .dijitReset {
-	-moz-appearance: none; 
-}
-.dijitInline {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-	border:0;
-	padding:0;
-	vertical-align:middle;
-	#vertical-align: auto;	
-}
-.dijitHidden {
-	
-	display: none !important;
-}
-.dijitVisible {
-	
-	display: block !important;	
-	position: relative;			
-}
-.dijitInputContainer {
-	
-	#zoom: 1;
-	overflow: hidden;
-	float: none !important; 
-	position:relative;
-}
-.dj_ie INPUT.dijitTextBox,
-.dj_ie .dijitTextBox INPUT {
-	font-size: 100%;
-}
-.dijitTextBox .dijitSpinnerButtonContainer,
-.dijitTextBox .dijitArrowButtonContainer,
-.dijitTextBox .dijitValidationContainer {
-	float: right;
-	text-align: center;
-}
-.dijitTextBox INPUT.dijitInputField {
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-}
-.dijitTextBox .dijitValidationContainer {
-	display: none;
-}
-.dijitInlineTable {
-	
-	display:inline-table;
-	display:inline-block;		
-	#zoom: 1; 
-	#display:inline; 
-	box-sizing: content-box; -moz-box-sizing: content-box;
-	border:0;
-	padding:0;
-}
-.dijitTeeny {
-	font-size:1px;
-	line-height:1px;
-}
-.dijitOffScreen {
-	position: absolute;
-	visibility: hidden;
-	left: 50%;
-	top: -10000px;
-}
-.dijitPopup {
-	position: absolute;
-	background-color: transparent;
-	margin: 0;
-	border: 0;
-	padding: 0;
-}
-.dijit_a11y .dijitPopup,
-.dijit_ally .dijitPopup DIV,
-.dijit_a11y .dijitPopup TABLE,
-.dijit_a11y .dijitTooltipContainer {
-	background-color: white !important;
-}
-.dijitPositionOnly {
-	
-	padding: 0 !important;
-	border: 0 !important;
-	background-color: transparent !important;
-	background-image: none !important;
-	height: auto !important;
-	width: auto !important;
-}
-.dijitNonPositionOnly {
-	
-	float: none !important;
-	position: static !important;
-	margin: 0 0 0 0 !important;
-	vertical-align: middle !important;
-}
-.dijitBackgroundIframe {
-	
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-.dijitDisplayNone {
-	
-	display:none !important;
-}
-.dijitContainer {
-	
-	overflow: hidden;	
-}
-.dijit_a11y * {
-	background-image:none !important;
-}
-.dijit_a11y .dijitIcon,
-.dijit_a11y DIV.dijitArrowButtonInner, 
-.dijit_a11y SPAN.dijitArrowButtonInner,
-.dijit_a11y IMG.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl {
-	
-	display: none;
-}
-.dijitSpinner DIV.dijitArrowButtonInner {
-	display: block; 
-}
-.dijit_a11y .dijitA11ySideArrow {
-	display: inline !important; 
-	cursor: pointer;
-}
-.dijit_a11y .dijitCalendarDateLabel {
-	padding: 1px;
-}
-.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
-	border-style: dotted !important;
-	border-width: 1px;
-	padding: 0px;
-}
-.dijit_a11y .dijitCalendarDateTemplate {
-	padding-bottom: 0.1em !important;	
-}
-.dijit_a11y .dijit * {
-	background:white !important;
-	color:black !important;
-}
-.dijit_a11y .dijitButtonNode {
-	border-color: black!important;
-	border-style: outset!important;
-	border-width: medium!important;
-}
-.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
-.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitButtonNode * {
-	vertical-align: middle;
-}
-.dijitButtonNode .dijitArrowButtonInner {
-	
-	background: no-repeat center;
-	width: 12px;
-	height: 12px;
-	direction: ltr; 
-}
-.dijitLeft {
-	
-	background-position:left top;
-	background-repeat:no-repeat;
-}
-.dijitStretch {
-	
-	white-space:nowrap;			
-	background-repeat:repeat-x;
-}
-.dijitRight {
-	
-	#display:inline;				
-	background-position:right top;
-	background-repeat:no-repeat;
-}
-.dijitToggleButton,
-.dijitButton,
-.dijitDropDownButton,
-.dijitComboButton {
-	
-	margin: 0.2em;
-}
-.dijitButtonContents {
-	display: block;		
-}
-td.dijitButtonContents {
-	display: table-cell;	
-}
-.dijitButtonNode IMG {
-	
-	vertical-align:middle;
-	
-}
-TABLE.dijitComboButton { 
-	
-	border-collapse: collapse;
-	border:0;
-	padding:0;
-	margin:0;
-}
-.dijitToolbar .dijitComboButton {
-	
-	border-collapse: separate;
-}
-.dijitToolbar .dijitToggleButton,
-.dijitToolbar .dijitButton,
-.dijitToolbar .dijitDropDownButton,
-.dijitToolbar .dijitComboButton {
-	margin: 0;
-}
-.dijitToolbar .dijitButtonContents {
-	
-	padding: 1px 2px;
-}
-.dj_ie .dijitComboButton {
-	
-	margin-bottom: -3px;
-}
-.dj_webkit .dijitToolbar .dijitDropDownButton {
-	padding-left: 0.3em;
-}
-.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
-	padding:0;
-}
-.dijitButtonNode {
-	
-	border:1px solid gray;
-	margin:0;
-	line-height:normal;
-	vertical-align: middle;
-	#vertical-align: auto;
-	text-align:center;
-	white-space: nowrap;
-}
-.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
-	
-	line-height:inherit;
-}
-.dijitTextBox .dijitButtonNode {
-	border-width: 0;
-}
-.dijitButtonNode,
-.dijitButtonNode * {
-	cursor: pointer;
-}
-.dj_ie .dijitButtonNode {
-	
-	zoom: 1;
-}
-.dj_ie .dijitButtonNode button {
-	
-	overflow: visible;
-}
-DIV.dijitArrowButton {
-	float: right;
-}
-.dijitTextBox {
-	border: solid black 1px;
-	#overflow: hidden; 
-	width: 15em;	
-	vertical-align: middle;
-	#vertical-align: auto;
-}
-.dijitTextBoxReadOnly,
-.dijitTextBoxDisabled {
-	color: gray;
-}
-.dj_webkit .dijitTextBoxDisabled INPUT {
-	color: #eee; 
-}
-.dj_webkit TEXTAREA.dijitTextAreaDisabled {
-	color: #333; 
-}
-.dj_gecko .dijitTextBoxReadOnly INPUT,
-.dj_gecko .dijitTextBoxDisabled INPUT {
-	-moz-user-input: none; 
-}
-.dijitPlaceHolder {
-	
-	color: #AAAAAA;
-	font-style: italic;
-	position: absolute;
-	top: 0;
-	left: 0;
-	#filter: ""; 
-}
-.dijitTimeTextBox {
-	width: 8em;
-}
-.dijitTextBox INPUT:focus {
-	outline: none;	
-}
-.dijitTextBoxFocused {
-	outline: auto 5px -webkit-focus-ring-color;
-}
-.dijitTextBox INPUT {
-	float: left; 
-}
-.dijitInputInner {
-	
-	border:0 !important;
-	vertical-align:middle !important;
-	background-color:transparent !important;
-	width:100% !important;
-	
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-}
-.dijit_a11y .dijitTextBox INPUT {
-	margin: 0 !important;
-}
-.dijitTextBoxError INPUT.dijitValidationInner,
-.dijitTextBox INPUT.dijitArrowButtonInner {
-	
-	text-indent: -1em !important;
-	direction: ltr !important;
-	text-align: left !important;
-	height: auto !important;
-	#text-indent: 0 !important;
-	#letter-spacing: -5em !important;
-	#text-align: right !important;
-}
-.dj_ie .dijitTextBox INPUT,
-.dj_ie INPUT.dijitTextBox {
-	overflow-y: visible; 
-	line-height: normal; 
-}
-.dj_ie7 .dijitTextBox INPUT.dijitValidationInner,
-.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner {
-	line-height: 86%; 
-}
-.dj_ie6 .dijitTextBox INPUT,
-.dj_ie6 INPUT.dijitTextBox,
-.dj_iequirks .dijitTextBox INPUT.dijitValidationInner,
-.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner,
-.dj_iequirks .dijitTextBox INPUT.dijitInputInner,
-.dj_iequirks INPUT.dijitTextBox {
-	line-height: 100%; 
-}
-.dijit_a11y INPUT.dijitValidationInner,
-.dijit_a11y INPUT.dijitArrowButtonInner {
-	
-	text-indent: 0 !important;
-	width: 1em !important;
-	#text-align: left !important;
-}
-.dijitTextBoxError .dijitValidationContainer {
-	display: inline;
-	cursor: default;
-}
-.dijitSpinner .dijitSpinnerButtonContainer,
-.dijitComboBox .dijitArrowButtonContainer {
-	
-	border-width: 0 0 0 1px !important; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	
-	border-width: 0;
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
-	clear: both; 
-}
-.dijit_a11y .dijitTextBox .dijitValidationContainer,
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBox .dijitArrowButtonContainer {
-	
-	border: solid black !important;
-	border-width: 0 0 0 1px !important;
-}
-.dj_ie .dijitToolbar .dijitComboBox {
-	
-	vertical-align: middle;
-}
-.dijitTextBox .dijitSpinnerButtonContainer {
-	width: 1em;
-	position: relative !important;
-	overflow: hidden;
-}
-.dijitSpinner .dijitSpinnerButtonInner {
-	width:1em;
-	visibility:hidden !important; 
-	overflow-x:hidden;
-}
-.dijitComboBox .dijitButtonNode,
-.dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 0;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border: 0 none !important;
-}
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
-.dijit_a11y .dijitSpinnerButtonContainer INPUT {
-	width: 1em !important;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
-	margin: 0 auto !important; 
-}
-.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.3em !important;
-	padding-right: 0.3em !important;
-	margin-left: 0.3em !important;
-	margin-right: 0.3em !important;
-	width: 1.4em !important;
-}
-.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding-left: 0.0em !important; 
-	padding-right: 0.0em !important;
-	width: 1em !important;
-}
-.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0.1em !important;
-	margin-right: 0.1em !important;
-	width: 1em !important;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-	width: 2em !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	
-	padding: 0;
-	position: absolute !important;
-	right: 0;
-	float: none;
-	height: 50%;
-	width: 100%;
-	bottom: auto;
-	left: 0;
-	right: auto;
-}
-.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: auto;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
-	overflow: visible !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
-	top: 50%;
-	border-top-width: 1px !important;
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
-	#bottom: 50%;	
-	top: 0;
-}
-.dijitSpinner .dijitArrowButtonInner {
-	margin: auto;
-	overflow-x: hidden;
-	height: 100% !important;
-}
-.dj_iequirks .dijitSpinner .dijitArrowButtonInner {
-	height: auto !important;
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	-moz-transform: scale(0.5);
-	-moz-transform-origin: center top;
-	-webkit-transform: scale(0.5);
-	-webkit-transform-origin: center top;
-	-o-transform: scale(0.5);
-	-o-transform-origin: center top;
-	transform: scale(0.5);
-	transform-origin: left top;
-	padding-top: 0;
-	padding-bottom: 0;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	width: 100%;
-}
-.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	zoom: 50%; 
-}
-.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
-	overflow: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 100%;
-}
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; 
-}
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	visibility: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	vertical-align:top;
-	visibility: visible;
-}
-.dijit_a11y .dijitSpinnerButtonContainer {
-	width: 1em;
-}
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0px 0px 0px;
-	border-style: solid !important;
-}
-.dijitCheckBox,
-.dijitRadio,
-.dijitCheckBoxInput {
-	padding: 0;
-	border: 0;
-	width: 16px;
-	height: 16px;
-	background-position:center center;
-	background-repeat:no-repeat;
-	overflow: hidden;
-}
-.dijitCheckBox INPUT,
-.dijitRadio INPUT {
-	margin: 0;
-	padding: 0;
-	display: block;
-}
-.dijitCheckBoxInput {
-	
-	opacity: 0.01;
-}
-.dj_ie .dijitCheckBoxInput {
-	filter: alpha(opacity=0);
-}
-.dijit_a11y .dijitCheckBox,
-.dijit_a11y .dijitRadio {
-	
-	width: auto !important;
-	height: auto !important;
-}
-.dijit_a11y .dijitCheckBoxInput {
-	opacity: 1;
-	filter: none;
-	width: auto;
-	height: auto;
-}
-.dijitProgressBarEmpty {
-	
-	position:relative;overflow:hidden;
-	border:1px solid black; 	
-	z-index:0;			
-}
-.dijitProgressBarFull {
-	
-	position:absolute;
-	overflow:hidden;
-	z-index:-1;
-	top:0;
-	width:100%;
-}
-.dj_ie6 .dijitProgressBarFull {
-	height:1.6em;
-}
-.dijitProgressBarTile {
-	
-	position:absolute;
-	overflow:hidden;
-	top:0;
-	left:0;
-	bottom:0;
-	right:0;
-	margin:0;
-	padding:0;
-	width:auto;
-	height:auto;
-	background-color:#aaa;
-	background-attachment: fixed;
-}
-.dijit_a11y .dijitProgressBarTile {
-	
-	border-width:2px;
-	border-style:solid;
-	background-color:transparent !important;
-}
-.dj_ie6 .dijitProgressBarTile {
-	
-	position:static;
-	
-	height:1.6em;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarLabel {
-	visibility:hidden;
-}
-.dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-}
-.dijitProgressBarIndeterminateHighContrastImage {
-	display:none;
-}
-.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
-	display:block;
-	position:absolute;
-	top:0;
-	bottom:0;
-	margin:0;
-	padding:0;
-	width:100%;
-	height:auto;
-}
-.dijitProgressBarLabel {
-	display:block;
-	position:static;
-	width:100%;
-	text-align:center;
-	background-color:transparent !important;
-}
-.dijitTooltip {
-	position: absolute;
-	z-index: 2000;
-	display: block;
-	
-	left: 50%;
-	top: -10000px;
-	overflow: visible;
-}
-.dijitTooltipContainer {
-	border: solid black 2px;
-	background: #b8b5b5;
-	color: black;
-	font-size: small;
-}
-.dijitTooltipFocusNode {
-	padding: 2px 2px 2px 2px;
-}
-.dijitTooltipConnector {
-	position: absolute;
-}
-.dijit_a11y .dijitTooltipConnector {
-	display: none;	
-}
-.dijitTooltipData {
-	display:none;
-}
-.dijitLayoutContainer {
-	position: relative;
-	display: block;
-	overflow: hidden;
-}
-body .dijitAlignTop,
-body .dijitAlignBottom,
-body .dijitAlignLeft,
-body .dijitAlignRight {
-	position: absolute;
-	overflow: hidden;
-}
-body .dijitAlignClient { position: absolute; }
-.dijitBorderContainer, .dijitBorderContainerNoGutter {
-	position:relative;
-	overflow: hidden;
-}
-.dijitBorderContainerPane,
-.dijitBorderContainerNoGutterPane {
-	position: absolute !important;	
-	z-index: 2;		
-}
-.dijitBorderContainer > .dijitTextArea {
-	
-	resize: none;
-}
-.dijitGutter {
-	
-	position: absolute;
-	font-size: 1px;		
-}
-.dijitSplitter {
-	position: absolute;
-	overflow: hidden;
-	z-index: 10;		
-	background-color: #fff;
-	border-color: gray;
-	border-style: solid;
-	border-width: 0;
-}
-.dj_ie .dijitSplitter {
-	z-index: 1;	
-}
-.dijitSplitterActive {
-	z-index: 11 !important;
-}
-.dijitSplitterCover {
-	position:absolute;
-	z-index:-1;
-	top:0;
-	left:0;
-	width:100%;
-	height:100%;
-}
-.dijitSplitterCoverActive {
-	z-index:3 !important;
-}
-.dj_ie .dijitSplitterCover {
-	background: white;
-	filter: alpha(opacity=0);
-}
-.dijitSplitterH {
-	height: 7px;
-	border-top:1px;
-	border-bottom:1px;
-	cursor: ns-resize;
-}
-.dijitSplitterV {
-	width: 7px;
-	border-left:1px;
-	border-right:1px;
-	cursor: ew-resize;
-}
-.dijitSplitContainer {
-	position: relative;
-	overflow: hidden;
-	display: block;
-}
-.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
-	outline-style:dotted;
-	outline-width: 2px;
-}
-.dijitSplitPane {
-	position: absolute;
-}
-.dijitSplitContainerSizerH,
-.dijitSplitContainerSizerV {
-	position:absolute;
-	font-size: 1px;
-	cursor: move;
-	cursor: w-resize;
-	background-color: ThreeDFace;
-	border: 1px solid;
-	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
-	margin: 0;
-}
-.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
-	overflow:hidden;
-	position:absolute;
-	top:49%;
-}
-.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
-	position:absolute;
-	left:49%;
-}
-.dijitSplitterShadow,
-.dijitSplitContainerVirtualSizerH,
-.dijitSplitContainerVirtualSizerV {
-	font-size: 1px;
-	background-color: ThreeDShadow;
-	-moz-opacity: 0.5;
-	opacity: 0.5;
-	filter: Alpha(Opacity=50);
-	margin: 0;
-}
-.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH {
-	cursor: w-resize;
-}
-.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
-	cursor: n-resize;
-}
-.dijit_a11y .dijitSplitterH {
-	border-top:1px solid #d3d3d3 !important;
-	border-bottom:1px solid #d3d3d3 !important;
-}
-.dijit_a11y .dijitSplitterV {
-	border-left:1px solid #d3d3d3 !important;
-	border-right:1px solid #d3d3d3 !important;
-}
-.dijitContentPane {
-	display: block;
-	overflow: auto;	
-}
-.dijitContentPaneSingleChild {
-	
-	overflow: hidden;
-}
-.dijitTitlePane {
-	display: block;
-	overflow: hidden;
-}
-.dijitTitlePaneTitle {
-	cursor: pointer;
-}
-.dijitFixedOpen {
-	
-	cursor: default;
-}
-.dijitTitlePaneTitle * {
-	vertical-align: middle;
-}
-.dijitTitlePane .dijitArrowNodeInner {
-	
-	display: none;
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
-	
-	display:inline !important;
-	font-family: monospace;		
-}
-.dijit_a11y .dijitTitlePane .dijitArrowNode {
-	
-	display:none;
-}
-.dj_ie6 .dijitTitlePaneContentOuter,
-.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
-	
-	zoom: 1;
-}
-.dijitColorPalette {
-	border: 1px solid #999;
-	background: #fff;
-	position: relative;
-}
-img.dijitColorPaletteUnder {
-	
-	border-style: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-.dijitColorPalette .dijitPaletteTable {
-	
-	padding: 2px 3px 3px 3px;
-	position: relative;
-	overflow: hidden;
-	outline: 0;
-	border-collapse: separate;
-}
-.dj_ie6 .dijitColorPalette .dijitPaletteTable,
-.dj_ie7 .dijitColorPalette .dijitPaletteTable,
-.dj_iequirks .dijitColorPalette .dijitPaletteTable {
-	
-	padding: 0;
-	margin: 2px 3px 3px 3px;
-}
-.dijitColorPalette .dijitPaletteCell {
-	
-	height: 20px;
-	width: 20px;
-	font-size: 1px;
-	vertical-align: middle;
-	text-align: center;
-}
-.dijitColorPalette .dijitPaletteImg {
-	
-	width: 16px;
-	height: 14px;
-	border: 1px solid #999;
-	cursor: default;
-	vertical-align: middle;
-}
-.dj_iequirks .dijitColorPalette .dijitPaletteImg {
-	margin: 1px;	
-}
-.dijitPaletteTable td {
-		padding: 0px;
-}
-.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	
-	border: 1px solid #000;
-}
-.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg,
-.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg {
-	border: 2px solid #000;
-}
-.dijit_a11y .dijitColorPalette .dijitPaletteTable,
-.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
-	
-	background-color: transparent !important;
-}
-.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg {
-	border: 3px dotted #000;	
-	margin: -1px;
-}
-.dijit_a11y  .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg {
-	border: 2px solid #000 !important;
-}
-.dijitAccordionContainer {
-	border:1px solid #b7b7b7;
-	border-top:0 !important;
-}
-.dijitAccordionTitle {
-	cursor: pointer;
-}
-.dijitAccordionTitleSelected {
-	cursor: default;
-}
-.dijitAccordionTitle .arrowTextUp,
-.dijitAccordionTitle .arrowTextDown {
-	display: none;
-	font-size: 0.65em;
-	font-weight: normal !important;
-}
-.dijit_a11y .dijitAccordionTitle .arrowTextUp,
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
-	display: inline;
-}
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
-	display: none;
-}
-.dj_ie6 .dijitAccordionTitle,
-.dj_iequirks .dijitAccordionTitle {
-	
-	zoom: 1;
-}
-.dijitCalendarContainer {
-	width: auto;	
-}
-.dijitCalendarContainer th, .dijitCalendarContainer td {
-	padding: 0;
-}
-.dijitCalendarNextYear {
-	margin:0 0 0 0.55em;
-}
-.dijitCalendarPreviousYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarIncrementControl {
-	vertical-align: middle;
-}
-.dijitCalendarIncrementControl,
-.dijitCalendarDateTemplate,
-.dijitCalendarMonthLabel,
-.dijitCalendarPreviousYear,
-.dijitCalendarNextYear {
-	cursor: pointer;
-}
-.dijitCalendarDisabledDate {
-	color: gray;
-	text-decoration: line-through;
-	cursor: default;
-}
-.dijitSpacer {
-	
-  	position: relative;
-  	height: 1px;
-  	overflow: hidden;
-  	visibility: hidden;
-}
-.dijitMenu {
-	border:1px solid black;
-	background-color:white;
-}
-.dijitMenuTable {
-	border-collapse:collapse;
-	border-width:0;
-	background-color:white;
-}
-.dj_webkit .dijitMenuTable td[colspan="2"]{
-	border-right:hidden;
-}
-.dijitMenuItem {
-	text-align: left;
-	white-space: nowrap;
-	padding:.1em .2em;
-	cursor:pointer;
-}
-.dijitMenuPassive .dijitMenuItemHover,
-.dijitMenuItemSelected {
-	
-	background-color:black;
-	color:white;
-}
-.dijitMenuItemIcon, .dijitMenuExpand {
-	background-repeat: no-repeat;
-}
-.dijitMenuItemDisabled * {
-	
-	opacity:0.5;
-	cursor:default;
-}
-.dj_ie .dijit_a11y .dijitMenuItemDisabled,
-.dj_ie .dijit_a11y .dijitMenuItemDisabled td,
-.dj_ie .dijitMenuItemDisabled *,
-.dj_ie .dijitMenuItemDisabled td {
-	color:gray !important;
-	filter: alpha(opacity=35);
-}
-.dijitMenuItemLabel {
-	position: relative;
-	vertical-align: middle;
-}
-.dijit_a11y .dijitMenuItemSelected {
-	border: 1px dotted black !important;
-}
-.dj_ff3 .dijit_a11y .dijitMenuItem td {
-	padding: none !important;
-	background:none !important;
-}
-.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
-	border-width: 1px;
-	border-style: solid;
-}
-.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
-	position:static;
-}
-.dijitMenuExpandA11y {
-	display: none;
-}
-.dijit_a11y .dijitMenuExpandA11y {
-	display: inline;
-}
-.dijitMenuSeparator td {
-	border: 0;
-	padding: 0;
-}
-.dijitMenuSeparatorTop {
-	height: 50%;
-	margin: 0;
-	margin-top:3px;
-	font-size: 1px;
-}
-.dijitMenuSeparatorBottom {
-	height: 50%;
-	margin: 0;
-	margin-bottom:3px;
-	font-size: 1px;
-}
-.dijitCheckedMenuItemIconChar {
-	vertical-align: middle;
-	visibility:hidden;
-}
-.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
-	visibility: visible;
-}
-.dijit_a11y .dijitCheckedMenuItemIconChar {
-	display:inline !important;
-}
-.dijit_a11y .dijitCheckedMenuItemIcon {
-	display: none;
-}
-.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
-	
-	margin: 0px;
-}
-.dijitStackController .dijitToggleButtonChecked * {
-	cursor: default;	
-}
-.dijitTabContainerNoLayout {
-	width: 100%;	
-}
-.dijitTabContainerBottom-tabs,
-.dijitTabContainerTop-tabs,
-.dijitTabContainerLeft-tabs,
-.dijitTabContainerRight-tabs {
-	overflow: visible !important;  
-}
-.dijitTabContainerBottom-container,
-.dijitTabContainerTop-container,
-.dijitTabContainerLeft-container,
-.dijitTabContainerRight-container {
-	z-index:0;
-	overflow: hidden;
-	border: 1px solid black;
-}
-.nowrapTabStrip {
-	width: 50000px;
-	display: block;
-	position: relative;
-}
-.dijitTabListWrapper {
-	overflow: hidden;
-}
-.dijit_a11y .tabStripButton img {
-	
-	display: none;
-}
-.dijitTabContainerTop-tabs {
-	border-bottom: 1px solid black;
-}
-.dijitTabContainerTop-container {
-	border-top: 0px;
-}
-.dijitTabContainerLeft-tabs {
-	border-right: 1px solid black;
-	float: left;
-}
-.dijitTabContainerLeft-container {
-	border-left: 0px;
-}
-.dijitTabContainerBottom-tabs {
-	border-top: 1px solid black;
-}
-.dijitTabContainerBottom-container {
-	border-bottom: 0px;
-}
-.dijitTabContainerRight-tabs {
-	border-left: 1px solid black;
-	float: left;
-}
-.dijitTabContainerRight-container {
-	border-right: 0px;
-}
-DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled {
-	cursor: auto;
-}
-.dijitTab {
-	position:relative;
-	cursor:pointer;
-	white-space:nowrap;
-	z-index:3;
-}
-.dijitTab * {
-	
-	vertical-align: middle;
-}
-.dijitTabChecked {
-	cursor: default;	
-}
-.dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;	
-}
-.dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;	
-}
-.dijitTabContainerLeft-tabs .dijitTab {
-	left: 1px;	
-}
-.dijitTabContainerRight-tabs .dijitTab {
-	left: -1px;	
-}
-.dijitTabContainerTop-tabs .dijitTab,
-.dijitTabContainerBottom-tabs .dijitTab {
-	
-	display:inline-block;			
-	#zoom: 1; 
-	#display:inline; 
-}
-.dijitTabInnerDiv {
-	position:relative;
-}
-.tabStripButton {
-	z-index: 12;
-}
-.dijitTabButtonDisabled .tabStripButton {
-	display: none;
-}
-.dijitTabCloseButton {
-	margin-left: 1em;
-}
-.dijitTabCloseText {
-	display:none;
-}
-.dijit_a11y .dijitTabCloseButton {
-	background-image: none !important;
-	width: auto !important;
-	height: auto !important;
-	border: thin dotted;	
-}
-.dijit_a11y .dijitTabCloseButtonHover {
-	border:thin solid;	
-}
-.dijit_a11y .dijitTabCloseText {
-	display: inline;
-}
-.dijit_a11y .dijitTabChecked {
-	
-	border-style:dashed !important;
-}
-.dijit_a11y .dijitTabInnerDiv {
-	border-left:none !important;
- }
-.dijitTabPane,
-.dijitStackContainer-child,
-.dijitAccordionContainer-child {
-	
-    border: none !important;
-}
-.dijitInlineEditBoxDisplayMode {
-	border: 1px solid transparent;	
-	cursor: text;
-}
-.dijit_a11y .dijitInlineEditBoxDisplayMode,
-.dj_ie6 .dijitInlineEditBoxDisplayMode {
-	
-	border: none;
-}
-.dijitInlineEditBoxDisplayModeHover,
-.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
-.dj_ie6 .dijitInlineEditBoxDisplayModeHover {
-	
-	background-color: #e2ebf2;
-	border: solid 1px black;
-}
-.dijitInlineEditBoxDisplayModeDisabled {
-	cursor: default;
-}
-.dijitTreeIndent {
-	
-	width: 19px;
-}
-.dijitTreeRow, .dijitTreeContent {
-	white-space: nowrap;
-}
-.dijitTreeRow img {
-	
-	vertical-align: middle;
-}
-.dijitTreeContent {
-    cursor: default;
-}
-.dijitExpandoText {
-	display: none;
-}
-.dijit_a11y .dijitExpandoText {
-	display: inline;
-	padding-left: 10px;
-	padding-right: 10px;
-	font-family: monospace;
-	border-style: solid;
-	border-width: thin;
-	cursor: pointer;
-}
-.dijitTreeLabel {
-	margin: 0px 4px;
-}
-.dijitDialog {
-	position: absolute;
-	z-index: 999;
-	overflow: hidden;       
-}
-.dijitDialogTitleBar {
-	cursor: move;
-}
-.dijitDialogFixed .dijitDialogTitleBar {
-	cursor:default;
-}
-.dijitDialogCloseIcon {
-	cursor: pointer;
-}
-.dijitDialogUnderlayWrapper {
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 998;
-	display: none;
-	background: transparent !important;
-}
-.dijitDialogUnderlay {
-	background: #eee;
-	opacity: 0.5;
-}
-.dj_ie .dijitDialogUnderlay {
-	filter: alpha(opacity=50);
-}
-.dijit_a11y .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitDialog {
-	opacity: 1 !important;
-	background-color: white !important;
-}
-.dijitDialog .closeText {
-	display:none;
-	
-	position:absolute;
-}
-.dijit_a11y .dijitDialog .closeText {
-	display:inline;
-}
-.dijitSliderMoveable {
-	z-index:99;
-	position:absolute !important;
-	display:block;
-	vertical-align:middle;
-}
-.dijitSliderMoveableH {
-	right:0;
-}
-.dijitSliderMoveableV {
-	right:50%;
-}
-.dijit_a11y DIV.dijitSliderImageHandle,
-.dijitSliderImageHandle {
-	margin:0;
-	padding:0;
-	position:relative !important;
-	border:8px solid gray;
-	width:0;
-	height:0;
-	cursor: pointer;
-}
-.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
-	font-size: 0;
-}
-.dj_ie7 .dijitSliderImageHandle {
-	overflow: hidden; 
-}
-.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
-	overflow: visible; 
-}
-.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
-	border:4px solid #000;
-	height:8px;
-	width:8px;
-}
-.dijitSliderImageHandleV {
-	top:-8px;
-	right: -50%;
-}
-.dijitSliderImageHandleH {
-	left:50%;
-	top:-5px;
-	vertical-align:top;
-}
-.dijitSliderBar {
-	border-style:solid;
-	border-color:black;
-	cursor: pointer;
-}
-.dijitSliderBarContainerV {
-	position:relative;
-	height:100%;
-	z-index:1;
-}
-.dijitSliderBarContainerH {
-	position:relative;
-	z-index:1;
-}
-.dijitSliderBarH {
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBarV {
-	width:4px;
-	border-width:0 1px;
-}
-.dijitSliderProgressBar {
-	background-color:red;
-	z-index:1;
-}
-.dijitSliderProgressBarV {
-	position:static !important;
-	height:0%;
-	vertical-align:top;
-	text-align:left;
-}
-.dijitSliderProgressBarH {
-	position:absolute !important;
-	width:0%;
-	vertical-align:middle;
-	overflow:visible;
-}
-.dijitSliderRemainingBar {
-	overflow:hidden;
-	background-color:transparent;
-	z-index:1;
-}
-.dijitSliderRemainingBarV {
-	height:100%;
-	text-align:left;
-}
-.dijitSliderRemainingBarH {
-	width:100% !important;
-}
-.dijitSliderBumper {
-	overflow:hidden;
-	z-index:1;
-}
-.dijitSliderBumperV {
-	width:4px;
-	height:8px;
-	border-width:0 1px;
-}
-.dijitSliderBumperH {
-	width:8px;
-	height:4px;
-	border-width:1px 0;
-}
-.dijitSliderBottomBumper,
-.dijitSliderLeftBumper {
-	background-color:red;
-}
-.dijitSliderTopBumper,
-.dijitSliderRightBumper {
-	background-color:transparent;
-}
-.dijitSliderDecoration {
-	text-align:center;
-}
-.dijitSliderV TD {
-	position: relative; 
-}
-.dijitSliderDecorationH {
-	width: 100%;
-}
-.dijitSliderDecorationV {
-	height: 100%;
-}
-.dijitSliderButton {
-	font-family:monospace;
-	margin:0;
-	padding:0;
-	display:block;
-}
-.dijit_a11y .dijitSliderButtonInner {
-	visibility:visible !important;
-}
-.dijitSliderButtonContainer {
-	text-align:center;
-	height:0;	
-}
-.dijitSliderButtonContainer * {
-	cursor: pointer;
-}
-.dijitSlider .dijitButtonNode {
-	padding:0;
-	display:block;
-}
-.dijitRuleContainer {
-	position:relative;
-	overflow:visible;
-}
-.dijitRuleContainerV {
-	height:100%;
-	line-height:0;
-	float:left;
-	text-align:left;
-}
-.dj_opera .dijitRuleContainerV {
-	line-height:2%;
-}
-.dj_ie .dijitRuleContainerV {
-	line-height:normal;
-}
-.dj_gecko .dijitRuleContainerV {
-	margin:0 0 1px 0; 
-}
-.dijitRuleMark {
-	position:absolute;
-	border:1px solid black;
-	line-height:0;
-	height:100%;
-}
-.dijitRuleMarkH {
-	width:0;
-	border-top-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-}
-.dijitRuleLabelContainer {
-	position:absolute;
-}
-.dijitRuleLabelContainerH {
-	text-align:center;
-	display:inline-block;
-}
-.dijitRuleLabelH {
-	position:relative;
-	left:-50%;
-}
-.dijitRuleLabelV {
-	
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.dijitRuleMarkV {
-	height:0;
-	border-right-width:0 !important;
-	border-bottom-width:0 !important;
-	border-left-width:0 !important;
-	width:100%;
-	left:0;
-}
-.dj_ie .dijitRuleLabelContainerV {
-	margin-top:-.55em;
-}
-.dijit_a11y .dijitSliderReadOnly,
-.dijit_a11y .dijitSliderDisabled {
-	opacity:0.6;
-}
-.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
-.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
-	filter: alpha(opacity=40);
-}
-.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV {
-	font-family: monospace; 
-	font-size: 1em;
-	line-height: 1em;
-	height: auto;
-	width: auto;
-	margin: 0px 4px;
-}
-.dijit_a11y .dijitButtonContents .dijitButtonText,
-.dijit_a11y .dijitTab .tabLabel {
-	display: inline !important;
-}
-.dijitTextArea {
-	width:100%;
-	overflow-y: auto;	
-}
-.dijitTextArea[cols] {
-	width:auto; 
-}
-.dj_ie .dijitTextAreaCols {
-	width:auto;
-}
-.dijitToolbarSeparator {
-	height: 18px;
-	width: 5px;
-	padding: 0 1px;
-	margin: 0;
-}
-.dijitIEFixedToolbar {
-	position:absolute;
-	
-	top: expression(eval((document.documentElement||document.body).scrollTop));
-}
-.dijitEditor {
-	display: block;	
-}
-.dijitEditorDisabled,
-.dijitEditorReadOnly {
-	color: gray;
-}
-.dijitTimePickerItemInner {
-	text-align:center;
-	border:0;
-	padding:2px 8px 2px 8px;
-}
-.dijitTimePickerTick,
-.dijitTimePickerMarker {
-	border-bottom:1px solid gray;
-}
-.dijitTimePicker .dijitDownArrowButton {
-	border-top: none !important;
-}
-.dijitTimePickerTick {
-	color:#CCC;
-}
-.dijitTimePickerMarker {
-	color:black;
-	background-color:#CCC;
-}
-.dijitTimePickerItemSelected {
-	font-weight:bold;
-	color:#333;
-	background-color:#b7cdee;
-}
-.dijitTimePickerItemHover {
-	background-color:gray;
-	color:white;
-	cursor:pointer;
-}
-.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	border: solid 4px black;
-}
-.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
-	border: dashed 4px black;
-}
-.dijitToggleButtonIconChar {
-	
-	display:none !important;
-}
-.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
-	display:inline !important;
-	visibility:hidden;
-}
-.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
-	font-family: "Arial Unicode MS";	
-}
-.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
-	display: inline !important; 
-	visibility:visible !important;
-}
-.dijitArrowButtonChar {
-        display:none !important;
-}
-.dijit_a11y .dijitArrowButtonChar {
-        display:inline !important;
-}
-.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
-.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
-	display:none !important;
-}
-.dijitSelect {
-	margin: 0.2em;
-	border-collapse: collapse;
-}
-.dj_ie .dijitSelect,
-.dj_ie7 .dijitSelect,
-.dj_iequirks .dijitSelect {
-	vertical-align: middle; 
-}
-.dj_ie8 .dijitSelect .dijitButtonText {
-	vertical-align: top;
-}
-.dijitToolbar .dijitSelect {
-	margin: 0;
-}
-.dj_webkit .dijitToolbar .dijitSelect {
-	padding-left: 0.3em;
-}
-.dijit_a11y .dijitSelectDisabled .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
-.dijitSelect .dijitButtonContents {
-	padding: 0px;
-	background: transparent none;
-	white-space: nowrap;
-	text-align: left;
-}
-.dijitSelectFixedWidth .dijitButtonContents {
-	width: 100%;
-}
-.dijitSelectMenu .dijitMenuItemIcon {
-	
-	display:none;
-}
-.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
-.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
-	
-	position: static;
-}
-.dijitSelectLabel *
-{
-	vertical-align: baseline;
-}
-.dijitSelectSelectedOption * {
-	font-weight: bold;
-}
-.dijitSelectMenu {
-	border-width: 1px;
-}
-.dijitSelectMenu .dijitMenuTable {
-	margin: 0px;
-	background-color: transparent;
-}
-.dijitForceStatic {
-	position: static !important;
-}
-.dijitReadOnly *,
-.dijitDisabled *,
-.dijitReadOnly,
-.dijitDisabled {
-	
-	cursor: default;
-}
-.dijitIconSave,
-.dijitIconPrint,
-.dijitIconCut,
-.dijitIconCopy,
-.dijitIconClear,
-.dijitIconDelete,
-.dijitIconUndo,
-.dijitIconEdit,
-.dijitIconNewTask,
-.dijitIconEditTask,
-.dijitIconEditProperty,
-.dijitIconTask,
-.dijitIconFilter,
-.dijitIconConfigure,
-.dijitIconSearch,
-.dijitIconApplication,
-.dijitIconBookmark,
-.dijitIconChart,
-.dijitIconConnector,
-.dijitIconDatabase,
-.dijitIconDocuments,
-.dijitIconMail,
-.dijitLeaf,
-.dijitIconFile,
-.dijitIconFunction,
-.dijitIconKey,
-.dijitIconPackage,
-.dijitIconSample,
-.dijitIconTable,
-.dijitIconUsers,
-.dijitFolderClosed,
-.dijitIconFolderClosed,
-.dijitFolderOpened,
-.dijitIconFolderOpen,
-.dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled.png); 
-	width: 16px;
-	height: 16px;
-}
-.dj_ie6 .dijitIconSave,
-.dj_ie6 .dijitIconPrint,
-.dj_ie6 .dijitIconCut,
-.dj_ie6 .dijitIconCopy,
-.dj_ie6 .dijitIconClear,
-.dj_ie6 .dijitIconDelete,
-.dj_ie6 .dijitIconUndo,
-.dj_ie6 .dijitIconEdit,
-.dj_ie6 .dijitIconNewTask,
-.dj_ie6 .dijitIconEditTask,
-.dj_ie6 .dijitIconEditProperty,
-.dj_ie6 .dijitIconTask,
-.dj_ie6 .dijitIconFilter,
-.dj_ie6 .dijitIconConfigure,
-.dj_ie6 .dijitIconSearch,
-.dj_ie6 .dijitIconApplication,
-.dj_ie6 .dijitIconBookmark,
-.dj_ie6 .dijitIconChart,
-.dj_ie6 .dijitIconConnector,
-.dj_ie6 .dijitIconDatabase,
-.dj_ie6 .dijitIconDocuments,
-.dj_ie6 .dijitIconMail,
-.dj_ie6 .dijitLeaf,
-.dj_ie6 .dijitIconFile,
-.dj_ie6 .dijitIconFunction,
-.dj_ie6 .dijitIconKey,
-.dj_ie6 .dijitIconPackage,
-.dj_ie6 .dijitIconSample,
-.dj_ie6 .dijitIconTable,
-.dj_ie6 .dijitIconUsers,
-.dj_ie6 .dijitFolderClosed,
-.dj_ie6 .dijitIconFolderClosed,
-.dj_ie6 .dijitFolderOpened,
-.dj_ie6 .dijitIconFolderOpen,
-.dj_ie6 .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActEnabled8bit.png);
-}
-.dijitDisabled .dijitIconSave,
-.dijitDisabled .dijitIconPrint,
-.dijitDisabled .dijitIconCut,
-.dijitDisabled .dijitIconCopy,
-.dijitDisabled .dijitIconClear,
-.dijitDisabled .dijitIconDelete,
-.dijitDisabled .dijitIconUndo,
-.dijitDisabled .dijitIconEdit,
-.dijitDisabled .dijitIconNewTask,
-.dijitDisabled .dijitIconEditTask,
-.dijitDisabled .dijitIconEditProperty,
-.dijitDisabled .dijitIconTask,
-.dijitDisabled .dijitIconFilter,
-.dijitDisabled .dijitIconConfigure,
-.dijitDisabled .dijitIconSearch,
-.dijitDisabled .dijitIconApplication,
-.dijitDisabled .dijitIconBookmark,
-.dijitDisabled .dijitIconChart,
-.dijitDisabled .dijitIconConnector,
-.dijitDisabled .dijitIconDatabase,
-.dijitDisabled .dijitIconDocuments,
-.dijitDisabled .dijitIconMail,
-.dijitDisabled .dijitLeaf,
-.dijitDisabled .dijitIconFile,
-.dijitDisabled .dijitIconFunction,
-.dijitDisabled .dijitIconKey,
-.dijitDisabled .dijitIconPackage,
-.dijitDisabled .dijitIconSample,
-.dijitDisabled .dijitIconTable,
-.dijitDisabled .dijitIconUsers,
-.dijitDisabled .dijitFolderClosed,
-.dijitDisabled .dijitIconFolderClosed,
-.dijitDisabled .dijitFolderOpened,
-.dijitDisabled .dijitIconFolderOpen,
-.dijitDisabled .dijitIconError {
-	background-image: url(../../icons/images/commonIconsObjActDisabled.png); 
-}
-.dijitIconSave { background-position: 0px; }
-.dijitIconPrint { background-position: -16px; }
-.dijitIconCut { background-position: -32px; }
-.dijitIconCopy { background-position: -48px; }
-.dijitIconClear { background-position: -64px; }
-.dijitIconDelete { background-position: -80px; }
-.dijitIconUndo { background-position: -96px; }
-.dijitIconEdit { background-position: -112px; }
-.dijitIconNewTask { background-position: -128px; }
-.dijitIconEditTask { background-position: -144px; }
-.dijitIconEditProperty { background-position: -166px; }
-.dijitIconTask { background-position: -176px; }
-.dijitIconFilter { background-position: -192px; }
-.dijitIconConfigure { background-position: -208px; }
-.dijitIconSearch { background-position: -224px; }
-.dijitIconError { background-position: -496px; } 
-.dijitIconApplication { background-position: -240px; }
-.dijitIconBookmark { background-position: -256px; }
-.dijitIconChart { background-position: -272px; }
-.dijitIconConnector { background-position: -288px; }
-.dijitIconDatabase { background-position: -304px; }
-.dijitIconDocuments { background-position: -320px; }
-.dijitIconMail { background-position: -336px; }
-.dijitIconFile, .dijitLeaf { background-position: -352px; }
-.dijitIconFunction { background-position: -368px; }
-.dijitIconKey { background-position: -384px; }
-.dijitIconPackage{ background-position: -400px; }
-.dijitIconSample { background-position: -416px; }
-.dijitIconTable { background-position: -432px; }
-.dijitIconUsers { background-position: -448px; }
-.dijitIconFolderClosed, .dijitFolderClosed { background-position: -464px; }
-.dijitIconFolderOpen, .dijitFolderOpened { background-position: -480px; }
-.tundra .dojoDndItemBefore {
-	border-top: 2px solid #369;
-}
-.tundra .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
-}
-.tundra .dojoDndItemOver {
-	cursor:pointer;
-}
-.tundra table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
-.tundra .dojoDndAvatar td	{ border: none; }
-.tundra .dojoDndAvatar tr	{ border: none; }
-.tundra .dojoDndAvatarHeader td	{ height: 20px; padding: 0 0 0 21px; }
-.tundra .dojoDndAvatarItem td { padding: 2px;}
-.tundra.dojoDndMove .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.tundra.dojoDndCopy .dojoDndAvatarHeader	{background-color: #f58383; background-image: url(images/dndNoCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.tundra.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndMove.png); background-repeat: no-repeat; background-position: 2px center;}
-.tundra.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-color: #97e68d; background-image: url(images/dndCopy.png); background-repeat: no-repeat; background-position: 2px center;}
-.tundra .dijitContentPaneLoading {
-	background:url(images/loading.gif) no-repeat left center;
-	padding-left:25px;
-}
-.tundra .dijitContentPaneError {
-	background:url(images/warning.png) no-repeat left center;
-	padding-left:25px;
-}
-.tundra .dijitContentPane {
-	padding: 0px;
-}
-.tundra .dijitTabContainerTop-dijitContentPane,
-.tundra .dijitTabContainerLeft-dijitContentPane,
-.tundra .dijitTabContainerBottom-dijitContentPane,
-.tundra .dijitTabContainerRight-dijitContentPane,
-.tundra .dijitAccordionContainer-dijitContentPane {
-	background-color: #fff;
-	padding: 5px;
-}
-.tundra .dijitSplitContainer-dijitContentPane,
-.tundra .dijitBorderContainer-dijitContentPane {
-	background-color: #fff;		
-	padding: 5px;
-}
-.tundra .dijitTabPaneWrapper {
-	background:#fff;
-	border:1px solid #ccc;
-	margin: 0;
-	padding: 0;
-}
-.tundra .dijitTab {
-	line-height:normal;
-	margin-right:4px;	
-	padding:0px;
-	border:1px solid #ccc;
-	background:#e2e2e2 url(images/tabEnabled.png) repeat-x;
-}
-.tundra .dijitTabInnerDiv {
-	padding:2px 8px 2px 9px;
-}
-.tundra .dijitTabSpacer {
-	display: none;
-}
-.tundra .dijitTabContainer .tabStripRBtn {
-	margin-right: 20px;
-}
-.tundra .dijitTabContainer .tabStripLBtn {
-	margin-left: 20px;
-}
-.tundra .nowrapTabStrip .dijitTab {
-	top: 2px;
-}
-.tundra .dijitTabContainerBottom .nowrapTabStrip .dijitTab {
-	top: 0px;
-	bottom: 2px;
-}
-.tundra .dijitTabChecked {
-	
-	background-color:#fff;
-	border-color: #ccc;
-	background-image:none;
-}
-.tundra .dijitTabHover {
-	color: #243C5F;
-	border-top-color:#92a0b3;
-	border-left-color:#92a0b3;
-	border-right-color:#92a0b3;
-	border-bottom-color:#92a0b3;
-	background:#e2e2e2 url(images/tabHover.gif) repeat-x;
-}
-.tundra .dijitTabContainerTop .dijitTabHover {
-	border-bottom-color:#ccc;
-}
-.tundra .dijitTabContainerBottom .dijitTabHover {
-	border-top-color:#ccc;
-}
-.tundra .dijitTabContainerLeft .dijitTabHover {
-	border-right-color:#ccc;
-}
-.tundra .dijitTabContainerRight .dijitTabHover {
-	border-left-color:#ccc;
-}
-.tundra .dijitTabContainer .dijitTabCheckedHover {
-	color: inherit;
-	border:1px solid #ccc;
-	background:#fff;
-}
-.tundra .dijitTab .tabLabel {
-	
-	min-height: 12px;
-	display: inline-block;
-}
-.tundra .dijitTabContainerNested .dijitTabListWrapper {
-	height: auto;
-}
-.tundra .dijitTabContainerNested .dijitTabContainerTop-tabs {
-	border-bottom: 1px solid #CCC;
-}
-.tundra .dijitTabContainerTabListNested .dijitTab {
-	background: none;
-	border: none;
-	top: 0px;		
-}
-.tundra .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-}
-.tundra .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
-	text-decoration: underline;
-}
-.tundra .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent .tabLabel {
-	text-decoration: underline;
-	font-weight: bold;
-	
-}
-.tundra .dijitTabContainer .dijitTabPaneWrapperNested {
-	border: none;	
-}
-.tundra .dijitTabCloseButton {
-	background: url(images/tabClose.png) no-repeat right top;
-	width: 12px;
-	height: 12px;
-}
-.dj_ie6 .tundra .dijitTabCloseButton {
-	background-image : url(images/tabClose.gif);
-}
-.tundra .dijitTabCloseButtonHover {
-	background-image : url(images/tabCloseHover.png);
-}
-.dj_ie6 .tundra .dijitTabCloseButtonHover {
-	background-image : url(images/tabCloseHover.gif);
-}
-.tundra .dijitTabContainerTop-tabs {
-	margin-bottom: 0px;
-	border-color: #cccccc;
-	padding-left: 3px;
-	background-position: bottom;
-}
-.tundra .dijitTabContainerTop-tabs .dijitTab {
-	top: 0px;
-	margin-bottom: -1px;
-}
-.tundra .dijitTabContainerTop-container {
-	border-top: none;
-}
-.tundra .dijitTabContainerTop-tabs .dijitTabChecked {
-	border-bottom-color:white;
-}
-.tundra .dijitTabContainerTop-tabs,
-.tundra .dijitTabContainerBottom-tabs {
-	padding-left: 3px;
-	padding-right: 3px;
-}
-.tundra .dijitTabContainerTopStrip {
-	border-top: 1px solid #CCC;
-	border-right: 1px solid #CCC;
-	border-left: 1px solid #CCC;
-	padding-top: 2px;
-	background: #f2f2f2;
-}
-.tundra .dijitTabContainerTopNone {
-	padding-top: 0px;
-}
-.tundra .dijitTabContainerBottom-tabs {
-	margin-top: 0px;
-	border-color: #cccccc;
-	background-position: top;
-	padding-left: 3px;
-}
-.tundra .dijitTabContainerBottom-tabs .dijitTab {
-	bottom: 0px;
-	margin-top: -1px;
-}
-.tundra .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-.tundra .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color:white;
-}
-.tundra .dijitTabContainerBottomStrip {
-	padding-bottom: 2px;
-	border: 1px solid #ccc;
-	background: #f2f2f2;
-	border-top: none;
-}
-.tundra .dijitTabContainerRight-tabs {
-	border-color: #ccc;
-	height: 100%;
-	padding-top: 3px;
-}
-.tundra .dijitTabContainerRightStrip {
-	margin-left: -1px;
-}
-.tundra .dijitTabContainerRight-container {
-	border-right: none;
-}
-.tundra .dijitTabContainerRight-tabs .dijitTabChecked {
-	border-left-color:white;
-}
-.tundra .dijitTabContainerRightStrip {
-	padding-right: 2px;
-	border: 1px solid #ccc;
-}
-.tundra .dijitTabContainerRightStrip {
-	background: #f2f2f2;
-}
-.tundra .dijitTabContainerLeft-tabs {
-	border-color: #ccc;
-	padding-top: 3px;
-	height: 100%;
-}
-.tundra .dijitTabContainerLeft-container {
-	border-left: none;
-}
-.tundra .dijitTabContainerLeft-tabs .dijitTabChecked {
-	border-right-color:white;
-}
-.tundra .dijitTabContainerLeftStrip {
-	padding-left: 2px;
-	border: 1px solid #ccc;
-	background: #f2f2f2;
-	border-right: none;
-}
-.tundra .dijitTabContainerLeft-tabs .dijitTab,
-.tundra .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:0px;
-	margin-bottom:4px;	
-}
-.tundra .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
-	border-left: 0px solid #ccc;
-	border-top: 0px solid #ccc;
-	border-right: 0px solid #ccc;
-	padding-top: 0px;
-	padding-left: 0px;
-}
-.tundra .dijitTabContainer .tabStripButton {
-	margin-right: 0;
-	padding-top: 2px;
-	z-index: 12;
-}
-.tundra .dijitTabContainerBottom .tabStripButton {
-	padding-top: 2px;
-}
-.tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 3px;
-	padding-top: 1px;
-}
-.tundra .tabStripButton .dijitTabInnerDiv {
-	padding: 3px 2px 4px 2px;
-}
-.dj_ie6 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 5px;
-}
-.dj_ie6 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 4px;
-}
-.tundra .dijitTabStripIcon {
-	height: 14px;
-	width: 14px;
-	background: url(images/spriteRoundedIconsSmall.png) no-repeat left top ;
-}
-.dj_ie6 .tundra .dijitTabStripIcon {
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.tundra .dijitTabStripSlideRightIcon {
-	background-position: -30px top;
-}
-.tundra .dijitTabStripMenuIcon {
-	background-position: -15px top;
-}
-.tundra .dijitAccordionContainer {
-	border-color: #ccc;
-	background-color: #fff;
-}
-.tundra .dijitAccordionTitle {
-	background:#fafafa url(images/titleBar.png) repeat-x bottom left;
-	border-top: 1px solid #bfbfbf;
-	padding: 4px 4px 4px 8px;
-}
-.tundra .dijitAccordionTitleHover  {
-	background: #f8fafd url(images/accordionItemHover.gif) bottom repeat-x;
-}
-.tundra .dijitAccordionTitleSelected  {
-	background: #f9f9f9 url(images/accordionItemActive.gif) bottom repeat-x;
-	font-weight: bold;
-	border-top: 1px solid #aaaaaa;
-	border-bottom: 1px solid #bfbfbf;
-	padding: 4px 4px 4px 8px;
-}
-.tundra .dijitSplitContainerSizerH {
-	background:url(images/splitContainerSizerV.png) repeat-y #fff;
-	border:0;
-	border-left:1px solid #bfbfbf;
-	border-right:1px solid #bfbfbf;
-	width:7px;
-}
-.tundra .dijitSplitContainerSizerH .thumb {
-	background:url(images/splitContainerSizerV-thumb.png) no-repeat #ccc;
-	left:1px;
-	width:3px;
-	height:19px;
-	overflow: hidden;
-}
-.tundra .dijitSplitContainerSizerV {
-	background:url(images/splitContainerSizerH.png) repeat-x #fff;
-	border:0;
-	border-top:1px solid #bfbfbf;
-	border-bottom:1px solid #bfbfbf;
-	height:7px;
-}
-.tundra .dijitSplitContainerSizerV .thumb {
-	background:url(images/splitContainerSizerH-thumb.png) no-repeat #ccc;
-	top:1px;
-	width:19px;
-	height:3px;
-	overflow: hidden;
-}
-.tundra .dijitBorderContainer {
-	background-color: #fcfcfc;
-	padding: 5px;
-}
-.tundra .dijitSplitContainer-child,
-.tundra .dijitBorderContainer-child {
-	
-	border: 1px #ccc solid;
-}
-.tundra .dijitBorderContainer-dijitTabContainerTop,
-.tundra .dijitBorderContainer-dijitTabContainerBottom,
-.tundra .dijitBorderContainer-dijitTabContainerLeft,
-.tundra .dijitBorderContainer-dijitTabContainerRight {
-	
-	 border: none;
-}
-.tundra .dijitBorderContainer-dijitBorderContainer {
-	
-	border: none;
-	padding: 0px;
-}
-.tundra .dijitSplitterH,
-.tundra .dijitGutterH {
-	background:#fcfcfc;
-	border:0;
-	height:5px;
-}
-.tundra .dijitSplitterH .dijitSplitterThumb {
-	background:#B0B0B0 none;
-	height:1px;
-	top:2px;
-	width:19px;
-}
-.tundra .dijitSplitterV,
-.tundra .dijitGutterV {
-	background:#fcfcfc;
-	border:0;
-	width:5px;
-}
-.tundra .dijitSplitterV .dijitSplitterThumb {
-	background:#B0B0B0 none;
-	height:19px;
-	left:2px;
-	width:1px;
-}
-.tundra .dijitSplitterActive {
-	font-size: 1px;
-	background-image: none;
-	background-color: #aaa;
-	-moz-opacity: 0.6;
-	opacity: 0.6;
-	filter: Alpha(Opacity=60);
-	margin: 0;
-}
-.tundra .dijitInputContainer INPUT,
-.tundra .dijitTextBox {
-	margin: 0em 0.1em;
-}
-.tundra .dijitTextArea {
-	padding: 3px;
-}
-.tundra .dijitTextBox {
-	
-	background:#fff url(images/validationInputBg.png) repeat-x top left;
-	#background:#fff url(images/validationInputBg.gif) repeat-x top left;
-	border:1px solid #b3b3b3;
-}
-.tundra .dijitComboBox .dijitButtonNode {
-	padding: 0 0.2em;
-}
-.tundra .dijitTextBox .dijitButtonNode {
-	
-	border-color: #9b9b9b;
-}
-.tundra .dijitTextBoxFocused {
-	
-	border-color:#406b9b;
-}
-.tundra .dijitTextBoxFocused .dijitButtonNode {
-	border-color:#366dba;
-}
-.tundra .dijitError {
-	background-color:#f9f7ba;
-	background-image:none;
-}
-.tundra .dijitErrorFocused {
-	background-color:#f9f999;
-	background-image:none;
-}
-.tundra .dijitValidationIcon {
-	
-	width: 16px;
-	background: transparent url(images/warning.png) no-repeat center center;
-}
-.tundra .dijitComboBoxHighlightMatch {
-	background-color:#a5beda;
-}
-.tundra .dijitFocusedLabel {
-	
-	outline: 1px dotted #666666;
-}
-.tundra .dijitButtonNode {
-	
-	border: 1px solid #c0c0c0;
-	border-bottom: 1px solid #9b9b9b;
-	padding: 0.1em 0.2em 0.2em 0.2em;
-	background: #fff url(images/buttonEnabled.png) repeat-x bottom left;
-}
-.tundra .dijitButtonText {
-	text-align: center;
-	padding: 0 0.3em;
-}
-.tundra .dijitDisabled .dijitButtonText {
-	color: #7F7F7F;
-}
-.tundra .dijitArrowButton {
-	color: #111;
-}
-.tundra .dijitComboButton .dijitDownArrowButton {
-	padding-right:4px;
-}
-.tundra .dijitTextBoxReadOnly,
-.tundra .dijitTextBoxReadOnly .dijitButtonNode,
-.tundra .dijitButtonDisabled .dijitButtonNode,
-.tundra .dijitToggleButtonDisabled .dijitButtonNode,
-.tundra .dijitDropDownButtonDisabled .dijitButtonNode,
-.tundra .dijitComboButtonDisabled .dijitButtonNode,
-.tundra .dijitTextBoxDisabled,
-.tundra .dijitTextBoxDisabled .dijitButtonNode {
-	
-	border-color: #d5d5d5 #d5d5d5 #bdbdbd #d5d5d5;
-	background:#e4e4e4 url(images/buttonDisabled.png) top repeat-x;
-}
-.tundra .dijitButtonHover .dijitButtonNode,
-.tundra .dijitButtonNodeHover,
-.tundra .dijitToggleButtonHover .dijitButtonNode,
-.tundra .dijitDropDownButtonHover .dijitButtonNode,
-.tundra .dijitComboButton .dijitButtonContentsHover,
-.tundra .dijitComboButton .dijitDownArrowButtonHover {
-	
-	
-	border-color: #a5beda;
-	border-bottom-color:#5c7590;
-	color:#243C5F;
-	background:#fcfdff url(images/buttonHover.png) repeat-x bottom;
-}
-.tundra .dijitDownArrowButtonHover,
-.tundra .dijitUpArrowButtonHover {
-	
-	color:#243C5F;
-	background:#fcfdff url(images/buttonHover.png) repeat-x bottom;
-}
-.tundra .dijitUpArrowButtonActive,
-.tundra .dijitDownArrowButtonActive,
-.tundra .dijitButtonActive .dijitButtonNode,
-.tundra .dijitToggleButtonActive .dijitButtonNode,
-.tundra .dijitDropDownButtonActive .dijitButtonNode,
-.tundra .dijitButtonContentsActive,
-.tundra .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
-	
-	border-color:#366dba;
-	background: #ededed url(images/buttonActive.png) bottom repeat-x;
-}
-.tundra .dijitArrowButtonInner {
-	background:url(images/spriteArrows.png) no-repeat scroll 0px center;
-	width: 7px;
-	height: 7px;
-	margin: 0px 4px 0px 4px;
-}
-.tundra .dijitTextBox .dijitArrowButtonInner {
-	background-position: 0 center;
-}
-.dj_ie6 .tundra .dijitArrowButtonInner {
-	background-image:url(images/spriteArrows.gif);
-}
-.tundra .dijitLeftArrowButton .dijitArrowButtonInner {
-	background-position: -7px center;
-}
-.tundra .dijitRightArrowButton .dijitArrowButtonInner {
-	background-position: -14px center;
-}
-.tundra .dijitUpArrowButton .dijitArrowButtonInner {
-	background-position: -21px center;
-}
-.tundra .dijitDisabled .dijitArrowButtonInner {
-	background-position: -28px center;
-}
-.tundra .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
-	background-position: -35px center;
-}
-.tundra .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
-	background-position: -42px center;
-}
-.tundra .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
-	background-position: -49px center;
-}
-.dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
-}
-.dj_ie .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
-	margin-top: -2px; 
-}
-.dj_ie8 .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; 
-}
-.tundra .dijitSpinnerButtonContainer {
-	width: auto;
-	padding: 0;
-}
-.tundra .dijitSpinner .dijitArrowButton {
-	width: 15px;
-}
-.tundra .dijitSpinner .dijitSpinnerButtonInner {
-	width: 15px;
-}
-.tundra .dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	padding: 0;
-}
-.tundra .dijitToggleButton .dijitCheckBoxIcon {
-	background-image: url(images/checkmarkNoBorder.png);
-}
-.dj_ie6 .tundra .dijitToggleButton .dijitCheckBoxIcon {
-	background-image: url(images/checkmarkNoBorder.gif);
-}
-.tundra .dijitCheckBox,
-.tundra .dijitCheckBoxIcon			{
-	background-image: url(images/checkmark.png); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0 2px 0 0;
-	padding: 0;
-}
-.dj_ie6 .tundra .dijitCheckBox,
-.dj_ie6 .tundra .dijitCheckBoxIcon			{
-	background-image: url(images/checkmark.gif); 
-}
-.tundra .dijitCheckBox,
-.tundra .dijitToggleButton .dijitCheckBoxIcon {
-	
-	background-position: -16px;
-}
-.tundra .dijitCheckBoxChecked,
-.tundra .dijitToggleButtonChecked .dijitCheckBoxIcon {
-	
-	background-position: 0px;
-}
-.tundra .dijitCheckBoxDisabled {
-	
-	background-position: -48px;
-}
-.tundra .dijitCheckBoxCheckedDisabled {
-	
-	background-position: -32px;
-}
-.tundra .dijitCheckBoxHover {
-	
-	background-position: -80px;
-}
-.tundra .dijitCheckBoxCheckedHover {
-	
-	background-position: -64px;
-}
-.tundra .dijitRadio,			
-.tundra .dijitRadioIcon	{		
-	background-image: url(images/checkmark.png); 
-	background-repeat: no-repeat;
-	width: 16px;
-	height: 16px;
-	margin: 0;
-	padding: 0;
-}
-.dj_ie6 .tundra .dijitRadio,
-.dj_ie6 .tundra .dijitRadioIcon	{
-	background-image: url(images/checkmark.gif); 
-}
-.tundra .dijitToggleButton .dijitRadioIcon {
-	
-	background-image: url(images/checkmarkNoBorder.png);
-}
-.dj_ie6 .tundra .dijitToggleButton .dijitRadioIcon {
-	background-image: url(images/checkmarkNoBorder.gif);
-}
-.tundra .dijitRadio,
-.tundra .dijitRadioIcon {
-	
-	background-position: -112px;
-}
-.tundra .dijitRadioDisabled {
-	
-	background-position: -144px;
-}
-.tundra .dijitRadioHover {
-	
-	background-position: -176px;
-}
-.tundra .dijitRadioChecked,
-.tundra .dijitRadioCheckedHover,
-.tundra .dijitToggleButtonChecked .dijitRadioIcon {
-	
-	background-position: -96px;
-}
-.tundra .dijitRadioCheckedDisabled {
-	
-	background-position: -128px;
-}
-.tundra .dijitSliderProgressBarH {
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.tundra .dijitSliderProgressBarV {
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.tundra .dijitSliderFocused .dijitSliderProgressBarH,
-.tundra .dijitSliderFocused .dijitSliderLeftBumper {
-	background-image:url(images/sliderFullFocus.png);
-}
-.tundra .dijitSliderFocused .dijitSliderProgressBarV,
-.tundra .dijitSliderFocused .dijitSliderBottomBumper {
-	background-image:url(images/sliderFullVerticalFocus.png);
-}
-.tundra .dijitSliderRemainingBarV {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y bottom left;
-}
-.tundra .dijitSliderRemainingBarH {
-	border-color: #b4b4b4;
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-}
-.tundra .dijitSliderBar {
-	border-style: solid;
-	outline:1px;
-}
-.tundra .dijitSliderFocused .dijitSliderBar {
-	border-color:#888;
-}
-.tundra .dijitSliderImageHandleH {
-	border:0px;
-	width:16px;
-	height:16px;
-	background:url(images/preciseSliderThumb.png) no-repeat center top;
-}
-.tundra .dijitSliderFocused .dijitSliderImageHandleH {
-	background-image:url(images/preciseSliderThumbFocus.png);
-	#background-image:url(images/preciseSliderThumbFocus.gif);
-}
-.dj_ie6 .tundra .dijitSliderImageHandleH {
-	background-image:url(images/preciseSliderThumb.gif);
-}
-.tundra .dijitSliderLeftBumper {
-	border-left-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFull.png) repeat-x top left;
-}
-.tundra .dijitSliderRightBumper {
-	background: #dcdcdc url(images/sliderEmpty.png) repeat-x top left;
-	border-color: #b4b4b4;
-	border-right-width: 1px;
-}
-.tundra .dijitSliderImageHandleV {
-	border:0px;
-	width:16px;
-	height:16px;
-	background:url(images/sliderThumb.png) no-repeat center center;
-}
-.tundra .dijitSliderFocused .dijitSliderImageHandleV {
-	background-image:url(images/sliderThumbFocus.png);
-}
-.dj_ie6 .tundra .dijitSliderFocused .dijitSliderImageHandleV {
-	background-image:url(images/sliderThumbFocus.gif);
-}
-.tundra .dijitSliderBottomBumper {
-	border-bottom-width: 1px;
-	border-color: #aab0bb;
-	background: #c0c2c5 url(images/sliderFullVertical.png) repeat-y bottom left;
-}
-.tundra .dijitSliderTopBumper {
-	background: #dcdcdc url(images/sliderEmptyVertical.png) repeat-y top left;
-	border-color: #b4b4b4;
-	border-top-width: 1px;
-}
-.tundra .dijitSliderDecrementIconH,
-.tundra .dijitSliderDecrementIconV,
-.tundra .dijitSliderIncrementIconH,
-.tundra .dijitSliderIncrementIconV {
-	background-image: url(images/spriteArrows.png);
-	background-repeat: no-repeat;
-	margin: 5px;
-	height: 7px;
-	width: 7px;
-	font-size: 1px;
-}
-.dj_ie6 .tundra .dijitSliderDecrementIconH,
-.dj_ie6 .tundra .dijitSliderDecrementIconV,
-.dj_ie6 .tundra .dijitSliderIncrementIconH,
-.dj_ie6 .tundra .dijitSliderIncrementIconV {
-	background-image: url(images/spriteArrows.gif);
-}
-.tundra .dijitSliderDecrementIconH {
-	background-position: -7px 0px;
-}
-.tundra .dijitSliderIncrementIconH {
-	background-position: -14px 0px;
-}
-.tundra .dijitSliderDecrementIconV {
-	background-position: 0px 0px;
-}
-.tundra .dijitSliderIncrementIconV {
-	background-position: -21px 0px;
-}
-.tundra .dijitSliderButtonInner {
-	visibility:hidden;
-}
-.tundra .dijitSliderReadOnly *,
-.tundra .dijitSliderDisabled * {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
-	color: #bdbdbd;
-}
-.tundra .dijitSliderReadOnly .dijitSliderDecrementIconH,
-.tundra .dijitSliderDisabled .dijitSliderDecrementIconH {
-	background-position: -35px 0px;
-}
-.tundra .dijitSliderReadOnly .dijitSliderIncrementIconH,
-.tundra .dijitSliderDisabled .dijitSliderIncrementIconH {
-	background-position: -42px 0px;
-}
-.tundra .dijitSliderReadOnly .dijitSliderDecrementIconV,
-.tundra .dijitSliderDisabled .dijitSliderDecrementIconV {
-	background-position: -28px 0px;
-}
-.tundra .dijitSliderReadOnly .dijitSliderIncrementIconV,
-.tundra .dijitSliderDisabled .dijitSliderIncrementIconV {
-	background-position: -49px 0px;
-}
-.tundra .dijitSelect .dijitButtonNode {
-	padding: 0px;
-}
-.tundra .dijitSelect .dijitButtonNode .dijitArrowButtonInner {
-	margin: 0px 4px 0px 5px;
-}
-.tundra .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-	background:#fff url(images/validationInputBg.png) repeat-x top left;
-	#background:#fff url(images/validationInputBg.gif) repeat-x top left;
-}
-.tundra .dijitSelectHover .dijitButtonContents,
-.tundra .dijitSelectActive .dijitButtonContents,
-.tundra .dijitSelectOpened .dijitButtonContents,
-.tundra .dijitSelectDisabled .dijitButtonContents,
-.tundra .dijitSelectReadOnly .dijitButtonContents{
-	background: transparent none;
-}
-.dj_ie .tundra .dijitSelect .dijitButtonContents {
-	padding-top: 0px;
-}
-.tundra .dijitSelectDisabled .dijitButtonNode {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
-	background:#e4e4e4 url(images/buttonDisabled.png) top repeat-x;
-}
-.dj_ie .tundra .dijitSelectDisabled  .dijitButtonNode * {
-	filter: gray() alpha(opacity=50);
-}
-.tundra .dijitSelectHover .dijitButtonNode {
-	border-color:#a5beda;
-	border-bottom-color:#5c7590;
-	border-right-color:#5c7590;
-	color:#243C5F;
-	background:#fcfdff url(images/buttonHover.png) repeat-x bottom;
-}
-.tundra .dijitSelectActive .dijitButtonNode,
-.tundra .dijitSelectOpened .dijitButtonNode {
-	border-color:#366dba;
-	background: #ededed url(images/buttonActive.png) bottom repeat-x;
-}
-.tundra .dijitSelectMenu td {
-	padding: 0em;
-}
-.tundra .dijitSelectMenu .dijitMenuItemLabel,
-.tundra .dijitSelectMenu .dijitMenuArrowCell {
-	padding: 0.1em 0.2em;
-}
-.tundra .dijitTreeNode {
-    background-image : url(images/i.gif);
-    background-repeat : repeat-y;
-    zoom: 1;	
-}
-.tundra .dijitTreeIsLast {
-    background: url(images/i_half.gif) no-repeat;
-}
-.tundra .dijitTreeIsRoot {
-    margin-left: 0;
-    background-image: none;
-}
-.tundra .dijitTreeExpando {
-    width: 18px;
-    height: 18px;
-}
-.tundra .dijitTreeRow {
-	
-	padding-bottom: 2px;
-}
-.tundra .dijitTreeContent {
-    min-height: 18px;
-    min-width: 18px;
-}
-.tundra .dijitTreeRowSelected .dijitTreeLabel {
-	background:#e2ebfe;
-}
-.tundra .dijitTreeRowHover {
-	
-	background-image: url(images/treeHover.png);
-	background-repeat: repeat;
-	background-color: transparent !important;
-}
-.tundra .dijitTreeExpandoOpened {
-	background-image: url(images/treeExpand_minus.gif);
-}
-.tundra .dijitTreeExpandoClosed {
-	background-image: url(images/treeExpand_plus.gif);
-}
-.tundra .dijitTreeExpandoLeaf {
-	background-image: url(images/treeExpand_leaf.gif);
-}
-.tundra .dijitTreeExpandoLoading {
-	background-image: url(images/treeExpand_loading.gif);
-}
-.tundra .dijitTreeIcon {
-	width: 16px;
-	height: 16px;
-}
-.tundra .dijitFolderOpened {
-	background: url(images/folderOpened.gif) no-repeat;
-}
-.tundra .dijitFolderClosed {
-	background: url(images/folderClosed.gif) no-repeat;
-}
-.tundra .dijitLeaf {
-	background: url(images/leaf.gif) no-repeat;
-}
-.tundra .dijitTreeNode .dojoDndItemBefore,
-.tundra .dijitTreeNode .dojoDndItemAfter {
-	border-bottom: none;
-	border-top: none;
-}
-.tundra .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {
-	
-	border-top: 2px solid #369;
-}
-.tundra .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {
-	
-	border-bottom: 2px solid #369;
-}
-.tundra .dijitProgressBar {
-	margin:2px 0px 2px 0px;
-}
-.tundra .dijitProgressBarEmpty {
-	
-	background:#fff url(images/progressBarEmpty.png) repeat-x center center;
-	border-color: #a2a2a2 #b8b8b8 #b8b8b8 #a2a2a2;
-}
-.tundra .dijitProgressBarTile {
-	
-	background:#f0f0f0 url(images/progressBarFull.png) repeat-x center center;
-}
-.tundra .dijitProgressBarFull {
-	border-right:1px solid #b8b8b8;
-}
-.tundra .dijitProgressBarLabel {
-	
-	color:#293a4b;
-}
-.tundra .dijitProgressBarIndeterminate .dijitProgressBarTile {
-	
-	background:#cad2de url(images/progressBarAnim.gif) repeat-x center center;
-}
-.tundra .dijitTitlePaneTitle {
-	background: #cccccc;
-	background:#fff url(images/titleBar.png) repeat-x bottom left;
-	border:1px solid #bfbfbf;
-	padding:3px 4px;
-}
-.tundra .dijitTitlePaneTitleHover  {
-	background: #f8fafd url(images/accordionItemHover.gif) bottom repeat-x;
-}
-.tundra .dijitTitlePane .dijitArrowNode {
-	background-image: url(images/spriteArrows.png);
-	background-repeat: no-repeat;
-	background-position: 0px 0px;
-	height: 7px;
-	width: 7px;
-}
-.dj_ie6 .tundra .dijitTitlePane .dijitArrowNode {
-	background-image: url(images/spriteArrows.gif);
-}
-.tundra .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: -14px 0px;
-}
-.tundra .dijitTitlePaneContentOuter {
-	background: #ffffff;
-	border:1px solid #bfbfbf;
-	border-top: 0px;
-}
-.tundra .dijitTitlePaneContentInner {
-	padding:10px;
-}
-.tundra .dijitTitlePaneTextNode {
-	margin-left: 4px;
-	margin-right: 4px;
-}
-.tundra .dijitCalendarIncrementControl {
-	
-	width:15px;
-	height:15px;
-	background-image: url(images/spriteRoundedIconsSmall.png);
-	background-repeat: no-repeat
-}
-.dj_ie6 .tundra .dijitCalendarIncrementControl {
-	font-size:.1em;
-	background-image: url(images/spriteRoundedIconsSmall.gif);
-}
-.tundra .dijitA11ySideArrow {
-	display: none;
-}
-.tundra .dijitCalendarDecrease {
-	background-position: top left;
-}
-.tundra .dijitCalendarIncrease {
-	background-position: -30px top;
-}
-.tundra .dijitCalendarContainer {
-	font-size: 100%;
-	border-spacing: 0;
-	border-collapse: separate;
-	border: 1px solid #ccc;
-	margin: 0;
-}
-.tundra .dijitCalendarMonthContainer th {
-	
-	background:#d3d3d3 url(images/titleBar.png) repeat-x top;
-	padding-top:.3em;
-	padding-bottom:.2em;
-	text-align:center;
-}
-.dj_ie6 .tundra .dijitCalendarMonthContainer th {
-	padding-top:.2em;
-	padding-bottom:.1em;
-}
-.tundra .dijitCalendarDayLabelTemplate {
-	
-	background:white url(images/calendarDayLabel.png) repeat-x bottom;
-	font-weight:normal;
-	padding-top:.15em;
-	padding-bottom:0em;
-	border-top: 1px solid #eeeeee;
-	color:#293a4b;
-	text-align:center;
-}
-.tundra .dijitCalendarBodyContainer {
-	border-bottom: 1px solid #eeeeee;
-}
-.tundra .dijitCalendarMonthLabel {
-	color:#293a4b;
-	font-weight: bold;
-}
-.tundra .dijitCalendarDateTemplate {
-	
-	font-size: 0.9em;
-	font-weight: bold;
-	text-align: center;
-	padding: 0.3em 0.3em 0.05em 0.3em;
-	letter-spacing: 1px;
-}
-.dj_ie .tundra .dijitCalendarDateTemplate {
-	padding: 0.1em .33em 0.02em .33em;
-}
-.tundra .dijitCalendarPreviousMonth,
-.tundra .dijitCalendarNextMonth 		{
-	
-	color:#999999;
-	background-color:#f8f8f8;
-}
-.tundra .dijitCalendarCurrentMonth {
-	
-	background-color: white;
-}
-.tundra .dijitCalendarCurrentDate {
-	
-	text-decoration:underline;
-	font-weight:bold;
-}
-.tundra .dijitCalendarHoveredDate {
-	background-color: #e2ebf2;
-}
-.tundra .dijitCalendarDisabledDate {
-	text-decoration: line-through;
-	background-color: white;	
-}
-.tundra .dijitCalendarSelectedDate {
-	
-	background-color:#bbc4d0 !important;
-	color:black !important;
-}
-.tundra .dijitCalendarYearContainer {
-	
-	background:white url(images/calendarYearLabel.png) repeat-x bottom;
-	border-top:1px solid #ccc;
-}
-.tundra .dijitCalendarYearLabel {
-	
-	margin:0;
-	padding:0.4em 0 0.25em 0;
-	text-align:center;
-}
-.tundra .dijitCalendarSelectedYear {
-	
-	color:black;
-	padding:0.2em;
-	padding-bottom:0.1em;
-	background-color:#bbc4d0 !important;
-}
-.tundra .dijitCalendarNextYear,
-.tundra .dijitCalendarPreviousYear {
-	
-	color:black !important;
-	font-weight:normal;
-}
-.tundra .dijitTimePickerTick,
-.tundra .dijitTimePickerMarker {
-	border-color: #ccc;
-}
-.tundra .dijitTimePickerTick {
-	color:white;
-}
-.tundra .dijitTimePickerMarker {
-	background:#d3d3d3 url(images/titleBar.png) repeat-x top;
-	color:#293a4b;
-	font-weight: bold;
-}
-.tundra .dijitTimePickerItemSelected {
-	color: black;
-	background: #bbc4d0 none;
-}
-.tundra .dijitTimePickerItemHover {
-	background: #60a1ea none;
-	color:white;
-}
-.tundra .dijitTimePickerItemHover,
-.tundra .dijitTimePickerItemSelected {
-	position: relative;
-	z-index: 10;
-}
-.tundra .dijitTimePickerTick .dijitTimePickerItemInner {
-	font-size:0.4em;
-}
-.tundra .dijitTimePickerItemHover .dijitTimePickerItemInner,
-.tundra .dijitTimePickerItemSelected .dijitTimePickerItemInner {
-	font-size:1em;
-}
-.tundra .dijitTimePickerMarkerHover {
-	border-top: 1px solid #ccc;
-}
-.tundra .dijitTimePickerTickHover,
-.tundra .dijitTimePickerTickSelected {
-	margin-top:-0.3em;
-	margin-bottom:-0.3em;
-	border-bottom: none;
-}
-.tundra .dijitToolbar {
-	border-bottom: 1px solid #ccc;
-	background:#eaeaea url(images/titleBar.png) repeat-x top left;
-}
-.dj_ie6 .tundra .dijitToolbar {
-	height: 10px;
-}
-.tundra .dijitToolbar .dijitButtonNode,
-.tundra .dijitToolbar .dijitComboButton .dijitButtonContents,
-.tundra .dijitToolbar .dijitComboButton .dijitDownArrowButton {
-	background: none;
-	margin: 0px;
-	padding: 0px;
-	border: none;
-	font-size: 12px;
-}
-.tundra .dijitToolbar .dijitButton,
-.tundra .dijitToolbar .dijitToggleButton,
-.tundra .dijitToolbar .dijitDropDownButton,
-.tundra .dijitToolbar .dijitComboButton .dijitButtonContents,
-.tundra .dijitToolbar .dijitComboButton .dijitDownArrowButton  {
-	background: none;
-	padding: 1px;
-}
-.tundra .dijitToolbar .dijitButtonChecked,
-.tundra .dijitToolbar .dijitToggleButtonChecked {
-	background-color:#d4dff2;
-	border:1px solid #316ac5;
-	padding: 0px;	
-}
-.tundra .dijitToolbar .dijitButtonCheckedHover,
-.tundra .dijitToolbar .dijitToggleButtonCheckedHover
- {
-	background-color:#abc1e5;
-	border:1px solid #316ac5;
-	padding: 0px;	
-}
-.tundra .dijitToolbar .dijitButtonHover,
-.tundra .dijitToolbar .dijitToggleButtonHover,
-.tundra .dijitToolbar .dijitDropDownButtonHover,
-.tundra .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
-.tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover {
-	
-	border: 1px solid #869cbf;
-	padding: 0px;	
-	background-color:#e1e5f0;
-}
-.tundra .dijitToolbar label {
-	padding: 3px 3px 0 6px;
-}
-.dj_ie .tundra .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
-.dj_ie .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
-	
-	border: 1px #555 dotted !important;
-	padding: 0px;
-}
-.tundra .dijitToolbarSeparator {
-	
-	background: url(../../icons/images/editorIconsEnabled.png);
-}
-.tundra .dijitToolbarRtl .dijitToolbarSeparator {
-	
-	background-image: url(../../icons/images/editorIconsDisabled.png);
-}
-.tundra .dijitDialog {
-	background: #fff;
-	border: 1px solid #7eabcd;
-	padding: 0px;
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-}
-.tundra .dijitDialogPaneContent {
-	background: #fff;
-	border-top: 1px solid #d3d3d3;
-	padding:10px;
-}
-.tundra .dijitDialogTitleBar {
-	
-	background: #fafafa url(images/titleBar.png) repeat-x top left;
-	padding: 5px 6px 3px 6px;
-	outline:0; 
-}
-.tundra .dijitDialogTitle {
-	
-	font-weight: bold;
-	padding: 0px 4px;
-}
-.tundra .dijitDialogCloseIcon {
-	
-	
-	background: url(images/tabClose.png) no-repeat right top;
-	position: absolute;
-	vertical-align: middle;
-	right: 6px;
-	top: 4px;
-	height: 15px;
-	width: 15px;
-}
-.dj_ie6 .tundra .dijitDialogCloseIcon {
-	background : url(images/tabClose.gif) no-repeat right top;
-}
-.tundra .dijitDialogCloseIconHover {
-	background: url(images/tabCloseHover.png) no-repeat right top;
-}
-.dj_ie6 .tundra .dijitDialogCloseIconHover {
-	background : url(images/tabCloseHover.gif) no-repeat right top;
-}
-.tundra .dijitTooltip,
-.tundra .dijitTooltipDialog {
-	
-	background: transparent;	
-}
-.dijitTooltipBelow {
-	
-	padding-top: 13px;
-}
-.dijitTooltipAbove {
-	
-	padding-bottom: 13px;
-}
-.tundra .dijitTooltipContainer {
-	
-	background: #ffffff url(images/popupMenuBg.gif) repeat-x bottom left;
-	border: 1px solid #7eabcd;
-	padding: 0.45em;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-}
-.tundra .dijitTooltipConnector {
-	
-	border:0px;
-	z-index: 2;
-}
-.tundra .dijitTooltipABRight .dijitTooltipConnector {
-	
-	left: auto !important;
-	right: 3px;
-}
-.tundra .dijitTooltipBelow .dijitTooltipConnector {
-	
-	top: 0px;
-	left: 3px;
-	background:url(images/tooltipConnectorUp.png) no-repeat top left;
-	width:16px;
-	height:14px;
-}
-.dj_ie .tundra .dijitTooltipBelow .dijitTooltipConnector {
-	
-	background-image: url(images/tooltipConnectorUp.gif);
-}
-.tundra .dijitTooltipAbove .dijitTooltipConnector {
-	
-	bottom: 0px;
-	left: 3px;
-	background:url(images/tooltipConnectorDown.png) no-repeat top left;
-	width:16px;
-	height:14px;
-}
-.dj_ie .tundra .dijitTooltipAbove .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorDown.gif);
-}
-.dj_ie6 .tundra .dijitTooltipAbove .dijitTooltipConnector {
-	bottom: -3px;
-}
-.tundra .dijitTooltipLeft {
-	padding-right: 14px;
-}
-.dj_ie6 .tundra .dijitTooltipLeft {
-	padding-left: 15px;
-}
-.tundra .dijitTooltipLeft .dijitTooltipConnector {
-	
-	right: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorRight.png) no-repeat top left;
-	width:16px;
-	height:14px;
-}
-.dj_ie .tundra .dijitTooltipLeft .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorRight.gif);
-}
-.tundra .dijitTooltipRight {
-	padding-left: 14px;
-}
-.tundra .dijitTooltipRight .dijitTooltipConnector {
-	
-	left: 0px;
-	bottom: 3px;
-	background:url(images/tooltipConnectorLeft.png) no-repeat top left;
-	width:16px;
-	height:14px;
-}
-.dj_ie .tundra .dijitTooltipRight .dijitTooltipConnector {
-	background-image: url(images/tooltipConnectorLeft.gif);
-}
-.dj_webkit .tundra .dijitTooltipContainer {
-	-webkit-box-shadow: 0px 5px 10px #adadad;
-}
-.tundra .dijitMenu,
-.tundra .dijitMenuBar {
-	border: 1px solid #7eabcd;
-	margin: 0px;
-	padding: 0px;
-	background-color: #f7f7f7;
-}
-.tundra .dijitBorderContainer .dijitMenuBar {
-	border:1px solid #ccc;
-}
-.tundra .dijitMenuItem {
-	font-family: sans-serif;
-	margin: 0;
-}
-.tundra .dijitMenuItem {
-	padding: 4px 5px;
-}
-.tundra .dijitMenuPreviousButton, .tundra .dijitMenuNextButton {
-	font-style: italic;
-}
-.tundra .dijitMenuItem td {
-	padding: 2px;
-}
-.tundra .dijitMenuPassive .dijitMenuItemHover,
-.tundra .dijitMenuItemSelected {
-	background-color: #3559ac;
-	color:#fff;
-}
-.tundra .dijitMenuItemIcon {
-	width: 16px;
-	height: 16px;
-}
-.tundra .dijitMenuExpand {
-	
-	width: 7px;
-	height: 7px;
-	background-image: url(images/spriteArrows.png);
-	background-position: -14px 0px;
-}
-.dj_ie6 .tundra .dijitMenuExpand {
-	background-image: url(images/spriteArrows.gif);
-}
-.tundra .dijitMenuSeparatorTop {
-	border-bottom: 1px solid #9b9b9b;
-}
-.tundra .dijitMenuSeparatorBottom {
-	border-top: 1px solid #e8e8e8;
-}
-.tundra .dijitCheckedMenuItemIconChar {
-	display: none;
-}
-.tundra .dijitCheckedMenuItemIcon {
-	background-image: url(images/checkmark.png);
-	background-position: -80px;
-}
-.dj_ie6 .tundra .dijitCheckedMenuItemIcon {
-	background-image: url(images/checkmark.gif);
-}
-.tundra .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
-	background-position: -64px;
-}
-.dijitEditor {
-	border:1px solid #bfbfbf;
-	border-top:0;
-}
-.tundra .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.tundra .dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled.png); 
-	background-repeat: no-repeat;
-	width: 18px;
-	height: 18px;
-	text-align: center;
-}
-.dijitDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled.png); 
-}
-.dijitEditorIconSep { background-position: 0px; }
-.dijitEditorIconSave { background-position: -18px; }
-.dijitEditorIconPrint { background-position: -36px; }
-.dijitEditorIconCut { background-position: -54px; }
-.dijitEditorIconCopy { background-position: -72px; }
-.dijitEditorIconPaste { background-position: -90px; }
-.dijitEditorIconDelete { background-position: -108px; }
-.dijitEditorIconCancel { background-position: -126px; }
-.dijitEditorIconUndo { background-position: -144px; }
-.dijitEditorIconRedo { background-position: -162px; }
-.dijitEditorIconSelectAll { background-position: -180px; }
-.dijitEditorIconBold { background-position: -198px; }
-.dijitEditorIconItalic { background-position: -216px; }
-.dijitEditorIconUnderline { background-position: -234px; }
-.dijitEditorIconStrikethrough { background-position: -252px; }
-.dijitEditorIconSuperscript { background-position: -270px; }
-.dijitEditorIconSubscript { background-position: -288px; }
-.dijitEditorIconJustifyCenter { background-position: -306px; }
-.dijitEditorIconJustifyFull { background-position: -324px; }
-.dijitEditorIconJustifyLeft { background-position: -342px; }
-.dijitEditorIconJustifyRight { background-position: -360px; }
-.dijitEditorIconIndent { background-position: -378px; }
-.dijitEditorIconOutdent { background-position: -396px; }
-.dijitEditorIconListBulletIndent { background-position: -414px; }
-.dijitEditorIconListBulletOutdent { background-position: -432px; }
-.dijitEditorIconListNumIndent { background-position: -450px; }
-.dijitEditorIconListNumOutdent { background-position: -468px; }
-.dijitEditorIconTabIndent { background-position: -486px; }
-.dijitEditorIconLeftToRight { background-position: -504px; }
-.dijitEditorIconRightToLeft, .dijitEditorIconToggleDir { background-position: -522px; }
-.dijitEditorIconBackColor { background-position: -540px; }
-.dijitEditorIconForeColor { background-position: -558px; }
-.dijitEditorIconHiliteColor { background-position: -576px; }
-.dijitEditorIconNewPage { background-position: -594px; }
-.dijitEditorIconInsertImage { background-position: -612px; }
-.dijitEditorIconInsertTable { background-position: -630px; }
-.dijitEditorIconSpace { background-position: -648px; }
-.dijitEditorIconInsertHorizontalRule { background-position: -666px; }
-.dijitEditorIconInsertOrderedList { background-position: -684px; }
-.dijitEditorIconInsertUnorderedList { background-position: -702px; }
-.dijitEditorIconCreateLink { background-position: -720px; }
-.dijitEditorIconUnlink { background-position: -738px; }
-.dijitEditorIconViewSource { background-position: -756px; }
-.dijitEditorIconRemoveFormat { background-position: -774px; }
-.dijitEditorIconFullScreen { background-position: -792px; }
-.dijitEditorIconWikiword { background-position: -810px; }
- 
-.dijitColorPalette {
-	border:1px solid #7eabcd;
-	background:#fff;
-	-moz-border-radius: 0px !important;
-}
-.dijitRtl .dijitPlaceHolder {
-	left: auto;
-	right: 0;
-}
-.dijitMenuItemRtl {
-	text-align: right;
-}
-.dj_iequirks .dijitComboButtonRtl BUTTON {
-	
-	float:left;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitComboBoxRtl .dijitArrowButtonContainer {
-	
-	border-right-width: 1px !important;
-	border-right-style: solid !important;
-	border-left-width: 0px !important;
-	border-left-style: none !important;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer {
-	border-right: 1px solid black !important;
-	border-left: 0px none black !important;
-}
-.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
-	right: 0;
-	left: auto;
-}
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitArrowButtonContainer {
-	float: left;
-}
-.dijitCalendarRtl .dijitCalendarNextYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarRtl .dijitCalendarPreviousYear {
-	margin:0 0 0 0.55em;
-}
-.dijitSliderRtl .dijitSliderImageHandleV {
-	left:auto;
-}
-.dijitSliderRtl .dijitSliderImageHandleH {
-	left:-50%;
-}
-.dijitSliderRtl .dijitSliderMoveableH {
-	right:auto;
-	left:0;
-}
-.dijitSliderRtl .dijitRuleContainerV {
-	float:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleContainerV {
-	text-align:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelV {
-	text-align:left;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelH {
-	zoom:1;
-}
-.dijitSliderRtl .dijitSliderProgressBarH {
-	
-	float:right;
-	right:0;
-	left:auto;
-}
-.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError {
-	background-position:right;
-	padding-right:25px;
-}
-.dijitTabRtl .dijitTabCloseButton {
-	margin-left: 0px;
-	margin-right: 1em;
-}
-.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
-	width:100%;
-}
-.dijitColorPaletteRtl .dijitColorPaletteUnder {
-	
-	left: auto;
-	right: 0;
-}
-.dijitSelectRtl .dijitButtonContents {
-	text-align: right;
-}
-.tundra .dijitCalendarRtl .dijitCalendarDecrease {
-	background-position: -30px top;
-}
-.tundra .dijitCalendarRtl .dijitCalendarIncrease {
-	background-position: 0px top;
-}
- .dj_ie6 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover,
-.dj_ie7 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover {
-        border-top: 0px; 
-}
-.tundra .dijitDialogRtl .dijitDialogCloseIcon {
-	right: auto;
-	left: 5px;
-}
-.tundra .dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.tundra .dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitToolbarRtl .dijitToolbarSeparator {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png);
-}
-.tundra .dijitMenuItemRtl .dijitMenuExpand {
-	background-position: -7px 0px;
-}
-.tundra .dijitTreeNodeRtl,
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoLeaf {
-	
-    background-image: none;
-}
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoOpened {
-	
-	background-image: url(images/treeExpand_minus_rtl.gif);
-}
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoClosed {
-	background-image: url(images/treeExpand_plus_rtl.gif);
-}
-.tundra .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {
-	background-position: -7px 0px;
-}
-.tundra .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
-}
-.tundra .dijitTabRtl .dijitTabInnerDiv {
-	padding:2px 9px 2px 8px;
-}
-.tundra .tabStrip-disabled .tabStripButtonRtl .dijitTabInnerDiv {
-	
-	padding-bottom: 3px;
-	padding-top: 1px;
-}
-.tundra .tabStripButtonRtl .dijitTabInnerDiv {
-	padding: 3px 2px 4px 2px;
-}
-.tundra .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-.dj_ie-rtl .tundra .dijitTabContainerLeft-tabs {
-	margin-left: 1px !important;
-}
-.dj_ie-rtl .tundra .dijitTabContainerRight-tabs {
-	margin-right: 1px !important;
-}
-.tundra .dijitTabContainerLeft-tabs .dijitTabRtl,
-.tundra .dijitTabContainerRight-tabs .dijitTabRtl {
-	margin-left:0px;
-}
-.dj_ie .tundra .dijitTabRtl .dijitTabInnerDiv {
-	
-	width : 0.1% !important;
-}
-.dj_iequirks-rtl .tundra .dijitTabContainerTopNone,
-.dj_iequirks-rtl .tundra .dijitTabContainerBottomNone {
-	
-	border-left: 1px solid #fff;
-	border-right: 1px solid #fff;
-}
-.tundra .dijitSliderRtl .dijitSliderProgressBarH,
-.tundra .dijitSliderRtl .dijitSliderRemainingBarH,
-.tundra .dijitSliderRtl .dijitSliderLeftBumper,
-.tundra .dijitSliderRtl .dijitSliderRightBumper,
-.tundra .dijitSliderRtl .dijitSliderTopBumper {
-	background-position: top right;
-}
-.tundra .dijitSliderRtl .dijitSliderProgressBarV,
-.tundra .dijitSliderRtl .dijitSliderRemainingBarV,
-.tundra .dijitSliderRtl .dijitSliderBottomBumper {
-	background-position: bottom right;
-}
-.tundra .dijitSliderRtl .dijitSliderLeftBumper {
-	border-left-width: 0px;
-	border-right-width: 1px;
-}
-.tundra .dijitSliderRtl .dijitSliderRightBumper {
-	border-left-width: 1px;
-	border-right-width: 0px;
-}
-.tundra .dijitSliderRtl .dijitSliderIncrementIconH {
-	background-position: -7px 0px;
-}
-.tundra .dijitSliderRtl .dijitSliderDecrementIconH {
-	background-position: -14px 0px;
-}
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+@import url("../dijit.css");
+@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/
+@import url("Common.css");
+@import url("layout/ContentPane.css");
+@import url("layout/TabContainer.css");
+@import url("layout/AccordionContainer.css");
+@import url("layout/SplitContainer.css");
+@import url("layout/BorderContainer.css");
+@import url("form/Common.css");
+@import url("form/Button.css");
+@import url("form/Checkbox.css");
+@import url("form/RadioButton.css");
+@import url("form/Slider.css");
+@import url("form/Select.css");
+@import url("Tree.css");
+@import url("ProgressBar.css");
+@import url("TitlePane.css");
+@import url("Calendar.css");
+@import url("TimePicker.css");
+@import url("Toolbar.css");
+@import url("Dialog.css");
+@import url("Menu.css");
+@import url("Editor.css");
+@import url("../../icons/editorIcons.css"); /* sprite for editor icons to be used by all themes */
+@import url("ColorPalette.css");
+@import url("tundra_rtl.css");
diff --git a/lib/dijit/themes/tundra/tundra_rtl.css b/lib/dijit/themes/tundra/tundra_rtl.css
index 0ec76debc..58b7541fb 100644
--- a/lib/dijit/themes/tundra/tundra_rtl.css
+++ b/lib/dijit/themes/tundra/tundra_rtl.css
@@ -1,200 +1,27 @@
+/*
+	Adds cosmetic styling to Dijit.  Users may swap with a custom theme CSS file.
 
-.dijitRtl .dijitPlaceHolder {
-	left: auto;
-	right: 0;
-}
-.dijitMenuItemRtl {
-	text-align: right;
-}
-.dj_iequirks .dijitComboButtonRtl BUTTON {
-	
-	float:left;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitComboBoxRtl .dijitArrowButtonContainer {
-	
-	border-right-width: 1px !important;
-	border-right-style: solid !important;
-	border-left-width: 0px !important;
-	border-left-style: none !important;
-}
-.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer,
-.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer {
-	border-right: 1px solid black !important;
-	border-left: 0px none black !important;
-}
-.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
-	right: 0;
-	left: auto;
-}
-.dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
-.dijitTextBoxRtl .dijitArrowButtonContainer {
-	float: left;
-}
-.dijitCalendarRtl .dijitCalendarNextYear {
-	margin:0 0.55em 0 0;
-}
-.dijitCalendarRtl .dijitCalendarPreviousYear {
-	margin:0 0 0 0.55em;
-}
-.dijitSliderRtl .dijitSliderImageHandleV {
-	left:auto;
-}
-.dijitSliderRtl .dijitSliderImageHandleH {
-	left:-50%;
-}
-.dijitSliderRtl .dijitSliderMoveableH {
-	right:auto;
-	left:0;
-}
-.dijitSliderRtl .dijitRuleContainerV {
-	float:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleContainerV {
-	text-align:right;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelV {
-	text-align:left;
-}
-.dj_ie .dijitSliderRtl .dijitRuleLabelH {
-	zoom:1;
-}
-.dijitSliderRtl .dijitSliderProgressBarH {
-	
-	float:right;
-	right:0;
-	left:auto;
-}
-.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError {
-	background-position:right;
-	padding-right:25px;
-}
-.dijitTabRtl .dijitTabCloseButton {
-	margin-left: 0px;
-	margin-right: 1em;
-}
-.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
-	width:100%;
-}
-.dijitColorPaletteRtl .dijitColorPaletteUnder {
-	
-	left: auto;
-	right: 0;
-}
-.dijitSelectRtl .dijitButtonContents {
-	text-align: right;
-}
-.tundra .dijitCalendarRtl .dijitCalendarDecrease {
-	background-position: -30px top;
-}
-.tundra .dijitCalendarRtl .dijitCalendarIncrease {
-	background-position: 0px top;
-}
- .dj_ie6 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover,
-.dj_ie7 .tundra .dijitTimePickerRtl .dijitTimePickerMarkerHover {
-        border-top: 0px; 
-}
-.tundra .dijitDialogRtl .dijitDialogCloseIcon {
-	right: auto;
-	left: 5px;
-}
-.tundra .dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.tundra .dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitEditorRtl .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png); 
-}
-.dijitEditorRtlDisabled .dijitEditorIcon {
-	background-image: url(../../icons/images/editorIconsDisabled_rtl.png); 
-}
-.dijitToolbarRtl .dijitToolbarSeparator {
-	background-image: url(../../icons/images/editorIconsEnabled_rtl.png);
-}
-.tundra .dijitMenuItemRtl .dijitMenuExpand {
-	background-position: -7px 0px;
-}
-.tundra .dijitTreeNodeRtl,
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoLeaf {
-	
-    background-image: none;
-}
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoOpened {
-	
-	background-image: url(images/treeExpand_minus_rtl.gif);
-}
-.tundra .dijitTreeNodeRtl .dijitTreeExpandoClosed {
-	background-image: url(images/treeExpand_plus_rtl.gif);
-}
-.tundra .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {
-	background-position: -7px 0px;
-}
-.tundra .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
-}
-.tundra .dijitTabRtl .dijitTabInnerDiv {
-	padding:2px 9px 2px 8px;
-}
-.tundra .tabStrip-disabled .tabStripButtonRtl .dijitTabInnerDiv {
-	
-	padding-bottom: 3px;
-	padding-top: 1px;
-}
-.tundra .tabStripButtonRtl .dijitTabInnerDiv {
-	padding: 3px 2px 4px 2px;
-}
-.tundra .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-.dj_ie-rtl .tundra .dijitTabContainerLeft-tabs {
-	margin-left: 1px !important;
-}
-.dj_ie-rtl .tundra .dijitTabContainerRight-tabs {
-	margin-right: 1px !important;
-}
-.tundra .dijitTabContainerLeft-tabs .dijitTabRtl,
-.tundra .dijitTabContainerRight-tabs .dijitTabRtl {
-	margin-left:0px;
-}
-.dj_ie .tundra .dijitTabRtl .dijitTabInnerDiv {
-	
-	width : 0.1% !important;
-}
-.dj_iequirks-rtl .tundra .dijitTabContainerTopNone,
-.dj_iequirks-rtl .tundra .dijitTabContainerBottomNone {
-	
-	border-left: 1px solid #fff;
-	border-right: 1px solid #fff;
-}
-.tundra .dijitSliderRtl .dijitSliderProgressBarH,
-.tundra .dijitSliderRtl .dijitSliderRemainingBarH,
-.tundra .dijitSliderRtl .dijitSliderLeftBumper,
-.tundra .dijitSliderRtl .dijitSliderRightBumper,
-.tundra .dijitSliderRtl .dijitSliderTopBumper {
-	background-position: top right;
-}
-.tundra .dijitSliderRtl .dijitSliderProgressBarV,
-.tundra .dijitSliderRtl .dijitSliderRemainingBarV,
-.tundra .dijitSliderRtl .dijitSliderBottomBumper {
-	background-position: bottom right;
-}
-.tundra .dijitSliderRtl .dijitSliderLeftBumper {
-	border-left-width: 0px;
-	border-right-width: 1px;
-}
-.tundra .dijitSliderRtl .dijitSliderRightBumper {
-	border-left-width: 1px;
-	border-right-width: 0px;
-}
-.tundra .dijitSliderRtl .dijitSliderIncrementIconH {
-	background-position: -7px 0px;
-}
-.tundra .dijitSliderRtl .dijitSliderDecrementIconH {
-	background-position: -14px 0px;
-}
+	NOTES:
+	---
+	Dialog.css contains css classes for both Dialog and Tooltip!
+	This because currently a dijit.TooltipDialog exist. Until this is resolved
+	you need to include Dialog.css for both dijits
+	---
+	Toolbar.css contains classes also used in Editor. Until this is resolved
+	you need to include Toolbar.css for both Toolbar and Editor
+	---
+	Button.css contains classes for combobox,
+
+*/
+/* RTL files */
+@import url("../dijit_rtl.css");
+@import url("Calendar_rtl.css");
+@import url("TimePicker_rtl.css");
+@import url("Dialog_rtl.css");
+@import url("Editor_rtl.css");
+@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/
+@import url("Menu_rtl.css");
+@import url("Tree_rtl.css");
+@import url("TitlePane_rtl.css");
+@import url("layout/TabContainer_rtl.css");
+@import url("form/Slider_rtl.css");
-- 
cgit v1.2.3