/* UniAW6.12_iph5.css By Ian Nicoll with credit to Dacal 
===========================================================================*/

/*
z-index notes:
------------------
background (background wallpaper = 0
fullScreenWeatherWalls (full screen weather icons) = 1
nointernet (Image that shows when no internet connection) = 2
DayNightWalls = 1 (day_night wallpapers) = 3
stars background = 4 (static stars)
starContainer = 11
meteorContainer = 12
forecast background = 14
timed walls (WPOne WPTwo) = 3
WeatherInfoBG = 14
sun_moonContainer (sun/moon) = 20
sunray/moonray = 21
sun & moon = 25
astronautContainer = 28 (container for astronaut & balloons)
cloudContainer = (clouds, frost, ) = 30
frameContainer (Rainbow, static cloud, one lightening image)= 50
birdsContainer = 51
small_balloonContainer = 52
big_balloonContainer = 53
WeatherInfo (Container for all weather info) = 60
All weather info = 61
4 day forecast icons & text = 70
All info for digital clock = 80
analog clockface = 80
Day = 81
month = 81
date = 81
smallsechand = 82
hourhand = 83
minhand = 84
bigsechand = 85
node = 86
dropContainer = 88
circleContainer = 88
wiperContainer = 100
windContainer = 10
*/


body{
	background-color: transparent;
	position: absolute;
	top: 0px;
	margin: 0;
	padding: 0;
	width: 320px;
	height: 568px;
	font-family: Helvetica;
	}

.stretch {
	width:100%;
	height:100%;
	}
	
.TextColorRed {
	color: red;
	}

.TextColorGrey {
	color: #fff;
	}
	
/* FOR TOUCH ACTIVATED FORECAST */	
	
#TouchLayer{background-color: transparent;
	position: absolute;
	width: 320px;
	height: 400px;
	top: 0px;
	left: 0px;
	z-index: 999;
}	

.hideforecast {opacity: 0.0;
}
.showforecast {opacity: 1.0;
}

