.leaflet-popup-content{
	position:relative;
	z-index:2;
}

/* ========================= Main Body ======================================  */	
  body { margin:0; padding:0; font-family: Open Sans, Tahoma }
  #map { position:absolute; top:71; bottom:0; width:100%; z-index:100; }
 
	 #banner { 
	 position:absolute; top:0; 
	 height:70; 
	 width:100%;
	 background:#175552 }

	 .logo{
		background-color: #fff;
		background-image: url("../images/logo-cifor.png");
		background-repeat: no-repeat;
		float: left;
		height: 75px;
		margin-left: 30px;
		position: relative;
		width: 60px;
		z-index: 101;
		border-bottom-right-radius:3px;
		border-bottom-left-radius:3px; 
	 }
	 
	 .topbanner{
		color:#fff;
		margin-left:20px;
		float:left;
		padding-top:0;
		font-size:20px;
		position:relative;
		height:90px;
	 }
	 .maptitle{
		font-size: 22px;
		margin-bottom: 0;
		margin-top: 8px;
	 }
	 
	 .beta
	 {
		border: 1px solid #8ac831;
		border-radius: 3px;
		color: #8ac831;
		float: left;
		font-size: 11px;
		height: 19px;
		margin-top: 0;
		padding: 0 0 3px 5px;
		position: relative;
		width: 37px;
		z-index: 1005;
	 }
	 
	 .menu-ui {
  background:#fff;
/*  opacity: 0.9;
  filter: alpha(opacity=90); */
  z-index:105;
  padding:0;
  width:175px;
  height:480px;
  position:absolute;
  top:145px;
  left:0;
  }	 
	 
.menu-ui  h1.judul{
	background: none repeat scroll 0 0 #525252;
	color: #eaeaea;
	float: left;
	font-size: 0.8em;
	height: 33px;
	margin-top: 0;
	padding-left: 8px;
	padding-right: 0;
	padding-top: 10px;
	position: relative;
	width: 175px;
	z-index: 100;
}	 
 
span.focus{
	float:left;
	font-size:0.7em;
	padding-left:10px;
	padding-top:10px;
	color:#4f4f4f;
	font-weight:100;
	text-transform:uppercase;
} 

