font: 16px/1.5em "Open Sans", sans-serif;
a { text-decoration: none; }
margin: -178px 0 0 -178px;
-webkit-box-shadow: inset 1px 1px 5px #000;
box-shadow: inset 1px 1px 5px #000;
margin: -135px 0 0 -135px;
-webkit-transform-origin: 135px 135px;
-moz-transform-origin: 135px 135px;
-ms-transform-origin: 135px 135px;
-o-transform-origin: 135px 135px;
transform-origin: 135px 135px;
.color-wheel li:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.color-wheel li:nth-child(2) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.color-wheel li:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
.color-wheel li:nth-child(4) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
.color-wheel li:nth-child(5) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
.color-wheel li:nth-child(6) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
.color-wheel li:nth-child(7) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
.color-wheel li:nth-child(8) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
.color-wheel li:nth-child(1) a {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
.color-wheel li:nth-child(2) a {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
.color-wheel li:nth-child(3) a {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
.color-wheel li:nth-child(4) a {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
.color-wheel li:nth-child(5) a {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
.color-wheel li:nth-child(6) a {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.color-wheel li:nth-child(7) a {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.color-wheel li:nth-child(8) a {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-box-shadow: inset 1px 1px 3px #000;
box-shadow: inset 1px 1px 3px #000;
.color-wheel span.highlight {
box-shadow: inset 1px 1px 5px #000, 0 0 15px yellow;
.color-wheel li:nth-child(1) a {
.color-wheel li:nth-child(2) a {
.color-wheel li:nth-child(3) a {
.color-wheel li:nth-child(4) a{ background: #51b5a3; }
.color-wheel li:nth-child(5) a{ background: #4e7d8d; }
.color-wheel li:nth-child(6) a { background: #5c6182; }
.color-wheel li:nth-child(7) a { background: #926174; }
.color-wheel li:nth-child(8) a { background: #c44646; }