/* END FOR TOUCH ACTIVATED FORECAST */	
	
	/* WEBKIT ANIMATION CODES */

	@-webkit-keyframes static_stars_fadin {  /* Fade in animation for static stars */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	
	@-webkit-keyframes sun_moon_fadein {  /* Fade in animation for sun/moon */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
			
	
	@-webkit-keyframes weather_info_fadein {  /* Fade in animation for all weather info */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}

	
	@-webkit-keyframes sunray_moonray_shine{  /* Fade in/out animation for sunray/moonray */
	0%		{opacity : 0.1;}
	50%		{opacity : 0.7;}
	100%		{opacity : 0.1;}}     
	
	@-webkit-keyframes analog_clock_fadein{  /* Fade in animation for analog clock */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes digital_clock_fadein{  /* Fade in animation for digital clock */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}     
	
	@-webkit-keyframes calendar_fadein{  /* Fade in animation for date */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes forecast_fadein{  /* Fade in animation for 4 day forecast */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes forecastbg_fadein{  /* Fade in animation for forecast background */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}     
	
	@-webkit-keyframes WeatherInfoBG_fadein{  /* Fade in animation for the weather info background */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes DayNightWalls_fadein{  /* Fade in animation for day & night backgrounds (put you images in the correct "Day_night" folders */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes fullScreenWeatherWalls_fadin{  /* Fade in animation for full screen weather backgrounds */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}     
	
	@-webkit-keyframes background_fadein{  /* Fade in animation for background image (change the image in the "background" folder (this image will cover up any other theme's background) */
	0%		{opacity : 0;}
	50%		{opacity : 0;}
	100%		{opacity : 1.0;}}
	
	@-webkit-keyframes PanoramicViewFULL{ /* Fade transition and animation for timed walls */

	0%		{opacity: 1.0;-webkit-transform:translateX(-1px) translateY(0px);}
	50%		{opacity: 1.0;-webkit-transform:translateX(-709px);}
	100%		{opacity: 1.0;-webkit-transform:translateX(-1px);}}

	
	
	/* OVERLAYS & BACKGROUNDS (alphabetical order)
=================================================== */

#background{ 
	center no-repeat;
	background-size: 320px 568px;
	position: absolute;
	top: 0px; 
	left: 0px; 
	width: 320px; 
	height: 568px; 
	z-index: 0;
	opacity: 0.0;
	-webkit-animation: background_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}
	
#DayNightWalls{ /* Day & Night Images (in day_night folders)*/
    position: absolute; 
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 3;
	opacity:0.0;
	-webkit-animation: DayNightWalls_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}	
	
#forecastbg{
	background: url('../../Images/forecastbg/forecastbg.png') center no-repeat;
	background-size: 320px 480px;
	width: 320px;
    height: 480px;
	position: absolute; 
	top: 123px; 
	right: 0px; 
	left: 0px;
	z-index: 14;	
	opacity: 0.0;
	-webkit-animation: forecastbg_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#fullScreenWeatherWalls{ /*Full screen weather backgrounds (in "Images/fullScreenWeatherWalls" folder) */
	position:absolute; 
	top: 0px; 
	left: 0px; 
	width: 320px; 
	height: 568px; 
	z-index: 1;
	opacity: 0.0;
	display: none;
	-webkit-animation: fullScreenWeatherWalls_fadin 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}	
	
#nointernet{
	background: url('../../Images/background/iph5/nointernet.png') center no-repeat;
	background-size: 320px 568px;
	width: 320px;
    height: 568px;
	position: absolute; 
	top: 0px; 
	right: 0px; 
	left: 0px;
	z-index: 2;	
	display:none;
	-webkit-animation: WeatherInfoBG_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}	
	
#starsBG {
	position: absolute;
	left: 0px;
    top: 0px;
	width: 320px;
	height: 75px;
	opacity: 0.0;
	z-index: 4;
	-webkit-animation: static_stars_fadin 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
}
	
#WeatherInfoBG{
	background: url('../../Images/WeatherInfoBG/iph5/WeatherInfoBG.png') center no-repeat;
	background-size: 320px 568px;
	width: 320px;
    height: 568px;
	position: absolute; 
	top: 0px; 
	right: 0px; 
	left: 0px;
	z-index: 14;	
	opacity: 0.0;
	-webkit-animation: WeatherInfoBG_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}
	
#WPone {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1029px;
	height: 588px;
	z-index: 3;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
	-webkit-animation-name: PanoramicViewFULL;
	-webkit-animation-duration: 125.0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
}

#WPtwo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1029px;
	height: 588px;
	z-index: 3;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
	-webkit-animation-name: PanoramicViewFULL;
	-webkit-animation-duration: 125.0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
}

.fade-out-wall { opacity: 0; }

.fade-in-wall { opacity: 1; }

.stretch {
	width:100%;
	height:100%;
	}
		
	/* CONTAINERS (alphabetical order)
=================================================== */


#astronautContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 28;
    overflow: hidden;
	}
	
#big_balloonContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 53;
	opacity : 1.0;	/* opacity of balloons */
    overflow: hidden;
	}
	
#birdsContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 52;
	opacity : 1.0;
	overflow: hidden;
	}			
		
#cloudContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 30;
	opacity : 0.6;	/* opacity of all clouds */
    overflow: hidden;
	}
	
#dropContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 300px;
    height: 568px;
    z-index:6;
    overflow: hidden;
	}

#circleContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 6;
    overflow: hidden;
	}
	
#fogContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 30;
	opacity : 0.8;	/* opacity of fog/haze */
    overflow: hidden;
	}	
	
#frameContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 50;
    overflow: hidden;
	}
	
#meteorContainer{
    position: absolute;
    top: 0px;
	left: 10px;
    width: 320px;
    height: 100px;
    z-index: 12;
    overflow: hidden;
	}
	
#small_balloonContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 51;
	opacity : 1.0;	/* opacity of balloons */
    overflow: hidden;
	}	
	
#starContainer{
    position: absolute;
    top: 0px;
	left: 5px;
    width: 310px;
    height: 200px;
    z-index: 11;
    overflow: hidden;
	}
	
