@charset "UTF-8";
/* main.CSS		*/
/*define CSS color variables */
:root {

--tonicColor: rgba(227, 231, 211, 1);
--superTonicColor: rgba(134, 135, 94, 1);
--mediantColor: rgba(189, 194, 191, 1);
--subDominantColor: rgba(95, 99, 88, 1);
--dominantColor: rgba(230, 228, 159, 1);
--submediantColor: rgba(152,156,148,1);
--leadingToneColor: rgba(182, 182, 127, 1);
--whiteColor: rgba(255, 255, 255, 1);
--blackColor: rgba(0, 0, 0, 1);
--textColor: rgba(37, 41, 28, 1);

}

.tonicColor{
	color: var(--tonicColor);
}
.superTonicColor{
	color: var(--superTonicColor);
}
.mediantColor{
	color: var(--mediantColor);
}
.subDominantColor{
	color: var(--subDominantColor);
}
.dominantColor{
	color: var(--dominantColor);
}
.submediantColor{
	color: var(--submediantColor);
}
.leadingToneColor{
	color: var(--leadingToneColor);
}

.whiteColor{
	color: var(--whiteColor);
}

.blackColor{
	color: var(--blackColor);
}

.textColor{
	color: var(--textColor);
}



.BG-tonicColor{
	background-color: var(--tonicColor);
}
.BG-superTonicColor{
	background-color: var(--superTonicColor);
}
.BG-mediantColor{
	background-color: var(--mediantColor);
}
.BG-subDominantColor{
	background-color: var(--subDominantColor);
}
.BG-dominantColor{
	background-color: var(--dominantColor);
}
.BG-submediantColor{
	background-color: var(--submediantColor);
}
.BG-leadingToneColor{
	background-color: var(--leadingToneColor);
}
.BG-textColor{
	background-color: var(--textColor);
}


html {
	height: 100%;
	}
	
body {
	display: flex;
	flex-direction: column; 
	height: 100%;
	color: var(--textColor);
}

footer {

background-color: var(--superTonicColor);

}

.main {

}

.maincontent {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 10px;
	margin-bottom: 10px;

}


/*	++++++++++++++++++++++++++++++++++++++	*/
/*			FONT CUSTOMS					*/
/*	++++++++++++++++++++++++++++++++++++++	*/

.smaller {
	font-size: 0.8em;
	}

.list-name {
	color: var(--textColor);
}
	.list-name:hover{
		color: var(--subDominantColor);
	}


/*	++++++++++++++++++++++++++++++++++++++	*/
/*			CUSTOM TABLES					*/
/*	++++++++++++++++++++++++++++++++++++++	*/
.transposition-table {
	border: 1px solid;
	border-color: var(--subDominantColor);
}



/*			end table customs				*/



/*	++++++++++++++++++++++++++++++++++++++	*/
/*			Bootstrap icons					*/
/*	++++++++++++++++++++++++++++++++++++++	*/

.iconButton {
	font-size: 1.4em;
	padding: 5px;
	border: 1px solid;
	border-color: var(--leadingToneColor);
	color: var(--superTonicColor);
}
	.iconButton:hover {
		color: var(--subDominantColor);
	}

















/*	++++++++++++++++++++++++++++++++++++++	*/
/*			PRINT CUSTOMS					*/
/*	++++++++++++++++++++++++++++++++++++++	*/

@media print {

	#mainLeftColumn,
	#utilityColumn,
	#footer	{
		display: none !important;
		}
		
	
		/*set up for specific pages */
		.page	{
		margin-bottom: 200px;
		width: 100% !important;
		page-break-before: always;

		}	

}