/*  Css Stylesheet created for Rising Sun Kayaks
	Created: November 27, 2007.
	Author: Kalani Diehl ( diehldesigns.com ) */

html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	
	background: #365f70 url("../images/bg.jpg") top right repeat-x;
 background-attachment: fixed;	font-family:arial,sans-serif;
}

/* STANDARD HEADING STYLES ---------------------------------------------------------- */
h2 {
	margin: 0 0 -11px 0;
	padding: 0;
}


/*STANDARD LINK STYLES ---------------------------------------------------------------*/
a, a:visited, a:link {
	color: #B9DDAC;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: underline;
}


/* OUTER CONTAINER ---------------------------------------------------------------------
   This holds the page together the width here determines the width overall of the page.
   Try not to edit this unless you really need to edit the wisth of the site.  */
   
div#container {
	position:relative; /* center, not in IE5 */
	width:800px;
	background:transparent;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


/* TOP BAR ------------------------------------------------------------------------------
   Section above header which holds the keyword content.*/
div#top {
	padding:10px 0 0 0; /* pushes the text down to center it vertically (ie. padding: top right bottom left)*/
	color: #327085; /* text color */
	height: 34px;
	font-style: italic;
	font-size: 15px;
}

/* This affects the two buttons - home and sitemap */
div#top .imagespace {
	margin-right: 5px; /* spaces out the images */
    float: right;
}

div#header {
	background: url("../images/header.jpg") top center no-repeat;
	height: 175px;
	vertical-align: bottom;
}

#flashcontent {
	height: 175px; /* the height of the flash movie - no need to edit */
}



/* HORIZONTAL NAV STYLE --------------------------------------------- */
div#horiznav {
	background: url("../images/nav-bg.jpg") center -2px no-repeat;
	height: 62px;
	padding-left: 30px; /*Centers the text in the nav bar */
	text-align: center;
	font-size: 0.9em;
}

div#horiznav .innernav a {
	height: 27px; /* The height of the actual link - try not to change this */
	padding: 18px 10px 0 9px; /* the padding around the text link (top right bottom left) */
	border-right: solid 1px #74b4ca; /* this is the separater line between the links */
	border-left: solid 1px #74b4ca; /* the other separator line */
	color: #12252d;
	display: block; /* this creates a block area so that the mouse effect is activated from thee block area rather then the text link - block is defined by the height and width and padding*/
	float: left; /* do not change this */
	text-decoration:none; /* the effect of the text once rolled over - common is underline */
}

div#horiznav .innernav a:hover {
	height: 27px;
	background-color: #74b4ca; /* background color when at rollover state - could be an image in wanted - to add image - background: url("image name") no-repeat; */
	padding: 18px 10px 0 9px;
	display: block;
	float: left;
	color: #fff;
	text-decoration: underline;
}
/* ---------------------------------------------------------------------- */

/* TOP FEATURE STYLE ------------------------------------------------- */
div#feature {
	background: #294a57 url("../images/feature-bg.jpg") top right no-repeat;
	height: 176px;
	
	padding-top: 5px;
	color: #B8DCDC;
	font-size: 0.8em;
}

div#feature .inner_left_column {
	border-right: solid 1px #456d7e;
	width: 328px;
	height: 90%;
	padding: 0px 20px 0 30px;
	
	/*margin-top: 15px;*/
}

div#feature .inner_left_column h1 {
	color: #fff;
	padding: 0;
	margin: 0;
	font-size: 1.5em;
}

/* Sets the width and styles of the right nav column with links */
div#feature .inner_right_column {
	width: 360px;
	/*height: 80%;*/
	float: right;
	display: inline;
	padding: 0px 30px 0 20px;
	margin-top: 10px;
}



/* TOP FEATURE NAV COLUMNS ----------------------------------------- */
/* Style for the nav column table */
#maincol {
	margin:0;
	padding:0;
	height: 100%;
	width: 360px; /* changing the width will put the dimensions out of wack without changing the left column widths */
}

