/*=====================================================================*/
/* screen width break points for the display of the discussions and animations lists are 1200px and 850px  */

/*=====================================================================*/
:root
	{
	--ifvariablessupporteddisplayinlineblock: inline-block;

	/* 1000px */
	--adjacentdivgap:           0.5rem;
	--adjacentdivgaptwice:        1rem;
	--maxpagemiddleblockwidth: 62.5rem;
	--maxparagraphwidth:          70ch;

	--scrollbarthumbborderwidth: 4px;

	/* don't forget to update styleSheet-Burger-tFrames.css and script-SetTheRootVariables.js */
	--burgerdiscussionsiframewidth:                 15rem;
	--burgerdiscussionsiframeheight:               285rem;
	--burgeranimationsiframewidth:               18.75rem;
	--burgeranimationsiframeheight:                220rem;
	--burgerdiscussionsandanimationsiframewidth: 18.75rem;
	--burgerdiscussionsandanimationsiframeheight:  430rem;

	--mainiconopacity: 1;
	--iconopacity:     1;

	--textlinkdecoration: none;

	--outlinefocusvisiblecolour: blue;

	--burgerdiscussionsdisplay: block;
	--burgeranimationsdisplay:  block;

	--backgroundcolour:          hsl(120, 93%, 90%);
	--backgroundtextblockcolour: hsl(120, 93%, 85%);
	--modaloutlinecolour:        hsl(120, 93%, 77%);
	--animationbordercolour:                  black;

	--backgroundlistblockcolour: hsl(120, 80%, 87%);

	--texthomepageherocolour:     hsl(0, 0%, 50%);
	--texthomepagecolour:         hsl(0, 0%, 45%);
	--texttitlecolour:            hsl(0, 0%, 30%);
	--textcolour:                 hsl(0, 0%, 30%);
	--textburgerheadingcolour: hsl(299, 38%, 46%);

	--scrollbarthumbcolour:  hsl(120, 73%, 75%);
	--scrollbarthumbhovercolour: mediumseagreen;
	--scrollbarthumbactivecolour:      seagreen;

	--foregroundsoundscolour:     linen;
	--backgroundsoundscolour: lightgrey;

	--textinternallinkcolour: hsl(240, 100%, 40%);
	--textinternallinkactivecolour:          blue;

	--textinternalnavigationlinkcolour: hsl(110, 100%, 30%);
	--textinternalnavigationlinkactivecolour:        green;

	--textexternallinkcolour:       firebrick;
	--textexternallinkactivecolour: orangered;

	--textlicencelinkcolour:       firebrick;
	--textlicencelinkactivecolour: orangered;

	--imagefilterbrightness: 100%;

	--imageinternallinkoutlinecolour: hsl(240, 100%, 40%);

	--imageexternallinkcolour:        firebrick;
	--imageexternallinkfocuscolour: lightsalmon;
	--imageexternallinkactivecolour:  orangered;
	}

/*=====================================================================*/
/* note that the below will not remove the 1 space character that occurs between adjacent inline block divs */
*
	{
	margin:            0px;
	padding:           0px;
	border:            0px;
	box-sizing: border-box;
	}

*:focus,
*:focus-visible
	{
	border-radius:    20px;
	outline-style:   solid;
	outline-width:     3px;
	outline-offset:    5px;
	outline-color: inherit;
	z-index:           999;
	}

/*=====================================================================*/
html
	{
	overflow: auto;
	}

body
	{
	cursor:                default;
	margin:                    0px;
	color:         hsl(0, 0%, 30%);       color:                  var(--textcolour);
	font-family: arial, sans-serif;
	font-size:               large;
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	}

iframe
	{
	display:   block;
	margin:      0px;
	padding:     0px;
	border:     none; 
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	overflow: hidden; /* to avoid unwanted scroll bars */
	}

h1, h2, h3, h4, h5
	{
	max-width:         70ch; max-width: var(--maxparagraphwidth);
	font-family: system-ui, arial, sans-serif;
	font-weight:       bold;
	scroll-margin-top: 80px;
	}

