/*
Genericos
*/
.app-header{display:none !important;}
html, body{padding:0;margin:0;font-family:'Open Sans','Arial',sans-serif;font-size:13px;color:#111;}
body{background:url('/static/images/app/bg.png') repeat-x 0 0 #fff;}
label{cursor:pointer;}
select{width:150px;}
a,a:active{color:#0965b2;text-decoration:none;}
a:hover{text-decoration:underline;}

/*
Wrapper
*/
.app-subwrapper{
    width  : 800px;
    margin : 0 auto; 
}

/*
Estilos de formulario
*/
.fw_form_button{
    background: #EBEBEB;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    color: #333333;
    font-weight: bold;
    padding: 3px 5px;
    cursor : pointer; 
}.fw_form_button:hover{
    border: 1px solid #aaa;
}.fw_form_button:active{
    position : relative;
    top:1px;
}

/*
Preload público
*/
.app-public-page .app-public-preload{
    width       : 517px; 
    height      : 156px;
    margin      : 0 auto;
    background  : url('/static/images/app/logo-publico/517x156/gris.png') no-repeat 50% 50% transparent;
}.app-public-preload .app-preload-text{
    color       : #cbcbcb;
    font-size   : 17px;
    margin-left : 370px;
    margin-top  : 126px;
    position    : absolute; 
    font-weight : bold; 
    display     : none;
}.app-public-page .app-public-preload .app-preload-text{
    display : inherit;
}.app-public-preload .app-preload-image{
    background  : url('/static/images/app/logo-publico/517x156/color.png') no-repeat 50% 50% transparent;
    width       : 100%;
    height      : 156px;
    margin      : auto; 
}.app-public-page .app-public-preload .app-preload-image{
    width : 0;
}

/*
Texto público
*/
.app-container-public-text{
    float   : left; 
    width   : 483px;
}.app-public-page .app-container-public-text{
    display : none;
}.app-container-public-text h1{
    color     : #0965b2;
    padding   : 0;
    margin    : 0; 
    font-size : 26px; 
}.app-container-public-text p{
    padding : 0;
    margin  : 5px 0; 
}.app-container-public-text .separator{
    height          : 0;
    border-top      : 1px solid #ddd;
    border-bottom   : 1px solid #fff;
    margin          : 15px 0 10px 0;
}.app-container-public-text img{
    width : 100%; 
}

/*
Formulario de inicio de sesión
*/
.app-container-public-page{
    margin        : auto;
    margin-top    : 50px; 
    margin-bottom : 10px; 
}.app-public-page .app-container-public-page{
    width         : 270px;
    display : none;
}.app-container-public-page .app-container-login-form{
    float : right; 
}.app-container-public-page .app-container-login-form .app-login-panel{
    background : #f8f8f8;
    border     : 1px solid #fff; 
    box-shadow : 0px 0px 5px -2px rgba(0, 0, 0, 0.5); 
}.app-container-public-page .app-container-login-form .app-login-header{
    background    : #eee;
    padding       : 5px 0;
    text-align    : center;
    font-size     : 15px; 
    border-bottom : 1px solid #fff; 
}.app-container-public-page .app-container-login-form .app-login-form{
    padding : 10px; 
    border-top : 1px solid #eee; 
}.app-container-public-page .app-container-login-form .app-login-form{
    padding : 10px; 
}.app-container-public-page .app-container-login-form .row{
    margin : 5px 0 2px 0;  
}.app-container-public-page .app-container-login-form .app-login-form .lbl{
    margin : 5px 0 2px 0; 
}.app-container-public-page .app-container-login-form .app-login-form .formItem{
    width   : 260px;
    padding : 8px; 
}.app-container-public-page .app-container-login-form .app-login-form .formItem:focus{
    border-color : #aaa; 
}

/*
Banner
*/
.app-banner{ 
    margin-top : 10px; 
}.app-banner img{
    width : 100%;
}

/*
Preload en modal window
*/
.ui-dialog.app-public-preload{
    box-shadow          : 0 0 11px -4px rgba(50,58,150,0.7);
    -webkit-box-shadow  : 0 0 11px -4px rgba(50,58,150,0.7); 
    -moz-box-shadow     : 0 0 11px -4px rgba(50,58,150,0.7); 
    border              : 1px solid #fff;
    background          : #efefef; 
}.ui-dialog.app-public-preload .ui-dialog-titlebar{
    display : none;
}.ui-dialog.app-public-preload .title{
    font-size   : 14px;
    padding     : 3px 0;
    font-weight : bold; 
    color       : #0965b2;
}.ui-dialog.app-public-preload .title.err{
    color       : #900;
}.ui-dialog.app-public-preload .msgError.msg{
    color       : #900;
}.ui-dialog.app-public-preload .app-dialog-preload-img{
    background : url('../images/app/public-preload.gif') no-repeat 50% 50% transparent; 
    height     : 50px; 
}.ui-dialog.app-public-preload .ui-dialog-buttonpane{
    background : transparent !important; 
    border-top : 1px solid #ddd !important;
}

/*
Formulario de cambio de contraseña
*/
.ui-dialog.app-public-preload .app-change-password-message{

}.ui-dialog.app-public-preload .app-change-password-message .contForm{
    margin : 15px 0 8px 0; 
}.ui-dialog.app-public-preload .app-change-password-message .contForm .item{
    margin : 5px 0; 
}.ui-dialog.app-public-preload .app-change-password-message .contForm .item .lbl{
    margin      : 0 0 3px 0;
    font-weight : bold;
    color       : #0965b2;
}.ui-dialog.app-public-preload .app-change-password-message .contForm .contErrors{
    color   : #900;
    display : none;
}.ui-dialog.app-public-preload .app-change-password-message .contForm .contErrors .itm{
    margin : 2px 0;
}

/*
Footer
*/
.app-container-public-footer{
    display   : none; 
    font-size : 11px;
}.app-container-public-footer .app-public-footer{
    margin      : auto; 
    padding     : 10px 0;
    border-top  : 1px solid #ccc;
}.app-container-public-footer .app-public-footer .app-public-legal-menu{
    font-size : 11px;
    color     : #aaa;
}

/*
Media query para los tamaños de pantalla inferior a 800px
*/
@media (max-width: 810px) {
    /*
    Cambiamos el ancho de toda la web
    */
    .app-subwrapper{
        width : 500px; 
    }
    /*
    El texto público cambia ligeramente:
        - Ya no flota
        - Tiene margen superior 
        - Se le aplica un borde superior para separarlo del contenido que tiene arriba
    */
    .app-container-public-text{
        margin-top  : 10px;
        float       : none;
        width       : 100%; 
        border-top  : 1px solid #ddd;
        padding-top : 10px;
    }
    /*
    El panel de login ya no flota, y pasa a ocupar el 100% del ancho
    */
    .app-container-public-page .app-container-login-form{
        float : none;
        width : 100%; 
    }
    /*
    Cambiamos la forma en la que se muestra el botón "Entrar", para que sea más grande
    y facil de pulsar en móviles
    */
    .app-container-public-page .app-container-login-form .fwFormButton{
        width       : 100%;
        font-size   : 18px;
        padding     : 5px 0;
        font-weight : normal; 
    }    
    /*
    Mensaje legal de cookies
    */
    .app-cookies-message-wrapper{
        box-shadow          : 0 0 4px -2px rgba(0, 0, 0, 0.3);
        -moz-box-shadow     : 0 0 4px -2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow  : 0 0 4px -2px rgba(0, 0, 0, 0.3);
    }.app-cookies-message-wrapper .app-mobile-button-canvas{
        top : -46px;
    }.app-cookies-message-wrapper .app-cookies-message-canvas{
        width   : auto !important;
        padding : 8px 15px !important;
    }.app-cookies-message-wrapper .app-cookies-message-canvas .app-web-button-canvas{
        display : none;
    }.app-cookies-message-wrapper .app-mobile-button-canvas{
        display : inline !important;
    }.app-cookies-message-wrapper .app-cookies-message-button{
        box-shadow          : 0 0 4px 1px rgba(0, 0, 0, 0.4);
        -moz-box-shadow     : 0 0 4px 1px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow  : 0 0 4px 1px rgba(0, 0, 0, 0.4);
    }
}
/*
Media query para los tamaños de pantalla inferior a 500px
*/
@media (max-width: 540px) {
    /*
    Cambiamos el ancho de toda la web
    */
    .app-subwrapper{
        width : 90%; 
    }
    /*
    Cambiamos el margin-top que separa el contenido de la página,
    del logo.
    */
    .app-container-public-page {
        margin-top : 20px;
    }
    /*
    El texto público para a estar justificado 
    a ambos lados, con excepción del título, que siempre
    estará a la izquierda
    */
    .app-container-public-text{ 
        text-align : justify; 
        font-size  : 14px; 
    }.app-container-public-text h1{
        text-align : left;
        font-size  : 28px; 
    }
    /*
    La imagen del logo cambia, tanto el propio logo, 
    como el tamaño del contenedor.
    Además, el texto animado que acompaña al preload, se mueve al sitio 
    donde le pertenece, siendo relativo al las nuevas dimensiones del logo.
    */
    .app-public-page .app-public-preload{
        width       : 270px; 
        height      : 81px;
        background  : url('/static/images/app/logo-publico/270x81/gris.png') no-repeat 50% 50% transparent;
    }.app-public-preload .app-preload-image{
        background  : url('/static/images/app/logo-publico/270x81/color.png') no-repeat 50% 50% transparent;
        height      : 81px;
    }.app-public-preload .app-preload-text {
        font-size   : 15px;
        font-weight : normal;
        margin-left : 98px;
        margin-top  : 82px;
    }

    /*
    Cambiamos el ancho del modal window que pregunta al usuario
    si desea eliminar la sesión activa, cuando el usuario con el que intenta
    entrar ya se encuentra logueado.
    */
    .ui-dialog.app-dialog-delete-active-session{
        width : 90% !important; 
    }.ui-dialog.app-dialog-delete-active-session .ui-dialog-buttonset{
        width : 100% !important;
    }.ui-dialog.app-dialog-delete-active-session .ui-dialog-buttonpane{
        padding : 5px 2px !important; 
    }.ui-dialog.app-dialog-delete-active-session .ui-button{
        width     : 100% !important;
        margin    : 4px 0px 3px !important;
        font-size : 16px !important; 
    }

    /*
    El pie legal pasa a estar debajo
    */
    .app-container-public-footer .app-public-footer{
        text-align : center; 
    }.app-container-public-footer .app-public-footer .app-public-legal-menu{
        float        : none;
        margin-bottom: 5px;
    }
}