/* Reset
------------------------------------------------------------------*/
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin:0;
	padding:0;
	}
ul,li {
	list-style-type:none;
	}
hr {
	clear:both;
	visibility:hidden;
	}
.clear {
	clear:both;
	}
.centered, p.centered {
	text-align:center;
	}
.right {
	text-align:right;
	}		
img {
	border:0;
	}
	
:link,:visited {
	text-decoration:none;
	}

/* General
------------------------------------------------------------------*/
body {
	background:white;
	font:13px arial;
	border-top:3px solid #0063dc;
	}

/* PNG FIX para IE6
------------------------------------------------------------------*/
#cabecera #logo img, .png-fix {
	behavior: url(/img/iepngfix.htc); /* this path is relative to the html documents, not the css */
	}
#logo-mapas img {
	behavior: url(/img/iepngfix.htc); /* this path is relative to the html documents, not the css */
	}

/* Layout
------------------------------------------------------------------*/
#canvas {
	width:  990px;
	margin:  0 auto;
	padding: 0px;
	overflow: hidden;
	}
#inner-canvas {
	width:  970px;
	margin:  0 auto;
	padding: 0;
	overflow: hidden;
	}
#cuerpo {
	margin-top:23px;
	}
.line {
	float:left;
	width:100%;
	position:relative;
	}
.item {
	position:relative;
	float:left;
	left:100%;
	padding-bottom: 24px;
	}

h3 {
	padding: 3px 7px;
	font-weight: bold;
	font-size: 16px;
	}

a {
	color:#0063dc;
	}
a:hover, a:active {
	text-decoration:underline;
	}


