diff --git a/servers/php/css/dark.css b/servers/php/css/dark.css
deleted file mode 100644
index 0a7459a..0000000
--- a/servers/php/css/dark.css
+++ /dev/null
@@ -1,112 +0,0 @@
-
-body {
-   /* background-color: #ccc; */
-}
-
-.container {
-    /* background-color: #272b30; for slate */
-    border: 1px solid #aaa;
-    margin-top: 10px;
-}
-.col-sm-2 {
-    height: 50px;           
-}
-.col-sm-3 {  
-    height: 50px;        
-}
-.col-sm-6 { 
-    height: 50px;          
-}
-.col-sm-8 {  
-    height: 50px;          
-}
-.col-sm-10 {
-    height: 50px;           
-}
-#toplogo {
-    padding-top: 10px;
-}
-#messages {
-    padding-top: 19px;
-    text-align: right;
-    margin: 0px 0px 10px 0px;
-    clear:right;       
-}
-#routeSelect {
-    width: 100%;
-    margin-bottom:5px;
-    background-color: #ccc;
-
-}
-#autorefresh {
-    width: 100%;  
-    margin-bottom:5px;
-}
-#delete {
-    width: 100%;                
-    margin-bottom:5px;
-}
-#refresh {
-    width: 100%;   
-    margin-bottom:5px;
-}
-#viewall {
-    width: 100%;   
-    margin-bottom:5px;
-}
-.deletediv {
-    text-align: center;
-}
-.autorefreshdiv {
-    text-align: center;
-}
-.refreshdiv {
-    text-align: center;
-}
-.viewalldiv {
-    text-align: center;
-}
-@media only screen and (min-width : 768px) {
-    .container {
-        margin-top: 25px;
-    }
-
-    .deletediv {
-        text-align: left;
-    }
-    .autorefreshdiv {
-        text-align: center;
-    }
-
-    .refreshdiv {
-        text-align: center;
-    }
-    
-    .viewalldiv {
-        text-align: right;
-        padding-right: 15px;
-    }    
-}      
-#map-canvas {
-    border: 1px solid #000;
-    width: 100%;
-    height: 460px;    
-}
-#mapdiv { 
-    height: 475px;
-}
-#selectdiv {
-    height: 50px;
-}
-#halimage {
-    float:left;
-    width: 37px;
-    height: 37px;
-    padding-left: 40px;
-    margin-bottom: 5px;
-    background: url('../images/gpstracker-man-blue-37.png')  no-repeat; 
-}
-#gpstrackertext {
-    position:relative;
-    margin-top:10px;
-}
diff --git a/servers/php/css/light.css b/servers/php/css/light.css
deleted file mode 100644
index df1aed9..0000000
--- a/servers/php/css/light.css
+++ /dev/null
@@ -1,111 +0,0 @@
-
-body {
-   /* background-color: #ccc; */
-}
-
-.container {
-    /* background-color: #272b30; for slate */
-    border: 1px solid #aaa;
-    margin-top: 10px;
-}
-.col-sm-2 {
-    height: 50px;           
-}
-.col-sm-3 {  
-    height: 50px;        
-}
-.col-sm-6 { 
-    height: 50px;          
-}
-.col-sm-8 {  
-    height: 50px;          
-}
-.col-sm-10 {
-    height: 50px;           
-}
-#toplogo {
-    padding-top: 10px;
-}
-#messages {
-    padding-top: 19px;
-    text-align: right;
-    margin: 0px 0px 10px 0px;
-    clear:right;       
-}
-#routeSelect {
-    width: 100%;
-    margin-bottom:5px;
-    /* background-color: #ccc; */
-}
-#autorefresh {
-    width: 100%;  
-    margin-bottom:5px;
-}
-#delete {
-    width: 100%;                
-    margin-bottom:5px;
-}
-#refresh {
-    width: 100%;   
-    margin-bottom:5px;
-}
-#viewall {
-    width: 100%;   
-    margin-bottom:5px;
-}
-.deletediv {
-    text-align: center;
-}
-.autorefreshdiv {
-    text-align: center;
-}
-.refreshdiv {
-    text-align: center;
-}
-.viewalldiv {
-    text-align: center;
-}
-@media only screen and (min-width : 768px) {
-    .container {
-        margin-top: 25px;
-    }
-
-    .deletediv {
-        text-align: left;
-    }
-    .autorefreshdiv {
-        text-align: center;
-    }
-
-    .refreshdiv {
-        text-align: center;
-    }
-    
-    .viewalldiv {
-        text-align: right;
-        padding-right: 15px;
-    }    
-}      
-#map-canvas {
-    border: 1px solid #000;
-    width: 100%;
-    height: 460px;    
-}
-#mapdiv { 
-    height: 475px;
-}
-#selectdiv {
-    height: 50px;
-}
-#halimage {
-    float:left;
-    width: 37px;
-    height: 37px;
-    padding-left: 40px;
-    margin-bottom: 5px;
-    background: url('../images/gpstracker-man-blue-37.png')  no-repeat; 
-}
-#gpstrackertext {
-    position:relative;
-    margin-top:10px;
-}
diff --git a/servers/php/css/styles.css b/servers/php/css/styles.css
index a003888..27143ad 100644
--- a/servers/php/css/styles.css
+++ b/servers/php/css/styles.css
@@ -1,252 +1,104 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-#gpstracker {
-    position:relative;
-    top: 10px;
-    width:97%;
-    border:1px solid #909090;
-    margin: 0 auto;
-    padding: 0;
-    /*background-color:#CCEDFF;*/
-    background-color:rgba(0,0,0,0.8);
-    font-family: helvetica, arial, sans-serif;
-    font-size: 15px;
-}
-
-#map-canvas {
-    top: 15px;
-    width: 95%;
-    height:400px;
-    /*background-color:#FFF !important;*/
-    background-color:rgba(0,0,0,0.5);
-    border:1px solid #909090;
-	overflow: hidden !important;
-	padding: 0px !important;
-	margin: 0 auto;  
-	word-wrap: normal;	    
-}
-
-#map-canvas img {
-	background-color: transparent !important;
-	max-width: 99999px !important;  	/* Some themes have max-width/max-height set, some phones can't accept max-width: auto. */
-	max-height: none !important;
-	visibility: inherit !important;
-	padding: 0px !important;
-	margin: 0px 20px 0px 0px !important;
-	box-shadow: none !important;		/* 2012 adds box shadow to all images */
-	border-radius: 0px !important;		/* 2012 adds border-radius to all images */
-}
-
-#hal-image {
-    width:37px;
-    height:37px;
-    vertical-align:middle;
-    margin-bottom:5px;   
-}
-
-#gps_info_table {
-    border-spacing: 0;
-    border-collapse: separate;   
-}
-
-#gps_info_table td {
-    padding: 0;
-    text-align: right;   
-}
-
-#messages {
-    position:relative;
-    top: 7px;
-    width:95%;
-    margin: 0 auto;
-    margin-bottom:7px;
-}
-
-#top-messages {
-    display:table;
-    float:right;
-    text-align:right;
-    margin-top:10px;
-    width:50%;
-    min-width:50%;
-    color:#33ffcc !important;
-}
-
-#selectRoute {
-    position:relative;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-}
-
-#timer-countdown {
-    color:#F00;
-}
-
-#top-label {
-    color:#33ff66;
-    margin-right:3px;
-}
-
-.bottom-label {
-    color:#33ff66;
-    margin-right:3px;
-}
-
-#autorefresh {
-    position:relative;
-    float: right;
-    right: 17px;
-    width: 110px;
-    height:37px;
-    margin-top: 25px;
-    border:1px;
-    border-style:solid;
-    border-color:#555;
-    color:#000 !important;
-    background:#33ffcc  !important;            
-}
-
-#refresh {
-    position:relative;
-    float: right;
-    width: 110px;
-    height:37px;
-    margin-top: 25px;
-    border:1px;
-    border-style:solid;
-    border-color:#555;
-    color:#000;
-    background:#33ffcc  !important;             
-} 
-
-#delete {
-    position:relative;
-    float: right;
-    right: 33px;
-    width: 110px;
-    height:37px;
-    margin-top: 25px;
-    border:1px;
-    border-style:solid;
-    border-color:#555;
-    color:#000;
-    background:#33ffcc  !important;             
-} 
-
-#remaining-time {
-    position:relative;
-    float:left;
-    width: 400px;
-    margin-top:3px;
-    /* background:#33ffcc; */     
-}
-
-/* Minimum width of 600 pixels for desktop */
-@media screen and (min-width: 600px) {
-    #bottom-messages {
-        width:95%;
-        margin: 0 auto;        
-    }
-    #time-messages {
-        position:relative;
-        float:left;
-        top: 20px;
-        max-width:250px;
-    }
-    
-    #gpstracker {
-        height:525px;
-    }
-}
-
-/* Maximum width of 599 pixels for phones */
-@media screen and (max-width: 599px) {
-    #time-messages {
-        position:relative;
-        float:left;
-        left: 10px;
-        top: 20px;
-        max-width:250px;
-    }
-    
-    #refresh {
-        clear:both;
-        margin-top: 37px   !important;
-    } 
-    
-    #autorefresh {
-        clear:left;
-        margin-top: 37px  !important;
-    }
-    
-    #gpstracker {
-        height:527px;
-    }
-}
-
-
-/*
-* {
-    margin: 0;
-    padding: 0;
-}
-body {
-    font-family: arial, helvetica, sans-serif;
-     font-size: 17px;
-}
-#test {
-    position:absolute;
-    left: 750px;
-    top: 50px;
-    width:400px;
-}
-#messages {
-    position:absolute;
-    left: 10px;
-    top: 10px;
-    width:950px;
-}
-#map {
-    position:absolute;
-    left: 10px;
-    top: 40px;
-    width:700px;
-    height:450px;
-    border:1px;
-    border-style:solid;
-    background-color:#FFF;
-}
-#selectRoute {
-    position:absolute;
-    left: 10px;
-    top: 510px;
-    width: 600px;
-}
-#selectRefresh {
-    position:absolute;
-    left: 10px;
-    top: 550px;
-    width: 250px;
-}
-#selectZoomLevel {
-    position:absolute;
-    left: 360px;
-    top: 550px;
-    width: 250px;
-}
-#delete {
-    position:absolute;
-    left: 637px;
-    top: 510px;
-    width: 75px;
-}
-#refresh {
-    position:absolute;
-    left: 637px;
-    top: 550px;
-    width: 75px;    
-}
-*/
+body {
+   /* background-color: #ccc; */
+}
+.container {
+    border: 1px solid #aaa;
+    margin-top: 10px;
+}
+.routeSelectDark {
+   background-color: #ccc;
+}
+.col-sm-2 {
+    height: 50px;           
+}
+.col-sm-3 {  
+    height: 50px;        
+}
+.col-sm-6 { 
+    height: 50px;          
+}
+.col-sm-8 {  
+    height: 50px;          
+}
+.col-sm-10 {
+    height: 50px;           
+}
+#toplogo {
+    padding-top: 10px;
+}
+#messages {
+    padding-top: 19px;
+    text-align: right;
+    margin: 0px 0px 10px 0px;     
+}
+#routeSelect {
+    width: 100%;
+    color: #000;
+    margin-bottom:5px;
+    /* background-color: #ccc; */
+}
+#autorefresh {
+    width: 100%;  
+    margin-bottom:5px;
+}
+#delete {
+    width: 100%;                
+    margin-bottom:5px;
+}
+#refresh {
+    width: 100%;   
+    margin-bottom:5px;
+}
+#viewall {
+    width: 100%;   
+    margin-bottom:5px;
+}
+.deletediv {
+    text-align: center;
+}
+.autorefreshdiv {
+    text-align: center;
+}
+.refreshdiv {
+    text-align: center;
+}
+.viewalldiv {
+    text-align: center;
+}
+@media only screen and (min-width : 768px) {
+    .container {
+        margin-top: 25px;
+    }
+
+    .deletediv {
+        text-align: left;
+    }
+    .autorefreshdiv {
+        text-align: center;
+    }
+
+    .refreshdiv {
+        text-align: center;
+    }
+    
+    .viewalldiv {
+        text-align: right;
+    }    
+}      
+#map-canvas {
+    border: 1px solid #000;
+    width: 100%;
+    height: 460px;    
+}
+#mapdiv { 
+    height: 475px;
+}
+#selectdiv {
+       margin-bottom: 10px;
+}
+#halimage {
+    vertical-align:middle;
+    width: 37px;
+    height: 37px;
+    margin-bottom: 5px;
+}
diff --git a/servers/php/css/styles_old.css b/servers/php/css/styles_old.css
new file mode 100644
index 0000000..a003888
--- /dev/null
+++ b/servers/php/css/styles_old.css
@@ -0,0 +1,252 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+#gpstracker {
+    position:relative;
+    top: 10px;
+    width:97%;
+    border:1px solid #909090;
+    margin: 0 auto;
+    padding: 0;
+    /*background-color:#CCEDFF;*/
+    background-color:rgba(0,0,0,0.8);
+    font-family: helvetica, arial, sans-serif;
+    font-size: 15px;
+}
+
+#map-canvas {
+    top: 15px;
+    width: 95%;
+    height:400px;
+    /*background-color:#FFF !important;*/
+    background-color:rgba(0,0,0,0.5);
+    border:1px solid #909090;
+	overflow: hidden !important;
+	padding: 0px !important;
+	margin: 0 auto;  
+	word-wrap: normal;	    
+}
+
+#map-canvas img {
+	background-color: transparent !important;
+	max-width: 99999px !important;  	/* Some themes have max-width/max-height set, some phones can't accept max-width: auto. */
+	max-height: none !important;
+	visibility: inherit !important;
+	padding: 0px !important;
+	margin: 0px 20px 0px 0px !important;
+	box-shadow: none !important;		/* 2012 adds box shadow to all images */
+	border-radius: 0px !important;		/* 2012 adds border-radius to all images */
+}
+
+#hal-image {
+    width:37px;
+    height:37px;
+    vertical-align:middle;
+    margin-bottom:5px;   
+}
+
+#gps_info_table {
+    border-spacing: 0;
+    border-collapse: separate;   
+}
+
+#gps_info_table td {
+    padding: 0;
+    text-align: right;   
+}
+
+#messages {
+    position:relative;
+    top: 7px;
+    width:95%;
+    margin: 0 auto;
+    margin-bottom:7px;
+}
+
+#top-messages {
+    display:table;
+    float:right;
+    text-align:right;
+    margin-top:10px;
+    width:50%;
+    min-width:50%;
+    color:#33ffcc !important;
+}
+
+#selectRoute {
+    position:relative;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+}
+
+#timer-countdown {
+    color:#F00;
+}
+
+#top-label {
+    color:#33ff66;
+    margin-right:3px;
+}
+
+.bottom-label {
+    color:#33ff66;
+    margin-right:3px;
+}
+
+#autorefresh {
+    position:relative;
+    float: right;
+    right: 17px;
+    width: 110px;
+    height:37px;
+    margin-top: 25px;
+    border:1px;
+    border-style:solid;
+    border-color:#555;
+    color:#000 !important;
+    background:#33ffcc  !important;            
+}
+
+#refresh {
+    position:relative;
+    float: right;
+    width: 110px;
+    height:37px;
+    margin-top: 25px;
+    border:1px;
+    border-style:solid;
+    border-color:#555;
+    color:#000;
+    background:#33ffcc  !important;             
+} 
+
+#delete {
+    position:relative;
+    float: right;
+    right: 33px;
+    width: 110px;
+    height:37px;
+    margin-top: 25px;
+    border:1px;
+    border-style:solid;
+    border-color:#555;
+    color:#000;
+    background:#33ffcc  !important;             
+} 
+
+#remaining-time {
+    position:relative;
+    float:left;
+    width: 400px;
+    margin-top:3px;
+    /* background:#33ffcc; */     
+}
+
+/* Minimum width of 600 pixels for desktop */
+@media screen and (min-width: 600px) {
+    #bottom-messages {
+        width:95%;
+        margin: 0 auto;        
+    }
+    #time-messages {
+        position:relative;
+        float:left;
+        top: 20px;
+        max-width:250px;
+    }
+    
+    #gpstracker {
+        height:525px;
+    }
+}
+
+/* Maximum width of 599 pixels for phones */
+@media screen and (max-width: 599px) {
+    #time-messages {
+        position:relative;
+        float:left;
+        left: 10px;
+        top: 20px;
+        max-width:250px;
+    }
+    
+    #refresh {
+        clear:both;
+        margin-top: 37px   !important;
+    } 
+    
+    #autorefresh {
+        clear:left;
+        margin-top: 37px  !important;
+    }
+    
+    #gpstracker {
+        height:527px;
+    }
+}
+
+
+/*
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: arial, helvetica, sans-serif;
+     font-size: 17px;
+}
+#test {
+    position:absolute;
+    left: 750px;
+    top: 50px;
+    width:400px;
+}
+#messages {
+    position:absolute;
+    left: 10px;
+    top: 10px;
+    width:950px;
+}
+#map {
+    position:absolute;
+    left: 10px;
+    top: 40px;
+    width:700px;
+    height:450px;
+    border:1px;
+    border-style:solid;
+    background-color:#FFF;
+}
+#selectRoute {
+    position:absolute;
+    left: 10px;
+    top: 510px;
+    width: 600px;
+}
+#selectRefresh {
+    position:absolute;
+    left: 10px;
+    top: 550px;
+    width: 250px;
+}
+#selectZoomLevel {
+    position:absolute;
+    left: 360px;
+    top: 550px;
+    width: 250px;
+}
+#delete {
+    position:absolute;
+    left: 637px;
+    top: 510px;
+    width: 75px;
+}
+#refresh {
+    position:absolute;
+    left: 637px;
+    top: 550px;
+    width: 75px;    
+}
+*/
diff --git a/servers/php/displaymap-blue.php b/servers/php/displaymap-blue.php
index d8b7de4..9485109 100644
--- a/servers/php/displaymap-blue.php
+++ b/servers/php/displaymap-blue.php
@@ -12,25 +12,20 @@
     <script src="js/leaflet-plugins/google.js"></script>
     <script src="js/leaflet-plugins/bing.js"></script>
     <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
