@charset "utf-8";
/* CSS Document */

/* OK */
BODY {	 /* BODY alineado a la izquierda*/
background:#FFFFFF; 
font : 11pt arial, tahoma; 
color:#000000; 
margin : 0px 0px 0px 0px; 
text-align: center; 
/*background-image: url(../imagenes/sombra_fondo.png); /*Fondo*/
/*background-repeat: repeat-y;*/
/*background-image: url(../imagenes/untitled.png); SI SE DESEA AGREGAR IMAGEN DE FONDO*/ 
} 

#borde{ /* hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa. */
border: 2px solid #cccccc; 
text-align: left; 
width: 700px; 
margin: auto; 
} 

#contenedor_fondo{ 	 /* Definimos el formateo de la capa contenedor, alineamiento de texto a la izquierda */
text-align: center; /*Alineamiento texto interno izquierdo*/
width: 870px; /* Tamaño de la capa*/ 
margin: auto; /*Ubicacion de la Capa al Centro*/
background: url(../imagenes/sombra.png);  
background-repeat:repeat-y; /* Repita imagen en y */
/*  text-align: left;  
   width: 830px; 
   background-color:#FFFFFF; 
*/
} 

/* OK */
#contenedor{ 	 /* Definimos el formateo de la capa contenedor, alineamiento de texto a la izquierda */
text-align: center; /*Alineamiento interno izquierdo*/
width: 830px; /* Tamaño de la capa*/ 
margin: auto; /*Ubicacion de la Capa al Centro*/
/*background: url(../imagenes/sombra_fondo.jpg); Fondo
background-repeat:repeat-y; Repita imagen en y
  text-align: left;  
   width: 830px; 
   background-color:#FFFFFF; 
*/
} 

/* OK */
#cabecera{ 	 /* Definimos el formato de la Cabecera*/
/*  background: transparent url(images2/cabecera.jpg) no-repeat; */
/*    height: 288px; */
    width: 830px; /*Ancho*/
	text-align:center;
} 

#cabecera h1 { 
    margin: 0px 0px 0px 0px; 
} 
#cabecera h1 span { 
    display:none; 
} 


#navegador{ /*se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo. */ 
background : #F5F4C3 url(images/fondonav.gif); 
padding : 3px 10px 5px 10px; 
border-top : 1px solid #cccccc; 
border-bottom : 1px solid #cccccc; 
} 


A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ /*  Estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), */
color: #494E6B; 
} 
A.enlacenav:HOVER{ 
color: #3F7DE3; 
} 

/* OK */
#cuerpo{ 	 /* Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. */
width:830px; /*Tamaño*/
padding: 7px 0px 0px 0px; /*Espacio insertado dentro de la capa*/
background-color: #FFFFFF; 
} 


H1{ /* También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo: */
font-size: 12pt; 
} 

#navabajo{ /* Al estilo de esta Clase Definimos negrita. 
Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación. 
*/
font-weight : bold;
}

A.new, A.new:VISITED, A.new:HOVER, A.new:ACTIVE, A.new:FOCUS, A.new:LINK
{ color:#0F5CFF; /*Para este nuevo grupo de Vinculos se crea un nuevo color para los LINK y un nuevo color para HOVER */
} 
A.new1, A.new1:VISITED, A.new1:HOVER, A.new1:ACTIVE, A.new1:FOCUS, A.new1:LINK
{ 
  text-decoration: none;
  color:#3366FF; /*Para este nuevo grupo de Vinculos se crea un nuevo color para los LINK y un nuevo color para HOVER */
  font-size: 10pt;
  font-weight: bold;} 
/* ESTE ES EL COLOR CUANDO PASAMOS EL CURSOR POR EL VINCULO 
A.new:HOVER{ 
color: #999999; 
} */

 
/* OK */ 
#cuerpo_lateral{ /* Estilo para la barra lateral derecha.
Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.
Con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas. 
*/
width: 180px; 
color:#3366FF; /*Para este nuevo grupo de Vinculos se crea un nuevo color para los LINK y un nuevo color para HOVER */
font-size: 10pt;
font-weight: bold; 
//*background-color: #E9E9E9; /*Color fondo*/
/*border:1px solid #666666; Color borde DIV*/  
//*border-bottom : 1px solid #cccccc;
border-right : 1px solid #cccccc;  */
/*float:left; */
float:left; 
margin:0px 0px 0px 0px; }
} 

/* OK */ 
#lateral_buscar{ 
width: 170px; 
/*background-image:url(../imagenes/back1.jpg); */
/*background-color: #E9E9E9; Color fondo*/
/*border:1px solid #666666; Color borde DIV*/  
/*border-bottom : 1px solid #cccccc; 
border-right : 1px solid #cccccc; */
/*border: 1px solid #999999;*/
float:left; 
margin:0px 0px 0px 0px; 
}

/* OK */ 
#lateral_publi{ 
width: 180px; 
/*background-color: #E9E9E9; /*Color fondo*/
/*border:1px solid #666666; Color borde DIV*/  
/*border-bottom : 1px solid #cccccc; 
border-right : 1px solid #cccccc; */ 
float:left; 
margin:0px 0px 0px 0px; 
} 
 


.titlat{ /* Titulo para la barra lateral derecha.
La clase "titlat", que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen
Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendrá 8 pixel.  .*/
background-color:#68729E; 
color:#ffffff; 
font-size:8pt; 
text-transform : uppercase; 
padding: 7px 3px 7px 8px; 
font-weight : normal; 
letter-spacing : 2px; 
margin: 0px 0px 8px 0px; 
} 

