@font-face {
	font-family: 'Sorts Mill Goudy';
	src: url(/WEBFONTS/Sorts_Mill_Goudy/SortsMillGoudy-Regular.ttf);
}
@font-face {
	font-family: 'Noto Sans';
	src: url(/WEBFONTS/Noto_Sans/NotoSans-Regular.ttf);
}
@font-face {
	font-family: 'Noto Sans';
	src: url(/WEBFONTS/Noto_Sans/NotoSans-Bold.ttf);
	font-weight: bold;
}

body {width: 100%;;
}

p, li {font-family: 'Sorts Mill Goudy', Georgia, serif;}
a {text-decoration: none;color:#D82E00;}
a:hover {color:#8E3C03;}

h2, h3 {
	font-family: 'Noto Sans', Verdana, Arial, sans-serif;
}
h1 {
	font-family: 'Sorts Mill Goudy', Georgia, serif;
	font-size: 130%;
	font-weight: 300;
	margin:0 0 1em;
	line-height: 110%;
}
h2 {
	font-family: 'Sorts Mill Goudy', Georgia, serif;
	font-size: 110%;
	font-weight: 500;
	margin:0 0 1em;
	line-height: 110%;
}
h3 {
	font-family: 'Sorts Mill Goudy', Georgia, serif;
	font-size:110%;
	line-height:1.2em;
	color: #976F3F;
	margin-bottom: 0;
}

figure {
	margin: 12px;
}
figcaption {
	font-family: 'Noto Sans', sans-serif;
	font-size:80%;
}

table {
	border: none;
}
td, th {
	border: 1px solid green;
	font-family: 'Noto Sans', Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	padding: 0.1em  0.4em;
}
th {
	font-weight: bold;
}
table a {text-decoration: none;}

/* new version, old ID was 'header'. Salt Spring Island Archives bar is retrieved via PHP from the TOPBAR.php file. */
/* revised from sticky to fixed, 9 April 2026 Brian Smallshaw */
#topbar {
	position: fixed;
	top: 6px;
	left: 6px;
	right: 6px;
	padding: 10px 0 28px 10px;
	background-color: #F0F0F0;
	opacity: 0.95;
	height: 84px;
	z-index: 3;
	box-sizing: border-box;
}
/* #topbar + * {
	margin-top: 200px;
} */
#topbar h1 {
	margin: 16px 0 0 5px;
}
#topbar h1 {
	font-size: 1.18em;
}
#topbar h1 a {
	text-decoration: none;
	color: black;
}
#topbar h1 a:hover {
	text-decoration: none;
	color: #C65305;
	transition: color 0.25s ease;
}

/* for the subheader for each page, overlaid on top of the main Salt Spring Archives header, which is retrieved from the TOPBAR.php file. */
#subheader {
	position: fixed;
	top: 100px;
	left: 6px;
	z-index: 9;
}
#subheader h2 {
	margin: -44px 0 44px 15px;
	font-size: 0.72em;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 300;
}
#subheader h2 a {
	text-decoration: none;
}
#subheader h2 a:hover {
	color: #C65305;
}

/* for the buttons floating in the top bar */
#topbar-donate-button {
	margin: 5px;
	width: 160px;
	padding: 10px 0 28px 10px;
	height: 50px;
	position: absolute;
	top: -8px;
	right: 0px;
	z-index: 5;
}

/* for the sidebar, retrieved via a PHP include from the FIXED-SIDEBAR.php file */
#sidebar-fixed-menu {
	position: fixed;
	top: 260px;
	left: -68px;
		-ms-transform: rotate(90deg); /* IE 9 */
    	-webkit-transform: rotate(90deg); /* Safari 3-8 */
    transform: rotate(90deg);
	width: 160px;
	height: 30px;
	border-radius: 6px 6px 0 0;
}

