<div class="settings-title">Settings</div>
  <table class="editpanel">
    <tr>
      <td><p align="left" class="settings-label">
        Default location:
      </p></td>
    </tr>
    <tr>
      <td nowrap>
        <input type="text" id="prefs_default_location" tabIndex="1">
      </td>
    </tr>

<tr>
      <td><p align="left" class="settings-label">
        Date format:
      </p></td>
    </tr>
    <tr>
      <td nowrap>
        <div id="date-menubutton" class="menu-button" onclick="GDT.toggleMenu('date-format-menu');" tabIndex="2">
          <span id="date-select-elem-text" class="menu-text"></span>
          <span id="date-menu-img" class="menu-button-img"><span>
          <input type="hidden" id="dateFormat_Id"></input>
        </div>
      </td>
    </tr>
  </table>

<table class="editpanel">
    <tr>
      <td><p align="left" class="settings-label" style="word-wrap:normal;">
        Week starts on:
      </p></td>
    </tr>
    <tr>
      <td nowrap>
        <div id="day-menubutton" class="menu-button" onclick="GDT.toggleMenu('day-menu');" tabIndex="3">
          <span id="week-select-elem-text" class="menu-text"></span>
          <span id="day-menu-img" class="menu-button-img"><span>
          <input type="hidden" id="day_Id"></input>
        </div>
      </td>
    </tr>
  </table>
  <table class="editpanel menu-box">
    <tbody>
      <tr>
        <td>
          <div class="scrollBarBox menu-option" id="day-menu">
          <div class="scrollBarInner">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr><td class="menulist" id="day_0" onclick="GDT.showSelectedDay(this, 0);" onmouseout="GDT.unHighlight('day_0')" onmouseover="GDT.highlight('day_0')">Sunday</td></tr>
                <tr><td class="menulist" id="day_1" onclick="GDT.showSelectedDay(this, 1);" onmouseout="GDT.unHighlight('day_1')" onmouseover="GDT.highlight('day_1')">Monday</td></tr>
                <tr><td class="menulist" id="day_2" onclick="GDT.showSelectedDay(this, 2);" onmouseout="GDT.unHighlight('day_2')" onmouseover="GDT.highlight('day_2')">Tuesday</td></tr>
                <tr><td class="menulist" id="day_3" onclick="GDT.showSelectedDay(this, 3);" onmouseout="GDT.unHighlight('day_3')" onmouseover="GDT.highlight('day_3')">Wednesday</td></tr>
                <tr><td class="menulist" id="day_4" onclick="GDT.showSelectedDay(this, 4);" onmouseout="GDT.unHighlight('day_4')" onmouseover="GDT.highlight('day_4')">Thursday</td></tr>
                <tr><td class="menulist" id="day_5" onclick="GDT.showSelectedDay(this, 5);" onmouseout="GDT.unHighlight('day_5')" onmouseover="GDT.highlight('day_5')">Friday</td></tr>
                <tr><td class="menulist" id="day_6" onclick="GDT.showSelectedDay(this, 6);" onmouseout="GDT.unHighlight('day_6')" onmouseover="GDT.highlight('day_6')">Saturday</td></tr>
              </tbody>
            </table>
          </div>
          </div>
        </td>
      </tr>
      </tbody>
     </table>

<table class="editpanel">
    <tr>
      <td><p align="left" class="settings-label">
        Color:
      </p></td>
    </tr>
    <tr>
      <td nowrap>
        <div id="color-menubutton" class="menu-button" onclick="GDT.toggleMenu('color-menu');" tabIndex="4">
          <span id="color-select-elem-text" class="menu-text"></span>
          <span id="color-menu-img" class="menu-button-img"><span>
          <input type="hidden" id="color_Id"></input>
        </div>
      </td>
    </tr>
  </table>

<table class="editpanel menu-box">
     <tbody>
     <tr>
        <td>
          <div class="scrollBarBox menu-option" id="color-menu">
          <div class="scrollBarInner" style="height: 78px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr><td class="menulist" id="color_grey" onclick="GDT.showSelectedColor(this, 'grey');" onmouseout="GDT.unHighlight('color_grey')" onmouseover="GDT.highlight('color_grey')">default</td></tr>
                <tr><td class="menulist" id="color_blue" onclick="GDT.showSelectedColor(this, 'blue');" onmouseout="GDT.unHighlight('color_blue')" onmouseover="GDT.highlight('color_blue')">blue</td></tr>
                <tr><td class="menulist" id="color_green" onclick="GDT.showSelectedColor(this, 'green');" onmouseout="GDT.unHighlight('color_green')" onmouseover="GDT.highlight('color_green')">green</td></tr>
                <tr><td class="menulist" id="color_orange" onclick="GDT.showSelectedColor(this, 'orange');" onmouseout="GDT.unHighlight('color_orange')" onmouseover="GDT.highlight('color_orange')">orange</td></tr>
                <tr><td class="menulist" id="color_pink" onclick="GDT.showSelectedColor(this, 'pink');" onmouseout="GDT.unHighlight('color_pink')" onmouseover="GDT.highlight('color_pink')">pink</td></tr>
                <tr><td class="menulist" id="color_purple" onclick="GDT.showSelectedColor(this, 'purple');" onmouseout="GDT.unHighlight('color_purple')" onmouseover="GDT.highlight('color_purple')">purple</td></tr>
                <tr><td class="menulist" id="color_red" onclick="GDT.showSelectedColor(this, 'red');" onmouseout="GDT.unHighlight('color_red')" onmouseover="GDT.highlight('color_red')">red</td></tr>
                <tr><td class="menulist" id="color_yellow" onclick="GDT.showSelectedColor(this, 'yellow');" onmouseout="GDT.unHighlight('color_yellow')" onmouseover="GDT.highlight('color_yellow')">yellow</td></tr>
              </tbody>
            </table>
          </div>
          </div>
        </td>
      </tr>
      </tbody>
      </table>

