/*Reset*/
/*Stylesheet*/
/*Global*/
		body {	background-color:#B1A6A4;}
/*Headings*/
		H1, H2, H3, H4 {
	font-family:"Arial Black", Gadget, sans-serif;
	font-weight:normal
}
		H1		{
			color:#413F3D;
			font-size:18px;
			border-bottom:#CCC 1px solid}
			
		H2		{	font-size:15px;
			color:#413f3d;
			text-align:center;
			border-bottom: 1px #000 solid;
			border-color:#CCC; }
			
		H3	{color:#425E91; 
			font-family:"Arial Black", Gadget, sans-serif; 
			font-size:14px; text-align:left;}
		
		
		H4  {
	color:#636;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:13px;
}
		
/*Text Elements*/
		
		.footertext  {
			font-size:8px;
			text-align:center;}
		
		p		{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#000;
	text-align:left;
}
		P1		{
			font-family:Verdana, Geneva, sans-serif;
			color:#C33;}
			
		p2		{
			font-family:Verdana, Geneva, sans-serif;
			color:#C33;
			font-weight:bold;}
				
		a
		a: link 	{color:#030;}
		a: visited	{color:#603}
		a: active	{color:#666}
		a: focus 	{color:#666}
		a:hover		{
			color:f00;
			top: 15px;
			clip: rect(15px,auto,auto,auto);} 

/*Images*/
		img {width:100%;}
		.socimg {width:30px;}
		
/*LOGO */
		#logo {
			float:left;
			width:300px;
			padding: 5px 0px 0px 0px;;
}


/*SOCIAL MEDIA*/
		
/*TOP NAV*/
		#topnav {
			clear:both;
			text-align:center;
			font-family:Arial, Helvetica, sans-serif;}
				
		#topnav ul {
			border-top:1px #CCC solid;
			border-bottom: 1px #ccc solid;
			font-weight: bold;
			padding:  5px 2px 2px 2px;}
					
		#topnav ul li {
			display:inline; 
			padding: 15px 5px 5px 5px; }
		
		#topnav ul li a {
			padding: 5px 5px 0px 5px; 
			text-decoration:none;}
		#topnav	a:link 	{
			color: #413f3d;
			top: 15px;
			clip: rect(15px,auto,auto,auto);}
		#topnav	a:visited	{
			color:#413f3d;
			top: 15px;
			clip: rect(15px,auto,auto,auto);}
		#topnav	a:active	{
			color:#413f3d;
			top: 15px;
			clip: rect(15px,auto,auto,auto);}
		#topnav	a:focus 	{
			color:#413f3d;
			top: 15px;
			clip: rect(15px,auto,auto,auto);}
		#topnav	a:hover		{
			color:#b1a6a4;
			font-weight: bold;
			clip: rect(15px,auto,auto,auto);
			top: 15px;}

/*BANNER BIBLE VERSE*/
		#banner {margin-left:auto; margin-right:auto;}

		#bibleverse {
			width:auto; 
			float:right; 
			font-family:Arial, Helvetica, sans-serif; 
			font-size:10pt; background-color:B299C0; 
			padding:5px; 
			text-align:center; 
			color:#000 }
		
/*CONTENT*/
		#content {
			width:600px; 
			float:left;
			margin:1px;
			font-family:Arial, Helvetica, sans-serif;}

/*RIGHT NEWS BAR*/
		#right-nav	{
			width:250px; 
			float:right; 
			background-color:#b1a6a4; 
			padding:4px;
			margin:5px;}
/*FOOTER*/
		#footer {
			clear:both; 
			text-align:center; 
			border-top:1px #CCC solid; 
			padding:4px;  
			padding-bottom:20px;}

/*CONTAINERS*/
		#outer {
			width:960px;
			background-color:#f2f1ef;
			margin-top: 0px;
			margin-right: auto;
			margin-bottom: 0px;
			margin-left: auto;}
		#wrapper { 
			width:900px;
			margin:0px 30px;
			background-color:#f2f1ef;}
/*LISTS*/
		li	{
			display:block; }
		ol	{
			display:block; }

