html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'PT Sans',Arial,sans-serif;
	overflow: hidden;
}
.gm-style {
	font-family: 'PT Sans',Arial,sans-serif;
}

#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, #layer-pane, #help-pane, .search-control {
	transition-duration: 0.3s;
}

#help-pane {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    background: rgba(0,0,0,0.2);
}
#help-pane.active {
	display: block;
}
#help {
	background: white;
	padding: 20px;
	text-align: left;
	width: 70%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.button-container {
	text-align: center;
}
.button-container button {
	background: #1B88B5;
    color: white;
    padding: 10px;
    border-radius: 6px;
    border: thin;	
}

#menu-pane, #layer-pane, #directions-pane {
	position: absolute;
    z-index: 1;
    max-width: 100%;
    /*height: 100%; */
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition-property: -webkit-transform;
    transition-property: transform;
}

#menu-pane {
	top: 0px;
    left: -340px;
    width: 320px;
}

#directions-pane {
	top: 0px;
	left: -450px;
	width: 420px;
	overflow: visible;
}

#layer-pane {
	visibility: hidden ;
	bottom: 20px;
    right: -600px;
    width: 450px;
    margin-right: 110px;
    max-height: 85%;
}

#menu-pane, #directions-pane-content, #layer-pane {
	background-color: white;
	overflow: auto;
	box-shadow: 0 -1px 24px rgba(0,0,0,0.4);
	
}

#layer-pane.transition {
	visibility: 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);
}
#layer-pane.layer-pane-open  {
    -webkit-transform: translateX(-550px);
    transform: translateX(-550px);
	visibility: visible ;
}


#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, #menu-ko.layer-pane-open {
	width: 100%;
    height: 100%;
    opacity: .1;
}

#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;
}

#layers .menu-close-btn {
    float: right;
    transform: rotate(180deg);
    margin-right: 0px;
}

#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-map {display:none;}
.menu-functions {
     border-top: 1px solid #666666; 
     margin-top:20px
}

/*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;}*/

.results-control .pane-type {
    padding-bottom: 10px;
}


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

/*.search-control * {
	border:thin pink solid;
}*/

.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: 10px;
}
.page-info>div {
    margin-top: 0;
}
.route-info .tct {
	min-height: 95px;
}
.poi-info, .route-info {
	margin-bottom: 0;
	position: relative;
}
.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-fullscreenon43.png');
	background-repeat: no-repeat;
}
.control-fullscreen.fullscreen-active {
	background-image: url('../images/control-fullscreenoff43.png');
}
/*
.control-help {
	background-image: url('../images/control-help.png');
	background-repeat: no-repeat;
	
}
*/
.control-layers {
	background-image: url('../images/control-layers.png');
	background-repeat: no-repeat;
	
}
.control-location {
	background-image: url('../images/control-location43.png');
	background-repeat: no-repeat;
	
}
.control-zoomextents {
	background-image: url('../images/control-zoomextents43.png');
	background-repeat: no-repeat;
}
.control-homepage {
	background-image: url('../images/control-home.png');
	background-repeat: no-repeat;
	margin-bottom: -5px !important;
}


.control-branding {
	background-image: url('../images/glwaterfront-trail-horizontal-logo-250-w-outline.png');
	background-repeat: no-repeat;
	width: 250px;
	height:80px;
	margin-top:10px;
}
/*TODO move media queries together*/
@media only screen and (max-width: 670px) {
  .control-homepage {
	display: none;
  }
  .control-branding {
	background-image: url('../images/control-branding-small.png');
	background-repeat: no-repeat;
	width: 45px;
	height:45px;
  }
}
@media only screen and (max-height: 450px) {
  .control-homepage {
	display: none;
  }
}
@media only screen and (max-height: 360px) {
  .control-zoomextents, .control-location {
	display: none;
  }
}

.control-domic {
	background-image: url('../images/domic-logo.png');
	background-repeat: no-repeat;
	
}
.control-fullscreen div, .control-branding div, .control-homepage div, .control-layers 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;
}*/
#layer-pane #layers {
	padding: 10px;
}

#layer-pane #layers .legend-group>.name {
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
}

.legend-group .toggle {
	float: right;
}
.legend-group>.toggle {
	margin-top: 8px;
}

.attributes {
	/*float: left;*/
	padding-bottom: 8px;
	padding-left: 60px;
}
#layer-pane #layers .attributes>div {
	display: inline;
}
#layers .map-sprites {
    margin-left: 8px;
}
.show_conditionally {
	display: none;
}
.show_conditionally.active {
	display: block;
}
.attributes label {
	padding-right: 5px;
}
.attributes span {
	display: inline-block;
}
.attributes .streetname, .attributes .location, .attributes .name {
	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,.legend-item>.image-holder, .poi-item>.image-holder, .button-holder {
    width: 60px;
    padding-bottom: 10px;
    position: absolute;
}
.direction-button-holder {
	right: 0px;
    width: 40px;
    top: 14px;
    color: white;
    font-size: 1.6em;
    padding-top: 12px;
    padding-left: 19px;
}
.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;
}
.legend-item>.image-holder img, .poi-item>.image-holder img {
    width: 30px;
    margin-left: 8px;
}

.legend-item.large-item .attributes {
    min-height: 35px;
    backgrond: green;
}

.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; }

.introjs-donebutton {
    color: #333;
}

input#reloadValue {
    display: none;
}

@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;
	}
	.results-control .attributes {
		padding-bottom: 0px;
	}
	/*.results-control .attributes > .name, .attributes > .description {
		padding-left: 6px;
	}*/
	#layer-pane #layers .attributes > .description {
		display: none;
	}
	#layer-pane {
		max-width: 80%;
	}
	.menu-button {
		margin-left: 4px;
	}
	.search-control .search-holder {
		padding-left: 40px;
	}
	.results-control .close-btn {
		right: 10px;
		border-radius: 0px 0px 0px 10px;
	}
	.results-control .pane-type {
	    margin-bottom: 6px;
	}
	.attributes .streetname {
	    padding-right: 22px;
	}
	.attributes {
		padding-left: 35px;
	}
	/*#layer-pane .attributes {
		padding-left: 50px;
	}*/
	.legend-item>.image-holder img, .poi-item>.image-holder img {
	    width: 25px;
	    margin-left: 0px;
	}
	.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;*/
	  }
	 
}



/* CodeIgniter styles - these can be removed once CI default contnent has been deleted */

	.ci ::selection { background-color: #E13300; color: white; }
	.ci ::-moz-selection { background-color: #E13300; color: white; }

	body.ci  {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	.ci a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	.ci h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	.ci code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	.ci #body {
		margin: 0 15px 0 15px;
	}

	.ci p.footer {
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	.ci #container {
		margin: 10px;
		border: 1px solid #D0D0D0;
		box-shadow: 0 0 8px #D0D0D0;
	}
	
	noscript {
	    position: absolute;
	    top: 0px;
	}