/* 
@charset "UTF-8";
 */

body {
    font: 1em Verdana, Arial, Helvetica, sans-serif;
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    }
    
/* Flex container for the byebye_slide */
.byebye_slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 4em;
    max-width: 90vw;          /* NEW: prevents overflow on small screens */
    width: 100%;
    padding: 0 2em;           /* NEW: consistent horizontal padding (controls the "margins" for both image and text) */
    box-sizing: border-box;   /* NEW: padding is included in width calculation */
}

/* Center the byebye_greeting div */
.byebye_greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;              /* NEW: ensure it respects the padding set on .byebye_slide */
}

/* Align the byebye_message div to the left and fully justify the text */
.byebye_message {
    align-self: flex-start;
    text-align: justify;
    width: 100%; /* Ensure it takes the full width of the container */
}

/* Additional styling for better visualization */
.byebye_greeting img {
    max-width: 100%;
    height: auto;
    display: block;           /* NEW: removes inline spacing issues */
    margin: 0 auto;           /* NEW: centers the image if it is smaller than the container */
}

/* <<< CHANGE START >>> - Remove side margins from h1 and p so they align with the image (side limits now come only from .byebye_slide padding) */
.byebye_greeting h1 {
    margin: 2em 0;            /* CHANGED: was 2em 2em → only vertical margin */
    width: 100%;
}

.byebye_message p {
    margin: 2em 0;
}

/* Second slide container */
.welcome_slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1em 2em;         /* Shared side "margins" (adjust 2em if you want more/less space) */
    box-sizing: border-box;
}

/* Images section: full width, centered content */
#images {
    width: 100%;
    justify-content: center;
    padding: 1em 0;           /* top/bottom spacing only */
    margin: 0;
    display: flex;            /* <<< ADD THIS SINGLE LINE ONLY >>> */
}

/* Image wrapper: full width */
#left_image {
    width: 100%;
    padding: 0;
    text-align: center;       /* fallback centering */
}

/* <<< CRITICAL FIXES FOR THE HORSE IMAGE >>> */
/* Force the single image to fill the container horizontally while preserving its wide aspect ratio */
/* <<< FIXED FOR FULL VIEWPORT ADJUSTMENT WITHOUT CROPPING >>> */
/* Make the horse image fully responsive: fills available width, shows entire image, no cropping */
#left_image img {
    width: 100%;              /* stretches to full container width (minus the 2em side padding) */
    max-width: 100%;          /* prevents overflow on very large screens */
    height: auto;             /* preserves original aspect ratio */
    display: block;
    margin: 0 auto;           /* centers it horizontally if needed */
    /* object-fit removed — no cropping, full image always visible */
}
/* <<< END >>> */

/* Text sections: force exact alignment with image by inheriting the container's side padding space */
#greeting,
#introductory_comment,
#salutation {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 0;                 /* no extra padding */
    margin: 1em 0 0 0;
}

/* Ensure all child elements (h1, p, h3) do not exceed the parent's padded area */
#greeting h1,
#greeting p,
#introductory_comment p,
#salutation h3,
#salutation p {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Specific alignments as in your original design */
#greeting,
#salutation {
    text-align: center;
}

#introductory_comment {
    text-align: left;
}
    
#container {
    width: 95%;               /* Wider than before — uses more of the screen */
    max-width: 1000px;        /* Allows it to grow on large screens, up from ~680px effective */
    min-width: 320px;
    margin: 0 auto;
    padding: 0 1em;           /* Small outer padding for very narrow screens */
    box-sizing: border-box;
}

/* HEADER */
div#header {
    display:block;
    width: 100%;
    margin: 0 auto;
    text-align:center;
}

header h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: center;
    margin-top: -10px;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    letter-spacing: 0.05em;
    word-spacing: 0.3em;
    color: #f00;
}
 
h2.Subtitle {
    margin-top:0em;
    font-variant:small-caps;
    text-align:center;
    color:#f00;
    font-size: 1.4em;
}

h2.Body_Subtitle {
    margin-top:1em;
    font-variant:small-caps;
    text-align:center;
    color:#f00;
    font-size: small;
}

header h6 {
    margin: auto; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding-bottom: 10px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    font-family: cursive;
    font-size: small;
    text-align: center;
    color: #f00;
}

header hr {
    float:none;
    color: #fff;
}

/*  MAIN CONTENT */

#mainContent {
    background: #fff;
    text-align: justify;
    background-color: #fff;
    color: #000;
    padding-left: 25px;       /* Was 50px — halved */
    padding-right: 25px;      /* Was 50px — halved */
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* MENUBAR */
    
