/* THREE COLUMN LAYOUT */

/* a fix for IE6 only - see Star Hack in Stylin' with CSS to see how the comments and * html hide this hack from other browsers \*/
* html * {
	zoom:					100%; 
/* triggers IE6 "haslayout" - google 'IE6 haslayout' for details*/
	}
/* without the above hack, IE6 does not draw the header until the page is resized */
/* the problem is triggered by the universal * selector below that resets the margins, but I need to do that, hence the hack */
* {
	margin:					0;
	padding:				0;
	}
/*ALL PAGES AND HOME PAGE STYLING*/
body {
	text-align:				center;  /* IE6 needs this to center the layout in the browser window */
	font: 					1em "Times New Roman", Times, serif ; /* 1em = 16pts */
	background-image:		url(../images/ocean_04.jpg);
	background-repeat:		repeat;
	color:					#322b2b;
	}

#top {
	background-image:		url(../images/wholebody_01.jpg);
	background-repeat:		repeat-x;
	}

#main_wrapper {
	width:					1024px; /* widths of columns will scale proportionately as this width is changed */
	margin-left:			auto;  /* centers max'd layout in browser */
	margin-right:			auto; /* centers max'd layout in browser */
	text-align:				left; /* prevents page inheriting IE6 centering hack on body */
	}

#header {
	height:					168px;
	width:					1024px;
	position:				relative;
	
	}
	
#header #topNav{
	
	float:					right;
	list-style:				none;
    margin-right:           180px;}

				
#header #topNav li a{
	text-decoration:		none;}
	
#header #header_inner #boatlogo{
	border:					none;
	margin:					0;
	position:				absolute;
	top:					-16px;
	left:					-27px;}
	
#header #header_inner #flashintro{
	border:					none;
	margin:					0;
	position:				absolute;
	top:					0px;
	left:					-300px;
	}

 .hoverfix{
	border:					none;
	margin:					0;
	position:				absolute;}
	
#header #header_inner #logo{
	position:				absolute;
	top:					59px;
	left:					850px;
	z-index:				1;}
	
#header #header_inner #homelogo{
	position:				absolute;
	top:					59px;
	left:					850px;
	}

#header_inner {
	padding:				1em 2em;
	z-index:				1;
	}
#maincontent {
	width:					1024px;}

#navbar {		
	width:					14%;
	float:					left;}
	
#nav_inner {	
	margin:					.65em .5em;}
	
#nav_inner ul li{   
	margin:					.55em 0;}
	
#nav_inner ul li a{
	text-decoration:		none;}
	
#nav_inner ul li a img{
	border:					none;}
	

#content {		
	width:					59%;
	float:					left;
	}

#content_inner {
	margin:					1em .5em 1em .5em;
	padding:	             0 .5em 0 0;}
	
a.midContentLink {
	color:					#4a8aad;
	font-size:				1em;
	text-decoration:		none;}
	
a.midContentLink img{
	border:					none;}
	
a.midContentLink:hover{
	color:					#36475b;
	text-decoration:		underline;}
	
#content_inner h4, #content_inner h5{
	margin:					0 0 10px 0;}

	
.title{
	text-transform:			uppercase;
	font-size:				1.2em;
	font-weight:			bold;
	border-bottom:			thin dashed black;}
	
.title a{
	text-decoration:		none;
	color:					#322b2b;}

	
#promo {		
	width:					23%;
	float:					right;
	/*position:			 	relative;*/
 	z-index:			 	1;
	}
	
#promo_inner {	
	margin:					.5em .5em;}

#mission {		
	font-weight:			bold;
	text-align:				center;
	font-style:				italic;
	font-size:				1.1em;}
	
#signup .subtext{
	font-size:				.7em;}

#sideNews{
	margin:					10px 5px;}

#sideNews img{
	float:					left;
	margin:					0 5px 5px 0;}
	
#sideNews p{
	font-size:				.9em;}
	
#sideNews a#indexImage{
	color:					#4a8aad;
	font-size:				.9em;
	text-decoration:		none;}
	
#sideNews a:hover {
	color:					#36475b;
	text-decoration:		underline;}
	
	
#footer {
	width:					100%;
	clear:					both;
	}


