* {
	margin:0px;
    padding:0px;
}
body{
	background-color:#000;
	width:480px;
	height:800px;
	margin:0px;
	color:#000;
}
#alert{
	width:205px;
	height:70px;
	line-height:70px;
	display:none;
	position:absolute;
	top:205px;
	left:135px;
	background-color:#333;
	color:red;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
	z-index:10;
}
#date {
	color:#FFF;
	position:relative;
	width:30px;
	height:20px;
	text-align:center;
	z-index:2;
    top:177px;
    left:271px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
}
#date:after {
	content:'9';
}
#clock {
	left:50px;
	top:50px;
	position:relative;
	height:375px;
	width:375px;
	overflow:hidden;
	cursor:pointer;
	z-index:6;
}
#Bezel {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:0;
}
#Dial {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1;
}
#Hours {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:3;
	animation:rotateh 86400s linear infinite;
	-moz-animation:rotateh 86400s linear infinite;
	-webkit-animation:rotateh 86400s linear infinite;
	-o-animation:rotateh 86400s linear infinite;
}
#Minutes {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:4;
	animation:rotatem 3600s linear infinite;
	-moz-animation:rotatem 3600s linear infinite;
	-webkit-animation:rotatem 3600s linear infinite;
	-o-animation:rotatem 3600s linear infinite;
}
#Seconds {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:5;
	animation:rotates 60s linear infinite;
	-moz-animation:rotates 60s linear infinite;
	-webkit-animation:rotates 60s linear infinite;
	-o-animation:rotates 60s linear infinite;
}
/*seconds*/
@keyframes rotates
{
0%		{transform: rotate(336deg);}
100%	{transform: rotate(696deg);}
}
@-webkit-keyframes rotates
{
0%		{-webkit-transform: rotate(336deg);}
100%	{-webkit-transform: rotate(696deg);}
}
@-moz-keyframes rotates
{
0%   {-moz-transform: rotate(336deg);}
100% {-moz-transform: rotate(696deg);}
}
@-o-keyframes rotates
{
0%   {transform: rotate(336deg);}
100% {transform: rotate(696deg);}
}
/*minutes*/
@keyframes rotatem
{
0%		{transform: rotate(233.6deg);}
100%	{transform: rotate(593.6deg);}
}
@-webkit-keyframes rotatem
{
0%		{-webkit-transform: rotate(233.6deg);}
100%	{-webkit-transform: rotate(593.6deg);}
}
@-moz-keyframes rotatem
{
0%   {-moz-transform: rotate(233.6deg);}
100% {-moz-transform: rotate(593.6deg);}
}
@-o-keyframes rotatem
{
0%   {transform: rotate(233.6deg);}
100% {transform: rotate(593.6deg);}
}
/*hours*/
@keyframes rotateh
{
0%		{transform: rotate(349deg);}
100%	{transform: rotate(709deg);}
}
@-webkit-keyframes rotateh
{
0%		{-webkit-transform: rotate(349deg);}
100%	{-webkit-transform: rotate(709deg);}
}
@-moz-keyframes rotateh
{
0%   {-moz-transform: rotate(349deg);}
100% {-moz-transform: rotate(709deg);}
}
@-o-keyframes rotateh
{
0%   {transform: rotate(349deg);}
100% {transform: rotate(709deg);}
}