/* ============================ all pages: ===================================== */

body {
    background: !transparent;
    background: red;			/* should not be visible */
}

#topbarBG {
    border-bottom: green solid 0px;
}

.SocialMediaTopBar li a {
    padding: 15px;
    min-height: 50px;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 150%;
	color:!red;
}

@media(min-width:768px) {
	.sidemenuScrollbar {
		background:!purple;
		margin-bottom:!100px;
		position:!absolute;
			top:!0px;
			right:!0px;
			bottom:!100px;
			left:!0px;
		height:calc(100vh - 50px - 0px); /* use 20px for space for footer? */
		overflow:auto;
	}
}

.sidebar {
	margin-top:51px;
	margin-top:0px;
}

.menuTriangles {
	display:none;
}

#topbar-subtitle {
	background:!green;
	
	display:inline-block;
	display:none;
	font-size: 4px;
	font-size: 7px;
	color:!red;
	width:250px;
	width:!30%;
	line-height:1.25;
	
}

@media(min-width:768px) {
	#topbar-subtitle {
		display:inline-block;
		width:400px;
		font-size: 4px;
		font-size: x-small;
		text-decoration:!underline;
		width:!inherit;
		vertical-align:-5px;
	}
}

@media(min-width:992px) {
	#topbar-subtitle {
		width:600px;
		font-size: 8px;
		font-size:x-small;
		text-decoration:!underline;
	}
}

@media(min-width:1200px) {
	#topbar-subtitle {
		font-size: 11px;
		font-size: small;
		width:inherit;
		vertical-align:inherit;
		text-decoration:!underline;
	}
}

html, body {					/* ??? */
scrollbar-color: yellow green;
scrollbar-color: auto;
scrollbar-color: grey gainsboro;
}

#pipeAfterBrand {
	
}

/* ===================== most pages: ========================================== */

#fluid-articlecontainer {
	width:100%;			/* needed? */
	padding-bottom:30px;
	min-height:calc(100vh - 30px - 25px); /* mostly relevant for short articles? find out sources of numbers. */ /*second px value is height of one-row desktop footer? */
	}

.navbar.navbar-default {
	border-top:0px;		/* gap above desktop page menu */
}

.panelWithTopOffset {
	/* offset for top bar: */
	padding-top: 53px;
	margin-top: -53px;
	/* offset for top bar + page menu: */
	padding-top: 102px;
	margin-top: -102px;
}

.postH {
	margin:0px;
	line-height:0.8;
}

#toTopButton {
    display: !none; /* Hidden by default */

    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    bottom: 0px;
    right: 30px; /* Place the button 30px from the right */
    right: 5px;
    right: 0px;
    z-index: 99; /* Make sure it does not overlap */
    z-index: !3000;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    padding: 10px;
    border-radius: 10px; /* Rounded corners */
    font-size: !18px; /* Increase font size */
    font-size: 25px;
	
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
}

/* =========== most pages \ desktop footer ================================ */

#DesktopFooterinside { /* inside means inside (yellow) page-wrapper */	/* merge khaki div? */
	height:!25px;	/* height for niimo-music */
	height:!100px;
	position:absolute;
	left:0;
	right:0;
	z-index:2000;
	background:pink;	/* row and collumn wil have their own bg colours. */
}

#desktopFooterRow {
	background:teal;	/* invisible/covered in niimo-music */
	background: hsl(0, 0%, 10%); /* grey tone */;
	height:100%;		/* needed? */
}

#desktopFooterTopOrLeft {
	border:!solid;
	vertical-align:!bottom;
	text-align:!left;
	
	height:100%;		/* needed? */
	line-height:25px;
	background:coral;	/* invisible/covered */
	opacity:0.75;
}

#desktopFooterRightOrBottom {
	vertical-align:!bottom;
	
	text-align:right;
	height:100%;		/* needed? */
	line-height:25px;
	font-size: x-small;
	background:purple;
}


/* =========== most pages \ xs footer ================================ */

#xs-footer {
	color:!red;
	background-color:pink;		/* this is probably invisible */
	height:60px;				/* is this necessary? */
	border-top: 0px solid dimgray;	/* move to colour section? */
}

#xs-footer-topdiv {
	color:!red;
	background:beige;
	text-align:center;
	padding-top:10px;
	border: solid transparent 1px;	/* weirdly necessary */
}

#xs-footer-bottomdiv {
	color:!red;
	background-color:blue;
	font-size:small;
	font-size:x-small;
	padding-left:15px;		/* redundant if centered? */
	padding-right:15px;		/* redundant if centered? */
	text-align:center;
	border-top: 1px solid grey;	/* copied to colour section */
}


/* ============================ some pages: ====================================== */

.socialbutton-captioned {
	width:!30%;
	min-width:!385px;
	max-width:!1000px;
	min-width:min-content;
	width:!50vw;
}

blockquote p {
	color:!red;
	margin:! 1em 0 1em 0; /* should be default, but seems off */
	margin:!0px;
	margin-top:!1em;
	margin-bottom:0.5em;
}

.priceTable {
	color:!red;
	padding-left:!auto;
	padding-right:!auto;
	
	text-align:center;
}

.discography-col {
	margin-bottom:5px;
	margin-top:5px;
	font-size:large;
}

.photo-row img {
	background:!red;
	max-width:100%;
	height:auto;
	display:block;
	margin-top:15px;
	margin-bottom:!10px;
}

.photo-caption {
	background:gainsboro;
	text-align:center;
}

.videoRow div {
	background:!purple;
	width:!10px;
	color:!red;
	margin-bottom:8px;
}

figcaption {
  background:gainsboro;
  padding: 2px;
  text-align: center;
}

/* === theme-independent colours: == */

.vocColour1 {
	background:crimson;
}

.vocColour2 {
	background:darkOrange;
}

.vocColour3 {
	background:gold;
}

.vocColour4 {
	background:limeGreen;
}

.vocColour5 {
	background:forestGreen;
}

.vocColour6 {
	background:cyan;
	background:deepSkyBlue
}

.vocColour7 {
	background:blue;
}

.vocColour8 {
	background:!purple;
	background:darkMagenta;
}

.vocColour9 {
	background:pink;
	background:deepPink;
}

.vocColour10 {
	background:fireBrick;
	background:!maroon;
}


/* ================ (some pages \)drum repertoire table: ========================= */

td:nth-child(3) {		/* problematic. use colgroup instead? */
	color:!green;
	overflow-wrap:anywhere;
}

.drumIcon {
	height:32px;
}

.drumIcon-horizontal
 {
	height:26px;
}

.rotateimg180 {						
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotateimg90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* --- */









.linkTable {		/* empty so far */
	color:!red;
}

#testdiv {
	color:red;
}

.redtext { 		/* for testing purposes */
    color:red;
}