/* CSS proyecto Embonor                                  */
/* versin 1.4 - 2002-08-05                              */
/* Nelson Rodrguez-Pea A. para A.I.Azul                */
/* mailto:nelson@directorzone.com                        */


/******************* MEDIA: SCREEN ***********************/
/* esta hoja de estilo est diseada para uso exclusivo  */
/* en IE5 y superiores;                                  */
/* esta hoja hace uso de CSS nivel 2                     */
/*********************************************************/


/* REDEFINICION DE ELEMENTOS HTML */

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 80%;
	color: #333333;
}

table, table table {
	empty-cells: show;
	font-size: 95%;

}

table caption {
	/*caption-side: bottom;*/
	vertical-align: bottom;
	width: 100%;
	margin-top: 5px;
	border: 1px solid #cccccc;
}

/******** AYUDA ********/

/* ayuda en linea; instrucciones sobre uso de elementos de interfaz */
p.helptip {
	background-image: url(../images/icn_helptip.gif);
	background-position: left top;
	background-repeat: no-repeat;
	padding-left: 15px;
	margin: 5px 0 5px 0;
	font-size: 95%;
}




/******** FIN AYUDA ********/




/* definicin de links base */
a {
	color: #333333;
	text-decoration: underline;
}
a:link {
	color : #333333;
}
a:visited {
	color : #333333;
}
a:hover {
	color : #67677F;
}
a:active {
	color : #67677F;
}

/* se elimina el margen en form para evitar problemas de despliegue */
form {
	margin: 0;
	padding: 0;
}

/* especificacin genrica de botones */
input.button {
	font-weight: bold;
	height: 20px;
	margin: 1px;
	padding-left: 1px;
	padding-right: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #E1E1E1;
	color: #333333;
	border-top: 2px solid ButtonHighlight;
	border-left: 2px solid ButtonHighlight;
	border-bottom: 2px solid ButtonShadow;
	border-right: 2px solid ButtonShadow;
	cursor: pointer;
}

/* manejo de titulos */
h1 {
	font-size: 130%
}
h2 {
	font-size: 120%;
}
h3 {
	font-size: 110%;
}
h4 {
	font-size: 105%;
}
h5 {
	font-size: 100%;
}
h6 {
	font-size: 90%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #333333;
	margin: .5em 0;
}

/* clase de ttulo especial para el nombre de la pgina/seccin */
h1.pageName {
	font-size: 105%;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
}


/* DEFINICION DE SELECTORES #ID */

/* encabezado de pgina */
#pageHeader {
	width: 100%;
	height: 40px;
	background-color: #E20903;
	background-image: url(header_main.jpg);
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}
#corpLogo {
	display: none;
}
#pageFooter {
	width: 100%;
	border-top: 1px solid #CCCCCC;
	color: #666666;
	padding: 3px;
	text-align: center;
	font-size: 10px;
	margin-top: 30px;
	margin-bottom: 0;
}

/* GUI navegacin principal */
#guiMenuBar {
	width: 100%;
	height: 20px;
	border: 1px solid black;
	border-left: 0;
	border-right: 0;
	padding-left: 15px;
	background-color: #A90702;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: bold;
}

/* clases para los temes de men */
#guiMenuBar span.headerMenuItem {
	text-align: center;
	vertical-align: middle;
	height: 18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	border-left: 1px solid #A90702;
	border-right: 1px solid #A90702;
	float: left;
}
#guiMenuBar span.headerMenuItemSelected {
	text-align: center;
	vertical-align: middle;
	height: 18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-color: #CC0000;
	float: left;
}

#guiMenuBar a:link, #guiMenuBar a:hover, #guiMenuBar a:visited, #guiMenuBar a:active {
	text-decoration: none;
	color: #FFFFFF;
}


/* GUI men de seleccin planta y secundario */
#guiSelectionBar {
	width: 100%;
	height: 20px;
	border: 0;
	border-bottom: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	padding: 0;
	padding-left: 20px;
	vertical-align: 100%;
}

#guiSelectionBar form {
	display: inline;
}

