---
layout: headerfooter
---
<!--  HERO  -->
<section id="hero" class="light-text">
	<h1>{{ site.data[page.versionfilesafe][page.section].bigheader }}</h1>
	<h5>{{ site.data[page.versionfilesafe][page.section].abstract }}</h5>
	<div id="vendorStrip" class="light-text">
		<ul>
			<li><a href="/{{ page.version }}/guides">GUIDES</a></li>
			<li><a href="/{{ page.version }}/reference">REFERENCE</a></li>
			<li><a href="/{{ page.version }}/samples">SAMPLES</a></li>
			<li><a href="/{{ page.version }}/support">SUPPORT</a></li>
		</ul>
		<div class="dropdown">
			<div class="readout"></div>
			<a href="/v1.1">Version 1.1</a>
			<a href="/v1.0">Version 1.0</a>
		</div>
		<input type="text" id="search" placeholder="Search the docs">
	</div>
</section>

<section id="encyclopedia">
	<div id="docsToc">
        <div class="pi-accordion">
            {% assign tree = site.data[page.versionfilesafe][page.section].toc %}
            {% include tree.html %}
        </div> <!-- /pi-accordion -->
	</div> <!-- /docsToc -->
	<div id="docsContent">
    	<h1>{{ page.title }}</h1>
		{{ content }}
	</div>
</section>