<style type="text/css">
  /* el menú en si mismo */

h1 {
	font: 100% "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background: #FFFFFF;
	letter-spacing: 0em;
	margin: 0;  /*es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuraciÃ³n predeterminada de los diversos navegadores */
	padding-left: 0.5em;
	/*padding: 0;*/
}
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #969682;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuraciÃ³n predeterminada de los diversos navegadores */
	padding: 0;
	/*text-align: center; esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineaciÃ³n a la izquierda en el selector #container */

}
.altura{
	height: 40px;
	/*border-bottom: 2px #969682 solid;*/
}
.cv
{
	color: rgb(110, 110, 110);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	line-height: 160%;
	text-align: left;
	margin-top: 60px;
}
.cvb
{
	color: rgb(110, 110, 110);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	line-height: 160%;
	text-align: left;
	margin-top: 10px;
}
.cv1
{
	color: rgb(110, 110, 110);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	line-height: 160%;
	text-align: left;
	margin-top: 100;
}
.cvb
{
	color: rgb(110, 110, 110);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	line-height: 160%;
	text-align: left;
	margin-top: 20;
}
.cv2
{
	color: rgb(90, 90, 90);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 150%;
	text-align: left;
}
.cv3
{
	color: rgb(90, 90, 90);
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.70em;
	line-height: 150%;
	text-align: left;
}
#container {
	margin: 0 auto;
	max-width: 960px;
	background: #FFFFFF;
	overflow: hidden;
}
.floatderecha{
	float: right;
	width: 180px;
}
.flecha{
	font-size: 0.6em;
	/*opacity: 0;  no son visibles */
}

/*li:hover .flecha{ opacity: 0; }*/


.kerning3 { 
margin-top:0;
margin-bottom:30px;
letter-spacing: -0.03em;
color: rgb(110, 110, 90);
background: #FFFFFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1.1em;
padding-left: 0.6em;
	font-weight: 400;
	font-size: 4em;
	text-align: left; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineaciÃ³n a la izquierda en el selector #container */
	color: #502800;
}
.kerning4 { 
margin-top:0;
margin-bottom:30px;
letter-spacing: -0.03em;
color: rgb(110, 110, 90);
background: #FFFFFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1.1em;
padding-left: 0.6em;
	font-weight: 400;
	font-size: 3.2em;
	text-align: left; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineaciÃ³n a la izquierda en el selector #container */
	color: #502800;
}
.linea{
	background-color: rgb(154, 153, 110);
	border: 0px;
	height: 2px;
}
.lineagruesa{
	background-color: #969682;
	border: 0px;
	height: 35px;
	margin: 0px;
}
.oneColElsCtr #container {
	width: 80%;
	background: #FFFFFF;
	margin: 0 auto; /* los mÃ¡rgenes automÃ¡ticos (conjuntamente con un ancho) centran la pÃ¡gina */
	border: 1px solid #000000;
	text-align: left; /* esto anula text-align: center en el elemento body. */
}

.oneColElsCtr #mainContent {
	padding: 0 20px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
}

.sidebar1 {
	float: right; /* dado que este elemento es flotante, debe asignarse un ancho */
	width: 201px; /* el ancho real de este div, en navegadores que cumplen los estÃ¡ndares, o el modo de estÃ¡ndares de Internet Explorer, incluirÃ¡ el relleno y el borde ademÃ¡s del ancho */
	background: #F0F0E1; /* el color de fondo se mostrarÃ¡ a lo largo de todo el contenido de la columna, pero no mÃ¡s allÃ¡ */
	padding: 15px 10px;
}
.fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la pÃ¡gina. El elemento flotante debe preceder al elemento junto al que debe aparecer en la pÃ¡gina. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la pÃ¡gina. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el Ãºltimo elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
 

.twoColFixRtHdr #mainContent { 
	/*margin: 0 250px 0 0;  el margen derecho de este elemento div crea la columna situada a lo largo del lado derecho de la pÃ¡gina (con independencia de la cantidad de contenido que tenga el div sidebar1, se mantendrÃ¡ el espacio de la columna). Puede quitar este margen si desea que el texto del div #mainContent llene el espacio de #sidebar1 cuando termine el contenido de #sidebar1. */
	padding: 0 30px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
	float: left;
	width: 679px;
	background-color: white;
}
.twoColFixRtHdr #footer { 
	padding: 0 10px 0 20px; /* este relleno coincide con la alineaciÃ³n izquierda de los elementos de los divs que aparecen por encima de Ã©l. */
	background:#F0F0E1; 
} 
.twoColFixRtHdr #footer p {
	margin: 0; /* el ajuste en cero de los mÃ¡rgenes del primer elemento del pie evitarÃ¡ que puedan contraerse los mÃ¡rgenes (un espacio entre divs) */
	padding: 10px 0; /* el relleno de este elemento crearÃ¡ espacio, de la misma forma que lo harÃ­a el margen, sin el problema de la contracciÃ³n de mÃ¡rgenes */
}

