/* Global page layout and style ------------------------------------- */

body {
  display:grid; 
  grid-template-columns:326px auto; 
  grid-template-areas:"menu content";
  margin:0;
  padding-top:1.2em;
  padding-left:1em;
  background-color:#000;
} 

nav {
  grid-area:menu;
}    

.content {
  grid-area:content;
}

ul {
  margin-left:0; 
  padding-left:0;
}

th, td {
  vertical-align:top;
  text-align:left;
}

/* ------------------------------------------------------------------ */

/* Generic fonts and text . ----------------------------------------- */

* {
  font-family:sans-serif; 
  font-size:16px; 
  line-height:1.6em; 
  color:#ddd;
}

.text {
  max-width:70ch;
}

.text p {
  margin-bottom:1.5em;
}

.text p.sub {
  margin-bottom:0.5em;
}

p.heading {
  font-weight:bold; 
  margin-top:3em;
}   /* Wednesbury 1989 */

p.title, h1.title {
  font-weight:bold; 
  margin:1.5em 0 1em 0; 
  font-size:20px;
} /* Widely used */

p.subtitle, h2.subtitle {
  margin-top:3em; 
  margin-bottom:0.5em; 
  font-weight:bold; 
  font-size:16px;
} /* Widely used */

.subtitle + figure {
  margin-top:1em;
} /* Stop a floated image getting too close (too high) when it's directly under a heading. */

.sub {
  margin-top:3em; 
  clear:both
}  /* Wednesbury 1976 & 1993 */

img {
  border:0
}

img.inline {
  border:1px solid #aaa; 
  margin-top:0.5em;
  margin-bottom:0.5em; 
  max-width:100%
}

img.map {
  display:none      
} /* Icon link to map of image location, no longer used. */

.footnote {
  color:#999
}

/* ------------------------------------------------------------------ */

/* Individual photo pages ------------------------------------------- */

body.photo figure {
  margin:0;
  padding:0; 
  position:relative; 
  display:table;
}

body.photo figure img {
  border:2px solid #aaa;
  max-width:100%;
  height:auto;
}  

body.photo figure img.photo {
  margin:0;
}

body.photo figcaption {
  margin-top:1em; 
  padding:0.5em 0.5em 2em 0.5em; 
  text-align:left; 
  display:table-caption; 
  caption-side:bottom;
}    

body.photo figcaption, img.signature {
  animation: fadein 2s;
}                                        

@keyframes fadein {
  from {opacity:0} to {opacity:1};
}

/* ------------------------------------------------------------------ */

/* Thumbnail and non-photo pages ------------------------------------ */

div.content {
  margin:0 3em 1em 0; 
  display:inline-block;
} 

/* ------------------------------------------------------------------ */

/* Add "BescotPlus" logo for wide pages. ---------------------------- */

div.header::after {
  content:url('/LogoNew.png'); 
} 

/* ------------------------------------------------------------------ */

/* Home page -------------------------------------------------------- */

div.photoshome {
  max-width:1050px;
}

div.photoshome img {
  margin:0 10px 10px 0; 
  border:2px solid #aaa; 
  max-width:98%; 
  height:auto;
}

div.signature span {
  display:none;
}

p.titlehome {
  margin:2em 0em 1em 0em; 
  border:0;
} 

@keyframes fadein1 {
  0% {opacity:0} 100%{opacity:1};
}

@keyframes fadein2 {
  0% {opacity:0} 20%{opacity:0} 100%{opacity:1};
}

@keyframes fadein3 {
  0% {opacity:0} 40%{opacity:0} 100%{opacity:1};
}

@keyframes fadein4 {
  0% {opacity:0} 50%{opacity:0} 100%{opacity:1};
}

.photoshome a:nth-child(1) {
  animation: fadein1 2s;
} 

.photoshome a:nth-child(2) {
  animation: fadein2 2.5s;
} 

.photoshome a:nth-child(3) {
  animation: fadein3 3s;
} 

.photoshome a:nth-child(4) {
  animation: fadein4 3.5s;
} 

/* ------------------------------------------------------------------ */

/* Contact page ----------------------------------------------------- */

div.contact {
  margin-top:2em; 
  margin-bottom:2em; 
  width:50em;
}

/* ------------------------------------------------------------------ */

/* Before and after text and images (Pleck-Round Oak page) ---------- */

div.location {
  border:2px solid #888;
  padding-left:1em; 
  background-color:#012731; 
  margin-top:3em; 
  max-width:65em;
}

div.location p.location {
  font-weight:bold; 
  padding-bottom:1em;
}

