@font-face {
   	font-family: 'Muli';
   	src: url('fonts/Muli-Regular.ttf');
   }
   
   tbody,
   tfoot,
   thead,
   tr,
   th,
   td,
   table {
   	margin: 0;
   	padding: 0;
   	border: 0;
   	font-size: 100%;
   	font: inherit;
   	vertical-align: baseline;
   }
   
   table {
   	border-collapse: collapse;
   	border-spacing: 0;
   }
   
   body {
   	text-align: center;
   	background-color: rgb(241, 241, 241);
   	margin: 0;
   	background-color: #424242;
   	font-family: 'Muli', sans-serif;
   }
   
   a {
   	color: rgb(255, 144, 36);
   }
   
   header {
   	display: inline-block;
   	width: 100%;
   	background-color: #2E2E2E;
   	text-align: center;
   	font-family: 'Muli', sans-serif;
   }
   
   footer {
/*   	position: absolute;*/
   	left: 0;
   	width: 100%;
   	font-size: smaller;
   	text-align: center;
   	border-top: rgb(255, 144, 36) 2px solid;
   	background-color: #2B2B2B;
   	padding: 0.4em 0em 0.4em 0em;
   }
   
   p,
   li {
   	color: white;
   	text-align: left;
   }
   
   nav {
   	line-height: 2em;
   	font-family: 'Muli', sans-serif;
   	color: #eeeeee;
   	padding: 0.6em;
   	border-bottom: rgb(255, 144, 36) 2px solid;
   }
   
   nav span .page {
   	cursor: pointer;
   	color: white;
   	text-decoration: none;
   	font-size: 1.2em;
   	font-weight: 600;
   	padding: 0.2em 1em 0.4em 1em;
   	border-radius: 0.3em;
   }
   
   nav span {
   	color: #424242;
   	font-size: 1.4em;
   }
   
   nav .page:hover {
   	background-color: #424242;
   }
   
   #mainTitle {
   	color: rgb(255, 144, 36);
   	margin: 0.6em auto 0.6em auto;
   	font-size: 2.5em;
   	font-weight: bold;
   }
   
   .grouping {
   	font-size: 1em;
   	word-break: keep-all;
   	white-space: nowrap;
   }
   
   #contentWrapper {
   	margin: 1em;
   	max-width: 800px;
   	margin: auto;
   	margin-top: 1em;
   }
   
   #barchart {
   	height: 400px;
   	margin-top: 1em;
   }
   /*   table {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
       border-collapse: collapse;
       border-spacing: 0;
   }*/
   
   .balloon {
   	position: absolute;
   	background-color: white;
   	color: black;
   	padding: 0.25em 0.5em;
   	left: 50%;
   	top: 0;
   	transform: translate3d(0%, -120%, 0);
   	white-space: nowrap;
   	margin-right: -50%;
   	text-align: center;
   	z-index: 100;
   	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   }
   
   .balloon::after {
   	content: '';
   	position: absolute;
   	bottom: auto;
   	color: black;
   	width: 0;
   	height: 0;
   	border: 0.5em solid transparent;
   	left: 0;
   	border-left-color: white;
   	bottom: -0.5em;
   }
   
   #xTitle {
   	margin-top: 1em;
   	font-size: 1.1em;
   }
   
   #barTitle {
   	font-size: 1.2em;
   	margin-bottom: 1em;
   }
   
   #carVideo {
   	width: 90%;
   }
   
   #videoContent {
   	margin: 1em;
   	margin-bottom: 2em;
   }
   
   #downloadButton {
   	color: #ff9024;
   	font-weight: bold;
   	text-align: right;
   	cursor: pointer;
   	margin-top: 0.4em;
   }
   
   #downloadButton:hover {
   	color: orangered;
   }
   
   #map {
   	margin: auto;
   	width: 100%;
   	height: 500px;
   	margin-top: 2em;
   	margin-bottom: 5em;
   	border: 0.2em solid rgb(255, 144, 36);
   	box-sizing: border-box;
   	border-radius: 0.3em;
   }
   
   #miniMap {
   	text-align: left;
   	width: 200px;
   	height: 200px;
   	border: 0.2em solid rgb(255, 144, 36);
   	box-sizing: border-box;
   	border-radius: 0.3em;
   	box-sizing: border-box;
   	cursor: pointer;
   	margin-bottom: 1.5em;
   }
   
   h1 {
   	color: white;
   	text-align: left;
   	margin: 1em 0.2em 0.6em 0.1em;
   	font-family: 'Muli', sans-serif;
   	font-weight: 600;
   }
   
   h2 {
   	text-align: left;
   	margin: 1.6em 0.2em 0em 0.1em;
   	color: white;
   	font-family: 'Muli', sans-serif;
   }
   
   #controlsHolder {
   	color: white;
   	font-size: 1.1em;
   	user-select: none;
   }
   
   .controls {
   	cursor: pointer;
   }
   
   #periodSelection {
   	float: left;
   }
   
   #timeSelectHolder {
   	float: right;
   }
   
   .timePeriodHighlighted {
   	text-decoration: underline;
   	color: rgb(255, 144, 36)
   }
   
   .arrow {
   	color: rgb(255, 144, 36);
   }
   
   #currentTime {
   	margin: 0em 0.1em 0 0.4em;
   }
   
   #changeLocationButton {
   	color: white;
   	border: 2px solid white;
   	padding: 0.5em 0.9em 0.5em 0.9em;
   	border-radius: 0.3em;
   	box-sizing: border-box;
   	cursor: pointer;
   	display: inherit;
   	text-align: center;
   	margin-top: 0.7em;
   }
   
   #popupImage {
   	width: 200px;
   	margin-top: 0.3em;
   	border-radius: 0.3em;
   }
   
   #changeLocationButton:hover {
   	background-color: rgb(255, 144, 36);
   }