dijit-rails 0.11.0 → 0.14.0

data/vendor/assets/stylesheets/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%;	
+}

data/vendor/assets/stylesheets/{claro → themes/claro}/TitlePane.css

@@ -6,7 +6,7 @@
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   border: 1px solid #b5bcc7;
   padding: 0 7px 3px 7px;
@@ -24,7 +24,7 @@
   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
 }
 .claro .dijitTitlePaneTitleFocus {

data/vendor/assets/stylesheets/themes/claro/TitlePane.less

@@ -0,0 +1,70 @@
+/* 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?
+	.standard-gradient;
+	border:1px solid @border-color;
+	padding: 0 7px 3px 7px;
+	min-height:17px;
+}
+.claro .dijitTitlePaneTitleHover {
+	background-color: @hovered-background-color;
+	border-color: @hovered-border-color;
+}
+.claro .dijitTitlePaneTitleActive {
+	background-color: @pressed-background-color;
+	border-color: @pressed-border-color;
+	.active-gradient;
+}
+.claro .dijitTitlePaneTitleFocus {
+	margin-top:3px;
+	padding-bottom:2px;
+}
+.claro .dijitTitlePane .dijitArrowNode {
+	background-image: url(@image-arrow-sprite);
+	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 .dijitTitlePane .dijitTitlePaneTextNode {
+	color:@text-color;
+}
+.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;
+}

data/vendor/assets/stylesheets/themes/claro/TitlePane_rtl.less

@@ -0,0 +1,7 @@
+/* TitlePane */
+
+@import "variables";
+
+.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {
+	background-position: -7px 0;
+}

data/vendor/assets/stylesheets/{claro → themes/claro}/Toolbar.css

@@ -7,7 +7,7 @@
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   padding: 2px 0 2px 4px;
   zoom: 1;
@@ -34,14 +34,9 @@
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   transition-duration: 0.3s;
-  background-image: url("images/standardGradient.png");
-  background-repeat: repeat-x;
-  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  _background-image: none;
   background-color: rgba(171, 214, 255, 0);
+  background-image: none;
+  
 }
 .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
 .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
@@ -85,6 +80,13 @@
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
   border-width: 1px;
   background-color: #abd6ff;
+  background-image: url("images/standardGradient.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
   padding: 1px;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
@@ -101,7 +103,7 @@
   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   padding: 1px;
 }
@@ -123,7 +125,7 @@
   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
 }
 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
@@ -133,7 +135,7 @@
   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {

data/vendor/assets/stylesheets/themes/claro/Toolbar.less

@@ -0,0 +1,173 @@
+/* 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;
+	.standard-gradient;
+	padding: 2px 0 2px 4px;
+	zoom: 1;
+}
+
+.claro .dijitToolbar label {
+	padding: 0 3px 0 6px;
+}
+
+/** override claro/form/Button.css, and also ComboBox down arrow **/
+.claro .dijitToolbar .dijitButton .dijitButtonNode,
+.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
+.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.claro .dijitToolbar .dijitComboBox .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);
+
+	background-color:rgba(171,214,255,0);
+	background-image: none;	/* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
+}
+.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
+	background-color: transparent;   /* for IE, which doesn't understand rgba(...) */
+}
+
+/* hover status */
+.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover,
+.dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode {
+    /* button should still turn blue on hover, so need to override .dj_ie rules above */
+	background-color: @button-hovered-background-color;
+}
+
+/* active status */
+.dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
+    /* button should still turn blue on press, so need to override .dj_ie rules above */
+	background-color: @button-pressed-background-color;
+}
+
+.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 {
+	border-width:1px;
+	background-color: @hovered-background-color;
+	.standard-gradient;
+	padding: 1px;
+}
+.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
+.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
+	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;
+	.active-gradient;
+	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;
+	padding: 2px;
+}
+.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
+	background-color: @pressed-background-color;
+	.active-gradient;
+}
+.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
+	background-color: @pressed-background-color;
+	.active-gradient;
+}
+
+/* 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;
+}
+
+.claro .dijitToolbarSeparator {
+	/* separator icon in the editor sprite */
+	background: url(@image-editor-icons-enabled);
+}
+
+/* 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%;
+}
+

data/vendor/assets/stylesheets/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;
+}

data/vendor/assets/stylesheets/{claro → themes/claro}/Tree.css

@@ -33,7 +33,7 @@
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   padding: 3px 0 1px;
   border-color: #759dc0;
@@ -47,7 +47,7 @@
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   padding: 3px 0 1px;
   border-color: #759dc0;
@@ -64,7 +64,7 @@
   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
-  background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
   _background-image: none;
   padding: 3px 0 1px;
   border-color: #759dc0;

data/vendor/assets/stylesheets/themes/claro/Tree.less

@@ -0,0 +1,127 @@
+/* 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 0 2px 0;
+
+	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-position:0 0;
+	background-repeat:repeat-x;
+
+	border: solid 0 transparent;
+
+	color: @text-color;
+
+	.transition-property(background-color, border-color);
+	.transition-duration(.25s);
+	.transition-timing-function(ease-out);
+}
+
+.claro .dijitTreeRowSelected {
+	background-color: @selected-background-color;
+	.standard-gradient;
+	padding: 3px 0 1px;
+	border-color: @selected-border-color;
+	border-width: 1px 0;
+	color: @selected-text-color;
+}
+.claro .dijitTreeRowHover {
+	background-color: @hovered-background-color;
+	.standard-gradient;
+	padding: 3px 0 1px;
+	border-color: @hovered-border-color;
+	border-width: 1px 0;
+	color: @hovered-text-color;
+	.transition-duration(.25s);
+}
+.claro .dijitTreeRowActive {
+	background-color:@pressed-background-color;
+	.active-gradient;
+	padding: 3px 0 1px;
+	border-color: @pressed-border-color;
+	border-width: 1px 0;
+	color: @selected-text-color;
+}
+.claro .dijitTreeRowFocused {
+	background-repeat: repeat;
+}
+
+/* expando (open/closed) icon */
+
+.claro .dijitTreeExpando {
+	background-image: url(@image-tree-expand);
+    width: 16px;
+    height: 16px;
+	background-position: -35px 0;		/* for dijitTreeExpandoOpened */
+}
+.dj_ie6 .claro .dijitTreeExpando {
+	background-image: url(@image-tree-expand-ie6);
+}
+.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(@image-loading-animation);
+}
+
+/* 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?
+}