Style hover/active states with box-shadow, add multiline example

[interactivellama]

Overview:

• Hover/active outline styling removed and replaced with inset and outset double box-shadow
• Text color change on hover has been removed, now that a hover effect exists for the checkbox/radio.

Fixes for #1180:

• Disabled checkbox (no-JS) no long has a hover effect.-. Outline has not been removed, but replaced with box-shadow affect.
• Box-shadow is now very similar to Mac UI effect.
• Disabled radio (no-JS) no long has a hover effect.
• "Block indention" cannot be fixed within current setup of "label:before backgrounds masquerading as checkboxen and radios." Solution was to add the multiline style to checkbox and radio to allow a "column-like" float. This setup expects to be wrapped in <form class="form-horizontal"><div class="form-group"> or similar container with negative margins. Please note duplicate labels that point to same input id. This is permissible, although I am unsure of how it affects accessibility.

Partially fixes ExactTarget/fuelux-mctheme#207 in MCtheme.

• Remove hover color change on label now that there is a hover effect on icon
• Needs visual change on focus (via keyboard, tabbing)

Examples of multiline checkbox and radio markup using Bootstrap's form-horizontal paradigm.

<form class="form-horizontal">
  <div class="form-group">
    <div class="checkbox multiline">
      <input type="checkbox" id="checkboxes-no-js-multiline" name="checkboxes-no-js-multiline" value="">
      <label for="checkboxes-no-js-multiline"></label>
    </div>
    <div class="control-label">
      <label for="checkboxes-no-js-multiline">Have you eaten an african cherry orange, bilberry, ceylon gooseberry, dead man's fingers, or a governor’s plum?</label>
    </div>
  </div>
</form>

<form class="form-horizontal">
  <div class="form-group">
    <div class="radio multiline">
      <input type="radio" id="radio-no-js-multiline--1" name="radio-no-js-multiline" value="">
      <label for="radio-no-js-multiline--1"></label>
    </div>
    <div class="control-label">
      <label for="radio-no-js-multiline--1">Have you eaten an african cherry orange, bilberry, ceylon gooseberry, dead man's fingers, or a governor’s plum?</label>
    </div>
  </div>
</form>

Possible accessibility issues? According to this article from 2008:

Apple VoiceOver does not recognise more than one label element associated with a form control and reads only the label that comes first in the document’s source order.
JAWS and Window-Eyes both do the opposite and read only the last label when an input field gains focus.
The only screen reader of those that I tested that does handle multiple labels is Fire Vox.