@import url("fonts.css");

:root {
  --thsone-main-color: #3e606f; /*var(--thsone-main-color);*/
  --thsone-sec-color: #91aa9d; /*var(--thsone-sec-color);*/
  --thsone-main-grayscale: #5a5a5a; /*var(--thsone-main-grayscale);*/
  --thsone-sec-grayscale: #a4a4a4; /*var(--thsone-sec-grayscale);*/
  
  --thstwo-main-color: #3e606f; /*var(--thstwo-main-color);*/
  --thstwo-sec-color: #d1dbbd; /*var(--thstwo-sec-color);*/
  --thstwo-main-grayscale: #5a5a5a; /*var(--thstwo-main-grayscale);*/
  --thstwo-sec-grayscale: #a4a4a4; /*var(--thstwo-sec-grayscale);*/
  
  --thsthr-main-color: #3e606f; /*var(--thsthr-main-color);*/
  --thsthr-sec-color: #91aa9d; /*var(--thsthr-sec-color);*/
  --thsthr-main-grayscale: #5a5a5a; /*var(--thsthr-main-grayscale);*/
  --thsthr-sec-grayscale: #a4a4a4; /*var(--thsthr-sec-grayscale);*/
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"]
{
	font-family: 'IM Fell DW Pica', Georgia, Times, 'Times New Roman', serif;
}


.sc, nav abbr, main abbr, .welcome abbr, .importantNote abbr
{
	font-variant: small-caps;
	/*font-family: 'IM Fell DW Pica SC', serif;*/
	text-transform: lowercase;
}

.welcome
{
	background: #333;
}

.importantNote
{
	background-color: #633 !important;
}

.importantNote h3
{
	font-weight: normal;
	text-align: center;
}


.welcome
{
	margin-bottom: 2em;
}

.importantNote
{
	margin-top: 2em;
}

header, footer.pure-g [class *= "pure-u"]
{
	font-family: 'Overpass Mono', Consolas, 'Courier New', sans-serif !important;
}

header
{
	padding: 1.5em 0 1.7em 0;
	text-align: center;
}

html
{
	background-color: #000;
	color: #fcfff5;
	overflow-y: scroll;
}

header h1
{
	font-size: 100%;
	font-weight: 700;
	line-height: 1.7em;
}

header h1 span
{
	font-weight: 400;
}

h2 sup
{
	font-style: italic;
}

header p
{
	font-size: 80%;
}

/*header a, footer a, main a*/
.t-box a, header a
{
	color: inherit;
	border-bottom: 1px dotted #fcfff5;
	text-decoration: none;
}

/*header a:hover, footer a:hover, main a:hover*/
.t-box a:hover, header a:hover
{
	border-bottom: 1px solid #fcfff5;
}

abbr, abbr[title]
{
	border-bottom: none;
	text-decoration: none;
}

abbr[title]
{
	cursor: help;
}

main h2, main h3
{
	font-weight: normal;
	text-align: center;
}

main h2
{
	font-size: 170%;
}

nav ol
{
	list-style: none;
	padding: 0;
	margin: 0;
}

nav ol li
{
	padding: 0;
	margin: 0;
}

nav ol li a.navTo, nav div.nonLink
{
	color: inherit;
	display: block;
	text-align: center;
	padding: 1.7em 0;
	width: 100%;
	text-decoration: none;
}

nav ol li a
{
	color: inherit;
}

nav ol li a:hover
{
	color: #fcfff5;
	/*cursor: grab;*/
}

nav ol li a:active
{
	/*cursor: grabbing;*/
}

form
{
	margin-top: 0.5em;
}

.paypal_button
{
	/*border-radius: 0.3em;*/
	display: inline-block;
	font-family: inherit;
	/*font-size: 14px;*/
	/*color: #fff;*/
	text-align: center;
	text-transform: uppercase;
	padding: 0.25em 0.5em;
	letter-spacing: 0.1em;
	margin: 0;
	/*background: #ff6600;*/
	border: 1px solid #fcfff5;
	cursor: pointer;
	outline: none;
}

.paypal_button
{
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
}

.paypal_button:hover
{
  background-color: var(--thstwo-sec-color);
  color: var(--thsone-main-color);
}

.neutral
{
	background-color: #333;
	color: #fcfff5;
}

.thsone
{
	background-color: var(--thsone-sec-color);
	color: var(--thsone-main-color);
}

.thsoneInvert
{
	background-color: var(--thsone-main-color);
	color: var(--thsone-sec-color);
}


.thsoneGS
{
	background-color: var(--thsone-sec-grayscale);
	color: var(--thsone-main-grayscale);
}


.thstwo
{
	background-color: var(--thstwo-sec-color);
	color: var(--thsone-main-color);
}

.thstwoGS
{
	background-color: #d7d7d7;
	color: #646464;
}

.thsthr
{
	background-color: var(--thsone-main-color);
	color: var(--thstwo-sec-color);
}

.thsthrGS
{
	background-color: var(--thsone-main-grayscale);
	color: #d7d7d7;
}

.thsiv
{
	background-color: #6f3e60;
	color: #bdd1db;
}

.t-box
{
	padding: 1em 1.25em 1.25em 1.25em;
}

/*.img-box
{
	overflow: hidden;
	position: relative;
	height: 250px;
}*/


.img-responsive
{
	max-width: 95%;
	height: auto;
}

.thumbnail
{
	border-radius: 50%;
	height: 7.5em;
}

.thumbnail-area
{
	margin-bottom: 1.5em;
}

footer
{
	font-size: 75%;
	line-height: 1.6em;
}

footer h3
{
	text-align: center;
}

footer h3:before
{
	content: "\2192\A0";
}

footer p
{
	display: inline;
}

footer p + p:before
{
	content: "¶ ";
}

.est {
  -webkit-transition-duration: 1.4s; /* Safari */
  transition-duration: 1.4s;
  color: #111;
  cursor: none;
  font-size: 120%; 
}

.est:hover {
  color: #ffffff;
}

.tableWrapper
{
	/*overflow-x:auto;
	margin-top: 1em;*/
}

table.stats
{
    border-collapse: collapse;
    margin: 0.5em auto;
}

table.stats th
{
    border-bottom: 1px solid #fcfff5;/*var(--thsone-main-color);*/
	font-weight: normal;
}
table.stats th
{
    padding: 0.4em 0.6em 0.3em 0.6em;
}

table.stats td
{
    padding: 0.3em 0.6em 0.6em 0.6em;
	text-align: center;
}

.releaseHeader
{
	padding: 2.5em 1.5em 0 1.5em;
}

.artistInfo
{
	background-color:#111;
}	
 

.artistInfo ul
{
	list-style-type: none;
	list-style-position: inside;
	padding: 0;
	
}

.artistInfo ul li:before
{
	content: "\2013\202f\A0";
}

.notesOnMusic ol
{
	counter-reset: my-counter;
	list-style: none;
	padding-left: 0;
}

.notesOnMusic ol li:before
{
	content: counter(my-counter, decimal)".\202f"; /*\2013   \B7*/
	counter-increment: my-counter;
}

/*https://css-tricks.com/numbering-in-style/*/

.notesOnMusic ol li
{
	display: inline;
	/**display: inline;
	zoom: 1;*/
	margin-right: 0.5em;
}

.portrait
{
	float: left;
	padding: 0 1em .5em 0;
	width: 40%;
}

/* Tooltip container */
.tooltip
{
  position: relative;
  display: inline-block;
  color: #333;
  cursor: help;
  border-bottom: 1px dotted black; /*If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext
{
  visibility: hidden;
  /*width: 17em;*/
  background-color: #ddd;
  color: #000;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 7;
}

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext
{
  visibility: visible;
}