/* Font Family
================================================== */

@import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

.container { position:relative; margin:0 auto; max-width:700px; overflow: hidden;
  background-image:-webkit-linear-gradient(rgb(231 231 231), rgb(238 238 238 / 80%), rgb(238 238 238)), url(../images/blueworldmap-large-3.jpg);
  background-image:-o-linear-gradient(rgb(231 231 231), rgb(238 238 238 / 80%), rgb(238 238 238)), url(../images/blueworldmap-large-3.jpg);
  background-image:linear-gradient(rgb(231 231 231), rgb(238 238 238 / 80%), rgb(238 238 238)), url(../images/blueworldmap-large-3.jpg);
  background-position: 90%;
  background-size: auto 100%;
  padding:20px;}
.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
/* .container { width:556px; } */
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
/* .container { width:90%; margin: 15px;} */
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
/* .container { width:420px; } */
}


/* CSS Reset
================================================== */

/* html,body,div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:16px;
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%;
background-color:#EEEEEE;
color:#C8C7C8;
font:20px/24px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
padding:5px 0;
} */


/* Typography
================================================== */

/* h1,h6,p { color:#808080; font-weight:200; }
h1 { font-size:42px; line-height:44px; margin:20px 0 0; }
h6 { font-size:18px; line-height:20px; margin:4px 0 20px; }
p { font-size:18px; line-height:20px; margin:0 0 2px; } */


/* Links
================================================== */

/* a,a:visited { color:#ddd; outline:0; text-decoration:underline; }
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; }


/* Custom Styles
================================================== */

/* CSS Transitions */
* {
-moz-transition:all 100ms ease;
-o-transition:all 100ms ease;
-webkit-transition:all 100ms ease;
transition:all 100ms ease;

-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}

/* Highlight Styles */
/* ::selection { background-color:#EEEEEE; color:#444; }
::-moz-selection { background-color:#EEEEEE; color:#444; } */


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { margin:0 auto; width:100%; max-width: 700px;}
#mainwrap { /* add box-shadow or other styles here */ }
#audiowrap { background-color:transparent; margin:0 auto; }
#plwrap { margin:0 auto; }
/* #player {color:white; } */

  .audio #plwrap {
    /* Foreground, Background */
    scrollbar-color: #999 #EEEEEE;
    height: 450px;
    overflow-y: auto;
    padding: 20px;
    background-color: #EEEEEE;
    box-shadow: inset -5px 5px 5px #9999997a;
    margin: 0 -20px 0px -20px;
  }
  .audio hr {
    border: solid #3d3d3d26;
    border-width: 1px 0 0;
    clear: both;
    height: 0;
    margin: 0.5em;
  }
  .audio .plTitle { margin-left:25px; overflow:hidden; position: static; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; max-width:calc(100% - 100px); }
  .audio .plSecondLine { margin-left:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 12px;}
  .audio .plNum { padding-left:21px; width:25px; display: none;}
  .audio #plwrap::-webkit-scrollbar {
    width: 10px; /* Mostly for vertical scrollbars */
    height: 10px; /* Mostly for horizontal scrollbars */
  }
  .audio #plwrap::-webkit-scrollbar-thumb { /* Foreground */
    background: #999;
  }
  .audio #plwrap::-webkit-scrollbar-track { /* Background */
    background: #EEEEEE;
  }
  .audio .plSel,.audio .plSel:hover, .audio #plList li:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="MSIE 9.0"] .audio .plSel,
  html[data-useragent*="MSIE 9.0"] .audio #plList li:hover,
  html[data-useragent*="MSIE 9.0"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="MSIE 10.0"] .audio .plSel,
  html[data-useragent*="MSIE 10.0"] .audio #plList li:hover,
  html[data-useragent*="MSIE 10.0"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="rv:11.0"] .audio .plSel,
  html[data-useragent*="rv:11.0"] .audio #plList li:hover,
  html[data-useragent*="rv:11.0"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="Apple"] .audio .plSel,
  html[data-useragent*="Apple"] .audio #plList li:hover,
  html[data-useragent*="Apple"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="OS 7"] .audio .plSel,
  html[data-useragent*="OS 7"] .audio #plList li:hover,
  html[data-useragent*="OS 7"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }
  html[data-useragent*="Chrome"] .audio .plSel,
  html[data-useragent*="Chrome"] .audio #plList li:hover,
  html[data-useragent*="Chrome"] .audio .plSel:hover { background-color:#cd2129cc!important; border-radius: 10px; }

#tracks { min-height:65px; position:relative; text-align:center; text-decoration:none; top:-10px; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:0 21px 10px 21px; text-align:right; width: 100%; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color: transparent; cursor:pointer; margin:0; padding:2px 0; border-radius: 10px; }
#plList li:hover { background-color:#EEEEEE; color: #ffffff; }
#plList .columns { padding:0; }
.plItem { position:relative; margin-bottom: 10px; }
.plTitle { left:50px; overflow:hidden; position:absolute; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; max-width: calc(100% - 100px); }
.plSecondLine { margin-left:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 12px;}
.plNum { padding-left:21px; width:25px; }
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
.plSel,.plSel:hover { background-color:#EEEEEE!important; cursor:default!important; color: #ffffff; font-weight: bold; }
.plSel .plSecondLine,.plSel:hover .plSecondLine { color:#eeeeee; }
a[id^="btn"] { background-color:transparent; color:#C8C7C8; cursor:pointer; font-size:50px; 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:transparent; color:#cd2129; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { margin-left:0; outline:none; width:100%; }
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:transparent; }
html[data-useragent*="MSIE 9.0"] #tracks { min-height:57px; top:-10px; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:transparent; border-radius: 100%; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#EEEEEE!important; }

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { margin-left:0; width:100%; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:transparent; }
html[data-useragent*="MSIE 10.0"] #tracks { min-height:60px; top:-10px; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:transparent; border-radius: 100%; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#EEEEEE!important; }

/* IE 11 */
html[data-useragent*="rv:11.0"] audio { margin-left:0; width:100%; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:transparent; }
html[data-useragent*="rv:11.0"] #tracks { min-height:60px; top:-10px; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:transparent; border-radius: 100%; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="rv:11.0"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#EEEEEE!important; }

/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:transparent; }
html[data-useragent*="Apple"] #tracks { min-height:64px; top:-10px; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:transparent; border-radius: 100%; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="Apple"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="Apple"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#EEEEEE!important; }

/* IOS 7 */
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio { margin-left:0; width:100%; }
html[data-useragent*="OS 7"] #audiowrap { background-color:transparent; }
html[data-useragent*="OS 7"] #tracks { min-height:75px; top:-10px; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:transparent; color:#373837; border-radius: 100%; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="OS 7"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#EEEEEE!important; }

/* Chrome */
html[data-useragent*="Chrome"] audio { margin-left:0; width:100%; }
html[data-useragent*="Chrome"] #tracks { min-height:64px; top:-10px; }
html[data-useragent*="Chrome"] #audiowrap { background-color: transparent; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:transparent; border-radius: 100%; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:transparent; color:#cd2129; }
html[data-useragent*="Chrome"] #plList li { background-color:transparent; border-radius: 10px; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#EEEEEE; color: #ffffff; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#EEEEEE!important; }

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:0; width:100%; }


/* 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*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:0; width:100%; }
}

/* 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:100%; }
html[data-useragent*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:0; width:100%; }
#npTitle { width:100%; }
}

/* 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*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:0; width:100%; }
#npTitle { width: 100%; }
}


@media(min-width: 640px) {
  #plList .columns.medium-6:first-child {
    border-right: solid 2px #cd2129;
  }
}