/* The side navigation menu */
.help-nav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 4; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 50px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.help-nav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: lightGrey;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.help-nav a:hover {
  color: #85bb65;
}

/* Position and style the close button (top right corner) */
.help-nav a:first-of-type {
  text-align:right;
}

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  background-color:Gainsboro;
  overflow-x: hidden;
  transition: 0.5s;
}

.side-nav a, .side-nav ul li a {
   text-decoration: none;
   font-size: 115%;
   color: #000;
   display: block;
   transition: 0.2s;
   line-height:50px;
}

.side-nav ul {
  padding:0;
  margin-top:50px;
  list-style-type:none;
}

.side-nav ul li {
  height:50px;
  padding-left:10px;
  margin:5px 0;
}

.side-nav ul li:hover {
  background-color:#85bb65;
}

.side-nav ul li a img {
  display:inline-block;
  height:50px;
  width:auto;
  padding-right:10px;
}

.side-nav .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  padding:0 16px;
}

.player {
  margin:0 auto;
  width:100%;
  max-width:720px;
}

.player > section {
  position:relative;
  width: 360px;
  float:left;
  background-color:inherit;
}

.logo {
  aspect-ratio:1/1;
  width:inherit;
  overflow:scroll;
}

.logo img {
  width: 100%;
}

.bar {
  width:inherit;
  height:50px;
  line-height:50px;
}

.bar a:hover {
  text-decoration:none;
}

.bar * {
  height:50px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:0;
  margin:0;
  background-color:transparent;
}

.bar input, .bar select {
  cursor:pointer;
}

.bar input[type=text]{
  background-color:whitesmoke;
  text-indent:5px;
  font-size:15px;
}

.billboard {
  width:100%;
  height:60px;
  overflow:hidden;
  background-color:gold;
}

.lyricpane {
  display:none;
  box-shadow: 0 0 4px DarkGrey inset;
}

.mono {
  font-family:monospace;
}

#playerMenu{
  margin-top:50px;
}

#billboard img {
  height: auto;
  width: 100%;
}

#cur_track, #cur_band {
  font-variant:normal;
  display:block;
  text-align:center;
  cursor:pointer;
}

#cur_track, #cur_band {
  
}

#audio_controls > button, #audio_controls > input {
  border:none;
  outline:none;
  display:block;
  float:left;
  width:60px;
  height:inherit;
  padding:0 5px;
}

#audio_controls >button:hover, #audio_controls >input:hover, .search-btn:hover {
  background-color:whitesmoke;
}

button#playpausebtn {
  background:transparent url(/icon/pause.png) no-repeat center/contain;
}

button#skipbtn {
  background:transparent url(/icon/skip.png) no-repeat center/contain;
}

button#thumbsup {
  background:transparent url(/icon/thmup.png) no-repeat center/contain;
}

button#thumbsdn {
  background:transparent url(/icon/thmdn.png) no-repeat center/contain;
}

#search-results {
  width: 100%;
  color: initial;
  background-color: whitesmoke;
  font-size:1em;
}

#search-results td {
  width:inherit;
  padding: 5px;
  border-right:1px solid gray;
}

#search-results tr {
  border-bottom:1px dashed silver;
}

#search-results td {
  text-align:center;
}

#search-results td:first-of-type {
  text-align:left;
}

#search-results img {
  height:30px;
  width:auto;
}

input[type=checkbox] {
  width:auto;
  vertical-align:middle;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* ORIENTATION STYLES */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .help-nav {padding-top: 15px;}
  .help-nav a {font-size: 18px;}
} 

/* GENERIC */
@media screen and (max-height: 480px) {
  .side-nav {padding-top: 15px;}
  .side-nav a {font-size: 18px;}
}

/* LANDSCAPE */
@media screen and (orientation:portrait) and (min-width: 270px) and (max-width:540px) {}