<!-- Time for a little CSS! -->
<style type='text/css'>

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

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

</style>

<!-- The PowerUI logo off to the right. We're using direct style here (and a shortcut for vertical aligning). -->
<div style='vertical-align:table-middle;right:10%;width:140px;height:100%;position:fixed;'>
	
	<!-- The logo itself. -->
	<img src='powerUI-logo.png'/>

</div>

<!-- The rounded box containing the welcome info. Gets its style from the CSS above. -->
<div id='content-box'>
		<b>Loonim</b>
		<br>
		<br>
		Here's a more advanced Loonim image - it looks like some kind of interesting wallpaper. Note that on some platforms you may need to <a href='https://powerui.kulestar.com/wiki/index.php?title=Loonim#HDR' target='_blank'>turn off HDR</a>.
		<br>
		<br>
		Slide the values around in the inspector to see Loonim in action!
		<br>
		<br>
		<center>
			<img id='loonim-image'/>
		</center>
		<br>
		<br>
		<a href='https://powerui.kulestar.com/Images/dev/Loonim-Reference.png' target='_blank'>Reference image</a>
</div>