body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: 'railwayregular', Arial, sans-serif; color: #009; }
html { position: fixed; width: 100%; height: 100%; }

#checkVw { position: absolute; z-index: -100; top: -100px; width: 50vw; }
#NonSupportedMessage { padding: 10%; font-size: 1.5em; margin: 0;}


#holder { position: relative; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; border: #CCC solid 1px; }
#zoomer { position: absolute; z-index: 2; width: 3258px; height: 2376px; /* dimensions of image x 3, then + 300 (padding) */ }
#mapBounds { position: absolute;  }

#zoomer img { position: absolute; top: 150px; left: 150px;  }



.zoomBtnBox { fill:#CCCCCC; stroke:#000000; stroke-width:0.5; stroke-miterlimit:10; }
.plusMinus { fill:none;stroke:#000000; stroke-width:6;stroke-miterlimit:10; }


#mapSelector {  outline: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
  background: url('images/dropDownArrow.svg') no-repeat right center; background-size: 3.5vh;
  border: #CCCCCC solid 1px; padding: 0.5vh 1.5vh; font-family: 'railwayregular', sans-serif; color: transparent; text-shadow: 0 0 0 #009;  }
#mapSelector option { color: #009 }



#FacebookShare { display: block; position: absolute; background: url('images/facebookBtn.svg') no-repeat; background-size: contain; z-index: 1000; }
#FacebookShare span { display: none; }
#TwitterTweet { display: block; position: absolute; background: url('images/twitterBtn.svg') no-repeat; background-size: contain; z-index: 1000; }
#TwitterTweet span { display: none; }

#mapTitle { color: #FFF; margin: 0; padding: 1vh 2vh; position: absolute; background: rgba(0,0,153,0.8); z-index: 1000; opacity: 0; }

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    #zoomer { left: 50%; top: 50%;
    -webkit-transform: translate(-50,-45%);
    -moz-transform: translate(-50%,-45%);
    -o-transform: translate(-50%,-45%);
    -ms-transform: translate(-50%,-45%);
    transform: translate(-50%,-45%);
    background: rgba(0,255,0, 0)  }
    #mapBounds { left: 0; top: 18vh;  width: 100vw; height: 72vh; background: rgba(255,0,0, 0)  }

    header { position: relative; width: 100vw; height: 18vh;   top: 0; left: 0; z-index: 1200; background: rgba(255,255,255, 1) url('images/LondonIsOpenLogo.svg') no-repeat; background-size: contain; border-bottom: #CCCCCC solid 1px;  }
    header h1 { display: none; }
    #LondonIs { position: absolute; right: 3.2vh; bottom: 3vh;  }
    #LondonIs h2 { margin: 0; padding: 0 0 0.5vh 0; font-size: 4.3vw; font-family: 'railwayregular', sans-serif; }
    #mapSelector { font-size: 4.3vw; width: 40vw; }
    #mapTitle { padding: 1vh 2vh; font-size: 2.3vh; top: 18vh; width: 100vw; }
    #zoomUp, #zoomDown { width: 7vh; height: 7vh; position: absolute;  cursor: pointer; z-index: 1000 }
    #zoomUp {  right: 1.4vh; top: 24vh; }
    #zoomDown {  right: 1.4vh; top: 32vh; }
    #FacebookShare { width: 7vh; height: 7vh; top: 24vh; left: 1.1vh; }
    #TwitterTweet  { width: 7vh; height: 7vh; top: 32vh; left: 1.1vh;  }
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
    #zoomer { left: 50%; top: 50%;
    -webkit-transform: translate(-41.5%,-50%);
    -moz-transform: translate(-41.5%,-50%);
    -o-transform: translate(-41.5%,-50%);
    -ms-transform: translate(-41.5%,-50%);
    transform: translate(-41.5%,-50%);
    background: rgba(0,255,0, 0)  }
    #mapBounds { left: 24vw; top: 0;  width: 76vw; height: 100vh; background: rgba(255,0,0, 0)  }

    header { position: relative; width: 24vw; height: 100vh;  top: 0; left: 0; z-index: 1200; background: rgba(255,255,255,1) url('images/LondonIsOpenLogo.svg') no-repeat; background-size: 100%; border-right: #CCCCCC solid 1px;  }
    header h1 { display: none; }
    #LondonIs { position: absolute; left: 2vw; top: 20vw;  }
    #LondonIs h2 { margin: 0; padding: 0 0 0.5vh 0; font-size: 2.3vw; font-family: 'railwayregular', sans-serif; }
    #mapSelector { font-size: 2.3vw; width: 20vw; }
    select#mapSelector option { font-style: normal; font-size: 2.5vw !important; }
    #mapTitle { padding: 0.5vw 1vw 0.5vw 26vw; font-size: 2vw; top: 0; width: 74vw; }
    #zoomUp, #zoomDown { width: 6vw; height: 6vw; position: absolute;  cursor: pointer; z-index: 1000 }
    #zoomUp {  right: 1.4vh; top: 7vw; }
    #zoomDown {  right: 1.4vh; top: 14vw; }
    #FacebookShare { width: 5vw; height: 5vw; top: 29vw; left: 1.6vw; }
    #TwitterTweet  { width: 5vw; height: 5vw;  top: 29vw; left: 7vw;  }
}





@font-face {
    font-family: 'railwayregular';
    src: url('fonts/railway-webfont.woff2') format('woff2'),
         url('fonts/railway-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}