﻿
#dMenu {
            width:100%;
            height:50px;
            margin:auto;
            /*z-index:8;
            position:absolute;
            opacity:.95;*/
            
        }
            #Top {
                width:100%;
                height:50px;                             
                margin:0;
                padding:0;                
                border-bottom:solid 0px #ffffff;
                background:url('../images/top_bg.jpg') repeat-x; 
                background-size:1px 50px;
                          
            }
                #Top .ulLeft {
                    width: 50%;
                    height: 100%;
                    float: left;
                    /*background-color:#07be32;*/
                    /*vertical-align:text-top;*/
                }
                    #Top .ulLeft li
                    {
                        margin: 0;
                        padding: 0;
                    }
                        #Top .ulLeft li.li_Menu_Title
                        {
                            width: 100%;
                            /*height: 73px;*/
                            text-align: center;
                            text-transform: uppercase;
                            text-shadow: 1px 1px 2px #000;
                            color: #ff6a00;
                            font-size: 1.5em;
                            line-height: 1.8em;
                            font-weight: bolder;
                            
                            /*background: url(../images/top1_2.jpg) no-repeat;*/
                            /*background-position: right;
                            background-size:490px 70px;
                            margin-top:-17px;
                            top:-17px;*/
                        }
                        #Top .ulLeft li.li_50
                        {
                            line-height: 0.6em;
                            color: #fff;
                            font-size: 1.1em;                            
                        }
                #Top .ulRight
                {
                    width: 50%;
                    height: 100%;
                    float: left;
                    text-align: right;
                    background:url(../images/top1_2.jpg) no-repeat;
                    background-position:right;
                    background-size:490px 50px;
                    /*background-color: #000;*/
                    /*border-bottom-left-radius: 20px;*/
                }
                    #Top .ulRight ul
                    {
                        width: 100%;
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        text-align: right;    
                                         
                        /*background-color:#07be32;*/
                    }
                    #Top .ulRight li
                    {
                       color:#fff;
                    }
                    #Top .ulRight li:hover
                    {
                       color:#000;
                    }


#dMenu .Contents
{
    width: 100%;
    height: 90%;   
}
.li_10
{
    width: 10%;
    height: 100%;
    float: left;
}
.li_50
{
    width: 100%;
    text-align: center;
    /*color:#0ae4fa;
            text-shadow:2px 2px #000;*/
    /*text-shadow: 1px 1px 2px #07be32, 0 0 1em #07be32, 0 0 0.2em #07be32;*/
    color: #000;
    font-size: 1.2em;
    font-family: sans-serif;
    top: -10%;
    padding-top: -10%;
}
.top_title
{
    width: 100%;
    height: 50px;   
    text-align: center;    
    text-transform: uppercase;   
    text-shadow: 1px 1px 2px #000; 
    color: #ff6a00;
    font-size: 1.5em;
    line-height: 50px;
    font-weight: bolder;
    background: url(../images/top1_2.jpg) no-repeat;
    background-position: right;
    background-size:490px 48px;
    margin-top:-17px;
    top:-17px;
   
}

.li_info
{
    width: 100%;
    height: 50%;
}
.menuEx
{
    background: url('../images/menu/setting.png') center no-repeat;
    background-size: 26px 26px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 4px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}
.camera
{
    background: url('../images/menu/camera64x64.png') center no-repeat;
    background-size: 30px 30px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 3px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}

.googleMaps
{
    background: url('../images/menu/googleMaps.png') center no-repeat;
    background-size: 30px 30px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 3px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}

.review
{
    background: url('../images/menu/review.png') center no-repeat;
    background-size: 30px 30px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 3px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}
.fencing
{
    background: url('../images/menu/note.png') center no-repeat;
    background-size: 30px 30px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 3px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}
