* {
font-family: Arial;
}

.titulo1{
font-family: Verdana, Arial;
font-size: 12px;
}
.titulo2{
font-family: Verdana, Arial;
font-size: 11px;
color: #FD0000;
}

.iraula{
		
		font-size:15px;
		font-family:Verdana,Helvetica;
        font-weight:bold;
        color:red;
		background:yellow;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:25px;
		border-radius: 5px;
}	
.iraula:hover{
color:yellow;
background:red;
cursor:pointer; cursor: hand;
}  

#menuniveles
{

padding: 0px 0px;
margin:0;
clear: both;
}

#menuniveles ul
{
margin: 0;
padding: 0;
}

#menuniveles li
{
width: 24%;
height: 30px;
padding: 0.1% 0.1%;
margin: 0.15%;
float:left;

font-weight: bold;
list-style: none;
text-align:center;
color: #FFFD75;
background: #F70000;
background:radial-gradient(#F70000, #660000);
font-family: Verdana, Arial;
font-size: 0.9em;
letter-spacing:0.05em;
float:left;
border-radius: 8px;
}




#menuniveles a:link, #menuniveles a:visited
{
color: #FFFD75;
border-bottom: none;
}

#menuniveles a:hover
{
color: #FF0000;
background-color: #FFFF00;
border-bottom: none;
}

#menuniveles  .nivelactual{
background-color: #FFFD75;
color: #FF0000;
background:radial-gradient(#FFCC00, #FFFFCC);
}

#menunivel, #menuleccion
{

width: 80%;
margin: auto;
padding: 20px 20px;
background-color: #FFFFFF;
line-height: 1;
border: 2px solid rgb(218,0,0);
border-radius: 15px;

}

#menunivel ul, #menuleccion ul
{
padding-left:5px;
list-style-type: none;
}

#menunivel ul li:hover, #menuleccion ul li:hover
{
list-style-type: disc;
}

#menuniveles li:hover
{
	background:radial-gradient(#4D5645, #4C9141);
}

.botonacceso, .botonacceso:link, .botonacceso:visited{
        font-size:12px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:red;
		background:pink;
        border:0px;
        padding: 10px;
		margin: 10px;
		height:auto;
        min-height:35px;
		border-radius: 5px;
		max-width:50%;
		background-image:none;
		background-repeat: no-repeat;
		background-position: right;
		
       }
.botonacceso:hover{

        background:#FFFD75;
		color:red;
		background-image:none;
		background-repeat: no-repeat;
		background-position: right;
       }

.boton1, .boton1:link, .boton1:visited, .titpregresp{
        font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#BDECB6;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:auto;
        min-height:35px;
		border-radius: 5px;
		max-width:50%;
		
       }
.boton1:hover{

        background:#FFFD75;
		color:red;
       }
	   
.boton2, .boton2:link, .boton2:visited{
        font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#e8edaa;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:auto;
        min-height:35px;
		border-radius: 5px;
		max-width:50%;
		background-image:none;
		background-repeat: no-repeat;
		background-position: center;

		
       }
.boton2:hover{

        background:#FFFD75;
		color:red;
		background-image:none;
		background-repeat: no-repeat;
		background-position: center;
       }	

.boton3, .boton3:link, .boton3:visited{
        font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#7ab8cb;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:auto;
        min-height:35px;
		border-radius: 5px;
		max-width:50%;
		
       }
.boton3:hover{

        background:#FFFD75;
		color:red;
       }	

.boton4, .boton4:link, .boton4:visited{
        font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#c2b9c7;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:auto;
        min-height:35px;
		border-radius: 5px;
		max-width:50%;
		
       }
.boton4:hover{

        background:#FFFD75;
		color:red;
       }	

.boton5, .boton5:link, .boton5:visited{
        font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#dcbab5;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:35px;
		border-radius: 5px;
		max-width:50%;
		background-image:none;
		background-repeat: no-repeat;
		background-position: right;
		
       }
.boton5:hover{

        background:#FFFD75;
		color:red;
		background-image:none;
		background-repeat: no-repeat;
		background-position: right;
       }	
	   
	   

.tituloleccion{
font-size:15px;
clear:both;
display:block;
padding:5px;
padding-top:15px;
}
.irleccion{
		
		font-size:15px;
		font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#BDECB6;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:25px;
		border-radius: 5px;
}	
.irleccion:hover{
background:#c2b9c7;
cursor:pointer; cursor: hand;
}  

.avanzar{
		
		font-size:1em;
		font-family:Verdana,Helvetica;
        color:black;
		font-weight:bold;
		background:#f0e969;
        border:0px;
        padding: 3px;
		margin: 10px 3px;
        height:auto;
		border-radius: 5px;
}	
.avanzar:hover{
background:#c2b9c7;
cursor:pointer; cursor: hand;
}  

.oiraudio{
		
		font-size:15px;
		font-family:Verdana,Helvetica;
        font-weight:bold;
        color:black;
		background:#97c4c9;
        border:0px;
        padding: 10px;
		margin: 10px;
        height:25px;
		border-radius: 5px;
}	
.oiraudio:hover{
background:#c2b9c7;
cursor:pointer; cursor: hand;
}  

.repetiraudio{
		
		font-size:1em;
		font-family:Verdana,Helvetica;
        color:black;
		background:#97c4c9;
        border:0px;
        padding: 3px;
		margin: 3px;
		border-radius: 5px;
}	
.repetiraudio:hover{
background:#c2b9c7;
cursor:pointer; cursor: hand;
}  

.tono1{
	    color:white;
		background:red;
        border:0px;
        padding: 10px;
		margin: 10px;
		border-radius: 35px;
}
.tono1:hover{
background:#e97451;
cursor:pointer; cursor: hand;
}  

.tono2{
	    color:white;
		background:#40a800;
        border:0px;
        padding: 10px;
		margin: 10px;
		border-radius: 35px;
}
.tono2:hover{
background:#BDECB6;
cursor:pointer; cursor: hand;
}  

.tono3{
	    color:white;
		background:#b0a06c;
        border:0px;
        padding: 10px;
		margin: 10px;
		border-radius: 35px;
}
.tono3:hover{
background:#cbb97d;
cursor:pointer; cursor: hand;
}  

.tono4{
	    color:white;
		background:blue;
        border:0px;
        padding: 10px;
		margin: 10px;
		border-radius: 35px;
}
.tono4:hover{
background:#0095b6;
cursor:pointer; cursor: hand;
}  


.botontono1{
		float:left;
	    width:15%;
		font-size:2em;
		text-align:center;
	    color:white;
		background:red;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 35px;
}
.botontono1:hover{
background:#e97451;
color:black;
cursor:pointer; cursor: hand;
}  

.botontono2{
		float:left;
	    width:15%;
		font-size:2em;
		text-align:center;
	    color:white;
		background:#40a800;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 35px;
}
.botontono2:hover{
background:#BDECB6;
color:black;
cursor:pointer; cursor: hand;
}  

.botontono3{
		float:left;
	    width:15%;
		font-size:2em;
		text-align:center;
	    color:white;
		background:#b0a06c;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 35px;
}
.botontono3:hover{
background:#cbb97d;
color:black;
cursor:pointer; cursor: hand;
}  

.botontono4{
		float:left;
	    width:15%;
		font-size:2em;
		text-align:center;
	    color:white;
		background:blue;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 35px;
}
.botontono4:hover{
background:#0095b6;
color:black;
cursor:pointer; cursor: hand;
}  

.botonsilaba{
		float:left;
	    width:15%;
		font-size:1.2em;
		text-align:center;
	    color:red;
		background:yellow;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 15px;
}
.botonsilaba:hover{
background:#0095b6;
color:black;
cursor:pointer; cursor: hand;
}  

.globosonido{
		float:left;
	    width:auto;
		min-width:30%;
		font-size:3em;
		text-align:center;
	    color:red;
		background:yellow;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 45px;
}

.explicasonido{
	clear:both;
	padding: 5px;
	color:black;
	background: #F0F0F0  ;
	border-radius: 15px;
}

.botonconsonante{
		float:left;
	    width:15%;
		font-size:1.2em;
		text-align:center;
	    color:black;
		background:#FFA420;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 15px;
}
.botonconsonante:hover{
background:#0095b6;
color:black;
cursor:pointer; cursor: hand;
}  

.botonvocal{
		float:left;
	    width:15%;
		font-size:1.2em;
		text-align:center;
	    color:black;
		background:#F3DA0B;
        border:0px;
        padding: 6px;
		margin: 3px;
		border-radius: 15px;
}
.botonvocal:hover{
background:#0095b6;
color:black;
cursor:pointer; cursor: hand;
}  

.cabeceravoc{
padding-left:5px;
list-style-type: none;
overflow: auto;
height:auto;
}

.tithanzi, .titpinyin, .titespanol, .titescuchar{
		display:block;
		float: left;
		font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
		text-align:center;
        color:black;
		background:#dcbab5;
        border:0px;
        padding: 2px;
		margin: 2px;
        height:35px;
		border-radius: 5px;
		width: 16%;
}	

.tithanzi{
width: 15%;
}   
.titpinyin{
width: 15%;
} 
.titespanol{
width: 37%;
} 

.hanzi, .pinyin, .espanol, .escucharM, .escucharH{
		display:block;
		float: left;
		font-size:15px;
        font-family:Arial,Verdana,Helvetica;
        font-weight:bold;
		text-align:center;
        color:black;
		background:white;
        border:0px;
        padding: 2px;
		margin: 2px;
        height:auto;
		min-height:35px;
		border-radius: 5px;
		
}	

.hanzi{
width: 15%;
font-size:20px;
color:black;
background:#98c6c3;
}   
.pinyin{
width: 15%;
font-size:20px;
color:red;
background:yellow;
} 
.espanol{
width: 37%;
font-size:12px;
color:black;
background:#c9c1b8;

} 

.escucharM{
width: 8%;
font-size:20px;
color:red;
background:pink;
} 
.escucharH{
width: 8%;
font-size:20px;
color:#2a1183;
background:#4c9deb;
} 

.escucharM:hover{
background:red;
color:pink;
cursor:pointer; cursor: hand;
} 
.escucharH:hover{
color:#4c9deb;
background:#2a1183;
cursor:pointer; cursor: hand;
} 

.hanzif, .pinyinf, .espanolf{
		display:block;
		float: left;
		font-size:15px;
        font-family:Arial,Verdana,Helvetica;
        font-weight:bold;
		text-align:center;
        border:0px;
        padding: 2px;
		margin: 2px;
        height:auto;
		border-radius: 5px;
		width: 80%;
		
}	

.hanzif {
font-size:25px;
color:black;
background:#98c6c3;
height:auto;
}   
.pinyinf{
color:red;
background:yellow;
height:auto;
} 
.espanolf{
color:black;
background:white;
height:auto;
min-height:100px;
} 


.cuadroaviso
{
float:right;
margin:0 auto;
padding: 20px 20px;
background-color: #060a93 ;
line-height: 1;
border: 2px solid #FFFFFF;
color:#FFFFFF;
text-align: center;
border-radius: 25px;
}

.cuadroaviso2
{
float:right;
margin:0 auto;
padding: 20px 20px;
background-color: #87CEEB  ;
line-height: 1;
border: 2px solid #FFFFFF;
color:#FFFFFF;
text-align: center;
border-radius: 25px;
}

.ptexplic{
	height:auto;
	background-color: #FCE1C6;
	margin:10px;
	padding: 3px;
	width:50%;
}
.pizarra
{
margin: 10px auto;
padding: 10px;
background-color: #228B22 ;
line-height: 1;
border: 10px solid  #B8860B ;
color:yellow;
text-align: left;
border-radius: 25px;
height:auto;
min-height:200px;
}
.pizarra p{
color:yellow;
}
.pizarra strong{
color:white;
}


.pizarra2
{
margin: 10px auto;
padding: 10px;
background-color: #efdecd ;
line-height: 1;
border: 10px solid  #B8860B ;
color:yellow;
text-align: left;
border-radius: 25px;
height:auto;
min-height:200px;
}
.pizarra2 p{
color:black;
}
.pizarra2 strong{
color:red;
}

#xiaojie{
	float:right;
	background-image: url("imgs/xiaojie.png");
	height:214px;
	width:157px;
}

#cuadroinstrucciones
{
display:none;
clear:both;
margin: 10px auto;
padding: 10px;
background-color:  #E6E6FA   ;
line-height: 1;
border: 2px solid   #696969   ;
color:black;
text-align: left;
border-radius: 10px;
height:auto;
min-height:200px;
}

#msginstrucciones, #cerrarinstrucciones, #cerrarejercicio,#msgsaliraula, #msgirchinosimplificado{
width:auto;
float:right;
margin: 3px;
padding: 2px 6px;
background-color:  #E6E6FA   ;
line-height: 1;
border: 2px solid   #696969   ;
color:black;
font-size:0.8em;
text-align: center;
border-radius: 10px;
}

