/* Bing Maps */
.mapContainer {
    position: relative;
    margin: 0 0 1em;
    overflow: hidden;
    /* Standardhöhe */
}

.mapContainer .bingmap {
    height: 500px;
}

.mapsPreviewMode {
    background: url(/basis/grafik/map-placeholder.png) center no-repeat #f5f5f5;
    background-size: cover;
    border-radius: 5px;
    margin: 0 0 2em;
}

.mapsPreview {
    padding: 1.5em;
}

.mapsPreviewHeadline {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 .5em;
}

.mapsPlaceholderImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mapsPreviewLoad {
    display: block;
    margin: 0.8em 0 0;
    font: italic 1.1em/1 Georgia;
    text-align: right;
}

@media only screen and (max-width: 679px) {
    .mapContainer .bingmap {
        height:250px;
    }
}

.mapContainer > a {
    font-size: 10px;
    line-height: 2;
}

.mapContainer > .map_reset {
    float: left;
}

.mapContainer > .map_help {
    float: right;
}

.bingmap {
    position: relative;
    width: 100%;
    height: 620px;
    background: #d5d4cf;
}

.bingmap.minimal {
    height: 250px;
}

.bingmap:before {
    content: 'Karte wird geladen ...';
    position: absolute;
    left: 0;
    top: 0;
    margin: 1em 0 0 1em;
}

.mapsPreviewMode .bingmap:before {
    display: none;
}

.bingmap.initialized:before {
    content: '';
    display: none;
}

.bingmap .pushpinCluster > div {
    color: #111 !important;
    font-size: 8pt !important;
}

.MapPushpinBase {
    cursor: pointer !important;
}

/* Icons für Kategorien */
.bingmap .MapPushpinBase:before {
    position: absolute;
    color: #fff;
    line-height: 35px;
    left: 7px;
    font-size: 20px;
    z-index: 1;
}

/* Filter */
.mapContainer .filters {
    margin-bottom: .5em;
}

.mapContainer .filters input {
    vertical-align: middle;
}

.mapContainer .filters li {
    display: inline-block;
    margin-right: .75em;
    line-height: 1.5;
}

.mapContainer .filters .ico:before {
    color: #222;
    margin: 0 .3em 0 0;
    font-size: 15px;
    vertical-align: bottom;
    width: 0.9em;
}

.ico_maps_events:before, .bingmap.filtered .MapPushpinBase.event:before {
    content: 'a';
}

.ico_maps_festivals:before, .bingmap.filtered .MapPushpinBase.festival:before {
    content: 'b';
}

.ico_maps_hoerspiele:before, .bingmap.filtered .MapPushpinBase.hoerspiel:before {
    content: 'c';
}

.ico_maps_kinder:before, .bingmap.filtered .MapPushpinBase.kinder:before {
    content: 'd';
}

.ico_maps_konzert:before, .bingmap.filtered .MapPushpinBase.konzert:before {
    content: 'e';
}

.ico_maps_oper:before, .ico_maps_musicals:before, .bingmap.filtered .MapPushpinBase.oper:before, .bingmap.filtered .MapPushpinBase.musical:before {
    content: 'f';
}

.ico_maps_partys:before, .bingmap.filtered .MapPushpinBase.party:before {
    content: 'g';
}

.ico_maps_theater:before, .bingmap.filtered .MapPushpinBase.theater:before {
    content: 'h';
}

.ico_maps_ausstellungen:before, .bingmap.filtered .MapPushpinBase.ausstellung:before {
    content: 'i';
    /* fehlt noch */
}

.ico_maps_buehne:before, .bingmap.filtered .MapPushpinBase.buehne:before {
    content: 'j';
    /* fehlt noch */
}

/* Infoboxen */
.infoboxContainer .infobox {
    position: absolute;
    left: -999em;
    top: -999em;
    margin: -20px 0 0 -28px;
    border: 4px solid #333;
    width: 250px;
    padding: 1em;
    font-size: 11.5px;
    line-height: 1.5;
    background: #fff;
    -webkit-box-shadow: 0 0 20px #666;
    -moz-box-shadow: 0 0 20px #666;
    box-shadow: 0 0 20px #666;
    z-index: 1002;
}

