/* General */
html { height: 100%; color: }
body { height: 100%; margin: 0px; padding: 0px }
ul {margin: 0; padding: 0; float: left;}
li {list-style: none; float: left;}
h3  {margin: 2px 0;}
/* Map */
#map{ height: 100%; width: 100% }

/* Login */
#login { width: 250px; height: 150px; margin: 0 auto; border: gray 1px dotted; margin-top: 150px; color: white; font-size: 13px; padding: 10px;}
#loginbg {height: 100%; width:100%;z-index: 100; background: url('../images/panel_bg.png'); position: absolute; top: 0px;}
#loginloading {display: none; width: 20px; height: 20px;}
#loginmessage {color:red;}
.logo {display: block; width: 100px; margin-bottom: 20px;}
/* Panel */
#panel { position: absolute; width: 300px; height:100%;right: 0px; top:0px; background: url('../images/panel_bg.png'); z-index: 10; color: white; padding: 10px; padding-top: 0px;}
/* #panel {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10);opacity: 0.1;}*/
#panel .tab {  margin: 10px;}
#panel h2 {display: block; width: 300px; font-size: 12px; color: white; letter-spacing: 2px; margin: 0; padding: 5px 0; border-top: 1px dotted gray;	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; cursor: pointer;}
#panel h2 {background: url(../images/status-icons.png) no-repeat 0px 100px;}
#panel h2 .statustime {color: gray;font-size: 10px; float: right; padding-right: 32px; text-align: right; }

#panel #vehicles {margin: 0; padding: 0; }
#panel #vehicles .tabs {height: 200px;}
#panel .items {font-size: 12px;height: 100%;}
#panel .items .value {background: black; padding: 5px; margin: 2px;}
#panel td {height: 14px; }
#panel td.value {width: 180px;}
/* Zoom */
#zoom {background: url(../images/zoom.png); width: 80px; height: 112px; position: absolute; left: -50px; top: 20px;}
#zoom #zoomin {width: 40px; height: 40px; position: absolute; left: 3px; top:0px;cursor: pointer;}
#zoom #zoomout {width: 20px; height: 20px; position: absolute; left: 17px; top:40px;cursor: pointer;}
#zoom #zoomauto {width: 40px; height: 40px; position: absolute; left: 3px; top:60px; cursor: pointer;}
#follow { width: 60px; height: 50px;position: absolute; left: -42px; top: 120px; cursor: pointer;}
.followactive {background:url(../images/follow-active.png) no-repeat;}
.followinactive {background:url(../images/follow-inactive.png) no-repeat;}

