@charset "utf-8";
/* CSS Document */
/*SJC TEST WEBSITE*/		


body {
	margin:.5em .5em;
	/*font-size: small;*/
	font-size:62.5%;/*set base and then use ems from there*/
	background-color: #B0D8FF;
	}
	
html{
	font-family:Verdana, Geneva, sans-serif;
	}
	
img { 
    width:100%;
	height:auto;
	}
	
	/*To center an image, set left and right margin to auto and make it into a block element:*/
	.center{
		display:block;
		margin-left:auto;
		margin-right:auto;
		width:50%;
		
		}

	
/********New Modern Clear Fix******************************************************************	*/
.clearfix::after{
	content:"":
	clear:both;
	display:table;
	} 
	
	
	
	/******************************email protect from spam************************************************/	
	
	
span.blockspam {
  display: none;
	}


/******************************em sizing************************************************/				

		h1 {
			font-size:3.6em;
			max-width:100%;
			}  /* displayed at 36px */
		h2 {
			font-size:2em;
			font-family: Georgia, "Times New Roman", Times, serif;
			color:#B99400;
			text-align:left;
			padding:0;
			margin:0;
			}  /* displayed at 20px */
				
		h3 {
			font-size: 1.6em;
			color:#069;
			}  /* displayed at 18px */
			
		
		/******************** h4 using for headlines**************/
		h4 {font-size:1.6em;
			font-family:Tahoma, Geneva, sans-serif;
			color:#FF1D25;
			font-weight:bold;
			}
		
		p {
			font-size:1.6em;
			color:#000;
			font-weight:normal;
			line-height:1.8em;
		}	
		
		
		
						
		
		input, select, th, td {font-size:1.6em}
		
			ul li {
			font-size:1.6em;
			color:#000;
			font-weight:normal;
			line-height:1.8em;
		}
		
		
		
		ol li {
			font-size:1.6em;
			color:#000;
			font-weight:normal;
			line-height:1.8em;
						
			}
	
		
		li li, li p, td p, blockquote p,q {font-size:1.6em}
		
	/**************************List styles classes*********************************************************************************/	
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}


/******************************Navigation***refer to navagation.css file******************************************************/			

/**************************ROW***************************************************************************************************/
/*********************************Rounded Corners ***************************************************************************************************/

.rcorners1 {
  border-radius: 25px;
  background-color:#cce6ff;
  padding:1em; 
  width: 200px;
  height: auto;  
}

.rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

.rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}
/******************************ImgContainer  with text overlay CSS *********************************************************/					
.imgContainer {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/******************************Header*********************************************************/					



.header{
		overflow:auto;
		background-color:#B0d8ff;
		margin: 3em 0em 0em 0em;
		padding:0em 0em 0em 0em; 		
		}
		
	
		
.borderChurch{
	border:#069 solid thin;
	}
	
	 /*  header and nameHeader/ nameHeaderIndex tag and other tagline/taglineIndex are the same but change in the mobile query section below */
		
#nameHeaderIndex{
		color:#069;
		font-size:4em; /* 3 em displayed at 36px */
		border:none;
		font-family: Georgia, "Times New Roman", Times, serif;
		text-align:left;
		letter-spacing: .05em;
		font-weight: bold;
		margin-top:.18em;
		font-variant: normal;
		}

	

#nameHeader{
		color:#069;
		font-size:4em; /* 3 em displayed at 36px */
		border:none;
		font-family: Georgia, "Times New Roman", Times, serif;
		text-align: left;
		letter-spacing: .05em;
		font-weight: bold;
		margin-top:.18em;
		font-variant: normal;
		}
		
		
#taglineIndex{
		font-size:1.95em;
		text-align: left;
		color:#960;
		letter-spacing: .14em;
		margin-top:-1em;
		font-weight:100;
		margin-bottom:1em;
		}
		
		

 #tagline{
		font-size:1.95em;
		text-align: left;
		color:#960;
		letter-spacing: .14em;
		margin-top:-1em;
		font-weight:100;
		margin-bottom:1em;
		}
		
