html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Roboto,Arial,sans-serif;
	overflow: hidden;
}
#app-container {
    width: 100%;
    height: 100%;
}
/*#print-header {
	display: none;
}*/
#map {
	height: 100%;
	width: 100%;
	margin: 0;
  	padding: 0;
	/*ensure that the map is also visible when printing*/
	display: block !important;
}

#menu-pane, #directions-pane, #menu-ko {
	transition-duration: 0.3s;
}

#menu-pane, #directions-pane {
	position: absolute;
    z-index: 1;
    top: 0px;
    left: -340px;
    width: 320px;
    max-width: 100%;
    /*height: 100%; */
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition-property: -webkit-transform;
    transition-property: transform;
 
}
#menu-pane, #directions-pane-content {
	background-color: white;
	overflow: auto;
	box-shadow: 0 -1px 24px rgba(0,0,0,0.4);
}
#directions-pane {
	left: -450px;
	width: 420px;
	overflow: visible;
}

#menu-ko {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition-property: opacity;
    background: black;
    width: 0;
	height: 0;
}
#menu-pane.menu-pane-open  {
    -webkit-transform: translateX(340px);
    transform: translateX(340px);
}
#directions-pane.directions-pane-open  {
    -webkit-transform: translateX(450px);
    transform: translateX(450px);
}
div#directions-pane.directions-pane-collapse {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
}
div#directions-pane.directions-pane-collapse i.fa-angle-double-left {
    transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
}

#directions-pane #turn-by-turn.less div   {
    display: none;
}
#directions-pane #turn-by-turn .toggle, button#clear-route   {
    color: #427fed;
    cursor: pointer;
    font-size: large;
}
#directions-pane #turn-by-turn .toggle {
	float: right;
}
button#clear-route {
	border: none;
    background: none;
    padding: 0;
}

#directions-menu {
	font-size: 9.5pt;
}
#directions-menu>.close-btn {
	position: relative;
    font-size: 1.5em;
    color: #666;
    cursor: pointer;
    float: right;
    width: 15px;
}
#directions-pane .collapse-btn {
	position: fixed;
    font-size: 1.5em;
    color: #666;
    cursor: pointer;
    width: 11px;
    right: -27px;
    background-color: rgba(240,240,240,0.9);
    top: 14px;
    padding: 8px;
    border: thin solid #bbb;
    border-left-style: none;
}
@media (max-width: 460px) {
	#directions-pane:not(.directions-pane-collapse) .collapse-btn {
	    right: 43px;
	    background-color: transparent;
	    border: none;
	    z-index: 1;
	}
	#directions-pane.directions-pane-collapse {
		max-width: none;
	}
}

#directions-menu input {
    width: 100%;
    margin-bottom: 10px;
    padding: 6px;
    box-sizing: border-box;
}
#directions-menu .route-via, #directions-menu .route-disttime {
    font-size: large;
}
#directions-menu .route-via {
	font-weight: bold;
	margin-top: 8px;
}
#directions-menu .route-disttime {
	margin-top: 5px;
    margin-bottom: 15px;
}
select#mode {
    font-size: 13pt;
    font-weight: bold;
}
/*#directions-menu .route-via i.fa.fa-bicycle.fa-2 {
    font-size: 20pt;
}*/


#menu-ko.menu-pane-open {
	width: 100%;
    height: 100%;
    opacity: .2;
}

#main-menu, #directions-menu {
	margin: 20px;
	position: relative;
}

#main-menu a {
    text-decoration: inherit;
    color: inherit;
}

#main-menu ul { 
	list-style: none;
	padding-left: 0;
}
#main-menu ul li { 
	padding: 8px 0;
	line-height: 30px;
}

#main-menu .menu-title img {
	width: 200px;
}
.map-sprites {
    background: no-repeat url(../images/menu-icons.png) 0px 0px;
    height: 30px;
    width: 30px;
    display: inline-block;
    background-position: -30px 0;
    margin: 0px 25px 0 15px;
    vertical-align: middle;
}

