/* ********************************************************************* */
/* ********************************************************************* */
/* Div principal, contenedor de todo                                     */
/* ********************************************************************* */
/* ********************************************************************* */
.General
{
	width:            800px;
	position:         relative;
	margin-left:      auto;
	margin-right:     auto;
	font-family:      Verdana, Arial, Helvetica, sans-serif;
	font-size:        1em !important;
	text-align:       center;
}

/* ********************************************************************* */
/* ********************************************************************* */
/* Titulos                                                               */
/* ********************************************************************* */
/* ********************************************************************* */
/*Para esconder el titulo uno que no se va a mostrar porque va a estar incluido en el portal*/
.divTitulo
{
	font-family:         Georgia, Helvetica, sans-serif, Verdana, Arial !important;
	font-size:           1.9em !important;
	font-weight:         normal !important;
	color:               #eeeeee !important;
	background-color:    #007700;
	text-align:          left;
	padding:             6px;
	display:             none;
	visibility:          hidden;
}	
/*	border:              solid 1px #FF0000;*/
.divTitulo2
{
	width:               100%;
	vertical-align:      center;
	font-family:         Segoe UI, Georgia, Helvetica, sans-serif, Verdana, Arial !important;
	font-size:           30px !important;
	padding:             18px;
	color:               #007700;
	text-align:          Center;
	height: 100px;
}
/*	border:              solid 1px #00FF00;*/
.divTitulo2Left
{
	vertical-align:      center;
	font-family:         Segoe UI, Georgia, Helvetica, sans-serif, Verdana, Arial !important;
	font-size:           25px !important;
	float:               left;
	width:               78%;
	height:              60px;
}
/*	border:              solid 1px #0000FF;*/
.divTitulo2Right
{
	float:               right;
	width:               20%;
	height:              60px;
}
/*	border:              solid 1px #FF0000;*/

/* ********************************************************************* */
/* Se usa para todos donde a la izquierda aparace la fecha y a la derecha el logo */
/* ********************************************************************* */
.divFooter
{
}
.divFooterLeft
{
	float:            left;
	text-align:       left !important;
	border:           solid 6px #f0f0f0;
	width:            150px;
}
.divFooterRight
{
	font-family:      Verdana, Arial, Helvetica, sans-serif;
	float:            right;
	width:            70%;
	font-size:        .9em !important;
	font-weight:      normal;
	padding:          2px;
	text-align:       left !important;
}
.imgLogo
{
	border-style:     none;
	border-width:     0;
	height:           50px !important;
	width:            80px !important;
}

/* Notas e instrucciones */
.divNotas
{
	font-family:      Verdana, Arial, Helvetica, sans-serif !important;
	font-size:        .9em !important;
	text-align:       left;
	font-weight:      bold !important;
	vertical-align:   middle;
	color:            #007700 !important;
	padding:          8px;
}
.divNotas ul, .divNotas li
{
	list-style-image: url("Images/bullet_ambiente.gif") !important;
	font-weight:      normal;
	color:            #000000 !important;
	margin:           0px 0px 0px 10px;
	padding:          0px 0px 0px 5px;
}

/* ********************************************************************* */
/* ********************************************************************* */
/* Secciones para la página principal (ReporteDiarios.aspx)              */
/* ********************************************************************* */
/* ********************************************************************* */

/* ********************************************************************* */
/* ********************************************************************* */
/* Mapa                                                                  */
/* ********************************************************************* */
/* ********************************************************************* */

/* ********************************************************************* */
/* Posicion general del mapa                                             */
/* ********************************************************************* */

/* Tabla para seccion de mapa y semaforo */
.FondoReporteDiario
{
	height:               410px;
	width:                755px;
	background-color:     Transparent;
	padding-top:          5px !important;
	padding:              5px !important;
	Z-INDEX:              100; 
	margin-left:          auto;
	margin-right:         auto;
}
/* Tabla para posicionar de forma global los divs que se ven sobre el mapa */
.PosicionMapa { 
	position:             relative;
	left:               0px !important; 
	top:                  0px !important; 
	width:                745px;
	height:               400px;
	margin-top:		10px;
	Z-INDEX:              102;
}
.ImagenMapa { 
	position:             absolute;
	left:                 0px !important; 
	top:                  0px !important; 
	Z-INDEX:              103;
}
/* ******************************************************************* */
/* Para posicionar los nombres de estaciones y tooltips                */
/* ******************************************************************* */
/*Formato general para las estaciones de los mapas*/
.EstacionMapa
{
    font-family: Segoe UI, Verdana;
	color:                 White;
	font-weight:           bold;
	font-size:             .11em !important;
	position:              absolute;
	text-align:            center;
	padding:               0!important;
	border-style:          none;
	line-height:           120%;
}
img.EstacionMapa
{
	width:                 10px;
	height:                10px;
}
/*Formato general para los tooltips que dicen el contaminante mas grande*/
.Tooltip
{
	float:                left;
	font-family: Segoe UI, Verdana;
	background-color:     InfoBackground;
	color:                InfoText;
	font-weight:          bold !important;
	font-size:            .9em !important;
	border-style:         solid;
	border-width:         1px;
	width:                80px !important;
	padding:              5px 5px 5px 5px !important;
	text-align:           center !important;
}

