Question XBlock, show Explanation available


![explanation-available](https://cloud.githubusercontent.com/assets/7814218/3799006/fa3e68fa-1be9-11e4-9cf6-4648b1c8106a.png)
This shows a "Explanation available" box. Explanations are an important
part of learning. Currently, the student cannot know if the "Show
answer" button will only display the answer (not very interesting so
students do not click), or if the button will display both the answers
and an explanation. With this change, the big "Explanation available"
will greatly increase the probability of a student reading the
explanation.

Hiding the "Show answer" button if there is no explanation is not easy
to do, as this button also displays the answer, and not only the
explanation.

The UX need to be modified :
https://docs.google.com/file/d/0B7QjKiLau3KUTmh6QXJvR01QMGs/edit
It seems great that we have some symmetry for the Explanation available
box, otherwise it is ugly.

We can either
1) Create a new class "detailed-solution-available", that is just like
"detailed-solution", but with an other padding-bottom.
2) Change the padding-bottom of "detailed-solution". This creates nearly
dedundant code with detailed solution as only the padding-bottom will be
changed. I am not good at SCSS, I don't know how to inherit
"detailed-solution" and only change padding-bottom.

We can choose between 3 values : 9px (symetry), $baseline (20px,
current), $baseline/2 (10px).