/* left column of links */
#leftcol { 
	margin:0;
	padding: 0;
	width: 120px;
}
	
#leftcol ul{ 
	margin:0;
	padding:0;
	list-style-type:none;
}

#leftcol a {
	color: #88b3c5;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 18px;
}

/* this defines the style when the mouse hovers over the link */
#leftcol a:hover {
	color: #ffffff;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 17px;
	border-bottom: solid 1px #88b3c5;
	background-color: #294a57;
}

/* right column of links */
#rightcol {
	margin:0;
	padding:0;
	width: 120px;
}
	
#rightcol ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

#rightcol a {
	color: #88b3c5;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 18px;
}

/* this defines the style when the mouse hovers over the link */
#rightcol a:hover {
	color: #ffffff;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 17px;
	border-bottom: solid 1px #88b3c5;
	background-color: #294a57;
}

/* center column of links */	
#centercol {
	margin:0;
	width: 120px;
}

#centercol ul{
	padding:0;
	margin:0;
	list-style-type: none;
}

#centercol a {
	color: #88b3c5;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 18px;
}

/* this defines the style when the mouse hovers over the link */
#centercol a:hover {
	color: #ffffff;
	text-decoration: none;
	padding: 5px 3px;
	display: block;
	height: 17px;
	border-bottom: solid 1px #88b3c5;
	background-color: #294a57;
}	
	
/* FEATURE SECTION 2 STYLE -----------------------------------------------*/
div#feature2 {
	background-color: #e6e7e7;
	padding: 10px;
	color: #666666;
	font-size: 0.8em;
}

div#feature2 h2 {
	padding: 0;
	margin: -10px 0 0 0;
	text-transform:uppercase;
}

div#feature2 table {
	width: 100%;
	height: 100px;
}

div#feature2 .one {
		background: #d5d7d7 url(../images/maps-img.jpg) top center no-repeat;
		width: 209px;
		padding: 110px 20px 0 20px;
}

div#feature2 .two {
		background: #d5d7d7 url(../images/animal-img.jpg) top center no-repeat;
		width: 221px;
		padding: 110px 20px 0 20px;
}

div#feature2 .three {
		background: #d5d7d7 url(../images/group-img.jpg) top center no-repeat;
		width: 209px;
		padding: 110px 20px 0 20px;
}

div#feature2 .bottom {
		background-color: #d5d7d7;
		width: 249px;
		height: 10px;
}


/* CONTENT STYLE */
div#content {
	background-color: #365f70;
	padding:20px 30px;
	margin:0;
	color: #B8DCDC;
	font-size: 12px;
	text-align:justify;
}

#content_columns {
	padding: 0;
	margin: 0;
}

#content_columns .left {
	width: 50%;
	padding: 0 10px 0 0;
}

#content_columns .right {
	width: 50%;
	padding: 0 0 0 10px;
}


/* Image in content style ------------------------------------------------------ */
/* Specify in the <img> tag in the html left or right.  ie. <img src="nameoffile.jpg" width="100" height="100" border="0" class="left"> */
#content img.left {
	float: left;
	margin: 8px 8px 8px 0;
	background-color: #CCCCCC;
}

#content img.right {
	float: right;
	margin: 8px 0 8px 8px;
	background-color: #CCCCCC;
}


/*div#content p {
	padding: 0px 90px 18px 90px;
	margin:0;
}*/


/* FOOTER STYLES */
div#footer {
	height:45px;
	background-color: #26434F;
	color: #88b3c5;
	min-height: 100%;
	font-size: 0.8em;
	text-align: right;
	padding-top: 25px;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-bottom: 0px;
	clear: both;
}
div#footer a {
	color: #88b3c5;
	text-decoration: none;
	padding-right: 10px;
	padding-left: 10px;
}

div#footer a:hover {
	color: #88b3c5;
	padding-right: 10px;
	padding-left: 10px;
	text-decoration: underline;
}
.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
}