/*General settings*/
body 
{background-image:url('images/BackGradient2.png');
 background-repeat:no-repeat;
 background-position:top left;
 background-size:cover;
 font-size:100%;
 padding-left:100px;
 padding-right:100px;
}
p
{font-family:Verdana, Geneva, Sans-Serif;
 font-size:0.875em;
 color:#505050;
}
h1, h2, h3
{font-family:Verdana, Geneva, Sans-Serif;
 color:#505050;
 font-weight:bold;
}
h1
{
 font-size:1.3em;
}
h2
{
	font-size:1.1em;
}
h3
{
	font-size:1em;
}
ul
{
	list-style:square;
	font-family:Verdana,Geneva,Sans-Serif;
	color:#505050;
	font-size:0.875em;
}
hr
{
	background-color:#FF972A;
	height:2px;
}

/*Links*/
a:link, a:visited
{
	text-decoration:underline;
	color:skyblue;
}
a:hover
{
	text-decoration:none;
	color:White;
	background-color:#9933FF;
}
a:active
{
	text-decoration:none;
	color:White;
	background-color:#00CC00;
}

.centre
{margin:auto;
 width:75%;
 max-width:800px;
}
.top-img-centre
{margin:auto;
 width:99%;
 max-width:800px;
 border:0;
}
.top-img-centre a
{
	text-decoration:none;
	background-color:Transparent;
}

/*Footer*/
.footer
{font-family:Verdana, Geneva, Sans-Serif;
 font-size:0.7em;
 line-height:150%;
 color:White;
 background-color:Black;
 max-width:800px;
 height:30px;
 text-align:center;
 margin:auto;
 width:80%;
 padding-top:10px;
}

/*Navigation Bar*/
.navbar ul
{
width:100%;
padding:5px 0px;
/* margin:0 0 8 0; */
list-style-type:none;
background-color:#9933FF;
/*additions for right alignment*/
display:flex;
justify-content:right;
flex-wrap:wrap;
}
.navbar a:link, .navbar a:visited
{
float:left;
width:6em;
text-decoration:none;
color:#505050;
/* padding:10px,10px; */
font-family:Verdana, Geneva, Sans-Serif;
font-size:0.9em;
}
.navbar a:hover 
{
 color:white;
 font-weight:bold;
}
.navbar li 
{
	display:inline;
}
.navbar .isActive
{
    font-style:italic;
    font-weight:bold;
}


/*list settings*/

.mylist ul
{list-style-type:none;
 padding:0;
 margin:0;
}
.mylist li
{
/*background-image:url('images/myangel.bmp'); */
background-image:url('images/myangel2.png');
 background-repeat:no-repeat;
 background-position:0px 0px;
 padding-left:20px;
 padding-bottom:2px;
 }
.mylist a:link, .mylist a:visited
{
	text-decoration:underline;
	color:#505050;
} 
.mylist a:hover
{
	text-decoration:none;
	color:White;
	background-color:#9933FF;
}

.mylist a:active
{
	text-decoration:none;
	color:White;
	background-color:#00CC00;
}
/*Grid section*/
/* Default layout for mobile phones */
.grid-container 
{
  display: grid;
  grid-template-columns: 1fr; /* 1 column on small screens */
  gap: 20px;
}
.grid-container2 
{
  display: grid;
  grid-template-columns: 1fr; /* 1 column on small screens */
  gap: 25px;
}

/* Layout for tablets and desktops */
@media (min-width: 768px) 
{
  .grid-container 
  {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
	padding: 0px 10px; /*top & bottom 0, left & right 15*/
  }
  .grid-container2 
  {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on larger screens */
	padding: 0px 10px; /*top & bottom 0, left & right 15*/
  }
  
  .grid-item
  {
	padding: 5px;
  }
  
}

/*General image settings*/
.image-left-150
{
	float:left;
	width:150px;
	padding-right:5px;
	display:inline;
}
.image-right-150
{
	float:right;
	width:150px;
	padding-left:5px;
}
.image-centre-150
{
	display:block;
	margin:auto;
	width:150px;
}
 .image-centre-height150
{
	display:block;
	margin:auto;
	height:150px;
}
.image-right-height150
{
	float:right;
	height:150px;
}
.image-right-height100
{
	float:right;
	height:100px;
}
.image-left-height100
{
	float:left;
	height:100px;
}
 .image-centre-width-50percent
{
	display:block;
	margin:auto;
	width:50%;
}

/*Styling a link as a button*/
a.button {
  /* use inline-block because it respects padding */
  display: inline-block;
  /* padding creates clickable area around text (top/bottom, left/right) */
  padding: 0.8em 1em;
  /* round corners */
  border-radius: 8px;
  /* remove underline */
  text-decoration: none;
  /* set colors */
  color: white;
  background-color: #9933FF;
  border-color: gold;
  border-style: groove;
}

/*Centre it*/
.button-centre
{
	text-align:center;
}

/*Tagline*/
.tagline
{
    text-align:center;
    font-style:italic;
    font-weight:bolder;
    color:#BD33FF;/*darker Angel Light colour for this website*/
    padding:0px;
}
.insetDiv
{
	margin: 0% 5%;
}
.centreDiv
{
	text-align:center;
}
.rightDiv
{
	text-align:right;
}


/*Accordion panel*/

/* Container styling */
.accordion-container {
  max-width: 750px;
  font-family: Verdana, Geneva, Sans-Serif;
}
/* Individual accordion items */
details {
  /* background-color: #f9f9f9; */
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
  color:#505050;
}
/* Clickable header */
summary {
  padding: 8px;
  font-weight: lighter; 
  cursor: pointer;
  background-color: #BD33FF;
}
/* Change header background when open */
details[open] summary {
  background-color: #ddd;
}
/* Hidden content panel */
.content {
  padding: 12px;
  background-color: #fff;
  border-top: 1px solid #9933FF;
}
/* Customizing or removing the default arrow */
summary::marker {
  color:white;
}
/*Style the table for Church services*/
	td 
	{
		padding: 2px;
		border: 1px solid #505050;
		<!-- font-size:smaller; -->
	}

	.EvenRow {
		background-color: #BD33FF;
	}
}​