improve stepper question clarity, correct style label wrapping bug

Author: possumbilities

src/index.html

@@ -158,7 +158,7 @@ <h1>Choose a License for Your Work</h1>
 
         <li>
         <fieldset id="require-attribution">
-            <legend>Attribution?</legend>
+            <legend>Require attribution for your work?</legend>
 
             <div>
                 <input type="radio" id="yes-attribution" name="attribution" value="yes" />
@@ -168,6 +168,7 @@ <h1>Choose a License for Your Work</h1>
             <div>
                 <input type="radio" id="no-attribution" name="attribution" value="no" />
                 <label for="no-attribution">No</label>
+                <!-- <span role="tooltip">Anyone can use my work, even without giving me attribution.</span> -->
             </div>
 
         </fieldset>
@@ -176,7 +177,7 @@ <h1>Choose a License for Your Work</h1>
 
         <li>
         <fieldset id="allow-commercial-use">
-            <legend>Commercial Use?</legend>
+            <legend>Allow others to use your work commercially?</legend>
 
             <div>
                 <input type="radio" id="yes-commercial" name="commercial" value="yes" />
@@ -193,7 +194,7 @@ <h1>Choose a License for Your Work</h1>
 
         <li>
         <fieldset id="allow-derivatives">
-            <legend>Derivative Works?</legend>
+            <legend>Allow others to remix, adapt, or build upon your work?</legend>
 
             <div>
                 <input type="radio" id="yes-derivatives" name="derivatives" value="yes" />
@@ -210,7 +211,7 @@ <h1>Choose a License for Your Work</h1>
 
         <li>
         <fieldset id="share-alike">
-            <legend>Sharing Requirements?</legend>
+            <legend>Require adaptions of your work to be licensed under the same CC license?</legend>
 
             <div>
                 <input type="radio" id="yes-sharing-requirements" name="sharing-requirements" value="yes" />

src/style.css

@@ -164,9 +164,17 @@
 }
 
 .chooser-page form#chooser label {
+    /* display: block; */
+    font-size: .7em;
+    font-weight: 400;
+}
+
+.chooser-page form#chooser span[role=tooltip] {
     display: block;
     font-size: .7em;
     font-weight: 400;
+    opacity: .3;
+
 }
 
 .chooser-page form#chooser #attribution-details span {