<form name="pc" action="#" id="calculator">

<p class="shortbox fdistance"><span class="rowtitle">DISTANCE </span>
<span class="formcontainer"><input type="text" id="dDistance"></span>
<select name="units" id="distanceUnits" onchange="unitDeterminer()">
<option value="Km" selected="">Km</option>
<option value="Miles">Miles</option>
<option value="Metres">Metres</option>
<option value="Yards">Yards</option>
</select>

<select name="units" id="quickLength" onchange="raceDeterminer()">
<option value="0" selected="">quick select</option>
<option value="42195">marathon</option>
<option value="21097.5">half-marathon</option>
<option value="5000">5Km</option>
<option value="8000">8Km</option>
<option value="10000">10Km</option>
<option value="8046.72">5Miles</option>
<option value="16093.44">10Miles</option>
<option value="400">400m</option>
<option value="200">200m</option>
<option value="365.76">400yards</option>

</select>

<button type="button" onclick="calcDistance()">calculate distance</button></p>


<p class="shortbox ftime">
<span class="rowtitle">TIME </span>
<span class="formcontainer">hours<input type="text" id="tHours"></span>
<span class="formcontainer">minutes<input type="text" id="tMinutes"></span>
<span class="formcontainer">seconds<input type="text" id="tSeconds"></span>
<button type="button" onclick="calcTime()">calculate time</button></p>


<p class="shortbox fpace">
<span class="rowtitle">PACE </span>
<span class="formcontainer">minutes<input type="text" id="pMinutes"></span>
<span class="formcontainer">seconds<input type="text" id="pSeconds"></span>
<select name="units" id="paceUnits">
<option value="Km" selected="">per Km</option>
<option value="Mile">per Mile</option>
<option value="Metre">per Metre</option>
<option value="Yard">per Yard</option>
<option value="400m">per 400m</option>
<option value="100m">per 100m</option>
<option value="50m">per 50m</option>
<option value="25m">per 25m</option>

</select>
<button type="button" onclick="calcPace()">calculate pace</button></p>

<p style="text-align:right;"><input type="reset" value="Reset the pace calculator" onclick="clearForm()"></p>



<p><button type="button" onclick="calcSplits()">calculate my splits</button>
<select name="units" id="splitUnits">
<option value="Km" selected="">per Km</option>
<option value="Mile">per Mile</option>
<option value="400m">per 400m</option>
<option value="100m">per 100m</option>
<option value="50m">per 50m</option>
<option value="25m">per 25m</option>

</select></p>
</form>
<div class="splitswrapper"></div>
<p><input class="alignleft" type="reset" value="Clear the splits" onclick="clearSplits()"></p>