sandbox.css

body{
  margin-top: 100px;
}

.templates-list{
  float:left;
  width : 170px;
  height: 500px;
  border: 2px solid forestgreen ;
  background-color: silver;
  text-align: :center;
  margin-left:50px;
  overflow-y:auto;
  overflow-x: hidden;
}

.canvas{
	width: 1000px;
	height: 500px;
	border: 3px solid black;
  margin-left:300px;
}

.box{
    width: 120px;
    height: 120px;
    border: 1px solid black;
    border-radius: 25px;
    text-align: center;
    background-color: lightyellow;
    position:relative;
    padding:5px;
    display: inline-block;

}

.box .text{
    border: 1px dotted green;
}

.box .image{
    border: 1px dotted gold;
    width:80px;
    height:80px;
}

.content{
  background-color:white;
  position:relative;
  top:10px;  
}

.image{
  left:20px;
}


.box .image img{
  width:100%;
  height:100%;
}

.outer-box{
	position:absolute;
}

.templates-list .outer-box{
  position: static;
  padding-left: 10px;
  padding-top: 20px;
}

.canvas .outer-box{
  width:1px;
  height:1px;
}

.step{
	top:250px;
}

.greenmask{
  background-color: green;
  opacity:0.5;
}

.redmask{
  background-color: red;
  opacity:0.5; 
}

#imageLoader{
  display:none;
}