/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
	
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Global figcaption style - overrides all specific ones */
figcaption {
    margin-top: 8px !important;
    font-style: italic !important;
    font-size: 0.9em !important;
    color: navy !important;
    text-align: center !important;
}

/* Additional reset styles for images */
img {
  max-width: 100%;
  height: auto;
}


/* Reset default list styles */
ul, ol {
  list-style: none;
}


a {
  text-decoration: underline; 
  color: #0056b3; /* Link color */
  font-size: 1rem;
}
.copyright .parachange a {
    font-size: inherit !important;
    color: #1a365d;               /* clearly distinct from #555555 text */
    text-decoration: underline;
    transition: color 0.25s;
}

.copyright .parachange a:hover,
.copyright .parachange a:focus {
    color: #0056b3;               /* lighter blue on hover for feedback */
} 

a:hover,
a:focus {
  text-decoration: underline; /* Add underline on hover */
  color: #00264d; /* Link color on hover */
}

a:visited {
  color: #004080; /* Visited link color */
}

/* ========== REMEMBRANCE WEEK HEADER STYLES ========== */
/* Active during November 1-12 for Remembrance period */
/* Uses natural poppy image for authentic appearance */

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  position: relative;
}

/* Poppy row container - displays poppies under the header text */
.poppy-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;              /* Space between poppies */
  margin-top: 10px;       /* Space below header text */
  flex-wrap: wrap;        /* Allow wrapping on smaller screens */
}

/* Individual poppy - uses your poppy1.gif image */
.poppy {
  width: 20px;            /* Width of poppy image */
  height: 20px;           /* Height of poppy image */
  background-image: url('/images2/poppy1.gif');  /* Path to your poppy image */
  background-size: contain;     /* Fit image within dimensions */
  background-repeat: no-repeat; /* Don't repeat the image */
  background-position: center;  /* Center the image */
  flex-shrink: 0;         /* Prevent poppies from shrinking */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
  .poppy-row {
    gap: 10px;            /* Slightly smaller gap on tablet */
  }
  
  .poppy {
    width: 18px;          /* Slightly smaller poppies on tablet */
    height: 18px;
  }
}

@media screen and (max-width: 480px) {
  .poppy-row {
    gap: 8px;             /* Smaller gap on mobile */
  }
  
  .poppy {
    width: 16px;          /* Smaller poppies for mobile phones */
    height: 16px;
  }
}

/* ========== END REMEMBRANCE WEEK STYLES ========== */
/* Remember to leave these styles active throughout November */


a.links {
  color: #333333;          /* neutral, readable on #F7F7F7 */
  font-weight: normal;
  text-decoration: underline;
}

a.links:hover,
a.links:focus {
  color: #000000;          /* slightly darker on hover */
}
a.links:visited {
  color: #004d4d;   /* or another accessible colour */
}

.firstletter {
  font-size: 16px; /* Set your desired font size for regular text */
  color: black;   /* Set your desired color for regular text */
}

.firstletter a {
  font-size: 14px; /* Set your desired font size for links */
  color: blue;     /* Set your desired color for links */
  text-decoration: underline; /* Add underline to links */
}

/* Test - make it obvious what's happening */
p.pmargin .mobile-text {
  display: none;
  
  
}

@media screen and (max-width: 1024px) {
  p.pmargin .mobile-text {
    display: inline !important;
	font-size: 1rem;
  }
  
  p.pmargin .desktop-text {
    display: none !important;
  }
}

.center {
  text-align: center;
}
.tcenter {
	text-align: center;
	color: #fff;
    background-color: #2a659c;
}
.tcenter1 {
	font-weight: normal;
	text-align: center;
	background-color: #fff;
	color: #000;
}
.navy1 {
	color:navy;
	font-size: .9rem;
}

.center span {
  display: inline-block;
}


.red {
	color:red;
	font-size: 1rem;
	display: inline-block;
}
.green {
	color:green;
}

.blue {
	color: blue;
	}
.maroon {
	color: maroon;		
	}
.roger-navy, .navy	{
	color: navy;
	font-size: 1rem;
}

.black {
color: black;

}

.gray {
	color: #666;
}
.colred {
	color: red;
}
.clear-float {
    clear: left;
	margin: 0;
}
.clear1-float {
	clear: both;
	
}
.margin {
	margin-top:6rem;
}
.oblique {
font-size: 1rem;
font-style: oblique;
color: navy;	
}
.underline {
  text-decoration: underline;
  font-size: 1rem;
}



/* Gordon Source Quote - Desktop First with Justified Text */
blockquote.gordon-source-quote {
    max-width: 700px;
    margin: 30px auto;
    padding: 25px 30px;
    background: #f8f9fa;
    border-left: 4px solid #1976d2;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    font-style: italic;
    line-height: 1.5;
    color: #444;
    text-align: justify;        /* Justified text on desktop */
    text-justify: inter-word;   /* Better word spacing */
}

blockquote.gordon-source-quote p {
    margin: 0 0 15px 0;
}

blockquote.gordon-source-quote p:last-child {
    margin-bottom: 0;
}

/* Citation styling - only for gordon-source-quote */
blockquote.gordon-source-quote cite {
    display: block;
    margin-top: 20px;
    font-size: 0.9em;
    color: navy;
    font-style: normal;
    text-align: right;
    font-weight: 500;
}
/* End Gordon page blockquote */



/* ========== ADDITIONAL INDIVIDUAL FIGURES ========== */
/* Other single-image components with specific styling */

.awdm {
  /* Another individual portrait figure */
  margin: 1.5rem auto;
  text-align: center;
  width: 90%;
  max-width: 220px;
}

.awdm img {
  width: 100%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
}

.awdm figcaption {
  font-size: 0.9rem;
  color: navy;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* === MOBILE: COLUMN === */
.rogerson-container {
  /* Container with differently-sized images */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 230px;
}

.rogerson-container figure.rog {
  margin: 0;
  text-align: center;
  width: 90%;
  max-width: 200px;
}
.rogerson-container figure.rog1 {
  margin: 0;
  text-align: center;
  width: 90%;
  max-width: 270px;
}

.rogerson-container img {
  width: 90%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
}

/*=========== GORDON PAGE BEM============ */
.gordon-citation .bem-medal {
  margin: 2rem auto 0;
  text-align: center;
  width: 180px;
  order: 2; /* Appears after text on mobile */
  
}

.gordon-citation .bem-medal img {
  width: 100%;
  height: auto;
   
}
.gordon-citation .bem-medal figcaption {
line-height: 1.3;
white-space: nowrap;
}
/* Gordon Mobile Responsive */
@media (max-width: 767px) {
    .gordon-citation .bem-medal figcaption {
        font-size: 0.85em;
        white-space: normal; /* Allow wrapping on small screens */
    }
}
/*===========END GORDON PAGE BEM ==========*/

/* ========== FORMAL CITATION COMPONENT ========== */
/* Professional citation container with medal image and formal styling */

.citation-container {
  /* Formal citation with decorative header */
  width: 95%;
  max-width: 700px;
  margin: 3rem auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(42, 101, 156, 0.12);
  border: 1px solid rgba(42, 101, 156, 0.08);
  overflow: hidden;
}

/* ========== FANCY CITATION HEADER ========== */
.citation-header {
  background: linear-gradient(135deg, #2a659c 0%, #4a90c2 100%);
  color: white;
  text-align: center;
  padding: .8rem .8rem;
  position: relative;
}

.citation-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Decorative element under heading */
.citation-decoration {
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* ========== CITATION CONTENT ========== */
.citation-content {
  padding: 2rem;
  position: relative;
}

/* ========== MOBILE FIRST: MEDAL CENTERED BELOW TEXT ========== */
.obe-medal {
  margin: 2rem auto 0;
  text-align: center;
  width: 120px;
  order: 2; /* Appears after text on mobile */
}

.obe-medal img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}


/* ========== CITATION TEXT ========== */
.citation-text {
  margin: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 1rem;
  font-style: italic;
  color: #2c3e50;
  line-height: 1.5;
  font-family: Georgia, "Times New Roman", serif;
 
  order: 1; /* Appears first on mobile */
  text-align: justify;
  text-justify: inter-word;
}





    body {
	  font-family: 'Roboto', sans-serif;
	  font-size: 16px;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      margin: 20px auto;
	  max-width: 1200px;
	  line-height: 1.4;
	  padding: 1.5rem;
	  background: #F0F0F0; 
	 }
	
	.toplink {
      text-align: center;
      font-weight: bold;
      margin-top: 20px;		
    }
    .toplink a {
      text-decoration: none;
      color: blue;
    }
    .toplink a:hover {
      text-decoration: underline;
    }
	.br {
	white-space: pre-line; /* Preserve line breaks from the content */  	
	}

    /* Style the button */
    .toplink a {
      display: block;
      width: 120px;
      margin: 0 auto; /* Center horizontally */
      padding: 5px 10px;
      color: #fff;
      background-color: #2a659c;
      font-size: 80%;
	  border-radius: 10px;
    }

/*This header CSS for display in November Remembrance
.header {
  display: flex;
  flex-direction: row;
  
  align-items: center;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
/*-------------------------------------------------------Comment out after November Remembrance------------------------------------------*/


.headertext {
  text-align: center;
}

.heading-content {
  text-align: center;
}

.headertext h1 { 
  margin: 10px auto; /* Add margin to center h1 vertically */
  color: white;
  font: normal 1.1rem Georgia, Times, "Times New Roman", serif;
}

.headertext h2 {
  margin: 10px auto; /* Add margin to center h2 vertically */
  color: #ffff99;
  font: normal .9rem Georgia, Times, "Times New Roman", serif;
  margin-top: -10px;
  white-space: nowrap;
}


.headertext h2 .colwhite {
  display: none;
}

.mhr {
  display: none; /* Hide .mhr image for mobile */
}

.colwhite {
  color: #fff;
  font-size: 1rem;
  margin: 0;
}

.mh, span {
  font-size: 70%;
}

	
	
	footer {
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	background: #2a659c;
	height: 10vh;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
	}
	
	footer p {
    margin: 1px;
	font-weight: normal;
	font-style: italic;
	font-size: .85em;
	color: #fff;
    }
	
    #main {
      display: flex;
      flex-direction: column; /* Change to column for mobile view */
      flex: 1;
	  border-left: 1px solid #2a659c;
	  border-right: 1px solid #2a659c;
    }
   
	#main > .nav-content-wrapper {
      display: flex;
	  flex-direction: column;
	  align-items: center; /* Center the items vertically */
      order: 1;
      background:#E8E8E8;
      padding: .25em;
	  }
	.nav-content-wrapper > article {
    width: 100%;
    border-left: none; /* Remove the left border */
    margin-left: 0; /* Remove the left margin */
    }
	
	#main > article {
	flex-wrap: wrap; 
	justify-content: space-between;
	flex: 1;
	order: 1;
	background:#F7F7F7;
	}
	
	article, nav {
    padding: 0.8em;
    }
	article > p {
	margin: 1rem;
    }
	
	h1 {
	font-size: 1.6em; 
    margin: .5em;
    }
	
    h2 {
	font-size: 1.4em; 
    margin: .5em; 
		
    }
		
    h3 {
	font-size: 1.2em; 
    margin: 1.5em; 
	}
	
	h3 span {
	font-size: 1rem;	
	}
	
    h4 { font-size: 1em;
    }
  
   article h2 {
   
   margin-top: 1em;
   margin-bottom: 1em;   
   }
   
   article h3 {
   font-size: 1.2em; 
   }
  
/* Center the text within the larger touch area */
   
    #sn_menu_outer ul {list-style:none;}
	#sn_menu_outer ul ul {border-left:1px solid #000; padding-left: .75em;}
	#sn_menu {width:100%; padding: 0;}
	#sn_menu li {display:grid;grid-template-rows:22px 0fr;overflow:hidden;transition:0.75s;width:100%;}
	#sn_menu li ul {min-height:0;}
	#sn_menu li:focus-within {grid-template-rows:22px 1fr;}
	#sn_menu a {font:17px/18px 'Roboto Condensed', arial, sans-serif; padding:3px 0; text-decoration:underline; color:#1a365d; transition:0.25s; outline:none;}
	#sn_menu a:focus {outline: 3px solid #2c5aa0; outline-offset: 2px; background-color: #2a659c26;} 
	#sn_menu a:hover {color: #0056b3; text-decoration:underline;} 
	#tutorial #info #sn_menu p {font:400 18px/23px 'Roboto Condensed', arial, sans-serif; padding:0; margin:0; color:#2d3748; cursor:pointer; justify-self:start;} 
	#tutorial #info #sn_menu p::before {display:inline-block; content:"\25BC"; color:#1a202c; padding-right:7px;}
	#tutorial #info #sn_menu li:focus-within > p {color:#1a202c;}
	#sn_menu a {
    position: relative;
    display: inline-block;
    width: 200px;
    box-sizing: border-box;
	}

	/* Extend clickable area */
	#sn_menu a::before,
	#sn_menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: auto;
	}

	#sn_menu a::before {
    top: -12px;
	}

	#sn_menu a::after {
    bottom: -12px;
	}

	/* Add space below each link */
	#sn_menu li {
    margin-bottom: 2px; /* Ensures minimal spacing between nav links for tap target accessibility */
	}

   
	.fb-button {
    /* Remove the default outline on all states */
    outline: none;
    }

    .fb-button:focus, .fb-button:hover, .fb-button:active {
    /* Add custom styling when the link is focused, hovered, or active (clicked) */
    outline: transparent;
    }

	.fb-button img {
    width: 146px;
    margin: 1.5rem auto;
    height: auto;
    display: block; /* Ensures the image doesn't have extra space below */
	
	
	}
	.content-div {
    display: flex;
    flex-direction: column;
    margin: 0;  
    }
    .content-div > figure {
     margin-top: -5px;
    }
	
	/*Sidebar Styles*/
  figure.sidepoppy, figure.badge {
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  }

figure.sidepoppy img, figure.badge img {
  display: block;
  width: 100%;
  height: auto;
}
figure.MND img {
  display: block;
  margin: 0 auto;
}

figure.MND {
	color: navy;
    text-align: center;
    font-weight: bold;
	font-size: 1.2rem;
    margin-bottom: 1.5rem;	
  }
figure.poem {
font-size: 1rem;
font-weight:bold;
text-align: center;
width: 82%;
margin: 0 auto;	
}
.poem img {
margin-left: 2rem;	
margin-bottom: 1rem;
}

.cite-style {
text-align: center;
}


.cabin p {
	  text-align: center;
      color: blue;	  
	  }

.cabin img {
  max-width: 44%;
  display: block; /* Ensures the image is displayed as a block element */
  margin: 1.5rem auto;
}
/*End Sidebar Styles*/	

/*Home Page*/
.picture { 
  width: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin-left: auto;
  margin-right: auto;
}

.picture img, .rogerson img, .peever img, .MARR img, .lauchlan img, .home-towerh1 img, .clan img, .tgreen img, .bendorean img, .capt-rogerson img,
.obe_medal img, .cwgc img, .WTO img, .diajohn img, .johnjarman img, .telegram img, .open_boats img, .dianaDeath img, .dailymail img, .banbury img, .alpineflag img, .alpine img { 
  width: 100%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; 
 }	
  
  .rogerson  {
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin-left: auto;
  margin-right: auto;
  }
    
.peever {
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin-left: auto;
  margin-right: auto;
}

.boxcontent {
width:100%;
margin:20px auto;
color: navy;
padding: 10px;	
}
.BOXphot-toptext {
padding:0;
}

.clearfix::after {  /* Clear the floated content */
  content: "";
  display: table;
  clear: both;
}
.cite-foot {
margin-top: 1rem;
}

.blockquote-footer {
  margin: 0;
  padding:0;
  margin-bottom: -7.5rem;
  margin-top: .5rem;
  font-size: inherit;
  display: block; /* Remove flex-related rules */
  border: none; /* Remove borders */
  background: transparent;
}
blockquote, .bq {
color: navy;
margin: 1rem auto;
}
/* Mobile: stacked */
.marr-mac-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 500px;
}

.marr-mac-container figure {
  margin: 0;
  text-align: center;
  width: 200px; /* Smaller than before */
}

.marr-mac-container figcaption {
  font-size: 1rem;
  color: navy;
  }


.home-towerh1 {
  width: 200px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin-left: auto;
  margin-right: auto;
}
.photo-credit {
    font-size: 0.9em;
	 font-style: italic;
    color: navy;
    text-align: center;	
}

