CSS improvements, embed defaults

static/css/combined.css

@@ -4,7 +4,7 @@ body {
     padding: 0;
 }
 .combined:not(:first-child) {
-    border-left: 2px solid #ccc;
+    border-left: 2px solid #666;
 }
 .combined.map,
 .combined.predictions {

static/css/map.css

@@ -5,7 +5,7 @@ html, body {
     border: 0;
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
     font-size: 14px;
 }
 input,

static/css/predictions.css

 body {
     margin: 0;
-    padding: .4em;
-    background-color: #444;
+}
+.predictions {
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    background-color: #222;
     color: #fff;
-    font-family: sans-serif;
+    padding: .4em;
 }
 .predictions header {
     text-align: center;
     font-weight: bold;
-    text-align: center;
+    font-size: 1.2em;
 }
 .predictions p {
-
+    margin: .5em 0;
 }
 .predictions .prediction.lt1min {
     color: #f00;

templates/combined.html

@@ -13,7 +13,7 @@
     <link href="static/css/combined.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div class="combined map" id="c-map">
+    <div class="combined map{% if embed %} embed{% endif %}" id="c-map">
     </div>
     <div class="combined predictions" id="c-predictions">
     </div>

templates/map.html

@@ -11,7 +11,7 @@
     <link href="static/css/map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div class="map" id="map"></div>
+    <div class="map{% if embed %} embed{% endif %}" id="map"></div>
     {# TODO: Generate these using JS, not here. #}
     <div id="msg">
         <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>

templates/modal-embed.html

@@ -21,7 +21,7 @@
             <select id="embed-mode">
                 <option value="m">Map</option>
                 <option value="p">Predictions</option>
-                <option value="c">Combined</option>
+                <option selected value="c">Combined</option>
             </select>
         </label>
     </p>
@@ -44,7 +44,7 @@
             <legend>Size</legend>
             <label for="embed-width">
                 <span>Width:</span>
-                <input id="embed-width" type="number" min=200 step=50 value=400> px
+                <input id="embed-width" type="number" min=200 step=50 value=500> px
             </label>
             <br>
             <label for="embed-height">