/*  MENU: 
    - Hay tantos estilos como numeros ves aqui abajo.
	- Puedes cambiar los colores de los bordes, el ancho y el estilo (ij:border(top,bottom,left o right): 1px solid #400F0F).
	- Tienes que decirle el ancho del meno (#Menu {  width: 110px;) y el margen inferior (margin-bottom: 0px;)
	- En cada estilo tienes tres estados de la casilla: Sin pasar el raton por encima , pasando el ratón por encima o la casilla      usada actualmente (current). Yo uso el hover y el current iguales. Para que te salga el "hover" y el "current" iguales basta     con poner los estilos entre una coma (ij: #Menu a.l3.current, #Menu a.l3:hover { (estilos, colores...).
	- Usa el "padding" para hacer que un submenú parezca un submeú, es como un sangrado. (ej:   padding: 4px 4px 4px 10px;)
    - He hecho estilos de sobra. Si te faltan pon mas numeros.
	- Si quieres poner imagenes de fondo hazlo en ( background: #333333 url(......gif) 5px 50% no-repeat;)
   
    - SI TIENES ALGUNA DUDA ESTOY DETRÁS DE TI.

*/

#Menu {
  width: 120px;
  margin-bottom: 0px;  
  border-bottom: 1px solid #ffffff;
}

#Menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

#Menu li {
  border-top: 0px solid #ffffff;
  border-bottom: none;
  padding: 0;
  margin: 0;
  display: block;
}

#Menu a {

  vertical-align: top;
  height: 1%;
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}

#Menu a.l1 {
  background: #cccccc url(../xxxx.png) 5px 50% no-repeat;
  font-weight: bold;
  text-transform: uppercase;
  padding: 4px 4px 4px 10px;  
}

#Menu a.l1:hover, #Menu a.l1.current {
background-color: #cccccc;  
}
 
#Menu a.l2 {
  text-transform: none;
  border-top: 1px solid #ffffff;
  padding: 4px 4px 4px 19px;
  color: #666666;
  font-weight: normal;
  font-size: 1em;
  background: #e9e9e9 url(../xxxx.png) 9px 50% no-repeat;
}

#Menu a.l2.current, 
#Menu a.l2:hover {
  background: #DADADA url(../xxxx.png) 9px 50% no-repeat;  
  color: #666666;
    border-top: 1px solid #ffffff;
}


#Menu li li li {
	border-top: 0px dotted #ffffff; 
}

#Menu li.l3:first-child {
  border-top: 0px dotted #740D01; 
}

#Menu a.l3 {
	padding: 4px 4px 4px 24px;
	background: #3C0600 url(../xxxx.png) 17px 50% no-repeat;
	color: #CF002C;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color:  #000000;
 }
#Menu a.l3.current, 
#Menu a.l3:hover {
  background: #550000 url(../xxxx.png) 17px 50% no-repeat;
  color:#F7C602;
}

#Menu a.l4 {
  padding: 4px 4px 4px 24px;
  background: #FFFFFF url(../xxxx.png) 17px 50% no-repeat;
  color: #003300;
}

#Menu a.l4:hover {
  background:  #FFFFFF  url(../xxxx.png) 17px 50% no-repeat;
  color: #FF6600;
}

#Menu li.l5 {
	border:  0px;
	border-top-color: #ffffff;
	border-top-width: thin;
	border-bottom-style: solid;
}

#Menu a.l5 {
  padding: 4px 4px 4px 10px;
  font-weight: bold;
  background-image: none;
  background-color: #ffffff;
  color: #FF6600;
  border-top: 1px solid #ffffff;
}

#Menu a.l5.current, 
#Menu a.l5:hover {
  background-image: none;
  background-color: #ffffff;
  color: #FF6600;
}


#Menu li.l6 {
	border:  none;
	background-position: 5px 5px;
}

#Menu a.l6 {
  padding: 0px;
  background-image: none;
}

#Menu a.l6:hover {
	background-image: none;
	height: 10px;
	width: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	padding: 10px;
}