div.location span.date {
  font-weight:bold;
}

/* ------------------------------------------------------------------ */

/* Menu ------------------------------------------------------------- */

nav {
  display:inline-block; 
  text-align:left; 
  margin-right:1em; 
  padding-right:1em;
}    

ul.menu {
  margin-top:0; 
  margin-left:0.5em; 
  list-style-type:none;
}

ul.menu a, div.links a, #lastupdated {
  text-decoration:none;
} /* Kill the underline on hyperlinks. It's added back on hover. */       

ul.menu a:hover, ul.menu label:hover, div.links a:hover {
  text-decoration:underline;
}

ul.menu a {
  display:block;     
} /* Makes the whole <li> act as a hyperlink. */   

ul.menu > li {
  margin-top:0.5em;
}

ul.menu > li.break {
  margin-bottom:2em;
}

ul.menu li.indent {
  margin-left:1.5em;
}

ul.menu li.indent2 {
  margin-left:2.5em;
}

ul.menu li.inactive {
  color:#889;
}

ul.menu ul li {
  margin-left:1.5em;
}

.hassubmenu {
  overflow:hidden;
} 

.hassubmenu ul {
  list-style-type:none;
}

.hassubmenu ul li {
  padding-top:0.5em;
}

.hassubmenu label {
  cursor:pointer;
} /* Make the <label> for a menu item that has a submenu behave like a hyperlink.  */

.hassubmenu input[type="checkbox"] {
  display:none;  
} /* Hide the checkbox used to toggle a submenu. */

.hassubmenu input[type="checkbox"] ~ ul {
  margin:0; 
  max-height:0;
  transition:all 0.6s ease-in-out;
} /* Close a submenu. */

.hassubmenu input[type="checkbox"]:checked ~ ul {
  margin:0; 
  max-height:9em; 
  transition:all 0.6s ease-in-out;
} /* Open a submenu. */ 

li.home {
  display:none;  
} /* The "Home" link in the menu is only required for mobile/narrow screens */

a.logo:focus, a.logo:active {
  outline:0;
}

img.logo {
  margin-bottom:2em;
}  /* The "BS" sticker image atop the menu on large screens. */

#menuToggle {
  display:none;
} /* Hide the checkbox used to toggle the popup menu (on mobile/narrow pages). */

#menuIcon {
  display:none; 
} /* Hide the menu icon used to toggle the popup menu (on mobile/narrow screens). */

/* ------------------------------------------------------------------ */

/* Thumbnails ------------------------------------------------------- */

ul.thumbs {
  list-style-type:none; 
  margin-top:0em; 
  margin-bottom:0; 
  max-width:67em;
}

ul.thumbs li {
  margin-bottom:2em; 
  display:grid; 
  grid-template-columns: 220px auto;
}

ul.thumbs li span {
  margin-right:0.5em;
} 

ul.thumbs li span img {
  margin-left:0.25em;
}

ul.thumbs li img {
  border:1px solid #ddd;
}  

ul.thumbs li.intro {
  padding-top:1em; 
  margin-bottom:0; 
  border-top:4px dotted #888; 
  display:grid; 
  grid-template-columns:100%;
}

ul.thumbs li.intro:first-child  {
  border-top:0; 
  padding-top:1em;
}

ul.thumbs li ul {
  margin-top:1.5em; 
  margin-bottom:0;
}

a.thumb {
  margin-top:0.25em;
}

a.thumbright {
  margin-left:5px;
}

section.thumbs, section.thumb {
  border-top:3px solid #888; 
  margin-top:0em; 
  margin-bottom:0; 
  max-width:67em;
}

h1.title + section.thumbs, h1.title + section.thumb {
  border-top:0;
  margin-top:2em;
}

section.thumbs:last-of-type, section.thumb:last-of-type {
  /* border-bottom:0; */
}

section.thumbs li {
  margin-bottom:2em;
} 

section.thumbs li, section.thumb {
  display:grid; 
  grid-template-columns:220px auto;
}

section.thumbs li.double {
  display:grid; 
  grid-template-columns:105px 105px auto;
}

section.thumbs li img, section.thumb img {
  border:1px solid #ddd;
}

section.thumbs li.double span {
  margin-left:1.5em;
}

section.thumbs h2, section.thumb h2 {
  margin-bottom:1.5em;
}

section.thumb {
  padding-bottom:2em;
}

section.thumb h2 {
  grid-column-start:1; 
  grid-column-end:3;
}
/* ------------------------------------------------------------------ */

/* Links page ------------------------------------------------------- */

