/****************************************************************************************************
Hoja de Estilo para el sitio IGUANA LOST - Versión General.

	Diagramación:						CNET TECHNOLOGY SYSTEMS S.A
	Programador:						Esteban Valerio Hernández
	Diseño:								Antonio Salazar Chinchilla
*****************************************************************************************************/
body{
	font:					Arial, Helvetica, sans-serif;
	font-size:				17px;
}

img, div, a, input { 
	behavior: 				url(../Scripts/iepngfix.htc) ;
}

p{
	margin-left:			50px;
	margin-right:			70px;
	text-align:				justify;
}

a{
	font-family:			Papyrus;
	color:					#006600;
	text-decoration:		none;
}

a:hover{
	color:					#009900;
	text-decoration:		none;
}

h1{
	font-family:			Papyrus;
	font-size:				27px;
	color:					#006600;
}

h2{
	font-family:			Papyrus;
	font-size:				22px;
	color:					#006600;
	margin-left:			50px;
}

h3{
	font-family:			Papyrus;
	font-size:				15px;
	color:					#006600;
	margin-left:			50px;
}

ul{
	margin-left:			50px;
}

li{
}

/*Base general de la página*/
#ContenedorPrincipal{
	/*border: 				black solid 1px;*/
	margin: 				0 auto 0 auto;
	width: 					1085px;
	height: 				990px;
}

#ContenedorPrincipalArriba{
	/*border: 				yellow solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				134px;
	background-image:		url(../imagenes/lost-iguana.png);
	background-position:	top;
	background-repeat:		no-repeat;
}

#ContenedorPrincipalArribaSpa{
	/*border: 				yellow solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				134px;
	background-image:		url(../imagenes/golden-gecko.png);
	background-position:	top;
	background-repeat:		no-repeat;
}

#ContenedorPrincipalMedio{
	/*border: 				blue solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				856px;
}

#ContenedorPrincipalMedioArriba{
	/*border: 				gray solid 1px;*/
	border-bottom:			#FFCC00 4px solid;
	float:					left;
	width: 					1085px;
	height: 				50px;
}

#ContenedorPrincipalMedioAbajo{
	/*border: 				gray solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				795px;
}

#ContenedorPrincipalMedioIzquierda{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				790px;
	background-image:   	url(../imagenes/bg.png);
	background-repeat:  	no-repeat;
	background-position:	bottom left;
	border-bottom:			#FFCC00 4px solid;
}

#ContenedorPrincipalMedioIzquierdaArriba{
	/*border: 				purple solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				576px;
}

#ContenedorPrincipalMedioIzquierdaAbajo{
	/*border: 				purple solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				210px;
}

#ContenedorPrincipalMedioDerecha{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					380px;
	height: 				790px;
	border-bottom:			#FFCC00 4px solid;
}

#ContenedorPrincipalMedioDerechaArriba{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					375px;
	height: 				340px;
}

#ContenedorPrincipalMedioDerechaAbajo{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					375px;
	height: 				275px;
}

#ContenedorPrincipalFlexible{
	/*border: 				black solid 1px;*/
	margin: 				0 auto 0 auto;
	width: 					1085px;
}

#ContenedorPrincipalMedioFlexible{
	/*border: 				blue solid 1px;*/
	float:					left;
	width: 					1085px;
}

#ContenedorPrincipalMedioAbajoFlexible{
	/*border: 				gray solid 1px;*/
	float:					left;
	width: 					1085px;
	border-bottom:			#FFCC00 4px solid;
}

#ReservationPrincipalMedioIzquierdaAbajoFlexible{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					700px;
}

#ContenedorPrincipalMedioIzquierdaFlexible{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					700px;
	background-image:   	url(../imagenes/bg.png);
	background-repeat:  	no-repeat;
	background-position:	bottom left;
}

#MenuSuperiorTexto{
	/*border: 				blue solid 1px;*/
	margin:					105px auto 0 auto;
	text-align: 			left;
	width: 					1085px;
	height: 				25px;
	font-size:				14px;
}