/* San Bernabe */
.EstacionMapa1
{
	position:             absolute;
	left:                 293px;
	top:                  75px; 
	Z-INDEX:              201;
}
.Tooltip1
{
	position:             absolute;
	left:                 220px;
	top:                  115px;
	Z-INDEX:              202;
}
/* Santa Catarina */
.EstacionMapa2
{
	position:             absolute;
	left:                 175px; 
	top:                  185px; 
	Z-INDEX:              203; 
}
.Tooltip2
{
	position:             absolute;
	left:                 100px; 
	top:                  235px; 
	Z-INDEX:              204;
}
/* Centro */
.EstacionMapa3
{
	position:             absolute;
	left:                 340px; 
	top:                  190px; 
	Z-INDEX:              205; 
}
.Tooltip3 
{
	position:             absolute;
	left:                 320px; 
	top:                  275px; 
	Z-INDEX:              206;
}
/* San Nicolas */
.EstacionMapa4
{
	position:             absolute;
	left:                 450px; 
	top:                  103px; 
	Z-INDEX:              207; 
}
.Tooltip4
{
	position:             absolute;
	left:                 380px; 
	top:                  150px;  
	Z-INDEX:              208;
}
/* La Pastora */
.EstacionMapa5
{
	position:             absolute;
	left:                 460px; 
	top:                  230px; 
	Z-INDEX:              209;
}

.Tooltip5 
{
	position:             absolute;
	left:                 510px; 
	top:                  250px;
	Z-INDEX:              210;
}
/* Garcia */
.EstacionMapa6
{
	position:             absolute;
	left:                 20px; 
	top:                  35px; 
	Z-INDEX:              211;
}

.Tooltip6 
{
	position:             absolute;
	left:                 90px; 
	top:                  70px;  
	Z-INDEX:              212;
}
/* Escobedo */
.EstacionMapa7
{
	position:             absolute;
	left:                 320px; 
	top:                  15px; 
	Z-INDEX:              213; 
	width:			15%
}
.Tooltip7 
{
	position:             absolute;
	left:                 392px;
	top:                  60px; 
	Z-INDEX:              214;
}
/* Apodaca */
.EstacionMapa8
{
	position:             absolute;
	left:                 520px; 
	top:                  110px; 
	Z-INDEX:              215; 
	width:			15%
}
.Tooltip8
{
	position:             absolute;
	left:                590px;
	top:                  130px; 
	Z-INDEX:              216;
}
/* Juarez */
.EstacionMapa9
{
	position:        absolute;
	left:                 650px; 
	top:                  285px; 
	Z-INDEX:              217;
}

.Tooltip9
{
	position:             absolute;
	left:                 650px; 
	top:                  250px;
	Z-INDEX:              218;
}
/* ********************************************************************* */
/* ********************************************************************* */
/* Semaforo                                                              */
/* ********************************************************************* */
/* ********************************************************************* */
/* Tabla para semaforo y logo imeca */
.divPosicionSemaforo
{
	width:                100%;
	background-color:     #F5F6CE;
	Z-INDEX:              106; 
	clear:                both;
	float:                right;
	height:               58px !important;
	margin-top:           5px;
}
.divReporteSemanal
{
	float:                left;
	width:                15%;
	margin-right:         10px;
	vertical-align:       middle !important;
	height:               74px;
}
.imgReporteSemanal
{
/*	width:                100% !important;*/
/*	height:               100% !important;*/
}
.divSemaforo
{
	float:                left;
	margin-left:          5px;
/*	width:			755px;*/
	vertical-align:       middle !important;
	height:               100% !important;
}
.divSemaforo_col1
{
	float:                left;
	height:               35px;
	margin-left:          10px;
	vertical-align:       middle !important;
	padding-top:          12px;
}
.divSemaforo_col2
{
	float:                left;
	text-align:           left !important;
	vertical-align:       middle !important;
	margin-left:          5px;
	margin-right:         5px;
	font-size:            1em !important;
	padding-top:          20px;
	line-height:          15px;
}

