<style media="screen" type="text/css">
	#activity-spinner {
		margin: 0px auto;
		width: 30px;
	}
</style>

<div class="palm-hasheader" id="groups-main" style="display:none;">
	
	<div x-mojo-element="Spinner" id="large-activity-spinner"></div>

	<div class="palm-list">
		<div class="palm-row first"><div class="palm-row-wrapper">
			<div x-mojo-element="Spinner" id="small-activity-spinner"></div>
			<div class="title">Spinner as sibling to title</div>
		</div></div>
		<div class="palm-row"><div class="palm-row-wrapper">
			<div x-mojo-element="Spinner" id="small-activity-spinner2"></div>
			<div class="title truncating-text">Spinner as sibling to truncating title</div>
		</div></div>		
		<div class="palm-row"><div class="palm-row-wrapper">
			<div class="title">
				<div x-mojo-element="Spinner" id="small-activity-spinner3"></div>
				Spinner inside the title</div>
		</div></div>		
		<div class="palm-row"><div class="palm-row-wrapper textfield-group focused">
			<div x-mojo-element="Spinner" id="small-activity-spinner4"></div>
			<div class="title">Yo Man, this spins!</div>
		</div></div>
		<div class="palm-row last"><div class="palm-row-wrapper textfield-group focused">
			<div class="title">
				<div x-mojo-element="Spinner" id="small-activity-spinner5"></div>
				Spinner inside title</div>
		</div></div>
	</div>


	<table class="palm-list-section-label">
		<tr>
			<td class="left"></td>
			<td class="label">
				Custom
			</td>
			<td class="right"></td>
		</tr>
	</table>

	<div x-mojo-element="Spinner" id="custom-activity-spinner">
	</div>


</div>

<div class="palm-button" id="spinner-on" x-mojo-loc="">Spin On</div>
<div class="palm-button" id="spinner-off" x-mojo-loc="">Spin Off</div>