/* styling for top bar and sidebar links, used on all links after the Crofton Fonds. Will go back and update A through C files when I have time. Previously included styling and positioning in the same css - now separated out for easier management. */
.page-link-styling {
	height: 30px;
	height: auto;
	background-color: #fcfde3;
	border: 1px solid #EAE8E8;
	padding-left: 4px;
	border-radius: 6px 6px 6px 6px;
	z-index:7;
}
.page-link-styling:hover {
	border: 1px solid #E89105;
	transition: border 0.25s ease;
}
.page-link-styling p {
	margin: 3px 0 0 36px;
	font-family: 'Noto Sans', Verdana, Geneva, sans-serif;
	font-weight: bold;
}
.page-link-styling a {
	text-decoration: none;
	color: #FCD57E;
	color: #F9B01E;
}
.page-link-styling a:hover {
	text-decoration: none;
	color: #E8A718;
	color: #C68709;
    transition: color 0.25s ease;
}

.in-text-block-audio-button {
	padding: 0 0 4px 12px;
	margin-top: 4px;
}
.in-text-block-audio-button p {
	margin: 3px 0 0 -4px;
}
.in-text-block-audio-button p span {
	display: inline-block;
	width: 26px;
	text-align: right;
	padding-right: 10px;
}

#photo-file-page-link {
	position: fixed;
	top: 56px;
	left: 420px;
	width: auto;
	padding-right: 15px;
}

/* for centred page titles */
#centred-page-title, .centred-page-title {
	clear:both;
	max-width: 750px;
	margin:auto;
	text-align: center;
}

/* for blocks of text before galleries */
#intro-text {
	 margin: 0 auto;
	 max-width:700px;
}

/* for longer blocks of text that should be centred on the page */
#text-block-centred {
	clear: both;
	margin: 0 20% 0 20%;
	max-width: 600px;
	min-width: 240px;
}

/* basically a class version of the above - probably should've made it a class originally and just had one, but lots of pages got made with the id version, so will leave it as is for now. */
.text-block-centred {
	clear: both;
/*	margin: 0 20% 0 20%;*/
	margin: auto;
	max-width: 750px;
	min-width: 240px;
}

/* a further rework of the class above, with better centring */
.text-block-centred-left-pd {
	clear: both;
	margin: auto;
	max-width: 800px;
	min-width: 240px;
	padding-left: 35px;
}

/* a wider box for big things like Driftwood tables, with a little left margin to leave room for the side tabs */
.text-block-centred-wide {
	clear: both;
	margin: auto;
	margin-left: 30px;
	max-width: 1000px;
	min-width: 240px;
}

/* the following was developed for single-image pages in the Marshall Sharp collection, but can be applied to every instance where metadata and captions are placed underneath an image */
.single-pic-metadata {
	clear:both;
}
.single-pic-metadata img {
	max-width: 1800px;
}
.single-pic-metadata figcaption {
	margin: 8px 0 0 60px;
}
figure.single-pic-metadata {
	font-family: 'Noto Sans', sans-serif;
	font-size: 0.9em;
}
figure.single-pic-metadata p {
	margin: 0;
}
figure.single-pic-metadata span {
	display:inline-block; width: 20em;
}
.single-pic-metadata .metadata {margin-top:12px;} 

/* ensure that captions in galleries wrap to the next line for images that are tall and narrow  */
.gallery div img {
	display: block;
}

/* audio blocks - lots up there with inline styling, but from now on use this */
.audio-block {
	clear:both;
	display: block;
	width:100%;
	height:70px;
	text-align: center;
	-webkit-margin-after: 24px;
}
.audio-block h3 {
	margin: 24px 0 12px;
}

/* css for the caption and metadata box at the bottom of every gallery page.  */
.wrap-collabsible {
  clear:both;
  margin-bottom: 24px;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;

  font-weight: bold;
  font-family: "Noto Sans",Verdana,Geneva,sans-serif;
  font-size: 1.0rem;
  text-transform: uppercase;
  text-align: center;

  padding: 0.25rem;

  color: #f9b01e;
  background: #fcfde3;

  cursor: pointer;

  border-radius: 5px;
  transition: all 0.25s ease-out;
  border: 1px solid #eae8e8;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100%;
  margin-bottom:24px;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: #FCEFBB;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: .5rem 1rem;
}