-    
     <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
-    
     <!-- 
         to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
         and then change the word after 3.2.0 in the following link to the new theme name
-    
-        use cerulean for light, slate for dark, superhero for blue
     -->    
-    
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/superhero/bootstrap.min.css">
-    <link rel="stylesheet" href="css/dark.css">
+    <link rel="stylesheet" href="css/styles.css">
             
 </head>
 <body>
     <div class="container">
         <div class="row">
             <div class="col-sm-4" id="toplogo">
-                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
+                <img id="halimage" src="images/gpstracker-man-37.png">GpsTracker
             </div>
             <div class="col-sm-8" id="messages"></div>
         </div>
@@ -41,7 +36,7 @@
         </div>
         <div class="row">
             <div class="col-sm-12" id="selectdiv">
-                <select id="routeSelect" tabindex="1" class="form-control"></select>
+                <select id="routeSelect" tabindex="1"></select>
             </div>
         </div>
         <div class="row">
diff --git a/servers/php/displaymap-dark.php b/servers/php/displaymap-dark.php
index 8566cbc..a244e71 100644
--- a/servers/php/displaymap-dark.php
+++ b/servers/php/displaymap-dark.php
@@ -12,25 +12,20 @@
     <script src="js/leaflet-plugins/google.js"></script>
     <script src="js/leaflet-plugins/bing.js"></script>
     <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
