<div class="headings">
	<h2>Headings</h2>
	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h1">h1. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h1-font-size">Font size:</label>
					<input id="tc-h1-font-size" class="nocolor" data-selector=".h1" data-element="font-size" data-var="@font-size-h1" type="text">
				</p>
				<p>
					<label for="tc-h1-font-weight">Font weight:</label>
					<input id="tc-h1-font-weight" class="nocolor" data-selector=".h1" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h1-spacing">Spacing:</label>
					<input id="tc-h1-spacing" class="nocolor" data-selector=".h1" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h1" data-element="color">
					<label for="tc-h1-color">Color:</label>
					<input id="tc-h1-color" data-selector=".h1" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h1-uppercase" class="nocolor check" data-selector=".h1" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h2">h2. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h2-font-size">Font size:</label>
					<input id="tc-h2-font-size" class="nocolor" data-selector=".h2" data-element="font-size" data-var="@font-size-h2" type="text">
				</p>
				<p>
					<label for="tc-h2-font-weight">Font weight:</label>
					<input id="tc-h2-font-weight" class="nocolor" data-selector=".h2" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h2-spacing">Spacing:</label>
					<input id="tc-h2-spacing" class="nocolor" data-selector=".h2" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h2" data-element="color">
					<label for="tc-h2-color">Color:</label>
					<input id="tc-h2-color" data-selector=".h2" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h2-uppercase" class="nocolor check" data-selector=".h2" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h3">h3. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h3-font-size">Font size:</label>
					<input id="tc-h3-font-size" class="nocolor" data-selector=".h3" data-element="font-size" data-var="@font-size-h3" type="text">
				</p>
				<p>
					<label for="tc-h3-font-weight">Font weight:</label>
					<input id="tc-h3-font-weight" class="nocolor" data-selector=".h3" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h3-spacing">Spacing:</label>
					<input id="tc-h3-spacing" class="nocolor" data-selector=".h3" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h3" data-element="color">
					<label for="tc-h3-color">Color:</label>
					<input id="tc-h3-color" data-selector=".h3" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h3-uppercase" class="nocolor check" data-selector=".h3" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h4">h4. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h4-font-size">Font size:</label>
					<input id="tc-h4-font-size" class="nocolor" data-selector=".h4" data-element="font-size" data-var="@font-size-h4" type="text">
				</p>
				<p>
					<label for="tc-h4-font-weight">Font weight:</label>
					<input id="tc-h4-font-weight" class="nocolor" data-selector=".h4" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h4-spacing">Spacing:</label>
					<input id="tc-h4-spacing" class="nocolor" data-selector=".h4" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h4" data-element="color">
					<label for="tc-h4-color">Color:</label>
					<input id="tc-h4-color" data-selector=".h4" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h4-uppercase" class="nocolor check" data-selector=".h4" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h5">h5. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h5-font-size">Font size:</label>
					<input id="tc-h5-font-size" class="nocolor" data-selector=".h5" data-element="font-size" data-var="@font-size-h5" type="text">
				</p>
				<p>
					<label for="tc-h5-font-weight">Font weight:</label>
					<input id="tc-h5-font-weight" class="nocolor" data-selector=".h5" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h5-spacing">Spacing:</label>
					<input id="tc-h5-spacing" class="nocolor" data-selector=".h5" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h5" data-element="color">
					<label for="tc-h5-color">Color:</label>
					<input id="tc-h5-color" data-selector=".h5" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h5-uppercase" class="nocolor check" data-selector=".h5" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-8 col-md-9">
			<div class="h6">h6. Bootstrap heading</div>
		</div>

		<div class="col-sm-4 col-md-3">
			<div class="input">
				<p>
					<label for="tc-h6-font-size">Font size:</label>
					<input id="tc-h6-font-size" class="nocolor" data-selector=".h6" data-element="font-size" data-var="@font-size-h6" type="text">
				</p>
				<p>
					<label for="tc-h6-font-weight">Font weight:</label>
					<input id="tc-h6-font-weight" class="nocolor" data-selector=".h6" data-element="font-weight" type="text">
				</p>
				<p>
					<label for="tc-h6-spacing">Spacing:</label>
					<input id="tc-h6-spacing" class="nocolor" data-selector=".h6" data-element="letter-spacing" type="text">
				</p>
				<p class="picker" data-selector=".h6" data-element="color">
					<label for="tc-h6-color">Color:</label>
					<input id="tc-h6-color" data-selector=".h6" data-element="color" type="text">
					<span class="input-group-addon"><i></i></span>
				</p>
				<p>
					<input id="tc-h6-uppercase" class="nocolor check" data-selector=".h6" data-element="text-transform" type="checkbox" data-default="none" data-check="uppercase">
					Uppercase
				</p>
			</div>
		</div>
	</div>
</div>
