/* DISEÑO: La clase BODY se refiere al color de fondo general de la página. La clase
   FONDO se refiere al área general de la página, definiendo color y otros atributos.
   La clase BLOQUE_IZQUIERDO define los espacios laterales izquierdos de la página,
   donde están los menús, la sección de noticias y el login. La clase BLOQUE_CENTRAL
   es aquella que define los bloques de los ejes rectores en la página principal del
   sitio. La clase LINEA_HORIZONTAL define la línea de separación entre el cuerpo y
   el pie de página. */
   
body {
	background-color:#CCCCCC;
	margin-top: 0px;
}
.fondo {
	border:1px solid #999999;
	padding:3px;
	background-color:#E5E5E5;
}
.bloque_izquierdo {
	width:150px;
	overflow: hidden;
}
.bloque_central {
	width:310px;
}
.linea_horizontal {
	border-top: solid 1px #B1B0B8;
}

/* TITULOS: La clase TITULO1 es para la primera línea del eje rector, la 
   clase TITULO2 es para la segunda línea del nombre del eje rector y la
   clase TITULO3 es para crear el efecto versales en combinación con la
   clase TITULO1. */

.titulo1 {
font-family:arial;
font-size:14px;
color:#C51A00;
text-transform:uppercase;
font-weight:bold;
}
.titulo2 {
font-family:arial;
font-size:11px;
color:#252525;
text-transform:uppercase;
font-weight:bold;	
}
.titulo3 {
	font-family:arial;
	font-size:12px;
	color:#C51A00;
	font-weight:bold;
	font-variant: normal;
	letter-spacing: 2px;
	margin-left: 2px;
}

/* MENÚ PRINCIPAL: La clase MENU_BARRA dibuja la barra izquierda del menú
   principal, la clase MENU_LINEA_INF ubica la imagen que pone la línea
   inferior de cada opción del menú principal, y la clase MENU_TEXTO es
   la que define la apariencia de las opciones del menú, como vínculo (A)
   y cuando el mouse pasa encima (A:HOVER). */

.menu_barra{
	border-left: solid 5px #B1B0B8;
	padding-right:5px;
	width:2px;
}
.menu_linea_inf {
	padding-top: 1px;
	padding-bottom: 5px;
	padding-top: 8px;
	background-image: url(../images/linea_inf_menu.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.menu_texto a{
	font-family: tahoma;
	font-size: 12px;
	text-transform: capitalize;
	color: #333333;
	text-decoration:none;
	width:150px;
}
.menu_texto a:hover{
	font-family: tahoma;
	font-size: 12px;
	text-transform: capitalize;
	color:#FF1A00;
	text-decoration:none;
	padding-left:5px;
	width:150px;
}

/* TEXTOS GENERALES: La clase TEXTO se usa para el texto general de las
   páginas del sitio. La clase TEXTO_PIE_PAGINA se utiliza para el 
   texto en el bloque inferior de la página (pie). */
   
.texto {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	margin:10px;
	text-align:justify;
}
.texto_pie_pagina {
	font-family:tahoma;
	font-size:10px;
	color:#666666;
	margin: 10px;
}

/* ENCABEZADOS DE BLOQUE: Las clases HEADER_AZUL, HEADER_ROJO y HEADER_GRIS
   definen las barras horizontales de las secciones o bloques del diseño de
   las páginas del sitio web. Se agregaron las clases ..._IZQ y ..._DER para
   cada color de clase para garantizar cumplir con XHTML 1.0 */
   
.header_azul_izq {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_azul1.jpg);
	background-repeat: no-repeat;
}
.header_azul {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	padding-left:10px;
	height:22px;
	width:132px;
	background-image: url(../images/header_azul2.jpg);
	background-repeat: repeat-x;
}
.header_azul_der {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_azul3.jpg);
	background-repeat: no-repeat;
}
.header_rojo_izq {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_rojo1.jpg);
	background-repeat: no-repeat;
}
.header_rojo {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	padding-left:10px;
	height:22px;
	width:132px;
	background-image: url(../images/header_rojo2.jpg);
	background-repeat: repeat-x;
}
.header_rojo_der {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_rojo3.jpg);
	background-repeat: no-repeat;
}
.header_gris_izq {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_gris1.jpg);
	background-repeat: no-repeat;
}
.header_gris {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	padding-left:10px;
	height:22px;
	width:100%;
	text-transform:uppercase;
	background-image: url(../images/header_gris2.jpg);
	background-repeat: repeat-x;
}
.header_gris_der {
	font-family:arial;
	font-size:14px;
	color:#FFFFFF;
	font-weight:600;
	height:22px;
	width:7px;
	background-image: url(../images/header_gris3.jpg);
	background-repeat: no-repeat;
}

/* EJES RECTORES: La clase EJE es la que provee los vínculos entre las páginas 
   de los ejes rectores. Para definir el comportamiento de estos vínculos, se 
   define la etiqueta (A) y el comportamiento al pasar el mouse encima (A:HOVER).
   La clase EJES_MAS_INFO se utiliza en la página de los resúmenes de los ejes
   rectores para llevar a las correspondientes páginas de detalle, se define
   la etiqueta (A) y el comportamiento al pases el mouse encima (A:HOVER). */

