/*  AdShare  */

/* Estilos básicos de la página **************************************** */

	/* Reseteamos los márgenes y rellenos de todos los elementos.
	En diferentes navegadores los valores pueden ser distintos para algunos elementos */
	* {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	img {
		border: none;
	}

	.clear {
		clear: both; /* clase para "dejar espacio" para los flotantes */
		display: none;
	}
	
	/* clase para enlaces de +info: estarán alineados en la parte inferior izq. del elemento padre.
	IMPORTANTE: su elemento padre DEBE estar posicionado (sea relativa o absolutamente). Además, DEBE tener algunas medidas definidas (ancho o alto),
	porque en caso contrario IE6 fallará *
	.info {
		position: absolute;
		right: 0;
		bottom: 0;
	}*/


	body {
		background: #ebf2fb url("../img/fondo_deg.gif") repeat-x top left;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		color:#000;
		margin:0;
		padding:0;
	}
	
	#container {
		position:relative;
		margin: 10 auto 0 auto;
	/*	padding: 36px 8px 0px 8px; */
		width: 984px;/*
		height: auto;*/
		z-index: 1;
		/*overflow: auto;*/
	}

/* ***************************************************************************
**** =Logotipo ***************************************************************
****************************************************************************** 
	
	#logo {
		display: block;
		position: absolute;
		z-index: 100;
		top: -24px;
		left: 0px;
		width: 134px;
		height: 54px;
		text-indent: -3000px;
		background: url("../img/coguan_adshare_logo.gif") no-repeat;
	}
	
	*/
	
/* ***************************************************************************
**** =Contenido principal ****************************************************
****************************************************************************** */

	#principal {
		width: 764px;
		float: left;
		position: relative; /* lo posicionamos para que sus descendientes posicionados absolutamente (que no tengan un ancestro más cercano que también esté posicionado) se posicionen con respecto a él */
		/*background: red;*/
		z-index: 50;
		margin-bottom: 20px;
	}
	

	
	/* CABECERA ********************************************************* */
	#cabecera {
		position: relative; /* lo posicionamos para que sus descendientes posicionados absolutamente (que no tengan un ancestro más cercano que también esté posicionado) se posicionen con respecto a él */
		width: 764px;
		/*       background-color:#CC9933;*/
		margin: 0;
		padding: 0;
		z-index: 10;
	}
	
		/* user link */
/*		#user-link {
			position: absolute;
			top: -15px;
			right: 15px;
			z-index: 100;
			font-size: 10px;
			color: #ef402a;
		}
		
			#user-link a {
				color: #ef402a;
				margin: 0 2px;
				text-decoration: none;
			}
	*/	
		/* Menú de idioma */