.headerInfoWrapIndex{
	width:100%;
	color:#069;
	height:auto;
	background-color:#B0d8ff;
	margin:0em 0em 30em 0em;
	padding:0em 0em 0em 0em;
	}
		

		
.headerInfoWrap{
	width:100%;
	color:#069;
	height:auto;
	background-color:#B0d8ff;
	margin:0em 0em 30em 0em;
	padding:0em 0em 0em 0em;
	}
		
		
 .contactInfoHeader{
	color:#069;
	font-weight:normal;
	font-size:1.5em;
	line-height:1.6em;
	}
		
		
.logoSSS{
		width:45%;
		height:auto;
		margin-top:0em;
		margin-left:7em;
		}	
		
			
		
.quoteSSS{
	font-family:Papyrus, fantasy; 
	color:#069;
	padding:0em 1.5em;
	text-align:center;	
	font-size:1.6em;
	}	
	
		
.quoteAuthor{
	margin-top:-.5em;
	text-align:center;
	color:#069;
	font-size:.9em;
	line-height:1em;
	}
	
.stjoeQuoteImg{
	float:left;
	margin-right:1.5em;
	width:53.3%;
	height:auto;
	border:#069 thin solid;
	margin-bottom:0em;
	
	}
	
		
.stjoeQuote	{
	font-size:1.52em;
	color:#069;
	font-family:Papyrus;"
	margin-bottom:-5em;
	}	
	
	.flowerAloha{
		width:21.5%;
		height:auto;
		padding-left:1em; 
		float:right;
	}
		

 @media screen and (min-width: 601px)  {
 
 
 /*	This is for line breaks on mobile phone only NOT desktop*/	
 
 .mobileBreak { display: none;
	  			 }
	
	
 /*	This is hides on desktop only not mobile phone*/	
   
.hideDeskTop{
		display:none;
		visability:hidden;
		}	
	
	 }	
	 
 
	 
	 /***********************************************MOBILE***************************/
		
/* On screens that are 600px wide or less, 	******************************************************************************/
@media screen and (max-width: 600px) {
	
	.hideMobile{
		display:none;
		visability:hidden;
		}	
		
	 /*************************** this class is for a line break desktop only hides on mobile (need to check)*********************/	
	.desktopBreak { 
	 	display: none; 
		 }
		 
 /******************************************************************MOBILE classs to resize images*********************/
 .flowerAloha{
		width:30.5%;
		height:auto;
		padding-left:1em; 
		float:right;
	}
 
		 
		 
		  /******************************************************************Header MOBILE*********************/	
	 
 	.sjcLogoMobileIndex{
		 width:9%;
		 height:auto;
		float:left;
		margin:0em .25em; 
		 }
	
	.sjcLogoMobile{
		width:9%;
		height:auto;
		float:left;
		margin:0em .55em 0em 0em ; 
		
		
			}
	
	 /******************************************************************HeaderINDEX PAGE*********************/	
	
	
		
	.header{/* mobile Header div 	*/ /************ Include HeaderPAGE *********************/	
	overflow:auto;
		background-color:#B0d8ff;
		margin:0em;
		padding:0em 0em 0em 0em; 
			}	
	
				
	
 #nameHeaderIndex{
	font-size:2.3em;/* ABOUT 24 PX   */
 	margin:0em;
	letter-spacing:normal;
	float:right;
	text-align:left;
	} 
	
	/************ Include HeaderPAGE *********************/
	
	#nameHeader{  
	font-size:2.3em;/* ABOUT 24 PX   */
  	margin-top:-2em;
	letter-spacing:normal;
	float:right;
	text-align:left;
		} 
	
	#taglineIndex{
	font-size:1.33em;
	line-height:normal;
	letter-spacing:normal;
	margin-top:.5em;
	margin-bottom:-1em;
	float:right;
	text-align:left;
 	 }
	 
	 /****************************************************************** Include HeaderPAGE *********************/	 
	 #tagline{
	font-size:1.33em;
	line-height:normal;
	letter-spacing:normal;
	margin:-1em 0em 0em 0em;
	float:right;
	text-align:left;
 	 }	
			
 
	

 		

	

	
	