-    
     <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
-    
     <!-- 
         to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
         and then change the word after 3.2.0 in the following link to the new theme name
-    
-        use cerulean for light, slate for dark, superhero for blue
     -->    
-    
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/slate/bootstrap.min.css">
-    <link rel="stylesheet" href="css/dark.css">
+    <link rel="stylesheet" href="css/styles.css">
             
 </head>
 <body>
     <div class="container">
         <div class="row">
             <div class="col-sm-4" id="toplogo">
-                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
+                <img id="halimage" src="images/gpstracker-man-37.png">GpsTracker
             </div>
             <div class="col-sm-8" id="messages"></div>
         </div>
@@ -41,7 +36,7 @@
         </div>
         <div class="row">
             <div class="col-sm-12" id="selectdiv">
-                <select id="routeSelect" tabindex="1" class="form-control"></select>
+                <select id="routeSelect" tabindex="1" class="routeSelectDark"></select>
             </div>
         </div>
         <div class="row">
diff --git a/servers/php/displaymap.php b/servers/php/displaymap.php
index bfb1e3a..329bb9b 100644
--- a/servers/php/displaymap.php
+++ b/servers/php/displaymap.php
@@ -11,26 +11,21 @@
     <script src="js/leaflet-0.7.3/leaflet.js"></script>
     <script src="js/leaflet-plugins/google.js"></script>
     <script src="js/leaflet-plugins/bing.js"></script>