.menu-ui   ul.list-ui{
	float: left;
	height: 100%;
	margin-top: 0;
	padding-left: 0;
	padding-top: 7px;
	width:100%;
  }

 .menu-ui   ul li{
	border: medium none;
	list-style: outside none none;
	text-decoration: none;
	height: 53px;
	float:left;
	width:100%;
 }
 

 
  .menu-ui div.icon {
  /*  border: 3px solid #666;
	border-radius: 21px;
	color: #fff; */
	background-repeat: no-repeat;
	display: block;
	float: left;
	font-family: Tahoma;
	font-size: 13px;
	height: 50px;
	margin-left: 15px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 100%;
/*	height: 36px;	
	text-transform: uppercase;	
	width: 36px; */
    }
	
	
	
	#allin.icon {
		background-image:url("../images/allt-i.png");
		color:#000;
	}
	
	#bio.icon {
		background-image:url("../images/bio-i.png");
	}

 .menu-ui a{
	text-decoration:none;
	color:#4f4f4f;	
	height:53px;
 }
  	
    .menu-ui a:first-child {
   /*   border-radius:2px 2px 0 0; */
	height:53px;
      }
    .menu-ui a:last-child {
     /* border:none;
      border-radius:0 0 2px 2px; 
	  padding-top:10px;*/
/*	  height:50px; */
	  
      }
    .menu-ui a:hover {
      border-color:#d43935;
      color:#333;
	  font-weight:100;
      }
    .menu-ui a.active,
    .menu-ui a.active:hover {
      border-color:#66ab52;
      color:#66ab52;
      }
	
	.btn-default{
		color:#333;
	}
	
	#agri.icon {
		background-image:url("../images/agriculturet-i.png");
	}
	.menu-ui a:hover #agri.icon {
		background-image:url("../images/agriculturet.png");
	}	
	.menu-ui a.active  #agri.icon {
		background-image:url("../images/agriculturet.png");
	}
	
	.menu-ui a:hover #allin.icon {
		background-image:url("../images/allt.png");
	}
	
	.menu-ui a.active #allin.icon {
		background-image:url("../images/allt.png");
	}
	
	.menu-ui a:hover #bio.icon {
		background-image:url("../images/bio.png");
	}	

	.menu-ui a.active #bio.icon {
		background-image:url("../images/bio.png");
	}	

	#agri.icon {
		background-image:url("../images/agriculturet-i.png");
	}
	.menu-ui a:hover #agri.icon {
		background-image:url("../images/agriculturet.png");
	}	
	.menu-ui a.active  #agri.icon {
		background-image:url("../images/agriculturet.png");
	}
	
	#forests.icon {
		background-image:url("../images/forests-i.png");
	}
	.menu-ui a:hover #forests.icon {
		background-image:url("../images/forests.png");
	}	
	.menu-ui a.active  #forests.icon {
		background-image:url("../images/forests.png");
	}
	
	#soil.icon {
		background-image:url("../images/soil-i.png");
	}
	.menu-ui a:hover #soil.icon {
		background-image:url("../images/soil.png");
	}	
	.menu-ui a.active  #soil.icon {
		background-image:url("../images/soil.png");
	}
	
	#water.icon {
		background-image:url("../images/water-i.png");
	}
	.menu-ui a:hover #water.icon {
		background-image:url("../images/water.png");
	}	
	.menu-ui a.active  #water.icon {
		background-image:url("../images/water.png");
	}
	
	#landrights.icon {
		background-image:url("../images/lr-i.png");
	}
	.menu-ui a:hover #landrights.icon {
		background-image:url("../images/lr.png");
	}	
	.menu-ui a.active  #landrights.icon {
		background-image:url("../images/lr.png");
	}
	
	#livelihoods.icon {
		background-image:url("../images/susli-i.png");
	}
	.menu-ui a:hover #livelihoods.icon {
		background-image:url("../images/susli.png");
	}	
	.menu-ui a.active  #livelihoods.icon {
		background-image:url("../images/susli.png");
	}
	
	.menu-ui a.active .focus {
      border-color:#66ab52;
      color:#66ab52;
      }	
	 
	 .menu-ui a.active .focus:hover{
		color: #000;
	 }

/*
	  .menu-top {
	  background:#5e8827;
	  opacity: 0.7;
	  filter: alpha(opacity=70);
	  position:absolute;
	  top:0px;left:50px;
	  z-index:1;
	  }
	 .menu-top a {
		font-size:12px;
		float:left;
		font-family:Open Sans, Tahoma;
		color:#ffffff;
		display:block;
		margin:0;padding:0;
		padding:10px;
		text-decoration:none;
		border-bottom:1px solid #5e8827;
		text-align:center;	
		} 
*/
	#loader {
		position:absolute; top:0; bottom:0; width:100%;
		font-family:Open Sans, Tahoma;
		background:rgba(0, 0, 0, 1);
		transition:background 1s ease-out;
		-webkit-transition:background 1s ease-out;
	}
	#loader.done {
		background:rgba(0, 0, 0, 0);
	}
	#loader.hide {
		display:none;
	}
	#loader .message {
		position:absolute;
		color:#FFFFFF;
		left:50%;
		top:50%;
	}	
	
	.modal-body{
		color:#666;
	}
	
	.modal-header{
		color:#333;
	}
	
/* ================================= Typeface =========================================== */	