#MenuSuperiorTexto ul{
	/*border: 			green solid 1px;*/
	list-style:			none;
	width: 				100%;
	padding: 			0;
	margin: 			0;
	float: 				left;
}

#MenuSuperiorTexto li{
	/*border: 			green solid 1px;*/
	border-left: 		green solid 1px;
	padding-left: 		2px;
	list-style:			none;
	width: 				140px;
	display: 			inline;
	margin-left:		5px;
	
}

/*Home*/
#textoIntroduccion{
	border-top: 			#FFCC00 3px solid;
	font-size:				18px;
	font-family:			Papyrus;
}

/*Resort Information*/
#fotoResort{
	/*border: 				yellow solid 1px;*/
	float:					left;
	width: 					379px;
	height: 				790px;
	background-image:		url(../imagenes/backgroundResort.png);
	background-repeat:		no-repeat;
	background-position:	top;
}

#ContenedorTextoResort{
	/*border: 				yellow solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				700px;
}

.subListaResort{
	font-family:			Papyrus;
	font-size:				18px;
	color:					#006600;
}

/*Accomodations*/
#fotoAccomodations{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					379px;

}

#AccomodationsArriba{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				40px;
	text-align:				left;
}

#AccomodationsFotos{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				430px;
}

#AccomodationsFotosGaleriaCuartos{
	/*border: 				blue solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				110px;
}

#DescripcionCuartos{
	/*border: 				green solid 1px;*/
	border-top: 			#FFCC00 2px solid;
	/*border-bottom: 			#FFCC00 3px solid;*/
	float:					left;
	width: 					698px;
	height: 				370px;
	font-size:				12px;
}

.listasAccomodation{
	margin-left:			80px;
	width:					300px;
}

.tablaGaleriaCuartos{
	margin: 				0 auto 0 auto;
}


/***********************/
/*Estilos de las imagenes de Accomodations*/
#ContenedorPrincipalFondoDer.cuartos{
	background-image: 		none;
}

#ContenedorPrincipalDer.cuartos1{
	/*border: 				red solid 1px;*/
	width: 					610px;
	margin-left:			0;
}

#cards {
	position: 				relative;
	margin-top: 			-30px;
	width: 					650px;
	height: 				408px;
}

#pagetitle {
	position: 				absolute;
	left: 					5px;
	top: 					12px;
	cursor: 				pointer;
}

div.card {
	position: 				absolute;
	left: 					0px;
	top: 					50px;
	width: 					50px;
	height: 				50px;
	z-index: 				0;
	cursor: 				pointer;
}

div.card.top {
	cursor: 				default;
}

img.backdrop {
	position: 				absolute;
	left: 					0px;
	top: 					0px;
}

.shader {
	position: 				absolute;
	left: 					0px;
	top: 					0px;
}
div.card.top .shader {
	visibility: 			hidden;
}


div.imgcover {
	position: 				absolute;
	left: 					0px;
	top: 					0px;
	width: 					400px;
	height: 				300px;
}

div.content {
	visibility: 			hidden;
	position: 				absolute;
	left: 					0px;
	top: 					0px;
	width: 					500px;
	height: 				300px;
}

div.content.loaded {
	visibility: 			hidden;
}

div.card.top div.content.loaded {
	visibility: 			inherit;
}

/* fix for pngs loading weird at first */
/* after the javascript fix, pngs are turned into magic spans
   so this rule will no longer apply */
* html img.cardtitle,
* html img.shader,
* html img.spine {
	visibility: 			hidden !important;
}

#discography-card .cardtitle {
	left: 					-12px;
}

.contentbackdrop1 {
	position: 				absolute;
	right: 					1px;
	top: 					1px;
	width: 					400px;
	height: 				498px;
}

.contentbackdrop2 {
	position: 				absolute;
	right: 					1px;
	top: 					1px;
	width: 					400px;
	height: 				498px;
}

.contentbackdrop3,
.contentbackdrop4 {
	position: 				absolute;
}

