*,*:before,*:after {margin:0;padding:0;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block;}

:root {
  
  --color1: #333;
  --color2: #fff;
  --color3: #f40;
  --color4: #aaa;
  --color5: #f8f8f8;
  --color6: #1d1d1d;  
}

@font-face {font-family:'player';
src:url('../fonts/player.eot?59829745');
src:url('../fonts/player.eot?59829745#iefix') format('embedded-opentype'),
url('../fonts/player.woff?59829745') format('woff'),
url('../fonts/player.ttf?59829745') format('truetype'),
url('../fonts/player.svg?59829745#player') format('svg');font-weight:normal;font-style:normal;}

html {background:var(--color2);}
body {font-size:19px;line-height:1.3;color:var(--color1);font-family:'Helvetica',sans-serif;background:var(--color2) url(../img/tetecul-black.png) no-repeat fixed;background-position:top 0 right 2em;background-size:360px auto;} 
body#song {background:none;} body#song a.shuffle, body#song .tinynav, body#song .social {display:none;} 

html.embed, .embed body {background-attachment:local;overflow:auto;min-height:100%;height:100%;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}

main {position:relative;margin:.2em .55em 4em .55em;min-height:50vh;}

iframe {position:absolute;top:1.4em;right:1.6em;float:left;width:80px;}
a {cursor:pointer;color:var(--color1);text-decoration:none;text-decoration-skip:ink;}
a:hover {color:var(--color3);text-decoration:underline;}

h1 {display:none;margin:0 0 1em 0;font-style:italic;font-size:1em;}
h1 a {color:var(--color1);}
h3.result {display:inline-block;font-size:.75em;position:relative;top:-.1em;margin-bottom:0;text-transform:uppercase;letter-spacing:1px;font-weight:normal;}

ol {line-height:1.5;color:#ccc;clear:both;list-style:decimal inside;}
ol li span {font-weight:normal;color:var(--color4);margin-left:.1em;}
ol li:hover {color:var(--color3)}
ol li:hover a {text-decoration:none;color:var(--color3);}
ol li.playing a {color:var(--color3);}
ol li.playing a:before {content:"\266B" " ";color:var(--color3);font-style:normal;}

.tinynav {width:14ex;position:fixed;right:.2em;top:.3em;font-size:12px;color:var(--color4);-webkit-appearance: none;appearance:none;font-family:"Helvetica Neue";text-transform:uppercase;letter-spacing:1px;background:var(--color2);border:0;padding:.25em .1em .25em .5em;border-radius:0;letter-spacing:1px;z-index:9999;}
ul.tags {display:none;}

.social {font-size:11px;letter-spacing:1px;position:fixed;right:1.2em;bottom:6.3em;transform:rotate(90deg);transform-origin:right;text-transform:uppercase;}
.social a {color:var(--color4);margin-left:.3em;}

/*
ol.li:after {display:block;font-size:.8em;margin:.5em 0 .5em 0;text-transform:uppercase;letter-spacing:1px;color:var(--color4)!important;}
ol.li:nth-last-of-type(32):after {content:"December 2014"}
*/

.psa {border:1px solid;position:fixed;right:28%;top:70px;font-size:12px;padding:8px 8px 5px 8px;transform:rotate(-4deg);}
ol li:nth-child(n+5):nth-child(-n+10) {}

.single  {min-height:85vh;display:block;text-align:center;padding:1.2em;position:absolute;top:0;bottom:-32px;left:0;right:0;
display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;
display:-moz-box;-moz-box-pack:center;-moz-box-align:center;
display:-ms-box;-ms-box-pack:center;-ms-box-align:center;
display: box;box-pack: center;box-align: center;}
.single ol  {display:none;}
.single a {color:var(--color1);}
.single h2  {font-size:18px;font-weight:normal;}
.single h2 b:before  {content:" - ";font-weight:normal;}
.single h2 span  {opacity:.3}

a#back {color:var(--color3);display:block;position:absolute;width:1em;z-index:1;text-align:center;font-style:italic;text-decoration:underline;left:.2em;top:.4em;
	transform:rotate(-6deg);-webkit-transform:rotate(-6deg);-ms-transform:rotate(-6deg);}

.audiojs {position:fixed;height:64px;bottom:0;left:80px;;right:0;border-top:0px solid var(--color5);-webkit-backface-visibility: hidden;}
.time {color:var(--color3);pointer-events:none;letter-spacing:.02em;font-size:1em;z-index:1;position:fixed;bottom:1.15em;right:1em;}
.time .played {}
.play-pause {color:var(--color3);z-index:1;display:block;background:var(--color2);font-size:32px;position:absolute;left:-80px;bottom:0;padding:11px 0 12px 0;text-align:center;}
.play {display:block;}
.playing .play:after {font-family:'player';content:"a";}
.play:after {display:block;width:80px;font-family:'player';content:"b";cursor:pointer;}
.scrubber {position:absolute;;top:0;right:0;left:0;background:var(--color2);height:64px;overflow:hidden;}
.progress {position:absolute;top:0px;left:0px;height:64px;width:0px;background:var(--color3);opacity:.75;z-index:1;}
.loaded {position:absolute;top:0px;left:0px;height:64px;width:0px;background:var(--color3);opacity:.04;}


@media only screen and (prefers-color-scheme: dark) {
  :root {
    --color1: #eee;
    --color2: #111;
    --color3: gold;
    --color4: #666;
    --color5: #222;
    --color6: #eee;
  }
  body {
    background-image:url(../img/tetecul-white.png);
  }
}

@media only screen and (max-width:769px) {
	.psa {display:none;}
	body {font-size:16px;background-image:url(../img/ambiancejeune-logo-black.png);background-size:196px 100px;background-position:top .4em left .3em;background-attachment:inherit;}
  @media only screen and (prefers-color-scheme: dark) {body {background-image:url(../img/ambiancejeune-logo-white.png);}}
	a#back {margin:.5em 0 0 .6em;}
	main {margin:0 0 176px 0;position:relative;top:106px;}
	.single h2 span, .single h2 b  {display:block;}
	.single h2 b:before  {display:none;}
  .time {bottom: 1.4em;}
	ol li:after {display:none;}
	ol li {line-height:1.3;padding:.55em .8em;background:var(--color2);border-bottom:1px solid var(--color5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  ol li:hover, ol li:hover a {color:inherit;}
  ol li:last-child {border:0;}
	ol li.playing {color:var(--color3);}
  ol li.playing a:before {display:none;}
  .tinynav {position:absolute;right:.2em;top:.6em;z-index:0;}
  h3.result {display:block;position:sticky;padding:.8em .8em .55em .8em;border-top:1px solid var(--color5);background:var(--color2);}
  .social {display:none;position:absolute;bottom:auto;right:9.4em;top:6em;}
}