<style>
.breakpoint-lg, .breakpoint-md{display:none}
.breakpoint-sm{display:inline-block}
@media (min-width: 740px){
  .breakpoint-md{display:inline-block}
  .breakpoint-sm, .breakpoint-lg {display:none}
}
@media (min-width: 1024px){
  .breakpoint-lg {display:inline-block}
  .breakpoint-sm, .breakpoint-md{display:none}
}
</style>
<p>Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.</p>

<h1>Fonts</h1>
<br/>
<br/>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, using multiples of 8.</p>
<br/>
<br/>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>

<h1 class="text--title">'Title' Header 1</h1>
  <span class="font--red"><b>.text--title</b> (Used for headers and landing pages, noted as 'Title' H1 in the Design System)</span><br/>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 54px / line-height: 62px</span>
<br/>
<br/>
<br/>

<h1>Header 1</h1>
 <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 42px / line-height: 48px</span>
<br/>
<br/>
<br/>

<h2>Header 2</h2>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 34px / line-height: 40px</span>
<br/>
<br/>
<br/>

<h3>Header 3</h3>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 26px / line-height: 32px</span>
<br/>
<br/>
<br/>
<br/>

<h3>Copy, labels etc.</h3>

<p>I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--body-small">I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body-small </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--subtitle">I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle' .text--subtitle</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--subtitle-small">I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle small' .text--subtitle--small</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>


<p class="text--footnote">I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Footnote' .text--footnote</b><br/></span>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>

<p>
  <a class="link {{modifier_class}}" href="#">
    Link
  </a>
</p>

<p>
  This is an example of an <a class="link {{modifier_class}} inline">inline link</a>, this will be the same for all coloured links above.
</p>

<a class="btn {{modifier_class}}" href="#">
  Primary buttons
</a>
<button class="btn {{modifier_class}}">Native button</button>

<h3>Primary colours</h3>

<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="height: 100px; margin-bottom: 10px; display:block; width: 100px; border: 1px solid black;"></div>
	<h5>white</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--deep-violet" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Deep violet</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Red</h5>
</div>


<h3>Secondary colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>teal</h5>
</div>



<h3>Secondary light colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--light-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light teal</h5>
</div>


<h3>Secondary dark colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark teal</h5>
</div>

<br/>
<br/>

<h3>Primary colour backgrounds</h3>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--white</p>

<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--red</p>

<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--deep-violet</p>


<h3>Secondary colour backgrounds</h3>
<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--grey</p>

<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--coral</p>

<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--yellow</p>

<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--green</p>

<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--blue</p>

<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--magenta</p>

<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--purple</p>

<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--teal</p>


<h3>Secondary light colour backgrounds</h3>
<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-grey</p>

<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-coral</p>

<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-orange</p>

<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-yellow</p>

<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-green</p>

<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-blue</p>

<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-magenta</p>

<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-purple</p>

<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-teal</p>


<h3>Secondary dark colour backgrounds</h3>
<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-grey</p>

<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-coral</p>

<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-yellow</p>

<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-green</p>

<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-blue</p>

<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-magenta</p>

<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-purple</p>

<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-teal</p>

<div class="cr-body">
 <ul>
   <li>Item 1</li>
	  <li>Item 2</li>
	  <li>Item 3</li>
	  <li>Item 4</li>
 </ul>
</div>

<table border="2" cellpadding="10" cellspacing="2" width="100%">
	<tbody>
		<tr>
			<td>
			<p><strong>Who is reporting</strong></p>
			</td>
			<td>
			<p><strong>Type of issue</strong></p>
			</td>
			<td>
			<p><strong>How to report</strong></p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Employee (or equivalent)</p>
			</td>
			<td>
			<p>Any</p>
			</td>
			<td>
			<p>Comic Relief designated contact or&nbsp;<a class="link link--red inline" href="http://www.pcaw.org.uk/" target="_blank">Public Concern at Work</a></p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Service Provider/Partner (those who Comic Relief enters into contracts for services or goods)</p>
			</td>
			<td>
			<p>Any</p>
			</td>
			<td>
			<p>Comic Relief designated contact</p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Grantees (those who Comic Relief supports through its funding activities)</p>
			</td>
			<td>
			<p>Concerns about Comic Relief’s organisation or operations, fraud, or potential fraud</p>
			</td>
			<td>
			<p>Comic Relief designated contact</p>
			</td>
		</tr>
	</tbody>
</table>

