<!-- Amarillo extra light: #F8F4DE -->
<!-- Amarillo Claro:       #F6E584 -->
<!-- Amarillo Oscuro:      #F0C300 -->
<!-- Azul Oscuro:          #102D65 vs. #4A679F-->
<!-- Gris extra claro:     #E5E5E5 -->
<!-- Azul claro - oscuro:  #7C9CBE vs. #B4C5D6-->

BODY
{
	background-color: #FFFFFF;
	margin: 0px;
}

FONT
{
	font-family: Arial;
	font-size: 12px;
}

A
{
	font-family: Arial;
	font-size: 12px;
}

.form-label-cell
{
	padding-right: 10px;
	padding-bottom: 5px;
	text-align: right;
}

.form-label-text
{
}

.form-input-cell
{
	padding-bottom: 5px;
}

#logon-table
{
	border: solid 1px #CCCCCC;
	background-color: #FFFFFF;
}

.button
{
	background-color: #102D65;
	color: #FFFFFF;
}

.footer-text
{
	font-size: 10px;
}

.layout-table
{
	width: 100%;
	padding-left: 20px; 
	padding-right: 20px;
}

.screen-heading-table
{
	width: 100%;
	padding-left: 20px; 
	padding-right: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.screen-heading-text
{
}

.screen-name-cell
{
}

.screen-name-text
{
	color: #102D65;
	font-size: 14px;
	font-weight: bold;
}

<!-- estilo de la celda del área de mensajes -->
.screen-heading-message-cell
{
}

<!-- estilo del texto de los mensajes -->
.screen-heading-message-cell
{
}

<!- *******************************************************************************************************  -->
<!-- pestañera -->
.tab-table
{
}

.tab-selected-text
{
}

<!-- nota: al cambiar este estilo debe cambiarse tambien el color del borde de carga-section-table -->
.tab-selected-left-cell
{
	background-color: #F0C300;
	padding-bottom: 10px;
	text-align: left;
}

.tab-selected-middle-cell
{
	background-color: #F0C300;
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
	text-align: center;
}

.tab-selected-right-cell
{
	background-color: #F0C300;
	padding-bottom: 10px;
	text-align: right;
}

.tab-unselected-anchor
{
	text-decoration: none;
}

.tab-unselected-text
{
	color: #FFFFFF;
}

.tab-anchor
{
	text-decoration: none;
}

.tab-unselected-left-cell
{
	background-color: #102D65;
	padding-bottom: 10px;
	text-align: left;
}

.tab-unselected-middle-cell
{
	background-color: #102D65;
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
	text-align: center;
}

.tab-unselected-right-cell
{
	background-color: #102D65;
	padding-bottom: 10px;
	text-align: right;
}

.tab-space-cell
{
}

.tabed-cell
{
	background-color: #B4C5D6;
}

<!- *******************************************************************************************************  -->
<!-- calendario -->
.calendar-layout-table
{
}

.calendar-body-table
{
	border: solid 1px #7C9CBE;
	margin: 5px;
}

.calendar-heading-cell
{
	background-color: #102D65;
	border: solid 1px #7C9CBE;
	padding: 5px;
	text-align: 'center';
}

.calendar-heading-text
{
	font-size: 10px;
	color: #FFFFFF;
}

.calendar-noday-cell
{
	border: solid 1px #7C9CBE;
	padding: 5px;
	text-align: 'center';
}

.calendar-noday-text
{
	font-size: 10px;
}


#calendar-future-cell
{
	background-color: #B4C5D6;
	border: solid 1px #7C9CBE;
	padding: 5px;
	text-align: 'center';
}


#calendar-future-text
{
	font-size: 10px;
}


.calendar-day-cell
{
	border: solid 1px #7C9CBE;
	background-color: #FFFFFF;
	padding: 5px;
	text-align: 'center';
}

.calendar-day-anchor
{
	text-decoration: none;
	cursor: hand;
}

.calendar-day-text
{
	font-size: 10px;
	color: #000000;
}

.calendar-holiday-cell
{
	border: solid 1px #7C9CBE;
	background-color: #DDDDDD;
	padding: 5px;
	text-align: 'center';
}

.calendar-holiday-anchor
{
	text-decoration: none;
	cursor: hand;
}

.calendar-holiday-text
{
	font-size: 10px;
	color: #000000;
}

.calendar-today-cell
{
	border: solid 1px #7C9CBE;
	background-color: #F6E584;
	padding: 5px;
	text-align: 'center';
}

.calendar-today-anchor
{
	text-decoration: none;
	cursor: hand;
}

.calendar-today-text
{
	font-size: 10px;
	color: #000000;
}

.calendar-month-cell
{
	text-align: center;
}

<!- *******************************************************************************************************  -->
<!-- tabla super del area de carga, encierra la pestañera y la tabla de secciones-->
.carga-main-table
{
	width: 100%;
}

<!-- tabla de secciones, separa los titulos y los divs de carga -->
.carga-section-table
{
	border: solid 3px #F0C300;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

<!-- celda de la tabla de secciones que contiene el titulo de la seccion de carga -->
.carga-section-cell
{
	padding-bottom: 0px;
}

<!-- texto del titulo de las secciones -->
.subsection-label-text
{
	font-size: 14px;
	font-weight: bold;
}

<!-- de la tabla de secciones que contiene la botonera -->
.carga-button-cell
{
	text-align: right;
	padding-top: 20px;
	padding-bottom: 20px;
}

<!-- tabla de la botonera -->
.botonera-table
{
	padding-left: 10px;
}

<!-- celda de la tabla de secciones que contiene la tabla de carga -->
.carga-area-cell
{
	width: 760px;
}

<!-- div que encierra el area de carga -->
.carga-div
{
	overflow-x: scroll;
	overflow-y: none;
	vertical-align: top;
}


#ingresos-venta-static-div
{
	width: 40px;
	overflow-x: scroll;
}


#ingresos-venta-div
{
	width: 720px;
}

#ingresos-otros-div
{
	width: 760px;
}

#gastos-div
{
	width: 760px;
}

#compras-div
{
	width: 760px;
}
#depositosct-div
{
	width: 760px;
}
#depositostd-div
{
	width: 760px;
}

#depositostc-div
{
	width: 760px;
}

#depositosef-div
{
	width: 760px;
}

<!-- tabla que formatea el formulario de carga -->
.carga-table
{
}

<!-- celda que agrupa uno o mas titulos de cabecera -->
.carga-superheading01-cell
{
	border: solid 1px #B4C5D6;
	background-color: #102D65;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

<!-- texto de la celda que agrupa uno o mas titulos de cabecera -->
.carga-superheading01-text
{
	color: #FFFFFF;
}

<!-- celda de cabecera -->
.carga-heading01-cell
{
	border: solid 1px #B4C5D6;
	background-color: #102D65;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

<!-- texto de la celda de cabecera -->
.carga-heading01-text
{
	color: #FFFFFF;
}

<!-- celda que agrupa uno o mas titulos de cabecera -->
.carga-superheading02-cell
{
	border: solid 1px #B4C5D6;
	background-color: #395181;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

<!-- texto de la celda que agrupa uno o mas titulos de cabecera -->
.carga-superheading02-text
{
	color: #FFFFFF;
}

<!-- celda de cabecera -->
.carga-heading02-cell
{
	border: solid 1px #B4C5D6;
	background-color: #395181;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

<!-- texto de la celda de cabecera -->
.carga-heading02-text
{
	color: #FFFFFF;
}

<!-- celda de carga - estilo 01 -->
.carga-input01-cell
{
	border: solid 1px #B4C5D6;
	text-align: center;
	height: 25px;
}

<!-- campo de entrada - estilo 01 -->
.carga-input01-field
{
	border: none;
	margin: 0px;
}

<!-- campo de entrada (código numerico) - estilo 01 -->
.carga-input01-field-numcod
{
	border: none;
	margin: 0px;
	text-align: center;
}

<!-- campo de entrada (monto numérico) - estilo 01 -->
.carga-input01-field-numamt
{
	border: none;
	margin: 0px;
	text-align: right;
	cursor: text;
}

<!-- celda de carga - estilo 02 -->
.carga-input02-cell
{
	border: solid 1px #B4C5D6;
	background-color: #F8F4DE;
	text-align: center;
	height: 25px;
}

<!-- campo de entrada - estilo 02 -->
.carga-input02-field
{
	background-color: #F8F4DE;
	border: none;
	margin: 0px;
}

<!-- campo de entrada (código numerico) - estilo 02 -->
.carga-input02-field-numcod
{
	background-color: #F8F4DE;
	border: none;
	margin: 0px;
	text-align: center;
}

<!-- campo de entrada (monto numérico) - estilo 02 -->
.carga-input02-field-numamt
{
	background-color: #F8F4DE;
	border: none;
	margin: 0px;
	text-align: right;
}

<!-- celda de campo computado -->
.carga-computed-cell
{
	border: solid 1px #B4C5D6;
	background-color: #E5E5E5;
	text-align: center;
	height: 25px;
}

<!-- celda de campo de texto -->
.carga-computed-text
{
}

<!-- campo computado -->
.carga-computed-field
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
}

<!-- campo computado (código numérico) -->
.carga-computed-field-numcod
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
	text-align: center;
}

<!-- campo computado (monto numérico) -->
.carga-computed-field-numamt
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
	text-align: right;
}

<!-- celda de campo solo lectura -->
.carga-readonly-cell
{
	border: solid 1px #B4C5D6;
	background-color: #E5E5E5;
	text-align: center;
	height: 25px;
}

<!-- campo solo lectura -->
.carga-readonly-field
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
}

<!-- campo solo lectura (código numérico) -->
.carga-readonly-field-numcod
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
	text-align: center;
}

<!-- campo solo lectura (monto numérico) -->
.carga-readonly-field-numamt
{
	background-color: #E5E5E5;
	border: none;
	margin: 0px;
	text-align: right;
}


<!-- celda de titulo de los totales -->
.carga-totalheading-cell
{
	border: solid 1px #B4C5D6;
	border-top: solid 2px #000000;
	background-color: #102D65;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

<!-- texto de la celda de titulo de los totales -->
.carga-totalheading-text
{
	color: #FFFFFF;
}

<!-- celda de carga total - estilo 01 -->
.carga-total01-cell
{
	border: solid 1px #B4C5D6;
	border-top: solid 2px #000000;
	background-color: #102D65;
	text-align: center;
}

<!-- campo de entrada total - estilo 01 -->
.carga-total01-field
{
	background-color: #102D65;
	border: none;
	margin: 0px;
	color: #FFFFFF;
}

<!-- campo de entrada total numérico - estilo 01 -->
.carga-total01-field-amt
{
	background-color: #102D65;
	border: none;
	margin: 0px;
	color: #FFFFFF;
	text-align: right;
}

<!-- celda de carga total - estilo 02 -->
.carga-total02-cell
{
	border: solid 1px #7C9CBE;
	border-top: solid 2px #000000;
	background-color: #395181;
	text-align: center;
}

<!-- campo de entrada total - estilo 02 -->
.carga-total02-field
{
	background-color: #395181;
	border: none;
	margin: 0px;
	color: #FFFFFF;
}

<!-- campo de entrada total numerico - estilo 02 -->
.carga-total02-field-amt
{
	background-color: #395181;
	border: none;
	margin: 0px;
	color: #FFFFFF;
	text-align: right;
}

<!- *******************************************************************************************************  -->
.alert-box-div
{
	position: absolute;
	top: 60px; 
	left: 200px;
}

.alert-box-table
{
	width: 350px;
	background-color: #F6E584;
	margin: 20px;
}

.alert-box-tl-cell
{
	vertical-align: top;
	text-align: left;
}

.alert-box-tc-cell
{
	vertical-align: top;
	text-align: center;
}

.alert-box-tr-cell
{
	vertical-align: top;
	text-align: right;
}

.alert-box-bl-cell
{
	vertical-align: bottom;
	text-align: left;
}

.alert-box-bc-cell
{
	vertical-align: bottom;
	text-align: center;
}

.alert-box-br-cell
{
	vertical-align: bottom;
	text-align: right;
}

.alert-box-content-cell
{
	padding-right: 20px;
	padding-left: 20px;	
}

.alert-box-title-cell
{
	padding-bottom: 5px;
}

.alert-box-title-text
{
	font-weight: bold;
	font-size: 14px;
	color: #FF0000;
}

.alert-box-cell
{
	text-align: left;
}

.alert-box-text
{
}

.alert-box-button-cell
{
	padding-top: 10px;
	text-align: right;
}

.alert-box-button
{
	background-color: #F0C300;
}


<!- *******************************************************************************************************  -->
.top-diadema-text
{
	font-family: Times New Roman;
	color: #102D65;
	font-size: 36px;
}

.top-diadema-cell
{
	text-align: center;
}

.bar-blue-cell
{
	padding-right: 30px;
}

.bar-blue-text
{
	color: #FFFFFF;
	font-size: 10px;
}

.bar-blue-anchor
{
	color: #FFFFFF;
	text-decoration: none;
	cursor: hand;
}

.bar-yellow-cell
{
}

.bar-yellow-text
{
}


<!- *******************************************************************************************************  -->
<!-- estilos de las opciones de menu -->
.menu-table
{
	width: 200px;
	background-color: #B4C5D6;
	border: solid 2px #FFFFFF;
	margin-bottom: 10px;
}

.menu-table-tabtl-cell
{
	text-align: left;
	vertical-align: top;
	background-color: #102D65;
}

.menu-table-tabtc-cell
{
	text-align: center;
	vertical-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #102D65;
}

.menu-table-tabtr-cell
{
	text-align: right;
	vertical-align: top;
	background-color: #102D65;
}

.menu-table-tabbl-cell
{
	text-align: left;
	vertical-align: bottom;
}

.menu-table-tabbc-cell
{
	text-align: center;
	vertical-align: center;
	padding-top: 5px;
}

.menu-table-tabbr-cell
{
	text-align: right;
	vertical-align: bottom;
}

.menu-table-tab-text
{
	color: #FFFFFF;
}

.menu-option-off-cell
{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.menu-option-off-text
{
	color: #000000;
}

.menu-option-off-anchor
{
}

.menu-option-on-cell
{
}

.menu-option-on-text
{
	color: #FFFFFF;
}

.menu-option-on-anchor
{
}



<!- *******************************************************************************************************  -->
<!-- formato general de las cajas redondeadas -->
#rbox-option
{
	width: 200px;
}

#rbox-calendar
{
	width: 200px;
}

<!-- caja de opciones con bordes circulares (color claro) -->
.rbox-light-table
{
	background-color: #B4C5D6;
	margin-top: 5px;
}

.rbox-light-tabtl-cell
{
	text-align: left;
	vertical-align: top;
}

.rbox-light-tabtc-cell
{
}

.rbox-light-tabtr-cell
{
	text-align: right;
	vertical-align: top;
}

.rbox-light-tabbl-cell
{
	text-align: left;
	vertical-align: bottom;
}

.rbox-light-tabbc-cell
{
}

.rbox-light-tabbr-cell
{
	text-align: right;
	vertical-align: bottom;
}

.rbox-light-content-cell
{
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

.rbox-light-text
{
}

<!-- caja de opciones con bordes circulares (color claro) -->
.rbox-dark-table
{
	background-color: #102D65;
	margin-top: 5px;
}

.rbox-dark-tabtl-cell
{
	text-align: left;
	vertical-align: top;
}

.rbox-dark-tabtc-cell
{
}

.rbox-dark-tabtr-cell
{
	text-align: right;
	vertical-align: top;
}

.rbox-dark-tabbl-cell
{
	text-align: left;
	vertical-align: bottom;
}

.rbox-dark-tabbc-cell
{
}

.rbox-dark-tabbr-cell
{
	text-align: right;
	vertical-align: bottom;
}

.rbox-dark-content-cell
{
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

.rbox-dark-text
{
	color: #FFFFFF;
}

<!- *******************************************************************************************************  -->
<!-- estilos de los listados con bordes redondeados -->
.rlist-table
{
	width: 100%;
	background-color: #B4C5D6;
	border: solid 2px #FFFFFF;
	margin-bottom: 10px;
}

.rlist-tabtl-cell
{
	text-align: left;
	vertical-align: top;
	background-color: #102D65;
}

.rlist-tabtc-cell
{
	text-align: center;
	vertical-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #102D65;
}

.rlist-tabtr-cell
{
	text-align: right;
	vertical-align: top;
	background-color: #102D65;
}

.rlist-tabbl-cell
{
	text-align: left;
	vertical-align: bottom;
}

.rlist-tabbc-cell
{
	text-align: center;
	vertical-align: center;
	padding-top: 5px;
}

.rlist-tabbr-cell
{
	text-align: right;
	vertical-align: bottom;
}

.rlist-title-text
{
	color: #FFFFFF;
}

.rlist-cell
{
}

.list-table
{
	width: 100%;
	margin-bottom: 10px;
}

.list-header-cell
{
	background: #102D65;
}

.list-header-text
{
	color: #FFFFFF;
}

.list-cell
{
	border-top: solid 1px #102D65;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.list-anchor
{
}

.list-text
{
	
}


<!- *******************************************************************************************************  -->

.resumen-table
{
	width: 350px;
}

.resumen-label-cell
{
	padding-bottom: 10px;
	padding-right: 10px;
	text-align: right;
	width: 180px;
}

.resumen-label-text
{
	font-weight: bold;
	color: #102D65;
}

.resumen-value-cell
{
	padding-bottom: 10px;
	padding-right: 30px;
	text-align: right;
}

.resumen-value-text
{
}

#resumen-cell
{
	text-align: center;
}

<!- *******************************************************************************************************  -->

.calendar-legend-table
{
}

.calendar-legend-cell
{
	padding-left: 5px;
}

<!-- estatus: pendiente sucursal -->
#ps-cell
{
	border: solid 2px black;
}

<!-- estatus: enviado a casa matriz -->
#es-cell
{
	border: solid 2px blue;
}


<!-- estatus: rechazado por casa matriz -->
#rs-cell
{
	border: solid 2px red;
}

<!-- estatus: cargado en profit -->
#cp-cell
{
	background-color: #C8E2CB;
}