<h2>Warp5 Framework</h2>
<p>This template is based on the Warp5 framework. Warp5 is a fast and powerful template framework for Joomla that lets you create sophisticated Joomla templates in no time. It provides a hybrid fluid-pixel grid and all the elaborate functionalities that make our templates easy to edit, nice to look at and super fast, in every browser. Visit the <a href="http://warp.yootheme.com" target="_blank">Warp5 website</a> and take a look at all <a href="http://warp.yootheme.com/features" target="_blank">the features...</a></p>

<div class="floatbox">

	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="margin-right: 15px; padding-left: 60px; background: transparent url(images/yootheme/icon_menusystem.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Menu System</h3>
			<p>The menu system enhances Joomla's menu functions to create clearly arranged interfaces even for comprehensive sites. <a href="http://warp.yootheme.com/menu-system" target="_blank">Learn more...</a></p>
		</div>
	</div>
	
	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="padding-left: 60px; background: transparent url(images/yootheme/icon_modulesystem.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Module System</h3>
			<p>The module system provides a clear grid for Joomla modules and a wide diversity of templates for module variations. <a href="http://warp.yootheme.com/module-system" target="_blank">Learn more...</a></p>
		</div>
	</div>
	
</div>

<hr class="dotted" />

<h2>Design and Styles</h2>
<p>We included a lot of different module and typography styles. So you can give your site a unique look and it will also ease your work when setting up your content.</p>

<div class="floatbox">

	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="margin-right: 15px; padding-left: 60px; background: transparent url(images/yootheme/icon_modulevariations.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Module Variations</h3>
			<p>This template comes with a wide variety of module stylings in many different shapes and colours. Take a look at all the different <a href="index.php?option=com_content&view=article&id=48&Itemid=58">module variations.</a></p>
		</div>
	</div>
	
	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="padding-left: 60px; background: transparent url(images/yootheme/icon_typography.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Typography</h3>
			<p>This templates delivers you sophisticated typography and various stylings. Take a look at the <a href="index.php?option=com_content&view=article&id=46&Itemid=55">style guide</a> about all possible HTML tag styles.</p>
		</div>
	</div>
	
</div>

<hr class="dotted" />

<h2>Installation and Customization</h2>
<p>New to YOOtheme? Don't worry! We provide a lot help to install and cutomize our tempaltes to get you started right away with your web project.</p>

<div class="floatbox">

	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="margin-right: 15px; padding-left: 60px; background: transparent url(images/yootheme/icon_installation.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Installation Package</h3>
			<p>We provide a full Joomla installation package with the demo content of the website for this template. So you can take a look at how everything is set up in the Joomla backend.</p>
			<div class="info">Make sure you click "Install Sample Data" during the installation process.</div>
		</div>
	</div>
	
	<div class="float-left width50">
		<div class="correct-png ie6-zoom" style="padding-left: 60px; background: transparent url(images/yootheme/icon_fireworks.png) no-repeat scroll 0 0;">
			<h3 style="padding-top: 5px; margin-top: 0px;">Sliced Image Source Files</h3>
			<p>The editable fully sliced image source files of this template are available as download. With them you can completely customise your template's look to match your or your client's corporate identity.</p>
			<div class="info">Adobe Fireworks CS3 or higher is required to edit the image source files.</div>
		</div>
	</div>
	
</div>

<hr class="dotted" />

<h2>Compatibility</h2>

<p>This template is fully compatible with all YOOtheme products like the <a target="_blank" href="http://tools.yootheme.com/">YOOtools</a>, the <a target="_blank" href="http://zoo.yootheme.com/">ZOO</a> and the <a target="_blank" href="http://teamlog.yootheme.com/">Teamlog extension</a>.</p>

<div class="tip ie6-zoom" style="overflow: hidden;">
	All YOOtools extensions are working right out of the box. Take a look at the demo pages and watch the video tutorials.
	
	<div class="floatbox">
		<div class="float-left width50">
			<ul class="checkbox">
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yooaccordion" title="YOOaccordion">YOOaccordion</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yooaccordion" title="YOOaccordion">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=129&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yoocarousel" title="YOOcarousel">YOOcarousel</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yoocarousel" title="YOOcarousel">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=126&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yoodrawer" title="YOOdrawer">YOOdrawer</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yoodrawer" title="YOOdrawer">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=127&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yooslider" title="YOOslider">YOOslider</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yooslider" title="YOOslider">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=128&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yooscroller" title="YOOscroller">YOOscroller</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yooscroller" title="YOOscroller">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=130&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yoosearch" title="YOOsearch">YOOsearch</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yoosearch" title="YOOsearch">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=134&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yoogallery" title="YOOgallery">YOOgallery</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yoogallery" title="YOOgallery">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=144&Itemid=2" target="_blank">
					<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/></a></li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yoomaps" title="YOOmaps">YOOmaps</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yoomaps" title="YOOmaps">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=132&Itemid=2" target="_blank">
					<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
			</ul>
		</div>
		<div class="float-left width50">
			<ul class="checkbox">
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yootweet" title="YOOtweet">YOOtweet</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yootweet" title="YOOtweet">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yootooltip" title="YOOtooltip">YOOtooltip</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yootooltip" title="YOOtooltip">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=137&Itemid=2" target="_blank">
					<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a></li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/extensions/yootoppanel" title="YOOtoppanel">YOOtoppanel</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/yootoppanel" title="YOOtoppanel">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=135&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/free-stuff/yooeffects" title="YOOeffects">YOOeffects</a>
					<a target="_blank" href="http://tools.yootheme.com/free-stuff/yooeffects" title="YOOeffects">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/free-stuff/yoologin" title="YOOlogin">YOOlogin</a>
					<a target="_blank" href="http://tools.yootheme.com/free-stuff/yoologin" title="YOOlogin">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=131&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/free-stuff/yooholidays" title="YOOholidays">YOOholidays</a>
					<a target="_blank" href="http://tools.yootheme.com/extensions/free-stuff" title="YOOholidays">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/free-stuff/yooiecheck" title="YOOiecheck">YOOiecheck</a>
					<a target="_blank" href="http://tools.yootheme.com/free-stuff/yooiecheck" title="YOOiecheck">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
				<li style="margin-bottom: 4px; overflow: hidden;">
					<a style="display: block; float: left; width: 100px;" target="_blank" href="http://tools.yootheme.com/free-stuff/yoosnapshots" title="YOOsnapshots">YOOsnapshots</a>
					<a target="_blank" href="http://tools.yootheme.com/free-stuff/yoosnapshots" title="YOOsnapshots">
						<img class="correct-png" style="margin: 0px 0px 0px 5px" src="images/yootheme/features_demo.png" alt="See the live demo" title="See the live demo" width="17" height="17" align="absmiddle"/>
					</a>
					<a href="http://tutorials.yootheme.com/index.php?option=com_mtree&task=viewlink&link_id=133&Itemid=2" target="_blank">
						<img class="correct-png" style="margin: 0px 0px 0px 3px" src="images/yootheme/features_tutorial.png" alt="Watch the video tutorial" title="Watch the video tutorial" width="17" height="17" align="absmiddle"/>
					</a>
				</li>
			</ul>
		</div>
	</div>
		
</div>

<h2>Basic Help</h2>
<p>Learn more about how to install and set up a YOOtheme template and go to the <a href="http://warp.yootheme.com/documentation" target="_blank" title="How to install and set up a YOOtheme template">Warp5 documentation</a>.</p>