a, .linkStyle {
	color:!HSL(13, 100%, 67%);	/* sessions.edu: analogous reddish, saturated */
	color:!#EF8022;	/* HSL(28, 86%, 54%). azurewebsites.net: accent; */

	color:HSL(13, 87%, 67%);	/* sessions.edu: analogous reddish */
	color:HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
}


/* ================================topbar stuff==================================: */

#topbarBG {
    color: !red;
	background: !sienna;
    background: !rgb(20%, 20%,20%);
    background: !dimgrey;
	background:!hsl(28, 87%, 20%);	/* SandyBrown, darkened */
	
	background:red;
	background:hsl(28, 87%, 50%);	/* SandyBrown, darkened */
	background:hsl(28, 87%, 10%);	/* SandyBrown, darkened */
	background: hsl(0, 0%, 10%); /* blackish grey tone */
}

#topbar a {
    background: !sienna;
    background: !rgb(20%, 20%,20%);
    background: !dimgrey;
	
    color: gainsboro;
	color: hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */
	color: hsl(0, 0%, 90%); /* grey tone */
	color:white;
}

#topbar a:hover {
	color:!green;
    font-weight: !bold;
	
    color:white;
	color:HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	color:hsl(28, 87%, 50%);	/* sandybrown, darkened */;
}

#desktop-topRightSocial a:hover {
	background:inherit;		/* to avoid white BG */
}


/* ====================================button===================================: */

.btn-niimoMusic {
	background:HSL(43, 87%, 67%);	/* sessions.edu: analogous yellowish */
	background:HSL(43, 100%, 67%);	/* sessions.edu: analogous yellowish, saturated */
	background:!HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	background: hsl(28, 87%, 50%);	/* sandybrown, darkened */
	background:!sandybrown;
	background:! hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */;
	border-color:HSL(43, 87%, 57%);	/* sessions.edu: analogous yellowish, 10 darker */
	border-color:hsl(28, 87%, 40%);	/* sandybrown, >darkened */;
	border:! 5px white solid;
	outline:! red solid 5px;
}

.btn-niimoMusic-text {
	color:HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	color:white;
}

.btn-niimoMusic:hover, .btn-niimoMusic:focus, .btn-niimoMusic:active, .btn-niimoMusic.active, .open .dropdown-toggle.btn-niimoMusic {
background-color:HSL(43, 87%, 57%);	/* sessions.edu: analogous yellowish, 10 darker */
color:;
border-color:HSL(43, 87%, 47%);	/* sessions.edu: analogous yellowish, 20 darker */
}

.btn-niimoMusic.disabled {
	background:HSL(43, 87%, 67%);	/* sessions.edu: analogous yellowish */
	background:HSL(43, 100%, 67%);	/* sessions.edu: analogous yellowish, saturated */
	background:HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	background: hsl(28, 87%, 50%);	/* sandybrown, darkened */
	background:! hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */
	color:red;
	border-color:HSL(43, 87%, 57%);	/* sessions.edu: analogous yellowish, 10 darker */
	border-color:transparent;
}


/* ============================= main menu: =====================================: */

.navbar-default.sidebar, .menuBackground {
	overflow:!scroll;
	background:hsl(28, 87%, 10%);	/* SandyBrown, darkened */
	background:!hsl(28, 87%, 30%);	/* SandyBrown, darkened */
	background:!hsl(28, 87%, 40%);	/* SandyBrown, darkened */
	background:!hsl(28, 87%, 60%);	/* SandyBrown, darkened */
	background:!HSL(43, 100%, 67%);	/* sessions.edu: analogous yellowish, saturated */
	background:!HSL(13, 87%, 67%);	/* sessions.edu: analogous reddish */
	background:!HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	background:!HSL(13, 100%, 67%);	/* sessions.edu: analogous reddish, saturated */
	background:! #F8F8F8;

	background:black;
	background: hsl(0, 0%, 20%); /* grey tone */
}

nav a {				/* main menu links */
	color:!black;
	color:!hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */
	color:!hsl(28, 87%, 10%);	/* SandyBrown, darkened */
	color:!hsl(0, 0%, 99%);	/* grey tone */
	color:!green;
	
	color:white;
}

