/* CSS Document */

/* ==========================
   Contenedores generales
   ========================== */
#contenedor,
#container2 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 13px;
    background-color: #F4FFFF;
    color: #002451;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

/* ==========================
   Body
   ========================== */
body {
    background-color: #F4FFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/* ==========================
   Cabecera genérica
   ========================== */
#cab {
    width: 100%;
    height: 10px;
    background-color: #006;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #848684;
}

/* ==========================
   Cabecera principal
   ========================== */
 

#cabecera,
.cabecera,
#cabgram2,
#cabkformas,
#cabkimi,
#cabkimi2,
#cabkimi3,
#cabvarios,
#cabbasics,
#cabscripts,
#cabtoto,
#cabhanasu {
    width: 100%;
    max-width: 1100px;
    height: 119px;           /* altura base */
    margin: 0 auto;
    padding: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    box-sizing: border-box;
}



/* h1 y enlace ocupan toda la cabecera */
#cabecera h1,
.cabecera h1 {
    margin: 0;
    height: 100%;
}

#cabecera a,
.cabecera a {
    display: block;
    width: 100%;
    height: 100%;
}

#cabecera a span,
.cabecera a span {
    visibility: hidden; /* texto solo para SEO */
}



/* ==========================
   Cabeceras con imágenes
   ========================== */

#cabecera  { background-image: url(logo.jpg); }
#cabgram2  { background-image: url(kimi5.jpg); }
#cabkformas{ background-image: url(kimi6.jpg); }
#cabkimi   { background-image: url(kimi.jpg); }
#cabkimi2  { background-image: url(kimi2.jpg); }
#cabkimi3  { background-image: url(kimi3.jpg); }
#cabvarios { background-image: url(varios.jpg); }
#cabbasics { background-image: url(basics.jpg); }
#cabscripts{ background-image: url(kimi.jpg); }
#cabtoto   { background-image: url(toto.jpg); }
#cabhanasu { background-image: url(kimi4.jpg); }

/* ==========================
   Responsive (móviles)
   ========================== */
@media (max-width: 768px) {

    p, li {
        font-size: 1.1em;
        line-height: 1.5;
    }

    #cabecera,
    .cabecera {
        min-height: 119px;         /* evita colapso */
        height: auto;
        background-size: contain;  /* que no se corte */
    }

    #cabecera a,
    .cabecera a {
        height: auto;
    }
}



a img {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}



 

 									  /* LINKS */ 

a:link, a:visited { color: #0000CC; text-decoration: none; } a:hover, a:active { color: #0CF; text-decoration: none; }



/* links de 36 de kaku/hira/kata ... */

a.sbig:link {

	color: #0000CC;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig:visited {

	color: #0000CC;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig:hover, a.sbig:active {

	font-size: 36px;
	color:#0CF;
	text-decoration: none;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 

}

/* links de 36 desactivados ... */

a.sbig2:link {
	color:  #999;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig2:visited {

	color:  #999;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig2:hover, a.sbig2:active {
	font-size: 36px;
	color: #CCC;
	text-decoration: none;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


/* LINKS DE INICIO ESCRITURA JAPONESA  */

/* links de 36 de kaku/hira/kata ... */

a.sbig3:link {

	color:#1BE462;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig3:visited {

	color:#1BE462;
	text-decoration: none;
	font-size: 36px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.sbig3:hover, a.sbig:active {
	font-size: 36px;
	color:  #008020;
	text-decoration: none;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 

}

.red {
	color: #039;
	
} 

   /* EL CARTELITO DE "a la lección siguiente" que va a la derecha */
.sig {
	text-align: right;
}

    /* Fin */


/* LINKS DE INICIO ESCRITURA JAPONESA  quité "font-weight: bold;"  */


a.med18:link {
	text-decoration:none;
	color: #0033FF;
	font-size: 18px;
	text-align: center;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;

}

a.med18:visited {
	color: #0033FF;
	text-decoration: none;
	font-size: 18px;
	text-align: center;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}
a.med18:hover, a.med18:active {
	text-decoration: none;
	font-size: 18px;
	color: #FF9900;
	text-align: center;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}




a.med3:link {
	text-decoration:none;
	color: #0033FF;
	font-size: 18px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
	
}


a.med3:visited {
	text-decoration:none;
	color:#0033FF;
	font-size: 18px;
    font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


a.med3:hover, a.med3:active {
	text-decoration:none;
	color:#1BE462;
	font-size: 18px;
    font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}	



a.med4:link {
	text-decoration:none;
	font-size: 18px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
	
	
}


a.med4:visited {
	text-decoration:none;
	font-size: 18px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
	
}


a.med4:hover, a.med4:active {
	text-decoration:none;
	color:#3399FF;
	font-size: 18px;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}	


 


a.med1:link {
	text-decoration:none;
	font-size: 18px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
	 
}


a.med1:visited {
	text-decoration:none;
    font-size: 18px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 
}


a.med1:hover, a.med1:active {
	text-decoration:none;
	color:#E31C57;
	font-size: 18px;
    font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}
































/* APARTADOS del menú: para aprender, para practicar, para comunicarte */

.cab4 {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #006;
}
/* FIN DE APARTADOS del menú */



#menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	/* he quitado font-weight: bold; */
	color: #FFFFFF;
	width: 170px;
	text-align: center;
	float: left;/* he quitado -   Flota a la izquierda y el texto también */
	padding: 10px;
	margin-top: 10px;
	}
      /* FIN MENÚ */
									
					  /* CASILLA */								
#casilla {
	width: 50%;
	float: left;
	padding: 10px;
	margin-right: 10px;	
}		

  /* CASILLA mediana*/		
  
#casillam {
	width: 30%;
	float: left;
	padding: 10px;
	margin-right: 10px;	
}		


					  /* CASILLA PEQUEÑA*/		
#casillap {
	width: 19%;
	float: left;
	padding: 10px;
    margin-right: 10px;		
}



					  /* CASILLA ANCHA */		
