/* ==================== */
	/*   TEMPLATE CLASSES   */
	/* ==================== */
 
	/* ************************************ */
	/* MOBILE READY, STICKY FOOTER WEB SITE */
	/* ************************************ */

	html {
		height: 100%;
	}

	html, body {
		margin: 0;
		padding: 0;
		border: 0;
	}

	body {
		position: relative;
		height: 100%;
		/* padding-bottom: 100px;    Bottom padding needed so that content will clear the footer;  Create padding using second footer image in text content area; */
		box-sizing: border-box;
		text-align: center;
		overflow-x: hidden;
		overflow-y: scroll;
		opacity: 1;
		transition: 2s opacity;
		z-index: 0;
	}

	.fade-out {
	    opacity: 0;
	    transition: none;
	}

	.header-block {
		position: relative;
		width: 100%;
	}

	.body-block {
		position: relative;
		width: 100%;
	}

	p {
		padding: 0px 15px 0px 15px;
	}

	.sticky-footer-block {
		position: fixed;
		bottom: -1px;
		/* height: 100px;    The footer image now creates the height of the footer; */
		width: 100%;
		z-index: 2;
	}

	#menu-icon {
		position: absolute;
		top: 30px;
		left: 300px;
		width: 25px;
		z-index: 3
	}


	@media ( min-width: 441px) {
		.desktop {
			display: initial;
		}
		.mobile {
			display: none;
		}
		.img-full {
			display: inline;
			width: 100%;
			max-width: 867px;
			border: 0px;
		}
		.navigation-area {
			width: 100%;
			max-width: 867px;
			text-align: center;
			margin: 0 auto;
		}
		.content-area {
			width: 100%;
			max-width: 867px;
			text-align: left;
			margin: 0 auto;
		}
		#msg-panel {
			width: 375px;
		}
	} 

	@media (max-width: 440px) {
		.desktop {
			display: none;
		}
		.mobile {
			display: initial;
		}
		.img-full {
			display: inline;
			width: 100%;
			max-width: 425px;
			border: 0px;
		}
		.navigation-area {
			width: 100%;
			max-width: 425px;
			text-align: center;
			margin: 0 auto;
		}
		.content-area {
			width: 100%;
			max-width: 425px;
			text-align: left;
			margin: 0 auto;
		}
		#msg-panel {
			width: 100%;
		}
	} 

	.hide {
		display: none;
	}
	.show {
		display: initial;
	}

	.place-holder {
		visibility: hidden;
	}

	/* ******************* */
	/*    THE MAIN MENU    */
	/* ******************* */

#main-menu {
	/* position: relative; */
	width: 100%;
	max-width: 861px;
	text-align: center;
	font: 600 1.6rem/1.64 Arial;
	letter-spacing: 0.1rem;
	background-color: #336666;
	margin: 12px auto 12px; 
  	/* border-bottom: solid 1px #306161; */
 	/* border-top: solid 1px #306161; */
	border: 0;
	padding: 0px;
}

#main-menu ul {
	width: 100%;
	background-color: #336666;
	margin: 0px -3px 0px -3px;
	border: solid 2px #2f5959;
	padding: 0px;
}

#main-menu ul li {
	display: inline;
	margin: -2px -5px -2px -4px;
}

#main-menu ul li a {
	color: #cccccc;
	text-decoration: none;
	border-left: solid 1px #bbbbbb;
	padding-left: 2%;
	padding-right: 2%;
}

#main-menu ul li a:link {
	color: #cccccc;
	background-color: #336666;
	border-left: solid 1px #bbbbbb;
}

#main-menu ul li a:visited {
	color: #cccccc;
	background-color: #336666;
	border-left: solid 1px #bbbbbb;
}

#main-menu ul li a:hover {
	color: #ffffff;
	background-color: #669999;
	border-left: solid 1px #bbbbbb;
}

#main-menu ul li a:active {
	color: #ffffff;
	background-color: #669999;
	border-left: solid 1px #bbbbbb;
}

