/* css RESET
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display:block;
}
body {
  line-height:1;
}
ol, ul {
  list-style:none;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

#footer-logo {
    bottom: 0;
    position: absolute;
}

/* Typography & Base styles
*/
body,
input,
textarea {
  font:17px/21px 'Ubuntu', sans-serif;
  color: #333;
  -webkit-font-smoothing:antialiased;
}
em{
  font-weight: bold;
}
pre,
code { font:normal 14px/20px monospace; }

h1, h2, h3, h4, h5, h6 {
  margin:0 0 10px 0;
}
p{
  color: #000;
  font-size: 17px;
}

p { margin-bottom:15px;}
strong { font-weight:bold; }
a, a:link, a:visited, a:active{
  color: #333;
  text-decoration:underline;
}
/* General styles
*/
.element-invisible {
  /* For hiding elements but keeping them indexable */
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
/* Clearfix */

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
.clearfix { display: inline-block; }

/* CloseIcon in detail view
*/
.closeWindow{
  position: absolute;
  right: 3px;
  top: 7px;
  width:20px;
  color: #333;
  cursor:pointer; z-index: -1;
  font-size:17px;
}
.closeWindow:link, .closeWindow:active, .closeWindow:visited{
  text-decoration: none;
} 
.closeWindow:hover{
  color: #2c91f3;
}

h2 {
  color: #d31c5c;
  line-height:1.6em;
  font-size:1.5em;
  font-family: 'Ubuntu', sans-serif;
  padding-bottom: 5px;
  margin-bottom: 0px;
}

/* Marker POPUP
*/
.marker-popup::before {
  border-top-color: #999!important;
  border-width: 16px!important;
  margin-left: -16px!important;
}
.marker-popup{
  border: none!important;
  border-radius: 8px!important;
  background: #FFFFFF!important;
  -moz-box-shadow:    0px 0px 2px 0 rgba(0,0,0,0.50)!important;
  -webkit-box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.50)!important;
  box-shadow:         0px 0px 2px 0 rgba(0,0,0,0.50)!important;
  width: 320px!important;
}
.marker-popup h2{
  color: #d31c5c;
  line-height:1.5em;
  font-size:1.4em;
  font-family: 'Ubuntu', sans-serif;
  padding-bottom: 5px;
  margin-bottom: 0px;
  font-weight: bold;
}
.marker-popup h3{
  color: #d31c5c;
  line-height:1.4em;
  font-size:1.3em;
  font-family: 'Ubuntu', sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* Layout 
*/
body > div {
  position:relative;
  z-index:1;
}
#map {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
}

.mapbox-maplogo {
  position:absolute;
  display:block;
  height: 20px;
  width: 65px;
  left:10px;
  bottom:10px;
  text-indent: -9999px;
  z-index:99999;
  overflow:hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAAAoCAMAAAAFWtJHAAAAwFBMVEUAAAAAAAAAAABtbW0AAAAAAAAAAAAAAAAAAAAAAAClpaUAAADp6ekAAAD5+fna2toAAAAMDAzv7+/Nzc0AAAA2Njb8/Pz9/f3T09MAAAAAAAD7+/sAAAArKyuxsbH39/fs7OwbGxuIiIjz8/N8fHyenp7u7u74+PgAAAC8vLxWVlbx8fF1dXXl5eVcXFyUlJTQ0NDFxcVCQkLAwMC4uLj19fXo6OjW1tarq6ve3t77+/vi4uL6+vrKysrNzc3///8w7gSSAAAAP3RSTlMAOQNdPSYBPywKexLLGPCxNEHXnzFL+v2nGwf1IEiE6dBFad9jd9PuLo1V2mDDV3Cjl06SiuXIq4C3973ym6BQMVUPAAAEXElEQVR4Ae2WCVP6OBiH05L0l1IqrVbkKHJ54I0oHn+PfP9vtUle0z/YdhbH2XVnd58ZnRJIeHiPJOx//mH4vQSAN+8FjAhFxgHIaPvJeZ99hxwEElon5iAQbj85Y98g8ODwjEOMAvGFyeE3FEKgodTBqj0BJGN9DhyNd5Ta3ean9QEopfaA+LsKhnEKRExqg4FSP6Og7oEkAjBWnxSCgBX4xF+kcLoPcOBQrSv0e5kH7s1j37jECQieCTPiFGxL5VHw2zQWCeeJiPt6kjRQw0XSkIdVChf67xGa4alSnZlT6HEQ8CK9ANbhvXUF9xlDkBfTuHDWScgC9+z5FQpPI12TlwC6+sV7ixR8CUMKiwjm2GQeOQWHMGuHGdbnObJAwCEqFJpNU5H6uaPUaEIKiQfg+PHk1+u4OwW9PlWW2ctbA4BHCtp+cNK+H8Jos4gDmC5ar4Nx9waaG/2B13NgDqS7+vm2RgEtEws82P+kwIHhs/pgkQKcFIhfd7CogtGNjYMHTLpurD0ERbYFw4JaD3GlQuNAL/JEsSAF4HqlCnaHACk4WhOn4OgCkMD5hSpYNYDJTD8Y46n+jsE1kPhVCuR6QBXhFK7MUOu9O6b1SWF3b+/9ZVWMGOlu93E8UDaAhgc7bfH+0DHqKXCkHzoNDFfU+zxiVQrUC9QXTuHYtKpN59OA3IxCG4b7jh6ZFuVockaNTW09mkJzOaPU49a6mE9cAchZpQJNpUWcwgV9r6FJswsFKrITp2B5pMBMdnS0z2HZNy2+BNKxSZxZfglkrFYBJxQnpzA5sN/HheR2aFQoZBLAi149dQoyAYYjW0hHlHguBAdMcR0DuDZ5omevX6+AI8qcU7ikKT3GBHCnXwydgmCC0tRwCnGQ2Wp6Be71yNIWfQSkOl9vAI1SBCNWrwC01RROgX7BuT2HI4r7tFAw086p/NwZEdOEa7R1uAFuNmQPuKAEAjYNQ0CyeoUEWHYBnpQVQgpvc0Ph+gsKlAnKg1+vEHsw5LKciLKCAJobiWBzYFGbCKpHqkZZrxBFHEASyFI59vJPCskcwNVGOWZAOqsrR+pKbaNeAMT1CixMEtlnsqopNxUMzVJT3tY35aXZm6a6Y9QhwMN6BUJWbE1lhbMO1WehkO7poO0sK7em9MJGxp1XSbC1gtugzzSLQmGsX7VntJGSwsPZ2d2z3bIPKzdoOp3Wzqt8G4XyMVUoFIxLx1S7+piaHtCvR3FeRVsq0GFdp9C5TbGpcNqsPqyHKxcfd14h21KhuLKUFU4f3osrC7F6uV3WXFnadL7wyAPeKDXw2RoJCO5GY4DouYvb/gepVXheLoewzPseQG9N/vzilrMIjoStE3++zvle4eSurw7XEe76ynI4aq+v7lEyt1x5awiFlFLQbHKIpabnM3eJLym4Szzzc/du7SU+zOXv9UNpECH7IoH/gecURPlN9vdQpeD47yhIFNX0U0QgvID9nENm+yxk/xb+AGAjNfRZuk9qAAAAAElFTkSuQmCC);
  background-repeat:no-repeat;
  background-position: 0 0 ;
  background-size: 65px 20px;
}

