body {
    background: #445;
}
#cornerzone {
    position: relative;
    margin: 5em auto;
    text-align: center;
}

.letter {
    display: inline-block;
    position: relative;
    background: #80b0f0;
    width: 4em;
    height: 4em;
    text-align: center;
    margin: 1em;
    vertical-align: center;
    padding: 1em;
    border-radius: 1em;
    font-size: 1em; /* Make Everything BIGGER */
    color: #f8f8f8;
}
.letter span {
    font-size: 3em;
    margin: 0 auto;
    display: block;
    font-variant: all-small-caps;
    vertical-align: middle;
    background: #405878;
    height: 1.25em;
    font-weight: bold;
    font-family: arial;
    border-radius: 1.5em;
}
.letter.zone {
    color: #405878;
    background: #80b0f0;
}
.letter.zone span{
    background: #f8f8f8;
}

.letter:hover {
    background: #627aa3;
}
.letter:hover span {
    background: #424e67;
    color: #e4e4e4;
}

.loop {
    width: 32em;
    height: 24em;
    border:1px solid grey;
    border-radius: .5em;
}
.loop .letter {
    position: absolute;
}
.letter[rel="0"] { top: 0em; left: 0em; }
.letter[rel="1"] { top: 0em; left: 8em; }
.letter[rel="2"] { top: 0em; left: 16em; }
.letter[rel="3"] { top: 0em; left: 24em; }
.letter[rel="4"] { top: 8em; left: 24em; }
.letter[rel="5"] { top: 16em; left: 24em; }
.letter[rel="6"] { top: 16em; left: 16em; }
.letter[rel="7"] { top: 16em; left: 8em; }
.letter[rel="8"] { top: 16em; left: 0em; }
.letter[rel="9"] { top: 8em; left: 0em; }

#c0 {
    background: #f8f8f8;
    color: #80b0f0;
}
#c0 span {
    background: #405878;
}
#c0:hover {
    background: #e4e4e4;
    color: #424e67;
}
#c0:hover span {
    background: #627aa3;
}