/*These are the areas and their explanations/details of styling.  Use the notes 
or instructions within these marks to help understand how Cascading Style Sheets 
manipulate the presentation of your HTML structure and copy.*/

html {
overflow:auto;
}

body {/*no position needed - will 'flow' into position via HTML normal layout*/
	 font-family: georgia, verdana, arial, helvetica, sans-serif;
	 margin: 0;
	 padding-bottom: 0;
	 background: white;/*light gray-blue; fills in behind 'wrapper'*/
	 }

h1, h2, h3, h4, h5, a:link, a:visited, a:hover, ul{/*font-family for all headers and links*/
  font-family: georgia, verdana, arial, helvetica, sans-serif;
	}

h1 {/*largest font-size, heads pages, dark gray-blue*/
  font-size: 1.3em;
	font-weight: normal;
	color: black;
	}
	
h2 {/*next largest font-size, sub-topics, black*/
  font-size: .9em;
	font-weight: bold;
	color: #000;
	}	
	
h2.title {
  font-size: 0.85em;
  margin-top: -5px;
	font-style: italic;
	color: #336677;
	}	

h5.copyright {
  font-size: .55em;
	color: #336677;
	text-align: left;
	margin-top: 50px;
	}	
	

ul.secrets {
  font-size: 0.8em;
  line-height: 1.6em;
	list-style-type: disc;
	margin-top: -25px;
  margin-left: 15em;
	}		
	
html>body ul.secrets { /* Gecko only */
  margin-top: -18px;
	}	

ul.secrets li {
  margin-left: 18.2em;
  }

html>body ul.secrets li {
  padding: 0;
  margin-left: 1.2em;
  }

#wrapper { /*contains 'content' and shows a narrow band of background color to the left of 'content'*/
  padding: 170px 0pt 0pt 0px;
}
	
/* Hack for IE7 */
*+html #wrapper {
  margin-top: 0;
  }	
	
#content {/*space within the 'wrapper' for all visible copy and pix*/
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 1px;
	background-color: white;
	}	

#header {
        position: absolute;
	height: 200px; 
	}

  /* Opera 5 hack: feeds correct length values to user agents that exhibit the 
	parsing error exploited above yet get the CSS box model right and understand 
	the CSS2 parent-child selector. ALWAYS include a the Opera 5 hack every time 
	you use the hack (above). */
	body>#header {height:130px;}	
	
#header img {/*styles the image space in the header*/
  float: left;
/*  margin-left: -.2em; */
	padding: 0;
	}	
	
#bar {/*creates the narrow yellow bar*/
 position: absolute;
 top: 130px;
 left: 0;
 height: 30px;
 width: 100%;
 border-bottom: 2px solid #336677;
 background-color: #ffcc66;
 }
	
#boxspace {
  position: absolute;
	top: 440px;
	left: 10px;
	height: 150px;
	width: 170px;
	font-size: 0.85em;
	}
		
body>#boxspace {
  position: fixed;
	top: 430px;
	}		
	
#navspace {/*space set aside for the navigation links*/
  position: absolute;
	top: 145px;
	left: 20px;
	width: 70px;
	padding: 15px 12px 15px 15px;
	z-index: 2;
	}
	
/*Added to fool IE for fixed menu - fixes these spaces in Foxfire, Mozilla, Nav, etc.*/	
body>#navspace, #header, #bar {
  position: fixed;
	}		

#navlist {/*styling of the navigation links' fonts*/
  font-family: verdana, helvetica, arial, sans-serif;
	font-size: .8em;
	font-weight: bold;
	width: 9em;
	padding: 0 .5em .5em 0;
	background-color: #336677;
	}
	
#navlist ul {/*layout of the navigation links*/
  list-style: none;
	margin: 0;
	padding-left: 6px;
	}
	
#navlist li a:link, #navlist li a:visited {/*colors & layout of the 
  unused navigation links*/
  display: block;
	width: 100%;
	padding: 1px 0px 2px 1px;
	color: #ffcc66;
	text-decoration: none;
	border-top: 4px solid #336677;
	border-bottom: 2px solid #336677;
	border-left: 1px solid #336677;
	}
	
