<div dojoType="dojox.mobile.ScrollableView" id="mobileSwitches">
	<style>
		.color1 .mblSwitchBgLeft {
			background: -webkit-gradient(linear, left top, left bottom, from(#28B159), to(#75FBAC), color-stop(0.5, #3FEB84), color-stop(0.5, #4CEE8E));
		}
		.color1 .mblSwitchBgRight {
			background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
		}
		.color2 .mblSwitchBgLeft {
			background: -webkit-gradient(linear, left top, left bottom, from(#FF9D00), to(#FFCE80), color-stop(0.5, #FFBB4D), color-stop(0.5, #FFC871));
		}
		.color2 .mblSwitchBgRight {
			background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
		}
		.color1 .mblSwitchKnob,
		.color2 .mblSwitchKnob {
			background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#FAFAFA), color-stop(0.5, #BBBBBB), color-stop(0.5, #CACACA));
		}
		.float {
			float: left;
			margin-right: 10px;
		}
		.bold {
			font-weight: bold;
		}
	</style>

	<div dojoType="dojox.mobile.RoundRect" shadow="true">
		<span class="bold">Default Shape</span><br>
		<div class="float" dojoType="dojox.mobile.Switch" value="off"></div>
		<div dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
	</div>

	<div dojoType="dojox.mobile.RoundRect" shadow="true">
		<span class="bold">Round Shape 1</span><br>
		<div class="mblSwRoundShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
		<div class="mblSwRoundShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
	</div>

	<div dojoType="dojox.mobile.RoundRect" shadow="true">
		<span class="bold">Round Shape 2</span><br>
		<div class="mblSwRoundShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
		<div class="mblSwRoundShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
	</div>

	<div dojoType="dojox.mobile.RoundRect" shadow="true">
		<span class="bold">Arc Shape 1</span><br>
		<div class="mblSwArcShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
		<div class="mblSwArcShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
	</div>

	<div dojoType="dojox.mobile.RoundRect" shadow="true">
		<span class="bold">Arc Shape 2</span><br>
		<div class="mblSwArcShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
		<div class="mblSwArcShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
	</div>
</div>