@media only screen and (max-width: 320px) {
    .infoboxContainer .infobox {
        width:150px;
    }
}

.infoboxContainer .infobox:before {
    content: '';
    border-width: 18px 12px 0;
    border-style: solid;
    border-color: #333 transparent transparent;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 -22px 13px;
}

.infoboxContainer .infobox:after {
    content: '';
    border-width: 15px 10px 0;
    border-style: solid;
    border-color: #fff transparent transparent;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 -15px 15px;
}

/* Flyout Varianten */
/* ToLeft */
.infoboxContainer .infobox.left {
    margin-left: 28px;
}

.infoboxContainer .infobox.left:before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 13px;
}

.infoboxContainer .infobox.left:after {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 15px;
}

/* ToBottom */
.infoboxContainer .infobox.bottom {
    margin-top: 20px;
}

.infoboxContainer .infobox.bottom:before {
    bottom: auto;
    top: 0;
    border-width: 0 12px 18px;
    border-color: transparent transparent #333;
    margin: -22px 0 0 13px;
}

.infoboxContainer .infobox.bottom:after {
    bottom: auto;
    top: 0;
    border-width: 0 10px 15px;
    border-color: transparent transparent #fff;
    margin: -15px 0 0 15px;
}

/* ToBottomLeft */
.infoboxContainer .infobox.bottom.left:before {
    margin: -22px 13px 0 0;
}

.infoboxContainer .infobox.bottom.left:after {
    margin: -15px 15px 0 0;
}

.infoboxContainer .infobox .infobox_close {
    position: absolute;
    right: 0;
    top: 0;
    width: 7px;
    height: 7px;
    text-indent: 5em;
    overflow: hidden;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUY5NUQ2RUFDREIwMTFFMjlGN0E5QkREOTIzMDUzOUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUY5NUQ2RUJDREIwMTFFMjlGN0E5QkREOTIzMDUzOUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRjk1RDZFOENEQjAxMUUyOUY3QTlCREQ5MjMwNTM5RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRjk1RDZFOUNEQjAxMUUyOUY3QTlCREQ5MjMwNTM5RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhK1LA8AAAAGUExURf///wAAAFXC034AAAAeSURBVHjaYmBkAAFGMAJjIAERQ1CMMB4jTJARIMAAAaQADrKbnL0AAAAASUVORK5CYII=') center no-repeat;
    padding: .75em;
}

.infoboxContainer .infobox h5, .infoboxContainer .infobox p {
    margin: 0 0 1em;
}

.infoboxContainer .infobox .contains {
    margin-bottom: 0;
}

.infoboxContainer .itemPager {
    position: relative;
    margin: 5px 0;
    padding: 0;
    width: 100%;
    height: 22px;
    list-style: none;
}

.infoboxContainer .itemPager a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 22px;
    height: 22px;
    overflow: hidden;
    text-indent: 30px;
    background: 0 0 no-repeat transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAWCAYAAAC7ZX7KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaVJREFUeNq0lzFLw0AUxy83FJwEoSAIHVxchYKDU8eAQ0fBD+AqdHLwA3QSHOsHKAgi6JSv0ELBtYuDEHASOhVc6v+FF7iG5vLu+vLgT9Pc3S9/LnkvL8nE1MYRdA2l0Al0zuc/oRzKoBfo14TFXtxkh+ED6A66hw4bLr6CxtATtG6Yq8KtGj6G3qGLwF2bQ0Pop2ZcjWudQbo9swio4TUzZlRDlVsa7kBvUM/ER48ZHeecOrc0PIrcgV07MnL+q3PpGaYE+OLs9cbtZlP8PieJbxpl9ykfe7lC3haXdvgqxKywbN1IuQHsgmu5JoqBwt1IJVyXJTSdkuEzZbMU/SZupOm+5RqpaZai6+PuYbprTTvx1xbXet5OMc9YGbmPu8edzMnwUjkxDDOXymYLLhl+bSGbMwk3IkcyMvzB3ZHYtKDTmkq5AeyCa51WTgQWwMfMbOQKeVvcsko8QguFLF5wD2va4lqnDA05u2MjZ8a6Ut5UubYycMlNc2jMeW1ec0E1bvXF8Q0NoAdhwqx47oDX1oUaN5k0d12+j8Vp5EdoNPdfgAEAE4Gh6O6acccAAAAASUVORK5CYII=');
}

