/* Macaronis Surf Resort - Mentawai Islands Indonesia CSS Document */

/*values*/

.clear{
	clear:					both;
	height:					0px;
	margin:					0px;
	padding:				0px;
	visibility:				hidden;
	}

body{
	margin:					0px;
	padding:				30px 0px 20px 0px;
	background-color:		#336699;
	text-align:				center;
	font-family:			Arial, Helvetica, sans-serif;
	}
	
/*wrap*/

#wrap{
	width:					700px;
	border:					1px solid #FFFFFF;
	margin:					0px auto;
	text-align:				left;
	background-color:		#FFFFFF;
	padding:				0px;
	}
	
/*heading*/	
	
#heading{
	width:					700px;
	height:					48px;
	background:				#FFFFFF url('images/heading.jpg') no-repeat top left;
	margin:					0px;
	padding:				0px
	}

#w_heading_bottom { position:fixed; left:0; bottom:0px; text-align:center; width:100%; }
#heading_bottom {
	position:relative; left:0; margin:0 auto;;
	width:700px; height:48px;
	text-align:left;
}

#heading_bottom_bg {
	width:700px; height:48px;
	background:#FFFFFF url('images/heading.jpg') no-repeat;
	opacity:0.85;	
}

	
/*banner*/	
/*#ban_top { position:fixed; left:0; bottom:0px; text-align:center; width:100%; }
#ban_pos {
	position:relative; left:0; margin:0 auto;;
	width:700px; height:199px;
	text-align:left;
}*/	
#ban{
	width:					700px;
	height:					199px;
	margin:					0px;
	padding:					0px;
	}
	
/*horizontal top navigation*/

#nav{
	width:					700px;
	height:					35px;
	background:				#660000 url('images/nav.jpg') repeat-x top left;
	border-bottom:			1px solid #FFFFFF;
	margin:					0px;
	padding:				0px
	}
	
#nav ul{
	margin:					0px;
	padding:				0px;
	list-style-type:		none;
	font-size:				13px;
	height:					35px;
	}
	
#nav ul li{
	margin:					0px;
	padding:				0px;
	display:				block;
	list-style-type:		none;
	width:					80px;
	height:					100%;
	float:					left;
	text-align:				center;
	border-right:			1px solid #FFFFFF;
	}
	
#nav ul li a{
	display:				block;
	color:					#FFFFFF;
	width:					80px;
	height:					100%;
	line-height:			33px;
	text-decoration:		none;
	}
	
#nav ul li a:hover{
	background-color:		#990000;
	}

	
			
	
/*container*/

#con{
	width:					700px;
	background:				url('images/content.gif') repeat-y top left;
	margin:					0px;
	padding:				0px
	}
	
/*vertical left navigation*/

#conl{
	width:					165px;
	float:					left;
	background-color:		#E0E0A4;
	margin:					0px;
	padding:				0px;
	}			
	
#menu { 
	margin: 				10px 0px 10px 10px; 
	padding: 				0px; 
	text-align: 			center;  
	width:					145px;
	}
	
#menu ul{
	list-style: 			none ; 
	margin:					0px; 
	padding:				0px;
	text-align:				center;
	}
	
#menu li {
	margin: 				auto;
	padding-right: 			0px;
	list-style: 			none;
	}
	
#menu li a {
	display:				block;
	width: 					145px;
	w\idth:					145px;
	height: 				50px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	list-style: 			none none
	}
	
#menu a:hover {
	background-position: 	0 -50px;
	list-style: 			none;
	}
		
#item1 a {
	width: 					145px;
	background: 			url('images/buttons/boats.jpg') no-repeat;
	margin-top: 			5px
	}

#item2 a {
	width: 					145px;
	background: 			url('images/buttons/surf.jpg') no-repeat;
	margin-top: 			5px
	}

#item3 a {
	width: 					145px;
	background: 			url('images/buttons/villas.jpg') no-repeat;
	margin-top: 			5px
	}
	
#item4 a {
	width: 					145px;
	background: 			url('images/buttons/facilities.jpg') no-repeat;
	margin-top: 			5px
	}
	
#item5 a {
	width: 					145px;
	background: 			url('images/buttons/experience.jpg') no-repeat;
	margin-top: 			5px
	}	
	
#item6 a {
	width: 					145px;
	background: 			url('images/buttons/faq.jpg') no-repeat;
	margin-top: 			5px
	}			
	