#guiSelectionBar span.userId {
	display: inline;
	width: 45%;
	text-align: right;
	font-size: 11px;
	color: #333333;
	vertical-align: 30%;
}

/*#guiSelectionBar a {
	color: #333333;
}*/

#guiSelectionBar #selPais, #guiSelectionBar #selEmpresa, #guiSelectionBar #selPlanta {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	/*width: 100px;*/
	height: 18px;
}

#guiSelectionBar #selectPlanta {
	cursor: pointer;
	height: 17px;
	border: 0;
	margin: 0;
}


/****************** LOGIN ***********************/

body.login {
	vertical-align: middle;
	background-color: #F8F8F8;
}

#loginBox {
	position: absolute;
	top: 10%;
	left: 25%;
	width: 400px;
	height: 250px;
	border: 1px solid #333333;
	background-color: #FFFFFF;
	font-size: 85%;
}

#loginBox #loginHeader {
	margin: 0;
}

#loginBox p {
	margin: 10px 15px;
	margin-bottom: 30px;
	padding: 0;
}

#loginBox div.frmLoginInput {
	width: 100%;
	vertical-align: middle;
	text-align: left;
	padding-left: 80px;
}

#loginBox label {
	width: 80px;
	text-align: right;
}

#loginBox input.text {
	width: 100px;
	height: 18px;
	border: 1px solid #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 1px 4px;
}

#loginBox input.password {
	width: 100px;
	height: 18px;
	border: 1px solid #333333;
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	padding: 1px 4px;
}

div.frmLoginInput input.submit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	margin: 5px;
	margin-left: 82px;
	color: #333333;
	cursor: pointer;
	background-color: #E1E1E1;
	height: 20px;
}



/* CONTENIDOS */

/* tabla de presentacin de secciones en men principal */
#tSectionDescription {
	border: 0;
	border-collapse: collapse;
	text-align: left;
	table-layout: fixed;
	width: 95%;
	margin-left: 2%;
	margin-right: 2%;
	empty-cells: hide;
	table-layout: auto;
}

#tSectionDescription #tSection {
	vertical-align: top;
	font-weight: bold;
	color: #666666;
}

/* se oculta elemento caption */
#tSectionDescription caption {
	display: none;
}

#tSectionDescription td, #tSectionDescription th {
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	padding: 6px 8px;
}

#tSectionDescription thead tr {
	background-color: #E20903;
	background-image: url(table_thbg.gif);
	background-repeat: no-repeat;
}

#tSectionDescription th {
	padding: 2px 8px;
	background-color: #E20903;
	color: #FFFFFF;
}

#tSectionDescription #tSection {
	width: 30%;
}

#tSectionDescription #tDescription {
	width: 70%;
}

/* 
	Definicin global de filas en colores alternados para tablas
	USO: aplicar a TR's, el primer TR en la tabla debe ser de clase 
	'oddRow', el segundo 'evenRow' y as consecutivamente.
*/
tr.evenRow {
	background-color: #EBEBEB;
}

tr.oddRow {
	background-color: #FCFCFC;
}

/* tabla de datos de informe (ficha de datos) */
#datosInforme {
	border: 0;
	border-collapse: collapse;
	text-align: left;
	width: 70%;
	margin-left: 5px;
	margin-right: 0;
	margin-bottom: 15px;
}
#datosInforme th, #datosInforme td {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding: 1px;
}
#datosInforme th {
	width: 25%;
	color: #666666;
}


/************** ESPECIFICO DE REPORTES ****************/

/* EL SIGUIENTE ELEMENTO ACTUA COMO CONTENEDOR DE TODO EL CUERPO */
#informe {
	width: 95%;
	margin: 10px 20px;
	border: 0;
}


/* contenedor de grupos de reportes */
div.reportes {
	width: 100%;
	padding: 0;
	margin-bottom: 15px;
	/*border: 1px solid black;*/
}

/* contenedor de reporte */
div.reporte {
	margin: 5px 5px 0 5px;
	width: 48%;
	display: inline;
	/*float: left;*/
	/*padding: 5px;*/
	text-align: center;
	/*border: 1px solid black;*/
}


