/* CUSTOM STYLES */

.switch-bar{ top:20px !important; }
@media screen and (min-width: 721px) {
    #tab-bar{ display:none !important; }
}
/*#tab-bar{ display:none !important; }*/

.stadium p{
    margin: 0px 0px;
}
.stadium hr{
    border: 1px solid #eeeeee;
}
.s_name{
    font-size: 1.2em;
}
.s_ort{
    font-weight:bold;
}
.s_kap{
    color: #666666;
}


.s_entry{
    position:relative;
    width: 100%;
}
.se_element{
    position: absolute;
}
.se_date{
    left: 0px;
}
.se_time{
    left: 42px;
    color:#666;
}
.s_runde{
    font-weight:bold;
    padding-top: 8px;
}
.se_game{
    left: 100px;
    position: relative;
}

 .se_game b{
    	display:inline-block;
    	width: 15px;
    }
    .se_teams{
    	display:inline-block;
    	min-width: 110px;
    }
    .se_unknown{ width: 42px; min-width: 0; }
    .se_versus{
        color: #999999;
    }
    .se_flag{
        width:18px;
        margin: 2px 5px 0 2px;
        margin-bottom: 0px !important;
        -moz-box-shadow: 0 0 1px #AAAAAA;
        -webkit-box-shadow: 0 0 1px #AAAAAA;
        box-shadow: 0 0 1px #AAAAAA;

    }
    

.s_info{}
.s_klima, .s_nutzung{ padding-top: 20px; }
.s_klima_icon, .s_nutzung_icon{
    width: 30px;
    height: 30px;
    float:left;
    margin: -5px 5px -5px 0;
}

/* TEMPLATE */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display:block
}
audio, canvas, video {
    display:inline-block
}
audio:not([controls]) {
    display:none;
    height:0
}
[hidden] {
    display:none
}
html {
    font-family:sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}