#navlist li a:hover {/*color & layout for 'mouseover' nav links*/
  display: block;
	text-decoration: none;
	padding: 1px 0px 2px 1px;
	color: #800000;
	background-color: #e7e6e8;
	border-top: 4px solid #336677;
	border-bottom: 2px solid #336677;
	border-left: 1px solid #336677;
	}	
	
#navlist li.block {/*color & layout for breadcrumb link*/
  display: block;
	width: 100%;
	text-decoration: none;
	padding: 1px 0px 2px 1px;
	color: #800000;
	background-color: #e7e6e8;
  border-top: 4px solid #336677;
	border-bottom: 2px solid #336677;
	border-left: 1px solid #336677;
  } 			  			
	
ul#guidelist {/*ul = area surrounding individual list (li) items*/
  position: absolute;/*removes the area from the 'flow' of the rest of the 
	                    elements on the page and 'tacks' it into position*/
  top: 0;
	left: 220px;/*moves the first listing placement to the right*/
	list-style-type: none;
  padding: 0;/*to remove left-indent in some browsers*/
	margin: 0;/*to remove left-indent in all the other browsers*/
  }
	
ul#guidelist li {
  display: inline;/*sets list items in a horizontal row instead of vertical list*/
	}	
	
ul#guidelist li a {/*affects both the list item (li) and the item's 'a' state, 
                   such as a's text-decoration, like 'underline'*/
  float: left;/*stacks the list items to the left*/
	width: 10em;/*sets width of each list item's 'area'*/
	padding: 0.5em 0 0.2em 0;/*pads some space (.2em top, bottom; 0em right, left)
	                   in the area around the list item*/
	font-size: .8em;/*sets font-size for list (li) items*/
	font-weight: bold;/*sets font-weight (bold) for list items*/
	color: #336677;/*font color*/
	}	
	
ul#guidelist li a:hover {
  color: #800000;/*changes the font color when it is 'moused over' so you can
	               tell it is an active link*/	
	}							 
	
#floatquoteright {/*right-floating box for quotes*/
  float: right;
	margin: 1.15em;
	padding: 1em;
	border: 1px solid black;
	font-size: .9em;
	}	
	
#floatquoteleft {/*left-floating box for quotes*/
  float: left;
	width: 325px;
	margin: .25em;
	padding: 10px;
	border: 2px solid #336677;
	font-size: .8em;
	}		
	
#thumb {/*removes 'bullets' from list*/
  list-style-type: none;
	}
	
#thumb li {/*styles this list*/
  float:left;
	margin-right: 18px;
	margin-bottom: 8px;
	font: bold .8em Verdana, Helvetica, Arial, sans-serif;
	color: black;
	text-align: center;
	}
	
/* Hide from IE5-mac. Only IE-win sees this.
The Holly Hack
\*/
* html #content {
  height: 1%;
	margin-left: 0;
	}
/* End hide from IE5-mac
End Holly Hack*/	
	
#thumb img {
  display: block;
	border: 1px solid black;
	}		
	
#title {
  margin: 0 0 25px 0;
  border-bottom: 1px solid #336677;
	}	
	
/* Hack for IE7 
*+html #title {
  margin: -10px 0 25px 0;
	}	*/
	
#frame {/*'container' for photos on the gallery page*/
  background-color: transparent;
	}
	
#frame img {/*layout for the gallery images*/
  display: block;
	margin-left: 11em;	
	}	
	
#frame p {/*text styling & layout for the text paragraphs on the gallery page*/
  width: 400px;
	display: block;
	margin-left: 14em;
	margin-bottom: 5em;
	}	

#triplist {/*styles the list used to explain the trips*/
  font-size: .8em;
	font-weight: normal;
	line-height: 1.5em;
	list-style-type: square;/*puts a square in front of each listed item*/
	padding: 0 0 15px 15px;
	margin: -.5em 0 1.5em 1.5em;/*reduces top margin, expands margin on bottom & left to set it off
	from text above and below.*/
	}
	
#triplist li {/*'expands' the list slightly*/
  padding-top: 5px;
	}	
	
#triplist a, a:hover {/*bolds the font for clarity*/
  font-weight: bold;
	}	
	