#footer_inner {
	padding:			.5em 10em;
	text-align:			center;
	}
	
#footerNav{
	text-align:			center;
	list-style:			none;}
		
#footerNav li{
	display:			inline;
	margin:				10px;
	padding:			0 20px 0 0;}
				
#footerNav li.borderFoot{
	border-right:		thin solid #322b2b;}
				
#footerNav li a, #footer_inner a{
	text-decoration:		none;
	color:					#4a8aad;}
	
#footerNav li a:hover, #footer_inner a:hover{
	color:					#36475b;
	text-decoration:		underline;}		
	
#footer_inner #copyright{
	font-size:				.7em;}


#nav_inner, #content_inner, #promo_inner {
	overflow:hidden; /* prevents oversize elements from breaking the layout */
	}
/*ALL PAGES BUT HOME PAGE STYLING_ MIDDLE NAV BAR*/

#contentNav{
	text-decoration:		none;
	font-weight:			normal;
	font-size:				.9em;
	color:					#4a8aad;}
	
#contentNav li.dir a{
	text-decoration:		none;
	margin:					0;
	color:					#4a8aad;}
	
ul#contentNav ul li{
	background-image:		url(../images/conNavBack.gif);
	background-repeat:		repeat-x;
	width:					100px;}
	
ul#contentNav ul li.hover,
ul#contentNav ul li:hover{
	background-image:		url(../images/topNavBack.png);
	background-repeat:		repeat-x;
	background-color:		#ffffff;}
	
#contentNav li.dir.hover,
#contentNav li.dir:hover{
	font-weight:			normal;}
	
#contentNav li.dir a.hover,
#contentNav li.dir a:hover{
	color:					#36475b;
	font-weight:			normal;}
	
#contentNav li.dir a.active{
	color:					#36475b;
	font-weight:			bold;}
	
/*RESEARCH HMPG DID YOU KNOW STYLING*/

ul.didKnowList{
	font-size:				.9em;}	

ul.didKnowList li{
	list-style-type:		disc;
	list-style-position:	inside;
	font-size:				.9;
	color:					#4a8aad;
	margin:					0 0 0 20px;
}

/*RESEARCH HMPG MIDDLE CONTENT STYLING*/
	
img#humpbackPic{
	float:					right;
	padding:                0 .5em .5em .5em;}	
	
#content_inner p{
	font-size:				.9em;}
	
	
ul.midContentList li{
	list-style-type:		disc;
	list-style-position:	inside;
	font-size:				.9em;
	margin:					0 0 0 20px;
}
	
/*GALLERY IMAGES STYLING*/

.galleryImages a img{
	border:					none;
	margin:					5px;}
	
.galleryImages{
	width:					466px;
	border:					4px solid white;}
	
/*ACTION PAGE STYLING*/

#actionCol1, #actionCol2{
	width:				50%;
	float:				left;
	position:			relative;
	z-index:			0;}
	
#actionCol1 #question1, #actionCol2 #question2, #actionCol1 #question3, #actionCol2 #question4, #actionCol1 #question5, #actionCol2 #question6{
	border:				2px solid #4a8aad;
	background-color:	white;
	padding:			5px;
	margin:				5px 5px 10px 5px;
	width:				auto;
	height:				120px;}
	
	
#question1 h5, #question2 h5, #question3 h5, #question4 h5, #question5 h5, #question6 h5 {
	margin-bottom:		5px;}
	
#question1 .bWhaleWeigh, #question2 .oceanPer, #question3 .sWhaleDive,  #question4 .hCalves, #question5 .kLeap, #question6 .food {
	margin-right:		10px;}
	
#newRight{
	background-image:	url(../images/correct.jpg);
	width:				510px; 
	height:				360px; 
	display:			none;
	position:			absolute;
	top:				250px;
	left:				410px;
	z-index:			10;}
	
#newWrong{
	background-image:	url(../images/wrong.jpg);
	width:				510px; 
	height:				344px; 
	display:			none;
	position:			absolute;
	top:				250px;
	left:				410px;
	z-index:			10;}
	
#newRight a, #newWrong a{
	position:			absolute;
	top:				310px;
	left:				440px;
	color:				white;
	text-decoration:	none;}
	
