1 files changed, 58 insertions, 33 deletions
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;
 }