p
	{
	max-width:         70ch; max-width: var(--maxparagraphwidth);
	text-align:        left;
	font-size:        large;
	scroll-margin-top: 2rem;
	}

@media (pointer: coarse)
{
p
	{
	line-height: 150%;
	}
}

/*=====================================================================*/
.body-document /* this is the body used in all the NON iframe html pages */
	{
	width:   100vw;
	height:  100vh;
	height: 100svh;
	margin:    0px;
	padding:   0px;
	}

/*=====================================================================*/
.div-document
	{
	width:          100%;
	height:         100%;
	margin:          0px;
	padding:         0px;
	overflow:       auto;
	pointer-events: auto;
	touch-action:   auto;
	}

/* 240px 1000px 300px */
.div-horizontalcenteralign
	{
	max-width: calc(
		15rem
		+ 62.5rem
		+ 18.75rem );
	max-width: calc(
		var(--burgerdiscussionsiframewidth)
		+ var(--maxpagemiddleblockwidth)
		+ var(--burgeranimationsiframewidth) );

	margin-left:  auto;
	margin-right: auto;
	}

/*=====================================================================*/
/* 240px 300px 1000px */
.div-pagemiddleblock
	{
	display: inline-block;

	width: calc( 100%
		- 15rem
		- 18.75rem
		- 1rem );
	width: calc( 100%
		- var(--burgerdiscussionsiframewidth)
		- var(--burgeranimationsiframewidth)
		- var(--adjacentdivgaptwice) );

	max-width: calc(
		62.5rem
		- 1rem );
	max-width: calc(
		var(--maxpagemiddleblockwidth)
		- var(--adjacentdivgaptwice) );

	padding-left: 40px;
	}
	
/* left sidebar is not shown when width is less than 1200px */
/* 300px */
@media (max-width: 75rem)
{
.div-pagemiddleblock
	{
	width: calc( 100%
		- 18.75rem
		- 1rem );
	width: calc( 100%
		- var(--burgeranimationsiframewidth)
		- var(--adjacentdivgaptwice) );

	padding-left: 50px;
	}
}

/* right sidebar is not shown when width is less than 850px */
@media (max-width: 53.125rem)
{
.div-pagemiddleblock
	{
	width: calc( 100%
		- 1rem );
	width: calc( 100%
		- var(--adjacentdivgaptwice) );
	}
}

/*=====================================================================*/
.div-icongototopofpage,
.div-homepage-icongototopofpage
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:       130px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}
.div-homepage-icongototopofpage
	{
	bottom: 80px;
	}

@media (pointer: coarse)
{
.div-icongototopofpage,
.div-homepage-icongototopofpage
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-icongototopofpage:hover,
.div-icongototopofpage:focus-within,
.div-homepage-icongototopofpage:hover,
.div-homepage-icongototopofpage:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSIONS AND ANIMATIONS LISTS ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-icongototopofpage,
.div-homepage-icongototopofpage
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationsiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconsitemapburger,
.div-homepage-iconsitemapburger
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:        70px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}

.div-homepage-iconsitemapburger
	{
	bottom: 20px;
	}

@media (pointer: coarse)
{
.div-iconsitemapburger,
.div-homepage-iconsitemapburger
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-iconsitemapburger:hover,
.div-iconsitemapburger:focus-within,
.div-homepage-iconsitemapburger:hover,
.div-homepage-iconsitemapburger:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSIONS AND ANIMATIONS LISTS ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconsitemapburger,
.div-homepage-iconsitemapburger
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationsiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconlogo
	{
	cursor:     pointer;
	position:     fixed;
	right:         20px;
	bottom:        20px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 60px;
	z-index:          9;
	opacity:          1; opacity: var(--mainiconopacity);
	}

@media (pointer: coarse)
{
.div-iconlogo
	{
	opacity: 1; opacity: var(--iconopacity);
	}
}

.div-iconlogo:hover,
.div-iconlogo:focus-within
	{
	opacity: 1;
	}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSIONS AND ANIMATIONS LISTS ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconlogo
	{
	right: calc( ( ( 100vw
		- 15rem
		- 62.5rem
		- 18.75rem
		- 1rem
		) / 2 ) + 20px );
	right: calc( ( (100vw
		- var(--burgerdiscussionsiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationsiframewidth)
		- var(--adjacentdivgaptwice)
		) / 2 ) + 20px );
	}
}