body {
    margin:0
}
a:focus {
    outline:thin dotted
}
a:active, a:hover {
    outline:0
}
h1 {
    font-size:2em;
    margin:0.67em 0
}
abbr[title] {
    border-bottom:1px dotted
}
b, strong {
    font-weight:bold
}
dfn {
    font-style:italic
}
hr {
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
mark {
    background:#ff0;
    color:#000
}
code, kbd, pre, samp {
    font-family:monospace, serif;
    font-size:1em
}
pre {
    white-space:pre-wrap
}
q {
    quotes:"\201C""\201D""\2018""\2019"
}
small {
    font-size:80%; color:#666;
}
sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}
img {
    border:0
}
svg:not(:root) {
    overflow:hidden
}
figure {
    margin:0
}
fieldset {
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:0.35em 0.625em 0.75em
}
legend {
    border:0;
    padding:0
}
button, input, select, textarea {
    font-family:inherit;
    font-size:100%;
    margin:0
}
button, input {
    line-height:normal
}
button, select {
    text-transform:none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled], html input[disabled] {
    cursor:default
}
input[type="checkbox"], input[type="radio"] {
    box-sizing:border-box;
    padding:0
}
input[type="search"] {
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border:0;
    padding:0
}
textarea {
    overflow:auto;
    vertical-align:top
}
table {
    border-collapse:collapse;
    border-spacing:0
}
.outdated-useragent .warning {
    background-color:#eb6c61;
    color:#fff;
    font:0.8125em sans-serif;
    margin:0;
    padding:10px 10px;
    width:auto;
    height:80px
}
.outdated-useragent .warning a {
    color:#333;
    text-decoration:none
}
.outdated-useragent .content-preview {
    display:block
}
.wait-indicator {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:#fff;
    opacity:.9;
    z-index:1000
}
.wait-indicator.fullscreen {
    position:fixed !important;
    z-index:1000000
}
.wait-indicator img {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-15px;
    margin-top:-15px
}
.popover, .popover .arrow:after, .dropshadow, .switch-bar, #legend, #legend .no-popover, #credits, #btn-open-close-credits, #menubar {
    -webkit-box-shadow:2px 2px 16px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:2px 2px 16px rgba(0, 0, 0, 0.4);
    box-shadow:2px 2px 16px rgba(0, 0, 0, 0.4)
}
article.for-poi div, article.for-poi {
    color:#333;
    font-family:"SZSansRegular", sans-serif;
    font-weight:normal
}
#tab-bar, .radio-bar, .switch-bar, article.for-poi figcaption, #legend, #credits {
    color:#333;
    font-family:SZSansRegular, sans-serif;
    font-weight:normal
}
#legend h2, article.for-poi h2, #credits h2, article.for-poi h3 {
    color:#333;
    font-family:SZSansBold, sans-serif;
    font-weight:normal
}
.tab, #tab-bar li, .radio, .switch, #btn-open-close-credits, #menubar .node, .poi, .poi label, .popover.for-poi button, .image-layer, .map-tile {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    -webkit-touch-select:none;
    -moz-touch-select:none;
    -ms-touch-select:none;
    -o-touch-select:none;
    touch-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:rgba(0, 0, 0, 0);
    -o-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
    outline:none;
    -webkit-touch-callout:none;
    -moz-touch-callout:none;
    -ms-touch-callout:none;
    -o-touch-callout:none;
    touch-callout:none
}
.tab, #tab-bar li, .radio, .switch, #btn-open-close-credits, #menubar .node, .poi, .poi label, .popover.for-poi button {
    cursor:pointer
}
.image-layer, .map-tile {
    pointer-events:none
}
.fade {
    -webkit-transition:opacity linear 0.2s, visibility linear 0;
    -webkit-transition-delay:0s, 0.2s;
    -moz-transition:opacity linear 0.2s 0s, visibility linear 0 0.2s;
    -o-transition:opacity linear 0.2s 0s, visibility linear 0 0.2s;
    transition:opacity, linear, 0.2s, 0s, visibility, linear, 0, 0.2s
}
.fade.in {
    opacity:1;
    visibility:visible;
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s
}
.fade.out {
    opacity:0;
    visibility:hidden
}
.clipped, .popover-content .clipped, .gr-viewpane.scrollable, .poi-popover-content {
    -webkit-overflow-style:-webkit-autohiding-scrollbar;
    -moz-overflow-style:-moz-autohiding-scrollbar;
    -ms-overflow-style:-ms-autohiding-scrollbar;
    -o-overflow-style:-o-autohiding-scrollbar;
    overflow-style:autohiding-scrollbar;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    -webkit-touch-action:pan-x pan-y;
    -moz-touch-action:pan-x pan-y;
    -ms-touch-action:pan-x pan-y;
    -o-touch-action:pan-x pan-y;
    touch-action:pan-x pan-y
}
.gr-viewpane.scrollable-horizontal {
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-style:-webkit-autohiding-scrollbar;
    -moz-overflow-style:-moz-autohiding-scrollbar;
    -ms-overflow-style:-ms-autohiding-scrollbar;
    -o-overflow-style:-o-autohiding-scrollbar;
    overflow-style:autohiding-scrollbar;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    -webkit-touch-action:pan-x;
    -moz-touch-action:pan-x;
    -ms-touch-action:pan-x;
    -o-touch-action:pan-x;
    touch-action:pan-x
}
.gr-viewpane.scrollable-vertical {
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-style:-webkit-autohiding-scrollbar;
    -moz-overflow-style:-moz-autohiding-scrollbar;
    -ms-overflow-style:-ms-autohiding-scrollbar;
    -o-overflow-style:-o-autohiding-scrollbar;
    overflow-style:autohiding-scrollbar;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    -webkit-touch-action:pan-y;
    -moz-touch-action:pan-y;
    -ms-touch-action:pan-y;
    -o-touch-action:pan-y;
    touch-action:pan-y
}
.for-poi .popover-content.clipped {
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
    -moz-overflow-scrolling:auto;
    -ms-overflow-scrolling:auto;
    -o-overflow-scrolling:auto;
    overflow-scrolling:auto;
    -webkit-overflow-style:none;
    -moz-overflow-style:none;
    -ms-overflow-style:none;
    -o-overflow-style:none;
    overflow-style:none;
    -webkit-touch-action:none;
    -moz-touch-action:none;
    -ms-touch-action:none;
    -o-touch-action:none;
    touch-action:none
}
.gr-viewpane.zoomable {
    -webkit-overflow-style:-webkit-autohiding-scrollbar;
    -moz-overflow-style:-moz-autohiding-scrollbar;
    -ms-overflow-style:-ms-autohiding-scrollbar;
    -o-overflow-style:-o-autohiding-scrollbar;
    overflow-style:autohiding-scrollbar;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    -webkit-touch-action:manipulation;
    -moz-touch-action:manipulation;
    -ms-touch-action:manipulation;
    -o-touch-action:manipulation;
    touch-action:manipulation;
    -webkit-content-zooming:zoom;
    -moz-content-zooming:zoom;
    -ms-content-zooming:zoom;
    -o-content-zooming:zoom;
    content-zooming:zoom
}
html {
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
    -moz-overflow-scrolling:auto;
    -ms-overflow-scrolling:auto;
    -o-overflow-scrolling:auto;
    overflow-scrolling:auto;
    -webkit-overflow-style:none;
    -moz-overflow-style:none;
    -ms-overflow-style:none;
    -o-overflow-style:none;
    overflow-style:none;
    -webkit-touch-action:none;
    -moz-touch-action:none;
    -ms-touch-action:none;
    -o-touch-action:none;
    touch-action:none;
    -webkit-content-zooming:none;
    -moz-content-zooming:none;
    -ms-content-zooming:none;
    -o-content-zooming:none;
    content-zooming:none
}
.popover {
    position:absolute;
    left:0;
    top:0;
    z-index:9000
}
.popover {
    min-width:10em;
    background-color:#fff
}
.popover.presentation-disabled {
    display:none
}
.popover-content {
    width:100%;
    height:100%
}
.popover .arrow {
    position:absolute;
    display:block;
    overflow:hidden;
    z-index:-1
}
.popover .arrow:after {
    content:"";
    position:absolute;
    display:block;
    width:23px;
    height:23px;
    -webkit-transform-origin:11.5px 11.5px;
    -moz-transform-origin:11.5px 11.5px;
    -ms-transform-origin:11.5px 11.5px;
    -o-transform-origin:11.5px 11.5px;
    transform-origin:11.5px 11.5px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    background-color:#fff
}
.popover.left {
    margin-left:-16px
}
.popover.left .arrow {
    width:26px;
    height:52px;
    top:50%;
    margin-top:-26px;
    left:100%
}
.popover.left .arrow:after {
    left:-13px;
    top:14.5px
}
.popover.right {
    margin-left:16px
}
.popover.right .arrow {
    width:26px;
    height:52px;
    top:50%;
    margin-top:-26px;
    left:-26px
}
.popover.right .arrow:after {
    left:15px;
    top:14.5px
}
.popover.top {
    margin-top:-16px
}
.popover.top .arrow {
    width:52px;
    height:26px;
    left:50%;
    margin-left:-26px;
    top:100%
}
.popover.top .arrow:after {
    left:14.5px;
    top:-13px
}
.popover.bottom {
    margin-top:16px
}
.popover.bottom .arrow {
    width:52px;
    height:26px;
    left:50%;
    margin-left:-26px;
    top:-26px
}
.popover.bottom .arrow:after {
    left:14.5px;
    top:15px
}
#tab-bar {
    font-size:8.33333px !important;
    height:6em
}
.tab {
    z-index:1;
    display:inline-block;
    position:relative;
    height:6em;
    width:100%;
    max-width:33%;
    vertical-align:top;
    color:#999;
    white-space:nowrap;
    background-color:#fff
}
.tab h1 {
    font-size:1.2em;
    font-family:SZSansBold;
    font-weight:normal
}
.tab h2 {
    height:3.6em;
    padding:1.2em 2em;
    margin:0;
    font-size:inherit;
    white-space:normal;
    line-height:3.6em;
    font-family:SZSansRegular;
    font-weight:normal
}
.tab h2 span {
    display:inline-block;
    vertical-align:middle;
    font-size:1.8em !important;
    line-height:normal
}
.tab .border-img {
    position:absolute;
    width:2px;
    height:3.6em;
    margin:1.2em 0;
    padding:0;
    background-image:url("../assets/graffin/tab/tab-border.png")
}
.tab:first-child .border-img {
    display:none !important
}
.tab:first-child {
    background-color:#000080
}
.tab .tab-pointer {
    z-index:-2;
    display:none;
    position:absolute;
    bottom:-0.7em;
    left:3em;
    width:3em;
    height:3em;
    background-color:#fff;
    box-shadow:4px 4px 16px rgba(0, 0, 0, 0.4);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg)
}
.tab .tab-content {
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff
}
.tab .tab-icon {
    z-index:-1;
    position:absolute;
    top:15%;
    left:1em;
    max-width:6.5em
}
.tab .tab-with-icon {
    padding-left:9em
}
.tab.selected, .tab.selected h2 span {
    color:#333;
    cursor:default
}
.tab.selected .tab-pointer {
    display:block
}
#tab-bar {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    z-index:100;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    padding-bottom:18px;
    font-size:0px;
    background:transparent
}
#tab-bar h1 {
    font-size:26px;
    color:#333;
    top:10px;
    left:20px;
    max-width:68%;
    position:absolute;
    pointer-events:auto;
    overflow:hidden;
    text-overflow:ellipsis
}
#tab-bar.withTabs #firstTabTitle {
    display:none !important
}
#tab-bar.withoutTabs {
    z-index:1001
}
@media screen and (max-width: 480px) {
    #firstTabTitle {
        margin:0;
        font-size:18px !important;
        line-height:24px !important;
        white-space:nowrap
    }
    .listButton #firstTabTitle {
        display:none !important
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    #firstTabTitle {
        margin:0;
        font-size:18px !important;
        line-height:24px !important;
        white-space:nowrap
    }
    .listButton #firstTabTitle {
        display:none !important
    }
}
.scroll-indicator {
    z-index:10;
    left:0;
    top:0;
    position:fixed;
    display:inline-block;
    width:16px;
    height:50px;
    border-left:1px solid #bcbcbc;
    background:#fff url(../assets/graffin/tab/arrow_right.png) no-repeat;
    background-size:contain;
    background-position:center center;
    -webkit-transition:left 0.2s, right 0.2s linear
}
.scroll-indicator:hover {
    cursor:pointer
}
.scroll-indicator.tab-prev {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg)
}
.scroll-indicator.tab-next {
    left:auto;
    right:0
}
.tab-prev.disabled {
    left:-20px !important
}
.tab-next.disabled {
    right:-20px !important
}
.tab-bar-hidden {
    background:none !important;
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
    pointer-events:none
}
.tab-bar-hidden .dropshadow {
    display:none
}
#tab-bar .no-popover {
    height:50px
}
#tab-bar .popover {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    padding:5px;
    max-width:300px
}
#tab-bar li {
    position:relative;
    display:block;
    min-height:42px;
    max-width:300px;
    font-size:13px;
    font-weight:normal;
    color:#888888;
    background-color:#333333;
    border-bottom:1px solid #666666
}
#tab-bar li:last-child {
    border-bottom:none
}
#tab-bar li .switch-bar {
    display:none !important
}
#tab-bar li .radio-bar {
    display:none
}
#tab-bar li.active {
    color:#fff;
    cursor:default
}
#tab-bar li.active .switch-bar {
    display:block !important
}
#tab-bar li.active .radio-bar {
    display:block
}
#tab-bar li span {
    position:relative;
    display:block;
    max-width:95%;
    padding:8px 10px;
    font-size:15px;
    font-family:SZSansBold, sans-serif
}
#tab-bar .placeholder-not-available {
    font-size:14px !important
}
.dropshadow {
    z-index:0;
    position:fixed;
    top:0;
    height:50px;
    width:100%
}
@media screen and (max-width: 480px) {
    #tab-bar {
        z-index:100;
        background:none;
        box-shadow:none !important;
        overflow-x:visible !important;
        overflow-y:visible !important;
        height:0px
    }
    #tab-bar .no-popover, #tab-bar .scroll-indicator, #tab-bar .dropshadow {
        display:none !important
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    #tab-bar {
        z-index:100
    }
    #tab-bar {
        background:none;
        box-shadow:none !important;
        overflow-x:visible !important;
        overflow-y:visible !important;
        height:0px
    }
    #tab-bar .tab, #tab-bar .scroll-indicator, #tab-bar .no-popover, #tab-bar .dropshadow {
        display:none !important
    }
}
@media screen and (min-width: 721px) and (max-width: 900px) {
    #tab-bar {
        z-index:100
    }
    #tab-bar .no-popover, #tab-bar .popover {
        display:none
    }
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
    #tab-bar .popover {
        display:none !important
    }
}
@media screen and (min-width: 1201px) {
    #tab-bar .popover {
        display:none !important
    }
}
.radio {
    position:relative;
    width:inherit;
    height:35px;
    margin-bottom:5px;
    min-width:100px;
    display:inline-block;
    background-color:white;
    text-align:center;
    -webkit-box-shadow:7px 3px 16px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:7px 3px 16px rgba(0, 0, 0, 0.4);
    box-shadow:7px 3px 16px rgba(0, 0, 0, 0.4)
}
.radio p {
    position:relative;
    margin:10px 15px
}
.radio.selected {
    box-shadow:none !important;
    background-color:#333;
    color:#fff
}
.popover .radio {
    display:block !important;
    color:#000;
    height:inherit;
    min-height:12px;
    padding:10px 0px 10px 7px;
    margin-bottom:0px;
    min-width:90%;
    font-size:14px;
    font-weight:normal;
    border-bottom:1px solid #ddd
}
.popover .radio.selected {
    color:#000;
    background-color:#ecebe6;
    border-bottom:none;
    -webkit-box-shadow:0 0 3px #666 inset !important;
    -moz-box-shadow:0 0 3px #666 inset !important;
    box-shadow:0 0 3px #666 inset !important
}
.popover .radio p {
    margin:0 10px 0 10px;
    padding:0px
}
.popover .radio.selected .radio-border-overlay-left {
    position:absolute;
    width:3px;
    height:94%;
    top:1px;
    left:0px;
    z-index:100;
    background:#ECEBE6
}
.popover .radio.selected .radio-border-overlay-right {
    position:absolute;
    width:3px;
    height:94%;
    top:1px;
    right:0px;
    z-index:100;
    background:#ECEBE6
}
@media screen and (max-width: 480px) {
    .radio {
        text-align:left;
        -webkit-box-shadow:none !important;
        -moz-box-shadow:none !important;
        box-shadow:none !important
    }
    .radio.selected {
        background-color:#000
    }
    .radio-bar .radio {
        display:none
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    .radio {
        text-align:left;
        -webkit-box-shadow:none !important;
        -moz-box-shadow:none !important;
        box-shadow:none !important
    }
    .radio.selected {
        background-color:#000
    }
    .radio-bar .radio {
        display:none
    }
}
.radio-bar {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    position:absolute;
    top:80px;
    right:20px;
    z-index:200;
    min-width:200px;
    display:block;
    font-size:15px
}
.popover .radio-bar {
    position:relative;
    top:0px;
    right:0px;
    z-index:300
}
.switch:before, .switch:after {
    content:" ";
    display:table
}
.switch:after {
    clear:both
}
.switch {
    position:relative;
    width:inherit;
    min-width:180px;
    background:#fff;
    font-size:14px;
    margin:5px 10px -5px
}
.switch:first-child {
    margin-top:10px
}
.switch:last-child {
    margin-bottom:5px
}
.switch p {
    float:left;
    margin:9px 0px
}
.switch-icon {
    width:30px;
    height:28px;
    float:left;
    margin-right:6px;
    background-repeat:no-repeat
}
.switch-icon.on {
    background-image:url("../assets/graffin/common/icon-checkbox-checked.png");
    background-size:30px 30px
}
.switch-icon.off {
    background-image:url("../assets/graffin/common/icon-checkbox-unchecked.png");
    background-size:30px 30px
}
.popover .switch {
    color:#000;
    padding:3px 0px 5px 0px;
    line-height:28px;
    min-height:20px;
    margin:0px;
    background:#fff;
    font-size:14px;
    font-weight:normal;
    display:block;
    border-bottom:1px solid #ddd
}
.popover .switch:first-child {
    margin-top:0px
}
.popover .switch-icon {
    right:0px;
    top:1px;
    margin-left:12px
}
.popover .switch p {
    top:0px;
    left:0px;
    margin:0px 38px 0px 0px
}
.switch-bar {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    position:absolute;
    top:145px;
    z-index:5500;
    max-width:280px;
    display:block;
    opacity:1 !important;
    left:inherit !important;
    right:20px !important;
    background:#fff;
    font-weight:normal
}
.popover .switch-bar {
    position:relative;
    top:0px;
    right:0px !important;
    width:100%;
    display:block !important;
    box-shadow:none
}
@media screen and (max-width: 480px) {
    .switch-bar {
        display:none
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    .switch-bar {
        display:none
    }
}
article.for-poi figcaption {
    font-size:0.8rem;
    color:#999;
    line-height:1em
}
#legend h2, article.for-poi h2, #credits h2, article.for-poi h3 {
    line-height:1.2em;
    margin:0 0 0.5em;
    max-width:25em
}
#legend h2, article.for-poi h2 {
    font-size:1.5rem
}
#credits h2, article.for-poi h3 {
    font-size:1rem
}
article.for-poi div {
    margin:0 0 0.2rem;
    line-height:1.35em;
    max-width:35rem
}
article.for-poi div:last-child {
    margin-bottom:0
}
article.for-poi div b {
    font-weight:bold;
    font-family:"SZSansRegular"
}
article.for-poi div strong {
    font-weight:normal;
    font-family:SZTextBold
}
#legend .popover {
    padding:5px 10px
}
#legend h2 {
    margin:0px;
    padding:0px
}
#legend p {
    margin:0px;
    font-size:14px;
    display:inline
}
#legend span.inline {
    display:inline-block;
    margin-right:15px
}
#legend .colorblock {
    display:inline-block;
    width:10px;
    height:10px;
    margin:0 2px 0 0;
    position:relative
}
#legend span img {
    max-width:15px;
    vertical-align:middle
}
#legend .additional {
    line-height:1.25em
}
.legend-hide {
    display:none !important
}
#legend .no-popover {
    width:100% !important;
    margin-left:0px !important;
    min-height:30px;
    padding:0px;
    cursor:default;
    position:absolute;
    z-index:5000;
    bottom:0px;
    background:#fff
}
.popover .inline {
    display:block !important
}
.popover .legendblock p {
    margin:0px
}
.legend_scrollbox {
    overflow:auto;
    max-width:94%;
    line-height:30px
}
.legend_scrollwrap {
    white-space:nowrap;
    margin-left:15px;
    margin-right:15px
}
.legendblock {
    display:inline-block;
    margin-right:10px;
    height:22px;
    padding-top:4px;
    font-size:14px
}
.legendblock img {
    display:inline;
    margin-right:7px
}
.legendblock p {
    display:inline;
    margin-top:5px
}
@media screen and (min-width: 721px) and (max-width: 900px) {
    #legend .popover {
        display:none
    }
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
    #legend .popover {
        display:none
    }
}
@media screen and (min-width: 1201px) {
    #legend .popover {
        display:none
    }
}
#credits .popover {
    padding:5px 10px
}
#credits h2 {
    margin:0px;
    padding:0px;
    font-weight:normal
}
#credits p {
    font-size:14px;
    line-height:17px;
    margin:0px
}
#credits p b {
    font-weight:normal;
    font-family:SZSansBold
}
#credits p strong {
    font-weight:normal;
    font-family:SZSansBold
}
#btn-open-close-credits {
    width:30px;
    height:30px;
    position:absolute;
    right:0px;
    bottom:0px;
    z-index:6000;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#fff;
    background-size:70%
}
.credits-hide {
    display:none !important
}
@media screen and (max-width: 480px) {
    #btn-open-close-credits {
        display:none
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    #btn-open-close-credits {
        display:none
    }
}
@media screen and (min-width: 721px) and (max-width: 900px) {
    #credits .popover {
        display:none
    }
    #credits .no-popover .popover {
        display:block;
        z-index:5500
    }
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
    #credits .popover {
        display:none
    }
    #credits .no-popover .popover {
        display:block;
        z-index:5500
    }
}
@media screen and (min-width: 1201px) {
    #credits .popover {
        display:none
    }
    #credits .no-popover .popover {
        display:block;
        z-index:5500
    }
}
#menubar {
    position:absolute;
    z-index:1000;
    background-color:#fff;
    width:100%;
    height:42px;
    display:none;
    font-size:0px;
    letter-spacing:0px
}
#menubar .left-align {
    position:absolute;
    height:100%;
    top:0px;
    left:0px
}
#menubar .right-align {
    position:absolute;
    height:100%;
    right:0px;
    top:0px
}
#menubar .node {
    position:relative;
    display:inline-block;
    width:48px;
    height:100%;
    border-right:1px solid #cdcdcd;
    border-top:none;
    border-bottom:none;
    margin:0px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:34px 34px
}
#menubar .right-align .node:first-child {
    border-left:1px solid #cdcdcd
}
.icon-prev {
    background-image:url("../assets/graffin/common/icon-arrow-l.png")
}
.icon-next {
    background-image:url("../assets/graffin/common/icon-arrow-r.png")
}
.icon-list {
    background-image:url("../assets/graffin/menu/icon-list.png")
}
.icon-info {
    background-image:url("../assets/graffin/menu/icon-info.png")
}
.icon-about {
    background-image:url("../assets/graffin/menu/icon-about.png");
    background-size:30px 30px !important
}
.icon-zoom-in {
    background-image:url("../assets/graffin/menu/icon-zoom-in.png")
}
.icon-zoom-out {
    background-image:url("../assets/graffin/menu/icon-zoom-out.png")
}
#menubar .right-align #btnZoomOut, #menubar .right-align #btnZoomIn {
    display:inline-block !important
}
.menuheader {
    display:block;
    width:100%;
    height:0px;
    position:relative;
    z-index:10;
    background:#fff
}
.placeholder-not-available {
    width:inherit;
    margin:8px;
    font-weight:normal;
    color:#999;
    position:relative
}
@media screen and (max-width: 480px) {
    .no-popover {
        display:none
    }
    #menubar {
        display:block
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    .no-popover {
        display:none
    }
    #menubar {
        display:block
    }
}
@media screen and (min-width: 721px) and (max-width: 900px) {
    .placeholder-not-available {
        display:none
    }
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
    .placeholder-not-available {
        display:none
    }
}
@media screen and (min-width: 1201px) {
    .placeholder-not-available {
        display:none
    }
}
html, body, .app-container {
    width:100%;
    height:100%
}
@media (orientation: landscape) {
    body.iOS7 {
        position:fixed;
        bottom:0;
        width:100%;
        height:672px !important
    }
}
.app-container {
    position:relative
}
.app-content {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    position:absolute;
    left:0;
    right:0;
    top:42px;
    bottom:0
}
@media screen and (min-width: 721px) {
    .app-content {
        top:50px
    }
    .app-content.full {
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0
    }
}
@media screen and (max-width: 480px) {
    .app-content {
        bottom:0 !important
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    .app-content {
        bottom:0 !important
    }
}
.gr-viewpane {
    overflow:auto
}
.gr-viewpane.zoomable {
    -webkit-content-zoom-limit-max:100%;
    -moz-content-zoom-limit-max:100%;
    -ms-content-zoom-limit-max:100%;
    -o-content-zoom-limit-max:100%;
    content-zoom-limit-max:100%
}
.gr-viewpane.non-native {
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
    -moz-overflow-scrolling:auto;
    -ms-overflow-scrolling:auto;
    -o-overflow-scrolling:auto;
    overflow-scrolling:auto;
    -webkit-overflow-style:none;
    -moz-overflow-style:none;
    -ms-overflow-style:none;
    -o-overflow-style:none;
    overflow-style:none;
    -webkit-touch-action:none;
    -moz-touch-action:none;
    -ms-touch-action:none;
    -o-touch-action:none;
    touch-action:none;
    -webkit-content-zooming:none;
    -moz-content-zooming:none;
    -ms-content-zooming:none;
    -o-content-zooming:none;
    content-zooming:none
}
.poi-content {
    text-align:center;
    letter-spacing:-0.31em;
    word-spacing:-0.43em
}
.poi-content:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.poi-content label {
    display:inline-block;
    vertical-align:middle;
    letter-spacing:normal;
    word-spacing:normal
}
.poi {
    position:absolute; z-index: 100;
}
.poi-content {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0
}
.poi-content label {
    padding:0 2em
}
.image-layer {
    position:absolute
}
.container.for-map {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%
}
.map {
    position:absolute
}
.map.empty {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0
}
.map-tile {
    display:block;
    -webkit-transform:scale(1.001, 1.001);
    -moz-transform:scale(1.001, 1.001);
    transform:scale(1.001, 1.001)
}
body.iOS7 .map-tile {
    -webkit-transform:translateZ(0)
}
.video-container {
    position:relative;
    height:0
}
.ratio-16x9.video-container {
    padding-bottom:56.25%
}
.ratio-4x3.video-container {
    padding-bottom:75%
}
.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
article.for-poi img {
    max-width:100%
}
article.for-poi strong {
    font-weight:normal;
    font-family:SZSansBold
}
article.for-poi figure {
    margin-bottom:.5em
}
article.for-poi video {
    z-index:11;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
article.for-poi .video-fallback {
    z-index:100;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:20px;
    background-color:#8c1e19;
    color:#fff
}
.popover.for-poi {
    padding:16px 20px 16px 16px;
    max-width:28em
}
.popover.for-poi button {
    position:absolute;
    right:8px;
    top:8px;
    background-color:transparent;
    border:none;
    width:26px;
    height:26px;
    color:#ccc;
    text-align:center;
    background-image:url("../assets/graffin/common/icon-close.png");
    background-repeat:no-repeat
}
#poi-popover {
    width:26em
}
@media screen and (max-width: 480px) {
    #poi-popover {
        width:15em
    }
}
@media screen and (min-width: 481px) and (max-width: 720px) {
    #poi-popover {
        width:20em
    }
}
.poi-popover-content {
    width:100%;
    height:100%
}