<!-- This is div is required -->
<div id="complete_example"></div>

<!-- place your example between these tags, with correct indentation and whitespace (by default, this serves as user-facing HTML example). -->
<div id="e_example">
	<div id="scrim" class="palm-scrim menu-panel" x-mojo-menupanel-scrim=""></div>
	<div id="palm-header-toggle-menupanel" class="palm-header left" x-mojo-touch-feedback="immediatePersistent">
		Style Matters
	</div>
	<div id="palm-header-spacer" class="palm-header-spacer"></div>
	
	<div id="menu-panel-container">
		
	    <div class="palm-menu-panel" x-mojo-menupanel="">
			<div class="palm-menu-panel-fade-top" x-mojo-scroll-fade="top">
				<div class="palm-menu-panel-fade-top-bg"></div>
				<div class="palm-menu-panel-fade-top-arrow"></div>
			</div>
			<div class="palm-menu-panel-fade-bottom" x-mojo-scroll-fade="bottom">
				<div class="palm-menu-panel-fade-bottom-bg"></div>
				<div class="palm-menu-panel-fade-bottom-arrow"></div>
			</div>
			<div class="palm-menu-panel-wrapper" x-mojo-element="Scroller" id="example-menu-panel">
				
		        <div class="palm-list">
		        	<div class="palm-row first" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
					<div class="palm-row last" x-mojo-touch-feedback="delayed">
						<div class="palm-row-wrapper">
					        <div class="title truncating-text">title</div>
						</div>
					</div>
		        </div>
				
		    </div>
		</div>
	</div>
</div>

<!-- place additional context, explanation or info between these tags -->
<div id="e_about">
	Tap the header
</div>

<!-- leave this blank for default html (above), or place code here to override -->
<div id="e_html">
	
</div>

<!-- list developer-facing css pertinent to this example, between these tags -->
<div id="e_css">

</div>