style.css

.box {
    width: 50px;
    height: 50px;
}

td {
    height: 300px;
    width: 150px;
}

.F .box {
    background-color: rgb(183, 232, 135);
}

.F .box:nth-of-type(2) {
    margin-left: 50px; 
    margin-top: -52px;
}

.F .flipped .box:nth-of-type(2) {
    margin-left: -52px; 
    margin-top: -52px;
}

.F .box:nth-of-type(4) {
    margin-left: -52px; 
    margin-top: -52px;
}

.F .flipped .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -52px;
}

.I .box {
    background-color: rgb(135, 232, 135);
}

.L .box {
    background-color: rgb(135, 232, 183);
}

.L .box:nth-of-type(5) {
    margin-left: 50px; 
    margin-top: -52px;
}

.L .flipped .box:nth-of-type(5) {
    margin-left: -52px; 
    margin-top: -52px;
}

.N .box {
    background-color: rgb(135, 232, 232);
}

.N .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -52px;
}

.N .flipped .box:nth-of-type(4) {
    margin-left: -52px; 
    margin-top: -52px;
}

.N .box:nth-of-type(5) {
    margin-left: 50px; 
}

.N .flipped .box:nth-of-type(5) {
    margin-left: -52px;
}

.P .box {
    background-color: rgb(135, 183, 232);
}

.P .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -103px;
}

.P .flipped .box:nth-of-type(4) {
    margin-left: -52px; 
    margin-top: -103px;
}

.P .box:nth-of-type(5) {
    margin-left: 50px; 
}

.P .flipped .box:nth-of-type(5) {
    margin-left: -52px;
}

.T .box {
    background-color: rgb(135, 135, 232);
}

.T .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -154px;
}

.T .box:nth-of-type(5) {
    margin-left: -52px; 
    margin-top: -52px;
}

.U .box {
    background-color: rgb(183, 135, 232);
}

.U .box:nth-of-type(2) {
    margin-left: 50px; 
    margin-top: -52px;
}

.U .box:nth-of-type(5) {
    margin-left: 50px; 
    margin-top: -52px;
}

.V .box {
    background-color: rgb(232, 135, 232);
}

.V .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -52px;
}

.V .box:nth-of-type(5) {
    margin-left: 101px; 
    margin-top: -52px; 
}

.W .box {
    background-color: rgb(232, 135, 183);
}

.W .box:nth-of-type(3) {
    margin-left: 50px; 
    margin-top: -52px;
}

.W .box:nth-of-type(4) {
    margin-left: 50px; 
}

.W .box:nth-of-type(5) {
    margin-left: 101px; 
    margin-top: -52px; 
}

.X .box {
    background-color: rgb(232, 135, 135);
}

.X .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -103px;
}

.X .box:nth-of-type(5) {
    margin-left: -52px; 
    margin-top: -52px;
}

.Y .box {
    background-color: rgb(232, 183, 135);
}

.Y .box:nth-of-type(4) {
    margin-left: 50px; 
    margin-top: -52px;
}

.Y .flipped .box:nth-of-type(4) {
    margin-left: -52px; 
    margin-top: -52px;
}

.Z .box {
    background-color: rgb(232, 232, 135);
}

.Z .box:nth-of-type(2) {
    margin-left: 50px; 
    margin-top: -52px;
}

.Z .flipped .box:nth-of-type(2) {
    margin-left: -52px; 
    margin-top: -52px;
}

.Z .box:nth-of-type(5) {
    margin-left: -52px; 
    margin-top: -52px;
}

.Z .flipped .box:nth-of-type(5) {
    margin-left: 50px; 
    margin-top: -52px;
}

.box {
    border: 1px solid #AAA;
    margin: -1px;
}

.selected .box {
    border-color: #666;
}


.container {
    position: relative;
}

body {
    background-image: url("http:https://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/light_checkered_tiles.png");
    font-size: 0px;
}

/*conatiner shapes*/

.F {
    height: 150px;
    width: 50px;
}

.I {
    height: 250px;
    width: 50px;
}

.L {
    height: 200px;
    width: 50px;
}

.N {
    height: 175px;
    width: 50px;
}

.P {
    height: 50px;
    width: 50px;
}

.T {
    height: 200px;
    width: 50px;
}

.U {
    height: 200px;
    width: 50px;
}

.V {
    height: 200px;
    width: 50px;
}

.W {
    height: 200px;
    width: 50px;
}

.X {
    height: 150px;
    width: 50px;
}

.Y {
    height: 250px;
    width: 50px;
}

.Z {
    height: 200px;
    width: 50px;
}