/*--------------------------------------------+
 | Site: Searchable Map	Template			  |
 | Part: Master styles                        |
 +--------------------------------------------*/

/* Imports
=====================================================================*/
/* @import "reset.css"; /* Reset styles */
@import "ie.css"; /* IE styles */


/* Fonts
======================================================================*/
input, select, textarea { font-family: Calibri, Arial, sans-serif; background: #ffffe4; }

/* Basics
======================================================================*/
a { color: #366cb3; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1em; font-size: 12px; }
cite, em { font-style: italic; }
dt { margin-top: 1.35em; }
dt:first-child { margin: 0; }
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
h1 { color: #4b58a6; font-size: 26px; font-weight: normal; line-height: 1.08; margin-bottom: 0.1em; margin-top: 0.3em; width: 65.5%; }
h1 span, h2 span, h3 span, h4 span { font-size: 15px; font-weight: normal; margin-left: 0.5em; }
h2 { color: #4b58a6; font-size: 18px; line-height: 1.3; margin-bottom: 7px; }
h2, h3, h4, h5, h6, strong { font-weight: bold; }
h3 { color: #4b58a6; margin-top: 0.25em; }
h4 { margin: 0.25em 0 0 0; padding: 0; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 5px; margin: .75em 0; }
html { height: 100%; }
img {padding-right: 15px; border: none; }
legend { background: #fff; color: #352f8e; font-size: 1.7em; margin: 0 0 0 -0.5em; padding: 0.1em 0.75em 0.1em; }
legend em { color: #777; font-size: 0.7em; font-style: normal; font-weight: normal; margin-left: 0.3em; }
ol { list-style: decimal; margin-left: 1.5em; }
ol ol { list-style: lower-alpha; }
select { padding: 0.1em 0.2em; }
sub { font-size: 10px; vertical-align: sub; }
sup { font-size: 10px; vertical-align: super; }
table { border-collapse: collapse; }
table p { margin: 0; }
td { vertical-align: top; }
thead th { font-size: 1em; padding: 0 0.4em 0.25em; }
ul { list-style: disc; margin-left: 0; }
ul ol li { background: none; padding: 0; }

/* Stock classes */
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat, ul.headlines { list-style: none; margin-left: 0; }
ul.flat li, ul.headlines li { background: none; margin: 0; padding: 0; }
ul.headlines li { margin-bottom: 10px; }


/* Core layout
======================================================================*/
.clear { clear: both; }
#frame { width: 100%; height: 100%; }
.map-container { clear: both; margin: auto; height: 100%; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.options-v.c3l { margin-right: 5%; }
.c3l, .c3m, .c3r { width: 31%; }
.c3m { width: 29%; }
ul.c2l, ul.c2r { list-style: none; margin-left: 0; }
.col4 .col { float: left; margin-right: 1%; width: 24%; }


/* Center the website on the screen
======================================================================*/
div.map-container { position: relative;  background-color: #0053a0; 
}

/* Content */
.content-primary { }
.content-secondary { float: left; width: 28%; }
.content-home { margin: auto; padding: 50px 0; width: 710px; }
.content-home h1 { width: 100%; }
.home-left { float: left; width: 180px; padding: 0 5px; }
.home-right { float: right; width: 500px; }
.content-simple { margin: auto; width: 700px; } 
.content-simple  p { margin-top: .25em; }

	/* Full layout (no secondary content) */
	.full .content { background-image: none; }
	.full .content-primary { float: none; margin: 0 auto; padding-top: 1em; width: 100%; }
	.full .content-secondary { display: none; }
	
#map_canvas {width: 100%; height: 760px; border-bottom: 2px solid #74b74a;}
#map_canvas img { float: right; padding-bottom: 8px; }
#map_canvas h5 { clear: both; }

/* Muted text */
.mute { color: #77787b; font-size: 12px; }
p.mute { margin: 0; }

/* Text boxes */
  .ezpz-hint { color: #777; font-style: italic; }

/* footer text */
.footer { color: #77787b; font-size: 12px; }
p.footer { margin-bottom: 0.4em; }

/* overlay */
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#section-instructions {
	display: none;
	position: absolute;
	top: 25px;
	left: 100px;
	width: 450px;
	background-color: #0053a1;
	color: white;
	font-weight: bold;
	text-align: center;
}
#section-instructions p {
	margin: 0.5em 0;
}
/* sub menu sponsors */
#sub-map-sponsors {
	display: none;
	position: absolute;
	top: 507px;
	left: 540px;
	width: 446px;
	max-height: 269px;
	box-sizing: border-box;
	color: #0053a1;
	text-align: center;
	background: rgb(255, 255, 255) transparent; /* default fallback */
	background: rgba(255, 255, 255, 0.7); /* nice browsers */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF); /* IE 6/7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; /* IE8 */
}
#sub-map-sponsors p {
	padding-top: 3px;
	margin-bottom: 0;
	font-weight: bold;
	font-size: 12px;
	line-height: 12px;
}
#sub-map-sponsors img[class*="align"] {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}

img.no-border {
	border: none;
}
a:hover img.no-border, a:active img.no-border, a:focus img.no-border {
	background: none;
}
/* menu options */
#select {
	display: none;
}
#nav {
	position: relative;
	width: 100%;
	z-index: 2;
	margin-right: 10px;
	text-align: left;
	clear: left;
}
#nav ul {
	list-style-type: none;
	color: #74b74a;
	padding-bottom: 16px;
}
#nav li {
	display: inline; float: left;
	margin: 0;
	padding: 5px 5px 0;
	cursor: pointer;
}
#search { 
	position: absolute;
	top: 380px;
	left: 150px;
	width: 390px;
	z-index: 10;
	padding: 9px 7px 0;
	color: #f0f3c2;
	text-align: left;
}
.solid-bg {
	background-color: #0053a1;
}
#search.solid-bg { 
	left: 100px;
}
#select {
	position: absolute;
	bottom: 231px;
	left: 150px;
	width: 260px;
	max-height: 575px;
	z-index: 9;
	border: 1px solid white;
	padding: 8px 6px 8px 12px;
	background-color: #0954a1;
	color: #f0f3c2;
	overflow: auto;
}
#select ul {
	list-style-type: none;
	margin: 0;
}
#select li {
	padding: 5px 2px;
}
#select a {
	font-weight: normal;
	color: white;
}
#select a:hover {
	text-decoration: underline;
}
/* header */
.header {
	position: absolute;
	top: 25px;
	left: 65px;
	width: 435px;
}
#map_canvas .header img, #map_canvas .slideshow img {
	float: none;
	padding-bottom: 0;
}
.header .description {
	padding-left: 70px;
}
/* slideshow */
.slideshow {
	position: absolute;
	top: 13px;
	left: 570px;
	width: 425px;
	height: 340px;
	background: transparent url('../img/photopile.png');
}
/* search */
input, select, textarea { color: #414042; font-size: 1em; }
textarea { height: 10em; }
#search span {
	display: block;
	margin: 0 0 5px 5px;
	font-size: 12px;
	color: #74b74a;
}
#search label {
	font-size: 12px;
}
#search .txt { width: 100%; }
.input-addr { width: 70%; float: left; } 
.input-addr .txt { width: 100%; }
.input-radius { width: 28%; float: right; }

