/* Hastings Diesels Ltd website: new, combined style-sheet.  Wrangled into shape on 13 AUG thru 2 SEP 2018 */

/* MENU-related bits */

div.menu a:link {
    color: #ffffff;
}

div.menu a:visited {
    color: #99ff99;
}

div.menu a:hover, div.menu img:hover {
    background-color: #336633;
    color: #ffffff;
}

div.menu a:active {
    background-color: #ffffff;
    color: red;
}

div.menu img {
    border-style: none;
}

div.menu p {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    color: white;
}


/* General page setup directives */

body {
    background-image: url(/pics/99cc99.jpg);
    background-color: #99cc99;
    color: #000000;
    background-position: center;
    background-attachment: fixed;
    font-family: Palatino, serif;
}

p {
    line-height: 1.4rem; /* This arises from the Palatino font */
}

li {
    line-height: 1.4rem; /* This arises from the Palatino font, required for list-items not within a 'p' */
}

td {
    line-height: 1.4rem; /* This arises from the Palatino font, required for table-content not within a 'p' */
}

a:hover {
    background-color: #99cc99;
    color: #000000;
}

a:active {
    background-color: #ffffff;
    color: red;
}

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

p {
    text-align: justify;
    margin-top: 1em;
}

li p {
    text-align: left;
}

div.article > p.intro:first-letter, div.article > p:not([class]):first-letter { /* Makes the first letter larger in all non-special paragraphs (but including Intros) */
    font-size: 1.2em;
}

.contents p, ul li {
    text-align: left;
}

h1, .top, p.intro {
    text-align: center;
    color: #004400;
}

h2 {
    margin-top: 2em;
}

h2.top {
    margin-left: 0;
}

.top {
    font-style: italic;
    margin-top: 0;
}

.cleared {
    clear: both;
}

.contents a {
    font-size: larger;
}

.contents span {
    color: red;
}

.mod {
    font-style: italic;
}

p.aside {
    font-size: smaller;
}

.pickout {
    letter-spacing: 0.04em;
}

.quotation {
    margin-left: 2.5em;
}

abbr {
    cursor: help;
    border-bottom: 1px dashed;
}

.number {
    font-weight: bold;
}
.name {
    font-style: italic;
    font-weight: bold;
}

sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

sub {
    vertical-align: baseline;
    position: relative;
    top: 0.4em;
}

.super {
    vertical-align: 0.27em;
    font-size: 0.75em;
}

.sticky {
    position: -webkit-sticky; /* for earlier versions of Firefox */
    position: sticky;
    top: -0.15rem;
}

th.sticky {
    background-clip: padding-box; /* fix for weird FireFox behaviour which covers 'th' borders with background */
}


/* Automatic customising of external links */

a.extlnk:before {
    content: "[";
    text-decoration: none;
    color: black;
    color: inherit;
}

a.extlnk:after {
    content: "]";
    text-decoration: none;
    color: black;
    color: inherit;
}

/* a.extlnk:link:hover:after { content: "]"; text-decoration: none; }  I don't think we need this any more? */


/* ensuring correct handling of the q element instead of lots of “” */

q:before {
    content: "“";
}

q:after {
    content: "”";
}

.no-close-quote:after {
    content: no-close-quote;
}

q q:before, q.l2:before {  /* nested (level 2) quotes */
    content: "‘";
}

q q:after, q.l2:after {
    content: "’";
}

q q q:before {  /* nested (level 3) quotes */
    content: "“";
}
q q q:after {
    content: "”";
}


/* Custom-built styles for Intro, Banner, Navbar, Standout, Standin, Important, Wow, Sidebar, Footer */

p.intro {
    font-size: larger;
    margin: 1em 10%;
    padding: 0.4em;
}

div.banner {
    margin: 0.4em 12.5% 1em;
    font-size: larger;
    background-color: #99cc66; /* fallback for older browsers */
    background-color: rgba(153,234,102,0.5);  /* semi-transparent */
    color: #000000;
    border: ridge 0.3em;
    border-radius: 1em;
    padding: 0.6em;
}

div.banner p {
    text-align: center;
}

div.banner h2 {
    margin: 0;
}

div.banner span {
    color: #ff0000;
    font-weight: bold;
}

.navbar {
    text-align: center;
    font-size: 120%;
}

