/* styles needed for my MyAudioPlayer and other music support elements */


.aPlayer_wrapper {
  display: none;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  max-width: 250px;
  /*height:25px;*/
  padding: 0;
   }

.aPlayer {
  display: table;		/* until proven usable, then 'table' */
  width: 100%;			/* use  aPlayer_wrapper for constraint */
  height: 100%;
  /*overflow: hidden;*/
  margin: 0 auto;
  padding: 0;
  border: solid;
  background-color: rgba(5, 173, 13, 0.49);
  border: 1px solid black;
  
}

.aaPlayerCtrlLeftSide { 
  display:table-cell; 
  width:15%; 
  } 
 
.aPlayer_pButton {
  width: 100%; 
  height: auto;
  margin-top: 10%;
  margin-bottom: auto;
  margin-left:8%;
  cursor:pointer;	
}

.aPlayerCtrlRightSide { 
  display:table-cell; 
  margin: 0 auto;
  height:100%; 
  width:85%; 

  vertical-align:middle;
  }

/*  containers for both time and volume */
/* Streamlined White on Black Horizontal Slider CSS */
/* original at https://www.seabreezecomputers.com/slider/ */
.slider_bar  /* container, and  outer bounds of touch area */
{
	width: 80%; 
	height: 50%; /* Keep high for easier mouse and finger touch */	
	/*border: 1px solid black; remove after confirming box model */
	/* position: relative;   NO!!!*/
	cursor:pointer;	
	/*background-color: #dddddd;*/
	/*display: inline-block; */
	vertical-align: middle;
	position:relative;	/* ?? */
	left:10%;
	
}

/*
#slider_bar1 {top:0%;}
#slider_bar2 {top:-5%;}
*/


.slider_buffer  /* put my slide image in this */
{
	width:100%; 
	height:50%; /* change height of slider buffer for streamlined look */
	top: 23%; /* change top of slider buffer to be in middle */
	/*background-color:white;*/
	left:0%;
	position:absolute;	
}
.slider_control  /* the filler stripe that follows the thumb/knob progress */
{
	width:0%;	/* arb start point for background fill **/
	height:15%; /* change height of slider control for streamlined look */
	top: 40%; /* change top of slider control to be in middle */
	background-color:yellow;
	left:2%;  /* offset stripe if necessary. */
	position:absolute;	
	
}
.slider_knob
{
	width: auto;
	height:70%; /* change height of slider knob for streamlined look */
	top: 15%; /* change top of slider knob to be in middle */
	cursor:col-resize;
	/*   // decided to just use a GIF
	border-radius: 25px; 
	box-shadow: 1px 1px 2px #555555;  
	background-color:green;
	border: 1px solid black;
	*/
	left:0%;  /* arb start point for knob */
	position:absolute;
}