.sponsors {
	width: 100%;
	height: 115px;
	border-top: 2px solid #74b74a;
	/* Gradient */
	background: #003f7b;
	background: -moz-linear-gradient(top, #00305d 0%, #003f7b 33%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00305d), color-stop(33%, #003f7b));
	background: -webkit-linear-gradient(top, #00305d 0%, #003f7b 33%);
	background: -o-linear-gradient(top, #00305d 0%, #003f7b 33%);
	background: -ms-linear-gradient(top, #00305d 0%, #003f7b 33%);
	background: linear-gradient(top, #00305d 0%, #003f7b 33%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00305d", endColorstr="#003f7b", GradientType=0);
}
.sponsors img {
	display: block;
	margin: 20px auto;
}
/* Options */
.options-h, .options-v { list-style: none; margin: 0; padding: 0; }
td .options-h, td .options-v { margin: 0; }
.options-h input, .options-v input { margin-bottom: -0.05em; }
.options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
.options-h li, .options-v li { background: none; clear: both; padding: 0; }
.options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
.options-v li { padding-left: 25px; text-indent: -25px; }
.options-v li p { margin: 0; text-indent: 0; }
.options-days li { margin-right: 0.1em; }

#amount-range, #year-range { margin: 0.5em 4em 0.5em 0.5em; width: 95%; }

#layer-button-projects { color: #FF6666; font-weight: bold; }
#layer-button-wards { color: #80B16A; font-weight: bold; }
#layer-button-districts { color: #3D85C6; font-weight: bold; }

.tagline { font-size: 15px; }

.btn {
  background: #4A7ABA;
  background-image: -moz-linear-gradient(top, #4A7ABA, #274976); /* FF */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4A7ABA),color-stop(1, #274976)); /* Saf4+, Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4A7ABA', EndColorStr='#274976'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4A7ABA', EndColorStr='#274976')"; /* IE8 */
  border: 1px solid #274976;
  color: #ffffff;
  font-weight: bold;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  padding: 0.3em 1.1em;
  margin-right: 0.5em;
  text-shadow: 1px 1px 1px #58595B;
}

.ui-slider-horizontal { height: 0.4em;}
.ui-slider .ui-slider-handle { height: 0.9em; width: 0.9em; }
.yellow { color: #cccc33; }

#resultCount { float: right; font-weight: bold; font-size: 15px; margin-top: 8px; }


/* hide upper right controls 
div.gmnoprint {display: none; visibility: hidden;}*/



/* Map Details Page Styles */

	/* General fonts & layout */

		div#detailspage {background: #0053a0; padding: 30px;}
		#contentwrap-primary {background: white; padding: 40px 30px 30px;}
		.details-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #74B74A; }
		#parkname {display: inline; width: auto; margin-bottom: 20px; border-bottom: none; }
		span.map-link {color: #0053a1; font-size: 12px;}

		#map-data {width:333px; float: right; display: inline; margin-left: 20px; }
		div#location {height: 333px; border: 1px solid #74b74a; }

		/* Amenities List */
		#amenities {width: 140px; float: left; display: inline; margin-right: 15px;}
		div#amenities div {text-align: left; clear: left;}

	/* Main content column details page */

		#parkdata {width: 380px; float: right; display: inline;}
		img#image {margin-right: 0; padding-right: 0;float: right; display: inline; margin-left: 15px; width: 50%; height: auto;}


	/* add new refresh link */
		li.center-map a {color: inherit; font-weight: inherit;}
	
	/* hide description id */

	p#description {}


/*--------------------------------------------+
 | Site: Searchable Map	Template			  |
 | Part: Custom styles                        |
 +--------------------------------------------*/

div#watertrailcontainer {width: 1020px; margin: 0 auto; text-align: left;}
div#watertrailcontainer div#topmenu {width: 100%;}
div#watertrailcontainer div.map-container {margin: 0; padding: 0;}

#topmenu .text { display: inline-block; width: 75%; text-align: left; }

div#watertrailmenu .text {text-align: left;}

div#watertrailmenu { background-color: #003f7b; width: 100%; }
div#watertrailmenu .text { color: white; font-size: 10px; line-height: 30px; font-weight: bold; padding: 19px 12px 0; text-align: left; }
div#watertrailmenu .text a { position: relative; color: white; text-decoration: none; }
div#watertrailmenu .text a:hover { color: #f1ffc2; }

ul.options-v input, ul.options-v checkbox {background-color: transparent;}
ul.options-v input[type="checkbox"], ul.options-v input[type="radio"] {
    background-color: transparent;
}

ul.options-v label {color: white;}
p.mapcaption {font-size: 11px; padding-top: 6px; text-align: right;}



/* INFOWINDOW */
div.googft-info-window {
font-family: sans-serif; padding-top: 12px; margin-top: 0;font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; margin-bottom: 3px; color: #6e5a3f;}
.home div.googft-info-window {
	margin-top: -10px;
}
p.parkname {
margin-top: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 18px; line-height: 18px; margin-bottom: 6px;}

p.description {
max-height: 250px;
overflow: auto;
padding-right: 10px;
}
div.infowindowyes {
height: 10px; width: 10px; margin-top: 1px; margin-right: 6px; float: left; display: inline; border: 1px solid #6e5a3f; background-color: #ff6905;}

div.infowindow {
height: 10px; width: 10px; margin-top: 1px; margin-right: 6px; float: left; display: inline; border: 1px solid #6e5a3f; background-color: #fff;}

div.closetext {background: /*url("../img/closetext.png") no-repeat right top*/none; z-index: 10000; height: 18px; width: 260px; margin-top: -4px;}
div.closetext {display:none;}

/* SLIDESHOW */
#map_canvas #rotator img, #rotator img
{
	display: none;
	position: absolute;
	top: 36px;
	left: 102px;
	width: 257px;
	height: 207px;
	padding: 0;
}

/* MENU */
#nav .divider:before, .divider:before {
	content: "|";
}

/* FOR WORDPRESS COMPATIBILITY */
div.access-level2.sub {
	border: none;
}

/* RESPONSIVE STYLES (MOBILE LAST METHOD) */
@media screen and (max-width: 1019px){

	body.page-template-map {
		height: 100%;
		height: calc(100% - 20px); /* 20 = 10px margin-top/bottom */
		overflow: hidden;
	}
	.page-template-map #page {
		height: 100%;
		margin: 10px auto;
		overflow: hidden;
	}
	
	.page-template-map .mcp-controls {
	  position: fixed;
	}
  .page-template-map .mcp-panels {
  	padding-top: 35px; /* set equal to .mcp-controls height */
  }	
	.page-template-map .mcp-panel-page-intro {
		display: block;
	}
	.page-template-map .mcp-control {
  	width: 32%;
	}
	.page-template-map .mcp-control {
		display: inline-block;
  }
	.page-template-map .mcp-control:nth-child(2) {
    margin-left: -1px;
	  margin-right: -1px;
  }
  
	.singular #primary {
		float: none;
	}
	#map_canvas {
		height: 100%;
	}
	#main,
	.singular #primary,
	#main #content,
	.content-primary {
		height: 100%;
		height: calc(100% - 8px);
	}
	
	#overlay,
	#search,
	.header,
	.slideshow,
	#section-instructions {
		position: static;
		width: 100%;	
	}
	#search .c3l,
	#search .c3m,
	#search .c3r {
		float: none;
		width: 100%;
	}
	#search #nav {
		display: none;
	}
	#overlay {
	  box-sizing: border-box;
		padding: 1em 2em;
  }
	.header img {
		max-width: 100%;
	}
	#select {
		z-index: 0;
		position: static;
		display: block;
		width: 100%;
		max-height: none;
		border: none;
  }
  
  div.closetext {
    width: auto;
	  visibility: hidden;
  }
  .googft-info-window .parkname + div {
  	float: none!important;
  }
  
}