div.marker-title{font-size:15px;font-weight:600;color:#333;margin-bottom:0;line-height:18px;}
h1.projectname{color: #333;
font-size: 16px;
font-weight: 600;
line-height: 19px;
margin-bottom: 0;
padding-bottom: 0;}
h1.projectname1{padding-top:7px;padding-bottom:3px;margin-bottom:0;line-height:17px;}
h2.projectname{color: #555;font-size: 12px;font-weight: 100;line-height: 17px;padding-top: 0;text-transform: uppercase;}
h2.projectname#org {color:#99bac2;font-size:13px;}
p.projectname{font-size:11px;color:#888;text-transform:uppercase;margin-bottom:-8px;padding:0}
p.projectdetail{font-size:11px;color:#444;text-transform:none;margin-bottom:3px;line-height:13px;padding:0}
p.projectdetail#timeframe{font-weight:600}
p.projectdetail#lastitem{padding-bottom:20px;margin-top:12px;}


/* ============================== Override mapbox.css ================================== */

.leaflet-popup-content-wrapper, .map-legends, .map-tooltip {
  height: 310px;
}

.tutup{
	position:fixed;
	top:0;
	right:0;
	height:15;
	width:15;
	background-color:#eaeaea;
	background-image:url("../images/close-button.jpg");
	background-repeat:no-repeat;
}

.leaflet-popup-content {
	overflow-y:scroll; 
	overflow-y: -moz-scrollbars-vertical;
	height:290px;
	 /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
	 -webkit-border-radius: 10px; */
	 border-radius: 3px;
	 margin-top:15px;
}

/* ========================= Extruder =========================================	*/
	
  .wrapper{
            position:relative;
            font-family:Arial, Helvetica, sans-serif;
            padding-top:90px;
            padding-left:50px;
            width:80%;
            margin:auto
        }
        .wrapper .text{
            font-family:Arial, Helvetica, sans-serif;
            padding-top:50px;
        }
        .wrapper h1{
            font-family:Arial, Helvetica, sans-serif;
            font-size:26px;
        }
        .longText{
            margin-top:20px;
            width:600px;
            font:18px/24px Arial, Helvetica, sans-serif;
            color:gray;
        }
        span.btn{
            padding:10px;
            display:inline-block;
            cursor:pointer;
            font:12px/14px Arial, Helvetica, sans-serif;
            color:#aaa;
            background-color:#eee;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            -moz-box-shadow:#999 2px 0px 3px;
            -webkit-box-shadow:#999 2px 0px 3px;
        }
        span.btn:hover{
            background-color:#000;
        }
        input{
            padding:10px;
            border:none;
            -moz-box-shadow:#999 2px 0px 3px;
            -webkit-box-shadow:#999 2px 0px 3px;
        }

        /*custom style for extruder*/

        .extruder.left.a .flap{
            font-size:18px;
            color:white;
            top:0;
            padding:10px 0 10px 10px;
            background:#772B14;
            width:30px;
            position:absolute;
            right:0;
            -moz-border-radius:0 10px 10px 0;
            -webkit-border-top-right-radius:10px;
            -webkit-border-bottom-right-radius:10px;
            -moz-box-shadow:#666 2px 0px 3px;
            -webkit-box-shadow:#666 2px 0px 3px;
        }

        .extruder.left.a .content{
            border-right:3px solid #772B14;
            background:rgba(255,255,255,.95);
        }

        .extruder.top .optionsPanel .panelVoice a:hover{
            color:#fff;
            background: url("elements/black_op_30.png");
            border-bottom:1px solid #000;
        }
        .extruder.top .optionsPanel .panelVoice a{
            border-bottom:1px solid #000;
        }

        .extruder.left.a .flap .flapLabel{
            background:#772B14;
        }
            /*

                    .extruder.top{
                        margin-left:-200px!important;
                    }
            */	
	

  
  	  
/*added style*/
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable {
	position: fixed;
	top: 40% !important;
	transform: translate(0px, -40%);
	-moz-transform: translate(0px, -40%);
	-webkit-transform: translate(0px, -40%);
	-o-transform: translate(0px, -40%);
	-ms-transform: translate(0px, -40%);
}
.modal-dialog {
	position: fixed !important;
	top: 40%;
	left: 0;right: 0;margin: auto;
	transform: translate(0px, -40%) !important;
	-moz-transform: translate(0px, -40%) !important;
	-webkit-transform: translate(0px, -40%) !important;
	-o-transform: translate(0px, -40%) !important;
	-ms-transform: translate(0px, -40%) !important;
}
.modal-content {
	margin-top: 0px !important;
}
/*-----------*/