* { box-sizing: border-box; }
body { font-size: 14px; font-weight: normal; font-family:Tahoma, Geneva, sans-serif; color: #ffffff; background-color: #000000; border-color: solid 1px #ffffff; margin: 0; padding: 0; }
ol { max-width: 500px; margin: 0; padding: 0; list-style-position: inside; font-size: 1em; color: #cccccc; }
ol li { position: relative; margin: 0px; border: solid; border-width: 1px 1px 0 1px; border-color: #666666; }
li { padding: 4px 2px 2px 2px; height: 50px; overflow: hidden; color: #cccccc; font-size: 1em; border-width: 0 0 1px 0; cursor: pointer; }
input[name="tLineIn"] { -webkit-appearance: none; -moz-appearance: none; }
input[name="tLineIn"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #6666ff; opacity: 1; width: 11px; height: 12px; border-radius: 2px; }

input[name="tLineIn"]::-moz-range-track { -moz-appearance: none; height: 12px; background-color: #cccccc;}
input[name="tLineIn"]::-moz-range-thumb { background-color: #000000; opacity: 1; width: 11px; height: 13px; border-radius: 2px; }

input[name="volume"] { -webkit-appearance: none; }
input[name="volume"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #000000; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }
input[name="volume"]::-moz-range-thumb { -moz-appearance: none; background-color: #000000; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }

#audio { display: none; }
#playerContainer { overflow: hidden; width: 100%; margin: 3px 0 0 0; height: auto; }
#playerPanel { 
  max-width: 500px; height: auto; overflow: auto; margin: 0 auto; color: #000000; 
  border-style: solid; border-width: 1px; border-color: #999999 #333333 #333333 #999999; 
  border-radius: 7px 7px 0 0; 
  background: linear-gradient(to bottom right, #778888,  #777777)
} 
#trackDetailsContainer { width: 97%; margin: 3px auto 0 auto; padding: 3px; overflow: auto; color: #ffffff; }
#trackDetailsTitle{ float: left; font-size: 1.1em; font-weight: bold; padding: 0px; margin: 0px; }
#trackDetailsSmall{ float: right; font-size: 1em; padding: 0px; margin: 0 0 0 4px; }
#pButton { clear: both; float: left; margin: 10px 2% 12px 2%; width: 35px; padding: 10px; border: solid 1px #666666; border-radius: 7px;  background-color: #ddddee; }
#pButton:hover { background-color: #ccccff; }
.playTiny { width: 14px; height: 14px; margin: 0; border-right: none; border-top: solid 7px transparent; border-left: solid 14px #666666; border-bottom: solid 7px transparent; }
.pauseTiny { width: 10px; height: 12px; margin: 1px 0 1px 1px; border-top: none; border-bottom: none; border-left: solid 4px #666666; border-right: solid 4px #666666; }
#tLineContainer { display: flex; width: 99%; max-width: 490px; margin: 0 auto; height: auto; overflow: hidden; }
#tLine { cursor: pointer; width: 69%; height: 12px; margin: 21px 0 0 0; background-color: #cccccc; }
#tLine:focus { outline: none; }
#cTime { margin: 21px 0 0 5px; overflow: none; color: #ffffff; font-style: italic; font-size: .9em; overflow: auto; }
#volumeContainer { display: flex; width: 90%; max-width: 225px; margin: 15px 0 0 3%; height: auto; }
#volume { height: 2px; width: 90%; margin: 10px 0 0 6px; float: left; background-color: #aaaaaa; }
#volume:focus { outline: none; }
#volumeIcon { float: left; width: 22px; height: 22px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; outline:none; }
#volumeDisplay { float: left; margin: 5px 0 0 2px; padding: 0; font-size: .8em; text-align: right; width: auto; }
.speakerOn{background: url('../img/speakerOn.png'); }
.speakerOff{background: url('../img/speakerOff.png'); }

#playlistContainer { max-width: 500px; margin: 0 auto; }
#menu { width: 100%; height: auto; margin: 0 auto; padding: 0; overflow: auto; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #666666; }
.menuDivOn, .menuDivOff { float: left; width: 33.33%; height: 30px; font-size: 1em; text-align: center; padding: 4px 0 2px 0; margin: 0; }
.menuDivOn { background-color: #ccccdd;  color: #333399;} 
.menuDivOff { color: #ffffff; background: linear-gradient(to bottom right, #778888, #777777); }
.menuDivOff:hover { cursor: pointer; color: #000000; background: linear-gradient(to bottom right, #ddddee, #aaaaaa); }

.listItemOn, .listItemOff { position: relative; max-width: 500px; height: 50px; margin: 0; padding: 4px; font-size: 1em; border-style: solid; border-color: #555555; border-width: 0 2px 1px 2px; overflow: hidden; cursor: pointer; }
.listItemOn { background-color: #ccccdd; }
.listItemOff { color: #000000; background-color: #bbbbbb; }
.listItemOffHover { position: relative; max-width: 500px; height: 50px; margin: 0; padding: 4px; font-size: 1em; border-style: solid; border-color: #333333; border-width: 0 2px 1px 2px; overflow: hidden; cursor: pointer; color: #333333; 
 background: linear-gradient(to bottom right, #ddddee, #aaaaaa); }

.infoTitleOff, .infoTitleOn { display: inline; font-size: 1em; width: 50%; }
.infoTitleOff { color: #000000; }
.infoTitleOffMouseover { display: inline; font-size: 1em; width: 50%; color: #333333; }
.infoTitleOn { color: #000099; }
.infoTextOff, .infoTextOn { display: block; float: right; width: 45%; height: 20px; font-size: .9em; }
.infoTextOff { color: #bbbbbb; }
.infoTextOffMouseover { display: block; float: right; width: 45%; height: 20px; font-size: .9em; color: #333333; }
.infoTextOn { color: #000099; }