map.css

@@ -1,25 +1,71 @@
html, body, #map {
   width: 100%;
   height: 100%;
   margin: 0;
   font-family: sans-serif;
   overflow: hidden;
}

#map {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

#map .ol-attribution {
   left: 0;
   right: auto;
}

#popup {
   color: black;
   background: white;
   padding: 5px;
   border: 1px solid black;
   border-radius: 10px;
   font-size: 12px;
   border-left: 1px solid black;
   font-size: 14px;
	
   position: absolute;
   width: 300px;
   right: -315px;
   top: 0;
   bottom: 0;
	
   transition: right .4s;
   transition: width .4s;
	
   opacity: .8;
}

#popup.show {
   right: 0;
}

@media (max-width: 600px) {
   #popup {
      width: 90%;
      right: -100%;
   }
	
   #popup.show {
      right: 0%;
   }
}

#popup .type {
   padding-bottom: 0;
   color: #444;
   font-size: 80%;
}
#popup p {
   margin: 0;
   padding: 5px;
}
#popup .bold {
#popup .name {
   font-weight: bold;
}
#popup .vehicleInfo {
   font-size: 21px;
}

#title {
   top: .5em;