.ejes {
	font-family:tahoma;
	font-size:12px;
	color:#0099CC;
	text-decoration: none;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.ejes a {
	font-family:tahoma;
	font-size:12px;
	color:#0099CC;
	text-decoration: none;
}
.ejes a:hover {
	font-family:tahoma;
	font-size:12px;
	color:#0099CC;
	font-weight: bold;
	text-decoration: none;
}
.ejes_mas_info a{
	font-family:tahoma;
	font-size:11px;
	color:#0099CC;
	text-decoration: none;
}
.ejes_mas_info a:hover{
	font-family:tahoma;
	font-size:11px;
	color:#0099CC;
	font-weight: bold;
	text-decoration: none;
}

/* HISTORIAL DE NOTICIAS: La clase HISTORIAL_NOTICIAS se utiliza para la sección 
   del historial de noticias. Se definen los atributos (A) y el comportamiento
   cuando el mouse pasa encima del vínculo (A:HOVER). */

.historial_noticias {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	text-align:left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.historial_noticias a {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	text-align:left;
}
.historial_noticias a:hover {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	text-align:left;
	font-weight: bold;
}

/* SERVICIOS Y EVENTOS: La clase OPCIONES sirve para aquellas secciones donde se debe enlistar
   diferentes elementos del tema tratado, por ejemplo, servicios o eventos. Se define
   el atributo UL para los elementos del listado. */
   
.opciones ul {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	text-align: justify;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 0px;
	list-style-position: outside;
	list-style-type: square;
}

/* NOTICIAS (BARRA Y CONTENIDO): La clase NOTICIA_FECHA despliega la fecha de la noticia,
   tanto en la sección de la barra como en los contenidos; se define el atributo (A) y el 
   comportamiento del mouse al pasar encíma (A:HOVER) para la liga al historial de noticias.
   La clase NOTICIA_RESUMEN despliega el resumen de la noticia en la sección de la barra
   lateral izquierda; se define el atributo (A) y el comportamiento del mouse al pasar por
   encima (A:HOVER) para los vínculos al texto completo de las noticias. La clase NOTICIA_
   HEADER sirve para desplegar el cuadro de cabecera de la noticia, en las páginas de su
   su contenido. La clase NOTICIA_FUENTE sirve para desplegar la fuente de la noticia. */

.noticia_fecha {
	color:#FF1A00;
	font-family:tahoma;
	font-size:11px;
	height: 15px;
}
.noticia_fecha a {
	color:#FF1A00;
	font-family:tahoma;
	font-size:11px;
	height: 15px;
	text-decoration: none;
}
.noticia_fecha a:hover {
	color:#FF1A00;
	font-family:tahoma;
	font-size:11px;
	height: 15px;
	font-weight: bold;
	text-decoration: none;
}
.noticia_resumen {
	font-family:tahoma;
	font-size:11px;
	color:#333333;
	text-align: justify;
	margin-bottom: 10px;
}
.noticia_resumen a {
	font-family:tahoma;
	font-size:11px;
	color:#0099CC;
	text-decoration: none;
}
.noticia_resumen a:hover {
	font-family:tahoma;
	font-size:11px;
	font-weight:bold;
	color:#0099CC;
	text-decoration: none;
}
.noticia_header {
	font-family: tahoma;
	font-size: 14px;
	color: #333333;
	text-decoration:none;
	margin:5px;
	text-align:justify;
	background-color: #C0C0C0;
	padding: 5px;
}
.noticia_fuente {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
	text-decoration:none;
	margin:10px;
	text-align:right;
}

/* LOGIN: La clase LOGIN_TEXT define el texto de la sección de ingreso de los
   usuarios que tienen seguimiento de proyectos. La clase LOGIN_TEXTBOX define
   la apariencia de las cajas de texto donde se capturan usuario y contraseña.
   La clase LOGIN_BOTON define la apariencia del botón para entrar a la sección
   de usuarios registrados. */
   
.login_text {
	font-family:tahoma;
	font-size:11px;
	color:#333333;
	text-align: justify;
}
.login_textbox {
	width:120px;
	font-family: tahoma;
	font-size: 9px;
	text-transform: uppercase;
	font-weight: bold;
}
.login_boton {
	background: #5F6364;
	border:1px solid #000000;
	font-family:tahoma;
	font-size:11px;
	color:#FFFFFF;
	text-transform:capitalize;
	font-weight:bold;
	padding-left:2px;
	padding-right:2px;
	height:18px;
	margin-top: 3px;
}
.comment_textbox {
	width:500px;
	font-family: tahoma;
	font-size: 12px;
	text-transform: none;
	font-weight: bold;
	background-color: #FFC;
	margin-top: 2px;
	margin-bottom: 2px;
}
.comment_text {
	width:500px;
	font-family: tahoma;
	font-size: 12px;
	text-transform: none;
	background-color: #FFC;
	margin-top: 2px;
	margin-bottom: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
}