/* source: k11-CSS-02b.css */
@import url(https://fonts.googleapis.com/css2?family=Special+Elite");

/*=========== Play/Pause Button ===========*/
/*#audioControl01 img {
	width: 8.2em;
	height: 8.2em;
	cursor: pointer;
}*/

/*#audioControl02 img {
	width: 8.2em;
	height: 8.2em;
	cursor: pointer;
}*/
/*#audioControl03 img {
	width: 8.2em;
	height: 8.2em;
	cursor: pointer;
}*/

/*this class replaces above in this section*/
.ppbtn > img{
	width: 8.5em;
	height: 8.5em;
	cursor: pointer;
}
/*=========== Initialize Play/Pause Button ===========*/

/* #pause01 {	display: none;	}
#pause02 {	display: none;	}
#pause03 {	display: none;	}
#pause04 {	display: none;	}
#pause05 {	display: none;	}
#pause06 {	display: none;	}
#pause07 {	display: none;	}
#pause08 {	display: none;	}
#pause09 {	display: none;	}
#pause10 {	display: none;	}*/

.pauseinit { display: none; }   /*replaces #pause01-10*/


/*=========== Container for Play/Pause Button  with background image===========*/

.ppbkgd {
	background-image: url("../img/pirat-5bar-gray.svg"), url("../img/pale-yellow-175.png");     		/* will stack 2 images in reverse order == A on top of B */
	width: 150px;
	height: 150px;
	background-size: 150px 150px;
	background-repeat: no-repeat;
	background-position: center;
}


/*=========================================================================
========================End Play/Pause Button column=======================
=========================================================================*/



/*============== v column2 v ===================*/
/*============== v Background Color for Song Titles v ===================*/
.grfx { width: 340px; height: 150px; }
	/*width: 40%;*/

.g01 { background-color: LemonChiffon;}
.g02 { background-color: PaleVioletRed;}
.g03 { background-color: Orange;}
.g04 { background-color: Moccasin;}
.g05 { background-color: orangered;}
.g06 { background-color: gold;}
.g07 { background-color: plum;}
.g08 { background-color: YellowGreen;}
.g09 { background-color: LightSteelBlue;}
.g10 { background-color: BurlyWood;}

.cperu { background-color: peru; }    
.cRed { background-color: red; } 
.clime { background-color: lime;}
.cpurple { background-color: purple;}
.ctan { background-color: tan; } 

/*.col2 >  span img{ height: 90%; width: auto; }         an attempt prior to .titles v*/

.col3 { background-color: peru; }

/*stabilizes and formats title SVG graphic  (text to svgPath)*/
.fitpic {	
	height: auto;
	width: 90%;
	max-width: 90%;
	min-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.titles {
	font-family: 'Special Elite', serif;
	font-size: 2.2em;
	font-weight: bold;
}
.titles > img{
	height: 90%;
	width: auto;
	max-width: 90%;
	min-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/*.name_123_test > span img {
   Styles goes here
}*/
/*============End column 2 ==========*/




/*============column 3 ==========*/
.seeVid {
	width: 40px;
	height: 70px;
	background-color: yellow;
	border: dotted blue 4px;
}

.emoji {
	width: 70px;
	height: 70px;
	background-image: url("../img/pirat-5bar-gray.svg");
	background-size: 70px 70px;
	background-repeat: no-repeat;
	background-position: center;
	margin:auto;
}
.buyit  {
	width: 70px;
	height: 70px;
	background-image: url("../img/buy-this-song_01a.svg");
	background-size: 70px 70px;
	background-repeat: no-repeat;
	background-position: center;
	margin:auto;
}
.buycont {
            width:100%; height: auto; 
            border:1px dashed black;
}

.buycont svg {
	width: 100%;
	height: auto;
}

/*============around the edges ==========*/
div.sticky {
	position: -webkit-sticky;
	 position: sticky; 
/* position: fixed; */
	bottom: 0;
	background-color: gray;
	border: 2px solid yellow;
	padding: 0px;					/* all sides */
	font-size: 16px;
	border-radius: 6px;
	width: 50%;
	margin: auto;
	text-align: center;
}


/*-------------  centering -------------  */
.centerhz1 {
	text-align: center;
	/*margin:auto;*/
}
.centerhz2 {
	display: flex;
	justify-content: center;
}
.marg {margin:auto;}

/*========================   v   Formatting   v   ========================*/

a {display:inline-block;}
/*p  {display:inline-block;}*/     /*diag*/
.blok	{display:inline-block;}
.pad10	{padding: 10px;}
.rnd	{border-radius: 10px;}
.outln	{border: green 1px solid;}

/*	vertical-align: middle;*/
/*	see:  https://www.w3schools.com/cssref/pr_pos_vertical-align.php	*/
/*	vertical-align:   is not necessairly what I think it is...	*/


/*========================   v   Diags   v   ========================*/

/*img {
	border: teal solid 1px;
	padding: 0;
	margin: 0;
}*/



/*========================   v   NEW GRID   v   ========================*/
/*========================   v   NEW GRID   v   ========================*/
/*========================   v   NEW GRID   v   ========================*/

.grid-container {
	display: grid;
	/*grid-template-columns: repeat(3, 1fr);		orig*/
	grid-template-columns: 150px 1fr 80px;
	grid-template-rows: repeat(3, 150px);
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}

/*tests
.grid-container div{
	border: 1px dashed blue;
}

.grid-container nth-child(1){
	border: 2px dashed orange;
}
.grid-container nth-child(4){
	border: 2px dashed green;
}
*/

/*========================================================================
=============================End of file==================================
=========================================================================*/