<div class="grid-container">
	<div class="column-two-thirds">
		<div class="form-group">
			<form>
				<fieldset>
					<legend>
						<h3 class="h3">
							What was the due date?
						</h3>
					</legend>
					<div class="form-date">
						<p class="form-hint">This is a piece of hint text.</p>
						<div class="form-group form-group-day">
							<label for="overdue-day">Day</label>
							<input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control"></div>
						<div class="form-group form-group-month">
							<label for="overdue-month">Month</label>
							<input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control"></div>
						<div class="form-group form-group-year">
							<label for="overdue-year">Year</label>
							<input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control"></div>
					</div>
				</fieldset>
			</form>
		</div>

		<hr/>

		<h6 class="h6">Validation example</h6>

		<div class="form-group">

			<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
				<h4 class="h4 error-summary-heading" id="error-summary-heading-example-1">
					Message to alert the user to a problem goes here
				</h4>
				<p>
					Optional description of the errors and how to correct them
				</p>
				<ul class="error-summary-list">
					<li>
						<a href="#example-personal-details">Descriptive link to the question with an error</a>
					</li>
				</ul>
			</div>
			
			<form>
				<fieldset>
					<legend>
						<h3 class="h3">
							What was the due date?
						</h3>
					</legend>
					<div class="form-date">
						<p class="error-message">Please choose a valid date before, or including, today.</p>
						<div class="form-group form-group-day">
							<label for="overdue-day">Day</label>
							<input id="overdue-day" type="text" name="day" placeholder="DD" pattern="[0-9]*" min="0" max="31" class="form-control form-control-error"></div>
						<div class="form-group form-group-month">
							<label for="overdue-month">Month</label>
							<input id="overdue-month" type="text" name="month" placeholder="MM" pattern="[0-9]*" min="0" max="12" class="form-control form-control-error"></div>
						<div class="form-group form-group-year">
							<label for="overdue-year">Year</label>
							<input id="overdue-year" type="text" name="year" placeholder="YYYY" pattern="[0-9]*" min="0" class="form-control form-control-error"></div>
					</div>
				</fieldset>
			</form>
		</div>
	</div>
</div>