/*=====================================================================*/
.div-iconcolourthemetoggle
	{
	display:       none;
	display: var(--ifvariablessupporteddisplayinlineblock);
	cursor:     pointer;
	position:     fixed;
	left:          10px;
	bottom:        10px;
	margin:         0px;
	padding:        0px;
	border:        none;
	border-radius: 20px;
	z-index:          9;
	opacity:          0;
	}

@media (pointer: coarse)
{
.div-iconcolourthemetoggle
	{
	display: none;
	}
}

.div-iconcolourthemetoggle:hover,
.div-iconcolourthemetoggle:focus-within
	{
	opacity: 1;
	}

/* 1201px */
@media (min-width: 75.0625rem)
{
.div-iconcolourthemetoggle
	{
	left: calc(
		15rem
		- 1rem
		+ 10px );
	left: calc(
		var(--burgerdiscussionsiframewidth)
		- var(--adjacentdivgaptwice)
		+ 10px );
	}
}

/* note, variables CANNOT BE USED IN A MEDIA QUERY, so 1564px is for WHEN DISCUSSIONS AND ANIMATIONS LISTS ARE SHOWN */
/* 1564px 240px 1000px 300px 16px */
@media (min-width: 97.75rem)
{
.div-iconcolourthemetoggle
	{
	left: calc( ( (100vw
		+ 15rem
		- 62.5rem
		- 18.75rem
		- 20px) / 2 )
		- 1rem
		+ 10px );
	left: calc( ( (100vw
		+ var(--burgerdiscussionsiframewidth)
		- var(--maxpagemiddleblockwidth)
		- var(--burgeranimationsiframewidth)
		- 20px) / 2 )
		- var(--adjacentdivgaptwice) 
		+ 10px );
	}
}

/*=====================================================================*/
/* 42px */
.div-modaliconclose
{
	position:      fixed; /* do not specify top or left etc */
	margin-top: 2.625rem;
	margin-left:    10px;
	z-index:           9;
}

/* 920px */
@media (max-width: 57.5rem)
{
.div-modaliconclose
	{
	margin-left: 5px;
	}
}

/*=====================================================================*/
.p-spacerlarge
	{
	width:          1rem;
	margin-bottom: 200px;
	}

.p-spacermedium
	{
	width:          1rem;
	margin-bottom: 100px;
	}

.p-spacernormal
	{
	width:         1rem;
	margin-top:    40px;
	margin-bottom: 10px;
	}

.p-spacersmall
	{
	width:        1rem;
	margin-top:    0px;
	margin-bottom: 0px;
	}

.p-spacerlarge::before,
.p-spacermedium::before,
.p-spacernormal::before,
.p-spacersmall::before
	{
	content: "\00a0";
	}

.br-breakclear
	{
	clear: both;
	}

/*=====================================================================*/
.p-textlocalstorage
	{
	width:  fit-content;
	margin-left:   10px;
	margin-top:    10px;
	margin-right:  10px;
	margin-bottom: 30px;
	padding-left:  10px;
	font-size:    large;
	text-align:    left;
	text-indent:  -10px;
	line-height:   100%;
	}

.p-showwhenwide
	{
	display:           block;
	margin-top:          5px;
	margin-bottom:       5px;
	font-weight:        bold;
	font-variant: small-caps;
	line-height:        110%;
	}

/* 500px */
@media (max-width: 31.25rem)
{
.p-showwhenwide
	{
	display: none;
	}
}

.p-bottomofthepage
	{
	display:       block;
	width:   fit-content;
	margin-top:     70px;
	padding-bottom: 70px;
	}

.p-nopointingdevice
	{
	display:       none;
	margin-bottom: 20px;
	font-size:    large;
	font-weight:   bold;
	line-height:   120%;
	color:          red;
	opacity:        0.5;
	}

