update forms help-block

docs/assets/css/bootstrap.css

@@ -855,11 +855,12 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
 ::-webkit-input-placeholder {
   color: #999999;
 }
+.help-block, .help-inline {
+  color: #555555;
+}
 .help-block {
   display: block;
-  margin-top: 5px;
-  margin-bottom: 0;
-  color: #999999;
+  margin-bottom: 9px;
 }
 .help-inline {
   display: inline-block;
@@ -867,7 +868,6 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   /* IE7 inline-block hack */
 
   *zoom: 1;
-  margin-bottom: 9px;
   vertical-align: middle;
   padding-left: 5px;
 }
@@ -1044,6 +1044,10 @@ legend + .control-group {
 .form-horizontal .controls {
   margin-left: 160px;
 }
+.form-horizontal .help-block {
+  margin-top: 9px;
+  margin-bottom: 0;
+}
 .form-horizontal .form-actions {
   padding-left: 160px;
 }

docs/base-css.html

@@ -864,6 +864,7 @@ For example, <code>section</code> should be wrapped as inline.
       <form class="well">
         <label>Label name</label>
         <input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>
+        <p class="help-block">Example block-level help text here.</p>
         <label class="checkbox">
           <input type="checkbox"> Check me out
         </label>

docs/templates/pages/base-css.mustache

@@ -788,6 +788,7 @@
       <form class="well">
         <label>{{_i}}Label name{{/i}}</label>
         <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-inline">Associated help text!</span>
+        <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
         <label class="checkbox">
           <input type="checkbox"> {{_i}}Check me out{{/i}}
         </label>

less/forms.less

@@ -335,17 +335,19 @@ select:focus:required:invalid {
 // HELP TEXT
 // ---------
 
+.help-block,
+.help-inline {
+  color: @gray; // lighten the text some for contrast
+}
+
 .help-block {
   display: block; // account for any element using help-block
-  margin-top: 5px;
-  margin-bottom: 0;
-  color: @grayLight;
+  margin-bottom: @baseLineHeight / 2;
 }
 
 .help-inline {
   display: inline-block;
   .ie7-inline-block();
-  margin-bottom: 9px;
   vertical-align: middle;
   padding-left: 5px;
 }
@@ -528,6 +530,11 @@ legend + .control-group {
   .controls {
     margin-left: 160px;
   }
+  // Remove bottom margin on block level help text since that's accounted for on .control-group
+  .help-block {
+    margin-top: @baseLineHeight / 2;
+    margin-bottom: 0;
+  }
   // Move over buttons in .form-actions to align with .controls
   .form-actions {
     padding-left: 160px;