div.standout {
    margin: 1em -3.5em;
    padding: 0.7em 3.5em;
    background-color: #99ff99;
    color: #000000;
    border-style: none;
    border-radius: 1em;
}

div.standout p {
    margin-top: 1.2em;
}

div.standout h2:first-child {
    margin-top: 1em;
}

span.standout {
    color: #000000;
    background-color: #99ff99;
}

div.standin {
    margin: 2em -3.5em;
    padding: 0.1em 4.5em 0.1em 3.5em;
    background-color: #ccddcc;
    color: #000000;
    border-style: none;
    border-radius: 1em;
}

span.standin {
    color: #000000;
    background-color: #cccccc;
}

p.important, div.important {
    margin: 0.5em 8%;
    background-color: #ffffcc;
    color: #000000;
    padding: 0.7em;
    text-align: center;
    border-radius: 1em;
}

.wow {
    color: #ff0000;
    font-weight: bold;
}

div.sidebar {
    width: 25%;
    float: right;
    margin: 0 0 1em 1em;
    padding: 0 0.5em;
    border: double 3px;
    background-color: #eeffee;
    border-radius: 0.5em;
}

div.sidebar p {
    text-align: left;
}

div.footer {
    border-top: solid;
    border-bottom: solid;
    border-width: 0.2em;
    border-color: #aaaaaa;
    padding: 0.3em 0em 0.5em;
}

div.footer p {
    margin: 0.15em 0 0;
    text-align: left;
}

p.footer {
    margin: 0.2em 0;
}


/* Photographs and their captions */

div.photos img {  /* for 'inline'-style photos having no link */
    border-style: none;
}

div.thumbnails img {  /* I use "div.thumbnails" to enclose non-fullsize thumbnails of any size, typically width=600px */
    border: solid 2px;
}

div.photos, div.thumbnails {
    text-align: center;
}

div.photos img, div.thumbnails img, img {  /* centre-ifies photos, incl for mobile and incl non-divved imgs */
    margin: 0;
    max-width: 98%;
    height: auto;
}

img.menulogo {
    max-width: 100%;  /* I discovered that the menu-logo was suffering from always being reduced to 98% size! */
}

div.photos p.caption, div.thumbnails p.caption {
    font-style: italic;
    text-align: center;
}

p.caption span {
    font-style: normal;
}


/* RIGHT-aligned and LEFT-aligned photos here:	*/

.iconr img {
    border-style: none;
    padding: 0.6em 0 0.6em 0.6em;
    float: right;
}

.photl img {
    border-style: none;
    padding: 0 1em 1em 0;
    float: left;
}

.photr img {
    border-style: none;
    padding: 0 0 1em 1em;
    float: right;
}

.thumbr img {
    border: solid 2px;
    margin: 0 0 1em 1em;
    float: right;
}


/* specialist directives for early railtour-timings html pages */

table.timings-group {
    margin: 0 auto;
    border: 0px;
    border-spacing: 1rem !important;  /* The individual pages all have 2.5 for this but it doesn't fit on mobile */
}

table.timings-group > tr > td {
    border: 0px;
}

.timings {
    font-weight: bold;
}

table.timings td {
    padding: 0.25rem;
    vertical-align: middle;
}

table.timings kbd, table.timings span, table.timings em {
    font-weight: normal;
}



/* For users on small screens (736px is largest dimension of biggest iPhone) */

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

    html {
	-webkit-text-size-adjust: none;
    }

    h2 {
	margin-left: 1em;
    }

    div.standout {
	margin: 0em;
	padding: 0.5em;
	background-color: #99ff99;
	color: #000000;
	border-style: none;
	border-radius: 1em;
    }

    div.standin {
	margin: 1em 0;
	padding: 0.1em 0.5em;
	background-color: #ccddcc;
	color: #000000;
	border-style: none;
	border-radius: 1em;
    }

    div.sidebar {
	width: 40%;
    }

    div.banner {
	margin: 0.4em 2.5% 1em;
    }

    /* All about the menu */

    div.menu p.hometext {
	display: block;
    }

    div.menu p.menulogo {
	display: none;
    }

}

/* This next section has been DISABLED because the "div.menu { position:
fixed; }" and 100% height & width were causing the whole webpage to
become devoid of clickable links... because even when the menu was
hidden, it considered the entire canvas to be covered by the menu. */


