@charset "utf-8";
/* CSS Document */
        
#clock {
	position: relative;												/* Aligns with rest of content */
	width: 400px;													/* Sets the width */
	height: 400px;													/* Sets the height */
	background-image: url("images/clockface.png");					/* Sets the background image of the clock's face */
	background-position: center;									/* Centralised background image */
	background-repeat: no-repeat;									/* Background is not repeated */
	background-size: 400px 400px;									/* Keeps background image correct size */
	list-style: none;												/* No bullet points */
	padding: 0;														/* No padding */
	margin: 0;														/* No margins */
}

#clock-wrap {
	width: 400px;													/* Sets the width */
	height: 400px;													/* Height */
	margin: 0px;													/* Again, no margins */
	padding: 0px;													/* Again, no paddings */
	float: left;													/* As far left as possible */
	margin-top: -60px;												/* Aligns with other content */
	margin-left: -141px;											/* Aligns with other content */
}

#sec, #min, #hour {
	position: absolute;												/* Seconds, minutes and hour hands can go anywhere they want */
	width: 20px;													/* Width of containers */
	height: 400px;													/* Height of containers */
	top: 0px;														/* No extra distance from top */
	left: 190px;													/* A little extra distance from left */
}

#sec {
	background-image: url("images/sechand.png");					/* Sets background image of second hand */
	z-index: 3;														/* This is on top */
	
	animation: secSpin 5s ease;										/* Sets up animations for second hand spinning, easing for 5 seconds duration */
	/* Firefox: */
	-moz-animation: secSpin 5s ease;
	/* Safari and Chrome: */
	-webkit-animation: secSpin 5s ease;
	/* Opera: */
	-o-animation: secSpin 5s ease;
}
   
#min {
	background-image: url("images/minhand.png");					/* Sets minute hand background image */
	z-index: 2;														/* Below second hand */
	
	animation: minSpin 4s ease;										/* Animation for minute hand, only 4s for spinning at different rates */
	/* Firefox: */
	-moz-animation: minSpin 4s ease;
	/* Safari and Chrome: */
	-webkit-animation: minSpin 4s ease;
	/* Opera: */
	-o-animation: minSpin 4s ease;
}
   
#hour {
	background-image: url("images/hourhand.png");					/* Sets hour hand background image */
	z-index: 1;														/* Below all other hands */
	
	animation: hourSpin 3.5s ease;									/* Animation for hour hand, only 3.5s for spinning at different rates */
	/* Firefox: */
	-moz-animation: hourSpin 3.5s ease;
	/* Safari and Chrome: */
	-webkit-animation: hourSpin 3.5s ease;
	/* Opera: */
	-o-animation: hourSpin 3.5s ease;
}