#controls, #transparency { text-align:center; }
#controls span { padding-right:2em; cursor:pointer; }

#cubespinner
   {
   -webkit-perspective: 800;
   -webkit-perspective-origin: 50% 100px;
   margin:4.2em auto 1.0em auto;
    width:416px;
   height:260px;
   }

#cubespinner #cube
   {
   position: relative;
   margin: 0 auto;
   height: 200px;
    width: 416px;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin:(50% 100px 0);
   -webkit-transition:all 1.0s ease-in-out;
   }

#cubespinner #Ycube,#cubespinner #Zcube
   {
   -webkit-transform-style: preserve-3d;   
   }

#cubespinner .face
   {
   position: absolute;
   width: 416px;
   height: 200px;
   padding: 0px;
   }

#cube .one   { -webkit-transform: translateZ(208px); }
#cube .two   { -webkit-transform: rotateY(90deg)  translateZ(208px); }
#cube .three { -webkit-transform: rotateY(180deg) translateZ(208px); }
#cube .four  { -webkit-transform: rotateY(-90deg) translateZ(208px); }

.selected { font-weight:700; }
.trans { opacity:0.7; }