/* @media only screen and (max-width: 736px) and (orientation: portrait) {

    body {
	background-color: #99cc99;
	color: #000000;
	margin: 4em 0.2em 0.2em 0.2em;
    }

    div.menu {  /* holds the menu in position at the top of the viewport, incl its dropdown when present *
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    }

    div.menu p {
	position: relative;
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0.5em 2em;
	font-size: 1.3em;
	border: none;
	background-color: rgba(0,51,0,1);
	color: white;
	text-decoration: underline;
	z-index: 100;
    }

    input#toggle-menu-checkbox {      /* This is the actual checkbox's visibility: *
	display: none; /*block-inline;*
    }

    input#toggle-menu-checkbox:checked + div {    /* Hide menu until we click on the 'switch' *
	transform: translate(0,-45em);
	background-color: rgba(0,71,0,0.3);
	transition: 0.4s ease;
    }

    input#toggle-menu-checkbox + div {    /* Show when we click on the 'switch' *
	max-height: 87%; /* for older browsers that don't support calc *
	max-height: calc(100% - 4.4em);  /* this value is an attempt to fix a glitch! *
	overflow: auto;
	position: absolute;
	top: 2.7em;
	transform: translate(0, 0);
	transition: 0.4s ease;
	background-color: rgba(0,71,0,0.9);
	color: rgba(255,255,255,1);
	padding: 0.7em 1em 1em 1em;
	z-index: 10;
    }

    input#toggle-menu-checkbox + div p {
	padding: 0.5em 1em;
	background-color: rgba(0,0,0,0); /* i.e. this is completely transparent *
    }

}

*/



@media only screen and (max-width: 736px) /* and (orientation: landscape) */ {  /*landscape-only directive DISABLED */

    /* does NOT hold the menu in position at the top of the viewport */

    body {
	background-color: #99cc99;
	color: #000000;
	margin: 0.2em 0.2em 0.2em 0.2em;
    }

    pre { /* preformatted text as used in timings-printouts etc */
	font-size: 0.75rem; /* on landscape iPhone 8+, timings virtually fit */
    }

    body.pre div.article {
	font-size: 0.65em;
    }

    div.menu p {
	position: relative;
	display: block;
	list-style-type: none;
	margin: -0.2em;
	padding: 0.6em 2em;
	font-size: 1.3em;
	border: none;
	background-color: rgba(0,51,0,1);
	color: white;
	text-decoration: underline;
	z-index: 100;
    }

    input#toggle-menu-checkbox {      /* This is the actual checkbox's visibility: */
	display: none; /*block-inline;*/
    }

    input#toggle-menu-checkbox:checked + div {    /* Hide menu until we click on the 'switch' */
	transform: translate(0,-45em);
	background-color: rgba(0,71,0,0.3);
	transition: 0.4s ease;
    }

    input#toggle-menu-checkbox + div {    /* Show when we click on the 'switch' */
	position: absolute;
	top: 2.7em;
	left: 0;
	transform: translate(0, 0);
	transition: 0.4s ease;
	background-color: rgba(0,71,0,0.9);
	color: rgba(255,255,255,1);
	padding: 0.7em 1em 1em 1em;
	z-index: 10;
    }

    input#toggle-menu-checkbox + div p {
	margin: 0;
	padding: 0.6em 1em;
	background-color: rgba(0,0,0,0); /* i.e. this is completely transparent */
    }

}



/* For ALL screens bigger than iPhones */
@media only screen and (min-width: 737px) {  /* Ensure this is 1px bigger than the max-width figure! */

    body {
	margin: 2.3em 11.5% 3em 230px; /* older browsers that don't support calc() */
	margin: 2.3em 11.5% 3em calc(126px + 11.5%); /* newer browsers that support calc() -- menu-width = 100px, menu-padding = 10px x2, border = 6px */
	/* background-size: cover; */
    }

    body.pre {	/* preformatted text as used in timings-printouts etc */
	margin: 0 0 1.5em 160px; /* older browsers */
	margin: 0 0 1.5em calc(126px + 4%); /* newer browsers */
    }

    div.menu {
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	height: 100%;
	background-color: #003300;
	width: 100px;
	padding: 0 10px 0 10px;
	border-width: 0 6px 0 0;
	border-style: solid;
	border-color: white;
    }

    label, input { /* This hides the checkbox used in showing/collapsing the slide-down menu on small screens */
	display: none;
    }

    div.menu .hometext {
	display: none;
    }

    div.menu .menulogo {
	display: block;
	padding: 0;
    }

    h2 {
	margin-left: -1.5em;
    }

}



