CSS cleanup (add classes)

static/css/map.css

@@ -26,17 +26,17 @@ legend {
 fieldset legend ~ label {
     font-size: .9em;
 }
-#map {
+.map {
     height: 100%;
     width: 100%;
 }
-#map .prediction.lt1min {
+.map .prediction.lt1min {
     color: #f00;
 }
-#map .prediction.lt2mins {
+.map .prediction.lt2mins {
     color: #f80;
 }
-#map .prediction.lt5mins {
+.map .prediction.lt5mins {
     color: #ff0;
 }
 
@@ -59,8 +59,8 @@ fieldset legend ~ label {
 }
 
 /* Embed Mode - Hide UI stuff */
-#map.embed .leaflet-control-zoom,
-#map.embed ~ #locate {
+.map.embed .leaflet-control-zoom,
+.map.embed ~ #locate {
     display: none;
 }
 
@@ -90,64 +90,64 @@ fieldset legend ~ label {
 }
 
 /* Attribution link / "About" popup */
-#map .leaflet-control-attribution {
+.map .leaflet-control-attribution {
     background-color: rgba(0,0,0,.8);
     border-top: 1px solid #eee;
     border-left: 1px solid #eee;
     border-top-left-radius: 3px;
     color: #eee;
 }
-#map .leaflet-control-attribution a {
+.map .leaflet-control-attribution a {
     cursor: pointer;
 }
-#map .leaflet-control-zoom,
-#map .leaflet-control-zoom a {
+.map .leaflet-control-zoom,
+.map .leaflet-control-zoom a {
     border: 1px solid #666;
     background-color: #222;
 }
-#map a,
-#map a:hover,
-#map a:visited,
-#map a:active {
+.map a,
+.map a:hover,
+.map a:visited,
+.map a:active {
     color: #fff;
     font-weight: bold;
     text-decoration: none;
 }
-#map div.leaflet-popup header,
-#map div.leaflet-popup footer {
+.map div.leaflet-popup header,
+.map div.leaflet-popup footer {
     text-align: center;
 }
-#map div.leaflet-popup footer {
+.map div.leaflet-popup footer {
     opacity: .75;
 }
-#map div.leaflet-popup .predictions .none {
+.map div.leaflet-popup .predictions .none {
     opacity: .75;
 }
-#map div.leaflet-popup .predictions.vehicle-predictions .stop:nth-child(n+6) {
+.map div.leaflet-popup .predictions.vehicle-predictions .stop:nth-child(n+6) {
     display: none;
 }
-#map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .stop:nth-child(n+6) {
+.map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .stop:nth-child(n+6) {
     display: block;
 }
-#map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .more {
+.map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .more {
     display: none;
 }
-#map div.leaflet-popup .predictions.vehicle-predictions .more {
+.map div.leaflet-popup .predictions.vehicle-predictions .more {
     text-align: center;
 }
-#map div.leaflet-popup div.leaflet-popup-content-wrapper,
-#map div.leaflet-label {
+.map div.leaflet-popup div.leaflet-popup-content-wrapper,
+.map div.leaflet-label {
     border: 3px solid #666;
     background: #222;
     color: #eee;
 }
-#map div.leaflet-popup div.leaflet-popup-tip {
+.map div.leaflet-popup div.leaflet-popup-tip {
     background-color: #666;
 }
-#map div.leaflet-popup div.leaflet-popup-content {
+.map div.leaflet-popup div.leaflet-popup-content {
     margin: .5em .66em;
 }
-#map div.leaflet-popup div.leaflet-popup-content header {
+.map div.leaflet-popup div.leaflet-popup-content header {
     font-weight: bold;
     font-size: 1.3em;
     color: #fff;

static/css/predictions.css

@@ -5,21 +5,21 @@ body {
     color: #fff;
     font-family: sans-serif;
 }
-#predictions header {
+.predictions header {
     text-align: center;
     font-weight: bold;
     text-align: center;
 }
-#predictions p {
+.predictions p {
 
 }
-#predictions .prediction.lt1min {
+.predictions .prediction.lt1min {
     color: #f00;
 }
-#predictions .prediction.lt2mins {
+.predictions .prediction.lt2mins {
     color: #f80;
 }
-#predictions .prediction.lt5mins {
+.predictions .prediction.lt5mins {
     color: #ff0;
 }
 

templates/map.html

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

templates/predictions.html

@@ -8,7 +8,7 @@
     <link href="static/css/predictions.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div id="predictions"></div>
+    <div class="predictions" id="predictions"></div>
     <script src="bower/jquery/dist/jquery.min.js"></script>
     <script src="static/js/map.js"></script>
     <script src="static/js/predictions.js"></script>