---
layout: headerfooter
---
<!--  HERO  -->
<section id="hero" class="light-text">
	<h1>{{ page.title }}</h1>
	<h5>{{ page.abstract }}</h5>
	<div id="vendorStrip" class="light-text">
		<ul>
			<li><a href="#">GUIDES</a></li>
			<li><a href="#">REFERENCE</a></li>
			<li><a href="#">SAMPLES</a></li>
			<li><a href="#">SUPPORT</a></li>
		</ul>
		<input type="text" id="search" placeholder="Search the docs">
		<div class="dropdown">
			<div class="readout"></div>
			<a href="#">Version 1.1</a>
			<a href="#">Version 1.0</a>
		</div>
	</div>
</section>

<section id="encyclopedia">
	<div id="docsToc">
    	{% comment %} assign tree = site.data[page.toc].toc
        {% assign tree = site.data[page.versionfilesafe][page.section].toc %}
		{% include tree.html %}{% endcomment %}
		<!--

		Here's your API ref for this accordion element:

		Each line is class "item". Use the data-title attribute for the text label.
		Use a.item for direct links; use div.item to wrap containers.

		A div.container inside a div.item is a nested accordion. The clickable text which toggles the
		container open/closed is the data-title attribute of the parent div.item.

		-->

		<div class="pi-accordion">
			<a class="item" data-title="Overview" href="path-to-page"></a>

			<div class="item" data-title="Quickstarts">
				<div class="container">
					<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
					<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
					<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
					<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
				</div>
			</div> <!-- /quickstarts -->

			<div class="item" data-title="Running Kubernetes">
				<div class="container">
					<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
					<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
					<div class="item" data-title="Third-level Schtuff">
						<div class="container">
							<a class="item" data-title="Third Level One" href="path-to-page"></a>
							<a class="item" data-title="Third Level Two" href="path-to-page"></a>
							<a class="item" data-title="Third Level Three" href="path-to-page"></a>
							<a class="item" data-title="Third Level Four" href="path-to-page"></a>
						</div>
					</div>
					<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
					<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
				</div>
			</div> <!-- /running kubernetes -->
		</div> <!-- /pi-accordion -->
	</div> <!-- /docsToc -->
	<div id="docsContent">
		{{ content }}
	</div>
</section>