<style>

html{
	
	height:100%;
	background:url(noise-background.png);
	
}

body{
	
	height:100%;
	
}

#content-box{
	
	background:#e7e8ee;
	border:6px solid #cccccc;
	border-radius:70px 30px 70px 30px;
	width:300px;
	padding:40px;
	text-align:justify;
	color:black;
	left:10%;
	
}

#logo-container{
	-spark-z-index:5;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgb(155,155,173);
}

#logo{
	
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-70px;
	margin-left:-70px;
	
}

</style>

<div style='width:100%;height:100%;vertical-align:table-middle;text-align:-moz-center;'>

<div id='content-box' style='opacity:0;'>
	CSS Animations use the Element.Animate() function. 
	They can have a callback when they're done and can be used from anywhere - JS, C# etc!
	<br>
	<br>
	Note that defining a sequence of animations like this is now best handled by @keyframes and PowerSlide.
</div>

</div>

<div id='logo-container'>
	<img src='powerUI-logo.png' id='logo'/>
</div>

<script type='text/javascript'>

/*
 Javascript is totally optional - everything it can do, C# can do too (see also UI.document, a static reference)
*/

// Note: These work from C# too. UI.document.getElementById()...
var logo=document.getElementById("logo-container");
var content=document.getElementById("content-box");

function OnChangedColour(animation){
	// You can animate almost anything too!
	
	// Additionally, you can specify how long to accelerate and decelerate for.
	// This produces smoother animations:
	
	// - Accelerate and decelerate for 1 second each.
	content.animate("border-radius:30px",2,1);
	
	// (Or provide a custom "timing function"; either as a CSS value such as "ease-in", or as a path).
	
}

function OnFadedOut(animation){
	
	// Fade it in (its opacity is 0 to start with):
	content.animate("opacity:1",2).finished.then(OnChangedColour);
	
}

function FadeOut(){
	
	// Take 2 seconds to get its opacity to 0, making it totally transparent:
	logo.animate("opacity:0",2).finished.then(OnFadedOut);
	
}

// After a small delay, fade out the logo.
// We'll do this using a timeout and a CSS animation:
setTimeout(FadeOut,3000);

</script>
