#fancyClock{

	margin:40px auto;

	height:100px;

	/*border:1px solid #111111;*/

	width:300px;
float:left;

}
#fancyClock:after{content: div;clear:both;}

.clock{

	/* The .clock div. Created dynamically by jQuery */
	background:url(../images/interface/clock.png) top left no-repeat;
	background-color:#FFF;

	height:100px;

	width:100px;

	position:relative;

	overflow:hidden;

	float:left;

}



.clock .rotate{

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

	position:absolute;

	width:100px;

	height:100px;

	top:0;

	left:0;

}



.rotate.right{

	display:none;

	z-index:11;

}



.clock .bg, .clock .front{

	width:50px;

	height:100px;

	background-color:#FFF;

	position:absolute;

	top:0;

}



.clock .display{

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

	position:absolute;

	width:100px;

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

	z-index:20;

	color:#F5F5F5;

	font-size:30px;

	text-align:center;

	top:33px;

	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: */

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

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

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



/* The right part of the background: */

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



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

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

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





.clock .front.left{

	left:0;

	z-index:10;

}