<!-- 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 class="palm-header left" x-mojo-touch-feedback="immediatePersistent">9-tile Images</div>
	<div class="palm-header-spacer"></div>
	
	<div class="palm-group">
		<div class="palm-group-title">About</div>
		<div class="palm-list">
			<div class="palm-text-wrapper">
				<div class="palm-body-text" x-mojo-loc=''>					
					Using -webkit-border-image you can specify an image as the border of a DIV to create visually rich containers, buttons, dividers, etc.   
					
					<center>
						<div style="overflow: hidden; width: 43px; height: 62px; display: inline-block; margin-top: 12px; vertical-align: top;">
							<img src="images/palm-group.png"/> 
						</div>
						<div style="overflow: hidden; width: 51px; height: 50px; display: inline-block; margin-top: 12px; vertical-align: top;">
							<img src="images/palm-menu-button.png"/> 
						</div>
						<div style="overflow: hidden; width: 50px; height: 49px; display: inline-block; margin-top: 12px; vertical-align: top;">
							<img src="images/palm-popup-background.png"/> 
						</div>
					</center>
				</div>
				<div class="palm-body-text" x-mojo-loc=''>					
					Use this technique to create single styles (with small, optimized images) that can accommodate variable length content and stretch horizontally to support any orientation or screen width. 
				</div>
			</div>
		</div>
	</div>
		
	

</div>

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

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

</div>

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

</div>