body					{background-position: center top;
						background-image: url(../ocean/coastbg.jpg);
						background-repeat: no-repeat;
						background-color: #3775a4;
						margin: auto;
						padding: 0px;
						}

#frame					{text-align: left;
						width: 930px;
						margin: auto;
						z-index: 1;
						padding: 0px;
						}
						
#top					{text-align: left;
						width:930px;
						height: 116px;
						background-image: url(../ocean/whalecoasthead.jpg);
						background-repeat: no-repeat;
						margin: 0px;
						padding: 0px;
						}
						
#logo					{position: absolute;
						width: 406px;
						height: 79px;
						margin-top: 22px;
						margin-left: 14px;
						}
						
#minimenu				{position: absolute;
						text-align: right;
						width: 450px;
						margin-top: 16px;
						margin-left: 350px;
						font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #517bab;
						z-index: 2;
						}
						
	#minimenu a	{
		font-family: verdana, trebuchet ms, arial;
		font-size: 11px;
		color: #517bab;
		text-decoration: none;
	}
	
	#minimenu a:hover	{
		font-family: verdana, trebuchet ms, arial;
		font-size: 11px;
		color: #8faed3;
		text-decoration: none;
	}
	
#searcharea	{
	position: absolute;
	text-align: left;
	width: 248px;
	margin-top: 45px;
	margin-left: 652px;
	font-family: verdana, trebuchet ms, arial;
	font-size: 11px;
	color: #517bab;
	z-index: 2;
}

#socialmedia	{
	position: absolute;
	text-align: right;
	width: 100px;
	margin-top: 16px;
	margin-left: 800px;
	font-family: verdana, trebuchet ms, arial;
	font-size: 11px;
	color: #517bab;
	z-index: 2;
}

#icons	{
	position: absolute;
	text-align: right;
	width: 450px;
	margin-top: 80px;
	margin-left: 450px;
	font-family: verdana, trebuchet ms, arial;
	font-size: 11px;
	color: #517bab;
	z-index: 2;
}


						
#menu					{position: absolute;
						text-align: left;
						width: 930px;
						height: 40px;
						background-image: url(../ocean/menuoverstrand.jpg);
						background-repeat: no-repeat;
						margin-top: 117px;
						margin-left: 0px;
						font-family: verdana, trebuchet ms, arial;
						font-size: 13px;
						color: #517bab;
						z-index: 2;
						}
						
	#menu a	{
		font-family: verdana, trebuchet ms, arial;
		font-size: 13px;
		color: #517bab;
		text-decoration: none;
	}
	
	#menu a:hover	{
		font-family: verdana, trebuchet ms, arial;
		font-size: 13px;
		color: #8faed3;
		text-decoration: none;
	}
						
#overstrandcontent		{position: absolute;
						text-align: left;
						width: 930px;
						margin-top: 336px;
						margin-left: 0px;
						font-family: verdana, trebuchet ms, arial;
						font-size: 13px;
						color: #517bab;
						z-index: 1;
						}
						
#flashcontent_container {position: absolute;
						text-align: left;
						width: 900px;
						height: 690px;
						margin-top: 355px;
						margin-left: 15px;
						z-index: 2;
						}
						
#flashbg				{position: absolute;
						width: 928px;
						height: 295px;
						margin-left: 0px;
						margin-top: 156px;
						z-index: 2;
						}
			
#flash					{position: absolute;
						width: 928px;
						height: 295px;
						margin-left: 0px;
						margin-top: 157px;
						z-index: 2;
						}
						
#map					{position: absolute;
						width: 328px;
						height: 239px;
						margin-left: 575px;
						margin-top: 473px;
						z-index: 2;
						}
						
#video					{position: absolute;
						width: 310px;
						height: 210px;
						margin-left: 606px;
						margin-top: 1050px;
						z-index: 3;
						}
			
#panelbgcolor			{background-color: #eadac7;
						}
						
.contentbgcolor			{background-color: #598db4;
						}
						
