/**
  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;
}
