body {
  /* Location of the image */
  background-image: url(jukeimage.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: top center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #ffffff;
}


/* Desktop */
.container { position:relative; margin:0 auto; width:800px; margin-top: -27px }
.column { width:inherit; }
/* Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:696px; }
}
/* Mobile (Portrait) */
@media only screen and (max-width: 767px) {
.container { width:440px; }
}
/* Mobile (Landscape) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:460px; }
}
/* Leave room for menu buttons */
@media only screen and (max-width:538px){
.container { margin-top:10px; }
}
/* CSS Reset */
html,body,div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
body { line-height:1; }
ul { list-style:none; }
/* Basic Styles */
html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
font:14px Arial, Helvetica, sans-serif;
padding:5px 0;
}
a {
text-decoration:none;
}
input, select {
padding: 5px;
margin-top: -5px;
}
input[type="radio"], input[type="checkbox"] {
margin-top: 2px;
}
/* MLP Styles */
#albumart {
text-align: center;
}
.audioElement {
float:left;
margin-bottom: 5px;
}
#breadcrumb {
padding: 21px;
list-style: none;
}
#breadcrumb > li {
display: inline-block;
}
#breadcrumb > li + li::before {
padding: 0 5px;
content: "/\00a0";
}
#breadcrumb .icon {
width: 12px;
height: 12px;
}
.clear {
clear:both;
}
.collapsed {
height: 0;
overflow: hidden;
}
.drHeading h4 {
padding: 15px 10px 15px 21px;
cursor: pointer;
}
.drItem {
padding: 10px 10px 10px 21px;
letter-spacing: 1px;
cursor: pointer;
}
.drItem .icon {
width:14px;
height:14px;
padding-right: 10px;
}
.drPanel {
margin-bottom: -18px;
}
.drPanel-collapse {
margin: -19px 0 20px 0;
}
.hide {
display:none;
}
.hidePlayer {
display: none;
}
#menu {
top:0;
left:0;
}
#top {
top:0;
right:0;
}
#menu, #top {
position:fixed;
width:36px;
height:36px;
font-size:32px;
text-align:center;
cursor:pointer;
}
#menu .icon, #top .icon {
width: 23px;
height: 23px;
}
.menu {
position: fixed;
left: 5vw;
z-index: 1;
top: 0px;
overflow: auto;
padding: 0 2vw;
height:95vh;
min-width:86vw;
}
.menu .tb {
width:95%;
margin:0 auto;
}
.menu .td {
padding:5px;
}
#menuPane .icon {
height: 14px;
width: 14px;
position: absolute;
top: 20px;
right: 24px;
}
.menuTop {
vertical-align: top !important;
white-space: nowrap;
}
.plItemParent:hover {
cursor:pointer; 
}
.plTitle { 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
width: 100%; 
}
.plwrap { 
margin:0 auto; 
}
.random.icon {
width: 14px;
height: 14px;
float: right;
margin: 24px 21px 0 0;
}
.show {
display:block;
}
.showPlayer {
display: visible;
}
.tb {
display: table;
width:100%;
}
.td {
display: table-cell;
padding: 15px 10px;
vertical-align: middle;
}
.td .icon {
width: 14px;
height: 14px;
}
.tg {
display: table-row-group;
}
.tr {
display: table-row;
}
/* Typography */
h1 { font-size:36px; line-height:40px; margin:20px 0 0; }
h6 { font-size:14px; line-height:18px; margin:4px 0 20px; }
p { font-size:14px; line-height:18px; margin:0 0 2px; }
/* Links */
a,a:visited { color:#ddd; outline:0; }
a:hover,a:focus { color:#bbb; }
p a,p a:visited { line-height:inherit; }
/* Misc. */
.add-bottom { margin-bottom:20px !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }
/* Highlight Styles */
::selection { background-color:#262223; color:#444; }
::-moz-selection { background-color:#262223; color:#444; }
/* Audio Player Styles */
/* Default / Desktop / Firefox */
audio { margin:5px 15px 0 14px; width:775px; }
#audiowrap { background-color:#000; margin:0 auto; }
#tracks { min-height:65px; position:relative; text-align:center; top:13px; }
#plList { margin:0; }
#drList li, #plList li { cursor:pointer; margin:0; padding:15px 10px; }
a[id^="btn"] { cursor:pointer; font-size:36px; padding:1px 15px 10px 15px; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }
/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { margin-left:9px; outline:none; width:680px; }
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #tracks { min-height:57px; top:5px; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] #drList li, #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #drList li:hover, #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#080808!important; }
/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { margin-left:6px; width:687px; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #tracks { min-height:60px; top:8px; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] #drList li, #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #drList li:hover, #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#080808!important; }
/* IE 11 */
html[data-useragent*="rv:11.0"] audio { margin-left:2px; width:695px; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:#000; }
html[data-useragent*="rv:11.0"] #tracks { min-height:60px; top:8px; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] #drList li, #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #drList li:hover, #plList li:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#080808!important; }
/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:#000; }
html[data-useragent*="Apple"] #tracks { min-height:64px; top:12px; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="Apple"] #drList li, #plList li { background-color:#000; }
html[data-useragent*="Apple"] #drList li:hover, #plList li:hover { background-color:#080808; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#080808!important; }
/* IOS 7 */
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio { margin-left:3px; width:690px; }
html[data-useragent*="OS 7"] #audiowrap { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #tracks { min-height:75px; top:23px; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:#e6e6e6; color:#373837; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 7"] #drList li, #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #drList li:hover, #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }
/* Chrome */
html[data-useragent*="Chrome"] audio { margin-left:6px; width:687px; }
html[data-useragent*="Chrome"] #tracks { min-height:64px; top:12px; }
html[data-useragent*="Chrome"] #audiowrap { background-color:#131313; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#131313; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#161616; }
html[data-useragent*="Chrome"] #drList li, #plList li { background-color:#131313; }
html[data-useragent*="Chrome"] #drList li:hover, #plList li:hover { background-color:#161616; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#161616!important; }
/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:5px; width:682px; }
/* Audio Player Media Queries */
/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:526px; }
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
html[data-useragent*="rv:11.0"] audio { width:551px; }
html[data-useragent*="OS 7"] audio { width:546px; }
html[data-useragent*="Chrome"] audio { width:543px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:5px; width:538px; }
}
/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:390px; }
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
html[data-useragent*="rv:11.0"] audio { width:415px; }
html[data-useragent*="OS 7"] audio { width:410px; }
html[data-useragent*="Chrome"] audio { width:407px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:5px; width:403px; }
}
/* Mobile Portrait */
@media only screen and (max-width: 479px) {
audio { width:270px; }
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
html[data-useragent*="rv:11.0"] audio { width:295px; }
html[data-useragent*="OS 7"] audio { width:290px; }
html[data-useragent*="Chrome"] audio { width:287px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:5px; width:283px; }
}