.bodytext				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #1b3c64;
						}
						
.bodylink				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #517bab;
						text-decoration: none;
						}
						
.bodylink:hover			{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #8faed3;
						text-decoration: none;
						}
						
.bodytext2				{font-family: verdana, trebuchet ms, arial;
						font-size: 13px;
						color: #517bab;
						}
						
.bodylink2				{font-family: verdana, trebuchet ms, arial;
						font-size: 13px;
						color: #517bab;
						text-decoration: none;
						}
						
.bodylink2:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 13px;
						color: #8faed3;
						text-decoration: none;
						}
						
.bodytext3				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						}
						
.bodylink3				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: none;
						padding: 6px;
						background-color: #97b7cf;
						}
						
.bodylink3:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: none;
						padding: 6px;
						background-color: #a6c5dc;
						}
						
.bodytext4				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						}
						
.bodylink4				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: underline;
						}
						
.bodylink4:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: none;
						}
						
.bodytext5				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #634118;
						}
						
.bodylink5				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #634118;
						text-decoration: none;
						}
						
.bodylink5:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #957752;
						text-decoration: none;
						}
						
.bodytext6				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #ffffff;
						}
						
.bodylink6				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #ffffff;
						text-decoration: underline;
						}
						
.bodylink6:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #ffffff;
						text-decoration: none;
						}
						
.bodytext7				{font-family: verdana, trebuchet ms, arial;
						font-size: 10px;
						color: #ffffff;
						}
						
.bodylink7				{font-family: verdana, trebuchet ms, arial;
						font-size: 10px;
						color: #ffffff;
						text-decoration: none;
						}
						
.bodylink7:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 10px;
						color: #ffffff;
						text-decoration: underline;
						}
						
.bodytext8				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						}
						
.bodylink8				{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: none;
						}
						
.bodylink8:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 12px;
						color: #ffffff;
						text-decoration: underline;
						}
						
.bodytext9				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #1b3c64;
						}
						
.bodylink9				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #1b3c64;
						text-decoration: none;
						}
						
.bodylink9:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #517bab;
						text-decoration: none;
						}
						
.footer					{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #a1c6e2;
						}
						
.footerlink				{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #a1c6e2;
						text-decoration: underline;
						}
						
.footerlink:hover		{font-family: verdana, trebuchet ms, arial;
						font-size: 11px;
						color: #a1c6e2;
						text-decoration: none;
						}
						
.heading				{font-family: verdana, trebuchet ms, arial;
						font-size: 18px;
						color: #1b3c64;
						}
						
.feature				{border: solid 1px #3775a4;
						}
						
.feature:hover			{border: solid 1px #ffffff;
						}
						
.directorybg			{background-color: #a6c5dc;
						}
						
.mainpic				{border: solid 1px #ccd4da;
						margin: 5px;
						padding: 2px;
						background-color: #e1e5e9;
						}
						
.pagetop				{border-bottom: 1px solid #ffffff;
						}
						
.pagebottom				{border-top: 1px solid #ffffff;
						}
						
.spiffy					{display:block;
						}

.spiffy 			  *{display:block;
						z-index: 3;
  						height:1px;
  						overflow:hidden;
						font-size:.01em;
  						background:#a6c5dc;
						}
						
.spiffy1				{margin-left:3px;
						margin-right:3px;
						z-index: 3;
						padding-left:1px;
						padding-right:1px;
						border-left:1px solid #a6c5dc;
						border-right:1px solid #a6c5dc;
						background:#a6c5dc;
						}
						
.spiffy2				{margin-left:1px;
  						margin-right:1px;
  						z-index: 3;
  						padding-right:1px;
  						padding-left:1px;
						border-left:1px solid #a6c5dc;
  						border-right:1px solid #a6c5dc;
 						background:#a6c5dc;
						}
						
.spiffy3				{margin-left:1px;
						margin-right:1px;
						z-index: 3;
						border-left:1px solid #a6c5dc;
						border-right:1px solid #a6c5dc;
						}
						
