		<!-- Style Guide Main Content -->
		<div class="sg-main" role="main">
			
			<!-- Patterns -->
			<div id="sg-patterns">
				{{# partials }}
					<div id="{{ patternPartial }}" class="sg-pattern">
						<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></h2>
						<div class="sg-pattern-body">
							{{{ patternPartialCode }}}
							<div class="sg-code" style="display: none">
								{{# patternLineageExists }}
									<div class="sg-code-contains">
										This pattern contains: 
										{{# patternLineages }}
											<a href="{{ lineagePath }}"><code>{{ lineagePattern }}</code><a>
										{{/ patternLineages }}
									</div>
								{{/ patternLineageExists }}
								<h3 class="sg-code-head">HTML</h3>
								<pre class="sg-code-html">
									<code>
										{{{ patternPartialCodeE }}}
									</code>
								</pre>
								{{# patternCSSExists }}
									<h3 class="sg-code-head">CSS</h3>
									<pre class="sg-code-css">
										<code>
											{{ patternCSS }}
										</code>
									</pre>
								{{/ patternCSSExists }}
							</div>
						</div>
					</div>
				{{/ partials }}
			</div> <!--end #sg-patterns-->
			
		</div><!--End Style Guide Main Content-->

		<!-- JS to hook everything together and do annotations -->
		<script>
			// handle injection of items from PHP
			var patternPartial = "";
			var lineage = "";
		</script>