/* ********************************************************************* */
/* ********************************************************************* */
/* Tabla de fases del PRC                                                */
/* ********************************************************************* */
/* ********************************************************************* */
.divFase
{
	float:                left;
	width:                40%;
	font-size:            1em !important;
	border-style:         solid;
	border-width:         1px;
	border-color:         #669933;
	vertical-align:       middle !important;
	padding:              0px;
	margin:               0px;
}
.divFase_Titulo
{
	color:					#669933;
	font-weight:				bold;
	font-size:				14px !important;
	text-align:				center !important;
	font-family:				Verdana !important;
	vertical-align:				middle;
/*	height:					20px !important;*/
	padding-top:				5px !important;
	border-bottom-style:	solid;
	border-bottom-width:	1px;
}
.divFase_SubTitulo
{
	vertical-align:       middle  !important;
	width:                100%;
	font-size:            13px;

	color:                #669933;
	font-weight:          bold;


}
.divFase_Renglon
{
	vertical-align:       middle;
	width:                100%;

	padding:              0px;
	margin:               0px;
}
.divFase_Columna_1
{
	vertical-align:       middle;
	padding-left:         5px;
	float:                left;
	width:                48%;
}
.divFase_Columna_2
{
	vertical-align:       middle;
	padding-left:         5px;
	float:                right;
	width:                48%;
}
.divFase_Color_Alterno
{
	background-color:     #F5F6CE;
}

/* ********************************************************************* */
/* ********************************************************************* */
/* Entidad responsable                                                   */
/* ********************************************************************* */
/* ********************************************************************* */
.Responsable
{
	float:            right;
	top:              3px; 
	width:            56%;
	text-align:       left;
	margin-top:       15px;
}

.Responsable_Encabezado
{
	font-size:            1.2em !important;
	font-weight:          bold;
	line-height:          15px;
}
.Responsable_Encabezado2
{
	font-size:            1.1em !important;
	font-weight:          bold;
	color:                #669933;
	padding-top:          10px;
	line-height:          15px;
}
.Responsable_Contenido
{
	font-size:            1em !important;
	padding-left:         15px;
	line-height:          18px;
}

/* ********************************************************************* */
/* ******************************************************************* */
/* Fin de Secciones para posicionar el mapa y los nombres de los mpios */
/* ******************************************************************* */
/* ********************************************************************* */


/* ******************************************************************* */
/* ********************************************************************* */
/* ******************************************************************* */
/* Estilos para tablas                                                 */
/* ******************************************************************* */
/* ******************************************************************* */
/* ********************************************************************* */
.divCentrado
{
	width:               100%;
	margin:              0 auto;
	border:              solid 1px #FFFFFF;
}
.panelTabla
{
    	width:700px !important;
	height:300px !important;
	overflow:scroll !important;
}
.TablaDatos
{
	margin:              0 auto;
	border:              1px;
	border-color:        #efefef;
	border-style:        solid;
	padding:             5px !important;
	border-bottom-color: #f0f0f0;
	border-bottom-style: solid;
	border-bottom-width: 7px;
	width:100%;
	height:100%;
	text-align:left;
}
.headerStyle, .headerStyle td
{
	font-family:         Verdana, Arial, Helvetica, sans-serif !important;
	font-size:           1.2em !important;
	font-weight:         bold;
	text-align:          center;
	color:               #007700;
	background-color:    #eeeeee;
	padding:             5px     !important;
	border:              1px;
	border-color:        rgb(204, 204, 204);
}