@media (pointer: coarse)
{
.p-nopointingdevice
	{
	display: block;
	}
}

.p-nopointingdevice::after
	{
	content: "Please note, a pointing device is required to use the interactive feature";
	}

.p-showwhennopointingdevice
	{
	display:          none;
	color: hsl(0, 0%, 30%); color: var(--texttitlecolour);
	}

@media (pointer: coarse)
{
.p-showwhennopointingdevice
	{
	display: block;
	}
}

/*=====================================================================*/
.span-showwhenpointerisfine
	{
	display: none;
	}

@media (any-pointer: fine)
{
.span-showwhenpointerisfine
	{
	display: inline;
	}
}

.span-hidewhenwide
	{
	display: none;
	}

/* 850px */
@media (max-width: 53.125rem)
{
.span-hidewhenwide
	{
	display: inline;
	}
}

.span-showwhenwide
	{
	display: inline;
	}

/* 850px */
@media (max-width: 53.125rem)
{
.span-showwhenwide
	{
	display: none;
	}
}

.span-longwordwraptext
	{
	word-break: break-all;
	white-space:   normal;
	}

.span-nowrap
	{
	white-space: normal;
	}

/* 500px */
@media (min-width: 31.25rem)
{
.span-nowrap
	{
	white-space: nowrap;
	}
}

.span-nowrapwhennarrow
	{
	white-space: normal;
	}

/* 240px */
@media (min-width: 16rem)
{
.span-nowrapwhennarrow
	{
	white-space: nowrap;
	}
}

/*=====================================================================*/
.span-imagehover a
	{
	position: relative;
	}

.span-imagehover a span
	{
	position: absolute;
	left:        -90px;
	bottom:      -90px;
	display:      none;
	z-index:        99;
	}

.span-imagehover a:hover span
	{
	display: block;
	}

/*=====================================================================*/
.span-playstartreksoundfilelink
	{
	text-decoration:      none; text-decoration: var(--textlinkdecoration);
	color: hsl(240, 100%, 40%); color:       var(--textinternallinkcolour);
	font-weight:          bold;
	}

.span-playstartreksoundfilelink:visited
	{
	color: hsl(240, 100%, 40%); color: var(--textinternallinkcolour);
	}

.span-playstartreksoundfilelink:hover
	{
	cursor:            pointer;
	text-decoration: underline;
	}

.span-playstartreksoundfilelink:active
	{
	color: blue; color: var(--textinternallinkactivecolour);
	}

/*=====================================================================*/
.span-copytoclipboardlink
	{
	text-decoration:      none; text-decoration:     var(--textlinkdecoration);
	color: hsl(110, 100%, 30%); color: var(--textinternalnavigationlinkcolour);
	font-weight:        normal;
	}

.span-copytoclipboardlink:visited
	{
	color: hsl(110, 100%, 30%); color: var(--textinternalnavigationlinkcolour);
	}

.span-copytoclipboardlink:hover
	{
	cursor:            pointer;
	text-decoration: underline;
	}

.span-copytoclipboardlink:active
	{
	color: green; color: var(--textinternalnavigationlinkactivecolour);
	}

/*=====================================================================*/
a:link
	{
	cursor:            pointer;
	text-decoration-line: none; text-decoration-line: var(--textlinkdecoration);
	scroll-margin-top:   200px;
	}

/*=====================================================================*/
.a-icon,
.a-iconsmall,
.a-icongotonextpage
	{
	display:  inline-block;
	margin:            0px;
	padding:           3px;
	vertical-align: middle;
	border-radius:    25px;
	opacity:             1; opacity: var(--iconopacity);
	}

.a-iconsmall
{
	border-radius: 15px;
	padding-bottom: 0px;
}

.a-icon:hover,
.a-icon:focus,
.a-icon:focus-visible,
.a-iconsmall:hover,
.a-iconsmall:focus,
.a-iconsmall:focus-visible,
.a-icongotonextpage:hover,
.a-icongotonextpage:focus,
.a-icongotonextpage:focus-visible
	{
	outline-offset:               2px;
	outline: 3px solid mediumseagreen; outline: 3px solid var(--scrollbarthumbhovercolour);
	opacity:                        1;
	}

