@font-face { 
	font-family: Yanone Kaffeesatz; 
	src: url('../fonts/Roboto-Regular.eot');
    src: local("Yanone Kaffeesatz"), url('../fonts/Roboto-Regular.ttf'); 
} 

*{
	padding:0;
	margin:0;
	font-size:11px;

}

html {
	height: 100%;

}

body{
	font-family:Yanone Kaffeesatz,Arial;
	height: 100%;
	position:relative;
    background: gray;
}

h2{
	font:14px "Yanone Kaffeesatz";
	height:20px;
	margin-bottom:5px;
	display:inline-block;
	font-weight:normal;
}

ul{
	list-style:none;
}

#panel{
	position:absolute;
	bottom:0;
    top:0;
	left:0;
	/*background-color:#fff;*/
	color:#333;
	margin-left: 100%;
	z-index:1;

}

#sortbar{
	display:inline-block;
	margin-bottom:10px;
}

p{
	margin-bottom:10px;
}

.ratatengah{
	text-align:center;
}
.ratakiri{
	text-align:left;
}
.ratakanan{
	text-align:right;
}



.center{
	text-align:center;
}
.kiri{
	float:left;
}

.kanan{
	float:right;
	margin-left:5px;
}

.tebal{
	font-weight:bold;
}

.miring{

}


#wrap{
	margin:0px auto 0px auto;
	padding-top:10px;
	
}

#wrapper{
	width:100%;
    background: transparent;
	margin:0 auto 10px auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	border-bottom:1px solid #d3d3d3;
}

#header{
	height:150px;
	width:940px;
	margin:0 auto;
}
#judul{
	height:45px;
	width:570px;
/*	border:1px solid #fff;*/
	float:left;
	margin-top:100px;
}
h1{
font-family:Times New Roman ;
font-size:30px;
color:white;
padding-top:10px;
}


#menuwrapper{
	width:940px;
	margin:0 auto;
	background: #f3f3f3;
	
	color: #3d7489;	
	height:35px;
	/*border-top:1px solid #d3d3d3;*/
	/*border-bottom:1px solid #d3d3d3;*/
	/*
		box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	-webkit-box-shadow: 0px 0px 4px #888;
       -moz-box-shadow: 0px 0px 4px #888;
            box-shadow: 0px 0px 4px #888;
	*/
}



#menu{
	width:940px;
	background:#fff;
	position:relative;
}

#logo{
	width:250px;
	display:inline-block;
	height:35px;
	float:left;
	
}

/*
#wrapper{
	width:100%;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	
	-moz-box-shadow: 0 0 3px #f3f3f3;
	-webkit-box-shadow: 0 0 3px#f3f3f3;
	box-shadow: 0 0 3px #f3f3f3;
}

*/
tr:nth-child(even) {
  background-color: #F3F3FC;
}


tr:nth-child(odd) {
  background-color: white;
}
#content{
	margin:auto 20px;
	width:940px;
	height:600px;
	/*
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	*/
}

.tab_container {
	width:940px;
	border-top:none;
	min-height:590px;
	margin:1px auto;

}


.tab_content {
	padding: 10px;
	font-size: 1.2em;
	height:auto;
}

#detail{
	border:1px solid #d3d3d3;
    z-index: 1;
}

#detail h2{
	padding:10px 10px 5px 10px;
	font:14px "Yanone Kaffeesatz";
	height:20px;
	display: block;
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);

border-bottom:1px solid #d3d3d3;
}

#detailcontent{
	padding:5px;
	height:100%;
	z-index:3;
    position: relative;
    top: 0;
    right: 0;
    margin-left: 0px;
}

#layer{
	margin-bottom:10px;
	margin-right:10px;
	width:230px;
	height:550px;
	border-top:none;
	float:left;
}

#layer h2{
	padding:5px 15px 5px 5px;
	display: block;
	font:14px "Yanone Kaffeesatz";
	/*
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
	*/

}

#layercontent{ 
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	

}

#layercontent ul{ 
	border:1px solid #d3d3d3;
}

#layercontent ul ul{ 
	border:none;
}

#legenda{ 
	border-bottom:1px solid #d3d3d3;
	margin-bottom:10px;
    background: #1d1f1d;
    padding: 10;
    opacity: 0.6;
}
#legenda label{ 
	cursor:pointer;
}
/*
#layercontent ul li{ 
	background: #fff;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	font:16px "Yanone Kaffeesatz";
	border-bottom:1px solid #d3d3d3;
	
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	
	

}


#layercontent ul li label{ 
			
	font:16px "Yanone Kaffeesatz";
	letter-spacing:2px;
	width:150px;
	padding:5px 6px;
	cursor:pointer;
}

*/
#statistik li {

	padding:2px;

}

#statistik li label{
	display:inline-block;
	font:12px "Yanone Kaffeesatz";
	width:155px;
	padding:5px;
}

#statistik li span{
	display:inline-block;
	padding:2px;
	font:14px "Yanone Kaffeesatz";
	background:#f3f3f3;
	width:30px;
	text-align:right;
	margin-left:20px;
}