#sun_moonContainer{ /* sun & moon */
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 20;
    overflow: hidden;
	-webkit-animation: sun_moon_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}	
	
#WeatherInfo{ /* Container for all weather info displayed on screen */
	position: absolute;
    top: 20px;
	left: 0px;
    width: 320px;
    height: 568px;
	z-index: 6;
	opacity: 0.0;
	-webkit-animation: weather_info_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#windContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 1;
	opacity : 1.0;	/* opacity of all clouds/fog/haze */
    overflow: hidden;
	}		
	
#wiperContainer{
    position: absolute;
    top: 0px;
	left: 0px;
    width: 320px;
    height: 568px;
    z-index: 6;
    overflow: hidden;
	}	


	/* WEATHER INFO (alphabetical order)
=================================================== */


#chill{   /* ("Feels Like" temperature) */
	background-color: transparent;
	position: absolute;
	top:272px;
	left: 70px;
	width: 60px;
	text-align: left;	
	font-family: Helvetica;
	font-size: 20px;
	font-weight: 200;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;	/* This option is not positioned */	
	opacity: 0.0;
	}
	
#city{
	position: absolute;
	text-align: left;
	top: 466px;
	left: 8px;
	width: 320px;
	height: 13px;
	font-family: Helvetica;    
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#coordinates{
	background-color: transparent;
	position: absolute;	
	top: 485px;
	left: 8px;
	width: 200px;
	text-align: left;
	font-family: Helvetica; 
	font-size: 9px;
	font-weight: bold;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#desc{
	position: absolute;	
	top: 495px;
	left: 8px;
	width: 320px;
	text-align: left;	
	font-family: Helvetica;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#feelslike{  /* ("Feels Like" text) */
	position: absolute;
	top:260px;
	left: 12px;
	width: 320px;
	text-align: left;	
	font-family: Helvetica;
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;  /* This option is not positioned */
	z-index: 61;
	opacity: 0.0;
	}	
	
#hi{		/* "Hi" text */
	background-color: transparent;
	position: absolute;
	width: 35px;	
	top: 457px;
	right:35px;
	text-align: right;
	font-family: Helvetica;
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	text-transform: none;
	z-index: 61;
	opacity: 1.0;
	}	
	
#high{
	background-color: transparent;
	position: absolute;
	width: 50px;
	text-align: right;
	font-size: 15px;
	font-family: Helvetica;
	font-weight: bold;
	top: 469px;
	color: #fff;
	right: 8px;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#humidity{
	background-color: transparent;
	position: absolute;
	font-family: Helvetica; 
	top: 445px;
	right: 8px;
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#lastupdate{
	background-color: transparent;
	position: absolute;	
	top: 520px;
	right: 0px;
	width: 320px;
	text-align: center;
	font-family: Helvetica;
	font-weight: normal;
	font-size: 9px;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#lo{		/* "Lo" text */
	background-color: transparent;
	position: absolute;
	width: 35px;	
	top: 479px;
	right: 35px;
	text-align: right;
	font-family: Helvetica;
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	text-transform: none;
	z-index: 61;
	opacity: 1.0;
	}	
	
#low{
	background-color: transparent;
	position: absolute;
	font-size: 15px;
	width: 50px;
	right: 8px;
	text-align: right;
	font-family: Helvetica;
	font-weight: bold;
	top: 493px;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}

.link_pressure-rising {
	position: absolute;
	top: 443px;
	left: 8px;
	width: 190px;
	text-align: left;
	font-family: Helvetica; 
	font-size: 16px;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;	}
	
#pressure{
	background-color: transparent;
	position: relative;	
	display:inline;
	}

#rising{
	background-color: transparent;
	position: relative;	
	display:inline;
	}

#sunrise {	/* time display */
	background-color: transparent;
	position: absolute;
	width: 70px;
	top: 423px;
	left: 34px;
	text-align: left;
	font-size: 16px;
	font-weight: lighter;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#sunriseimg{	/* optional image instead of text */
	position: absolute;
	width: 20px;
	height: 20px;	
	top: 425px;
	left: 7px;
	z-index: 51;
	opacity: 1.0; /* Set to 0.0 if your using text instead of an image */
	z-index: 61;
	}	
	
