html, body {font-size:16px;}

html {
overflow-y:scroll;
}

html, body, h1, h2, h3, h4, p, ul, ol, dl, dt, dd, header, article, footer, nav, aside, div, form, input, button, label {
margin:0;
padding:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:block;
}

li, a, .jp-free-media, svg {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
box-sizing:border-box}

body {
line-height:1;
font-family:Verdana, 'helvetica neue', Helvetica, Arial, sans-serif;
color:#ccc;
background:#000;
scroll-behavior: smooth;
-moz-text-size-adjust:none;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent}

.categories {font-family: 'helvetica neue', Helvetica, Arial, sans-serif}

header h1, header h2 {font-size:200%;margin:auto}
h1, h2, h3, h4, p, ul, ol, #disqus_thread {margin:1rem;color:#ccc;line-height:1.5}
ol, .inner ul {list-style-position:outside;margin-left:3.2rem}
h1, h2, h3, h4 {
font-weight:normal;
margin:1rem;line-height:1.2;color:#eee}

h1 {font-size:1.6em;}
h2 {font-size:1.5em;}
h3 {font-size:1.25em;}
h4 {font-size:1em;font-weight:bold;margin-top:2em;margin-bottom:.25em}
h4 + p {margin-top:0}
img {border:0;-ms-interpolation-mode: bicubic}
.inner img {max-width:100%;height:auto}

footer {text-align:center;padding:1em;overflow:auto;color:#aaa;}
footer a {color:#eee;}
audio {
width:100% !important;
min-height:30px;
display:block}

.single-audio {margin:1em 0}
.center {text-align:center}
.lefty {float:left}
.righty {float:right}

.jp-playlist ul::-webkit-scrollbar {width:1em}
 
.jp-playlist ul::-webkit-scrollbar-track {border-radius:.25em}
 
.jp-playlist ul::-webkit-scrollbar-thumb {
border-radius:.25em;
background:#ccc url(/img/chromed.jpg) 50% 50%;
background-size:cover;
border:.125em outset rgba(192,192,192,.5)}

p a {color:#009900;-webkit-transition:color .3s, background .3s, text-shadow .3s, box-shadow .3s;transition:color .3s, background .3s, text-shadow .3s, box-shadow .3s}
p a:hover {color:#00ff00;background:#222;text-shadow:0 0 .3em #00ff00;box-shadow:0 0 .25em #00ff00}

.content {
background:#6e2f24 url(/img/wood.jpg);
background-size: auto 15.625em;
overflow:auto;
box-shadow: inset 1px 1px 1em rgba(0,0,0,.8)}

#jp_container_2 {margin:1em;overflow:auto}
.jp-controls-holder {
text-align:center;
margin:1em;
box-sizing: border-box;
border-radius: .25em}
.jp-controls {
display:inline-block;
background:#ccc url(/img/chromed.jpg) center center no-repeat;
background-size:100% auto;
border:.75em inset rgba(192,192,192,.5);
border:inset 2px rgba(192,192,192,.5);
padding:.75em;
box-shadow:0 0 .5em rgba(0,0,0,.2), inset 0 0 .5em rgba(0,0,0,.2);	
box-shadow:0 0 .75em rgba(0,0,0,.75), inset .0625em .0625em .25em rgba(0,0,0,.3);
border-radius:.25em;
box-sizing: border-box;
width:100%;
max-width:23em;
text-align:center;
}
.jp-current-time {clear:both}
.jp-current-time, .jp-duration {
display:inline-block;
width:40%;
box-sizing:border-box;
display:none}

button {
border:2px outset rgba(192,192,192,1);
display:inline-table;
width:25%;
box-shadow:.0625em .0625em .0625em rgba(0,0,0,.3);
border-radius:0;
text-align:center;
cursor:pointer;
color:buttontext;
border-image-source:initial;
border-image-slice:initial;
border-image-width:initial;
border-image-outset:initial;
border-image-repeat:initial;
line-height: 3.5em;
}

button:hover {border:.0625rem outset rgba(192,192,192,1)}

.jp-controls button {
text-transform:uppercase;
text-shadow:.0625em .0625em 0 white;
letter-spacing:.0625em;
color:#666;
background-color:transparent;
box-shadow:0 0 .25em rgba(0,0,0,.2)}

input, textarea, keygen, select, button {
margin:0;font-size:.83em}

.jp-controls button span {
font-size:1.5em;
margin-right:.25rem;
line-height:50%;
font-family:monospace}

.jp-play, .jp-stop {width:32%}
.jp-previous, .jp-next {width:18%} 
  
.jp-playlist, .inner {
background:#000;
box-shadow:0 0 .75em rgba(0,0,0,.75);
margin:1em;
border-radius:.25em;
border:inset 2px rgba(192,192,192,.5);
background:rgb(69,72,77);
background:#000;
background:rgb(34,35,38);
background:-moz-radial-gradient(center, ellipse cover,  rgba(34,35,38,1) 0%, rgba(0,0,0,1) 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(34,35,38,1)), color-stop(100%,rgba(0,0,0,1)));
background:-webkit-radial-gradient(center, ellipse cover,  rgba(34,35,38,1) 0%,rgba(0,0,0,1) 100%);
background:-o-radial-gradient(center, ellipse cover,  rgba(34,35,38,1) 0%,rgba(0,0,0,1) 100%);
background:-ms-radial-gradient(center, ellipse cover,  rgba(34,35,38,1) 0%,rgba(0,0,0,1) 100%);
background:radial-gradient(ellipse at center,  rgba(34,35,38,1) 0%,rgba(0,0,0,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#222326', endColorstr='#000000',GradientType=1 );
background-attachment:fixed}

audio::-webkit-media-controls-panel {
/*overflow:auto;*/

box-shadow:inset 0 0 .75em rgba(0,0,0,.75);
/* background-color:#444 */}
audio::-webkit-media-controls-enclosure {max-width:320px !important}
.inner {margin:0;background:#000}
.up_space {margin-top:2.1em}

.jp-playlist ul {
list-style-type:decimal-leading-zero;
margin:0;
font-family:monospace, sans-serif;
max-height:19.5em;
overflow:auto;
text-transform:uppercase;
letter-spacing:0}

.jp-playlist ul li {
margin:0;
line-height:100%;
line-height: 2.75em}

ul {counter-reset:li}

.jp-playlist ul > li {
position:relative;
margin:0;
padding:0;
list-style:none}

.jp-playlist ul > li .jp-playlist-item:before {
content:"" counter(li,decimal-leading-zero) " ";
counter-increment:li;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
text-shadow:none;
color:#999;
float:left;
padding:0 .5em 1px .5em;
}

ol li, ul li {margin:0}

.jp-playlist a {
color:#008000;
display:inline-block;
display:table-cell;   
vertical-align: top;
line-height:1;
text-shadow:0 0 .25em rgba(0,0,0,.4)}

.jp-playlist-item-free {padding:0;outline:none}
.jp-playlist-current div {background-color:rgba(255,255,255,.05)}
.jp-playlist a:hover {background-color:#222}
.jp-playlist-current a {color:#00ff00;text-shadow:0 0 .375em #00ff00} 
li div {display: table-row;box-sizing:border-box;width:100%} 
.jp-free-media {width:8%;display:table-cell;text-align:center}
.jp-free-media a {width:100%;display:block}

.jp-playlist-item {
width:100%;
display:table-cell;    
line-height:1;
padding-top:.875em;
padding-bottom:.875em}

.jp-free-media img {
vertical-align:middle;
width:1.75em;
height:1.75em;
padding:.5em .5em}
	
.jp-stop span {
color:#b37300;
font-weight:normal;
-webkit-transition:color .2s linear, border .2s, text-shadow .2s linear;
transition:color .2s linear, border .2s, text-shadow .2s linear}

.jp-type-playlist .jp-stop:focus span {
color:#ffae1a;
text-shadow:.0625em .0625em .625em #ffae1a, 1px 1px 0px white} 

.jp-play span {
color:#008000;
font-weight:normal;
-webkit-transition: color .2s linear, border .2s, text-shadow .2s linear;
transition: color .2s linear, border .2s, text-shadow .2s linear}
.jp-state-playing div.jp-type-playlist .jp-play span {
color:#00ff00;
text-shadow:.0625em .0625em .625em #00ff00, .0625em .0625em 0 white} 

a, .machine-a {
color:#009900;
text-decoration:none;
-webkit-transition:color .5s, background .5s;
transition:color .5s, background .5s}

a:hover, .machine-a:hover {
color:#00ff00}

.men-a {color:#009999}
.men-a:hover {color:#00ffff}
.women-a {color:#990099}
.women-a:hover {color:#ff00ff}
.misc-a {color:#999900}
.misc-a:hover {color:#ffff00}
.soundscapes-a {color:#990000}
.soundscapes-a:hover {color:#ff0000}
.present-a {color:#905000}
.present-a:hover {color:#ff9900}

.wood {
border-radius:.25em;
margin:1em;
padding:1em;
overflow:auto;
box-shadow:inset 1px 1px 1em rgba(0,0,0,.8)}

.categories {
overflow:auto;
margin:1em;
list-style-type:none}

#jp_container_2 + .mini {margin-top:0}

.categories li {
line-height:1.2;
background:#ccc url(/img/chromed.jpg) center center no-repeat;
background-size:cover;
border-radius:.25em;
padding:.75em;
margin:1em 1%;
width:48%;
float:left;
border:inset 2px rgba(192,192,192,.5);
box-shadow: 0 0 .75em rgba(0,0,0,.75), inset .0625em .0625em .25em rgba(0,0,0,.3)}

.categories svg {
width:5em;
height:5em;
fill:rgba(255,255,255,1);
padding:1em;
display:block}

.mini svg {
width:3em;
height:3em;
padding:.6em}

button svg {font-size:1em;width:1.1em;height:1.1;
/*-webkit-filter:drop-shadow(.0625rem .0625rem 0 #fff);filter:drop-shadow(.0625rem .0625rem 0 #fff)*/}

.men svg {fill:rgba(0,255,255,.5)}
.women svg {fill:rgba(255,0,255,.5)}
.misc svg {fill:rgba(255,255,0,.5)}
.machine svg  {fill:rgba(0,255,0,.5)}
.soundscapes svg {fill:rgba(255,0,0,.5)}
.present svg {fill:rgba(255,153,0,.5)}
a svg {
position:relative;
-webkit-transform:translateZ(0px);
-webkit-backface-visibility:hidden;
/* -webkit-filter: blur(0); */
-webkit-transition:fill .5s, -webkit-filter .5s, opacity .5s, all .5s;
transition:fill .5s, filter .5s, opacity .5s, all .5s}

a:hover .men svg {fill:rgba(0,255,255,.99)}
a:hover .women svg {fill:rgba(255,0,255,.99)}
a:hover .misc svg {fill:rgba(255,255,0,.99)}
a:hover .machine svg {fill:rgba(0,255,0,.99)}
a:hover .soundscapes svg {fill:rgba(255,0,0,.99)}
a:hover .present svg {fill:rgba(255,153,0,.99)}
a:hover svg {/* -webkit-filter: blur(.0625em) */} 

.categories .svg {
background:#000;
float:left;
margin:0 .75em 0 0;
border-radius:.4em;
box-shadow:inset 0 0 .5em rgba(0,0,0,.25);
border-right:.0625em solid #fff;
border-bottom:.0625em solid #fff}

.categories strong {
font-size:1.1em;
color:#333;
text-transform:uppercase}
.categories a {
border:.125em outset rgba(192,192,192,.5);
box-shadow:.0625em .0625em .125em rgba(0,0,0,.3);
display:block;
clear:both;
overflow: auto;
border-radius:.125em;
padding:.75em;
text-shadow:.0625em .0625em 0 white;
letter-spacing:.0625em;
color:#444;
background:transparent}

.categories a:hover {background:#ccc}

.mini a, .mini li {padding:.5em}

.mini a {border:.0625em outset rgba(192,192,192,.5)}
.mini .svg {margin-right:.45em}
.mini strong {font-weight: normal}

header {
position:relative;
background-image:url(/img/answering-machine.jpg);
background-repeat:no-repeat;
background-color:#000;
background-position:top right;
background-size:61% auto;
padding-bottom:25%}

.hgroup h1, .hgroup h2, .hgroup h3 {
color:#fff;
margin:0 1rem;
font-family:Arial, Hevletica, sans-serif;
line-height:120%}

.hgroup h2 {
font-style:italic;
font-size:3em;
padding-top:.5em}

.hgroup h3 {font-size:1.75em}

#menubar {
width:100%;
overflow:auto;
box-shadow:1px 1px .625em rgba(0,0,0,.5);
position:absolute;
bottom:0;
left:0;
right:0;
margin:1em auto;
text-align:center}

.outer-nav {
overflow:auto;
padding:0 .25em}

nav {margin:auto;text-transform:uppercase}

nav ul {
list-style-type:none;
margin:auto;
line-height:1;
width: 100%;
box-shadow: 0 0 .5em rgba(0,0,0,.2)}

nav li {
padding:0 .25em;
display: inline-table;
display: inline-block;
width: 25%;
box-shadow: .0625em .0625em .0625em rgba(0,0,0,.3)} 

nav li a {
border:.0625em solid rgba(80,80,80,.5);
background:#000;
background:rgba(0,0,0,.5);
border-radius:.125em;
color:#ccc;
font-family: Arial, Helvetica, sans-serif;
display:block;
padding:.75em 0;
text-shadow:.0625em .0625em .125em rgba(0,0,0,.75)}
	
nav li a:hover {color:#fff;background:rgba(255,255,255,.15)}

@media only screen and (max-width:760px){.categories a,.jp-controls button{text-shadow:1px 1px 0 #fff}body,html{font-size:14px}#menubar{margin:.5em auto}.outer-nav,nav li{padding:0}nav li a{border:1px solid rgba(80,80,80,.5);border-left:0;font-size:.875em;padding:.6em 0;border-radius:0}nav li:last-child a{border-right:0}button svg{font-size:1em;width:1em;height:1em;/*-webkit-filter:drop-shadow(1px 1px 0 #fff);filter:drop-shadow(1px 1px 0 #fff)*/}.jp-playlist ul::-webkit-scrollbar{width:.5em}#jp_container_2{margin:0}button:hover{border:1px outset rgba(192,192,192,1)}.categories strong{font-size:1.1em}.mini strong{font-size:.9em}header{background-size:66% auto}.hgroup{font-size:.8em;font-size:.55em}.jp-controls button{letter-spacing:1px}.categories svg{width:4em;height:4em}.categories li{margin:0 0 1em;width:100%;float:none}}
@media only screen and (min-width:761px) and (max-width:805px){.categories{font-size:.95em}}

@media only screen and (min-width:1280px){body,html{font-size:16px}}@media only screen and (min-width:1440px){body,html{font-size:18px}}@media only screen and (min-width:1600px){body,html{font-size:22px}}@media only screen and (min-width:1920px){body,html{font-size:26px}}@media only screen and (min-width:2240px){body,html{font-size:30px}}@media only screen and (min-width:2560px){body,html{font-size:34px}}@media only screen and (min-width:2880px){body,html{font-size:38px}}@media only screen and (min-width:3200px){body,html{font-size:42px}}@media only screen and (min-width:3520px){body,html{font-size:44px}}@media only screen and (min-width:3840px){body,html{font-size:50px}}@media only screen and (min-width:4160px){body,html{font-size:54px}}@media only screen and (min-width:4480px){body,html{font-size:58px}}@media only screen and (min-width:4800px){body,html{font-size:62px}}@media only screen and (min-width:5120px){body,html{font-size:66px}}