/* *************** DEFAULT STYLES *************** */
*

{
	font-family: Merriweather, sans-serif;
}

body {
	font-size: small;
	background-color: #FFF;
	background-repeat: no-repeat;
	padding-top: 0px;
}

html {
	margin-left: calc(100vw - 100%);
}

a:link {
	text-decoration:none;
	color: purple;
}

a:visited {
	text-decoration:none;
	color: red;
}

a:hover {
	text-decoration:none;
	color: blue;
	transition: 500ms;
}

a:focus {
	text-decoration:none;
	color: blue;
}

a:active {
	text-decoration:none;
	background-color: gray;
	color:white;
}

/* ******************************************************************************** */
/* *************** MAIN WEB CONTAINER *************** */
#container{
	width:auto;
	height:auto;
	background-color:#FFF;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	padding:3px;	/* 3px padding all around */
	}

/* ******************************************************************************** */
/* *************** TITLE PANE *************** */
#titlePane{
	width:auto;
	height:auto;
	/* background-color:#4B0082;	/* background: purple color */
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1); /* transition background image for title bar */
	margin-left:auto;
	margin-right:auto;
	border: 0px solid #fff;
	margin-bottom:1px;		/* leave 1px space between Title Bar & Menu Bar */
	vertical-align:middle;
	padding-top:5px;
	padding-bottom:1px;
	font-size:medium;
	color:#003;
}

#titlePane h1{
	font-family: Old Standard TT, serif;
	font-size: 5vw;			/* Make font size change with smaller screens */
	color:#fff;
	margin-top:0px;
}

/* Social Media Icons & links to my SM sites */
#social_mediaPane{
	width:90%;
	padding-top:0px;
	padding-bottom:0px;
	margin-bottom:0px;
}

/*********************************************************************************** */
/*********************************************************************************** */
/* Overlays for the social media icons to transition during hover */
.overlay-image {						/* Main container */
	position: relative;
	width: 20px;
	float: right;
}

.overlay-image .image {					/* Original image */
	display: block;
	width: 20px;
	height: auto;
}

.overlay-image .hover {					/* New overlay on hover */
	position: absolute;
	z-index: 1;
	top: 0;
	height: 20px;
	width: 20px;
	opacity: 0;
	transition: .5s ease;
}

.overlay-image:hover .hover {			/* New overlay appearance on hover */
	opacity: 1;
}


/* ******************************************************************************** */
/* *************** PREVIEW PANE *************** */
/* this is the main space on the page */
#previewPane{
	width: 80%;				/* Total width of preview pane */
	font-size: medium;
	color: #000;			/* font color is black */
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fff;	/* removed the border because it shifts the preview screen */
	margin-bottom: auto;	
	vertical-align: top;
	text-align: top;
	padding-top: 0px;
	padding-bottom: 10px;	/* a little extra padding for the 2-line below */
}

/* remove the bullets in the unordered list; set margin */
#previewPane ul {
	list-style: none; 
	padding: 0px;
	margin: 10px;
	clear: both;
}

/* CSS style for <li> text in the Preview Pane */
#previewPane li {
	text-align:left;
	font-size:small;
	font-style:normal;
}

#previewPane h1{
	font-family: Old Standard TT, serif;
	font-size: 3vw;			/* Make font size change with smaller screens */
	color:#000;
	margin-top:5px;
	margin-bottom:0px;
}

#previewPane h2{
	font-family: Old Standard TT, serif;
	font-size: 2vw;			/* Make font size change with smaller screens */
	font-style: italic;
	color:#003;
	margin-top:0px;
	margin-bottom:2px;
}

#previewPane img {
	width: 500px;
	padding: 2px;
	vertical-align:middle;
/*	border: 1px solid red; */
}

/* ******************************************************************************** */
/* *************** PHOTO PANE *************** */
/* this is the main space on the PHOTO pages */

#photo_pane {
	width: 80%;				/* Total width of preview pane */
	font-size: medium;
	color: #000;			/* font color is black */
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fff;	/* removed the border because it shifts the preview screen */
	margin-bottom: auto;	
	vertical-align: top;
	text-align: top;
	padding-top: 0px;
	padding-bottom: 10px;	/* a little extra padding for the 2-line below */
}

#photo_pane img {
	width: 150px;
/*	height: 222px;	*/
	padding: 2px;
	vertical-align:middle;
}

/* ******************************************************************************** */
/* *************** MAIN MENU BAR AT TOP OF PAGE *************** */
/* definitions for menu bar at top of page */

#menu_bar {
	color: #fff;				/* text color - white */
	background-color: #fff;		/* background color - black */
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: center;
}


/* ******************************************************************************** */
/* *************** COMMITTEE MEMBERS PAGE *************** */

#committee_pane {
	width: 80%;				/* Total width of preview pane */
	font-size: medium;
	color: #000;			/* font color is black */
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fff;	/* removed the border because it shifts the preview screen */
	margin-bottom: auto;	
	vertical-align: top;
	text-align: top;
	padding-top: 0px;
	padding-bottom: 10px;	/* a little extra padding for the 2-line below */
}

#committee_pane img {
	width: 150px;
	padding: 2px;
	vertical-align:top;
}	

