/*Color Scheme:
#BBBBBB; - light grey color of the main background
#888888; - darker grey color used for some borders
#F0F0F0; - almost white; use for text with dark background
#F2F2F2; - even whiter, but not perfectly white
#101045; - dark blue
#3A3A90; - a lighter blue used for some text in h2 and h3 headers

#205555; - greenish color

#bd530d; - orange color used for "under construction" heading

#0040BB; - blue used for links
#66CCFF; - lighter blue, used for links within a figure caption
*/


@font-face {
   font-family: HersheyFontMinimal;
   src: url(HersheyFontMinimal_regular.woff);
}

@font-face {
   font-family: HersheyFontMinimal;
   src: url(HersheyFontMinimal_italic.woff);
   font-style: italic;
}

@font-face {
   font-family: HersheyFontMinimal;
   src: url(HersheyFontMinimal_bold.woff);
   font-weight: bold;
}

@font-face {
   font-family: HersheyFontMinimal;
   src: url(HersheyFontMinimal_bolditalic.woff);
   font-style: italic;
   font-weight: bold;
}

/*PAGE LAYOUT -------------------------------------------------------------------*/

body {
   font-family: HersheyFontMinimal;
   margin: 0;
   font-size: 28px;
   background-color: #BBBBBB; /* Style the body tag with a background color, then use class="paper" inside a div element (within the body) to make the page look like a sheet of paper. */
   min-width: 1050px; /*Prevent the page from getting squashed too much when the browser window is resized.*/
  }

/* style the page to look like a sheet of paper */
.paper {		
   background-color: #FFF;
   margin-left: 15px;
   margin-right: 15px;
   margin-top: 15px;
   margin-bottom: 20px;
   padding-top: 40px;
   padding-left: 100px; 
   padding-right: 100px;
   padding-bottom: 40px;
   box-shadow: 1px 1px 15px 2px #000;
   line-height: 1.3; /*set line spacing*/
   }

 .paper:after {		/*add this blank content to the bottom of the "paper" div, to ensure that figures etc. don't overflow the bottom of the paper */
	content:" ";
	display:table;
	width:100%;
	}

   
/*HEADINGS ---------------------------------------------------------------------*/ 

h1 {
	color: #EEEEEE;
	background-color: #bd530d;
	font-weight: normal;
	font-size: 2em;
	text-align: center;
	margin-top: 0;
	padding: .1em;
	border-radius: 10px;
}

h2 {
	color: #205555;
	font-weight: bold;
	margin-top: 1.5em; 
	margin-bottom: .5em;
}

h3 {
	color: #205555;
	font-weight: bold;
	margin-top: 1.5em;
	margin-bottom: .5em;
	}


/*HEADER and FOOTER -------------------------------------------------------------*/

header {
	margin-top: 10px;
	color: white;
}

header div {
	display: table;  /*display each div within the header as a table, so that I can align everything properly*/
	margin-left: 15px;
	margin-right: 15px;
}

footer {
    margin-bottom: 10px;
	color: white;
	text-align: center;
	margin-left: auto;
    margin-right: auto;
}

footer div {
	display: table;  /*display each div within the footer as a table, so that I can align everything properly*/
	margin-left: 15px;
	margin-right: 15px;
}


.title {
	font-size: 1.5em;
	margin-top: 0;
    margin-bottom: 0;
	}

.title:before {
	content: "Faithful Science";
	text-shadow: 0 0 8px black;
}
	
.subtitle {
	font-size: 1em;
	margin-top: 0;
    margin-bottom: .5em;
    font-weight: normal;
	text-shadow: 0 0 8px black;
}

.subtitle:before {
	content: "A Christian\2019s Guide to the Study of Creation \A"; /* the "\A" escape sequence, together with "white-space: pre;", is used to create a line break. The "\2019" escape sequence creates an apostrophe (equivalent to html "’") */
	white-space: pre;
}

.footertext {
	text-align: center;
	margin-left: auto;
    margin-right: auto;
}

.footertext:before {
	content: "Copyright 2015-2026 by Joshua Hershey \A (draft 5/21/2026) \A"; /* the "\A" escape sequence, together with "white-space: pre;", is used to create a line break */
	white-space: pre;
}

.footertext:after {
	content: "This is a work in progress. New sections will be added as I finish them."; 
	font-size: 22px;
}


.TOClink {
	display: inline-block;
	margin: 0px;
	margin-bottom: .5em;
	border: 1px solid #BBBBBB;
	border-radius: .2em;
	text-align: right;
	padding: .2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	color: #EEE;
	background-color: rgba(0,0,0,.3);
}

.homelink {
	display: inline-block;
	margin: 0px;
	margin-bottom: .5em;
	border: 1px solid #BBBBBB;
	border-radius: .2em;
	text-align: left;
	padding: .2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	color: #EEE;
	background-color: rgba(0,0,0,.3);
}

