Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly

lib/forms.less

@@ -116,6 +116,28 @@ textarea {
 
 
 
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+  padding-left: 18px;
+}
+.radio input[type=radio],
+.checkbox input[type=checkbox] {
+  float: left;
+  margin-left: -18px;
+}
+
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 6px; // has to be padding because margin collaspes
+}
+
+
+
 // FOCUS STATE
 // -----------
 
@@ -390,11 +412,6 @@ textarea[readonly] {
   .controls {
     margin-left: 150px;
   }
-  // Move the options list down to align with labels
-  .controls > .radio:first-child,
-  .controls > .checkbox:first-child {
-    padding-top: 6px; // has to be padding because margin collaspes
-  }
   // Move over buttons in .form-actions to align with .controls
   .form-actions {
     padding-left: 150px;