#sunrisetext{
	background-color: transparent;
	width: 70px;
	text-align: left;
	top: 438px;
	left:7px;
	font-family: Helvetica;
	font-size: 13px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	text-transform: none;
	z-index: 61;
	opacity: 0.0; /* Set to 0.0 if your using images instead of text */
	}	
	
#sunset {	/* time display */
	background-color: transparent;
	position: absolute;
	width: 70px;
	top: 423px;
	right: 34px;
	text-align: right;
	font-size: 16px;
	font-weight: lighter;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}
	
#sunsetimg{		/* optional image instead of text */
	position: absolute;
	width: 20px;
	height: 20px;	
	top: 425px;
	right: 7px;
	z-index: 61;
	opacity: 1.0; /* Set to 0.0 if your using text instead of an image */
	}	
	
#sunsettext{
	background-color: transparent;
	width: 70px;
	text-align: right;
	top: 65px;
	right: 7px;
	font-family: Helvetica;
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	text-transform: none;
	z-index: 61;
	opacity: 0.0; /* Set to 0.0 if your using images instead of text */
	}	
	
#temp{
	position: absolute;
	background-color: transparent;
	top: 458px;
	right: 47px;
	width: 70px;
	text-align: right;	
	font-family: Helvetica;
	font-size: 55px;
	font-weight: 200;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
	opacity: 1.0;
	}		

#tiret{
	background-color: transparent; /*Used as a seperator between hi/lo temperatures if Hi/Lo text is not used.*/
	position: absolute;
	font-size: 14px;
	top: 122px;
	right: 63px;	
	font-family: Helvetica;
	font-weight: normal;
	color: #fff;
	text-shadow: black 0px 0px 3px;
	z-index: 61;
	opacity: 0.0;
	}
	
#visibility{
	background-color: transparent;
	position: absolute;
	top: 464px;
	left: 8px;
	text-align: left;
	width: 1500px;
	height: 13px;
	font-family: font-family: Helvetica;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	font-size: 16px;
	z-index: 61;
	opacity: 1.0;
	}

#wind{
	background-color: transparent;
	position: absolute;
	font-family: Helvetica; 
	top: 464px;
	right: 8px;
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 61;
    opacity: 1.0;
	}

	/* ARC SUN & MOON (alphabetical order)
=================================================== */


#arcmoon{
	background:url('../../Images/Weather/moon/moon.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -140px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 25;
	opacity: 0.0;
	display: none;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: sun_moon_fadein 3s;
	-webkit-animation-fill-mode: forwards;
	}
	
#arcmoonray{
	background:url('../../Images/Weather/moon/moonray.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -140px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: sunray_moonray_shine 15s linear infinite normal;
	-webkit-animation-delay:5s;	      
	}
	
#arcsun{
	background:url('../../Images/Weather/sun/sun.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -140px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 25;
	opacity: 0.0;
	display: none;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: sun_moon_fadein 3s;
	-webkit-animation-fill-mode: forwards;
	}
	
#arcsunray{
	background:url('../../Images/Weather/sun/sunray.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -140px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: sunray_moonray_shine 15s linear infinite normal;
	-webkit-animation-delay:5s;	
	}	
	
#arcsunray1{
	background:url('../../Images/Weather/sun/sunray1.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: sunray_anim1 20s linear infinite normal;
}
@-webkit-keyframes sunray_anim1 {
		0% { opacity : 0; -webkit-transform : scale(0.5, 0.5) translateZ(0); }
		50% { opacity : 0.6; -webkit-transform : scale(1.0, 1.0) translateZ(0); }
		90% { opacity : 0.3; }
		100% { opacity : 0; -webkit-transform : scale(1.5, 1.5) translateZ(0); }
}


	/* STANDARD SUN & MOON (alphabetical order)
=================================================== */


#moon{
	background:url('../../Images/Weather/moon/moon.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 25;
	opacity: 0.0;
	display: none;
	-webkit-animation: sun_moon_fadein 3s;
	-webkit-animation-fill-mode: forwards;
	}
	
