.main-canvas {
    outline: 1px solid #dddddd;;
    width: 500px;
    height: 220px;
    margin: 50px auto 0;
    position: relative;
}

.register {
    outline: 3px dashed #dddddd;;
    width: 120px;
    height: 240px;
    margin: 0px auto 0;
    position: relative;
}

.box{
    width: 62px;
    height: 100px;
    position: absolute !important;
    top: 100px;
    font-size: 15px;
    color: #ffffff;
    line-height: 25px;
    text-align: center;
    cursor: move;
}

.robotOrientation {
    width: 75px;
    height: 75px;
}

.robotOrientation90 {
    width: 75px;
    height: 75px;
        -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.robotOrientation180 {
    width: 75px;
    height: 75px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.robotOrientation270 {
    width: 75px;
    height: 75px;
        -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.rotate90 {
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.top-buffer { margin-top:20px; }


.card0 { left: 0; top: 0;  background-color: #E74C3C;     position: absolute !important;
}
.card1 { left: 100px; top: 0; background-color: #8E44AD;     position: absolute !important;
}
.card2 { left: 200px; top: 0; background-color: #5DADE2; }
.card3 { left: 300px; top: 0; background-color: #1ABC9C; }
.card4 { left: 400px; top: 0; background-color: #F1C40F; }
.card5 { left: 50px; top: 120px; background-color: #F39C12; }
.card6 { left: 150px; top: 120px; background-color: #34495E; }
.card7 { left: 250px; top: 120px; background-color: #FF00FF; }
.card8 { left: 350px; top: 120px; background-color: #008080; }

.card_hidden { background-color: #dddddd; }