.infoboxContainer .itemPager .itemFwd {
    left: auto;
    right: 0;
    background-position: -22px 0;
}

.infoboxContainer .itemList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.infoboxContainer .infobox .itemTitle {
    font-weight: bold;
    font-size: 1.1em;
}

.infoboxContainer .infobox .itemDescr img {
    display: block;
    max-width: 100%;
}

.infoboxContainer .infobox .itemLink {
    font-weight: bold;
}

/* mobile */
.infoboxContainer .infobox.mobile {
    left: 0px;
    right: 0px;
    margin: 0;
    border: 0;
    padding: 0;
    width: auto;
    color: #fff;
    background: rgba(0,0,0,.80);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.infoboxContainer .infobox.mobile:before {
    display: none;
}

.infoboxContainer .infobox.mobile:after {
    margin-left: -9px;
    border-color: rgba(0,0,0,.80) transparent transparent;
}

/* mobile toBottom */
.infoboxContainer .infobox.mobile.bottom {
}

.infoboxContainer .infobox.mobile.bottom:after {
    bottom: auto;
    top: 0;
    border-color: transparent transparent rgba(0, 0, 0, 0.80);
}

.infoboxContainer .infobox.mobile .infobox_close {
    margin: .75em;
    background-color: #fff;
}

.infoboxContainer .infobox.mobile .contains {
    padding: 1em 1em 0;
}

.infoboxContainer .infobox.mobile .infobox_content {
    padding: 1em;
}

.infoboxContainer .infobox.mobile .itemPager {
    position: absolute;
    right: 55px;
    top: 0;
    width: 65px;
    margin-top: 9px;
}

.infoboxContainer .infobox.mobile .itemDescr img {
    float: left;
    max-width: 35%;
    height: auto;
    margin: 0 1em 1em 0;
}

.infoboxContainer .infobox.mobile .itemDescr img + br {
    display: none;
}

.infoboxContainer .infobox.mobile .itemLink {
    clear: left;
}

.infoboxContainer .infobox.mobile .itemLink a {
    display: inline-block;
    background: #fff;
    padding: .4em;
    text-decoration: none;
    color: #333;
}

/* Bing Maps Ende */
.MicrosoftMap .LogoContainer {
    display: none !important;
}

/* VMZ-Karte */
.vmzmap {
    border-bottom: 55px solid #fff;
}

.vmzmap_click {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid transparent;
    border-radius: 100%;
    background: #333;
    opacity: 1;
    transition: none;
}

.vmzmap_click.animate {
    z-index: 0;
    background: #666;
    border-color: #333;
    opacity: 0;
    transform: scale(6);
    transition: opacity .5s ease-in, background .5s ease, border .5s ease, transform .5s ease;
}

.vmzmap_details {
    border: 4px solid #333;
    width: 250px;
    padding: 1em;
    font-size: 11.5px;
    line-height: 1.5;
    background: #fff;
    box-shadow: 0 0 20px #666;
    position: absolute;
    left: 0;
    top: 0;
    margin: 20px 0 0 -30px;
    z-index: 1001;
}

.vmzmap_details:before {
    content: '';
    border: 1px solid #333;
    border-width: 0px 16px 16px;
    border-color: transparent transparent #333 transparent;
    position: absolute;
    top: 0;
    margin: -16px 0 0 10px;
}

.vmzmap_details:after {
    content: '';
    border: 1px solid #fff;
    border-width: 0px 10px 11px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: 0;
    margin: -11px 0 0 16px;
}

.vmzmap_details.flyToLeft {
    margin: 20px -30px 0 0;
}

.vmzmap_details.flyToLeft:before {
    margin: -16px 10px 0 0;
}

.vmzmap_details.flyToLeft:after {
    margin: -11px 16px 0 0;
}

.vmzmap_details.flyToTop {
    margin: 0 0 20px -30px;
}

.vmzmap_details.flyToTop:before {
    border-width: 16px 16px 0;
    border-color: #333 transparent transparent transparent;
    top: auto;
    bottom: 0;
    margin: 0 0 -16px 10px;
}

.vmzmap_details.flyToTop:after {
    border-width: 11px 10px 0;
    border-color: #fff transparent transparent transparent;
    top: auto;
    bottom: 0;
    margin: 0 0 -11px 16px;
}

.vmzmap_details.flyToLeft.flyToTop {
    margin: 0 -30px 20px 0;
}

.vmzmap_details.flyToLeft.flyToTop:before {
    margin: 0 10px -16px 0;
}

.vmzmap_details.flyToLeft.flyToTop:after {
    margin: 0 16px -11px 0;
}

@media screen and (min-width: 481px) {
    .vmzmap_details:before, .vmzmap_details:after {
        left: 0 !important;
    }

    .vmzmap_details.flyToLeft:before, .vmzmap_details.flyToLeft:after {
        left: auto !important;
        right: 0;
    }
}

.vmzmap_details.isLoading {
    width: 30px;
    padding: 10px
}

.vmzmap_details.isLoading .details_close {
    display: none;
}

.isLoading .details_wrapper {
    position: relative;
    height: 20px;
}

.isLoading .details_wrapper:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    height: 14px;
    width: 14px;
    border: 3px solid rgba(128,128,128,.6);
    border-radius: 50%;
    border-top-color: rgba(64,64,64,1);
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.isLoading .details_wrapper .vmz_incident {
    display: none;
}

.details_pager {
    display: none;
}

.details_pager li {
    display: inline-block;
    width: 30%;
    text-align: center;
}

.details_pager li:first-child {
    text-align: left;
}

.details_pager li:last-child {
    text-align: right;
}

.details_close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 6px;
    font-size: 2em;
    line-height: 1;
    transition: all .2s ease-out;
}

