/*======================================================================================
   Mobile Map Styles
  ====================================================================================*/
@media only screen and (max-width: 999px), (max-height: 549px) {

	.modal {
		top: 3%; 
		left: 3%; 
		width: 94%; 
		height: 94%; 
	}

	.modal .inner {height: 83%; margin: 5%; font-size: .9em; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

	.modal h1 {
		font-size: 18px;
	}

	.modal h2 {font-size: 14px;}

	#map-header {
		height: 45px;
		background-color: rgb(30,83,158);
		position: relative;
	}

	#map-header .hamburger {
		position: absolute;
		top: 0;
		left: 0;
		width: 45px;
		cursor: pointer;
		height: 45px;
		padding: 0px;
		z-index: 105;
		font-size: 1.4rem;
		color: #fff;
		padding: 6px 0 0 13px;
	}

	#map-header .hamburger.active {background-color: #DD6600;}

	#map-header h1 {
		font-family: "Bergen Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-size: 22px;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		margin: 0;
		z-index: 100;
	}

	.app-container #map-header img.utalogo {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
		margin: 10px;
		z-index: 104;
		width: 60px !important;
		height: 23px !important;
		max-width: 100%;
		max-height: 23px;
	}

	/* add shadow above map */
	#map:before {
		position: absolute;
		z-index: 100;
		display: block;
		content: " ";
		width: 100%;
		height: 5px;
		top: 0;
		left: 0;
		background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
	}

	#map-mobile-menu-screen {
		display: none;
		position: absolute;
		top: 45px; /* = the header height */
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1200;
		background: #555;
		background: rgba(1, 31, 58, 0.6);
	}

	#map-mobile-menu {
		position: absolute;
		top: 45px; /* = the header height */
		left: -310px;
		width: 300px;
		height: 90%;	/* safe default */
		height: calc(100% - 45px);
		z-index: 1300;
		background-color: #eee; /* #013668;*/
		transition: left .2s;
	}
	
	#map-mobile-menu.open {
		left: 0;
	}

	#buttons {
		height: 40px;
		overflow: hidden;
	}

	#buttons span {
		box-sizing: border-box;
		float: left;
		cursor: pointer;
		height: 42px;
		line-height: 42px;
		width: 33%; 
		border-right: 1px solid #345C85;
		text-align: center;  
		font-size: 12px;
		color: #fff;
		background-color: #152942;
		text-transform: uppercase;
		font-weight: bold;
	}

	#buttons span:first-child {width: 34%;}
	#buttons span:last-child {border: none;}

	#buttons span.selected {
		background: #c8d8f0;
		color: #111;
	}

	#map-panels {
		/* this causses problems..?
		overflow-y: scroll;
		*/
		position: relative;
		-webkit-overflow-scrolling: touch;
	}

	#map-panels .search fieldset {border: none; margin: 0; padding-top: .75em;}

	span.twitter-typeahead {
		width: 100%;
	}

	.tt-dropdown-menu {
	  width: 100%;
	  padding: 0;
	  -webkit-background-clip: padding-box;
		 -moz-background-clip: padding;
			  background-clip: padding-box;
	}

	.tt-suggestion {
	  display: block;
	  padding: 10px;
	  border-bottom: 1px solid #ccc;
	}

	/*
	.tt-suggestion.tt-is-under-cursor {
	  color: #fff;
	  background-color: #0081c2;
	  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
	  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
	  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
	  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
	  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
	  background-repeat: repeat-x;
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
	}

	.tt-suggestion.tt-is-under-cursor a {
	  color: #fff;
	}
	*/

	.tt-suggestion p {
	  margin: 0;
	  font-size: 14px;
	}

	.tt-suggestion span.type {
		color: #888;
		font-size: 10px;
		margin-left: 5px;
		text-transform:uppercase;
	}

	/* tt-hint is the "hint" text underlaying tt-query, which is the actual search box. */
	input.tt-hint,
	input.tt-query {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		padding: 5px 20px 5px 5px;
		font-size: 14px !important;
		border: 1px solid transparent;
	}

	input.tt-hint {color: #aaa;}
	input.tt-query {border-color: #aaa; box-shadow: 1px 2px 3px #ddd inset;}

	.tt-clear {
		color: #777;
		font-size: 20px;
		cursor: pointer;
		display: block;
		height: 20px;
		line-height: 20px;
		padding: 5px;
		position: absolute;
		right: 6px;
		text-align: center;
		top: 1px;
		width: 16px;
	}

	#map-panels .listwrap {position: relative; width: 100%;}
	#map-panels .listview ul {
		position: absolute; 
		top: 0;
		left: 0;
		margin:0;
		padding:0;
		list-style:none;
		width: 100%;
		-webkit-transition: left 0.25s;
		-moz-transition:    left 0.25s;
		-o-transition:      left 0.25s;
		transition:         left 0.25s;
	}

	#map-panels .listview ul ul {display: none;}

	#map-panels .listview select {
		display: block;
		visibility: visible;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		z-index: 999999;
		margin: 0;
		padding: 0;
		-webkit-appearance: menulist-button;
	}

	#map-panels .listview li {
		padding: 8px 10px; 
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-bottom: 1px solid #ccc;
		background: #fff;
	}

	#map-panels .listview li.active {
	  color: #fff;
	  background-color: #0085c8;
	}

	#map-panels .listview li.text {
		background-color: transparent;
		overflow: visible;
		white-space: normal;
		color: #777;
		text-align: center;
		cursor: inherit;
		font-size: 13px;
		padding: 8px 15px 8px 10px;
		border: none;
	}

	#map-panels .listview li.text a {
		text-decoration: underline;
		color: #03c;
	}

	#map-panels .listview li:before {
		content: " ";
		display: block;
		float: right;
		width: 18px;
		height: 18px;
		background: #949494 url('../_images/list-arrow.png') no-repeat 4px 2px;
		-moz-border-radius: 9px;
		-webkit-border-radius: 9px;
		border-radius: 9px;
		margin-top: 3px;
	}

	#map-panels .listview li.active:before {
		background-color: #444;
	}

	#map-panels .listview li.active.selectbox:before {
		-webkit-transform: rotate(90deg);
		-moz-transform:    rotate(90deg);
		-ms-transform:     rotate(90deg);
		-o-transform:      rotate(90deg);
		transform:         rotate(90deg);
	}

	/* #map-panels .listview li[data-value]:before, */
	#map-panels .listview li.text:before {
		/* hide arrow for items that have data-value set, or for link items */
		display: none !important;
	}

	#map-panels .listview div.breadcrumb {font-size: 12px; padding: 10px; cursor: pointer; background-color: #bbb;}

	#map-panels .breadcrumb:before {
		display: block;
		content: " ";
		width: 0px;
		height:0px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-right: 8px solid #666;
		float: left;
		margin-right: 5px;
		margin-top: 3px;
	}
}

/* For larger screens, increase header and navbar sizes */
@media (min-height: 500px) {
	#map-panels .listview li {padding: 10px;}
	#overlays h1 {font-size: 24px;}
	#overlays h2 {font-size: 16px;}
}