#main-menu .menu-close-btn {
	width: 30px;
	height: 30px;
	position: absolute;
	top:6px;
	right: 6px;
	margin: 0;
}

#main-menu li.selected, #main-menu li:hover, #main-menu .menu-close-btn:hover  {
	color: #39b54a;
	cursor: pointer;
}

.menu-functions {
    border-top: 1px solid #666666;
}

/*li.selected .map-sprites, li:hover .map-sprites, .menu-close-btn.map-sprites:hover {
	background-position-x: 0;
}*/

.map-sprite-terrain {
	background-position: -30px -30px;
}
li.selected .map-sprites.map-sprite-terrain, li:hover .map-sprites.map-sprite-terrain, .menu-close-btn.map-sprites.map-sprite-terrain:hover {
	background-position: 0 -30px;
}
.map-sprite-earth {
	background-position: -30px -60px;
}
li.selected .map-sprites.map-sprite-earth, li:hover .map-sprites.map-sprite-earth, .menu-close-btn.map-sprites.map-sprite-earth:hover {
	background-position: 0 -60px;
}
.map-sprite-tct {
	background-position: -30px -90px;
}
li.selected .map-sprites.map-sprite-tct, li:hover .map-sprites.map-sprite-tct, .menu-close-btn.map-sprites.map-sprite-tct:hover {
	background-position: 0 -90px;
}
.map-sprite-greenbelt {
	background-position: -30px -120px;
}
li.selected .map-sprites.map-sprite-greenbelt, li:hover .map-sprites.map-sprite-greenbelt, .menu-close-btn.map-sprites.map-sprite-greenbelt:hover {
	background-position: 0 -120px;
}
.map-sprite-bike {
	background-position: -30px -150px;
}
li.selected .map-sprites.map-sprite-bike, li:hover .map-sprites.map-sprite-bike, .menu-close-btn.map-sprites.map-sprite-bike:hover {
	background-position: 0 -150px;
}
.map-sprite-print {
	background-position: -30px -180px;
}
li.selected .map-sprites.map-sprite-print, li:hover .map-sprites.map-sprite-print, .menu-close-btn.map-sprites.map-sprite-print:hover {
	background-position: 0 -180px;
}
.map-sprite-help {
	background-position: -30px -210px;
}
li.selected .map-sprites.map-sprite-help, li:hover .map-sprites.map-sprite-help, .menu-close-btn.map-sprites.map-sprite-help:hover {
	background-position: 0 -210px;
}
.map-sprite-itinerary {
	background-position: -30px -240px;
}
li.selected .map-sprites.map-sprite-itinerary, li:hover .map-sprites.map-sprite-itinerary, .menu-close-btn.map-sprites.map-sprite-itinerary:hover {
	background-position: 0 -240px;
}
.map-sprite-mobile {
	background-position: -30px -270px;
}
li.selected .map-sprites.map-sprite-mobile, li:hover .map-sprites.map-sprite-mobile, .menu-close-btn.map-sprites.map-sprite-mobile:hover {
	background-position: 0 -270px;
}


textarea:focus, input:focus{
    outline: none;
}

label {
	color: #666;
}



.search-control, .results-control {
    width: 400px;
}

.results-control>div {
	max-height: 330px;
    overflow-y: auto;
    overflow-x: hidden;
}

.results-control .close-btn {
	/*position: absolute;
    right: 12px;
    top: 10px;
    padding: 16px;
    cursor: pointer;
    color: #666;*/
        
    position: relative;
    cursor: pointer;
    color: #666;
    float: right;
    font-size: 15pt;
    padding-right: 20px;
    padding-top: 16px;
    z-index: 1;
}

/*.results-control:hover .close-btn {opacity: 1;}*/


#module-templates {
	width:400px;
	/*font-family: Roboto,Arial,sans-serif;*/
    font-size: 11px;
    font-weight: 400;
}