/*Contact box*/
		textarea {
			width:350px;
			margin-left:5px;
			margin: 0 0 0 0px;
			border:1px 	#bbb solid;
			padding:0px;
			background:none;
			float: none; 
			display:inline;
			margin-left:5px;}
		input {
			width:250px;
			border:1px 	#bbb solid;
			background:none;
			margin-left:5px;}
		input:focus, textarea:focus  {
			background-colour:#C99;
			display:inline;}
		#commentForm {
			display:inline;}	
		select { 
			float:left;}		
		#formbox {
			margin:0px;}		
		.submit {
			width:300px; 
			height:25px;
			margin-left:5px;
			font-size:12px;}
		br {
			clear:left;}
		.clear  {
			clear:both;}
		
/*Miscellaneous*/
		.date {font-weight:bold; font-size:14px;color:#413f3d} 

/*Activities Boxes*/


/* ----------------------ACTIVITY BOX----------------------------*/
		#box1 {
			float:left;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}	
		#box2 {
			float:right;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}	
		#box3 {
			float:left;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}
		#box4 {
			float:right;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}	
		#box5 {
			float:left;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}	
		#box6 {
			float:right;
			width:400px;
			padding:0px 0px 0px 0px;
			margin:5px;
			border-top: 8px #697184 solid;
			background-color:#d8cfd0;}	

/* ----------------------ACTIVITY BOX BACKGROUND----------------------------*/
		.act-box1 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/Toddlersthumb3.jpg) no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
		.act-box2 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/SundaySchool3.jpg)no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
		.act-box3 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/Juniorthumb3.jpg) no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
		.act-box4 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/YoungPeoplethumb3.jpg) no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
		.act-box5 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/W2Wthumb3.jpg) no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
		.act-box6 {
			float:right;
			display:inline;
			height:100px;
			background:url(../images/Thumbs/Bethanythumb3.jpg) no-repeat left;
			background-repeat:no-repeat;
		  	background-size: contain;
			padding:-10px 0px -50px 0px;
			width:100%;
			cursor:pointer;}	
						
/* ----------------------ACTIVITY LIST FORMATTING----------------------------*/

		#box1 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}
		#box2 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}
		#box3 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}
		#box4 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}
		#box5 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}
		#box6 ol li {
			overflow:hidden;
			font:Arial, Helvetica, sans-serif; font-style:normal;
			font-size:16px;
			text-align:center;			
			height:0px; 
			width:100%;
			padding: 10px 0px 0px 0px;
			margin: 0px 0px 10px -20px;}

/* ----------------------ACTIVITY 7----------------------------*/

		#box1 ol li.open {float:left;
			height:auto;
			width:100%;}
		#box2 ol li.open {float:left;
			height:auto;
			width:100%;}
		#box3 ol li.open {float:left;
			height:auto;
			width:100%;}
		#box4 ol li.open {float:left;
			height:auto;
			width:100%;}
		#box5 ol li.open {float:left;
			height:auto;
			width:100%;}
		#box6 ol li.open {float:left;
			height:auto;
			width:100%;}

/* ----------------------MOBILE PHONE ----------------------------*/

@media (max-width:480px) {

/* Top Nav, MENU - Mobile */
		#topnav {clear:none; 
			width:40%; 
			display:block; 
			float:right; 
			padding:0px 30px 0px 0px;}
		.burger-nav { float:right;
			display:inline;
			height:30px; 
			width:50%;
			background:url(../images/Banner/menuburger.jpg) no-repeat center;
			cursor:pointer;
			padding:0px 0px 0px 0px;}
		nav ul {float:right;
			overflow:hidden; 
			background-color:#F2F1EF;
			height:0;}
		nav ul.open{float:left;
			height:auto;}
		nav ul li {float:none;
			text-align:right;
			width:40%;
			margin:0px 0px 0px 0px;}
		nav ul li a {
			color:	#fff;
			padding:10px;
			border-bottom: 1px solid #ccc;
			display:block;
			margin:0px 0px 0px 0px;}
		#topnav ul{width:100%; 
			float:none; 
			display:inline-block; 
			margin:0px; 			
			border-top:none;
			border-bottom: none;}
		#topnav ul li{
			width:100%; 
			float:none;
			display:inline-block; 
			padding:5px 2px 5px 0px;}
		.popup	{
			width:40%; 
			float:right; 
			text-align:center;}
		.wrapper {	float:right;
			width:40%; 
			padding:0px;}
