body { 
text-align:center; /* for IE */ 
border:0px solid blue;
margin:0 auto; /* for the rest */      
}
.image_header{
text-align:center; /* for IE */ 
height : 100%;
margin:0 auto; /* for the rest */ 
}
#wrapper { 
text-align:left; /* reset text alignment */ 
width:800px; /* or a percentage, or whatever */ 
background-image:url("images/menu_bar6.jpg"); 	
background-repeat: repeat-y;
background-color:#9ACD32;
height : 100%;
margin:0 auto; /* for the rest */ 
top:100px;
/*overflow:hidden;*/

}
.style1 {
    
    font-family: "Century Gothic", Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 120%;
	font-weight: bold;
	text-decoration : none;/*underline;*/
}
a {
    font-family: "Century Gothic", Helvetica, sans-serif;
	font-size: 120%;
	color: #00FFFF;
    font-weight: bold;
}
a:link {
	text-decoration: none;
	color: #000099;
}
a:visited {
	text-decoration: none;
	color: #000099;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: underline;
	color: #FF0000;
}
.style4 {
    font-size: 130%
        }
.h3{ 
     font-size:18px;
	 color: #000066;
	 font-weight: bold;
}
.style11 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0099CC;
	font-weight: bold;
}
.style12 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: bold; }
div.menu{
	 font-size: 12px;
     font-family: "Century Gothic", Helvetica, sans-serif;
     font-weight: bold;
	 text-transform: none;
}
.style13 {
    font-family: "Century Gothic", Helvetica, sans-serif;
	color: #663300;
	font-size: 120%;
	font-weight: bold;
	text-decoration : none;/*underline;*/	  
}
.menu p{
	 font-size: 14px;
	 text-decoration: none;
     font-weight: bold;
}

span{
     color:#FFFFFF;
}

.legend span:hover { color:red; text-decoration:none;}
/*.legend a:hover { color : red;}*/
.legend  a:focus {color:green;}
.legend  a:visited{color:#FFFF00;}

/*.legend a:focus span{ background-color: yellow;}*/
#title {
     color : #FFFFFF;
     text-decoration: underline;
     text-transform: uppercase
}
p{
     font-family: "Century Gothic", Helvetica, sans-serif;
     font-weight: bold;
     font-size: 12px;
     color:#000000;
	 margin-right:20px;
}
p.margin {
     margin: 0cm 0cm ;
}
.currentLink{
	 background-color : #9ACD32;
}
#currentLink{
	 background-color : #9ACD32;
}
 
div {
    font-family: "Century Gothic", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
table.main{
  /*  border: thick solid #FFFFFF; */
 /*   border-color : ;*/
 /*   spacing :0px; */
    padding :0px;
}

table.paddLeftnRight { 
			border: 0px solid red;
            padding-left:10px;
			padding-right:30px;
			padding-top:0px;
			padding-bottom:0px;
          }  
table.weather { 
			border: 1px solid #9ACD32;
			background-color:#53b2ce;
          }  
table.map { 
			border: 1px solid #9ACD32;
			padding-bottom:10px;			
          }  

div.img{
    margin: 0px;
    border: 0px solid #000000;
    height: 240px;
    width: 290px;
    float: left;
   /* align : center;*/
    text-align: center;
}
div.act_img
  {
/*  margin: 0px;
  border: 2px solid #3EA99F;
  height: 240px;
  width: 290px;
  float: left;
  align:justify;
  text-align: center; */
}
div.main_img
  {
margin: 0px;
  margin-left:20px;
  margin-bottom :20px;
 /* border: 2px solid #3EA99F;*/
 
  width: 390px;
 /* align:justify;*/
  text-align: center;
}



div.para
  {
  margin-left:20px;
}
.acc_img
  {
  /*margin: 0px;*/
  border: 2px solid #3EA99F;
  height: 240px;
  width: 290px;
  float: left;
 /* align:justify;
  text-align: center;*/
}

#flag{
      width : 100%;     
      height : 30px;
      margin-right:auto;
      margin-left:auto;   
      border:0px solid red;   
}
#flag_nameEng{
	  
      vertical-align: 65%;     
     
      height : 30px;   
      border:0px solid blue;   
}
#flag_nameEng img{
	float:right;
	border:0px;
	width:50px;
	height:25px;
}
#flag_nameEng span{
      color:#fff;
}
#flag_nameEng a{
      color:#fff;
}
#flag_nameEng a:link{
      color:#fff;
}
#flag_nameEng a:visited{
      color:#fff;
}
#flag_nameEng a:hover{
      color:red;
      cursor:pointer;     
}
#flag_nameFr{
      
      vertical-align: 65%;
      height : 30px;       
      border:0px solid blue;
}
#flag_nameFr span{
      color:#fff;
}
#flag_nameFr a{
      color:#fff;
}
#flag_nameFr a:link{
      color:#fff;
}
#flag_nameFr a:visited{
      color:#fff;
}
#flag_nameFr a:hover{
      color:red;
      cursor:pointer;      
}
#flag_nameFr img{
	float:left;
	 border:0px;
	 width:50px;
	 height:25px;
}
#flag img{
      border:0px;
	  width:50px;
	height:25px;
}
div.rate_img
  {
  margin: 2px;
  border: 2px solid #000000;
  height: 340px;
  width: 390px;
  float: left;
  text-align: center;
}