.exit
{
    background: url('../images/menu/exit-64x64.png') center no-repeat;
    background-size: 26px 26px;
    width: 80px;
    height: 50px;
    float: right;
    text-align: center;
    background-position: center 5px;
    line-height: 78px;
    cursor: pointer;
    font-size: 1.1em;
}
            
        .subMenu {
            width: 99.8%;
            height: 160px;
            background-color:rgba(7, 190, 50,1);
            z-index: 9;
            position:absolute;
            margin: 0;
            display:none;
            /*border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;*/ 
            /*border-top:solid 1px #838383;*/           
        }
            .subMenu .sub0 {
                width:100%;
                height:70%;               
                background-color:#fff;
            }
                .subMenu .sub0 ul {
                    width:100%;
                    height:100%;
                }
                .subMenu .sub0 ul li {
                    width:10%;
                    height:100%;
                    float:left;
                    text-align:center;
                    color:#000;                                                     
                }                
                .subMenu .sub0 .system {
                    background:url('../images/menu/file-64x64.png') center no-repeat;
                    height:100%;                          
                }  
                .subMenu .sub0 .reports {
                    background:url('../images/menu/reports-64x64.png') center no-repeat;
                    height:100%;                              
                }              
                .subMenu .sub0 .charts {
                    background:url('../images/menu/chart-64x64.png') center no-repeat;
                    height:100%;                             
                }
                .subMenu .sub0 .helps {
                    background:url('../images/menu/help-64x64.png') center no-repeat;
                    height:100%;                             
                }
                .subMenu .sub0 .hover {
                    background-color:#78d82d;
                    /*border-top-left-radius:10px;
                    border-top-right-radius:10px; 
                    box-shadow: 0 2px 5px 0 #78d82d;*/                      
                }
            .subMenu .sub1 {
                width: 100%;
                height: 30%;                
                background-color:#78d82d;
                clear:both;
                /*border-bottom-left-radius:10px;
                border-bottom-right-radius:10px;
                box-shadow: 0 2px 5px 0 #d3d0d0;*/
            }
            .subMenu .sub1 ul {            
                height:30px;
                width:100%; 
                display:none;                              
            }
            .subMenu .sub1 ul li {                
                padding:13px 20px 0 26px;
                height:100%;              
                color:#000;         
                float:left;    
                background-size:24px 24px; 
                background-color:#000;  
                font-size:0.9em;                     
            }
            .subMenu .sub1 ul li:hover {                   
                color:#757272;                
                cursor:default;        
                             
            }
            .subMenu .sub1 .userInfo{                
                background:url('../images/menu/userInfo.png') left no-repeat;
                background-size:24px 24px;               
            }
            .subMenu .sub1 .userManager{                
                background:url('../images/menu/usersManager.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .changePassword{                
                background:url('../images/menu/changePassword.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .deviceManager{                
                background:url('../images/menu/deviceManager.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .addRemove{                
                background:url('../images/menu/addRemove.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .geoFencing{                
                background:url('../images/menu/geoFencing.png') left no-repeat;
                background-size:24px 24px;
            }
            /*Report*/
            .subMenu .sub1 .noGPS{                
                background:url('../images/menu/noGPS.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .subway{                
                background:url('../images/menu/subway-64x64.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .AccOn{                
                background:url('../images/menu/AccOn.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .QCVN{                
                background:url('../images/menu/nghiDinh91.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .stop{                
                background:url('../images/menu/stop.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .geoFencingIn{                
                background:url('../images/menu/geoFencingIn.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .distance{                
                background:url('../images/menu/distance.png') left no-repeat;
                background-size:24px 24px;
            }
            .subMenu .sub1 .statistics{                
                background:url('../images/menu/statistics24x24.png') left no-repeat;
                background-size:24px 24px;
            }
            /*Chart*/
             .subMenu .sub1 .fuelCharts{                
                background:url('../images/menu/fuelCharts.png') left no-repeat;
                background-size:24px 24px;
            }
             .subMenu .sub1 .distanceCharts{                
                background:url('../images/menu/distanceCharts.png') left no-repeat;
                background-size:24px 24px;
            }
             /*Helps*/
             .subMenu .sub1 .userGuide{                
                background:url('../images/menu/userGuide.png') left no-repeat;
                background-size:24px 24px;
            }
             .subMenu .sub1 .error{                
                background:url('../images/menu/error.png') left no-repeat;
                background-size:24px 24px;
            }
             .subMenu .sub1 .copyRight{                
                background:url('../images/menu/copyRight.png') left no-repeat;
                background-size:24px 24px;
            }