#dndformas{width:800px;height:auto;position: relative;}
#dndformas .controls{height: 350px; left: 8px; position: absolute; top: 10px; width: 600px;}
.screen{width:800px;height:365px;position: relative;background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/bgrec.png);
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
} 
.over{background-color: #ccc;}
.posiciones{height: 345px; left: 625px; position: absolute; top: 10px; width: 80px;}
.bbtn{position: absolute;left: 653px;top:350px;}
[class^=cp]{position:relative;width:53px;height:53px; background-position: center;cursor: grab;}
#dndformas .posiciones [class^=cp]{width:34px;height:48px;background-repeat: no-repeat;background-position: center;}
/*[class^=leaveelement]{position:absolute;width: 66px;height: 65px;border-radius:15px;}*/
[class^=leaveelement]{position:absolute;width:34px;height:48px;border-radius:8px;top:0px;}
#dndformas [class^=row]{left:0px;width: 80px;height: 110px;position: absolute;}
#dndformas .row0{left:0px;top:0px;}
#dndformas .row1{left:0px;top:116px;}
#dndformas .row2{left:0px;top:233px;}
#dndformas .leaveelement0{left: 5px;top: 5px;}
#dndformas .leaveelement1{right:5px;top: 5px;}
#dndformas .leaveelement2{left: 5px;top:53px;}
#dndformas .leaveelement3{right:5px;top:53px;}
#dndformas .cp0{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-03.png);width: 78px;height:119px;}
#dndformas .cp1{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-04.png);width: 71px;height: 95px;}
#dndformas .cp2{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-05.png);width: 71px;height: 76px;}
#dndformas .cp3{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-06.png);width: 71px;height: 76px;}
#dndformas .cp4{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-07.png);width: 70px;height:105px;}
#dndformas .cp5{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-08.png);width: 78px;height: 96px;}
#dndformas .cp6{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-09.png);width: 78px;height:123px;}
#dndformas .cp7{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-10.png);width: 70px;height: 69px;}
#dndformas .cp8{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-11.png);width: 78px;height: 86px;}
#dndformas .cp9{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-12.png);width: 79px;height:116px;}
#dndformas .cp10{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-13.png);width:78px;height: 86px;}
#dndformas .posiciones .cp0{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-18.png);}
#dndformas .posiciones .cp1{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-19.png);}
#dndformas .posiciones .cp2{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-20.png);}
#dndformas .posiciones .cp3{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-21.png);}
#dndformas .posiciones .cp4{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-22.png);}
#dndformas .posiciones .cp5{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-23.png);}
#dndformas .posiciones .cp6{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-24.png);}
#dndformas .posiciones .cp7{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-25.png);}
#dndformas .posiciones .cp8{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-26.png);}
#dndformas .posiciones .cp9{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-27.png);}
#dndformas .posiciones .cp10{background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/IPG/T02/A01/img/T2_A1_H2_P5-28.png);}
#dndformas .dragelement0{width: 78px;height:119px;left:  8px;top:121px;}
#dndformas .dragelement1{width: 71px;height: 95px;left:  0px;bottom: 4px;}
#dndformas .dragelement2{width: 71px;height: 76px;left:110px;top:  1px;}
#dndformas .dragelement3{width: 71px;height: 76px;left:108px;top:262px;}
#dndformas .dragelement4{width: 70px;height:105px;left:193px;top: 13px;}
#dndformas .dragelement5{width: 78px;height: 96px;left:211px;bottom: 3px;}
#dndformas .dragelement6{width: 78px;height:123px;left:298px;bottom:36px;}
#dndformas .dragelement7{width: 70px;height: 69px;left:367px;top:  8px;}
#dndformas .dragelement8{width: 78px;height: 86px;left:399px;top:259px;}
#dndformas .dragelement9{width: 79px;height:116px;left:523px;top:130px;}
#dndformas .dragelement10{width:78px;height: 86px;left:510px;bottom:10px;}
[class^=dragelement]{position: absolute;}