/*     index.css      */
/*********  scrollbar for brick background  *************************
::-webkit-scrollbar {
					appearance: none;
					-moz-appearance: none;		/* don't think this is helping */
					-webkit-appearance: none;	/* don't think this is helping */
					background-color:rgba(100, 100, 100, .9);
					width: 9px;
					border-radius:5px; 			
					}
::-webkit-scrollbar-thumb {
 					 background-color: rgba(666, 666, 666, .8);
 					 -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .9);
					 border-radius: 3px;
					}



.mainDiv 
	{	
	background-image: url("images2/MartinBrownBricksEditedW1472Q50.jpg");   /* Picture must match one in html */
/*	background-size:contain;  /*	*/
	background-size:cover;	  /*	*/
	background-repeat:no-repeat;
	color:#334
	;
	font-size:1.1em;
	font-weight:bold;
	border-radius:10px;
	padding-right:10px;

	display: grid; 
	grid-template-columns: minmax(0, 1.8fr)  minmax(0, 1fr);
	grid-template-row: minmax(0, 1fr);   
	grid-template-areas: 'leftMain  rightMain'	;
	

	font-family:'Maven Pro', sans-serif;	
	
	}
						


	.photo {grid-area: leftMain;
			display:none;
			}


	.rightMainDiv {grid-area: rightMain;
				justify-self:end;
				max-height:100%;  /* required to make overflow work */
				max-width:100%;
				overflow-y:auto;
				overflow-x:hidden;   /*  find out why this is necessary & clear it */
									/* seemed to work initially then stopped.  */
									/* appears rightMainDiv is automatically sized a little too small for audio controls  */
									/* solved problem by specifying a width for rightMainDiv but that's a cluge  */
									/*  don't know why statement ceased to function.  */  
/*				background-color:gray;  /* for debug */
			  }
			
		.rightMainDiv ul {	
					list-style-type: none;
					padding:2%;
					padding-top:0;	
					min-width:350px;  /* was 280px but long title for song wrapped to width instead of expanding size of ul!  Why??? */
/*					background-color:darkgreen;	/* for debug */
				  }
		/* .list is the class for the ul  */	  
		/*  Can I put .list items in above ul declaration?  Cannot put list-style-type in .list, so they are not identical	*/		
		.list {									
			margin:0;	
			}	

			.listTitle {
					margin-top:20px;
					margin-bottom:0;
					margin-left:0;
					font-size:1.7em;
					}
	
			.songTitle {
				margin-top:40px;
				margin-bottom:0;
				padding:0;	
				font-size:1.4em;
				font-weight: bold;	
		
				}			
			.song1st{
				margin-top:30px;
				margin-bottom:0;
				padding:0;
				font-size:1.4em;
				font-weight: bold;	
				}

		
/*********  scrollbar colors for brick background  *************************
::-webkit-scrollbar {
					appearance: none;
					-moz-appearance: none;		/* don't think this is helping */
					-webkit-appearance: none;	/* don't think this is helping */
					background-color:rgba(100, 100, 100, .9);
					width: 9px;
					border-radius:5px; 			
					}
::-webkit-scrollbar-thumb {
 					 background-color: rgba(666, 666, 666, .8);
 					 -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .9);
					 border-radius: 3px;
					}

		
/*   *********************  Responsive  Design ***************************** */
@media screen and (max-width: 800px)													
	{
	.mainDiv {
			grid-template-columns: minmax(0, 1fr);	/* new */
			grid-template-rows:minmax(0, 1fr)  minmax(0, 1fr);  /* new */
			grid-template-areas: 'leftMain'	
								 'rightMain';
			grid-gap:2vh;				
			background-image: none;
			justify-items:center;
			justify-content:center;
/*			color:#eef;     /* same color should work for both  */
			
/*			background-color:red;  /* for debug only */
			}

		.leftMainDiv {
				grid-area:leftMain;
/*				background-color:yellow;  /* for debug only */
			}
			
		.leftMainDiv img {border-radius: 10px;}
			
			.photo {display:block;
				max-height:100%;
				max-width:100%;
/*				min-height:100%;		/* new */
/*				margin:auto;	/* ww */
				}			
			
		.rightMainDiv {
	/*			width:60%;			/* ww */
				justify-self:center;
				overflow-y:initial;
				overflow-x:hidden;   
/*				background-color:green;  /* for debug only */

								}
			
				  
		.list {									
/*			position:relative;   /* makes Firefox work (footer at bottom & fits within the screen), 
									Safari gets much larger but footer is now at bottom, Chrome 
									still spills over footer. */
			max-height:100%;  /* required to make overflow work */
			overflow-y:auto;
			margin-left:auto;	
			margin-right:auto;	
/*			background-color:lightgreen;  /* for debug only */
			}	
		.list li {text-align: center;}
		
				.listTitle {
					margin-top:0px;
					margin-bottom:0;
					margin-left:0;
					font-size:1.5em;
					text-align:left;
					}
	
			.songTitle {
				margin-top:10px;
				margin-bottom:0;
				padding:0;			
				}			
			.song1st{
				margin-top:10px;
				margin-bottom:0;
				padding:0;
				}

	}  /*  end @media  */