/* Copyright 2009 Palm, Inc.  All rights reserved. */


.clock-container {
		background: #000;
		position:fixed;
		top: 0;     
		left: 0;
		height: 110%;
		width: 100%;
		min-height: 320px;
		max-height: 480px;
}

.landscape.clock-container {
		min-height:320px;
}

#hands {
		position:absolute;
		top: 50%;
		left: 50%;
		width: 320px;
		height: 320px;
		margin: -180px 0px 0px -160px;
		background: url(images/base.png) center center no-repeat;
		/*-webkit-transition: margin, ease-out; 
				-webkit-transition-duration: 0.5s;*/
}

.landscape #hands  {
		top: 0;
		margin-top: 0;
/*
		-webkit-transform: scale(0.8, 0.8);
*/
}

#hour,
#hour-shadow {
		margin: 0;
		width: 320px;
		height: 320px;
		position: absolute; 
		z-index: 5;
		background: url(images/hour.png) center center no-repeat;		
}

#hour-shadow {
		z-index: 3;
		margin-top: 3px;
		background: url(images/hour-shadow.png) center center no-repeat;		
}

#minute,
#minute-shadow {
		margin: 0;
		width: 320px;
		height: 320px;
		position: absolute; 
		z-index: 8;
		background: url(images/minute.png) center center no-repeat;
		
}

#minute-shadow {
		z-index: 7;
		margin-top: 3px;
		background: url(images/minute-shadow.png) center center no-repeat;		
}

#second {
		margin: 0;
		width: 320px;
		height: 320px;
		position: absolute; 
		z-index: 4;
}

#second-second {
	position: absolute;
	left:144px;
	z-index: 400;
	width:32px;
	height:32px;
	background: url(images/second.png) center center no-repeat;
}

#second-shadow {
	position: absolute;
	left:144px;
	width:32px;
	height:32px;
	z-index:300;
	background: url(images/second-shadow.png) center center no-repeat;
}

#miniSecond {
		margin: 15px 0px 0px 15px;
		width: 290px;
		height: 290px;
		position: absolute; 
		z-index: 4;
		background: url(images/second-simple.png) center center no-repeat;
		display: none; 	
}

.day,
.date {
		width: 320px;
		height: 40px;
		font-size: 30px;
		color: #bbb; 
		overflow: hidden;
		text-align: center;
		position: absolute;
		top: 197px;
		z-index: 2;
}

.day {
		top: 83px;
		text-transform: uppercase;
		color: #ddd; 
}

#gloss {
	margin: 0;
	width: 320px;
	height: 320px;
	position: absolute;
	z-index: 12;
	background: url(images/gloss.png) center center no-repeat; 	
}

#alarm-noted-icon {
	position: absolute;
	background: url(images/alarm-icon.png) center center no-repeat;
	width:70px;
	height:70px;
	top:245px;
	left:245px;
}

.landscape #alarm-noted-icon {
	
}