/* Fuera del slider
------------------------------------------------------------------*/
#contenedor-slider {
	position:relative;
	float:right;
	width:352px;
	height:325px;
	background: #25241f url(/img/layout/esquinas-contenedor-slider.png) no-repeat bottom left;
	}
#contenedor-slider h2 {
	position:absolute;
	bottom:13px;
	right:0;
	width:163px;
	height:22px;
	text-indent:-9999px;
	background:#ca1500 url(/img/texto/portada/previsiones-de-olas.png) no-repeat 7px 4px;
	}

/* hack ie */
#hoverslider a img {
	display:none;
	border:none;
	}

/* Lista de zonas */
#lista-zonas-slider {
	overflow:auto;
	}
#lista-zonas-slider #slider-previsiones-olas-mediterraneo, #lista-zonas-slider #slider-previsiones-olas-espana {
	position:absolute;
	top:200px;
	}
	#lista-zonas-slider #slider-previsiones-olas-mediterraneo {
		left:5px;
		width:168px;
	}
	#lista-zonas-slider #slider-previsiones-olas-espana {
		right:5px;
		width:168px;
	}
		#lista-zonas-slider ul li {
			height:23px;
			margin-bottom:1px;
			font-weight:bold;
			font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
			font-size:11px;
			line-height:23px;
			letter-spacing:3px;
			text-transform: uppercase;
		}
			#lista-zonas-slider ul li a {
				display:block;
				height:23px;
				padding-left:7px;
				outline:none;
				text-decoration:none;
				color:#888;
				background:transparent url(/img/layout/fondo-lista-zonas-portada.gif) no-repeat top left;
			}
			#lista-zonas-slider ul li a:hover, #lista-zonas-slider ul li a:active {
				color:black;
				background-color:#ccc;
			}

/* Dentro del slider
------------------------------------------------------------------*/
#slider {
	position:relative;
	width:342px;
	height:188px;
	margin: 3px 5px 0 5px;
	outline:none;
	
	/* quitar */
	font-family:arial;	
	}

#navegaslider {
	height:17px;
	margin:0; padding:0;
	list-style:none;
	font-size:11px;
	}
#navegaslider li {
	float:left;
	width:48px;
	height:17px;
	margin-right:1px;
	line-height:17px;
	text-align:center;
	background:#f0f0f0;
	}
#navegaslider li#nav7 { margin-right:0; }

.slide-0 #nav1 { background:#f0f0f0; }
.slide-0 #nav2 { background:#f0f0f0; }
.slide-0 #nav3 { background:#f0f0f0; }
.slide-0 #nav4 { background:#f0f0f0; }
.slide-0 #nav5 { background:#f0f0f0; }
.slide-0 #nav6 { background:#f0f0f0; }
.slide-0 #nav7 { background:#f0f0f0; }

.slide-1 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-1 #nav2 { background:#f0f0f0; }
.slide-1 #nav3 { background:#f0f0f0; }
.slide-1 #nav4 { background:#f0f0f0; }
.slide-1 #nav5 { background:#f0f0f0; }
.slide-1 #nav6 { background:#f0f0f0; }
.slide-1 #nav7 { background:#f0f0f0; }

.slide-2 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-2 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-2 #nav3 { background:#f0f0f0; }
.slide-2 #nav4 { background:#f0f0f0; }
.slide-2 #nav5 { background:#f0f0f0; }
.slide-2 #nav6 { background:#f0f0f0; }
.slide-2 #nav7 { background:#f0f0f0; }

.slide-3 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-3 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-3 #nav3 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-3 #nav4 { background:#f0f0f0; }
.slide-3 #nav5 { background:#f0f0f0; }
.slide-3 #nav6 { background:#f0f0f0; }
.slide-3 #nav7 { background:#f0f0f0; }

.slide-4 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-4 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-4 #nav3 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-4 #nav4 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-4 #nav5 { background:#f0f0f0; }
.slide-4 #nav6 { background:#f0f0f0; }
.slide-4 #nav7 { background:#f0f0f0; }

.slide-5 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-5 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-5 #nav3 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-5 #nav4 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-5 #nav5 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-5 #nav6 { background:#f0f0f0; }
.slide-5 #nav7 { background:#f0f0f0; }

.slide-6 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav3 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav4 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav5 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav6 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-6 #nav7 { background:#f0f0f0; }

.slide-7 #nav1 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav2 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav3 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav4 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav5 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav6 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }
.slide-7 #nav7 { background:#bad5f6 url(/img/layout/fondo-slider-azul.gif) repeat-x top left; }

#mapaslider {
	position:relative;
	height:170px;
	margin-top:1px;
	background:#777;
	}

.slide-1 #mapas-del-slide { left:0; top: 0px; }
.slide-2 #mapas-del-slide { left:0; top: -170px; }
.slide-3 #mapas-del-slide { left:0; top: -340px; }
.slide-4 #mapas-del-slide { left:0; top: -510px; }
.slide-5 #mapas-del-slide { left:0; top: -680px; }
.slide-6 #mapas-del-slide { left:0; top: -850px; }
.slide-7 #mapas-del-slide { left:0; top: -1020px; }

#mapasloader {
	position:absolute;
	top:15px;
	left:15px;
	padding-left:22px;
	font-size:13px;
	font-weight:bold;
	color:#ccc;
	background:url(/img/iconos/loader-mapas-portada.gif) no-repeat 0 100%;
	}
	
#contiene-mapas {
	position:absolute;
	top:0;
	overflow:hidden;
	width:342px;
	height:170px;
	}
	
#mapas-del-slide {
	position:absolute;
	display:block;
	top:0;
	left:0;
	display:none;
	}

#sobreslider {
	position:absolute;
	top:0; left:0;
	width:342px;
	height: 201px;
	}

#sobreslider .esquinas{
	height:1px;
	font-size:1px;
	line-height:1px;
	background:transparent;
	overflow:hidden;
	border-left:1px solid #25241f;
	border-right:1px solid #25241f;
	display:block;
	}

#hoverslider {
	display:none;
	height:187px;
	margin:0; padding:0;
	list-style:none;
	}
#hoverslider li {
	display:block;
	float:left;
	width:49px;
	height:187px;
	margin:0; padding:0;
	}
#hoverslider li#hover7 { width:48px; }
#hoverslider li a {
	display:block;
	width:49px;
	height:187px;
	}
#hoverslider li#hover7 a { width:48px; }


/* Leyenda transparente
-------------------------*/
	
.pie-de-mapa-con-overlay {
  position: absolute;
	bottom:0;
	left:0;
  width: 342px; /* remember to set a width */
	}
.overlay{
  position: absolute;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 100%;
  background: white;
  opacity: 0.75;
  -moz-opacity: 0.75; /* older Gecko-based browsers */
  filter:alpha(opacity=75); /* For IE6&7 */
	}
/* Lets use the * html hack so only IE6 reads the rule */
* html .overlay {
	border-bottom:1px solid white;
	}
.pie-de-mapa-con-overlay .contenido-pie {
  position: relative;
	width:342px;
	}
.pie-de-mapa-con-overlay .contenido-pie p {
	margin:0;
  padding:0 4px;
	font-size:11px;
	line-height:18px;
	color:black;
	}