/*
Cabecera
------------------------------------------------------------------*/
#cabecera {
	width: 970px;
	position: relative;
	height: 235px;
	background: url(cabecera-postit.png) no-repeat top left;
	/*overflow:hidden;*/
	}
	#cabecera #foto-cabecera {
		position:absolute;
		width:100%;
		margin-top:89px;
		height:146px;
		background:transparent url(/img/layout/foto-cabecera-01.jpg) no-repeat top left;
		}
		#cabecera #foto-cabecera h1 {
			display:block;
			height:1px;
			text-indent:-9999px;
			}
	#cabecera #logo {
		position: relative;
		height: 82px;
		text-align:center;
		padding-right:20px;
		padding-top:22px;
		}
		
	#cabecera #menu {
		position:absolute;
		overflow:hidden;
		background:transparent url(/img/layout/foto-cabecera-01.jpg) no-repeat scroll -95px -107px; /* default:107  hover:146  active:185 */
		height:39px;
		left:95px;
		top:196px;
		}
		#cabecera #menu li{
			display:block;
			float:left;
			margin:0;
			padding:0;
			padding-right:5px;
			text-indent:-9999px;
			}
			#cabecera #menu li a {
				position:relative;
				display:block;
				margin:0; padding:0;
				background:transparent url(/img/layout/foto-cabecera-01.jpg) no-repeat scroll -95px -107px; /* default:107  hover:146  active:185 */
				height:39px;
				overflow:hidden;
				text-decoration:none;
				outline:none;
				}
				
				/*
				RECORDATORIO
				Dimensiones iniciales -->	89,90,120,94,69,100,106
				Hay que sumar 8 al ancho de la pestaña (por las sombras) -->	97,98,128,102,77,108,114
				Y sumar 4 para tener mismo ancho a los 2 lados:	101,102,132,106,81,112,118
				Para sacar el valor de la X de bgposition, vemos el segundo como sale:  201 <--- 95+101+CINCO!!
				*/
				
				/*
				Anchos generales para pestañas
				---------*/
				#menu li#portada a 			{ width:101px; }
				#menu li#noticias a 			{ width:102px; }
				#menu li#previsiones a 	{ width:132px; }
				#menu li#en-la-red a 		{ width:106px; }
				#menu li#fotos a 				{ width:81px;  }
				#menu li#nosotros a 			{ width:112px; }
				#menu li#participa a 		{ width:118px; }
				/*
				Estado por defecto:107 y estado hover:146 (el parametro para la X -el primero- siempre es el mismo)
				---------*/
				#menu li#portada a:link, #menu li#portada a:visited 					{ background-position: -95px -107px;  }
				#menu li#portada a:hover, #menu li#portada a:focus 					{ background-position: -95px -146px;  }
				#menu li#noticias a:link, #menu li#noticias a:visited 				{ background-position: -201px -107px; }
				#menu li#noticias a:hover, #menu li#noticias a:focus 				{ background-position: -201px -146px; }
				#menu li#previsiones a:link, #menu li#previsiones a:visited 	{ background-position: -308px -107px; }
				#menu li#previsiones a:hover, #menu li#previsiones a:focus 	{ background-position: -308px -146px; }
				#menu li#en-la-red a:link, #menu li#en-la-red a:visited 			{ background-position: -445px -107px; }
				#menu li#en-la-red a:hover, #menu li#en-la-red a:focus 			{ background-position: -445px -146px; }
				#menu li#fotos a:link, #menu li#fotos a:visited 							{ background-position: -556px -107px; }
				#menu li#fotos a:hover, #menu li#fotos a:focus 							{ background-position: -556px -146px; }
				#menu li#nosotros a:link, #menu li#nosotros a:visited 				{ background-position: -642px -107px; }
				#menu li#nosotros a:hover, #menu li#nosotros a:focus 				{ background-position: -642px -146px; }
				#menu li#participa a:link, #menu li#participa a:visited 			{ background-position: -759px -107px; }
				#menu li#participa a:hover, #menu li#participa a:focus 			{ background-position: -759px -146px; }
				/*
				Estado hover:146 (el parametro para la X -el primero- siempre es el mismo)
				
				#menu li#portada a 			{ background-position: -95px -107px;  }
				#menu li#noticias a 			{ background-position: -201px -107px; }
				#menu li#previsiones a 	{ background-position: -308px -107px; }
				#menu li#en-la-red a 		{ background-position: -445px -107px; }
				#menu li#fotos a 				{ background-position: -556px -107px; }
				#menu li#nosotros a 			{ background-position: -642px -107px; }
				#menu li#participa a 		{ background-position: -759px -107px; }---------*/

				/*
				Pestaña activa:185 (el parametro para la X -el primero- siempre es el mismo)
				---------*/
				body#pagina-portada 			#menu li#portada a 			{ background-position: -95px -185px;  }
				body#pagina-noticias 		#menu li#noticias a 			{ background-position: -201px -185px; }
				body#pagina-previsiones 	#menu li#previsiones a 	{ background-position: -308px -185px; }
				body#pagina-en-la-red 		#menu li#en-la-red a 		{ background-position: -445px -185px; }
				body#pagina-fotos 				#menu li#fotos a 				{ background-position: -556px -185px; }
				body#pagina-nosotros 		#menu li#nosotros a 			{ background-position: -642px -185px; }
				body#pagina-participa 		#menu li#participa a 		{ background-position: -759px -185px; }
		
/*
ITEM IDs
------------------------------------------------------------------*/

#izquierda-centro {
	float:left;
	width: 735px;
	padding-bottom:0;
	}
	#izquierda-centro .content-izquierda-centro {
		
		}

	
#banner468 {
	clear:both;
	text-align:center;
	padding-bottom: 24px;
	}

#izquierda {
	float:left;
	width: 213px;
	}
	#izquierda .content-izquierda {
		height:100%;
		}

#centro {
	float:right;
	width: 500px;
	}
	#centro .content-centro {
		height:100%;
		}

#derecha {
	float:right;
	width: 213px;
	}
	#derecha .content-derecha {
		height:100%;
		}
	
#pie {
	margin-left: -970px;
	width: 970px;
	padding-bottom:0;
	}
	#pie .content-pie {
		height: 110px;
		text-align:center;
		}

/*
SLIDES
------------------------------------------------------------------*/