#casillaa {
	width: 100%;
	float: left;
	padding: 10px;
	margin-right: 10px;
}

									
#columnai {
	width: 17%;
	float: left;  
	padding: 10px;
	margin-top: 10px;
}


#columnai2 {
	width: 75%;
	float: left;  
	padding: 10px;
	margin-top: 10px;
}

#columnai3 {
	width: 36%;
	float: left;  
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 250px;
}


#columnadazul {
	margin-top: 10px;
	width: 17%;
	float: left;  
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	font-weight: bold;
	color: #000000;
	text-align: justify;
}


#columnad {/* es igual que columna d blanca */
	margin-top: 10px;
	width: 15%;
	float: left;  
	padding: 10px;
	margin-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
 
}

									  /* COLUMNA CENTRAL */
									  
									  
									  
#centro {  /* COLUMNA CENTRAL dos laterales*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006;
	background-color: #fff;
	font-weight: bold;
	width: 60%;
	text-align: justify;
	float: left;
	padding: 10px;
	margin-top: 10px;
}


  
#centrogrande {  /* COLUMNA CENTRAL sin laterales*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #fff;
	width: inherit;
	text-align: justify;
	font-weight: bold;

 }


#grande {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006;
	background-color: #fff;
	width: 200%;
	text-align: justify;
	font-weight: bold;
	float: left;
	padding: 10px;
	margin-top: 10px;
}


#centrograndekanji {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #fff;
	width: 97%;
	float: left;  
	padding: 10px;
		margin-top: 10px;
		/*  solo está en flcl1  no es bold */
}


#centrograndeuta {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006;
	background-color: #fff;
	width: 97%;   /*     */
	text-align: center;
	font-weight: bold;
	float: left;  
	padding: 10px;
	margin-top: 10px;
}



#centrograndedensha {
	font-family: Arial, Helvetica, sans-serif;  /* COLUMNA CENTRAL sin laterales densha*/
	color: #000000;
	background-color: #fff;
	width: 97%;
	float: left;  
	padding: 10px;
		margin-top: 10px;
		font-weight: bold;
}

 /* COLUMNA CENTRAL sin laterales*/



  /* COLUMNA CENTRAL con un lateral*/
#centromed {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006;
	background-color: #fff;
		font-weight: bold;
	width: 78%;
	text-align: justify;
	float: left;
	padding: 10px;
		margin-top: 10px;
}

#centromed2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #006;
	background-color: #fff;
		font-weight: bold;
	width: 78%;
	text-align: justify;
	float: right;  
		margin-top: 10px;
}