div.links {
  border:2px solid #ddd; 
  padding:1em; 
  background-color:#014051; 
  text-align:left; 
  margin-bottom:3em; 
  padding:0; 
  max-width:50em;
}

div.links p {
  font-weight:bold; 
  margin-top:0; 
  margin-bottom:0; 
  background-color:#012731; 
  padding:0.5em; 
  border-bottom:1px solid #777;
}

div.links ul {
  list-style-type:none; 
  margin:0.4em;
}

div.links li {
  padding:0.5em 0 0.5em 0.5em; 
  margin:0;
}

/* ------------------------------------------------------------------ */

/* Model pages ------------------------------------------------------ */

.model {
  display:flex;
  flex-wrap:wrap;
  margin-top:3em;
}

.model table {
  border-collapse:collapse; 
  border-spacing:0; 
  border:2px solid #aaa; 
  margin-bottom:1em;
  margin-right:2em;
  background-color:#023542;
  width:40%;
  height:3em;  /* Arbitrary small value. Table height goes to height of adjacent photo without this (caused by display:flex apparently). */
}

.model table tr :first-child {
  width:40%;
}

.model tbody :first-child td {
  font-weight:bold;
}

.model img {
  border:2px solid #aaa; 
}

/* ------------------------------------------------------------------ */

/* Wednesbury pages ------------------------------------------------- */

ul.signalling {
  margin-bottom:2em;
}

ul.signalling li {
  margin-left:1em;
  margin-bottom:1em;
}

ul.bridges {
  margin-left:1.2em; 
  margin-top:2em;
}

ul.bridges li {
  margin-bottom:2em;
}

table.locos {
  width:100%; 
  border-collapse:collapse; 
  border-spacing:0; 
  margin-top:1em; 
  border:2px solid #aaa; 
  background-color:#023542;
}

table.locos th, td {
  border:1px solid #777; 
  padding:0.5em;
}

figure.inline {
  margin-left:0; 
  margin-right:0;
}

figure.inline img {
  float:left; 
  margin-left:0; 
  margin-right:1em; 
  border:2px solid #aaa;
}

figure.inline::after {
  clear:both; 
  content:"."; 
  display:block; 
  height:0; 
  visibility:hidden;
}

.jeff {
  color:#efe0a7;
}

.uncertain {
  color:#bbb;
}
/* ------------------------------------------------------------------ */

/* Tab formatting and functionality. -------------------------------- */

.tabs {
  margin-top:2em; 
  display:flex; 
  flex-wrap:wrap; 
  max-width:65em;
}

.tabs label {
  order:1; 
  background-color:#012031; 
  color:#bbb; 
  display:inline-block; 
  margin-right:0.5em; 
  margin-bottom:0.5em;
  cursor:pointer; 
  font-weight:bold; 
  padding:0.5em; 
  text-align:left; 
  vertical-align:top; 
  border:1px solid #aaa;
}

.tabs .tab {
  order:99; 
  width:100%; 
  display:none;
}

.tabs input {
  display:none;
}

.tabs input[type="radio"]:checked + label {
  background-color:#014051; 
  color:#ddd;
}

.tabs input[type="radio"]:checked + label + .tab {
  display:table; 
  margin-top:1em;
}

/* ------------------------------------------------------------------ */

/* Table formatting (timetables, trips etc) ------------------------- */

table.timetable {
  width:100%; 
  border-spacing:0; 
  border:2px solid #aaa; 
  background-color:#014051; 
  max-width:65em; 
  margin-bottom:2em;
}

table.timetable th {
  border:1px solid #777; 
  padding:0.5em; 
  text-align:left; 
  vertical-align:top;
}

table.timetable th.caption {
  text-align:left; 
  padding-top:1.5em; 
  padding-bottom:1.5em; 
  font-size:1em;
}

table.timetable th.title, table.timetable th.date, table.timetable td.dummy {
  background-color:#012731;
}

table.timetable td {
  border:1px solid #777; 
  padding:0.5em;
}

table.timetable td.caption {
  text-align:left;
}

table.timetable td.day {
  font-weight:bold;
} 

table.timetable td.spacer {
  border:0px;
}

table.timetable td.uncertain {
  color:#999;
}

table.timetable th.train {
  width:16em;
}

table.timetable th.time {
  width:8em;
}

table.timetable td.time {
  font-weight:bold; 
  width:8em;
}

table.timetable td.loco {
  font-weight:bold; 
  width:7em;
}

table.timetable td.comments {
  font-weight:bold;
}

table.timetable td.operational {
  background-color:white;
}

