/* RESETEO PARTICULAR */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0; overflow:hidden;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}





/************************************************/
/* CUERPO
/************************************************/


	html,body
	{
		font-family:AlegreyaRegular, Arial, Helvetica, sans-serif;
		overflow:hidden;
		font-size:14px;
	}
	  

	body
	{
	}
	  

	h1
	{
		font-family:AlegreyaBlack, Georgia, "Times New Roman", Times, serif;
		font-weight:normal;
		color:#3e3e3e;
	}
	  

	h2
	{
		font-family:AlegreyaBlack, Georgia, "Times New Roman", Times, serif;
		font-weight:normal;
		color:#3e3e3e;
	}
	  

	h3
	{
		font-family:Georgia, "Times New Roman", Times, serif;
		font-weight:normal;
		color:#3e3e3e;
	}
	  

	a
	{
	    color:#333;
		font-weight:bold;
		text-decoration:none;
    }
	  

	a:hover
	{
		text-decoration:underline;
	}
	  




/************************************************/
/* ENCABEZADO
/************************************************/


	#bannerBkgd
	{
		background: #2487B2 url(../images/banner_oceana.jpg) no-repeat top left;
		width:100%;
		height:145px;
	}
	  

	#banner
	{
		margin:auto;
		width:1400px;
		height:145px;
	}
	  

	#title
	{
		padding-left:10px;
		color:#fff;
		font-family:AlegreyaRegular, Georgia, "Times New Roman", Times, serif;
		font-size:32px;
		white-space:nowrap;
		line-height:2.1;
	}





/************************************************/
/* BARRA DE NAVEGACION
/************************************************/


	#introTab
	{
		/* El esquema de colores corresponde a los estilos de la pagina de Oceana */
		background:#2487B2; 	/* Fondo azulito */
		color:#fff;				/* Letra blanca */

		height:28px;
		float:left;
		padding-right:10px;
		padding-left:8px;
		margin-left:4px;
		cursor:pointer;
		font-family:AlegreyaSCBold, Georgia, "Times New Roman", Times, serif;
		font-size:12px;
		font-weight:bold;
		line-height:2.0;
	}
	  

	#introTab:hover
	{
		background:#F6F5EB; 	/* Fondo grisaceo */
		color: #DC7B21;			/* Letra naranjita */

		border-radius: 4px; 
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;

	}
	  

	#links
	{
		position:absolute;
		top:110px;
		margin-left:5px;
		height:35px;
		width:1400px;
	}
	  

	.links
	{
		background:#2487B2;
		color:#fff;
		height:30px;
		width:135px;
		float:left;
		margin-left:4px;
		white-space:nowrap;
		cursor:wait;
	}
	  

	.links:hover
	{
		color: #DC7B21;
		background:#F6F5EB;
		border-radius: 4px; 
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
	}


	p.navText
	{
		padding-top:7px;
		padding-left:3px;
		font-family:AlegreyaSCBold, Georgia, "Times New Roman", Times, serif;
		font-size:12px;
		font-weight:normal;
		text-align:center;
  	}


  	/* El elemento seleccionado solo tendra borde redondeado superior */
	.selected
	{
		height:35px;
		background:#F6F5EB;
		color:#DC7B21;

		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-o-border-top-left-radius: 4px;
		-o-border-top-right-radius: 4px;
	}


	 /* Al pasar el raton por el elemento seleccionado, este no tendra borde redondeado inferior */
	.selected:hover
	{
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		-moz-border-radius-bottomleft: 0px;
		-moz-border-radius-bottomright: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-webkit-border-bottom-right-radius: 0px;
		-o-border-bottom-left-radius: 0px;
		-o-border-bottom-right-radius: 0px;
	}





/************************************************/
/* CONTENIDO Y BARRA LATERAL
/************************************************/


	#content
	{
		background-color:#F6F5EB;
		margin:auto;
		width:1400px;
		height:800px;
	}
	  

	#sidePanel
	{
		background-color:#F6F5EB;
		position:relative;
		float:left;
		padding-top:10px;
		padding-left:10px;
		padding-bottom:0px;
		width:280px;
		height:540px;
		overflow:scroll;
	}
	  

	.mapTitle
	{
		font-family:AlegreyaBold, Arial, Helvetica, sans-serif;
		color:#954848;
		font-size:22px;
	}
	  

	.mapText
	{
		padding-top:20px;
		font-family:AlegreyaRegular, Arial, Helvetica, sans-serif;
		word-wrap:break-word;
		width:255px;
		font-size:15px;
		color:#3e3e3e;
		margin:0;
	}
	  

	.legText
	{
		padding-top:20px;
		font-family:AlegreyaRegular, Arial, Helvetica, sans-serif;
		word-wrap:break-word;
		 width:255px;
		font-size:15px;
		color:#3e3e3e;
		margin:0;
	}
	  

	.esriLegendService
	{
		margin-bottom:-20px;
	}
	  

	#mapContainer
	{
		position:absolute;
		left: 290px;
		width:100%;
		height:100%;
	}
	  

	#loadImg
	{
		position:absolute;
		left:277px;
		top:266px;
		margin:auto;
		z-index:99;
	}
	  

	.map
	{
		position:absolute;
		width:100%;
		height:100%;
	}
	  

	.esriPopup
	{
		font-family: AlegreyaRegular,Verdana, Geneva, Arial, Helvetica, sans-serif; 
		font-size: 14px;
		position: absolute;
		z-index: 40; 

		box-shadow: 0 0 0.75em #777777; 
		-moz-box-shadow: 0 0 0.75em #777777; 
		-webkit-box-shadow: 0 0 0.75em #777777; 
		-o-box-shadow: 0 0 0.75em #777777; 
	 
		border-radius: 5px; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
	}
	  

	.esriPopup,.esriPopupWrapper
	{
		overflow:visible;
	}
	  

	.esriPopup .titlePane
	{
		background-color: #954848; 
		color: #FFFFFF; 
		line-height: 20px; 
		
		padding-left: 6px; 
		border-radius: 5px 5px 0px 0px; 
		-moz-border-radius: 5px 5px 0px 0px; 
		-webkit-border-radius: 5px 5px 0px 0px ;
		-o-border-radius: 5px 5px 0px 0px ;

		cursor: default; 
		border: 1px solid #666666; 
		border-bottom: none;
	}
	  

	.esriScalebar,.scaleLabelDiv,.esriScalebarLabel
	{
		font-family:AlegreyaRegular, Arial, Helvetica, sans-serif;
		overflow:visible;
	}
	  