.TOClink:before {
	content: "Table of Contents";
	position: relative;
}

.homelink:before {
	content: "Home";
	position: relative;
}

.TOClink:hover {
	border: 1px solid white;
	box-shadow: 0 0 3px white;
	color: white;
	background-color: rgba(0,0,0,.1);
}

.homelink:hover {
	border: 1px solid white;
	box-shadow: 0 0 3px white;
	color: white;
	background-color: rgba(0,0,0,.1);
}

.nextpage {
	text-align: right;
	border-radius: 10px;
	padding: .2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	color: #EEE;
	background-color: #205555;
	border-top: 3px solid #DDD;
	border-right: 3px solid #444;
	border-bottom: 3px solid #444;
	border-left: 3px solid #DDD;
} 

.previouspage {
	text-align: left;
	border-radius: 10px;
	padding: .2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	color: #EEE;
	background-color: #205555;
	border-top: 3px solid #DDD;
	border-right: 3px solid #444;
	border-bottom: 3px solid #444;
	border-left: 3px solid #DDD;
} 

.nextpage:hover {
	color: white;
	box-shadow: 0px 0px 4px 2px rgba(255,255,255,.5);
	}

.previouspage:hover {
	color: white;
	box-shadow: 0px 0px 4px 2px rgba(255,255,255,.5);
}

.nextpage:before {
	content: "NEXT PAGE \21e8"; /*the \21e6 displays a left arrow, hexidecimal symbol x21e8 (html character ⇨) */
	position: relative;
}

.previouspage:before {
	content: "\21e6  PREVIOUS PAGE"; /*the \21e6 displays a left arrow, hexidecimal symbol x21e6 (html character ⇦) */
	position: relative;
}



/*TEXT and IMAGES ---------------------------------------------------------------------------------*/

.paper p:before {	/*use this pseudo-element to prevent paragraphs from being "squashed" by floating objects*/
	content: "";
	width: 10em;  /*minimum width for paragraph text*/
	display: block;
	overflow: hidden;
}

.paper a {            /*style hyperlinks that appear within the page (not the header or footer) */
	color: #0040BB;    /*keep hyperlinks blue, even after they are clicked */
	text-decoration: none;  /*remove underline from hyperlinks*/
} 

.paper a:hover {
	text-decoration: underline;  /*show underline while hovering*/
} 

sup {font-size: .7em;} /*make superscript smaller than normal font*/
sub {font-size: .7em;} /*make subscript smaller than normal font*/


.nowrap { /*use to prevent line breaks*/
	white-space: nowrap;
}

.indent {margin-left: 50px;}

.center {
	text-align: center;
	margin-left: auto;
    margin-right: auto;
}

