.ppcf {

  margin-left: 10px;

  float: left;

  width: 55px;

  padding:0;

  height: 30px; /* Should be removed. Only for demonstration */

  margin-top:10px;

  background-color:#CCC;  

  text-align:center;



}

.ppcex {

	Margin-left: -80px;	}

.ppfmaincol{

	width: 100%;

	height:850px;



	}

.ppfmaincol01{

	width: 100%;

	height:autopx;

	}
	
.greencellheading {
	color:#060;
	
	}
.greencellmembers {
	color:#0C0;
	
	}	
	
.listcolumn {

 width:100%; 

 float:left;

 margin-left:0px;

 

}

.emlist {

 width:100%; 

 float:left;

 margin-left:0px;

 

}
	

.photogallery{

	margin-left:100px;

	width:100%;

	

	}

.pgyears {

	margin-top:-5px;

}

	

.pglinks{

	

	width:50%;

	text-align:left;

	color:#333;

	margin-left:180px;

	font-weight:bold;	

	}

	

.pg01 {

	

	margin-top:30px;

	margin-left:-250px;

	padding:10px;

	float:left;

  

  /* background-color:#ccc;*/

   

   /* Should be removed. Only for demonstration */

}







.pg02 {

	

	margin-top:30px;

	margin-left:40px;

	padding:10px;

	float:left;

  

  /* background-color:#ccc;*/

   

   /* Should be removed. Only for demonstration */

}



.pg03 {

	

	margin-top:30px;

	margin-left:40px;

	padding:10px;

	float:left;

  

  /* background-color:#ccc;*/

   

   /* Should be removed. Only for demonstration */

}



.pg04 {

	

	margin-top:-70px;

	margin-left:-30px;

	padding:10px;

	float:left;

 

}



.pg05 {

	

	margin-top:-70px;

	margin-left:40px;

	padding:10px;

	float:left;

  

 

}





	

.pgimage{

	

	

	width:300px;

	height:180px;

	border-style:solid; 

	border-color:#660099;

	}



.pgbig {

	

	margin-top:-20px;

	margin-left:-550px;

	padding:10px;

	

  

  /* background-color:#ccc;*/

   

   /* Should be removed. Only for demonstration */

}

	

.pgimagebig{

	

	

	width:750px;

	height:550px;

	border-style:solid; 

	border-color:#660099;

	}

.choirtitle{
	text-align:left;

	}

.ppctitle{

	margin-left:150px;

	}



.catmaincol{

	width: 100%;

	margin-top:0px;

	height:800px;;

	margin-left:250px;

	text-align:center;

    

	}



.parishreachout {

 float: left;

  margin-left:160px;

	}
	
	
.preachtitle{

	margin-left:300px;

	
	}

.preachoutcol {

 width:100%; 

 float:left;

 margin-left:120px;

}

.preachout {

	
  margin-left: 30px;

  padding:8px;

  margin-top:30px;

  float: left;
  font-size:25px;
  font-weight:bold;
 
  width: 180px;

   height:auto; /* Should be removed. Only for demonstration */

    background-color:#FF9;

	text-align:center;
	border-radius :10px;
	border-style: inset;

}


.ppfcolumn {

	
  margin-left: 7px;

  padding-left:8px;

  margin-top:10px;

  float: left;

  width: 200px;

   height: 30px; /* Should be removed. Only for demonstration */

    background-color:#CCC;

	vertical-align:middle;

	text-align:center;

}

.ppfcolumn01 {

	
  margin-left: 7px;

  padding-left:8px;

  margin-top:10px;

  float: left;

  width: 200px;

   height: 30px; /* Should be removed. Only for demonstration */

    background-color: #300;

	vertical-align:middle;

	text-align:center;
color:#FFF;
}

.ppcfcol{

	width: 700px;

	margin-left:0px;

	margin-bottom:0px;

	

	

    

	}

.emnames01{

	

	font-family:"Bookman Old Style";

	font-size:14px;

    color:#FFF;

	text-align:center;

	font-weight: bold;

	}

.emnames{

	

	font-family:"Bookman Old Style";

	font-size:13px;

    color:#FFF;

	text-align:center;

	

	

	}

.imgStyle

