<?php
?>

  <table style='font-size:12px;'>
    <tr>
      <td>
        <label>City: (the data after the colons in the dropdown box is the county/province, country, longitude, & latitude)</label>
        <input class="w3-input w3-border w3-round-large w3-hover-light-gray w3-animate-input" type="text" size="28" maxlength="45" name="city" id="inputString" style="width:50%" onkeyup="lookup(this.value);" onblur="fill_1();" />

        <div class="suggestionsBox" id="suggestions" style="display: none;">
          <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

          <div class="suggestionList" id="autoSuggestionsList">
           &nbsp;
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <label>County/Province:</label>
        <input class="w3-input w3-border w3-round-large w3-hover-light-gray" type="text" size="28" maxlength="45" id="county" name="county" style="width:50%">
      </td>
    </tr>

    <tr>
      <td>
        <label>Country:</label>
        <input class="w3-input w3-border w3-round-large w3-hover-light-gray" type="text" size="28" maxlength="45" id="cntry" name="cntry" style="width:50%">
      </td>
    </tr>

    <tr>
      <td>
        <label>County Index:</label>
        <input class="w3-input w3-border w3-round-large w3-hover-light-gray" type="text" size="28" maxlength="45" id="county_index" name="county_index" style="width:50%">
      </td>
    </tr>

    <tr>
      <td>
        &nbsp;
      </td>
    </tr>

    <tr>
      <td>
        <label>Longitude:</label>
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" type="text" size="28" maxlength="45" id="the_lng" name="the_lng" style="width:25%">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='3' size='3' id='long_deg' name='long_deg' style="text-align:center;">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='1' size='1' id='ew' name='ew' style="text-align:center;">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='2' size='2' id='long_min' name='long_min' style="text-align:center;">
      </td>
    </tr>

    <tr>
      <td>
        <label>Latitude:</label>
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" type="text" size="28" maxlength="45" id="the_lat" name="the_lat" style="width:25%">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='3' size='3' id='lat_deg' name='lat_deg' style="text-align:center;">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='1' size='1' id='ns' name='ns' style="text-align:center;">
        <input class="w3-inputXX w3-border w3-round-large w3-hover-light-gray" maxlength='2' size='2' id='lat_min' name='lat_min' style="text-align:center;">
        
      </td>
    </tr>

    <tr>
      <td>
        &nbsp;
      </td>
    </tr>

    <tr>
      <td>
        <div id="my_data_list" name="my_data_list" style="display: none;">
          &nbsp;
        </div>
      </td>
    </tr>
  </table>
