/* CSS Document */
/*-------------------------------------------*/

	#zona_trabajo{
		  min-height: 100%;
		  left: 0px;
		  width: 100%;
		  border-radius: 12px;
		  position: absolute;	
	}
	#manito
	{
	color: #FFC107;
    font-size: 37px;
    padding: 12px 5px 12px 12px;
    animation: 3s aum infinite;
    z-index: 2;
	}
	@keyframes aum {
   	 50% { opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */}
	}
	.boton {
    color: white;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
    width: 100px;
    height: 50px;
    text-align: center;
    font-family: Chewy;
    font-size: 19px;
    background-color: #FFC107;
    border-radius: 20px 7px 20px 7px;
    padding: 12px;
    cursor: url(../images/cursor/hand.cur) , auto!important;
	}
	.partes div
	{
		width:80%;
		margin:0px auto;
		padding:5px;
		background-color:white;
		font-family:chewy;
		font-size:25px;
		border-radius:12px;
		color:blue;
		margin:3px;
		text-align:center;		
	}
	
	.arrastrable
	{
		width:144px;
		font-family:Chewy;
		color:white;
		margin:0px auto;
		text-align:center;
		font-size:21px;
		margin-top:2px;
	}
	
	#contenedorPiezas
	{
	background-color: white;
    border: 3px doted red;
    height: 236px;
    border: 3px dashed orange;
    padding: 4px;
	}
	
	.bgcolor1 { background-color:#F44336; }
 .bgcolor2 { background-color:#E91E63; }
 .bgcolor3 { background-color:#9C27B0; }
 .bgcolor4 { background-color:#3F51B5; }
 .bgcolor5 { background-color:#2196F3; }
 .bgcolor6 { background-color:#009688; }
 .bgcolor7 { background-color:#43A047; }
 .bgcolor8 { background-color:#EF6C00; }
 .bgcolor9 { background-color:#FF5722; }
 .bgcolor10 { background-color:#607D8B; }
 
  .textcolor1 { color:#F44336; }
 .textcolor2 { color:#E91E63; }
 .textcolor3 { color:#9C27B0; }
 .textcolor4 { color:#3F51B5; }
 .textcolor5 { color:#2196F3; }
 .textcolor6 { color:#009688; }
 .textcolor7 { color:#43A047; }
 .textcolor8 { color:#EF6C00; }
 .textcolor9 { color:#FF5722; }
 .textcolor10 { color:#607D8B; }

	#imagen .contenedorPieza{z-index:2; width: 150px; height:39px; background-color:white; position:absolute; border: 3px solid orange; background-image:url(../images/tema/arrastraaqui.png);     background-size: cover;}
	#imagen #pieza_Backpack {   left:  197px; top: 300px; }
	#imagen #pieza_Book {    left: 40px;  top: 10px; }
	#imagen #pieza_Pencil_Case{ left: 366px;  top: 300px; }
	#imagen #pieza_Pen { left: 30px; top: 300px;}
	#imagen #pieza_Pencil {  left: 300px;  top: 10px; }
	#imagen #pieza_Scissors {  left: 315px;  top: 40px; }
	#imagen #pieza_Ruler {  left: 50px;  top: 75px; }
	#imagen #pieza_Crayon {     left: 373px;    top: 290px; }
	#imagen #pieza_Pencil_Sharpener { left: 33px;   top: 199px; }
	#imagen #pieza_Eraser { left: 70px; top: 300px; }
	#imagen #pieza_Notebook { left: 380px;  top: 300px; }
	
	#imagen .flecha{z-index:1;  width:95px; height: 3px; background-color: orange; position:absolute;}
	#imagen #flecha_Backpack {  left: 225px; top: 255px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
	#imagen #flecha_Book { left: 130px; top: 57px; -ms-transform: rotate(42deg); -webkit-transform: rotate(42deg); transform: rotate(42deg);}
	#imagen #flecha_Pencil_Case { left: 330px; top: 280px; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
	#imagen #flecha_Pen { left: 100px; top: 283px; -ms-transform: rotate(8deg); -webkit-transform: rotate(8deg); transform: rotate(-45deg);} 
	#imagen #flecha_Pencil {  left: 288px; top: 60px; -ms-transform: rotate(-65deg); -webkit-transform: rotate(-65deg); transform: rotate(-65deg);}
	#imagen #flecha_Scissors { left: 290px; top: 90px; -ms-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); transform: rotate(-40deg);}
	#imagen #flecha_Ruler {  left: 95px; top: 135px; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
	#imagen #flecha_Crayon {  left: 333px; top: 270px; -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg);}
	#imagen #flecha_Pencil_Sharpener { left: 90px; top: 250px; -ms-transform: rotate(19deg); -webkit-transform: rotate(19deg); transform: rotate(19deg);}
	#imagen #flecha_Eraser{ left: 118px; top: 283px; -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg);}
	#imagen #flecha_Notebook { left: 335px; top: 280px; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }