@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../font/material-icons.eot');
  src: url('../font/material-icons.eot?#iefix') format('embedded-opentype'),
       /* url('../font/material-icons.woff2') format('woff2'), */
       url('../font/material-icons.woff') format('woff'),
       url('../font/material-icons.ttf') format('truetype'),
       url('../font/material-icons.svg#material-icons') format('svg');
}

h1, h2, h3, h4 {
	font-weight: normal;
}
h1 {
	color: #003d4c;
	font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
	font-size: 200%;
	margin: 0;
	text-align: center;
}
h2 {
	color: #c10;
	font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
	font-size: 170%;
	margin: 0.3em 0;
	text-align: center;
}
h3 {
	color: #660;
	font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
	font-size: 140%;
	text-align: center;
	margin: 0.4em 0 0.2em 0;
	background: #f5f5f5;
}

.portfolio-header .mdl-layout__header-row {
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mdl-layout__title {
  font-size: 18px;
  text-align: center;
  font-weight: 300;
}

.mdl-layout__title a {
	text-decoration: none;
}

.mdl-layout__title a:visited {
	color: rgb(105,240,174);
}

.is-compact .mdl-layout__title span {
  display: none;
}

.portfolio-navigation-row {
  background-color: rgba(0, 0, 0, 0.08);
  text-transform: uppercase;
  height: 45px;
}

.portfolio-navigation-row  .mdl-navigation {
  text-align: center;
  max-width: 900px;
  width: 100%;
}

.portfolio-navigation-row .mdl-navigation__link {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 42px;
}

.portfolio-header .mdl-layout__drawer-button {
    background-color: rgba(197, 197, 197, 0.44);
}

.portfolio-navigation-row .is-active {
  position: relative;
  font-weight: bold;
}

.portfolio-navigation-row .is-active:after {
  content: "";
  width: 70%;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(255,64,129);
  left: 15%;
}

img.article-image {
  width: 100%;
  height: auto;
}

.portfolio-max-width {
  max-width: 900px;
  margin: auto;
}

.portfolio-copy {
  max-width: 700px;
}

.no-padding {
  padding: 0;
}

.no-left-padding{
  padding-left: 0;
}

.no-bottom-padding {
  padding-bottom: 0;
}

.padding-top {
  padding: 10px 0 0;
}

a.external {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFZJREFUeF59z4EJADEIQ1F36k7u5E7ZKXeUQPACJ3wK7UNokVxVk9kHnQH7bY9hbDyDhNXgjpRLqFlo4M2GgfyJHhjq8V4agfrgPQX3JtJQGbofmCHgA/nAKks+JAjFAAAAAElFTkSuQmCC") no-repeat scroll right center transparent;
    padding-right: 13px;
}

.featureinfobox {
	background: #ffc;
    padding: 5px;
    text-align: left;
    width: 75px;
    border: 1px solid #000;
    border-radius: 10px;
    color: #00f;
	transform: translate(-50%, -100%);
}
.featureinfobox a {
	text-decoration: none;
    font-weight: normal;
    font: 12px sans-serif;
}
.featureinfobox a:hover {
	text-decoration: underline;
}

.feature-marker-icon {
	background: transparent;
}

.mdl-mini-footer a:visited {
	color: rgb(158, 158, 158);
}

.mdl-mini-footer {
	padding: 16px;
}

#map_canvas,#feature_map_canvas {
	width:100vw;
	height:450px;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
	color: rgb(105,240,174);
}

.groupheading {
	font-weight: bold;
	color: green;
	margin-top: 5px;
	background: #e0e0e0;
}

/* Tables */
table {
	background: #fff;
	border:1px solid #ccc;
	border-right:0;
	clear: both;
	color: #333;
	margin-bottom: 10px;
	/*width: 100%;*/
}
th {
	background: #f2f2f2;
	border:1px solid #bbb;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	text-align: center;
}
th a {
	background:#f2f2f2;
	display: block;
	padding: 2px 4px;
	text-decoration: none;
}
th a:hover {
	background: #ccc;
	color: #333;
	text-decoration: none;
}
table tr td {
	background: #fff;
	border-right: 1px solid #ccc;
	padding: 4px;
	vertical-align: top;
}
table tr.altrow td {
	background: #f4f4f4;
}

.tabnoborder {
	border: 0;
}
.tabnoborder tr td {
	border: 0;
}

.hangingindent {
    padding-left: 20px ;
    text-indent: -20px ;
}

.alttext {
	border-bottom: .1em dashed;
}

/*
  Home page
*/
/* phone */
.home-grid {
   display: grid;
   grid-template-areas: "maps" "results-heading" "results-left" "results-right" "activities-features" "dropdowns";
}

.home-maps-large {
	display: none;
}

.home-dropdowns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-area: dropdowns;
}

.home-dropdowns select {
	font-size: 14px;
}

/*
  Feature page
*/

.feature-grid {
   display: grid;
   grid-template-areas: "feature-top" "feature-map" "feature-details" "feature-facilities" "feature-photos";
}

.feature-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-area: feature-top;
}

/* non-phone */
@media screen and (min-width: 480px) {
	.mdl-layout__container {
		position: static;
		width: 970px;
  		margin: 0 auto;
	}
		
	.mdl-layout {
		position: static;
		width: 970px;
  		margin: 0 auto;
	}
	
	.home-maps-large .mdl-tabs__tab-bar {
		background-color: rgb(105,240,174);
	}
	
	.home-grid {
	   grid-template-columns: 220px 1fr 1fr;
	   grid-template-areas:	"dropdowns dropdowns dropdowns"
	   						"activities-features maps maps"
	   						"activities-features results-heading results-heading"
	                        "activities-features results-left results-right";
	}
	
	.home-maps-large {
		display: block;
	}
	
	.welcome {
		text-align: center;
	}

	.home-dropdowns select {
		font-size: 16px;
	}
	
	#map_canvas {
		width:750px;
		height:500px;
	}

	#feature_map_canvas {
		width:550px;
		height:500px;
	}

	.feature-grid {
	   grid-template-columns: 1fr 1fr;
	   grid-template-areas: "feature-top feature-top"
	   						"feature-details feature-map"
	   						"feature-facilities feature-map"
	   						"feature-photos feature-photos";
	}
	
	.nearhere-features {
		flex-basis: 375px;
	}
}

.home-activities-features {
  grid-area: activities-features;
}
.home-maps {
  grid-area: maps;
}
.home-results-heading {
  grid-area: results-heading;
}
.home-results-left {
  grid-area: results-left;
}
.home-results-right {
  grid-area: results-right;
}

.feature-details {
	grid-area: feature-details;
}
.feature-map {
	grid-area: feature-map;
}
.feature-facilities {
	grid-area: feature-facilities;
}
.feature-photos {
	grid-area: feature-photos;
}

.help-icons div {
	padding: 2px;
}

.container a:link,a:visited {
	color: #2B3856;
}

/* Paging */
div.paging {
	background:#fff;
	color: #ccc;
	margin-bottom: 1em;
}
div.paging li {
	display:inline;
}
div.paging li.disabled a {
	color: #ddd;
	display: inline;
	text-decoration: none;
}
div.paging li.active a {
	color: #000;
	text-decoration: none;
}