<input type="checkbox" id="toggle" name="toggle"/><label for="toggle">Show HTML</label>
<div id="toggle-box">
	<br /><br />
	<p><strong>Below are all of the HTML elements that are used throughout the site, and therefore need styling. Concentrate on paddings, margins, borders, line-heights, font-sizes and colors. Try to keep the styling consistant between elements.</strong></p>
	<br /><br />
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet ex quis est facilisis facilisis. Aliquam convallis luctus nulla. Sed sit amet viverra nunc. In condimentum, enim et tincidunt tempor, diam lacus sollicitudin risus, aliquam dictum ligula lacus ut velit. Sed vel laoreet urna. Suspendisse cursus ipsum non egestas consequat.<br /><a href="#">Link</a><br /><strong>Strong</strong><br /><em>Italic</em></p>
	<br />
	<hr />
	<br />
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span>This is a span.</span> Praesent sit amet ex quis est facilisis facilisis. Aliquam convallis luctus nulla. Sed sit amet viverra nunc. In condimentum, enim et tincidunt tempor, diam lacus sollicitudin risus, aliquam dictum ligula lacus ut velit. Sed vel laoreet urna. Suspendisse cursus ipsum non egestas consequat.</p>
	<blockquote>
		<p>Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote</p>
		<cite>Cite Cite</cite>
	</blockquote>

	<ul>
		<li>Unordered list</li>
		<li>Unordered list</li>
		<li>Unordered list</li>
	</ul>
	<ol>
		<li>Ordered list</li>
		<li>Ordered list</li>
		<li>Ordered list</li>
	</ol>
	<table>
		<tr>
			<th>Table Heading</th>
			<th>Table Heading</th>
			<th>Table Heading</th>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
	</table>
	<button>Button</button>
	<form>
		<p><label>Text Input Label</label><input type="text" placeholder="text input placeholder"/></p>
		<p><label>Email Input Label</label><input type="email" value="email@input.co.uk"/></p>
		<p><label>Number Input Label</label><input type="number" value="0123456789"/></p>
		<p><label>Password Input Label</label><input type="password" value="password input"/></p>
		<p><label>Submit Input Label</label><input type="submit" value="submit input"/></p>
		<p><label>Reset Input Label</label><input type="reset" value="reset input"/></p>
		<p><label>Button Input Label</label><input type="button" value="button input"/></p>
		<select name="select">
		  <option value="select1">select 1</option>
		  <option value="select2">select 2</option>
		  <option value="select3">select 3</option>
		</select>		
		<fieldset>
			<legend>Fieldset / legend</legend>
			<p>
				<label>Radio Input Label</label><input type="radio" name="radio"/>
				<label>Radio Input Label</label><input type="radio" name="radio"/>
				<label>Radio Input Label</label><input type="radio" name="radio"/>
			</p>
			<p>
				<label>Checkbox Input Label</label><input type="checkbox" name="checkbox1"/>
				<label>Checkbox Input Label</label><input type="checkbox" name="checkbox2"/>
				<label>Checkbox Input Label</label><input type="checkbox" name="checkbox3"/>
			</p>
		</fieldset>
		<p><label>Disabled Input Label</label><input type="text" disabled placeholder="disabled input"/></p>
		<p><label>Read Only Input Label</label><input type="text" readonly placeholder="read only input"/></p>
		<textarea>Text Area</textarea>
	</form>
	<br />
	<br />
	<br />
</div>