.clock{

	/* The .clock div. Created dynamically by jQuery */

	height:200px;

	width:200px;

	position:relative;

	overflow:hidden;

	float:left;

}



.clock .rotate{

	/* There are two .rotate divs - one for each half of the background */

	position:absolute;

	width:200px;

	height:200px;

	top:0;

	left:0;

}



.hour, .minute, .second {

	position: absolute;

	top: 0px;

	left: 0px;

}



.hour {

	z-index:5;

}



.hour .front.left {

	z-index: 6;

}



.hour .rotate.right {

	display: none;

	z-index: 7;

}



.minute {

	z-index:10;

}



.minute .front.left {

	z-index: 11;

}



.minute .rotate.right {

	display: none;

	z-index: 12;

}



.second {

	z-index:15;

}



.second .front.left {

	z-index: 16;

}



.second .rotate.right {

	display: none;

	z-index: 17;

}



.clock .bg, .clock .front{

	width:100px;

	height:200px;

	background-color:#fff;

	position:absolute;

	top:0;

}



.clock .display{

	/* Holds the number of seconds, minutes or hours respectfully */

	position:absolute;

	width:200px;

	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

	z-index:20;

	color:#F5F5F5;

	font-size:60px;

	text-align:center;

	top:65px;

	left:0;

	

	/* CSS3 text shadow: */

	text-shadow:4px 4px 5px #333333;

}



/* The left part of the background: */



.clock .bg.left{ left:0; }



/* Individual styles for each color: */

.hour .bg.left{ background:url(../images/bg_hour.png) no-repeat left top; }

.minute .bg.left{ background:url(../images/bg_minute.png) no-repeat left top; }

.second .bg.left{ background:url(../images/bg_second.png) no-repeat left top; }



/* The right part of the background: */

.clock .bg.right{ left:100px; }



.hour .bg.right{ background:url(../images/bg_hour.png) no-repeat right top; }

.minute .bg.right{ background:url(../images/bg_minute.png) no-repeat right top; }

.second .bg.right{ background:url(../images/bg_second.png) no-repeat right top; }