@import url('https://fonts.googleapis.com/css?family=Poppins'); body { margin: 5em; color: #2d2020; background: #f2eee8; } #map { background: #f2eee8 !important; } div.tile { color: #2d2020; position: absolute; pointer-events: auto; /* this enables links */ } div.tile img.imagetile { filter: grayscale(100%); /* recent browsers */ -webkit-filter: grayscale(100%); /* old webkit based browsers */ filter: gray; /* old IE until 9, then needs SVG??? */ position: absolute; left: 0; top: 0; z-index: 0; } div.tile img.imagetile:hover { filter: none; } /* enable color on tiles once the image is zoomed beyond a single tile (iz >= 1) */ div.tile.iz1 img.imagetile, div.tile.iz2 img.imagetile, div.tile.iz3 img.imagetile, div.tile.iz4 img.imagetile { filter:none; } div.tile div.text { position: absolute; left: 0; top: 0; z-index: 1; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 16px; /*text-shadow: 1px 1px 2px black;*/ padding-right: 20px; padding-left: 0px; margin-top: 0px; } div.tile div.text p { margin: 0; } div.tile div.textonimage p { font-size: 12px; color: #f2eee8; background: #dd2e47; margin: 0; line-height: 12px; /*padding-left: 10px;*/ /*hyphens: auto;*/ } div.tile div.text a { margin: 0; text-decoration: none; /*color: #f2eee8;*/ color: black; } div.tile div.text a:hover {} div.coords { pointer-events: none; display: none; } .leaflet-overlay-pane { z-index: 0 !important; /* hack to put the x underneath */ } p.caption {} p.caption span.text { /*background: #444;*/ padding-right: 8px; display: block; } p.caption span.date { padding-right: 8px; /*background: #444;*/ /*color: #AAA;*/ } p.caption a.url { margin-left: 8px; /*color: #FF0;*/ } p.caption a.url:hover { /*background: #FF0;*/ /*color: black;*/ } #slider-wrapper { display: none;/ /*display: inline-block;*/ /* width: 20px; height: 150px; */ padding: 0; position: absolute; left: 15px; top: 100px; z-index: 1000; } #slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); }