/*
  mprl-styles-map.css
  
  Main custom styles for the Redwoods Finder Map
  Written by: Lawrence Dolton for Save The Redwoods League
  March 2017
  updated font and color scheme, September 2017
  
  Location: /wp-content/themes/roots-league-centennial/assets/css/mprl-styles-map.css
*/

/*
league menu teal and grey
  teal: #467f6c
  dark grey: #424244
  grey: #55565c
  light grey: #8b8180

league headers (teal)
  font-family: UniversLT-CondensedBold,sans-serif
  font-size: 30px
  line-height: 33px
  color: #467f6c
  font-weight: 400

league headers with tall/straight look (teal)
  font-family: UniversLT-CondensedBold,sans-serif
  font-size: 24px
  line-height: 26px
  color: #467f6c
  font-weight: 400
  letter-spacing: 1.4333px

league park profile title (h1 class="entry-title")
  font-family: UniversLT-CondensedBold,sans-serif
  font-size: 42px
  line-height: 46px
  color: #303032
  font-weight: 400

league park profile paragraph
  font-family: "Montserrat",Helvetica,Arial,sans-serif
  font-size: 14px
  line-height: 20px
  color: #303032
  font-weight: 400

league highlight paragraphs (larger text in gray)
  font-family: UniversLTStd-LightCn,sans-serif
  font-size: 20px
  line-height: 28px
  color: #55565c
  font-weight: 400

league right-column teal text sub (used for links, some are bold and some are regular):
  font-family: "Montserrat",Helvetica,Arial,sans-serif
  font-size: 12.6px or 14px
  line-height: 18 or 20px
  color: #467f6c
  font-weight: 700 (for bold)

hover:
  color: #6dcab7
  text-decoration: underline

*/

/* default view button added to map
   -- using the pattern from .mpfy-zoom-in / out
*/
.mprl-zoom-reset {
  display: block;
  width: 34px;
  height: 34px;
  font-size: 0px;
  line-height: 0px;
  text-indent: -4000px;
  background: url(../png/zoom-reset.png) no-repeat 0 0;
  z-index: 11;
  margin: 10px 0 0 10px;
  position: relative;
}

.mprl-maptype-controls {
  display: block;
  position: relative;
  width: 106px;
  height: 28px;
  margin: 10px 0 0 14px;
  z-index: 11;
}
.mprl-maptype-button {
  display: inline-block;
  /*width: 50px;
  height: 100%;
  padding-top: 6px;*/
  padding: 6px 10px;
  text-align: center;
  color: #8b8180;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 10px;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.7);
}
.mprl-maptype-button:first-child {
  border-right: 1px solid #fdfbf1;
}
.mprl-maptype-button.active {
  color: #fff;
}
.mprl-maptype-button:hover {
  color: #cacad0;
  text-decoration: none;
}
.mprl-maptype-button.active:hover {
  color: #fff;
  text-decoration: none;
}
.mprl-maptype-button:focus, .mprl-maptype-button:active {
  color: #fff;
  outline: none;
  text-decoration: none;
}

.mprl-tooltip-link {
  margin-top: 10px;
  color: #fff;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 12px !important;
  font-style: italic;
  line-height: 14px;
}
.mprl-tooltip-link-a {
  margin-top: 10px;
  color: #fff;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 12px !important;
  font-style: italic;
  line-height: 14px;
}
.mprl-tooltip-link-a:hover, .mprl-tooltip-link-a:focus, .mprl-tooltip-link-a:active {
  color: #7a873d;
  text-decoration: underline;
}

.mprl-map-header-label {
  display: inline;
  float: left;
  min-height: 48px;
  padding: 5px 20px 0 20px;
  box-sizing: border-box;
  color: #6dcab7;
  font-family: UniversLT-CondensedBold,sans-serif !important;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .06em;
}
.mprl-map-header {
  display: inline;
  float: left;
  min-height: 48px;
  padding: 8px 20px 0 30px;
  box-sizing: border-box;
  cursor: pointer;
}
.mprl-map-header.loc-title {
  color: #fff;
  font-family: UniversLT-CondensedBold,sans-serif !important;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .06em;
}
.mprl-map-header span.caret {
  margin-left: 10px;
}