.itemStyle, .itemStyle td
{
	font-family:         Verdana, Arial, Helvetica, sans-serif;
	font-size:           1em    !important;
	padding:             5px     !important;
	border-bottom-color: #f0f0f0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.itemStyle a
{
	font-size:           1em      !important;
	color:               #007700  !important;
}
.alternateItemStyle, .alternateItemStyle td
{
	font-family:         Verdana, Arial, Helvetica, sans-serif !important;
	font-size:           1em !important;
	padding:             5px;
	border-bottom-color: #f0f0f0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color:    #f8f8f8;
}

/* ********************************************************************* */
/* Para columnas especiales de tablas                                    */
/* ********************************************************************* */
.TextoCentrado
{
	text-align:       center;
}
/*ReporteDiarioDetallado*/
.TextoIzquierdo
{
	text-align:       left !important;
}

/* ********************************************************************* */
/* ********************************************************************* */
/* Generales                                                           */
/* ********************************************************************* */
/* ********************************************************************* */
/* Se usa en el mapa, para la estacion norte donde el texto esta a la derecha y el icono a la izquierda*/
.FloatRight
{
	float:            right;
	vertical-align:   top !important;
}
/* Se usa en el mapa, para la estacion norte donde el texto esta a la derecha y el icono a la izquierda*/
.FloatLeft
{
	float:            left;
	vertical-align:   top !important;
}


/* ********************************************************************* */
/* ********************************************************************* */
/* Seccion para configurar reporte diario detallado y semanal            */
/* ********************************************************************* */
/* ********************************************************************* */
.LetraNivel1, .LetraNivel1 td
{
	color:                #007700 !important;
}
.LetraNivel2, .LetraNivel2 td
{
	color:                #FFbb00 !important;	
}
.LetraNivel3, .LetraNivel3 td
{
	color:                #FF6600 !important;	
}
.LetraNivel4, .LetraNivel4 td
{
	color:                #FF0000 !important;	
}
/* Usado en reporte diario */
.HyperLink
{
	float:                left;
	width:                30px;
	height:               30px;
}
#HyperLink9 img, #HyperLink8 img, #HyperLink7 img, #HyperLink6 img, #HyperLink5 img, #HyperLink4 img, #HyperLink3 img, #HyperLink2 img, #HyperLink1 img
{
	width:                30px;
	height:               30px;
}
#divPosicionMapaLeft a, #divPosicionMapaLeft a:link, #divPosicionMapaLeft a:visited, #divPosicionMapaLeft a:hover, #divPosicionMapaLeft a:selected
{
	text-align:       center;
	color:            #000000;
	font-family:      Arial, sans-serif, Helvetica, Verdana;
	text-decoration:	none !important;
	font-size:	14px !important;
	font-weight: bold;
	text-transform:uppercase;

}
span.subindice
{
	font-size:10px !important;
	vertical-align:sub;
	visibility:visible;
}
div.Panel1
{
	border-style:solid;
	border-width:1px;
	/*background-color:#FFFFCC;*/
}
span.tituloGrafica
{
	width:100%;
	height:20px;
	color:#007700;
	background-color:#eeeeee;
	text-align:center;
}
div.FloatLeft
{
	float:left;
}
/*#hlZona1, #hlZona2, #hlZona3, #hlZona4, #hlZona5, #hlZona6, #hlZona7, #hlZona8, #hlZona9*/
.hlzona
{
    font-family:Segoe UI, Verdana !Important;
    color:White !Important;
    font-size:14px !Important;
    
}
.cmd
{
    background-color:#FFFFCC;
    width:25%;
    height:100%;
	font-family: Segoe UI, Verdana, Arial, Helvetica, sans-serif !important; 
	font-style:normal !important;
	font-size: 16px !important;
	color: #CCCCCC !important;
	text-decoration:none;
	background-color:#298A08 /*#85BD72*/; /* #298A08;*/
	padding: 2px 2px 2px 1px;
	border: solid 1px #CCCCCC;
	cursor:hand !important;
	float:left;
	margin-right:5px;
}
.cmdlight
{
    background-color:#FFFFCC;
    width:25%;
    height:100%;
	font-family: Segoe UI, Verdana, Arial, Helvetica, sans-serif !important; 
	font-style:normal !important;
	font-size: 16px !important;
	color: White !important;
	text-decoration:none;
	background-color:#298A08 /*#85BD72*/; /* #298A08;*/
	padding: 2px 2px 2px 1px;
	border: solid 1px #CCCCCC;
	cursor:hand !important;
	float:left;
	margin-right:5px;
}
.divMenus
{
    height:40px;
    width:100%;
}
.cmdMini
{
    background-color: #FFFFCC !important;
    width: 15%;
    height: 100%;
    font-family: 'Segoe UI' , Verdana, Arial, Helvetica, 'sans-serif !important';
    font-style: normal !important;
    font-size: 16px !important;
    color: #CCCCCC !important;
    text-decoration: none;
    background-color: #298A08 !important; /*#85BD72*/ /* #298A08;*/
    padding: 2px 2px 2px 1px;
    border: solid 1px #CCCCCC;
    cursor: hand !important;
    float: left;
    margin-right: 5px;    
}
.divMenusMini
{
    height:25px;
    width:100%;
}
.letraGris
{
    color: #CCCCCC !important;
}
.letraBlanca
{
    color: White !important;
}