/* Copyright 2010-2011 Research In Motion Limited.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
html, body {
	margin:		0;
	padding:	0;	
}

.stage {
	width:				1024px;
	height:				600px;
	position:			relative;
	overflow:			hidden;
	-webkit-transform:	translateZ(0);
}

#main {
	width:							1024px;
	height:							600px;
	position:						relative;
	overflow:						hidden;
	-webkit-backface-visibility:	hidden;
	-webkit-animation:				dummy-loop 1s infinite;
	-webkit-transform:				translateZ(0);
}

.daystate {
	width:								1024px;
	height:								600px;
	opacity:							0;
	position:							absolute;
	top:								0;
	left:								0;
	background-repeat:					no-repeat;
	background-position:				center center;
	-webkit-animation-fill-mode:		forwards;
	-webkit-animation-duration:			1.5s;
	-webkit-animation-iteration-count:	1;
	-webkit-transform:					translateZ(0);
}


#night {
	background-image:	url('../img/background_sky_night.jpg');
}

#late_dawn {
	background-image:	url('../img/background_sky_morning.jpg');
}

#dawn {
	background-image:	url('../img/background_sky_early_morning.jpg');
}

#early_dusk {
	background-image:	url('../img/background_sky_morning.jpg');
}

#dusk {
	background-image:	url('../img/background_sky_early_morning.jpg');
	
}

#day {
	background-image:	url('../img/background_sky_day.jpg');
}

#sun {
	position:						absolute;
	-webkit-backface-visibility:	hidden;
	background:						url('../img/sun_on_stick_sh_psvg.svg') no-repeat center center;
	top:							80px;
	left:							450px;
	width:							142px;
	height:							481px;
	-webkit-transform:				translate3d(0, 0, 0);
	-webkit-transform-origin-y:		630px;
	-webkit-transform:				rotate(-82deg);
	-webkit-backface-visibility:	hidden;
}

#moon {
	left:							0;
	position:						absolute;
	background:						url('../img/moon_on_stick_sh_osvg.svg') no-repeat center center;
	top:							80px;
	left:							450px;
	width:							142px;
	height:							481px;
	-webkit-transform:				translate3d(0, 0, 0);
	-webkit-transform-origin-y:		630px;
	-webkit-transform:				rotate(-82deg);
	-webkit-backface-visibility:	hidden;
}


#data {
	font-family:	"Arial Black", Arial;
	font-size:		250px;
	font-weight:	900;
	color:			#fff;	
	letter-spacing:	-40px;
	text-shadow:	2px 2px 2px #000;
	position:		absolute;
	text-align:		center;
	bottom:			0;
	padding-bottom:	80px;
	width:			1024px;
}

#city {
	position:						absolute;
	bottom:							0;
	left:							0;
	width:							1024px;
	height:							268px;
	background-image:				url('../img/city_day_OSVG.svg');
	background-position:			bottom;
	background-repeat:				no-repeat;
	-webkit-backface-visibility:	hidden;
}

#cityshadow {
	background-image:	url('../img/city_shadow.png');
	background-repeat:	no-repeat;
	width:				817px;
	height:				104px;
	position:			absolute;
	top:				501px;
	left:				119px;
	z-index:			900;
}

.cityshadowshow{
	opacity:	0.15;
}

.cityshadowhide{
	opacity:	0.03;
}

#citylights {
	display:			block;
	width:				1024px;
	height:				268px;
	position:			absolute;
	bottom:				0;
	left:				0;
	background-image:	url('../img/city_lights_night_SVG.svg');
}

#overlay {
	position:						absolute;
	width:							1024px;
	height:							600px;
	top:							0px;
	left:							0px;
	background-color:				#fff;
	opacity:						1.0;
	-webkit-transition-property:	opacity;
	-webkit-transition-duration:	1s;
	z-index:						99999;
}

#roadsign {
	z-index:			800;
	position:			absolute;
	bottom:				18px;
	right:				35px;
	background-image:	url('../img/road_sign_day.png');
	width:				166px;
	height:				208px;
}

#roadsign #dayString {
	position:			absolute;
	font-family:		sans-serif;
	font-size:			17px;
	top:				55px;
	left:				57px;
	margin-top:			1px;
	width:				106px;
	height:				20px;
	-webkit-transform:	rotate(1.6deg) translateZ(0);
	text-align:			center;
}
#roadsign #time {
	position:			absolute;
	font-family:		sans-serif;
	font-size:			26px;
	color:				#222;
	top:				6px;
	left:				54px;
	margin-top:			2px;
	width:				106px;
	height:				20px;
	-webkit-transform:	rotate(5.3deg) translateZ(0);
	text-align:			center;
}

@-webkit-keyframes dummy-loop {
	from {
		-webkit-transform:	scale(1.0);
	} to {
		-webkit-transform:	scale(1.0);
	}
}

@-webkit-keyframes slide-up {
	from {
		bottom:	-268px;
	} to {
		bottom:	0;
	}
}

@-webkit-keyframes slide-up2 {
	from {
		bottom:	-168px
	} to {
		bottom:	0;
	}
}

@-webkit-keyframes fade_in {
	0% {
		opacity:	0;
	} 100% {
		opacity:	1;
	}
}


@-webkit-keyframes fast_forward_rotation {
	0% {
		-webkit-transform:	rotate(-80deg);
	} 100% {
		-webkit-transform:	rotate(80deg);
	}
}

.fast_forward {
	-webkit-animation:fast_forward_rotation 1.3s infinite linear;
}