#slides {
	padding-bottom: 24px;
	}

/*
FOTOS
------------------------------------------------------------------*/

#ver-galeria {
	position:absolute;
	top:0;
	left:0;
	width:95px;
	height:68px;
	background:#444 url(/img/layout/ultimas-fotos-promote.png) no-repeat bottom left;
	color:white;
	}
#contenido-ver-galeria {
	position:relative;
	height:66px;
	}
#contenido-ver-galeria a {
	position:absolute;
	top:26px;
	left:10px;
	}
#contenido-ver-galeria a img {
	margin:0; padding:0;
	}
#flecha-fotos-portada {
	position:absolute;
	top:0;
	left:95px;
	width:7px;
	height:68px;
	background:transparent url(/img/layout/flecha-fotos-portada.gif) no-repeat top left;
	}
#esquinas-fotos-portada-derecha {
	position:absolute;
	top:0;
	right:0;
	width:1px;
	height:68px;
	background:transparent url(/img/layout/esquinas-fotos-portada-derecha.gif) no-repeat top right;
	}
#pixelpostpromote {
	margin-left:95px;
	}
#pixelpostpromote a {
	float:left;
	}
#ultimas-fotos {
	position:relative;
	overflow:hidden;
	width:734px;
	margin-bottom:22px;
	}
	#ultimas-fotos img {
		padding:0 0 3px 3px;
		float:left;
		}
		#ultimas-fotos a.thumb img {
			filter:alpha(opacity=100); 
			-moz-opacity: 1.0; 
			opacity: 1.0;
			}
		#ultimas-fotos a.thumb:hover img, #ultimas-fotos a.thumb:active img {
			filter:alpha(opacity=80); 
			-moz-opacity: 0.8; 
			opacity: 0.8;
			}
	#ultimas-fotos #enviar {
		position:absolute;
		display:block;
		padding:0; margin:0;
		bottom:2px;
		right:0;
		width: 68px;
		height: 68px;
		background: #f2f2f2 url(/img/layout/envia-tus-fotos.png) no-repeat top left;
		}
		#ultimas-fotos #enviar a {
			display:block;
			position:absolute;
			top:32px;
			width:68px;
			text-align:center;
			font-size:11px;
			font-weight:bold;
			}

/*
CAJAS DE PORTADA
------------------------------------------------------------------*/
.caja-portada {
	padding-bottom: 20px;
	}
	
.caja-portada h3 {
	text-indent:-9999px;
	padding:0; margin:0;
	height:26px;
	}

.barra-top {
	/*padding-top: 1px;*/
	/*background: black url(fondoesquinas2.png) no-repeat top left;*/
	background: #444;
	}
.esquinas {
	height:1px;
	font-size:1px;
	line-height:1px;
	background:transparent;
	overflow:hidden;
	border-left:1px solid white;
	border-right:1px solid white;
	display:block;
	}
.esquinas2 {
	height:1px;
	font-size:1px;
	line-height:1px;
	background:transparent;
	overflow:hidden;
	border-left:2px solid white;
	border-right:2px solid white;
	display:block;
	}

.barra-gris-bottom {
		clear:both;
		padding: 3px 6px;
		background: #e5e5e5 /*url(fondoesquinas.png) no-repeat bottom left*/;
		font-weight: bold;
		font-size: 11px;
		margin-bottom:-1px;
	}