.center-vertical {		/*Found this trick online somewhere. Seems effective.*/
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.floatleft {float: left;}

.floatright {float: right;}

.inline {display: inline;}

.nopadding {padding: 0;}

.nomargin {margin: 0;}

.hide {      /* used in mathematical derivations, and maybe I'll find other uses for it too */
	visibility: hidden;  
}

.figleft {	/*use for left-floating figures*/
	float: left;
	margin-left: 0;
	margin-right: 40px;
}

.figwide {  /*use for non-floating figures */
	float: none;
	margin-left: 0;
}

.figfull {	/*use for full-width figures*/
	float: none;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

figure {
	display:table;
	width:1px; /*This line prevents the figcaption element from stretching beyond the width of the figure itself. Tables stretch to hold the largest non-wrapping element (in this case, the figure), so setting the width to 1px ensures that the caption won't stretch beyond that, no matter how small the figure is.*/
	float: right;
	margin-right: 0;
	margin-top: .8em;
	margin-bottom: .8em;
	border: 5px solid #205555;
	background-color: #205555;
}

figcaption {
	color: white;
	font-size: .8em;
	text-align: center;
	padding: 10px;
}

figcaption p  {
	margin-bottom: 0px;  /*shorten spacing below figure caption*/
	}

.paper figcaption a {
	color: #66CCFF; /*use a lighter color for links in a figure caption, because background is dark */
}

.paper figcaption .fn a {
	color: #0040BB; /*but don't use the lighter color in footnotes that appear within a figure caption*/
}

.license {  /*use withing figcaption to style attribution and licensing information*/
	font-size: .8em;
	color: #BBB;
	text-align: left;
	margin-top: 1em;
}

.license .star {
	font-size: 1.25em;	/*increase size of footnote text inside the license div, so it's the same size as other footnotes*/
}


/*MATHEMATICAL EQUATIONS and FORMULAS---------------------------------------------------------------*/

.math {  /*use to style a mathematical expression as block text, and prevent word wrap*/
	display: block;
	white-space: nowrap;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 50px;
	/*font-style: italic;    (maybe do this after adding math symbols to the italic version of my custom font)*/
}

td .math {
	margin-left: inherit;   /*don't indent equations when they're inside a table*/
}

.fraction, .fraction td {  /*display fractions using tables with class="fraction"*/
	display: inline-table;
	vertical-align: middle;
	border-style: solid;
	border-width: 0px;
	border-collapse: collapse; /* Collapse table borders into a single border. Note: if a !DOCTYPE isn't specified, this can produce unexpected results. */
	text-align: center;
	padding: 1px;		
	margin: 0px;
	/*font-style: italic;    (maybe do this after adding math symbols to the italic version of my custom font)*/
}

.fraction tr:first-child td {  /*style the numerator of a fraction (i.e. the first cell in a fraction table)*/
	border-color: black;
	border-bottom-width: 2px; /* anything less than 2px seems too thin for my phone browser (it doesn't always display) */
}


/*TABLES and LISTS --------------------------------------------------------------*/

table, th, td {
	border-style: solid;
	border-collapse: collapse; /* Collapse table borders into a single border. Note: if a !DOCTYPE isn't specified, this can produce unexpected results. */
	text-align: center;
}

table {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 1em;
	border-width: 5px;
	border-color: #205555;
}

th, td {
    border-width: 3px;
	border-color: #888888;
	padding-top: .3em;
	padding-bottom: .3em;
	padding-left: 1em;
	padding-right: 1em;
}

ol {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

ul {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

li {
	margin-left: 1.5em;
	margin-bottom: .5em;
}


/*FOOTNOTES----------------------------------------------------------------------*/

	.star {     /*this is used with a span tag to create the clickable star for footnotes */
		color: #0040BB;
		cursor: pointer;  /*display the pointer when the cursor is placed over the star, so users know they can click it*/
		/*position: relative;*/
	}

	figcaption .star {
		color: #66CCFF;  /*use the lighter shade of blue within a figure caption*/
	}

	.star:hover {
		text-shadow: 0 0 8px #0040BB;  /*show text shadow while hovering */
	}
	
	.star:before {
		content: "*";
	}

	.star:focus  .fn {   /* show the footnote text when the star is clicked */
		display: block;
		z-index: 1000; /*use a large z-index to ensure that this element doesn't get buried by other elements*/
		padding: 1em;
		box-shadow: 2px 4px 10px #000000;
		position: absolute;
		left: 10%;
		right: 10%;
		background-color: #EEEEEE;
		color: #0040BB;
		font-size: .8em;
		text-shadow: none;
		}

	.star:hover  .fn {   /* show the footnote text during hover. IMPORTANT! This is necessary to allow users to click links within the footnote.*/
		display: block;
		z-index: 1000; /*use a large z-index to ensure that this element doesn't get buried by other elements*/
		padding: 1em;
		box-shadow: 2px 4px 10px #000000;
		position: absolute;
		left: 10%;
		right: 10%;
		background-color: #EEEEEE;
		color: #0040BB;
		font-size: .8em;
		text-shadow: none;
		}		
			
	.fn {		/*use with span element for footnotes*/
		display: none;  /*hide footnote unless the star is clicked*/
		}		
	
	
	.fn:before {
		font-size: 1.5em;
		content: "* "
		}

	.fn a {
		text-decoration: underline;
	}
	
	.fn a:hover {
		text-shadow: 0 0 15px #0040BB;
	}

		

/*another approach to making footnotes, using the details tag
(Note: The details tag doesn't work on firefox (yet) or IE; if support is added, maybe use this for footnotes instead.) 

		details {   
			display: inline;
		}

		details summary:after {
			color: blue;
			content: "*";
		}

		details summary::-webkit-details-marker {
			display: none;	
		}
*/


/*SEMANTIC ELEMENTS -------------------------------------------------------------*/

dfn {  /*definition tag: use when defining a term*/
	font-style: italic;
	font-weight: bold;
}

blockquote {
	display: table;
	font-size: .92em;
	color: #205555;
	padding: 1em;
	background-color: #FFFFDD;
	box-shadow: inset 0px 0px 40px rgba(220,150,60,0.5);  /*This is a reddish-brownish color. The alpha value is used to lighten the shadow. To match the greenish color instead use rgba(32,85,85,.05)*/
}

/*EXAMPLE BOXES------------------------------------------------------------------*/

.example {
	display: table;  /* maybe try some other display properties also, to see which works best.*/
	border: 3px;
	border-style: solid;
	padding: 15px;
	border-radius: 20px;
	border-color: #205555;
	background-color: #EEEEEE;
}

.examples {	
	display: table;  
	border: 3px;
	border-style: solid;
	padding: 15px;
	border-radius: 20px;
	border-color: #205555;
	background-color: #EEEEEE;
}

.example:before {
	content: "Example";
	display: block;
	position: relative;
	top: -15px;
	left: -15px;
	padding: 15px;
	padding-bottom: 0;
	font-weight: bold;
	color: #205555;
}

.examples:before {
	content: "Examples";
	display: block;
	position: relative;
	top: -15px;
	left: -15px;
	padding: 15px;
	padding-bottom: 0;
	font-weight: bold;
	color: #205555;
}

/*STICKY NOTES ------------------------------------------------------------------*/


.note {		/*use class="note" with <div> tag for small, floating notes*/
	float: right;
	min-width: 30%;
	max-width: 40%;
	width: 16em;	/*preferred width, can be overridden by max and min*/
	padding-top: 1em; /*change to 1.5 when including the word "Note" at the top -- see below */
	padding-bottom: 1em;
	padding-left: 1.5em;
	padding-right: .5em;
	margin: 1em;
	background-color: #FFFF88;
	position: relative; /* This line is needed for the "folded corner" effect */
	/*overflow: hidden;  /*I had used this line to prevent the shadow of the folded corner effect from overflowing, but unfortunately it also prevents footnotes from displaying properly when the footnote is contained within a note. So, I'm removing this line for now.*/
	box-shadow: 2.5px 2.5px 2px #888888;
}


.widenote {    /*use "widenote" for longer, full-width notes */
	/* OLD VERSION: 
			float: right;
			min-width: 75%;
			max-width: 90%;
			width: 40em;  (preferred width, can be overridden by max and min)
	*/
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1.5em;
	padding-right: .5em;
	margin: 1em;
	background-color: #FFFF88;
	position: relative; /* This line is needed for the "folded corner" effect */
	/*overflow: hidden;  /*I had used this line to prevent the shadow of the folded corner effect from overflowing, but unfortunately it also prevents footnotes from displaying properly when the footnote is contained within a note. So, I'm removing this line for now.*/
	box-shadow: 2.5px 2.5px 2px #888888;
}

.note::before, .widenote::before {  /* Create the "folded corner" effect  */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-width: 25px 25px 0 0;
  border-style: solid;
  border-color: #fff #FFFF99;
  box-shadow: 2.5px 2.5px 2px #999977;
}

/* Write the word "Note" at the top left corner of sticky notes. Removed for now.
If I decide to include this again, also change padding-top 1.5 for notes and widenotes (see above)
 
.note::after, .widenote::after {  		
  content: "Note";
  font-weight: bold;
  color: #205555;
  position: absolute;
  top: .4em;
  left: 1.5em;
}
*/

/*TIPS --------------------------------------------------------------------------*/

.tip {
	display: table-cell;
	padding: 15px;
	border-radius: 60px;
	color: F2F2F2;
	background-color: #205555;
	box-shadow: 2px 4px 10px #000000;
}



/*FINEPRINT ---------------------------------------------------------------------*/

.fineprint {
   font-size: 22px;
   display: inline;
   border-radius: 3px;
   color: #777777;
   line-height: 34px;  /*make the line height the same as the main body, even though the text is smaller. (To avoid weird spacing problems.)*/
   padding: 5px;
   }

.fineprint:before {
	content: "FINE PRINT: ";
	font-size: 18px;
   }   
   
.fineprintblock {
	margin-top: 1em;
	font-size: 22px;
   	display: table;
	border: 1px;
	border-style: solid;
	padding: 10px;
	border-radius: 5px;
	color: #444444;
   }   
  
.fineprintblock:before {
	content: "THE FINE PRINT";
	font-size: 18px;
	text-align: center;
	display: block;
	background-color: #DDDDDD;
	border-radius: 3px;
   }   
   


/*TABLE OF CONTENTS PAGE --------------------------------------------------------*/

		.table_of_contents {
			font-size: 15px;
		} 

		.table_of_contents a {
			text-decoration: none;
			color: inherit;
		}	

		.table_of_contents a:hover {
			text-decoration: none;
			color: #3A3A90;
		}

		.table_of_contents h1 {
			display: table;
			border-style: solid;
			border-width: 2px;
			border-color: #101045;
			background-color: #DDDDDD;
			font-weight: bold;
			color: #101045;
			padding-top: .1em;
			padding-bottom: .1em;
			padding-left: 30px;
			padding-right: 30px;
			border-radius: 10px;
			margin-top: 1.5em; 
			margin-bottom: .5em;
		}

		.table_of_contents h2 {
			color: #101045;
			font-weight: bold;
			margin-top: .5em;
			margin-bottom: .1em;
			margin-left: 15px;
			}

		.table_of_contents h3 {
			color: #555555;
			font-weight: bold;
			margin-top: .25em;
			margin-bottom: .25em;
			margin-left: 60px;
			}