/*
	clock container allows the whole thing to be relatively positioned
	and provides some black spacing
*/
#clockContainer {
	background: #000;
	color: #fff;
	position:relative;
	width:104px;
	height:64px;
	}



/* clock div must be absolutely positioned for clip() to work */
#clock {
	background: #000;
	color: #fff;
	position:absolute;
	left:2px;
	top:2px;
	width:100px;
	height:280px;
	clip:rect(0 100px 60px 0);
	}



/* spans are gradient covers top and bottom */
#clock span {
	display:block;
	width:100px;
	height:20px;
	position:absolute;
	left:0px;
	}

span#coverTop {
	top:0px;
	background:url(gradient-top.png) transparent;
	}

span#coverBottom {
	top:40px;
	background:url(gradient-bottom.png) transparent;
	}



/*
	apply PNG using filter for win/ie
	but this doesn't work in ie5.0 so it will just have to be black
*/
* html #clock span {
		background-color:#000;
		background-image:none;
		}

@media screen,projection {

	* html #clock span {
			background-color/**/:transparent;
			}

	* html span#coverTop {
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-top.png");
		}

	* html span#coverBottom {
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bottom.png");
		}

	}



/* position images */
#clock img {
	position:absolute;
	top:0;
	}

#digit0 { left:0; width:15px; height:260px; }
#digit1 { left:15px; width:15px; height:260px; }
#colon0 { left:30px; top:20px; width:5px; height:20px; }
#digit2 { left:35px; width:15px; height:180px; }
#digit3 { left:50px; width:15px; height:260px; }
#colon1 { left:65px; top:20px; width:5px; height:20px; }
#digit4 { left:70px; width:15px; height:180px; }
#digit5 { left:85px; width:15px; height:260px; }