/* 
    Document   : responsiveMainmenu.css
    Created on : 27.08.2014, 11:11:16
    Author     : Laura
    Description:
        CSS for responsive design of main menu
*/
@media only screen and (min-width:1200px) {
    
    #mainmenu ul li.active ul {
        float: left;
    }
    
}


@media only screen and (max-width:1200px) {
}

@media only screen and (max-width:1000px) {
    
    #mainmenu #entries {
        overflow-x: auto;
        overflow-y: hidden;
        max-width: auto !important;
    }
    
}

@media only screen and (max-width:1070px) {
    
    #mainmenu #menu-my-module, #mainmenu #menu-class-editor, #mainmenu #menu-sdk, #mainmenu #menu-data, #mainmenu #menu-admin {
        max-width: 140px !important;
        width: 140px;
    }
    
}

@media only screen and (max-width:1070px) {
    
    #mainmenu ul li.dropdown {
        max-width: 50px !important;
        width: 50px !important;
    }
    
    #mainmenu ul li.dropdown:hover, #mainmenu ul li.dropdown.active {
        max-width: 170px !important;
        width: 170px !important;
    }
    
    .menu-icon {
        background-position: center center;
        margin-right: 0;
    }
    
    #mainmenu ul li:hover .menu-icon, #mainmenu ul li.active .menu-icon {
        background-position: 10px center;
        margin-right: 10px;
    }
    
    .menu-icon p, .menu-icon p:hover {        
        transition: color 0.4s ease;
        color: transparent;
    }
    
    .menu-icon:hover p, #mainmenu ul li.active a .menu-icon p {
        color: #fff;
    }
    
    #mainmenu ul li#menu-sdk.active ul {
        float: left;
        margin-left: -165px;
    }
    
}

@media only screen and (max-width:620px) {
    #mainmenu ul li.dropdown:hover, #mainmenu ul li.dropdown.active {
        max-width: 50px !important;
        width: 50px !important;
    }
    
    #mainmenu ul li:hover .menu-icon, #mainmenu ul li.active .menu-icon {
        background-position: center;
        margin-right: 0;
    }
    
    .menu-icon:hover p, #mainmenu ul li.active a .menu-icon p {
        color: transparent;
    }
}

@media only screen and (max-width:475px) {
    
}