body {background-color:white;color:#363636;font-family:Arial Narrow,Helvetica,sans-serif;font-size:14pt;}
a {font-weight: bold;color:#363636;text-decoration:none;}
a:hover {text-decoration:underline;}


.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container a {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin:-4em; 
}

.circle-container img { display: block; width: 100%; border-radius:15px;}
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg180 { transform: translate(-12em); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }


a.deg0:nth-child(6){left:50%;}
a.deg45:nth-child(21){left:48.5%;}
a.deg135:nth-child(18){left:46.5%;}
a.deg180:nth-child(9){left:50%;}
a.deg225:nth-child(12){left:48.5%;}
a.deg315:nth-child(15){left:45%;}