html,body{
height:100%;width:100%;
font : 11px tahoma;
background : #999;
line-height : 1.7em;
color : #555;
}
*{
margin: 0;
padding: 0;
}

#logo{
float:left;
margin:2px 0 0 300px;
}

/*popup*/

#popup{f
float:left;
}
#popup .header{
width:100%;
height:30px;
background: url(images/head_pop1.gif) repeat-x left top;
}
#popup .header-text{
float:left;
margin:5px 0 5px 5px;
color:black;
font:bold italic 14px 'calibri'
}
#popup .header-close{
float:right;
margin: 8px 5px 5px 0;
width:15px;width:15px;
border:0;
}
#popup .content{
float:left;
background:#f3f3f3 url(images/content_pop.gif) repeat-x left top;
border:solid 1px #ccc;
}
#popup .content-text{
margin:10px;
}

/* ------ */

#container {
width:950px;
min-height:100%;
height:100%;
background : #fff;
margin:0 auto;
}
			/*TOP BANNER*/
#header {
height :71px;
background : url(images/tl_header.gif) repeat-x top left;
}
#headermenu{
float:right;
margin:10px 20px 0 0;
color : #666;
}
#headermenu a{
color : #666;
font-weight:bold;
text-decoration:none;
}
#headermenu a:hover{
color : #333;
}
#headimg{
position:absolute;
background : url(images/img_head1.jpg) no-repeat top left;
top:0;
width:470px;
height:47px;
}
#headimg2{
position:absolute;
background : url(images/img_head2.jpg) no-repeat top left;
top:47px;
width:950px;
height:24px;
}
.fbtab{
float:right;
right:20px;
padding: 0;
margin:0 10px 0 0;
}

.fbtab ul{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
font-size:11px;
width: 100%;
border-width: 1px 0;
}

.fbtab ul li{
display: inline;
}

.fbtab ul li a{
float: left;
color: #666;
font-weight: bold;
padding: 2px 6px 0 5px;
text-decoration: none;
background: url(images/menudivide.gif) top right repeat-y;
}

.fbtab ul li a:hover{
color: #666699;
background-color: #fff;
border-bottom: none;
padding-bottom: 0;
}

.fbtab #current a{ /*currently selected tab*/
background:#fff url(images/tl_mainmenu_on.gif) top left repeat-x; 
color:#333;
}
#content{
width:100%;
margin:0;
padding:0 0 5px 0;
float:left;
overflow:auto;
background : #fff;
}
#left{
float:left;
width:215px;
margin:0;
overflow:auto;
background:url(images/bg_left.jpg) top left no-repeat;
}
#left1{
float:left;
width:215px;
height:88px;
margin:0;
background:url(images/bg_left_1.jpg) top left no-repeat;
}
#single{
	margin:85px 1% 0 1%;
	width:98%;
}
#tab-out{
margin:15px;
}
.shadetabs{
width:100%;
padding: 3px 0;
margin-left: 0;
margin-top: 10px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(images/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color:#990000;
background-image: url(images/shadeactive.gif);
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(images/shadeactive.gif);
border-bottom-color: white;
color:#990000;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}
#locateform{
margin:17px 0 0 30px;
color:#333;
font-weight:bold;
}
#leftmenu{
float:left;
margin:10px 0 0 0;
width:210px;
}
.leftmenunav{
width: 210px; /*width of menu*/
}

.leftmenunav .headerbar{
font: bold 11px Verdana;
color: #990000;
border-bottom:dashed 1px #666;
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 10px;
}

.leftmenunav ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.leftmenunav ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.leftmenunav ul li a, .leftmenunone{
font: bold 11px tahoma;
color: black;
background:url(images/tl_leftmenunav.png) top left repeat-y;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.leftmenunav ul li a:visited{
color: black;
}

.leftmenunav ul li a:hover{ /*hover state CSS*/
/*color:#fff;*/
background:url(images/tl_leftmenunav_hover.png) top right repeat-y /*#6699CC*/;
}
.contentbox{
background:url(images/tl_box.gif) repeat top left;
border:solid 1px #ccc;
border-top:none;border-left:none;
width:202px;
padding: 5px;
margin-bottom: 2px;
}
.contentbox p{
margin:5px;
}
#contentmap{
margin:20px 0 0 0; 
float:left;
width:735px;
}
#report{
float:left;
width:100%;
}
#report .head{
width:100%;
height:30px;
background:url(images/tl_box.gif) top left repeat;
color:#666;
font:bold italic 18px tahoma;
letter-spacing:-1px;
}
#report .head p{margin:3px 0 5px 20px;}
#report .box{
width:100%;
background:#f3f3f3;
border:solid 1px #ccc;
border-left:none;border-right:none;
}
#adsense{
float: left;
width:735px;
height:10px;
border-top:outset 1px #CCC;
margin: 0 0 0 215px;
background:url(images/tl_right.jpg) top left repeat-x;
}
#adsense p{
	margin: 2px auto 0 auto;
}
#logcontent{
display: none;
position:absolute;
z-index:1000;
margin-left: -170px;
border-right:1px solid #999;
border-left:1px solid #999;
border-bottom:5px solid #ccc;
background:#fff url(images/tl_right.jpg) top left repeat-x;
width:170px;
padding:10px;
text-align:center;
color:black;
font:bold 12px tahoma;
}
#logcontent a{
font:bold 11px "trebuchet MS";
color:#666;
text-decoration:underline;
}
#logcontent a:hover{
color:#333;
text-decoration:none;
}
			/*FOOTER*/