#c-previs { padding-bottom:0; }
	#c-previs h3 { background:transparent url(/img/texto/portada-las-previsiones-de-hoy.png) no-repeat top left; }
	#c-previs .barra-top {  }
	#c-previs .barra-gris-bottom {  }
	#mapa-previs {
		position:relative;
		margin-top:1px;
		overflow:hidden;
		width:213px;
		height:154px;
		background:black url(mapafnmoc.gif) no-repeat 0 1px;
	}
	#oleaje-hoy {
		position:absolute;
		padding:2px;
		bottom:2px;
		right:4px;
		color:white;
		background: black;
		font-size: 11px;
		font-weight:bold;
	}
	#lista-zonas {
		background-color:#f5f6f7;
	}
	#lista-zonas h4 {
		height:24px;
		border-bottom:1px solid white;
		border-top:1px solid white;
		line-height:24px;
		font-size:11px;
		padding-left:9px;
		background-color:#ccc;
	}
		#lista-zonas ul#previsiones-olas-mediterraneo, #lista-zonas ul#previsiones-olas-espana {
		}
		#previsiones-olas-mediterraneo {
			margin-top:-1px;
			padding-top:13px;
			padding-bottom:10px;
			background:url(/img/layout/navegacion-slider.gif) no-repeat 0px -284px; 
		}
		#previsiones-olas-espana {
			padding:10px 0;
			border-top:1px dotted #ccc;
		}
			#lista-zonas ul li {
				font-weight:bold;
				font-size:11px;
				letter-spacing:3px;
				text-transform: uppercase;
				letter-spacing: 3px;
			}
				#lista-zonas ul li a {
					padding:5px 17px;
					background:url(/img/layout/flechas-menu-previs-portada.png) no-repeat 189px 50%; 
					display:block;
					text-decoration:none;
					color:#777;
					outline:none;
				}
				#lista-zonas ul li a:hover, #lista-zonas ul li a:active {
					background-color:#bad5f6;
					background-position:-311px 50%;
					text-decoration:none;
					color:black;
				}

#c-en-la-red { padding-bottom: 24px; }
	#c-en-la-red h3 { background:transparent url(/img/texto/portada-visto-en-la-red.png) no-repeat top left; }
	#c-en-la-red #contenido-en-la-red { background:#f5f6f7; color:#888; font-size:11px; margin:1px 0; }
		#c-en-la-red #contenido-en-la-red li { }
		#c-en-la-red #contenido-en-la-red a { display:block; padding:7px; }
		#c-en-la-red #contenido-en-la-red a:hover, #c-en-la-red #contenido-en-la-red a:active { background:#e5e5e5; text-decoration:none; }
		#c-en-la-red #contenido-en-la-red h4 { font-size:11px; color:#444; }
		#c-en-la-red #contenido-en-la-red p { color:#666; }
	#c-en-la-red .barra-top { position:relative; }
	#c-en-la-red .barra-gris-bottom {  }

#c-surfeame { padding-bottom:0; }
	#c-surfeame h3 { background:transparent url(/img/texto/portada-links-via-surfeame.png) no-repeat top left; }
	#c-surfeame #contenido-surfeame { background:#f5f6f7; color:#888; font-size:11px; margin:1px 0; }
		#c-surfeame #contenido-surfeame li { }
		#c-surfeame #contenido-surfeame a { display:block; padding:5px 18px 5px 7px; color:#444; }
		#c-surfeame #contenido-surfeame a:hover, #c-surfeame #contenido-surfeame a:active { }
	#c-surfeame .barra-top { position:relative; }
	#c-surfeame .barra-gris-bottom {  }
	.icono-ventana-nueva { padding-right:14px; background:url(/img/iconos/target-blank.png) no-repeat right; }
	.icono-ventana-nueva-lista { background:url(/img/iconos/target-blank-gris.png) no-repeat -999px -999px; }
	.icono-ventana-nueva-lista:hover { background-color:#e5e5e5; text-decoration:none; background-position:center right; }


	
/* Layout
------------------------------------------------------------------*/
#canvas {
	width:  990px;
	margin:  0 auto;
	padding: 0px;
	overflow: hidden;
	}
#inner-canvas {
	width:  970px;
	margin:  0 auto;
	padding: 0;
	overflow: hidden;
	}
.barra-gris-bottom {
		clear:both;
		padding: 3px 6px;
		background: #e5e5e5;
		font-weight: bold;
		font-size: 11px;
		margin-bottom:-1px;
	}
.esquinas {
	display:block;
	position:relative;
	z-index:5;
	height:1px;
	font-size:1px;
	line-height:1px;
	background:transparent;
	overflow:hidden;
	border-left:1px solid white;
	border-right:1px solid white;
	}

