* {
	margin:0px;
    padding:0px;
}
body{
	font-family:Tahoma, Geneva, sans-serif;
	background-color:#000;
	margin:0px;
	color:#FFF;
    width:100%;
    min-width:768px;
}
#slow{
	width:100px;
    height:60px;
    border:1px solid #999;
    color:#999;
    line-height:60px;
    margin:20px auto 0;
    text-align:center;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#story {
    margin:20px auto;
    font-size:14px;
    max-width:640px;
}
.header {
	font-size:20px;
    text-align:center;
}
#story p{
	line-height:22px;
    margin-bottom:10px;
}
#clock {
	position:relative;
	height:520px;
	width:520px;
    margin:50px auto;
	overflow:hidden;
	cursor:pointer;
	z-index:8;
}
#Dial {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1;
}
#Seconds {
	position:absolute;
	width:120px;
	height:120px;
	top:301px;
	left:278px;
	z-index:2;
	animation:rotates 60s linear infinite;
	-moz-animation:rotates 60s linear infinite;
	-webkit-animation:rotates 60s linear infinite;
	-o-animation:rotates 60s linear infinite;
}
#Pendulum {
	position:absolute;
	width:200px;
	height:200px;
	top:203px;
	left:54px;
	z-index:3;
	animation:pend 0.17s linear infinite;
	-moz-animation:pend 0.17s linear infinite;
	-webkit-animation:pend 0.17s linear infinite;
	-o-animation:pend 0.17s linear infinite;
}
#PendulumS {
	position:absolute;
	width:200px;
	height:200px;
	top:203px;
	left:54px;
	z-index:3;
    display:none;
	animation:pend 2s linear infinite;
	-moz-animation:pend 2s linear infinite;
	-webkit-animation:pend 2s linear infinite;
	-o-animation:pend 2s linear infinite;
}
#Bridge {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:4;
}
#Hours {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:5;
	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:6;
	animation:rotatem 3600s linear infinite;
	-moz-animation:rotatem 3600s linear infinite;
	-webkit-animation:rotatem 3600s linear infinite;
	-o-animation:rotatem 3600s linear infinite;
}
#Shine {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:7;
}
#slow:active + #clock #Pendulum{
	display:none;
}
#slow:active + #clock #PendulumS{
	display:block;
}
#clock:active #Pendulum{
	display:none;
}
#clock:active #PendulumS{
	display:block;
}
/*seconds*/
@keyframes rotates
{
0%		{transform: rotate(258deg);}
100%	{transform: rotate(618deg);}
}
@-webkit-keyframes rotates
{
0%		{-webkit-transform: rotate(258deg);}
100%	{-webkit-transform: rotate(618deg);}
}
@-moz-keyframes rotates
{
0%   {-moz-transform: rotate(258deg);}
100% {-moz-transform: rotate(618deg);}
}
@-o-keyframes rotates
{
0%   {transform: rotate(258deg);}
100% {transform: rotate(618deg);}
}
/*minutes*/
@keyframes rotatem
{
0%		{transform: rotate(250.3deg);}
100%	{transform: rotate(610.3deg);}
}
@-webkit-keyframes rotatem
{
0%		{-webkit-transform: rotate(250.3deg);}
100%	{-webkit-transform: rotate(610.3deg);}
}
@-moz-keyframes rotatem
{
0%   {-moz-transform: rotate(250.3deg);}
100% {-moz-transform: rotate(610.3deg);}
}
@-o-keyframes rotatem
{
0%   {transform: rotate(250.3deg);}
100% {transform: rotate(610.3deg);}
}
/*hours*/
@keyframes rotateh
{
0%		{transform: rotate(350.5deg);}
100%	{transform: rotate(710.5deg);}
}
@-webkit-keyframes rotateh
{
0%		{-webkit-transform: rotate(350.5deg);}
100%	{-webkit-transform: rotate(710.5deg);}
}
@-moz-keyframes rotateh
{
0%   {-moz-transform: rotate(350.5deg);}
100% {-moz-transform: rotate(710.5deg);}
}
@-o-keyframes rotateh
{
0%   {transform: rotate(350.5deg);}
100% {transform: rotate(710.5deg);}
}
/*pendulum*/
@keyframes pend
{
0%		{transform: rotate(0deg);}
50%		{transform: rotate(180deg);}
100%	{transform: rotate(0deg);}
}
@-webkit-keyframes pend
{
0%		{-webkit-transform: rotate(0deg);}
50%		{-webkit-transform: rotate(180deg);}
100%	{-webkit-transform: rotate(0deg);}
}
@-moz-keyframes pend
{
0%   {-moz-transform: rotate(0deg);}
50%	 {-moz-transform: rotate(180deg);}
100% {-moz-transform: rotate(0deg);}
}
@-o-keyframes pend
{
0%   {transform: rotate(0deg);}
50%  {transform: rotate(180deg);}
100% {transform: rotate(0deg);}
}