table.timetable td.pass {
  font-style:italic;
}

table.timetable td.priestfield {
  color:#fc9a9a;
}

table.timetable td.colhead {
  background-color:#E6E1D0;
}

table.timetable img {
  border:1px solid #ddd; 
  margin-right:0.75em;
}

table.timetable table {
  border-collapse:collapse; 
  margin:1em 0.25em 1em 0.25em; 
  background-color:#023542; 
  width:95%;
}

table.timetable table td {
  border:1px solid #777; 
  padding:0.5em;
}

table.timetable table th {
  border:1px solid #777; 
  padding:0.5em; 
  text-align:left; 
  font-style:italic;
}

table.timetable table td.day {
  font-weight:normal; 
  width:5em;
}

table.timetable td img {
  float:left; 
  margin-right:0.7em; 
  margin-top:0.5em;
}

/* ------------------------------------------------------------------ */

/* Rugeley coal tables ---------------------------------------------- */

.early {
  color:#6BCF7D
}

.late {
  color:#FA7F7F
}

/* ------------------------------------------------------------------ */

/* Technical page --------------------------------------------------- */

ul.technical {
  list-style-type:none; 
  margin-bottom:2em
}

ul.technical li {
  margin-bottom:1em
}

ul.technical img {
  float:left; 
  margin-top:0.3em; 
  border:1px solid #ddd
}

ul.technical div {
  margin-left:2em
}

/* ------------------------------------------------------------------ */

/* Shunter pages ---------------------------------------------------- */

table.totals {
  width:100%; 
  border:2px solid #aaa; 
  border-spacing:0; 
  background-color:#014051; 
  margin-top:3em; 
  margin-bottom:2em; 
  max-width:65em;
}

table.totals th {
  border:1px solid #777; 
  padding:0.5em; 
  text-align:left; 
  vertical-align:top;
}

table.totals td {
  border:1px solid #777; 
  padding:0.3em 0.5em 0.3em 0.5em;
}

table.totals td:first-child {
  width:10em;
}

td.cls {
  width:6em;
}

.shuntersbyclass {
  display:grid; 
  grid-template-columns:7em auto;
}

.note {
  color:#999;
}

.interlude {
  border:2px solid #aaa; 
  padding:1em; 
  background-color:#14142a;
}

.interlude .subtitle {
  margin-top:0.5em;
}

.prevorlater {
  color:#888;
}

.alloc {
  color:#eddc2a;
}

.post2001 {
  color:#e2cf7a;
}

.gbrf {
  color:#adc4f7;
}

.stored {
  color:#ff8484;
}

.inlinephoto {
  float:right; 
  width:402px; 
  border:1px solid #aaa; 
  margin-top:0; 
  margin-bottom:2em; 
  margin-left:1.5em; 
  margin-right:0;
}

.inlinephoto figcaption {
  background-color:#282e48; 
  padding:0.5em; 
  margin:0; 
  border-top:1px solid #888;
}

.inlinephoto img {
  margin:0; 
  border:0; 
  padding:0; 
  display:block;  
}  /* display:block to remove padding below image (used for descenders on image replacement text) */

.popup {
  position:relative;
} /* Link for shunter number popup box. To facilitate the position of the popup box. */

.popupactive {
  color:#ccd6ff; 
  cursor:help;
} /* Link for shunter number popup box. Javascript enabled. */

.numbers {
  position:absolute; 
  visibility:hidden; 
  opacity:0; 
  border:1px solid #aaa; 
  padding:0.5em; 
  color:#ddd; 
  background-color:#014051; 
  left:0; 
  bottom:0; 
  transition:all 0.6s ease-in-out;
} /* Shunter number popup box. */

.visible {
  visibility:visible; 
  opacity:1; 
  bottom:1.5em;
} /* Shunter number popup box when open. */

/* ------------------------------------------------------------------ */

/* Contact page ----------------------------------------------------- */

label {
  display:block;
}

textarea, input {
  display:block; 
  border:2px solid #aaa; 
  color:#000;
  background-color:#FFF; 
  width:100%; 
  padding:0.25em; 
  margin-top:0.5em; 
  margin-bottom:2em;
}

textarea {
  height:15em;
}

button {
  color:#000;
}

/* ------------------------------------------------------------------ */

/* Rugeley coal tables ---------------------------------------------- */

