diff --git a/.gitignore b/.gitignore
index eb930b20a..48b4a201c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,10 @@ less/fuelux-no-namespace.less
 dev/dev.html
 
 # screenshots
-page-at-timeout-*
\ No newline at end of file
+page-at-timeout-*
+
+# dev css and maps
+dist/css/fuelux-dev.css
+dist/css/fuelux-dev.css.map
+dist/css/fuelux-fuelux-no-namespace.css.map
+
diff --git a/Gruntfile.js b/Gruntfile.js
index acf72a47a..21beac140 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -274,6 +274,30 @@ module.exports = function (grunt) {
 			}
 		},
 		less: {
+			pre: {
+				options: {
+					strictMath: true,
+					sourceMap: true,
+					outputSourceFiles: true,
+					sourceMapURL: '<%= pkg.name %>-fuelux-no-namespace.css.map',
+					sourceMapFilename: 'dist/css/<%= pkg.name %>-fuelux-no-namespace.css.map'
+				},
+				files: {
+					'less/fuelux-no-namespace.less': 'less/fuelux.less'
+				}
+			},
+			dev: {
+				options: {
+					strictMath: true,
+					sourceMap: true,
+					outputSourceFiles: true,
+					sourceMapURL: '<%= pkg.name %>-dev.css.map',
+					sourceMapFilename: 'dist/css/<%= pkg.name %>-dev.css.map'
+				},
+				files: {
+					'dist/css/fuelux-dev.css': 'less/fuelux.less'
+				}
+			},
 			dist: {
 				options: {
 					strictMath: true,
@@ -283,10 +307,10 @@ module.exports = function (grunt) {
 					sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
 				},
 				files: {
-					'less/fuelux-no-namespace.less': 'less/fuelux.less',
 					'dist/css/fuelux.css': 'less/fuelux-namespace.less'
 				}
 			},
+
 			minify: {
 				options: {
 					cleancss: true,
@@ -296,7 +320,8 @@ module.exports = function (grunt) {
 				files: {
 					'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css'
 				}
-			},
+			}
+
 		},
 		prompt: {
 			bump: {
@@ -430,6 +455,7 @@ module.exports = function (grunt) {
 				},
 				stoponerror: true,
 				relaxerror: [//ignores these errors
+					'Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.',
 					'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
 					'Element head is missing a required instance of child element title.'
 				],
@@ -459,12 +485,19 @@ module.exports = function (grunt) {
 			},
 			//only watch and dist less, useful when doing LESS/CSS work
 			less: {
-				files: ['fonts/**', 'less/**'],
+				files: ['fonts/**', 'less/**', '!less/fuelux-no-namespace.less'],
 				options: {
 					livereload: isLivereloadEnabled
 				},
 				tasks: ['distcss']
 			},
+			cssdev: {
+				files: ['Gruntfile.js', 'less/**', 'index.html', 'index-dev.html', 'dev.html', '!less/fuelux-no-namespace.less'],
+				options: {
+					livereload: isLivereloadEnabled
+				},
+				tasks: ['distcssdev']
+			},
 			//watch things that need compiled, useful for debugging/developing against dist
 			dist: {
 				files: ['fonts/**', 'js/**', 'less/**'],
@@ -499,6 +532,10 @@ module.exports = function (grunt) {
 	// CSS distribution task
 	grunt.registerTask('distcss', 'Compile LESS into CSS', ['less', 'usebanner', 'delete-temp-less-file']);
 
+	// CSS distribution task (dev)
+	grunt.registerTask('distcssdev', 'Compile LESS into the dev CSS', ['less:pre', 'less:dev', 'delete-temp-less-file']);
+
+
 	// Temporary LESS file deletion task
 	grunt.registerTask('delete-temp-less-file', 'Delete the temporary LESS file created during the build process', function () {
 		var options = {
@@ -591,7 +628,7 @@ module.exports = function (grunt) {
 		grunt.task.run(tasks);
 	});
 
-	// default serve task that runs tests and builds and tests dist by default (~20s).
+	// serve task that runs tests and builds and tests dist by default (~20s).
 	grunt.registerTask('serveslow', 'Serve files. Run all tests. Does not build. (~20s)', function () {
 		var tasks = ['connect:server', 'test', 'watch:source'];
 		grunt.task.run(tasks);
@@ -627,6 +664,14 @@ module.exports = function (grunt) {
 		grunt.task.run(['connect:server', 'watch:less']);
 	});
 
+	// Complies the less files into the -dev versions, does not overwrite the main css files.
+	grunt.registerTask('servedev', 'Serve the files with no "dist" build or tests. Optional --no-less to also disable compiling less into css.', function() {
+		if (! grunt.option('no-less') ) {
+			grunt.task.run(['distcssdev']);
+		}
+		grunt.task.run(['connect:server', 'watch:cssdev']);
+	});
+
 	// same as `grunt serve` but tests default to being off
 	grunt.registerTask('servedist', 'Compile and serve everything, pass --test to run tests. (~7s)', function () {
 		grunt.task.run(['dist']);
diff --git a/index.css b/index.css
index 955d1a18d..3122aaa6b 100644
--- a/index.css
+++ b/index.css
@@ -16,7 +16,15 @@
 }
 
 #mainWrapper {
-	padding-bottom: 40px;
+	padding-bottom: 1.5rem;
+}
+
+#mainWrapper section {
+	padding-bottom: 1.5rem;
+}
+
+#mainWrapper section section {
+	padding-bottom: 1.5rem;
 }
 
 #myInfiniteScroll1, #myInfiniteScroll2 {
diff --git a/index.html b/index.html
index b2c942813..1b4a6a68e 100644
--- a/index.html
+++ b/index.html
@@ -47,579 +47,358 @@
 </head>
 <body>
 	<div class="container" id="mainWrapper">
-		<h2 id="checkbox">Checkboxes</h2>
-		<div class="thin-box">
-			<!--Block-level Checkboxes-->
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
-					<input class="sr-only" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox unchecked on page load</span>
-				</label>
-			</div>
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox2">
-					<input checked="checked" class="checked sr-only" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox checked on page load</span>
-				</label>
-			</div>
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox3">
-					<input class="sr-only" disabled="disabled" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox disabled and unchecked on page load</span>
-				</label>
-			</div>
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox4">
-					<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox disabled and checked on page load</span>
-				</label>
-			</div>
+		<section id="checkboxes">
+			<h2>Checkboxes</h2>
+			<div class="thin-box">
 
-			<br/>
-			<!--Inline checkboxes-->
-			<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox1">
-				<input checked="checked" class="checked sr-only" type="checkbox" value=""> <span class="checkbox-label">1, 2, buckle my shoe</span>
-			</label>
-			<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox2">
-				<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">3, 4, shut the door</span>
-			</label>
-			<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox3">
-				<input class="sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">5, 6, pick up sticks</span>
-			</label>
-			<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox4">
-				<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">7, 8, lay them straight</span>
-			</label>
-
-			<br/><br/>
-			<!--Toggling capability-->
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">
-					<input class="sr-only" data-toggle=".checkboxToggle" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox toggles by class</span>
-				</label>
-			</div>
-			<div class="checkbox">
-				<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox2">
-					<input class="sr-only" data-toggle="#checkboxToggle" type="checkbox" value="">
-					<span class="checkbox-label">Custom checkbox toggles by id</span>
-				</label>
-			</div>
+				<section id="checkboxes-block">
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
+							<input class="sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox unchecked on page load</span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox2">
+							<input checked="checked" class="checked sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox checked on page load</span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox3">
+							<input class="sr-only" disabled="disabled" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox disabled and unchecked on page load</span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox4">
+							<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox disabled and checked on page load</span>
+						</label>
+					</div>
+				</section>
 
-			<div aria-hidden="true" class="checkboxToggle alert alert-warning hide">This message's visibility toggles by class with a checkbox above.</div>
-			<div aria-hidden="true" class="checkboxToggle alert alert-success hide">This message's visibility toggles by class with a checkbox above.</div>
-			<div aria-hidden="true" class="alert alert-info hide" id="checkboxToggle">This message's visibility toggles by id with a checkbox above.</div>
 
-			<br/>
-			<!--Highlight capability-->
-			<div class="checkbox highlight">
-				<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox1">
-					<input class="sr-only" type="checkbox" value="">
-					<span class="checkbox-label">Custom block-level highlight checkbox</span>
-				</label>
+				<section id="checkboxes-inline">
+					<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox1">
+						<input checked="checked" class="checked sr-only" type="checkbox" value=""> <span class="checkbox-label">1, 2, buckle my shoe</span>
+					</label>
+					<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox2">
+						<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">3, 4, shut the door</span>
+					</label>
+					<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox3">
+						<input class="sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">5, 6, pick up sticks</span>
+					</label>
+					<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox4">
+						<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">7, 8, lay them straight</span>
+					</label>
+				</section>
+
+				<section id="checkboxes-toggling">
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">
+							<input class="sr-only" data-toggle=".checkboxToggle" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox toggles by class</span>
+						</label>
+					</div>
+					<div class="checkbox">
+						<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox2">
+							<input class="sr-only" data-toggle="#checkboxToggle" type="checkbox" value="">
+							<span class="checkbox-label">Custom checkbox toggles by id</span>
+						</label>
+					</div>
+					<div aria-hidden="true" class="checkboxToggle alert alert-warning hide">This message's visibility toggles by class with a checkbox above.</div>
+					<div aria-hidden="true" class="checkboxToggle alert alert-success hide">This message's visibility toggles by class with a checkbox above.</div>
+					<div aria-hidden="true" class="alert alert-info hide" id="checkboxToggle">This message's visibility toggles by id with a checkbox above.</div>
+				</section>
+				<section id="checkboxes-highlighting-block">
+					<div class="checkbox highlight">
+						<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox1">
+							<input class="sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom block-level highlight checkbox</span>
+						</label>
+					</div>
+					<div class="checkbox highlight">
+						<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox2">
+							<input class="sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom block-level highlight checkbox</span>
+						</label>
+					</div>
+					<div class="checkbox highlight">
+						<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox3">
+							<input class="sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom block-level highlight checkbox</span>
+						</label>
+					</div>
+					<div class="checkbox highlight">
+						<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox4">
+							<input class="sr-only" type="checkbox" value="">
+							<span class="checkbox-label">Custom block-level highlight checkbox</span>
+						</label>
+					</div>
+				</section>
+				<section id="checkboxes-highlighting-inline">
+					<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox5">
+						<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
+					</label>
+					<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox6">
+						<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
+					</label>
+				</section>
 			</div>
-			<div class="checkbox highlight">
-				<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox2">
-					<input class="sr-only" type="checkbox" value="">
-					<span class="checkbox-label">Custom block-level highlight checkbox</span>
-				</label>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnCheckboxToggle">toggle #myCustomCheckbox1</button>
+				<button type="button" class="btn btn-default" id="btnCheckboxDisable">disable #myCustomCheckbox1</button>
+				<button type="button" class="btn btn-default" id="btnCheckboxEnable">enable #myCustomCheckbox1</button>
+				<button type="button" class="btn btn-default" id="btnCheckboxDestroy">destroy and append #myCustomCheckbox1</button>
 			</div>
-			<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox3">
-				<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
-			</label>
-			<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox4">
-				<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
-			</label>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnCheckboxToggle">toggle #myCustomCheckbox1</button>
-			<button type="button" class="btn btn-default" id="btnCheckboxDisable">disable #myCustomCheckbox1</button>
-			<button type="button" class="btn btn-default" id="btnCheckboxEnable">enable #myCustomCheckbox1</button>
-			<button type="button" class="btn btn-default" id="btnCheckboxDestroy">destroy and append #myCustomCheckbox1</button>
-		</div>
-
-		<h2 id="combobox">Combobox</h2>
-		<div class="thin-box">
-			<div style="width: 300px;">
-
-				<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
-					<input type="text" class="form-control">
-					<div class="input-group-btn">
-						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-						<ul class="dropdown-menu dropdown-menu-right" role="menu">
-							<li data-value="1"><a href="#">One</a></li>
-							<li data-value="2"><a href="#">Two</a></li>
-							<li data-selected="true" data-value="3"><a href="#">Three</a></li>
-							<li data-value="4" ><a href="#">Four</a></li>
-							<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a></li>
-						</ul>
-					</div>
-				</div>
+		</section>
 
-			</div>
-		</div>
-		<div class="btn-panel">
-			<button id="btnComboboxGetSelectedItem" type="button" class="btn btn-default">log item</button>
-			<button id="btnComboboxSelectByValue" type="button" class="btn btn-default">set by value (One)</button>
-			<button id="btnComboboxSelectByIndex" type="button" class="btn btn-default">set by element index (Two)</button>
-			<button id="btnComboboxSelectByText" type="button" class="btn btn-default">set by text (Four)</button>
-			<button id="btnComboboxSelectBySelector" type="button" class="btn btn-default">set by CSS selector li[data-fizz=buzz] (Item Five)</button>
-			<button id="btnComboboxDisable" type="button" class="btn btn-default">disable</button>
-			<button id="btnComboboxEnable" type="button" class="btn btn-default">enable</button>
-			<button id="btnComboboxDestroy" type="button" class="btn btn-default">destroy and append</button>
-		</div>
-
-		<h2 id="datepicker">Datepicker</h2>
-		<div class="thin-box">
-			<div style="width: 300px;">
-
-				<div class="datepicker" id="myDatepicker">
-					<div class="input-group">
-						<input class="form-control" id="myDatepickerInput" type="text"/>
-						<div class="input-group-btn">
-							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-								<span class="glyphicon glyphicon-calendar"></span>
-								<span class="sr-only">Toggle Calendar</span>
-							</button>
-							<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
-								<div class="datepicker-calendar">
-									<div class="datepicker-calendar-header">
-										<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
-										<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
-										<button type="button" class="title">
-											<span class="month">
-												<span data-month="0">January</span>
-												<span data-month="1">February</span>
-												<span data-month="2">March</span>
-												<span data-month="3">April</span>
-												<span data-month="4">May</span>
-												<span data-month="5">June</span>
-												<span data-month="6">July</span>
-												<span data-month="7">August</span>
-												<span data-month="8">September</span>
-												<span data-month="9">October</span>
-												<span data-month="10">November</span>
-												<span data-month="11">December</span>
-											</span> <span class="year"></span>
-										</button>
-									</div>
-									<table class="datepicker-calendar-days">
-										<thead>
-										<tr>
-											<th>Su</th>
-											<th>Mo</th>
-											<th>Tu</th>
-											<th>We</th>
-											<th>Th</th>
-											<th>Fr</th>
-											<th>Sa</th>
-										</tr>
-										</thead>
-										<tbody></tbody>
-									</table>
-									<div class="datepicker-calendar-footer">
-										<button type="button" class="datepicker-today">Today</button>
-									</div>
-								</div>
-								<div class="datepicker-wheels" aria-hidden="true">
-									<div class="datepicker-wheels-month">
-										<h2 class="header">Month</h2>
-										<ul>
-											<li data-month="0"><button type="button">Jan</button></li>
-											<li data-month="1"><button type="button">Feb</button></li>
-											<li data-month="2"><button type="button">Mar</button></li>
-											<li data-month="3"><button type="button">Apr</button></li>
-											<li data-month="4"><button type="button">May</button></li>
-											<li data-month="5"><button type="button">Jun</button></li>
-											<li data-month="6"><button type="button">Jul</button></li>
-											<li data-month="7"><button type="button">Aug</button></li>
-											<li data-month="8"><button type="button">Sep</button></li>
-											<li data-month="9"><button type="button">Oct</button></li>
-											<li data-month="10"><button type="button">Nov</button></li>
-											<li data-month="11"><button type="button">Dec</button></li>
-										</ul>
-									</div>
-									<div class="datepicker-wheels-year">
-										<h2 class="header">Year</h2>
-										<ul></ul>
-									</div>
-									<div class="datepicker-wheels-footer clearfix">
-										<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
-										<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
-									</div>
-								</div>
-							</div>
+		<section id="checkboxes-no-js">
+			<h2>Checkboxes (no javascript)</h2>
+			<div class="thin-box">
+				<section id="checkboxes-no-js-block" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Checkboxes (no javascript) Block</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-block--1" name="checkboxes-no-js-block--1" value="">
+							<label for="checkboxes-no-js-block--1">
+								Checkbox: unchecked on page load
+							</label>
 						</div>
-					</div>
-				</div>
 
-			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnDatepickerEnable">enable</button>
-			<button type="button" class="btn btn-default" id="btnDatepickerDisable">disable</button>
-			<button type="button" class="btn btn-default" id="btnDatepickerLogFormattedDate">log formatted date</button>
-			<button type="button" class="btn btn-default" id="btnDatepickerLogDateObj">log date object</button>
-			<button type="button" class="btn btn-default" id="btnDatepickerSetDate">set date 7 days ahead (will log new value)</button>
-			<button type="button" class="btn btn-default" id="btnDatepickerDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="infinitescroll">Infinite Scroll</h2>
-		<div class="clearfix thin-box">
-			<div class="infinitescroll" id="myInfiniteScroll1">
-				<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
-				<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
-				<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
-				<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
-				<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
-			</div>
-			<div class="infinitescroll" id="myInfiniteScroll2">
-				<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
-				<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
-				<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
-				<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
-				<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
-			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnInfiniteScrollEnable">enable</button>
-			<button type="button" class="btn btn-default" id="btnInfiniteScrollDisable">disable</button>
-			<button type="button" class="btn btn-default" id="btnInfiniteScrollDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="loader">Loader</h2>
-		<div class="clearfix thin-box" id="loaderWrapper">
-			<div class="loader" data-initialize="loader" id="myLoader1"></div>
-			<div class="loader" data-frame="5" data-initialize="loader" id="myLoader2"></div>
-			<div class="loader" data-delay="500" data-initialize="loader" id="myLoader3"></div>
-			<div class="loader" data-begin="3" data-end="6" data-initialize="loader" id="myLoader4"></div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnLoaderPlay">play</button>
-			<button type="button" class="btn btn-default" id="btnLoaderPause">pause</button>
-			<button type="button" class="btn btn-default" id="btnLoaderNext">next</button>
-			<button type="button" class="btn btn-default" id="btnLoaderPrevious">previous</button>
-			<button type="button" class="btn btn-default" id="btnLoaderDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="pillbox">Pillbox</h2>
-		<div class="thin-box">
-			<div style="width: 300px;">
-				<div class="pillbox" id="myPillbox1">
-					<ul class="clearfix pill-group">
-						<li class="pillbox-input-wrap btn-group">
-							<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
-							<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
-							<button type="button" class="dropdown-toggle sr-only">
-								<span class="caret"></span>
-								<span class="sr-only">Toggle Dropdown</span>
-							</button>
-							<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
-						</li>
-					</ul>
-				</div>
-			</div>
-			<br/>
-			<div style="width: 230px;">
-				<div class="pillbox" data-readonly="readonly" id="myPillbox2">
-					<ul class="clearfix pill-group">
-
-						<li class="btn btn-default pill" data-value="foo">
-							<span>Item 1</span>
-							<span class="glyphicon glyphicon-close">
-								<span class="sr-only">Remove</span>
-							</span>
-						</li>
-						<li class="btn btn-default pill">
-							<span>Item 2</span>
-							<span class="glyphicon glyphicon-close">
-								<span class="sr-only">Remove</span>
-							</span>
-						</li>
-						<li class="btn btn-default pill" data-value="three-value">
-							<span>Item 3</span>
-							<span class="glyphicon glyphicon-close">
-								<span class="sr-only">Remove</span>
-							</span>
-						</li>
-						<li class="btn btn-default pill">
-							<span>Item 4</span>
-							<span class="glyphicon glyphicon-close">
-								<span class="sr-only">Remove</span>
-							</span>
-						</li>
-						<li class="btn btn-default pill">
-							<span>Item 5</span>
-							<span class="glyphicon glyphicon-close">
-								<span class="sr-only">Remove</span>
-							</span>
-						</li>
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-block--2" name="checkboxes-no-js-block--2" checked="checked" value="">
+							<label for="checkboxes-no-js-block--2">
+								Checkbox: checked on page load
+							</label>
+						</div>
 
-						<li class="pillbox-input-wrap btn-group">
-							<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
-							<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
-							<button type="button" class="dropdown-toggle sr-only">
-								<span class="caret"></span>
-								<span class="sr-only">Toggle Dropdown</span>
-							</button>
-							<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-		<div class="btn-panel">
-			<!--<button type="button" class="btn btn-default" id="btnPillboxEnable">enable</button>-->
-			<!--<button type="button" class="btn btn-default" id="btnPillboxDisable">disable</button>-->
-			<button type="button" class="btn btn-default" id="btnPillboxAdd">add with color</button>
-			<button type="button" class="btn btn-default" id="btnPillboxRemoveByValue">remove by value "item 2"</button>
-			<button type="button" class="btn btn-default" id="btnPillboxRemoveBySelector">remove by selector ".example-pill-class"</button>
-			<button type="button" class="btn btn-default" id="btnPillboxRemoveByText">remove by text "item 3"</button>
-			<button type="button" class="btn btn-default" id="btnPillboxItems">log items to console</button>
-			<button type="button" class="btn btn-default" id="btnPillboxDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="placard">Placard</h2>
-		<div class="thin-box">
-			<div class="placard" data-initialize="placard" id="myPlacard1">
-				<div class="placard-popup"></div>
-				<input class="form-control placard-field" type="text"/>
-			</div>
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-block--3" name="checkboxes-no-js-block--3" disabled="disabled" value="">
+							<label for="checkboxes-no-js-block--3">
+								Checkbox: disabled and unchecked on page load
+							</label>
+						</div>
 
-			<br/>
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-block--4" name="checkboxes-no-js-block--4" disabled="disabled" checked="checked" value="">
+							<label for="checkboxes-no-js-block--4">
+								Checkbox: disabled and checked on page load
+							</label>
+						</div>
 
-			<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard2">
-				<div class="placard-popup"></div>
-				<div class="placard-header"><h5>Header</h5></div>
-				<input class="form-control placard-field" type="text"/>
-				<div class="placard-footer">
-					<a class="placard-cancel" href="#">Cancel</a>
-					<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
-				</div>
-			</div>
+					</section>
+				</section>
 
-			<br/>
 
-			<div style="background: #eee; display: inline-block; padding: 10px;">
-				<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard3">
-					<div class="placard-popup"></div>
-					<div class="placard-header"><h5>Header</h5></div>
-					<textarea class="form-control glass placard-field"></textarea>
-					<div class="placard-footer">
-						<a class="placard-cancel" href="#">Cancel</a>
-						<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnPlacardEnable">enable</button>
-			<button type="button" class="btn btn-default" id="btnPlacardDisable">disable</button>
-			<button type="button" class="btn btn-default" id="btnPlacardDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="radio">Radio</h2>
-		<div class="thin-box">
-			<!--Block-level Radios-->
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomRadio1">
-					<input class="sr-only" name="radio1" type="radio" value="">
-					<span class="radio-label">Custom radio unchecked on page load</span>
-				</label>
-			</div>
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomRadio2">
-					<input checked="checked" class="checked sr-only" name="radio1" type="radio" value="">
-					<span class="radio-label">Custom radio checked on page load</span>
-				</label>
-			</div>
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomRadio3">
-					<input class="sr-only" disabled="disabled" name="radio2" type="radio" value="">
-					<span class="radio-label">Custom radio disabled and unchecked on page load</span>
-				</label>
-			</div>
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomRadio4">
-					<input checked="checked" class="checked sr-only" disabled="disabled" name="radio2" type="radio" value="">
-					<span class="radio-label">Custom radio disabled and checked on page load</span>
-				</label>
-			</div>
+				<section id="checkboxes-no-js-inline" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Checkboxes (no javascript) Inline</h3>
+					</header>
+					<section class="x-panel-body">
 
-			<br/>
-			<!--Inline radios-->
-			<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio1">
-				<input checked="checked" class="checked sr-only" name="radio3" type="radio" value=""> <span class="radio-label">1, 2, buckle my shoe</span>
-			</label>
-			<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio2">
-				<input class="sr-only" name="radio3" type="radio" value=""> <span class="radio-label">3, 4, shut the door</span>
-			</label>
-			<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio3">
-				<input class="sr-only" disabled="disabled" name="radio4" type="radio" value=""> <span class="radio-label">5, 6, pick up sticks</span>
-			</label>
-			<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio4">
-				<input checked="checked" class="checked sr-only" disabled="disabled" name="radio4" type="radio" value=""> <span class="radio-label">7, 8, lay them straight</span>
-			</label>
-
-			<br/><br/>
-			<!--Toggling capability-->
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio1">
-					<input class="sr-only" data-toggle=".radioToggle" name="radio5" type="radio" value="">
-					<span class="radio-label">Custom radio toggles by class</span>
-				</label>
-			</div>
-			<div class="radio">
-				<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio2">
-					<input class="sr-only" data-toggle="#radioToggle" name="radio5" type="radio" value="">
-					<span class="radio-label">Custom radio toggles by id</span>
-				</label>
-			</div>
+						<div class="checkbox-inline">
+							<input type="checkbox" id="checkboxes-no-js-inline--1" name="checkboxes-no-js-inline--1" checked="checked" value="">
+							<label for="checkboxes-no-js-inline--1">
+								1, 2, buckle my shoe
+							</label>
+						</div>
 
-			<div aria-hidden="true" class="radioToggle alert alert-warning hide">This message's visibility toggles by class with a radio above.</div>
-			<div aria-hidden="true" class="radioToggle alert alert-success hide">This message's visibility toggles by class with a radio above.</div>
-			<div aria-hidden="true" class="alert alert-info hide" id="radioToggle">This message's visibility toggles by id with a radio above.</div>
+						<div class="checkbox-inline">
+							<input type="checkbox" id="checkboxes-no-js-inline--2" name="checkboxes-no-js-inline--2" value="">
+							<label for="checkboxes-no-js-inline--2">
+								3, 4, shut the door
+							</label>
+						</div>
 
-			<br/>
-			<!--Highlight capability-->
-			<div class="radio highlight">
-				<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio1">
-					<input class="sr-only" name="radio6" type="radio" value="">
-					<span class="radio-label">Custom block-level highlight radio</span>
-				</label>
-			</div>
-			<div class="radio highlight">
-				<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio2">
-					<input class="sr-only" name="radio6" type="radio" value="">
-					<span class="radio-label">Custom block-level highlight radio</span>
-				</label>
-			</div>
-			<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio3">
-				<input class="sr-only" name="radio7" type="radio" value=""> <span class="radio-label">Custom inline highlight radio</span>
-			</label>
-			<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio4">
-				<input class="sr-only" name="radio7" type="radio" value=""> <span class="radio-label">Custom inline highlight radio</span>
-			</label>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnRadioDisable">disable radio1</button>
-			<button type="button" class="btn btn-default" id="btnRadioEnable">enable radio1</button>
-			<button type="button" class="btn btn-default" id="btnRadioDestroy">destroy and append myCustomRadio1</button>
-			<button type="button" class="btn btn-default" id="btnRadioInlineDestroy">destroy and append myCustomInlineRadio1</button>
-		</div>
-
-		<h2 id="repeater">Repeater</h2>
-		<div class="thin-box">
-			<div class="repeater" data-staticheight="400" id="myRepeater">
-				<div class="repeater-header">
-					<div class="repeater-header-left">
-						<span class="repeater-title">Awesome Repeater</span>
-						<div class="repeater-search">
-							<div class="search input-group">
-								<input type="search" class="form-control" placeholder="Search"/>
-							<span class="input-group-btn">
-								<button class="btn btn-default" type="button">
-									<span class="glyphicon glyphicon-search"></span>
-									<span class="sr-only">Search</span>
-								</button>
-							</span>
-							</div>
+						<div class="checkbox-inline">
+							<input type="checkbox" id="checkboxes-no-js-inline--3" name="checkboxes-no-js-inline--3" checked="checked" disabled="disabled" value="">
+							<label for="checkboxes-no-js-inline--3">
+								5, 6, pick up sticks
+							</label>
 						</div>
-					</div>
-					<div class="repeater-header-right">
-						<div class="btn-group selectlist repeater-filters" data-resize="auto">
-							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-								<span class="selected-label">&nbsp;</span>
-								<span class="caret"></span>
-								<span class="sr-only">Toggle Filters</span>
-							</button>
-							<ul class="dropdown-menu" role="menu">
-								<li data-value="all" data-selected="true"><a href="#">All</a></li>
-								<li data-value="some"><a href="#">Some</a></li>
-								<li data-value="others"><a href="#">Others</a></li>
-							</ul>
-							<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
+
+						<div class="checkbox-inline">
+							<input type="checkbox" id="checkboxes-no-js-inline--4" name="checkboxes-no-js-inline--4" disabled="disabled" value="">
+							<label for="checkboxes-no-js-inline--4">
+								7, 8, lay them straight
+							</label>
 						</div>
-						<div class="btn-group repeater-views" data-toggle="buttons">
-							<label class="btn btn-default active">
-								<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
+
+					</section>
+				</section>
+
+
+
+
+				<section id="checkboxes-no-js-toggling" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Checkboxes (no javascript) Toggling</h3>
+					</header>
+					<div class="x-panel-body">
+
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-toggling--1" name="checkboxes-no-js-toggling--1" data-toggle="collapse" data-target=".checkboxes-no-js-toggling-class" value="">
+							<label for="checkboxes-no-js-toggling--1">
+								Toggles by class
 							</label>
-							<label class="btn btn-default">
-								<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
+						</div>
+
+						<div class="checkbox">
+							<input type="checkbox" id="checkboxes-no-js-toggling--2" name="checkboxes-no-js-toggling--2" data-toggle="collapse" data-target="#checkboxes-no-js-toggling-id" aria-controls="checkboxes-no-js-toggling-id" value="">
+							<label for="checkboxes-no-js-toggling--2">
+								Toggles by ID
 							</label>
 						</div>
+
+
+						<div aria-hidden="true" class="alert alert-warning fade collapse checkboxes-no-js-toggling-class">This message's visibility toggles by class with a checkbox above.</div>
+						<div aria-hidden="true" class="alert alert-success fade collapse checkboxes-no-js-toggling-class">This message's visibility toggles by class with a checkbox above.</div>
+						<div aria-hidden="true" class="alert alert-info fade collapse" id="checkboxes-no-js-toggling-id">This message's visibility toggles by id with a checkbox above.</div>
+
 					</div>
-				</div>
-				<div class="repeater-viewport">
-					<div class="repeater-canvas"></div>
-					<div class="loader repeater-loader"></div>
-				</div>
-				<div class="repeater-footer">
-					<div class="repeater-footer-left">
-						<div class="repeater-itemization">
-							<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
-							<div class="btn-group selectlist" data-resize="auto">
-								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-									<span class="selected-label">&nbsp;</span>
-									<span class="caret"></span>
-									<span class="sr-only">Toggle Dropdown</span>
-								</button>
-								<ul class="dropdown-menu" role="menu">
-									<li data-value="5"><a href="#">5</a></li>
-									<li data-value="10" data-selected="true"><a href="#">10</a></li>
-									<li data-value="20"><a href="#">20</a></li>
-									<li data-value="50"><a href="#">50</a></li>
-								</ul>
-								<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
-							</div>
-							<span>Per Page</span>
+				</section>
+
+
+
+
+
+				<section id="checkboxes-no-js-block-highlighting" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Checkboxes (no javascript) Block Highlighting</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="checkbox highlight">
+							<input type="checkbox" id="checkboxes-no-js-block-highlighting--1" name="checkboxes-no-js-block-highlighting--1" checked="checked" value="">
+							<label for="checkboxes-no-js-block-highlighting--1">
+								Checkbox: checked on page load
+							</label>
 						</div>
-					</div>
-					<div class="repeater-footer-right">
-						<div class="repeater-pagination">
-							<button type="button" class="btn btn-default btn-sm repeater-prev">
-								<span class="glyphicon glyphicon-chevron-left"></span>
-								<span class="sr-only">Previous Page</span>
-							</button>
-							<label id="myPageLabel" class="page-label">Page</label>
-							<div class="repeater-primaryPaging active">
-								<div class="input-group input-append dropdown combobox">
-									<input type="text" class="form-control" aria-labelledby="myPageLabel">
-									<div class="input-group-btn">
-										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-											<span class="caret"></span>
-											<span class="sr-only">Toggle Dropdown</span>
-										</button>
-										<ul class="dropdown-menu dropdown-menu-right"></ul>
-									</div>
-								</div>
-							</div>
-							<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
-							<span>of <span class="repeater-pages"></span></span>
-							<button type="button" class="btn btn-default btn-sm repeater-next">
-								<span class="glyphicon glyphicon-chevron-right"></span>
-								<span class="sr-only">Next Page</span>
+
+						<div class="checkbox highlight">
+							<input type="checkbox" id="checkboxes-no-js-block-highlighting--2" name="checkboxes-no-js-block-highlighting--2" value="">
+							<label for="checkboxes-no-js-block-highlighting--2">
+								Checkbox: unchecked on page load
+							</label>
+						</div>
+
+						<div class="checkbox highlight">
+							<input type="checkbox" id="checkboxes-no-js-block-highlighting--3" name="checkboxes-no-js-block-highlighting--3" checked="checked" disabled="disabled" value="">
+							<label for="checkboxes-no-js-block-highlighting--3">
+								Checkbox: unchecked and disabled on page load
+							</label>
+						</div>
+
+						<div class="checkbox highlight">
+							<input type="checkbox" id="checkboxes-no-js-block-highlighting--4" name="checkboxes-no-js-block-highlighting--4" disabled="disabled" value="">
+							<label for="checkboxes-no-js-block-highlighting--4">
+								Checkbox: checked and disabled on page load
+							</label>
+						</div>
+
+					</section>
+				</section>
+
+
+
+
+
+				<section id="checkboxes-no-js-inline-highlighting" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Checkboxes (no javascript) Inline Highlighting</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="checkbox-inline highlight">
+							<input type="checkbox" id="checkboxes-no-js-inline-highlighting--1" name="checkboxes-no-js-inline-highlighting--1" checked="checked" value="">
+							<label for="checkboxes-no-js-inline-highlighting--1">
+								1, 2, buckle my shoe
+							</label>
+						</div>
+
+						<div class="checkbox-inline highlight">
+							<input type="checkbox" id="checkboxes-no-js-inline-highlighting--2" name="checkboxes-no-js-inline-highlighting--2" value="">
+							<label for="checkboxes-no-js-inline-highlighting--2">
+								3, 4, shut the door
+							</label>
+						</div>
+
+						<div class="checkbox-inline highlight">
+							<input type="checkbox" id="checkboxes-no-js-inline-highlighting--3" name="checkboxes-no-js-inline-highlighting--3" checked="checked" disabled="disabled" value="">
+							<label for="checkboxes-no-js-inline-highlighting--3">
+								5, 6, pick up sticks
+							</label>
+						</div>
+
+						<div class="checkbox-inline highlight">
+							<input type="checkbox" id="checkboxes-no-js-inline-highlighting--4" name="checkboxes-no-js-inline-highlighting--4" disabled="disabled" value="">
+							<label for="checkboxes-no-js-inline-highlighting--4">
+								7, 8, lay them straight
+							</label>
+						</div>
+
+					</section>
+				</section>
+
+
+
+
+			</div>
+		</section>
+
+		<section id="combobox">
+
+			<h2>Combobox</h2>
+			<div class="thin-box">
+				<div style="width: 300px;">
+
+					<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
+						<input type="text" class="form-control">
+						<div class="input-group-btn">
+							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
 							</button>
+							<ul class="dropdown-menu dropdown-menu-right" role="menu">
+								<li data-value="1"><a href="#">One</a>
+								</li>
+								<li data-value="2"><a href="#">Two</a>
+								</li>
+								<li data-selected="true" data-value="3"><a href="#">Three</a>
+								</li>
+								<li data-value="4"><a href="#">Four</a>
+								</li>
+								<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a>
+								</li>
+							</ul>
 						</div>
 					</div>
+
 				</div>
 			</div>
-		</div>
-		<div class="btn-panel">
-			<!--<button type="button" class="btn btn-default" id="btnRepeaterDisable">disable ???</button>-->
-			<!--<button type="button" class="btn btn-default" id="btnRepeaterEnable">enable ???</button>-->
-			<button type="button" class="btn btn-default" id="btnRepeaterDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="scheduler">Scheduler</h2>
-		<div class="thin-box">
-		<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
-		<div class="form-group start-datetime">
-			<label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
-			<div class="row col-sm-10">
-				<div class="col-sm-8 form-group">
-					<div class="datepicker start-date">
+			<div class="btn-panel">
+				<button id="btnComboboxGetSelectedItem" type="button" class="btn btn-default">log item</button>
+				<button id="btnComboboxSelectByValue" type="button" class="btn btn-default">set by value (One)</button>
+				<button id="btnComboboxSelectByIndex" type="button" class="btn btn-default">set by element index (Two)</button>
+				<button id="btnComboboxSelectByText" type="button" class="btn btn-default">set by text (Four)</button>
+				<button id="btnComboboxSelectBySelector" type="button" class="btn btn-default">set by CSS selector li[data-fizz=buzz] (Item Five)</button>
+				<button id="btnComboboxDisable" type="button" class="btn btn-default">disable</button>
+				<button id="btnComboboxEnable" type="button" class="btn btn-default">enable</button>
+				<button id="btnComboboxDestroy" type="button" class="btn btn-default">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="datepicker">
+			<h2>Datepicker</h2>
+			<div class="thin-box">
+				<div style="width: 300px;">
+
+					<div class="datepicker" id="myDatepicker">
 						<div class="input-group">
-							<input class="form-control" id="myStartDate" type="text"/>
+							<input class="form-control" id="myDatepickerInput" type="text" />
 							<div class="input-group-btn">
 								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 									<span class="glyphicon glyphicon-calendar"></span>
@@ -628,59 +407,85 @@ <h2 id="scheduler">Scheduler</h2>
 								<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
 									<div class="datepicker-calendar">
 										<div class="datepicker-calendar-header">
-											<button class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
-											<button class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
-											<button class="title">
+											<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span>
+											</button>
+											<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span>
+											</button>
+											<button type="button" class="title">
 												<span class="month">
 													<span data-month="0">January</span>
-													<span data-month="1">February</span>
-													<span data-month="2">March</span>
-													<span data-month="3">April</span>
-													<span data-month="4">May</span>
-													<span data-month="5">June</span>
-													<span data-month="6">July</span>
-													<span data-month="7">August</span>
-													<span data-month="8">September</span>
-													<span data-month="9">October</span>
-													<span data-month="10">November</span>
-													<span data-month="11">December</span>
+												<span data-month="1">February</span>
+												<span data-month="2">March</span>
+												<span data-month="3">April</span>
+												<span data-month="4">May</span>
+												<span data-month="5">June</span>
+												<span data-month="6">July</span>
+												<span data-month="7">August</span>
+												<span data-month="8">September</span>
+												<span data-month="9">October</span>
+												<span data-month="10">November</span>
+												<span data-month="11">December</span>
 												</span> <span class="year"></span>
 											</button>
 										</div>
 										<table class="datepicker-calendar-days">
 											<thead>
-											<tr>
-												<th>Su</th>
-												<th>Mo</th>
-												<th>Tu</th>
-												<th>We</th>
-												<th>Th</th>
-												<th>Fr</th>
-												<th>Sa</th>
-											</tr>
+												<tr>
+													<th>Su</th>
+													<th>Mo</th>
+													<th>Tu</th>
+													<th>We</th>
+													<th>Th</th>
+													<th>Fr</th>
+													<th>Sa</th>
+												</tr>
 											</thead>
 											<tbody></tbody>
 										</table>
 										<div class="datepicker-calendar-footer">
-											<button class="datepicker-today">Today</button>
+											<button type="button" class="datepicker-today">Today</button>
 										</div>
 									</div>
 									<div class="datepicker-wheels" aria-hidden="true">
 										<div class="datepicker-wheels-month">
 											<h2 class="header">Month</h2>
 											<ul>
-												<li data-month="0"><button>Jan</button></li>
-												<li data-month="1"><button>Feb</button></li>
-												<li data-month="2"><button>Mar</button></li>
-												<li data-month="3"><button>Apr</button></li>
-												<li data-month="4"><button>May</button></li>
-												<li data-month="5"><button>Jun</button></li>
-												<li data-month="6"><button>Jul</button></li>
-												<li data-month="7"><button>Aug</button></li>
-												<li data-month="8"><button>Sep</button></li>
-												<li data-month="9"><button>Oct</button></li>
-												<li data-month="10"><button>Nov</button></li>
-												<li data-month="11"><button>Dec</button></li>
+												<li data-month="0">
+													<button type="button">Jan</button>
+												</li>
+												<li data-month="1">
+													<button type="button">Feb</button>
+												</li>
+												<li data-month="2">
+													<button type="button">Mar</button>
+												</li>
+												<li data-month="3">
+													<button type="button">Apr</button>
+												</li>
+												<li data-month="4">
+													<button type="button">May</button>
+												</li>
+												<li data-month="5">
+													<button type="button">Jun</button>
+												</li>
+												<li data-month="6">
+													<button type="button">Jul</button>
+												</li>
+												<li data-month="7">
+													<button type="button">Aug</button>
+												</li>
+												<li data-month="8">
+													<button type="button">Sep</button>
+												</li>
+												<li data-month="9">
+													<button type="button">Oct</button>
+												</li>
+												<li data-month="10">
+													<button type="button">Nov</button>
+												</li>
+												<li data-month="11">
+													<button type="button">Dec</button>
+												</li>
 											</ul>
 										</div>
 										<div class="datepicker-wheels-year">
@@ -688,597 +493,1624 @@ <h2 class="header">Year</h2>
 											<ul></ul>
 										</div>
 										<div class="datepicker-wheels-footer clearfix">
-											<button class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
-											<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
+											<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span>
+											</button>
+											<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span>
+											</button>
 										</div>
 									</div>
 								</div>
 							</div>
 						</div>
 					</div>
-				</div>
 
-				<div class="col-sm-4 form-group">
-					<label class="sr-only" for="myStartTime">Start Time</label>
-					<div class="input-group combobox start-time">
-						<input id="myStartTime" type="text" class="form-control" />
-						<div class="input-group-btn">
-							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-								<span class="caret"></span>
-								<span class="sr-only">Toggle Dropdown</span>
-							</button>
-							<ul class="dropdown-menu dropdown-menu-right" role="menu">
-								<li><a href="#">12:00 AM</a></li>
-								<li><a href="#">12:30 AM</a></li>
-								<li><a href="#">1:00 AM</a></li>
-								<li><a href="#">1:30 AM</a></li>
-								<li><a href="#">2:00 AM</a></li>
-								<li><a href="#">2:30 AM</a></li>
-								<li><a href="#">3:00 AM</a></li>
-								<li><a href="#">3:30 AM</a></li>
-								<li><a href="#">4:00 AM</a></li>
-								<li><a href="#">4:30 AM</a></li>
-								<li><a href="#">5:00 AM</a></li>
-								<li><a href="#">5:30 AM</a></li>
-								<li><a href="#">6:00 AM</a></li>
-								<li><a href="#">6:30 AM</a></li>
-								<li><a href="#">7:00 AM</a></li>
-								<li><a href="#">7:30 AM</a></li>
-								<li><a href="#">8:00 AM</a></li>
-								<li><a href="#">8:30 AM</a></li>
-								<li><a href="#">9:00 AM</a></li>
-								<li><a href="#">9:30 AM</a></li>
-								<li><a href="#">10:00 AM</a></li>
-								<li><a href="#">10:30 AM</a></li>
-								<li><a href="#">11:00 AM</a></li>
-								<li><a href="#">11:30 AM</a></li>
-								<li><a href="#">12:00 PM</a></li>
-								<li><a href="#">12:30 PM</a></li>
-								<li><a href="#">1:00 PM</a></li>
-								<li><a href="#">1:30 PM</a></li>
-								<li><a href="#">2:00 PM</a></li>
-								<li><a href="#">2:30 PM</a></li>
-								<li><a href="#">3:00 PM</a></li>
-								<li><a href="#">3:30 PM</a></li>
-								<li><a href="#">4:00 PM</a></li>
-								<li><a href="#">4:30 PM</a></li>
-								<li><a href="#">5:00 PM</a></li>
-								<li><a href="#">5:30 PM</a></li>
-								<li><a href="#">6:00 PM</a></li>
-								<li><a href="#">6:30 PM</a></li>
-								<li><a href="#">7:00 PM</a></li>
-								<li><a href="#">7:30 PM</a></li>
-								<li><a href="#">8:00 PM</a></li>
-								<li><a href="#">8:30 PM</a></li>
-								<li><a href="#">9:00 PM</a></li>
-								<li><a href="#">9:30 PM</a></li>
-								<li><a href="#">10:00 PM</a></li>
-								<li><a href="#">10:30 PM</a></li>
-								<li><a href="#">11:00 PM</a></li>
-								<li><a href="#">11:30 PM</a></li>
-							</ul>
-						</div>
-					</div>
 				</div>
 			</div>
-		</div>
-
-		<div class="row form-group timezone-container">
-			<label class="col-sm-2 control-label scheduler-label">Timezone</label>
-			<div class="col-xs-12 col-sm-10 col-md-10">
-				<div data-resize="auto" class="btn-group selectlist timezone">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">(GMT-06:00) Central Standard Time</span>
-						<span class="caret"></span>
-						<span class="sr-only">Toggle Dropdown</span>
-					</button>
-					<ul class="dropdown-menu" role="menu">
-						<li data-name="Central Standard Time (no DST)" data-offset="-06:00"><a href="#">(GMT-06:00) Central Standard Time</a></li>
-						<li data-name="Morocco Standard Time" data-offset="+00:00"><a href="#">(GMT) Casablanca *</a></li>
-						<li data-name="GMT Standard Time" data-offset="+00:00"><a href="#">(GMT) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London *</a></li>
-						<li data-name="Greenwich Standard Time" data-offset="+00:00"><a href="#">(GMT) Monrovia, Reykjavik</a></li>
-						<li data-name="W. Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna *</a></li>
-						<li data-name="Central Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague *</a></li>
-						<li data-name="Romance Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris *</a></li>
-						<li data-name="Central European Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb *</a></li>
-						<li data-name="W. Central Africa Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) West Central Africa</a></li>
-						<li data-name="Jordan Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Amman *</a></li>
-						<li data-name="GTB Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Athens, Bucharest, Istanbul *</a></li>
-						<li data-name="Middle East Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Beirut *</a></li>
-						<li data-name="Egypt Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Cairo *</a></li>
-						<li data-name="South Africa Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Harare, Pretoria</a></li>
-						<li data-name="FLE Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius *</a></li>
-						<li data-name="Israel Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Jerusalem *</a></li>
-						<li data-name="E. Europe Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Minsk *</a></li>
-						<li data-name="Namibia Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Windhoek *</a></li>
-						<li data-name="Arabic Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Baghdad *</a></li>
-						<li data-name="Arab Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Kuwait, Riyadh</a></li>
-						<li data-name="Russian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Moscow, St. Petersburg, Volgograd *</a></li>
-						<li data-name="E. Africa Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Nairobi</a></li>
-						<li data-name="Georgian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Tbilisi</a></li>
-						<li data-name="Iran Standard Time" data-offset="+03:30"><a href="#">(GMT+03:30) Tehran *</a></li>
-						<li data-name="Arabian Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Abu Dhabi, Muscat</a></li>
-						<li data-name="Azerbaijan Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Baku *</a></li>
-						<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Caucasus Standard Time</a></li>
-						<li data-name="Mauritius Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Port Louis *</a></li>
-						<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Yerevan</a></li>
-						<li data-name="Afghanistan Standard Time" data-offset="+04:30"><a href="#">(GMT+04:30) Kabul</a></li>
-						<li data-name="Ekaterinburg Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Ekaterinburg *</a></li>
-						<li data-name="Pakistan Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Islamabad, Karachi *</a></li>
-						<li data-name="West Asia Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Tashkent</a></li>
-						<li data-name="India Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</a></li>
-						<li data-name="Sri Lanka Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Sri Jayawardenepura</a></li>
-						<li data-name="Nepal Standard Time" data-offset="+05:45"><a href="#">(GMT+05:45) Kathmandu</a></li>
-						<li data-name="N. Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Almaty, Novosibirsk *</a></li>
-						<li data-name="Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Astana, Dhaka</a></li>
-						<li data-name="Myanmar Standard Time" data-offset="+06:00"><a href="#">(GMT+06:30) Yangon (Rangoon)</a></li>
-						<li data-name="SE Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Bangkok, Hanoi, Jakarta</a></li>
-						<li data-name="North Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Krasnoyarsk *</a></li>
-						<li data-name="China Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</a></li>
-						<li data-name="North Asia East Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Irkutsk, Ulaan Bataar *</a></li>
-						<li data-name="Singapore Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Kuala Lumpur, Singapore</a></li>
-						<li data-name="W. Australia Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Perth *</a></li>
-						<li data-name="Taipei Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Taipei</a></li>
-						<li data-name="Tokyo Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Osaka, Sapporo, Tokyo</a></li>
-						<li data-name="Korea Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Seoul</a></li>
-						<li data-name="Yakutsk Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Yakutsk *</a></li>
-						<li data-name="Cen. Australia Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Adelaide *</a></li>
-						<li data-name="AUS Central Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Darwin</a></li>
-						<li data-name="E. Australia Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Brisbane</a></li>
-						<li data-name="AUS Eastern Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Canberra, Melbourne, Sydney *</a></li>
-						<li data-name="West Pacific Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Guam, Port Moresby</a></li>
-						<li data-name="Tasmania Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Hobart *</a></li>
-						<li data-name="Vladivostok Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Vladivostok *</a></li>
-						<li data-name="Central Pacific Standard Time" data-offset="+11:00"><a href="#">(GMT+11:00) Magadan, Solomon Is., New Caledonia</a></li>
-						<li data-name="New Zealand Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Auckland, Wellington *</a></li>
-						<li data-name="Fiji Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</a></li>
-						<li data-name="Tonga Standard Time" data-offset="+12:00"><a href="#">(GMT+13:00) Nukualofa</a></li>
-						<li data-name="Azores Standard Time" data-offset="+12:00"><a href="#">(GMT-01:00) Azores *</a></li>
-						<li data-name="Cape Verde Standard Time" data-offset="-01:00"><a href="#">(GMT-01:00) Cape Verde Is.</a></li>
-						<li data-name="Mid-Atlantic Standard Time" data-offset="-02:00"><a href="#">(GMT-02:00) Mid-Atlantic *</a></li>
-						<li data-name="E. South America Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Brasilia *</a></li>
-						<li data-name="Argentina Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Buenos Aires *</a></li>
-						<li data-name="SA Western Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Georgetown</a></li>
-						<li data-name="Greenland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Greenland *</a></li>
-						<li data-name="Montevideo Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Montevideo *</a></li>
-						<li data-name="Newfoundland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:30) Newfoundland *</a></li>
-						<li data-name="Atlantic Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Atlantic Time (Canada) *</a></li>
-						<li data-name="SA Western Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) La Paz</a></li>
-						<li data-name="Central Brazilian Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Manaus *</a></li>
-						<li data-name="Pacific SA Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Santiago *</a></li>
-						<li data-name="Venezuela Standard Time" data-offset="-04:30"><a href="#">(GMT-04:30) Caracas</a></li>
-						<li data-name="SA Pacific Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</a></li>
-						<li data-name="Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Eastern Time (US &amp; Canada) *</a></li>
-						<li data-name="US Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Indiana (East)</a></li>
-						<li data-name="Central America Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central America</a></li>
-						<li data-name="Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central Time (US &amp; Canada) *</a></li>
-						<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - New *</a></li>
-						<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - Old</a></li>
-						<li data-name="Canada Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Saskatchewan</a></li>
-						<li data-name="US Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Arizona</a></li>
-						<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - New *</a></li>
-						<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - Old</a></li>
-						<li data-name="Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Mountain Time (US &amp; Canada) *</a></li>
-						<li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US &amp; Canada) *</a></li>
-						<li data-name="Pacific Standard Time (Mexico)" data-offset="-08:00"><a href="#">(GMT-08:00) Tijuana, Baja California *</a></li>
-						<li data-name="Alaskan Standard Time" data-offset="-09:00"><a href="#">(GMT-09:00) Alaska *</a></li>
-						<li data-name="Hawaiian Standard Time" data-offset="-10:00"><a href="#">(GMT-10:00) Hawaii</a></li>
-						<li data-name="Samoa Standard Time" data-offset="-11:00"><a href="#">(GMT-11:00) Midway Island, Samoa</a></li>
-						<li data-name="Dateline Standard Time" data-offset="-12:00"><a href="#">(GMT-12:00) International Date Line West</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="TimeZoneSelectlist" class="hidden hidden-field">
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnDatepickerEnable">enable</button>
+				<button type="button" class="btn btn-default" id="btnDatepickerDisable">disable</button>
+				<button type="button" class="btn btn-default" id="btnDatepickerLogFormattedDate">log formatted date</button>
+				<button type="button" class="btn btn-default" id="btnDatepickerLogDateObj">log date object</button>
+				<button type="button" class="btn btn-default" id="btnDatepickerSetDate">set date 7 days ahead (will log new value)</button>
+				<button type="button" class="btn btn-default" id="btnDatepickerDestroy">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="infinitescroll">
+			<h2>Infinite Scroll</h2>
+			<div class="clearfix thin-box">
+				<div class="infinitescroll" id="myInfiniteScroll1">
+					<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
+					<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
+					<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
+					<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
+					<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
+				</div>
+				<div class="infinitescroll" id="myInfiniteScroll2">
+					<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
+					<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
+					<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
+					<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
+					<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
 				</div>
 			</div>
-		</div>
-
-		<div class="form-group repeat-container">
-		<label class="col-sm-2 control-label scheduler-label">Repeat</label>
-		<div class="col-sm-10">
-
-		<div class="form-group repeat-interval">
-			<div data-resize="auto" class="btn-group selectlist pull-left repeat-options">
-				<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-					<span class="selected-label">None (run once)</span>
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu" role="menu">
-					<li data-value="none"><a href="#">None (run once)</a></li>
-					<li data-value="hourly" data-text="hour(s)"><a href="#">Hourly</a></li>
-					<li data-value="daily" data-text="day(s)"><a href="#">Daily</a></li>
-					<li data-value="weekdays"><a href="#">Weekdays</a></li>
-					<li data-value="weekly" data-text="week(s)"><a href="#">Weekly</a></li>
-					<li data-value="monthly" data-text="month(s)"><a href="#">Monthly</a></li>
-					<li data-value="yearly"><a href="#">Yearly</a></li>
-				</ul>
-				<input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnInfiniteScrollEnable">enable</button>
+				<button type="button" class="btn btn-default" id="btnInfiniteScrollDisable">disable</button>
+				<button type="button" class="btn btn-default" id="btnInfiniteScrollDestroy">destroy and append</button>
 			</div>
+		</section>
 
-			<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide" aria-hidden="true">
-				<label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>
+		<section id="loader">
+			<h2>Loader</h2>
+			<div class="clearfix thin-box" id="loaderWrapper">
+				<div class="loader" data-initialize="loader" id="myLoader1"></div>
+				<div class="loader" data-frame="5" data-initialize="loader" id="myLoader2"></div>
+				<div class="loader" data-delay="500" data-initialize="loader" id="myLoader3"></div>
+				<div class="loader" data-begin="3" data-end="6" data-initialize="loader" id="myLoader4"></div>
+			</div>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnLoaderPlay">play</button>
+				<button type="button" class="btn btn-default" id="btnLoaderPause">pause</button>
+				<button type="button" class="btn btn-default" id="btnLoaderNext">next</button>
+				<button type="button" class="btn btn-default" id="btnLoaderPrevious">previous</button>
+				<button type="button" class="btn btn-default" id="btnLoaderDestroy">destroy and append</button>
+			</div>
+		</section>
 
-				<div class="spinbox digits-3 repeat-every">
-					<input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
-					<div class="spinbox-buttons btn-group btn-group-vertical">
-						<button type="button" class="btn btn-default spinbox-up btn-xs">
-							<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
-						</button>
-						<button type="button" class="btn btn-default spinbox-down btn-xs">
-							<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
-						</button>
+		<section id="pillbox">
+			<h2>Pillbox</h2>
+			<div class="thin-box">
+				<div style="width: 300px;">
+					<div class="pillbox" id="myPillbox1">
+						<ul class="clearfix pill-group">
+							<li class="pillbox-input-wrap btn-group">
+								<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
+								<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
+								<button type="button" class="dropdown-toggle sr-only">
+									<span class="caret"></span>
+									<span class="sr-only">Toggle Dropdown</span>
+								</button>
+								<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
+							</li>
+						</ul>
 					</div>
 				</div>
+				<br/>
+				<div style="width: 230px;">
+					<div class="pillbox" data-readonly="readonly" id="myPillbox2">
+						<ul class="clearfix pill-group">
 
-				<div class="inline-form-text repeat-every-text"></div>
-			</div>
-		</div>
+							<li class="btn btn-default pill" data-value="foo">
+								<span>Item 1</span>
+								<span class="glyphicon glyphicon-close">
+									<span class="sr-only">Remove</span>
+								</span>
+							</li>
+							<li class="btn btn-default pill">
+								<span>Item 2</span>
+								<span class="glyphicon glyphicon-close">
+									<span class="sr-only">Remove</span>
+								</span>
+							</li>
+							<li class="btn btn-default pill" data-value="three-value">
+								<span>Item 3</span>
+								<span class="glyphicon glyphicon-close">
+									<span class="sr-only">Remove</span>
+								</span>
+							</li>
+							<li class="btn btn-default pill">
+								<span>Item 4</span>
+								<span class="glyphicon glyphicon-close">
+									<span class="sr-only">Remove</span>
+								</span>
+							</li>
+							<li class="btn btn-default pill">
+								<span>Item 5</span>
+								<span class="glyphicon glyphicon-close">
+									<span class="sr-only">Remove</span>
+								</span>
+							</li>
 
-		<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide" aria-hidden="true">
-			<fieldset class="btn-group" data-toggle="buttons">
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="SU">Sun
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="MO">Mon
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="TU">Tue
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="WE"> Wed
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="TH"> Thu
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="FR"> Fri
-				</label>
-				<label class="btn btn-default">
-					<input type="checkbox" data-value="SA"> Sat
-				</label>
-			</fieldset>
-		</div>
-
-		<div class="repeat-panel repeat-monthly hide" aria-hidden="true">
-			<div class="form-group repeat-monthly-date">
-				<div class="radio pull-left">
-					<label class="radio-custom">
-						<input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bymonthday">
-						<span class="radio-label">on day</span>
-					</label>
+							<li class="pillbox-input-wrap btn-group">
+								<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
+								<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
+								<button type="button" class="dropdown-toggle sr-only">
+									<span class="caret"></span>
+									<span class="sr-only">Toggle Dropdown</span>
+								</button>
+								<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
+							</li>
+						</ul>
+					</div>
 				</div>
+			</div>
+			<div class="btn-panel">
+				<!--<button type="button" class="btn btn-default" id="btnPillboxEnable">enable</button>-->
+				<!--<button type="button" class="btn btn-default" id="btnPillboxDisable">disable</button>-->
+				<button type="button" class="btn btn-default" id="btnPillboxAdd">add with color</button>
+				<button type="button" class="btn btn-default" id="btnPillboxRemoveByValue">remove by value "item 2"</button>
+				<button type="button" class="btn btn-default" id="btnPillboxRemoveBySelector">remove by selector ".example-pill-class"</button>
+				<button type="button" class="btn btn-default" id="btnPillboxRemoveByText">remove by text "item 3"</button>
+				<button type="button" class="btn btn-default" id="btnPillboxItems">log items to console</button>
+				<button type="button" class="btn btn-default" id="btnPillboxDestroy">destroy and append</button>
+			</div>
+		</section>
 
-				<div data-resize="auto" class="btn-group selectlist pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">1</span>
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
-						<li data-value="1"><a href="#">1</a></li>
-						<li data-value="2"><a href="#">2</a></li>
-						<li data-value="3"><a href="#">3</a></li>
-						<li data-value="4"><a href="#">4</a></li>
-						<li data-value="5"><a href="#">5</a></li>
-						<li data-value="6"><a href="#">6</a></li>
-						<li data-value="7"><a href="#">7</a></li>
-						<li data-value="8"><a href="#">8</a></li>
-						<li data-value="9"><a href="#">9</a></li>
-						<li data-value="10"><a href="#">10</a></li>
-						<li data-value="11"><a href="#">11</a></li>
-						<li data-value="12"><a href="#">12</a></li>
-						<li data-value="13"><a href="#">13</a></li>
-						<li data-value="14"><a href="#">14</a></li>
-						<li data-value="15"><a href="#">15</a></li>
-						<li data-value="16"><a href="#">16</a></li>
-						<li data-value="17"><a href="#">17</a></li>
-						<li data-value="18"><a href="#">18</a></li>
-						<li data-value="19"><a href="#">19</a></li>
-						<li data-value="20"><a href="#">20</a></li>
-						<li data-value="21"><a href="#">21</a></li>
-						<li data-value="22"><a href="#">22</a></li>
-						<li data-value="23"><a href="#">23</a></li>
-						<li data-value="24"><a href="#">24</a></li>
-						<li data-value="25"><a href="#">25</a></li>
-						<li data-value="26"><a href="#">26</a></li>
-						<li data-value="27"><a href="#">27</a></li>
-						<li data-value="28"><a href="#">28</a></li>
-						<li data-value="29"><a href="#">29</a></li>
-						<li data-value="30"><a href="#">30</a></li>
-						<li data-value="31"><a href="#">31</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+		<section id="placard">
+			<h2>Placard</h2>
+			<div class="thin-box">
+				<div class="placard" data-initialize="placard" id="myPlacard1">
+					<div class="placard-popup"></div>
+					<input class="form-control placard-field" type="text" />
+				</div>
+
+				<br/>
+
+				<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard2">
+					<div class="placard-popup"></div>
+					<div class="placard-header">
+						<h5>Header</h5>
+					</div>
+					<input class="form-control placard-field" type="text" />
+					<div class="placard-footer">
+						<a class="placard-cancel" href="#">Cancel</a>
+						<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
+					</div>
 				</div>
+
+				<br/>
+
+				<div style="background: #eee; display: inline-block; padding: 10px;">
+					<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard3">
+						<div class="placard-popup"></div>
+						<div class="placard-header">
+							<h5>Header</h5>
+						</div>
+						<textarea class="form-control glass placard-field"></textarea>
+						<div class="placard-footer">
+							<a class="placard-cancel" href="#">Cancel</a>
+							<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnPlacardEnable">enable</button>
+				<button type="button" class="btn btn-default" id="btnPlacardDisable">disable</button>
+				<button type="button" class="btn btn-default" id="btnPlacardDestroy">destroy and append</button>
 			</div>
+		</section>
 
-			<div class="repeat-monthly-day form-group">
-				<div class="radio pull-left">
-					<label class="radio-custom">
-						<input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bysetpos">
-						<span class="radio-label">on the</span>
+		<section id="radio-buttons">
+			<h2>Radio Buttons</h2>
+			<div class="thin-box">
+				<!--Block-level Radios-->
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomRadio1">
+						<input class="sr-only" name="radio1" type="radio" value="">
+						<span class="radio-label">Custom radio unchecked on page load</span>
 					</label>
 				</div>
-				<div data-resize="auto" class="btn-group selectlist month-day-pos pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">First</span>
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu" role="menu">
-						<li data-value="1"><a href="#">First</a></li>
-						<li data-value="2"><a href="#">Second</a></li>
-						<li data-value="3"><a href="#">Third</a></li>
-						<li data-value="4"><a href="#">Fourth</a></li>
-						<li data-value="-1"><a href="#">Last</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomRadio2">
+						<input checked="checked" class="checked sr-only" name="radio1" type="radio" value="">
+						<span class="radio-label">Custom radio checked on page load</span>
+					</label>
 				</div>
-				<div data-resize="auto" class="btn-group selectlist month-days pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">Sunday</span>
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu" role="menu">
-						<li data-value="SU"><a href="#">Sunday</a></li>
-						<li data-value="MO"><a href="#">Monday</a></li>
-						<li data-value="TU"><a href="#">Tuesday</a></li>
-						<li data-value="WE"><a href="#">Wednesday</a></li>
-						<li data-value="TH"><a href="#">Thursday</a></li>
-						<li data-value="FR"><a href="#">Friday</a></li>
-						<li data-value="SA"><a href="#">Saturday</a></li>
-						<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
-						<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
-						<li data-value="SU,SA"><a href="#">Weekend day</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomRadio3">
+						<input class="sr-only" disabled="disabled" name="radio2" type="radio" value="">
+						<span class="radio-label">Custom radio disabled and unchecked on page load</span>
+					</label>
 				</div>
-			</div>
-		</div>
-
-		<div class="repeat-panel repeat-yearly hide" aria-hidden="true">
-			<div class="form-group repeat-yearly-date">
-				<div class="radio pull-left">
-					<label class="radio-custom">
-						<input class="sr-only" type="radio" checked="checked" name="repeat-yearly" value="bymonthday">
-						<span class="radio-label">on</span>
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomRadio4">
+						<input checked="checked" class="checked sr-only" disabled="disabled" name="radio2" type="radio" value="">
+						<span class="radio-label">Custom radio disabled and checked on page load</span>
 					</label>
 				</div>
-				<div data-resize="auto" class="btn-group selectlist year-month pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">January</span>
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu" role="menu">
-						<li data-value="1"><a href="#">January</a></li>
-						<li data-value="2"><a href="#">February</a></li>
-						<li data-value="3"><a href="#">March</a></li>
-						<li data-value="4"><a href="#">April</a></li>
-						<li data-value="5"><a href="#">May</a></li>
-						<li data-value="6"><a href="#">June</a></li>
-						<li data-value="7"><a href="#">July</a></li>
-						<li data-value="8"><a href="#">August</a></li>
-						<li data-value="9"><a href="#">September</a></li>
-						<li data-value="10"><a href="#">October</a></li>
-						<li data-value="11"><a href="#">November</a></li>
-						<li data-value="12"><a href="#">December</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+
+				<br/>
+				<!--Inline radios-->
+				<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio1">
+					<input checked="checked" class="checked sr-only" name="radio3" type="radio" value=""> <span class="radio-label">1, 2, buckle my shoe</span>
+				</label>
+				<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio2">
+					<input class="sr-only" name="radio3" type="radio" value=""> <span class="radio-label">3, 4, shut the door</span>
+				</label>
+				<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio3">
+					<input class="sr-only" disabled="disabled" name="radio4" type="radio" value=""> <span class="radio-label">5, 6, pick up sticks</span>
+				</label>
+				<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio4">
+					<input checked="checked" class="checked sr-only" disabled="disabled" name="radio4" type="radio" value=""> <span class="radio-label">7, 8, lay them straight</span>
+				</label>
+
+				<br/>
+				<br/>
+				<!--Toggling capability-->
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio1">
+						<input class="sr-only" data-toggle=".radioToggle" name="radio5" type="radio" value="">
+						<span class="radio-label">Custom radio toggles by class</span>
+					</label>
 				</div>
-				<div data-resize="auto" class="btn-group selectlist year-month-day pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">1</span>
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
-						<li data-value="1"><a href="#">1</a></li>
-						<li data-value="2"><a href="#">2</a></li>
-						<li data-value="3"><a href="#">3</a></li>
-						<li data-value="4"><a href="#">4</a></li>
-						<li data-value="5"><a href="#">5</a></li>
-						<li data-value="6"><a href="#">6</a></li>
-						<li data-value="7"><a href="#">7</a></li>
-						<li data-value="8"><a href="#">8</a></li>
-						<li data-value="9"><a href="#">9</a></li>
-						<li data-value="10"><a href="#">10</a></li>
-						<li data-value="11"><a href="#">11</a></li>
-						<li data-value="12"><a href="#">12</a></li>
-						<li data-value="13"><a href="#">13</a></li>
-						<li data-value="14"><a href="#">14</a></li>
-						<li data-value="15"><a href="#">15</a></li>
-						<li data-value="16"><a href="#">16</a></li>
-						<li data-value="17"><a href="#">17</a></li>
-						<li data-value="18"><a href="#">18</a></li>
-						<li data-value="19"><a href="#">19</a></li>
-						<li data-value="20"><a href="#">20</a></li>
-						<li data-value="21"><a href="#">21</a></li>
-						<li data-value="22"><a href="#">22</a></li>
-						<li data-value="23"><a href="#">23</a></li>
-						<li data-value="24"><a href="#">24</a></li>
-						<li data-value="25"><a href="#">25</a></li>
-						<li data-value="26"><a href="#">26</a></li>
-						<li data-value="27"><a href="#">27</a></li>
-						<li data-value="28"><a href="#">28</a></li>
-						<li data-value="29"><a href="#">29</a></li>
-						<li data-value="30"><a href="#">30</a></li>
-						<li data-value="31"><a href="#">31</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+				<div class="radio">
+					<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio2">
+						<input class="sr-only" data-toggle="#radioToggle" name="radio5" type="radio" value="">
+						<span class="radio-label">Custom radio toggles by id</span>
+					</label>
 				</div>
-			</div>
 
-			<div class="form-group repeat-yearly-day">
-				<div class="radio pull-left"><label class="radio-custom"><input class="sr-only" type="radio" name="repeat-yearly" value="bysetpos"> on the</label></div>
-				<div data-resize="auto" class="btn-group selectlist year-month-day-pos pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">First</span>
-						<span class="caret"></span>
-						<span class="sr-only">First</span>
-					</button>
-					<ul class="dropdown-menu" role="menu">
-						<li data-value="1"><a href="#">First</a></li>
-						<li data-value="2"><a href="#">Second</a></li>
-						<li data-value="3"><a href="#">Third</a></li>
-						<li data-value="4"><a href="#">Fourth</a></li>
-						<li data-value="5"><a href="#">Last</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDateSelectlist" class="hidden hidden-field">
-				</div>
+				<div aria-hidden="true" class="radioToggle alert alert-warning hide">This message's visibility toggles by class with a radio above.</div>
+				<div aria-hidden="true" class="radioToggle alert alert-success hide">This message's visibility toggles by class with a radio above.</div>
+				<div aria-hidden="true" class="alert alert-info hide" id="radioToggle">This message's visibility toggles by id with a radio above.</div>
 
-				<div data-resize="auto" class="btn-group selectlist year-month-days pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">Sunday</span>
-						<span class="caret"></span>
-						<span class="sr-only">Sunday</span>
-					</button>
-					<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
-						<li data-value="SU"><a href="#">Sunday</a></li>
-						<li data-value="MO"><a href="#">Monday</a></li>
-						<li data-value="TU"><a href="#">Tuesday</a></li>
-						<li data-value="WE"><a href="#">Wednesday</a></li>
-						<li data-value="TH"><a href="#">Thursday</a></li>
-						<li data-value="FR"><a href="#">Friday</a></li>
-						<li data-value="SA"><a href="#">Saturday</a></li>
-						<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a></li>
-						<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a></li>
-						<li data-value="SU,SA"><a href="#">Weekend day</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
+				<br/>
+				<!--Highlight capability-->
+				<div class="radio highlight">
+					<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio1">
+						<input class="sr-only" name="radio6" type="radio" value="">
+						<span class="radio-label">Custom block-level highlight radio</span>
+					</label>
 				</div>
-				<div class="inline-form-text repeat-yearly-day-text"> of </div>
-
-				<div data-resize="auto" class="btn-group selectlist year-month pull-left">
-					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label">January</span>
-						<span class="caret"></span>
-						<span class="sr-only">January</span>
-					</button>
-					<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
-						<li data-value="1"><a href="#">January</a></li>
-						<li data-value="2"><a href="#">February</a></li>
-						<li data-value="3"><a href="#">March</a></li>
-						<li data-value="4"><a href="#">April</a></li>
-						<li data-value="5"><a href="#">May</a></li>
-						<li data-value="6"><a href="#">June</a></li>
-						<li data-value="7"><a href="#">July</a></li>
-						<li data-value="8"><a href="#">August</a></li>
-						<li data-value="9"><a href="#">September</a></li>
-						<li data-value="10"><a href="#">October</a></li>
-						<li data-value="11"><a href="#">November</a></li>
-						<li data-value="12"><a href="#">December</a></li>
-					</ul>
-					<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
+				<div class="radio highlight">
+					<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio2">
+						<input class="sr-only" name="radio6" type="radio" value="">
+						<span class="radio-label">Custom block-level highlight radio</span>
+					</label>
 				</div>
+				<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio3">
+					<input class="sr-only" name="radio7" type="radio" value=""> <span class="radio-label">Custom inline highlight radio</span>
+				</label>
+				<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio4">
+					<input class="sr-only" name="radio7" type="radio" value=""> <span class="radio-label">Custom inline highlight radio</span>
+				</label>
 			</div>
-		</div>
-		</div>
-		</div>
-
-		<div class="form-group repeat-end hide" aria-hidden="true">
-			<label class="col-sm-2 control-label scheduler-label">End</label>
-			<div class="col-sm-10 row">
-				<div class="col-sm-3 form-group">
-					<div data-resize="auto" class="btn-group selectlist end-options pull-left">
-						<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-							<span class="selected-label">Never</span>
-							<span class="caret"></span>
-							<span class="sr-only">Never</span>
-						</button>
-						<ul class="dropdown-menu" role="menu">
-							<li data-value="never"><a href="#">Never</a></li>
-							<li data-value="after"><a href="#">After</a></li>
-							<li data-value="date"><a href="#">On date</a></li>
-						</ul>
-						<input type="text" aria-hidden="true" readonly="readonly" name="EndSelectlist" class="hidden hidden-field">
-					</div>
-				</div>
+		</section>
 
-				<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left hide" aria-hidden="true">
-					<div class="spinbox digits-3 end-after">
-						<label id="MyEndAfter" class="sr-only">End After</label>
-						<input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
-						<div class="spinbox-buttons btn-group btn-group-vertical">
-							<button type="button" class="btn btn-default spinbox-up btn-xs">
-								<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
-							</button>
-							<button type="button" class="btn btn-default spinbox-down btn-xs">
-								<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
-							</button>
+		<section id="radiobuttons-no-js">
+			<h2>Radio Buttons (no javascript)</h2>
+			<div class="thin-box">
+				<section id="radiobuttons-no-js-block" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Radio Buttons (no javascript) Block</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="radio">
+							<input type="radio" id="radiobuttons-no-js-block--1" name="radiobuttons-no-js-block--group-1" value="">
+							<label for="radiobuttons-no-js-block--1">
+								Radio Button: unchecked on page load
+							</label>
+						</div>
+
+						<div class="radio">
+							<input type="radio" id="radiobuttons-no-js-block--2" name="radiobuttons-no-js-block--group-1" checked="checked" value="">
+							<label for="radiobuttons-no-js-block--2">
+								Radio Button: checked on page load
+							</label>
+						</div>
+
+						<div class="radio">
+							<input type="radio" id="radiobuttons-no-js-block--3" name="radiobuttons-no-js-block--group-2" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-block--3">
+								Radio Button: disabled and unchecked on page load
+							</label>
+						</div>
+
+						<div class="radio">
+							<input type="radio" id="radiobuttons-no-js-block--4" name="radiobuttons-no-js-block--group-2" disabled="disabled" checked="checked" value="">
+							<label for="radiobuttons-no-js-block--4">
+								Radio Button: disabled and checked on page load
+							</label>
+						</div>
+
+					</section>
+				</section>
+
+
+				<section id="radiobuttons-no-js-inline" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Radio Buttons (no javascript) Inline</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="radio-inline">
+							<input type="radio" id="radiobuttons-no-js-inline--1" name="radiobuttons-no-js-inline--group-1" checked="checked" value="">
+							<label for="radiobuttons-no-js-inline--1">
+								1, 2, buckle my shoe
+							</label>
+						</div>
+
+						<div class="radio-inline">
+							<input type="radio" id="radiobuttons-no-js-inline--2" name="radiobuttons-no-js-inline--group-1" value="">
+							<label for="radiobuttons-no-js-inline--2">
+								3, 4, shut the door
+							</label>
+						</div>
+
+						<div class="radio-inline">
+							<input type="radio" id="radiobuttons-no-js-inline--3" name="radiobuttons-no-js-inline--group-2" checked="checked" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-inline--3">
+								5, 6, pick up sticks
+							</label>
+						</div>
+
+						<div class="radio-inline">
+							<input type="radio" id="radiobuttons-no-js-inline--4" name="radiobuttons-no-js-inline--group-2" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-inline--4">
+								7, 8, lay them straight
+							</label>
 						</div>
+
+					</section>
+				</section>
+
+
+
+
+				<section id="radiobuttons-no-js-toggling" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Radio Buttons (no javascript) Toggling</h3>
+					</header>
+					<div class="x-panel-body">
+
+						<div class="container-fluid">
+							<div class="row">
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--1--on" name="radiobuttons-no-js-toggling-class--1" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--1" aria-controls="radiobuttons-no-js-toggling-class--1" value="">
+									<label for="radiobuttons-no-js-toggling--1--on">
+										On
+									</label>
+								</div>
+
+
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--1--off" name="radiobuttons-no-js-toggling-class--1" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--1" aria-controls="radiobuttons-no-js-toggling-class--1" checked="checked" value="">
+									<label for="radiobuttons-no-js-toggling--1--off">
+										Off
+									</label>
+								</div>
+							</div>
+
+
+							<div class="row">
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--2--on" name="radiobuttons-no-js-toggling--2" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--2" aria-controls="radiobuttons-no-js-toggling-class--2" value="">
+									<label for="radiobuttons-no-js-toggling--2--on">
+										On
+									</label>
+								</div>
+
+
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--2--off" name="radiobuttons-no-js-toggling--2" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--2" aria-controls="radiobuttons-no-js-toggling-class--2" checked="checked" value="">
+									<label for="radiobuttons-no-js-toggling--2--off">
+										Off
+									</label>
+								</div>
+							</div>
+
+
+							<div class="row">
+
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--3--on" name="radiobuttons-no-js-toggling-id" data-toggle="collapse" data-target="#radiobuttons-no-js-toggling-id" aria-controls="radiobuttons-no-js-toggling-id" value="">
+									<label for="radiobuttons-no-js-toggling--3--on">
+										On
+									</label>
+								</div>
+								<div class="radio-inline">
+									<input type="radio" id="radiobuttons-no-js-toggling--3--off" name="radiobuttons-no-js-toggling-id" data-toggle="collapse" data-target="#radiobuttons-no-js-toggling-id" aria-controls="radiobuttons-no-js-toggling-id" checked="checked" value="">
+									<label for="radiobuttons-no-js-toggling--3--off">
+										Off
+									</label>
+								</div>
+							</div>
+						</div>
+
+
+
+						<div aria-hidden="true" class="alert alert-warning fade collapse radiobuttons-no-js-toggling-class--1" id="radiobuttons-no-js-toggling-class--1">This message's visibility toggles by class with a radio above.</div>
+						<div aria-hidden="true" class="alert alert-success fade collapse radiobuttons-no-js-toggling-class--2" id="radiobuttons-no-js-toggling-class--2">This message's visibility toggles by class with a radio above.</div>
+						<div aria-hidden="true" class="alert alert-info fade collapse" id="radiobuttons-no-js-toggling-id">This message's visibility toggles by id with a radio above.</div>
+
 					</div>
-					<div class="inline-form-text end-after-text">occurance(s)</div>
-				</div>
+				</section>
 
-				<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left hide" aria-hidden="true">
-					<div class="datepicker input-group end-on-date">
-						<div class="input-group">
-							<input class="form-control" type="text"/>
-							<div class="input-group-btn">
+
+
+				<section id="radiobuttons-no-js-block-highlighting" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Radio Buttons (no javascript) Block Highlighting</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="radio highlight">
+							<input type="radio" id="radiobuttons-no-js-block-highlighting--1" name="radiobuttons-no-js-block-highlighting--group-1" checked="checked" value="">
+							<label for="radiobuttons-no-js-block-highlighting--1">
+								Radio Button: checked on page load
+							</label>
+						</div>
+
+						<div class="radio highlight">
+							<input type="radio" id="radiobuttons-no-js-block-highlighting--2" name="radiobuttons-no-js-block-highlighting--group-1" value="">
+							<label for="radiobuttons-no-js-block-highlighting--2">
+								Radio Button: unchecked on page load
+							</label>
+						</div>
+
+						<div class="radio highlight">
+							<input type="radio" id="radiobuttons-no-js-block-highlighting--3" name="radiobuttons-no-js-block-highlighting--group-2" checked="checked" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-block-highlighting--3">
+								Radio Button: unchecked and disabled on page load
+							</label>
+						</div>
+
+						<div class="radio highlight">
+							<input type="radio" id="radiobuttons-no-js-block-highlighting--4" name="radiobuttons-no-js-block-highlighting--group-2" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-block-highlighting--4">
+								Radio Button: checked and disabled on page load
+							</label>
+						</div>
+
+					</section>
+				</section>
+
+
+
+
+
+				<section id="radiobuttons-no-js-inline-highlighting" class="x-panel x-panel-default">
+					<header class="hidden x-panel-heading">
+						<h3 class="panel-title">Radio Buttons (no javascript) Inline Highlighting</h3>
+					</header>
+					<section class="x-panel-body">
+
+						<div class="radio-inline highlight">
+							<input type="radio" id="radiobuttons-no-js-inline-highlighting--1" name="radiobuttons-no-js-inline-highlighting" checked="checked" value="">
+							<label for="radiobuttons-no-js-inline-highlighting--1">
+								1, 2, buckle my shoe
+							</label>
+						</div>
+
+						<div class="radio-inline highlight">
+							<input type="radio" id="radiobuttons-no-js-inline-highlighting--2" name="radiobuttons-no-js-inline-highlighting" value="">
+							<label for="radiobuttons-no-js-inline-highlighting--2">
+								3, 4, shut the door
+							</label>
+						</div>
+
+						<div class="radio-inline highlight">
+							<input type="radio" id="radiobuttons-no-js-inline-highlighting--3" name="radiobuttons-no-js-inline-highlighting" checked="checked" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-inline-highlighting--3">
+								5, 6, pick up sticks
+							</label>
+						</div>
+
+						<div class="radio-inline highlight">
+							<input type="radio" id="radiobuttons-no-js-inline-highlighting--4" name="radiobuttons-no-js-inline-highlighting" disabled="disabled" value="">
+							<label for="radiobuttons-no-js-inline-highlighting--4">
+								7, 8, lay them straight
+							</label>
+						</div>
+
+					</section>
+				</section>
+			</div>
+		</section>
+
+		<section id="repeater">
+			<h2>Repeater</h2>
+			<div class="thin-box">
+				<div class="repeater" data-staticheight="400" id="myRepeater">
+					<div class="repeater-header">
+						<div class="repeater-header-left">
+							<span class="repeater-title">Awesome Repeater</span>
+							<div class="repeater-search">
+								<div class="search input-group">
+									<input type="search" class="form-control" placeholder="Search" />
+									<span class="input-group-btn">
+									<button class="btn btn-default" type="button">
+										<span class="glyphicon glyphicon-search"></span>
+									<span class="sr-only">Search</span>
+									</button>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div class="repeater-header-right">
+							<div class="btn-group selectlist repeater-filters" data-resize="auto">
 								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-									<span class="glyphicon glyphicon-calendar"></span>
-									<span class="sr-only">Toggle Calendar</span>
+									<span class="selected-label">&nbsp;</span>
+									<span class="caret"></span>
+									<span class="sr-only">Toggle Filters</span>
 								</button>
-								<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
-									<div class="datepicker-calendar">
-										<div class="datepicker-calendar-header">
-											<button class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
-											<button class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
-											<button class="title">
-												<span class="month">
-													<span data-month="0">January</span>
-													<span data-month="1">February</span>
-													<span data-month="2">March</span>
-													<span data-month="3">April</span>
-													<span data-month="4">May</span>
-													<span data-month="5">June</span>
-													<span data-month="6">July</span>
-													<span data-month="7">August</span>
-													<span data-month="8">September</span>
-													<span data-month="9">October</span>
-													<span data-month="10">November</span>
-													<span data-month="11">December</span>
-												</span> <span class="year"></span>
+								<ul class="dropdown-menu" role="menu">
+									<li data-value="all" data-selected="true"><a href="#">All</a>
+									</li>
+									<li data-value="some"><a href="#">Some</a>
+									</li>
+									<li data-value="others"><a href="#">Others</a>
+									</li>
+								</ul>
+								<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text" />
+							</div>
+							<div class="btn-group repeater-views" data-toggle="buttons">
+								<label class="btn btn-default active">
+									<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
+								</label>
+								<label class="btn btn-default">
+									<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
+								</label>
+							</div>
+						</div>
+					</div>
+					<div class="repeater-viewport">
+						<div class="repeater-canvas"></div>
+						<div class="loader repeater-loader"></div>
+					</div>
+					<div class="repeater-footer">
+						<div class="repeater-footer-left">
+							<div class="repeater-itemization">
+								<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
+								<div class="btn-group selectlist" data-resize="auto">
+									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+										<span class="selected-label">&nbsp;</span>
+										<span class="caret"></span>
+										<span class="sr-only">Toggle Dropdown</span>
+									</button>
+									<ul class="dropdown-menu" role="menu">
+										<li data-value="5"><a href="#">5</a>
+										</li>
+										<li data-value="10" data-selected="true"><a href="#">10</a>
+										</li>
+										<li data-value="20"><a href="#">20</a>
+										</li>
+										<li data-value="50"><a href="#">50</a>
+										</li>
+									</ul>
+									<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text" />
+								</div>
+								<span>Per Page</span>
+							</div>
+						</div>
+						<div class="repeater-footer-right">
+							<div class="repeater-pagination">
+								<button type="button" class="btn btn-default btn-sm repeater-prev">
+									<span class="glyphicon glyphicon-chevron-left"></span>
+									<span class="sr-only">Previous Page</span>
+								</button>
+								<label id="myPageLabel" class="page-label">Page</label>
+								<div class="repeater-primaryPaging active">
+									<div class="input-group input-append dropdown combobox">
+										<input type="text" class="form-control" aria-labelledby="myPageLabel">
+										<div class="input-group-btn">
+											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+												<span class="caret"></span>
+												<span class="sr-only">Toggle Dropdown</span>
 											</button>
-										</div>
-										<table class="datepicker-calendar-days">
-											<thead>
-											<tr>
-												<th>Su</th>
-												<th>Mo</th>
-												<th>Tu</th>
-												<th>We</th>
-												<th>Th</th>
-												<th>Fr</th>
-												<th>Sa</th>
-											</tr>
-											</thead>
-											<tbody></tbody>
-										</table>
-										<div class="datepicker-calendar-footer">
-											<button class="datepicker-today">Today</button>
+											<ul class="dropdown-menu dropdown-menu-right"></ul>
 										</div>
 									</div>
-									<div class="datepicker-wheels" aria-hidden="true">
-										<div class="datepicker-wheels-month">
-											<h2 class="header">Month</h2>
-											<ul>
-												<li data-month="0"><button>Jan</button></li>
-												<li data-month="1"><button>Feb</button></li>
-												<li data-month="2"><button>Mar</button></li>
-												<li data-month="3"><button>Apr</button></li>
-												<li data-month="4"><button>May</button></li>
-												<li data-month="5"><button>Jun</button></li>
-												<li data-month="6"><button>Jul</button></li>
-												<li data-month="7"><button>Aug</button></li>
-												<li data-month="8"><button>Sep</button></li>
-												<li data-month="9"><button>Oct</button></li>
-												<li data-month="10"><button>Nov</button></li>
-												<li data-month="11"><button>Dec</button></li>
-											</ul>
+								</div>
+								<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
+								<span>of <span class="repeater-pages"></span></span>
+								<button type="button" class="btn btn-default btn-sm repeater-next">
+									<span class="glyphicon glyphicon-chevron-right"></span>
+									<span class="sr-only">Next Page</span>
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="btn-panel">
+				<!--<button type="button" class="btn btn-default" id="btnRepeaterDisable">disable ???</button>-->
+				<!--<button type="button" class="btn btn-default" id="btnRepeaterEnable">enable ???</button>-->
+				<button type="button" class="btn btn-default" id="btnRepeaterDestroy">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="scheduler">
+			<h2>Scheduler</h2>
+			<div class="thin-box">
+				<div class="form-horizontal container-fluid scheduler" data-initialize="scheduler" role="form" id="myScheduler">
+					<div class="form-group start-datetime">
+						<label class="col-sm-2 control-label scheduler-label" for="myStartDate">Start Date</label>
+						<div class="row col-sm-10">
+							<div class="col-sm-8 form-group">
+								<div class="datepicker start-date">
+									<div class="input-group">
+										<input class="form-control" id="myStartDate" type="text" />
+										<div class="input-group-btn">
+											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+												<span class="glyphicon glyphicon-calendar"></span>
+												<span class="sr-only">Toggle Calendar</span>
+											</button>
+											<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
+												<div class="datepicker-calendar">
+													<div class="datepicker-calendar-header">
+														<button class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span>
+														</button>
+														<button class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span>
+														</button>
+														<button class="title">
+															<span class="month">
+														<span data-month="0">January</span>
+															<span data-month="1">February</span>
+															<span data-month="2">March</span>
+															<span data-month="3">April</span>
+															<span data-month="4">May</span>
+															<span data-month="5">June</span>
+															<span data-month="6">July</span>
+															<span data-month="7">August</span>
+															<span data-month="8">September</span>
+															<span data-month="9">October</span>
+															<span data-month="10">November</span>
+															<span data-month="11">December</span>
+															</span> <span class="year"></span>
+														</button>
+													</div>
+													<table class="datepicker-calendar-days">
+														<thead>
+															<tr>
+																<th>Su</th>
+																<th>Mo</th>
+																<th>Tu</th>
+																<th>We</th>
+																<th>Th</th>
+																<th>Fr</th>
+																<th>Sa</th>
+															</tr>
+														</thead>
+														<tbody></tbody>
+													</table>
+													<div class="datepicker-calendar-footer">
+														<button class="datepicker-today">Today</button>
+													</div>
+												</div>
+												<div class="datepicker-wheels" aria-hidden="true">
+													<div class="datepicker-wheels-month">
+														<h2 class="header">Month</h2>
+														<ul>
+															<li data-month="0">
+																<button>Jan</button>
+															</li>
+															<li data-month="1">
+																<button>Feb</button>
+															</li>
+															<li data-month="2">
+																<button>Mar</button>
+															</li>
+															<li data-month="3">
+																<button>Apr</button>
+															</li>
+															<li data-month="4">
+																<button>May</button>
+															</li>
+															<li data-month="5">
+																<button>Jun</button>
+															</li>
+															<li data-month="6">
+																<button>Jul</button>
+															</li>
+															<li data-month="7">
+																<button>Aug</button>
+															</li>
+															<li data-month="8">
+																<button>Sep</button>
+															</li>
+															<li data-month="9">
+																<button>Oct</button>
+															</li>
+															<li data-month="10">
+																<button>Nov</button>
+															</li>
+															<li data-month="11">
+																<button>Dec</button>
+															</li>
+														</ul>
+													</div>
+													<div class="datepicker-wheels-year">
+														<h2 class="header">Year</h2>
+														<ul></ul>
+													</div>
+													<div class="datepicker-wheels-footer clearfix">
+														<button class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span>
+														</button>
+														<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span>
+														</button>
+													</div>
+												</div>
+											</div>
 										</div>
-										<div class="datepicker-wheels-year">
-											<h2 class="header">Year</h2>
-											<ul></ul>
+									</div>
+								</div>
+							</div>
+
+							<div class="col-sm-4 form-group">
+								<label class="sr-only" for="myStartTime">Start Time</label>
+								<div class="input-group combobox start-time">
+									<input id="myStartTime" type="text" class="form-control" />
+									<div class="input-group-btn">
+										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+											<span class="caret"></span>
+											<span class="sr-only">Toggle Dropdown</span>
+										</button>
+										<ul class="dropdown-menu dropdown-menu-right" role="menu">
+											<li><a href="#">12:00 AM</a>
+											</li>
+											<li><a href="#">12:30 AM</a>
+											</li>
+											<li><a href="#">1:00 AM</a>
+											</li>
+											<li><a href="#">1:30 AM</a>
+											</li>
+											<li><a href="#">2:00 AM</a>
+											</li>
+											<li><a href="#">2:30 AM</a>
+											</li>
+											<li><a href="#">3:00 AM</a>
+											</li>
+											<li><a href="#">3:30 AM</a>
+											</li>
+											<li><a href="#">4:00 AM</a>
+											</li>
+											<li><a href="#">4:30 AM</a>
+											</li>
+											<li><a href="#">5:00 AM</a>
+											</li>
+											<li><a href="#">5:30 AM</a>
+											</li>
+											<li><a href="#">6:00 AM</a>
+											</li>
+											<li><a href="#">6:30 AM</a>
+											</li>
+											<li><a href="#">7:00 AM</a>
+											</li>
+											<li><a href="#">7:30 AM</a>
+											</li>
+											<li><a href="#">8:00 AM</a>
+											</li>
+											<li><a href="#">8:30 AM</a>
+											</li>
+											<li><a href="#">9:00 AM</a>
+											</li>
+											<li><a href="#">9:30 AM</a>
+											</li>
+											<li><a href="#">10:00 AM</a>
+											</li>
+											<li><a href="#">10:30 AM</a>
+											</li>
+											<li><a href="#">11:00 AM</a>
+											</li>
+											<li><a href="#">11:30 AM</a>
+											</li>
+											<li><a href="#">12:00 PM</a>
+											</li>
+											<li><a href="#">12:30 PM</a>
+											</li>
+											<li><a href="#">1:00 PM</a>
+											</li>
+											<li><a href="#">1:30 PM</a>
+											</li>
+											<li><a href="#">2:00 PM</a>
+											</li>
+											<li><a href="#">2:30 PM</a>
+											</li>
+											<li><a href="#">3:00 PM</a>
+											</li>
+											<li><a href="#">3:30 PM</a>
+											</li>
+											<li><a href="#">4:00 PM</a>
+											</li>
+											<li><a href="#">4:30 PM</a>
+											</li>
+											<li><a href="#">5:00 PM</a>
+											</li>
+											<li><a href="#">5:30 PM</a>
+											</li>
+											<li><a href="#">6:00 PM</a>
+											</li>
+											<li><a href="#">6:30 PM</a>
+											</li>
+											<li><a href="#">7:00 PM</a>
+											</li>
+											<li><a href="#">7:30 PM</a>
+											</li>
+											<li><a href="#">8:00 PM</a>
+											</li>
+											<li><a href="#">8:30 PM</a>
+											</li>
+											<li><a href="#">9:00 PM</a>
+											</li>
+											<li><a href="#">9:30 PM</a>
+											</li>
+											<li><a href="#">10:00 PM</a>
+											</li>
+											<li><a href="#">10:30 PM</a>
+											</li>
+											<li><a href="#">11:00 PM</a>
+											</li>
+											<li><a href="#">11:30 PM</a>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="row form-group timezone-container">
+						<label class="col-sm-2 control-label scheduler-label">Timezone</label>
+						<div class="col-xs-12 col-sm-10 col-md-10">
+							<div data-resize="auto" class="btn-group selectlist timezone">
+								<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+									<span class="selected-label">(GMT-06:00) Central Standard Time</span>
+									<span class="caret"></span>
+									<span class="sr-only">Toggle Dropdown</span>
+								</button>
+								<ul class="dropdown-menu" role="menu">
+									<li data-name="Central Standard Time (no DST)" data-offset="-06:00"><a href="#">(GMT-06:00) Central Standard Time</a>
+									</li>
+									<li data-name="Morocco Standard Time" data-offset="+00:00"><a href="#">(GMT) Casablanca *</a>
+									</li>
+									<li data-name="GMT Standard Time" data-offset="+00:00"><a href="#">(GMT) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London *</a>
+									</li>
+									<li data-name="Greenwich Standard Time" data-offset="+00:00"><a href="#">(GMT) Monrovia, Reykjavik</a>
+									</li>
+									<li data-name="W. Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna *</a>
+									</li>
+									<li data-name="Central Europe Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague *</a>
+									</li>
+									<li data-name="Romance Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris *</a>
+									</li>
+									<li data-name="Central European Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb *</a>
+									</li>
+									<li data-name="W. Central Africa Standard Time" data-offset="+01:00"><a href="#">(GMT+01:00) West Central Africa</a>
+									</li>
+									<li data-name="Jordan Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Amman *</a>
+									</li>
+									<li data-name="GTB Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Athens, Bucharest, Istanbul *</a>
+									</li>
+									<li data-name="Middle East Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Beirut *</a>
+									</li>
+									<li data-name="Egypt Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Cairo *</a>
+									</li>
+									<li data-name="South Africa Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Harare, Pretoria</a>
+									</li>
+									<li data-name="FLE Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius *</a>
+									</li>
+									<li data-name="Israel Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Jerusalem *</a>
+									</li>
+									<li data-name="E. Europe Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Minsk *</a>
+									</li>
+									<li data-name="Namibia Standard Time" data-offset="+02:00"><a href="#">(GMT+02:00) Windhoek *</a>
+									</li>
+									<li data-name="Arabic Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Baghdad *</a>
+									</li>
+									<li data-name="Arab Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Kuwait, Riyadh</a>
+									</li>
+									<li data-name="Russian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Moscow, St. Petersburg, Volgograd *</a>
+									</li>
+									<li data-name="E. Africa Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Nairobi</a>
+									</li>
+									<li data-name="Georgian Standard Time" data-offset="+03:00"><a href="#">(GMT+03:00) Tbilisi</a>
+									</li>
+									<li data-name="Iran Standard Time" data-offset="+03:30"><a href="#">(GMT+03:30) Tehran *</a>
+									</li>
+									<li data-name="Arabian Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Abu Dhabi, Muscat</a>
+									</li>
+									<li data-name="Azerbaijan Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Baku *</a>
+									</li>
+									<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Caucasus Standard Time</a>
+									</li>
+									<li data-name="Mauritius Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Port Louis *</a>
+									</li>
+									<li data-name="Caucasus Standard Time" data-offset="+04:00"><a href="#">(GMT+04:00) Yerevan</a>
+									</li>
+									<li data-name="Afghanistan Standard Time" data-offset="+04:30"><a href="#">(GMT+04:30) Kabul</a>
+									</li>
+									<li data-name="Ekaterinburg Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Ekaterinburg *</a>
+									</li>
+									<li data-name="Pakistan Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Islamabad, Karachi *</a>
+									</li>
+									<li data-name="West Asia Standard Time" data-offset="+05:00"><a href="#">(GMT+05:00) Tashkent</a>
+									</li>
+									<li data-name="India Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</a>
+									</li>
+									<li data-name="Sri Lanka Standard Time" data-offset="+05:30"><a href="#">(GMT+05:30) Sri Jayawardenepura</a>
+									</li>
+									<li data-name="Nepal Standard Time" data-offset="+05:45"><a href="#">(GMT+05:45) Kathmandu</a>
+									</li>
+									<li data-name="N. Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Almaty, Novosibirsk *</a>
+									</li>
+									<li data-name="Central Asia Standard Time" data-offset="+06:00"><a href="#">(GMT+06:00) Astana, Dhaka</a>
+									</li>
+									<li data-name="Myanmar Standard Time" data-offset="+06:00"><a href="#">(GMT+06:30) Yangon (Rangoon)</a>
+									</li>
+									<li data-name="SE Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Bangkok, Hanoi, Jakarta</a>
+									</li>
+									<li data-name="North Asia Standard Time" data-offset="+07:00"><a href="#">(GMT+07:00) Krasnoyarsk *</a>
+									</li>
+									<li data-name="China Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</a>
+									</li>
+									<li data-name="North Asia East Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Irkutsk, Ulaan Bataar *</a>
+									</li>
+									<li data-name="Singapore Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Kuala Lumpur, Singapore</a>
+									</li>
+									<li data-name="W. Australia Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Perth *</a>
+									</li>
+									<li data-name="Taipei Standard Time" data-offset="+08:00"><a href="#">(GMT+08:00) Taipei</a>
+									</li>
+									<li data-name="Tokyo Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Osaka, Sapporo, Tokyo</a>
+									</li>
+									<li data-name="Korea Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Seoul</a>
+									</li>
+									<li data-name="Yakutsk Standard Time" data-offset="+09:00"><a href="#">(GMT+09:00) Yakutsk *</a>
+									</li>
+									<li data-name="Cen. Australia Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Adelaide *</a>
+									</li>
+									<li data-name="AUS Central Standard Time" data-offset="+09:30"><a href="#">(GMT+09:30) Darwin</a>
+									</li>
+									<li data-name="E. Australia Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Brisbane</a>
+									</li>
+									<li data-name="AUS Eastern Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Canberra, Melbourne, Sydney *</a>
+									</li>
+									<li data-name="West Pacific Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Guam, Port Moresby</a>
+									</li>
+									<li data-name="Tasmania Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Hobart *</a>
+									</li>
+									<li data-name="Vladivostok Standard Time" data-offset="+10:00"><a href="#">(GMT+10:00) Vladivostok *</a>
+									</li>
+									<li data-name="Central Pacific Standard Time" data-offset="+11:00"><a href="#">(GMT+11:00) Magadan, Solomon Is., New Caledonia</a>
+									</li>
+									<li data-name="New Zealand Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Auckland, Wellington *</a>
+									</li>
+									<li data-name="Fiji Standard Time" data-offset="+12:00"><a href="#">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</a>
+									</li>
+									<li data-name="Tonga Standard Time" data-offset="+12:00"><a href="#">(GMT+13:00) Nukualofa</a>
+									</li>
+									<li data-name="Azores Standard Time" data-offset="+12:00"><a href="#">(GMT-01:00) Azores *</a>
+									</li>
+									<li data-name="Cape Verde Standard Time" data-offset="-01:00"><a href="#">(GMT-01:00) Cape Verde Is.</a>
+									</li>
+									<li data-name="Mid-Atlantic Standard Time" data-offset="-02:00"><a href="#">(GMT-02:00) Mid-Atlantic *</a>
+									</li>
+									<li data-name="E. South America Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Brasilia *</a>
+									</li>
+									<li data-name="Argentina Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Buenos Aires *</a>
+									</li>
+									<li data-name="SA Western Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Georgetown</a>
+									</li>
+									<li data-name="Greenland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Greenland *</a>
+									</li>
+									<li data-name="Montevideo Standard Time" data-offset="-03:00"><a href="#">(GMT-03:00) Montevideo *</a>
+									</li>
+									<li data-name="Newfoundland Standard Time" data-offset="-03:00"><a href="#">(GMT-03:30) Newfoundland *</a>
+									</li>
+									<li data-name="Atlantic Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Atlantic Time (Canada) *</a>
+									</li>
+									<li data-name="SA Western Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) La Paz</a>
+									</li>
+									<li data-name="Central Brazilian Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Manaus *</a>
+									</li>
+									<li data-name="Pacific SA Standard Time" data-offset="-04:00"><a href="#">(GMT-04:00) Santiago *</a>
+									</li>
+									<li data-name="Venezuela Standard Time" data-offset="-04:30"><a href="#">(GMT-04:30) Caracas</a>
+									</li>
+									<li data-name="SA Pacific Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</a>
+									</li>
+									<li data-name="Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Eastern Time (US &amp; Canada) *</a>
+									</li>
+									<li data-name="US Eastern Standard Time" data-offset="-05:00"><a href="#">(GMT-05:00) Indiana (East)</a>
+									</li>
+									<li data-name="Central America Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central America</a>
+									</li>
+									<li data-name="Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Central Time (US &amp; Canada) *</a>
+									</li>
+									<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - New *</a>
+									</li>
+									<li data-name="Central Standard Time (Mexico)" data-offset="-06:00"><a href="#">(GMT-06:00) Guadalajara, Mexico City, Monterrey - Old</a>
+									</li>
+									<li data-name="Canada Central Standard Time" data-offset="-06:00"><a href="#">(GMT-06:00) Saskatchewan</a>
+									</li>
+									<li data-name="US Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Arizona</a>
+									</li>
+									<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - New *</a>
+									</li>
+									<li data-name="Mountain Standard Time (Mexico)" data-offset="-07:00"><a href="#">(GMT-07:00) Chihuahua, La Paz, Mazatlan - Old</a>
+									</li>
+									<li data-name="Mountain Standard Time" data-offset="-07:00"><a href="#">(GMT-07:00) Mountain Time (US &amp; Canada) *</a>
+									</li>
+									<li data-name="Pacific Standard Time" data-offset="-08:00"><a href="#">(GMT-08:00) Pacific Time (US &amp; Canada) *</a>
+									</li>
+									<li data-name="Pacific Standard Time (Mexico)" data-offset="-08:00"><a href="#">(GMT-08:00) Tijuana, Baja California *</a>
+									</li>
+									<li data-name="Alaskan Standard Time" data-offset="-09:00"><a href="#">(GMT-09:00) Alaska *</a>
+									</li>
+									<li data-name="Hawaiian Standard Time" data-offset="-10:00"><a href="#">(GMT-10:00) Hawaii</a>
+									</li>
+									<li data-name="Samoa Standard Time" data-offset="-11:00"><a href="#">(GMT-11:00) Midway Island, Samoa</a>
+									</li>
+									<li data-name="Dateline Standard Time" data-offset="-12:00"><a href="#">(GMT-12:00) International Date Line West</a>
+									</li>
+								</ul>
+								<input type="text" aria-hidden="true" readonly="readonly" name="TimeZoneSelectlist" class="hidden hidden-field">
+							</div>
+						</div>
+					</div>
+
+					<div class="form-group repeat-container">
+						<label class="col-sm-2 control-label scheduler-label">Repeat</label>
+						<div class="col-sm-10">
+
+							<div class="form-group repeat-interval">
+								<div data-resize="auto" class="btn-group selectlist pull-left repeat-options">
+									<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+										<span class="selected-label">None (run once)</span>
+										<span class="caret"></span>
+									</button>
+									<ul class="dropdown-menu" role="menu">
+										<li data-value="none"><a href="#">None (run once)</a>
+										</li>
+										<li data-value="hourly" data-text="hour(s)"><a href="#">Hourly</a>
+										</li>
+										<li data-value="daily" data-text="day(s)"><a href="#">Daily</a>
+										</li>
+										<li data-value="weekdays"><a href="#">Weekdays</a>
+										</li>
+										<li data-value="weekly" data-text="week(s)"><a href="#">Weekly</a>
+										</li>
+										<li data-value="monthly" data-text="month(s)"><a href="#">Monthly</a>
+										</li>
+										<li data-value="yearly"><a href="#">Yearly</a>
+										</li>
+									</ul>
+									<input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
+								</div>
+
+								<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide" aria-hidden="true">
+									<label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>
+
+									<div class="spinbox digits-3 repeat-every">
+										<input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
+										<div class="spinbox-buttons btn-group btn-group-vertical">
+											<button type="button" class="btn btn-default spinbox-up btn-xs">
+												<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
+											</button>
+											<button type="button" class="btn btn-default spinbox-down btn-xs">
+												<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
+											</button>
 										</div>
-										<div class="datepicker-wheels-footer clearfix">
-											<button class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
-											<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
+									</div>
+
+									<div class="inline-form-text repeat-every-text"></div>
+								</div>
+							</div>
+
+							<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide" aria-hidden="true">
+								<fieldset class="btn-group" data-toggle="buttons">
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="SU">Sun
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="MO">Mon
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="TU">Tue
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="WE"> Wed
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="TH"> Thu
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="FR"> Fri
+									</label>
+									<label class="btn btn-default">
+										<input type="checkbox" data-value="SA"> Sat
+									</label>
+								</fieldset>
+							</div>
+
+							<div class="repeat-panel repeat-monthly hide" aria-hidden="true">
+								<div class="form-group repeat-monthly-date">
+									<div class="radio pull-left">
+										<label class="radio-custom">
+											<input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bymonthday">
+											<span class="radio-label">on day</span>
+										</label>
+									</div>
+
+									<div data-resize="auto" class="btn-group selectlist pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">1</span>
+											<span class="caret"></span>
+										</button>
+										<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
+											<li data-value="1"><a href="#">1</a>
+											</li>
+											<li data-value="2"><a href="#">2</a>
+											</li>
+											<li data-value="3"><a href="#">3</a>
+											</li>
+											<li data-value="4"><a href="#">4</a>
+											</li>
+											<li data-value="5"><a href="#">5</a>
+											</li>
+											<li data-value="6"><a href="#">6</a>
+											</li>
+											<li data-value="7"><a href="#">7</a>
+											</li>
+											<li data-value="8"><a href="#">8</a>
+											</li>
+											<li data-value="9"><a href="#">9</a>
+											</li>
+											<li data-value="10"><a href="#">10</a>
+											</li>
+											<li data-value="11"><a href="#">11</a>
+											</li>
+											<li data-value="12"><a href="#">12</a>
+											</li>
+											<li data-value="13"><a href="#">13</a>
+											</li>
+											<li data-value="14"><a href="#">14</a>
+											</li>
+											<li data-value="15"><a href="#">15</a>
+											</li>
+											<li data-value="16"><a href="#">16</a>
+											</li>
+											<li data-value="17"><a href="#">17</a>
+											</li>
+											<li data-value="18"><a href="#">18</a>
+											</li>
+											<li data-value="19"><a href="#">19</a>
+											</li>
+											<li data-value="20"><a href="#">20</a>
+											</li>
+											<li data-value="21"><a href="#">21</a>
+											</li>
+											<li data-value="22"><a href="#">22</a>
+											</li>
+											<li data-value="23"><a href="#">23</a>
+											</li>
+											<li data-value="24"><a href="#">24</a>
+											</li>
+											<li data-value="25"><a href="#">25</a>
+											</li>
+											<li data-value="26"><a href="#">26</a>
+											</li>
+											<li data-value="27"><a href="#">27</a>
+											</li>
+											<li data-value="28"><a href="#">28</a>
+											</li>
+											<li data-value="29"><a href="#">29</a>
+											</li>
+											<li data-value="30"><a href="#">30</a>
+											</li>
+											<li data-value="31"><a href="#">31</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+									</div>
+								</div>
+
+								<div class="repeat-monthly-day form-group">
+									<div class="radio pull-left">
+										<label class="radio-custom">
+											<input class="sr-only" type="radio" checked="checked" name="repeat-monthly" value="bysetpos">
+											<span class="radio-label">on the</span>
+										</label>
+									</div>
+									<div data-resize="auto" class="btn-group selectlist month-day-pos pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">First</span>
+											<span class="caret"></span>
+										</button>
+										<ul class="dropdown-menu" role="menu">
+											<li data-value="1"><a href="#">First</a>
+											</li>
+											<li data-value="2"><a href="#">Second</a>
+											</li>
+											<li data-value="3"><a href="#">Third</a>
+											</li>
+											<li data-value="4"><a href="#">Fourth</a>
+											</li>
+											<li data-value="-1"><a href="#">Last</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+									</div>
+									<div data-resize="auto" class="btn-group selectlist month-days pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">Sunday</span>
+											<span class="caret"></span>
+										</button>
+										<ul class="dropdown-menu" role="menu">
+											<li data-value="SU"><a href="#">Sunday</a>
+											</li>
+											<li data-value="MO"><a href="#">Monday</a>
+											</li>
+											<li data-value="TU"><a href="#">Tuesday</a>
+											</li>
+											<li data-value="WE"><a href="#">Wednesday</a>
+											</li>
+											<li data-value="TH"><a href="#">Thursday</a>
+											</li>
+											<li data-value="FR"><a href="#">Friday</a>
+											</li>
+											<li data-value="SA"><a href="#">Saturday</a>
+											</li>
+											<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a>
+											</li>
+											<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a>
+											</li>
+											<li data-value="SU,SA"><a href="#">Weekend day</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+									</div>
+								</div>
+							</div>
+
+							<div class="repeat-panel repeat-yearly hide" aria-hidden="true">
+								<div class="form-group repeat-yearly-date">
+									<div class="radio pull-left">
+										<label class="radio-custom">
+											<input class="sr-only" type="radio" checked="checked" name="repeat-yearly" value="bymonthday">
+											<span class="radio-label">on</span>
+										</label>
+									</div>
+									<div data-resize="auto" class="btn-group selectlist year-month pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">January</span>
+											<span class="caret"></span>
+										</button>
+										<ul class="dropdown-menu" role="menu">
+											<li data-value="1"><a href="#">January</a>
+											</li>
+											<li data-value="2"><a href="#">February</a>
+											</li>
+											<li data-value="3"><a href="#">March</a>
+											</li>
+											<li data-value="4"><a href="#">April</a>
+											</li>
+											<li data-value="5"><a href="#">May</a>
+											</li>
+											<li data-value="6"><a href="#">June</a>
+											</li>
+											<li data-value="7"><a href="#">July</a>
+											</li>
+											<li data-value="8"><a href="#">August</a>
+											</li>
+											<li data-value="9"><a href="#">September</a>
+											</li>
+											<li data-value="10"><a href="#">October</a>
+											</li>
+											<li data-value="11"><a href="#">November</a>
+											</li>
+											<li data-value="12"><a href="#">December</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+									</div>
+									<div data-resize="auto" class="btn-group selectlist year-month-day pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">1</span>
+											<span class="caret"></span>
+										</button>
+										<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
+											<li data-value="1"><a href="#">1</a>
+											</li>
+											<li data-value="2"><a href="#">2</a>
+											</li>
+											<li data-value="3"><a href="#">3</a>
+											</li>
+											<li data-value="4"><a href="#">4</a>
+											</li>
+											<li data-value="5"><a href="#">5</a>
+											</li>
+											<li data-value="6"><a href="#">6</a>
+											</li>
+											<li data-value="7"><a href="#">7</a>
+											</li>
+											<li data-value="8"><a href="#">8</a>
+											</li>
+											<li data-value="9"><a href="#">9</a>
+											</li>
+											<li data-value="10"><a href="#">10</a>
+											</li>
+											<li data-value="11"><a href="#">11</a>
+											</li>
+											<li data-value="12"><a href="#">12</a>
+											</li>
+											<li data-value="13"><a href="#">13</a>
+											</li>
+											<li data-value="14"><a href="#">14</a>
+											</li>
+											<li data-value="15"><a href="#">15</a>
+											</li>
+											<li data-value="16"><a href="#">16</a>
+											</li>
+											<li data-value="17"><a href="#">17</a>
+											</li>
+											<li data-value="18"><a href="#">18</a>
+											</li>
+											<li data-value="19"><a href="#">19</a>
+											</li>
+											<li data-value="20"><a href="#">20</a>
+											</li>
+											<li data-value="21"><a href="#">21</a>
+											</li>
+											<li data-value="22"><a href="#">22</a>
+											</li>
+											<li data-value="23"><a href="#">23</a>
+											</li>
+											<li data-value="24"><a href="#">24</a>
+											</li>
+											<li data-value="25"><a href="#">25</a>
+											</li>
+											<li data-value="26"><a href="#">26</a>
+											</li>
+											<li data-value="27"><a href="#">27</a>
+											</li>
+											<li data-value="28"><a href="#">28</a>
+											</li>
+											<li data-value="29"><a href="#">29</a>
+											</li>
+											<li data-value="30"><a href="#">30</a>
+											</li>
+											<li data-value="31"><a href="#">31</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="monthlySelectlist" class="hidden hidden-field">
+									</div>
+								</div>
+
+								<div class="form-group repeat-yearly-day">
+									<div class="radio pull-left">
+										<label class="radio-custom">
+											<input class="sr-only" type="radio" name="repeat-yearly" value="bysetpos"> on the</label>
+									</div>
+									<div data-resize="auto" class="btn-group selectlist year-month-day-pos pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">First</span>
+											<span class="caret"></span>
+											<span class="sr-only">First</span>
+										</button>
+										<ul class="dropdown-menu" role="menu">
+											<li data-value="1"><a href="#">First</a>
+											</li>
+											<li data-value="2"><a href="#">Second</a>
+											</li>
+											<li data-value="3"><a href="#">Third</a>
+											</li>
+											<li data-value="4"><a href="#">Fourth</a>
+											</li>
+											<li data-value="5"><a href="#">Last</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDateSelectlist" class="hidden hidden-field">
+									</div>
+
+									<div data-resize="auto" class="btn-group selectlist year-month-days pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">Sunday</span>
+											<span class="caret"></span>
+											<span class="sr-only">Sunday</span>
+										</button>
+										<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
+											<li data-value="SU"><a href="#">Sunday</a>
+											</li>
+											<li data-value="MO"><a href="#">Monday</a>
+											</li>
+											<li data-value="TU"><a href="#">Tuesday</a>
+											</li>
+											<li data-value="WE"><a href="#">Wednesday</a>
+											</li>
+											<li data-value="TH"><a href="#">Thursday</a>
+											</li>
+											<li data-value="FR"><a href="#">Friday</a>
+											</li>
+											<li data-value="SA"><a href="#">Saturday</a>
+											</li>
+											<li data-value="SU,MO,TU,WE,TH,FR,SA"><a href="#">Day</a>
+											</li>
+											<li data-value="MO,TU,WE,TH,FR"><a href="#">Weekday</a>
+											</li>
+											<li data-value="SU,SA"><a href="#">Weekend day</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
+									</div>
+									<div class="inline-form-text repeat-yearly-day-text"> of </div>
+
+									<div data-resize="auto" class="btn-group selectlist year-month pull-left">
+										<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+											<span class="selected-label">January</span>
+											<span class="caret"></span>
+											<span class="sr-only">January</span>
+										</button>
+										<ul class="dropdown-menu" role="menu" style="height:200px; overflow:auto;">
+											<li data-value="1"><a href="#">January</a>
+											</li>
+											<li data-value="2"><a href="#">February</a>
+											</li>
+											<li data-value="3"><a href="#">March</a>
+											</li>
+											<li data-value="4"><a href="#">April</a>
+											</li>
+											<li data-value="5"><a href="#">May</a>
+											</li>
+											<li data-value="6"><a href="#">June</a>
+											</li>
+											<li data-value="7"><a href="#">July</a>
+											</li>
+											<li data-value="8"><a href="#">August</a>
+											</li>
+											<li data-value="9"><a href="#">September</a>
+											</li>
+											<li data-value="10"><a href="#">October</a>
+											</li>
+											<li data-value="11"><a href="#">November</a>
+											</li>
+											<li data-value="12"><a href="#">December</a>
+											</li>
+										</ul>
+										<input type="text" aria-hidden="true" readonly="readonly" name="yearlyDaySelectlist" class="hidden hidden-field">
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="form-group repeat-end hide" aria-hidden="true">
+						<label class="col-sm-2 control-label scheduler-label">End</label>
+						<div class="col-sm-10 row">
+							<div class="col-sm-3 form-group">
+								<div data-resize="auto" class="btn-group selectlist end-options pull-left">
+									<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+										<span class="selected-label">Never</span>
+										<span class="caret"></span>
+										<span class="sr-only">Never</span>
+									</button>
+									<ul class="dropdown-menu" role="menu">
+										<li data-value="never"><a href="#">Never</a>
+										</li>
+										<li data-value="after"><a href="#">After</a>
+										</li>
+										<li data-value="date"><a href="#">On date</a>
+										</li>
+									</ul>
+									<input type="text" aria-hidden="true" readonly="readonly" name="EndSelectlist" class="hidden hidden-field">
+								</div>
+							</div>
+
+							<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left hide" aria-hidden="true">
+								<div class="spinbox digits-3 end-after">
+									<label id="MyEndAfter" class="sr-only">End After</label>
+									<input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
+									<div class="spinbox-buttons btn-group btn-group-vertical">
+										<button type="button" class="btn btn-default spinbox-up btn-xs">
+											<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
+										</button>
+										<button type="button" class="btn btn-default spinbox-down btn-xs">
+											<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
+										</button>
+									</div>
+								</div>
+								<div class="inline-form-text end-after-text">occurance(s)</div>
+							</div>
+
+							<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left hide" aria-hidden="true">
+								<div class="datepicker input-group end-on-date">
+									<div class="input-group">
+										<input class="form-control" type="text" />
+										<div class="input-group-btn">
+											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+												<span class="glyphicon glyphicon-calendar"></span>
+												<span class="sr-only">Toggle Calendar</span>
+											</button>
+											<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
+												<div class="datepicker-calendar">
+													<div class="datepicker-calendar-header">
+														<button class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span>
+														</button>
+														<button class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span>
+														</button>
+														<button class="title">
+															<span class="month">
+														<span data-month="0">January</span>
+															<span data-month="1">February</span>
+															<span data-month="2">March</span>
+															<span data-month="3">April</span>
+															<span data-month="4">May</span>
+															<span data-month="5">June</span>
+															<span data-month="6">July</span>
+															<span data-month="7">August</span>
+															<span data-month="8">September</span>
+															<span data-month="9">October</span>
+															<span data-month="10">November</span>
+															<span data-month="11">December</span>
+															</span> <span class="year"></span>
+														</button>
+													</div>
+													<table class="datepicker-calendar-days">
+														<thead>
+															<tr>
+																<th>Su</th>
+																<th>Mo</th>
+																<th>Tu</th>
+																<th>We</th>
+																<th>Th</th>
+																<th>Fr</th>
+																<th>Sa</th>
+															</tr>
+														</thead>
+														<tbody></tbody>
+													</table>
+													<div class="datepicker-calendar-footer">
+														<button class="datepicker-today">Today</button>
+													</div>
+												</div>
+												<div class="datepicker-wheels" aria-hidden="true">
+													<div class="datepicker-wheels-month">
+														<h2 class="header">Month</h2>
+														<ul>
+															<li data-month="0">
+																<button>Jan</button>
+															</li>
+															<li data-month="1">
+																<button>Feb</button>
+															</li>
+															<li data-month="2">
+																<button>Mar</button>
+															</li>
+															<li data-month="3">
+																<button>Apr</button>
+															</li>
+															<li data-month="4">
+																<button>May</button>
+															</li>
+															<li data-month="5">
+																<button>Jun</button>
+															</li>
+															<li data-month="6">
+																<button>Jul</button>
+															</li>
+															<li data-month="7">
+																<button>Aug</button>
+															</li>
+															<li data-month="8">
+																<button>Sep</button>
+															</li>
+															<li data-month="9">
+																<button>Oct</button>
+															</li>
+															<li data-month="10">
+																<button>Nov</button>
+															</li>
+															<li data-month="11">
+																<button>Dec</button>
+															</li>
+														</ul>
+													</div>
+													<div class="datepicker-wheels-year">
+														<h2 class="header">Year</h2>
+														<ul></ul>
+													</div>
+													<div class="datepicker-wheels-footer clearfix">
+														<button class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span>
+														</button>
+														<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span>
+														</button>
+													</div>
+												</div>
+											</div>
 										</div>
 									</div>
 								</div>
@@ -1287,205 +2119,224 @@ <h2 class="header">Year</h2>
 					</div>
 				</div>
 			</div>
-		</div>
-		</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnSchedulerEnable">enable</button>
-			<button type="button" class="btn btn-default" id="btnSchedulerDisable">disable</button>
-			<button type="button" class="btn btn-default" id="btnSchedulerLogValue">log value</button>
-			<button type="button" class="btn btn-default" id="btnSchedulerSetValue">set value</button>
-			<button type="button" class="btn btn-default" id="btnSchedulerDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="search">Search</h2>
-		<div class="thin-box">
-			<div class="search input-group" data-initialize="search" role="search" id="mySearch">
-				<input type="search" class="form-control" placeholder="Search"/>
-						<span class="input-group-btn">
-							<button class="btn btn-default" type="button">
-								<span class="glyphicon glyphicon-search"></span>
-								<span class="sr-only">Search</span>
-							</button>
-						</span>
-			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnSearchDisable">disable</button>
-			<button type="button" class="btn btn-default" id="btnSearchEnable">enable</button>
-			<button type="button" class="btn btn-default" id="btnSearchDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="selectlist">Selectlist</h2>
-		<div class="thin-box">
-			<div class="btn-group selectlist" data-initialize="selectlist" data-resize="auto" id="mySelectlist">
-				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-					<span class="selected-label">&nbsp;</span>
-					<span class="caret"></span>
-					<span class="sr-only">Toggle Dropdown</span>
-				</button>
-				<ul class="dropdown-menu" role="menu">
-					<li data-value="1"><a href="#">One</a></li>
-					<li data-value="2"><a href="#">Two</a></li>
-					<li data-selected="true" data-value="3"><a href="#">Three</a></li>
-					<li data-value="4"><a href="#">Buzz</a></li>
-					<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a></li>
-				</ul>
-				<input class="hidden hidden-field" name="mySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnSchedulerEnable">enable</button>
+				<button type="button" class="btn btn-default" id="btnSchedulerDisable">disable</button>
+				<button type="button" class="btn btn-default" id="btnSchedulerLogValue">log value</button>
+				<button type="button" class="btn btn-default" id="btnSchedulerSetValue">set value</button>
+				<button type="button" class="btn btn-default" id="btnSchedulerDestroy">destroy and append</button>
 			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnSelectlistGetSelectedItem">log selected item/value</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistSelectByValue">set by value (2)</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistSelectByIndex">set by element index (zero-based) ('4')</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistSelectByText">set by text ('One')</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistSelectBySelector">set by CSS selector ('li[data-fizz=buzz]')</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistEnableSelectlist">enable</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistDisableSelectlist">disable</button>
-			<button type="button" class="btn btn-default" id="btnSelectlistDestroy">destroy and append</button>
-		</div>
-
-		<h2 id="spinbox">Spinbox</h2>
-		<div class="thin-box">
-			<div class="spinbox" data-initialize="spinbox" id="mySpinbox1">
-				<input class="form-control input-mini spinbox-input" id="mySpinboxInput1" type="text" value="10">
-				<div class="spinbox-buttons btn-group btn-group-vertical">
-					<button class="btn btn-default spinbox-up btn-xs">
-						<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
-					</button>
-					<button class="btn btn-default spinbox-down btn-xs">
-						<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
+		</section>
+
+		<section id="search">
+			<h2>Search</h2>
+			<div class="thin-box">
+				<div class="search input-group" data-initialize="search" role="search" id="mySearch">
+					<input type="search" class="form-control" placeholder="Search" />
+					<span class="input-group-btn">
+								<button class="btn btn-default" type="button">
+									<span class="glyphicon glyphicon-search"></span>
+					<span class="sr-only">Search</span>
 					</button>
+					</span>
 				</div>
 			</div>
-			<div class="spinbox" id="mySpinbox2">
-				<input class="form-control input-mini spinbox-input" id="mySpinboxInput2" type="text" value="10">
-				<div class="spinbox-buttons btn-group btn-group-vertical">
-					<button class="btn btn-default spinbox-up btn-xs">
-						<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
-					</button>
-					<button class="btn btn-default spinbox-down btn-xs">
-						<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnSearchDisable">disable</button>
+				<button type="button" class="btn btn-default" id="btnSearchEnable">enable</button>
+				<button type="button" class="btn btn-default" id="btnSearchDestroy">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="selectlist">
+			<h2>Selectlist</h2>
+			<div class="thin-box">
+				<div class="btn-group selectlist" data-initialize="selectlist" data-resize="auto" id="mySelectlist">
+					<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+						<span class="selected-label">&nbsp;</span>
+						<span class="caret"></span>
+						<span class="sr-only">Toggle Dropdown</span>
 					</button>
+					<ul class="dropdown-menu" role="menu">
+						<li data-value="1"><a href="#">One</a>
+						</li>
+						<li data-value="2"><a href="#">Two</a>
+						</li>
+						<li data-selected="true" data-value="3"><a href="#">Three</a>
+						</li>
+						<li data-value="4"><a href="#">Buzz</a>
+						</li>
+						<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a>
+						</li>
+					</ul>
+					<input class="hidden hidden-field" name="mySelectlist" readonly="readonly" aria-hidden="true" type="text" />
 				</div>
 			</div>
-		</div>
-		<div class="btn-panel">
-			<button id="spinboxSetValueBtn" type="button" class="btn btn-default">set value (4)</button>
-			<button id="spinboxGetValueBtn" type="button" class="btn btn-default">get value</button>
-			<button id="enableSpinbox" type="button" class="btn btn-default">enable</button>
-			<button id="disableSpinbox" type="button" class="btn btn-default">disable</button>
-			<button id="btnSpinboxDestroy" type="button" class="btn btn-default">destroy and append</button>
-		</div>
-
-		<h2 id="tree">Tree</h2>
-		<div class="thin-box">
-			<ul class="tree" id="myTree1" role="tree">
-				<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
-					<div class="tree-branch-header">
-						<button class="tree-branch-name">
-							<span class="glyphicon icon-caret glyphicon-play"></span>
-							<span class="glyphicon icon-folder glyphicon-folder-close"></span>
-							<span class="tree-label"></span>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnSelectlistGetSelectedItem">log selected item/value</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistSelectByValue">set by value (2)</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistSelectByIndex">set by element index (zero-based) ('4')</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistSelectByText">set by text ('One')</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistSelectBySelector">set by CSS selector ('li[data-fizz=buzz]')</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistEnableSelectlist">enable</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistDisableSelectlist">disable</button>
+				<button type="button" class="btn btn-default" id="btnSelectlistDestroy">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="spinbox">
+			<h2>Spinbox</h2>
+			<div class="thin-box">
+				<div class="spinbox" data-initialize="spinbox" id="mySpinbox1">
+					<input class="form-control input-mini spinbox-input" id="mySpinboxInput1" type="text" value="10">
+					<div class="spinbox-buttons btn-group btn-group-vertical">
+						<button class="btn btn-default spinbox-up btn-xs">
+							<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
 						</button>
-					</div>
-					<ul class="tree-branch-children" role="group"></ul>
-					<div class="tree-loader" role="alert">Loading...</div>
-				</li>
-				<li class="tree-item hide" data-template="treeitem" role="treeitem">
-					<button class="tree-item-name">
-						<span class="glyphicon icon-item fueluxicon-bullet"></span>
-						<span class="tree-label"></span>
-					</button>
-				</li>
-			</ul>
-
-			<ul class="tree tree-folder-select" id="myTree2" role="tree">
-				<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
-					<div class="tree-branch-header">
-						<button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
-						<button class="tree-branch-name">
-							<span class="glyphicon icon-folder glyphicon-folder-close"></span>
-							<span class="tree-label"></span>
+						<button class="btn btn-default spinbox-down btn-xs">
+							<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
 						</button>
 					</div>
-					<ul class="tree-branch-children" role="group"></ul>
-					<div class="tree-loader" role="alert">Loading...</div>
-				</li>
-				<li class="tree-item hide" data-template="treeitem" role="treeitem">
-					<button class="tree-item-name">
-						<span class="glyphicon icon-item fueluxicon-bullet"></span>
-						<span class="tree-label"></span>
-					</button>
-				</li>
-			</ul>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnTreeDestroy">destroy and append</button>
-			<button type="button" class="btn btn-default" id="btnTreeDiscloseVisible">disclose visible</button>
-			<button type="button" class="btn btn-default" id="btnTreeDiscloseAll">disclose all</button>
-			<button type="button" class="btn btn-default" id="btnTreeCloseAll">close all</button>
-
-		</div>
-
-		<h2 id="wizard">Wizard</h2>
-		<div class="thin-box">
-			<div class="wizard" data-initialize="wizard" id="myWizard">
-				<ul class="steps">
-					<li data-step="1"><span class="badge">1</span>Campaign<span class="chevron"></span></li>
-					<li class="active" data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span></li>
-					<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span></li>
-					<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span></li>
-					<li data-step="5" data-name="distep"><span class="badge">5</span>Send<span class="chevron"></span></li>
-				</ul>
-				<div class="actions">
-					<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
-					<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span></button>
 				</div>
-				<div class="step-content">
-					<div class="step-pane active sample-pane alert" data-step="1">
-						<h4>Setup Campaign</h4>
-						<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
-						<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
-						<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
-					</div>
-					<div class="step-pane sample-pane alert-info alert" data-step="2">
-						<h4>Choose Recipients</h4>
-						<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
-						<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
-						<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
-					</div>
-					<div class="step-pane sample-pane alert-danger alert" data-step="3">
-						<h4>Design Template</h4>
-						<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
-						<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
-						<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
+				<div class="spinbox" id="mySpinbox2">
+					<input class="form-control input-mini spinbox-input" id="mySpinboxInput2" type="text" value="10">
+					<div class="spinbox-buttons btn-group btn-group-vertical">
+						<button class="btn btn-default spinbox-up btn-xs">
+							<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
+						</button>
+						<button class="btn btn-default spinbox-down btn-xs">
+							<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
+						</button>
 					</div>
-					<div class="step-pane sample-pane alert-warning alert" data-step="4">
-						<h4>Preview Message</h4>
-						<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
-						<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
-						<p>Ja­cama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
+				</div>
+			</div>
+			<div class="btn-panel">
+				<button id="spinboxSetValueBtn" type="button" class="btn btn-default">set value (4)</button>
+				<button id="spinboxGetValueBtn" type="button" class="btn btn-default">get value</button>
+				<button id="enableSpinbox" type="button" class="btn btn-default">enable</button>
+				<button id="disableSpinbox" type="button" class="btn btn-default">disable</button>
+				<button id="btnSpinboxDestroy" type="button" class="btn btn-default">destroy and append</button>
+			</div>
+		</section>
+
+		<section id="tree">
+			<h2>Tree</h2>
+			<div class="thin-box">
+				<ul class="tree" id="myTree1" role="tree">
+					<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
+						<div class="tree-branch-header">
+							<button class="tree-branch-name">
+								<span class="glyphicon icon-caret glyphicon-play"></span>
+								<span class="glyphicon icon-folder glyphicon-folder-close"></span>
+								<span class="tree-label"></span>
+							</button>
+						</div>
+						<ul class="tree-branch-children" role="group"></ul>
+						<div class="tree-loader" role="alert">Loading...</div>
+					</li>
+					<li class="tree-item hide" data-template="treeitem" role="treeitem">
+						<button class="tree-item-name">
+							<span class="glyphicon icon-item fueluxicon-bullet"></span>
+							<span class="tree-label"></span>
+						</button>
+					</li>
+				</ul>
+
+				<ul class="tree tree-folder-select" id="myTree2" role="tree">
+					<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
+						<div class="tree-branch-header">
+							<button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span>
+							</button>
+							<button class="tree-branch-name">
+								<span class="glyphicon icon-folder glyphicon-folder-close"></span>
+								<span class="tree-label"></span>
+							</button>
+						</div>
+						<ul class="tree-branch-children" role="group"></ul>
+						<div class="tree-loader" role="alert">Loading...</div>
+					</li>
+					<li class="tree-item hide" data-template="treeitem" role="treeitem">
+						<button class="tree-item-name">
+							<span class="glyphicon icon-item fueluxicon-bullet"></span>
+							<span class="tree-label"></span>
+						</button>
+					</li>
+				</ul>
+			</div>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnTreeDestroy">destroy and append</button>
+				<button type="button" class="btn btn-default" id="btnTreeDiscloseVisible">disclose visible</button>
+				<button type="button" class="btn btn-default" id="btnTreeDiscloseAll">disclose all</button>
+				<button type="button" class="btn btn-default" id="btnTreeCloseAll">close all</button>
+			</div>
+		</section>
+
+		<section id="wizard">
+			<h2>Wizard</h2>
+			<div class="thin-box">
+				<div class="wizard" data-initialize="wizard" id="myWizard">
+					<ul class="steps">
+						<li data-step="1"><span class="badge">1</span>Campaign<span class="chevron"></span>
+						</li>
+						<li class="active" data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span>
+						</li>
+						<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span>
+						</li>
+						<li data-step="4"><span class="badge">4</span>Preview<span class="chevron"></span>
+						</li>
+						<li data-step="5" data-name="distep"><span class="badge">5</span>Send<span class="chevron"></span>
+						</li>
+					</ul>
+					<div class="actions">
+						<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
+						<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span>
+						</button>
 					</div>
-					<div class="step-pane sample-pane alert-success alert" data-step="5" data-name="distep">
-						<h4>Send Message</h4>
-						<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
-						<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
-						<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.  </p>
+					<div class="step-content">
+						<div class="step-pane active sample-pane alert" data-step="1">
+							<h4>Setup Campaign</h4>
+							<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
+							<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
+							<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
+						</div>
+						<div class="step-pane sample-pane alert-info alert" data-step="2">
+							<h4>Choose Recipients</h4>
+							<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
+							<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
+							<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
+						</div>
+						<div class="step-pane sample-pane alert-danger alert" data-step="3">
+							<h4>Design Template</h4>
+							<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify. </p>
+							<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
+							<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
+						</div>
+						<div class="step-pane sample-pane alert-warning alert" data-step="4">
+							<h4>Preview Message</h4>
+							<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
+							<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
+							<p>Ja­cama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
+						</div>
+						<div class="step-pane sample-pane alert-success alert" data-step="5" data-name="distep">
+							<h4>Send Message</h4>
+							<p>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
+							<p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
+							<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="btn-panel">
-			<button type="button" class="btn btn-default" id="btnWizardPrev">previous</button>
-			<button type="button" class="btn btn-default" id="btnWizardNext">next</button>
-			<button type="button" class="btn btn-default" id="btnWizardStep">log current step index</button>
-			<button type="button" class="btn btn-default" id="btnWizardSetStep">jump to step 3 (recipients)</button>
-			<button type="button" class="btn btn-default" id="btnWizardSetStepByName">jump to named step (Send Message)</button>
-			<button type="button" class="btn btn-default" id="btnWizardAddSteps">add step (setup)</button>
-			<button type="button" class="btn btn-default" id="btnWizardRemoveStep">remove step (preview)</button>
-			<button type="button" class="btn btn-default" id="btnWizardDestroy">destroy and append</button>
-		</div>
+			<div class="btn-panel">
+				<button type="button" class="btn btn-default" id="btnWizardPrev">previous</button>
+				<button type="button" class="btn btn-default" id="btnWizardNext">next</button>
+				<button type="button" class="btn btn-default" id="btnWizardStep">log current step index</button>
+				<button type="button" class="btn btn-default" id="btnWizardSetStep">jump to step 3 (recipients)</button>
+				<button type="button" class="btn btn-default" id="btnWizardSetStepByName">jump to named step (Send Message)</button>
+				<button type="button" class="btn btn-default" id="btnWizardAddSteps">add step (setup)</button>
+				<button type="button" class="btn btn-default" id="btnWizardRemoveStep">remove step (preview)</button>
+				<button type="button" class="btn btn-default" id="btnWizardDestroy">destroy and append</button>
+			</div>
+		</section>
 	</div>
 </body>
 </html>
diff --git a/less/checkbox-no-js.less b/less/checkbox-no-js.less
new file mode 100644
index 000000000..9ea17717b
--- /dev/null
+++ b/less/checkbox-no-js.less
@@ -0,0 +1,45 @@
+.checkbox, .checkbox-inline {
+	
+	input[type="checkbox"]:not(.sr-only) {
+		& ~ label {
+			&:before {
+				border-radius: 4px;
+				z-index: 1;
+			}
+		}
+
+		&:checked {
+			& ~ label {
+				&:before {
+					color: white;
+					content: "\e013";
+					line-height: 1em;
+					padding-left: 1px;
+					font-size: 8px;
+					padding-top: 2px;
+				}
+			}
+		}
+	}
+
+	&.hightlight {
+		& + .checkbox-inline.highlight {
+			margin-left: -14px;
+			&.checkbox-custom {
+				margin-left: 0px;
+			}
+		}
+	}
+}
+
+.checkbox {
+
+	&.highlight {
+		input:not(.sr-only) {
+			& ~ label {
+				left: -4px;
+			}
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/less/checkbox.less b/less/checkbox.less
index 36ff3c006..56dd51007 100644
--- a/less/checkbox.less
+++ b/less/checkbox.less
@@ -1,9 +1,19 @@
 .checkbox {
 
 	&.highlight {
-		padding: 4px;
 
-		&.checked {
+		// padding: 4px;
+
+		& + .checkbox.highlight {
+			margin-top: -5px;
+		}
+
+		& label.checkbox-custom {
+			padding: 4px 4px 4px 24px;
+			//margin-left: -8px;
+		}
+
+		&.checked label.checkbox-custom {
 			background: #e9e9e9;
 			border-radius: @baseBorderRadius;
 		}
@@ -12,10 +22,18 @@
 	/* for keyboard tabbing */
 	input[type="checkbox"]:focus + .checkbox-label,
 	input[type="checkbox"]:hover + .checkbox-label,
-	.checkbox-label:hover {
+	.checkbox-label:hover
+	 {
 		color: @grayLight;
 	}
 
+	input[type="checkbox"]:disabled:focus + .checkbox-label,
+	input[type="checkbox"]:disabled:hover + .checkbox-label,
+	&.disabled label:hover
+	 {
+		color: inherit;
+	}
+
 }
 
 .form-horizontal .checkbox-inline {
@@ -30,10 +48,8 @@
 .checkbox-custom {
 	position: relative;
 
-	&:before
-	{
+	&:before {
 		.iconBaseStyles("Glyphicons Halflings");
-
 		border: 1px solid #adadad;
 		border-radius: @baseBorderRadius;
 		color: #fff;
@@ -47,6 +63,24 @@
 		width: 14px;
 	}
 
+	/* for keyboard tabbing */
+	&:active:before, &:focus:before {
+		color: @text-color;
+		color: rgb(91, 157, 217);
+		cursor: pointer;
+		outline-color: rgb(91, 157, 217);
+		outline-offset: -2px;
+		outline-style: auto;
+		outline-width: 5px;
+	}
+
+	&.highlight {
+		&:before {
+			left: 4px;
+			top: 6px;
+		}
+	}
+
 	&.checked {
 		&:before {
 			background: #39b3d7;
@@ -73,6 +107,7 @@
 
 		&.highlight {
 			padding: 4px 4px 4px 24px;
+			left: -4px;
 
 			&:before {
 				left: 4px;
@@ -86,9 +121,16 @@
 		}
 	}
 
+
 	/* for keyboard tabbing */
 	input[type="checkbox"]:focus + .checkbox-label {
 		color: @grayLight;
 	}
 
+
+
+}
+
+label.checkbox-custom.checkbox-inline {
+	padding-left: 20px;
 }
\ No newline at end of file
diff --git a/less/forms.less b/less/forms.less
new file mode 100644
index 000000000..914c6ea4d
--- /dev/null
+++ b/less/forms.less
@@ -0,0 +1,168 @@
+.labelHover() {
+	&:hover {
+		color: @grayLight;
+	}
+}
+
+.radio, .checkbox {
+	&-inline {
+		padding-left: 0;
+		&.highlight {
+			left: -8px;
+		}
+	}
+	// This handy trick allows us to make rules for .radio, .checkbox, .radio-inline, and, .checkbox-inline all at once.
+	&, &-inline {
+
+		// Sometimes the wrapping containter is a div with .checkbox or .radio, and has a label within it.
+		// Sometimes the label itself is the wrapping container, and has .checkbox or .radio on it.
+		// The use of the amperstand "parent selector" here allows us to cover many scenarios at once, with terse, but elegant, code.
+		label&, .input-label&, & label, & .input-label {
+			.labelHover;
+		}
+		
+		label, .input-label, label& {
+			cursor: pointer;
+			font-weight: normal;
+			.labelHover;
+		}
+
+		&.highlight {
+
+				input:not(.sr-only) {
+				& ~ label {
+					padding: 4px;
+					border-radius: @baseBorderRadius;
+				}
+				&:checked ~ label {
+					background-color: #e9e9e9;
+					opacity: 1;
+					z-index: 0;
+				}
+			}
+		}
+
+		input:not(.sr-only) {
+
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			margin: -1px;
+			padding: 0;
+			overflow: hidden;
+			clip: rect(0,0,0,0);
+			border: 0;
+
+			& ~ label {
+				padding-left: 0;
+				&:before {
+					font-family:"Glyphicons Halflings";
+					font-style: normal;
+					font-weight: normal;
+					font-variant: normal;
+					text-transform: none;
+					line-height: 1;
+					speak: none;
+					border: 1px solid #adadad;
+					color: #fff;
+					font-size: 9px;
+					width: 14px;
+					height: 14px;
+					padding: 0;
+					margin-top: 0;
+					margin-bottom: -2px;
+					cursor: pointer;
+					display: inline-block;
+					z-index: 2;
+					content: "";
+				}
+
+			}
+
+
+
+			/* for keyboard tabbing */
+			&:active ~ label, &:focus ~ label {
+				color: @text-color;
+				color: rgb(91, 157, 217);
+				cursor: pointer;
+				
+				&:before {
+					outline-color: rgb(91, 157, 217);
+					outline-offset: -2px;
+					outline-style: auto;
+					outline-width: 5px;
+				}
+
+				&, &:hover {
+					color: @text-color;
+					cursor: pointer;
+				}
+			}
+			&:active:hover ~ label, &:focus:hover ~ label, &:focus:hover ~ label, &:checked:hover ~ label {
+				&, &:hover {
+					color: @text-color;
+					cursor: pointer;
+				}
+			}
+
+
+
+
+			&[disabled="disabled"] {
+				& ~ label, & ~ label:before {
+					color: @text-color;
+					opacity: 0.5 !important;
+					cursor: not-allowed !important;
+				}
+			}
+
+			&:checked ~ label {
+				&:before {
+					background: #39b3d7;
+					border-color: #39b3d7;
+				}
+			}
+
+		}
+
+		&, &:hover {
+			input {
+				&:checked {
+
+				}
+			}
+		}
+
+		&.highlight {
+			&:before {
+				left: 4px;
+				top: 7px;
+			}
+		}
+	}
+
+
+	&.highlight {
+		input:not(.sr-only) {
+			& ~ label {
+				left: -8px;
+				position: relative;
+			}
+		}
+	}
+
+
+	&-inline {
+		padding-left: 0;
+		&.highlight {
+			// left: -8px;
+		}
+		&:before {
+			left: 0;
+			top: 3px;
+		}
+	}
+
+
+}
diff --git a/less/fuelux.less b/less/fuelux.less
index 67b94ce09..72ca1a752 100644
--- a/less/fuelux.less
+++ b/less/fuelux.less
@@ -7,7 +7,11 @@
 @import "icons.less";
 
 // Fuel UX controls
-@import "checkbox.less";
+@import "forms.less"; // forms.less contains code shared between form elements.
+@import "checkbox.less"; // Checkbox styles that will be deprecated.
+@import "checkbox-no-js.less"; // Checkbox styles that are not dependant upon custom javascript controls.
+@import "radio.less"; // Radio styles that will be deprecated.
+@import "radio-no-js.less";  // Radio styles that are not dependant upon custom javascript controls.
 @import "combobox.less";
 @import "datepicker.less";
 @import "infinite-scroll.less";
@@ -16,7 +20,6 @@
 @import "misc.less";
 @import "pillbox.less";
 @import "placard.less";
-@import "radio.less";
 @import "repeater.less";
 @import "repeater-list.less";
 @import "repeater-thumbnail.less";
diff --git a/less/radio-no-js.less b/less/radio-no-js.less
new file mode 100644
index 000000000..702bb880f
--- /dev/null
+++ b/less/radio-no-js.less
@@ -0,0 +1,60 @@
+.radio, .radio-inline {
+	
+	input[type="radio"]:not(.sr-only) {
+
+		& ~ label {
+			&:before {
+				border-radius: 8px;
+				z-index: 1;
+			}
+		}
+
+		&:checked {
+
+			& ~ label {
+				&:before {
+					background: #39b3d7; /* Old browsers */
+					background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 40%, #39b3d7 41%, #39b3d7 100%); /* FF3.6+ */
+					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(40%,#ffffff), color-stop(41%,#39b3d7), color-stop(100%,#39b3d7)); /* Chrome,Safari4+ */
+					background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Chrome10+,Safari5.1+ */
+					background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* Opera 12+ */
+					background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* IE10+ */
+					background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 40%,#39b3d7 41%,#39b3d7 100%); /* W3C */
+					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#39b3d7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+				}
+			}
+		}
+
+
+
+
+		/* for keyboard tabbing */
+		&:hover ~ label, &:active ~ label, &:focus ~ label {
+		
+			&:before {
+				outline-color: rgba(91, 157, 217, 0.7);
+				outline-offset: -4px;
+				outline-style: auto;
+				outline-width: 6px;
+			}
+
+		}
+		/* for keyboard tabbing */
+		&:active:hover ~ label, &:focus:hover ~ label, &:focus:hover ~ label, &:checked:hover ~ label {
+			&:before {
+				outline-color: none;
+				outline-offset: 0;
+				outline-style: none;
+				outline-width: 0;
+				cursor: default;
+			}
+
+			&, &:hover {
+				color: @text-color;
+				cursor: default;
+			}
+		}
+
+	}
+}
+
diff --git a/less/radio.less b/less/radio.less
index fb9e8c555..66e06ed8e 100644
--- a/less/radio.less
+++ b/less/radio.less
@@ -1,7 +1,21 @@
+.radioTabbing() {
+	/* for keyboard tabbing */
+	input[type="radio"]:focus + .radio-label,
+	input[type="radio"]:hover + .radio-label,
+	.radio-label:hover {
+		color: @grayLight;
+	}
+}
+
+
 .radio {
 	&.highlight {
 		padding: 4px;
+		margin: 0 0 5px 0;
+		& + & {
+			margin-top: -9px;
 
+		}
 		&.checked {
 			background: #e9e9e9;
 			border-radius: @baseBorderRadius;
@@ -121,3 +135,9 @@
 	}
 
 }
+
+
+label.radio-custom.radio-inline {
+	padding-left: 20px;
+}
+
diff --git a/less/variables.less b/less/variables.less
index 382648827..8136fad29 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -42,6 +42,7 @@
 // -------------------------
 @bodyBackground:        @white;
 @textColor:             @grayDark;
+@text-color:             @textColor;
 
 
 // Links
diff --git a/markup/checkbox-inline-no-js.html b/markup/checkbox-inline-no-js.html
new file mode 100644
index 000000000..dc1908a84
--- /dev/null
+++ b/markup/checkbox-inline-no-js.html
@@ -0,0 +1,12 @@
+<div class="checkbox-inline">
+	<input
+		type="checkbox"
+		id="checkboxes-new-inline--1"
+		name="checkboxes-new-inline--1"
+		checked="checked"
+		value=""
+	>
+	<label for="checkboxes-new-inline--1">
+		Inline Checkbox
+	</label>
+</div>
diff --git a/markup/checkbox-no-js-variations.txt b/markup/checkbox-no-js-variations.txt
new file mode 100644
index 000000000..deecfb6cb
--- /dev/null
+++ b/markup/checkbox-no-js-variations.txt
@@ -0,0 +1,14 @@
+// Checked on page load:
+- add 'checked="checked"' attribute to input
+
+// Disabled on page load:
+- add 'disabled="disabled"' attribute to input
+
+// Toggling with checkboxes uses plain old Bootstrap Collapse: 
+- See: http://getbootstrap.com/javascript/#collapse
+- add `data-toggle="collapse"`
+- add `data-target="{{selector}}"`
+- optionally consider adding aria attributes `aria-expanded` and `aria-controls`
+
+// Highlighting checkboxes:
+- add 'highlight' class to the `.checkbox` or `.checkbox-inline` wrapper. This will highlight the checkbox on check / uncheck.
\ No newline at end of file
diff --git a/markup/checkbox-no-js.html b/markup/checkbox-no-js.html
new file mode 100644
index 000000000..a25586db2
--- /dev/null
+++ b/markup/checkbox-no-js.html
@@ -0,0 +1,12 @@
+<div class="checkbox">
+	<input
+		type="checkbox"
+		id="checkboxes-new-block--1"
+		name="checkboxes-new-block--1"
+		value=""
+	>
+	<label for="checkboxes-new-block--1">
+		Checkbox: unchecked on page load
+	</label>
+</div>
+
diff --git a/markup/radio-inline-no-js.html b/markup/radio-inline-no-js.html
new file mode 100644
index 000000000..3d6632d2a
--- /dev/null
+++ b/markup/radio-inline-no-js.html
@@ -0,0 +1,12 @@
+<div class="radio-inline">
+	<input
+		type="radio"
+		id="radiobuttons-new-inline--1"
+		name="radiobuttons-new-inline"
+		checked="checked"
+		value=""
+	>
+	<label for="radiobuttons-new-inline--1">
+		Inline Radio Button
+	</label>
+</div>
diff --git a/markup/radio-no-js-variations.txt b/markup/radio-no-js-variations.txt
new file mode 100644
index 000000000..f87fc6702
--- /dev/null
+++ b/markup/radio-no-js-variations.txt
@@ -0,0 +1,14 @@
+// Checked on page load:
+- add 'checked="checked"' attribute to input
+
+// Disabled on page load:
+- add 'disabled="disabled"' attribute to input
+
+// Toggling with radio buttons uses plain old Bootstrap Collapse: 
+- See: http://getbootstrap.com/javascript/#collapse
+- add `data-toggle="collapse"`
+- add `data-target="{{selector}}"`
+- optionally consider adding aria attributes `aria-expanded` and `aria-controls`
+
+// Highlighting radio buttons:
+- add 'highlight' class to the `.radio` or `.radio-inline` wrapper. This will highlight the radio buttons on check / uncheck.
diff --git a/markup/radio-no-js.html b/markup/radio-no-js.html
new file mode 100644
index 000000000..02b58f6ac
--- /dev/null
+++ b/markup/radio-no-js.html
@@ -0,0 +1,11 @@
+<div class="radio">
+	<input
+		type="radio"
+		id="radiobuttons-new-block--1"
+		name="radiobuttons-new-block"
+		value=""
+	>
+	<label for="radiobuttons-new-block--1">
+		Radio Button: unchecked on page load
+	</label>
+</div>