div.leyendaCuadrado
{
    width: 15px;
    height: 15px;
}

div.leyendaCuadradoMini
{
    width: 5px;
    height: 5px;
    float: left;
    /*Este float es muy imporatante porque hace que los items queden en linea hasta llegar al tamanio original de la figura que lo contiene*/
}

#leyendasColores {
  background-color: rgba(220, 220, 220, 0.8);
  border: 1px solid black;
  width: 22px;
  /*height: 22px;*/
  position: fixed;
  top: 29%;
  right: 0;
  outline: 0;
  z-index: 999;
}