/* This style sheet was written by Community MX and was distributed freely for use with the free North Pole CSS positioning template.
The North Pole template is freely available from http://www.communitymx.com - This comment should remain intact though you are free to edit the style sheet as you see fit. */

body { /* set everything to zero for a good cross-browser starting point */
	margin: 0; /* zeroes the margins on the body */
	padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */
	border: 0; /* zeroes off any existing border */
	background-color: #efdcb9; /* sets the body background colour */
	color: #000000;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

.style2 {
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
}

.linkstyle {
	font-size: 80%;
	color: #000000;
}

.h1 {
	font-size: 150%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	}
	
.h2 {
	font-size: 130%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-style: italic;
	}


#wrapper {
   width: 770px;/*sets the width for IE5.x's broken box model*/
	w\idth: 770px; /* sets the width of the wrapper for compliant browsers*/
	height: 1050px;
	margin: 5px auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-image:url(../Art/seamore_wrapper_flat_2.gif); /* sets the path to the wrapper's bg image*/
	
	background-position: bottom; /* uses two % values to place the image 2% from the left and 93% from the wrappers top left hand corner */
	background-repeat: no-repeat; /* prevents the image from tiling in our page, we do not want this image to repeat */
	background-color: #e2f8f8; /* sets the wrappers background color */
	border: 1px solid #000; /* sets a border to all 4 sides */
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */
}

#banner {
	position: relative; /* **PLEASE READ** ~ This property and value is not needed for your page to be rendered corectly in the browser - However, without it Dreamweaver allows the position of the leftcol div to ride up over the banner in design view. If that does not bother you you can safely delete this property and value pair. Alternatively you could implement a design time style sheet to position the div correctly for working in design view */
	background-image: url(../Art/seamore_banner_bg.gif);  /* sets the background image for the banner div*/
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	height: 160px;/* set a height for the banner to allow all the bg image to be seen, no text resizing in this element to worry about */
}

#content { /* Begin laying out and styling the content div */
	width: 560px; /* sets the width of our content*/
	background-color: #e2f8f8;
	margin-left: 200px; /* this left margin clears the leftcol div and allows our content div to become a second column */
	margin-bottom: 40px;
	
}

#content p {
	font-size: 80%; /* set the font size for p, scaled from the body declaration */
	margin: 10px 6px 10px 6px; /* set the margins for the p element */
	padding: 0; /* zero off the padding */
	text-align: center;
}

.titleimages { /* used to set the "cold" title images */
	margin-top: 20px; /* set a margin to the top */
	text-align: center;
}

a:link {
	color: #000000;
	text-decoration: underline;
	
}
a:visited {
	color: #000000;
	text-decoration: underline;
	
}
a:hover {
	color: #89c440;
	text-decoration: underline;
	border: none;
}
a:active {
	color: #000000;
	text-decoration: underline;
}


/*** Begin laying out the leftcol div - index page ***/
#leftcol { 
	float: left; /* Floats the div to the left to make a column */
	width: 169px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 10px;
	margin-left: 7px; /*creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 0px; /* moves the div down from the banner */
	background-image: url(../Art/hermit_crab_wide.gif); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	padding-top: 34px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
}

#leftcol #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 169px; /* sets a width for the div */
	background-image: url(../Art/prices.gif); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
	padding-bottom: 390px; /* gives our background image room to display */
	
}

#leftcol #navigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcol #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image: url(../Art/li_bg_2.gif); /* sets the image for the roll over */
	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
	
}

#leftcol #navigation a, 
#leftcol #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #89c440; /* sets a background colour on the links which hides the roll over fish image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #navigation a:hover, 
#leftcol #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the light blue background colour from the "a" selector showing and ensures the fish image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
	text-align: left;
}

/*** left column coding for index page ends here ***/





.tripadvisornav a, a:visited, a:hover, a:focus {
	border: none;
}




/*** left column coding for photos page starts here ***/

#leftcolphotos { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	width: 169px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 10px;
	margin-left: 7px; /*creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 0px; /* moves the div down from the banner */
	background-image: url(../Art/hermit_crab_wide.gif); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	padding-top: 34px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
}

#leftcolphotos #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 169px; /* sets a width for the div */
	background-image: url(../Photos/photos_leftcol.jpg); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
	padding-bottom: 390px; /* gives our background image room to display */
}

#leftcolphotos #navigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcolphotos #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image: url(../Art/li_bg_2.gif); /* sets the image for the roll over */
	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
	
}

#leftcolphotos #navigation a, 
#leftcolphotos #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #89c440; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcolphotos #navigation a:hover, 
#leftcolphotos #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}
/*** left column coding for photos page ends here ***/



/*** left column coding for captfrank page starts here ***/


#leftcolcaptfrank { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	width: 169px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 10px;
	margin-left: 7px; /*creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 0px; /* moves the div down from the banner */
	background-image: url(../Art/hermit_crab_wide.gif); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	padding-top: 34px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
}

#leftcolcaptfrank #cfnavigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 169px; /* sets a width for the div */
	background-image: url(../Art/bring.gif); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
	padding-bottom: 390px; /* gives our background image room to display */
}

#leftcolcaptfrank #cfnavigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcolcaptfrank #cfnavigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image: url(../Art/li_bg_2.gif); /* sets the image for the roll over */
	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
	
}

#leftcolcaptfrank #cfnavigation a, 
#leftcolcaptfrank #cfnavigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #89c440; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcolcaptfrank #cfnavigation a:hover, 
#leftcolcaptfrank #cfnavigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}



/*** left column coding for LINKS page starts here ***/

#leftcollinks { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	width: 169px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 10px;
	margin-left: 7px; /*creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 0px; /* moves the div down from the banner */
	background-image: none; /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	padding-top: 10px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
}

#leftcollinks #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 169px; /* sets a width for the div */
	background-image: url(../Photos/photos_leftcol.jpg); /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
	padding-bottom: 390px; /* gives our background image room to display */
}

#leftcollinks #navigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcollinks #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image: url(../Art/li_bg_2.gif); /* sets the image for the roll over */
	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
	
}

#leftcollinks #navigation a, 
#leftcollinks #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #89c440; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcollinks #navigation a:hover, 
#leftcollinks #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}
/*** left column coding for links page ends here ***/

/*** left column coding for gizmos starts here ***/

#leftcolgizmo {
	border: none;
	background-image: none; /* sets the path to the bg image */
	padding-top: 15px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
	text-decoration: none;
	text-align: left;
	background-color: #e2f8f8;
}

#leftcolgizmo #navgizmo ul {
		list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	background-color: #e2f8f8;
}

#leftcolgizmo #navgizmo ul li {
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	background-image: none; /* sets the image for the roll over */
	background-color: #e2f8f8;	
}

#leftcolgizmo #navgizmo a, a:visited, a:hover, a:focus {
	list-style-type: none; /* removes the bullets from our list navigation */
	background-color: #e2f8f8;
	background-image: none;
	text-align: left;	
}

/*** left column coding for gizmos ends here ***/