/*************** MANEJO DE COLUMNAS EN PRESENTACIN DE REPORTES ******************/
/*
	a continuacin se definen los tres tipos de presentacin de reportes, el tipo 
	de presentacin est determinado por la cantidad de reportes desplegados 
	horizontalmente, en otras palabras, cuantas 'columnas':
	- colTypeA: reporte nico, una columna
	- colTypeB: presentacin de dos columnas
	- colTypeC: tres columnas, se presentan tres reportes horizontalmente
*/

div.reporte.colTypeA {
	width: 95%;
	text-align: left;
}
div.reporte.colTypeB {
	width: 48%;
}
div.reporte.colTypeC {
	width: 30%;
}

/* FIN COLUMNAS */


/* definicin de preserntacin para grficos */
div.reportes img.grafico {
	/*
	no se definen elementos de presentacin, pero se establece la clase previendo
	futuras implementaciones.
	*/
}


/*
	NOTA: se est respetando la jerarqua de contenidos utilizando los elementos
	de encabezado en orden decreciente (h1 > h2 > h3 ...), aunque los tamaos
	correspondientes no necesariamente sean diferentes.
*/
h2.tituloReportes, h3.tituloReporte {
	width: 100%;
	height: 20px;
	color: #FFFFFF;
	font-size: 90%;
	background-color: #E20903;
	background-image: url(table_thbg.gif);
	background-repeat: no-repeat;
	margin: 0;
	padding: 2px 4px;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	margin-bottom: 5px;
	text-align: left;
}


/* presentacin de fichas de reporte */
/*
	NOTA: cambi el nombre original de la clase de 'ficha' a 'fichaReporte',
	aunque se incluye soporte para el nombre original. El cambio es bsicamente
	para asignar un nombre ms lgico y contextualizado.
*/
div.reportes table.fichaReporte, div.reportes table.ficha {
	font-size: 90%;
	width: 95%;
	border: 0;
	border-collapse: collapse;
	text-align: left;
	margin-top: 10px;
}

table.fichaReporte th, table.fichaReporte td {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding: 1px;
}
table.fichaReporte th {
	width: 40%;
	color: #666666;
}


/* la siguiente tabla presenta los datos utilizados en la generacin del grfico */
div.reportes table.datosGrafico {
	width: 100%;
	border-collapse: collapse;
	font-size: 90%;
	margin: 5px 0px;
}

div.reportes table.datosGrafico td, div.reportes table.datosGrafico th {
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	/*border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;*/
}

div.reportes table.datosGrafico thead th {
	text-align: center;
}


table colgroup.tHeaderCol, th {
	text-align: left;
}

table.datosGrafico thead tr {
	background-color: #E1E1E1;
}

/* EXCEPCIONES EN EL MANEJO DE TABLAS DE GRAFICO Y REPORTE SEGUN COLUMNAS EN REPORTES */
div.reporte.colTypeA table.datosGrafico, div.reporte.colTypeA table.fichaReporte {
	width: 350px;
}


/* FIN EXCEPCIONES */


/* clases especiales utilizadas para asociar colores a los grficos */
div.reportes span.colorChip01, 
div.reportes span.colorChip02, 
div.reportes span.colorChip03, 
div.reportes span.colorChip04, 
div.reportes span.colorChip05, 
div.reportes span.colorChip06, 
div.reportes span.colorChip07, 
div.reportes span.colorChip08, 
div.reportes span.colorChip09, 
div.reportes span.colorChip10,
div.reportes span.colorChip11, 
div.reportes span.colorChip12, 
div.reportes span.colorChip13, 
div.reportes span.colorChip14, 
div.reportes span.colorChip15, 
div.reportes span.colorChip16, 
div.reportes span.colorChip17, 
div.reportes span.colorChip18, 
div.reportes span.colorChip19, 
div.reportes span.colorChip20,
div.reportes span.colorChip21, 
div.reportes span.colorChip22, 
div.reportes span.colorChip23, 
div.reportes span.colorChip24, 
div.reportes span.colorChip25, 
div.reportes span.colorChip26, 
div.reportes span.colorChip27, 
div.reportes span.colorChip28, 
div.reportes span.colorChip29, 
div.reportes span.colorChip30 {
	width: 12px;
	height: 12px;
	border: 1px solid black;
	font-size: 1px;
	margin: 2px;
	margin-bottom: 0;
	margin-right: 4px;
}

