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

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


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

.container { position:relative; margin:0 auto; width:700px; }
.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:300px; }
}


/* 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: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%;
background-color:rgb(255, 255, 255);
color:#000000;
font:20px/24px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
padding:5px 0;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++*/
body {
    margin: 0;
    font-family: "Monument Extended",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-family: var(--bs-font-sans-serif);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: #212529;
    
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
:root {
    
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: "Monument Extended",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,0.15),hsla(0,0%,100%,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;
}

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


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

/* Default / Desktop / Firefox */
audio { margin:0 15px 0 14px; width:670px; }
/*#mainwrap { /* add box-shadow or other styles here */ /*}*/
#audiowrap { background-color:#ffffff; margin:0 auto; margin-bottom: 20px; }
#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:#ffffff; cursor:pointer; margin:0; padding:5px 0; }
#plList li:hover { background-color:#c2c2c2; }
.plItem { position:relative; }
.plTitle { left:30px; overflow:hidden; position:absolute; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; }

.track_titre {
    color: rgb(29, 29, 29);
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 0rem;
}
.track_titre a {
    color: #181818;
    text-decoration: none;
    text-transform: uppercase;
}
.track_details {
    color: rgb(29, 29, 29);
    font-size: 0.65rem;
    letter-spacing: 2px;
    margin-bottom: 0rem;
}

.plNum { padding-left:0px; padding-right:8px;width:16px; color:rgb(180, 180, 180);}
.plLength { padding-left:21px; position:absolute; right:0px; top:0;color: rgb(180, 180, 180); }
.plSel,.plSel:hover { background-color:#ffb9cb!important; cursor:default!important; }
a[id^="btn"] { background-color:#ffffff; color:#919191; cursor:pointer; font-size:50px; margin:0; padding:0 20px 11px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { color:#444444;; background-color:#ffffff; }
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:rgb(255, 255, 255); }
html[data-useragent*="MSIE 9.0"] #tracks { min-height:57px; top:5px; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:rgb(255, 255, 255); }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#fc9f9f; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:rgb(255, 255, 255); }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#ffa8a8; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#fddddd!important; }

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { margin-left:6px; width:687px; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:rgb(255, 255, 255); }
html[data-useragent*="MSIE 10.0"] #tracks { min-height:60px; top:8px; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:rgb(255, 255, 255); }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#ff9191; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:rgb(255, 255, 255); }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#ffb4b4; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#ffdbdb!important; }

/* IE 11 */
html[data-useragent*="rv:11.0"] audio { margin-left:2px; width:695px; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:rgb(255, 255, 255); }
html[data-useragent*="rv:11.0"] #tracks { min-height:60px; top:8px; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:rgb(255, 255, 255); }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#fcadad; }
html[data-useragent*="rv:11.0"] #plList li { background-color:rgb(255, 255, 255); }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#fdd3d3; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#b6b6b6!important; }

/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:rgb(255, 255, 255); }
html[data-useragent*="Apple"] #tracks { min-height:64px; top:12px; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:rgb(255, 255, 255); }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#ffaeae; }
html[data-useragent*="Apple"] #plList li { background-color:rgb(255, 255, 255); }
html[data-useragent*="Apple"] #plList li:hover { background-color:#ffaeae; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#ffd2d2!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"] #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; }

/* 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:#ffffff; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#ffffff; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#aaaaaa; }
html[data-useragent*="Chrome"] #plList li { background-color:#ffffff; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#aaaaaa; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#ecb9db!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; }
#npTitle { width:245px; }
}

/* 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; }
#npTitle { width:167px; }
}