modified buttons to be like spacenear

predict/css/pred.css

@@ -117,7 +117,8 @@ a { text-decoration: underline; color: #333; cursor: pointer; }
     right: 0px;
     width: 400px;
     text-align:center;
-    padding: 10px;
+    padding: 5px;
+    line-height: 130%;
 }
 
 /* about window is a jqueryui dialog */
@@ -125,6 +126,31 @@ a { text-decoration: underline; color: #333; cursor: pointer; }
     display: none;
 }
 
+/* the vehicle_button buttons from spacenear */
+.control_buttons {
+    border: solid #ccc 1px;
+    background-color: #eee;
+    padding: 2px;
+    margin-top: 1em;
+    color: #888;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    cursor: default;
+    line-height: 200%;
+    font-size: 10px;
+}
+
+.control_button {
+    font-weight: bold;
+    color: #888;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+a.control_button:hover {
+    color: black;
+}
+
 img.handle {
     position: relative;
     float:left;

predict/index.php

@@ -99,13 +99,18 @@ land: <span id="cursor_pred_landrange">?</span>km
 <br />
 Last run at <span id="run_time">?</span> UTC using model <span id="gfs_timestamp">?</span>
 <br />
-Download data: <a id="dlcsv">CSV <img src="images/csv.gif" border="0" /></a> <a id="dlkml">KML <img src="images/kml.png" border="0" /></a>
+<span class="control_buttons">
+<a class="control_button" id="panto">Pan To</a> | 
+<a class="control_button" id="dlcsv">CSV</a> | 
+<a class="control_button" id="dlkml">KML</a
+</span>
 </span>
 <br />
-<a><span id="showHideDebug">Show Debug</span></a> | 
-<a><span id="showHideForm">Hide Launch Card</span></a>
-<br />
-<a style="font-size: 10px" id="about_window_show">About this software</a>
+<span class="control_buttons">
+<a class="control_button" id="showHideDebug">Show Debug</a> | 
+<a class="control_button" id="showHideForm">Hide Launch Card</a> |
+<a class="control_button" id="about_window_show">About</a>
+</span>
 </div>
 
 <!-- save location -->

predict/js/pred.js

@@ -641,7 +641,7 @@ function setupEventHandlers() {
     $("#about_window_show").click(function() {
         $("#about_window").dialog({
             modal:true,
-            width:400,
+            width:600,
             buttons: {
                 Close: function() {
                         $(this).dialog('close');