/* css */
html {
     /*height: 100%;*/
     /*position: fixed;*/
     width: 100%;
     padding:0;
}
body{
	overflow: auto;
	/*position: fixed;*/
	height:100%;
    max-height:100%;
	width:100%;
    padding:0;
}

.leaflet-container .leaflet-control-attribution img {
    width: 50px;
    margin-bottom: 3px;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-attribution a {
    background:none;
    color:#fff;
}

#App{
	/*height:100%;*/
	width:100%;
	overflow:auto;
	padding:0;
    margin:0;
    position:relative;
    -webkit-overflow-scrolling:touch;
}
#MapPane{
    height:100%;
    width:100%;
    overflow:hidden;
    padding:0;
    margin:0;
}
#MapRow{
    padding:0;
}
#SliderFromBelow{
    position:absolute;
    bottom:0;
    width:100%;
    z-index:500;
    /*max-height: 100%;*/
}

#OperationPane {
    position:relative;
    background-color:#f6eee5; /*rgba(246 238 229 0.1);*/    
    box-shadow: 0px -25px 4px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px -25px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px -25px 4px 0px rgba(0, 0, 0, 0.2);
    z-index:500;
}
#OperationPane .logoContainer{
    /*float:left;*/
    position:absolute;
    height:80px;
    padding-top: 10px;
}
#OperationPane .logoContainer .logoWrapper{
    height:60px;
    width:100%;
    border-right:1px solid #C2C2C2;
    position:relative;
    padding-top: 3px;
    color: #5B3F1F;
}
#OperationPane .logoContainer .logoWrapper h4{
    font-weight: bold;
}
#OperationPane .logoContainer .logoWrapper img{
    position:absolute;
    top:0;
    bottom:0;
    left:10px;
    margin:auto;
    width:67px;
}
#OperationPane .logoContainer .lgoWrapper img.spNone{
    width:67px;
    height:66px;
}
#OperationPane .logoContainer .lgoWrapper img.pcNone{
    width:67px;
    height:66px;
}
#OperationPane .operationButtonContainer{
    position:relative;
    width:100%;
    height:80px;
    padding-top:5px;
    padding-bottom:5px;
}
#OperationPane .operationButtonContainer .buttonsWrapper{
    width:300px;
    position:absolute;
    top:15px;
}

#OperationPane .operationButtonContainer .buttonsWrapper .buttonCell{
    float:left;
    text-align:center;
    padding:0;
    font-size:12px;
    width:90px;
    margin-right:5px;
    margin-left:5px;
}
#MapListToggleBtn img,
#MapListToggleBtnSP img{
    margin:-2px 5px 0px 0px;
    width:19px;
}

img.closeBtn{
    cursor:pointer;
    width:32px;
}

button.customBtn,
a.customBtn{
    height:44px;
    border-radius: 22px;
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.32);

}
button.customBtn:focus,
button.customBtn:active:focus,
button.customBtn.active:focus,
button.customBtn.focus,
button.customBtn:active.focus,
button.customBtn.active.focus{
    outline:none;
}
#MapInfoBtn{
    background-color:#fff;
    width:191px;
}
#MapListToggleBtn{
    position:absolute;
    display:block;
    background-color:#424242;
    color:#fff;
    right:10px;
    top:20px;
    width:236;
}
#MapListToggleBtnSP{
    background-color:#424242;
    color:#fff;
    cursor:pointer;
    height:44px;
    width:100%;
    position:relative;
    z-index:9999;
}
#MapListToggleBtnSP .centerPlacer{
    position:absolute;
    margin:auto;
    width:100%;
    height:17px;
    font-size:16px;
    top:0;
    bottom:0;
    text-align:center;
}
#JumpToEditorSiteBtn{    
    background-color:#f5a623;
    color:#fff;
    margin-top:20px;
    padding-top:15px;
}
#MapListUpperBorder{
    background-color:#424242;
    color:#fff;
    width:100%;    
    height:8px;
    margin-bottom:20px;
}
#MapListPane{
    background-color:#fff;
    min-height: 90%;
    position: relative;
}
#MapListPane .paneHead,
#MapInfoPane .paneHead{
    font-size:16px;
    margin:20px 0px 20px 0px;
}
#MapListPane .mapListItem{
    margin-bottom:20px;
}
#MapListPane .thumbnail{
    position: relative;
}
/*#MapListPane .mapListItem img{
    position: absolute;
}
*/
#MapListPane .mapListItem .mapTitleContainer{
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 0px 4px 4px;
}
#MapListPane .mapListItem .mapTitleLink{
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px 10px;
    width: 100%;
}
#MapListPane .mapListItem .mapTitleLink .mapTitleText {
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 0px;
}
#MapInfoPane .category{
    font-size:12px;
    color:#8FB200;
}