/**************************************************************************************/	
	 
 				
.contactInfoHeader{
	color:#069;
	font-weight:normal;
	font-size:1.5em;
	line-height:1.6em;
	margin-top:0em;
	
	}
	
	
.stjoeQuoteImg{
	float:left;
	margin-right:1.5em;
	width:38%;
	height:auto;
	border:#069 thin solid;
	}
	
	
	
	
	
	
.stjoeQuote	{
	color:#069;
	font-family:Papyrus;"
	font-size:1.6em;
	padding:1em 2em 0em 2em;
	
	
	}
	
/******************************************************************logo sss quote MOBILE*********************/	
	
.logoSSS{
		width:45%;
		height:auto;
		margin-top:0em;
		margin-left:10em;
		}	
		
			
		
.quoteSSS{
	font-family:Papyrus, fantasy; 
	color:#069;
	padding:0em 1.5em;
	text-align:center;
	font-size:1.6em;
	font-weight:600;
		}	
	
		
.quoteAuthor{
	margin-top:-.5em;
	text-align:center;
	color:#069;
	font-size:1em;
	}

}				
				
/***************************************************************************************/					
				
				
				
/******************************class section text*********************************************************/	
		
	.section{
		width:100%;
		height:auto;
		float:left;
		background-color:#FFF;
		margin-bottom:2em;
		padding:2em;
		border:#069 solid thin;
		}
		
			
.bodyText{
	line-height: 2em;
	text-align:left;
	}

	/***************************************************HISTORY PAGE LINKS**************************************/	
#history-links{
	font-size: 1.2em;
	line-height:2em;
	text-decoration: none; /* Remove underline from links */
	}
	
	
		

	/******************************SlideShow*********************************************************/					
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  height:auto;
  position: relative;
  margin: auto;

}

 }
/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -2.2em;
  padding: 1.6em;
  color: white;
  font-weight: bold;
  font-size: 1.8em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
	}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
	}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
	}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
	}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
	}

.active, .dot:hover {
  background-color: #717171;
	}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/*********************BULLETIN ARCHIVE**********************************************************************************************/

	.archive{
	width: 100%;

	}
	
	.archiveLinks a {
	font-size:1.4em;
	line-height:2em;
	}	

	.archives table{
	width: 100%;
	border-collapse: collapse;
	cellspacing:0;
	background-position: center;
		
	}
	
	caption h3{
		
	margin-left:-1px; /*fix FF 1px issue*/
	
	}	
	
	html: first-child caption{/*fix Opera only*/
		margin-left:0;	
		}
						
	
 										
				
	.archives th {
	width:16.6%;
	text-align:left;
	scope:col;
	color:#666;
	font-size:1.4em;
	padding-top:.5em;
	padding-bottom:.05em;
	padding-left:.3em;
	vertical-align: top;
	background-color:#cceeff;
		}
		
	.archives td{
	vertical-align: top;
	text-align:left;
	padding-left:.3em;
	} 	
	
	.archives p  {
	scope:col;
	color:#B99400;
	text-align: left;
	font-size:.95em;
	vertical-align: top;
	font-weight: normal;
	}
	
	
	


	
	
	
	/******************************FOOTER*********************************************************/
	
	#footer{
	clear:both;
	width:100%;
	height:auto;
	background-color:#99CCFF;
	margin-left:0;
	margin-bottom:0;
	padding:1em;
	border-top:#99CCFF medium solid;
	box-shadow:.2em .4em .8em rgba(0,0,0,0.19);
		}
	
	
	/***************************************************************************************/