/*************************************************************************************************/
/* (C) 2023 Iterum, LLC. All rights reserved. Iterum.llc.                                        */
/*-----------------------------------------------------------------------------------------------*/
/* This file contains css classes that are specific to the MusicCheats.com website.                */
/* See iterum.grid.*.css and iterum.core.css, too!                                               */
/* This has VERY similar classes to my other site-specific css files.                            */
/*************************************************************************************************/

/*************************************************************************************************/
/* Redefined Main CSS Selectors                                                                  */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
/* Remember to look at iterum.grid.*.css and iterum.core.css, too!                               */

body, html {
	width: 100%;
	margin: 0%;
	padding: 0%;
}

ol {
	margin-left: 20px;
}

ul {
	margin-left: 20px;
}

sup {
	/* This keeps the spacing between lines the same even if there is <sup> */
	line-height: 0;
	/* This causes the font size to change based on the height of the browser window. */
	font-size: 1.5dvh !important;
}

/*************************************************************************************************/
/* Redefined Standard Headings (I don't plan to use these).                                      */
/*************************************************************************************************/

h1, h2, h3, h4, h5, h6 {
	color: #333;
	font-weight: bold;
}
/*-----------------------------------------------------------------------------------------------*/
h1 {
	font-size: 24px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #1e54b6; /* Color of horizontal line below heading text. */

	margin-top: 8px; /* Limit space before the heading. */

	margin-bottom: 4pt; /* Don't space below the heading style. */
}

/*-----------------------------------------------------------------------------------------------*/
h2 {
	font-size: 21px;
	margin-top: 8pt; /* Limit space before the heading. */

	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #1e54b6; /* Color of horizontal line below heading text. */

	margin-bottom: 2pt; /* Limit space after the heading . */
}

/*-----------------------------------------------------------------------------------------------*/
h3 {
	font-size: 18px;
	margin-top: 8pt; /* Limit space before the heading. */

	margin-bottom: 2pt; /* Limit space after the heading . */
}

/*-----------------------------------------------------------------------------------------------*/
h4 {
	font-size: 15px;
	margin-top: 8pt; /* Limit space before the heading. */

	margin-bottom: 2pt; /* Limit space after the heading . */
}

/*************************************************************************************************/
/* Header class                                                                                  */
/*-----------------------------------------------------------------------------------------------*/
/* The Header contains the logo and menu bar. It changes based on its width.                     */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
header {
	height: 70px; /* Height of the toolbar. */
	max-width: 950px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #ccc; /* Color of the toolbar's background. */
}

	/*-------------------------------------------------------------------------------------------*/
	/* The logo on the left side of the header.                                                  */
	header .logo {
		float: left;
		margin-left: 0;
		padding-right: 5px;
		min-height: 70px;
		min-width: 126px;
	}

	header .headingTitle {
		color: #fbfbfb;
		/* You can tweak these values to find a size that will fit the heading as the browser window
		* changes size. The vw is the vertical units (in percent), vh is height, and vm is the minimum.
		*/
		font-size: calc(1.3vw + 1.3vh + 1.3vmin);
		vertical-align: bottom;
	}

/*************************************************************************************************/
/* Toolbar.                                                                                      */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
.toolbarStripe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 70px; /* Height of the toolbar. */
	background: #ccc; /* Color of the toolbar's background. */
}

/*-----------------------------------------------------------------------------------------------*/
.toolbarArea {
	display: table;
	max-height: 70px;
	z-index: 1;
}

/*-----------------------------------------------------------------------------------------------*/
.toolbarCell {
	display: table-cell;
	vertical-align: middle;
}

/*************************************************************************************************/
/* Footer. Contains the copyright and such. */
/*************************************************************************************************/

footer {
	padding: 4px 0;
	border-top: 1px #dedede solid;
	color: #222222; /* Text color used throughout website. */
	background: #f0f0f0;
	text-align: center;
}

	/*---------------------------------------------*/
	footer .copyright {
		margin: 0 !important;
		padding: 0;
		font-size: 8pt !important;
	}

/**************************************************************************************************
 * Redefined styles from the shared Iterum css files.
 *************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
.bulletsCustom li {
	list-style-position: inside;
	text-indent: -1em;
	padding-left: 1em;
	content: "■";
	/* content: "►"; I no longer use the arrow... */
	color: #666666;
	/* Move the bullet up some number of pixels. */
	top: -2px;
}

