/**** Foundation overrides ****/

.button{
	margin-bottom:0;
}

ul{
	margin-bottom:0;
}


/**** General ****/

html, 
* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* this won't work on elements that have a defined width (% or px), including small-12 class */
.grid-padding-xx{
  width:calc(100% + 2.5rem);
  margin-left: -1.25rem;
}

.grid-padding-xx > .cell,
.grid-padding-xxx > .cell{
  padding-left:1.25rem;
  padding-right:1.25rem;
}

.grid-mini-padding-xx{
  width:calc(100% + 1.5rem);
  margin-left: -0.75rem;
}

.grid-mini-padding-xx > .cell,
.grid-mini-padding-xxx > .cell{
  padding-left:0.75rem;
  padding-right:0.75rem;
}

.mini-padding{
	padding:0.75rem;
}

.mini-padding-top,
.mini-padding-top-bottom{
	padding-top:0.75rem;
}

.mini-padding-bottom,
.mini-padding-top-bottom{
	padding-bottom:0.75rem;
}

.padding{
	padding:1.25rem;
}

.padding-top,
.padding-top-bottom{
	padding-top:1.25rem;
}

.padding-bottom,
.padding-top-bottom{
	padding-bottom:1.25rem;
}

.mini-margin{
	margin:0.75rem;
}

.mini-margin-top,
.mini-margin-top-bottom{
	margin-top:0.75rem;
}

.mini-margin-bottom,
.mini-margin-top-bottom{
	margin-bottom:0.75rem;
}

.margin{
	margin:1.25rem;
}

.margin-top,
.margin-top-bottom{
	margin-top:1.25rem;
}

.margin-bottom,
.margin-top-bottom{
	margin-bottom:1.25rem;
}

@media print, screen and (max-width: 40em){
	
	.small-offset-half{
		margin-left: calc( 8.33333% / 2 );
	}
}

.icon-button{
	background-color: #fff;
	color: #000;
	font-size:1.5rem;
}

button{
	cursor:pointer;
}

/**** Styles ****/

body{
	/*height:110%;*/
}

#wrapper{
	position: fixed;
	height: 100%;
    width: 100%;
    top:0;
}

#map{
	position: absolute;
	height:100%;
	width:100%;
	z-index:2;
}

.activeArea { 
	position: absolute; 
	top:0;
	bottom:0;
	left:0;
	right:0;
}

@media print, screen and (min-width:64em){

	.activeArea { 
		position: absolute; 
		top:0;
		bottom:0;
		left:0;
		right:50%;
	}
}

#menu-container{
	position: fixed;
	top:5%;
	left:0;
	z-index:15;
	background-color:#fff;
}

#menu-open{
	background-color:#fff;
	width:5rem;
}

#menu-container{
	max-width: 20rem;
	transition: transform 1s ease;
	transform:translateX(-100%);
}

.menu-open{
	transform:none !important;
	-webkit-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
}

#menu{
	list-style-type: none;
    padding-inline-start: 0;
    margin-left:0;
}

#menu li{
	margin-bottom:0.5rem;
	cursor: pointer;
	color: #000;
	padding-bottom: 5px;
}

#menu li:not(.trail-option){
	font-weight:bold;
}

#menu li:last-child{
    border-bottom: none;
}

#menu li:hover{
	color: rgba(0,0,0,0.7);
}

.trail-option {
    margin-left: 1.5rem;
    border-bottom: rgba(0,0,0,0.2) solid 1px;
}

#loading{
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-color: #fff;
	z-index: 99;
}

#loadingImg{
	width:50px; 
	height:50px; 
	position: absolute; 
	left:50%; 
	top:50%; 
	transform:translate(-50%, -50%);
	z-index:999;
}

#menu-close{
	position:absolute;
	top:0;
	right:0;
}

#infoBox{
	position: absolute;
    background-color: #fff;
    bottom: 0;
    z-index: 11;
    -webkit-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
}

