<template id="SlipJS">
	<style>
		/* these are special */
		.slip-reordering {
			box-shadow: 0 2px 10px rgba(0,0,0,0.45);
		}

		.slip-swiping-container {
			overflow-x: hidden;
		}

		#slippylist li {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			cursor: default;
		}

		/* the rest is junk for the demo page */
		#slippylist li.demo-allow-select {
			padding: 1em;
			line-height: 1.3;
			user-select: text;
			-moz-user-select: text;
			-webkit-user-select: text;
		}
		#slippylist li.demo-allow-select span {
			cursor: text;
		}

		body {
			background: #eee;
			font-family: Helvetica, Arial, sans-serif;
			margin: 0 auto;
			padding: 5px;
		}

		#slippylist {
			clear:left;
			margin: 1em;
			padding: 0 0 1px;
		}

		#slippylist li {
			display:block;
			border: 1px solid black;
			background: white;
			margin: 0; padding: 0 1em;
			border-radius: 3px;
			margin-bottom: -1px;
			max-width: 100%;
			line-height: 3;
			vertical-align: middle;
		}

		#slippylist input {
			vertical-align: middle;
		}

		#slippylist .instant::after {
			content: " =";
		}
		#slippylist .instant {
			float: right;
		}

		.skewed {
			transform: rotate(2deg) scale(0.99);
			-webkit-transform: rotate(2deg) scale(0.99);
		}

		.demo-no-swipe.demo-no-reorder {
			opacity: 0.5;
		}

		h1, h2 {
			color: #666;
		}
		h1 {
			float:left; margin-top: 0; margin-right: 1ex;
		}
		h1+p {
			overflow:auto; margin-top: 0.2em;
		}
	</style>
	<div class="$-{this.cssClasses}" id="$-{this.id}">
		<ol id="slippylist" tabindex="0" aria-role="listbox">
<!--
			<li class="demo-no-reorder" aria-role="option" tabindex="-1">Swipe,</li>
			<li class="demo-no-swipe" aria-role="option" tabindex="-1">hold &amp; reorder <span class="instant">or instantly</span></li>
			<li aria-role="option" tabindex="-1">or either</li>
			<li class="demo-no-swipe demo-no-reorder" aria-role="option" tabindex="-1">or none of them.</li>
			<li aria-role="option" tabindex="-1">Can play nicely with:</li>
			<li aria-role="option" tabindex="-1">interaction <input type="range"></li>
			<li style="transform: scaleX(0.97) skewX(-10deg); -webkit-transform: scaleX(0.97) skewX(-10deg)" aria-role="option" tabindex="-1">inline CSS transforms</li>
			<li class="skewed" aria-role="option" tabindex="-1">stylesheet transforms</li>
			<li class="demo-allow-select" aria-role="option" tabindex="-1"><span class="demo-no-reorder">and selectable text, even though animating elements with selected text is a bit weird.</span></li>
			<li aria-role="option" tabindex="-1">iOS Safari</li>
			<li aria-role="option" tabindex="-1">Mobile Chrome</li>
			<li aria-role="option" tabindex="-1">Android Firefox</li>
			<li aria-role="option" tabindex="-1">Opera Presto and Blink</li>
			<li aria-role="option" tabindex="-1">No dependencies</li>
-->
			${this.content}
		</ol>
	</div>
</template>