.contentframe {
	position: 				absolute;
	right: 					1px;
	top: 					1px;
	width: 					400px;
	height: 				300px;
}

#tourdates-content .contentbackdrop1,
#tourdates-content .contentframe {

}

#links-content .contentbackdrop1 ,
#links-content .contentframe {
	right: 					200px;
	width: 					300px;
}
#discography-content .contentbackdrop1,
#discography-content .contentframe {
	width: 					135px;
}

#discography-content .contentbackdrop2 {
	right: 					137px;
	width: 					340px;
}

#discography-content #discography-albumframe {
	right: 					137px;
	width: 					340px;
}

#photos-content .contentbackdrop1,
#photos-content .contentframe {
	width: 					550px;
}


#press-content .contentbackdrop1,
#press-content .contentbackdrop2,
#press-content .contentframe {
	right: 					1px;
	width: 					420px;
}

#press-content #press-subnav,
#press-content .contentbackdrop3,
#press-content .contentbackdrop4 {
	left: 					1px;
	top: 					175px;
	width: 					278px;
	height: 				140px;
}
/***********************/

/*Make Reservation*/
#fotoMakeReservation{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					379px;
	height: 				1080px;
	background-image:		url(../imagenes/fondoMakeReservation.png);
	background-repeat:		no-repeat;
	background-position:	bottom;
}

#ReservationPrincipalMedioIzquierdaAbajo{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					700px;
	height:					950px;
}

#ContenedorPrincipalMedioDerechaFlexible{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					380px;
	height: 				790px;
	}

#frameReservation1{
	/*border: 				green solid 2px;*/
	margin-left:			100px;
	margin-top:				0px;
	width:					500px;
	height:					940px;
}

/*Spa*/
#flashSpa{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					379px;
	height: 				790px;
}

#ContenedorDeTextoSpa{
	/*border: 				purple solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				295px;
}

#ContenedorFlashSpa{
	/*border: 				purple solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				495px;
}

#spa{
	margin-top:				25px;
}

#contenedorMenuSpa{
	/*border: 				gray solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				795px;
	background-image:		url(../imagenes/BG_menuSPA.png);
	background-repeat:		no-repeat;
	background-position:	right;
}

#ContenedorTextoMenuSpa{
	/*border: 				blue solid 1px;*/
	margin:					0 auto 0 auto;
	width: 					900px;
}

#textoMenuSpa{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					900px;
	border-bottom: 			#FFCC00 solid 2px;
}

#textoMenuSpa h1{
	margin-left:			50px;
}

#textoMenuSpa h2{
	margin-left:			50px;
}

#contenedorPackage{
	border:					#993300 solid 1px;
	float:					left;
	width:					600px;
	height:					720px;
	background-image:		url(../imagenes/package.png);
	margin-left:			225px;
	margin-bottom:			20px;
}

#contenedorPackage h1{
	margin-left:			20px;
	#margin-top:			20px
}

#contenedorPackage h3{
	margin-top:				-5px;
}

#contenedorPackage p{
	margin-top:				-15px;
}

/*Activities*/
#fotoActivities{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					379px;
	height: 				785px;
	background-image:		url(../imagenes/fondoActivities.png);
	background-repeat:		no-repeat;
	background-position:	top;
}

#fotosActivitiesIzquierda{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				420px;
	border-bottom:			#FFCC00 3px solid;
}

#imagenActividades{
	margin-top:				-37px;
	margin-left:			0;
}

#ContenedorTextoActivities{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					700px;
	height: 				350px;

}

#listaActivities{
	/*border: 				red solid 1px;*/
	width: 					400px;
	float:					right;
	margin-top:				-200px;
	z-index:				100;
	list-style:				none;
	font-family:			Papyrus;
	font-size:				23px;
	color:					#006600;
	text-align:				right;
}

#listaActivities a{
	font-family:			Papyrus;
	font-size:				23px;
	color:					#006600;
	text-decoration:		none
}

#listaActivities a:hover{
	color:					#FFCC00;
}

