#vhist-q-graph {
/* Ceci est la classe du UL principal qui contient toute sles autres données */
/* Définir un Width et un Height est essentiel, c'est ca qui donne les dimension du graphique */
  width: 428px;
  height: 200px;
/* Ne pas oublier d'enlever le point qui se trouve a coté des LI */
  list-style: none;
/* le reste n'est que positionnement et esthétique */
  position: relative; 
  margin: 1.1em 0 3.5em;
  padding: 0;
  background: #DDD;
  border: 2px solid gray;
  font: 9px Helvetica, Geneva, sans-serif;
}
#vhist-q-graph ul {
/* Une colonne étant un UL dans un UL, on défini les paramètres des colonnes */
  margin: 0; 
  padding: 0; 
  list-style: none;
}
#vhist-q-graph li {
/* Ceci défini les colonnes (largeur, positionnement des bâton a l'intérieur,position du titre...) */
  position: absolute; 
  bottom: 0; 
  width: 150px; 
  z-index: 2;
  margin: 0; 
  padding: 0;
  text-align: center; 
  list-style: none;
}
#vhist-q-graph li.vhist-qtr { /* colonnes */
  height: 198px; 
  padding-top: 2px;
  /* border-right: 1px dotted #C4C4C4; */
  color: #AAA;
  border:0; /* sans colonnes */
}
#vhist-q-graph li.vhist-bar {
/* esthétique des batons */
  width: 16px;  
  border: 1px solid;  
  border-bottom: none;  
  color: #000;
}
#vhist-q-graph li.vhist-bar p { 
/* esthétique de titre dans les bâtons */
  margin: 0px 0 0;  
  padding: 0; 
}

p.leg { /* legende (sous l'axe horizontal) */
   position: absolute;
   bottom: -18px;
   left: 2px;
   width: 10px;
   color: red;
   text-align: right;
}

#vhist-q-graph li.vhist-sent {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
  left: 5px;
/* esthétique d'un baton en particulier */
  background: #DCA;
  border-color: #EDC #BA9 #000 #EDC;
}
#vhist-q-graph li.vhist-paid {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
  left: 77px;  
/* esthétique d'un bâton en particulier */
  background: #9D9;
  border-color: #CDC #9B9 #000 #BFB;
}
/* position de la colonne 1 */
#vhist-q-graph #q1 {left: 0;}
/* position de la colonne 2 */
#vhist-q-graph #q2 {left: 150px;}
/* position de la colonne 3 */
#vhist-q-graph #q3 {left: 300px;}
/* position de la colonne 4 */
#vhist-q-graph #q4 {left: 450px; border-right: none;}

.vhist-bar { 
  background: yellow;
}