#main-menu ul li#last a {
	border-left: solid 1px #bbbbbb;
	border-right: solid 1px #bbbbbb;
	padding-left: 2%;
	padding-right: 2%;
}


	/* ********************* */
	/*    THE MOBILE MENU    */
	/* ********************* */

	#menu-panel {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 10
	}

	#menu-close {
		position: absolute;
		left: 250px;
		top: 6px;
		width: 25px;
		height: 25px;
		z-index: 12;
	}

	#menu-title {
    	position: absolute;
		left: 31px;
		top: 24px;
		width: 200px;
		height: 30px;
		font: 600 1.6rem/1.64 Arial;
		z-index: 12;
	}

	#menu-content {
    	position: absolute;
		left: 31px;
		top: 75px;
		width: 232px;
		height: 395px;
		border: 0px;
		font: 500 1.6rem/1.64 Arial;
		z-index: 12;
	}


	/* ************** */
	/*  CONTENT AREA  */
	/* ************** */

	.content-area {
		font: 500 1.6rem/1.64 Arial;
		color: #000000;
		letter-spacing: 0.1rem;
	}

	.content-narrow {
		width: 98%; 
		max-width: 601px; 
		margin: 0 auto;
		border: 0px;
		/* border: solid 1px #2f5959; */
	}

	.text-col { 
		display: inline-block;
		text-align: left; 
		vertical-align: text-top;
		width: 100%; 
		max-width: 295px; 
		margin: 0 auto;
		border: 0px;
		/* border: solid 1px #2f5959; */
	} 

	@media ( min-width: 851px) {
		.img-half {
			display: inline;
			width: 50%;
			max-width: 425px;
			border: 0px;
		}
	} 

	@media (max-width: 850px) {
		.img-half {
			display: inline;
			width: 100%;
			max-width: 425px;
			border: 0px;
		}
	} 

	.navigation-area {
		font: 600 1.6rem/1.64 Arial;
		letter-spacing: 0.1rem;
	}

	.float-right { 
		float: right; 
		max-width: 47%;
		padding: 0 0 0 2%; 
	} 

	.float-left { 
		float: left; 
		max-width: 47%;
		padding 0 2% 0 0; 
	} 

	.float-center { 
		width: 100%;
		text-align: center; 
	} 

	.text-col-narrow { 
		display: inline-block;
		text-align: left; 
		vertical-align: text-top;
		width: 100%; 
		max-width: 275px; 
		margin: auto;
		border: 0px; 
	} 

	/* ************************* */
	/*  CONTENT AREA - info-box  */
	/* ************************* */

.info-box { 
	width: 100%;
	max-width: 158px;
	text-align: center;
	font: normal Bold 1.5rem/1.54 Arial;
	background-color: #ffffff; 
	border: 1px solid #999999; 
	margin: 0px 10px 0px 10px;
} 

.info-box h1{ 
	width: 100%;
	text-align: center; 
	font: normal Bold 1.6rem/1.64 Arial;
	vertical-align: text-middle;
	color: #ffffff; 
	background-image: url('http://www.appilistic.com/images/gray_grad_bg.gif'); 
	background-repeat: repeat-x; 
	background-color: #ffffff; 
	border: 0px; 
	margin-top: 0px;
} 

.info-box IMG { 
	max-width: 100%;
	border: 0px;
} 

.info-box ul { 
	margin-bottom: 0px; 
	margin-left: 0px; 
	margin-right: 0px;
	padding-bottom: 0px; 
	padding-left: 1%; 
	padding-right: 1%;
 }

.info-box li { 
	list-style-type: none; 
	margin-left: 0px; 
	margin-right: 0px; 
	padding-left: 1%; 
	padding-right: 1%;
 } 

.info-box li div { 
	padding-bottom: 6px;
} 
	/* *************** */
	/*  PHOTO GALLERY  */
	/* *************** */

	.gallery {
		width: 100%;
		text-align: center;
	}

	.inline { 
		display: inline-block;
		max-width: 95%;
		margin-top: 6px;
	} 

	.inline IMG{ 
		max-width: 100%; 
		border: 0px;
	} 


	/* ************************* */
	/*  MESSAGE PANEL STRUCTURE  */
	/* ************************* */

	#msg-panel {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 20
	}


	#msg-close {
		position: absolute;
		left: 88%;
		top: 1%;
		width: 11%;
		z-index: 21;
	}

	#msg-title {
    	position: absolute;
		left: 0px;
		top: 50px;
		width: 100%;
		font: 600 1.6rem/1.64 Arial;
		z-index: 21;
	}

	#msg-content {
    	position: absolute;
		left: 0px;
		top: 100px;
		width: 100%;
		text-align: left;
		/* padding: 0px 30px 0px 30px; */
	  	/*border: solid 1px #000000; */
		border: 0px;
		font: 500 1.6rem/1.64 Arial;
		z-index: 21;
	}

	/* ************** */
	/*     FOOTER     */
	/* ************** */

	.footer { 
		position: relative; 
		width: 100%;
		max-width: 867px;
		color: #ffffff; 
		text-align: center; 
		font: 300 1.5rem/1.64 Tahoma;
		background-color: #336666;
		/* background-image: url('https://www.cpeforum.org/library/img/green_grad_bg.gif'); */
		/* background-repeat: repeat-x; */
		padding: 2px 0 2px 0;
		margin: 0 auto 0;
	} 

	/* ************* */
	/*     LINKS     */
	/* ************* */


	a {
		cursor: pointer;
	}

	a.menu:link { color: #0000ff; }
	a.menu:visited { color: #0000ff; }
	a.menu:hover { color: #666666; }
	a.menu:active { color: #666666; }

	a.clickable:link { color: #0000ff; }
	a.clickable:visited { color: #0000ff; }
	a.clickable:hover { color: #666666; }
	a.clickable:active { color: #666666; }

	#tickerbar { 
		font: 600 1.8rem/1.64 Arial;
		width: 92%;
		max-width: 800px;
		margin: 0 auto;
	  	/*border: solid 1px #0000FF; */
	}
	a.ticker:link {
		color: #6666ff;
		text-decoration: none;
	}
	a.ticker:visited { 
		color: #6666ff;
		text-decoration: none;
	}
	a.ticker:hover {
		color: #999999;
		text-decoration: none;
	}
	a.ticker:active { 
		color: #999999;
		text-decoration: none;
	}