<table class="editpanel">
    <tr>
      <td class="checkbox_option" colspan="2">
        <span id="prefs_useServerTime" class="fakecheckbox checked" onclick="GDT.changeCheckedState(id)" tabIndex="5"></span>
        <div style="padding-left:20px">
          Set date and time automatically
        </div>
      </td>
    </tr>
    </table>
    <hr>
    <table class="editpanel">
    <tr>
      <td class="checkbox_option" colspan="2">
        <span id="prefs_showWorldClocks" class="fakecheckbox checked" onclick="GDT.changeCheckedState(id)" tabIndex="6"></span>
        <span style="padding-left:3px">
          Additional Clocks
        </span>
      </td>
    </tr>
    <tr>
      <td><p align="left" class="settings-label">
        Add a clock:
      </p></td>
    </tr>
    <tr>
      <td nowrap>
        <input type="text" id="prefs_searchbox" class="helpText"
          value="e.g. New York, NY"
          onclick="GDT.setVisibleHelpText(this, false);"
          onfocus="GDT.setVisibleHelpText(this, false);"
          onblur="GDT.setVisibleHelpText(this, true);" tabIndex="7">
      </td>
    </tr>
    <tr>
      <td colspan="2" align="left" style="padding-left:0;">
        <input type="button" class="actionbutton" value="Save" id="btn_save" tabIndex="8"/> 
        <input onclick="GDT.hideSettings();" type="button" class="cancelbutton" tabIndex="9"
               value="Cancel" id="btn_cancel"/>
      </td>
    </tr>
  </table>

<div class="city-times">
    <div id="day-night-IE-div-%clockNumber%"
      class="day-night-div-ltr"
      style="background-image:
        url(//www.gstatic.com/ig/modules/datetime_v2/content/mapclock_%color%_ltr.cache.png);">
      <span id="day-night-IE-span-%clockNumber%" class="day-night-span"
        style="float:left"></span>
      <div id="clockTitle_%clockNumber%" class="clockTitle"
        title="%clockTitleFull%">%clockTitle%</div>
      <div title="" id="world_clock_%clockNumber%" class="world_clock_time"
        style="padding-top: 4px; padding-left: 3px;">Loading...</div>
      <div title="Remove"
        class="remove_clock_icon remove_clock_icon_IE">
        <span id="city-time-cross-IE-div-%clockNumber%"
          class="day-night-div-ltr"
          onclick="GDT.removeCity('%clockNumber%'); return false;">
          <a id="day-night-div-cross-%clockNumber%" href="#"
            style="background-image:
              url(//www.gstatic.com/ig/modules/datetime_v2/content/mapclock_%color%_ltr.cache.png);"></a>
                </span>
      </div>
    </div>
  </div>

<div id="td-table-%clockNumber%" class="city-times">
    <div id="day-night-div-%clockNumber%"
      class="city-time-div day-night-div-ltr"
      style="background-image:
        url(//www.gstatic.com/ig/modules/datetime_v2/content/mapclock_%color%_ltr.cache.png);">
      <span id="day-night-span-%clockNumber%" class="day-night-span"
        style="float:left"></span>
      <div id="clockTitle_%clockNumber%" class="clockTitle"
        title="%clockTitleFull%">%clockTitle%</div>
      <div title="" id="world_clock_%clockNumber%" class="world_clock_time"
        style="padding-top: 2px;">Loading...</div>
      <div title="Remove"
        class="remove_clock_icon remove_clock_icon_non_IE">
        <span id="city-time-cross-div-%clockNumber%"
          class="day-night-div-ltr"
          onclick="GDT.removeCity('%clockNumber%'); return false;">
          <a id="day-night-div-cross-%clockNumber%" href="#"
            style="background-image:
              url(//www.gstatic.com/ig/modules/datetime_v2/content/mapclock_%color%_ltr.cache.png);"></a>
                </span>
      </div>
    </div>
  </div>