<form novalidate>
	<div id="field-wrapper--standard" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-label--standard" for="field-input--standard" class="form__field-label required">Input required with paragraph text and hint</label>
		<p class="form-help-text">This is support text, for example information on how long the password should be</p>
		<input 
			type="text" 
			id="field-input--standard" 
			name="standard" 
			class="form__field form__field--text" 
			required="required" 
			placeholder="This is hint text" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
	</div>
	<div id="field-wrapper--standard-error" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-label--firstname" for="field-input--firstname" class="form__field-label required">Input with error mesaage</label>
		<input 
			type="text" 
			id="field-input--standard-error" 
			name="firstname" 
			class="form__field form__field--text form__field--error-outline" 
			required="" 
			placeholder="Field completed incorrectly" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
		<div id="field-error--standard-error" class="form__field-error-container form__field-error-container--text" aria-live="assertive" role="status">
			<span class="form-error">This is an error message</span>
		</div>
	</div>
	<div id="field-wrapper--standard-optional" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-wrapper--standard-optional" for="field-input--standard" class="form__field-label">Simple input <span>(optional)</span></label>
		<input 
			type="text" 
			id="field-wrapper--standard-optional" 
			name="standard" 
			class="form__field form__field--text error-border" 
			placeholder="" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
	</div>
	<div class="form__field--wrapper form__choice form__field--select">
		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
		<select 
			id="field-input--select" 
			name="select-1" 
			class="form__field form__field--select"
		> 
			<option >Please select</option>
			<option value="GB">United Kingdom</option>
			<option disabled="disabled">-------------------</option>
		</select>
	</div>

	<div class="form__field--wrapper form__choice form__field--select">
		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
		<select 
			id="field-input--select" 
			name="select-2" 
			class="form__field form__field--country form__field--error-outline"
		> 
			<option >Please select</option>
			<option value="GB">United Kingdom</option>
			<option disabled="disabled">-------------------</option>
		</select>
		</select>
		<div class="form__field--error" aria-live="assertive" role="status">
			<span class="form-error">This is a error message</span>
		</div>
	</div>
	<div class="form__field--wrapper form__textarea">
        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail require">Long copy/Message field</label>
        <textarea class="form__field">This is text area</textarea>
    </div>
	<div class="form__field--wrapper form__textarea">
        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail">Long copy/Message field</label>
        <textarea class="form__field form__field--error-outline">This is text area</textarea>
		<div class="form__field--error" aria-live="assertive" role="status">
			<span class="form-error">This is a error message</span>
		</div>
    </div>
	<div class="form__row form__field--wrapper form__field-wrapper--radio">
		<p class="form__fieldset--label"> List of radio buttons </p>
		<div class="form__field--wrapper form__radio form__radio--inline">
			<label class="form__field-label" for="radio-1">Option 1</label>
			<input type="radio" id="radio-1" name="radio-group" value="1" checked/>
			<span></span>
		</div>
		<div class="form__field--wrapper form__radio form__radio--inline">
			<label class="form__field-label" for="radio-2">Option 2</label>
			<input type="radio" id="radio-2" name="radio-group" value="2" />
			<span>&nbsp;</span>
			<div class="form__fieldset form__field--wrapper form__field-additional-text">
			 <div>
			 	<p>Here's some additional text </p>
			 	</div>
			</div>
		</div>
	</div>
	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
		<p class="form__fieldset--label"> List of checkboxes </p>
		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
			<label class="form__field-label" for="checkbox-1">Option 1</label>
			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
			<span></span>
		</div>
		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
			<label class="form__field-label" for="checkbox-2">Option 2</label>
			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
			<span></span>
		</div>
	</div>
	<div class="form__field--wrapper form__field-wrapper--checkbox form__checkbox-paragraph">
		<p class="form__fieldset--label">Single checkbox with paragraph text (optional)</p>
		<p>This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.</p>
		<div class="form__checkbox--inline">
			<label class="form__field-label" for="singlecheckbox">Option 1</label>
			<input type="checkbox" id="singlecheckbox" name="singlecheckbox" value="1" />
			<span></span>
		</div>
    </div>
    <div class="form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background">
        <div class="form__checkbox--inline">
            <label class="form__field-label" for="singlecheckbox1">Single checkbox with background colour</label>
            <input type="checkbox" id="singlecheckbox1" name="singlecheckbox1" value="2" />
            <span></span>
        </div>
    </div>
</div>

</form>