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 needs to be modified :
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. 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.
2) Change the padding-bottom of "detailed-solution", the lazy solution of this commit.

We can choose between 3 values for padding-bottom: 9px (symmetry), $baseline (20px,
current), $baseline/2 (10px).

### Additional question:

I do not know what this file is used for : https://github.com/edx/edx-platform/blob/14ad71f206d63b8ed488a7c6ac138d81630644ff/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
The code is very similar to the display.scss file I modified, and it also has a "detailed-solution" class.
Do we need to modify both ?

### Additional question 2:
I see a "Reveal answer" button in the code, but I don't understand how to create it. This is a bonus question, as I don't think we have to change its behaviour.