div.con_img
  {
  margin: 2px;
  border: 2px solid #3EA99F;
  height: 210px;
  width: 280px;
  float: left;
  text-align: center;
}
div.background
  {
  width: 600px;
  height: 400px;
 
  border: 2px solid black;
}

div.desc
  {
  text-align: center;
  font-weight: normal;
  width: 290px;
  margin: 2px;
  color:#000000;
}

.index_small_img
  {
  border: 2px solid #3EA99F;
  height: 190px;
  width: 250px;
  float : left;
}
.small_rates_image{
  border: 2px solid #CFD87F;                
}
.small_img
  {
  border: 2px solid #FFFFFF;
  height: 165px;
  width: 206px;
}
.rate:hover {
  background-color:#E7EBC3;
}
.menubar{
   background-image: url(images/menu_bar.jpg);
   background-color : #E7EBC3;
}


/*.legend{width:200px; height:0; position:relative; margin-left:10px; margin-top:-420px; cursor:default; float:left;z-index:20}*/


/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:444px; height:442px; background:url(images/activity_map.gif) no-repeat; position:relative; float:right;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
/*#imap a#title {display:block; width:400px; height:0; padding-top:400px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(images/activity_map.gif) no-repeat 400px 400px; cursor:default; float:right;}*/
/* the hack for IE pre IE6 */
* html #imap a#title {height:400px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #quadspot {left:115px; top:168px; z-index:20;}
#imap #divespot {left:39px; top:202px; z-index:20;}
#imap #divefishspot {left:34px; top:180px; z-index:20;}
#imap #hikespot1 {left:249px; top:170px; z-index:20;}
#imap #hikespot2 {left:184px; top:340px; z-index:20;}
#imap #sharkspot {left:130px; top:136px; z-index:20;}
#imap #surfspot1 {left:120px; top:345px; z-index:20;} /* Haapiti */
#imap #surfspot2 {left:147px; top:118px; z-index:20;} /* Opunohu */
#imap #surfspot3 {left:240px; top:93px; z-index:20;} /*  Cooks*/
#imap #surfspot4 {left:414px; top:115px; z-index:20;} /* Temae */
#imap #surfspot5 {left:194px; top:400px; z-index:20;} /* Atiha */
#imap #tikispot {left:86px; top:260px; z-index:20;}
#imap #markspot {left:142px; top:312px; z-index:20;}
#imap #aquaspot {left:94px; top:135px; z-index:20;}

