<!DOCTYPE html>
<html id="patternlab-html">
<head id="patternlab-head">
	<title id="title">Pattern Lab</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
	<link rel="stylesheet" href="styleguide/css/styleguide-specific.css" media="all" />
	<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css" media="all" />
	<link rel="stylesheet" href="styleguide/css/vendor/prism.css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="styleguide/js/vendor/jquery.js"><\/script>')</script>
</head>
<body  id="patternlab-body">>
	<!--Style Guide Header-->
	<header class="sg-header" role="banner">
		<a href="#sg-nav-container" class="sg-nav-toggle">Menu</a>
		<div class="sg-nav-container" id="sg-nav-container">
			{{> patternNav }}
			{{> ishControls }}
		</div>
	</header>
	<!--End Style Guide Header-->
	
	<!-- Iframe -->
	<div id="sg-vp-wrap">
		<div id="sg-cover"></div>
		<div id="sg-gen-container">
			<iframe id="sg-viewport" sandbox="allow-same-origin allow-scripts"></iframe>
			<div id="sg-rightpull-container">
				<div id="sg-rightpull"></div>
			</div>
		</div>
	</div>
	<!--end iFrame-->

	<!-- the template for the code view slider -->
	<script type="text/html" id="code-template">
		<div id="sg-code-close" class="sg-view-close">
			<a href="#" id="sg-code-close-btn" class="sg-view-close-btn">Close</a>
		</div>
		<div id="sg-code-loader">
			<div class="spinner"></div>
			Loading pattern...
		</div>
		<div id="sg-code-patternstate" style="display: none;">
			<p>
				The state of the <span id="sg-code-patternstate-patternname" class="sg-code-patternname"></span> pattern is: <span id="sg-code-patternstate-fill"></span>
			</p>
		</div>
		<div id="sg-code-lineage" style="display: none;">
			<p>
				The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern contains the following patterns: <span id="sg-code-lineage-fill"></span>
			</p>
		</div>
		<div id="sg-code-lineager" style="display: none;">
			<p>
				The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern is included in the following patterns: <span id="sg-code-lineager-fill"></span>
			</p>
		</div>
		<div id="sg-code-markup">
			<ul id="sg-code-tabs">
				<li id="sg-code-title-html" class="sg-code-title-active">HTML</li>
				<li id="sg-code-title-mustache">Mustache</li>
				<li id="sg-code-title-css" style="display: none;">CSS</li>
			</ul>
			<div class="clear">
				<pre><code id="sg-code-fill"></code></pre>
			</div>
		</div>
	</script>

	<!-- the template for the annotations viewer slider -->
	<script type="text/html" id="annotations-template">
		<div id="sg-annotation-close" class="sg-view-close">
			<a href="#" id="sg-annotation-close-btn" class="sg-view-close-btn">Close</a>
		</div>
		<div id="sg-comments-container"></div>
	</script>

	<script src="styleguide/js/vendor/prism.js"></script>
	<script src="styleguide/js/vendor/jwerty.js"></script>
	<script src="styleguide/js/vendor/typeahead.bundle.min.js"></script>
	<script src="styleguide/js/data-saver.js"></script>
	{{> patternPaths }}
	{{> viewAllPaths }}
	<script src="styleguide/js/url-handler.js"></script>
	<script src="styleguide/js/styleguide.js"></script>
	<script src="styleguide/js/annotations-viewer.js "></script>
	<script src="styleguide/js/code-viewer.js "></script>
	<script src="styleguide/js/pattern-finder.js"></script>

</body>
</html>