@import url(ericreset.css);   /* Here we import our reset styles */


/* Styles for the Slides */

/* In order to make the slide show work, you only need to include these styles */

#gallery {
	overflow: hidden; 		/* This makes sure that the extra photos are hidden */
	width: 690px; 			/* This should be set to the width of your gallery ( the part that you actually want viewable) */
}

.slide {
	float: left; 			/* This makes sure that all our images display in a row */
}

/* End styles for slides */



/* Styles for the gallery navigation */

/* 
 * These styles are for the next and previous buttons. 
 * They are optional, and you should modify then to suit your purposes 
*/
#menu {
	/* 	These three styles are how we position the naviagion buttons. 
		Setting the position to relative allows us to move them around.
		We then can adjust the top and left properties to get the navigation buttons where we want them
		These numbers have the navigation in the bottom left. 
		You should change the numbers to how you want them
	*/
	position: relative;
	left: 850px;
	top: 340px;
	
	
	z-index: 1000; 				/* Setting a high z-index makes sure that this will display on top of our gallery images */
	overflow: hidden; 			/* make sure the div encloses it's children */
		
}
#gallery #menu a {
	/* 	The width is set to be the same as the image we are using for the background (see below)
		You should change this to match your images
	*/
	height: 26px;
	width: 26px;

	/* These are necessary for displaying the gallery nav properly */
	display: block;
	float: left;
	text-indent: -1000px; 		/* This causes the text to display off the page. That way we see only the image */
	
}
#gallery a.next {
	/* Change this image to your own image */
	background: transparent url(../images/next.png) 0 0 no-repeat;
}

#gallery a.previous {
	/* Change this image to your own image */
	background: transparent url(../images/prev.png) 0 0 no-repeat;
	margin-right: 15px;
}

/* End styles for gallery navigation */





/* Begin Normal Styles */

/* 	
	This is basic CSS code for a website with a header, footer, and 2 columns 
	The sidebar is on the left.
	The site is centered and 960px wide
*/



/* Basic Structure */

body {
	text-align: center;				/* This is a hack for older browsers to center the page */
}

#container {
	margin: 0 auto; 				/* This centers the page in modern browsers */
	text-align: left; 				/* This is a hack for older browsers to center the page */
	width: 960px; 					/* This sets our total page width */
}

#header {
	width: 960px;					/* This sets the header to stretch the full page width */
}

#navigation li {
	display: inline; 				/* Make our navigation display in a line */
}

#content {
	float: right;					/* This causes the content to move to the right */
	width: 710px;					/* We need to set the width whenever we float an element */
}


#sidebar {
	float: left; 					/* This causes the sidebar to move to the left */
	width: 250px; 					/* We need to set the width whenever we float an element */
}


#footer {
	clear: both; 					/* This makes sure that the footer clears both the sidebar and content floats */
	width: 960px;					/* This sets the header to stretch the full page width */
}

/*Basic Typography*/

p, h1, h2, h3 {
	font-family: Georgia, Times, "Times New Roman", serif;
	color:#203f5e; /*blue*/
}

p{
	color: black;
	font-size:1em; /*16px*/
	line-height: 1.25em;
	padding: 10px 0px;
	}

h1, h2 {
	font-size:2em; /*32px*/
}

h3 {
	font-size: 1.25em; /*20px*/
	border-bottom: 4px solid #de1616; /*red line*/
}

/*MyStyles*/
body{
	font-size:100%;
	background: #e6e6e6 url(../images/bg.png) repeat scroll left top;
}

#container{
	background: #fff;
	border: 1px solid #203f5e;
}

#container a:link, a:visited, a:hover, a:active{
	text-decoration:none;
}
 /*Header Styles*/
 #header {
	background: #e6e6e6 url(../images/bg_header.png) left top repeat;
	height: 120px;
 }
 
 #logo {
	float:left;
	padding: 10px 0px 10px 10px;
 }
 
 #address{
	text-align:right;
	padding:45px 10px 0px 0px;
 }
 
  #address a{
	color: #203f5e; /*blue*/
	text-decoration: none;
 }
 
 /*Nav Links*/
 
div#navcontainer{
	clear:both;
	background: #203f5e url(../images/bg_nav.png) repeat-x scroll left top;
	height: 25px; /*real height - padding top = 23*/
	padding: 6px 0px 0px 10px;
 }
 
#navigation li{
	padding-right: 33px; /*sets the distance between links etc. Home      Menu*/
	font-size: 1.25em; 
}


	div#navcontainer a:link {
		color: #d7d7d7; /*light grey*/
		text-decoration: none;
	}

	div#navcontainer a:visited {
		color: #d7d7d7; /*light grey*/
		text-decoration: none;
	}

	div#navcontainer a:hover, a:active {
		color:#fff; /*white*/
		text-decoration: none;
		border-bottom: 4px solid #de1616;
	}

/*Services Styles*/

#services{
	width: 230px;
	padding: 10px;
}

#services a{
	color: #203f5e;
}

#servlist a
{
display: block;
padding: 5px 0px 0px 10px;
width: 230px;
border-bottom: 1px solid #d7d7d7;
}

#servlist a:hover
{
border-bottom: 1px solid #de1616;
}
/*Tide Chart Styles*/

#tidechart{
	width:230px;
	padding: 10px;
}

/*Content*/

#content{
	width: 690px;
	padding: 10px 10px;
}

/*footer*/	

#footer{
	background: #203f5e url(../images/bg_footer.png) repeat-x scroll left top;
	font-size: .75em;
	height: 170px;
	line-height: 1.5em;
}

#footer a:link, a:visited{
	color: #d7d7d7;
}

#footer  a:hover, a:active{
	color: #d7d7d7;
	border-bottom: 1px solid #de1616; /*red*/
}

#navigation2{
	float: left;
	padding: 10px 10px;
}

#navlist2 li, #validlist li{
	display: inline;
}

#buttons li {
	display: inline;
	padding-right: 2px;
}

#buttons {
	text-align:right;
	padding:10px 10px;
}