#item7 a {
	width: 					145px;
	background: 			url('images/buttons/specials.jpg') no-repeat;
	margin-top: 			5px
	}			
	
#item8 a {
	width: 					145px;
	background: 			url('images/buttons/payments.jpg') no-repeat;
	margin-top: 			5px
	}			
#item9 a {
	width: 					145px;
	background: 			url('images/buttons/transfer.jpg') no-repeat;
	margin-top: 			5px
	}			
#item10 a {
	width: 					145px;
	background: 			url('images/buttons/packages.jpg') no-repeat;
	margin-top: 			5px
	}			
#item11 a {
	width: 					145px;
	background: 			url('images/buttons/surfcam.jpg') no-repeat;
	margin-top: 			5px
	}			
#item12 a {
	width: 					145px;
	background: 			url('images/buttons/information.jpg') no-repeat;
	margin-top: 			5px
	}			


	
/*Form Mail subcription*/

#mail { 
	margin: 				10px 0px 10px 10px; 
	padding: 				0px; 
	width:					145px;
	}
	
#mail p{
	font-size:				11px;
	margin:					5px 0px 5px 0px;
	padding:				0px;
	}
	
#mail p input{
	font-size:				11px;
	color:					#333333;
	width:					105px;
	border:					1px solid #012C03;
	background-color:		#FFFFFF;
	margin:					0px;
	padding:				0px;
	}	
	
#mail p #submit{
	width:					50px;
	margin-right:			8px;
	}	
	
/*content*/

img{
	border:					none;
	}

#conr{
/*        height:                                 470px;*/
	width:					535px;
	float:					left;
	margin:					0px;
	padding:				0px;
/*        overflow:                               auto;*/
	}
			
#conr h1{
	margin:					10px 20px 10px 20px;			
	font-size:				22px;
	color:					#333333;
/*	text-transform:			capitalize; */
	}	
	
#conr h3{
	margin:					0px 20px 15px 20px;	
	font-size:				17px;		
	color:					#333333;
	}	
	
#conr p{
	margin:					0px 20px 15px 20px;
	font-size:				12px;		
	color:					#333333;
	text-align:				justify;
	}	
#conr .center{
	text-align:				center
	}
	
#conr .fr{
	float:					right;
	}	
	
#conr table{
	margin:					15px 0px 15px 0px;
	padding:				0px;
	margin:					2px 2px 2px 2px;
	font-size:				12px;
	color:					#333333;
	padding:				0px;
	text-align:				center;
	}	
	
#conr table p{
	margin:					2px 2px 2px 2px;
	font-size:				12px;
	color:					#333333;
	padding:				0px;
	text-align:				center;
	}	
	
#conr .boattable p{
	text-align:				left;
	}	
	
#conr ul{
	margin:					15px 0px 15px 20px;
	font-size:				12px;
	color:					#333333;
	}
	
#con ul li a{
	color:					#118D71;
	text-decoration:		none;
	}	
	
#con ul li a:hover{
	color:					#118D71;
	text-decoration:		underline;
	}		
	
#con p a{
	color:					#118D71;
	text-decoration:		none;
	}	
	
#con p a:hover{
	color:					#118D71;
	text-decoration:		underline;
	}			
			
/*footer*/

#foot{
	width:					700px;
	height:					50px;
	background-color:		#660000;
	border-top:				1px solid #FFFFFF;
	margin:					0px;
	padding:				0px;
	clear:					both;
	}			

#foot p{
	font-size:				10px;
	color:					#FFFFFF;
	text-align:				center;
	margin:					12px 10px 0px 0px
	}
	
#foot p a{
	color:					#FFFFFF;
	text-decoration:		none;
	}	
	
#foot p a:hover{
	color:					#FFFFFF;
	text-decoration:		underline;
	}

/* Photo-Caption PZ3 CSS v080630 
* copyright: http://randsco.com/copyright 
* www.randsco.com 
*/

.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
  html>/**/body .PZ3-r { position:relative; }

