1 files changed, 45 insertions, 16 deletions
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;
+}