Fix styling of inline HTML on choices.

This patch vertically aligns the answer icon, the radio button,
and the answer (which may contain arbitrary HTML).

mentoring/public/css/questionnaire.css

@@ -9,7 +9,7 @@
     width: 40px;
     vertical-align: middle;
     cursor: pointer;
-    float: left;
+    float: none;
 }
 
 .mentoring .questionnaire .choice {
@@ -32,7 +32,6 @@
     background: none repeat scroll 0 0 #66A5B5;
     font-family: arial;
     font-size: 14px;
-    height: 130%;
     overflow-y: auto;
     opacity: 0.9;
     padding: 10px;
@@ -74,19 +73,22 @@
 }
 
 .mentoring .choice-label {
+    display: inline-block;
     margin-top: 8px;
     margin-bottom: 5px;
-    padding-left: 70px;
-    text-indent: -22px;
     line-height: 1.3;
 }
 
+.mentoring .choices-list .choice-text > .xblock-light-child * {
+    vertical-align: middle;
+}
+
 .mentoring .choices-list .choice-text > .xblock-light-child,
-.mentoring .choices-list .choice-text > .xblock-light-child > .html_child{
+.mentoring .choices-list .choice-text > .xblock-light-child > .html_child {
     /*
     HTML Light Child content is wrapped in two divs: div.xblock-light-child and just div
     On the other hand, choice are usually rendered inline.
     Hence, we render first two divs inline, than all the actual content of HTML is rendered as is
     */
-    display: inline;
+    display: inline-block;
 }