.clock{ /* The .clock div. Created dynamically by jQuery */ background-color:#111; height:75px; width:75px; position:relative; overflow:hidden; float:left; } .clock .rotate{ /* There are two .rotate divs - one for each half of the background */ position:absolute; width:75px; height:75px; top:0; left:0; } .rotate.right{ display:none; z-index:9; } .clock .bg, .clock .front{ width:37.5px; height:75px; background-color:#111; position:absolute; top:0; } .clock .display{ /* Holds the number of seconds, minutes or hours respectfully */ position:absolute; width:75px; font-family: Orbitron, sans-serif; z-index:17; color:#F5F5F5; font-size:21px; text-align:center; top:27.5px; left:0px; } /* The left part of the background: */ .clock .bg.left{ left:0px; } /* Individual styles for each color: */ .orange .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat left top; } .green .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat left top; } .blue .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat left top; } /* The right part of the background: */ .clock .bg.right{ left:37.5px; } .orange .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat right top; } .green .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat right top; } .blue .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat right top; } .clock .front.left{ left:0; z-index:15; } #fancyClock { position: absolute; overflow: hidden; top: 50%; left: 50%; margin: -36px 0 0 -114px; }