body section to head above
Code:
<body onload="calculate() ;">
<form name="calculator">
<table width="1000" height="506"" border="0" text-align: center; font-family: Verdana, Geneva, sans-serif; color: #000; padding="0">
<tr><th colspan="16" bgcolor="#339966"><H2>
<FONT COLOR="#FFFFFF">THE REAL COST OF RUNNING AN INTERNAL COMBUSTION VEHICLE</FONT> <H2></TH></TR>
<tr><td height="7"></td></tr>
<tr>
<td bgcolor="#CCFFCC"><strong><FONT COLOR="#000">Vehicle Running Costs</FONT></strong></td>
<td></td><td></td><th colspan="10" bgcolor="#CCFFCC">Accumulated Yearly Costs - Inflation Adjusted</td>
</tr>
<tr><td></td>
<td width="54"><strong><FONT COLOR="#FF3900">Amount</FONT></strong></td>
<td width="95"><strong><FONT COLOR="#FF3900">Frequency</FONT></strong></td>
<tr>
<td width="257" height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Select Annual Inflation Rate</span></td>
<td width="54" align="right">
<span class="ten">
<input type="text" name="inflation" value = "5.00" size="2" onfocus="clearMe(this)" onBlur="returnMe(this)" style="text-align:right; color: #009;" color="#000080">
%</span></td>
<td></td><td width="54" class="ten"><span class="ten">Year 1</span></td>
<td width="54" class="ten"><span class="ten">Year 2</span></td>
<td width="54" class="ten"><span class="ten">Year 3</span></td>
<td width="54" class="ten"><span class="ten">Year 4</span></td>
<td width="54" class="ten"><span class="ten">Year 5</span></td>
<td width="54" class="ten"><span class="ten">Year 6</span></td>
<td width="54" class="ten"><span class="ten">Year 7</span></td>
<td width="54" class="ten"><span class="ten">Year 8</span></td>
<td width="54" class="ten"><span class="ten">Year 9</span></td>
<td width="54" class="ten"><span class="ten">Year 10</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Petrol or Diesel</span></td>
<td><span class="ten">$
<input name="petrol" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="100" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period1">
<option value="1" selected>Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808">4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y4total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y5total1" size="3" style="text-align:right;" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total1" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y10total1" size="3" style="text-align:right;">
</span></td>
<tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Oil and Air Filter Changes</span></td>
<td><span class="ten">$
<input name="oilchanges" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="85" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period2">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846" selected>6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808">4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y4total3" size="3" style="text-align:right;" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total3" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Engine Tune Ups</span></td>
<td><span class="ten">$
<input name="tuneups" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="240" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period3">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410" selected>3 Yearly</option>
<option value="0.004808">4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y3total2" size="3" style="text-align:right;" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y4total2" size="3" style="text-align:right;" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total2" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Timing and Fab Belt Changes</span></td>
<td><span class="ten">$
<input name="cambelt" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="180" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period4">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808" selected>4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input type="text" name="y4total4" size="3" style="text-align:right;" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total4" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Exhaust Repairs</span></td>
<td><span class="ten">$
<input name="exhaust" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="300" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period5">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808" selected>4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y4total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total5" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Cooling System Flush Repairs</span></td>
<td><span class="ten">$
<input name="coolingsystem" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="95" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period6">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808" selected>4 Yearly</option>
<option value="0.003846">5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y4total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total6" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#CCFFCC" class="t12"><span class="ten">Battery and Charging System Repairs</span></td>
<td><span class="ten">$
<input name="charging" type="text" style="text-align:right;" onFocus="clearMe(this)" onBlur="returnMe(this)" value="85" size="3" onkeyup="calculate()">
</span></td>
<td class="ten"> <span class="ten">
<select name="period7">
<option value="1">Weekly</option>
<option value="0.2308">Monthly</option>
<option value="0.03846">6 Monthly</option>
<option value="0.01923">Yearly</option>
<option value="0.009615">2 Yearly</option>
<option value="0.006410">3 Yearly</option>
<option value="0.004808">4 Yearly</option>
<option value="0.003846" selected>5 Yearly</option>
</select>
</span></td>
<td><span class="ten">$
<input name="ytotal7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y2total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y3total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y4total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y5total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y6total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y7total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y8total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y9total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td><span class="ten">$
<input name="y10total7" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr><td height="11"></td></tr>
<tr>
<td height="43" bgcolor="#CCFFCC"><span class="ten"><strong><font color="#000000">GRAND TOTAL - PER YEAR</font></strong></span></td>
<td bgcolor="#CCFFCC"></td>
<td bgcolor="#CCFFCC"> </td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="ytotal" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y2total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y3total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y4total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y5total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y6total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y7total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y8total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y9total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
<td bgcolor="#CCFFCC"><span class="ten">$
<input name="y10total" type="text" style="text-align:right;" size="3" readonly="readonly">
</span></td>
</tr>
<tr><td height="12"></td></tr>
<tr><th colspan="3" bgcolor="#CCFFCC">GRAND TOTAL - Inflation adjusted over 5 years</th>
<th colspan="3" bgcolor="#CCFFCC">$ <input name="y5tota" type="text" style="text-align:right;" size="8" ></th></tr>
<tr><td height="6"></td></tr>
<tr><th colspan="3" bgcolor="#CCFFCC">GRAND TOTAL - Inflation adjusted over 10 years</th>
<th colspan="3" bgcolor="#CCFFCC">$ <input name="y10tota" type="text" style="text-align:right;" size="8" ></th></tr>
<tr><th height="37" colspan="13"><p id="p1"></p></th></tr>
</table>
</form>
</body>
</html>