/* ******************************************************************************** */
/* *************** COMMITTEE IMAGES SIDE-BY-SIDE ON COMMIITTEE PAGE *************** */
#committee_pane figure {
	display: inline-block;
	vertical-align: top;
	width: 150px;
	padding: 5px;
	margin: 5px;
}

#committee_pane figcaption {
	width: 138px;
	margin-left: 2px;  /* shift the "Name" box over to center below the image (150px - 120px)/2  */
	border: none;
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1);		
/*	background-color: #4B0082;	/* background: purple color */
	padding: 7px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}


/* ******************************************************************************** */
/* *************** DECEASED CLASSMATES PAGE *************** */

#memorial_pane {
	width: 80%;				/* Total width of preview pane */
	font-size: medium;
	color: #000;			/* font color is black */
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fff;	/* removed the border because it shifts the preview screen */
	margin-bottom: auto;	
	vertical-align: top;
	text-align: top;
	padding-top: 0px;
	padding-bottom: 10px;	/* a little extra padding for the 2-line below */
}

#memorial_pane img {
	width: 150px;
	padding: 2px;
	vertical-align:top;
}	

/* ******************************************************************************** */
/* ***************  DECEASED CLASSMATES IMAGES SIDE-BY-SIDE ON DECEASED PAGE *************** */
#memorial_pane figure {
	display: inline-block;
	vertical-align: top;
	width: 150px;
	padding: 5px;
	margin: 5px;
}

#memorial_pane figcaption {
	width: 138px;
	margin-left: 2px;  /* shift the "Name" box over to center below the image (150px - 120px)/2  */
	border: none;
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1);		
/*	background-color: #4B0082;	/* background: purple color */
	padding: 7px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}








/* ******************************************************************************** */
/* Style the navigation menu */

/* Add a background to the top navigation bar */
.topnav {
	position: relative;
	background-color: white;	/* nav bar background color - white */
	overflow: hidden;
	}
	
/* Style the navigation menu links */
.topnav a {
	display: inline-block;	
	color: #4B0082;				/* text color  - purple, same as Title background */
	text-align: center;
	padding: 14px 16px;			/* vertical, horizontal */
	text-decoration: none;
	font-size: 17px;
	font-weight: bold;
	}

	
/* Add a purple background color with white text on mouse-over */
.topnav a:hover {
	background-color: #4B0082;	/* background color - purple, same as Title background */
	color: #fff;				/* white text hover */
	transition: 500ms; 
	}
	
/* Style the active link (or home/logo) */
.topnav a:active {
	background-color: gray;
	color: white;				/* the current "active" link text color */
	}

/* Style the active link to remain "on" while on that page */	
a.active {
	background-color: #4B0082;	/* background color - purple, same as Title background */
	text-decoration: underline;
	color: #fff;				/* white text */
}
	
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}

/* **************************************************************************************** */
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}	

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of
horizontally) */
@media screen and (max-width: 900px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}

#previewPane img {
	width: 120px;
	padding: 2px;
	vertical-align:middle;
/*	border: 1px solid red; */
	}
	
	
#previewPane figcaption {
	width: 80px;
	margin-left: 3px;  /* shift the "Read More" box over to center below the image (120px - 80px)/4  */
	border: none;
	background-image: linear-gradient(to right, #4d0013, #67001a, #800020, #9a0026);
/*	background-color: #cccccc; */
	padding: 7px;
	text-align: center;
	font-size: 10px;
/*	font-weight: bold; */
	text-decoration: none;
	color: #cccccc;
	transition: 500ms;
	}
	
#committee_pane img {
	width: 120px;
	padding: 2px;
	vertical-align:top;
	}	

#committee_pane figcaption {
	width: 100px;
	margin-left: 1px;  /* shift the "Name" box over to center below the image (150px - 120px)/2  */
	border: none;
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1);		
	padding: 7px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	}

#memorial_pane img {
	width: 120px;
	padding: 2px;
	vertical-align:top;
	}
	
#memorial_pane figcaption {
	width: 100px;
	margin-left: 1px;  /* shift the "Name" box over to center below the image (150px - 120px)/2  */
	border: none;
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1);		
/*	background-color: #4B0082;	/* background: purple color */
	padding: 7px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	}

}


/* ******************************************************************************** */
/* *************** BOOK IMAGES SIDE-BY-SIDE ON HOME PAGE *************** */
figure {
	display: inline-block;
	width: 150px;
	padding: 5px;
	margin: 5px;
}

figcaption {
	width: 110px;
	margin-left: 19px;  /* shift the "Read More" box over to center below the image (150px - 100px)/2  */
	border: none;
	background-image: linear-gradient(#020024, #29034d, #4e0674, #710997, #990cc1);		
	padding: 7px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	color: #cccccc;
	transition: 500ms;
}

figcaption a:link {
	text-decoration:none;
	color: #cccccc;
}
figcaption a:visited {
	text-decoration: none;
	color: #cccccc;
}

figcaption a:hover {
	text-decoration: none;
	color: orange;
	transition: 500ms;
}

/* ******************************************************************************** */
/* *************** FOOTER *************** */
#footer {
	clear: both;
/*	margin-left: auto;
	margin-right: auto;
	top: 360px;
	left: 0px;
	width: 800px; */
	color: #710997;
	background-color: #fff;
	margin-bottom: auto;

}