<div id='loader'><span class='message'>loading</span></div>
<form class="search-form">
	<input class="search-field" type="text" />
</form>

<nav id='menu-ui' class='menu-ui'>
	<ul id='filters' class='side-nav'></ul>
</nav>

<div id="map"></div>

<pre id='output' class='ui-output'></pre>
<!-- <ul id='marker-list'></ul> -->
<input type='button' id='programs' class='button' value='Add programs' name='programs' />

<div id='loader'><span class='message'>loading</span></div>

<!-- <div class='col12 pad4 contain fill-navy dark clip'> -->
	
	<form class="search-form">
		<fieldset class='with-icon'>
			<span class='icon search'></span>
			<input type='text' value='' />
		</fieldset>
	</form>

	<div class='center quiet'>
		<div id="map"></div>
	</div>
	<div class='pin-right pad2'>
    <a href='#menu' class='button stroke'>Menu</a>
  </div>
	<div id='menu' class='col4 pad2 fill-darken1 pin-left offcanvas-left'>
	
		<input type='button' id='programs' class='button stroke loud' value='Add programs' name='programs'/>
		<ul id='filters' class='side-nav'></ul>

		<pre id='output' class='ui-output'></pre>

	</div>
<!-- </div> -->







Change elements to use mapbox css
Change elements to use mapbox css

Search bar uses mapbox class with-icon.  Map div is in center quiet div.  Menu is in pin-right pad div.  Change add programs button to be stroke loud.