p.title {
  font: normal bold 1em Arial sans-serif; 
	color: #ffcc99;
	margin: 10px 100px 0 0;
	text-align: right;
	}
	
p.trips {/*adjusts the bottom margin for spacing*/
  margin-bottom: .75em;
	}	

p.list {/*'expands' the list a little*/
  margin: -.25em 0 2em 0;
	}
	
p.center {/*centers the text*/
  text-align: center;
	}
	
p.index1 {
	font-size: 1em; 
	text-align: center;
	margin-bottom: -25px;
	}
	
p.index2 {
  font-size: 0.8em; 
	font-weight: bold;
	color: #000;
	margin: 25px 0 -1px 0;
	text-align: center;
	}
	
p.index3 {
	font-size: 1em; 
	text-align: center;
	margin-bottom: -25px;
	float: left;
	}	
	
p.book {
  font-size: 0.75em;
	font-weight: bold; 
	color: #000;
	margin-bottom: -3px;
	}	
	
p.contact1 {/*styles 'contact' text, line 1*/
  font-size: 1em;
	font-weight: bold;
	color: #800000;
  }	
	
p.contact2 {/*styles 'contact' text, line 2 and on*/
  font-size: .8em;
	}		

p.left {
  text-align: left; 
	font-size: 0.8em; 
	margin: -10px 0 10px 60px;
	}	
	
*html p.left {
  text-align: left; 
	font-size: 0.8em; 
	margin: -15px 0 10px 60px;
	}		
	
p.short {/*shortens paragraphs to fit in a listing*/
  margin-top: -1em;
	}		
	
img.right {
  text-align: right;
	margin-right: 40px;
	}	
	
img.left {
  text-align: left;
	margin-left: 40px;
	}	
	
.bold {
  font-weight: bold;
	}

	
.clearboth {/*clears text from righ and left below*/
  clear: both;
	}	

.dlist {/*styles the list used to explain full-day and half-day trips*/
  font-size: .8em;
	font-weight: normal;
	line-height: 1.5em;
	list-style-type: circle;/*puts a circle in front of each listed item*/
	padding: 0 0 0 15px;
	margin: -.5em 0 1.5em 1em;/*expands margin on bottom to set it off
	from following text.*/
	}	

.elist {/*styles the list used to explain the trips*/
  font-size: .8em;
	font-weight: normal;
	list-style-type: circle;/*puts a circle in front of each listed item*/
	padding: 0 0 0 15px;
	margin: 13em 0 1.5em 0;/*expands margin on bottom to set it off
	from following text.*/
	}
	
ul.float {
  margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	}	
	
.floatright {/*right-floating box for photo, copy, etc.*/
  float: right;
	margin: 0 0 .25em 1.15em;
	padding: 0;
	}	
	
html>body .floatright {
  margin-bottom: 1.25em;
	}	
	
.floatright1 {/*right-floating box for photo, copy, etc.*/
  float: right;
	margin: -.25em .25em 1.15em;
	padding: 0;
	}	
	
.floatright2 {/*right-floating box for photo on Exotic page*/
  float: right;
	margin: 0 5em .25em 1.15em;
	padding: 0;
	}		
	
.floatright3 {/*right-floating box for photo on Exotic page*/
  float: right;
	margin: -1.5em 5em .25em 1.15em;
	padding: 0;
	}		
	
.floatrightOrvis {/*right-floating box for book cover photo*/
  float: right;
	margin: -.5em 1em .25em 1.15em;
	padding: 0;
	}			
	
html>body .floatrightOrvis	{
	margin-right: 1.5em;
	}					

.floatrightP {/*right-floating box for photo, copy, etc.*/
  float: right;
	margin: 0 0 2em 1.15em;
	padding: 0;
	}	
	
html>body .floatrightP {
  padding-bottom: 3em;
	}		
	
.floatleft {/*left-floating box for photo, copy, etc.*/
  float: left;
	margin: 0 1.15em .25em 0;
	padding: 0;
	}			
	
.floatleft2 {/* extra left-floating box for photo on Exotic page*/
  float: left;
	margin: 0 1.15em .25em 0;
	padding: 0;
	}			
	
