/*
Theme Name: codelib
Theme URI: https://spinhead.com/
Author: Joel D Canfield
Author URI: https://spinhead.com/
Text Domain: codelib
codelib is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

*, *::before, *::after {box-sizing: border-box;}
 * {margin: 0;}
html, body {height: 100%;}
body {line-height: 1.5;-webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {display: block;max-inline-size: 100%;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
#root, #__next {isolation: isolate;}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

:root {
--color--main: 50;
--color--alt: 180;

--color--main--light:           hsl(              50, 99%, 98%, 1.0);
--color--main--light:           hsl(var(--color--main), 99%, 98%, 1.0);
--color--midbg--light:          hsl(              50, 99%, 88%, 1.0);
--color--midbg--light:          hsl(var(--color--main), 99%, 88%, 1.0);
--color--action--plus2-light:   hsl(             180, 44%, 47%, 1.0);
--color--action--plus2-light:   hsl( var(--color--alt), 44%, 47%, 1.0);
--color--action--plus1-light:   hsl(             180, 33%, 66%, 1.0);
--color--action--plus1-light:   hsl( var(--color--alt), 33%, 66%, 1.0);
--color--action--light:   		hsl(              50, 66%, 77%, 1.0);
--color--action--light:  		hsl(var(--color--main), 66%, 77%, 1.0);
--color--main--dark:            hsl(             180, 33%, 22%, 1.0);
--color--main--dark:            hsl( var(--color--alt), 33%, 22%, 1.0);
--color--main--shadow:          hsl(             180, 33%, 22%, 0.4);
--color--main--shadow:          hsl( var(--color--alt), 33%, 22%, 0.4);
--color--midbg--dark:           hsl(             180, 55%, 44%, 1.0);
--color--midbg--dark:           hsl( var(--color--alt), 55%, 44%, 1.0);
--color--contrast--dark:        hsl(             180, 33%, 33%, 1.0);
--color--contrast--dark:        hsl( var(--color--alt), 33%, 33%, 1.0);
--color--action--plus2-dark:    hsl(             180, 55%, 44%, 1.0);
--color--action--plus2-dark:    hsl( var(--color--alt), 55%, 44%, 1.0);
--color--action--plus1-dark:    hsl(             180, 66%, 33%, 1.0);
--color--action--plus1-dark:    hsl( var(--color--alt), 66%, 33%, 1.0);
--color--action--dark:          hsl(             180, 77%, 22%, 1.0);
--color--action--dark:          hsl( var(--color--alt), 77%, 22%, 1.0);
--color--action--minus1-dark:   hsl(             180, 55%, 22%, 1.0);
--color--action--minus1-dark:   hsl( var(--color--alt), 55%, 22%, 1.0);

--font-family--main: Helvetica, 'Trebuchet MS', Arial, sans-serif;
--font-family--alt: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; 
--font-family--fixed-width: Monaco, Consolas, 'Lucida Console', monospace;
--font-weight--light: 100;
--font-weight--main: 400;
--font-weight--heavy: 900;
--font-size--xxl: calc(1.4vh + 1vw + 0.8em);
--font-size--xl: calc(0.7vh + 0.7vw + 0.6em);
--font-size--lg: calc(0.2vh + 0.1vw + 1em);
--font-size--m: calc(0.2vh + 0.1vw + 0.6em);
--font-size--sm: 0.9em;
--line-height--loose: 1.6;
--line-height--moderate: 1.4;
--line-height--tight: 1.2;
--line-height--crushed: 0.9;	
}

html {
font-size: 100%;
}

/* Layout
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color--main--light);
	font-family: var(--font-family--main);
	font-size: var(--font-size--lg);
	font-weight: var(--font-weight--main);
}

body {
	background: var(--color--main--dark);
	line-height: var(--line-height--loose);
	padding-bottom: 2vh;
}

#page {
	padding-top: 2vh;
display: grid;
gap: 0 1em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"masthead search"
"primary  primary"
;
}

#primary {
	padding: 2vh 1vw;
	grid-area: primary;
	border-radius: 1rem;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
gap: 0 1em;
}

.single #primary {
display: inline-block;
}

.single #primary article {
width: 100%;
columns: 2;
}

.search  {
	align-self: center;
width: 90%;
margin: 0 5vw 1em 0;
	grid-area: search;
}

#search-form {
display: grid;
gap: 0 1em;
grid-template-columns: 3fr 1fr;
grid-template-areas:
"input button";
}

#search-form input[type="search"] {
grid-area: input;
	border-radius: 0.6rem;
	letter-spacing: -1px;
}

#search-form input[type="submit"] {
grid-area: button;
}

@media (width > 600px) {
	#primary {
		padding: 0 5vw 1em 5vw;
	}
#masthead {
padding: 0 0 1em 5vw;
}
	#page {
		padding-top: 2vh;
	}
}

#secondary {
display: none;
/*	padding: 0 5vw 0 1vw;
	background-color: transparent;
	width: 30%;
	float: right; */
}

