/* ######################### MENU STYLE ######################### */
#imSite { position: relative; }
#imMnMn { text-align: left; }
#imMnMn > ul { z-index: 10001; display: inline-block; }
#imMnMn li > ul { z-index: 10002; }

/* Main Menu */
#imMnMn ul, #imPgMn ul {padding:0;margin:0;list-style-type:none; }
#imMnMn > ul > li { position: relative; margin-left: 0px;  }
#imMnMn > ul > li:first-child { margin-left: 0; }

/* Main Menu style */
#imMnMn > ul > li { cursor: pointer; display: block; float: left; }
#imMnMn > ul > li > a { display: block; }
#imMnMn > ul > li .imMnMnFirstBg { background-image: url('menu/main.png'); width: 120px; height: 26px; }
#imMnMn > ul > li:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('menu/main_h.png'); }
#imMnMn > ul > li.imMnMnSeparator .imMnMnFirstBg  { background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnCurrent .imMnMnFirstBg  { background-image: url('menu/main_c.png'); cursor: auto; }
/* Usar solo imágenes básicas para todas las posiciones */
#imMnMn > ul > li.imMnMnFirst .imMnMnFirstBg   { background-image: url('menu/main.png'); }
#imMnMn > ul > li.imMnMnFirst:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnFirst.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('menu/main_h.png'); }
#imMnMn > ul > li.imMnMnFirst.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnFirst.imMnMnCurrent .imMnMnFirstBg  { background-image: url('menu/main_c.png'); cursor: auto; }
#imMnMn > ul > li.imMnMnMiddle .imMnMnFirstBg  { background-image: url('menu/main.png'); }
#imMnMn > ul > li.imMnMnMiddle:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnMiddle.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('menu/main_h.png'); }
#imMnMn > ul > li.imMnMnMiddle.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnMiddle.imMnMnCurrent .imMnMnFirstBg  { background-image: url('menu/main_c.png'); cursor: auto; }
#imMnMn > ul > li.imMnMnLast .imMnMnFirstBg  { background-image: url('menu/main.png'); }
#imMnMn > ul > li.imMnMnLast:hover .imMnMnFirstBg , #imMnMn > ul > li.imMnMnLast.imMnMnCurrent:hover .imMnMnFirstBg  { background-image: url('menu/main_h.png'); }
#imMnMn > ul > li.imMnMnLast.imMnMnSeparator:hover .imMnMnFirstBg  {  background-image: none; cursor: auto; }
#imMnMn > ul > li.imMnMnLast.imMnMnCurrent .imMnMnFirstBg  { background-image: url('menu/main_c.png'); cursor: auto; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnImg, #imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnImg { overflow: hidden; position: absolute; line-height: 26px; width: 100%; height: 26px; top: 0; left: 0;text-align: left; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnImg img, #imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnImg img { border: none; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnLevelImg { display: none; }
#imMnMn > ul > li .imMnMnFirstBg .imMnMnHoverIcon { display: none; }
#imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnDefaultIcon { display: none; }
#imMnMn > ul > li:hover .imMnMnFirstBg .imMnMnHoverIcon { display: inline; }
#imMnMn > ul > li.imMnMnSeparator > .imMnMnFirstBg > .imMnMnTxt { display: none; }
#imMnMn > ul > li > a { text-decoration: none; }
#imMnMn > ul > li .imMnMnFirstBg > .imMnMnTxt { overflow: hidden; margin: 0px; padding: 0px;  width: 115px; height: 26px; font: normal normal normal 9pt 'Microsoft Sans Serif'; color: #FFFFFF; text-align: center; text-decoration: none; line-height: 26px; display: block;}
#imMnMn > ul > li:hover .imMnMnFirstBg > .imMnMnTxt, #imMnMn > ul > li.imMnMnCurrent:hover .imMnMnFirstBg > .imMnMnTxt { cursor: pointer; color: #FFFFFF;font-weight: normal;font-style: normal;}
#imMnMn > ul > li.imMnMnCurrent .imMnMnFirstBg > .imMnMnTxt { color: #FFFFFF;font-weight: normal;font-style: normal;}
#imMnMn > ul > li.imMnMnSeparator { background: transparent url('../res/separatorh.png') no-repeat center center; width: 10px; height: 26px; }
#imMnMn .imMnMnFirstBg { position: relative; display: block; background-repeat: no-repeat; cursor: pointer; width: 100%; }
#imMnMn a { border: none; cursor: pointer; }
#imMnMn .imMnMnTxt { text-overflow: ellipsis; white-space: nowrap; }
#imMnMn .imMnMnTxt .imMnMnTextLabel { position: relative; }
#imMnMn .imMnMnFirstBg .imMnMnImg { display: block; height: 26px; width: 120px; cursor: pointer; }
#imMnMn .imMnMnFirstBg .imMnMnImg img { position: absolute; }

