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

html, css{
touch-action:none;
}

body{ font: 62.5% "Trebuchet MS", sans-serif; margin:0px; 
background-color: #132E61;}


TD { font-family:"Trebuchet MS"; font-size: 13px;}

/**/
.imagehelp { position:absolute; top:0px; left:0px; }
.imagecard { position:relative; width:100%; height:100%;}

.bottom_buttons {
	-webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222);
	opacity:0.7;
	cursor: pointer;
}
.bottom_buttons:hover{opacity:1;}

/*para crear el efecto scroll en los usuarios*/
.zuser1 {position:relative; width:100%; height:280px; overflow:auto; border:#999999 1px solid; background:#FFFFFF; border-radius: 0px;}
.zuser2 {width:100%; height:100%; overflow:auto; display:block; }
.zuser2 {
background: rgba(248,80,50,1);
background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(250,247,247,1)), color-stop(51%, rgba(217,217,217,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#ffffff', GradientType=0 );
border-radius: 25px;
background-image: url('../im/1readinggirl.gif');
background-size: 180px 160px;
/*background-position: 0 0;*/
background-repeat: no-repeat;
background-position:center;
}
.zuser3 {position:absolute;  width:100%; }

#zona_login {
	width:600px; 
	padding:1px; 
	color:white; 
	border-bottom:#FFFFFF solid 1px; 
	border-radius: 0px;
	opacity:1;
}

/*#zona_login:hover{opacity:1;}*/

.td_uinfo A { display:block; white-space: nowrap; margin-bottom:2px; cursor:pointer; color:#333333;  border-bottom:1px dotted #CCCCCC;}

.cadauser {
background: rgba(248,80,50,1);
background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(250,247,247,1)), color-stop(51%, rgba(217,217,217,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(250,247,247,1) 0%, rgba(217,217,217,1) 51%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#ffffff', GradientType=0 );
}

/*.seluser1 { background:#006699; }*/
.seluser1 { background:#FFA500; font-weight:bold; font-size:large;text-shadow: 2px 2px 8px #ffffff;}
.seluser1 SPAN { color:#FFFFFF; font-weight:bold; font-size:large;}

.biger { cursor:pointer;}

/*nivel actual*/
.levelcurcard {font-size:11px;  position:absolute; width:180px; height:210px; top:10px; background:#E3DEFE; color:#000000; cursor:pointer; border:2px solid #FF6666;  }
/*nivel pasadas*/
.levelcard {font-size:11px;  position:absolute; width:180px; height:210px; top:10px; background:#FFFFE8; color:#000000; cursor:pointer; border:1px solid #999; }
/*nivel no disponibles*/
.cardnodis {font-size:11px;  position:absolute; width:180px; height:210px; top:10px; background:#CCCCCC; color:#666666; cursor:help; border:1px solid #999; }

/*darle espacios en las esquinas a las grilla de niveles */
.levelcurcard div, .levelcard div,.cardnodis DIV{ padding:6px;  }

/*imagen de nivel (posicion y tamano) */
.levelcurcard .qimg, .levelcard .qimg { position:absolute; top: 65px; width:168px; height:135px;}

/*estilo de la imagen cuando no esta disponible*/
.cardnodis .qimg { 
				position:absolute; top: 65px; width:168px; height:135px;
				opacity: .34;
				filter: alpha(opacity=34);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=34)";
				}


/* posicion inicial de una estrella que se clonara para hacer todas*/
.star3 { position:absolute; top:220px; width:79px; height:26px; left:50px;}

/* titulo del nivel*/
.lc_title{ font-size:13px; font-weight:bold; color:#006699; }


/*redondear las grillas */
.card, .card_rounded, .rcard {
	border-radius: 9px;
	-ms-border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-khtml-border-radius: 9px;
}

.rcard {
  ppadding: 50px;
  background-color: green;
  transition: transform .2s;
  wwidth: 200px;
  hheight: 200px;
  margin: 0 auto;
}

.rcard:hover {
/*  -ms-transform: scale(3); /* IE 9 */
/*  -webkit-transform: scale(3); /* Safari 3-8 */
/*  transform: scale(k); */
}

.divopor { position: absolute; left: 30px; top:10px; border:0px; }


/*clase para quitar opacidad*/
.staropaque {
	opacity: .3;
	filter: alpha(opacity=10);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
				
/*clase para dar opacidad*/				
.opaque	{
	opacity: .0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/**/
#divscene DIV { position:absolute; }


/*ancho, largo de las grillas de los niveles (distribucion)
  ej:.  #divscene .card0 -> card-0, el 0 es tipo de nivel (ver abajo) 
  tipos de niveles: 
	0- 4 x 1
	1- 4 x 3
	2- 4 x 5
	3- 5 x 4
	4- 3 x 4
	5- 3 x 4 (10) solo 10 grillas
	6- 3 x 2 (5) solo 5 grillas
  */

#divscene .card0 { width:130px; height:160px; border:#999999 1px solid; cursor:pointer; background:#FFFFFF; }
#divscene .card1,#divscene .card2  { width:130px; height:60px; border:#999999 1px solid; cursor:pointer; text-align:center; }
#divscene .card3 { width:100px; height:60px; border:#999999 1px solid; cursor:pointer; text-align:center; }	
#divscene .card4, #divscene .card5, #divscene .card6 { width:175px; height:80px; border:#999999 1px solid; cursor:pointer; text-align:center; }	


/*tamano de la fuente de los tipos de grillas*/
#divscene .card0 TD { font-size:60px; font-weight:bolder;}
#divscene .card1 TD, #divscene .card2 TD { font-size:42px; font-weight:bolder;}
#divscene .card3 TD{ font-size:38px; font-weight:bolder;}
#divscene .card4 TD , #divscene .card5 TD, #divscene .card6 TD { font-size:40px; font-weight:bolder;}


/*pocicion de las grillas
.position_01 ---> .position_ 0 1 
el 0 es distribucion de las grillas (0-6) ver arriba
el otro 1 la pocision de la 2 grilla (la primera es 0)
*/
.position_00 { left:100px; top:80px}
.position_01 { left:250px; top:80px}
.position_02 { left:400px; top:80px}
.position_03 { left:550px; top:80px}

.position_10, .position_20  { left:100px; top:80px}
.position_11, .position_21 { left:245px; top:80px}
.position_12, .position_22 { left:390px; top:80px}
.position_13, .position_23 { left:535px; top:80px}
.position_14, .position_24 { left:100px; top:155px}
.position_15, .position_25 { left:245px; top:155px}
.position_16, .position_26 { left:390px; top:155px}
.position_17, .position_27 { left:535px; top:155px}
.position_18, .position_28 { left:100px; top:230px}
.position_19, .position_29 { left:245px; top:230px}
.position_110, .position_210 { left:390px; top:230px}
.position_111, .position_211 { left:535px; top:230px}

.position_212 { left:100px; top:305px}
.position_213 { left:245px; top:305px}
.position_214 { left:390px; top:305px}
.position_215 { left:535px; top:305px}
.position_216 { left:100px; top:380px}
.position_217 { left:245px; top:380px}
.position_218 { left:390px; top:380px}
.position_219 { left:535px; top:380px}

.position_30  { left:100px; top:80px}
.position_31  { left:215px; top:80px}
.position_32  { left:330px; top:80px}
.position_33  { left:445px; top:80px}
.position_34  { left:560px; top:80px}
.position_35  { left:100px; top:160px}
.position_36  { left:215px; top:160px}
.position_37  { left:330px; top:160px}
.position_38  { left:445px; top:160px}
.position_39  { left:560px; top:160px}
.position_310  { left:100px; top:240px}
.position_311  { left:215px; top:240px}
.position_312  { left:330px; top:240px}
.position_313  { left:445px; top:240px}
.position_314  { left:560px; top:240px}
.position_315  { left:100px; top:320px}
.position_316  { left:215px; top:320px}
.position_317  { left:330px; top:320px}
.position_318  { left:445px; top:320px}
.position_319  { left:560px; top:320px}


.position_40,.position_50,.position_60  { left:100px; top:80px}
.position_41,.position_51,.position_61  { left:290px; top:80px}
.position_42,.position_52,.position_62  { left:480px; top:80px}
.position_43,.position_53,.position_63  { left:100px; top:175px}
.position_45,.position_55,.position_65  { left:290px; top:175px}
.position_44,.position_54,.position_64  { left:480px; top:175px}
.position_46,.position_56,.position_66  { left:100px; top:270px}
.position_47,.position_57,.position_67  { left:290px; top:270px}
.position_48,.position_58,.position_68  { left:480px; top:270px}
.position_49,.position_59,.position_69  { left:290px; top:365px}
.position_410,.position_510,.position_610  { left:100px; top:365px}
.position_411,.position_511,.position_611  { left:480px; top:365px}






.statuslev { width:180px; height:100px; background:#FFFFFF; border: #999999 2px solid;  }
#thekey { left:10px; top:10px; position:absolute; }
.allred { color:#EE2222;}

#keytext { font-family:"Times New Roman", Times, serif; font-size:26px; font-weight:bolder; }
/*Comic Sans MS*/
.istext{  font-family:"Century Gothic", Tahoma; font-weight:normal; font-size:large; color:red;
background:#FFFFFF; 
border-radius: 9px;
	-ms-border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-khtml-border-radius: 9px;

}

.istext:hover{
	
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 	-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 0, 0.4);
	box-shadow:         0px 0px 30px 0px rgba(0, 0, 0, 0.4);
/*
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
	-moz-transform: scale(2.5);
    transform: scale(2.5);
    -webkit-transition: transform 0.30s ease-in-out;
    -moz-transition:transform 0.30s ease-in-out;
    -ms-transition:transform 0.30s ease-in-out;
	zoom:1.2;
*/
	position: relative;
	color: black;
	ffilter: invert(1);
    z-index: 101;
}

#divmulttx:hover {
	/*cursor: no-drop;*/
	cursor: url("http://www.abecelee.com/beta/im/borrador.png"), auto;
}

/* colores de las grillas de palabras amigas */
/*ej: lette = lett-e o palabras que comienzan con e */
.lette { background:#C0C0FF;}
.lettl { background:#FFC0FF;}
.lettu { background:#E0E0E0;}
.lettm { background:#FFE0C0;}
.lettc { background:#C0FFC0;}
.letty { background:#FFFFC0;}




/*tarjeta para completar silabas de 2,3 y 4*/
#divmulttx,#divbingo { cursor:pointer; position:absolute; top:400px; left:390px; width:250px; height:65px; font-size:44px; font-family:"Century Gothic", Times, serif; text-align:center; font-weight:bold; color:#CC0000; border:#999999 solid 1px; background:#FFFFFF;}
/*boton para aceptar completa silabas (monitor)*/
#divmultok { cursor:pointer; position:absolute; top:250px; left:700px; width:65px; height:65px;   }

#divUser {
	text-align:right;
	position:absolute;
	left:100%;
	top:2px;
	width:357px;
	margin-left:-365px;
	height:39px;
	z-index:0;
	font-size:10px;

}

#finpreg {
	position:relative;
	width:100%;
	height:40px;
	border:#FF0000 1px solid;
	top:200px;
}
#finresp {
	position:relative;
	width:100%;
	height:40px;
	border:#FF0000 1px solid;
	top:310px;
	
}

#finpreg P{
	font-size:32px;
	font-family:"Times New Roman", Times, serif;
}	


.respsel {
	border:#FF0000 1px solid;
	padding:4px;
	padding-left:6px;
	padding-right:6px;
	font-size:28px;
	font-family:"Times New Roman", Times, serif;
	cursor:pointer;
}

.lookhere {
	background:#FFFFCC;
	text-decoration:underline;
}

.backimage { width:100%; height:100%;}
.litimage { position:absolute;  width:80px; height:100px; left:100%; margin-left:-100px; top:100%; margin-top:-120px; border:2px #FF8C1A solid;}
.arrow { position:absolute;  width:80px; height:40px; left:100%; margin-left:-180px; top:100%; margin-top:-120px;}
.weave { position:absolute;  width:80px; height:40px; left:100%; margin-left:-100px; top:100%; margin-top:-160px;}

/*
#username {
 display:none;	position:relative; text-align:right; font-size:14px; background:#FFFFCC; font-weight:bold; float:right; z-index:240; padding:4px; padding-left:10px;}
}
*/
#gaby1 {
	position:absolute;
	left:955px;
	top:54px;
	width:78px;
	height:95px;
	display:none;
	z-index:1006;
}

/*estilo del speaker */
.speaker{position:absolute; top:200px; left:0px; width:25; height:25;}
.foco{position:absolute; top:200px; left:30px; width:25; height:25;}

#talking_girl{
	border-radius:25px;
}

video
{
/* EXAMPLE : ROUNDED CORNERS */
border:3px solid;
border-radius:48px;
-moz-border-radius:48px; /* Firefox 3.6 and earlier */
background-color: white;
}

#divlogin {
background: rgba(252,236,252,1);
background: -moz-linear-gradient(top, rgba(252,236,252,1) 0%, rgba(251,166,225,1) 43%, rgba(253,137,215,1) 63%, rgba(255,124,216,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,236,252,1)), color-stop(43%, rgba(251,166,225,1)), color-stop(63%, rgba(253,137,215,1)), color-stop(100%, rgba(255,124,216,1)));
background: -webkit-linear-gradient(top, rgba(252,236,252,1) 0%, rgba(251,166,225,1) 43%, rgba(253,137,215,1) 63%, rgba(255,124,216,1) 100%);
background: -o-linear-gradient(top, rgba(252,236,252,1) 0%, rgba(251,166,225,1) 43%, rgba(253,137,215,1) 63%, rgba(255,124,216,1) 100%);
background: -ms-linear-gradient(top, rgba(252,236,252,1) 0%, rgba(251,166,225,1) 43%, rgba(253,137,215,1) 63%, rgba(255,124,216,1) 100%);
background: linear-gradient(to bottom, rgba(252,236,252,1) 0%, rgba(251,166,225,1) 43%, rgba(253,137,215,1) 63%, rgba(255,124,216,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8', GradientType=0 );
}
/*
#divlogin_topP {
background: rgba(245,235,241,1);
background: -moz-linear-gradient(top, rgba(245,235,241,1) 0%, rgba(255,0,145,1) 0%, rgba(250,247,249,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,235,241,1)), color-stop(0%, rgba(255,0,145,1)), color-stop(100%, rgba(250,247,249,1)));
background: -webkit-linear-gradient(top, rgba(245,235,241,1) 0%, rgba(255,0,145,1) 0%, rgba(250,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(245,235,241,1) 0%, rgba(255,0,145,1) 0%, rgba(250,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(245,235,241,1) 0%, rgba(255,0,145,1) 0%, rgba(250,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(245,235,241,1) 0%, rgba(255,0,145,1) 0%, rgba(250,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ebf1', endColorstr='#faf7f9', GradientType=0 );
}

#divlogin_top {
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,229,235,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(209,229,235,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,229,235,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,229,235,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,229,235,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(209,229,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1e5eb', GradientType=0 );
}
*/
#ouser:focus { border: 2px solid red; }
#opass:focus { border: 2px solid red; }


#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}