|
|
|
@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);
|
|
|
|
}
|