.clan {
 width: 90%;
 max-width:500px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 1rem;
 }
 
 .CLANphot-toptext {
	font-size:1rem;	
	color: navy;
	text-align: center;
	margin: 4px 0;	
	}	

 
 .tgreen {
    display: flex;
    flex-direction: column; /* Arrange children vertically */
    align-items: flex-start; /* Align children to the left side */
    position: relative;
	width: 90%;
	
	height: auto;
	margin: 3.75rem auto;
  }
.green-toptext {
    width: 100%; /* Occupy the full width of the container */
	font-size: 2rem;
  }
 .green-undertext1,
 .green-undertext {
  margin: 0; /* Remove default margins */;
  color: navy;
  font-size:.9rem;
 
  } 
  .green-undertext {
   position: absolute;
   top: -25px;
   right: 5px;
  }
  .green-undertext1 {
   position: absolute;
   top: -25px;
  }
.bentxt1 {
 text-align: center;
 color:navy;
 height: auto;
 font-size: .95rem;  
 margin-top: -3rem;
} 
.copyright {
color: #555555;
}
.parachange {
 font-size: 80%;
 }

div .H-lifeboat-text {
    margin-top: 2px;
    margin-bottom: 8px; /* Adjust the margin value to your preference */
	margin-left: 16px;
	line-height: 1.6rem;
	
  }  
 
@media screen and (min-width: 320px) {
  .tranmer-quote {
    width: 60%;
	
    margin: 2rem auto;
	
  }
  /* Quote text box */

  .quote-text p {
  color: #2c3e50;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* Author box */
.author {
  padding: .5rem 1.25rem .5rem 1.25rem;
  margin: 0;
  display: block;
  font-size: 0.95rem;
  font-style: normal;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}
/* ========== COMPLEX QUOTE CONTAINER ========== */
/* Multi-section quote with Gaelic, English, audio, and attribution */

.mydad-container {
  /* Complex quote container with multiple sections */
  width: 90%;
  max-width: 600px;
  margin: 3rem auto;
  background: #F7F7F7;
  border-radius: 16px;
  padding: 2rem;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}

/* ========== GAELIC QUOTE SECTION ========== */
.gaelic-quote {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(42, 101, 156, 0.15);
}

.gaelic-quote p {
  color: #2c3e50;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* ========== ENGLISH TRANSLATION SECTION ========== */
.english-quote {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(42, 101, 156, 0.15);
}

.english-quote p {
  color: #555;
  font-size: 1rem;
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* ========== AUDIO SECTION ========== */
.audio-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(42, 101, 156, 0.15);
}

.audio-info {
  color: #666;
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.audio-info span {
  font-size: 1rem; /* Makes "Sarah's Song" © text 1rem */
}

.audio-info a {
  color: #2a659c;
  text-decoration: none;
  font-weight: 600;
}

.audio-info a:hover {
  text-decoration: underline;
}

/* Audio player styling - UNCHANGED to preserve functionality */
.audio-section audio {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

/* ========== MOTHER TERESA QUOTE SECTION ========== */
.teresa-quote {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.teresa-quote p {
  color: #2c3e50;
  font-size: 1.1rem;
  font-style: italic;
  margin: 0 0 1rem 0;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.teresa-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(42, 101, 156, 0.15);
}

.teresa-quote .navy {
  color: navy;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
}





/* ========== RESPONSIVE COMPLEX QUOTE STYLES ========== */
@media screen and (max-width: 767px) {
  .mydad-container {
    width: 80%;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    box-sizing: border-box; /* ⭐ This ensures padding doesn't overflow */
  }
  
  .gaelic-quote p {
    font-size: 1rem;
  }
  
  .english-quote p {
    font-size: 0.95rem;
  }
  
  .teresa-quote p {
    font-size: 1rem;
  }
  
  .audio-info {
    font-size: 0.85rem;
  }
  
}

@media screen and (max-width: 480px) {
  .mydad-container {
    padding: 1.25rem;
    border-radius: 10px;
  }
  
  .gaelic-quote p {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .english-quote p {
    font-size: 0.9rem;
  }
  
  .teresa-quote p {
    font-size: 0.95rem;
  }
   .alfred-barnes {
   padding: 18px 12px;
   margin: 30px auto;
  }
    
 .quote-text {
  font-size: 1rem;
  }
}

	

.MMphot-undertext {
	font-size:1rem;	
	color: navy;
}
.MMphot-undertext1 {
	font-size:1rem;	
	color: navy;
}
.MMphot-toptext {
	
}



.hr {
  border-top:2px solid #2a659c;/*the border*/
  width:100%;
  height:2px;/*whatever the total width of the border-top and border-bottom equal*/
  margin: 1em 0 1em 0;
 }
/*End home Page Styles*/

/*Intro Page*/	
.intro-phot-cont,
.intro-phot-cont1 {
   width: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column; /* Adjusted to vertical column layout */
   align-items: center; /* Center items horizontally */
   margin-left: auto;
   margin-right: auto;
}


.intro-phot-cont {   
   margin: 2rem auto;
}



.intro-phot-cont img { 
   border-top-left-radius: 10px;width: 80%;
   border-top-right-radius: 10px; 
   max-width: 212px;
}

.intro-phot-cont1 img {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   
}



/* === MINIMALIST VERSION === */
.introquote-minimal {
  width: 80%;
  max-width: 650px;
 
  
  /* Clean minimal design */
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-top: 3px solid #2a659c;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}



.colblk {
   color: black;
   font-size: 1rem;
}
 
   
  .gallery_container {
  padding: 10px 15%;
  max-width: 100%;
  margin: 2rem auto;
 
  }

  .gallery_container h4 {
  margin-bottom: 2rem;
  font-size: 2rem;
  text-align: center;
  }
  .heading-text {
  text-align: center;	
  }
  .heading-text span {
  font-weight: 100;
  }

  ul {
  list-style: none;
  }
  .gallery_container .image-gallery {
  list-style: none;
  display: flex; /* Change to flex layout */
  flex-wrap: wrap; /* Enable wrapping */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Adjust the gap size as needed */
  }

  .gallery_container .image-gallery li {
  flex-basis:90%; /* Full width for mobile screens */
  }

  .gallery_container .image-gallery li img {
  object-fit: cover;
  width: 100%; /* Ensure images fill the container */
  height: auto;
  vertical-align: middle;
  border-radius: 5px;
  }

  .gallery_container .image-gallery li .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.502);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .gallery_container .image-gallery li:hover .overlay {
  transform: scale(1);
  }

  /* Responsive image gallery rules begin*/
  .image-gallery > li {
  position: relative;
  cursor: pointer;
  }

  .image-gallery li:hover .overlay {
  transform: scale(1);
  }

  .image-gallery {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: 10px; /* Adjust the gap size as needed */
  grid-row-gap: 10px; /* Add a vertical gap between rows */
}

/*End Intro Styles*/



/*Rogerson Page Styles */
  .capt-rogerson {
  width: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin-left: auto;
  margin-right: auto;
  }
  
  
  .obe_medal {
  width: 40%;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  }  
      
  /*End Rogerson Page Styles */
  
  
  /* Peever Page Styles */
  .cwgc {
    position: relative;
    width: 90%;
	margin: 3rem auto;
	}

  .cwgc img {
    display: block; /* Removes any extra spacing below the image */
    max-width: 100%; /* Make sure the image doesn't exceed the container's width */
  }

  .WTO {
	  display: flex;
	  flex-direction: column;
	  width: 200px;
	  margin: 3rem auto;
  }
  
  /* End Peever Page Styles */
 
  /* Jarman Page Styles */
  .diajohn {
  width: 70%;
  max-width: 210px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;
  }
  
  .johnjarman, .telegram, .open_boats, .dianaDeath, .dailymail  {
  width: 90%;
  max-width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;
}    
  /* End Jarman Page Styles */ 
  
  /* Reunion Page Styles */
  
.reunion1 {
  display: flex;
  align-items: center;
}

.ellermanemblem {
  display: flex;
  flex-direction: column;
  margin-left: 2px; /* Add spacing between the image and text */
  justify-content: center; /* Center vertically */
  padding-top: 8px; /* Adjust the padding to bring the text down */
 
  
}

.ellermanemblem1 {
  font-size: 30px; /* Adjust font size as needed */
  line-height: .5; /* Adjust line height as needed */
  margin-bottom: 2px;
  font-style: italic;
  font-weight: bold;
 }
 
 .reunion1 .ellermanemblem p {
		font-size: 13px;
	}

.reunion1 img {
  width: 22%;
  height: auto;
  margin-left: 20%;
}

/* Additional styling if needed */
.reunion {
  width: 90%;
  margin: 0 auto;
  }
  
  

.reunion1984, .reunion_1984, .reunion-1984, .reunion1_1984, .images_reunion, .images_reunion1, .reunionboat, .reunion_boat, .signed_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 3rem; /* Add some spacing between each column */
}
.signed_copy {
	width: 90%;
	max-width: 400px;
	margin: 2rem auto;
}

.sign1 {
  font-size: 1rem;
  color: navy;
  margin-top: .25rem;
  
}

.reunion1984 img, .reunion_1984 img, .reunion-1984 img, .reunion1_1984 img, .images_reunion img, .images_reunion1 img, .reunionboat img, .reunion_boat img, .signed_copy img  {
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; 
 }
 
 .signature-heading {
    font-size: 1.3rem;/* Adjust the font size for the heading */
    margin-bottom: 1rem; 
	text-align: center;
	
  }
    
  .signature-list {
    font-size: 14px; /* Adjust the font size for the list */
    line-height: 1.5; /* Add some spacing between lines */
    max-width: 80%; /* Limit the width of the list for better readability */
    margin: 1rem auto; /* Center the list within the page */
	padding: 5px; /* Add some padding to improve readability */
  }
 .signature-list .left-side {
	 color: navy;
	 font-size: 1.1rem;
 }
 .signature-list .right-side {
	 color: navy;
	 font-size: 1.1rem;
	
 }
 .otherguests .navy2 {
	 color: navy;
	 font-size: 1rem;
 } 
  /* End Reunion Page Styles */
  
  /* All Table Container Styles */
   
  .table-container {
  border-collapse: collapse;  
  width:90%;
  margin: 2.5rem auto; 
  font-size: .95rem; 
  }
  
  .ben-crew-table td:before, .euro-crew-table td:before, .lascar-table td:before, .ben-passenger-table td:before, .ben-lascar-table td:before, .passenger-table td:before, .boat7-table td:before, .miller-table td:before, .lost-table td:before, .lascars-lost-table td:before, .gtwar-table td:before,
  .dad-shiplist-table td:before, .ellerman-loss-table td:before, .managed-loss-table td:before, .wilson-loss-table td:before, .EW-managed-loss-table td:before, .decorations-table td:before, .ranks-table td:before, .patrol-table2 td:before, .patrol-table3 td:before, .patrol-table4 td:before, .patrol-table5 td:before, .boccupants-table1 td:before,
  .boat-awards-table1 td:before, .boccupants-table4 td:before, .boat-awards-table4 td:before, .boccupants-table5 td:before, .boat-awards-table5 td:before, .boccupants-table6 td:before, .boat-awards-table6 td:before, .boccupants-table7 td:before, .boat-awards-table7 td:before, .boccupants-table7 td:before, .boat-awards-table7 td:before {
  top: 0; /* Adjust the value as needed */
  }
    			
  .euro-crew-table td.table1 {
  text-align: center;
  }
  div.tablecomment {
  text-align: center;
  font-size: 1rem;
  color: navy;
  }
	
 .table-center {
 text-align: center;
 color: navy;
 font-size: 1rem;
 }
 p.table-center { 
 font-size: 1.2rem;
	 } 

/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
 /* End */ 
 
  
  /* Clan Alpine Page Styles */
  .ban-clan-container {
    display: flex;
    flex-direction: column; /* Stacked in a column on mobile */
	align-items: center; /* Center horizontally on mobile */
   }

   .banbury, .alpineflag {
	display: flex;
    flex-direction: column;

	max-width:250px;
    margin: 2rem auto; /* Center the figures horizontally on mobile */
    text-align: center; /* Center the content within the figures */
   }
   
  .alpine {
	display: flex;
    flex-direction: column;
	width: 85%;
    margin: 3rem auto; /* Center the figures horizontally on mobile */
    text-align: center; /* Center the content within the figure */
   }
   .calpine {
	color: navy; 
	font-size: 1rem;
   
   }
   
  /* End Clan Alpine Page Styles */
  
  /* BENDORAN Page Styles */
    .ben-flag-container {
	display: flex;
	max-width: 90%; /* Takes up 90% of available space */
    margin: 0 auto; /* Centers the container */
    flex-direction: column; /* Stacked in a column on mobile */
	align-items: center; /* Center horizontally on mobile */  
  }
  .bendoran1 .benflag {
	display: flex;
    flex-direction: column;
	width: 80%;
    margin: 2rem auto; /* Center the figures horizontally on mobile */
    text-align: center; /* Center the content within the figures */  
  }
  
  .bendoran1 img {
	height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
	
  }
  .benflag img {
  height: auto;  
  }
  .Ben-navy {
  color: navy;
  font-size: 0.95rem;
  }
  .BENtable-container, .BEN1table-container {
	width:90%;
	margin: 2.5rem auto; 
	font-size: .95rem; 
  }
  
  .BEN2table-container {
	  width:80%;
	  max-width: 400px;
	  margin: 2.5rem auto;  
	  font-size: .95rem; 
    }
 
  
  .bdorantoptext, .benflagtoptext {
    font-size: 1rem;
    color: navy; 
    margin-top: .25rem;    
  }
  div.tablecomment {
    text-align: center;
    font-size: 1rem;
    color: navy;
   }
  caption {
    display: table-caption;
  } 
   
  caption.tablecenter {
	text-align: center;
	color: navy;
	font-size: 1rem;
  }
  
  
	
  /* End BENDORAN Page Styles */
  
  /* Passenger List Page Styles */
  
  .nestor-straat-container {
	display: flex;
    flex-direction: column; /* Stacked in a column on mobile */
	align-items: center; /* Center horizontally on mobile */  
  }
  .nestor, .straatsoenda {
	display: flex;
    flex-direction: column;
	width: 75%;
    margin: 2rem auto; /* Center the figures horizontally on mobile */
    text-align: center; /* Center the content within the figures */  
  }  
  .nestor img, .straatsoenda img {
	width: 100%;
	height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;   
  }
      
  /* End Passenger List Page Styles */
  
  /* Boat1 Page Styles */
  .container {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}
  .left-container, .right-container {
  order: 2; /* Default order for both containers in mobile view */  
  width: 100%;
  padding: 1rem;	 	
  box-sizing: border-box;
  color: navy;
}
.right-container {
  order: 1; /* Make the right container appear first in mobile view */
  white-space: pre-line; /* Preserve line breaks from the content */
}
.mc_call {
  width: 70%;
  max-width:240px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 0 auto;
  }

.mc_call img, .rhakotis img, .scy img {
 width: 100%;	
 height: auto;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;   	
}
.rhakotis {
 width: 90%;
 max-width: 400px;
 display: flex;
 flex-direction: column; /* Adjusted to vertical column layout */
 align-items: center; /* Center items horizontally */
 margin: 2rem auto;
 	
}
.scy {
 width: 90%;
 display: flex;
 flex-direction: column; /* Adjusted to vertical column layout */
 align-items: center; /* Center items horizontally */
 margin: 2rem auto;
} 
  /* End Boat1 Page Styles */  
  
  /* Boat7 Page Styles */  
  .b7boundy {
  width: 70%;
  max-width:220px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;  
  }
  .lbtext {
  font-size:1rem;	
  color: navy;
  text-align: center;
  margin-top: .25rem;    
  }
  .b7boundy img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	  
  }
  .boat7-table {
	margin-bottom: -2rem;  
  }  
  /* End Boat7 Page Styles */ 

  
   /* Stubbs Page Styles */ 

  .stubbs1 {
  width: 80%;
  max-width: 240px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;
  }  
  
  .stubbs1 img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	  
  } 
 /* End Stubbs Page Styles */   
  
/* Simms Page Styles */
  .simms_1 {
  width: 90%;
  max-width: 341px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;
  }
 
  .simms_1 img, .l_boat img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	  
  }
  .l_boat {
  width: 80%;
  max-width: 280px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto;  
  }
/* End Simms Page Styles*/ 


/* Quantril Page Styles*/ 

 .quantrill_1 {
  width: 80%;
  max-width: 280px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto; 
  }
  
  .quantrill_1 img, .quantrill img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	    
  }
  .quantrill {
  width: 60%;
  max-width: 200px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto; 
  }
  .rogerson-ltr-cont {
  display: flex;
  justify-content: flex-end; /* This pushes the child element to the right */
  }
  .rogersonltr {
  white-space: pre-line; /* Preserve line breaks from the content */  
  padding-right: 2rem;
  }  
  
  .rogersonltr1 {
  text-align: center;
  }   
 /* End Quantril Page Styles*/ 
 
 /*Ordeal Page Styles */
  .ordeal, .cairo_phot, .nomedal {
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto; 
  }
 
 .ordeal img, .cairo_phot img, .nomedal img, .scyllahms img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	    	 
 }
 .nomedal {
  width: 90%;
  max-width: 300px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto; 
  }
  .scyllahms {
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column; /* Adjusted to vertical column layout */
  align-items: center; /* Center items horizontally */
  margin: 2rem auto; 
  }  
 /* End */
 
 /* Miller Page Styles */
 
 .adm-container {
  display: flex;
  flex-direction: column; /* Stacked in a column on mobile */
  align-items: center; /* Center horizontally on mobile */  
  }	
.ADM, .majmiller {
	display: flex;
    flex-direction: column;
	width: 60%;
	max-width: 200px;
    margin: 2rem auto; /* Center the figures horizontally on mobile */
    text-align: center; /* Center the content within the figures */  
  }

.ADM img, .majmiller img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	    	 
 }

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

 blockquote.miller-bq {
/* Centering and spacing */
  width: 85%;
  max-width: 600px;
  margin: 2rem auto;
  padding: .5rem 1rem;
  /* Styling */
  background: #f9f9f9;
  border-left:2px solid #2a659c;
 
  
  /* Typography */
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: #333;
}