/*Contact us*/
#fotoContactUs{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					1084px;
	height: 				790px;
	background-image:		url(../imagenes/fondoContac_us.png);
	background-repeat:		no-repeat;
	background-position:	top right;
	border-bottom:			#FFCC00 4px solid;
}

#ContenedorTextodeContactos{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				225px;
	text-decoration:		none;
}

#ContenedorFormulario{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				530px;
}

#frameContactos{
	margin-left:			100px;
}

#tablaContactUs{
	/*border: 				red solid 1px;*/
	width:					620px;
	margin-left:			90px;
}

.subTitulosContactUs{
	font-family:			Papyrus;
	font-size:				18px;
	color:					#006600;
	border-bottom:			#FFCC00 3px solid;
}

.bordeTabla{
	border-bottom:			#FFCC00 3px solid;
}

/*Stuff*/
#contenedorMedioStuffTotal{
	width: 					1084px;	
}

#ContenedorTextoStuff{
	/*border: 				blue solid 1px;*/
	float:					left;
	width: 					1050px;
}

#textoStuff{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					1050px;
}

#textoStuff p{
	margin-left:			20px;
	margin-right:			0px;
}

#flechasStuff{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					698px;
	height: 				20px;
	text-align:				right;
}

#flechasStuff2{
	/*border: 				green solid 1px;*/
	float:					left;
	width: 					1000px;
	height: 				20px;
	text-align:				right;
}

#flechasStuff a{
	font-family:			Papyrus;
	font-size:				20px;
	color:					#006600;
	text-decoration:		none;
}

#flechaback{
	margin-right:			30px;
}

#flechanext{

	font-family:			Papyrus;
	font-size:				20px;
	color:					#006600;
	text-decoration:		none;
}

/*Photo Gallery*/
#fotoGallery{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					1084px;
	height: 				790px;
	background-image:		url(../imagenes/fondo-galeria.png);
	background-repeat:		no-repeat;
	background-position:	top right;
	border-bottom:			#FFCC00 4px solid;
	overflow-y:				hidden;
	overflow-x:				hidden;
	#overflow:				hidden;
}

#GaleriaImagenes{
	/*border: 				red solid 1px;*/
	float:					left;
	width: 					900px;
	height: 				800px;
	overflow-y:				hidden;
	overflow-x:				hidden;
	#overflow:				hidden;
}

#frameGaleria{
	/*border: 				green solid 1px;*/
	width:					750px;
	height: 				800px;
	#height: 				810px;
	overflow-y:				hidden;
	overflow-x:				hidden;
	#overflow:				hidden;
}

#fondoNoticias{
	background-image:		url(../imagenes/fondo-noticias.png);
	background-repeat:		no-repeat;
	background-position:	bottom right;
	/*border: 				gray solid 1px;*/
	float:					left;
	width: 					1085px;
	height: 				795px;
}


/*******FOOTER********/
#infoEmpresa{
	/*border: 			blue solid 1px;*/
	margin:				5px auto 0 auto;
	text-align: 		center;
	font-size:			12px;
	font-family:		Papyrus;
	color:				#006600;
	width: 				1085px;
	height: 			20px;
}

#infoEmpresa ul{
	/*border: 			green solid 1px;*/
	list-style:			none;
	width: 				100%;
	padding: 			0;
	margin: 			0;
	float: 				left;
}

#infoEmpresa li{
	/*border: 			green solid 1px;*/
	list-style:			none;
	width: 				150px;
	display: 			inline;
	margin-left:		8px;
}

#otraInfo{
	/*border: 			blue solid 1px;*/
	margin:				10px auto 0 auto;
	text-align: 		center;
	font-size:			9px;
	color:				#000;
	width: 				850px;
	height: 			35px;
	visibility:			hidden;
}

#logo{
	/*border: 			blue solid 1px;*/
	float:				left;
	width:				50px;
	height:				25px;
	margin-left:		290px;;
	background-color:	#CCC;
}

#texto{
	/*border: 			blue solid 1px;*/
	float:				left;
	width:				220px;
}

#texto a{
	color: 				#000;
}

#logoValidator{
	float:				left;
}