/* This is defined in the shared Iterum css file, but with a white background.*/
.outer_frame {
	background-color: white;
}

/**************************************************************************************************
 **************************************************************************************************
 * Helper classes for the MusicCheats.com website.
 **************************************************************************************************
 *************************************************************************************************/

.smallPrint {
	font-size: 0.7em;
	margin-top: 5px;
}

.redText {
	color: red;
}

.truncate-text {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/**************************************************************************************************
 **************************************************************************************************
 * Styles used on the song pages.
 *
 * Many of these use "dvh" (dynamic viewport height) rather than "vh" so the measurement is based
 * on the size of the page and is aware of the OS navigation bar that can appear at the bottom of Safari.
 **************************************************************************************************
 *************************************************************************************************/

/* This is the element that contains the index all of the song pages. */
.outermost-scroll-container {
	height: 100dvh;
	overflow-y: scroll;
	/* "mandatory" means the browser MUST snap to a snap point whenever the user stops scrolling. */
	scroll-snap-type: y mandatory;
}

.song-box-div {
	height: 100dvh;
	scroll-snap-align: start;
}

/* This is used for the index heading, too. */
.song-name-and-navigation-icons-container {
	position: relative;
}

.song-name {
	/* This makes it so the elements within this can use position: absolute and that'll align the to this element. */
	position: relative;
	top: 0;
	left: 0;
	/* The dvh is a percentage of the viewport's height (excluding the navigation bar that can appear at the bottom of Safari). The "pt" value in max() controls the MINIMUM size and the "pt" in the min() controls the maximum size. My goal is to make sure the fonts are big enough to read on a phone and iPad while trying to avoid them being too large on a desktop. Hum, strangely, this line is "struck out" when viewed in the browser debugger. */
	font-size: min(30pt, max(16pt, 5dvh));
	font-weight: bold;
	margin-top: 1dvh;
	margin-bottom: 0;
}

/* This contains the navigation icons to the right of the song's name. Don't confuse it with navigation-icon. */
.navigation-icons-container {
	position: absolute;
	top: 0.4dvh;
	/* This positions it to the right. */
	right: 0;
	/* This puts it on top of the song's name. */
	z-index: 100;
}

/* This is used by one navigation icon. Don't confuse it with navigation-icons-container. */
.navigation-icon {
	/* See the note about min() and max() font-size for song-name.. */
	font-size: min(16pt, max(14pt, 3dvh)); /* fuck: why a font size for the icon? */
	font-weight: normal !important;
	cursor: pointer;
	margin-left: 0;
	margin-right: 1vw;
	text-decoration: underline !important;
}

.index-artist {
	/* See the note about min() and max() font-size for song-name.. */
	font-size: min(24pt, max(12pt, 4dvh));
	margin-top: 0;
	margin-bottom: 0;
}

.band-name {
	/* See the note about min() and max() font-size for song-name.. */
	font-size: min(24pt, max(12pt, 4dvh));
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}

/* The comments and resource icons are in a song-box-inner-scrollable-div. If the contents of song-box-inner-scrollable-div would
 * overflow, a vertical scrollbar appears. This allows the page to snap to song-box-div and
 * allows the song-outer-dives to contain more than a page worth of text.
 */
.song-box-inner-scrollable-div {
	/* background: yellow; */
	overflow-y: auto;
	height: 88dvh;
}

.song-comments {
	display: block;
	/* See the note about min() and max() font-size for song-name.. */
	font-size: min(18pt, max(12pt, 4dvh));
}

	.song-comments p {
		margin-top: 0.9dvh;
	}

	.song-comments ol, .song-comments ul {
		/* This fixes the indentation of numbers/bullets in a list. It overrides other settings in this file (when not in a crib note). This is needed for narrow (i.e., phone) browsers. */

		margin-left: 10px !important;
		padding-left: 1em !important;
	}

.song-resource-heading {
	font-weight: bold;
	color: #333; /* Color of the heading bar and lots of text. */
	display: block;
	/* The first number (the top margin) in this controls the space between the horizontal line and the previous element. */
	margin: 5px 0 2px 0;
	/* The top padding controls the spacing between the resource heading and the horizontal line. */
	padding-top: 5px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #999; /* Color of horizontal line above heading text. */
}

.song-resource-icon {
	margin-right: 1vw;
}

/**************************************************************************************************
 **************************************************************************************************
 * Styles used on the song index page.
 **************************************************************************************************
 *************************************************************************************************/

.index-list-song {
	padding-left: 50px;
}

	.index-list-song li {
		/* The following controls the font size of the song names. */
		/* See the note about min() and max() font-size for song-name.. */
		font-size: min(18pt, max(12pt, 4dvh));
		/* The following controls the space between the artist name and the next song's name. */
		line-height: 0.75em !important;
	}

	.index-list-song .index-song-name {
		/* Font size controlled by li element. */
		margin: 0;
		padding: 0;
	}

	.index-list-song .index-artist {
		/* The following controls the font size of the artist names. */
		font-size: 0.6em;
		position: relative;
		/* The following controls the space between the song and artist names. */
		top: -0.2em;
		margin: 0;
		padding: 0;
		color: black;
	}

/**************************************************************************************************
 **************************************************************************************************
 * Category form classes.
 **************************************************************************************************
 *************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
.category-button {
	margin-bottom: 10px;
	margin-left: 10px;
	font-size: min(18pt, max(12pt, 1.5dvh));
}

/*-----------------------------------------------------------------------------------------------*/
.category-checkbox-div {
	background-color: #eee;
	border: 1px solid #555;
	margin: -11px 10px 10px 20px;
	padding: 6px 14px 6px 6px;
	display: inline-block;
}

/*-----------------------------------------------------------------------------------------------*/
.category-checkbox-label {
	font-size: min(18pt, max(12pt, 2dvh));
}

/*-----------------------------------------------------------------------------------------------*/
.search-input {
	color: silver; /* I toggle to blackText when it has the focus. */
	/* display: none; /* To prevent it appearing in the wrong place before we move it. */
	vertical-align: top;
	margin-left: 10px;
	margin-top: 0; /* Be sure to change the margin-top of search-input, search-clear-button and printButton together. */
	height: 16px;
	width: 160px; /* Don't make this too wide or the print button won't appear on portrait iOS. */
	border: 1px solid #ccc;
	font-size: 1.5dvh;
	outline: 0;
	padding: 4px 7px;
}

/*-----------------------------------------------------------------------------------------------*/
.search-clear-button {
	/* display: none; /* To prevent it appearing in the wrong place before we move it. */
	margin-left: -24px;
	margin-top: -7px; /* Be sure to change the margin-top of search-input, search-clear-button and printButton together. */
	outline: none;
}

.search-input-black-text {
	color: #222222;
}

/**************************************************************************************************
 **************************************************************************************************
 * Shared attributes of various classes.
 **************************************************************************************************
 *************************************************************************************************/
.song-name, .category-form, .index-list-song, .band-name, .song-categories, .song-comments, .resource-icons {
	text-align: left;
	margin-left: 10pt !important;
	margin-right: 10pt !important;
}

/**************************************************************************************************
 **************************************************************************************************
 * Classes used in the chord progression tables.
 *
	fuck: Does this function still exist?
 * See CreateProgressionTable() for an explanation of progression-table-container>.
 **************************************************************************************************
 *************************************************************************************************/

.progression-table-container {
	display: inline-block;
	/* Keeps the container inline */
	vertical-align: middle;
	/* Aligns vertically to the middle */
}

.progression-table {
	display: inline-table;
	vertical-align: middle;
	margin: 0 5px;
	border-collapse: collapse;
}

	.progression-table td {
		font-family: 'Courier New';
		border: 1px solid black;
		padding: 0 5px;
		/* "vertical-align: middle" doesn't seem to do much. Text without descenders is too high. */
		vertical-align: middle;
	}

/**************************************************************************************************
 **************************************************************************************************
 * Classes used in tabs.
 **************************************************************************************************
 *************************************************************************************************/

.mono, .tabs {
	/* This is supposed to work in Safari, but isn't for me. Maybe due to caching? */
	font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	/* This woks on Windows, but not iPad Safari: font-family: ui-monospace, Courier New, Courier, monospace; */
	font-size: small;
}

/**************************************************************************************************
/* Classes for time signatures.
/*************************************************************************************************/
.num {
	vertical-align: 0.5em;
	/* I tried to use this to draw a line below the numerator, but it was too low.
	border-bottom: 1px solid black;
	 */
}

.den {
	position: relative;
	margin-left: -0.6em;
	bottom: -0.2em;
}

.num, .den {
	font-size: 0.7em;
}