/*
	Elemento SPAN de clase 'colorBar01' se utiliza para desplegar barras en 
	grficos de barra, el largo o ancho se debe proporcionar en el HTML con 
	los atributos correspondientes usando porcentaje (%)
*/
div.reportes span.colorBar01,
div.reportes span.colorBar02,
div.reportes span.colorBar03,
div.reportes span.colorBar04,
div.reportes span.colorBar05,
div.reportes span.colorBar06,
div.reportes span.colorBar07,
div.reportes span.colorBar08,
div.reportes span.colorBar09,
div.reportes span.colorBar10,
div.reportes span.colorBar11,
div.reportes span.colorBar12,
div.reportes span.colorBar13,
div.reportes span.colorBar14,
div.reportes span.colorBar15,
div.reportes span.colorBar16,
div.reportes span.colorBar17,
div.reportes span.colorBar18,
div.reportes span.colorBar19,
div.reportes span.colorBar20,
div.reportes span.colorBar21,
div.reportes span.colorBar22,
div.reportes span.colorBar23,
div.reportes span.colorBar24,
div.reportes span.colorBar25,
div.reportes span.colorBar26,
div.reportes span.colorBar27,
div.reportes span.colorBar28,
div.reportes span.colorBar29,
div.reportes span.colorBar30 {
	border: 1px solid black;
	font-size: 90%;
	color: #333333;
	margin: 2px 10px 0 0;
	padding: 1px;
	height: 12px;
}

/****************** TABLA DE COLORES ******************/

/* Los colores estn comentados junto con cada selector */

/* las maravillas de la herencia :) */
div.reportes span.colorChip01, div.reportes span.colorBar01 {
	background-color: #3399FF; /* azul */
}
div.reportes span.colorChip02, div.reportes span.colorBar02 {
	background-color: #CC99FF; /* violeta */
}
div.reportes span.colorChip03, div.reportes span.colorBar03 {
	background-color: #00FF66; /* verde */
}
div.reportes span.colorChip04, div.reportes span.colorBar04 {
	background-color: #CC9933; /* caf claro */
}
div.reportes span.colorChip05, div.reportes span.colorBar05 {
	background-color: #FF3E3E; /* rojo */
}
div.reportes span.colorChip06, div.reportes span.colorBar06 {
	background-color: Yellow; /* amarillo */
}
div.reportes span.colorChip07, div.reportes span.colorBar07 {
	background-color: #00CED1; /* turquesa */
}
div.reportes span.colorChip08, div.reportes span.colorBar08 {
	background-color: #33FFCC; /* verde/celeste */
}
div.reportes span.colorChip09, div.reportes span.colorBar09 {
	background-color: #FFCC33; /* anaranjado */
}
div.reportes span.colorChip10, div.reportes span.colorBar10 {
	background-color: #FFCCFF; /* rosado */
}
div.reportes span.colorChip11, div.reportes span.colorBar11 {
	background-color: #3399FF; /* azul */
}
div.reportes span.colorChip12, div.reportes span.colorBar12 {
	background-color: #CC99FF; /* violeta */
}
div.reportes span.colorChip13, div.reportes span.colorBar13 {
	background-color: #00FF66; /* verde */
}
div.reportes span.colorChip14, div.reportes span.colorBar14 {
	background-color: #CC9933; /* caf claro */
}
div.reportes span.colorChip15, div.reportes span.colorBar15 {
	background-color: #FF3E3E; /* rojo */
}
div.reportes span.colorChip16, div.reportes span.colorBar16 {
	background-color: Yellow; /* amarillo */
}
div.reportes span.colorChip17, div.reportes span.colorBar17 {
	background-color: #00CED1; /* turquesa */
}
div.reportes span.colorChip18, div.reportes span.colorBar18 {
	background-color: #33FFCC; /* verde/celeste */
}
div.reportes span.colorChip19, div.reportes span.colorBar19 {
	background-color: #FFCC33; /* anaranjado */
}
div.reportes span.colorChip20, div.reportes span.colorBar20 {
	background-color: #FFCCFF; /* rosado */
}
div.reportes span.colorChip21, div.reportes span.colorBar21 {
	background-color: #3399FF; /* azul */
}
div.reportes span.colorChip22, div.reportes span.colorBar22 {
	background-color: #CC99FF; /* violeta */
}
div.reportes span.colorChip23, div.reportes span.colorBar23 {
	background-color: #00FF66; /* verde */
}
div.reportes span.colorChip24, div.reportes span.colorBar24 {
	background-color: #CC9933; /* caf claro */
}
div.reportes span.colorChip25, div.reportes span.colorBar25 {
	background-color: #FF3E3E; /* rojo */
}
div.reportes span.colorChip26, div.reportes span.colorBar26 {
	background-color: Yellow; /* amarillo */
}
div.reportes span.colorChip27, div.reportes span.colorBar27 {
	background-color: #00CED1; /* turquesa */
}
div.reportes span.colorChip28, div.reportes span.colorBar28 {
	background-color: #33FFCC; /* verde/celeste */
}
div.reportes span.colorChip29, div.reportes span.colorBar29 {
	background-color: #FFCC33; /* anaranjado */
}
div.reportes span.colorChip30, div.reportes span.colorBar30 {
	background-color: #FFCCFF; /* rosado */
}


