#map {
	width: 100%;
	height: 90vh;
}

.prpl-content-column.map-wrapper {
	float: none;
	box-sizing: border-box;
	width: 100%;
	padding-left: 2em;
	padding-right: 2em;
	position: relative;
}

.page-middle .prpl-content-column.map-wrapper .desc img {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}

.campus-locations {
	position: absolute;
	top: 2em;
	left: 3em;
	z-index: 51;
}

.campus-locations h2 {
	margin: 0;
	font-size: 1.5em;
	padding: 0;
}

.campus-locations h2 .pre-heading {
	border: none;
	margin: 0;
	padding: 0;
	color: #333;
}

.campus-locations .location-picker .label {
	box-sizing: border-box;
	width: 20em;
	height: 2em;
	padding: 0.25em;
	background-color: #FFF;
	border: 1px solid #DDD;
	margin-top: 0.5em;
	border-radius: 0.25em;
	cursor: pointer;
	box-shadow: 0em 0.1em 0.2em rgba(0,0,0,0.25);
	color: #333;
	white-space: nowrap;
	overflow: hidden;
}

.campus-locations .location-picker .unset {
	color: #BBB;
}

.campus-locations.active .location-picker .label {
	border-radius: 0.25em 0.25em 0em 0em;
}

.campus-locations .location-picker .label:before {
	display: block;
	float: right;
	content: "▼";
	color: #333;
}

.page-middle .prpl-content-column .location-picker ul {
	margin: 0;
	padding: 0;
	max-width: 20em;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 300px;
	background-color: #FFF;
	box-shadow: 0em 0.1em 0.2em rgba(0,0,0,0.25);
	border: 1px solid #DDD;
	border-top: 0px;

}

.page-middle .prpl-content-column .location-picker ul > li {
	margin: 0;
	font-size: 0.8em;
}

.page-middle .prpl-content-column .location-picker ul > li:before {
	display: none;
}

.page-middle .prpl-content-column .location-picker a {
	display: block;
	font-weight: normal;
	color: #333;
	padding: 0.1em 0.4em;
}

.page-middle .prpl-content-column .location-picker a:hover,
.page-middle .prpl-content-column .location-picker a:focus {
	text-decoration: none;
	background-color: #EEE;
	color: #000;
}

.map-bottom-nav {
	position: absolute;
	margin-top: 85vh;
	margin-left: 1em;
	z-index: 60;
}

.toggle-button {
	position: relative;
}

.toggle-button:after {
	overflow: hidden;
	position: relative;
	display: inline-block;
	content: " ";
	border: 2px solid #FFF;
	width: 2em;
	height: 1em;
	margin-left: 1em;
	border-radius: 1em;
	background-color: rgba(0,0,0,0.5);
	transition: background-color 0.25s ease-in-out 0s;
	vertical-align: middle;
}

.toggle-button:before {
	display: block;
	position: absolute;
	content: " ";
	background-color: rgba(255, 255, 255, 1.0);
	width: 1em;
	height: 1em;
	border-radius: 1em;
	right: 2.66em;
	top: 1.1em;
	z-index: 2;
	transition: right 0.25s ease-in-out 0s;
}

.toggle-button.active:before {
	right: 1.66em;
}

.toggle-button.active:after {
	background-color: rgba(255, 255, 255, 0.5);
}

.parking-legend {
	display: none;
	position: absolute;
	bottom: 100%;
	background-color: #333;
	color: #FFF;
	font-size: 11px;
	padding: 1em 1.5em;
	border-radius: 5px;
	border: 2px solid #FFF;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.75);
}

.parking-legend .item {
	display: block;
	padding-left: 2em;
}

.parking-legend .item:before {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border: 1px solid #FFF;
	margin-left: -2em;
	margin-top: 0.1em;
	content: " ";
}

.parking-legend .heading {
	font-weight: 700;
	border-bottom: 1px solid #FFF;
	display: block;
	margin-bottom: 0.25em;
}

.parking-legend .item.commuter:before		{ background-color: #f9fd70; }
.parking-legend .item.resident:before		{ background-color: #31da50; }
.parking-legend .item.reserved:before		{ background-color: #aa00e1; }
.parking-legend .item.visitor:before		{ background-color: #0880e5; }
.parking-legend .item.metered:before		{ background-color: #ff0d00; }
.parking-legend .item.staff:before			{ background-color: #fdc44d; }
.parking-legend .item.mixed:before			{ background-color: #ff8f00; }
.parking-legend .item.handicapped:before	{ background-color: #6fdafe; }
.parking-legend .item.service:before		{ background-color: #a26d01; }
.parking-legend .item.contractors:before	{ background-color: #64a704; }

#LinksArea {
	columns: 3;
}

#LinksArea .link-group {
	display: inline-block;
	width: 100%;
}

.page-middle .prpl-content-column #LinksArea ul > li {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 1023px) {

	#map {
		width: 100%;
		height: 90vh;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index:50;
	}

	.prpl-content-column.map-wrapper {
		overflow-x: hidden;
		margin: 0;
		padding: 0;
		margin-top: -1.4em;
	}

	footer.page-footer {
		margin-top: 100vh;
	}

	.campus-locations {
		background-color: rgba(255, 255, 255, 0.75);
		left: 0em;
		width: 100%;
		padding: 1em;
		top: 0em;
	}

	.campus-locations .location-picker .label {
		font-size: 0.75em;
		width: 26.667em;
	}

	.page-middle .prpl-content-column.map-wrapper .desc {
		padding-right: 1em;
	}

	#LinksArea {
		columns: 1;
		margin-top: 95vh;
		margin-left: 1em;
		margin-right: 1em;
	}
	
	.map-bottom-nav .prpl-button {
		font-size: 0.6em;
	}

	.map-bottom-nav .prpl-button a {
		padding: 0.7em !important;
	}

	.toggle-button:before {
		right: 2em;
	}
	
	.toggle-button.active:before {
		right: 0.7em;
	}
}