/**
seriebar.css
Displays a list of exo (exo done, current exo and exo to do), with a "square" style.
If you want an "arrow" style, use "seriebar_arrows.css" instead
HTML template can look like this :
<ul class="wims_serie_bar inline">
<li class="wims_exo_done" title="Question 1 (done)">1</li>
<li class="wims_exo_todo" title="Question 2 (current)">2</li>
<li title="Question 3 (not tried yet)">3</li>
<li title="Question 4 (not tried yet)">3</li>
[...]
</ul>
**/
.wims_serie_bar{max-width: 20em;}
.wims_serie_bar li{
width:.4em;
height:.4em;
display: inline-block;
border:2px solid;
overflow:hidden;
cursor: help;
border-color:black;
background-color: white;
color: transparent;
}
.wims_serie_bar .wims_exo_todo{
background-color: lightgrey;
color: lightgrey;
}
.wims_serie_bar .wims_exo_done{
background-color: black;
color: black;
}