/* XHTML y CSS con AMAYA
   Bartolomé Sintes Marco
   http://www.mclibre.org
   10 de marzo de 2003

   CSS para ejercicio Listas: Diseño de listas
*/

body { background-color: #F7F2F3; font-family: sans-serif;}
hr { clear: both; }

/* Todo en vertical */
ul.vert, ul.vert ul { list-style-type: none;  
  padding: 0px; 
  margin: 0px;
  width: 15ex; /* Anchura de la lista. Si no ocupa todo el ancho de la página */  }
ul.vert li { background-color: #C29BC2; color: white;  font-weight: bold; 
  margin-bottom: 10px; /* Hueco entre puntos */  }
ul.vert li ul li  { background-color: #E8D9E8; color: #ABABAB; font-weight: normal;
  margin-bottom: 0px; /* Hueco entre subpuntos, del color de fondo del punto */
  padding-left: 5px;  }

/* Todo en horizontal */
ul.hori2, ul.hori2 ul { display: inline; list-style-type: none;  
  padding: 0px; margin: 0px; }
ul.hori2 li { background-color: #D5CB8A; color: white; font-weight: bold; 
  display: inline;
  margin-right: 10px; /* Hueco entre punto y punto */
  padding-left: 5px;
  }
ul.hori2 li ul li { background-color: #EFEBD3; color: #ABABAB; font-weight: normal;
  padding: 0px;
  margin: 0px; /* Así no hay hueco entre subpuntos en IE (en Mozilla sí),
                  pero en IE se pierde también el hueco entre puntos */
  }

/* Puntos en horizontal y subpuntos debajo */
ul.hori, ul.hori ul { list-style-type: none;  padding-left: 0px; margin: 0px;}
ul.hori li { background-color: #FF95AF; color: #FFE6EC; font-weight: bold; 
  float: left; 
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;}
ul.hori li ul li { background-color: #FFE6EC; color: #FF95AF; font-weight: normal;
  margin-bottom: 0px; /* Para compensar el margin-bottom de ul.horivert li */
  padding: 0px 5px; 
  margin-right: 0px;
  text-align: left;
}

/* Puntos principales en vertical y secundarios en horizontal */
ul.verthori, ul.verthori ul { list-style-type: none;  padding-left: 0px; margin: 0px;}
ul.verthori li { background-color: #FFFF00; color: black; font-weight: bold; 
  float: left; clear: both;
  margin-bottom: 10px; }
ul.verthori li ul li { background-color: black; color: #FFFF00; font-weight: bold;
  clear: none;
  margin-bottom: 0px; /* Para compensar el margin-bottom de ul.horivert li */
  padding-right: 20px; }


/* Puntos principales en horizontal y secundarios en vertical*/
ul.horivert, ul.horivert ul { list-style-type: none;  
 padding-left: 0px; margin: 0px; }
ul.horivert li { float: left; background-color: #00FF00; color: black; font-weight: bold; 
  margin-right: 10px; }
ul.horivert li ul li { float: none; background-color: #C6FFD9; color: #ABABAB; font-weight: normal;
  margin-right: 0px; /* Para compensar el margin-left de ul.horivert li */
  }

/* ul.vert li ul li:hover { background-color: #ABABAB; color: #E8D9E8; } */
