<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="/transform-1-0.xsl"?>
<gabml xml:lang="en" lang="en">
	<head>
		<base href="http://www.wilduniverse.org/" />
		<title>Wild Universe Productions</title>
		<meta name="description" content="Wild Universe is a music label and propose some high quality music from many talented artists. Our goal is to promote copyright-free music and help our bands to gain visibility and to earn money for their music." />
		<meta http-equiv="Content-Language" content="en" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

		<link rel="stylesheet" type="text/css" title="Wild blue" media="screen" href="main.css" />
		<link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Spinnaker' rel='stylesheet' type='text/css' />
		<style type="text/css">

			body {
				font-family: sans-serif;
			}

			p, span {
				font-family: 'Spinnaker', sans-serif;
			}

			h1, h2, h3, h4, #leftpanel ul li {
				font-family: 'Gruppo', sans-serif;
			}

		</style>


		<!-- Helps IE prior to version 9 to render CSS as it should -->
		<!--[if lt IE 7]>
		<style type="text/css">
			#header {
				height: 144px;
				width: 1024px;
			}

			#header h1 {
				width: 340px;
				height: 115px;
				position: relative;
				left: 342px;
				top: 15px;
			}
		</style>
		<![endif]-->
		<!--[if lt IE 9]>
		<style type="text/css">
			.boxshadow {
				filter:progid:DXImageTransform.Microsoft.Shadow(color='#060612', Direction=135, Strength=8);
				zoom: 1;
			}
		</style>
		<script src="scripts/IE9.js" type="text/javascript">IE7_PNG_SUFFIX=".png";</script>
		<![endif]-->

		<script type="text/javascript">
		//<![CDATA[

			//a function to get an element by its id regardless of the browser used
			function getElementByIdUniversal(id)
			{
				var elem;
				if(document.getElementById)
				{
					elem = document.getElementById( id );
				}
				else
				{
					elem = document.all[ id ];
				}
				return elem;
			}

			//register the header event handlers
			function registerEventHandler()
			{
				var elem = getElementByIdUniversal( "header" );
				if(elem)
				{
					elem.onclick     = clickevent;
					elem.onmouseover = mouseoverevent;
					elem.onmouseout  = mouseoutevent;
				}
			}

			function clickevent(e) //fired when the header is clicked
			{
				window.location="/home";
			}

			function mouseoverevent(e) //fired when the header is mouseovered
			{
				var elem = getElementByIdUniversal( "header" );
				if(elem)
				{
					elem.style.cursor="pointer";
				}
			}

			function mouseoutevent(e) //fired when the header is mouseouted
			{
				var elem = getElementByIdUniversal( "header" );
				if(elem)
				{
					elem.style.cursor="default";
				}
			}

			//start the move of the background image
			var bgheight;
			var offset;
			var elemHeader;
			var timerid;

			function movebg()
			{
				bgheight = 768;
				offset = bgheight;
				elemHeader = getElementByIdUniversal( "header" );

				timerid = setInterval ( "dowork()", 100 );
			}

			//move the background image in an infinite loop
			function dowork()
			{
				offset = (offset < 1) ? offset + (bgheight - 1) : offset - 1;
				elemHeader.style.backgroundPosition = "100% " + offset + "px";
			}


		//]]>
		</script>

		<meta name="google-site-verification" content="410MGV18y1gFUJGiC89D9BdQzftCAipc485dRLYkj2U" />

	</head>
	<body>

		<!--start of canvas -->
		<div id="canvas">

			<!--start of header -->
			<div id="header">
				<span class="banner-top-left-gradient">&#xA0;</span>
				<h1>Wild Universe</h1>
				<span class="banner-top-right-gradient">&#xA0;</span>
			</div>
			<!--end of header -->

			<!--start of leftpanel -->
			<div id="leftpanel">
				<ul class="boxshadow">
					<li><a href="home">Home</a></li>
					<li><a href="news">News</a></li>
					<li><a href="bands">Bands</a></li>
					<li><a href="albums">Albums</a></li>
					<li><a href="comingsoon">Coming soon</a></li>
					<li><a href="aboutus">About us</a></li>
					<li><a href="coollinks">Cool links</a></li>
					<li><a href="contact">Contact</a></li>
				</ul>

				<!--start of almostreleased -->
				<div id="almostreleased" class="boxshadow">
					<h2>Almost released</h2>

					
<div class="rightpanelalbum">
	<h3><a href="album/3">Windpearl</a></h3>
	<h4><a href="album/3">"Fate"</a></h4>
	<a href="album/3"><img src="getimg.php?type=album&amp;width=150&amp;id=3&amp;field=COVER_FRONT" width="150" alt="Album thumbnail" /></a>
	<p>Not released yet...</p>
	<p><a href="album/3">Read&#xA0;more</a></p>