article {
width: clamp(30ch, calc(50% - 0.5em), 60ch);
	break-inside: avoid;
	padding: 1.6rem;
	border-radius: 1rem;
	box-shadow: 2px 1px 4px hsl(295, 20%, 10%, 0.4)
	, 0 0 2px hsl(295, 20%, 10%, 0.4);
}

#comments, .comments-link {
	display: none;
}

.site-header {
grid-area: masthead;
	padding: 1vh 2vw;
}

.site-branding {
	padding: 0;
	background-color: hsl(180, 100%, 100%, 0.2);
	border-radius: 1rem;
	text-align: center;
}

.site-title {
	font-size: 2rem;
	margin-bottom: 0;
	display: inline-block;
}

.site-title a {
	border-bottom: none;
}

.site-description {
	display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: var(--font-family--alt);
	font-weight: var(--font-weight--light);
}

h1 {
	font-size: var(--font-size--xxl);
}

h2 {
	font-size: var(--font-size--xl);
}

h3 {
	font-size: var(--font-size--lg);
}

p {
	margin-bottom: 1.3em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

code, pre, kbd, tt, var {
	white-space: pre-wrap;
}

code, kbd, tt, var {
	color: var(--color--main--dark);
	background: var(--color--midbg--light);
	box-shadow: 2px 4px 6px var(--color--main--shadow);
	font-family: var(--font-family--fixed-width);
	font-size: var(--font-size--medium); 
	line-height: var(--line-height--tight);
	overflow: auto;
	padding: 0.2em 0.6em;
	display: inline-block;
}

pre {
	margin-bottom: 1em;
}

code br {
display:none;
}

abbr, acronym {
	border-bottom: 1px dotted var(--color--main--dark);
	cursor: help;
}

mark, ins {
	background: var(--color--main--light);
	text-decoration: none;
}

/* Elements
--------------------------------------------- */

.post-thumbnail {
	display: none;
}

.cat-links, .tags-links {
	padding-right: 1rem;
}

.entry-footer {
	margin-top: 1.5em;
}

#colophon, .byline {
	display: none;
}