#msginstrucciones:hover, #cerrarinstrucciones:hover, #cerrarejercicio:hover, #msgsaliraula:hover, #msgirchinosimplificado:hover{
background-color:  #2F4F4F    ;
cursor:pointer; cursor: hand;
color:white;
}

#cuadroejercicios
{
display:none;
clear:both;
margin: 10px auto;
padding: 10px;
background-color:  #FFFFE0   ;
line-height: 1;
border: 2px solid   #696969   ;
color:black;
text-align: left;
border-radius: 10px;

min-height:200px;
height:auto;
}

.caracterNV{
color:red;
background:pink;
border-radius: 3px;
font-weight:bold;
text-align:center;
border:0px;
padding: 2px;
} 
.caracterNAN{
color:#2a1183;
background:#4c9deb;
border-radius: 3px;
font-weight:bold;
text-align:center;
border:0px;
padding: 2px;
} 

.pregrespiz{
display:block;
float:left;
}
.pregrespde{
display:block;
float:right;
}

.preguntas, .respuestas{
		display:block;
		font-size:1em;
        font-family:Arial,Verdana,Helvetica;
		text-align:center;
        border:0px;
        padding: 5px;
		margin: 10px 3px;
        height:auto;
		border-radius: 5px;
		width: 90%;
		
}	