.spiffy4				{z-index: 3;
						border-left:1px solid #a6c5dc;
						border-right:1px solid #a6c5dc;
						}
						
.spiffy5				{z-index: 3;
						border-left:1px solid #a6c5dc;
						border-right:1px solid #a6c5dc;
						}
						
.spiffyfg				{z-index: 3;
						background:#a6c5dc;
						padding: 8px;
						color: #ffffff;
						font-size: 13px;
						}
						
.spiffywhite			{display:block;
						}

.spiffywhite		  *{display:block;
						z-index: 3;
  						height:1px;
  						overflow:hidden;
						font-size:.01em;
  						background:#ffffff;
						}
						
.spiffy1white			{margin-left:3px;
						margin-right:3px;
						z-index: 3;
						padding-left:1px;
						padding-right:1px;
						border-left:1px solid #ffffff;
						border-right:1px solid #ffffff;
						background:#ffffff;
						}
						
.spiffy2white			{margin-left:1px;
  						margin-right:1px;
  						z-index: 3;
  						padding-right:1px;
  						padding-left:1px;
						border-left:1px solid #ffffff;
  						border-right:1px solid #ffffff;
 						background:#ffffff;
						}
						
.spiffy3white			{margin-left:1px;
						margin-right:1px;
						z-index: 3;
						border-left:1px solid #e3d7c9;
						border-right:1px solid #e3d7c9;
						}
						
.spiffy4white			{z-index: 3;
						border-left:1px solid #ffffff;
						border-right:1px solid #ffffff;
						}
						
.spiffy5white			{z-index: 3;
						border-left:1px solid #ffffff;
						border-right:1px solid #ffffff;
						}
						
.spiffyfgwhite			{z-index: 3;
						background:#ffffff;
						padding: 8px;
						color: #a6c5dc;
						font-size: 13px;
						}
						
#hermanuswhattodo		{display:none}
#hermanuswheretostay	{display:none}
#hermanusbusiness		{display:none}
#hermanuslivinghere		{display:none}
#hermanusgettinghere	{display:none}

#stanfordwhattodo		{display:none}
#stanfordwheretostay	{display:none}
#stanfordbusiness		{display:none}
#stanfordlivinghere		{display:none}
#stanfordgettinghere	{display:none}

#hangklip-kleinmondwhattodo		{display:none}
#hangklip-kleinmondwheretostay	{display:none}
#hangklip-kleinmondbusiness		{display:none}
#hangklip-kleinmondlivinghere	{display:none}
#hangklip-kleinmondgettinghere	{display:none}

#gansbaaiwhattodo		{display:none}
#gansbaaiwheretostay	{display:none}
#gansbaaibusiness		{display:none}
#gansbaailivinghere		{display:none}
#gansbaaigettinghere	{display:none}

#allregion				{display:none}
#hermanusregion			{display:none}
#stanfordregion			{display:none}
#gansbaairegion			{display:none}
#hangklip-kleinmondregion	{display:none}

#all					{display:none}
#kleinmond				{display:none}
#bettysbay				{display:none}
#pringlebay				{display:none}
#rooiels				{display:none}

#latestnews					{display:block}
#businessnews				{display:none}
#communitynews				{display:none}
#environmentalnews			{display:none}
#leisurenews				{display:none}

#upcomingevents				{display:block}
#hermanusevents				{display:none}
#stanfordevents				{display:none}
#gansbaaievents				{display:none}
#kleinmondevents			{display:none}

table.fail					{border: #ea0b0b 1px solid;
							}
							
td.fail						{background-color: #ffb8b8;
							color: #ea0b0b;
							font-family: verdana, trebuchet ms, arial;
							font-size: 11px;
							}
							
table.success				{border: #1ba200 1px solid;
							}
							
td.success					{background-color: #bff7b4;
							color: #1ba200;
							font-family: verdana, trebuchet ms, arial;
							font-size: 11px;
							}