body {
    background-color: rgb(102, 204, 204);
}
.navbar {
    list-style-type: none;
    display: inline;
     margin: 0;
    padding: 0;
    overflow: hidden;
    width: 30px;
    background-color: #dddddd;
    width: 100%; /* Full width */

    }

.navbar li {display: inline;
}

.navbar li a {
    color: black;
    text-align: center;
    font-size: 15px;
    padding: 25px 25px;/* The second 25px is the width of the button */
    text-decoration: none;
}

/* Change the link color to (white) on hover */
li a:hover {
    background-color: white;
}

table.HeritageNewsTable {
  width: 70%;
  border-collapse: collapse;
  border: 6px solid black padding; 
    margin: auto;
   }

strong { 
    font-weight: bold;
}

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

h2 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h3 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: left;
}

h3.placecenter {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h4.placecenter {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h5 {
	font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}


p {
    font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 20px;
}

p.TimesFont {
    font-family: Times, Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

p.citations {
    font-family: Times, Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
}
/* obituaryphoto will frame  Jack's obituary photo in black */
#obituaryphoto {
    box-sizing: content-box;    
    padding: 10px;    
    border: 5px solid black;
    background-color: linen;
    
    width: 400px;
    height: 550px;
    text-align: center;
}

/* The textframe id below should be used with a table element tag */
#textframe {
    box-sizing: content-box;    
    padding: 25px;    
    border: 10px double grey; /* border is the box around the content.
You can specify the thickness in px, type, and color.*/  
    text-align: left;
    background-color: linen;
    width: 70%; /* The width of the frame which contains 
	              the text will be 70% of the screen width */
    margin: auto;

}

#headerframe {
     margin: auto;
    box-sizing: content-box;    
    padding: 5px;    
    border: 10px double grey;
    text-align: center;
    background-color: linen;
    width: 45%;  /* The width of the frame which contains 
	              the text will be 45% of the screen width */

}

/* Style the header */
.header {
  /* background-color: #f1f1f1; header background will be white*/
  background-color: linen;
 padding: 20px;
  text-align: center;
}

/* photoframe will frame  Jack's photo */
#photoframe {
        margin: auto;
	box-sizing: content-box;    
	padding: 10px;    
	border: 10px double grey;
	text-align: center;  /*To just center the text inside an element,
					 use text-align: center;*/

	background-color: linen;
	}

#photoframehouse {
    box-sizing: content-box;    
    padding: 10px;    
    border: 10px double grey;
    background-color: linen;
    width: 75%;/* The width of the photo frame will be 75% of the
				 screen width */

}

#photoHeroLeander {
    box-sizing: content-box;    
    padding: 2px;    
    border: 10px double grey;
    background-color: linen;
    width: 545px;/* Same as the width of the photo */

}

.center {
    margin: auto; /*To horizontally center a block element
			 (like <div>), use margin: auto;*/
    width: 60%; /* The width of the photo frame will be 60% of the
				 screen width */
    padding: 5px;
    }
 
.centersidebysideimg {
    margin: auto;
    width: 75%;/*the horizontal into which the images have to fit.  
     If the width is too small, both images will not fit side by side. 
     They will be placed underneath each other.*/
    padding: 5px;
    }
    
/* ******************************************************************************* 
                      How to position an image in CSS?

There are many methods to position the image in CSS, such as using the 
object-position property, using the float property (for aligning the elements 
to the left or right).
*******************************************************************************/


/* ******************************************************************************* 
<title> CSS object-position property </title>
<style>
*******************************************************************************/

#center {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: center top;
}
#left {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: left top;
}
#right {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: right top;
}
/* ******************************************************************************* 
</style>
*******************************************************************************/


/* ******************************************************************************* 
					Video Class
This css section is for pages that need a border for videos.  As the user down 
sizes the video window less that the coded player width, this code will rescale 
the video player as the user re sizes the browser window less than the to see 
how the size of the video player will scale when the width is less than 400px.
*******************************************************************************/

video {
  max-width: 100%;
  height: auto;
border: 5px solid black;
}
/* *******************************************************************************/

td {
    text-align: left;
    padding: 8px;
    background-color: white;
}

tr {vertical-align: top;
}

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 3px;
}

* {
    box-sizing: border-box;
}

.column {
    float: left;
    width:50%;
    padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}
/********************************************************************************/

/* ******************************************************************************* 
					ToolTip
                 This css section is for pages that use tooltip popups *******************************************************************************/


/* The tooltip class below pen points the word and announces that this word is aTooltip. */
.tooltip {
  text-decoration:none;   /*The text-decoration property specifies the decoration added to text*/
  position:relative;
  color:green;
}
/********************************************************************************/
 
/* Below describes the look of the container that holds the images-whatever is contained in span i.e. the image*/
/*The tooltip word will be given the property of, SPAN--this element is an inline element, and will not start on a new line and only takes up as much width as necessary.  The look of the span is described below*/
/*The <span> tag is an inline container used to mark up a part of a text, or a part of a document.*/
/*The tooltip word is placed in a <span> tag so that it will be in an inline container (fitting into the sentence as written) with the properties described below it*/
.tooltip span {
  display:none;
  border-radius:6px;  /* This is the radius of the border around the image*/
  color:black; /* This is the color of the border line around the image*/
  background:white; /* This is the color of the background of the border behind the image*/
}
 
.tooltip span img {
  float:left;
  margin:0px 8px 8px 0;
}
 
.tooltip:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:575px; /* This width attribute is the width around the image*/
 min-height:430px;  /* This height attribute is the height of the padding around the  image*/
  border:1px solid black;
  margin-top:12px;
  margin-left:-50px;
  overflow:hidden;
  padding:8px;
}

/* ******************************************************************************* 
Code below is for automatic slide show
*******************************************************************************/

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 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 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

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

@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}
}
/********************************************************************************/