<div id="dog_spacer">
	
</div>
<div id="scrollerContainer">

<!-- The scroll-fades indicate elements that are conditionally laid against the edges of the scroll
	area to indicate that there is more content in that direction. They're hidden when there is
	no more room to scroll in that direction.
	
	In this example they are thin colored bars
	-->
	<div id='left' x-mojo-scroll-fade='left' class="scroll-example-left"></div>
	<div id='right' x-mojo-scroll-fade='right' class="scroll-example-right"></div>   
	<div id='top' x-mojo-scroll-fade='top' class="scroll-example-top"></div>
	<div id='bottom' x-mojo-scroll-fade='bottom' class="scroll-example-bottom"></div>   


	<div id="two_dogs" x-mojo-element="Scroller">
		<div id="scrolling_contents">

		</div>
	</div>	
</div>

<div id='scroll_mode_group' class="palm-group unlabeled">
	<div class="palm-list">
		<div class="palm-row first">
			<div class="palm-row-wrapper">
				<div id="modeSelector" x-mojo-element="ListSelector"></div>
			</div>
		</div>
		<div class="palm-row">
			<div class="palm-row-wrapper">
				<div id="weightSelector" x-mojo-element="ListSelector"></div>
			</div>
		</div>
		<div class="palm-row last">
			<div class="palm-row-wrapper">
				<div id="frictionSelector" x-mojo-element="ListSelector"></div>
			</div>
		</div>
	</div>
</div>