.a-icon:active,
.a-iconsmall:active,
.a-icongotonextpage:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
/* 64px */
.a-modaliconclose
	{
	position:     fixed;
	top:           50px;
	width:         40px;
	height:        40px;
	margin-left:  -40px; /* this is the correct method to position a fixed element relative to the modal's scroll bar */
	padding-top:    4px;
	padding-right:  4px;
	border-radius: 25px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

.a-modaliconclose:hover,
.a-modaliconclose:focus,
.a-modaliconclose:focus-visible
	{
	outline-offset:               2px;
	outline: 3px solid mediumseagreen; outline: 3px solid var(--scrollbarthumbhovercolour);
	opacity:                        1;
	}

.a-modaliconclose:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
/* 45px */
.a-modalicongototop
	{
	position:     fixed;
	bottom:        50px;
	width:         40px;
	height:        40px;
	margin-left:  -40px; /* this is the correct method to position a fixed element relative to the modal's scroll bar */
	padding-bottom: 2px;
	font-size:     30px;
	text-align:  center;
	border-radius: 25px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

.a-modalicongototop:hover,
.a-modalicongototop:focus,
.a-modalicongototop:focus-visible
	{
	outline-offset:               2px;
	outline: 3px solid mediumseagreen; outline: 3px solid var(--scrollbarthumbhovercolour);
	border-radius:               30px;
	opacity:                        1;
	}

.a-modalicongototop:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
/* 25px 40px */
.a-modaliconcloseiframe
	{
	position:  absolute;
	right:         27px;
	top:            7px;
	width:         40px;
	height:        40px;
	padding-top:    4px;
	padding-right:  4px;
	border-radius: 80px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

.a-modaliconcloseiframe:hover,
.a-modaliconcloseiframe:focus,
.a-modaliconcloseiframe:focus-visible
	{
	outline-offset:               2px;
	outline: 3px solid mediumseagreen; outline: 3px solid var(--scrollbarthumbhovercolour);
	opacity:                        1;
	}

.a-modaliconcloseiframe:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
/* 20px 7px */
.a-modalicongototopofiframe
	{
	position:     fixed;
	right:          7px;
	bottom:        10px;
	width:         40px;
	height:        40px;
	padding-left:   4px;
	padding-top:    4px;
	border-radius: 80px;
	opacity:          1; opacity: var(--iconopacity);
	z-index:         99;
	}

.a-modalicongototopofiframe:hover,
.a-modalicongototopofiframe:focus,
.a-modalicongototopofiframe:focus-visible
	{
	outline-offset:               2px;
	outline: 3px solid mediumseagreen; outline: 3px solid var(--scrollbarthumbhovercolour);
	opacity:                        1;
	}

.a-modalicongototopofiframe:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/
.p-jumpfrom_discussions_to_mainbodywide,
.p-jumpfrom_mainbodywide_to_animations,
.p-jumpfrom_animations_to_discussions,
.p-jumpfrom_mainbodymedium_to_discussionsandanimations,
.p-jumpfrom_discussionsandanimations_to_mainbodymedium
	{
	position:    fixed;
	top:          1rem;
	left:        -99px;
	width:         1px;
	height:        1px;
	overflow:   hidden;
	z-index:        -9;
	padding:       5px;
	text-align: center;
	font-weight:  bold;
	outline-offset: 0px;
	color: hsl(110, 100%, 30%);             color:             var(--textinternalnavigationlinkcolour);
	background-color:   hsl(120, 93%, 90%); background-color:                  var(--backgroundcolour);
	outline: 3px solid hsl(110, 100%, 30%); outline: 3px solid var(--textinternalnavigationlinkcolour);
	}

/*=====================================================================*/
/* left discussions sidebar is only shown when width is 1200px or greater */
@media (max-width: 75rem)
{
.p-jumpfrom_discussions_to_mainbodywide
	{
	display: none;
	}
}

/* 32px 160px */
.p-jumpfrom_discussions_to_mainbodywide:focus-visible
	{
	top:    1rem;
	left:   2rem;
	width: 10rem;
	height: auto;
	z-index: 999;
	}

/*=====================================================================*/
/* right animations sidebar is not shown when width is less than 1200px */
@media (max-width: 75rem)
{
.p-jumpfrom_mainbodywide_to_animations
	{
	display: none;
	}
}

/* 90px : 192px is the width of the jump box itself */
.p-jumpfrom_mainbodywide_to_animations:focus-visible
	{
	top:    1rem;
	left: calc(50vw - 5.625rem);
	width: 12rem;
	height: auto;
	z-index: 999;
	}

/* 1620px 1000px 240px 240px */
@media (min-width: 101.25rem)
{
.p-jumpfrom_mainbodywide_to_animations:focus-visible
	{
	left: calc(500px + ((100vw
		- 62.5rem
		- 15rem
		- 15rem )
		/ 2));
	left: calc(500px + ((100vw
		- var(--maxpagemiddleblockwidth)
		- var(--burgerdiscussionsiframewidth)
		- var(--burgerdiscussionsiframewidth) )
		/ 2));
	}
}

/*=====================================================================*/
.p-jumpfrom_mainbodymedium_to_discussionsandanimations
	{
	display: inline-block;
	}

/* right discussions and animations sidebar is only shown when width is between 851px and 1200px */
@media (max-width: 53.125rem)
{
.p-jumpfrom_mainbodymedium_to_discussionsandanimations
	{
	display: none;
	}
}

/* right discussions and animations sidebar is only shown when width is between 851px and 1200px */
@media (min-width: 75rem)
{
.p-jumpfrom_mainbodymedium_to_discussionsandanimations
	{
	display: none;
	}
}

/* note this is for the medium wide page */
/* 16px 90px 120px : 192px is the width of the jump box itself */
.p-jumpfrom_mainbodymedium_to_discussionsandanimations:focus-visible
	{
	top:    1rem;
	left: calc(50vw - 1rem - 5.625rem - 7.5rem);
	width: 12rem;
	height: auto;
	z-index: 999;
	}

/*=====================================================================*/
/* right animations sidebar is not shown when width is less than 1200px */
@media (max-width: 75rem)
{
.p-jumpfrom_animations_to_discussions
	{
	display: none;
	}
}

/* 128px 160px */
.p-jumpfrom_animations_to_discussions:focus-visible
	{
	top:    1rem;
	left:   auto;
	right:  8rem;
	width: 10rem;
	height: auto;
	z-index: 999;
	}

/*=====================================================================*/
.p-jumpfrom_discussionsandanimations_to_mainbodymedium
	{
	display: inline-block;
	}

/* right discussions and animations sidebar is only shown when width is between 851px and 1200px */
@media (max-width: 53.125rem)
{
.p-jumpfrom_discussionsandanimations_to_mainbodymedium
	{
	display: none;
	}
}

/* right discussions and animations sidebar is only shown when width is between 851px and 1200px */
@media (min-width: 75rem)
{
.p-jumpfrom_discussionsandanimations_to_mainbodymedium
	{
	display: none;
	}
}

/* 128px 160px */
.p-jumpfrom_discussionsandanimations_to_mainbodymedium:focus-visible
	{
	top:    1rem;
	left:   auto;
	right:  8rem;
	width: 10rem;
	height: auto;
	z-index: 999;
	}

/*=====================================================================*/
.a-internal,
.a-internal:visited
	{
	color: hsl(240, 100%, 40%); color: var(--textinternallinkcolour);
	}

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

.a-internal:focus-visible
	{
	outline-offset:     2px;
	outline: 5px solid blue; outline: 5px solid var(--outlinefocusvisiblecolour);
	border-radius:      5px;
	}

.a-internal:active
	{
	color: blue; color: var(--textinternallinkactivecolour);
	}

/*=====================================================================*/
.a-internalinherit,
.a-internalinherit:visited
	{
	color: inherit;
	}

.a-internalinherit:hover
	{
	color: hsl(240, 100%, 40%); color: var(--textinternallinkcolour);
	text-decoration: underline;
	}

.a-internalinherit:focus,
.a-internalinherit:focus-visible
	{
	outline-offset:     2px;
	outline: 5px solid blue; outline: 5px solid var(--outlinefocusvisiblecolour);
	border-radius:      5px;
	}

.a-internalinherit:active
	{
	color: blue; color: var(--textinternallinkactivecolour);
	}

/*=====================================================================*/
.a-internalnavigation,
.a-internalnavigation:visited
	{
	color: hsl(110, 100%, 30%); color: var(--textinternalnavigationlinkcolour);
	font-weight: normal;
	}

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

.a-internalnavigation:active
	{
	color: green; color: var(--textinternalnavigationlinkactivecolour);
	}

/*=====================================================================*/
.a-external,
.a-external:visited
	{
	color: firebrick; color: var(--textexternallinkcolour);
	}

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

.a-external:active
	{
	color: orangered; color: var(--textexternallinkactivecolour);
	}

/*=====================================================================*/
.a-externalinherit,
.a-externalinherit:visited
	{
	color: inherit;
	}

.a-externalinherit:hover
	{
	color:           firebrick; color: var(--textexternallinkcolour);
	text-decoration: underline;
	}

.a-externalinherit:active
	{
	color: orangered; color: var(--textexternallinkactivecolour);
	}

/*=====================================================================*/
.a-licence,
.a-licence:visited
	{
	color: firebrick; color: var(--textlicencelinkcolour);
	}

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

.a-licence:active
	{
	color: orangered; color: var(--textlicencelinkactivecolour);
	}


/*=====================================================================*/
img
	{
	width:        auto;
	height:       auto;
	margin:        0px;
	padding:       0px;
	border:       none;
	font-style: italic;
	}

/*=====================================================================*/
.img-icon
{
	width:  30px;
	height: 30px;
	z-index:   9;
}

.img-iconsmall
{
	width:         20px;
	height:        20px;
	vertical-align: 5px;
	z-index:          9;
}

.img-logo
{
	width:          30px;
	height:         30px;
	vertical-align: -5px;
	z-index:           9;
}

.img-iconcolourthemetoggle
	{
	width:          30px;
	height:         30px;
	vertical-align: -5px;
	z-index:           9;
	}

.img-icongotopage
{
	width:  30px;
	height: 30px;
	float:  left;
	z-index:   9;
}

.img-iconfacebook,
.img-iconyoutubechannel
	{
	height:       40px;
	width:        auto;
	margin-right: 30px;
	margin-bottom: 5px;
	float:        left;
	z-index:         9;
	}

.img-iconfacebook:hover,
.img-iconfacebook:focus,
.img-iconfacebook:focus-visible,
.img-iconyoutubechannel:hover,
.img-iconyoutubechannel:focus,
.img-iconyoutubechannel:focus-visible
	{
	outline-offset:            1px;
	outline: 5px solid lightsalmon; outline: 5px solid var(--imageexternallinkfocuscolour);
	border-radius:            20px;
	}

/*=====================================================================*/
.img-left
	{
	max-width:           80%;
	max-height:         80vh;
	max-height:        80svh;
	margin-right:       20px;
	margin-bottom:       5px;
	float:              left;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

.img-leftwithradius
	{
	max-width:           80%;
	max-height:         80vh;
	max-height:        80svh;
	margin-right:       20px;
	margin-bottom:       5px;
	float:              left;
	border-radius:       70%;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

/*=====================================================================*/
.img-right
	{
	max-width:           80%;
	max-height:         80vh;
	max-height:        80svh;
	margin-left:        10px;
	margin-right:       20px;
	margin-bottom:       5px;
	float:             right;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

/*=====================================================================*/
.img-internallink,
.img-internallink:visited
	{
	width: calc(100% - 10px);
	max-width:         400px;
	max-height:         80vh;
	max-height:        80svh;
	vertical-align:      top;
	margin-top:          5px;
	margin-bottom:      15px;
	border-radius:        5%;
	outline-offset:      3px;
	outline: 2px solid hsl(240, 100%, 40%); outline: 2px solid var(--imageinternallinkoutlinecolour);
	filter: brightness(100%);               filter:         brightness(var(--imagefilterbrightness));
	}

.img-internallink:hover,
.img-internallink:focus
	{
	outline: 5px solid blue; outline: 5px solid var(--outlinefocusvisiblecolour);
	}

/*=====================================================================*/
.img-leftinternallink,
.img-leftinternallink:visited
	{
	max-width:           80%;
	max-height:         80vh;
	max-height:        80svh;
	margin-right:       20px;
	margin-bottom:       5px;
	float:              left;
	filter: brightness(100%); filter: brightness(var(--imagefilterbrightness));
	border-radius:        5%;
	outline-offset:      3px;
	outline: 2px solid hsl(240, 100%, 40%); outline: 2px solid var(--imageinternallinkoutlinecolour);
	filter: brightness(100%);               filter:         brightness(var(--imagefilterbrightness));
	}

.img-leftinternallink:hover,
.img-leftinternallink:focus
	{
	outline: 5px solid blue; outline: 5px solid var(--outlinefocusvisiblecolour);
	}

/*=====================================================================*/
.img-externallink,
.img-externallink:visited
	{
	max-width:               80%;
	max-height:             80vh;
	max-height:            80svh;
	margin-right:           10px;
	border-radius:            5%;
	outline-offset:          5px;
	outline: 3px solid firebrick; border: 3px solid var(--imageexternallinkcolour);
	filter:     brightness(100%); filter: brightness(var(--imagefilterbrightness));
	}

.img-externallink:hover,
.img-externallink:focus
	{
	outline: 3px solid lightsalmon; border: 3px solid var(--imageexternallinkactivecolour);
	}

.img-externallink:active
	{
	outline-width: 5px;
	}

/*=====================================================================*/

/*=====================================================================*/
::-webkit-scrollbar
	{
	width:                          20px;
	height:                         16px;
	background-color: hsl(120, 93%, 90%); background-color: var(--backgroundcolour);
	}

/*=====================================================================*/
::-webkit-scrollbar-thumb
	{
	min-height:                     50px;
	border-radius:                  10px;
	border: 2px solid hsl(120, 93%, 90%); border:             2px solid var(--backgroundcolour);
	border-inline-width:             4px; border-inline-width: var(--scrollbarthumbborderwidth);
	background-color: hsl(120, 73%, 75%); background-color:         var(--scrollbarthumbcolour);
	}

::-webkit-scrollbar-thumb:hover
	{
	border-inline-width:         2px;
	background-color: mediumseagreen; background-color: var(--scrollbarthumbhovercolour);
	}

::-webkit-scrollbar-thumb:active
	{
	border-inline-width:   2px;
	background-color: seagreen; background-color: var(--scrollbarthumbactivecolour);
	}

/*=====================================================================*/
::-webkit-scrollbar-button:vertical
	{
	border: 2px solid hsl(120, 93%, 90%); border:             2px solid var(--backgroundcolour);
	border-inline-width:             4px; border-inline-width: var(--scrollbarthumbborderwidth);
	background-color: hsl(120, 93%, 80%); background-color:         var(--scrollbarthumbcolour);
	}

::-webkit-scrollbar-button:vertical:decrement
	{
	border-radius: 10px 10px 0px 0px;
	}

::-webkit-scrollbar-button:vertical:increment
	{
	border-radius: 0px 0px 10px 10px;
	}

::-webkit-scrollbar-button:vertical:hover
	{
	border-inline-width:         2px;
	background-color: mediumseagreen; background-color: var(--scrollbarthumbhovercolour);
	}

::-webkit-scrollbar-button:vertical:active
	{
	border-inline-width:   2px;
	background-color: seagreen; background-color: var(--scrollbarthumbactivecolour);
	}

/*=====================================================================*/