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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:.8em;
	line-height:2em;
	text-align:left;
	color:#252525;
	margin:0;
	background: #0179ff url(imagenes/gradiente.jpg) repeat-x;
	}
	
.titulos{
	font-size:1.2em;
	color:#0163d2;
	line-height:2em;
	font-weight:bold;
}
	

.subtitulos{
	font-size:1em;
	color:#0163d2;
	line-height:2em;
	font-weight:bold;
}
	


#fondo{
	background: url(imagenes/top.gif) no-repeat top center;
	}
	

#contenedor {
	width:880px;
	margin:0 auto;
	padding:0;
	position:relative;
	}
	
#branding {
	float:left;
	background-image:url(imagenes/branding.gif);
	width:354px;
	height:243px;
	}

#brandingright {
	width:336px;
	height:43px;
	background:url(imagenes/brandingright.gif);/* coloco el banner como fondo, debe tener la misma medida que el div*/
	background-position:top right;
	float:left;
	background-repeat:no-repeat;
	text-align:right;
	padding-left:190px;
	padding-top:200px;
}

#caja {
	width:880px;
	background-image: url(imagenes/back.jpg);
	background-repeat: repeat-y;
	background-color:#FFF;
	margin:0 0 0 0px;
	clear:both;
	}
		
/*Comienza lista del menu1*/

#menu1 li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:103px;/*Doy el ancho que tendra el div contenedor de mi menu*/
	height:27px;/*Doy el alto que tendra el div contenedor de mi menu*/
	padding:0 0;/*le quito el relleno al div*/
	text-align:right;
	font-size:11px;
	color:#000;
	background-color:#fff;
	
	}

#menu1 li a:hover {
	color:#000;/*color del texto dentro del div*/
	background-color:#fff; /*color del fondo dentro del div*/
	}

ul {  
	list-style:none;/*con esto quitamos las viñetas*/
	margin:0;/*le quito el margen al elemento de la lista*/
	padding:0;/*y el relleno*/
}
ul li {
	padding:0;/*le quito el relleno al elemento de la lista*/
	float:right;/*y los floto a la izquierda, asi elimino los saltos de linea*/
	}

ul li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:103px;/*doy el ancho que tendra cada boton*/
	height:auto;
	}
	
ul li a:hover {
	background-position:left;/*recorro mi imagen a la derecha para dar el efecto de hover como si fuera una mascara*/
}
ul li a span {
	display:none; /*oculto el texto*/
}

#home{
	background-image:url(imagenes/home_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}
	
#nosotros{
	background-image:url(imagenes/nosotros_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}
		
#contacto{
	background-image:url(imagenes/contacto_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}
		
/*Para el segundo menu*/		
		
#menu li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:176px;/*Doy el ancho que tendra el div contenedor de mi menu*/
	height:75px;/*Doy el alto que tendra el div contenedor de mi menu*/
	padding:0 0;/*le quito el relleno al div*/
	text-align:left;
	font-size:11px;
	color:#000;
	background-color:#fff;
	
	}

#menu li a:hover {
	color:#000;/*color del texto dentro del div*/
	background-color:#fff; /*color del fondo dentro del div*/
	}

ul {  
	list-style:none;/*con esto quitamos las viñetas*/
	margin:0;/*le quito el margen al elemento de la lista*/
	padding:0;/*y el relleno*/
}
ul li {
	padding:0;/*le quito el relleno al elemento de la lista*/
	float:left;/*y los floto a la izquierda, asi elimino los saltos de linea*/
	}

ul li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:176px;/*doy el ancho que tendra cada boton*/
	height:auto;
	}
	
ul li a:hover {
	background-position:right;/*recorro mi imagen a la derecha para dar el efecto de hover como si fuera una mascara*/
}
ul li a span {
	display:none; /*oculto el texto*/
}
#event{
	background-image:url(imagenes/event_boton.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}
#mkt{
	background-image:url(imagenes/mkt_boton.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#editorial{
	background-image:url(imagenes/editorial_boton.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#web{
	background-image:url(imagenes/web_boton.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#talent{
	background-image:url(imagenes/talent_boton.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}


/*Comienza segunda lista del banner*/

#banner li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:176px;/*Doy el ancho que tendra el div contenedor de mi menu*/
	height:179px;/*Doy el alto que tendra el div contenedor de mi menu*/
	padding:0 0;/*le quito el relleno al div*/
	text-align:left;
	font-size:11px;
	color:#000;
	background-color:#fff;
	
	}

#banner li a:hover {
	color:#000;/*color del texto dentro del div*/
	background-color:#fff; /*color del fondo dentro del div*/
	}

ul {  
	list-style:none;/*con esto quitamos las viñetas*/
	margin:0;/*le quito el margen al elemento de la lista*/
	padding:0;/*y el relleno*/
}
ul li {
	padding:0;/*le quito el relleno al elemento de la lista*/
	float:left;/*y los floto a la izquierda, asi elimino los saltos de linea*/
	}

ul li a {
	display:block;/*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
	width:176px;/*doy el ancho que tendra cada boton*/
	height:auto;
	}
	
ul li a:hover {
	background-position:right;/*recorro mi imagen a la derecha para dar el efecto de hover como si fuera una mascara*/
}
ul li a span {
	display:none; /*oculto el texto*/
}

#event2{
	background-image:url(imagenes/event_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}
#mkt2{
	background-image:url(imagenes/mkt_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#editorial2{
	background-image:url(imagenes/editorial_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#web2{
	background-image:url(imagenes/web_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}

#talent2{
	background-image:url(imagenes/talent_boton2.jpg);/*Agrego un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto en el html para ocultarlo con CSS*/
}



#texto {
		width: 556px;
		background-image: url(imagenes/texto_bg.jpg);
		background-repeat: repeat-y;
		margin:0 0 0 20px;
		clear:both;
		}
	
#texto_top {
		background-image: url(imagenes/texto_top.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		}
	
#texto_bottom {
		background-image: url(imagenes/texto_bottom.jpg);
		background-position: bottom center;
		background-repeat: no-repeat;
		padding: 2px 20px 5px 20px;
	}
	
	

#imagen{
	width:294px;
	height:338px;
	margin:5px 16px 10px 16px;
	position:absolute;
	top:540px;
	left:561px;
	clear:both;
	text-align:right;
		}

#imagen2{
		width:294px;
		margin:5px 16px 10px 16px;
		position:absolute;
		top:340px;
		left:560px;
		clear:both;
		text-align:right;
		}


	
#caja_bottom {
	width:880px;
	height:110px;
	clear:both;
	margin:0 auto;
	background:url(imagenes/caja_bottom.jpg) bottom no-repeat;
	}
	
	
#bottom {
	width:100%;
	height:130px;
	background:url(imagenes/bottom.jpg) top repeat-x;
	padding-top:130px;
	background-color:#000;
	clear:both;
	margin:0 auto;
	color:#FFF;
	text-align:center;
	line-height:1em;
	}
	
/*Agrego una lista ordenada para las viñetas en los subtitulos*/
ol {  
	list-style:none;/*con esto quitamos las viñetas*/
	margin:0;/*le quito el margen al elemento de la lista*/
	padding:0;/*y el relleno*/
	}
	
	
ol li {
	list-style-image:url(imagenes/lista.gif);
	list-style-position:inside;
	}	
	
	
/*links normales*/
a:link {
	color: #d7275e;
	text-decoration:underline;
	font-weight:bold;
	}	

/*links visitados*/
a:visited {
	color: #466dff;
	}

/*links en hover*/
a:hover {
	color: #f14178;
}

/*links activos*/
a:active {
	color: #f14178;
}