* {
	margin:0;
	padding:0;
	border:0;
}

html {
	height:100%;
}

body {
	padding:5%;
	overflow:hidden;
	
	font-family:Arial, Helvetica, sans-serif;
}

#skin {
	position:relative;
	width:100%;
	height:100%;
}

.timerBlock,
.switchBlock {
	position:absolute;
	overflow:hidden;
}

.timerBlock a,
.switchBlock a {
	display:block;
	
	width:100%;
	height:100%;
	
	background:url(../gfx/pixel-spacer.gif) repeat;
	z-index:100;
}
.timerBlock a:hover,
.timerBlock a.active,
.switchBlock a:hover {
	background-color:#ffff00;
}

.switchBlock a {
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
}



.timerBlock {
	width:49%;
	height:49%;
	background-repeat:no-repeat;
}

#timerBlock_1 {
	left:0;
	top:0;
	background-color:#669966;
}

#timerBlock_2 {
	left:51%;
	top:0;
	background-color:#333366;
}

#timerBlock_3 {
	left:0;
	top:51%;
	background-color:#333399;
}

#timerBlock_4 {
	left:51%;
	top:51%;
	background-color:#336666;
}

.timerBlock span.corner_number {
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
}

#timerBlock_1 a span.corner_number {
	background-image:url(../gfx/number-corner-1_white_x100.png);
	background-position:top left;
}
#timerBlock_1 a:hover span.corner_number,
#timerBlock_1 a.active span.corner_number {
	background-image:url(../gfx/number-corner-1_black_x100.png);
}

#timerBlock_2 a span.corner_number {
	background-image:url(../gfx/number-corner-2_white_x100.png);
	background-position:top right;
}
#timerBlock_2 a:hover span.corner_number,
#timerBlock_2 a.active span.corner_number {
	background-image:url(../gfx/number-corner-2_black_x100.png);
}

#timerBlock_3 a span.corner_number {
	background-image:url(../gfx/number-corner-3_white_x100.png);
	background-position:bottom left;
}
#timerBlock_3 a:hover span.corner_number,
#timerBlock_3 a.active span.corner_number {
	background-image:url(../gfx/number-corner-3_black_x100.png);
}

#timerBlock_4 a span.corner_number {
	background-image:url(../gfx/number-corner-4_white_x100.png);
	background-position:bottom right;
}
#timerBlock_4 a:hover span.corner_number,
#timerBlock_4 a.active span.corner_number {
	background-image:url(../gfx/number-corner-4_black_x100.png);
}


.timerBlock .timerDisplay {
	position:absolute;
	
	left:27%;
	top:42%;
	
	background:#333;
	border:4px solid #000;
	padding:2% 4%;
	
	cursor:pointer;
	
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.timerBlock .timerDisplay.altAppearance {
	border-color:#fff;
}




.switchBlock {
	width:10%;
	height:10%;
	background:#000;
	border:4px solid #fff;
}

#switchBlock_Centre {
	width:16%;
	height:16%;
	left:41.5%;
	top:41.5%;
}

#switchBlock_N {
	left:44.5%;
	top:14.5%;
}

#switchBlock_S {
	left:44.5%;
	top:74.5%;
}

#switchBlock_E {
	left:74.5%;
	top:44.5%;
}

#switchBlock_W {
	left:14.5%;
	top:44.5%;
}

#switchBlock_Centre a {
	background-image:url(../gfx/stop-all-sign_white_x100.png);
}
#switchBlock_Centre a:hover {
	background-image:url(../gfx/stop-all-sign_black_x100.png);
}

#switchBlock_N a,
#switchBlock_S a {
	background-image:url(../../images/double-arrow-horizontal_white_x100.png);
}
#switchBlock_N a:hover,
#switchBlock_S a:hover {
	background-image:url(../../images/double-arrow-horizontal_black_x100.png);
}

#switchBlock_E a,
#switchBlock_W a {
	background-image:url(../../images/double-arrow-vertical_white_x100.png);
}
#switchBlock_E a:hover,
#switchBlock_W a:hover {
	background-image:url(../../images/double-arrow-vertical_black_x100.png);
}