.cuerpolateral{ /*Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos. */
padding: 5px 4px 13px 10px; 
} 

INPUT { /* Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos. */
font-size : 8pt; 
} 

#fbuscar form{ /* El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo. */
margin-bottom : 0px; 
margin-top : 0px; 
} 

#campotexto{ /*La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la izquerda. */
float: left; 
} 

#campotexto input{ /* El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.  */
width:100px; 
} 

#botonbuscar { /* La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. */
padding-top : 3px; 
padding-left: 106px; 
} 

#botonbuscar input{ /*Con esta última definición estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.  */
border : 0px none; 
} 

.radio{ /* Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.*/
clear:both; 
} 

#otras ul{ /*se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.  */
margin : 5px 10px 0px 0px; 
padding: 0px 0px 0px 4px; 
list-style: none; 
} 

#otras li{ /* Para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.  */
padding-left: 14px; 
background: transparent url("images/bullet.gif") 0 2px no-repeat; 
margin-bottom: 10px; 
} 

/* OK */ 
#principal{ /* La capa "principal", que antes tenía ese margen de 170 píxeles, ya no lo necesita, pero en cambio sí que hemos puesto el atributo float: left, para que se flote en la parte de la izquierda. */
background-color: #ffffff; 
padding: 10px 0px 0px 0px; 
width: 640px; 
float: right; 
/*border-bottom : 1px solid #cccccc; 
border-right : 1px solid #cccccc; */
} 


#pie{ /*Con "clear:both" indicamos que la capa debe mostrarse SIN elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral. 
Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel. 
 */
clear : both; 
color : #fff; 
background:#2c54a1 ;
font : 9pt arial, tahoma; 
text-align : right; 
margin : 0px 0px 0px 0px; 
padding: 0px 12px 0px 0px; 
/*padding-bottom:10px; */
} 

#pie_borde{ /*Con "clear:both" indicamos que la capa debe mostrarse SIN elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral. 
Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel. 
 */
text-align: center; /*Alineamiento interno izquierdo*/
width: 850px; /* Tamaño de la capa*/ 
margin: auto; /*Ubicacion de la Capa al Centro*/
background: url(../imagenes/pie.png);  
/*background-repeat:repeat-x; /* Repita imagen en y */
clear : both; 
/*padding-bottom:10px; */
} 

/*
NOTA:  PAGINA FLUIDA
Se puede conseguir que se vea bien en IE, Firefox y Opera sin necesidad de añadir un "pié" a la página. La solución es NO emplear elementos flotantes.
Estos son los cambios que hay que hacer:
1. Quitar el "pie" (no va a hacer falta)
2. En #contenedor añadir "position: relative"
3. En #cuerpo suprimir "float: left"
4. En #lateral suprimir "float: right" y añadir: "position: absolute", "top: 129px" y "right: 0px"

Al no usar los elementos flotantes, la capa "contenedor" crece para abarcar a "cuerpo" y "lateral".
*/

table.tabla_1{
background-color:#f2f2f2;
//*border: px solid #000000;
/*border: 1px solid #999999;*/
/*-moz-border-radius:12px; Radio*/
} 

/* ESTILOS DE FUENTES*/
.Estilo1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #003E71;
	}
.Estilo2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #003E71;
}
.Estilo3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
.botones {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	/*font-weight: bold;*/
	color: #003E71;
}
.titulo_table {
	font-family: tahoma;
	font-size: 13px;
	font-weight: bold;
	color:  #003E71;
	border:1px solid #E2EAFE; 
}

.tabla_borde {
	border:1px solid #CCCCCC; 
}

.t_azul_claro {
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	color:  #3366ff;
}
.t_azul_claro3 {
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	color: #3377ff;
}
.t_azul_claro33 {
	font-family: tahoma;
	font-size: 18px;
	font-weight: bold;
	color: #3377ff;
}

.titulo_blanco {
	font-family: tahoma;
	font-size: 13px;
	font-weight: bold;
	color:  #ffffff;
}
.titulo_blanco_g {
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	color:  #ffffff; 
	text-decoration:none;
}
titulo_blanco_g:link, titulo_blanco_g:visited, titulo_blanco_g:active {
    text-decoration:none;
}
.fecha {
	font-family: tahoma;
	font-size: 12px;
	font-weight: bold;
	color:  #FF633C;
}
.max {
	font-family: tahoma;
	font-size: 12px;
	font-weight: bold;
	color:  #000000;
}

.n_bonos {
	font-family: verdana;
	font-size: 14px;
	font-weight: bold;
	color:  #FF633C;
}

.titulo_opc {
	font-family: arial;
	font-size: 20px;
	font-weight: bold;
	color:  #6699ff;
}
.titulo_opc2 {
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
	color:  #6699ff;
}
.texto_p1 {font-family: arial;font-size: 10px; color: #000000;}
.texto_p2 {font-family: arial;font-size: 10px; color:#FF633C;}
.texto_p3 {font-family: arial;font-size: 10px; color:#3377ff;}
.texto_p4 {font-family: arial;font-weight: bold; font-size: 10px; color:#000000;}
.texto {font-family: verdana;font-size: 14px; color: #000000;}
.texto_m2 {font-family: Verdana;font-size: 12px; color: #000000;}
.texto_m7 {font-family: Verdana;font-size: 12px; color: #000000; }
.texto_m{font-family: Verdana;font-size: 12px; color: #000066;}