html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.header {
	margin: auto;
	width: 100%;
}

.title {
	float: left;
	width: 33%;

}

.roster {
	height: 7em;
	float: left;
	width: 33%;
	margin: auto;
	display: flex;
}

.participants {
	float: left;
}

.participant {
	float: left;
}

.map-container {
	height: 100%;
	width: 100%;
	float: left;
}
.map {
	height: 100%;
	width: 100%;
}

.bannerImage {
				height: 7em;
				display: block;
				margin-left: auto;
				margin-right: auto;
}

.switch {
				float: right;
				width: 33%
}

.ol-popup {
				position: absolute;
				background-color: white;
				box-shadow: 0 1px 4px rgba(0,0,0,0.2);
				padding: 15px;
				border-radius: 10px;
				border: 1px solid #cccccc;
				bottom: 12px;
				left: -50px;
				min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
}
.ol-popup:after {
				border-top-color: white;
				border-width: 10px;
				left: 48px;
				margin-left: -10px;
}
.ol-popup:before {
				border-top-color: #cccccc;
				border-width: 11px;
				left: 48px;
				margin-left: -11px;
}
.ol-popup-closer {
				text-decoration: none;
				position: absolute;
				top: 2px;
				right: 8px;
}
.ol-popup-closer:after {
				content: "✖";
}

.participantBox {
  text-decoration: none;
  color: white;
  font-size: 11pt;
  font-weight: bold;
  text-shadow: black 0.1em 0.1em 0.2em;
  padding: 0.2em;
  background-color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.8);
}

.showhide {
	display: block;
	text-align: center;
	margin: 0 auto;
}