.preguntas{
color:red;
background:yellow;
}
.respuestas{
color:#0a0f44;
background:#AFEEEE ;
}
.respuestas:hover{
color:#AFEEEE ;
background:#0a0f44;
}

#cuadroresultados{
		display:block;
		font-size:0.8em;
        font-family:Verdana,Helvetica;
		text-align:center;
        border:0px;
        padding: 5px;
		margin: 10px 3px;
        height:auto;
		border-radius: 5px;
		width: 90%;
		border: 2px solid   #696969   ;
}

.correcto{
color:#32CD32;
}

.incorrecto{
color:#FF6347;
}

.guardaresultados{
		display:block;
		font-size:0.8em;
        font-family:Verdana,Helvetica;
		text-align:center;
        border:0px;
        padding: 5px;
		margin: 10px 3px;
        height:auto;
		border-radius: 5px;
		width: auto;
		border: 2px solid   #006400   ;
		color:black;
		background: #7FFF00  ;
}

.guardaresultados:hover{
border: 2px solid   #7FFF00   ;
color:#FDF5E6;
background:#006400 ;
}

.silabamenu{
color:red;
background:yellow;
border-radius: 3px;
font-weight:bold;
text-align:center;
border:0px;
padding: 2px;
margin: 5px

} 

@media screen and (max-width:800px ) {

#menuniveles li, .tituloleccion{
font-size:12px;
}

.botonacceso, .boton1, .boton2, .boton3, .boton4, .boton5, .titpregresp{
		max-width:90%;
		min-height:35px;
       }
.tithanzi, .titpinyin, .titespanol, .titescuchar{
font-size:12px;
}	   
 .escucharM, .escucharH{
font-size:1em;
} 

.hanzi, .pinyin, .espanol{
display:block;
		float: left;
		font-size:15px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
		text-align:center;
        border:0px;
        padding: 2px;
		margin: 2px;
        height:auto;
		border-radius: 5px;
		width: 70%;
}	 
.hanzi{
font-size:25px;
}
.espanol{
color:black;
background:white;
height:auto;
min-height:100px;
}  

.irleccion{	
		 padding: 2px;
		margin: 2px;
		font-size:1em;
        height:auto;
}
#xiaojie{
	display:none;
}
.fotoentexto{
width: 50%;	
height:auto;
}

.ptexplic{

	width:auto;
}
}