a.zoomer {
  position: absolute;
  top: 10px;
}
.right #header .limiter {
  width:480px;
}
.right #content,  .right #contentDetail{
  right:0;
  left:auto;
  border-right:none;
  border-left:1px solid #ccc;
}
.right .wax-attribution {
  left:320px;
}
.right a.zoomin {
  left:39px;
}
.right a.zoomout {
  left:10px;
}
#content {
  position:absolute;
  top:0px;
  right:0;
  bottom:0;
  width:auto;
  background:rgb(250,250,250);
  border-left:1px solid #ccc;
  overflow-x:hidden;
  overflow-y:auto;
  padding:15px;
  -moz-box-shadow: 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-box-shadow: 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow: 5px 0px 10px rgba(0,0,0,0.1);
}
.section {
  width: 249px;
  background: #B6CEE5;
  border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 15px;
}

/* Animation */
.map-tile-loaded {
  -webkit-animation-name:fade-in;
  -moz-animation-name:fade-in;
  -ms-animation-name:fade-in;
  -o-animation-name:fade-in;
  -webkit-animation-timing-function:linear;
  -moz-animation-timing-function:linear;
  -ms-animation-timing-function:linear;
  -o-animation-timing-function:linear;
  -webkit-animation-duration:0.2s;
  -moz-animation-duration:0.2s;
  -ms-animation-duration:0.2s;
  -o-animation-duration:0.2s;
}

@-webkit-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-ms-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fade-in { from { opacity:0; } to { opacity:1; } }


/* touch tweaks */
* {
  /* prevent callout when holding tap on links (the native dialog that comes up) */
  -webkit-touch-callout:none;

  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

@media only screen and (max-device-width: 480px) {
  #map {
      bottom:auto !important;
      height:200px !important;
    }
  #content {
    border-left:0 !important;
    border-top:1px solid #ccc;
    top:200px !important;
    overflow-y:visible !important;
    }

  }

  @media screen and (min-width: 480px) and (max-width: 767px){
  .right #content{
  width: 30% !important;

}

#footer-logo {
  bottom: 0;
  position: absolute;
  right: 0;
}

div#about h2{
  font-size: 13px !important;
}

form#filter img{
  max-width: 12px !important;

}

form#filter{
  font-size: 12px !important;
}
}

 @media screen and (min-width: 320px) and (max-width: 479px){
  .right #content{
  width: 90% !important;

}

div#about h2{
  font-size: 13px !important;
}

form#filter img{
  max-width: 12px !important;

}

form#filter{
  font-size: 12px !important;
}
  }

  @media screen and (min-width: 480px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:2){

  }


  @media screen and (min-width: 320px) and (max-width: 479px) and (-webkit-min-device-pixel-ratio:2){

    .right #content{
  width: 90% !important;
}

  #footer-logo {
  bottom: 0;
  position: absolute;
  right: 0;
}


}