h1, h2, h3, h4, h5, h6, form, body, html, p, input {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	width:100%;
}
body {
	margin:0;
	font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
	color:#212529;
	text-align:left;
	background-color:#fff;
}

/* wrapper for the whole content displayed as flex boxes */
#route-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* make two equal columns but have the route description grow to fill empty space */
	.route {
		width: 50%;
	}

	.route-description {
		flex-grow: 1;
		padding-right: 10px;

	}
	.block{
		padding-top: 10px;
	  max-height: 50px;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
		background-color:#f4f9e9;
		border-bottom: solid;
		border-width: 5px;
		border-color: white;
	}

	.block:before {
	  content: '\002B';
	  color: black;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
		padding-right: 15px;

	}

	dt {
		font-weight: bold;
	}

/* make single coloumn when display is too small */
	@media only screen and (max-width: 820px) {
		.route-description {
			width: 100%;
			}
			#mapid {
				width: 100%;
				flex-grow: 1;
				}
			}

/* Adjust backrgound color of text depending on hover or click */
	.hoverDirections{
		background-color: #eee;
		cursor: default;
	}
	.clickClass{
		background-color: #ffe3b3;
		cursor: default;
	}
	.clickClass.after{
		content: "\2212";
	}

	.description{

	}

/* map layout and ui */
	#mapid { height: 400px; width: 370px;}
	.ui-button {
		background:#3887BE;
		display:block;
		position:absolute;
		top:5%;left:50%;
		width:90px;
		margin:-20px 0 0 -50px;
		z-index:500;
		text-align:center;
		padding:2px;
		border:1px solid rgba(0,0,0,0.4);
		border-radius:3px;
	}
	.ui-button:hover {
		color:#00BFFF;
	}