/*		#idioma {
			position: absolute;
			top: -15px;
			right: 15px;
			z-index: 100;
			font-size: 9px;
		}
		
			#idioma a {
				text-decoration: underline;
				color: #999;
			}
		*/
		
		/* Menú de productos y contacto */
		
	/*	#about_coguan {
			position: absolute;
			top: -15px;
			right: -150px;
			height: 15px;
			font-size: 9px;
			color: #999999;
			text-align: center;
		}
		
		#about_coguan a {
			color: #999;
		}
		*/
			/* dropdown menu bajo enlace "Coguan productos" */

		/*	#productos {
				position: absolute;
				top: 10px;
				left: -5px;
				width: 90px;
				font-size: 9px;
				text-align: left;
				background-color: #e7edf4;
				padding: 2px;
				visibility: hidden;
			}
			
				#productos ul{
					list-style:none;
					text-align:left;
					padding:0;
					margin:0;
					line-height: 1.3em;
				}
				
					#productos ul li{
						border:#caf solid 0px;
						display: list-item;
						float: none;
						margin:2px;
					}
					
						#productos ul li a, #productos ul li a:visited{
							color:#999999;
							text-decoration:none;
						}

						#productos ul li a:hover{
							color:#3c6aa8;
						}
			*/
	#container div.top10{
	top:10px;
	}
		/* Menú principal */
		#main-menu {
			/*position: relative;*/
			width: 764px; /*620px;*/
			height: 68px;/*
			padding: 10px 10px 5px 150px;*/
			background: url("../img/menu-bg.gif") no-repeat bottom right;/*
			overflow: auto; /* de esta forma el main-menu engloba visualmente todos sus elementos flotantes */
		}
		
			#main-menu table {
				width: 610px;
				margin: 0 0 0 154px;
				border-collapse: collapse;
				table-layout: auto;
			}
		
				#main-menu td {
					/*display: inline; /* PARCHE: soluciona el "error de margen doble" en flotantes de IE6 */
					/*float: left;
					margin: 0 12px;
					display: block;*/
					/*position: absolute;
					top: 8px;/*
					width: 105px;*/
					padding: 5px 0 0 0;
					font-size: 15px;
					font-weight: bold;
					text-align: center;
				}
				
					/* posicionamos cada elemento del menú principal */
					/*#main-menu #b-inicio {
						left: 155px;
					}
					
					#main-menu #b-anunciante {
						left: 220px;
					}
					
					#main-menu #b-soporte {
						left: 330px;
					}
					
					#main-menu #b-agencia {
						left: 415px; /* 630 */
					/*}
					
					/*#main-menu #b-marketplace{
						left: 530px; /* 415 */
					/*}
					
					#main-menu #b-mi-cuenta {
						left: 630px; /* 530 */
						/*width: 80px; /* PARCHE: para que IE6 no parta en dos líneas el texto */
						/* finalmente no hace falta. La solución ha sido la siguiente:
						- en el xhtml, en vez de escribir "Mi Cuenta", escribimos "Mi Cuenta".
						El   no hace que en IE se parta la línea en dos cuando no tenemos ancho definido
						en elementos flotantes o posicionados absolutamente */
					/*}*/
				
				#main-menu td a {
					display: block;
					/*float: left;*/
					padding: 40px 0px 0 0px; /* dejamos un relleno superior para la imagen de fondo */
					text-decoration: none;
					color: #3c6aa8;
				}
				
				#main-menu td a:hover {
					color: #ef402a;
				}
				
				#main-menu #b-inicio a {
					background: url("../img/inicio.gif") no-repeat top center;
				}
				
				#main-menu #b-inicio a:hover {
					background-image: url("../img/inicio_red.gif");
				}
				
				#main-menu #b-anunciante a {
					background: url("../img/anunciante.gif") no-repeat top center;
				}
				
				#main-menu #b-anunciante a:hover {
					background-image: url("../img/anunciante_red.gif");
				}
				
				#main-menu #b-soporte a {
					background: url("../img/soporte.gif") no-repeat top center;
				}
				
				#main-menu #b-soporte a:hover {
					background-image: url("../img/soporte_red.gif");
				}
				
				#main-menu #b-marketplace a {
					background: url("../img/buscar_anuncios.gif") no-repeat top center;
				}
				
				#main-menu #b-marketplace a:hover {
					background-image: url("../img/buscar_anuncios_red.gif");
				}
				
				#main-menu #b-mi-cuenta a {
					background: url("../img/mi_cuenta.gif") no-repeat top center;
				}
				
				#main-menu #b-mi-cuenta a:hover {
					background-image: url("../img/mi_cuenta_red.gif");
				}
				
				#main-menu #b-agencia a {
					background: url("../img/sobre_coguan.gif") no-repeat top center;
				}
				
				#main-menu #b-agencia a:hover {
					background-image: url("../img/sobre_coguan_red.gif");
				}
				
				/* a continuación los estilos para que el botón correspondiente del menú principal esté destacado, dependiendo de la página en la que se encuentre el usuario */
				/* Hemos asignado un id al body. Usando la especificidad nos dirigimos al botón Inicio en la página de Inicio, etc... */
				#inicio #main-menu #b-inicio a {
					color: #ef402a;
					background-image: url("../img/inicio_red.gif");
				}
	
	
	
	
	
	/* PANEL ******************************************** */
	#panel {
		position: relative;
		width: 100%;
		height: 216px;
		margin: 8px 0;
		/*color: #fff;
		/*background: #307887;*/
	}
	
		/* Flash */
		#flash {
			position: relative; /* para que le sea de aplicación el z-index */
			z-index: 1; /* será la capa más baja dentro de su elemento padre */
			width: 562px;
			height: 216px;
		}
		
		#flashcontent{
		 z-index: 2;
		 }
		
		/* Panel de usuario */
		#panel-usuario {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10; /* estará posicionado por encima del elemento #flash */
			width: 280px;
			height: 216px;
			background: url("../img/panel-usuario-bg.gif") no-repeat;
		}
		
		
			/* aplicable a las tres capas del panel de usuario ************************************************* */
			
			#panel-usuario form {
				visibility: hidden; /* por defecto esta capa no está visible */
				position: absolute; /* lo posicionamos para que le sea de aplicación el z-index */
				z-index: 0;
				height: 216px;
				color: #fff;/*
				background: red;*/
			}
			
			#panel-usuario form.on {
				visibility: visible;
				z-index: 1; /* la capa que está "on", se posicionará encima de las demás */
			}
			
				
				#panel-usuario ul.menu {
					float: left; /* para que englobe los elementos flotantes del menú (las pestañas) */
					width: 250px;
					height: 25px;
					padding-top: 0px;
					padding-left: 30px;
					font-size: 11px;
					font-weight: bold;
				}
					
					#panel-usuario ul.menu li {
						display: inline;
						float: left;
						/*height: 19px;*/
						/*padding-top: 6px;*/
						
						/*margin-left: 4px;*/
						color: #307887;
					}
					
						/* la primera pestaña tendrá más relleno izdo */
						#panel-usuario ul.menu li.p-buscador {
							padding-left: 15px;
						}
						
						/* y la de "registrarse un poco de margen izquierdo */
						#panel-usuario ul.menu li.p-registrarse {
							float: left;
							margin-left: 7px;
						}
					
					#panel-usuario ul.menu li a {
						float: left;
						/*padding-right: 6px; /* asignamos un padding entre el enlace y la barra vertical (|); si asignamos un margin da problemas en IE6 (repite el margin por el otro lado de la barra) */
						/*padding: 5px 0;*/
						text-decoration: underline;
						color: #307887;
						line-height: 25px; /* IMPORTANTE: hemos establecido aquí el line-height en vez de height+padding porque la altura da problemas en IE6 */
					}
					
				
				#panel-usuario form .cuerpo {
					clear: left;
					width: 215px;
					padding: 15px 20px 0 45px;
					font-size: 11px;
				}
				
					#panel-usuario form .cuerpo p {
						width: 215px;
						margin-bottom: 10px;
						line-height: 1.2em;
					}
					
					#panel-usuario form .cuerpo input.text {
						display: block;
						width: 180px;
						margin-bottom: 10px;
					}
					
					#panel-usuario form .cuerpo a {
						text-decoration: underline;
						color: #fff;
					}
					
					
			/* fin de aplicable a las tres capas del panel de usuario ****************************************** */
			
			
			
			/* capa buscador */
			
				#buscador ul.menu {
					background: url("../img/buscador-top-left-bg.gif") no-repeat top left;
				}
			
					#buscador ul.menu li.p-buscador {
						margin-left: 0;
						padding-right: 30px;
						font-size: 12px;
						background: url("../img/panel-pestana.gif") no-repeat top right;
					}
					
						#buscador ul.menu li.p-buscador a {
							text-decoration: none;
							color: #fff;
						}
						
					#buscador #texto-buscar {
						width: 190px;
					}
						
					#buscador label {/*
						display: inline;
						float: left;*/
						margin-right: 6px; /* espacio a la dcha de cada opción */
					}
					
						#buscador label.last {
							margin-right: 0; /* quitamos el espacio a la dcha de la última opción */
						}
					
						
					
					#buscador input.radio {
						vertical-align: bottom; /* alineación de los radio buttons para Firefox y Safari */
						margin-left: 1px;
						padding: 0;
						border: none;
					}
					
						/* PARCHE para IE7 */
						*:first-child+html #buscador input.radio {
							margin-left: -2px;
							vertical-align: middle;
						}
						
						/* PARCHE para IE6 */
						* html #buscador input.radio {
							margin-left: -2px;
							vertical-align: middle;
						}
						
				
					#buscador .boton {
						position: absolute; 
						bottom: 0;
						right: 0;
						width: 78px;
						height: 46px;
					}
				
						#buscador .boton a {
							position: relative;
						}
						
						#buscador .boton a span {
							display: block;
							position: absolute;
							width: 78px;
							height: 46px;
							background: url("../img/buscar-boton.gif") no-repeat;
							cursor:pointer;
						}
					

			
				#acceder ul.menu li.p-acceder {
					margin-left: 0;
					padding-top: 0;
					font-size: 12px;
					background: url("../img/panel-pestana-central-left.gif") no-repeat bottom left;
				}
				
					#acceder ul.menu li.p-acceder a {
						padding-right: 25px;
						padding-left: 25px;
						text-decoration: none;
						color: #fff;
						background: url("../img/panel-pestana-central-right.gif") no-repeat bottom right;
					}
					
				#acceder .cuerpo label {
					display: block;
					font-size: 14px;
					margin-bottom: 2px;
					margin-top: 12px;
				}
				
				#acceder .cuerpo input {
					width: 195px;
					margin-bottom: 5px;
				}
				
				#acceder .boton {
					position: absolute; 
					bottom: 0;
					right: 0;
					width: 78px;
					height: 46px;
				}
			
					#acceder .boton a {
						position: relative;
					}
					
						#acceder .boton a span {
							display: block;
							position: absolute;
							cursor:pointer;
							width: 78px;
							height: 46px;
							background: url("../img/entrar-boton.gif") no-repeat;
						}
			
			/* capa registrarse */
				/* ***** por el momento es sólo un enlace **** */
			
			
		
		
		
		
	
	/* SITIOS y GRUPOS ****************************************** */
	.sitios-grupos {
		width: 100%;
		clear: both;
		margin: 10px 0 0 0;/*
		background: #fff;*/
		color: #3c6aa8;/*
		overflow: auto;*/
	}
	
	.sitios-grupos a {
		color: #3c6aa8;
	}
	.sitios-grupos a.rss {
	padding:4px 0 0 1px;
		color: #3c6aa8;
	}
	
	.sitios-grupos li {
		float: left;
		position: relative;
	}
	
	/* parte de cabecera de la sección de sitios */
	.sitios-grupos .cabecera {
		float: left;
		width: 100%; 
		background: url("../img/sitios-grupos-menu-bg.gif") repeat-x bottom left; /* línea de 1px que simula el borde inferior de la cabecera */
	}
	
		.sitios-grupos .cabecera h1 {
			font-size: 12px;
			padding: 0px;
			line-height: 31px;
			padding-left: 35px; /* para dejar espacio para la imagen de fondo */
			margin-top: 5px;
			margin-left: 15px;
			display: inline; /* para error de margen doble en IE6 */
			float: left;
		}
		
		#sitios .cabecera h1 {
			background: url("../img/sitios-bg.png") no-repeat left center !important;
			background-image: url("../img/sitios-bg.gif");
		}
			
		#advadgroups .cabecera h1 {
			background: url("../img/adgroup_ico_home.gif") no-repeat left center;
		}
		
		#grupos .cabecera h1 {
			background: url("../img/grupos-bg.gif") no-repeat left center;
		}
		
		#enlaces .cabecera h1 {
			background: url("../img/bocadillo-azul.png") no-repeat left center !important; /* para navegadores que soportan transparencia png */
			background-image: url("../img/bocadillo-azul.gif"); /* para navegadores que NO soportan transparencia png (especialmente IE6) */
		}
	
		.sitios-grupos ul.menu {
			float: right; /* para englobar sus flotantes */
			margin-right: 100px;
			display: inline;  /* para error de margen doble en IE6 */
		}
		
			.sitios-grupos ul.menu li {
				display: block;
				float: left;
				margin-right: 20px;
			}
			
			.sitios-grupos ul.menu li.on {
				margin-right: 10px;
				background: url("../img/pestana-right-bg.gif") no-repeat bottom right;
			}
			
				.sitios-grupos ul.menu li a {
					display: block;
					float: left;
					padding: 12px 0 0 0;
					font-size: 14px;
					font-family: "Arial Black", Arial, Helvetica, sans-serif;
					text-decoration: none;
					color: #3c6aa8;
				}
				
					.sitios-grupos ul.menu li a:hover {
						color: #ef402a;
					}
				
				.sitios-grupos ul.menu li.on a {
					padding: 8px 30px 2px 8px;
					font-size: 17px;
					color: #ef402a;
					background: url("../img/pestana-left-bg.gif") no-repeat bottom left;
				}
	
	
	/* parte de webs de la sección de sitios */
	.sitios-grupos ul.webs {
		clear: both;
		width: 764px; /* NECESARIO: para que IE6 englobe sus flotantes */
		overflow: auto; /* Para que englobe sus descendientes flotantes */
		padding: 8px 0 5px 0;
		background: #fff url("../img/sitios-grupos-bg.gif") no-repeat bottom center;
	}
	
		.sitios-grupos ul.webs li {
			margin-left: 32px;
			display: inline; /* ARREGLA el error de margen doble en flotantes en IE6 */
		}
		
			.sitios-grupos ul.webs li a span {
				position: absolute;
				bottom: 5px;
				right: 2px;
				font-weight: bold;
				font-size: 11px;
				text-decoration: underline;
			}
			
			
		/* enlaces con logos */
			
			.sitios-grupos#enlaces .webs {
				padding: 30px 0;
			}
				
				.sitios-grupos#enlaces .webs li {
					margin-left: 64px;
				}
			
					.sitios-grupos#enlaces .webs a {
						font-size: 16px;
						text-indent: -3000px;
					}
			
			.logo-twitter,
			.logo-flickr,
			.logo-vimeo,
			.logo-youtube,
			.logo-facebook {
				display: block;
				height: 23px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.logo-twitter {
				width: 96px;
				background-image: url("../img/logo-twitter.gif");
			}
			
			.logo-flickr {
				width: 72px;
				background-image: url("../img/logo-flickr.gif");
			}
			
			.logo-vimeo {
				width: 79px;
				background-image: url("../img/logo-vimeo.gif");
			}
			
			.logo-youtube {
				width: 57px;
				background-image: url("../img/logo-youtube.gif");
			}
			
			.logo-facebook {
				width: 78px;
				background-image: url("../img/logo-facebook.gif");
			}
		/* fin de logos */



/* ***************************************************************************
**** =Contenido secundario ***************************************************
****************************************************************************** */

	#secundario {
		width: 180px; /* ancho + relleno izdo + relleno dcho = 196px */
		padding: 15px 8px 8px 8px;
		float: right;
		background: #fff url("../img/secundario-bg.gif") no-repeat;
		color: #777;
	}
	
	#secundario h1,
	#secundario h2, 
	#secundario a {
		color: red;
	}
	
	#secundario p {
		line-height: 1.2em; /* para unificar entre navegadores */
	}
	
	/* Título */
	#secundario h1 {
		margin-bottom: 15px;
	}
	
		/* ----- Usamos la sustitución de imagen: en el h1 está el texto "visite nuestro blog", en el span interior, cubriendo el texto, está la imagen */
		#secundario h1 {
			position: relative;
			width: 169px;
			height: 59px;
			z-index: 0;
			font-size: 10px; /* para evitar que el texto sobresalga en IE6 por debajo de la imagen */
		}
		
		#secundario h1 span {
			display: block;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 169px;
			height: 59px;
			background: url("../img/visite.gif") no-repeat;
		}
	/* Fin Título */

	
	/* Noticias */
	#secundario .noticia {
		margin-bottom: 15px;
	}
	
		#secundario .noticia h2 {
			margin-bottom: 5px;
			font-size: 13px;
		}
		
			#secundario .noticia h2 a {
				text-decoration: none;
			}
		
		#secundario .noticia p {
			margin-bottom: 5px;
		}
	
		#secundario .noticia p.pie {
			text-align: right;
		}
		
		#secundario .noticia a {
			font-weight: bold;
		}
		
		
		
	/* caja con enlace a FAQ */
		#faq {
			margin-bottom: 20px;
		}
		
		#faq a {
			display: block;
			width: 178px;
			height: 81px;
			margin: 0 auto 0 auto;
			text-indent: -4000px; /* para ocultar el texto fuera de la pantalla */
			background: url("../img/TeaserFAQ_Home.jpg") no-repeat center center;
		}
	/* fin de caja con enlace a FAQ */
		
		
		
	/* Formulario de suscripción */	

		#secundario #suscripcion:after {
			content: ".";
			display: block;
			clear: both;
			visibility: hidden;
			height: 0;
		}

		#secundario #suscripcion h2 {
			margin-bottom: 5px;
			font-size: 13px;
		}
		
		#secundario #suscripcion p {
			margin-bottom: 8px;
		}
		
		#secundario #suscripcion form {
			margin-bottom: 5px;
		}
		
			#secundario #suscripcion input {
				display: block;
				float: left;
				width: 145px;
				height: 14px;
				margin-right: 3px;
				font-size: 10px;
			}
		
			#secundario #suscripcion .boton {
				display: block;
				float: left;
				width: 19px;
				height: 17px;
				margin-bottom: 5px;
				background: url("../img/suscripcion-boton.gif") no-repeat;
			}
		
	#secundario #suscripcion,
	#secundario .feed,
	#secundario .teaser {
		margin-bottom: 10px;
		clear: both;
	}

	/* bordes redondeados inferiores del contenido lateral */
	#secundario .last {
		background: red url("../img/secundario-bottom-bg.gif") no-repeat bottom center;
	}


	/* ***************************************************************************
	**** =Pie de página ***************************************************
	****************************************************************************** */
	#pie {
		clear: both;
		width: 100%;
		font-size: 11px;
		color: #bbb;
		background: #fff;
		text-align: center;
	}
	
	#pie a:link,
	#pie a:visited {
		color: #bbb;
	}