a.active {		/* currently opened */
	color:!red;
	color:black;
}

.nav > li > a:hover, .nav > li > a:focus {	/* 🠜 main navigation */
	color:!red;

    background:! LemonChiffon;
    background:! NavajoWhite;
    background:! !#FFF5A3;
    background:! #E58948; /* chocolate palleton second-lightest */
    background:! #F59E60; /* chocolate palleton contrast+20 second-lightest */
    background:! #EC9252; /* chocolate palleton contrast+10 second-lightest */
    background:! #EDAA68; /* peru palleton second-lightest */
    background:! #FFBF89; /* sandybrown palleton second-lightest */
    background:! #FFF0D5; /* moccasin palleton second-lightest */
    background:! white;
    background:!hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background:! hsl(28, 87%, 99%);	/* SandyBrown, *-lightened */

	background: hsl(0, 0%, 99%); /* grey tone */
}


/* ================================= envelopes: =================================: */

#page-wrapper {				/* over body, under green. xs: covered by child fluid-articlecontainer. desktop: edge visible left and right of fluid-articlecontainer. originally short and unaffected by length of article, if I'm not mistaken. now always from top to bottom. */
	min-height:!100vh;
	width:!50%;
	
    background: yellow;
    background: cornsilk;
    background: LemonChiffon;
    background: #FFAF76; /* chocolate palleton lightest */
    background: #FFD4B6; /* chocolate palleton contrast+20 lightest */
    background: #FFBE8F; /* chocolate palleton contrast+10 lightest */
    background: #FFCC9A; /* peru palleton lightest */
    background: #FFD6B3; /* sandybrown palleton lightest */
    background: #FFF9EE; /* moccasin palleton lightest */
    background: white;
	background: !hsl(28, 87%, 85%);		/* SandyBrown, max-lightened */
    background: !transparent;
}

#fluid-articlecontainer {
	background:green;
	background:transparent;
}


/* =============================== page menus: =================================== */

/* === lg menu: === */

.navbar.navbar-default,		/* apparently this line only affects the left-right border */
#PageNavigation-div {
    background:! sandybrown;
    background:! moccasin;
    background:! white;
    background:! SandyBrown; /* hsl(28, 87%, 67%) */
	background:! hsl(28, 87%, 80%);	/* SandyBrown, *-lightened */
	background:! hsl(0, 0%, 95%); /* grey tone */
	
	background:red;
	background: hsl(0, 0%, 20%); /* grey tone */
}

#PageNavigation-div a {
	color:white;
}

#PageNavigation-div a:hover {
	background:!green;
	background: hsl(0, 0%, 99%); /* grey tone */
	color:black;
}

#DesktopPagemenuHeader a:hover {
	background:inherit;
	color:hsl(28, 87%, 50%);	/* sandybrown, darkened */
	color:!white;	/* not specifying any value makes it black */
	color:!HSL(13, 87%, 50%);	/* sessions.edu: analogous reddish, darkened */
	text-decoration: overline;	/* does work */
	/*				this creates an outline
	text-shadow: -1px 1px 0 #000 red,
				  1px 1px 0 #000 red,
				 1px -1px 0 #000 red;
				-1px -1px 0 #000 red;
	*/
}

.navbar-default .navbar-nav > .active > a {
	font-size:! xx-large;
	color:!red; /* no effect */
	
    background:! LemonChiffon;
    background:! NavajoWhite;
    background:! !#FFF5A3;
    background:! #E58948; /* chocolate palleton second-lightest */
    background:! #F59E60; /* chocolate palleton contrast+20 second-lightest */
    background:! #EC9252; /* chocolate palleton contrast+10 second-lightest */
    background:! #EDAA68; /* peru palleton second-lightest */
    background:! #FFBF89; /* sandybrown palleton second-lightest */
    background:! #FFF0D5; /* moccasin palleton second-lightest */
    background:! white;
    background:!hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background:! hsl(28, 87%, 99%);	/* SandyBrown, *-lightened */
	background:! hsl(0, 0%, 99%); /* grey tone */
	
	font-weight:bold;
	background:hsl(0, 0%, 30%); /* grey tone */
}