#mainContent ul {
float:left;
width:100%;
padding:0;
margin:0 0 30px 0;
list-style-type:none;
}

#mainContent ul li a {
float:left;
text-decoration:none;
color:#fff;
width:23.5%;
background-color:#f00;
padding:0.2em;
border-right:1px solid white;
text-align:center;
}

/* MENUBAR LINKAGE */

#mainContent ul li a:hover {background-color:#fff; color:#888; font-weight:900;}
#mainContent ul li a.last {border-right:none;}
#mainContent li {display:inline;}


/* Viewing Guide */

#container #mainContent p.Guide {
    font-size: 0.8em;
    color:#fff;
    }	


/* TABLE OF CONTENTS */
.toc-wrapper {
    margin: 2em 0;
    text-align: center;   /* Centers the title */
}

.toc-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2em;
    margin-top: 1em;
}

#tableContent {
    flex: 1 1 300px;      /* Takes available space, minimum 300px */
    text-align: left;
}

.fire-horse {
    max-width: 100%;
    height: auto;
    display: block;
    flex: 0 0 auto;       /* Doesn't grow/shrink unnecessarily */
}

/* Narrow screens: horse centered above the table list */
@media (max-width: 900px) {
    .toc-content {
        flex-direction: column;
        align-items: center;
    }
    
    .fire-horse {
        width: 70%;       /* Moderate size, centered above */
        margin: 0 auto 1.5em auto;
    }
    
    #tableContent {
        width: 90%;
    }
}

/* Wide screens: table list on left, large horse directly on right */
@media (min-width: 901px) {
    .toc-content {
        flex-wrap: nowrap;        /* Force side-by-side */
        justify-content: space-between;
        align-items: flex-start;
        gap: 3em;                 /* More breathing room around the large image */
    }
    
    #tableContent {
        flex: 1;
        max-width: 50%;           /* Limits the table width so the horse has more space */
        margin-right: 2em;
    }
    
    .fire-horse {
        width: 550px;             /* Much larger — adjust up to 600px or 650px if you want even bigger */
        max-width: none;          /* Allows it to exceed container width constraints if needed */
        flex-shrink: 0;
    }
}
/* MAIN CONTENT */

span.firstLetter {
    float:left;
    width:1.1em;
    font-size:400%;
    font-family:cursive;
    color:white;
    line-height:85%;
}

#container #mainContent hr {
    color: #f00;
}

span.super {
    vertical-align: super;
    font-size:0.6em;
}

/* TABLE OF CONTENTS AND IMAGE */

#mainContent #tableContent {
    background-color:transparent;
    text-align:left;
    float:none;
    display:block;
}

#mainContent h2.Subtitle {
    text-align:left;
}

.SectionSubTitle {
    text-align:center;
    font-size:1.6em;
}

#mainContent h3.Subtitle {
    text-align:left;
    color:#f00;
    font-family: 'Bradley Hand', cursive;
    font-size: 1.3em;
}

#mainContent #tableContent ul {
    background-color:transparent;
    float:none;
    list-style:inside;
    list-style-type:disc;
}

#mainContent #tableContent ul li {
    float:none;
    text-align:left;
    display:block;
}

#TableContent li.SectionTitle ul.TableSubContent li.SubContentTitle {
    font-variant: small-caps;
    color: #000000;
}

#mainContent #tableContent .SectionTitle {
    font-size: 1.2em;
    font-weight:bold;
    color: #807A79;
    font-variant: small-caps;
/* 
    color: #C0B798;
 */
}

#mainContent #tableContent ul li a {
    background-color:transparent;
    border:none;
    float:none;
    text-align:left;
    font-size:0.8em;
    
}

#mainContent #tableContent ul li a:link {color:#F00;}
#mainContent #tableContent ul li a:visited {color:#888;}
#mainContent #tableContent ul li a:hover {color:#000; font-weight:700;}
#mainContent #tableContent ul li a:active {color:#f00;}


/* RETURN TO INDEX LINKAGE */