.centered-quote p {
  margin: 0; /* Remove default paragraph margins */
}	 
	 
.miller-bq1 {
  background: #f9f9f9;
  padding: .5rem 1rem;
width: 100%;
  max-width: 200px;
  margin: 2rem auto;	
border-left:2px solid #2a659c;
  /* Typography */
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: #333;
 
 } 
/* End */

/* Dulcie Kendall Page Styles */

.dulk {
width: 70%;
max-width: 220px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 	
}
.dulk img, .dkendall img, .kendall img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	  	
}

.dkendall {
width: 70%;
max-width: 220px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}
.kendall {
width: 70%;
max-width: 240px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}
/* End */


/* Gladis Usher Page Styles */

.Gusher {
width: 70%;
max-width: 220px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}



.Gusher img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	  		
}

.missioncopy {
 color: color: #757575;
 font-size: 85%;
 line-height: 160%;
 }
 blockquote.gladys-bq, .gladys-bq1, .gladys-bq2, .gladys-bq3, .evelyn-bq {
	/* Centering and spacing */
  width: 90%;
  
  margin: 2rem auto;
  padding: .5rem 1rem;
  /* Styling */
  background: #f9f9f9;
  border-left:2px solid #2a659c;
 
  
  /* Typography */
  font-style: italic;
  font-size: .95rem;
  line-height: 1.4;
  text-align: left;
  color: #333;
	
	} 
/* for ship names */	 
	cite.vessel {
    font-style: italic;
    font-weight: normal;
	color: black;
	
} 
/* END*/	 
 
 
 /* Style the citation */
.citation {
    text-align: center; /* Center the citation */
    margin-top:-1.5rem; /* Add some top margin for spacing */
	margin-bottom: 2rem;
}

cite {
    font-style: italic; /* Apply italic style to the citation text */
    font-size: 1rem; /* Adjust the font size to your preference */
    color: navy; /* Set the color of the text */
	display: inline; /*keep cite behaving like normal text */
}

/* Robert Faulds Page Styles */

.rfaulds {
width: 70%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}

.rfaulds img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	  	
}	
/* End */

/* Joan Redl Page Styles */
.jr1 {
width: 70%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}	


.jr1 img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	  		
}

.custom-h4 {
display: flex;
color: navy;
font-size: 1rem;
font-weight: normal; 
justify-content: space-between;
margin: 0 1rem; /* Adjust the margin as needed */
}
.custom-h4 span {
font-size: 1rem;	
}

/* End */

/*Ashdown Page Styles */
div.ashdown {
  width: 90%;
  max-width: 300px;
  display: flex;
  flex-direction: column; /* Vertical column layout */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  margin: 2rem auto;
  color: navy;
  }
/* Specific CSS rule for .ashdown */
div.ashdown h2,
div.ashdown span {
  font-size: 1rem;
} 

.ashdown span {
  text-decoration: underline; /* Underline the spans */
  text-align: center; /* Center the text within the spans */
}
.ashdown .additional-info {
    text-decoration: none; /* Remove underline for this span */
    text-align: center; /* Center the text within this span */
  }
 blockquote.evelyn-bq {
 width: 98%;
 max-width: 360px; /* Optional: Add a maximum width for larger screens */
 }	  
  
/* End */

/* Lady Almond Page Styles */

.ladyva {
width: 70%;
max-width: 220px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}

.ladyva img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   		
}
/*End */

/* Smith Letter Styles */

.smithltr {
    display: flex;
    justify-content: flex-end;
	font-style: oblique;
    margin-right: 1rem;	
}
.smith_ltr {
	font-style: oblique;
	margin:1rem 0 1rem 1rem;
}
/* End */

/* McNeill Page Styles */

.keith, .mcneill {
width: 70%;
max-width: 220px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 	
}
.mcneill {
width: 70%;
max-width: 200px;
}

.keith img, .mcneill img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   		
}
.benalder {
 display: flex;
 justify-content: flex-end;
 font-style: oblique;
 margin-right: 1rem;		
}
.benalderltr {
font-style: oblique;
margin:1rem 0 1rem 1rem;	
}
/* End */

/* Merten Letter Styles */
.merten2 {
width: 70%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}

.merten2 img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	
}
.italic {
font-style: italic;	
font-size: 1rem;
}
.mertenaddress {
display: flex;
justify-content: flex-end;
font-style: oblique;
margin-right: 1rem;			
}
/* End */

/*Quantrill Letter Styles */
.qltrdate {
display: flex;
justify-content: flex-end;
font-style: oblique;
margin-right: 1rem;
}
.qltrexpress {
font-style: oblique;
margin:1rem 0 1rem 1rem;		
} 
.qltr, .letter {
font-style: oblique;
margin:1rem 0 1rem 1rem;	
}
/* End */

/* Margaret Gordon Letter Styles */
.mag-ltr {
font-style: oblique;
margin:1rem 0 1rem 1rem;		
}
/* End */

/*Betty Birchman Styles */
.bbirch {
width: 70%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}

  .bbirch img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	  
  } 

.hflag-container {
text-align: center;	
}
.hflag {
margin: 0 auto; 
}
.bettyltr  {
text-align:center; 
text-decoration: underline;
}
.bettyltr1 {
text-align: center;
font-size: .8rem;	
}
.BLtxt {
width: 90%;
margin: 2rem auto;
font-size: 80%;
}
.BLaddress {
display: flex;
justify-content: flex-end;
margin:1rem 0 1rem 2rem;				
}
.boundyaddr {
margin:1rem 0 1rem 1rem;		
}
.bltr {
font-style: oblique;
margin:1rem 0 1rem 1rem;		
}
/* End */

.plaque {
width: 90%;
max-width: 300px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}
	
.plaque img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   		
}
/* Lost at Sea Page Styles */

/* Mobile-first: Column layout */
.helena-container {
 display: flex;
 flex-direction: column;
 align-items: center; /* Center horizontally on mobile */  
 }

.figure {
margin: 2rem; /* Add spacing between items */
}
.war, .lawrence {
display: flex;
flex-direction: column;
width: 80%;
max-width: 260px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}


.war img, .lawrence img, .shenton img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   		
}
 
.shenton {
width: 90%;
max-width: 280px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}
/* End */