#newRight a:hover{
	text-decoration:	underline;
	color:				#36475b;
	font-weight:		bold;}
	
#newWrong a:hover{
	text-decoration:	underline;
	color:				#36475b;
	font-weight:		bold;}
	
#sideNews img#breechWhale{
	margin-bottom:		10px;}
	
/*STAFF PAGE STYLING*/

ul#hiddenBios li {
	list-style:			square;
	padding:			0 5px;
	font-size:			.9em;}
	
ul#hiddenBios li a {
	color:					#4a8aad;
	text-decoration:		none;
	font-size:				1.1em;}
	
ul#hiddenBios li a:hover {
	color:					#36475b;
	text-decoration:		underline;}		
	
#div1,#div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14 {
	width:				250px;
	height:				240px;
	float:				right;
	margin:				0 5px 5px 5px;
	padding: 	 	 	5px;
	}
	
.staffImage {
	float:				right;
	margin:				0 0 3px 5px;}
	
#advisors, #directors{
	width:				50%;}
	

	
#others #advisors{
	margin:				0 0 0 15px;}
	
/*CONTACT PAGE STYLING*/

#content_inner #contactinfo{
	margin:				0 0 0 5px;}
	
#content_inner #contactForm{
	margin:				0 0 0 5px;}

#content_inner #contactForm #form{
}


#content_inner #contactForm .subLable {
	color:				#444444;
	display:			block;
	margin-top:			2px;
	margin-bottom:		5px;
	font-size:			12px;
	line-height:		15px;
}
/*----------ABOUT-HEADQUARTERS PAGES STYLING----------*/

#hqpfimg {
	float:				right;
	margin-left:		15px;
	}
	
#histpfimg {
	float:				left;
	margin-right:		15px;
	}
	
/*----------SHOP WHALE STYLING----------*/

#content_inner .shoptext{
	font-size:			.8em;}
	
#content_inner #adaptWhale img{
	float:				right;
	margin:				5px;}
	
#content_inner .shoptitle{
	border-bottom:		dashed thin black;}
	
#content_inner #shopcd img, #content_inner #shopdvd img, #content_inner #shopcards img{
	float:				left;
	margin:				5px;}
	
/*----------MEMBERSHIP STYLING----------*/

#content_inner ul.midContentList .littlelist{
	font-size:			.9em;}
	
/*----------WHATS NEXT STYLING----------*/
#sideNews #changemind{
	float:				right;
	margin:				5px;}

/*------------------------------VIDEO STYLING-------------------------------*/

.video {
	border:				4px solid white;
	height:				324px;
	width:				576px;
	padding:            0;
	margin:				0 auto;

	}

/*----------------------------IMAGE PAGE STYLING---------------------------*/

.imgpagetext {
	width:				400px;

	}

.imgpagepic {
	float:				left;
	margin-right:		12px;
	}
	
/*----------------------------NEWS PAGE STYLING---------------------------*/

.newspic {
	float:				right;
	padding:			15px;
	width:              225px;
	}
	
a.newspic{
	border:				none;}

.date {
	font-style:			italic;
	border-bottom:		1px dashed #322b2b;
	width:				325px;
	margin-bottom:		10px;
	font-size:			.9em;
	}
	
.date2{
	font-style:			italic;
	width:				540px;
	margin-bottom:		5px;
	margin-top:			-10px;
	font-size:			.9em;}
	
/*----------------------------SOUNDS PAGE STYLING---------------------------*/

	

#content_inner table#soundsPage tr{
	height:				25px;}
	
#content_inner table#soundsPage tbody tr td{
	width:				200px;}

/*----------------------------SITE MAP PAGE STYLING---------------------------*/

				
.siteMapList01 {
	font-size:			 .9em;
	margin-left: 		2em;
	list-style-type:	 none;
	color:				 #4a8aad;}
				
.siteMapList02 {
	list-style-type:		circle;
	font-size:				.9em;	
	margin-left:			4em;
	color:					 #4a8aad;}
				
#siteMapColumnLeft {
	width:					 50%;
	float: 					left;}
				
#siteMapColumnRight {
	float:					 right;
	width: 					50%;}
	
/*----------------------------SITE MAP PAGE STYLING---------------------------*/

.contribute{
	font-size:				.9em;}