#footer {
position:relative;
clear:both;
height :36px;
margin:0 auto;
width:950px;
background :url(images/tl_footer.gif) top left repeat-x;
font-size:11px;
font-weight:normal;
text-align:right;
}
#footerimg{
position:absolute;
bottom:0;
width:215px;
height:36px;
background :url(images/img_footer.jpg) no-repeat left bottom;
}
#footer p{
margin:0 20px 0 0;
padding:10px 0 0 0;
}
#footer a {
color : #666699;
text-decoration:none;
font-weight:bold;
}
#footer a:hover {
color : #999;
}
#pattern-style-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 11px;
	margin:20px;
	width:95%;
	text-align: left;
	border-collapse: collapse;
	background: url(images/pattern.png);
}
#pattern-style-a thead tr
{
	background: url(images/pattern-head.png);
}
#pattern-style-a th
{
	font-size: 11px;
	font-weight: bold;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #039;
}
#pattern-style-a td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#pattern-style-a tbody tr:hover td
{
	color: #339;
	background: #fff;
}
#pattern-style-a tbody tr.not_acc td{
	color:red;
}
#pattern-style-a tfoot tr td{
	padding-top: 2px;
	padding-bottom: 2px;
}

.input {
	background-color: #fff;
	font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #5A698B;
	margin: 4px 0 5px 8px;
	padding: 1px;
	border: 1px solid #8595B2;}
	
input.btn, button.btn { 
	  color:#663300; 
	  font: bold 10px 'trebuchet ms',helvetica,sans-serif; 
	  background-color:#FFCC00; 
	  border: 1px solid; 
	  border-color: #696 #363 #363 #696;
	  cursor: pointer; 
	  filter:progid:DXImageTransform.Microsoft.Gradient 
	  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#FFCC00');
}
.close-frm{
	float: right;
	border: none;
	background: none;
	width: 15px;
	height: 17px;
	background-repeat: no-repeat;
	border: 1px inset transparent;
	cursor: pointer;
}
#tlist, #tlistpoi, #tlistalert{
	width:100%;
	margin-top: 10px; 
	list-style:none;
}

#tlist dd, #tlistpoi dd, #tlistalert dd{
	border-bottom: 2px solid #4b87c4;
	text-align: left;
	font-weight: bolder;
	float: left;
}

#list{
	background:white;
	width:100%;
	height: 290px;
	overflow-y: auto;
	overflow-x: auto;
}

#listalert{
	background:url(images/tl_box.gif) ;
	width:100%;
	height: 150px;
	overflow-y: auto;
	overflow-x: auto;
}

#listpoi{
	clear: both;
	height: 200px;
	background: white;
	overflow-y: auto;
	overflow-x: auto;
}

#list li, #listpoi li, #listalert li { padding:1px; border-bottom: 1px solid #CCC; font-size: 6.35pt; }
#list li dd, #listpoi li dd{
	text-align: right;
	font-size: 6.35pt;
	float: left;
}

#listalert li dd{
	text-align: right;
	font-size: 7pt;
	float: left;
}

#list li:hover, #listpoi li:hover, #listalert li:hover { background:#3B5998; color:#fff; cursor:pointer; cursor:hand; }

#listbox{
	position: absolute;
	right: 15px;
	bottom: 15px;
	background:url(images/tl_box.gif) repeat top left;
	padding: 10px;
}
#map { float:left; width:734px;min-height:550px; border-bottom: 1px solid #200a8e; }
#detailmap, #mapDiv {
	font: normal 10px verdana;
}

#detailmap {
	width: 250px;
	height: 150px;
	border:1px solid gray;
}

#legend{
	display: none;
	position: absolute;
	margin-top: 230px;
	margin-left: 5px;
	z-index: 1000;
}
#speed-limit{
	margin: 10px;
}

#speedtext{
    font-family:'digital dream';
}
option{
	text-transform: capitalize;
	font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
option:hover{
	cursor: pointer;	
}
option[disabled="disabled"]{
	font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: black;
	font-size: 8pt;
	margin-left: 2px;
	margin-bottom: 3px;
	margin-top: 2px;
	text-transform: capitalize;
	font-weight: bolder;
}
option[disabled="disabled"]:hover{
	cursor: default;	
}
#legenda{
	display: none;
	font-size: 7pt;
	border: 1px solid black;
	background: url(images/tl_right.jpg) top left repeat;
	padding: 0;
}

