body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}


#slots_container {
	float:left;
	height:800px;
	width:auto;
	margin: 0 0 0 10px;
}

#draggables_container {
	float:left;
	height:auto;
	width:400px;
	margin: 20px 10px 0 20px;
	position:relative;
}

.draggable {
	position:absolute;
	height:120px;
	width:60px;
	cursor:grab;
	cursor: -webkit-grab;
}

.drag_disable {
	float:left;
	height:120px;
	width:60px;
}


#draggable_1{
	background-image: url(../images/1_a.png);
	background-repeat:no-repeat;

}

#draggable_2{
	background-image: url(../images/1_b.png);
	background-repeat:no-repeat;

}

#draggable_3{
	background-image: url(../images/2_a.png);
	background-repeat:no-repeat;

}

#draggable_4{
	background-image: url(../images/2_b.png);
	background-repeat:no-repeat;

}

#draggable_5{
	background-image: url(../images/3_a.png);
	background-repeat:no-repeat;

}

#draggable_6{
	background-image: url(../images/3_b.png);
	background-repeat:no-repeat;

}

#draggable_7{
	background-image: url(../images/4_a.png);
	background-repeat:no-repeat;

}

#draggable_8{
	background-image: url(../images/4_b.png);
	background-repeat:no-repeat;

}

#draggable_9{
	background-image: url(../images/5_a.png);
	background-repeat:no-repeat;
}

#draggable_10{
	background-image: url(../images/5_b.png);
	background-repeat:no-repeat;
}

#draggable_11{
	background-image: url(../images/6_a.png);
	background-repeat:no-repeat;
}

#draggable_12{
	background-image: url(../images/6_b.png);
	background-repeat:no-repeat;
}

#draggable_13{
	background-image: url(../images/7_a.png);
	background-repeat:no-repeat;
}

#draggable_14{
	background-image: url(../images/7_b.png);
	background-repeat:no-repeat;
}

#draggable_15{
	background-image: url(../images/8_a.png);
	background-repeat:no-repeat;
}

#draggable_16{
	background-image: url(../images/8_b.png);
	background-repeat:no-repeat;
}

#draggable_17{
	background-image: url(../images/9_a.png);
	background-repeat:no-repeat;
}

#draggable_18{
	background-image: url(../images/9_b.png);
	background-repeat:no-repeat;
}

#draggable_19{
	background-image: url(../images/10_a.png);
	background-repeat:no-repeat;
}

#draggable_20{
	background-image: url(../images/10_b.png);
	background-repeat:no-repeat;
}

#draggable_21{
	background-image: url(../images/11_a.png);
	background-repeat:no-repeat;
}

#draggable_22{
	background-image: url(../images/11_b.png);
	background-repeat:no-repeat;
}

#draggable_23{
	background-image: url(../images/12_a.png);
	background-repeat:no-repeat;
}

#draggable_24{
	background-image: url(../images/12_b.png);
	background-repeat:no-repeat;
}

#draggable_25{
	background-image: url(../images/13_a.png);
	background-repeat:no-repeat;
}

#draggable_26{
	background-image: url(../images/13_b.png);
	background-repeat:no-repeat;
}

#draggable_27{
	background-image: url(../images/14_a.png);
	background-repeat:no-repeat;
}

#draggable_28{
	background-image: url(../images/14_b.png);
	background-repeat:no-repeat;
}

#draggable_29{
	background-image: url(../images/15_a.png);
	background-repeat:no-repeat;
}

#draggable_30{
	background-image: url(../images/15_b.png);
	background-repeat:no-repeat;
}

#draggable_31{
	background-image: url(../images/16_a.png);
	background-repeat:no-repeat;
}

#draggable_32{
	background-image: url(../images/16_b.png);
	background-repeat:no-repeat;
}

#draggable_33{
	background-image: url(../images/17_a.png);
	background-repeat:no-repeat;
}

#draggable_34{
	background-image: url(../images/17_b.png);
	background-repeat:no-repeat;
}

#draggable_35{
	background-image: url(../images/18_a.png);
	background-repeat:no-repeat;
}

#draggable_36{
	background-image: url(../images/18_b.png);
	background-repeat:no-repeat;
}

#draggable_37{
	background-image: url(../images/19_a.png);
	background-repeat:no-repeat;
}

#draggable_38{
	background-image: url(../images/19_b.png);
	background-repeat:no-repeat;
}

#draggable_39{
	background-image: url(../images/20_a.png);
	background-repeat:no-repeat;
}

#draggable_40{
	background-image: url(../images/20_b.png);
	background-repeat:no-repeat;
}

#draggable_41{
	background-image: url(../images/21_a.png);
	background-repeat:no-repeat;
}

#draggable_42{
	background-image: url(../images/21_b.png);
	background-repeat:no-repeat;
}

#draggable_43{
	background-image: url(../images/22_a.png);
	background-repeat:no-repeat;
}

#draggable_44{
	background-image: url(../images/22_b.png);
	background-repeat:no-repeat;
}

#draggable_45{
	background-image: url(../images/x.png);
	background-repeat:no-repeat;
}

#draggable_46{
	background-image: url(../images/y.png);
	background-repeat:no-repeat;
}

.slots {
	height: auto;
	width: 750px;
}
	
	
.drag_slot {
	height: 120px;
	width: 100px;
	border-radius: 4px;
	float:left;
	background: rgba(255, 255, 255, .4);
	border: 1px solid #6ac1cb;
	margin: 20px 0 0 10px;
	top: 50%;
    text-align: center;
}

#ds_1 {
	background-image: url(../images/ds_1.png);
}

#ds_2 {
	background-image: url(../images/ds_2.png);
}

#ds_3 {
	background-image: url(../images/ds_3.png);
}

#ds_4 {
	background-image: url(../images/ds_4.png);
}

#ds_5 {
	background-image: url(../images/ds_5.png);
}

#ds_6 {
	background-image: url(../images/ds_6.png);
}

#ds_7 {
	background-image: url(../images/ds_7.png);
}

#ds_8 {
	background-image: url(../images/ds_8.png);
}

#ds_9 {
	background-image: url(../images/ds_9.png);
}

#ds_10 {
	background-image: url(../images/ds_10.png);
}

#ds_11 {
	background-image: url(../images/ds_11.png);
}

#ds_12 {
	background-image: url(../images/ds_12.png);
}

#ds_13 {
	background-image: url(../images/ds_13.png);
}

#ds_14 {
	background-image: url(../images/ds_14.png);
}

#ds_15 {
	background-image: url(../images/ds_15.png);
}

#ds_16 {
	background-image: url(../images/ds_16.png);
}

#ds_17 {
	background-image: url(../images/ds_17.png);
}

#ds_18 {
	background-image: url(../images/ds_18.png);
}

#ds_19 {
	background-image: url(../images/ds_19.png);
}

#ds_20 {
	background-image: url(../images/ds_20.png);
}

#ds_21 {
	background-image: url(../images/ds_21.png);
}

#ds_22 {
	background-image: url(../images/ds_22.png);
}

#ds_23 {
	background-image: url(../images/ds_23.png);
}

#ds_24 {
	background-image: url(../images/ds_24.png);
}
  
 .drag_slot.hover {
	border: 1px solid #3f96a0;
	background-color:#d3f5f9;
}

.slot_tick {
	height: 14px;
	width: 15px;
	background-image: url(../images/tick.png);
}

#heading{
	font-size: 16px;
	font-weight:bold;
	margin: 20px 0 20px 10px;
	color:#00808b;
}

#instructions{
	font-size: 12px;
	margin: 0 0 10px 10px;
	color:#4b4b4b;
}
