#aWrap {
  font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;
  font-weight: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 700px;
  padding: 10px;
  background: #000;
}
.playerPic {
  width: 250px;
  margin: 0px 30px 0px 11px;
  display: none;
  border: 1px solid #1a1a1a;
}
.playerPicBig {
    margin: 18px 0 10px 10px;
    align-self: start;
    border: 1px solid #1a1a1a;
}
.playButton {
  padding-left: 5px;
  padding-bottom: 10px;
  margin: 0;
  background: 0;
  border: 0;
  cursor: pointer;
}
.cronDisplay {
  font-size: 12px;
  color: #fff;
  margin: 0 10px;
}
.cronDisplay span {
  display:inline;
}
#aWrap input[type="range"] {
  box-sizing: border-box;
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 514px;
  padding: 0;
  margin: 0;
  background: 0;
}
#aWrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
}
#aWrap input[type=range]::-webkit-slider-runnable-track {
  background: #1a1a1a;
}
#aWrap input[type=range]::-moz-range-track {
  background: #1a1a1a;
}
#aWrap input[type=range]::-webkit-slider-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}
#aWrap input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}
.listDisplay {
  width: 25%;
  padding-left: 10px;
  margin: 10px;
  color: #a1a1a1;
  align-self: start;
}
.aRow {
  cursor: pointer;
  padding: 8px 0;
  line-height: 16px;
  font-size: 14px;
}
.aRow.now {
  color: #fff;
  font-weight: bold;
}

@media only screen and (max-width: 710px)  {
    #aWrap {
        width: 500px;
    }
    #aWrap input[type="range"] {
        width: 312px;
    } 
    .playerPicBig {
      width: 300px;
    } 
    .listDisplay {
      width: 25%;
    }           
}
@media only screen and (max-width: 510px)  {
    #aWrap {
        width: 300px;
    }
    #aWrap input[type="range"] {
        width: 116px;
    }  
    #aWrap img.playerPic {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 258px;
    }
    .listDisplay {
      width: 100%;
      padding: 0;
    } 
    .playerPicBig {
      display: none;
    }                              
    .playerPic {
      display: block;
    }      
    .playButton {
      padding-left: 5px;
    }
}
@media only screen and (max-width: 310px)  {
    #aWrap {
        width: 200px;
    }
    #aWrap input[type="range"] {
        width: 180px;
    }
    .playButton {
        padding: 0 0 10px 56px;
    } 
    .cronDisplay {
        padding-left: 40px;
    }
    #aWrap img.playerPic {
        margin: 0px 0px 10px 0px;
        width: 180px;
    }
    .listDisplay {
      width: 100%;
      padding: 0;
    }                   
    .playerPicBig {
      display: none;
    }      
    .playerPic {
      display: block;
    }      
}