-    <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
-    
-    <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
-    
+    <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">    
+    <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->    
     <!-- 
         to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
         and then change the word after 3.2.0 in the following link to the new theme name
-    
-        use cerulean for light, slate for dark, superhero for blue
     -->    
-    
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css">
-    <link rel="stylesheet" href="css/light.css">
+    <link rel="stylesheet" href="css/styles.css">
             
 </head>
 <body>
     <div class="container">
         <div class="row">
             <div class="col-sm-4" id="toplogo">
-                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
+                <img id="halimage" src="images/gpstracker-man-blue-37.png">GpsTracker
             </div>
             <div class="col-sm-8" id="messages"></div>
         </div>
@@ -41,7 +36,7 @@
         </div>
         <div class="row">
             <div class="col-sm-12" id="selectdiv">
-                <select id="routeSelect" tabindex="1" class="form-control"></select>
+                <select id="routeSelect" tabindex="1"></select>
             </div>
         </div>
         <div class="row">
diff --git a/servers/php/images/gpstracker-man-37.png b/servers/php/images/gpstracker-man-37.png
new file mode 100644
index 0000000..af9e814
--- /dev/null
+++ b/servers/php/images/gpstracker-man-37.png
Binary files differ
diff --git a/servers/php/js/maps.js b/servers/php/js/maps.js
index 96fb08c..4b5a870 100644
--- a/servers/php/js/maps.js
+++ b/servers/php/js/maps.js
@@ -8,13 +8,7 @@
     var sessionIDArray;
     
     var viewingAllRoutes = false;