/* ALA positioning
------------------------------------------------------------------*/
.line {
	float: left;
	width: 100%;
	position: relative;
	background:transparent;
	}
.item {
	position: relative;
	float: left;
	left: 100%;
	padding-bottom: 24px;
	}

/* Enlaces
------------------------------------------------------------------*/
a {
	color:#0063dc;
	}
a:hover, a:active {
	text-decoration:underline;
	}

/* Cabecera
------------------------------------------------------------------*/
#cabecera {
	width: 970px;
	position: relative;
	height: 235px;
	background: url(../img/layout/postit-cabecera.png) no-repeat top left;
	/*overflow:hidden;*/
	}
	#cabecera #foto-cabecera, #cabecera #menu, #cabecera #menu li a {
		background:transparent url(/img/layout/foto-cabecera-01.jpg) no-repeat;
		}
	#cabecera #foto-cabecera {
		position:absolute;
		width:100%;
		margin-top:89px;
		height:146px;
		background-position:top left;
		}
		#cabecera #foto-cabecera h1 {
			display:block;
			height:1px;
			text-indent:-9999px;
			}
	#cabecera #logo {
		position: relative;
		height: 82px;
		text-align:center;
		padding-right:20px;
		padding-top:22px;
		}
		
	#cabecera #menu {
		position:absolute;
		overflow:hidden;
		background-position:-95px -107px;
		height:39px;
		left:95px;
		top:196px;
		}
		#cabecera #menu li{
			display:block;
			float:left;
			margin:0;
			padding:0;
			padding-right:5px;
			text-indent:-9999px;
			}
			#cabecera #menu li a {
				position:relative;
				display:block;
				margin:0; padding:0;
				background-position:-95px -107px;
				height:39px;
				overflow:hidden;
				text-decoration:none;
				}
				
				/*
				RECORDATORIO para los anchos generales de las pestañas
				Dimensiones iniciales -->	89,90,120,94,69,100,106
				Hay que sumar 8 al ancho de la pestaña (por las sombras) -->	97,98,128,102,77,108,114
				Y sumar 4 para tener mismo ancho a los 2 lados:	101,102,132,106,81,112,118
				Para sacar el valor de la X de bgposition, el segundo se saca así:  95+101+CINCO = 201
				*/
				
				/*
				Anchos generales de las pestañas
				---------*/
				#menu li#portada a 			{ width:101px; }
				#menu li#noticias a 			{ width:102px; }
				#menu li#previsiones a 	{ width:132px; }
				#menu li#en-la-red a 		{ width:106px; }
				#menu li#fotos a 				{ width:81px;  }
				#menu li#nosotros a 			{ width:112px; }
				#menu li#participa a 		{ width:118px; }
				/*
				Estado por defecto:107 y estado hover:146 (el parametro para la X -el primero- siempre es el mismo)
				---------*/
				#menu li#portada a:link, #menu li#portada a:visited 					{ background-position: -95px -107px;  }
				#menu li#portada a:hover, #menu li#portada a:focus 					{ background-position: -95px -146px;  }
				#menu li#noticias a:link, #menu li#noticias a:visited 				{ background-position: -201px -107px; }
				#menu li#noticias a:hover, #menu li#noticias a:focus 				{ background-position: -201px -146px; }
				#menu li#previsiones a:link, #menu li#previsiones a:visited 	{ background-position: -308px -107px; }
				#menu li#previsiones a:hover, #menu li#previsiones a:focus 	{ background-position: -308px -146px; }
				#menu li#en-la-red a:link, #menu li#en-la-red a:visited 			{ background-position: -445px -107px; }
				#menu li#en-la-red a:hover, #menu li#en-la-red a:focus 			{ background-position: -445px -146px; }
				#menu li#fotos a:link, #menu li#fotos a:visited 							{ background-position: -556px -107px; }
				#menu li#fotos a:hover, #menu li#fotos a:focus 							{ background-position: -556px -146px; }
				#menu li#nosotros a:link, #menu li#nosotros a:visited 				{ background-position: -642px -107px; }
				#menu li#nosotros a:hover, #menu li#nosotros a:focus 				{ background-position: -642px -146px; }
				#menu li#participa a:link, #menu li#participa a:visited 			{ background-position: -759px -107px; }
				#menu li#participa a:hover, #menu li#participa a:focus 			{ background-position: -759px -146px; }
				/*
				Estado hover:146 (el parametro para la X -el primero- siempre es el mismo)
				---------*/
				#menu li#portada a 			{ background-position: -95px -107px;  }
				#menu li#noticias a 			{ background-position: -201px -107px; }
				#menu li#previsiones a 	{ background-position: -308px -107px; }
				#menu li#en-la-red a 		{ background-position: -445px -107px; }
				#menu li#fotos a 				{ background-position: -556px -107px; }
				#menu li#nosotros a 			{ background-position: -642px -107px; }
				#menu li#participa a 		{ background-position: -759px -107px; }
				/*
				Pestaña activa:185 (el parametro para la X -el primero- siempre es el mismo)
				---------*/
				body#pagina-portada 			#menu li#portada a 			{ background-position: -95px -185px;  }
				body#pagina-noticias 		#menu li#noticias a 			{ background-position: -201px -185px; }
				body#pagina-previsiones 	#menu li#previsiones a 	{ background-position: -308px -185px; }
				body#pagina-en-la-red 		#menu li#en-la-red a 		{ background-position: -445px -185px; }
				body#pagina-fotos 				#menu li#fotos a 				{ background-position: -556px -185px; }
				body#pagina-nosotros 		#menu li#nosotros a 			{ background-position: -642px -185px; }
				body#pagina-participa 		#menu li#participa a 		{ background-position: -759px -185px; }


