/*=====================================================================*/
.input-sounds
	{
	cursor:       pointer;
	display: inline-block;
	margin:          10px;
	width:           20px;
	height:          20px;
	vertical-align:   sub;
	outline: solid 3px hsl(110, 100%, 30%); outline: solid 3px var(--textnavigationthispagelinkcolour);
	accent-color:   green;                  accent-color: var(--textinternalnavigationlinkfocuscolour);
	}

.input-sounds:visited
	{
	outline: solid 3px hsl(110, 100%, 30%); outline: solid 3px var(--textnavigationthispagelinkcolour);
	}

.input-sounds:hover,
.input-sounds:focus-visible
	{
	outline-width: 5px;
	}

.label-forsoundscheckbox
	{
	cursor:       pointer;
	text-decoration: none;      text-decoration:     var(--textlinkdecoration);
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	}

.label-forsoundscheckbox:hover,
.label-forsoundscheckbox:focus-visible
	{
	text-decoration:    underline;
	text-decoration-style: dashed;
	}

/*=====================================================================*/
.button-volume
	{
	cursor:          pointer;
	margin-left:         0px;
	margin-top:         10px;
	margin-right:        0px;
	margin-bottom:      10px;
	padding-left:       10px;
	padding-top:         5px;
	padding-right:      10px;
	padding-bottom:      5px;
	display:    inline-block;
	color: hsl(110, 100%, 30%);           color:   var(--textnavigationthispagelinkcolour);
	font-weight:        bold;
	border-radius:      20px;
	border: 5px outset linen;             border: 5px outset var(--foregroundsoundscolour);
	background-color: hsl(120, 93%, 90%); background-color:    var(--backgroundiconcolour);
	}

.button-volume:visited
	{
	color: hsl(110, 100%, 30%);           color: var(--textnavigationthispagelinkcolour);
	background-color: hsl(120, 93%, 90%); background-color:  var(--backgroundiconcolour);
	}

.button-volume:hover,
.button-volume:focus-visible
	{
	outline-offset:              3px;
	outline: solid 5px hsl(110, 100%, 30%); outline: solid 5px var(--textnavigationthispagelinkcolour);
	}

.button-volume:active
	{
	transform: translate(1px, 1px);
	}

/*=====================================================================*/
.img-art
	{
	max-width:  calc( 100%   + 10px );
	max-height: calc( 100vh  - 40px );
	max-height: calc( 100svh - 40px );
	float:         none;
	clear:         left;
	margin-left:  -10px;
	matgin-bottom: 30px;
	}

/* 850px */
@media (max-width: 53.125rem)
{
.img-art
	{
	max-width:  calc( 100%   - 10px );
	max-height: calc( 100vh  - 20px );
	max-height: calc( 100svh - 20px );
	margin-left: -15px;
	}
}

/*=====================================================================*/
.p-textplaystartreksoundonclick,
.p-modaltextstartreksoundfilenamelink
	{
	width:    fit-content;
	margin-left:     30px;
	margin-bottom:    5px;
	padding-left:    10px;
	padding-right:   10px;
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	cursor:       pointer;
	text-decoration: none;      text-decoration:     var(--textlinkdecoration);
	}

.p-textplaystartreksoundonclick
	{
	font-size: x-large;
	}

.p-textplaystartreksoundonclick:visited,
.p-modaltextstartreksoundfilenamelink:visited
	{
	color: hsl(110, 100%, 30%); color: var(--textnavigationthispagelinkcolour);
	}

.p-textplaystartreksoundonclick:hover,
.p-textplaystartreksoundonclick:focus-visible,
.p-modaltextstartreksoundfilenamelink:hover,
.p-modaltextstartreksoundfilenamelink:focus-visible
	{
	text-decoration:    underline;
	text-decoration-style: dashed;
	}

.p-textplaystartreksoundonclick:focus-visible,
.p-modaltextstartreksoundfilenamelink:focus-visible
	{
	outline-offset:              3px;
	outline: solid 3px hsl(110, 100%, 30%); outline: solid 3px var(--textnavigationthispagelinkcolour);
	}

/* 24px 16px */
.p-modaltextstartreksounddescription
	{
	width:   fit-content;
	margin-top:     40px;
	margin-bottom:  20px;
	padding-left: 1.5rem;
	padding-right:  10px;
	text-indent:   -1rem;
	font-weight:    bold;
	}

.p-modaltextstartreksoundurl
	{
	width:     fit-content;
	max-width:        100%;
	padding-left:     40px;
	padding-right:    10px;
	font-size:       small;
	word-break: break-word;
	}

.img-singledotstartreksound
{
	width:          1px;
	height:         1px;
	filter: opacity(0%);
}
/*=====================================================================*/