.PZ3zoom { border:1px solid #369; }
.PZ3zoom a, .PZ3zoom a:visited { display:block;
  padding:0; overflow:hidden; text-decoration:none;
  height:100%; width:100%; }
  html>/**/body .PZ3-r a { right:0; }

.PZ3zoom a:hover { position:absolute;
  z-index:999; padding:0; background:none; 
  cursor:default; height:auto; width:auto;
  overflow:visible; border:1px solid #369;
  margin:-1px 0 0 -1px; }
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

.PZ3zoom a img { border:0px none; height:100%; width:100% }
.PZ3zoom a:hover img { height:auto; width:auto;
  border:0px none; }

a:hover .PZ3cap,
a:hover .PZ31cap { display:block;
  direction:ltr; font:10pt verdana,sans-serif;
  margin-top:-3px; background:#369; color:#fff;
  text-align:left; }
a:hover .PZ3cap { padding:3px 5px; }
.PZ3inr { display:block; padding:2px 5px; }

.noCap a:hover .PZ3cap,
.noCap a:hover .PZ31cap { display:none; }
.noBdr, .noBdr a:hover { border:0px none; }
.Lnk a:hover { cursor:pointer; }

/* End Photo-Caption Zoom CSS */


/* image map */
.dive { width:500px; height:369px; display:table;
  border:1px solid black;  margin:10px auto; padding:0; 
  background:url(/images/mentawai.jpg);  }

/* PZ3 overrides */
.dive .PZ3zoom { float:none; border:none; }
.dive a img { display:none }
.dive a:hover img { display:block }
.dive span.diveR,.dive span.diveL { display:none; }
.dive .PZ3zoom a:hover { border:none; 
  margin:-3px 0 0 -3px;  }
.dive a:hover img.ship { display:block; position:absolute;
  border:2px solid #fff; }
.dive a:hover span { display:block;
  position:absolute;  
  color:black; background:#ddd;
  padding:3px; width:394px; 
  border:2px solid white;
  font:10pt/10pt arial,sans-serif;
  text-align:justify; }

/* x marks the spot */
.dive .asdp { margin-left:250px; 
  margin-top:10px;  }
.dive .resorts { margin-left:85px; 
  margin-top:10px;  }
.dive .lancesright { margin-left:202px; 
  margin-top:80px;  }
.dive .lancesleft { margin-left:188px; 
  margin-top:-10px;  }
.dive .katietarea { margin-left:202px; 
  margin-top:-10px;  }
.dive .batcave { margin-left:212px; 
  margin-top:21px;  }
.dive .macaronis { margin-left:215px; 
  margin-top:4px;  }
.dive .macasarea { margin-left:215px; 
  margin-top:-2px;  }
.dive .greenbush { margin-left:235px; 
  margin-top:-21px;  }
.dive .thunders { margin-left:250px; 
  margin-top:18px;  }
.dive .thundersarea { margin-left:240px; 
  margin-top:-7px;  }

/* mouseover image/caption */
.dive a:hover img.diveA { 
	margin-top:-55px;
	margin-left:38px;
	}
.dive a:hover span.diveA {
	margin-top:-125px;
	margin-left:38px;
	}

.dive a:hover img.diveAa { 
	margin-top:112px;
	margin-left:-420px;
	}
.dive a:hover span.diveAa {
	margin-top:-10px;
	margin-left:-420px;
	}

.dive a:hover img.diveB { 
	margin-top:-105px;
	margin-left:46px;
	}
.dive a:hover span.diveB {
	margin-top:-134px;
	margin-left:46px;
	}

.dive a:hover img.diveC { 
	margin-top:-170px;
	margin-left:46px;
	}
.dive a:hover span.diveC {
	margin-top:130px;
	margin-left:46px;
	}
.dive a:hover img.diveCa { 
	margin-top:-175px;
	margin-left:46px;
	}
.dive a:hover img.diveCb { 
	margin-top:-142px;
	margin-left:46px;
	}

.dive a:hover img.diveD { 
	margin-top:-205px;
	margin-left:46px;
	}
.dive a:hover span.diveD {
	margin-top:108px;
	margin-left:46px;
	}

.dive a:hover img.diveE { 
	margin-top:-132px;
	margin-left:46px;
	}
.dive a:hover span.diveE {
	margin-top:-423px;
	margin-left:46px;
	}

.dive a:hover img.diveF { 
	margin-top:-180px;
	margin-left:-416px;
	}
.dive a:hover span.diveF {
	margin-top:-275px;
	margin-left:-416px;
	}

.dive a:hover img.diveG { 
	margin-top:-185px;
	margin-left:-420px;
	}
.dive a:hover img.diveGa { 
	margin-top:-445px;
	margin-left:-420px;
	}
.dive a:hover span.diveG {
	margin-top:-150px;
	margin-left:-420px;
	}