#tab{
	cursor: pointer;
	position: relative;
	-webkit-box-shadow: 0px 10px 12px -6px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 10px 12px -6px rgba(0,0,0,0.5);
	box-shadow: 0px 10px 12px -6px rgba(0,0,0,0.5);
	z-index:2;
}

#tabArrow{
	text-align:right;
	font-size: 1.5rem;
    line-height: 1.1875rem;
}

#upTab,
#downTab{
	height:2.75rem;
}

#tabArrow.tabArrow-open #upTab{
	display:none;
}

#tabArrow:not(.tabArrow-open) #downTab{
	display:none;
}

#infoTitle{
	margin-bottom:0;
}

#infoContentContainer{
	padding-top:0;
	position: relative;
}

#infoContent{
	position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    transition: height 1s ease;
    overflow-x: hidden;
}

#infoContent:not(.infoContent-open){
	height:0 !important;
}

.infoContent-open{
	height: 65vh;
}

#continue{
	float: right;
}

.ol-overlaycontainer-stopevent{
	position: absolute;
	bottom:0;
}

#controls{
	position: relative;
	z-index:2;
}


/*** Chertsey **/

.image-container{
	text-align:center;
}

h2{
	font-size:2rem;
}

.menu-label{
	font-weight: bold;
    display: block;
}

.button{
	background-color: rgba(0,0,0,0.8);
	color:#fff;
}

.button:hover, .button:focus{
	background-color:#000;
}

#nav-container{
	position: fixed;
	top:0;
	left:0;
	z-index:9;
	-webkit-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.75);
}

#scroller{
	width: 100%;
    height: calc(100% + 300px);
    background-color: rgba(255,255,255,0.5);
    position: relative;
}

#logo{
	background-image: url('../images/logo.png');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	width:5rem;
	height:5rem;
	cursor:pointer;
	pointer-events:none;
}

.type-label{
	font-size: 0.8rem;
    opacity: 0.65;
}

.trail-stop-icon{
	background-size:cover;
	background-position: center;
	width:100%;
	height:0;
	padding-bottom:100%;
}

.trail-stop:hover{
	background-color: rgba(0,0,0,1);
	cursor:pointer;
}

#infoContentBackground{
	width:100%;
	left:0;
	top:0;
	bottom:0;
	background-image: url('../images/banner.png');
	position: absolute;
}

#controls{
	background-color: #fff;
}

.trail-stop{
	background-color: rgba(0,0,0,0.8);
    color: #fff;
}

.trail-title-full{
	color:#fff;
	font-weight:bold;
	font-size: 1.25rem;
    line-height: 1.3em;
}

.text-background{
	background-color: rgba(0,0,0,0.8);
    color: #fff;
}

#infoTitle h3{
	font-size:1.75rem;
	width: 100%;
	transition: transform 1s ease, width 1s ease, margin-top 1s ease, margin-bottom 1s ease;
	transform-origin: center left;
}

#infoTitle.infoTitle-open h3{
	/*font-size:1.35rem;*/
	transform:scale(0.75);
	margin-top:-0.2rem;
	margin-bottom:-0.2rem;
	display:inline-block;
	/*width:66.66%;*/
}

@media print, screen and (min-width:40em){

	#infoTitle.infoTitle-open h3{
		/*width:75%;*/
	}
}

.title-image{
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	right:3rem;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 0;
	background-position: right;
    width: calc(33.4% - 3rem);
	height: 4rem;
    display:inline-block;
    opacity:0;
    transition: opacity 1s ease;
}

#infoTitle.infoTitle-open .title-image{
	opacity:1;
}

.trail-listing{
	background-color: rgba(255,255,255,0.9);
	color: #000;
}

.trail-listing:hover{
	background-color: rgba(255,255,255,1);
	cursor:pointer;
}

.trails-list-title{
	color:#fff;
}

.trail-listing .trail-stop-icon-container{
	position: relative;
}

.trail-listing .trail-stop-icon{
	position: absolute;
	top:0;
	left:0;
	padding-bottom:0;
	height:100%;
}

.trail-listing h4{
	font-weight: bold;
}