<!DOCTYPE html>
<html>
  <head>
    <title>Scout &mdash; Transatlantic Autonomous Robot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald:400,300,700&amp;subset=latin,latin-ext">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"><!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"><![endif]-->
  </head>
  <body>
    <div class="top-panel">
      <div class="scout-logo"><span class="logo-big">SCOUT</span><span class="logo-small">TRANSATLANTIC</span></div>
    </div>
    <div class="digit-panel" style="display:none;">
      <div class="heading">CURRENT STATUS</div>
      <div class="coords">
        <div id="latitude">N 41&deg; 32&#8217; 52.76&#8221;</div>
        <div id="longitude">W 71&deg; 13&#8217; 32.05&#8221;</div>
      </div>
      <div id="compass"><img id="compass-ptr" src="img/Compass-240.png">
        <div class="label">000&deg;</div>
      </div>
      <div id="h-velocity" class="heading2"> 
        <div class="label">Velocity</div>
        <div id="velocity" class="msmt">00</div>
        <div class="units">
          <table class="frac">
            <tr>
              <td>mi</td>
            </tr>
            <tr>
              <td>hr</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div id="map" style="padding:10px;">
        <p>Our website has come under attack from hackers. Please be
        patient as we restore it to its former glory!</p>
        <p>You can follow Scout's progress at <a href="http://blog.gotransat.com">
        blog.gotransat.com</a>.</p>
    </div>
    <div class="bottom-panel" style="display:none;">
      <div class="buttons"><img id="cal-button" src="img/calendar_256.png"><img id="graph-button" src="img/chart_256.png">
        <div class="heading">OVERALL <br>STATS</div>
        <div id="h-time-elapsed" class="heading2">Time Elapsed
          <div id="time-elapsed">
            <div id="days" class="time"> 
              <div class="num">00</div>
              <div class="label">DAYS</div>
            </div><span class="colon">:</span>
            <div id="hours" class="time"> 
              <div class="num">00</div>
              <div class="label">HOURS</div>
            </div><span class="colon">:</span>
            <div id="mins" class="time"> 
              <div class="num">00</div>
              <div class="label">MINUTES</div>
            </div><span class="colon">:</span>
            <div id="secs" class="time"> 
              <div class="num">00</div>
              <div class="label">SECONDS</div>
            </div>
          </div>
        </div>
        <div id="h-distance-ri" class="heading2">Distance
          <div class="sub">from Rhode Island</div>
          <div id="distance-ri" class="distance">0,000</div>
          <div class="units">mi</div>
        </div>
        <div id="h-distance-sp" class="heading2">Distance
          <div class="sub">to Spain</div>
          <div id="distance-sp" class="distance">0,000</div>
          <div class="units">mi</div>
        </div>
        <div id="h-distance-tr" class="heading2">Distance
          <div class="sub">traveled by Scout</div>
          <div id="distance-tr" class="distance">0,000</div>
          <div class="units">mi</div>
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>