#divcari{
	margin-bottom:10px;
}

#divcari input[type=text]{
	border:1px solid #d3d3d3;
	padding:8px;
	width:212px;
	font-family:"Roboto";
}

input[type=button]#btncari{
	float:right;
	width:32px;
	height:32px;
	background:url(../img/cari.png)no-repeat center center;
	cursor:pointer;
	border:1px solid #d3d3d3;
	border-left:none;
}

/*
#layercontent ul li:hover{ 
	background: #f2f2f2;
}



#layercontent label img{ 
	margin-right:5px;
}

#layercontent input[type=checkbox]{ 	
	margin:10px;
}

#layercontent span{ 	
	margin:3px;
	font-size:14px;
	padding:3px;
	background:#d3d3d3;
	display:inline-block;
	text-align:right;
	border-radius:2px;
	width:22px;
}
*/


#layercontent .kotak{
	width:12px;
	height:12px;
	display:inline-block;
}

.merah{
	background:salmon;
}
.hijau{
	background:limegreen;
}
.biru{
	background:steelblue;
}



#map{
	width:100%;
	height:700px;
}

#legend {
	display: none;
	color: #000;
    background: white;
}
#legend h2 {
	display: none;
	padding:7px 15px 7px 15px;
	display: block;
	background: transparent;
	color: #3d7489;
	font:14px bold;
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
	margin-bottom:10px;
}

#legend ul li{
	padding:0 10px;
	margin:10px 10px;
	display: block;
	background: transparent;
}


#footer{
	padding:8px;
	text-align:center;
    background: black;
}



input[type=text],input[type=password]{
	padding:2px;
	font-size:11px;
}


input[type=button],input[type=submit]{
	font:Bold 11px "Arial";
}


table {
	margin-bottom:10px;
	border-bottom:1px solid #d9d9d9;
	border-left:1px solid #d9d9d9;
	background:#fefefe;
	border-spacing: 0;
	width:100%;
	font:14px "Yanone Kaffeesatz";
    padding: 15px;
    margin-top: 30px;
}

th, td {
	padding:15px;
}


th {
	text-align:left;
	padding:8px 5px;
	font-weight:normal;
}

td {
	border-top:1px solid #d9d9d9;
	border-right:1px solid #d9d9d9;
    padding:15px;
}

tr.odd-row td {
	background:#f6f6f6;
}

td.last {
	border-right:none;
}

td .highlight{
	background: #fafafa;
}

tr.odd-row td {
	background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}

th {
	background:#F3F3F3;
	border-top:1px solid #d9d9d9;
	border-right:1px solid #d9d9d9;
}

tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}

tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}

tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}

tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}


tr:hover{
	background:#f9f9f9;
}

td a img{
	border:1px solid #fff;
}

td a img:hover{
	border:1px solid #d3d3d3;
}





input#s{
	/*
    border: 1px solid #aaa;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.24) inset;
	*/
	
    border: 0;
    border-radius: 3px;
    color: #333333;
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    margin: auto 5px;
    padding: 8px;
    width: 241px;
}

a.grey-button {
    border: 1px solid #acacac;
	background:#ebebeb;
    color: #333333;
    display: inline-block;
    font-size: 11px;
    padding: 3px;
    text-decoration: none;
	float:right;
}


.button { 
	font:Bold 12px "Arial";
    display: inline-block; 
    padding: 3px 5px;
    border: 1px solid #999; 
    border-bottom-color: #888;
    text-decoration: none; 
    text-align: center;
    cursor: pointer; 
    /* outline: none; */
    color: #333; 
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
    background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: linear-gradient(#f5f6f6, #e4e4e3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    /* IE hacks */
    zoom: 1; 
    *display: inline; 
}

.button:hover,
.button:focus,
.button:active {
    border-color: #777 #777 #666;
}

.button:active {
    border-color: #f3f3f3;
    background: #f3f3f3;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}



input[type=button]#ruler{
	border:1px solid #ddd;
	width:25px;
	height:25px;
	background:url(../img/flag.png)no-repeat center;
	cursor:pointer;
}

input[type=button]#ruler.active{
	border-color:#f3f3f3;
	background-color:#f3f3f3;
	-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.20);
	-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.20);
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.20);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.20);
}


input[type=button]#zoomin{
	float:right;
	border:1px solid #ddd;
	width:25px;
	height:25px;
	background:url(../img/zoomin.png)no-repeat center;
	cursor:pointer;
	margin-left:5px;
}

input[type=button]#zoomout{
	float:right;
	border:1px solid #ddd;
	width:25px;
	height:25px;
	background:url(../img/zoomout.png)no-repeat center;
	cursor:pointer;
	margin-left:5px;
}

input[type=button]#extend{
	float:right;
	border:1px solid #ddd;
	width:26px;
	height:26px;
	background:url(../img/extend.png)no-repeat center center;
	cursor:pointer;
	margin-left:5px;
}