/* Lost at Sea Lascar Styles */
.lascar-container, .lascar1-container {
 display: flex;
 flex-direction: column;
 align-items: center; /* Center horizontally on mobile */  
}
.war1, .lascar {
display: flex;
flex-direction: column;
width: 80%;
max-width: 280px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.panna1 {
font-size:1rem;	
color: navy;
text-align: center;
margin-top: .25rem; 	
}
.war1 img, .lascar img, .lascar_panna img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   			
} 
.lascar_panna {
display: flex;
flex-direction: column;
width: 100%;
max-width: 200px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
/* End */

/* The Great War Page Styles */ 
.troopship-container {
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally on mobile */  	
}
.troopship, .troopship1 {
display: flex;
flex-direction: column;
width: 90%;
max-width: 350px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}

.troopship img, .troopship1 img, .mceachern img, .ejcol img, .troopship2 img, .troopship3 img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   		
}
h3.trag {
	text-align: center;
}
.mceachern {
display: flex;
flex-direction: column;
width: 90%;
max-width: 250px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.ejcol {
display: flex;
flex-direction: column;
width: 80%;
max-width: 260px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.troopship2 {
display: flex;
flex-direction: column;
width: 90%;
max-width: 400px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.troopship3 {
display: flex;
flex-direction: column;
width: 90%;
max-width: 350px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.jvm {
font-style: oblique;
margin-left:1rem;	
}
/* End */

/* Diary of Ada Walker */
.birkenhead {
display: flex;
flex-direction: column;
width: 90%;
max-width: 300px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.gateway {
font-size:1rem;	
color: navy;
text-align: center;
margin-top: .25rem; 	
}
.birkenhead img, .walker img, .walkerfamily img, .cityof_cairo img, .bombay img, .endpara {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   			
}
.ada-container {
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally on mobile */  		
}
.walker, .walkerfamily {
display: flex;
flex-direction: column;
width: 90%;
max-width: 200px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.cityof_cairo, .bombay {
display: flex;
flex-direction: column;
width: 90%;
max-width: 400px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.endpara {
width: 95%;
max-width: 700px;
margin: 10px auto;
padding:10px;
border: double black 3px;
background-color: #FFE4C4;
color: #000;
font-size: 1rem;
margin-bottom: 2rem;		
}
/* End */

/* Martin Page Styles */
    .martin-container {
    display: flex;
    flex-direction: column;
	
  }

  .top-row {
    display: flex;
    flex-direction: row; /* Side by side */
	margin: 0 auto;
	}

  
  .badge-content {
    flex: 1; /* Take up half of the available space */
	font-size: 1rem;
	font-style: oblique;
	 max-width: 160px; /* Test width */
    
  }
  .cef {
  flex: 1;
  margin-right: 2rem;
  max-width: 150px;
  }

  .bottom-row {
    display: flex;
    flex-direction: row; /* Side by side */
	margin: 0 auto;
	width: 100%;
	justify-content: center;
  }

  .textbox {
    flex: 1; /* Take up half of the available space */
    text-align: center; /* Center the text */
	font-size: 1rem; /* Set font size to 1rem */
	max-width: 200px;
	margin-top:1rem;
	margin-right: 1rem;
	margin-left: -1rem;
  }

  .martin_photo {
  width: 180px; /* Set the width to 180px */
  margin-right: 1rem;
  }
  .martin_photo img {
  width: 100%;	
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;   	  
  }
  .cef img {
  width: 100%;	
  height: auto;  
  }
  .fonth {
  font-size: .7rem;		
  }
  .font_h {
  font-size: 1rem;
  }
  .textbox-container {
  display: flex;
  flex-direction: column; 
  align-items: center; /* Center horizontally on mobile */  		
  }
  .textbox2 {
  font-style: oblique;	  
  }
  .textbox1 {
	text-align: center; /* Center the text */
	font-size: 1rem; /* Set font size to 1rem */
	max-width: 200px;
	margin-top:1rem;
	margin-right: 1rem;
	margin-left: -1rem; 
  }
  .footer1 {
  margin-left: 1rem;	  
  }
/* End */

/* Photos Page Styles */
 .photo-container {
 display: flex;
 flex-direction: column; /* Stack items vertically in both mobile and desktop view */
 
 
}
.sthelena {
	
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.boundy {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}

.sthelena img, .boundy img { 
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;   	  	
}

.survivors {
 width: 100%;
 max-width: 350px;
 
 text-align: left;
 margin-top: .5rem;

}
.survivors span {
font-size: .9rem;	
}

.photo-container1 {
display: flex;
flex-direction: column; /* Stack items vertically in both mobile and desktop view */	

}
.boundy1 { 
width: 90%;
max-width: 250px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				
} 
.gov { 
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				
} 
.boundy1 img, .gov img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	
}	
 
.survtext {
 width: 100%;
 margin: 1rem auto;
 text-align: left; 
 
}
.survtext span {
font-size: .9rem;
}
.photo-container2 {
display: flex;
flex-direction: column; /* Stack items vertically in both mobile and desktop view */		
}
.kendal {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.sthchildren {
width: 90%;
max-width: 400px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.kendal img, .sthchildren img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  		
} 

.photo-container3 {
display: flex;
flex-direction: column; /* Stack items vertically in mobile view */		
}
.j-vm {	
width: 90%;
max-width: 230px;
margin: 1rem auto; 
text-align: center;
} 	
.jvm1 {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.jvm img, .jvm1 img, .j-vm img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	
} 

.photo-container4 {
display: flex;
flex-direction: column; /* Stack items vertically in mobile view */		
}
.mgphoto {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.margord {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}	
.mg {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}

.mgphoto img, .margord img, .mg img, .engineers img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  		
}
.engineers {
display: flex;
flex-direction: column;
width: 90%;
max-width: 500px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}

.photo-container5 {
display: flex;
flex-direction: column; /* Stack items vertically in mobile view */			
}
.motormen {
width: 90%;
max-width: 250px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.crew {
width: 90%;
max-width: 250px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.motormen img, .crew img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  			
}

/* End */

/*Photo(1) Page Styles */
.photo-container-p1-1, .photo-container-p1-2, .photo-container-p1-3, .photo-container-p1-4, .photo-container-p1-5, .photo-container-p1-6, .photo-container-p1-6-5, .photo-container-p1-7, .photo-container-p1-8, .photo-container-p1-9,
.photo-container-p1-10, .photo-container-p1-11, .photo-container-p1-12, .photo-container-p1-13, .photo-container-p1-14  {
display: flex;
flex-direction: column; /* Stack items vertically in mobile view */				 
 }
 .interior1, .interior2, .interior3, .interior4, .interior5, .interior6 {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			 
 }
 
.interior1 img, .interior2 img, .interior3 img, .interior4 img, .interior5 img, .interior6 img, .jr img, .ladya img, .drmiller img, .sims img, .sims2 img, .stubquant img,
.kmaclennan img, .hugh_p img, .cityofc img, .ferdi1 img, .ferditoday img, .dieckhaus img, .tmccall img, .ironside img, .tagg img, .miller img, .mmiller img, .donaldmiller img,
.robertwatts img, .tinywatts img, .bob_ivy_watts img, .johnnuttall img, .gerner img, .d_dick img, .broomby img, .solomon img, .fmcquone img, .skea img, .stubbs img, .R_ironside img, .tagg1 img, .rooksby img, .dodds img  {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  		 
 }
 
.jr, .ladya, .drmiller, .kmaclennan, .hugh_p { 
width: 90%;
max-width: 220px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */ 
}
.sims {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
} 
.sims2 {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.stubquant {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
 
.cityofc {
display: flex;
flex-direction: column;
width: 90%;
max-width: 400px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.broomby {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.ferdi1, .ferditoday, .dieckhaus, .miller, .mmiller, .donaldmiller         {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.tmccall {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.ironside {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.tagg {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.robertwatts, .tinywatts, .bob_ivy_watts {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				
}
.johnnuttall, .gerner, .d_dick {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}
.r_dodds {
width: 90%;
max-width: 225px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.solomon  {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				
}
.fmcquone	 {
width: 90%;
max-width: 225px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.skea, .stubbs {
width: 90%;
max-width: 225px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				
}
.R_ironside {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.tagg1 {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
}
.rooksby {
width: 90%;
max-width: 300px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
} 
 /* End */
 
 /* Photo(2) Page Styles */
 .photo-container-p2-1, .photo-container-p2-2, .photo-container-p2-3, .photo-container-p2-4, .photo-container-p2-5, .photo-container-p2-6, .photo-container-p2-7, .photo-container-p2-8, .photo-container-p2-9 {
display: flex;
flex-direction: column; /* Stack items vertically in mobile view */			 
 }
 .linecrossing5 img, .linecrossingRogerson img, .linecrossing3 img, .linecrossing4 img, .linecrossing6 img, .linecrossing2 img, .linecrossing7 img, .linecrossing8 img, .linecrossing9 img, .neptune img,
 .st_helena1 img, .st_helena2 img, .st_helena3 img, .st_helena4 img, .st_helena5 img, .st_helena6 img, .st_helena7 img, .st_helena8 img, .st_helena9 img, .st_helena10 img, .st_helena11 img  {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	 
 }
 .linecrossing5, .linecrossingRogerson, .linecrossing3 {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				 
 }

 .linecrossing6, .linecrossing4, .linecrossing2, .linecrossing7, .linecrossing8   {
width: 90%;
max-width: 300px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				 
 }	
 .linecrossing9{
width: 90%;
max-width: 280px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				 
 }
 .neptune, .st_helena1, .st_helena2, .st_helena3, .st_helena4 {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  				 
 }	
.certtext {
width: 100%;
margin: 1rem auto; /* Center the figures horizontally on mobile */
}
.st_helena5, .st_helena6, .st_helena7, .st_helena8, .st_helena9, .st_helena10 {
width: 90%;
max-width: 250px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  			
} 
.st_helena11 {
display: flex;
flex-direction: column;
width: 90%;
max-width: 500px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
} 
 /* End */
 
 /* My Fathers Story Page Styles */
 .picture1 {
width: 90%;
max-width: 210px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		 
 }
 .picture1 img, .ship img, .colquhoun img, .queenmary img, .queenmary1 img, .dad1 img, .photo img, .medals img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	 
 }
 
.ship, .colquhoun {
display: flex;
flex-direction: column;
width: 90%;
max-width: 500px;
margin: 2rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.QMphoto-container, .dad-container, .dad-container, .gaelic-container {
display: flex;
flex-direction: column;
}
.gaelic-container {
width: 100%;
max-width: 450px;
margin: 2rem auto;	
} 
.queenmary, .queenmary1 {
width: 90%;
max-width: 350px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  		
}

span.author {
font-size: 1rem;
color: #000;
}
.dad1 {
width: 90%;
max-width: 200px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.photo {
width: 90%;
max-width: 160px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.medals {
width: 90%;
max-width: 250px;
margin: 1rem auto; /* Center the figures horizontally on mobile */
text-align: center; /* Center the content within the figures */  	
}
.boat1-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}



.pc {
  text-align: left;
}

.pc span {
  font-size: 1rem;
}



.text-left {
display: none;
}
.text-top {
position: relative;
display: inline;
font-size: 1rem;
}
/* End */

/* Ellerman Lines Page Styles */
.ellerman1, .city {
width: 90%;
max-width: 170px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}
.ellerman1 img, .city img, .ellerman img  {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	
}
.ellerman {
width: 90%;
max-width: 400px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}

/* End */ 

/* u68 Page Styles */
.merten img, .u-68 img, .conningtower img, .sinking img, .arriaga img, .uboot68 img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  		
}
 
.merten {
width: 90%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}

.u68-container {
  display: grid;
  grid-template-columns: 1fr; /* Single column */
 
  justify-items: center; /* Center grid items horizontally */
  max-width: 230px; /* Constrain width */
  margin: 0 auto; /* Center container in viewport */
  padding: 20px;
}

/* Override the existing figure styles */
.u68-container .u-68,
.u68-container .conningtower {
  display: block; /* Override any existing flex styles */
  width: 90%;
 
  margin: 0; /* Remove auto margins */
  text-align: center;
}

.u68-container figure {
  margin: 0;
  text-align: center;
  width: 100%;
}

.u68-container img {
  width: 100%;
  height: auto;
  display: block;
  
}

.u68-container figcaption {
  display: block; /* Ensure caption is below image */
  margin-bottom: 30px;
}
.sinking-container {
  display: grid;
  grid-template-columns: 1fr; /* Single column */
  gap: 30px;
  justify-items: center; /* Center figures horizontally */
  max-width: 350px; /* Constrain container width */
  margin: 0 auto; /* Center container in viewport */
  padding: 20px;
}

/* Reset any existing figure styles */
.sinking-container .sinking,
.sinking-container .arriaga {
  display: block; /* Override any flex styles */
  width: 100%;
  max-width: 300px; /* Consistent image size */
  margin: 0;
  text-align: center;
}

.sinking-container figure {
  margin: 0;
  text-align: center;
  width: 100%;
}

.sinking-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* Maintain consistent appearance */
}







.uboot68 {
width: 90%;
max-width: 300px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}

ul.list {
text-indent: 1rem;
color: navy;
font-size: 1rem;
} 
/* End */

/* All Boat Occupants Styles */
#nav-container {
 width: 100%; 	
 text-align: center; /* Center the buttons horizontally */
 margin: 2rem auto; /* 2rem top and bottom margin */
 }
  .nav-btn {
    display: inline-block;
    padding: 1.25px 2.5px; /* Adjust padding as needed */
    margin: 5px; /* Adjust margin as needed */
    text-decoration: none;
    border: 1px solid #0056b3; /* Button border color */
    background-color: #fff; /* Button background color */
    #0056b3; /* Button text color */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
  }
  .nav-btn.active {
    color: #fff; /* White text */
    background-color: #2A659C;
    font-weight: bold;
}

.nav-btn.active:hover {
    color: #fff;
    background-color: #004494; /* Slightly darker blue on hover */
}
  
  

  .boccupants-table8 a.links {
	  font-size: 1rem;
	  
  }
/* End */

/* Wreck Located Page Styles */
.silver_rupee {
width: 90%;
max-width: 320px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}
.silver_rupee img, .plaquerespect img {
width: 100%;	
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;  	
}

.plaquerespect {
width: 90%;
max-width:320px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}
#imagegallery {
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
}

.enlarge-gallery {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Allow images and captions to wrap to the next line */
  justify-content: center; /* Center align items horizontally */
}
.enlarge-gallery li {
    flex-basis: 100%; /* Make sure one item per row on mobile */
}

.enlarge-gallery figure {
  margin: 0;
}




img {
  max-width: 100%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

figcaption {
  width: 100%;
  color: navy;
 font-size: .95em;
  margin: 0;
  text-align: center; /* Center the text within the caption */
}
.london-mint {
width: 90%;
max-width: 350px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 			
}
.london-mint-coins { 
width: 90%;
max-width: 350px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}
/* End */

/* Acknowledgements Page Styles */
.book {
width: 90%;
max-width: 200px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
margin: 2rem auto; 			
}
.phil {
width: 90%;
max-width: 250px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
margin: 2rem auto; 			
}
.book img, .phil img, .mn_badge1 img {
max-width: 100%;
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;	
}

.mn_badge1 {
width: 90%;
max-width: 180px;
display: flex;
flex-direction: column; /* Adjusted to vertical column layout */
margin: 2rem auto; 		
}
/* End */

/* Contact Form Styles */




/* Apply this CSS for your contact form page to hide the specified elements */

.contact-form-page .cabin,
.contact-form-page .poem,
.contact-form-page .cite-style {
    display: none;
}


.forheader {
text-align: center; /* Center the text horizontally */
font-size: 1rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-75%, -25%);
font-size: .9rem;
font-weight: bold; 
color: black;	
}

.show-mobile {
    display: none; /* Hide on desktop by default */
  }

  .show-desktop {
    display: none; /* Hide on mobile by default */
  }
  
 /* Margaret Gordon - Boat 4 Crew List */
ul.boat4-crew {
    text-align: left;
    padding-left: 0;
    max-width: 500px;
    margin: 20px auto;
    width: 90%;              /* Prevents overflow on small screens */
    box-sizing: border-box;  /* Includes padding in width calculation */
}

ul.boat4-crew li {
    margin: 2px 0;
    padding: 2px 8px;
}
ul.boat4-crew li .details {
    font-size: 0.8em;     /* 80% of normal size */
    color: #666;          /* Optional: lighter color */
    font-style: italic;   /* Optional: italic text */
}

/* Mobile First - Flexbox Column Layout */
.m-gordon {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
    margin: 20px auto;
    padding: 10px;
}

.m-gordon figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.m-gordon img {
    width: 100%;
    height: auto;
   
}

.m-gordon figcaption {
    margin-top: 8px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
}

/* Desktop - Float Right */
@media (min-width: 1024px) {
    .m-gordon {
        float: right;
        margin: 0 1.5rem 0 1rem;
        max-width: 300px;
        padding: 0;
    }
    
    .m-gordon figure {
        margin: 0;
    }
    
}
/* Mobile First - Column Layout */
.gordon-couple-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
}

.gordons, .wren-gordon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gordons figure, .wren-gordon figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 280px;
}

.gordons img {
    width: 100%;
    height: auto;
	aspect-ratio: 292/212; /* Couple photo ratio */
}
.wren-gordon img {
    width: 100%;
    height: auto;
	aspect-ratio: 200/237; /* Couple photo ratio */
}


.gordons figcaption, .wren-gordon figcaption {
    margin-top: 10px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
    line-height: 1.3;
}

/* Desktop - Side by Side Layout */
@media (min-width: 1024px) {
    .gordon-couple-container {
        flex-direction: row;
        gap: 40px;
        max-width: 700px;
        justify-content: center;
        align-items: flex-start;
    }
    
    .gordons, .wren-gordon {
        flex: 1;
        max-width: 350px;
    }
    
    .gordons figure, .wren-gordon figure {
        max-width: 100%;
    }
    
   .gordons img, .wren-gordon img {
        height: 240px;
        object-fit: cover;
        object-position: center;
		aspect-ratio: auto; /* Override on desktop */
    }
    
    /* Specific positioning for Margaret's Wren photo */
    .wren-gordon img {
       object-position: center 20%;  /* 20% from top */
	   max-width: 230px;
    }
    .gordons figcaption, .wren-gordon figcaption {
        font-size: 0.85em;
    }
}
/* Mobile First - Flexbox Column Layout */
.wc-solomon {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 250px;
    margin: 20px auto;
    padding: 10px;
}

.wc-solomon figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.wc-solomon img {
    width: 100%;
    height: auto;
    
}

.wc-solomon figcaption {
    margin-top: 8px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
}

/* Desktop - Float Right */
@media (min-width: 1024px) {
    .wc-solomon {
        float: right;
        margin: 0 1.5rem 1rem 1rem;
        max-width: 300px;
        padding: 0;
    }
    
    .wc-solomon figure {
        margin: 0;
    }
    
    .wc-solomon figcaption {
        margin-top: 10px;
        font-size: 0.85em;
    }
}

.knocker-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 200px;
    margin: 20px auto;
    padding: 10px;
}

.knocker-w figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.knocker-w img {
    width: 100%;
    height: auto;
   }

.knocker-w figcaption {
    margin-top: 8px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
}

/* Desktop - Float Left */
@media (min-width: 1024px) {
    .knocker-w {
        float: left;
        margin: 0 1rem 1rem 1rem;
        max-width: 200px;
        padding: 0;
    }
    
    .knocker-w figure {
        margin: 0;
    }
    
    .knocker-w figcaption {
        margin-top: 10px;
        font-size: 0.85em;
    }
}
/* Mobile First - Column Layout */
.rescue-recovery-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
}

.caravelas, .recife {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.caravelas figure, .recife figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px;
}

.caravelas img, .recife img {
    width: 100%;
    height: auto;
    }

.caravelas figcaption, .recife figcaption {
    margin-top: 10px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
    line-height: 1.3;
}

/* Desktop - Side by Side Layout */
@media (min-width: 1024px) {
    .rescue-recovery-container {
        flex-direction: row;
        gap: 40px;
        max-width: 800px;
        justify-content: center;
        align-items: flex-start;
    }
	.caravelas img, .recife img {
        height: 250px;        /* Fixed height */
        object-fit: cover;    /* Maintains aspect ratio, crops if needed */
        object-position: center; /* Centers the crop */
	}
    
    .caravelas, .recife {
        flex: 1;
        max-width: 350px;
    }
    
    .caravelas figure, .recife figure {
        max-width: 100%;
    }
    
    .caravelas figcaption, .recife figcaption {
        font-size: 0.85em;
    }
}

/* Mobile First - Flexbox Column Layout */
.gordon-BEM {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 250px;
    margin: 20px auto;
    padding: 10px;
}

.gordon-BEM figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.gordon-BEM img {
    width: 100%;
    height: auto;
   }

.gordon-BEM figcaption {
    margin-top: 8px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
}

/* Desktop - Float Left */
@media (min-width: 1024px) {
    .gordon-BEM {
        float: left;
        margin: 0 1rem 1rem 1.5rem;
        max-width: 220px;
        padding: 0;
    }
    
    .gordon-BEM figure {
        margin: 0;
    }
    
    .gordon-BEM figcaption {
        margin-top: 10px;
        font-size: 0.85em;
		margin-bottom: 4rem;
    }
}

/* Mobile First - Flexbox Column Layout */
.m_ingham {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 350px;
    margin: 20px auto;
    padding: 10px;
}

.m_ingham figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.m_ingham img {
    width: 100%;
    height: auto;
    }

.m_ingham figcaption {
    margin-top: 8px;
    font-style: italic;
    font-size: 0.9em;
    color: navy;
    text-align: center;
    line-height: 1.3;
}

/* Desktop - Centered */
@media (min-width: 1024px) {
    .m_ingham {
        float: right;
        margin: 0 1.5rem 0 1rem;
        max-width: 300px;
        padding: 0;
        display: block;
    }
    
    .m_ingham figure {
        margin: 0;
        text-align: center;
    }
    
    .m_ingham figcaption {
        margin-top: 8px;
        font-size: 0.85em;
    }
}
   
/******************************************************************************************************GENERAL STYLES ABOVE*******************************************************************************/
	
		
	/* Target individual small screens such as iPhone 5s */
    @media only screen and (max-width: 320px) {
    	
	 header, footer {
	height: 10%;
	 }
		
    .mhl img {
	display: none;	
	 }
	 .alfred-barnes {
	box-sizing: border-box; /* Include padding in width calculation */
    max-width: 600px; /* Reduce max-width */
    width: 95%; /* More conservative than 90% */
    margin: 20px auto;
  }
	}
	
	
	
	
	
	/* Media query for mobile viewport - max-width 767px this is for the great war page specifically showing mobile/desktop specific text*/
    @media only screen and (max-width: 767px){
	.show-mobile {
      display: inline; /* Show on mobile */
	  font-size: 1rem;
	  color: navy;
	}	  
	a.links {
	font-size:1rem;
    }
	p.table-center { 
    font-size: 1rem;
	} 
		
	figure.sidepoppy, figure.badge, figure.poem, cite:not(.show-cite) {
	display: none;/* Responsive/mobile: hide non-special cites and figures */
    }
	.show-cite {
    display: inline !important; /* Force it to show even on mobile */
    /* Add any other styling you want for important citations */
    font-style: italic;
    
    }
	footer {
    flex-direction: column;
	
     }  
	blockquote.miller-bq {
    width: 90%;
    padding: 1.25rem 1rem;
    font-size: .95rem;
    margin: 1.5rem auto;
  }
	}
	
	@media screen and (orientation: landscape) {
    header {
        padding: 1.7em; /* Adjust this value as needed */
    }

    header h1 {
        font-size: 1.2rem; /* Adjust this value as needed */
    }

    header h2 {
        font-size: 0.5rem; /* Adjust this value as needed */
    
    }
}

	

/*-------------------------------------------------------------- Up to Tablet Screen Styles--------------------------------------------------------------------------------------------------------- */

    


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 1024px
and also iPads specifically.
*/
@media only screen and (max-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
	p.table-center { 
    font-size: 1rem;
	} 
	
	.margin {
	margin-top:2rem;
}
/* Make Caption display in a row for mobile and tablet windows */
    caption {
        display: block;
        text-align: center; /* Center the text */
        font-size: .9rem; /* Adjust font size as needed */
        /* Add any other mobile-specific styling here */
    }
	.bendoran1 figcaption {
        margin-bottom: 25px;
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { 
        border: 1px solid #ccc; 
    }
    
    td { 
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
	
	
	/*
	Label the data for crewlist
	*/
	
	.euro-crew-table td:nth-of-type(2):before { content: "Name"; }
	.euro-crew-table td:nth-of-type(3):before { content: "Age"; }
	.euro-crew-table td:nth-of-type(4):before { content: "Position"; }
	.euro-crew-table td:nth-of-type(5):before { content: "Birthplace"; }
	.euro-crew-table td:nth-of-type(6):before { content: "Remarks"; }
			
    .euro-crew-table td.table1 {
	text-align: left;
	}
	/*
	Label the data for lascar-crewlist page
	*/
    .lascar-table td:nth-of-type(2):before { content: "Name"; }
    .lascar-table td:nth-of-type(3):before { content: "Position"; }
    .lascar-table td:nth-of-type(4):before { content: "Joined"; }
    .lascar-table td:nth-of-type(5):before { content: "Remarks"; }

	/*
	Label the data for passenger table page
	*/
	.passenger-table td:nth-of-type(2):before { content: "Name"; }
    .passenger-table td:nth-of-type(3):before { content: "Age"; }
    .passenger-table td:nth-of-type(4):before { content: "Remarks"; }
	
	
	 /*
	Label the data for ben crew table page
	*/
    
    .ben-crew-table td:nth-of-type(2):before { content: "Name"; }
    .ben-crew-table td:nth-of-type(3):before { content: "Position"; }
    .ben-crew-table td:nth-of-type(4):before { content: "From"; }
	
	/*
	Label the data for ben passenger table page
	*/
		
    .ben-passenger-table td:nth-of-type(2):before { content: "Name"; }
    .ben-passenger-table td:nth-of-type(3):before { content: "From"; }
	
	/*
	Label the data for ben lascar table page
	*/
		
    .ben-lascar-table td:nth-of-type(2):before { content: "Name"; }
	/*
	Label the data for boat7 table page
	*/
	
	.boat7-table td:nth-of-type(2):before { content: "Name"; }
	.boat7-table td:nth-of-type(3):before { content: "Position"; }
	/*
	Label the data for miller-table page
	*/
	
	.miller-table td:nth-of-type(2):before { content: "In Narrative"; }
	.miller-table td:nth-of-type(3):before { content: "Real Name"; }
	
	
	 /*
	Label the data for Lost at Sea page
	*/
    
    .lost-table td:nth-of-type(1):before { content: "Name"; }
    .lost-table td:nth-of-type(2):before { content: "Position"; }
    .lost-table td:nth-of-type(3):before { content: "From"; }
	
	.lascars-lost-table td:nth-of-type(1):before { content: "Name";}
	.lascars-lost-table td:nth-of-type(2):before { content: "Position";}
	.lascars-lost-table td:nth-of-type(3):before { content: "Fate";}
	
	 /*
	Label the data for the Great War Page
	*/
	.gtwar-table td:nth-of-type(1):before { content: "Rank";}
	.gtwar-table td:nth-of-type(2):before { content: "Name";}
	.gtwar-table td:nth-of-type(3):before { content: "Service Number";}
    .gtwar-table td:nth-of-type(4):before { content: "Date of Death";}
	
	/*
	Label the data for Dads Ships Page
	*/
	.dad-shiplist-table td:nth-of-type(2):before { content: "Date Joined";}
	.dad-shiplist-table td:nth-of-type(3):before { content: "Date Left";}
	.dad-shiplist-table td:nth-of-type(4):before { content: "Ship";}
	.dad-shiplist-table td:nth-of-type(5):before { content: "Built";}
	.dad-shiplist-table td:nth-of-type(6):before { content: "Official Number";}
	.dad-shiplist-table td:nth-of-type(7):before { content: "Company";}
	.dad-shiplist-table td:nth-of-type(8):before { content: "Fate/Comments";}
	/*
	Label the data for Ellerman War Loss Page
	*/	
	.ellerman-loss-table td:nth-of-type(1):before { content: "Name";}
	.ellerman-loss-table td:nth-of-type(2):before { content: "O/N";}
	.ellerman-loss-table td:nth-of-type(3):before { content: "Date";}
	.ellerman-loss-table td:nth-of-type(4):before { content: "Fate/Comments";}
	.ellerman-loss-table td:nth-of-type(5):before { content: "Dead";}
	
	.managed-loss-table td:nth-of-type(1):before { content: "Name";}
	.managed-loss-table td:nth-of-type(2):before { content: "O/N";}
	.managed-loss-table td:nth-of-type(3):before { content: "Date";}
	.managed-loss-table td:nth-of-type(4):before { content: "Fate/Comments";}
	.managed-loss-table td:nth-of-type(5):before { content: "Dead";}
	
	.wilson-loss-table td:nth-of-type(1):before { content: "Name";} 
	.wilson-loss-table td:nth-of-type(2):before { content: "O/N";} 
	.wilson-loss-table td:nth-of-type(3):before { content: "Date";} 
	.wilson-loss-table td:nth-of-type(4):before { content: "Fate/Comments";} 
	.wilson-loss-table td:nth-of-type(5):before { content: "Dead";}

	.EW-managed-loss-table td:nth-of-type(1):before { content: "Name";} 
	.EW-managed-loss-table td:nth-of-type(2):before { content: "O/N";}
	.EW-managed-loss-table td:nth-of-type(3):before { content: "Date";} 
	.EW-managed-loss-table td:nth-of-type(4):before { content: "Fate/Comments";} 
	.EW-managed-loss-table td:nth-of-type(5):before { content: "Dead";} 
	/*
	Label the data for U-68 Page
	*/	
	.decorations-table td:nth-of-type(1):before { content: "Date";} 
	.decorations-table td:nth-of-type(2):before { content: "Award";} 
	
	.ranks-table td:nth-of-type(1):before { content: "Date";} 
	.ranks-table td:nth-of-type(2):before { content: "Award";} 
	
	.patrol-table2 td:nth-of-type(1):before { content: "Name";} 
	.patrol-table2 td:nth-of-type(2):before { content: "Nationality";} 
	.patrol-table2 td:nth-of-type(3):before { content: "Tonnage";} 
	.patrol-table2 td:nth-of-type(4):before { content: "Date";}
	.patrol-table2 td:nth-of-type(5):before { content: "Remarks";}
	
	.patrol-table3 td:nth-of-type(1):before { content: "Name";} 
	.patrol-table3 td:nth-of-type(2):before { content: "Nationality";} 
	.patrol-table3 td:nth-of-type(3):before { content: "Tonnage";} 
	.patrol-table3 td:nth-of-type(4):before { content: "Date";}
	
	.patrol-table4 td:nth-of-type(1):before { content: "Name";} 
	.patrol-table4 td:nth-of-type(2):before { content: "Nationality";} 
	.patrol-table4 td:nth-of-type(3):before { content: "Tonnage";} 
	.patrol-table4 td:nth-of-type(4):before { content: "Date";}
	
	.patrol-table5 td:nth-of-type(1):before { content: "Name";} 
	.patrol-table5 td:nth-of-type(2):before { content: "Nationality";} 
	.patrol-table5 td:nth-of-type(3):before { content: "Tonnage";} 
	.patrol-table5 td:nth-of-type(4):before { content: "Date";}
	/*
	Label the data for Boat Occupants Pages
	*/	
	
	.boccupants-table1 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table1 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table1 td:nth-of-type(3):before { content: "Fate";} 
	
	.boat-awards-table1 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table1 td:nth-of-type(2):before { content: "Award";}

	.boccupants-table4 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table4 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table4 td:nth-of-type(3):before { content: "Fate";}
	
	.boat-awards-table4 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table4 td:nth-of-type(2):before { content: "Award";}
	
	.boat-awards-table5 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table5 td:nth-of-type(2):before { content: "Award";}
	
	.boccupants-table5 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table5 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table5 td:nth-of-type(3):before { content: "Fate";}
	
	.boccupants-table6 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table6 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table6 td:nth-of-type(3):before { content: "Fate";}
	
	.boat-awards-table6 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table6 td:nth-of-type(2):before { content: "Award";}
	
	.boccupants-table7 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table7 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table7 td:nth-of-type(3):before { content: "Fate";}
	
	.boat-awards-table7 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table7 td:nth-of-type(2):before { content: "Award";}
	
	.boccupants-table8 td:nth-of-type(1):before { content: "Name";} 
	.boccupants-table8 td:nth-of-type(2):before { content: "Position";} 
	.boccupants-table8 td:nth-of-type(3):before { content: "Fate";}
	
	.boat-awards-table8 td:nth-of-type(1):before { content: "Name";} 
	.boat-awards-table8 td:nth-of-type(2):before { content: "Award";}
    }
		
   /* Media query for tablet and desktop viewports */
   @media only screen and (min-width: 767px) and (max-width: 1024px) {
   body {
   font-size: 1rem;
   max-width: 767px;
   }
   
     .capt-rogerson {
     width: 210px;
	 }
	
      #main {
        flex-direction: row; /* Change to row for larger screens */
      }
      #main > nav {
        flex: 0 0 20%; /* Set the width of the navigation column */
      }
	  	  	  
      #main > .nav-content-wrapper {
        display: flex;
        flex-direction: column;
		border-right: 1px solid #2a659c;
        background:#E8E8E8;
		flex:2; /* Take remaining space for content on larger screens */
		}
      
      #main > article {
        background: #F7F7F7;
        /* Change to flex-direction: column to make article content display vertically */
        flex-direction: column;
        /* Reset flex property to default, allowing content to expand vertically */
        flex: 4;
      }
	  
	  
      .content-div {
      display: flex;
      flex-direction: column;
      align-items: center;
      }
      .content-div > figure {
      margin-top: -5px;
      }	
	  .ROGphot-toptext, .ROGphot1-toptext  {
		margin-bottom: .2rem;  
	  }
	  .ROGphot2-toptext {
		  margin-top: .3rem;
	  }
	  
	   .ROGphot3-toptext {
		margin-top: -1.5rem; 
	  }
	  
	  
	  .fb-button img {
      width: 146px;
      margin: 1.5rem auto;
      height: auto;
      display: block; /* Ensures the image doesn't have extra space below */
	  }
	  
	  figure.MND {
	  color: navy;
      text-align: center;
      font-weight: bold;
	  margin-bottom: 1.5rem;
	  font-size: 1rem;
      width: 13rem;	 
	  margin:1rem auto;	
      }
	  
	  figure.badge {
	  margin-bottom: 2rem; 	  
	  }
	  .cabin img {
      max-width: 60%;
      display: block; /* Ensures the image is displayed as a block element */
      margin: 1.5rem auto;
      }
	  .cabin p {
	  text-align: center;
      color: navy;	  
	  }
	  figure.poem {
	  color: navy;
	  font-size: 1rem;
	  font-weight:normal;
	  text-align: left;
	  width: 68%;
	  margin: 0 auto;
	  }
	  .poem img {
	  margin-left: 1.5rem;
	  }
	 .boxcontent {
      width:100%;
	  color: navy;
      padding: 10px;	
      }
	 
	
	 .blockquote-footer {
	 margin-bottom:-3rem; 		
	 }
	 footer {
	 height: 8vh;
     flex-direction: row;
     justify-content: space-around;
     }
	 
	 /*Intro Page Styles */
	 .intro-phot-cont {
	 width:380px;
	 }
     .intro-phot-cont1 {
	 width: 380px;
     }	 
	 
	 /* End*/
	
	/*Boat1 Page Styles */
	.mc_call {
	width:70%;
	}
	/* End*/
	 
	/*Quantril Page Styles */
	.quantrill {
	width:230px;
	}
	.quantrill_1 {
	width: 270px;
	/* End*/
	}
	.show-mobile {
      display: inline;
    }
	/* Contact Form Page Styles */
	.forheader {
    font-size: 1rem;
    }
    #mnimage-container img {
	position: relative;
    top: 5px; left: 5px; 
    width: 50px;	
   }
 .gallery_container {
  padding: 10px;
  max-width: 100%;
  width: 100%;
  margin: 2rem auto;
}
.mydad-container {
    width: 95%; /* Reduce from 90% */
    max-width: 100%; /* Ensure it never exceeds viewport */
    margin: 2rem auto;
    padding: 1.5rem; /* Reduce padding if needed */
    box-sizing: border-box; /* Ensure padding is included in width */
  }
}
/* End*/
  
      
  @media screen and (max-width: 1070px) {
    .dad-shiplist-table th:nth-child(7), /* Select the 7th <th> element (Company) */
    .dad-shiplist-table td:nth-child(7) { /* Select the corresponding <td> elements in the same column */
      display: none;
    }
  }
	
	
/*-------------------------------------------------------------- Desktop and Above Styles--------------------------------------------------------------------------------------------------------- */

/* Show h2 and .mhr image beyond 767px (desktop) */
@media (min-width: 767px) {
  header {
    display: flex; /* Change header to flex layout */
    justify-content: space-between; /* Align items with space between them */
    align-items: center; /* Center items vertically */
    padding: 18px 5px; 
  }

  .mhl img {
	width: 100%;
    max-width: 60px;
    height: auto;
    margin-left: 15px;
  }
  .mhr img {
	width: 100%;
	max-width: 65px;
    height: auto;
    margin-right: 15px; 
	margin-left: 5px;
	margin-top: 10px;
    
  }

  .headertext {
    display: flex;
    flex-direction: column; /* Stack items vertically for desktop */
    align-items: center; /* Center items vertically */
    text-align: center; /* Align text to the center */
  }

  .headertext h1 {
    margin: 0; /* Remove margin to have h1 centered */
    color: white;
    font: normal 1.5rem Georgia, Times, "Times New Roman", serif;
  }

  .headertext h2 {
    display: block; /* Show h2 beyond 768px (desktop) */
    color: #ffff99; /* Change color of h2 for desktop */
    font: normal 1.3rem Georgia, Times, "Times New Roman", serif;
    margin-top: 4px;
  }
 .headertext h2 .colwhite {
    display: inline-block; 
  } 

  .mhr {
    display: block; /* Show .mhr image beyond 768px (desktop) */
  }
  .underline {
  text-decoration: underline;
  font-size: 1.2rem;
}

  .colwhite {
    color: #fff;
	font-size: 1.3rem;
     
  }
  .show-mobile {
      font-size: 1.2rem;
	  color: navy;
   }
   
  .container {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
   }

  .mh, span {
    font-size: 70%;
  }
}


	
	
	
 		      	
	/* Add a media query for desktop view */
   @media screen and (min-width: 768px) {
  .gallery_container .image-gallery li {
    flex-basis: calc(48% - 2px); /* Calculate the width with a 10px gap */
    margin-right: 2px; /* Add a right margin to create the gap between columns */
    margin-bottom:2px; /* Add a bottom margin to create the gap between rows */
  }
  /* Adjust the gap, justify-content, and grid settings for two-column layout */
  .gallery_container .image-gallery {
    justify-content: flex-start; /* Start the first item at the left edge */
    gap: 5px; /* Set the gap size between columns and rows to 10px */
    display: grid; /* Change the display to grid */
    grid-template-columns: repeat(2, 1fr); /* Create two equal-width columns */
  }
  
  /*Boat1 Page Styles */
  .container {
  flex-direction: row;
  }
  
  .left-container {
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */ 
  width: 40%;
  order: 1; /* Change the order for left container in tablet/desktop view */
  }
  /* Float the figure left to allow text to wrap around it */

  .right-container {
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: flex-end; /* move text to the right */ 
  width: 60%;
  order: 2; /* Change the order for right container in tablet/desktop view */
  /* End Boat1 Page Styles */
   }
  }
  
 .page-wrapper {
  max-width: 1280px;
  margin: 0 auto;
}


 /* Merchant-Navy banner — shared by thank-you & error pages */
.mn-banner{
  display:flex;
  align-items:center;
  justify-content:center;           /* centre in the box */
  gap:0.8rem;                        /* space between badge & text */
  margin-top:8rem;      /* ⬅︎ push it down  */
  }

/* badge image scales down on phones */
.mn-banner img{
  width:60px;                        /* desktop */
  max-width:15vw;                    /* shrink on very small screens */
  height:auto;
}

/* text styling — matches site heading colour */
.mn-banner .mn-text{
  
  font-weight:bold;
  font-size:1.35rem;                 /* desktop */
  color:navy;                     /* same blue as other headings */
  white-space:nowrap;                /* keep it on one line where possible */
}
.mn-divider{
  height:4px;
  width:100%;
  max-width:700px;     /* align with message width */
  margin: 2rem auto 1.5rem;
  background:#2a659c;  /* your site’s light-blue accent */
  border:0;
  border-radius:2px;
}


/* fine-tune for tiny screens */
@media (max-width:480px){
  .mn-banner{
    flex-direction:column;           /* stack badge over text */
    gap:0.3rem;
  }
  .mn-banner .mn-text{
    font-size:1.1rem;
  }
}
 
 
.page-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 1280px;
  box-sizing: border-box;
  
}

.mhl, .mhr {
  flex: 0 0 auto;
  max-width: 70px;
  display: none; /* Single mobile rule */
}

.mhl img, .mhr img {
  width: 100%;
  height: auto;
  display: block;
}

.headertext {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
  box-sizing: border-box;
  }

.headertext h1 {
  margin: 0.2rem 0;
  font-size: 2rem;
  line-height: 1.2;
}

.headertext h2 {
  margin: 0.2rem 0;
  font-size: 1.2rem;
  line-height: 1.4;
  
} 

.author a:focus,
.audio-info a:focus {
  outline: 2px solid #2a659c;
  outline-offset: 2px;
}

/* === MOBILE FIRST: Base header for 320px and up === */
header {
  background-color:#2a659c; /*----or this---------- #00264d; or this #2a659c; */
  text-align: center;
  padding: 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}



.mhl img,
.mhr img {
  max-width: 60px;
  height: auto;
}

.headertext {
  padding: 0 1rem;
}

.headertext h1 {
  font-size: 1.1rem;
  margin: 0.3rem auto;
  color: white;
  font-family: Georgia, Times, "Times New Roman", serif;
  line-height: 1.3;
}

.headertext h2 {
  font-size: 0.9rem;
  margin: 0.2rem auto;
  color: #ffff99;
  font-weight: normal;
  line-height: 1.3;
  white-space: nowrap;
}
.londonmint {
 display: flex;
 flex-direction: column;
max-width: 300px; 
margin: 0 auto;
}

/* === TABLET: Show left logo, shift to horizontal layout === */
@media (min-width: 480px) {
  header {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
  }

  .mhl {
    display: block;
  }

  

  .headertext {
    text-align: center;
  }

  .headertext h1 {
    font-size: 1.4rem;
  }

  .headertext h2 {
    font-size: 1.2rem;
  }
}




	
/* === MOBILE NAVIGATION TOGGLE (JS version, cross-browser) === */

.nav-toggle-label {
  font-size: 1.2rem;
  background: #d7e8d4;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  cursor: pointer;
  border-radius: 5px;
  color: navy;
  text-align: center;
  display: none; /* Only shown in JS-enabled viewports via media query */
  width: fit-content;
  border: none;
}

@media (max-width: 767px) {
	#main > .nav-content-wrapper {
    background: #F7F7F7; /* Matches content-div */
	}  	
	.page-wrapper {
    max-width: 500px;
    margin: 0 auto;
    transition: max-width 0.3s ease-in-out;
	}
	 .js .nav-toggle-label {
    display: block;
	}
	 .js .nav-content-wrapper nav,
	 .js .nav-content-wrapper .fb-button {
    display: none;
	}
	  /* When opened via JavaScript toggle */
    .js .nav-content-wrapper nav.is-open {
    display: block;
    }

    .js .nav-content-wrapper .fb-button.is-open {
    display: inline-block; /* or block if stacked vertically */
    }


    .js .nav-content-wrapper nav {
    margin-top: 0.5rem;
	}
     

  .nav-toggle-label:hover,
  .nav-toggle-label:active {
    background: #f5f5f5;
    border-color: #b4d4b2;
  }

  .nav-toggle-label[aria-expanded="true"] {
    background: #e9f5e8;
    border-color: #a2cda0;
    color: darkgreen;
  }
  .nav-icon {
  margin-right: 0.5rem;
  transition: transform 0.3s ease-in-out;
}

#sn_menu a,
#sn_menu p {
  font-size: 15px;
  line-height: 1.3;
  font-family: 'Roboto Condensed', arial, sans-serif;
  font-weight: 400;
}


  #sn_menu {
    padding-left: 0;
    margin: 0;
  }

  #sn_menu > li {
    margin: 0.2rem 0;
    padding: 0;
    line-height: 1.3;
  }

  #sn_menu li ul {
    margin-left: 1rem;
    padding: 0;
  }

  #sn_menu li ul li {
    margin: 0.1rem 0;
    padding-left: 0.5rem;
    line-height: 1.3;
  }

  /* LAYOUT TWEAKS */
  .content-div {
    margin-top: 1.5rem;
  }

  .nav-content-wrapper .content-div {
    display: none !important;
  }
} 

@media (max-width: 767px) and (orientation: landscape) {
  .page-wrapper {
    max-width: 600px;
    margin: 0 auto;
    transition: max-width 0.3s ease-in-out;
  }
}

@media (min-width: 768px) {
  header {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
  }

  .mhl {
    display: block;
  }

  .mhr {
    display: block; /* Show the right-hand image */
  }

  .headertext {
    text-align: center;
  }

  .headertext h1 {
    font-size: 1.5rem;
  }

  .headertext h2 {
    font-size: 1.1rem;
  }
}



/*------------------------------------------------------------------------------- For normal desktop screens beginning at 1025px------------------------------------------------------------------------- */	
	
    @media only screen and (min-width: 1025px) {
      body {
      /*margin: 20px auto;
      max-width: 1200px; /* Set a maximum width for desktop view - commented out probably scooped elsewhere*/
	  font-size: 18px;
	  background-image: url('images2/waves1.jpg');
	  background-size: cover; /* Stretches the image to cover the entire area */
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Prevent the image from repeating */
      min-height: 100%; /* Ensure the background covers at least the full height of the content */
      background-attachment: fixed; /* This makes the background stay fixed when scrolling */
		}
	#main {
  max-width: 1200px;
  margin: 0 auto;
  
  background-color: white;
  
}


	.show-desktop {
      display: inline;
	  font-size: 1rem;
	  color: navy;
   }	
		
	 .cite-style {
     text-align: center;
	 font-size:1rem;
     }
	.obe_medal {
    width: 25%; /* Adjust the width as needed */
	margin-top: .8rem;	
     }
	.red {
	font-size: 1.1rem; /*larger font for desktop screen*/	
	} 
    .navy {
	color: navy;
	font-size: 1rem;
    }
	cite{
	font-size: 1rem;	
	}
  h3 span {
	font-size: 1.2rem;	
	}
	
      #main {
        flex-direction: row; /* Change to row for larger screens */
      }
      #main > nav {
        flex: 0 0 20%; /* Set the width of the navigation column */
      }
	  #main > article {
        background: #F7F7F7;
        flex: 4; /* Set the width of the article column (4 times wider than the nav column) */
      }
	  
      .nav-content-wrapper {
        display: flex;
        flex-direction: column;
		border-right: 1px solid #2a659c;
        background: #F7F7F7;
        flex: 1; /* Take remaining space for content on larger screens */
       }
            
      .content-div {
      display: flex;
      flex-direction: column;
	  align-items: center;
      margin: 0 auto;  
      }
      .content-div > figure {
       margin-top: -5px;
      }
	  
	  .fb-button img {
      max-width: 100%;
      margin: 1.5rem auto;
      height: auto;
      display: block; /* Ensures the image doesn't have extra space below */
	  }
	  figure.MND {
	  color: navy;
      text-align: center;
      font-weight: bold;
	  margin-bottom: 1.5rem;
	  font-size: 1rem;
      width: 13rem;	 
	  margin:1rem auto;	
      }
	  
	  figure.badge {
	  margin-bottom: 2rem; 	  
	  }
	  .cabin img {
      max-width: 60%;
      display: block; /* Ensures the image is displayed as a block element */
      margin: 1.5rem auto;
      }
	  .cabin p {
	  text-align: center;
      color: navy;	  
	  }
	  figure.poem {
	  color: navy;
	  font-size: 1rem;
	  font-weight:normal;
	  text-align: left;
	  width: 68%;
	  margin: 0 auto;
	  }
	  .poem img {
	  margin-left: 1.5rem;
	  }	
      footer {
	  height: 4vh;	
	  flex-direction: row;
      justify-content: space-between;
      }
	 /*Home Page Styles*/ 
	.picture {
     float: right;	
     max-width: 400px;
	 height: auto;
	 margin: .5rem .5rem 1rem .5rem;	    
    }
	
	.rogerson {
     float: right;	
     width: 50%; /* Set the desired width of container */
	 max-width: 180px;
	 height: auto;
	 margin: .6rem .5rem 1rem .5rem;	    
    }
	.capt-rogerson {
	 float: right;	
     width: 50%; /* Set the desired width of container */
	 max-width: 200px;
	 height: auto;
	 margin: .5rem 1.5rem 1rem 1rem;	    
	}
	
	
	.peever {
     float: left;	
     width: 60%; /* Set the desired width of container */
	 max-width: 170px;
	 height: auto;
	 margin: 0 1.5rem .5rem 1rem;	   
    }
	
	.ROGphot-toptext {
	 margin-top: .2rem;
	}
	.PEEphot-toptext {
	 margin-top: .2rem;	
	}
	.phot-undertext {
	margin-top: -.3rem;	
	}
	
	 .boxcontent {
      width:100%;
	  max-width:650px;
      margin:25px auto;
      color: navy;
      padding: 10px;	
    }
    	
	.blockquote-footer {	
	margin-bottom: -2rem;
	}
		
    blockquote, .bq {
    color: navy;
    }
	
	.home-towerh1 {
     float: left;	
     width: 60%; /* Set the desired width of container */
	 max-width: 200px;
	 height: auto;
	 margin: -2px 1rem .5rem 1rem;	   
    }
	.marr-mac-container {
	display: flex;	
	flex-direction: row; /* Side by side */
    justify-content: center;
    gap: 1.5rem; /* Closer together - reduced from default spacing */
    
  }
  
  .marr-mac-container figure {
    width: 220px; /* Smaller images on desktop */
  }
  
  .marr-mac-containerimage figcaption {
    font-size: 1rem;
  }

	
	
	
	article h2 {
   font-size: 1.3em; 
   margin-top: 1em;
   margin-bottom: 1em;   
   }
   
   article h3 {
   font-size: 1.1em; 
   }		
	.headertext h1 {
    margin: 0; /* Remove margin to have h1 centered */
    color: white;
    font: normal 1.5rem Georgia, Times, "Times New Roman", serif;
    }

   .headertext h2 {
    display: block; /* Show h2 beyond 768px (desktop) */
    color: #ffff99; /* Change color of h2 for desktop */
    font: normal 1.2rem Georgia, Times, "Times New Roman", serif;
    margin-top: 2px;
   }
   
   .mhl img {
	width: 100%;    
    height: auto;
	max-width: 90px;
    
  }
  .mhr img {
	width: 100%;
	height: auto;
	max-width: 90px;
    }
   
	
	/* Move .mhl and .mhr inward by 20px */
    .mhl,
    .mhr {
    margin-left: 20px;
    margin-right: 20px;
	}  
	
	/*End Home Page Styles*/
	
	/*Intro Page Styles*/ 
	
	.intro-phot-cont {
	 float: left;
	 width: 265px; /* Set the desired width */     
     margin-right: -.6rem; /* Set the desired margin */
	 margin-left: -.6rem; /* Adjust the value as needed */
	 margin-top: -.5rem;
     overflow: hidden;
	 display: flex;
	 flex-direction: column;
	 }
	 
	.intro-phot-cont1 {
	float: right;
	width: 50%;
	max-width: 250px; /* Set the desired width */
    height: auto; /* Set the desired height */
	margin: 4rem 0 5px .8rem;
	 }  
	.intro-phot-cont img  {
	width: 100%;
    height: auto;
	border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;  
	}
	.intro-phot-cont1 img  {
	border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;  
	width: 100%;
    height: 100%;
	}
	
	/*Rogerson Page Styles*/
	.rogerson-container {
    display: flex;
    justify-content: center;
    }
	


