@CHARSET "UTF-8";

html, body, #map { 
	height: 100%; width: 100%; padding: 0px; margin: 0px;
}

/* Center the title. 
 * Need to use the one div inside the other trick to do this so that
 * it works in both iOS and elsewhere. Sheesh! 
 */
#titleContainer {
	position:absolute; top: 40%; left: 50%;
}

#mapTitle { 
	/* Center in page */
	position: relative; left: -50%; 
	padding: 0.5em; border-radius: 0.5em; 
	/* Special semi-transparent color */
	background: rgba(0,255,0,0.5);
	/* Nice big font */
	font-family: sans-serif; font-size: 42pt; font-weight: bold;
}

/* Set the title text here in css 
 */
#mapTitle:before {
	content: "Transitime";
}
	
/* Center the route selector.
 * Need to use the one div inside the other trick to do this so that
 * it works in both iOS and elsewhere. Sheesh!
 */
#routesContainer {
	position:absolute; top: 5px; left: 5px;
}

/* Set font for route selector. Need to use #select2-drop because of 
 * extra elements that select2 adds 
 */
#select2-drop, #routesDiv {
  font-family: sans-serif; font-size: normal;
}

/* For the vehicle and prediction popups 
 */
.vehicle { font-size: x-small; font-weight: normal;}
.prediction {font-size: large; font-weight: bold;}

/* For when displaying special info for predictions using superscript
 */
sup {
	vertical-align: super;
	font-size: xx-small;
}