/* ------------------ Vehicle markers ---------------------------  */

.v-marker {
    cursor:pointer;
    position: absolute;
    top: -45px;
    left: -13px;
} 
.v-marker.small {
    cursor:pointer;
    position: absolute;
    top: -23px;
    left: -7px;
} 

.v-marker.old-position {
    opacity: 0.5;
    filter: alpha(opacity=50);  
}
.v-marker.selected {
    z-index:3;
    opacity: 1;
    filter: alpha(opacity=100);  
}

.v-marker-label {
    /* text and status icon label to the right of the marker */
    position:relative;
    left:2px;
    top:4px;
    
    border-style:solid;
    border-width: 1px;
    border-color:rgb(70,70,70);
    border-radius:3px;
    background: rgb(120,120,120);
    background: linear-gradient(to bottom, rgb(130,130,130) 0%,rgb(90,90,90) 100%);
    
    color: white;
    font-family: verdana;
    font-weight: bold;
    font-size: 11px; 
    
    height:18px;
    padding-top:2px;
    padding-right:4px;
    padding-left:30px;
    
    box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    
    white-space: nowrap;
}

.selected .v-marker-label {
    /* selected map marker labels get a different color and a nice blue glow */
    background: rgb(0,177,254);
    background: linear-gradient(to bottom, rgb(0,177,254) 0%,rgb(00,150,200) 100%);
    border-color:rgb(100,100,100);
    
    box-shadow: 0px 2px 15px rgba(0,0,0,0.6);
    
    /* always show label when selected */
    display: block !important;
}

.small .v-marker-label {
    top:1px;
    
    font-size: 8px; 
    height:12px;
    padding-left:15px;
    padding-top:0px;
    padding-right:3px;
}

.v-marker-status-icon-panel {
    /* span to the right holding status icons in the label */
    padding-left:2px;
    padding-right:0px;
}

.small .v-marker-status-icon-panel {
    /* no status icons on the small labels */
    display:none;
}

.v-marker-icon-frame {
    /* frame around the asset icon with a little 'needle' pointer down to the location */
    position:absolute;
    width:29px;
    height:45px;
    left:0px;
    top:0px;
    
    background:url('graphics/Map/VehicleMarker/marker_asset_frame.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.selected .v-marker-icon-frame {
    /* selected gets a different graphic for the frame */
    background:url('graphics/Map/VehicleMarker/marker_asset_frame_selected.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.small .v-marker-icon-frame {
    /* small frame is smaller! */
    width:15px;
    height:23px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.v-marker-icon {
    /* the asset icon part, in/behind the frame */
    width:26px;
    height:26px;
    position:absolute;
    left:2px;
    top:2px;
}

.small .v-marker-icon {
    width:13px;
    height:13px;
    left:1px;
    top:1px;
}

.v-marker-direction-icon {
    /* direction marker at the bottom */
    position:absolute;
    width:40px;
    left:-5px;
    top:25px;
}

.small .v-marker-direction-icon {
    /* no direction markers on the small versions */
    display:none;
}

.v-marker-status-icon {
    /* status icon in label */
    position:relative; 
    top:-1px;
    
    height: 16px;
    vertical-align:middle;
}