/* SubMenu style */
#imMnMn li .imMnMnBorder { position: relative; background-repeat: no-repeat; background-position: left top; width: 115px; height: 22px; border-collapse: collapse; }
#imMnMn ul ul li { cursor: pointer; overflow: hidden; width: 115px; height: 22px; border-collapse: collapse; cursor: pointer; display: inline; }
#imMnMn ul ul li a { display: block; width: 115px; height: 22px; }
#imMnMn ul ul li > .imMnMnBorder, #imMnMn ul ul li > a > .imMnMnBorder { background-image: url('../menu/sub.png'); }
#imMnMn ul ul li:hover > a > .imMnMnBorder, #imMnMn ul ul li:hover > .imMnMnBorder { background-image: url('../menu/sub_h.png'); }
#imMnMn ul ul li.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnFirst > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst > a > .imMnMnBorder { background-image: url('../menu/sub_f.png'); }
#imMnMn ul ul li.imMnMnFirst:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst:hover > .imMnMnBorder { background-image: url('../menu/sub_f_h.png'); }
#imMnMn ul ul li.imMnMnFirst.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnFirst.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_f.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnMiddle > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle > a > .imMnMnBorder { background-image: url('../menu/sub_m.png'); }
#imMnMn ul ul li.imMnMnMiddle:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle:hover > .imMnMnBorder { background-image: url('../menu/sub_m_h.png'); }
#imMnMn ul ul li.imMnMnMiddle.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnMiddle.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_m.png'); cursor: auto; }
#imMnMn ul ul li.imMnMnLast > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast > a > .imMnMnBorder { background-image: url('../menu/sub_l.png'); }
#imMnMn ul ul li.imMnMnLast:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast:hover > .imMnMnBorder { background-image: url('../menu/sub_l_h.png'); }
#imMnMn ul ul li.imMnMnLast.imMnMnSeparator:hover > a > .imMnMnBorder, #imMnMn ul ul li.imMnMnLast.imMnMnSeparator:hover > .imMnMnBorder { background-image: url('../menu/sub_l.png'); cursor: auto; }
#imMnMn .imMnMnImg img { vertical-align: middle; padding: 0px; border: none; }
#imMnMn li .imMnMnBorder .imMnMnImg img.imMnMnHoverIcon { display: none; }
#imMnMn li:hover > a > .imMnMnBorder > .imMnMnTxt > .imMnMnImg img.imMnMnDefaultIcon { display: none; }
#imMnMn li:hover > a > .imMnMnBorder > .imMnMnTxt > .imMnMnImg img.imMnMnHoverIcon { display: inline; }
#imMnMn ul ul li .imMnMnImg { display: block; height: 22px; line-height: 22px; float: left; cursor: pointer; cursor: pointer; }
#imMnMn ul ul li .imMnMnImg img { margin-left: 3px; }
#imMnMn ul ul li .imMnMnTxt { position: relative; overflow: hidden; text-align: left; margin: 0px; padding: 0px; line-height: 22px; height: 22px; }
#imMnMn ul ul li .imMnMnTxt .imMnMnTextLabel { display: inline-block; padding-left: 3px;  }
#imMnMn ul ul li .imMnMnLevelImg { z-index: 100; position: absolute; right: 3px; top: 0; display: inline-block; width: 7px; height: 22px; background-image: url('../res/imIconMenuLeft.gif'); background-position: center center; background-repeat: no-repeat; }

/* Normal font style */
#imMnMn ul ul .imMnMnTxt { height: 22px; text-decoration: none; text-align: left; font: normal normal 9.000pt Tahoma; color: #FFFFFF;}