.obe_medal {
  width: 15%;
  min-width:150px;
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
}

.obe_medal img {
  width: 100%; /* Make sure the image takes up the full width of its container */
  height: 100%;
  object-fit: contain; /* Maintain aspect ratio, fit fully inside */
}
/* End Rogerson Page Styles*/

/*Peever Page Styles */
    .cwgc {
    width: 450px; /* Wider container for larger screens */
    margin: 3rem auto;
  }

  .cwgc img {
    max-width: 100%; /* Image won't exceed container width */
  }

  .WTO {
  float: right;
  margin: .6rem 1rem 0 1.5rem;
  width: 50%;
  max-width: 200px;
  }
  
  
  /* End Peever Page Styles */
  
  /* Jarman Page Styles */
	 
.diajohn {
 float: right;	
 width: 50%; /* Set the desired width of container */
 max-width: 208px;
 height: auto;
 margin: .6rem 1rem 1rem 1.5rem;	    
 }
 .hr.home-hr {
  margin: 2em 0 0.5em 0;
 }
 
 .johnjarman { 
 float: left;	
 width: 60%; /* Set the desired width of container */
 max-width: 260px;
 height: auto;
 margin: 0 1.5rem 1.5rem 1rem;	   
 }
 .dianaDeath {
 float: left;	
 width: 60%; /* Set the desired width of container */
 max-width: 300px;
 margin: .4rem 1.5rem 1.5rem 1rem;	
 }
    
 .telegram {
 width: 90%;
 max-width:400px;
 }
 .open_boats {
 width: 90%;
 max-width:400px;
 }
 .dailymail {
 float: right;	
 width: 50%; /* Set the desired width of container */
 max-width: 300px;
 height: auto;
 margin: .5rem .5rem 1rem 1.5rem;	    
 } 

	 /* End Jarman Page Styles */
	 
	 /* Reunion Page Styles */
	 
	.reunion1 {
        display: flex;
        justify-content: flex-end; /* Align items to the right */
        align-items: flex-start; /* Align items vertically at the top */
        position: relative;
        
    }

    .reunion1 img {
        width: 14%; /* Adjust image width for desktop viewports */
        align-self: flex-start; /* Align the image to the top */
    }

    .reunion1 .ellermanemblem {
        text-align: left; /* Align text to the left */
        margin-top: 5px; /* Adjust margin to move the text down */
    }
	
    .reunion1 .ellermanemblem1 {
        font-size: 39px; /* Increase the font size for desktop */
        margin-bottom: 3px; /* Add more space below the text */
    }
	.reunion1 .ellermanemblem p {
		font-size: 17px;
	}

    .reunion1 .reunion {
        flex-grow: 1; /* Allow the .reunion container to grow */
        display: flex;
        flex-direction: column; /* Stack the emblem and text above each other */
        align-items: flex-start; /* Align content to the left */
        margin-left: 20px; /* Add some space between image and text */
    }
	
		 
	.union-container {
	width: 100%;
	max-width:85%;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    min-height: 30vh;
    margin: 0 auto;
    
    }

    .reunion1984,
    .reunion_1984 {    
    margin: 0; /* Reset margin for the figures */
	width: 50%;
    }
 
    .reunion_1984 img {
	width: 95%; 
    }
	
    .reunion1984 img {
    width: 90%;	
    }
	
    .union-container1 {
	width: 100%;
	max-width:85%;
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Centers items along the cross axis */
    min-height: 30vh;
    margin: 0 auto;
    }
	.reunion-1984 { 
	margin: 0; /* Reset margin for the figures */
	width: 50%;	
	}
	.reunion1_1984  {
	margin-top: 2.7rem;
    width: 50%;	
	}
	
	
	.reunion-1984 img {
	width: 90%;	
	}
	
	.reunion1_1984 img {
	width:98%;
	}
	
	.union-container2 {
	width: 100%;
	max-width: 85%;
    display: flex;
    justify-content: flex-start; 
    align-items: center; /* Centers items along the cross axis */
    min-height: 30vh;
    margin: 0 auto;
    }
	.images_reunion, .images_reunion1  {
	margin: 0; /* Reset margin for the figures */
	width: 50%;	
	}
		
	.images_reunion img {
	width: 93%;	
	}
	.images_reunion1 img {
	width: 93%;
	}
	
	 .union-boat-container {
	width: 100%;
	max-width: 85%;
    display: flex;
    justify-content: flex-start; 
    align-items: center; /* Centers items along the cross axis */
    min-height: 30vh;
    margin: 0 auto;
    }
	.reunionboat, .reunion_boat {
	margin: 0; /* Reset margin for the figures */
	width: 50%;	
	}
	
	.reunionboat img {
	width: 93%;	
	}
	.reunion_boat img {
	width: 93%;
	}
		
	/* Clan Alpine Page Styles */

    .ban-clan-container {
        flex-direction: row; /* Side by side on desktop */
        justify-content: center; /* Center horizontally on desktop */
    }

    .banbury {
    width: 30%; 
	max-width: 200px;
	margin: 4rem; /* Add spacing between the figures */
	}
	
   .alpineflag {
	width: 40%; 
	max-width: 300px;
   }
   
   .alpine {
	width: 80%; 
    max-width: 450px;
    margin: 2rem auto; /* Center the figure horizontally */
    text-align: center; /* Center the content within the figure */
   }   
 	/* End Clan Alpine Page Styles */
   
    /* Bendoran Page Styles */
	
	.ben-flag-container {
	width:100%;
	max-width: 800px;
	margin: 2rem auto;
	display: flex; 
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */
	align-items: flex-start;
    }

    .bendoran1 {
    width: 45%; 
	margin-right: 2rem; /* Add spacing between the figures */
	}
	
   .benflag {
	width: 44%;
   }
   .ben-flag-container img {
  width: 100%;
  height: 190px; /* Set fixed height - adjust this value as needed */
  object-fit: cover; /* Crop image to fill the space */
  object-position: center; /* Keep center part visible */
  display: block;
}
   
   	/* End Bendoran Page Styles */
	
	/* Passenger List Page Styles */
	
	.nestor-straat-container {
	width:100%;
	max-width: 800px;
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */	
	}
	
	.straatsoenda {
	width: 45%;
	}
	.nestor {
	width: 40%;
	}
  
    /* End Passenger List Page Styles */
	
	
	/* Boat1 Page Styles */
	 .mc_call {
	 float: left;	
     width: 50%; /* Set the desired width of container */
	 max-width: 230px;
	 height: auto;
	 margin: 10px 1.5rem .5rem 1rem;
	 }
    .rhakotis {
	 float: right;	
     width: 55%; /* Set the desired width of container */
	 max-width: 380px;
	 height: auto;
	 margin: .6rem .5rem 0 1.5rem;  
    }
	.scy {
	width: 80%;	
	max-width: 400px;
	}
	.rogerson-ltr-cont {
	display: flex;
	flex-direction: row;	
	}
	.rogersonltr {
	display: flex;
    align-items: center; /* Center vertically */
    justify-content: flex-end; /* move text to the right */ 
    width: 90%;	
	}
	/* End Boat1 Page Styles */
	
	/* Boat7 Page Styles */
	 .b7boundy {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 220px;
	 height: auto;
	 margin: 4rem 1rem 1rem 1.5rem;	    
    }
    /* End Boat7 Page Styles */
	
	/* Stubbs Page Styles */
	.stubbs1 {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 240px;
	 height: auto;
	 margin: 2.8rem 1rem 1rem 1.5rem;	 
	 /* End Stubbs Page Styles */
	}
	/* Simms Page Styles */
	.l_boat {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 260px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;
	}
	/* End Simms Page Styles */
	
	/* Quantrill Page Styles */
   .quantrill_1 {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 230px;
	 height: auto;
	 margin: 0 1rem 1rem 1rem;
    }
	.quantrill {
	float: left;	
    width: 50%; /* Set the desired width of container */
	max-width: 220px;
	height: auto;
	margin: 10px 1.5rem .5rem 1rem;	
	 /* End Quantrill Page Styles */ 
	 }
	/* Ordeal Page Styles */ 
	
	.ordeal {
	float: right;	
    width: 90%; /* Set the desired width of container */
	max-width: 400px;
	height: auto;
	margin: .5rem 2rem 1rem 1rem;
	}
    .cairo_phot {
	width: 80%;
	max-width:600px;
	margin:2rem auto;
    }
	.nomedal {
	float: left;	
    width: 50%; /* Set the desired width of container */
	max-width: 300px;
	height: auto;
	margin: 10px 1.5rem .5rem 1rem;	
	}
	.scyllahms {
	width: 80%;
	max-width:600px;
	margin:2rem auto;	
	}
	/* End */ 
	
	/* Miller Page Styles */ 
	blockquote.miller-bq {
	font-size: 1rem;	
	margin: 0 auto;
	}	
	
	.adm-container {
	width:100%;
	max-width: 800px;
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */
    }
	
	.ADM {
	width: 25%; 
	margin-right: 2rem; /* Add spacing between the figures */	
	}	
		
	.majmiller {
	width: 25%;	
	}	
	/* End */
	/* Dulcie Kendall Page Styles */
	
	.dulk {
	float: left;	
    width: 50%; /* Set the desired width of container */
	max-width: 200px;
	height: auto;
	margin: 0 1.5rem 1rem 1rem; /* remove top margin */
	}	
	.dkendall {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 200px;
	 height: auto;
	 margin: 1.5rem 1rem 1rem 1.5rem;      
    }
    .kendall {
	float: left;	
    width: 70%; /* Set the desired width of container */
	max-width: 270px;
	height: auto;
	margin: 1.2rem 1rem 1rem 1rem;	
	}	
	/* End */
	
	/*Gladys Usher Page Styles */
	
	.Gusher {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 220px;
	 height: auto;
	 margin: .5rem 1rem 1rem 1.5rem; 	
	}
	blockquote.gladys-bq {
	
/* Centering and spacing */
  width: 90%;
  max-width: 750px;
  margin: 2rem auto;
  padding: .5rem 1rem;
  /* Typography */  
  font-size: 1rem;
  }
