body {
	background-color: black;
	color: white;
	margin: 25px;
}

div.digit {
	margin: 2px;
	width: 32px;
	height: 58px;
	position: relative;
	float: left;
}

div.digit div, div.colon div {
	background-image: url('digitParts.png');
	position: absolute;
}

div.digit div, div.colon {
	opacity: 0.3;
	transition: opacity .4s;
	-webkit-transition: opacity .4s;
}

div.digit div.visible, div.visible {
	opacity: 1.0;
}

/* horizontal parts */
.part_1, .part_8, .part_64 {
	background-position: -7px 0px;
	width: 22px;
	height: 6px;

	left: 5px; 
}
.part_1  { top: 0px;  }
.part_8  { top: 26px; }
.part_64 { top: 52px; }

/* vertical parts */
.part_2, .part_4, .part_16, .part_32 {
	background-position: 0px 0px;
	width: 6px;
	height: 22px;
}
.part_2,  .part_16 { left:  0px; }
.part_4,  .part_32 { left: 26px; } 
.part_2,  .part_4  { top:   5px; }
.part_16, .part_32 { top:  31px; }

div.colon {
	float: left;
	position: relative;
	margin: 12px 2px;
	width: 8px;
	height: 34px;
}
div.colon div {
	background-position: -7px -7px;
	width: 8px;
	height: 8px;
}
div.colon div:first-child {
	top: 0px;
}
div.colon div:last-child {
	bottom: 0px;
}

/* avoid using <br/> hacks */
small {
	position: absolute;
	top: 150px;
	left: 25px;
}