#MapInfoPane{
    padding-bottom:20px;
}
#MapInfoPane .title{
    font-size:16px;
}
#MapInfoPane .description{
    font-size:14px;
}

#MapInfoPane .explanation{
    text-align: center;
}
#MapInfoPane .explanationHead{
    margin-top:50px;
    margin-bottom:30px;
    font-size:16px;
    font-weight:bold;
}
#MapInfoPane  .explanationParagraph{
    margin-bottom:30px;
    /*font-size:16px;*/
}
#MapInfoPane .movieContainer{
    width:100%;
    height:230px;
}


#TopRightButtonContainer .btn_account{
  margin-right:5px;
  background-color:#fff;
  border-color:#9fa0a0;

}

#MapViewerContainer{
	/*height:0;*/
}
#MapViewerContainer.h_short{
	padding-right:0;
}
.v_full{
	height:100%;
}
.v_short{
	height:40%;
}
#MapContainer{
	width:100%;
	height:100%;
}
#LLMapContainer{
	width:100%;
	height:100%;
}
.lmContentContainer{
	overflow:hidden;
	padding-left:0px;
	padding-right:0px;
	background-color:#fff;
}
.lmTitle{
	/*padding:10 10 0 10;*/
    position:relative;
	height:60px;
	color:#fff;
    width:100%;
	font-weight: bold;
	background-color:#00405D;
}
.lmTitle > .textWrapper{
    position:absolute;
    width:100%;
    padding-left:10px;
    padding-right:50px;
}

.lmTitle > .closeBtn{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}

#LmContentContainerH .lmTitle  > .closeBtn{
    right:25px;
}
#LmContentContainerV .lmTitle  > .closeBtn{
    right:10px;
}

.lmContentWrapper{
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}
#LmContentWrapperH{
    margin-right:15px;
}
.lmContent{
	width:100%;
	height:100%;
	border:none;
}
#TopLeftButtonsContainer{
	position:absolute;
	top:5px;
	left:27px;
	font-size:20px;
	padding-top:5px;
	z-index:499;
}
#TopLeftButtonsContainer .button{
	cursor:pointer;
}

#TopRightButtonContainer{
	position:absolute;
	top:5px;
	right:5px;
	font-size:20px;
	padding-right:10px;
	padding-top:5px;
	z-index:499;
}
#TopRightButtonContainer .button{
	cursor:pointer;
}
img.fbLogo {
	width:20px;
	height:20px;
}
#StaticMapContainer{
	overflow:hidden;
	width:100%;
	height:100%;
}
#StaticMapLocIcon{
	position:absolute;
	top:100px;
	left:100px;
}
#LeftBottomButtonsContainer{
	position:absolute;
	bottom:30px;
	left:27px;
	z-index:999;
}
#LeftBottomButtonsContainer a:nth-child(n+2){
	margin-left:10px;
}
#RightBottomButtonsContainer{
	position:absolute;
	bottom:30px;
	right:25px;
	z-index:999;
}
.operationButtonIcon{
	width:44px;
}

#SharePannel{
	background-color : rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:10000;
}
#SharePannel > .pannel{
	position:absolute;
	width:300px;
	left:0;
	right:0;
	top:30px;
	margin:auto;
	z-index:10001;	
	background-color:#fff;
}
#SharePannel .list-group .list-group-item{
	border:none;
	border-radius: 0;
}
#SharePannel > .pannel > .list-group > .list-group-item > .list-group{
	background-color: red;
	margin-bottom:100;
}

