h1, h2, h3, h4, h5, h6 {
	color: #003399; /* Now blue. Was blue-green #2582A4; from infinitely mystical 2.0 */
}

h1 {
  text-align: left;
	font-family: serif;
	font-size: 18px;
	font-style: italic;
	color: #003399;
	margin-top: 0px;
	margin-bottom: 6px;
}

h2 {
  text-align: left;
	font-family: serif;
	font-size: 24px;
	font-style: italic;
	color: #003399;
	margin-top: 0px;
	margin-bottom: 14px;
}

h3 {
	text-align: left;
	font-family: serif;
	font-size: 18px;
	font-style: italic;
	color: #003399;
	padding-top: 0px;
}

h4 {
	text-align: center;
	font-family: serif;
	font-size: 28px;
	font-style: italic;
	color: #003399;
	margin-top: 20px; /* This was 34 before December 2017, the second responsive redesign */
	margin-bottom: 20px;
}

h5 {font-size: 18px; font-weight:bold}

h6 {
  text-align: left;
	font-family: serif;
	font-size: 18px;
	font-style: italic;
	color: #003399;
	margin-bottom: 0;
}

p {
	margin: 20px 0;
}

p.essay-description {
	margin: 0 0 20px 25px;
}

p.thinspace {
	margin: 0;
}

p.blue-italic {
	text-align: left;
	font-style: italic;
	color: #003399;
}

p.centerblue {
	text-align: center;
	font-style: italic;
	color: #003399;
}

.essayauthor {
	text-align: left;
	font-family: serif;
	font-size: 18px;
	font-style: italic;
	color: #003399;
	margin-top: 0px;
	margin-bottom: 25px;	
}

.pdf-offer {
	text-align: left;
	font-family: sans-serif;
	font-size: 90%;
	color: #2582A4;
}

.pdf-link {
	text-align: center;
	font-family: serif;
	font-size: 28px;
	font-style: italic;
	color: #003399;
	padding-top: 20px;
	margin-bottom: 10px;
}

.backtitle {
	text-align: left;
	font-family: serif;
	font-size: 20px;
	font-style: italic;
	color: #003399;
	padding-top: 0px;
	margin-bottom: 18px;
}

.subtitle {
	text-align: left;
	font-family: serif;
	font-size: 14px;
	font-style: italic;
	color: #003399;
	margin-top: 0;
	margin-bottom: 18px;
}

.quote {
	text-align: left;
	font-family: serif;
	font-size: 18px;
	font-style: italic;
	color: #2582A4;
	margin-bottom: 1.2em;
}

.redbullet {
	font-size: 150%;
	color: #D80000;
}

.bluegreen {
	color: #2582A4;
}

.wrap-my-photo {
	float: left;
	margin: 10px 40px 10px 0;
}

.wrap-magic-eye {
	float: left;
	margin: 5px 20px 10px 0;
}

a {text-decoration: none;}

a.bluelink:link {color: #003399;} /* Blue before and after visiting. Note: These three need to be separate. */

a.bluelink:visited {color: #003399;} /* Blue before and after visiting */

a.bluelink:hover {color: #D80000; background:rgba(153, 153, 153, 0.25);} /* While hovering, almost red */
/* The hover background color now matches the large screen menu background hover color. */

/* This puts a little space below the picture of the book cover and moves that cover over to the right 8 pixels to line up with the menu items */
.image-book {
    /* float: left; Don't float this since I don't want text to wrap around it, which is what I saw on the iPhone. */
    margin: 0px 0px 20px 8px;
}

.centerimage {
	margin: auto;
}

.copyright {
	text-align: center;
	font-size: 70%;
}

ul.essay-list {
    margin-left: 0px;
    margin-right: 0px;
    padding: 0 0 10px 0;
}

/* .fb-like[style] { position: relative; left: 8px;} /* This just doesn't work in custom.css but it does work right in the div */
.twitter-share-button[style] { vertical-align: text-bottom !important; } /* padding-left: 8px; caused the tweet button to be cut off on the right */

hr.fancy-hr {
    padding: 0;
    border: none;
    border-top: thin double #333; /* Originally had medium double which showed up as such. But thin double is only one line. */
    color: #333;
    text-align: center;
}

hr.fancy-hr:after {
    content: "§"; /* original character BUT this trick does not seem to work any more*/ 
    content: "*";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

/*  This places a picture on the left and text on the right. Not used as of Aug 2021 for Mobile First. */

.container {
  display: flex;
  align-items: center;
  justify-content: center
}

img {
  max-width: 100%
}

.image {
  flex-basis: 60%
}

.text {
  font-size: 20px;
  padding-left: 20px;
}