First Line Sermon List strange bg/text combo

Have a look at the original player.css file. I've changed the rule there slightly so it works better with striped Bootstrap tables.
Best is to just copy the original file again to your template folder (into css/com_sermonspeaker), and then adjust the background color as needed.

The original files are in /media/com_sermonspeaker/css

KO> So now my player css is...

.ss-player {
margin-bottom: 10px;
}
.ss-player hr {
margin: 0;
}
#playing{
width:100%;
height:60px;
text-align:left;
}
#playing img{
height:100%;
display:none;
float:left;
}
#playing .text{
float:left;
}
#playing .title{
margin:5px 0 0 10px;
display:block;
font-size:15px;
font-weight:bold;
}
#playing .desc{
margin:5px 0 0 10px;
display:block;
font-size:10px;
line-height:1em;
}
#playing .duration{
margin:5px;
font-weight:bold;
font-size:10px;
float:right;
}
#playing .error{
margin-right:5px;
padding:3px;
line-height:10px;
font-weight:bold;
font-size:10px;
float:right;
clear:right;
display:none;
border:1px dotted red;
}
.pointer{
cursor:pointer;
}
.ss-current,
.table-striped tbody > tr.ss-current:nth-child(odd):not(:hover) > td,
.list-striped li.ss-current:nth-child(odd):not(:hover){
background-color:#000;
border-radius:4px;
overflow:auto;
}


But still no change...

Looks like your player.css isn't in the proper location then.
It should be in /templates/YourTemplateDirHere/css/com_sermonspeaker/player.css