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