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


/*FLIP*/
.panel {
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	opacity: 0.5;
}

.panel:hover {
	opacity: 0.8;
}
.panel.reverse {
	animation-direction: reverse !important;
	-webkit-animation-direction: alternate-reverse !important;
}
.panel.flip {
	animation: none;
	-webkit-animation: none;
	margin-top: 0px;
	opacity: 1.0;
}
.panel .front {
	position: absolute;
	top: 25px;
	z-index: 900;
	width: inherit;
	height: inherit;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	left: 196px;
}
.panel.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.panel .back {
	position: absolute;
	top: 24px;
	z-index: 800;
	width: inherit;
	height: inherit;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	left: 195px;
}
.panel.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

/*ZOOM*/
.zoomable {
    z-index: 1;
   cursor:cell;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.zoomed {
    cursor: auto;
}

.zoomable img {
    width: 100%;
    height: 100%;
}

/*FOLDERS*/
div.normal {
        z-index: 0;
   }
   div.selected {
        z-index: 1;
    }
    div.botonesFolders {
        position: absolute;
        z-index: 2;
		cursor: pointer;
		top: 26px;
		width: 126px;
		height: 43px;
	}

/* SOPA DE LETRAS */

.sopadeletras {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  border: 4px solid #333;
  box-shadow: 2px 2px 8px #666;
  text-align: center;
}

.sopadeletras.chica {
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  font-size: 10px;
}

.sopadeletras.mediana {
  width: 320px;
  height: 320px;
  margin-top: -160px;
  margin-left: -160px;
  font-size: 14px;
}

.sopadeletras.grande {
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  font-size: 18px;
}

.sopadeletras.enorme {
  width: 520px;
  height: 520px;
  margin-top: -260px;
  margin-left: -260px;
  font-size: 24px;
}

.sopadeletras table {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px;
  border: none;
}

/* Wordsearch jQuery Plugin */

.rf-tgrid {
  vertical-align: middle;
  text-align: center;
  padding: 4px;
}

#rf-wordcontainer {
  display: none;
}

#rf-tablegrid .rf-highlight {
  background: red;
}

#rf-tablegrid .rf-glowing {
	background: greenyellow;

}

#rf-tablegrid .rf-selected {
	background: gold;
}

/* style for words that didn't make it on the grid */
.rf-pfalse {
  color: gray;
  visibility: hidden;
}

/*Drag & Drop*/


/* Individual cards and slots */

#cardSlots, #cardPile {
  
  height: 320px;
  width:2000px;
 
}
#cardSlots div, #cardPile div {
  }

#cardSlots div:first-child, #cardPile div:first-child {
  
}
.ui-draggable{
	
	cursor:pointer;
}
.ui-droppable div.hovered {
  opacity:.2;
}

/*#cardSlots div {
  border-style: dashed;
}*/

/*#cardPile div {
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}*/

#cardPile div.ui-draggable-dragging {
	
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .4);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .4);
}