/* ADDITIONAL instructions for very wide screens */
@media (min-width: 1290px) {

    body {
	max-width: 900px;
	margin: 2.3em auto 3em auto; /* Let the page body centre itself */
	position: relative; /* but then give it a 70px offset to keep it out from behind the menu */
	left: 70px;
    }

}



@media print {

    body {
	margin: 0;
	font-size: 80% !important;
    }

    div.thumbnails img, div.photos img, img {
	max-width: 40% !important;
	height: auto;
    }

    div.menu {
	display: none;
    }

    nav {
	display: none;
    }

    .fares td {
	border: black 1px solid !important;
    }

    h2 {
	margin-left: 0;
    }

}


/* Mac/iOS Dark Mode */



@media (prefers-color-scheme: dark) {
    body {
	color: #ddd !important;
	background-image: url(/pics/001d00.svg) !important;
	background-color: #010 !important;
    }

    a, div.menu a:link {
	color: #9ff;
	color: #dfd;
    }

    a:visited {
	color: #fcf;
	color: #9f9;
    }

    a:hover {
	background-color: #007700;
	color: #fff;
    }

    h1, .top, p.intro {
	color: #99dd99;
    }

    div.menu {
	background-color: rgba(0,255,0,0.05);
	border-color: #777777;
    }

    div.menu a:hover, div.menu img:hover {
	background-color: #003300;
    }

    div.banner {
	background-color: #336633 !important;
	color: #fff !important;
    }

    div.standin {
	background: rgba(50,100,50,.3) !important;
	color: #ddd;
    }

    div.standout {
	background: rgba(70,140,70,.7) !important;
	color: #ddd;
    }

    div.article {
	background: #050 !important;
	background: rgba(245,255,245,0.03) !important;
	box-shadow: 0px 0px 40px 40px rgba(245,255,245,0.03) !important;
    }

    pre {
	margin-left: -3em !important; /* these are for the actual-timings, hope they don't affect anywhere else! */
	padding-left: 3em !important;
    }

    pre:hover {
	background-color: #363 !important;
	color: yellow;
    }

    pre.sticky {
	background-color: #040 !important;
    }

    img#address {
        background-color: #669966;
        border-radius: 0.5rem;
    }

    div.sidebar {
	background-color: #070;
    }

    p.important, div.important {
	background-color: #cca;
    }

    p.important a:link,
    div.important a:link {
	background: rgba(0,0,0,0.2);
	padding: 0.1rem;
    }

    p.important a:visited,
    div.important a:visited {
	background: rgba(0,0,0,0.2);
	padding: 0.1rem;
    }

    div.banner a:hover,
    div.standin a:hover,
    div.standout a:hover,
    p#introtext a:hover {
	color: #fff;
	background-color: #060;
    }

    table#railtourarchive th {
	background-color: #352;
    }

    tr:hover {
	background-color: #585 !important;
	color: white;
    }

    table#notation .status-s,
    table.diary .status-s {
	color: black;
    }

    h2.sticky {
	background-color: rgba(0,0,0,0) !important;
    }

    table#fleet th {
	background-color: #352;
    }

    table#fleet tbody.dmbs:hover td.dmbs,
    table#fleet tbody.tso:hover td.tso,
    table#fleet tbody.tfk:hover td.tfk {
	background-color: #585;

    }

    table#fleet tr.withdrawn td {
	background-color: #444;
    }

    table#fleet tr.withdrawn:hover {
	color: yellow;
    }

    table#fleet td.withdrawn,
    table#fleet tr td.restored,
    table#fleet td.restoration{
	color: black;
    }

    table#fleet tr td.restored {
	background-color: #99ff99;
    }

    table#cdlstatus tr.completed {
	background-color: #040;
    }

    img.darkmode {
	display: inline;
    }

    img.lightmode {
	display: none;
    }
}


@media (prefers-color-scheme: light) {



    img.lightmode {
	display: inline;
    }

    img.darkmode {
	display: none;
    }


}



/* end of file */