<!--sg-controls-->
<div class="sg-controls" id="sg-controls">
		<div class="sg-control-content">
			<ul class="sg-control">
				<li class="sg-size">
					<div class="sg-current-size">
						<form id="sg-form">
							Size <input type="text" class="sg-input sg-size-px" value="---">px / 
							<input type="text" class="sg-input sg-size-em" value="---">em
						</form><!--end #sg-form-->
					</div><!--end #sg-current-size-->
					<ul class="sg-acc-panel sg-size-options">
						<li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li> 
						<li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>
						<li class="sg-quarter"><a href="#" id="sg-size-l">L</a></li>
						<li class="sg-half"><a href="#" id="sg-size-full">Full</a></li>
						<li class="sg-half"><a href="#" id="sg-size-random">Random</a></li>
						<li class="sg-half"><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>
						<li class="sg-half"><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>
						<li class="sg-half">
							<a href="#" class="mode-link sg-acc-handle" id="sg-size-mq" title="Media query values found in stylesheet">MQ</a>
							<ul class="sg-acc-panel sg-right" id="sg-mq">
								{{# mqs }}
									<li><a href="#">{{ . }}</a></li>
								{{/ mqs }}
							</ul>
						</li>
					</ul>
				</li>
				<li class="sg-view">
					<a href="#" class="sg-acc-handle sg-control-trigger sg-icon icon-eye" id="sg-t-toggle"><span class="is-vishidden">View</span></a>
					<ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-view">
						<li><a href="#" class="sg-checkbox" id="sg-t-annotations">Annotations</a></li>
						<li><a href="#" class="sg-checkbox" id="sg-t-code">Code</a></li>
						<li><a href="#" target="_blank" id="sg-raw">Open in New Window</a></li>
					</ul>
				</li>
				<li class="sg-tools">
					<a href="#" class="sg-acc-handle sg-tools-toggle sg-icon icon-cog" id="sg-tools-toggle"><span class="is-vishidden">Tools</span></a>
					<ul class="sg-acc-panel sg-right sg-checklist">
						<li><a href="#" id="navSyncButton" class="sg-checkbox sg-page-follow" data-state="off">Page Follow</a></li>
						<li><a href="#" id="contentSyncButton" class="sg-checkbox sg-auto-reload" data-state="off">Auto-reload</a></li>
						<li><a href="http://pattern-lab.info/docs/" target="_blank">Pattern Lab Documentation</a>
					</ul>
				</li>
			</ul>
			
		</div>
</div>
<!--End #sg-controls-->