{

height:100px;

width:100px;

border:3px solid grey;



}



 .top {

       

        font-size: 15px;

		text-align:center;

		width:40px;

		height:40px;

        border-color: rgba(85, 85, 85, 0.2);

         background-color:#FFF;

        padding-left: 0px;

		padding-right: 0px;

        border-radius: 5px;

		text-decoration:none;

		margin-left:240px;

		cursor:pointer; }

		

.top img:last-child{display:none}		

		

    .top:hover img:first-child{display:none}

    .top:hover img:last-child{display:inline-block}





    }

/*On Hover Color Change*/

 .top:hover {

        

		color:#C00;

		text-decoration:none;

		

    }



@media screen and (min-width: 320px) and (max-width: 480px)  {

	

.pg01 {

	

	margin-top:-60px;

	margin-left:-20px;

	padding:3px;

	float:left;

 

}



.ppcex {

	Margin-left: 0px;

	margin-top: 300px;	}







.pg02 {

	

	margin-top:-60px;

	margin-left:5px;

	padding:3px;

	float:left;



}



.pg03 {

	

	margin-top:-60px;

	margin-left:5px;

	padding:3px;

	float:left;



}



.pg04 {

	

	margin-top:-70px;

	margin-left:40px;

	padding:3px;

	float:left;

 

}



.pg05 {

	

	margin-top:-70px;

	margin-left:5px;

	padding:3px;

	float:left;

  

 

}	



.pgyears {

	margin-top:0px;

}

.pgimage{

	width:100px;

	height:80px;

	border-style:solid; 

	border-color:#660099;

	}



.pgbig {

	

	margin-top:-70px;

	margin-left:0px;

	padding:3px;



}

	

.pgimagebig{

	width:100%;

	height:auto;

	border-style:solid; 

	border-color:#660099;

	}



.pglinks{

	

	width:100%;

	text-align:center;

	color:#333;

	margin-left:5px;

	margin-top:300px;

	font-weight:bold;	

	}

.ppfmaincol{
	margin-left:-20px;

	}

.ppfmaincol01{

	width: auto;

	margin-left:-130px;

	margin-right:100px;

	}

.preachout{
	padding:8px;
  
  margin-top:10px;

  font-size:10px;

  width: 60%;

  height:auto; /* Should be removed. Only for demonstration */

  background-color:#CF0;
	}

.preachoutcol {
	margin-left:30px;
	
	
	
	}
.ppfcolumn {

	padding:1px;
  
  margin-top:5px;

  font-size:10px;

  width: 30%;

  height: 30px; /* Should be removed. Only for demonstration */

  background-color:#CF0;

  

}

.ppfcolumn01 {
	padding:1px;
	
  margin-top:5px;

  font-size:10px;
  

  width: 30%;

  height: 30px; /* Should be removed. Only for demonstration */

  background-color: #360;

  

}

.listcolumn {

 width:100%; 

 margin-left:0px;

 

}
.emlist {

 width:100%; 

 margin-left:50px;

 

}


.parishreachout {

width:100%; 	

 float: left;

  margin-left:10px;

 	}
	
.choirtitle{	
font-size:12px;
margin-left:110px;

}
.preachtitle {
	
	margin-left:100px;

	font-size:15px;
	
	}

.ppctitle{

	margin-left:50px;

	font-size:12px;

	}

.ppcf {

  margin-left: 10px;

  float: left;

  width: 55px;

  padding:0;

  height: 60px; /* Should be removed. Only for demonstration */

  margin-top:5px;

  background-color:#CCC;

  text-align:center;

  font-size:12px;  

  

  

}



 .top {

       

        font-size: 15px;

		text-align:center;

		width:40px;

		height:40px;

        border-color: rgba(85, 85, 85, 0.2);

         background-color:#FFF;

        padding-left: 0px;

		padding-right: 0px;

        border-radius: 5px;

		text-decoration:none;

		margin-left:240px;

		cursor:pointer; }

		

.top img:last-child{display:none}		

		

    .top:hover img:first-child{display:none}

    .top:hover img:last-child{display:inline-block}





    }

/*On Hover Color Change*/

 .top:hover {

        

		color:#C00;

		text-decoration:none;

		

    }



	

	

	}