/* CONTAINERS- Mobile */
		body {	width:100%; 
				padding:0px 0px 0px 0px ; 
				margin:0px 0px 0px 0px;}
		#outer {width:100%; 
				padding:0px 0px 0px 0px;  
				margin:0px 0px 0px 0px;
				float:none; }
		#wrapper {width:95%;  
			 	padding:2px 1px 2px 1px; 
				margin:0px 0px 0px 0px; 
				float:none;}

	/* LISTS- Mobile */
		li { 	width:100%; 
				margin:20px 5%;}
		ol {	display:inline;}


/* TEXT - Mobile */	
		.H1 {font-size:50px;}

/* LOGO - Mobile */
		#logo {	float:left; 
				width:50%; 
				display:inline;
				padding:5px 0px 0px 0px;
				margin: 0px 0px 0px 0px;}
	
/* BANNER BIBLE VERSE - Mobile */
		#banner {
				width:100%; 
				padding:80px 0 0 0;}
		#bibleverse {
				width:100%; 
				text-align:center;
				margin:0px;}

/* SOCIAL MEDIA - Mobile */


/*FIXED HEADER - Mobile*/	
	
							/* Style the header */
		.header { position:fixed;
				  padding: 1px 1px;
				  background:#F2F1EF;
				  color:#F2F1EF;
				}
		
							/* The sticky class is added to the header with JS when it reaches its scroll position */
		.sticky {
				  position: fixed;
				  top: 20px;
				  width: 100%;
				}
			
							/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
		.sticky + .content {
				  padding-top: 0px;}

/* CONTENT - Mobile */
		#content {
				width:100%; 
				float:none; 
				padding:2px 2px 2px 2px; 
				margin:2px 2px 2px 2px;}


/* RIGHT NEWS PANEL - Mobile */

	#right-nav { float:left; 
				width:100%; 
				text-align:center; 
				margin:8px; 
				background-color:none;
				padding:4px; }

/* FOOTER - Mobile */
	#footer {	width:100%;}
		
/* Contact form*/

	textarea {
			width:80%;}
	input {
			width:80%;}
	input:focus, textarea:focus  {
			width:80%;}
	#commentForm {
			width:80%;}	
		
	select {
			width:85%;}		
		
	.submit {
			width:80%;}
			
	
/* MISCELLANEOUS- Mobile */
		
/* ACTIVITIES- Mobile */

/* ----------------------MOBILE ACTIVITY BOX----------------------------*/
	#box1 {	width:100%; float:left;}	
	#box2 {	width:100%; float:left;}	
	#box3 {	width:100%; float:left;}	
	#box4 {	width:100%; float:left;}	
	#box5 {	width:100%; float:left;}	
	#box6 {	width:100%; float:left;}	
	
/* ----------------------MOBILE ACTIVITY POPOUT BOX----------------------------*/

	.act-box1 {padding: 0px 0px 0px 0px;}			
	.act-box2 {padding: 0px 0px 0px 0px;}			
	.act-box3 {padding: 0px 0px 0px 0px;}			
	.act-box4 {padding: 0px 0px 0px 0px;}			
	.act-box5 {padding: 0px 0px 0px 0px;}			
	.act-box6 {padding: 0px 0px 0px 0px;}			


/* ----------------------MOBILE ACTIVITY FORMATTED LIST STYLE----------------------------*/
	#box1 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}
#box2 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}
#box3 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}
#box4 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}
#box5 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}
#box6 ol li {width:95%;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 5px;}

/* ---------------------- MOBILE ACTIVITY 7 WHEN OPEN----------------------------*/
	#box1 ol li.open {
			width:95%;}
	#box2 ol li.open {
			width:95%;}
	#box3 ol li.open {
			width:95%;}
	#box4 ol li.open {
			width:95%;}
	#box5 ol li.open {
			width:95%;}
	#box6 ol li.open {
			width:95%;}

	
}	}
	
/* ---------------------------------------------------------------------------------IPAD & TABLET-----------------------------------------------------------*/

