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

   CSS ejercicio: Diseño de listas
   10 de marzo de 2003
*/

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

hr { 
  clear: both; 
}

/* Todo en vertical */

ul.vert, ul.vert ul { 
  list-style-type: none;  
  margin: 0px;
  padding: 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;  
  margin: 0px; 
  padding: 0px; 
}

ul.hori2 li { 
  background-color: #D5CB8A; 
  color: white; 
  display: inline;
  font-weight: bold; 
  margin-right: 10px; /* Hueco entre punto y punto */
  padding-left: 5px;
}

ul.hori2 li ul li { 
  background-color: #EFEBD3; 
  color: #ABABAB; 
  font-weight: normal;
  margin: 0px; /* Así no hay hueco entre subpuntos en IE (en Mozilla sí),
                  pero en IE se pierde también el hueco entre puntos */
  padding: 0px;
}

/* Puntos en horizontal y subpuntos debajo */

ul.hori, ul.hori ul { 
  list-style-type: none;  
  margin: 0px;
  padding-left: 0px; 
}

ul.hori li { 
  background-color: #FF95AF; 
  color: #FFE6EC; 
  float: left; 
  font-weight: bold; 
  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;  
  margin: 0px;
  padding-left: 0px; 
}

ul.verthori li { 
  background-color: #FFFF00; 
  clear: both;
  color: black; 
  float: left; 
  font-weight: bold; 
  margin-bottom: 10px; 
}

ul.verthori li ul li { 
  background-color: black; 
  clear: none;
  color: #FFFF00; 
  font-weight: bold;
  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;  
  margin: 0px; 
  padding-left: 0px; 
}

ul.horivert li { 
  background-color: #00FF00; 
  color: black; 
  float: left; 
  font-weight: bold; 
  margin-right: 10px; 
}

ul.horivert li ul li { 
  background-color: #C6FFD9; 
  color: #ABABAB; 
  float: none; 
  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; } */
