html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{  font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-size: 100%;	/* 12 point */
}

/* border: 1px solid #000000;   For Debugging  */


/* ============================================================================================================= */
/*        MAIN CONTAINERS                                                                                        */
/* ============================================================================================================= */

#main_container, #header_container, #body_container, #footer_container, #gutter_container
{  margin-left: auto; 
   margin-right: auto;
}

#main_container
{  background: #FFFFFF;
   Width: 1100px;
   border-radius: 25px;
   margin-top: 15px;
}

#header_container
{  background: #00A082;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
}

#body_container
{  background: #FFFFFF;
   border: 4px solid #00A082;
}

#footer_container
{  background: #00A082;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
}

#gutter_container	/* To make a gap of white space at the bottom, below the footer */
{  background: #FFFFFF;
   Width: 1100px;
   font-size: 80%;	/* So height of the gap at bottom matches gap at top */
}


/* ============================================================================================================= */
/*        TITLES                                                                                                 */
/* ============================================================================================================= */

h1
{  font-size: 180%;
   padding-top: 50px;
   text-align: center;
   display: block
   clear: both;
}

/* h2 is used only for the "slide show is paused" message */
h2
{  font-size: 120%;
   color: white;               /* Start with color white so message is hidden */
   text-align: center;
   display: block
}

/* ============================================================================================================= */
/*        HEADER                                                                                                 */
/* ============================================================================================================= */

.Header_Text
{  font-family: 'times new roman', times, serif;
   font-size: 250%;
   padding-top: 25px;
   padding-bottom: 25px;
   text-align: center;
   color: #FFFFFF;
}


/* ============================================================================================================= */
/*        BODY                                                                                                   */
/* ============================================================================================================= */

.Div_Logo
{  float: left;
   padding-top: 30px;
   padding-left: 50px;
}

.Logo_Image
{  width:135px;
}

.Text_Large_Font_1
{  font-size: 145%;
   text-align: center;
   padding-top: 50px;
   padding-bottom: 40px;
}

.Text_Large_Font_2
{  font-size: 145%;
   text-align: center;
   padding-top: 50px;
}

.Text_Large_Font_3
{  font-size: 145%;
   text-align: center;
   padding-top: 30px;
}

.Text_Large_Font_3_Slide_Show    /* Added Oct 9, 2025 when "Slide Show" title added */
{  font-size: 145%;
   text-align: center;
}

.Text_Large_Font_4
{  font-size: 145%;
   text-align: center;
   padding-top: 40px;
}

.Div_Left_Picture
{  float: left;
   width: 425px;
   display: none;		/* This hides the picture until the script shows the selected one by setting it to display: block */
}

.Div_Pause_Resume_Buttons
{  float: left;
   text-align: center;
   width: 242px;
   /* padding-top: 25px;           Removed Oct 9, 2025 when "Slide Show" title added */
}

.Div_Right_Picture		/* A separate Div_Left_Picture & Div_Right_Picture are needed to make slide show work */
{  float: left;
   width: 425px;
   display: none;
}

	/* NOTE:  Using slash & asterisk is okay for comments in this file, but DO NOT use 2 slashes !!! */

.Poster_Image
{  /* 340/220 px is the exact same ratio as 4.25/2.75 inch */
   /* Specifying both width & height compensates for any slight errors in aspect ratio when I did the screen captures */
   width: 340px;
   height: 220px;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   border-style: solid;
   border-width: 2px;
   border-color: #9B7D50;
}

.One_PR_button
{  border-style: solid;
   border-width: 1px;
   padding: 12px 20px;      /* 1st is top & bottom, 2nd is right and left */
   text-decoration: none;
   font-size: 150%;
   margin-bottom: 25px;
   cursor: pointer;         /* Changes cursor to a hand */
}

.One_PR_button:hover
{  background: #D0D0D0;  
}

.Text_Normal_Font
{  font-size: 110%;
   text-align: center;
   padding-left: 150px;
   padding-right: 150px;
   padding-top: 20px;
}

.Text_Left_Justified_1
{  font-size: 110%;
   text-align: left;
   padding-top: 20px;
   padding-left: 285px;
}

.Files_Table
{  font-size: 120%;
   margin-left: auto;
   margin-right: auto;
   padding-top: 40px;
   white-space: pre;
   text-align: left;
   line-height: 1.5;
}

#File_Link
{  color: #00A082;
   font-weight: bold;
   text-decoration: underline;
   border-style: none;
   padding: 2px 5px 4px 5px;		/* For hover background */
}

a#File_Link:hover
{  background: #E0E0E0;
   border-radius: 5px;
}

.Text_Left_Justified_2
{  font-size: 100%;
   text-align: left;
   padding-top: 30px;
   padding-left: 285px;
   padding-bottom: 10px;
}

.Book_Links
{  font-size: 120%;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 3px;
}

#Email_Container
{  text-align: center;
   padding-top: 24px;
   padding-bottom: 21px;
}

.Email_Image
{  width:282px;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

/*  Removed the following when I switched email adrs from text to an image on 10/10/2022 to prevent spam bots from being able to read it
#Email_Link
{  font-size: 125%;
   color: #00A082;
   text-decoration: underline;
   font-weight: bold;
   border-style: none;
   padding: 2px 5px 4px 5px;	 For hover background 
} */

a#Email_Link:hover
{  background: #E0E0E0;
   border-radius: 5px;
}


/* ============================================================================================================= */
/*        FOOTER                                                                                                 */
/* ============================================================================================================= */

.Footer_Text
{  font-size: 125%;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #FFFFFF;
}