#centroprincipal {  /* texto centrado */

	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #006;
	background-color: #fff;
	width: 58%;
    text-align: center;
	float: left;  
	padding: 10px;
		margin-top: 10px;
		margin-right: 10px;
}

#fondoblanco {
	background-color: #FFFFFF;
				padding: 10px;

}
#fondoazul {
	background-color: #F0F0F0;
				padding: 10px;

}

 
#pie {
  
  background-size: contain; /* ajusta la imagen al ancho del div */
  width: 100%;
  padding: 20px 0; /* espacio arriba y abajo para el contenido */
  margin-top: 30px;
  margin-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center; /* centra el texto y enlaces */
  box-sizing: border-box; /* incluye padding en el cálculo de ancho */
}
  
         
											  
											  
									  /* ENCABEZADOS  */


h1 {
	text-align: center;
	font-size: 18px;
    color: #006;
	font-weight: bold;
}

h2 {
	text-align: center;
	font-size: 14px;
	color: #0033cc;
	font-weight: bold;
}


 

					




.kanji50red {
	font-size: 50px;
	color: #E31C57;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
} 


.kanji50 {
	font-size: 50px;
	color: #039;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji50azul {
	font-size: 50px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}




.kanji50naranja {
	font-size: 50px;
	color:#FF9900;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji50rosa {
	font-size: 50px;
	color: #FF0099;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji50verde {
	font-size: 50px;
	color:#1BE462;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

     
.kanji50verdec {
	font-size: 50px;
	color: #0CF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

	 

 /* SCRIPTS   */ 
 




.kanji36n {  /* es kanji 3b negro, sustituir quitar este */
	font-size: 36px;
	color: #039;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;

}


.kanji36red {
	font-size: 36px;
	color: #E31C57;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
} 




.kanji36a {
	font-size: 36px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}




.kanji36naranja {
	font-size: 36px;
	color:#FF9900;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji36rosa {
	font-size: 36px;
	color: #FF0099;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji36verde {
	font-size: 36px;
	color:#1BE462;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

     
.kanji36verdec {
	font-size: 36px;
	color:#0CF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


 /* KANJI24 */ 


.kanji24b {
	font-size: 24px;
	color: #66C;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}
.kanji24umi {
	font-size: 24px;
	color: #666;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


 /* rosa grande cabecera */
.kanji24red {
	font-size: 24px;
	color: #E31C57;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji24air {
	font-size: 24px;
	color: #039;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
} 




.kanji24 {
	font-size: 24px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}




.kanji24naranja {
	font-size: 24px;
	color:#FF9900;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji24rosa {
	font-size: 24px;
	color: #FF0099;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji24verde {
	font-size: 24px;
	color:#1BE462;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

     
.kanji24verdec {
	font-size: 24px;
	color:#0CF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

.kanji18azul {
	font-size: 18px;
	color: #0033FF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}

.kanji18v{
	font-size: 18px;
	color:#0CF;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.kanji18r {
	font-size: 18px;
	color: #E31C57;
	font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
}


.rojo {
	color: #E31C57;
}

 

.rosa {
	color: #FF0099;
}

.verde {
	color: #1BE462;
}


.verdec {
	color:#0CF;

}


.azul {  /* las descripciones de air */
	color: #0033FF;
}

.naranja {  /* las descripciones de air */
	color:#FF9900;
}



.table {

	font-weight: bold;
}	

 
 /* con los popup sale la trad al poner el cursor encima de la  palabra*/





.popup {
 font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 font-size: 24px;
 color: #0033FF;	cursor: help;
 text-decoration: none;
}


.popupv { /*  Está por ahí pero sin poner el title con lo cual equivale a un simple fuente  */
 font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 font-size: 24px;
 color:#1BE462;	cursor: help;
 text-decoration: none;
}


.popupvc {
 font-family: SimSun, "MS Mincho", Cambria, "Cambria Math", serif;
 font-size: 24px;
 color: #0CF; cursor: help;
 text-decoration: none;
}



/* es que sale la trad al poner el cursor encima de una palabra*/


/* Esto es lo que sale al hover antes ponía: " span.popup:hover " */

.popup:hover {
	text-decoration: none;
	color: #E31C57;
}

.popupv:hover {
	text-decoration: none;
	color: #E31C57;
}

.popupvc:hover {
	text-decoration: none;
	color: #E31C57;
}



/* Esto es lo que sale al hover antes ponia: " span.popup:hover " */


 

/*   Las imagenes de las canciones  */


 
.tactics, .yume, .alones, .aka, .aoi, .donguri, .dora, .eva, .flcl, .geto, .kenshin, .linda, .mama, .maz, .momo, .mono,
.ninki, .oha, .oshi, .astern, .aster {  background: inherit no-repeat left top;}

.tactics { background-image: url(img/uta/tacticsp.jpg);}
.yume { background-image: url(img/uta/yumep.jpg);}
.alones { background-image: url(img/uta/alonesp.jpg);}
.aka { background-image: url(img/uta/akap.jpg);}
.aoi { background-image: url(img/uta/aoip.jpg);}
.donguri { background-image: url(img/zoosan/dongurip.jpg);}
.dora {	background-image: url(img/uta/dorap.jpg);}
.eva { 	background-image: url(img/uta/evap.jpg);}
.flcl    { background-image: url(img/uta/flclp.jpg); }
.geto    { background-image: url(img/uta/getop.jpg); }
.kenshin { background-image: url(img/uta/kenshinp.jpg); }
.linda   { background-image: url(img/uta/lindap.jpg); }
.mama    { background-image: url(img/uta/mamap.jpg); }
.maz     { background-image: url(img/uta/mazp.jpg); }
.momo    { background-image: url(img/uta/momop.jpg); }
.mono    { background-image: url(img/uta/monop.jpg); }
.ninki   { background-image: url(img/uta/ninkip.jpg); }
.oha     { background-image: url(img/uta/ohap.jpg); }
.oshi    { background-image: url(img/uta/oship.jpg); }
.astern  { background-image: url(img/uta/astbp.jpg); }
.aster   { background-image: url(img/uta/astnp.jpg); }


 

/* el comentario que va a la izquierda en uta*/


#comment {
	margin-top: 30px;
	margin-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 11px;
	color: #000066;
	font-weight: bold;
	
}
 

.comment {
	margin-top: 30px;
	margin-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 11px;
	color: #000066;
	font-weight: bold;
	
}
 /* PARA INDEXCLARO */

 /* header es cabecera en japolatino */

#header { 
margin-top:10px;
margin-bottom:20px;
	width: 100%;
}

/* Para que la imagen de fondo se convierta en un link */

#header a {
background: #fff url(barrap.jpg) no-repeat;
display: block;
height: 83px;
width: 800px;
text-decoration: none; /* si no se pone sale una línea, tb se puede quitar el span */

}
#header a span {
visibility:hidden;

}

/* fin de Para que la imagen de fondo se convierta en un link */


#container2 {
	
width: 100%;
max-width: 1100px;
vertical-align: middle;
margin: 0 auto;/* centrado */
font-size:13px;
background-color:#F4FFFF;
background-repeat: repeat;
color: #002451;
font-family: Arial, Helvetica, sans-serif;
}


/* texto index claro */

#texto {
	width: 100%;/* no sé por qué no tiene el tamaño del container2 */
 	color:#000;
	background-color: #FFF;
}
 
 
 /* Pestañas azul */

   
#pmenu2, #pmenu2 ul {padding:0; margin:0; list-style-type: none;}
#pmenu2 {float:left; background-color:#fff; border-bottom:2px solid #azul; width:100%; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:11px; }
#pmenu2 li {float:left; position:relative}
#pmenu2 a, #pmenu2 a:visited {display:block; width:155px; font-size:11px; color:#azul; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background-color:#fff; border:1px solid #C1F7CD; border-width:1px;}
#pmenu2 li:hover > a{color:#azul;}
#pmenu2 li ul {display: none;}
#pmenu2 li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu2 > li:hover > ul {left:0; top:24px;}


#pmenu2 a.ancha:link, #pmenu2 a.ancha:hover {
height: auto; 
} 
#pmenu2 a.ancha:visited, #pmenu2 a.ancha:active {
height: auto; 
} 

 /* fin formato pestañas azul */
 
 

    /*
@media (max-width: 768px) {


   p, li {
    font-size: 1.1em;
    line-height: 1.5;
  } 
  
  
  #cabecera {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #cabecera a {
    height: auto;
  }
}

 PARA MOVILES */