/* Global Styles */
body {
	margin:0px;
	background-color:#1ed6de;
	}
	
	
a {
	color: #FF6600;
	font-weight:bold;
	}

/* Class Styles */
	
.bodyText {
	font:11px  "Times New Roman", Times, serif;
	color:#3366CC;
	line-height:20px;
	margin-top:0px;
	
	}
	
.pageName{
	font: 24px  "Times New Roman", Times, serif;
	color: #3366CC;
	line-height:24px;
	letter-spacing:.2em;
	}
	

a:link, a:visited{
	color: #ff0000;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120%  "Times New Roman", Times, serif;
 /*color: #334d55;*/
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114%  "Times New Roman", Times, serif;
 /*color: #006699;*/
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 107%  "Times New Roman", Times, serif;
 /*color: #334d55;*/
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100%  "Times New Roman", Times, serif;
 
 margin: 0px;
 padding: 0px;
}

h5{
 font: bold 190%  "Times New Roman", Times, serif;
	/*color: #7993f4;*/
	padding: 10px 10px 10px 10px;
	text-align:center;
}


ul{
 list-style-type:disc;
}
/*
ul ul{
 list-style-type: square;
}

ul ul ul{
 list-style-type: none;
}
*/
#pagecell1{
	position:absolute;
	top: 20px;
	left: 20px;
	right: 2%;
	width:95.6%;
	min-width:800px;
	background-color: #3366CC;
	background-image: url(images/WallpaperScallopWeb.gif); 
}
#pagecell2{
	position:absolute;
	min-width:800px;
	top: 20px;
	left: 20px;
	right: 2%;
	width:95.6%;
	background-color: #3366CC;
	background-image: url(images/WallpaperPalmDoubleWeb.gif);

}
#pagecell3{
	position:absolute;
	min-width:800px;
	top: 20px;
	left: 20px;
	right: 2%;
	width:95.6%;
	background-color: #3366CC;
	background-image: url(images/WallpaperFishWeb.gif);

}


#pageNav{
	float: right;
	
	padding: 0px;
/*	background-color: #fff799;
	border-right: 1px solid #7993f4; 
	border-bottom: 1px solid #7993f4;*/
	font: 100%  "Times New Roman", Times, serif;
	color:#ff0000;
}
#pageImg{
	float:left;
	width:37%;	
}

#content{ /* CHANGED */
	padding: 0px 10px 0px 0px;
	/*	margin:0px 178px 0px 310px;   original margin*/  
	/* changed left margin to account for background image (image is 300px). */
/*	border-left: 1px solid #ccd2d2;*/ /* removed this border it looked odd */
	font: 150%  "Times New Roman", Times, serif;

/* the following 2 lines add a background color, border and a bit more of a margin
to the content area for readability. While I am not sure if this is the perfect 
solution, I do feel that it may be hard to read the text on the site over the backgrounds.
There may need to be a bit more contrast as well (a slightly darker blue may do the trick). */
	margin:0px 190px 0px 310px; 
/*	background-color: #fdee8f;
	border: 1px solid #ccd2d2;*/

/*this is a slightly darker blue as an example. Note that I had to comment our the color
attribute in a few other places to make it work here. */
/*	color: #5163A7;*/
	
	color: #3366CC; 
}
#content2{ /* CHANGED */
	padding: 0px 10px 0px 0px;
		margin:0px 178px 0px 10px; 
		font: 150%  "Times New Roman", Times, serif;	
	color: #3366CC; /* original color #7993f4; */
}

#wrapper { background:url(images/Seaweed.gif) no-repeat;} /* CHANGED */
#pageName{
}

#pageName h2{
	font: bold 350% Jester, "OzHandicraft BT", "Times New Roman", Times, serif;
	color: #ff0000;
	margin:0px;
	padding: 0px;
}
#pageName h3{
	font: bold 200% "OzHandicraft BT", Jester, Verdana, "Times New Roman", Times, serif;
	/*color: #7993f4;*/
	margin:0px;
	padding: 0px;
}

#pageName img{ /* CHANGED */
display:block; /* use these 2 attributes to center an image. Simple. */
margin:0 auto; /* note this will center an image within the parent element, so if the 
image is not centering the way you expect, then put a border on the parent element and see 
what it looks like. Often, your parent element is causing the problem (in this case your
parent element was just fine and is the full width of the page as it should be for the
centering to work properly. */

	/*height: 225px;*/

/*	top: 0px;
	right: 6px;
	padding: 0px;
	margin: 0px;*/
	
}


.feature{
	padding: 0px 0px 10px 10px;
	font-size: 100%;
	/*border-color:#FFFFFF;*/
	height: 200px;
	/* overflow: hidden; */
}	
html>body .feature {height: auto;}
.feature h4{
	font: bold 150%  "Times New Roman", Times, serif;
	/*color: #7993f4;*/
	padding: 30px 30px 0px 0px;
	text-align:center;
}
.feature h3{
	font: bold 175%  "Times New Roman", Times, serif;
	/*color: #7993f4;*/
	padding: 30px 0px 5px 0px;
}
.feature h2{
	font: bold 225%  "Times New Roman", Times, serif;

	padding: 30px 0px 5px 0px;
}
.feature img{	/* CHANGED */
	padding: 0px; 
	/* I changed this just to make you aware that if you want the same value
	for your margins or padding across all sides you can just put it in there once.
	ie padding: 0px 0px 0px 0px; = padding: 0px; or padding: 0;
	Likewise padding:10px 0px; means padding:top&bottom left&right; so it applies the same
	values to both sides respectively (in this example 10px for both top and bottom, and 0 for
	both left and right). */
	
}


/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	text-align:center;	
}
.story h1{
	font: bold 200%  "Times New Roman", Times, serif;
	color: #ff0000;
	}
.story h3{
	font: bold 125%  "Times New Roman", Times, serif;
	color: #000000;
}


.story a.capsule:hover{
	text-decoration: underline;
}

.story img{
height:200px;
border:3px solid #1ed6de;
}


/************** siteInfo styles ****************/

#siteInfo{
	clear: both;	
	text-align:center;
/*	border-top: 1px solid #7993f4; 
	font-size: small;*/
	color: #3366CC;
	padding: 10px 10px 10px 10px;
	margin-top: -1px;
}
/*
#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}
*/

/************ sectionLinks styles **************/

#sectionLinks{
	width:178px;
	margin: 0px;
	padding: 0px;
	background-color: #fff799;
	font:20px "Times New Roman", Times, serif;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #fff799;
	border-bottom:1px solid #fff799;
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #ff0000;
}

#sectionLinks a:hover{
	border-top: 1px solid #3366CC;
	border-bottom:1px solid #3366CC;
	background-color: #fdee8f;
	
	font-weight: bold;
	text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
	margin: 0px;
	padding: 10px 0px 0px 0px;
	
}
.relatedLinks h1{
	padding: 10px 0px 2px 0px;
	color:#ff0000;
}
.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a{
	display: block; 
}


#sectionLinks a.at, .relatedLinks a.at{
display: block;
	
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	border-top: 1px solid #ff0000;
	border-bottom:1px solid #ff0000;
	font-style:italic;
	background-color: #ff0000;
	background-image: none;
	color:#fff799;	
}