#moonray{
	background:url('../../Images/Weather/moon/moonray.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-animation: sunray_moonray_shine 15s linear infinite normal;
	-webkit-animation-delay:5s;	      
	}
	
#sun{
	background:url('../../Images/Weather/sun/sun.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 25;
	opacity: 0.0;
	display: none;
	-webkit-animation: sun_moon_fadein 3s;
	-webkit-animation-fill-mode: forwards;
	}
	
#sunray{
	background:url('../../Images/Weather/sun/sunray.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-animation: sunray_moonray_shine 15s linear infinite normal;
	-webkit-animation-delay:5s;	
	}	
	
#sunray1{
	background:url('../../Images/Weather/sun/sunray1.png') center no-repeat;
	background-size: 600px 600px;
	background-color: transparent;
    position: absolute;
    top: -270px;
	left: -300px;
    width: 600px;
    height: 600px;
	margin : auto 0;
    z-index: 21;
	opacity: 0.0;
	display: none;
	-webkit-animation: sunray_anim1 20s linear infinite normal;
	-webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes sunray_anim1 {
		0% { opacity : 0; -webkit-transform : scale(0.5, 0.5) translateZ(0); }
		50% { opacity : 0.6; -webkit-transform : scale(1.0, 1.0) translateZ(0); }
		90% { opacity : .0; }
		100% { opacity : 0; -webkit-transform : scale(1.5, 1.5) translateZ(0); }
}


	/* 4 DAY FORECAST
=================================================== */

#TouchForecast {
	position: absolute;
	width: 320px;
	height: 568px;
	top: 0px;
	left: 0px;
	z-index: 70;
 -webkit-transition : all 0.75s ease-in-out;}


 /*
 
 
 
 #forecastInfo {
    background-color: transparent;
	position: absolute;
	top: 205px;
	left: 0px;
	width : 320px;
	height: 100px;
	z-index: 70;
	opacity : 0.0;
	-webkit-animation: forecast_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
}

#Day1, #Day2, #Day3, #Day4 {
	position: relative;
	top: -10px;
	width : 80px;
	font-weight:normal;
	text-shadow: 0px 0px 1px black;
	color: #d9e0b9;
	text-shadow: Black -2px 2px 2px;
	font-family: Helvetica;
	font-size:14px;
}

#Day1Icon, #Day2Icon, #Day3Icon, #Day4Icon {
	position: relative;
	top: -5px;
	width: 50px;
	height: 50px;
	z-index: 70;
}

#Day1HiLo, #Day2HiLo, #Day3HiLo, #Day4HiLo {
	position: relative;
	top: -9px;
	width: 80px;
	color: #d9e0b9;
	text-shadow: Black -2px 2px 2px;
	font-family: Helvetica;
	font-size:14px;
}





*/

	/* ANALOG CLOCK (alphabetical order)
=================================================== */	


#analogclock{	/*  Container */

	opacity: 1.0;  /* Change the opacity to 0 to hide the clock */
	}
	
#bigsechand {
	background: url('../../Images/clockhands/bigsechand.png') 12.5px 33.5px no-repeat;
	position: absolute;
	width: 50px;
	height: 220px;
	background-size:25px 110px;
	top: 15px;
	left: 135px;
	z-index: 85;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}	
	
#clockface{
	background: url('../../Images/clockface/TransClock.png') center no-repeat;
	background-size: 320px 480px;
	width: 320px;
    height: 480px;
	position: absolute; 
	top: -10px; 
	right: 0px; 
	left: 0px;
	z-index: 80;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}
	
#clockglass{
	background: url('../../Images/clockface/clock_glass.png') center no-repeat;
	background-size: 320px 480px;
	width: 320px;
    height: 480px;
	position: absolute; 
	top: -10px; 
	right: 0px; 
	left: 0px;
	z-index: 88;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;	
	}	
	