/* new activities to add */
#imap #lagoonariumspot {left:357px; top:270px; z-index:20;}
#imap #rayspot {left:44px; top:140px; z-index:20;}
#imap #locaboatspot {left:54px; top:140px; z-index:20;}
#imap #whalespot {left:391px; top:137px; z-index:20;}
#imap #whalespot1 {left:86px; top:140px; z-index:20;}
#imap #whalespot2 {left:76px; top:140px; z-index:20;}
#imap #whalespot3 {left:344px; top:270px; z-index:20;}
#imap #whalespot4 {left:379px; top:145px; z-index:20;}
#imap #whaledescspot {left:-46px; top:-40px; z-index:20;}
#imap #dolphinspot {left:64px; top:140px; z-index:20;}
#imap #waterfallspot {left:311px; top:243px; z-index:20;}
#imap #collegespot {left:197px; top:212px; z-index:20;}
#imap #safarispot {left:326px; top:97px; z-index:20;}
#imap #tahitievasionspot {left:64px; top:140px; z-index:20;}
#imap #sculpturespot {left:84px; top:135px; z-index:20;}
#imap #privexpeditspot {left:379px; top:145px; z-index:20;}
#imap #beachspot1 {left:379px; top:145px; z-index:20;} /*  Temae Beach */
#imap #beachspot2 {left:109px; top:285px; z-index:20;} /*  Painapo         */
#imap #beachspot3 {left:64px; top:132px; z-index:20;} /*  Tipaniers       */
#imap #beachspot4{left:144px; top:140px; z-index:20;} /*   Opunohu        */
#imap #restaurantspot1 {left:112px; top:280px; z-index:20;} 
#imap #restaurantspot2 {left:120px; top:290px; z-index:20;} 
#imap #restaurantspot3 {left:125px; top:300px; z-index:20;} 
#imap #restaurantspot4 {left:138px; top:325px; z-index:20;} 
#imap #restaurantspot5 {left:155px; top:335px; z-index:20;} 
#imap #restaurantspot6 {left:185px; top:367px; z-index:20;} 

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#surf5, #imap a#surf4, #imap a#sculpture, #imap a#tahitievasion, #imap a#safari, #imap a#college, #imap a#waterfall, #imap a#dolphin, #imap a#whale, #imap a#whale1, #imap a#whale2, #imap a#whale3, #imap a#whale4, #imap a#locaboat, #imap a#ray, #imap a#lagoonarium, #imap a#quad, #imap a#dive, #imap a#dive2, #imap a#hike2, #imap a#hike1, #imap a#shark, #imap a#surf1, #imap a#surf2, #imap a#surf3, #imap a#tiki, #imap a#aqua, #imap a#prvexp, #imap a#beach1, #imap a#beach2, #imap a#beach3, #imap a#beach4, #imap a#restaurant1, #imap a#restaurant2, #imap a#restaurant3, #imap a#restaurant4, #imap a#restaurant5, #imap a#restaurant6{display:block; width:15px; height:15px; background:transparent url(images/hotspot.gif) -100px -100px no-repeat; text-decoration:none; color:#008000;font-size : 12px; z-index:20;filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  /* for Mozilla */
  -moz-opacity:0.6;
}
#imap a#whaledesc{display:block; width:494px; height:100px; background-color:#FFF; font-size : 10px; color:#000;padding:5px}