blockquote.gladys-bq1, .gladys-bq2, .gladys-bq3,.evelyn-bq {
	/* Centering and spacing */
  width: 90%;
  max-width: 450px;
  margin: 2rem auto;
  padding: .5rem 1rem;
  /* Typography */
  font-size: 1rem;
 }
 
	/* End */
	
	/*Robert Faulds Styles */
	
	.rfaulds {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 200px;
	 height: auto;
	 margin: .5rem 1rem 1rem 1.5rem;	  	
	}	
	/* End */
	
	/* Joan Redl Styles */
	
	.jr1 {
	 float: right;	
     width: 70%; /* Set the desired width of container */
	 max-width: 190px;
	 height: auto;
	 margin: .5rem 1rem 1rem 1.5rem;	 	
	}	
	/* End */
	
	/*Lady Almond Page Styles */
	
	.ladyva {
	float: left;	
    width: 70%; /* Set the desired width of container */
	max-width: 210px;
	height: auto;
	margin: 0 1rem 1rem 1rem;	    	
	}
	/* End */
	
	
	/* McNeill Page Styles */
	.keith {
	float: left;	
    width: 70%; /* Set the desired width of container */
	max-width: 200px;
	height: auto;
	margin: 0 1rem 1rem 1rem;	  	
	}
	.mcneill {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 200px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;	 		
	}
	/* End */
	/* Merten Letter Styles */
	
	.merten2 {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 200px;
	height: auto;
	margin: 0 1rem 1rem 1.5rem;		
	}
	.italic {
		font-size: 1rem; 
	}
	/* End */
	
	/* Betty Birchman Page Styles */
	.bbirch {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 190px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;		
	}
	
	.hflag-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	}

    .hflag {
	flex: 1; /* Takes up one-third of the space */
    order: 1; /* Leftmost position */
	text-align: left; /* Push to the left */
	
    }

    .bettyltr {
    flex: 0 0 auto; /* Do not grow, do not shrink, keep its size */ 
    order: 2; /* Centered position */
    }

    .bettyltr1 {
    flex: 1; /* Takes up one-third of the space */
    order: 3; /* Rightmost position */
    text-align: right; /* Align text to the right */
    }
	/* End */
	
	/* Lost at Sea Page Styles */
	.plaque {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 280px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;		
	}
	
   .shenton{
	width:100%;
	max-width: 310px;
	margin: 2rem auto;
   }
	/* End */
	
	/* Lost at Sea Lascar Page Styles */
	.lascar-container, .lascar1-container {
	width:100%;
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */	
	}
	.war1 {
	max-width:305px;
    margin-right: 1rem;		
	}
	.lascar {
	max-width:320px;	
	}
	.lascar_panna {
	max-width:200px;
    margin-right: 1rem;		
	}
	.lascar blockquote.br {
	max-width: 360px;
    }
    /* End */

    /* Great War Page Styles */
    .troopship-container {
	width:100%;
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */	
	} 
	.troopship {
	max-width:340px;
    margin-right: 1rem;		
	}
	.troopship1 {
	max-width: 330px;		
	}
	.mceachern {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 260px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;		
	}	
	.ejcol {
	float: left;	
    width: 70%; /* Set the desired width of container */
	max-width: 230px;
	height: auto;
	margin: 0 1rem 1rem 1rem;	  	
	}
    .troopship2 {
	width:100%;
	max-width: 550px;
	margin: 5rem auto;    
    }
    .troopship3 {
	width:100%;
	max-width: 400px;
	margin: 2rem auto;    
    }
	
   /* End */
   
   /* Diary of Ada Walker */
   .birkenhead {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 320px;
	height: auto;
	margin: -1.5rem 1rem 1rem 1rem;		   
   }
   .ada-container {
	width:100%;
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */	   
   }
   .walker {
   max-width:190px;
   margin-right: 1rem;		
   }
   .walkerfamily {
	max-width: 190px;		
   }
   .cityof_cairo {
	float: right;	
    width: 70%; /* Set the desired width of container */
	max-width: 390px;
	height: auto;
	margin: .5rem 1rem 1rem 1.5rem;		   
   }
   .bombay {
   width:100%;
   max-width: 400px;
   margin: 2rem auto;       
   }   
   /* End */
   
   /*Martin Page Styles */
   
 .martin-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   }  

  .badge-content {
    /* Desktop styles for .badge-content */
	margin-right: 1rem;
	margin-bottom: 2rem;
	font-style: oblique;
	
  }
  .top-row {
   flex: 50%;
   flex-direction: column;
   align-items: flex-start;	
   margin-left: 2rem;
   }
   .bottom-row {
   flex: 90%; 
   justify-content: space-between;	
   margin-right: 2rem;
   }

  .textbox {
    /* Desktop styles for .textbox */
	margin-right: 1rem;
  }

  .martin_photo {
    /* Desktop styles for .martin_photo */
	margin-right: .5rem;
	width: 200px;
  }
  .textbox2 {
  font-size: 1.1rem;	
  line-height: 1.4rem;
  margin-top: -1rem;
  margin-right: 2rem;  
  }
  /* End */
  
  /*Photos Page Styles */
 .photo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  
}

