<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">
	
	<table class="palm-divider labeled"><tbody>
		<tr>
			<td class="left"></td>
			<td class="label">Color Values</td>
			<td class="right"></td>
		</tr>
	</tbody></table>
	
	<div class="palm-text-wrapper">
		<div class="palm-body-text" style="line-height:1.5em;" x-mojo-loc=''>
			These are the values for <em>color</em> properties supported:
			<div style="color:navy">Keywords (Navy)</div>
			<div style="color:#000080">Hex (#000080)</div>
			<div style="color:rgb(0,0,128)">RGB (0, 0, 128)</div>
			<div style="color:rgba(0,0,128,.5)">RGBA (0, 0, 128, 0.5)</div>
			<div style="color:hsl(240,100%,25%)">HSL (240, 100%, 25%)</div>
			<div style="color:hsla(240,100%,25%,.5)">HSLA (240, 100%, 25%, 0.5)</div>
		</div>
	</div>
	
	<table class="palm-divider labeled"><tbody>
		<tr>
			<td class="left"></td>
			<td class="label">Effects on Text</td>
			<td class="right"></td>
		</tr>
	</tbody></table>
	
	<div class="palm-text-wrapper">
		
		<div class="palm-body-text" style="line-height:1.5em;" x-mojo-loc=''>
			<div style="opacity:.5;">Opacity (0.5)</div>
			<div style="text-shadow: 2px 2px 2px #666">Text Shadow</div>
			<div style="text-shadow: 3px 3px 2px red, -3px -3px 2px green">Text Shadow with 2 colors</div>
			<div style="white-space:nowrap; text-overflow: ellipsis; width: 280px; overflow: hidden;">White-space Nowrap with Text Overflow Ellipsis</div>
			<div style="white-space:nowrap; text-overflow: clip; width: 280px; overflow: hidden;">White-space Nowrap with Text Overflow Clip</div>
			<div style="white-space:nowrap; overflow-x:-webkit-marquee;-webkit-marquee-repetition:5">Marquee (5x)</div>
			<div style="-webkit-text-stroke: 1px purple; -webkit-text-fill-color: white; font-size:1.75em;font-weight:bold;line-height:1.2em;">Text Stroke and Fill</div>
			<div style="-webkit-font-smoothing:none;">Font-smoothing none</div>
			<div style="-webkit-font-smoothing:antialiased;">Font-smoothing antialiased</div>
			<div style="-webkit-font-smoothing:auto;">Font-smoothing auto</div>
		</div>
	</div>	
		
	<table class="palm-divider labeled"><tbody>
		<tr>
			<td class="left"></td>
			<td class="label">Effects on Other Elements</td>
			<td class="right"></td>
		</tr>
	</tbody></table>
	
	<div class="palm-text-wrapper">
		
		<div class="palm-body-text" x-mojo-loc=''>
			<div style="background-color: olive; color: #fff; width: 240px; padding: 10px; border-radius: 10px;">Border Radius 10px</div>
			<div style="background-color: maroon; color: #fff; width: 240px; padding: 10px; border-top-left-radius:1.5em; border-top-right-radius:1.5em; margin-top:.5em">Border Radius TL / TR 1.5em</div>
			<div style="background-color: maroon; color: #fff; width: 220px; padding: 10px; -webkit-border-top-left-radius:1.5em; -webkit-border-top-right-radius:1.5em; margin-top:.5em; zoom:1.25">Zoom (1.25)</div>
			<div style="-webkit-box-shadow: 3px 4px 8px rgba(0,0,0,.6); width: 240px; padding:5px; margin-top:.5em">Box Shadow</div>
			<div style="with:300px;height:300px;background: url(images/paint-texture-tile-thumb_medium.jpg) no-repeat, url(images/backdrop-stones.png) no-repeat, 0% 0%; margin-top:.8em">Multiple Background</div>
		</div>
		
	</div>	
</div>

<div id="e_about">
	
</div>

<div id="e_html">
<div class="foo">text</div> ...
</div>

<div id="e_css">
.opacity {
	opacity: .5;
}
.text-shadow {
	text-shadow: 2px 2px 2px #666;
}
.text-shadow2 {
	text-shadow: 3px 3px 2px red, -3px -3px 2px green;
}
.ellipsis {	
	width: 280px;
	white-space: nowrap; 
	text-overflow: ellipsis;  
	overflow: hidden;
}
.clip {
	width: 280px;
	white-space: nowrap; 
	text-overflow: clip; 
	overflow: hidden;
}
.marquee {
	white-space: nowrap; 
	overflow-x: -webkit-marquee;
	-webkit-marquee-repetition: 5
}
.stroke-fill {
	-webkit-text-stroke: 1px purple; 
	-webkit-text-fill-color: white; 
}
.font-smooth {
	-webkit-font-smoothing: antialiased;
}
.font-jaggy {
	-webkit-font-smoothing: none;
}

.round-corner {
	background-color: olive; 
	color: #fff; 
	width: 240px; 
	padding: 10px; 
	border-radius: 10px;
}
.round-corner2 {
	...
	border-top-left-radius: 1.5em; 
	border-top-right-radius: 1.5em; 
}
.zoom {
	zoom: 1.25;
}
.box-shadow {
	width: 240px; 
	padding:5px;
	-webkit-box-shadow: 3px 4px 8px rgba(0,0,0,.6); 
}
.multi-bkgd {
	background: url(images/bkgd-blue.jpg) no-repeat, url(images/bkgd-stones.png) no-repeat, 0% 0%; 
}
</div>