/* *** Listen.css  *** */

/* CSS Martin.css  run before this */

.container 
	{
	max-height:none;
	min-height:100vh;
	}
	

.mainDiv
	{	
		display: grid;
		grid-template-columns: 400px 400px;
		grid-template-rows: 1fr;
		grid-template-areas: 'c1   c2';	
		justify-content:space-evenly;
		justify-items:center;				 						
		align-content:start;
		align-items:start;
		overflow-y:auto;		/*	needed for Firefox.  scrolls view above footer  */
		background-repeat: no-repeat;
/*		background-image:url("images2/black cloth.png");  /*	*/
/*		background-image:url("images2/dark gray canvas 444.png");	/*	*/
/*		background-image:url("images2/dark gray weave.png");	/*	*/
/*		background-image:url("images2/background-black-blank-1028664.jpg");
/*		background-image:url("images2/close-up-concrete-dark-908286.jpg");
/*		background-image:url("images2/dark gray cloth.png");	/*	*/
/*		background-image:url("images2/shiny black cloth.png");  /*	*/
/*		background-image:url("images2/ICH Noise 3.png");  /*	*/
/*		background-image:url("images2/ICH Noise 2.png");  /*	*/
/*		background-image:linear-gradient(to bottom left, #111, gray); 	 /*	*/
/*		background-color: #333;		 /*	*/
		background-size:cover;   	/*	*/
		background-image:url("images2/ConductorsMusicOpaqueReduced.jpeg");  /*	*/
/*		background-image:url("images2/pianoKeys.jpg");  /*	*/
		
		color:#334;
		font-weight: bold;
		border-radius:10px;
		}
/*
.blur {
	height:100%;
		width:100%;
		background-color:  rgba(000 255 255 .4);
	
		}
*/
.mainDiv div 
	{
		position:relative;
		max-height:100%;  /* required to make overflow work */
		height:100%;
	}

.mainDiv div ul
	{
		list-style-type:none;
		position:relative;
/*		max-height:100%;  /* required to make overflow work */
/*		height:100%;		/*seems not to fix problem*/
/*		overflow-y:auto;
		overflow-x:hidden;
*/		margin:0;
		padding:10px 0px 0px 20px;
/*		background-color:magenta; 		/* for debug only  */

	}
	


.c1 {
		grid-area: c1;
	
	}
.c2 {
		grid-area:c2;

	}

.listTitle {
			margin-top:20px;
			margin-bottom:0;
			font-size: 2em;
			}
			


.songTitle {
			margin-top:25px;
			margin-bottom:0;
			padding:0 0 0 10px;	
			font-size:1.5em;
			font-weight: bold;	
			}	
			
.song1st{
			margin-top:50px;
			margin-bottom:0;
			padding:0 0 0 10px;	
			font-size:1.4em;
			font-weight: bold;	
		}

.audio {
			padding:0 0 0 10px;	
		}					



/*   *********************  Responsive  Design ***************************** */
@media screen and (max-width: 800px)													
	{
	.mainDiv
		{	
		display: grid;
		grid-template-columns: 420px ;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: 'c1'
			   				 'c2';	
		overflow:auto;		/*	needed for Firefox.  scrolls view above footer  */
		}
		

.listTitle {
			margin-top:20px;
			margin-bottom:0;
			font-size: 1.1em;
			}
			


.songTitle {
			margin-top:10px;
			margin-bottom:0;
			padding:0 0 0 10px;	
			font-size:1em;	
			}	
					
	}