(:html:) <h1>Countdown Timer</h1>

<style type="text/css"> .timer {

   visibility: hidden;
   text-align: center;
   background: black;
   font-family: Arial;
   font-weight: bold;
   border: 0px;

}

.timer_pad {

   padding: 10px;

}

.digits {

   margin-top: 35px;
   color: chartreuse;
   font-size: 40pt;
   font-family: Verdana;

}

.title {

   color: white;   

}

.hours, .minutes, .seconds {

   margin-left: 3px;

}

.hours, .minutes {

   margin-right: 5px;

}

.field_cont {

   margin-top: 15px;

}

.field {

   color: yellow;

}

.btn_cont {

   margin-top: 20px;

}

.start, .pause, .resume, .reset {

	font-family:arial;
   margin-right: 5px;

} </style>

<table bgcolor=#000000 id="CH_dtimer1" class="timer"> <tr> <td class="timer_pad"> <div class="title">Time left</div>

<div id="CH_dtimer1_digits" class="digits"></div> <p> </p> <div class="field_cont">

   <label class="field">Hours:
      <input id="CH_dtimer1_hours" class="hours"
	         type="text" size="2" disabled="disabled" />
   </label>

   <label class="field">Minutes:
      <input id="CH_dtimer1_minutes" class="minutes"
	         type="text" size="2" disabled="disabled" />
   </label>

   <label class="field">Seconds:
      <input id="CH_dtimer1_seconds" class="seconds"
	         type="text" size="2" disabled="disabled" />

   </label>

</div>

<div class="btn_cont">

   <input id="CH_dtimer1_start" class="start"
          type="button" value="Start" disabled="disabled" />
   <input id="CH_dtimer1_pause" class="pause"
          type="button" value="Pause" disabled="disabled" />
   <input id="CH_dtimer1_resume" class="resume"
          type="button" value="Resume" disabled="disabled" />
   <input id="CH_dtimer1_reset" class='reset'
          type="button" value="Reset" disabled="disabled" />

</div> </td> </tr> </table>

<script type="text/javascript" src="http://www3.hku.hk/philodep/joelau/media/coolCount.js"></script>

(:htmlend:)