@charset "utf-8";
/* CSS Document */

@font-face{
			font-family: "Komika Display";
			src: url("Fonts/Komika_display.ttf") format("truetype");
			font-weight:normal;
			font-style:normal;
			}

body 		{
	background:url(../imagenes/fondo7.jpg);
	color: #F66;
		}

#inform p
		{background:transparent;
		 font-family: "Komika Display";
		 font-size: 1.2em;
		 color:#006666;
		 padding: 10px;
		 text-align: Justify;
		}


#contenedor 	{background: #fff;

		 border:  5px solid   #FFf;	
		/* border-radius:10px;*/
		 height: 1300px;
		 margin: 0 auto;
		 width:1100px;
		 z-index:0;
		 color: #000;
		 -webkit-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
         -moz-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
          box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
		
		}

em       {font-family: Curlz MT;
		 font-size: 2.5em;
		 color:#006666;
         text-align: center;
                }
 
#banner         {                         
	             background: transparent;
                 border: 1px solid #000;
                 height: 200px;
                 width:100%;
                }

#contenido	{background:transparent;
		 border: 1px solid #6699ff; 
		 height: auto;
		 margin: 0 auto;
		 padding: 10px 0;
		 width: auto;
		 z-index:1;
		 
		 
		 
		 
		}

#Mvert		{background: url(../imagenes/luz.png));
	    	 border-radius: 0.2em;
		 /*border: 1px solid #6699ff; */
		 display:inline-block;
		 float: left;
		 height: 400px;
		 margin: 10px 5px;
		 padding: 10px 2px;
		 width: 107px;
		}

#tema 		{color:#FFF;
	    	 border-radius: 0.2em;
		 /*border: 1px solid #6699ff; */
		 display:inline-block;
		 height: 0 auto;
		 margin: 10px 8px;
		 /*padding: 0 10px;*/
		 /*position: relative;*/
		 /*text-align: justify;*/
		 width:1010px;
		}



#pie		{background: #fff;
	    	/* border-radius: 10px; */
		 /*border: 1px solid #6699ff; */
		 height:auto;
		 margin: auto;
		 margin-top:10px;
		 padding: 5px 18px;
		 width:1073px;
		 -webkit-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
         -moz-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
         box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
		}
		
#ultimo {background: url(../imagenes/ultimo-2.jpg);
	     height:230px;
		 margin: auto;
		 margin-top:10px;
		 width:1105px;
		 /* border-radius: 10px; */
		 color: #000;
		 -webkit-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
         -moz-box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
         box-shadow: 10px 10px 24px 1px rgba(0,0,0,0.75);
		
	
	}

  /* el menú en si mismo */
    .mi-menu  {
    border-radius: 1px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos menu */
    height: 40px; 
    width: 1105px;
    /* el color de fondo */
    background: #00a000;
    background: -moz-linear-gradient(#006000,#00a000);
    background: -webkit-linear-gradient(#006000,#00a000);
    background: -o-linear-gradient(#006000,#00a000);
    background: -ms-linear-gradient(#006000,#00a000);
    background: linear-gradient(#006000,#00a000);
	
  }


/* ESTE ES EL MENU.....
</style> 
<style type="text/css">
i 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: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
	background:transparent;
	
	
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
	text-align: left;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    padding: 0 35px;
    margin: 7px 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: yellow; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #00a000;
    background: -moz-linear-gradient(#006000,#00a000);
    background: -webkit-linear-gradient(#006000,#00a000);
    background: -o-linear-gradient(#006000,#00a000);
    background: -ms-linear-gradient(#006000,#00a000);
    background: linear-gradient(#006000,#00a000);
    /* 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 #00a000;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 18px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }


 .mi-menu li:hover > ul li {
    height: 55px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #00a000;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 40px;
    width: 140px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a {
	border: none;
	font-size: 14px;
}



  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;

    margin: 0;
    padding: 0;
    position: relative;
/* MENU VERTICAL*/

ul.sidenav {
  /* el rect�ngulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 99px;
  /* propiedades optativas */
  background-color: #009966;
  border-radius: 0.4em;
  border: 1px solid #300;
  box-shadow: rgb(102,102,102) 5px 5px;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #000;
  border-top: 1px solid #300;
  border-radius: 0.4em;
  color: #FFF;
  font-size: 18px;
  padding: 10px 0 10px 2px;
  width: 99px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 5px;
}



 #dock { /* el rectángulo contenedor */
    position: relative;
    text-align: center;
    width: 100%;
	padding:60px;
	
	
  } 
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; } 
  #legend { /* el texto inferior */
    color: #FFF;
    font-size: 25px;
    text-align: center;
    width: 100%;
  }