#centerRect {
    border-radius: 15px;
    height: 25%;
    left: 45%;
    position: absolute;
    top: 41%;
    width: 14%;
    border: 3px solid white;
    padding: 8px;
    display: none;
}

div.rectangle {
    padding: 5px;
    width: 100%;
    height: 100%;
}

div.rectangle div.subRectangle {
    background: url('../../graphX/games/squareGrey.png');
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
    margin: 0.5%;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

div.rectangle div.subRectangle.colored {
    background: url('../../graphX/games/square.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: none; /* leveled colors */
    -webkit-filter: none;
}

div.rectangle.dim_3x3 div.subRectangle {
    width: 32%;
    height: 32%;
}

div.rectangle.dim_4x4 div.subRectangle {
    width: 24%;
    height: 24%;
    border-radius: 7px;
}

div.rectangle.dim_5x5 div.subRectangle {
    width: 19%;
    height: 19%;
    border-radius: 5px;
}

div.rectangle.dim_6x6 div.subRectangle {
    width:  15.666666666666666%;
    height: 15.666666666666666%;
    border-radius: 3px;
}

.clickRect {
    cursor: pointer;
    height: 20%;
    position: absolute;
    width: 12%;
    border-radius: 10px;
    transition: transform 1s ease-out;
    -webkit-transition: transform 1s ease-out;
    -moz-transition: transform 1s ease-out;
    -o-transition: transform 1s ease-out;
}

#clickRect0 {
    left: 18%;
    top: 5%;
}

#clickRect1 {
    left: 35%;
    top: 5%;
}

#clickRect2 {
    left: 53%;
    top: 10%;
}

#clickRect3 {
    right: 15%;
    top: 17%
}

#clickRect4 {
    right: 7%;
    top: 46%;
}

#clickRect5 {
    right: 15%;
    top: 72%;
}

#clickRect6 {
    bottom: 5%;
    left: 52%;
}

#clickRect7 {
    left: 34%;
    bottom: 7%;
}

#clickRect8 {
    bottom: 15%;
    left: 17%;
}

#clickRect9 {
    left: 15%;
    top: 35%;
}

.clickRect.rotate90 {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

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

.clickRect.rotate270 {
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
}
.rumbleWrong {
    width: 100%;
    height: 100%;
}