/* Tab */
.buttons {float: left;}
.buttons li{color:#0080FF;padding:15px 0px;cursor:pointer;font:10px Verdana;width: 73px; text-align: center;}
.items  .buttons {margin-bottom: 5px;border-right:1px solid gray;}
.items  .buttons li{border: 1px solid gray;border-right:none;padding:15px 0px; width: 73px;}
.buttons li.active, .buttons li:hover{background:#0080FF;color:#fff}
#main-box, .lol, #main-box-pois{ position:absolute;}
#main-box {height: 100%}
#main-box div.items {width:300px;height:100%;float:left;}
#main-box-pois div.items2{width:300px;height:500px;;float:left;}

.main-mask{position:relative;width:300px;height:100%;overflow:hidden;}
.items-wrapper div{width:300px;height:150px;float:left;}
.items-wrapper{position:relative;width:300px;height:150px;overflow:hidden;clear: both;}
.title {width: 80px;}
#sample {display: none;}
/*Data picker*/
#route_date_picker  {padding-left: 10px;}
#route_date_picker h3 {margin-left: -10px; margin-bottom: 5px;}
#route_date_picker .label {display:block; float: left; width: 100px;line-height: 15px; clear: left;}
#route_date_picker .label_range {height:30px;}
#route_date_picker .sep {border-top: 1px dotted gray; height: 1px; margin: 5px 0;}

/* Pois */
.pois .row { height: 25px; line-height: 25px; border-bottom: 1px dotted white; font-size: 13px; position: relative; overflow: hidden; width: 290px;}
.pois .address {font-size: 11px; color: gray; padding-left: 10px;}
.pois #newAddress {width: 200px;}
.pois .activePoi {display: none; }

#addpoi li { cursor: pointer; font-weight: bold;line-height: 16px;height: 16px;}
#addpoi li.active {display: none;}
.pois .controls {position: absolute;right: 0px; display: none; top: 0px;}
.pois .controls img {margin-top:5px;}
.pois .onhover .controls {display: inline;}
.pois .onhover .address {display: none;}
.pois .controls span {cursor: pointer; margin-left: 5px;}
.pois #addnewdetails label {width: 80px; display: block;float: left;}
.pois #notifications label {width: 60px; position: relative; top:3px;}
.pois #notifications .nw {visibility: hidden;}
.pois #notifications .checkbox {float: left; }
.pois #addnewdetails .nw { width: 200px;}
.pois #addnewdetails .dis { color: white; background: black;}
.pois #addnewdetails .inthesystem { color: gray; width: 150px;}
.pois .findaddress {border-bottom: 1px dotted white; margin-bottom: 10px; padding: 10px 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70);opacity: 0.7; }
.pois #saveNW {margin: 0 auto;}
.pois .saveNW {border-top: 1px dotted white; margin: 10px auto; padding: 10px 0;}
.pois #poi_cancel_tab {visibility: hidden;}
.pois .rates {color: white; cursor: pointer; text-decoration: underline; font-size: 11px;}
.pois .credit {}
.pois .green {color: #9bd50b;}

/* Routes */
#route_date_range {display: none;}
.stopTooltip .icon {width: 20px;}
.stopTooltip {width: 200px; height: 50px;}
/* Events */
.events {width: 300px;}
.events .time { width: 60px}
.events .vehicle {width: 60px;}
#vehicles .events .vehicle {display: none;}
.events .event {}
table.first {background:black;}

table.second {background:#2c2c2c;}

table.events  {border-bottom: 1px dotted white;}
#events .control{ padding-bottom: 5px; border-bottom: 1px dotted white;}
#events .date {width: 80px;}
#events .exact {display: none;}
#events_list {overflow-y: scroll; overflow-x: hidden; height: 100%;}
.eventlist{overflow-y: scroll; overflow-x: hidden; height: 80px;}
#wp_filter_wrapper {display: inline;}
#event_delete_filter { width: 100px; background: red;color: white; margin: 2px auto; padding: 2px; text-align: center; display: none; cursor: pointer;}


/* Growl */
#growl {position: absolute; z-index: 100;    top: 10px; left: 10px; color: white; }
#growl li {background: url(../images/growl_info.png); height: 80px; ;width: 220px; float: none; font-size: 12px; position: relative;}
#growl li span {padding:14px 20px 14px 70px; display: block; }
#growl li img {position: absolute; top:0px; right:0px; cursor: pointer;}
/* Ohter */
#tooltip {color: white; padding: 5px 20px;position: absolute; z-index: 100; background: url('../images/panel_bg.png');;left:-2000px}
#tooltip .stopTooltip {font-size: 12px;margin: 2px 0; width: 220px; line-height: 20px;}
#tooltip .stopTooltip .icon {width:20px; margin-right:5px;}
#tooltip .stopTooltip h3 {border-bottom: 1px solid white; margin-left: 40px;}

.tip-wrap {padding:5px;color:white; z-index: 100000;  font-size: 12px; background: black;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70);opacity: 0.7;  }

#loading { width: 20px; height: 20px; position: relative; top:5px; display: none;}

/* Speed log */
#speedlog_wrapper {position: absolute;bottom: 20px; display: none;}
#speedlog { width: 800px; height: 140px; overflow: hidden;  position: relative; border: 1px solid;  z-index: 1000; clear: both;}
#speedlog ul {height: 20px; width: 100%; margin: 0; padding: 0; background: url('../images/panel_bg.png'); color: white;}
#speedlog li {height: 20px; float: left; margin: 0; padding: 0; list-style: none; text-align: left;  }
#speedlog li span {position: relative; left: -15px; font-size: 11px}
#speedlog li.first span {left: 0px;}
#speedlog_img {height: 100px; }
#speedlog_container { width: 110%; position: relative; left: 0px;}
#speedlog #line { position: absolute; border-left: 1px solid white;height: 100px; width: 1px; z-index: 100 }
#speedlog #line #dot {  background-image:url(../images/speedlogdot.png); background-repeat:no-repeat; width: 7px; height: 100%; position: relative; left: -4px;}
#speedlog_controls {float: right; padding: 3px; background: url('../images/panel_bg.png'); color: white; }
#speedlog_controls .controls {float: left; margin-left: 3px; cursor: pointer;}
#speedlog_zoomIn {background: url(../images/speedlog_zoomin.png); height: 30px; width: 30px;}
#speedlog_zoomOut{background: url(../images/speedlog_zoomout.png); height: 30px; width: 30px;}
#speedlog_slideToLeft {background: url(../images/speedlog_left.png); height: 30px; width: 30px;}
#speedlog_slideToRight {background: url(../images/speedlog_right.png); height: 30px; width: 30px;}
/* IPHONE */
@media screen and (max-device-width: 480px){
#panel{display: none;}
}