/*.search-control * {
	border:thin pink solid;
}*/
.search-control {
	transition-duration: 0.3s;
}
.menu-button, .direction-button-holder {
    cursor: pointer;
}
.menu-button {
	font-size: 2.5em;
    color: #666;
    margin-top: -2px;
    margin-left: 10px;
    display: inline-block;
}
.search-control>div, .route-info, .poi-info, .page-info>div {
    margin: 15px;
}
.page-info>div {
    margin-top: 0;
}
.route-info .tct {
	min-height: 95px;
}
.poi-info, .route-info {
	margin-bottom: 0;
}
.search-control .search-holder {
	padding: 0 40px 0 50px;
}
.search-control input[type="search"] {
    width: 100%;
    font-size: 16pt;
    border: none;
    /*padding-left: 60px;*/
}
.search-control.directions-pane-open {
    transform: translateX(-440px);
}
.results-control.directions-pane-open {
	transform: translateX(-440px);
}
.results-control  {
    font-size: 12pt;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s ease-in-out;
    max-height: none;
}


.control-fullscreen {
	background-image: url('../images/control-fullscreenon.png');
	background-repeat: no-repeat;
}
.control-fullscreen.fullscreen-active {
	background-image: url('../images/control-fullscreenoff.png');
}
.control-help {
	background-image: url('../images/control-help.png');
	background-repeat: no-repeat;
	
}
.control-location {
	background-image: url('../images/control-location.png');
	background-repeat: no-repeat;
	
}
.control-zoomextents {
	background-image: url('../images/control-zoomextents.png');
	background-repeat: no-repeat;
}

.control-domic {
	background-image: url('../images/domic-logo.png');
	background-repeat: no-repeat;
	
}
.control-fullscreen div, .control-help div, .control-location div, .control-domic div, .control-zoomextents div {
	visibility: hidden;
}

/*#legend {
    background: white;
    padding: 10px;
    margin-left: 5px;
 }
 
 #legend h2 {
 	margin-top: 0px;
 }*/
 
.pane-type {
    padding-bottom: 14px;
    padding-top: 4px;
    font-weight: bold;
}
.attributes {
	/*float: left;*/
	padding-bottom: 14px;
	padding-left: 60px;
}
.attributes label {
	padding-right: 5px;
}
.attributes span {
	display: inline-block;
}
.attributes .streetname, .attributes .location, .attributes .name {
	font-size: 14pt;
	font-weight: bold;
	max-width: 310px;
}
.attributes .streetname span.proposed {
    font-weight: normal;
    font-style: italic;
    font-size: 12pt;
}
.attributes .description {
	padding: 6px;
    margin-left: -6px;
}
.attributes .caution {
    background-color: #FFFF66;

}
.attributes .class {
	width: 100px;
}

.attributes .zoom-to {
	color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
  float: left;
  padding-right: 10px;
  padding-bottom: 20px;
}

.logo-holder,.poi-type-holder, .button-holder {
    width: 60px;
    padding-bottom: 10px;
    position: absolute;
}
.direction-button-holder {
	right: 5px;
    width: 40px;
    top: 22px;
    color: white;
    font-size: 1.6em;
    margin-top: 6px;
}
.direction-button-holder i {
	-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.direction-button-holder i:after {
    content: "";
    background: #666;
    width: 24px;
    height: 24px;
    position: absolute;
    left: -6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: -1;
    top: -5px;
}
.poi-type-holder img {
    width: 30px;
    margin-left: 8px;
}

.poi-item {
    /*clear: both;*/
    position: relative;
} 

.page-info>div {
    border-top: solid #999 1px;
    padding: 0px 10px 0px 60px;
    clear: both;
}



.page-info label {
    display: block;
    width: 314px;
    margin-top: 8px;
}
.page-info span {
	display: block;
    max-width: 314px;
    vertical-align: top;
    overflow: hidden;
    
}
.page-info span a {
	white-space: nowrap;
}
.profile-short {
	display: none;
}

.hidden {
	/*visibility: hidden;*/
	opacity: 0;
  	max-height: 0px;
  	overflow: hidden;
  	padding: 0;
  	margin-top: 0;
    margin-bottom: 0;
}

.hidden img { visibility: hidden; }

.hidden .close-btn { visibility: hidden; }

@media (max-width: 1200px) {
	#directions-pane {
		height: initial;
		max-height: 100%;
	}
	
}