.thumbnail{
	width: 100%;
	padding: 5px;
	/*float: right;*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	background-color:#C8C8B4;
}
.thumbnail img {
	width: 100%;
}
.twoColFixRtHdr { 
	/* el uso de 20px menos que un ancho completo de 800px da cabida a los bordes del navegador y evita la apariciÃ³n de una barra de desplazamiento horizontal */
	background: #FFFFFF;	
	margin: 0 auto; /* los mÃ¡rgenes automÃ¡ticos (conjuntamente con un ancho) centran la pÃ¡gina */
	/*border: 1px solid #000000;*/
	text-align: left; /* esto anula text-align: center en el elemento body. */
}
.twoColFixRtHdr #header { 
	background: #F0F0E1; 
	padding: 0 0px 0 30px;
}


  .mi-menu  {
    border-radius: 5px;
	margin: 0;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 660px;
    /* el color de fondo */
    background: #F0F0E1;
    background: -moz-linear-gradient(#F0F0E1,#FFFFFF);
    background: -webkit-linear-gradient(#F0F0E1,#FFFFFF);
    background: -o-linear-gradient(#F0F0E1,#FFFFFF);
    background: -ms-linear-gradient(#F0F0E1,#FFFFFF);
    background: linear-gradient(#F0F0E1,#FFFFFF);
	text-decoration:none;
	color: rgb(110, 110, 90);
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.1em;
	padding-top: 0em;
	padding-left: 0em;
	padding-right: 1.8em;
	text-align: left;
  }

  /* 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  ul {*/
  /*  float: left; /* la lista se ve horizontal */
  /*  height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }*/
  .mi-menu  li {
    /*display: block;*/
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;    
	background: #F0F0E1;
    background: -moz-linear-gradient(#F0F0E1,#FFFFFF);
    background: -webkit-linear-gradient(#F0F0E1,#FFFFFF);
    background: -o-linear-gradient(#F0F0E1,#FFFFFF);
    background: -ms-linear-gradient(#F0F0E1,#FFFFFF);
    background: linear-gradient(#F0F0E1,#FFFFFF);
	
  }
  .mi-menu li a {
   /* border-left: 1px solid rgb(110, 110, 90);
    border-right: 1px solid rgb(110, 110, 90);*/
    color: rgb(110, 110, 90);
    display: block;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1.2 em;
    /*font-weight: bold;*/
   /* line-height: 28px;*/
    padding: 0 20 0 40px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .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 { color: rgb(0, 98, 101); }

  /* los submenús */
  .mi-menu ul {
	border-radius: 0 0 5px 5px;
	left: 0;
	margin: 0;
	opacity: 0; /* no son visibles */
	position: absolute;
	padding-left: 0px;
	top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
	
	background:  rgb(110, 110, 90);
	background: -moz-linear-gradient(#F0F0E1,#FFFFFF);
	background: -webkit-linear-gradient(#F0F0E1,#FFFFFF);
	background: -o-linear-gradient(#F0F0E1,#FFFFFF);
	background: -ms-linear-gradient(#F0F0E1,#FFFFFF);
	background: linear-gradient(#F0F0E1,#FFFFFF);
    /* 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: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid rgb(110, 110, 90);
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 10px;
    width: 200px;
  }
  /* el último no tiene un borde */
  /*.mi-menu ul li:last-child a { border: none; }*/


 .my-menu:hover ul {
	top: -0px;
	/*position: relative;*/
	border-bottom: 1px solid rgb(110, 110, 90);
	float: left; /* la lista se ve horizontal */
	right: -100px;
	left: auto;
	}
 
   /* cada uno de los items de los submenús 2*/
  .mi-menu ul li ul li{
    height: 0; /* no son visibles */
    overflow: hidden;
			right: 0px;
			top: 0;
			/*position: relative;*/
    padding: 0;
    /* animamos su visibilidad */
    -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 ul li{
    height: 36px; /* los mostramos */

	overflow: visible;
		 right: 0px;
		 top: 0;
		 position: relative;
    padding: 0;
  }
  .mi-menu ul li ul li a {
    border: none;
    border-bottom: 1px solid rgb(110, 110, 90);
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 10px;
		 right: 0px;
		 top: 0;
		 position: relative;
    width: 200px;
  }
  /* el último no tiene un borde */
 /* .my-menu ul li ul:last-child a { border: none; }*/
</style>