#MessageBalloonSelector{
	position:fixed;
	height:105px;
	max-height:158px;
	width:100%;
	background-color:#e4e4e4;
	top:0;
	left:0;
	z-index:9999;
}

#MessageBalloonSelector .wrapperContainer{
	width:100%;
	overflow-x:scroll;
	overflow-y:hidden;
}

#MessageBalloonSelector .wrapper{
	width:765px;
}

.balloon.nm{
    width:135px;
    height:78px;
}
.balloon.nl{
    width:254px;
    height:110px;
}
.balloon.rm{
    width:147px;
    height:103px;
}
.balloon.rl{
    width:292px;
    height:191px;
}

/*.balloon-sample.nm{
    width:86px;
}
.balloon-sample.nl{
    width:167px;
}
.balloon-sample.rm{
    width:98px;
}
.balloon-sample.rl{
    width:194px;
}
*/
img.balloon-sample{
    height:60px;
}

#MessageBalloonSelector li  a{
    height:75px;
    padding-bottom:0px;
    border-radius:0;
}
#MessageBalloonSelector li.active a{
	background-color:#4f4f4f;
}
/*#MessageBalloonSelector li a.nm{
     padding-top:38px;
}
#MessageBalloonSelector li a.nl{
     padding-top:27px;
}
#MessageBalloonSelector li a.rm{
     padding-top:29px;
}
#MessageBalloonSelector li a.rl{
     padding-top:0px;
}
*/

#MessageBalloonSelector .sampleText{
	position: absolute;
	color:#000;
	font-size:13px;
}
#MessageBalloonSelector .sampleText.nm,
#MessageBalloonSelector .sampleText.nl{
    top:20px;
    left:20px;
    width:75px;
}
#MessageBalloonSelector .sampleText.rm,
#MessageBalloonSelector .sampleText.rl{
    top:25px;
    left:25px;
    width:75px;
}
/*#MessageBalloonSelector .sampleText.nm{
	top:43px;
	left:20px;
	width:75px;
}
#MessageBalloonSelector .sampleText.nl{
	top:34px;
	left:21px;
	width:155px;
}
#MessageBalloonSelector .sampleText.rm{
	top:42px;
	left:25px;
	width:78px;
}
#MessageBalloonSelector .sampleText.rl{
	top:35px;
	left:40px;
	width:150px;
}
*/
#BalloonInputContainer{
	position:absolute;
	left:0;
	right:0;
	bottom:50%;
	margin:auto;
	z-index:9999;
	padding:0;
}

#BalloonInputContainer textarea{
	position:absolute;
	resize: none;
	font-size:18px;
	border:none;
	background:none;
}
#BalloonInputContainer textarea.nm{
	top:4px;
	left:5px;
	width:122px;	
	height:55px;
}
#BalloonInputContainer textarea.nl{
	top:4px;
	left:5px;
	width:240px;	
	height:80px;

}
#BalloonInputContainer textarea.rm{
	top:21px;
	left:10px;
    width:120px; 
    height:50px;
}
#BalloonInputContainer textarea.rl{
	top:55px;
	left:35px;
    width:234px;
    height:83px;
}

#BalloonButtonContainer{
	position:absolute;
	width:254px;
	left:0;
	right:0;
	margin:auto;
	bottom:120px;
	z-index:9999;
    background-color:#fff;
}



.messageBalloonMarker{
	padding:0;
}
.messageBalloonMarker .balloonText{
	position: absolute;
	color:#000;
	font-size:18px;
}
.messageBalloonMarker .balloonText.nm{
    top:6px;
    left:7px;
    width:120px; 
    height:55px;
}
.messageBalloonMarker .balloonText.nl{
    top:6px;
    left:7px;
    width:240px;    
    height:80px;

}
.messageBalloonMarker .balloonText.rm{
    top:20px;
    left:12px;
    width:120px; 
    height:50px;
}
.messageBalloonMarker .balloonText.rl{
    top:50px;
    left:35px;
    width:230px;
    height:83px;
}