.sthelena {
  grid-column: 1;
  grid-row: 1; /* Place .sthelena in the first row */
  display: flex;
  flex-direction: column;
}

.boundy {
  grid-column: 2;
  grid-row: 1; /* Place .boundy in the first row */
 }

.survivors {
  grid-column: 1 / 2;
  font-size:.8rem;
}

.photo-container1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  
}

.boundy1 {
  grid-column: 1;
  grid-row: 1; 
  margin-top: 1rem;
}

.gov {
  grid-column: 2;
  grid-row: 1; 
}

.survtext {
  grid-column: 1 / 2;
  font-size:.8rem;
}
.photo-container2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  
}

.photo-container3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
 
}

.photo-container4, .photo-container-p1-4, .photo-container-p1-7, .photo-container-p1-8, .photo-container-p1-9, .photo-container-p1-10, .photo-container-p1-11, .photo-container-p1-12, .photo-container-p1-14  {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.photo-container5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;	
}
 /* End */
 
 /*Photo(1) Page Styles */
 .photo-container-p1-1, .photo-container-p1-2, .photo-container-p1-3, .photo-container-p1-5, .photo-container-p1-6, .photo-container-p1-6-5, .photo-container-p1-13 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;		 
 }
 
 /* positioning within -photo-container-p1-5 */
 .sims {
  grid-column: 1; /* Place .sims in the first column */
  grid-row: 1; /* Place .sims in the first row */
}

.sims2 {
  grid-column: 1; /* Place .sims2 in the first column */
  grid-row: 2; /* Place .sims2 in the second row (directly underneath .sims) */
}

.photo-container-p1-5 .stubquant {
max-width: 260px;
grid-column: 2; /* Place .stubquant in the second column */
grid-row: 1 / span 2; /* Place .stubquant in the first row and span 2 rows */
}
.cityofc {
width: 100%;
max-width:400px;
margin-top: 1rem;
}
.tagg1 {
width: 90%;
max-width:260px;
}
.rooksby {
	width: 90%;
	max-width: 400px;
}
 /* End */

 /* Photos(2) Page Styles */
 .photo-container-p2-1, .photo-container-p2-8, .photo-container-p2-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;	 
 }
 .photo-container-p2-2, .photo-container-p2-3, .photo-container-p2-4, .photo-container-p2-5, .photo-container-p2-6, .photo-container-p2-7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;		 
 }
 .linecrossing4, .linecrossing8 {
 width: 90%;
 max-width: 350px;	 
 }
 .linecrossing7 {
 width: 90%;
 max-width: 325px;	 	 
 }
 .linecrossing9 {
 width: 90%;
 max-width: 250px;	 	 
 }
 .certtext {
font-size: 1rem;	
margin-top: -.5rem; 
 }
 .st_helena1, .st_helena2 {
 width: 90%;
 max-width: 350px;		 
 }	
 /* End */ 
 
 /* My Fathers Story Page Styles */
 .picture1 {
  float: right;
  margin: 0 1.5rem 0 1rem;
  width: 28%;
  max-width: 230px;	 
 }
 .QMphoto-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;		 	 
 }
 .dad-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;	 
 }
 .dad1 {
 width: 70%;
 max-width:200px;	 
 }
 .photo {
 width: 47%;
 max-width:200px;		 
 }
 .queenmary {
 max-width:300px; 
 }
 .queenmary1 {
 max-width: 350px;	 
 }
 
 .text-left {
 position: relative;
 display: inline;
 font-size: 1.2rem;
 }
 .text-top {
 display: none;
 }	
 
 .pc span {
	font-size: 1.2rem; 
 }
 /* End */
 
 /* Ellerman Lines Page Styles */
 .ellerman1 {
 float: right;	
 width: 50%; /* Set the desired width of container */
 max-width: 170px;
 height: auto;
 margin: 0 .5rem 1rem 1.5rem;	    
 }
 .city {
 float: left;	
 width: 50%; /* Set the desired width of container */
 max-width: 170px;
 height: auto;
 margin: 5px 1.5rem .5rem 1rem;	  	 
 }
 
 /* End */
 
 /* U-68 Page Styles */
 .merten {
 float: right;	
 width: 50%; /* Set the desired width of container */
 max-width: 200px;
 height: auto;
 margin: 2.8rem .5rem 1rem 1.5rem;	    	 
 }
  .u68-container {
    grid-template-columns: 1fr 1fr; /* Two columns side by side */
    gap: 40px;
    max-width: 800px; /* Wider container for desktop */
    margin: 40px auto; /* Center container in page */
  }
  
  .u68-container.u-68, .u68-container.conningtower {
  max-width: 200px; /* Limit individual figure width */
  }
 
 
 .arriaga {
 margin-top: 4.5rem; 
 }
 ul.list {
 font-size: 1.2rem;
 }
 /* End */
 
 /* Joan Redl Page Styles */
.custom-h4 span {
font-size: 1rem;	
} 
 /* End */
 
 /* Wreck Located Page Styles */
 .silver_rupee {
 float: right;	
 max-width: 280px;
 height: auto;
 margin: 0 .5rem 1rem 1.5rem;
 }
 
 .plaquerespect {
width: 100%;
max-width:400px;	 
 }
.enlarge-gallery li {
  margin: 0 1rem 1rem; /* Add margin to create space between images and captions */
  flex-basis: calc(50% - 2rem); /* Ensure two items per row with margin subtracted */
  position: relative;
}
.londonmint {
 float: right;	
 width: 50%; /* Set the desired width of container */
 max-width: 300px;
 height: auto;
 margin: -2rem 1rem 1rem 1.5rem;	    	
}
.london-mint-coins {
width: 70%;
max-width:400px;	
}

#imagegallery {
margin: 4rem auto;	
}
.u-68 {
width: 90%;
max-width: 200px;
display: flex;
flex-direction:row;
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}
.conningtower {
width: 90%;
max-width: 215px;
display: flex;
flex-direction: row;
align-items: center; /* Center items horizontally */
margin: 2rem auto; 		
}

.sinking-container {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 50px; /* Space between images */
    max-width: 800px; /* Wider container for desktop */
    margin: 40px auto; /* Center container with top/bottom margin */
  }
  
  .sinking-container .sinking,
  .sinking-container .arriaga {
    max-width: 350px; /* Larger on desktop but consistent */
    justify-self: center; /* Center each figure in its grid cell */
  }
  
  /* Ensure consistent sizing as viewport changes */
  .sinking-container img {
    width: 100%;
    height: 250px; /* Fixed height for consistent sizing */
    object-fit: cover; /* Crop to maintain aspect ratio */
    object-position: center; /* Center the cropped area */
  }