/*
Pie de pagina
------------------------------------------------------------------*/
#contiene-pie {
	clear:both;
	margin:0;
	padding:30px 0 25px 0;
	}

#contiene-publi-pie {
	background:#e8f1fc;
	text-align:center;
	margin-bottom:11px;
}
#publi-pie {
	margin:13px auto;
}

#pie-de-pagina {
	position:relative;
	background:#333 url(/img/logos/logo-pie-de-pagina.gif) no-repeat bottom right;
}
#pie-de-pagina ul {
	height:32px;
	margin:-1px 0;
	list-style:none;
}
#pie-de-pagina li {
	float:left;
	height:32px;
	line-height:32px;
	font-size:11px;
	font-weight:bold;
	letter-spacing:1px;
	border-right:1px solid #646464;
}
#pie-de-pagina a {
	display:block;
	padding:0 12px;
	text-decoration:none;
	color:#ccc;
}
#pie-de-pagina span {
	display:block;
	padding:0 12px;
	color:#ccc;
}
#pie-de-pagina a:hover, #pie-de-pagina a:active {
	text-decoration:none;
	background:#222;
	color:white;
}
#pie-de-pagina #nav-copy{
	background:url(/img/layout/esquinas-pie-izda.gif) no-repeat top left;
}
#pie-de-pagina #nav-stas{
	
}
#pie-de-pagina #nav-contacto{

}



/* Ultimas noticias
------------------------------------------------------------------*/
#ultimas-noticias h3 {
	padding:0;
	margin-top:23px;
	background: transparent url(/img/texto/noticias-portada.png) no-repeat 1px 0;
	height:24px;
	border-bottom:1px solid #aaa;
	text-indent:-9999px;
	}
#ultimas-noticias ul {
	padding:15px 0 0 0;
	}
#ultimas-noticias ul li {
	clear:both;
	color:#333;
	}
#ultimas-noticias ul li a {
	font-weight:bold;
	color:black;
	}
#ultimas-noticias ul li a img {
	display:block;
	float:left;
	margin-right:10px;
	margin-bottom:15px;
	}
#ultimas-noticias ul li span {
	color:#888;
	}