/*http://www.cssplay.co.uk/menus/cssplay-round-and-round-again.html#*/
#navigation {width:500px; height:920px; float:left; margin:-120px 50px; overflow:hidden;background : url(../images/sun-flower.png);background-color : transparent;
background-repeat : no-repeat; background-position:0px 17%; }
#navigation input {position:absolute; display:none;}
        /* border:1px solid #888;*/
.circular {margin:120px 115px 125px 125px; position:relative; z-index:100; width:90px; height:90px;}

.circular > label {display:block; width:100%; height:100%; border-radius:100%; font:40px/80px 'Comic Sans MS',Arial;/*font:40px/80px arial, sans-serif; */
position:absolute; left:58px; top:105px; background-image: radial-gradient(circle, #8A4B08, #DF7401); color:#003300;
 text-align:center;font-size:16px; cursor:pointer;  }
.circular div {width:60px; height:60px; border-radius:100%; position:absolute; left:10px; top:10px; z-index:-1;
transition: transform 0.25s 0.25s, z-index 0s 0.25s;
}
#navigation .circular div p {padding:0; margin:0; width:100%; height:100%; position:absolute; left:80px; top:80px;  }
/*.circular div label {display:block; width:100%; height:100%; border-radius:50%; font:30px/60px arial, sans-serif; text-align:center; position:absolute; left:0; top:0; background-image: radial-gradient(closest-side at center 70%, gold 90%, yellow 90%, white 10%); z-index:100; cursor:pointer;}
.circular div a {display:block; width:55px; height:40px; border-radius:50%; font:14px arial; text-align:center; position:absolute;                                                                                                                                                                        */
.circular div a {display:block; width:85px; height:60px; border-radius:50%; font:14px 'Comic Sans MS',Arial; text-align:center; position:absolute;
left:50px; top:115px; background-image: radial-gradient(closest-side at center 70%, gold 90%, orange 90%, gold 10%); color:#003300; z-index:-1;
transition:0.25s;text-decoration:none;
}

.circular div:nth-of-type(1) {transform:rotate(0deg)}
.circular div:nth-of-type(2) {transform:rotate(45deg)}
.circular div:nth-of-type(3) {transform:rotate(90deg)}
.circular div:nth-of-type(4) {transform:rotate(135deg)}
.circular div:nth-of-type(5) {transform:rotate(180deg)}
.circular div:nth-of-type(6) {transform:rotate(225deg)}
.circular div:nth-of-type(7) {transform:rotate(270deg)}
.circular div:nth-of-type(8) {transform:rotate(315deg)}
.circular div:nth-of-type(1) p {transform:rotate(0deg)}
.circular div:nth-of-type(2) p {transform:rotate(-45deg)}
.circular div:nth-of-type(3) p {transform:rotate(-90deg)}
.circular div:nth-of-type(4) p {transform:rotate(-135deg)}
.circular div:nth-of-type(5) p {transform:rotate(-180deg)}
.circular div:nth-of-type(6) p {transform:rotate(-225deg)}
.circular div:nth-of-type(7) p {transform:rotate(-270deg)}
.circular div:nth-of-type(8) p {transform:rotate(-315deg)}
.p0:checked ~ .circular div:nth-of-type(1) {transform:rotate(0deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(2) {transform:rotate(45deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(3) {transform:rotate(90deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(4) {transform:rotate(135deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(5) {transform:rotate(180deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(6) {transform:rotate(227deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(7) {transform:rotate(270deg) translateY(-84px);}
.p0:checked ~ .circular div:nth-of-type(8) {transform:rotate(315deg) translateY(-84px);}
.p0:checked ~ .circular > label:nth-of-type(2) {display:none;}