style.css

#content { width: 377px; margin: auto; }

/* the grid */
#map {
	border-bottom: solid #c3c3c3 2px;
	border-right: solid #c3c3c3 2px;
	background-size: 15px 15px;
    background-image:
    	linear-gradient(
    		to right,
    		#c3c3c3 2px,
    		transparent 2px
    		),
    	linear-gradient(
    		to bottom,
    		#c3c3c3 2px,
    		transparent 2px
    		);
}

/* container for the ui */
#ui-container-1 {
    display: inline-block;
    float: right;
    height: 51px;
    width: 71px;
}

/* selected square button design  */
.selection-square {
    float: left;
    background: #e9e9e9;
    text-align: center;
    font-family: calibri, sans-serif;
    border: solid #c3c3c3 2px;
    padding: 2px 0;
    width: 67px;
}
.selection-square:hover {
    background: #f1f1f1;
    cursor: pointer;
}

/* selected square itself */
.selection-square div {
    margin: 0 21px;
    width: 25px;
    height: 25px;
}

/* selected square colors */
#source div { background: #4CAF50; }
#target div { background: #2196F3; }
#wall div { background: #F44336; }
#empty div { background: white; }

/* ui button class */
.ui-btn {
    background: #F57F17;
    color: white;
    border: none;
    padding: 5px;
    width: 100%;
    height: 29px;
    margin: 1px 0;
}
.ui-btn:hover {
    background: #F9A825;
    cursor: pointer;
}

#controls { margin-top: 2px; }

/* ui container for the bottom */
#ui-container-2 {
    font-family: calibri, sans-serif;
}

#console {
    margin-top: 5px;
}

/* checkmark */
#anim-check:hover { cursor: pointer; }