/************************************************/
/* PANEL DE INTRODUCCION
/************************************************/


	/* Fondo para cuando la ventana de introduccion esta activa */
	#modalBackground
	{
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		background-color:#DCEBF1; /* Color de 'oscurecimiento' del fondo */
		z-index:100;
	}


	/* Formato de la ventanita de informacion */
	#intro
	{
		display:none;
		position:absolute;
		width:800px;
		height:530px;
		top:50px;
		left:200px;
		background-color:#f6f5eb; /* Color de fondo de la ventanilla */
		z-index:101;

		border-radius: 15px; /* Le damos un aspecto menos anguloso */
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		-o-border-radius: 15px;

		box-shadow: 0 0 0.6em #777777; /* Efecto de profundidad */
		-moz-box-shadow: 0 0 0.6em #777777; 
		-webkit-box-shadow: 0 0 0.65em #777777; 
		-o-box-shadow: 0 0 0.6em #777777; 
	}
	  

	/* Barra del encabezado */
	#introHeader
	{

		background:url("../images/intro_bg.png") no-repeat left top;
		width:100%;
		height:70px;
		line-height:2.0;
		color:#fff;
		font-family:AlegreyaBlack, Georgia, "Times New Roman", Times, serif;
    	font-size:26px;
    	text-align:left;
    	padding:0px 15px ;
    	white-space: nowrap;  
    	overflow: hidden;  
    	text-overflow: ellipsis;
    	-o-text-overflow:ellipsis;
	}
	  
	  
	/* Panel de introduccion */
	#introContent
	{
		overflow:hidden;
	}


	#textPanel
	{
		width:540px; /* Anchura real del texto */
		height:485px;
		margin-left:15px;
		padding-right:5px;
		margin-top:2px;
		float:left;
	}

	  
	#introText
	{
		max-height:550px; /* Anchura maxima del texto */
		overflow:auto;
		margin-bottom:15px;
		padding-top:0px;
		padding-left:25px;
		padding-right:5px;
		text-align:justify;
	}


	#continue
	{
		display:none;
		margin-left:220px;
	}


	/* Imagen de */
	#introImg
	{
		display:none;
		max-width:405px;
		max-height:440px;
		margin-top:20px;
		margin-right:40px;
		float:right;

		border-radius: 5px; /* Redondeamos un poco al delfinillo */
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;

		border: 1px solid #ccc;
		padding: 10px;
		background-color: #f6f5eb;
	}





/************************************************/
/* EL BOTON DE VER MAPAS
/************************************************/


	/* Efecto del boton sin pulsar */
	.clean-gray
	{
		background-color: #AFCFDE;
	    background-image: -webkit-gradient(linear, left top, left bottom, from(#AFCFDE), to(#5A9BBB));
	    background-image: -webkit-linear-gradient(top, #AFCFDE, #5A9BBB);
	    background-image: -moz-linear-gradient(top, #AFCFDE, #5A9BBB);
		background-image: -ms-linear-gradient(top, #AFCFDE, #5A9BBB);
		background-image: -o-linear-gradient(top, #AFCFDE, #5A9BBB);
		background-image: linear-gradient(top, #AFCFDE, #5A9BBB);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFCFDE', endColorstr='#5A9BBB', GradientType=0 );

	    border: 1px solid #ccc;
	    border-bottom: 1px solid #bbb;

	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -ms-border-radius: 3px;
	    -o-border-radius: 3px;
	    border-radius: 3px;

	    color: #333;
	    font: bold 14px "AlegreyaBold", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	    line-height: 1;
	    padding: 8px 8px;
	    text-align: center;
	    text-shadow: 0 1px 0 #eee;
	    width: 150px;
	}


	/* Efecto del boton pulsado */
	.clean-gray:hover
	{
	    background-color: #5A9BBB;
	    background-image: -webkit-gradient(linear, left top, left bottom, from(#5A9BBB), to(#AFCFDE));
	  	background-image: -webkit-linear-gradient(top, #5A9BBB, #AFCFDE);
	    background-image: -moz-linear-gradient(top, #5A9BBB, #AFCFDE);
	    background-image: -ms-linear-gradient(top, #5A9BBB, #AFCFDE);
	    background-image: -o-linear-gradient(top, #5A9BBB, #AFCFDE);
	    background-image: linear-gradient(top, #5A9BBB, #AFCFDE);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5A9BBB', endColorstr='#AFCFDE', GradientType=0 );

	    border: 1px solid #bbb;
	    border-bottom: 1px solid #999;

	    cursor: pointer;
	    text-shadow: 0 1px 0 #ddd;
	}


	.clean-gray:active {
	    border: 1px solid #aaa;
	    border-bottom: 1px solid #888;

	    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	}	  
	 

	g,v
	{
		cursor:pointer;
	}