.mprl-parklist-box {
  display: block;
  position: absolute;
  left: -1000px;
  top: -1000px;
  max-width: 332px;
  max-height: 560px;
  padding: 4px 16px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 2px solid #467f6c;
  border-top: none;
  z-index: 1000;
}

.mprl-parklist {
  display: block;
  margin: 0;
  padding: 0;
  visibility: visible;
  /*overflow: scroll;*/
  font-size: 12px;
  list-style: none;
}

.mprl-parklist li {
  margin: 6px 0;
  color: #467f6c;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
}
.mprl-parklist li:hover, .mprl-parklist li:focus, .mprl-parklist li:active {
  color: #6dcab7;
  text-decoration: underline;
}

.mprl-park-highlight {
  width:24px;
  height:24px;
  background:#ff0000;
  z-index:1000;
}

.mprl-filter-box {
  display: block;
  position: absolute;
  left: -1000px;
  top: -1000px;
  max-width: 260px;
  max-height: 560px;
  padding: 4px 16px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 2px solid #467f6c;
  border-top: none;
  z-index: 1000;
}

.mprl-filterlist {
  display: block;
  margin: 0;
  padding: 0;
  visibility: visible;
  list-style: none;
  font-size: 12px;
}
.mprl-filterlist li {
  padding: 2px 0;
  color: #467f6c;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.mprl-filterlist li:hover, .mprl-filterlist li:focus, .mprl-filterlist li:active {
  color: #6dcab7;
  text-decoration: underline;
}

.mprl-filterlist-clear {
  display: block;
  margin-top: 10px;
  color: #467f6c;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.mprl-filterlist-clear:hover, .mprl-filterlist-clear:focus, .mprl-filterlist-clear:active {
  color: #6dcab7;
  text-decoration: underline;
}
.mprl-filterlist-go {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 20px;
  color: #fff;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 14px;
  background: #467f6c;
  cursor: pointer;
}

/* map legend */
.mprl-legend-box {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  text-align: center;
  background-color: #467f6c;
}
ul.mprl-legend {
  margin: 0 auto;
  line-height: 1.4;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.mprl-legend li {
  display: inline;
  margin-right: 60px;
  text-align: center;
}
.mprl-legend li:last-child {
  margin-right: 0;
}
.mprl-legend li img {
  margin-right: 8px;
  vertical-align: middle;
}
.mprl-legend-label {
  display: inline-block;
  color: #fff;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 48px;
}


/*
  media queries
*/
@media only screen and (min-width: 691px) and (max-width: 1000px) {
  .mprl-map-header-label {
    padding: 5px 14px 0 14px;
    font-size: 22px;
  }
  .mprl-map-header {
    padding: 8px 10px 0 12px;
  }
  .mprl-map-header.loc-title {
    font-size: 18px;
  }
}

@media only screen and (min-width: 761px) and (max-width: 1000px) {
  .mprl-legend li {
    margin-right: 30px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 760px) {
  .mprl-legend li {
    margin-right: 20px;
  }
  .mprl-legend-label {
    font-size: 12px;
  }
}

@media only screen and (max-width: 690px) {
  .mprl-map-header, .mprl-map-header-label {
    display: block;
    float: none;
    width: 100%;
    padding-left: 30px;
  }
}

@media screen and (min-width: 349px) and (max-width:640px) {
  .mprl-legend-box {
    height: auto;
    margin-bottom: 10px;
    padding: 6px 0;
  }
  ul.mprl-legend li {
    display: block;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
  }
}

@media screen and (max-width:348px) {
  .mprl-legend-box {
    height: auto;
    margin-bottom: 20px;
    padding: 6px 0;
  }
  ul.mprl-legend {
    width: 150px;
  }
  ul.mprl-legend li {
    display: block;
    float: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	background: red;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #fdfbf1;
	position: relative;
}

.jspDrag
{
	background: #6dcab7;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #fdfbf1;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}