</div>

				</div>
				<!--end of almostreleased -->

			</div>
			<!--end of leftpanel -->

			<!--start of content -->
			<div id="content">

				<div id="newscadre">
  <h1>News</h1>
  <div class="news boxshadow">
    <h2>2011-10-05</h2>
    <p>The website design has been beautified. Changes:</p>
    <ul>
      <li>Better looking fonts</li>
      <li>Readability tweaks</li>
      <li>Corrected a validation issue</li>
    </ul>
  </div>
  <div class="news boxshadow">
    <h2>2010-09-25</h2>
    <p>The website has been improved. Changes:</p>
    <ul>
      <li>Pictures are no longer stored in the database (interesting experiment, but too heavy for the database server and database was difficult to backup/restore)</li>
      <li>The default picture is less visible, the previous one used to get all the attention of the viewer</li>
      <li>Changed email obfuscation system to a better one</li>
      <li>The website is XML transformed with XSL</li>
      <li>Cross-browser CSS gradient generator (used in the menu for example)</li>
      <li>Added CSS shadows on some boxes</li>
      <li>Tweaked the presentation a little bit</li>
      <li>Removed "(in construction)" from the title</li>
      <li>Added the possibility to have clip in a track page</li>
      <li>URL rewriting tweaked</li>
      <li>Use of IE9.js for older version of IE to display transparent PNG correctly</li>
    </ul>
  </div>
  <div class="news boxshadow">
    <h2>2009-12-11</h2>
    <p>The website is still under heavy construction. Changes:</p>
    <ul>
      <li>Now possible to get pictures from database</li>
      <li>Display a default picture when the picture doesn't exist</li>
      <li>Added artists list</li>
      <li>Added artist page</li>
      <li>Added albums list</li>
      <li>Added album page</li>
      <li>Added a "Coming soon" section</li>
      <li>Tweaked stylesheet</li>
      <li>Artist email is displayed in a picture to prevent spam</li>
      <li>URL rewriting</li>
    </ul>
  </div>
</div>
			</div>
			<!--end of content -->

			<!--start of rightpanel -->
			<div id="rightpanel">

				<!--start of newreleases -->
				<div id="newreleases" class="boxshadow">
					<h2>New releases</h2>

					
<div class="rightpanelalbum">
	<h3><a href="album/2">Windpearl</a></h3>
	<h4><a href="album/2">"Mother Earth"</a></h4>
	<a href="album/2"><img src="getimg.php?type=album&amp;width=150&amp;id=2&amp;field=COVER_FRONT" width="150" alt="Album thumbnail" /></a>
	<p>&#34;Mother Earth&#34; is the second album released by Windpearl late 2008.

A few words of the artist:
&#34;While I was in France, I thought that my next album will have Asian sonorities. When I arrived in As...</p>
	<p><a href="album/2">Read&#xA0;more</a></p>
</div>

<div class="rightpanelalbum">
	<h3><a href="album/1">Windpearl</a></h3>
	<h4><a href="album/1">"I love you a bit..."</a></h4>
	<a href="album/1"><img src="getimg.php?type=album&amp;width=150&amp;id=1&amp;field=COVER_FRONT" width="150" alt="Album thumbnail" /></a>
	<p>&#34;I love you a bit...&#34; is the first album of Windpearl released to the public.

Some few words of the artist Gabriel Hautclocq:
&#34;With calm ambient tracks, catchy chip tunes, some experimental hardte...</p>
	<p><a href="album/1">Read&#xA0;more</a></p>
</div>

				</div>
				<!--end of newreleases -->

			</div>
			<!--end of rightpanel -->

		</div>
		<!--end of canvas -->

		<!-- start of footer -->
		<div id="footer">
						<p>Copyright (c) Wild Universe 2009-2012</p>
			<p><a href="sitemap" title="Click here to view the site map.">Site map</a></p>
			<p><a href="http://validator.w3.org/check?uri=referer" title="">Valid GABML 1.0 transformed in XHTML 1.1</a></p>
			<p>Website by <a href="http://www.gabsoftware.com" title="Click here to visit the webmaster website.">GabSoftware</a></p>
			<p>Contact us: <hiddenmail username="&#105;&#x6e;&#x66;&#111;" hostname="&#119;&#105;&#108;&#100;&#117;&#x6e;&#105;&#118;&#x65;&#114;&#115;&#101;" tld="&#111;&#x72;&#x67;" caption="Click here to send us an email" /></p>
		</div>
		<!-- end of footer -->

		<!--[if lt IE 7]>
		<script type="text/javascript">
		//<![CDATA[
			movebg = function() { return false; }; //do not scroll the background with IE prior to 7
		//]]>
		</script>
		<![endif]-->
		<script type="text/javascript">
		//<![CDATA[
			registerEventHandler(); //registers event handlers when the page is loaded
			movebg(); //begins to scroll the header space background
		//]]>
		</script>
	</body>
</gabml>