/***** Presentacin de tipos de datos en tablas *****/
/*
	NOTA: aplicar estos elementos de preferencia en elementos COLGROUP,
	si no es posible, aplicar directamente en elemento TD
*/
/* elementos de GUI en tablas, como checkboxes o botones */
colgroup.tDataGui, td.tDataGui {
	text-align: center;
}
/* presentacin de texto */
colgroup.tDataString, td.tDataString {
	text-align: left;
}
/* presentacin de valores numricos alineados a la derecha */
colgroup.tDataNumber, td.tDataNumber {
	text-align: right;
}
/* presentacin de fechas, alineadas a la derecha */
colgroup.tDataDate, td.tDataDate {
	text-align: right;
}

/* presentacin de elementos de grficos en simulaciones de grficos de barras */
colgroup.tDataGraphic, td.tDataGraphic {
	text-align: left;
}



/******** SELECCION DE PROCESO EN NECESIDADES SEGUN PRODUCCION' **********/

/* DIV box */
#frmNSPSelect {
	margin: 10px 0;
}

#frmNSPSelect p {
	
}

#frmNSPSelect select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	/*width: 100px;*/
	height: 20px;
	cursor: pointer;
}

#frmNSPSelect input {
	font-size: 10px;
	height: 20px;
}

/***********************/

/* 
	Una tabla de clase 'graphicData' se utiliza para crear un grfico
	de barras, junto con SPAN.colorBarXX para simular las barras
*/
table.barsGraphicData {
	margin: 15px 0px;
	border-collapse: collapse;
}

table.barsGraphicData thead tr,
table.barsGraphicData thead th {
	background-color: #E1E1E1;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

table.barsGraphicData td,
table.barsGraphicData th {
	padding: 2px;
}


/*
	Barra de navegacin secundaria, principalmente para navegacin entre
	las pginas de 'Informe de Evaluacin Fsica y Monetaria'
 */
div.navGroup {
	font-size: 90%;
	font-weight: bold;
	margin: 10px 0px;
	vertical-align: middle;
}

div.navGroup img {
	border: 0;
	float: left;
}
.textoTablaDatos {
	font-size: 10px;
}

.textoTablaDatosDestacado {
	font-size: 12px;
	font-weight: bold;
}

a.destacado {
	font-size: 110%;
	font-weight: bold;
	margin: 10px 0px;
	vertical-align: middle;
	color: #333333;
	text-decoration: underline;
}
a.destacado:link {
	color : #333333;
}
a.destacado:visited {
	color : #333333;
}
a.destacado:hover {
	color : #67677F;
}
a.destacado:active {
	color : #67677F;
}