#toggle-legend{
	cursor: pointer;
	width: 95px;
}
#search-google{
	background: url(images/google.jpg) no-repeat left white;
	border: 1px solid #CCC;
	padding: 1px 1px 1px 50px;
	position: absolute;
	margin-left: 9px;
	margin-top: 33px;
}
#label-poi{
	background: white;
	border: 1px solid black;
	position: absolute;
	text-align: center;
	font-size: 8pt;
	height: 20px;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 213px;
	width: 60px;
}
#label-kml{
	background: white;
	border: 1px solid black;
	position: absolute;
	text-align: center;
	font-size: 8pt;
	height: 20px;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 275px;
	width: 100px;
}
#control-button{
	height: 112px;
	z-index: 600;
	position: absolute;
	top: 44px;
	left: 7px;
	font-size: 7pt;
	font-weight: bolder;
}
button.control {background: none;border: none;background-repeat: no-repeat;background-position: left; text-align: left; height: 20px;color:#4551ef; width: 20px; cursor: pointer }
button.control2 {background: none;border: none;background-repeat: no-repeat;background-position: left; text-align: left;width: 20px; height: 20px; cursor: pointer }
div.error { color:red; font-weight:bold}
.focus{
	background: #e0e3d1;
}
#loading {position:absolute;z-index:10;display:none;}
#loading-maps{
	position:absolute;
	z-index:1000;
	background: url(/maps-sungps/img/loading-maps.gif) left no-repeat;
	padding: 25px 10px 25px 55px;
	margin: 20% 0 10% 45%;
	font-weight: bolder;
}
#alarmsignal{
	width: 180px;
	z-index: 500;
	position: absolute;
	top: -30px;
	left: 86px;
	font-size: 6pt;
	font-weight: bolder;
}
#leave-alarm{
	background: url(images/geo_leave_button_off.png) no-repeat;
	padding: 8px;
}

#enter-alarm{
	background: url(images/geo_enter_button_off.png) no-repeat;
	padding: 8px;
}

.leftmenuactive{
	background: url(images/tl_leftmenunav_hover.png) top right repeat-y;
}

.calendar{
	background: url(/maps-sungps/img/calendar.png);
	width: 20px;
	height: 20px
}

#alert{
	background: url(/maps-sungps/img/alert.png) no-repeat top left #f2e873;
	padding: 5px 5px 5px 30px;
	text-align: justify;
	border: 1px solid #8a0918;
	margin: 0 0 3px 0;
}

#mappanel{ 
	display: none;
	position: absolute;
	background:#f3f3f3 url(images/content_pop.gif) repeat-x left top;
	top: 3%;
	left: auto;
	right: auto;
}

#rmap{ width:720px;min-height:450px; }

#loading-maps{
	display: none;
	position:absolute;
	z-index:1000;
	background: white url(/maps-sungps/img/loading-maps.gif) left no-repeat;
	padding: 25px 10px 25px 55px;
	margin: 13% auto 0 18%;
	font-weight: bolder;
}

.help{
	display: none;
	position: absolute;
}

.alternatif{
	display: none;
	position: absolute;
}

#geofence-detail {height: 20px;}
#geofence-table {
	display: none;
	position: absolute;
	margin: 1% auto 0 3%;
	background:url(images/tl_box.gif) repeat top left;
	border: 1px outset black;
	font-weight: bold;
	z-index:1000;
}

#geofence-table .table #cont-table{
	padding: 20px 10px 20px 10px;
	background-color: #f3f3f3;
	border: 1px outset white;
}

.paging{
	font : 12px tahoma;
	padding: 12px 0 12px 0;
	text-align: center;
	border-top: 1px dotted black;
}

a{
	color: #8a8c8c;
	text-decoration: none;
}

a:hover{
	color: black;
	text-decoration: none;
}

a img{
	border: none;
}

.editbox{
	width:400px;
	border:solid 1px #8595B2;
	padding: 10px;
	margin:20px auto 20px auto;
	background: #f3f3f3 url(images/content_pop.gif) repeat-x left top;
}
 
#label-marker{
	background-color: black;
	border: 1px outset yellow;
	padding: 1px;
	font-size: 7pt;
	text-align: center;
	width: 65px;
	text-transform: capitalize;
	color: white;
	line-height: 8pt;
}

#edit-poi{
	background: url(images/edit.png) no-repeat left;
	padding-left: 16px;
	float: right;
}

#delete-poi{
	background: url(images/delete.png) no-repeat left;
	padding-left: 16px;
	float: right;
}

#div_tambah_rute{
	border: 1px solid #ddd;
	padding: 10px;
}

#fullscreen{
	background: white;
	border: 1px solid black;
	position: absolute;
	text-align: center;
	font-size: 8pt;
	height: 24px;
	font-weight: bold;
	margin-top: 8px;
	margin-left: 380px;
	width: 25px;
	cursor: pointer;
}
#notice {
	color: red;
}
#pointer {
	background: url(/maps-sungps/img/toggle.png) no-repeat top center;
	cursor: pointer;
}
#loadingmap {
	display: none;
	position: absolute;
	z-index: 1000;
	width: 70%;
	text-align: center;
	position: absolute;
}