.caption-entry {
	margin:1em 0 0 0;
	font-size: 85%;
	line-height:105%;
}
.caption-entry p {
	margin:0;
}
.caption-entry p:last-child, .caption-entry li:last-child {
	color:red;
}
.caption-entry ul {
	margin-top: 4px;
	list-style-type: none;
}

/* for quotes */
.indent {
	margin-top: -1em;
	margin-left: 1em;
	font-style: italic;
}
.indent-double {
	margin-left: 2em;
}
.indent-triple {
	margin-left: 2.5em;
}

/* css for the Saltspring Characters link on the top page, and perhaps some others */
#saltspring_characters {
    background: url("../../images/characters-logo.png") no-repeat 0px 0px; 
	width: 220px;
	height: 35px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index:9;
}
#saltspring_characters:hover {
    background-position:0px -100px;
}

/* The following code is for the metadata associated with the transcription sections of some files. */

#transcript, #transcript2 {
	margin-top:36px;
}
.audio-file, .speech-recognition-software, .date-scanned, .proofread, .proofreader {
	margin: 0 24px;
	font-weight: bold;
	font-style: italic;
	font-size: 110%;
}
.audio-file span, .speech-recognition-software span, .date-scanned span, .proofread span, .proofreader span {
	font-weight: normal;
	font-style: normal;
}
.audio-file::before {
	content: "audio file:\00a0\00a0\00a0\00a0";
}
.speech-recognition-software::before {
	content: "speech recognition software:\00a0\00a0\00a0\00a0";
}
.date-scanned::before {
	content: "date scanned:\00a0\00a0\00a0\00a0";
}
.proofread::before {
	content: "proofread:\00a0\00a0\00a0\00a0";
}
.proofreader::before {
	content: "proofreader:\00a0\00a0\00a0\00a0";
}

/* The following two options permit the display of the captions and metadata on the page (styling will be required to make it presentable), but because it is accomplished with a var and a pseudo element, the displayed text is not searchable and the html tags are displayed instead of operating like html tags. An idea that was explored before deciding to scrape out the captions and metadata and place them in a div at the bottom of the page to make them searchable. */

/* OPTION A
a::after {
	content: "\A " attr(data-caption) " ";
  	white-space: pre;
}
*/

/* OPTION B
#gallery {
	--caption-box:  " " attr(data-caption) " ";
}

a::after {
  	content: "\A" var(--caption-box);
  	white-space: pre;
}
*/

/* to display a banner on pages with little or no information on the photos in the file. Uses a php script to retrieve the banner information contained in the file: GLOBAL_WHO-IS-IT-BANNER.php

place the following code in the page file to display the script:
<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/GLOBAL_WHO-IS-IT-BANNER.php";
   include_once($path);
?> */

#who-is-it-banner {
	position: fixed;
	top: 16px;
	left: 280px;
	width: 220px;
	height: 58px;
	padding: 0.35em;
	background-color: #937854;
	color: white;
	z-index: 10;
	border-radius: 4px;
	font-family: 'Noto Sans', Verdana, Geneva, sans-serif;
	font-size: 0.85em;
	border: 1px solid rgb(177, 61, 3);
}
#who-is-it-banner a {
	color: black
}
#who-is-it-banner a:hover {
	color: orange;
}

/* for the button to return to the Salt Spring Artists home page */
#saltspring-artists-collection-logo {
  /* background-color: blue;  */
  position: fixed;
  top: 104px;
  left: 8px;
  /* z-index: 10; */
}
#saltspring-artists-collection-logo img {
  width: 75px;
}
/* #saltspring-artists-collection-logo img:hover {
  filter: drop-shadow(1px 1px 2px rgb(232, 145, 5));
} */