#folderList a,
#folderList div {
  padding-top: 3px;
}
#debug {
  padding: 0.5em;
  border: thin inset;
  font: small monospace;
  color: black;
}
.audio, .video, .image, .unknown, .server, .folder, #folderlist a {
  display: block;
  padding-top: 3px;
  padding-left: 20px;
  height: 5rem;
  line-height: 5rem;
  width: auto;
  border-bottom: 0.1rem solid #E6E6E3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
li.folder {
  color: #FF9900;
  padding-left: 40px;
  background: url(images/folder_closed.png) left center no-repeat,
              url(images/icon_folder.png) left 16px center no-repeat;
}
li.folder.opened {
  background: url(images/folder_opened.png) left center no-repeat,
              url(images/icon_folder.png) left 16px center no-repeat;
}
.audio {
  color: #00CC66;
  background: url(images/icon_music.png) left center no-repeat;
}
.video {
  color: #00CC66;
  background: url(images/icon_video.png) left center no-repeat;
}
.image {
  color: #00CC66;
  background: url(images/icon_image.png) left center no-repeat;
}
.unknown {
  color: #00CC66;
  background: url(images/icon_unknown.png) left center no-repeat;
}
.server {
  background: url(images/icon_server.png) left center no-repeat;
  font-weight: bold;
}
.player {
  position: absolute;
  bottom: 4rem;
  left: 0;
  right: 0;
  height: calc(100% - 9rem);
  width: 100%;
}

li:hover {
  color: #003399;
}
li:visited {
  color: #999999;
}
.hide {
  display: none;
}
.needRefresh {
  cursor: pointer;
  padding-left: 40px;
  color: #00CC66;
}

#discoverButton {
  background: url(images/search-icon.png) center center / 30px no-repeat;
}
#toPlayerPage {
  background: url(images/player.png) center center / 30px no-repeat;
}
#toDirectoryPage {
  background: url(images/playlist.png) center center / 16px no-repeat;
}