/* Misc.
================================================== */
.left-l { float:left; }
.right-r { float:right; }
.center-c { text-align:center; }
/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { margin:0; width:100%; }
#mainwrap { /* add box-shadow or other styles here */ }
#audiowrap { background-color:#fafafa; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { min-height:65px; position:relative; text-align:center; text-decoration:none; top:13px; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color:#fafafa; cursor:pointer; margin:0; padding:21px 0; }
#plList li:hover { background-color:#999; color:#FFF;}
.plItem { position:relative; }
.plTitle { left:50px; overflow:hidden; position:absolute; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; }
.plNum { padding-left:21px; width:25px; }
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
.plSel,.plSel:hover { background-color:#999!important; cursor:default!important; color:#FFF; }
a[id^="btn"] { background-color:#fafafa; color:#999; cursor:pointer; font-size:30px; margin:0; padding:0 27px 11px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#999; color:#fff; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { margin-left:0px; outline:none; width:100%; }
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"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #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:0px; width:100%; }
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"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #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:0px; width:100%; }
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"] #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #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"] #plList li { background-color:#000; }
html[data-useragent*="Apple"] #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:0px; width:100%; }
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"] #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }

/* IOS 8 */
html[data-useragent*="OS 8"] body { color:#373837; }
html[data-useragent*="OS 8"] audio { margin-left:0px; width:100%; }
html[data-useragent*="OS 8"] #audiowrap { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #tracks { min-height:75px; top:23px; }
html[data-useragent*="OS 8"] a[id^="btn"] { background-color:#e4e4e4; color:#373837; }
html[data-useragent*="OS 8"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 8"] #plList li { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { background-color:#eee!important; }

/* IOS 9 */
html[data-useragent*="OS 9"] body { color:#373837; }
html[data-useragent*="OS 9"] audio { margin-left:0px; width:100%; }
html[data-useragent*="OS 9"] #audiowrap { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #tracks { min-height:75px; top:23px; }
html[data-useragent*="OS 9"] a[id^="btn"] { background-color:#d5d5d5; color:#373837; }
html[data-useragent*="OS 9"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 9"] #plList li { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { background-color:#eee!important; }

/* Chrome */
html[data-useragent*="Chrome"] body { color:#5a5a5a; }
html[data-useragent*="Chrome"] audio { margin-left:0px; width:100%; }
html[data-useragent*="Chrome"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"] #tracks { min-height:64px; top:12px; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#eee!important; }

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:0px; width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #tracks { min-height:75px; top:23px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }


/* Audio Player Media Queries
================================================== */

/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:100%; }
html[data-useragent*="MSIE 9.0"] audio { width:100%; }
html[data-useragent*="MSIE 10.0"] audio { width:100%; }
html[data-useragent*="rv:11.0"] audio { width:100%; }
html[data-useragent*="OS 7"] audio { width:100%; }
html[data-useragent*="OS 8"] audio { width:100%; }
html[data-useragent*="OS 9"] audio { width:100%; }
html[data-useragent*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:0px; width:545px; }
}

/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:100%; }
html[data-useragent*="MSIE 9.0"] audio { width:100%; }
html[data-useragent*="MSIE 10.0"] audio { width:100%; }
html[data-useragent*="rv:11.0"] audio { width:100%; }
html[data-useragent*="OS 7"] audio { width:4100%; }
html[data-useragent*="OS 8"] audio { width:100%; }
html[data-useragent*="OS 9"] audio { width:100%; }
html[data-useragent*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:0px; width:100%; }
#npTitle { width:245px; }
}

/* Mobile Portrait */
@media only screen and (max-width: 479px) {
audio { width:100%; }
html[data-useragent*="MSIE 9.0"] audio { width:100%; }
html[data-useragent*="MSIE 10.0"] audio { width:100%; }
html[data-useragent*="rv:11.0"] audio { width:100%; }
html[data-useragent*="OS 7"] audio { width:100%; }
html[data-useragent*="OS 8"] audio { width:100%; }
html[data-useragent*="OS 9"] audio { width:100%; }
html[data-useragent*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:0px; width:100%; }
#npTitle { width:100%; }
}