#imap a#marks{display:block; width:15px; height:15px; background:transparent url(images/markspot.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1;
  /* for Mozilla */
  -moz-opacity:1;
}
ul {
  
  list-style-type: none;
  padding: 0;
  margin: 0;
 
  color : #FFFFFF;
  text-transform: uppercase;
  z-index : 100;
  border:0px solid red;
}
.legend{
 float:left;
 margin-top:0px;
}
li{width:100%; border:0px solid white;}
li a{
  background-repeat: no-repeat;
  padding-left: 3px;
  color : #FFFFFF;
  font-size : 12px;
  font-weight: normal; 
  text-decoration : none;
  text-transform: none;
}
li a:active{ background-color : #FFFF00;}
li a:visited {text-decoration: none;color : #FFF000;}
/*li span:hover {text-decoration: none;color : red; diplay:block;}*/
li div {display:inline;height:10px;border:0px solid white;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}
/* hides dd for firefox */
dd#surfspot5 a span, dd#surfspot4 a span, dd#sculpturespot a span, dd#tahitievasionspot a span, dd#safarispot a span, dd#collegespot a span, dd#waterfallspot a span, dd#dolphinspot a span, dd#whalespot a span, dd#whalespot1 a span, dd#whalespot2 a span, dd#whalespot3 a span, dd#whalespot4 a span, dd#locaspot a span, dd#rayspot a span, dd#lagoonariumspot a span, dd#quadspot a span, dd#divespot a span, dd#divefishspot a span, dd#hikespot1 a span, dd#hikespot2 a span, dd#surfspot1 a span, dd#surfspot2 a span, dd#surfspot3 a span, dd#sharkspot a span, dd#aquaspot a span, dd#tikispot a span ,dd#markspot a span,dd#privexpeditspot a span ,dd#beachspot1 a span ,dd#beachspot2 a span ,dd#beachspot3 a span ,dd#beachspot4 a span ,dd#restaurantspot1 a span,dd#restaurantspot2 a span,dd#restaurantspot3 a span,dd#restaurantspot4 a span,dd#restaurantspot5 a span,dd#restaurantspot6 a span{ display: none; }
/* move the link background image to position 0 0 when hovered */
dd#whaledescspot a span{display:block;}
/*#imap a#quad:hover, #imap a#dive:hover, #imap a#dive2:hover, #imap a#hike1:hover, #imap a#hike2:hover, #imap a#surf1:hover, #imap a#surf2:hover, #imap a#surf3:hover, #imap a#shark:hover, #imap a#tiki:hover, #imap a#marks:hover, #imap a#aqua:hover{background-position:0 0;}*/
#imap a#whaledesc, #imap a#surf5, #imap a#surf4, #imap a#sculpture, #imap a#tahitievasion, #imap a#safari, #imap a#college, #imap a#waterfall, #imap a#dolphin, #imap a#whale, #imap a#whale1, #imap a#whale2, #imap a#whale3, #imap a#whale4, #imap a#locaboat, #imap a#ray, #imap a#lagoonarium, #imap a#quad, #imap a#dive, #imap a#dive2, #imap a#hike1, #imap a#hike2, #imap a#surf1, #imap a#surf2, #imap a#surf3, #imap a#shark, #imap a#tiki, #imap a#marks, #imap a#aqua, #imap a#prvexp, #imap a#beach1, #imap a#beach2, #imap a#beach3, #imap a#beach4, #imap a#restaurant1, #imap a#restaurant2, #imap a#restaurant3, #imap a#restaurant4, #imap a#restaurant5, #imap a#restaurant6{background-position:0 0;}
/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:388px; display:block; font-family:"Century Gothic", Helvetica, sans-serif; font-size:12px; background:#FFF; color:#000; border:1px solid #000; padding:5px;}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#quad:hover span {left:-250px; top:210px;}
#imap a#dive:hover span {left:-232px; top:176px;}
#imap a#dive2:hover span {left:-232px; top:196px;}
#imap a#hike1:hover span {left:-440px; top:210px;}
#imap a#hike2:hover span {left:-375px; top:38px;} 
#imap a#surf1:hover span {left:-305px; top:33px;}  /* Haapiti */
#imap a#surf2:hover span {left:-338px; top:268px;} /* Opunohu */
#imap a#surf3:hover span {left:-425px; top:288px;} /* Cooks Bay */
#imap a#surf4:hover span {left:-606px; top:263px;} /* Temae */
#imap a#surf5:hover span {left:-385px; top:-22px;} /* Atiha */
#imap a#shark:hover span {left:-260px; top:198px;} 
#imap a#tiki:hover span {left:-287px; top:138px;}
#imap a#aqua:hover span {left:-285px; top:230px;}
#imap a#marks:hover span {left:-333px; top:66px;}
#imap a#prvexp:hover span {left:-570px; top:225px;}

#imap a#beach1:hover span {left:-570px; top:265px;}/*  Temae Beach */
#imap a#beach2:hover span {left:-299px; top:125px;}/*  Painapo         */
#imap a#beach3:hover span {left:-255px; top:278px;}/*  Tipaniers       */
#imap a#beach4:hover span {left:-335px; top:270px;}/*   Opunohu        */
#imap a#restaurant1:hover span {left:-299px; top:115px;}
#imap a#restaurant2:hover span {left:-307px; top:105px;}
#imap a#restaurant3:hover span {left:-312px; top:95px;}
#imap a#restaurant4:hover span {left:-326px; top:73px;}
#imap a#restaurant5:hover span {left:-343px; top:63px;}
#imap a#restaurant6:hover span {left:-373px; top:33px;}

#imap a#lagoonarium:hover span {left:-549px; top:107px;}
#imap a#ray:hover span {left:-235px; top:228px;}
#imap a#locaboat:hover span {left:-245px; top:238px;}
#imap a#whale:hover span {left:-573px; top:223px;}
#imap a#whale1:hover span {left:-255px; top:238px;}
#imap a#whale2:hover span {left:-255px; top:238px;}
#imap a#whale3:hover span {left:-549px; top:107px;}
#imap a#whale4:hover span {left:-570px; top:225px;}
/*#imap a#whaledesc:hover span {left:-152px; top:278px;}*/
#imap a#dolphin:hover span {left:-255px; top:238px;}
#imap a#waterfall:hover span {left:-504px; top:122px;}
#imap a#college:hover span {left:-389px; top:155px;}
#imap a#safari:hover span {left:-517px; top:255px;}
#imap a#tahitievasion:hover span {left:-255px; top:238px;}
#imap a#sculpture:hover span {left:-275px; top:215px;}

/* hiding layers for image map legend*/
/*#imap #quadspot, #imap  #divespot, #imap  #divefishspot, #imap #surfspot1, #imap #surfspot2, #imap #surfspot3, #imap #sharkspot, #imap #aquaspot, #imap #tikispot, #imap #markspot, #imap #hikespot1, #imap #hikespot2, #imap #privexpeditspot {display:none;}*/
.en_generic_left {
        margin:0;
        margin-top:10px;
	float: left;
	width: 160px;
	padding-left: 0px;
	padding-right:0px;
	height:100%;
	border: 0px solid red;
	/*background-image:url("images/menu_bar6.jpg"); 	*/
	/*background-color: #BFCC54;*/
	/*overflow:hidden;*/
}
.generic_right {
         margin-top:10px;
        
	float: right;
	width: 638px;
/*	height:100%;*/
	padding-right: 0px;
	background-color: #9ACD32;
	border:0px solid green;
      
	/*overflow:hidden;*/
}
.menu_link{
	text-indent:10px;
	height:30px;
	width :100%;
}
.menu_link:hover{
	background-color: #9ACD32;
}
.marks_footer{
	position: relative;
        margin-left:0px;
	
	width:638px;
	border:0px solid red;
	z-index:100;
}
.clear{ clear:both; }
.act_map{
	    margin-bottom:20px;
}

#fare_desc{font-family: "Century Gothic", Helvetica, sans-serif;color:#000; font-size:10px;}
.column1{
        float :left;
        margin-left:10px;
        width:45%;/*290px;*/
        height:100%;
        border:0px solid red;
}
.column2{
        float:right;
        margin-right:10px;
        width:45%;/*310px;*/
        height:100%;
        border:0px solid blue;
}
#normal_text{
        font-size:12px;
        color : blue;
        font-style:normal;
        text-decoration:none;
}
.contact_img1{
        border:5px solid #CFD87F;	
        margin-left:0px;
}
.contact_img2{
        border:5px solid #CFD87F;
        margin-top:0px;
        margin-right:0px;
}

#col_content{
        top:0px;
}
.innerCol_1{
        vertical-align:top;
        width:35%;
        float:left;
}
.innerCol_2{
        vertical-align:top;
        width:65%;
        float:right;
}
 .innerCol_3{
        width:100%;
        float:left;
        margin-top:20px;
}
#act_text{
	  font-size:12px;
      color : #000000;
      font-style:normal;
      text-decoration:none;
}
#indent_text{
/*	text-indent: 10px;*/
	margin-left: 10px;
}
#time{
	  font-size:10px;
      color : #fff;
      font-style:normal;
      text-decoration:none;
}
#small{
	font-size:10px;
      color : #fff;
      font-style:normal;
      text-decoration:none;
}
#small a{
	  color : #fff;
      font-style:normal;
      text-decoration:none;
}
#small a:hover{
	  color:red;
	  cursor:pointer;
}