@media (max-width: 620px) {
	.search-control, .results-control {
		width: 300px;
	}
	.search-control>div, .route-info, .poi-info, .page-info {
    	margin: 8px;
    }
    .results-control {
		font-size: 10pt;
	}
	.logo-holder {
		visibility: hidden;
	}
	.route-info .attributes, .page-info {
		padding-left: 0px;
	}
	.attributes {
		padding-bottom: 0px;
	}
	.attributes > .name, .attributes > .description {
		padding-left: 6px;
	}
	.menu-button {
		margin-left: 4px;
	}
	.search-control .search-holder {
		padding-left: 40px;
	}
	.results-control .close-btn {
		right: 10px;
		border-radius: 0px 0px 0px 10px;
	}
	.attributes .streetname {
	    padding-right: 22px;
	}
	.route-info label {
		display:none;
	}
	.page-info {
		margin-top: 0;
	}
	.page-info div {
		display: none;
	}
	.page-info div.profile-short {
		display: block;
	}
	.profile-short .profile-page {
		display: inline;
	}
	.search-control>div, .route-info, .poi-info, .page-info {
    	margin: 8px;
    }
    .direction-button-holder {
    	margin-top:0px;	
    }
    #main-menu {
	    margin: 10px;
	}	
	#main-menu ul li {
    	padding: 2px 0;
	}
	
	
}

@media (max-width: 450px) {
	.search-control, .results-control {
		width: 230px;
	}
}

@media (max-height: 420px) {
	.results-control>div {
		max-height: 310px;
	}	
	
	.page-info {
		margin-top: 0;
	}
	.page-info div {
		display: none;
	}
	.page-info div.profile-short {
		display: block;
	}
	.profile-short .profile-page {
		display: inline;
	}
} 
@media (max-height: 400px) {
	.results-control>div {
		max-height: 290px;
	}	
} 
@media (max-height: 380px) {
	.results-control>div {
		max-height: 270px;
	}	
} 
@media (max-height: 360px) {
	.results-control>div {
		max-height: 250px;
	}	
} 
@media (max-height: 340px) {
	.results-control>div {
		max-height: 230px;
	}	
	
} 
@media (max-height: 320px) {
	.results-control>div {
		max-height: 210px;
	}	
} 
@media (max-height: 300px) {
	.results-control>div {
		max-height: 190px;
	}	
} 


/*Printing*/

#print-container {
	width: 100%;
	height: 100%;
}

#print-container #print-title, #print-container #print-timestamp {
	display: none;
	margin: 5px 0px;
	font-size: 8pt;
	color: grey;
}

#print-container.print-mode #print-title, #print-container.print-mode #print-timestamp {
	display: block;
}

#print-container.print-mode .search-control, #print-container.print-mode .control-location, #print-container.print-mode .control-help, #print-container.print-mode .control-fullscreen{
	display:none;
}

#print-container.print-mode #map {
	background-color: white !important;
    zoom: 60%;
    width: 1311px;
    height: 800px;
}

 @-moz-document url-prefix() {
	 #print-container.print-mode #map {
	  	width: 2000px;
  		height: 1400px;
	 }
  }

#print-container.print-mode * {-webkit-print-color-adjust:exact;} /*print div background colors and images*/

/* Edge fixes */
@supports (-ms-accelerator:true) {
    #print-container.print-mode #map {
		zoom: 100%;
	}
}

/*IE Fixes*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	#print-container.print-mode #map  {
	  	width: 2000px;
  		height: 1400px;
  		/*transform: scale(.4);
  		background-color: red;*/
	  }
	 
}