.floatleft3 {
  float: left;
	margin: 7em 1.15em .25em 0;
	}		
	
.floatboxright {/*right-floating bordered box for copy, etc.*/
  float: right;
	margin: .25em 1.5em .25em .25em;
	padding: 1.5em;
	color: #000;
	font-weight: bold;
	text-align: center;
	line-height: 1.25em;
	background-color: #aec4c6;
	border: 1px solid #336677;/*the border styling*/
	}			
	
.floatboxleft {/*right-floating bordered box for copy, etc.*/
  float: left;
	margin: .25em 1.5em .25em .25em;
	padding: 1.5em;
	color: #000;
	font-weight: bold;
	text-align: center;
	line-height: 1.25em;
	background-color: #aec4c6;
	border: 1px solid #336677;/*the border styling*/
	}		
	
.quotebox {
  text-align: center;
	}	

.quoteboxindex {
  position: absolute;
	top: 0;
	right: 0;
/*  float: right;*/
	font-size: 0.9em;
	margin: 0;
	padding: .9em .9em .5em .9em;
	height: 128px;
	color: #000;
	text-align: left;
	line-height: 1.25em;
	background-color: #aec4c6;
	border: 1px solid #336677;
	}
	
html>body .quoteboxindex {
  margin-top: -10px;
	}		
	
.right {
  margin: 0;
	padding: 0;
	text-align: right;
	}

	
/*.quoteboxindex {
  float: right;
	font-size: 0.9em;
	margin: .5em;
	padding: 1.5em 1.5em 0 1.5em;
	color: #000;
	text-align: center;
	line-height: 1.25em;
	background-color: #aec4c6;
	border: 1px solid #336677;
	}
	
html>body .quoteboxindex {
  padding: 1.5em 1.5em 1em 1.5em;
	margin: .75em;
	}*/	
	
.img {
  border: none;
	float: right;
	padding-right: 3px;
	}		

img.schoolpermit {/*for IE */
  float: right; 
  margin-top: 4em; 
  padding-left: 1em;
}

html>body img.schoolpermit {
   margin-top: 3em;
}
	
.smallh2 {/*reduces font size a little*/
  font-size: .8em;
	font-weight: normal;
	color: #000;
	}
	
.thumb p {/*gets rid of top margin*/
  margin-top: 0;
	}
	
.trip {/*adjusts the font size*/
  font-size: .75em;
	}	

/* MRR */
.footerfont { font-family: georgia, verdana, arial, sans-serif; font-size: 12px; text-align:center }

.bannerfont { font-size: 24px; font-weight:bold; border-bottom: dotted #1d5d79;}

.fishingText { 
/*	margin-right:10px;  */
	margin-left:12px;  
	margin-top:0px; 
	margin-bottom:0px; 
	color:#1d5d79; 
	text-align:left 
}

.mrrIndent { margin-left:10px;}

.mrrSmall { 
    color: black;
    font-size: 12px; 
}

a:link  { color: #0067AC; }
a:active { color: #0067AC; }
a:visited { color: #0067AC; }
a:hover { color: #752D03; }

div.dropdown {
	position: absolute;
	border: 1px solid #a3a2a2;
	padding: 0px;
	background-color: #176a7c;
	top: 175px;
	left: 0px;
	font: 14px georgia;
	font-weight: bold;
	width: 180px;
	visibility: hidden;
}

div.dropdown div.dropdown {
	position: absolute;
	left: 93px;
}

div.dropdown div.menuitem {
	white-space: no-wrap;
	padding: 0px 0px 0px 0px;
	margin: 0px 5px;
	height: 20px;
	line-height: 20px;
}


div.dropdown div.menuitem a {
	text-decoration: none;
	color: white;
}

div.dropdown div.menuitem a:hover {
	text-decoration: underline;
}

#aboutUsMenu {
	left: 700px;
}

#fishingMenu {
	left: 360px;
}

#monkeyMenu {
	left: 255px;
	width: 100px;
}

#sealMenu {
	left: 361px;
}

#toursMenu {
	left: 570px;
}
#rateMenu {
	top: 25px;
}