@import "Hoster_Colors.css";
/* 
    ===============
    Versión MOBILE
    ===============
*/
@media only screen and (max-width : 754px)
{
    .column{float:left;}
    .column{clear:both;}
    .column tr td{padding:0px;}
    .img-responsive{float: left; width: 100%; height: auto; }
    .ShowWhenSMALL{display: table}
    .ShowWhenBIG{display: none}
    .CL_MENU
    {
        width:100%!important;
    }
    .CL_WORKSPACE
    {
        width:100%!important;
    }
}
/*
    ===============
    Versión DESKTOP
    ===============
*/
@media only screen and (min-width : 755px)
{
    .column{float:left;}
    .column tr td{padding:0px;}
    .column-wrap{padding:0!important;margin:0 auto;max-width:960px!important;}
    .column table{width:100%;}
    .img-responsive{}
    .ShowWhenSMALL{display: none}
    .ShowWhenBIG{display: table; width: 960px}
    .CL_MENU
    {
        WIDTH: 145px!important;
        DISPLAY: inline;
    }
    .CL_WORKSPACE
    {
        WIDTH: 600px!important;
        DISPLAY: inline;
    }
}
html { width: 100%; }
table { border-spacing: 0px; }
th, td { padding: 0px; }

.HelpIcon{
    cursor: pointer;
    border-radius: 0px;
    background-image: url("/graphics/IC_INFO_16.png");
    border: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    width: 38px;
    height: 16px;
}
.HelpIcon:hover{
    background-image: url("/graphics/IC_INFOH_16.png");
}

.Assistant_Full {
    background-color: var(--main-frame-back-color); 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%;
    height: 100%;
    max-height: 400px;
    z-index: 100;
    border-bottom: 1px solid black;
}
.Assistant_Compact {
    background-color: var(--main-frame-back-color); 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 77px;
    height: 74px;
    z-index: 100;
    cursor: pointer;
    border-bottom: 1px solid black;
    border-right: 1px solid #D0D0D0;
    cursor: pointer;
}
.Assistant_None {
    background-color: transparent;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 77px;
    height: 74px;
    z-index: 100;
    cursor: default;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

table, tr, td{
    border-spacing: 0px!important;
}

.gradbar {
    height: 9px;
    background: var(--main-frame-back-color);
    background: -webkit-linear-gradient(#91a4bd, var(--main-frame-back-color));
    background: -o-linear-gradient(#91a4bd, var(--main-frame-back-color));
    background: -moz-linear-gradient(#91a4bd, var(--main-frame-back-color));
    background: linear-gradient(#91a4bd, var(--main-frame-back-color));
}

.titleText {
    color: white; text-shadow: 2px 1px #697f74;
}

.LANGTD {
    padding-top: 0px;
    vertical-align: top; 
    text-align: center; 
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #005000;
    font-family: verdana;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: table-cell;
}

.MAINMENU_ON {
    width: 67px;
    text-align: left;
    background-color: var(--main-frame-back-color);
}

.MAINMENU_OFF {
    display: none
}

.MainMenuBtn {
    width: 74px;
    color: var(--main-frame-text-color);
    border: 1px solid transparent;
    background-position: center 5px;
    background-repeat: no-repeat;
    margin: 0px 1px 0px 1px;
    height: 62px;
    font-size: 13px;
    padding: 36px 0px 0px 0px;
}

    .MainMenuBtn:hover {
        border: 1px solid rgba(220, 220, 220, 0.8);
    }

.MainMenuBtnOff {
    width: 74px;
    color: gray;
    border: 1px solid transparent;
    background-position: center 5px;
    background-repeat: no-repeat;
    margin: 0px 1px 0px 1px;
    height: 62px;
    font-size: 13px;
    padding: 36px 0px 0px 0px;
    opacity: 0.7;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/* MÓVIL */
@media only screen and (max-width : 599px)
{
        .HIDE_MOBILE{
            display: none
        }
        .HIDE_DESKTOP{
        }
        .TOPMENU_ON{
            width: 100%
        }
        .TOPMENU_OFF{
            display: none
        }
        .PAGE_ON{
            width: 100%
        }
        .PAGE_OFF{
            display: none
        }
        .buttonsAlign{
            text-align: center;
        }
        .BK_LOGO{
            background-image: url(graphics/bk_hostermini.png); background-position: center center; background-repeat: no-repeat; 
        }
}
/* ESCRITORIO */
@media only screen and (min-width : 600px)
{
        .HIDE_MOBILE{
        }
        .HIDE_DESKTOP{
            display: none
        }
        .TOPMENU_ON{
            width: 100%
        }
        .TOPMENU_OFF{
            width: 100%
        }
        .PAGE_ON{
            width: 100%
        }
        .PAGE_OFF{
            width: 100%
        }
        .buttonsAlign{
            text-align: left;
        }
        .BK_LOGO{
            background-image: url(graphics/bk_hoster.png); background-position: center center; background-repeat: no-repeat; 
        }
}

/* ESCRITORIO CON ALTURA SUFICIENTE*/
@media only screen and (min-width : 600px) and (min-height: 600px)  {
    .LEFTMENU {
        position: fixed;
        left: 0px;
        top: 74px;
        width: 78px;
    }
    .FIXHEAD {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
    }
}
/* ESCRITORIO CON ALTURA INSUFICIENTE*/
@media only screen and (min-width : 600px) and (max-height : 599px) {
    .LEFTMENU {
        width: 100%;
    }
    .FIXHEAD {
    }
}
/* MÓVIL */
@media only screen and (max-width : 599px) {
    .LEFTMENU {
        width: 100%;
    }
    .FIXHEAD {
    }
}