.book {
float: right;	
width: 50%; /* Set the desired width of container */
max-width: 160px;
height: auto;
 margin: 0 .5rem 1rem 1.5rem;	  	
}
.phil {
float: left;	
width: 60%; /* Set the desired width of container */
max-width: 200px;
height: auto;
margin: .5rem 1.5rem .5rem 1rem;		
}
.addmargin {
margin-top: 5rem;	
}
.mn_badge1 {
float: right;	
width: 50%; /* Set the desired width of container */
max-width: 180px;
height: auto;
 margin: 0 .5rem 1rem 1rem;	  		
}
/* Contact Form Styles */
#mnimage-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding-left: 9rem; /* add this to align with rest of page content */
}

#mnimage-container img {
  width: 50px;
  flex-shrink: 0;
}

#mnimage-container .forheader {
  font-size: 1.2rem;
  margin: 0;
}

	/*Styles for tables*/
table { 
  width: 100%; 
  border-collapse: collapse; 
  }
/* Zebra striping */ 
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #2a659c;
  color: white; 
  font-weight: bold; 
  }
td, th { 
  padding: 4px; 
  border: 1px solid #ccc; 
  text-align: left; 
  
}
td.table1 {
	text-align: center;
}
thead th {
	text-align: center;	

 } 
 .helena-container {
	width:100%;
	
	margin: 2rem auto;
    flex-direction: row; /* Side by side on desktop */
    justify-content: center; /* Center horizontally on desktop */
	}
	.war {
	max-width: 300px;
    margin-right: 1rem;	
	}
    .lawrence {
	max-width: 250px;
	}
  
}	
   
 /*------------------------------------------------------------------------------- END normal desktop screens beginning at 1025px------------------------------------------------------------------------- */      

@media (min-width: 480px) and (max-width: 499px) {
  .headertext {
    padding-left: 0.5rem;   /* Reduce left padding slightly */
    padding-right: 1rem;    /* Keep right side roomy */
    margin-left: -10px;      /* Optional: nudge slightly left */
  }
}


@media only screen and (max-width: 450px) and (orientation: portrait) {

  .headertext h1 {
    font-size: 1.2rem;
  }

  .headertext h2 {
    font-size: 1.1rem;
  }
}


/* small iphone range */
@media only screen and (max-width: 370px) and (orientation: portrait) {
 .headertext h1 {
    font-size: 1.2rem;
  }

  .headertext h2 {
    font-size: .9rem;
  }
  article h2 {
	font-size:  1.2rem;
  }
}


	
@media (min-width: 451px) and (max-width: 479px) {
  .headertext h1 {
    font-size: 1.4rem;
  }

  .headertext h2 {
    font-size: 1.15rem;
  }
}
	
@media (min-width: 320px) and (max-width: 430px) {
    .bottom-row {
        gap: 1rem;
    }
    .textbox {
        max-width: 160px;
		margin:0;
		margin-top: -2rem;
    }
	  .cef {
	margin-top: 2rem; /* Push CEF image down */	  
	
	  }
    .martin_photo {
        margin:0;
    }
}
/* ==========MEDIA QUERIES========== From June 2025 ==all media queries based on mobile first approach*/

/* ========== INDIVIDUAL PORTRAIT FIGURES ========== */
/* Single image components that float left on desktop for text wrapping */

/* Mobile-first base styles - Default styles apply to mobile */
.britt {
  /* Brittany portrait - stacks vertically on mobile, floats left on desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 15px auto;
  width: 200px;
}

/* Ensure the image is responsive within its container */
.britt img {
  width: 100%;  /* Makes image fill the figure width, overrides HTML attributes */
  height: auto; /* Maintains aspect ratio, overrides HTML attributes */
  display: block; /* Removes any inline spacing issues */
}

/* Style the caption for better readability */
.britt figcaption {
  font-size: 1rem; /* Smaller caption text for mobile */
  text-align: center; /* Center the caption text */
  margin-top: 5px; /* Small space between image and caption */
}

/* ========== MULTI-FIGURE CONTAINERS ========== */
/* Components that display multiple images together - column on mobile, row on desktop */

.mac-mead {
  /* Container for Mac and Mead portraits - responsive layout */
  display: flex;
  flex-direction: column; /* Stack figures vertically on mobile */
  align-items: center; /* Center each figure horizontally */
  gap: 20px; /* Space between the two figures */
  margin: 0 auto; /* Center the container itself */
  padding: 0 15px; /* Add some padding for mobile edge spacing */
}

/* Style individual figures within the container */
.mac-mead figure {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  align-items: center; /* Center image and caption */
  margin: 0; /* Remove default figure margins */
  width: 200px; /* Consistent width for mobile */
}

/* Ensure images are responsive */
.mac-mead img {
  width: 200px; /* Fill the figure width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing issues */
}

/* Style captions for better readability */
.mac-mead figcaption {
  font-size: 0.85em; /* Smaller text for mobile */
  text-align: center; /* Center the caption text */
  margin-top: 5px; /* Small space between image and caption */
}

/* Mobile - centered by default */
.ironsides {
  margin: 0 auto; /* Centers the figure */
  text-align: center; /* Centers the caption text */
  
  max-width: 210px;
  height: auto;
  }
.ironsides img {
width:210px;
}

/* ========== PAIRED PORTRAIT CONTAINERS ========== */
/* Two portrait images that stack on mobile, side-by-side on desktop */

/* Mobile/Tablet - Centered column layout */
.whyte-gordon {
  /* Whyte and Gordon portraits - responsive pair layout */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the figures horizontally */
  gap: 20px; /* Space between figures */
  max-width: 300px; /* Constrain width */
  margin: 0 auto; /* Center the entire container */
  padding: 20px 0; /* Vertical spacing */
}

.whyte-gordon figure {
  margin: 0; /* Remove default figure margins */
  text-align: center; /* Center the caption text */
}

.whyte-gordon img {
  width: 180px; /* Consistent width for both images */
  height: 235px; /* Use the actual height of your images */
  -o-object-fit: cover; /* Crop to fill the space - older browser support */
  object-fit: cover; /* Crop to fill the space */
  -o-object-position: center top; /* Keep faces/tops visible - older browser support */
  object-position: center top; /* Keep faces/tops visible */
  display: block; /* Remove inline spacing */
}

.whyte-gordon figcaption {
  padding: 10px;
  font-size: 0.9em;
  font-weight: 500;
}


/* Quote container */
        .alfred-barnes {
            max-width: 650px;
            width: 90%;
            text-align: left;
            background: white;
            padding: 20px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
        }

        /* Quote text */
        .quote-text {
            font-size: 1rem;
            font-style: italic;
            color: #2c3e50;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        /* Attribution */
        .quote-attribution {
            font-size: .96rem;
            color: #2c3e50;
            font-weight: 500;
        }

        .quote-title {
            font-size: 0.9rem;
            color: color: #5a6c6d;
            margin-top: 3px;
        }
      

         
/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Tablet and Desktop styles - Media queries override mobile styles */

/* ========== TABLET STYLES (768px+) ========== */
@media screen and (min-width: 768px) {
  
  .britt figcaption {
    font-size: 1rem; /* Slightly larger caption on bigger screens */
  }
  
  .mac-mead {
    gap: 25px; /* Slightly more space between figures */
    max-width: 400px; /* Limit container width and center it */
  }
  
  .mac-mead img {
    border-top-left-radius: 10px; /* Maintain rounded top corners */
    border-top-right-radius: 10px;  
  }
  
  .mac-mead figure {
    width: 170px; /* Larger figures for tablet */
  }
  
  .mac-mead figcaption {
    font-size: 0.9em; /* Slightly larger caption text */
  }
}

/* ========== DESKTOP STYLES (1024px+) ========== */
/* Large desktop styles - major layout changes */
@media screen and (min-width: 1024px) {
  
  /* Individual portraits float left for text wrapping */
  .britt {
    float: left;  
    width: 230px; /* Larger width for desktop screens */
    margin: 10px 25px 20px 10px; /* Right and bottom margin for text wrap */
    text-align: center; /* Keep caption centered under image */
  }
  
  .britt img {
    width: 100%;
    height: auto;  
  }
  
  .ironsides {
    float: left;
    width: 210px;
    max-width: none; /* Override any inherited max-width - KEEP THIS! */
    margin: 10px 25px 20px 10px; /* Right and bottom margin for text wrap */
    text-align: center; /* Keep caption centered under image */
  }
  
  .ironsides img {
    width: 100%;
    height: auto;
  }
  
  .ironsides figcaption {
    font-size: 1rem;
  }
  
  /* Page-specific content adjustments */
  .tgreen {
    width: 70%;
	max-width: 600px;
  }
  
  .green-undertext, .green-undertext1, .bentxt1 {	
    font-size: 1rem;   
  }
  
  /* Multi-figure containers switch to horizontal layout */
  .mac-mead {
    display: flex;
    flex-direction: row; /* Switch to horizontal layout */
    gap: 2rem;
    justify-content: center; /* Centers the figures horizontally */
    align-items: flex-start; /* Aligns captions at the top */
  }
  
  .mac-mead img {
    width: 100%;
    height: auto; /* Let them scale naturally */
    max-height: 220px; 
    -o-object-fit: cover; /* Older browser support */
    object-fit: cover;
    -o-object-position: center top; /* Older browser support */
    object-position: center top;
  }

.mac-mead figure {
    width: 200px; 
  }
  
  .mac-mead figcaption {
    font-size: 1rem; 
  }
  
  

  .whyte-gordon {
    flex-direction: row; /* Change to horizontal layout */
    justify-content: center; /* Center the figures horizontally */
    max-width: 500px; /* Wider container for side-by-side */
    gap: 30px; /* More space between figures */
  }
  
  .whyte-gordon figure {
    flex-shrink: 0; /* Prevent shrinking */
  }
  
  .whyte-gordon img {
    width: 200px; /* Maintain consistent sizing */
  }
  
  .whyte-gordon figcaption {
    font-size: 1rem; /* Slightly larger text on desktop */
  }
  
  
 
/* ========== GLOBAL OVERRIDES ========== */
/* Global font and styling rules */

/* Add this after your existing overrides */
body { font-size: 1rem !important; 
}

.short-content-page .toplink {
  margin-top: 9rem;
}
figcaption {
  font-size: .95em;
  color: navy;
}
/* Global link styling */
  a {
    font-size: 1rem;
  } 
  .pmargin {
	  margin-bottom:2rem;
  }
  .center-text {
  text-align: center;
  }
/* ========== QUOTE COMPONENTS ========== */
/* Styled quote containers with different layouts and purposes */

.tranmer-quote {
  /* Simple quote container - clean, centered design */
  width: 90%;
  max-width: 500px;
  margin: 3rem auto;
  background: #F7F7F7;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}


/* Quote text box */
.quote-text {
  margin: 0;
  border-bottom: 1px solid rgba(42, 101, 156, 0.15);
}

/* Quote text styling */
.quote-text p {
  color: #2c3e50;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* Author box */
.author {
  padding: .5rem 1.25rem .5rem 1.25rem;
  margin: 0;
  display: block;
  font-size: 0.95rem;
  font-style: normal;
  color: #666;
  
  
   
  font-weight: 500;
}

/* Simple author link */
.author a {
  color: #2a659c;
  text-decoration: none;
  font-weight: 600;
}

.author a:hover {
  text-decoration: underline;
}



/* Desktop styles for .awdm */
@media screen and (min-width: 1024px) {
  .awdm {
    float: left;
    width: 100%;
    max-width: 220px;
    margin: 0 1.5rem 1rem 1rem; /* Right and bottom margins for text wrap */
    text-align: center;
  }
  
  .awdm figcaption {
    font-size: 1rem;
  }
}




/* ========== INDIVIDUAL IMAGE ADJUSTMENTS ========== */
/* First image - reduce height */
.rogerson-container figure:first-child {
  max-width: 200px; /* Smaller container = smaller image */
}

.rogerson-container figure:first-child img {
  max-height: 250px; /* Limit height */
  -o-object-fit: cover; /* Crop if needed to maintain aspect ratio - older browser support */
  object-fit: cover; /* Crop if needed to maintain aspect ratio */
  -o-object-position: center top; /* Keep the top part visible - older browser support */
  object-position: center top; /* Keep the top part visible */
}

/* Second image - increase size */
.rogerson-container figure:last-child {
  max-width: 300px; /* Larger container */
}

.rogerson-container figure:last-child img {
  max-height: 350px; /* Allow larger height */
}

.rogerson-container figcaption {
  font-size: 0.9rem;
  color: navy;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ========== DESKTOP: SIDE BY SIDE ========== */
@media screen and (min-width: 1024px) {
  .rogerson-container {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    max-width: 700px; /* Wider to accommodate larger second image */
  }
  
  /* First image - smaller on desktop */
  .rogerson-container figure:first-child {
    width: 220px;
    max-width: 220px;
  }
  
  .rogerson-container figure:first-child img {
    max-height: 260px;
  }
  
  /* Second image - larger on desktop */
  .rogerson-container figure:last-child {
    width: 320px;
    max-width: 320px;
  }
  
  .rogerson-container figure:last-child img {
    max-height: 400px;
  }
  
  .rogerson-container figcaption {
    font-size: 1rem;
  }
}


/* ========== DESKTOP: MEDAL FLOATED RIGHT ========== */
@media screen and (min-width: 1024px) {
  .citation-content {
    padding: 2.5rem;
  }
  
  .obe-medal {
    float: right;
    width: 110px;
    margin: 0 0 1rem 2rem; /* Top, right, bottom, left */
    order: unset; /* Remove flex order */
  }
  
  .citation-text {
    font-size: 1rem;
    margin: 0;
    /* Text will wrap around the floated medal */
  }
}

/* ========== DESKTOP: GORDON BEM MEDAL FLOATED RIGHT ========== */
@media screen and (min-width: 1024px) {
  .gordon-citation .citation-content {
        display: grid;
        grid-template-columns: 1fr 200px; /* Text takes remaining space, medal gets 200px */
        gap: 30px;
        align-items: start;
    }
    
    .gordon-citation .bem-medal {
        order: 2; /* Medal on the right */
        text-align: center;
		
    }
    
    .gordon-citation .bem-medal img {
     max-width: 180px;
    }
    .gordon-citation .bem-medal figcaption {
    margin-top: 12px;
    font-size: .85rem;         
    color: navy;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}
    .gordon-citation .citation-text {
      
    }
	.gordon-citation .citation-text {
    margin: 0;
    padding: 20px;
    background: white;
    border-left: 4px solid #1976d2;
    border-radius: 4px;
	font-size:.85rem;
    font-style: italic;
    color: #444;
    order: 1; /* Text on the left */
    text-align: justify;           /* Justifies the text */
    text-justify: inter-word;      /* Better word spacing */
}
	
}


/* ========== RESPONSIVE QUOTE STYLES ========== */
@media screen and (max-width: 767px) {
   .alfred-barnes {
                padding: 20px 15px;
                margin: 40px auto;
            }
            
            .quote-text {
                font-size: 1.1rem;
                margin-bottom: 12px;
            }
            
            .quote-attribution {
                font-size: 0.95rem;
            }
            
            .quote-title {
                font-size: 0.85rem;
            }
}




@media screen and (min-width: 1024px)  /*this is for the great war page specifically showing mobile/desktop specific text*/{
  .desktop-text {
    display: inline;
	font-size: 1rem;
  }
}



/* Tablet - Start degrading justified text Gordon page small screens */
@media (max-width: 1024px) {
    blockquote.gordon-source-quote {
        max-width: 90%;
        padding: 20px 25px;
        margin: 25px auto;
    }
}

/* Small Tablet - Further degradation */
@media (max-width: 768px) {
    blockquote.gordon-source-quote {
        max-width: 95%;
        padding: 18px 20px;
        margin: 20px auto;
        text-align: left;          /* Switch to left align */
        text-justify: none;       /* Remove justify */
        font-size: 0.95em;
    }
    
    blockquote.gordon-source-quote cite {
        text-align: left;         /* Left align citation on smaller screens */
        margin-top: 15px;
    }
}

/* Mobile - Clean, simple layout */
@media (max-width: 480px) {
    blockquote.gordon-source-quote {
        margin: 15px 10px;
        padding: 15px;
        border-radius: 4px;
        font-size: 0.9em;
        line-height: 1.5;
    }
    
    blockquote.gordon-source-quote cite {
        font-size: 0.85em;
        margin-top: 12px;
    }
}