#hourhand {
	background: url('../../Images/clockhands/hourhand.png') 12.5px 33.5px no-repeat;
	position: absolute;
	width: 50px;
	height: 220px;
	background-size:25px 110px;
	top: 15px;
	left: 135px;
	z-index: 83;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#minhand {
	background: url('../../Images/clockhands/minhand.png') 12.5px 33.5px no-repeat;
	position: absolute;
	width: 50px;
	height: 220px;
	background-size:25px 110px;
	top: 15px;
	left: 135px;
	z-index: 84;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#node {
	background: url('../../Images/clockhands/node.png') 12.5px 33.5px no-repeat;
	position: absolute;
	width: 50px;
	height: 220px;
	background-size:25px 110px;
	top: 15px;
	left: 135px;
	z-index: 86;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}	
	
#smallsechand {
	background: url('../../Images/clockhands/smallsechand.png') 12.5px 33.5px no-repeat;
	position: absolute;
	width: 50px;
	height: 220px;
	background-size:25px 110px;
	top: 53px;
	left: 135px;
	z-index: 82;
	-webkit-animation: analog_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
	/* DIGITAL CLOCK
=================================================== */	

	
#Digitalclock{	/*  Container (position the whole clock with this container) */
	background-color : transparent;
	position: absolute;
	text-align:left;
	width: 320px;
	height: 30px;
	top: 17px;  
	left: 8px;		
	z-index: 80;
	opacity: 0.0;
	-webkit-animation: digital_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;			
	}

#clock {
	background-color: transparent;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 40px;
	font-family: Helvetica;
	font-weight: bold;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 80;
	font-size: 25px;
	-webkit-animation: digital_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#ampm{
	background-color: transparent;
	position: absolute;
	text-align: left;
	top: 14px;
	left: 65px;
	width: 25px;
	height: 25px;
	font-family: Helvetica;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 80;
	-webkit-animation: digital_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}

#second{
	background-color: transparent;
	position: absolute;
	text-align:left;
	top: 4px;
	left: 65px;
	width: 25px;
	height: 25px;
	font-family: Helvetica;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	z-index: 80;
	-webkit-animation: digital_clock_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}

	/* DATE
=================================================== */	

	
#calendar{ /* Container */

	opacity: 1.0;  /* Change the opacity to 0 to hide the date on clock */
	}
	
#day{
	position: absolute;
	background-color: transparent;
	width: 320px;
	height: 12px;
	font-family: Helvetica;
	top: 131px;
	text-align: center;
	font-size: 10px;
	z-index: 81;
	color: #fff;
	text-shadow: black 0px -1px 0px;
	-webkit-animation: calendar_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}

#date{
	position: absolute;
	background-color: transparent;
	width: 18px;
	height: 14px;
	font-family: Helvetica;
	top: 121px;
	left: 193px;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	z-index: 81;
	color: #fff;
	text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
	-webkit-animation: calendar_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}

#month{
	position: absolute;
	background-color: transparent;
	width: 320px;
	height: 12px;
	font-family: Helvetica;
	top: 96px;
	text-align: center;
	font-size: 10px;
	z-index: 81;
	color: #fff;
	text-shadow: black 0px -1px 0px;
	-webkit-animation: calendar_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}	
	
#year{
	position: absolute;
	background-color: transparent;
	width: 320px;
	height: 12px;
	font-family: Helvetica;
	top: 108px;
	text-align: center;
	font-size: 10px;
	z-index: 81;
	color: #fff;
/*	display: none;	*/
	text-shadow: black 0px -1px 0px;
	-webkit-animation: calendar_fadein 3s linear 1 normal;
	-webkit-animation-fill-mode: forwards;
	}
	
#SingleLineDate{
position: absolute;
background-color: transparent;
width: 320px;
height: 17px;
font-family: Helvetica;
font-weight: bold;
top: 21px;
right: 8px;
text-align: right;
font-size: 17px;
z-index: 81;
color: #fff;
text-shadow: #131212 0px 1px 0px, #000000 0px 0px 1px, #000000 0px 0px 4px;
-webkit-animation: calendar_fadein 3s linear 1 normal;
-webkit-animation-fill-mode: forwards;
}		

/* END */