#wrapper {
    max-width: 720px;
    text-align: center;
    margin: auto;
}

#nodes {
    font-size: 1;
    line-height: 0;
}

.node {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.04em #FFFFFF solid;
    background-color: #E2D8D7;
    
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

.node:hover {
    background-color: #CEC5C4;
    border-color: #CEC5C4;
}

.node.wall { background-color: #2B2B2B; }
.node.start { background-color: #59AD48; }
.node.target { background-color: #F15156; }
.node.path { background-color: #1A67BF; }
.node.processed { background-color: #C7D0DB; }

.node.wall:hover { border-color: #2B2B2B; }
.node.start:hover { border-color: #59AD48; }
.node.target:hover { border-color: #F15156; }
.node.path:hover { border-color: #1A67BF; }
.node.processed:hover { border-color: #C7D0DB; }