/* Hover font style */
#imMnMn ul ul li:hover > a > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > ul li:hover a,
#imMnMn ul ul li:hover > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > div > ul li:hover a { text-decoration: none; color: #FFFFFF; }
#imMnMn ul .imMnMnSeparator, #imMnMn ul .imMnMnSeparator * { cursor: default; }

/* Section font style */
#imMnMn ul ul li.imMnMnSeparator > a > .imMnMnBorder .imMnMnTxt,
#imMnMn > ul > li > ul li.imMnMnSeparator:hover a,
#imMnMn ul ul li.imMnMnSeparator:hover > .imMnMnBorder .imMnMnTxt,
#imMnMn ul ul li.imMnMnSeparator > .imMnMnBorder .imMnMnTxt { text-decoration: none; color: #FFFFFF; font-style: normal; font-weight: bold; }
#imMnMn ul a, #imMnMn ul a:hover, #imMnMn ul a:visited { font: inherit; color: inherit; text-align: inherit; text-decoration: none; }

/* MENU POSITION : HORIZONTAL VerticalOneColumn */
#imMnMn ul .autoHide, #imMnMn ul div .autoHide { display: none; }

/* ######################### MAIN MENU POSITION ######################### */
#imMnMn { z-index:10000; }
#imMnMn > ul { position: relative; }
#imMnMn > ul > li > ul { position: absolute; }

/* First level menu style */
#imMnMn > ul > li { display: inline-block; width:120px; }
#imMnMn > ul > li span { display:block; padding:0;}
#imMnMn a { cursor: pointer; display: block; width:120px;}

/* ########################## SUB MENU POSITION ######################### */
#imMnMn.auto ul li ul li { top: 0px; }

/* Second level boxmodel*/
#imMnMn.auto ul li ul li ul { position: absolute; width: 115px;left: 100%; margin-top: -22px; }

/* Hide Levels */
#imMnMn.auto li:hover > ul.auto { display:block; }
#imMnMn.auto li ul.auto { display: none; }
#imMnMn ul ul li .imMnMnBorder { overflow: hidden; }

/* ========================= RESPONSIVE MOBILE ========================= */
/* Fix para conflicto con template.css */
#imMnMn li {
    display: inline-block !important;
}

#imMnMn ul ul li {
    display: block !important;
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
    /* Contenedor principal responsivo */
    #imPage {
        width: 100% !important;
        margin: 5px !important;
        max-width: 100% !important;
    }
    
    /* Menú principal responsivo */
    #imMnMn {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        height: auto !important;
        padding: 5px !important;
    }
    
    /* Lista principal como flexbox */
    #imMnMn > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Botones del menú principal */
    #imMnMn > ul > li {
        width: auto !important;
        min-width: 60px !important;
        max-width: 120px !important;
        margin: 2px !important;
        flex: 0 1 auto !important;
        float: none !important;
    }
    
    /* Texto del menú principal */
    #imMnMn > ul > li .imMnMnFirstBg > .imMnMnTxt {
        font-size: 7pt !important;
        padding: 0 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: auto !important;
    }
    
    /* Fondo de botones principales */
    #imMnMn > ul > li .imMnMnFirstBg {
        width: auto !important;
        min-width: 60px !important;
        height: 20px !important;
        background-size: 100% 100% !important;
    }
    
    /* Submenús en móvil */
    #imMnMn ul ul {
        width: 200px !important;
        position: absolute !important;
        top: 22px !important;
        left: 0 !important;
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    }
    
    /* Botones de submenú en móvil */
    #imMnMn ul ul li {
        width: 200px !important;
        height: 30px !important;
    }
    
    #imMnMn ul ul li a {
        height: 30px !important;
        width: 200px !important;
    }
    
    #imMnMn ul ul li .imMnMnTxt {
        line-height: 30px !important;
        height: 30px !important;
    }
    
    /* Contenido responsivo */
    #imContent {
        width: 100% !important;
        padding: 5px !important;
    }
    
    #imContentGraphics {
        width: 100% !important;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
    #imMnMn > ul {
        flex-direction: column !important;
    }
    
    #imMnMn > ul > li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 !important;
    }
    
    /* Header responsivo */
    #imHeader {
        height: auto !important;
        padding: 10px !important;
    }
}

/* End of file menu.css */