.details_close:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
}

.vmz_name {
    font-size: 1.3em;
    font-weight: bold;
}

.vmz_name .source {
    font-weight: normal;
    font-size: .9em;
}

.vmz_loc {
    font-weight: bold;
    margin-bottom: .5em;
}

.vmz_fromUntil {
    margin-bottom: .5em;
}

.vmzmap_legend {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -55px;
    background: rgba(255,255,255,.9);
    padding: 5px 2px;
    font-size: .75em;
    line-height: 1.5;
}

.vmz_tr {
    display: inline-block;
    margin: 0 5px 0 0;
}

.vmz_tr:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #C0C0C0;
    margin: 0 3px 0 0;
    position: relative;
    top: 1px;
    border-radius: 5px;
}

.tr_0:before {
    background: #77933C;
}

.tr_1:before {
    background: #FFC000;
}

.tr_2:before {
    background: #800;
}

.tr_3:before {
    background: #000;
}

@media screen and (max-width: 480px) {
    .vmzmap_details {
        border: 3px solid #333;
        margin: 20px 0 0 0;
        padding: 0;
        box-shadow: none;
        left: 0 !important;
        right: 0 !important;
        width: auto;
    }

    .vmzmap_details:before, .vmzmap_details.flyToTop:before {
        margin-left: -15px;
    }

    .vmzmap_details:after, .vmzmap_details.flyToTop:after {
        margin-left: -9px;
    }

    .vmzmap_details.isLoading {
        width: auto;
    }

    .isLoading .details_wrapper:before {
        width: 20px;
        height: 20px;
        left: 50%;
        margin: 2px 0 0 -10px;
    }

    .vmzmap_details.flyToTop {
        margin: 0 0 20px 0;
    }

    .details_wrapper {
        padding: 5px;
    }
}