html, body, #map {
margin: 0;
height: 100%;
width: 100%;
}
#map {
cursor: move;
background-color: #CCCCCC;
/* no highlighting of the map area when tapping the map on touch devices */
-webkit-tap-highlight-color: transparent;
}
#title, #tags, #shortdesc {
display: none;
}
div.olMapViewport {
-ms-touch-action: none;
}
/* Turn on GPU support where available */
.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
/* Tile fade animation */
.olLayerGrid .olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
/* Zoom Box */
.olHandlerBoxZoomBox {
border: 2px solid red;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olDrawBox {
cursor: crosshair;
}
div.olControlAttribution {
position: absolute;
font-size: 10px;
text-align: right;
color: #BFEFFF;
bottom: 0;
right: 0;
background: rgba(0,0,100,0.2);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 2px 4px;
border-radius: 5px 0 0 0;
}
.olControlAttribution a {
font-weight: bold;
color: #BFEFFF;
text-decoration: none;
}
div.olControlZoomPanel {
height: 108px;
width: 36px;
position: absolute;
top: 20px;
left: inherit;
right: 20px;
}
div.olControlZoomPanel div {
cursor: pointer;
width: 36px;
height: 36px;
left: 0;
background-color: #ccc;
background-image: none;
}
div.olControlZoomPanel .olControlZoomInItemInactive,
div.olControlZoomPanel .olControlZoomOutItemInactive {
top: 0;
background: rgba(0,0,100,0.4);
position: absolute;
}
div.olControlZoomPanel .olControlZoomInItemInactive {
border-radius: 5px 5px 0 0;
}
div.olControlZoomPanel .olControlZoomOutItemInactive {
border-radius: 0 0 5px 5px;
top: 37px;
}
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
div.olControlZoomPanel .olControlZoomInItemInactive:after {
font-weight: bold;
content: '+';
font-size: 36px;
padding: 7px;
z-index: 2000;
color: #BFEFFF;
line-height: 1em;
}
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
content: '–';
line-height: 0.9em;
padding: 0 8px;
}
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
display: none;
}
div.olControlZoomPanel div.olControlGeolocateItemInactive,
div.olControlZoomPanel div.olControlGeolocateItemActive {
position: absolute;
right: 20px;
top: 98px;
border-radius: 5px 5px 5px 5px;
background: #ccc url(img/locate.png) center no-repeat;
background-color: rgba(0,0,100,0.4);
}
div.olControlZoomPanel div.olControlGeolocateItemActive {
background-color: rgba(0,0,100,0.2);
}
div.olControlGeolocateItemInactive:after {
font-weight: bold;
font-size: 36px;
padding: 7px;
z-index: 2000;
color: #BFEFFF;
line-height: 1em;
background: none;
}
.layerPanel {
position: absolute;
top: 20px;
right: 82px;
}
div.layerPanel div {
display: inline;
margin-left: 5px;
cursor: pointer;
}
div.layerPanel div:after {
font-weight: bold;
font-size: 18px;
font-family: arial;
padding: 8px;
color: #BFEFFF;
line-height: 36px;
border-radius: 5px 5px 5px 5px;
background-color: #ccc;
background: rgba(0,0,100,0.4);
}
div.layerPanel div.labelButtonItemInactive:after,
div.layerPanel div.labelButtonItemActive:after {
content: 'Labels';
}
:lang(de) div.layerPanel div.labelButtonItemInactive:after,
:lang(de) div.layerPanel div.labelButtonItemActive:after {
content: 'Text';
}
div.layerPanel div.labelButtonItemActive:after {
text-decoration: underline;
background: rgba(0,0,100,0.2);
}
div.layerPanel div.aerialButtonItemInactive:after,
div.layerPanel div.aerialButtonItemActive:after {
content: 'Aerial';
border-radius: 5px 0 0 5px;
}
:lang(de) div.layerPanel div.aerialButtonItemInactive:after,
:lang(de) div.layerPanel div.aerialButtonItemActive:after {
content: 'Luftbild';
}
div.layerPanel div.aerialButtonItemActive:after {
text-decoration: underline;
background: rgba(0,0,100,0.2);
}
div.layerPanel div.mapButtonItemInactive:after,
div.layerPanel div.mapButtonItemActive:after {
content: 'Map';
border-radius: 0 5px 5px 0;
}
:lang(de) div.layerPanel div.mapButtonItemInactive:after,
:lang(de) div.layerPanel div.mapButtonItemActive:after {
content: 'Karte';
}
div.layerPanel div.mapButtonItemActive:after {
text-decoration: underline;
background: rgba(0,0,100,0.2);
}
div.layerPanel div.mapButtonItemInactive,
div.layerPanel div.mapButtonItemActive {
margin-left: 1px;
}