.navbar-default .navbar-nav > .active > a:hover {
	background:!red;		/* no effect */
	font-weight:!100;	/* this would work */
}

.navbar-default .navbar-nav > .active > a:focus {
	/* whatever */
}

/* === xs-md menu: === */

.xs-md-pageHeading {
	color:white;
	font-size:!xx-large;
}


/* ============================== posts: ========================================= */

.panel		/* affects (only) the border */
 {
	background: hsl(0, 0%, 20%); /* blackish grey tone */
	background:!green;
}

.panel .panel-heading {	/* affects the header. for some reason child AND parent need to be mentioned */
    background:! sandybrown;
    background:! moccasin;
    background:! white;
    background:! SandyBrown; /* hsl(28, 87%, 67%) */
	background:! hsl(28, 87%, 80%);	/* SandyBrown, *-lightened */
	background:! hsl(0, 0%, 95%); /* grey tone */
	
	background:yellow;
	background: hsl(0, 0%, 20%); /* blackish grey tone */
}

.postH {
	color:white;
}

.panel-body {
	background: hsl(0, 0%, 99%); /* grey tone */
	background:!pink;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #f9f9f9;
  background: hsl(28, 87%, 71%);	/* SandyBrown, min-lightened */
  background: hsl(28, 60%, 75%);	/* SandyBrown, mid-lightened, desaturated */
  background: hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */
  background: hsl(28, 87%, 78%);	/* SandyBrown, mid-max-lightened */
  background: hsl(0, 0%, 95%);	/* grey tone */
}

.panel-footer {
	background: hsl(28, 87%, 71%);/* SandyBrown, min-lightened */
	background: hsl(0, 0%, 90%);/* grey tone */
}


/* =============================== footers: =====================================: */

/* === desktop: === */

#desktopFooterTopOrLeft {
	outline:! solid black 1px;

	background:!sandybrown;
	background:!hsl(28, 87%, 60%);	/* SandyBrown, darkened */
	background:!hsl(28, 87%, 30%);	/* SandyBrown, darkened */
	background:! hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background:! SandyBrown; /* hsl(28, 87%, 67%) */
	background:! hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */

	border-top: solid gray 1px;
	background: hsl(0, 0%, 10%); /* grey tone */
	color:white;
}

#desktopFooterRightOrBottom {
	outline:! solid black 1px;
	opacity:!0;

	background:!sandybrown;
	background:! hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background:! hsl(28, 87%, 71%);	/* SandyBrown, min-lightened */
	background:!hsl(28, 87%, 10%);	/* SandyBrown, darkened */
	background:!hsl(28, 87%, 20%);	/* SandyBrown, darkened */
	background:! hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background:! SandyBrown; /* hsl(28, 87%, 67%) */
	background:! hsl(28, 87%, 85%);	/* SandyBrown, max-lightened */

	border-top: solid grey 1px;
	background: hsl(0, 0%, 10%); /* grey tone */
	color:white;
}

#desktopFooterBottomOrRightText {
	color:!green;
	opacity:0.6;
}

/* === xs: === */

#xs-footer-topdiv, #xs-footer-bottomdiv {
	background:! hsl(28, 87%, 75%);	/* SandyBrown, mid-lightened */
	background: hsl(0, 0%, 10%); /* grey tone */
	color:white;
}

#xs-footer-topdiv {
	background:! hsl(0, 0%, 20%); /* grey tone */
}

#xs-footer-bottomdiv {
	border-top: 1px solid grey;
	border-top: 1px solid transparent;
	background: hsl(0, 0%, 20%); /* grey tone */
	background:!transparent;
	opacity:!0.6;
}

#xs-footer-bottomdiv-content {
	opacity:0.6;
	color:!green;
}


/* ================================ misc: ======================================== */

#toTopButton {
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
}

#myBtn:hover {	/* must be for #toTopButton ? */
    background-color: #555; /* Add a dark-grey background on hover. why no effect? */
}