-    
-    //var bodyBackgroundColor = $('body').css('backgroundColor');
-    //$('.container').css('background-color', bodyBackgroundColor);
-    //$('body').css('background-color', '#ccc');
-    
-    // $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
-    
+        
     getAllRoutesForMap();
     load();
     
@@ -52,6 +46,13 @@
         getAllRoutesForMap();
     });
     
+    function setTheme() {
+        //var bodyBackgroundColor = $('body').css('backgroundColor');
+        //$('.container').css('background-color', bodyBackgroundColor);
+        //$('body').css('background-color', '#ccc');
+        // $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');        
+    }
+    
     function getAllRoutesForMap() {
         // when the page first loads, get the routes from the DB and load them into the dropdown box.
         
@@ -92,7 +93,7 @@
         });
     }    
     
-    function loadRoutes(json) {
+    function loadRoutes(json) {        
         if (json.length == 0) {
             showPermanentMessage('There are no routes available to view');
             map.innerHTML = '';
@@ -128,7 +129,10 @@
     }
 
     // this will get the map and route, the route is selected from the dropdown box
+    
     function getRouteForMap() {
+        
+        
         if (hasMap()) {
         
             // get selected index
@@ -153,10 +157,11 @@
                        console.log("errorThrown: " + errorThrown);
                     }
                });
-        }
-        else {
-            alert("Please select a route before trying to refresh map.");
-        }
+        
+        } 
+        // else {
+        //    alert("Please select a route before trying to refresh map.");
+        // }
     }
 
     // check to see if we have a map loaded, don't want to autorefresh or delete without it
@@ -223,7 +228,7 @@
 
                     // want to set the map center on the last location
                     if (counter == $(json.locations).length) {
-                        gpsTrackerMap.setView(tempLocation, zoom);
+                        //gpsTrackerMap.setView(tempLocation, zoom);  if using fixed zoom
                         finalLocation = true;
                     
                         if (!viewingAllRoutes) {
@@ -283,7 +288,7 @@
         // convert from meters to feet
         accuracy = parseInt(accuracy * 3.28);
 
-        var popupWindowText = "<table border=0 style=\"font-size:95%;font-family:arial,helvetica,sans-serif;\">" +
+        var popupWindowText = "<table border=0 style=\"font-size:95%;font-family:arial,helvetica,sans-serif;color:#000;\">" +
             "<tr><td align=right>&nbsp;</td><td>&nbsp;</td><td rowspan=2 align=right>" +
             "<img src=images/" + getCompassImage(direction) + ".jpg alt= />" + lastMarker +
             "<tr><td align=right>Speed:&nbsp;</td><td>" + speed +  " mph</td></tr>" +