#menu {
	padding: 20; /* Espaciado */
	list-style-type: none; /* ELimina la viñeta de cada ítem*/
    font-family: sans-serif;/*Tipo de fuente*/
    font-size: 16px;/*Tamaño de fuente*/
    font-weight: bold;/*Fuente con estilo negrita*/
}

#menu li {
	background-color: #AF7051;/* Color de fondo del menú*/
	float: left;/*para que cada elemento del menú se posicione uno al lado del otro*/
	height: 2.5em;/*Ancho del contenedor del menú*/
	line-height: 2.5em;/*Interliniado*/
	border-color: #AF7051;/*color del borde del contenedor del menú*/
	border-style: solid;/*tipo de borde del contenedor del menú*/
	border-width: 3px;/*ancho de borde del contenedor del menú*/
}

#menu a {
    color: #F0D7B5;/*color de la letra */
    text-decoration: none;/*le quita el subrayado a los vínculos*/
    padding: 0 20px;
    display: block;/* hace que cada elemento "a"se comporte como un bloque, 
                    es decir como una caja separada y no como parte de una línea. de este modo podemos darle un ancho, alto y flotarlos */
               }


  #menu li:hover {
  	background-color: #F0D7B5;/* color de fondo del menú cuando se pasa el mose*/
  }            
  #menu li:hover a {
  	color: #AF7051; /*color de letra del menú cuando se pasa el mouse*/
  } 
  .container {
 clear:both;
 float:left;
 overflow:hidden;
 width:100%;
}

#menu {
 float:left;
 left:50%;
 list-style-type:none;
 margin:0 auto;
 padding:0;
 position:relative;
}

#menu li {
 float:left;
 position:relative;
 right:50%;
}