@media (max-width:900px) and (min-width:481px)

{
/* CONTAINERS- IPAD & TABLET */

	/*body {width:100%; padding:0px; margin:0px 0px 0px 0px;}*/
	#outer {width:100%; 
			padding:0px;  
			margin:0px 0px 0px 0px;
			float:none; }

	#wrapper {width:100%;  
		 	padding:0px; 
			margin:0px 0px 0px 0px; 
			float:none;}

/* LISTS- IPAD & TABLET */
	li { 	width:100%; 
			margin:20px 5%}
	ol {	display:inline:block;}


/* TEXT - IPAD & TABLET */	
	.H1 {font-size:50px;}

/* LOGO - IPAD & TABLET */
	#logo {float:left; 
			width:40%;}
	
/* BANNER BIBLE VERSE - IPAD & TABLET */
	#banner {width:100%; padding:90px 0 0 0}
	
	#bibleverse {
			width:100%; 
			text-align:center;}

/* SOCIAL MEDIA - IPAD & TABLET*/

/* Top Nav, MENU - IPAD AND TABLET */

		#topnav { 
			clear:none; 
			width:50%; 
			display:block; 
			float:right; 
			padding:0px 30px 0px 0px;}
		.popup	{
			width:50%; 
			float:right; 
			text-align:center; }
			
		.burger-nav { float:right;
			display:inline;
			height:40px;
			width:60%;
			background:url(../images/Banner/menuburger.jpg) no-repeat center; 
			cursor:pointer;
	}
		
		.wrapper {	float:right;
			width:40%; 
			padding:0px;}
		
		nav ul {float:right;
			overflow:hidden; 
			background-color:#f2f1ef;
			height:0;
		}
		nav ul.open{float:left;
			height:auto; 
					}
		
		nav ul li {float:none;
			text-align:right;
			width:40%;
			margin:0px 0px 0px 0px;
		}
		nav ul li a {
			color:	#fff;
			padding:10px;
			border-bottom: 1px solid #ccc;
			display:block;
			margin:0px 0px 0px 0px;}
	
		#topnav ul{width:100%; 
			float:none; 
			display:inline-block; 
			margin:0px; 			
			border-top:none;
			border-bottom: none;
}
		#topnav ul li{
			width:100%; 
			float:none;
			display:inline-block; 
			padding:5px 2px 5px 0px;}
	

/* CONTENT - IPAD & TABLET */
	#content {width:65%; 
			float:left; 
			padding:32px 2px 2px 2px; 
			margin:2px 2px 2px 2px;}

/* RIGHT NEWS PANEL - IPAD & TABLET */
	#right-nav {float:right; 
			width:30%; 
			text-align:center; 
			margin:32px 2px 2px 2px; 
			background-color:none; }

/* FOOTER - IPAD & TABLET */
	#footer {width:100%;}
		
/* Contact form*/
	textarea {
		width:80%;}
	input {
		width:80%;}
	input:focus, textarea:focus  {
		width:80%;}
	#commentForm {
		width:80%;}	
	select {
		width:85%;}				
	.submit {
			width:80%;}

/* MISCELLANEOUS- - IPAD & TABLET */
	H1		{
			color:#413F3D;
			font-size:14px;
			border-bottom:#CCC 1px solid}
/*FIXED HEADER - Mobile*/	
	
							/* Style the header */
	.header { position:fixed;
				width:97%;
			  padding: 1px 1px;
			  background:#F2F1EF;
			  color:#F2F1EF;
			  border:#B1A6A4;
			  border:thin;
			}
		
							/* The sticky class is added to the header with JS when it reaches its scroll position */
	.sticky {
			  position: fixed;
			  top: 20px;
			  width: 100%;
			}
			
							/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
	.sticky + .content {
			  padding-top: 0px;}		
/* ACTIVITIES- - IPAD & TABLET */
	#box1 {width:95%; float:left;}
	#box2 {width:95%; float:left;}
	#box3 {width:95%; float:left;}
	#box4 {width:95%; float:left;}
	#box5 {width:95%; float:left;}
	#box6 {width:95%; float:left;}
	#box7 {width:95%;}
}