footer.Contents {text-align:center; color:#FFF}

footer.Contents a:link {color:#F00;font-size:0.8em; text-decoration:none}
footer.Contents a:visited {color:#888;font-size:0.8em;}
footer.Contents a:hover {color:#000; font-weight:700;font-size:0.8em;}
footer.Contents a:active {color:#f00;font-size:0.8em;}

/* Thumbnails */
/*Picture Frames*/

span.Photo_Frame {
    float:right;
    padding: 0.5em;
    background-color:#fff;
    border-style:solid;
    border-width:0.5em;
    border-color:#ADA16E;
    margin-left: 1em;
    margin-top:1em;
    margin-bottom:1em;
}

.gallery {
    display:none;
}

/* COMMON LISTS */

section#the_coup .Itemization ol {
    background-color:transparent;
    float:none;
    list-style:inside;
    list-style-type:disc;
}

/* SPECIAL EFFECTS */

section p.Intro:first-letter {
    float:left;
    display:block;
    position:relative;
/* 
    margin-top: 0.12em;
 */
    margin-top: -0.11em;
/* 
    margin:-0.125em;
 */
    margin-right:0.1em;
    margin-left:0em;
    text-transform:uppercase;
    overflow:hidden;
    font-family:Georgia;
/* 
    font-size:4.4em;
 */
    font-size:4em;
/* 
    line-height:1.1em;
 */
 }

img.sheep_image {
    float:right;
    clear:right;
    background-color: #666;
}
    
/*
span.firstLetter {
    float:left;
    width:1.1em;
    font-size:400%;
    font-family:cursive;
    color:white;
    line-height:3em;
    margin-top:1em;
}
*/

span.super {
    vertical-align: super;
    font-size:0.6em;
}

p.Footnotes {
    font-size: 0.8em;
    clear:left;
}

h3 {
    text-align: left;
}

.italic_insert {
    color: #f00;
}

/* INTERNAL LINKAGE */
a.InternalLink:link {color:#888;font-size:1em; text-decoration:none}
a.InternalLink:visited {color:#AAA;font-size:1em;}
a.InternalLink:hover {color:#F00; font-weight:700;font-size:1em;}
a.InternalLink:active {color:#FFF;font-size:01em;}

/* Sideboard Linkage */

a.Sideboard:link {color:#CDA210;font-size:1em; text-decoration:none}
a.Sideboard:visited {color:#AAA;font-size:1em;}
a.Sideboard:hover {color:#FFF; font-weight:700;font-size:1em;}
a.Sideboard:active {color:#000;font-size:01em;}


 
/* HORIZONTAL LINE */

hr {
    float: left;
    width:30%;
}

/* FOOTER */

footer#webdesign {
/*	clear: both; */
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #999;
}

div#footer_item_right {
    text-align: right;
    text-align: -moz-right;
    text-align: -webkit-right;
}

.Italics {
    font-style:italic;
}

.SmallCaps {
    font-variant:small-caps;
}

/*.FooterLeftFloat {
    float:left;
    margin:0em;
    text-align:left;
    font-size:0.8em;
    padding-left: 2em;
    padding-bottom: 2em;
    border-style:none;
    background-color:#f00;
}

.FooterRightFloat {
    float:right;
    margin:0em;
    text-align:right;
    font-size:0.8em;
    padding-right: 2em;
    padding-bottom: 2em;
    border-style:none;
    background-color:#f00;
}
*/

a.footlink:link {
    font-weight: 400;
    color: #FFF;
    text-decoration: none;
    outline:none;
}

a.footlink:visited {
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    outline:none;
}

a.footlink:hover {
    font-weight: 700;
    color: #000;
    text-decoration: none;
    outline:none;
}

a.footlink:active {
    font-weight: 700;
    color: #000;
    text-decoration: none;
    outline:none;
}


/*This code is responsible for the styling of the first letter of selected paragraphs.*/



em.Decoration {
    font-style:normal;
}

h1.Closing {
    font-style:normal;
    font-family:cursive;
    text-align:center;
    margin-bottom:0em;
    }

p.Signature {
    font-style:normal;
    font-family:cursive;
    text-align:right;
}

/* ========================================
   COLORBOX MODAL RESPONSIVE IMAGE FIX
   Makes images inside both introductory slides fully responsive
   ======================================== */

#cboxLoadedContent img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;   /* Centers the image if it's smaller than the container */
}

#cboxLoadedContent #images {
    width: 100%;
    text-align: center;
    padding: 1em 0;
    margin: 0;
}

/* Make main content padding responsive */
#mainContent {
    padding-left: 30px;
    padding-right: 30px;
}

/* Make tables of contents and images responsive */
#tableContent ul {
    padding-left: 1.5em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    #mainContent {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Adjust header font sizes on small screens */
@media (max-width: 600px) {
    header h1 {
        font-size: 2em;
    }
    h2.Subtitle {
        font-size: 1.2em;
    }
    #mainContent {
        padding-left: 15px;
        padding-right: 15px;
    }
}