#BalloonMenu {
	position:absolute;
	bottom:20px;
	width:300px;
	left:0;
	right:0;
	margin:auto;
	z-index:9999;
    background-color:#fff;
}

#BalloonMenu .list-group-item{
	border:none;
}

.shareButtonsWrapper{
    width:100%;
}
.shareButtonsWrapper button{
    display:block;
    width:90%;
    margin:10px auto;
    border-radius: 30px;
}
.shareButtonsWrapper button.cancel{
    background-color:#dbdbdb;
}
.shareButtonsWrapper button.ok{
    background-color:#f6a623;
}

.mainNav{
	z-index: 99999;
}
.has-menu-above{
  margin-top:50px;
}

.lockScreen{
	background-color : rgba(0,0,0,0.5);
	position:fixed;
	top:0px;
	left:0;
	bottom:0;
	right:0;
	z-index:10000;
	overflow: hidden;
	width:100%;
}
#OtherThanMapMenu{
	background:none;
	/*background-color : red;*/
	position:fixed;
	top:0px;
	right:0;
	bottom:0;
	width:20%;
}
#MapMenu{
	position:absolute;
	top:0;
	right:100%;
	width:80%;
	height:100%;
	background-color:#fff;
}
#MapMenu .list-group-item{
	border:none;
}
#MapMenu #MapData{
	margin:20 20 20 20;
}

.mapOppIcon *{
  background-color:#fff;
  margin:0;
  font-size:40px;
  color:#3394d2;
}




.navbar-default .navbar-toggle .icon-bar.chizubruari{
  height:3px;
}
.navbar-default .navbar-toggle .icon-bar.the_bg_blue{
  background-color:#50acb1;
}
.navbar-default .navbar-toggle .icon-bar.the_bg_orange{
  background-color:#d46316;
}
.navbar-default .navbar-toggle .icon-bar.the_bg_green{
  background-color:#a8c027;
}

.navbar-toggle.chizuburari {
  margin-bottom:0;
  border:none;
}
.navbar-default .navbar-toggle.chizuburari:focus {
  background-color: none;
}

.leaflet-top .leaflet-control {
    margin-top: 50px;
    }
.leaflet-control-zoom {
    border: 3px solid #3394d2;
    box-shadow:none;
    }
.leaflet-control-zoom .leaflet-control-zoom-in,
.leaflet-control-zoom .leaflet-control-zoom-out,
a.leaflet-control-zoom-in:hover,
a.leaflet-control-zoom-out:hover,
a.leaflet-control-zoom-in:focus,
a.leaflet-control-zoom-out:focus{
    border:none;
    color: #3394d2;
}

.leaflet-touch .leaflet-control-zoom{
    border: 3px solid #3394d2;
    box-shadow:none;

}

/* media queries */
@media only screen and  (max-width: 480px) {
    #OperationPane .operationButtonContainer .buttonsWrapper{
        width: 220px;
    }
    #OperationPane .operationButtonContainer .buttonsWrapper .buttonCell{
        width: 60px;
    }
    #MapListPane .mapListItem .mapTitleLink .mapTitleText {
        font-size: 14px;
    }
}
@media only screen and  (max-width: 767px) {
    .spNone{
        display:none !important;
    }
    #OperationPane .logoContainer{
        width:160px;
        padding-left: auto;
        padding-right: auto;
        text-align: center;
    }
    #OperationPane .operationButtonContainer .buttonsWrapper{
        right:0;
    }
    #JumpToEditorSiteBtn{
        width:100%;
    }
    #MapListPane .mapListItem .mapTitleLink .mapTitleText {
        font-size: 14px;
    }
}
@media only screen and  (min-width: 768px) {
    .pcNone{
        display:none !important;
    }    
    #OperationPane .logoContainer{
        width:160px;
        padding-left: auto;
        padding-right: auto;
        text-align: center;
    }
    #OperationPane .operationButtonContainer .buttonsWrapper{
        right:0;
        left:0;
        margin:0 auto;
    }
    #JumpToEditorSiteBtn{
        display:block;
        width:340px;
        margin:0 auto;
    }    
}