input[type=button]#ruler:hover,input[type=button]#zoomin:hover,input[type=button]#zoomout:hover,input[type=button]#extend:hover{
	border:1px solid grey;
}

select{
	padding:2px;
	font-family:"Roboto";
}
textarea{
	width:100%;
	font-family:arial;
}


#loading,#loadinghapus{
	text-align:center;
	margin-top:20px;
	display:none;
}

#sukses,#sukseshapus{
	text-align:center;
	vertical-align: middle;
	border:1px solid grey;
	margin-top:10px;
	font-weight:bold;
	padding:10px;
	/*
	background-image: url(../img/success.png);
	background-position: 10px center;
	background-repeat: no-repeat;
	*/
	background-color: limegreen;
	display:none;
	border-radius: 5px;
}

#kosong{
	text-align:center;
	vertical-align: middle;
	border:1px solid #d9d9d9;
	padding:10px;
	background-color: #f3f3f3;
	margin-top:10px;
	margin-bottom:10px;
}

#gagal{
	text-align:center;
	vertical-align: middle;
	border:1px solid grey;
	margin-top:10px;
	font-weight:bold;
	padding:5px;
	background: red;
	display:none;
	
}



.tutup{
	float:right;
}


#measure{
	font:14px "Yanone Kaffeesatz";
}
#ikon{
	float:left;
	margin-right:5px;
}

#panelhujan{
	float:right;
	font:11px "Arial";
}

#panelhujan input[type=text]{
	font:11px "Arial";
	padding: 3px;
}

#panelhujan select{
	font:11px "Arial";
	padding: 5px;
}

/*---Form Login---*/
.active-links {
	position:absolute;
	right:0;
	top:0;

}

#session {
	cursor:pointer;
	display:inline-block;
	height:36px;
	vertical-align: top;
	white-space: nowrap;
}

#session.active, #session a:hover {
       color:red;
}


a#signin-link {
	position:relative;
	padding:12px 10px 8px 10px;
	font:13px "Yanone Kaffeesatz";
	height:20px;
	color:#000;
	display:block;
	text-decoration:none;
}

a#logout {
	padding:12px 10px 8px 10px;
	font:13px "Yanone Kaffeesatz";
	height:20px;
	color:#000;
	text-decoration:none;
	display:inline-block;
	float:right;
}

a#logout.active, a#logout:hover {
       color:red;
}

#signin-dropdown {
	min-height:150px;
	min-width:160px;
	position:absolute;
	right:0;
	display:none;
	background: #fff;
	border:1px solid #c6c6c6;
	border-top:none;
	z-index:1;
}

#signin-dropdown form{
	cursor:pointer;
	padding:10px;
	text-align:left;
}

#signin-dropdown .textbox span { color:#000;}
#signin-dropdown .textbox input { width:200px; }

fieldset { 
	border:none; 
}

form.signin .textbox label { 
	display:block; 
	padding-bottom:7px; 
}

form.signin .textbox span { 
	display:block;
	font: 12px "Yanone Kaffeesatz";
	color:#000;
	margin-bottom:5px;
}

form.signin p, form.signin span { 
	color:#999; 
	font-size:14px; 
	line-height:18px;
} 

form.signin .textbox input { 
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	padding:6px 6px 4px;	
	font: 12px "Yanone Kaffeesatz";
	color:grey;
	border:1px solid #d3d3d3;
}

form.signin .remb { 
	padding:9px 0; 
	position:relative; 
	text-align:right;
}

form.signin .remb .remember { 
	text-align:left; 
	position:absolute; 
	left:0;
}
/*---Tooltip---*/
.labels {
	position: relative;
	background: #fff;
	border: 1px solid grey;
	display:inline-block;
	padding:5px;
	 z-index:999;
	 margin-bottom:-10px;
	width:250px;
	min-height:74px;
	font:11px "Arial";
}


.labels:after, .labels:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.labels:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fff;
	border-width: 8px;
	left: 40px;
	margin-left: -8px;
}
.labels:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: grey;
	border-width: 9px;
	left: 40px;
	margin-left: -9px;
}

.labels img{
	width:66px;
	height:66px;
	float:left;
	margin-right:5px;
	border:1px solid #d3d3d3;
	padding:3px;
}


#banjirgagal,#irigasigagal,#pantaigagal,#sabgagal,#hujangagal,#stasiungagal,#subgagal{
	display:none;
}
#logingagal{
	display:none;
}

#measure{
	display:none;
}

#galeri_bencana{
	margin-top:10px;

}

.gambar{
	display:inline-block;
	width:200px;
	border:1px solid #d3d3d3;
	padding:5px;
	margin-right:15px;
	margin-bottom:10px;
box-shadow:5px 5px #eee; 
}

.gambar img{
	max-width:200px;
	max-height:200px;
}





.warna{
	display:inline-block;
	width:12px;
	height:12px;
	float:left;
	cursor:pointer;
	border:2px solid #fff;
	margin-bottom:5px;
	
}
.warna:hover,.pilih{
	border:2px solid GREY;
}