/* el menú en si mismo */
/*  body{ 
  	background-color:#000;
  }*/
  .mi-menu  {
	position: relative;
	top: -0px;
	left: 305px;
	padding: 0;
	/* la altura y su ancho dependerán de los textos */
/*	height: 25px;*/
	width: 950px;/*	background: -moz-linear-gradient(#153759,#426282);
	background: -webkit-linear-gradient(#153759,#426282);
	background: -o-linear-gradient(#153759,#426282);
	background: -ms-linear-gradient(#153759,#426282);
	background: linear-gradient(#153759,#426282);
	text-align: left;
	margin-right: 0px;*/
	background-color: b11016;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
	display: block;
	float: left; /* la lista se ve horizontal */
	height: 30px;
	list-style: none;
	margin: 0;
	padding:  0px;
/*	position: relative;*/
  }
  .mi-menu li a {
	border-left: 1px solid #fff;
	border-right: 1px solid #666;
	color: #EEE;
	display: block;
	font-family: 'Jura';
	font-size: 12px;
	/*	line-height: 30px;*/
	padding: 14px 8px 0px 8px;
	margin: 0px 0;
	text-decoration: none;
	/* animamos el cambio de color de los textos */
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: colors .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a {
	  background-color:#0a2438;
	border-bottom: 3px solid #f7931d;
	color: #ecac00;
	  }

  /* los submenús */
  .mi-menu ul {
	border-radius: 0 0 5px 5px;
	left: 0;
	margin: 0;
	opacity: 0; /* no son visibles */
	position: absolute;
	top: 30px; /* se ubican debajo del enlace principal */
	/* el color de fondo */
    background: #426282;
	background: -moz-linear-gradient(#426282,#153759);
	background: -webkit-linear-gradient(#22,#153759);
	background: -o-linear-gradient(#426282,#153759);
	background: -ms-linear-gradient(#426282,#153759);
	background: linear-gradient(#426282,#153759);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 50px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
	border: none;
	border-bottom: 1px solid #111;
	margin: 0;
	/* el ancho dependerá de los textos a utilizar */
	padding: 0px 5px;
/*	width: 120px;*/
	text-align: right;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }