/* NO PONER CARACTERES EXTRANYOS EN LOS COMENTARIOS. Da un INVALID ARGUMENT en IE. */ /* Vease acentos, parentesis, enyes, etc. */

/* Comprobamos en el padre, si no, en el frame actual, y si no usamos uno por defecto */
@precolor: `top.bgColor || window.bgColor || "deepskyblue"`;
@precustomcolor: `top.bgCustomColor || window.bgCustomColor || @{precolor}`;
@preforecolor: `top.foreColor || window.foreColor || "white"`;

@color: ~`@{precolor}`;
@customColor: ~`@{precustomcolor}`;
@foreColor: ~`@{preforecolor}`;
@gray: #f7f7f7;

*:focus {
    outline: none;
}

.mainbg {
    background: @color;
}

h4.frmtitle, .frmtitlegf {
    border-bottom: 1px solid @color;
    color: gray;
}

.frmhbut, .frmbutdoc {
    border: 1px solid @color;
    background: @color;
}

.barbuttonover {
    background-color: @color;
    border: 1px solid @color;
}

.ideo-win-active .ideo-win-closeIcon, .ideo-win-inactive .ideo-win-closeIcon {
    background: url("../img/close.png") 0 0 no-repeat @color;
}

.ideo-win-active .ideo-win-maxIcon, .ideo-win-inactive .ideo-win-maxIcon {
    background: url("../img/maximize.png") 0 0 no-repeat @color;
}

.ideo-win-active .ideo-win-maxrestoreicon, .ideo-win-active .ideo-win-minrestoreicon , .ideo-win-inactive .ideo-win-maxrestoreicon, .ideo-win-inactive .ideo-win-minrestoreicon{
    background: url("../img/restore.png") 0 0 no-repeat @color;
}
.ideo-win-active .ideo-win-minIcon , .ideo-win-inactive .ideo-win-minIcon {
    background: url("../img/minimize.png") 0 0 no-repeat @color;
}

/*_box.css */
.active-scroll-top , .active-scroll-corner {
    /*.active-scroll-top {*/
    border-bottom: 2px solid @color;
    border-top: 1px solid lightgray;
}

.active-selection-true, .active-selection-true .active-row-cell , .active-selection-true:hover {
    color: white !important;
    background-color: @color !important;
}

#tabBar {
    border-bottom: 2px solid @color !important;
    width: 99% !important;
}
#header-scroller {
    overflow: hidden;
    width: 100%;
}
#header {
    overflow: hidden;
    height:34px;
    float:left;
    padding: 0;
    white-space: nowrap;
}

#header>div div {
    display: table;
    height: 100%;
    text-align: center;
    width: 100%;
}
#header>div div span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
}
#header>div.active div span {
    color: @foreColor !important;
    /*font-weight: bold;*/
}
#header>div {
    display: inline-block;
    padding: 0px 5px;
    text-decoration: none;
    color: gray !important;
    font-family: Verdana !important;
    font-size: 8pt !important;
    height: 28px;
    cursor: pointer;
    width: 80px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 5px;
    background-color: #F7F7F7;
    border: 1px solid lightgray !important;
    border-bottom: none;
}

#header>div.active {
    background-color: @color !important;
    border: 1px solid @color;
    margin-top: 0px;
    border-bottom: none;
}

#header>div.over {
    background-color: #F0F0F0;
}

#arrowTabs {
    padding-top: 12px;
}
#arrowTabs div {
    float:right;
    display: block;
    padding: 0px 5px;
    text-decoration: none;
    color: gray;
    font-family: Verdana;
    font-size: 14pt;
    height: 20px;
    cursor: pointer;
    width: 20px;
    text-align: center;
    background-color: #F7F7F7;
    border: 1px solid lightgray !important;
    border-bottom: none;
}
#arrowTabs div.over {
    background-color: #F0F0F0;
}


table.tbPagos th {
    background-color: #e8e8e8!important;
    color:@color!important;
    font-size: 13px;
    padding-top:3px;
    text-align: left;
}
table.tbPagos td.pie {
    background-color: #ffffff!important;
    border-top:0px solid #ffffff!important;
    font-size:10px;
    color:@color;
}


/* NUEVOS ESTILOS GWT-EXT */


/*div {
    font-family: Verdana, Arial, sans-serif !important;
}*/

body {
    margin: 0 !important;
    padding: 0 !important;
}

/* TOOLBARS Y PANELS */

ul.x-tab-strip-bottom, ul.x-tab-strip-top, .x-tab-panel-footer, .x-tab-panel-header { /* Barra de pestanyas */
    /*    background: @gray !important;*/
    background: white !important;
    border: none !important;
}

ul.x-tab-strip-top, ul.x-tab-strip-bottom {
    border: none !important;
}

.x-toolbar, .x-panel-tl, .x-panel-tc, .x-panel-tr, .x-panel-ml, .x-panel-mc, .x-panel-mr, .x-panel-bl, .x-panel-bc, .x-panel-br, .x-border-layout-ct { /* Paneles */
    background: white !important;
    /* background: transparent !important;*/
    border: none !important;
}

.x-tab-panel-header { /* Barra de pestanyas superior */
    padding: 0 !important;
    padding-top: 3px !important;
}

.x-tab-panel-footer { /* Barra de pestanyas inferior */
    padding: 0 !important;
    padding-bottom: 3px !important;
}

ul.x-tab-strip li { /* Distancia entre tabs */
    margin-left: 5px !important;
}

.x-tab-left, .x-tab-right, .x-tab-strip-inner { /* Pestanyas */
    background: @gray !important;
}

.x-tab-strip-over a, .x-tab-strip-over em, .x-tab-strip-over span { /* Pestanyas over */
    background: #f0f0f0 !important;
}

.x-tab-strip-active a, .x-tab-strip-active em, .x-tab-strip-active span {  /* Pestanyas activas */
    background: @color !important;
    color: white;
}

ul.x-tab-strip-bottom .x-tab-right, .x-tab-right {
    border-right: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
}
.x-tab-right {
    border-top: 1px solid lightgray !important;
}
ul.x-tab-strip-bottom .x-tab-right {
    border-bottom: 1px solid lightgray !important;
    border-top: none !important;
}


.x-tab-strip-active .x-tab-right, ul.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
    border-right: 1px solid @color !important;
    border-left: 1px solid @color !important;
}
.x-tab-strip-active .x-tab-right {
    border-top: 1px solid @color !important;
}
ul.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
    border-bottom: 1px solid @color !important;
}

.x-tab-strip-active span.x-tab-strip-text {  /* Texto de las pestanyas */
    color: @foreColor !important;
}

.x-toolbar .ytb-sep { /* Separador en la toolbar */
    background: none !important;
}

.x-panel-body {
    border: none !important;
}

.x-panel-header {
    background: @gray !important;
    border-top: none !important;
}
.x-panel-header-text { /* Texto cabeceras paneles */
    font-size: 10pt !important;
}

.x-tab-panel .x-tab-panel-header {
    border-bottom: 2px solid @color !important;
}

.x-tab-panel-footer .x-tab-strip-bottom {
    border-top: 2px solid @color !important;
}

.x-tab-panel-noborder .x-tab-panel-header-noborder {
    border: none;
}

.x-border-panel .x-panel-tl, .x-border-panel .x-panel-tr, .x-border-panel .x-panel-tc, .x-border-panel .x-panel-tc .x-panel-header { /* Cabeceras de los paneles laterales, como acordeones. Originalmente para FormGeneratorGWT */
    background: @color !important;
    color: @foreColor !important;
    margin-bottom: 1px;
}

.x-panel-grey, .x-panel-gray {
    background: @gray !important;
}

.x-panel-gray .x-panel-ml,
.x-panel-gray .x-panel-mc,
.x-panel-gray .x-panel-mr,
.x-panel-gray .x-panel-bl,
.x-panel-gray .x-panel-br,
.x-panel-gray .x-panel-bc
{
    background: transparent !important;
}


.x-toolbar-with-separators .ytb-sep { /* Separador en la toolbar */
    background: @color !important;
    width: 1px !important;
}

/* GRID Y ARBOLES */

.x-grid3, .x-grid-panel {
    border: 1px solid lightgray !important;
    background: @gray !important;
}

.x-grid3-viewport {
    background: white !important;
}

.x-grid3-row-over, .x-tree-node-over { /* Filas Over*/
    border: 1px solid transparent !important;
    background-color: @gray !important;
}

.x-tree-node-over {
    border: none !important;
}

div.x-grid3-row-selected, .x-tree-selected {  /* Filas seleccionadas */
    border: 1px solid transparent !important;
    background-color: @color !important;
    color: @foreColor !important;
}

.x-tree-node .x-tree-selected {
    border: none !important;
}

.x-grid3-row div, .x-tree-node span {
    color: #333;
}

.x-grid3-row-selected div, .x-tree-selected span {
    color: @foreColor !important;
}


.x-grid3-header {
    background: white !important;
    border-bottom: 2px solid @color !important;
}

.x-grid3-hd-over, .x-grid3-hd-inner {
    background: white !important;
    cursor: pointer;
}

.x-grid3-hd-btn { /* Boton de menu que sale en las cabeceras de los grids */
    background: url('../gwtModule/img/grid3-hd-btn.png') no-repeat scroll left center @color !important;
    padding-right: 3px !important; 
}

.x-grid3-hd-row td {
    border-left: none !important;
    border-right: 1px solid #f0f0f0 !important;
}

.ext-el-mask-msg {
    background: @gray !important;
    border: 1px solid gray !important;
}
.ext-el-mask-msg div {
    border: none !important;
    background: none !important;
    font-weight: normal !important;
    color: gray !important;
}

/* FORMS */

.x-form-focus {
    border-color: @color !important;
}

.ext-ie .x-form-text {
    margin: 0 !important;
}

/* COMBOS */

.x-combo-list-item,  .x-combo-selected {
    border: none !important;
}
.x-combo-selected {
    background: @color !important;
    color: @foreColor;
}

/* WINDOWS */

.x-window {
    border: 1px solid lightgray !important;
}
.x-window-tl, .x-window-tc, .x-window-tr, .x-window-ml, .x-window-mc, .x-window-mr, .x-window-bl, .x-window-bc, .x-window-br {
    background: white !important;
    border: none !important;
}

.x-window-body {
    border: none !important;
}

.x-window-dlg .ext-mb-text, .x-window-dlg .x-window-header-text {
    color: gray;
}

.x-window .x-btn-left, .x-window .x-btn-right, .x-window .x-btn-center { 
    background-image: none !important;
}

.x-window-dlg .ext-mb-question {
    background-image: url('../img/window_icon-question.png') !important;
}
.x-window-dlg .ext-mb-warning {
    background-image: url('../img/window_icon-warning.png') !important;
}
.x-window-dlg .ext-mb-error {
    background-image: url('../img/window_icon-error.png') !important;
}
.x-window-dlg .ext-mb-info {
    background-image: url('../img/window_icon-info.png') !important;
}

/* WINDOW BUTTON SPRITES */

.x-tool-, .x-tool-close, .x-tool--over, .x-tool-close-over, .x-tool-help, .x-tool-help-over, .x-tool-maximize, .x-tool-maximize-over, .x-tool-restore, .x-tool-restore-over, .x-tool-minimize, .x-tool-minimize-over {
    background-color: @color !important;
    background-position: 0 0 !important;
}
.x-tool--over, .x-tool-close-over, .x-tool-help-over, .x-tool-maximize-over, .x-tool-restore-over, .x-tool-minimize-over {
    background-position: 0 -15px !important;
}
.x-tool-, .x-tool-close, .x-tool--over, .x-tool-close-over {
    background-image: url('../img/close_gwt.png') !important;
}
.x-tool-help, .x-tool-help-over {
    background-image: url('../img/help_gwt.png') !important;
}
.x-tool-maximize, .x-tool-maximize-over {
    background-image: url('../img/maximize_gwt.png') !important;
}
.x-tool-restore, .x-tool-restore-over {
    background-image: url('../img/restore_gwt.png') !important;
}
.x-tool-minimize, .x-tool-minimize-over {
    background-image: url('../img/minimize_gwt.png') !important;
}

/* BOTONES */

.x-btn-left, .x-btn-right, .x-btn-center { /* Normal */
    background: @gray !important;
}
.x-toolbar .x-btn-left, .x-toolbar .x-btn-right, .x-toolbar .x-btn-center { /* Normal */
    background: white !important;
}
.x-btn-over .x-btn-left, .x-btn-over .x-btn-right, .x-btn-over .x-btn-center { /* Over */
    background: #f0f0f0 !important;
}

.x-btn-click .x-btn-left, .x-btn-click .x-btn-right, .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-left, .x-btn-menu-active .x-btn-right, .x-btn-menu-active .x-btn-center { /* Down y focus */
    background: @color !important;
}

.x-btn button { /* Texto botones */
    color: #333 !important;
}

.x-btn-over button { /* Texto botones over */
    color: black !important;
}

.x-btn-click button,  .x-btn-menu-active button, .x-toolbar .x-btn-click button,  .x-toolbar .x-btn-menu-active button { /* Texto botones down y focus */
    color: @foreColor !important;
}

.x-item-disabled .x-btn-text {
    color: #AAAAAA !important;
}

.x-table-layout .x-btn, .x-table-layout .x-btn-over, .x-table-layout .x-btn-click, .x-table-layout .x-btn-menu-active {
    border: 1px solid lightgray !important;
}

.x-window .x-btn {
    border: 1px solid lightgray !important;
}

.x-btn-with-menu, .x-toolbar .x-btn {
    border: none !important;
}

.x-toolbar .x-item-disabled, .x-item-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
    filter: alpha(opacity=50) !important;
    -moz-opacity: 0.5 !important;
    -khtml-opacity: 0.5 !important;
    opacity: 0.5 !important;
}

.x-btn-text-icon .x-btn-center .x-btn-text {
    padding-bottom: 4px !important;
}

/* MENUS */

.x-menu, .x-menu-list {
    background: white !important;
}

.x-menu {
    border: 1px solid lightgray !important;
}

.x-menu-item-active {
    background: @gray !important;
}

/* PROGRESS BAR */

.x-progress-inner {
    background: white !important;
}

.x-progress-bar {
    background: @customColor !important;
    padding-bottom: 2px !important;
    border: none !important;
}

.x-mask-loading div {
    background: url("../gwtModule/js/ext/resources/images/default/grid/loading.gif") no-repeat scroll 5px 5px #FBFBFB !important;
}

.bgColorPlataforma {
    background-color: @color !important;
}
.foreColorPlataforma {
    color: @foreColor !important;
}

/* SMARTGWT */

.treeCellSelected, .treeCellSelectedDark, .treeCellSelectedOver, .treeCellSelectedOverDark, .menuTitleFieldOver, .menuIconFieldOver, .menuOver {
    background: @color !important;
    color: @foreColor !important;
}