.rugeleycoal tr.mainhead th:nth-child(2),
.rugeleycoal tr.mainhead th:nth-child(3), 
.rugeleycoal tr.mainhead th:nth-child(4), 
.rugeleycoal tr.subhead  th:nth-child(2), 
.rugeleycoal tr.subhead  th:nth-child(6), 
.rugeleycoal tr.subhead  th:nth-child(10), 
.rugeleycoal tr td:nth-child(2), 
.rugeleycoal tr td:nth-child(6), 
.rugeleycoal tr td:nth-child(10) {
  border-left-width:4px
}

/* ------------------------------------------------------------------ */

/* Adjustments for mobiles and other narrow screens ----------------- */

@media only screen and (max-width: 1000px) {

body {
  display:grid; 
  grid-template-columns:100%; 
  grid-template-rows: auto auto; 
  grid-template-areas:"header" "content";
  margin:0; 
  padding:1em 1em 1em 1em;
} /* The popup menu is positioned absolute with a higher z-index. */

* {
  font-size:medium;
} 	

p.subtitle, h2.subtitle {
  font-size:large;
}

div.content {
  margin:0; 
  padding:0;
}

a.logo {
  display:none; 
} /* Shed sticker logo not used on mobile/narrow screens. */

div.header::after {
  content:url('/LogoNewSmall.png'); 
  margin-left:68px;
} /* Small version of "BescotPlus" logo used on mobile/narrow screens. */

body.photo::after {
  content: url('/LogoNewSmall.png');
  display:inline-block;
  height:74px;
  margin-left:68px;
} /* Small logo has to be added in CSS as there's no header <div> in these pages. */

nav {
  position:absolute;
  top:0.75em;
  left:0.8em;
} /* This is the whole menu, including the popup menu and the button icon used to display it. */

#menuIcon {
  display:inline-block;
}

#menu {
  width:15em; 
  margin-top:1em; 
  margin-bottom:1em;
  z-index:20; 
  background-color:black; 
  padding:1em; 
  box-shadow: 0 0 12px #ccc; 
  border:1px solid #eee;
  height:0; 
  transform:scaleY(0);    
  transform-origin:top;
  /* transition:transform 0.6s ease-in-out; */
}  /* This is the popup menu itself. Display is toggled via the menu button icon. */


#menuToggle:checked ~ #menu {
  height:auto;
  transform:scaleY(1);    
  transition:transform 0.6s ease-in-out;
}  /* Show the menu. Opens out fom the top. Transform done via the scaleY property. */

.photoshome a {
  display:none;
} /* Only the first home page phot used on mobile/narrow screens. */

.photoshome a:nth-child(1) {
  display:inline;
} /* Display the first home page image. */

div.signature img {
  display:none;
} 

div.signature span {
  display:block; 
  margin-left:0.25em; 
  margin-bottom:2em; 
  color:#888;
} /* Show signature as text vice image on mobile/narrow screens. */

p.title, h1.title {
  margin-top:1.5em;
}

/* Adjust thumbnails from grid to float format, so that text now flows underneath the thumbnail image. */

ul.thumbs li {
  display:block; 
  margin-bottom:2.5em;
}

ul.thumbs li a img {
  float:left; 
  margin-top:0.25em; 
  margin-right:1em; 
  margin-bottom:0.5em;
}

ul.thumbs li::after {
  content:""; 
  display:block; 
  clear:both;
} /* Required to stop the thumbnail image float causing a staircase with subsequent images. */

ul.thumbs li span {
  margin-left:0; 
  margin-right:0.5em; 
  margin-bottom:1em;
}

section.thumbs li, section.thumb {
  display:block;
}

section.thumbs ul li a img, section.thumb a img {
  float:left; 
  margin-top:0.25em; 
  margin-right:1em; 
  margin-bottom:0.5em;
}

section.thumbs li::after {
  content:""; 
  display:block; 
  clear:both;
} /* As above. */

ul.menu {
  margin-left:0;
}

div.contact {
  width:95%;
}

textarea, input {
  width:100%;
}

table.timetable th.train {
  width:auto;
}

}

@media only screen and (max-width: 1450px) {

.model table {
  width:100%;
}

.model img {
  max-width:100%;
}

}
	
/* ------------------------------------------------------------------ */

/* No point floating text around images on a very narrow screen. Leads to fragmententation of the text. */

@media only screen and (max-width: 850px) {

figure.inline img {
  float:none; 
  margin-left:0; 
  margin-right:0; 
  max-width:100%;
} 

}

/* No point floating text around images on a very narrow screen. Leads to fragmententation of the text. */
@media only screen and (max-width: 650px) {

.inlinephoto {
  float:none; 
  margin-left:0; 
  max-width:100%;
}

.inlinephoto img {
  max-width:100%;
} 

}

/* ------------------------------------------------------------------ */