hr {
	background: var(--color--main--light);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* lists: ol ul li */

ol, ul {
    margin-bottom: 1rem;
}

ol {
	list-style-type:decimal
}

ul {
	list-style-type: disc;
}

ul li ul {
	list-style-type: square;
}	

ul li ul li ul {
	list-style-type: circle;
}	

li ul li ul li ul {
	list-style-type: square;
}

li ul li ul li ul li ul {
	list-style-type: disc;
}

li > ul, li > ol {
	margin-bottom: 0;
	margin-left: 1em;
	padding: 0 0.6rem;
}						

li {
	line-height: var(--line-height--moderate);
}				

li::marker {
	color: var(--color--contrast--dark);
}				

li ol {
	list-style-type: upper-alpha;
}

td li {
margin: 0;
padding: 0;
}

td {
vertical-align: top;
}

dl, dfn {
display: grid;
}

dt {
	font-weight: 700;
padding: 0 30% 0 0;
float: left;
clear: left;
}

dd {
	padding: 0 0 1.3em 30%;
float: right;
clear: right;
}

dt {
	border-bottom: 1px dotted hsl(from currentColor h s l / 0.3);
}

embed,
iframe,
object {
	max-inline-size: 100%;
}

img {
	height: auto;
	max-inline-size: 100%;
}

figure {
	margin: 1em 0;
}

table {
	border: 1px solid currentColor;
	border-collapse: collapse;
	margin-bottom: 1em;
	page-break-inside: avoid;
}

table.bordered-table {
	width: 100%;
	margin: 0;
	border: 0px;
	border: none;
}

.bordered-table tr, .bordered-table td
, .lined-table tr, .lined-table td {
	vertical-align: middle;
}

.bordered-table td, .lined-table td {
	border-bottom: 1px dotted currentColor;
}

.music-chart td {
	text-align: left;
}

.music-chart td:first-child
, .music-chart tr:first-child {
	background: var(--color--contrast--dark);
	font-weight: bold;
}

.music-chart-headless td {
	text-align: center;
}

.music-chart-headless td:first-child {
	background: var(--color--contrast--dark);
	font-weight: bold;
}

th, td {
	text-align: center;
	border-collapse: collapse;
/*	padding: 0 0.5em;    */
	text-align: center;
}

th {
	border-bottom: 1px solid currentColor;
	border-right: 1px dotted currentColor;
}

td {
/*	padding: 0.1em 0.6em;   */
	padding: 0.1em 1em;
	border-right: 1px dotted currentColor;
	border-bottom: 1px dotted currentColor;
}

.borders-dotted {
  border-collapse: collapse;
}

.borders-dotted td {
  border: 1px dotted currentColor;
}

.cells-left td {
  text-align: left;
}

.text-heavy tr, .text-heavy td {
	text-align: left;
}

.one {
	color: hsl(0 0% 75% / 1.0);
	font-weight: bold;
}
.two {
	color: hsl(0 100% 50% / 1.0);
	font-weight: bold;
}
.three {
	color: hsl(30 100% 50% / 1.0);
	font-weight: bold;
}
.four {
	color: hsl(50 100% 50% / 1.0);
	font-weight: bold;
}
.five {
	color: hsl(90 100% 50% / 1.0);
	font-weight: bold;
}
.six {
	color: hsl(180 100% 50% / 1.0);
	font-weight: bold;
}
.seven {
	color: hsl(210 90% 70% / 1.0);
	font-weight: bold;
}
.nine {
	color: hsl(300 100% 50% / 1.0);
	font-weight: bold;
}

.stripetable td {padding: 0.2em;}
.stripetable tr:nth-child(even) {background: hsl(180 40% 70% / 0.2);}
.stripetable tr:nth-child(odd) {background: hsl(24 100% 50% / 0.1);}
.stripetable tr:first-child, tr:nth-child(10n) {background: none;}
.stripetable tr td:first-child {background: hsl(90 40% 70% / 0.2);}
.stripetable tr td:last-child {background: hsl(300 40% 70% / 0.2);}
.stripetable tr td:nth-child(2) {text-align: center;}

tr.flat td:first-of-type, tr.sharp td:first-of-type {
	color: darkslategrey;
	background: snow; 
}
.flat, tr.flat:nth-child(10n) {
	color: orangered;
	background: khaki;
}

.sharp, tr.sharp:nth-child(10n) {
	color: indigo;
	background: lavender; 
}

.stagecell {
	color:#9999ff;
}

.reactioncell {
	color:#ff9966;
}

.solutioncell {
	color:#66ff66;
}

.altrow {
	background-color: hsl(0 100% 100% / 10%);
}

.do, .donot {
	padding: 0 0.3em;
}

.do {
	color: darkgreen;
	background: darkkhaki;
}

.donot {
	color: lightcoral;
	background: peachpuff;
}

/* Links
--------------------------------------------- */

a, a:focus-visible {
	color: var(--color--action--light);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
a:hover {
	color: var(--color--action--plus1-light);
}
a:visited {
	color: var(--color--action--minus1-light);
}
a:active {
	color: var(--color--action--plus2-light);
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: hsl(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

input[type="submit"] {
	border-color: #ccc #ccc #bbb;
	border-radius: 0.6rem;
	background: hsl(200 22% 33% / 0.8);
	color: hsl(50 55% 88% / 1);
	line-height: 1;
	padding: 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus-visible,
input[type="button"]:active,
input[type="button"]:focus-visible,
input[type="reset"]:active,
input[type="reset"]:focus-visible,
input[type="submit"]:active,
input[type="submit"]:focus-visible {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 0.25em;
	padding: 3px;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="range"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="time"]:focus-visible,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="color"]:focus-visible,
textarea:focus-visible {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	max-inline-size: 100%;
}

/*--------------------------------------------------------------
## Navigation
--------------------------------------------------------------*/
#site-navigation, .skip-link {
	display: none;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.home .entry-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home .entry-footer {
display: none;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
	background-color: hsl(180, 100%, 100%, 0.2);
	padding: 2vh 2vw;
	border-radius: 1rem;
}

.widget_categories .widget-title {
	display: none;
}

.widget select {
	max-inline-size: 100%;
}

.widget ul {
	margin-block: 0;
	padding-inline-start: 0;
}

.widget li {
	margin-block-end: 0.8em;
}

.tagcloud a {
	display: inline-block;
	line-height: 1.1;
	padding: 0.1rem 0.3rem;
	margin: 0.1rem 0.3rem;
	border-bottom: none;
	box-shadow: 1px 1px 3px hsl(200, 50%, 30%, 0.6);
	border-radius: 0.4em;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Alignments
--------------------------------------------- */
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
## post navigation using featured image as background
--------------------------------------------------------------*/

.post-navigation {
font-weight: 700;
}

.post-navigation a {
display: block;
padding: 3.8461% 7.6923%;
}

.post-navigation span {
display: block;
}

.post-navigation .meta-nav {
font-size: 2rem;
color: var(--color--action--light);
line-height: 1.5;
padding-bottom: 0.4em;
position: relative;
z-index: 2;
}

.post-navigation .post-title {
line-height: 1.3333;
position: relative;
z-index: 2;
}

.post-navigation .nav-next,
.post-navigation .nav-previous {
background-position: center;
background-size: cover;
position: relative;
}

.post-navigation .nav-next a {
	border-radius: 0 1rem 1rem 0;
}

.post-navigation .nav-previous a {
	border-radius: 1rem 0 0 1rem;
}

.post-navigation a {
color: var(--color--action--light);
background-color: var(--color--action--plus2-dark);
}

.post-navigation a:hover {
background-color: var(--color--action--plus1-dark);
}

.post-navigation a:before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}

.post-navigation a:hover:before,
.post-navigation a:focus:before {
opacity: 0.5;
}

.post-navigation .meta-nav {
opacity: 0.8;
}

.post-navigation div + div {
border-top: 2px solid var(--color--main--shadow);
}

.posts-navigation .nav-previous,
.post-navigation .nav-previous {
width: 100%;
}

.posts-navigation .nav-next,
.post-navigation .nav-next {
width: 100%;
text-align: right;
}

/*--------------------------------------------------------------
## formatting for 12 bar blues table
--------------------------------------------------------------*/

.twelvebar {
width: 100%;
    border-spacing: 10px;
    border-collapse: separate;
    font-size: 1.6rem;
}
.twelvebar td {
    width: 20vw;
    text-align: left;
    padding: 0.4em 1em;
    margin: 0.4em 0;
    border-left: 2px dotted grey;
    border-bottom: 1px dotted grey;
}
.root {
    color: lightblue;
}
.fourth {
    color: lightgreen;
}
.fifth {
    color: orange;
}
.variation {
    color: lavender;
    border: 1px dotted lavender;
    border-top: none;
}
.hasvar {
    border-bottom: none;
    border-right: 1px dotted grey;
}
.empty {
    border-left: none;
}
.description {
    border: none;
    font-size: 1rem;
    color: grey;
    width: 10vw;
}
.barnum {
    color: whitesmoke;
    background: darkslateblue;
}

.b1 {
  color: hsl(50 100% 50% / 1.0);
}
.b2 {
  color: hsl(30 90% 50% / 1.0);
}
.b3 {
  color: hsl(90 80% 50% / 1.0);
}
.b4 {
  color: hsl(330 100% 50% / 1.0);
}
.b5 {
  color: hsl(0 100% 50% / 1.0);
}
.b6 {
  color: hsl(220 70% 20% / 1.0);
}
.b7 {
  color: hsl(270 90% 30% / 1.0);
}
.diff {
  background: hsl(180 50% 30% / 1.0);
}