@font-face {
    font-family: 'DejaVuSansMonoBook';
        src: url('DejaVuSansMonoBook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }

body {color:#dcc;background-color:#000000;font-family:consolas,DejavuSansMonoBook,monospace,arial,helvetica; background-position:100%;margin:auto;padding:2vw;max-width:100%}
#fxb {max-width:99vw;}

a {color:#ccf;opacity:0.85}
a:hover		{background-color:#333;opacity:1}
code {background-color:#444;font-size:1em;}
.ib,a.ib,h4 {display:inline-block;}
h1,a.h1	{font-size: 1.5em;font-weight:bold;background:linear-gradient(to right,#c88,#88c);color:#000;padding:4px;margin:5px;display:inline-block;vertical-align:middle;text-decoration:none;border-radius:4px}
h2,a.h2	{font-size: 1.4em;color:#acc;padding:0.1em;margin:0.1em;display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:middle;}
h3 {font-family:arial,helvetica;font-size:1.4em;background-color:#222126;border-radius:4px;display:inline;color:#cbb}
.h3,a.h3	{display:inline;padding:0.2em 0.4em 0.2em 0.4em;border-radius:4px;white-space:nowrap;border:2px solid #d77;background:linear-gradient(to right,#886,#807780);color:#2a2a2a;line-height:2em;margin:0em 0em 1em 0em;}
img {margin:0.3em}
li {margin-bottom:1em;}
p {line-height:150%;margin:1em;}
.sql {color:#a88;font-size:0.7em;}
td   {border-right:solid 1px grey;border-bottom:solid 1px grey;background-color:#400;vertical-align: top; text-align: left; word-wrap:break-word;padding:3px;} 
tr {clear:both;}
#nav1 {font-size:1.5rem;}

/*search*/
.inputc {border-radius:4px;position: relative; display:inline-flex;align-items: center;width:36rem;margin:0.5rem;max-width:80vw;}
.inputi {padding: 0.5rem 2.5rem 0.5rem 0.8rem;border: 1px solid #ccc;border-radius: 5px;box-sizing: border-box;width: 32rem;max-width:60vw; outline: none;background-color:#222;color:#dda;font-size:1rem;font-size:1.5rem;}
.inputx {position: absolute;left:30rem;background: none;border: none;color: #aaa;cursor: pointer;display: none;background-color:#444;border-radius:6px;display:none}
.inputx:hover {color: #fff;}
.inputc input:not(:placeholder-shown) + .inputx {display:block;}

.sbtn {font-size:1.5rem;display:inline-block;color:#000;background-color:#222;cursor:pointer;}
 
/*navigation*/
.navbar {display: flex;width: 100%;max-width: 1400px;margin-right: auto;margin-left: 0;box-sizing: border-box;padding:5px;}
.btn,.nbtn,.tbtn  {display:inline-block;margin:5px;padding:2px;background-color:#13182f;color:#ffd;text-decoration:none;box-shadow:4px 3px 5px #1e1e4f;border-radius:4px;cursor:pointer}
.nbtn {font-size:1.3em;flex-grow: 1;flex-basis: 0;text-align: center;padding: 12px 7px;background-color: #15273a;border: 3px solid #0056b3;white-space: nowrap;overflow: hidden;box-sizing: border-box;border-radius:15px;text-overflow:ellipsis;transition: background-color 0.3s ease;}
.tbtns {display:inline-block;}
.tbtn {border-radius:8px;background-color:#622a2a}
.morebtn {position:absolute;right:1.5em;top:5px;background-color:#888;color:#222;padding:3px;display:inline;font-weight:bold;}
a.arrbtn {font-size:1.3em;background-color:#222;color:#cc9;padding:0.3em 0.7em;margin:0em 0.7em 1em 0.2em;}
.st1 {display:none}
.st2 {display:none}

/*player*/
#player {display:none}
audio::-webkit-media-controls-panel{background-color: #777;color:#fff;}
audio {margin:0.5em;}

#ctrl {background-color:#000;color:#fff;z-index:1;border:5px groove #ca7;border-right:8px groove #ca7;margin:0px;padding:4px;position:fixed;bottom:0px;left:0px;max-width:97vw}
#ctrl0 {display:inline;width: 90vw;padding:2px;margin:0px;scrollbar-width:thin;}
#ctrl0 > * {vertical-align:top;}
#ctrl1 {display:inline-block;font-size:1.7em;width:1.7em;height:1.7em;border:3px ridge #caa;background-color:#555;font-family: verdana, arial, helvetica;text-align:center;margin-top:3px;}
#ctrl2 {display:inline;}
#ctrltoggle {background-color:#888;color:#000;font-size:2em;display:inline-block;padding:0px 4px;float:right;}
#proginfo {font-size:1.2em;color:#f88;margin:0px 6px;overflow:hidden;display:inline;max-width:50%;}
#pgtp {display:inline-block;color:#ffd;margin:1px 3px;font-size:0.7em;min-width:7em;max-width:10em;}
#transport {display:none;}
#transport td {color:#ff8;background-color:#373;border:1px solid #caa;padding:1px;}
.sctr {overflow:scroll;display:inline-block;scrollbar-width: thin;white-space:nowrap;height:60px;max-width:95%}
.sctr::-webkit-scrollbar {height:6px;width:6px;background:#222;}
.sctr::-webkit-scrollbar-thumb {background: #883;}
.sctr::-webkit-scrollbar-corner {background: #222;}
#volume {display:inline;white-space:nowrap}
#vbar {width:4em;margin:0px 2px;display:inline;}
input[type=range] {background: transparent;border-color: transparent;color:#88f;}
#selreg {color:#ffff00;background-color:#222;margin:1em 0.3em 0.3em 0.3em}
#linkarea {display:inline-block;word-wrap:break-word;margin:0px 0px 0px 5px;font-size:0.8em;}
#linktxt {overflow:hidden;display:inline;color:#aa9;}
#link {text-decoration:none;display:inline} 
#ctrl .sq {margin:3px;}
#ctrl .br,#ctrl .sr {margin:0px;padding:0px;}
#ctrl .br {margin-left:1px;font-size:1.5em;}
#ctrl .cn,#ctrl .ch,#ctrl .sr {font-size:80%;}

/*programs*/
#tab {margin:0 auto;max-width:100%;padding:5px;}
.cmgrid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:5px 20px;width: 100%;}

.bb {border:2px solid #6ad;}
.bg {border:2px solid #7d7;background:rgb(0,200,0);background-color:#252;}
.cmbox {font-size:1.4em;font-family:arial,helvetica;overflow:hidden;color:#d9804a;background:linear-gradient(135deg,#461f1f,#151414);margin:2px 4px;padding:1px 3px 1px 1px;cursor:pointer;}
.cmbox img{margin:0 0.3em;}		
.fvb {font-size:2em;color:#8ff;padding-right:0.1em;width:0.7em;overflow:hidden;display:inline-block;vertical-align:top;cursor:pointer;}
a.redlink {font-size:1.5em;display:inline-block;color:#a77;margin:1em;}
.stn {cursor:pointer;}
.stn1 {width:48%;margin:0.4em 2em 0.5em 0.2em;display:inline-block;vertical-align:top}
.stnblock {margin:5px 0px;clear:both;background:linear-gradient(135deg,#0d0d20,#000311);padding:0.2em;overflow:hidden;display:flex}

/*station info*/
.bra {color:#8d8;}
.call {color:#afa;}
.cb {clear:both;}
.desc {color:#aaa;}
.fl {float:left;}
.frq {color:#add;white-space:nowrap;}
.gry {color:#aaa;}
.red {color:#f00;}
.hide {display:none;}
.hp {font-size:0.8em;display:inline-block;}
.loc {color:#dda;}
.sqhide {opacity:0.6;background-color:#800000} 
.sqinac {opacity:0.3}
.sel {color:#ffa;background-color:#555}
.slo {color:#eb8;}
.stninfo {margin:0.5em 0 0 0;font-size:0.9em;line-height:115%;}
.sty {color:#a77;cursor:pointer;}
.td1 {width:40%;color:#bbb;}
.tdc {width:10%;}

/*social media*/
a.fb,a.x,a.ig,a.vk {padding:0em 0.4em;font-weight:bold;border-radius:0.3em;text-decoration:none}
a.fb {color:#fff;background-color:#008}
a.x {color:#fff;background-color:#000}
a.ig {color:#fff;background: radial-gradient(circle at 30% 107%, #bbb497 0%, #bbb497 5%, #bb5949 45%,#b6249f 60%,#285aeb 90%);padding:0 0 0 0.2em;}
a.vk {color:#fff;background-color:#00a}

/*stream boxes*/
.sqdiv {max-height:12em;width:50%;overflow-y:auto;scrollbar-color:#4c4cab #2a2a35;display:inline-block;position:relative;margin:0.3em 0em 0.5em 0em;background-color:#080a1a;cursor:pointer;}
.sq,.cn,.br,.sr,.ch {padding:1px;display:inline-block;}
.sq {background-color:#222f35;margin:4px;border:2px ridge #666;border-radius:4px}
.sqsep {color:#666;}

.cn {color:#ee9;background-color:#000;}
.br {color:#ccc;background-color:#444;}
.sr {font-size:0.8em;color:#aaa;}
.ch {font-size:50%;}
.rp {font-size:0.66em;color:#bbb;text-align:center}
.nssl {color:#000;background-color:#aaa;}

.aac1 {font-size:0.7em;}
.abt {color:#fff;text-decoration:none;display:inline-block;margin:1em;}
.atoz {font-size:2em;}
.autodj {font-size:0.5em;color:#ff0;vertical-align:top;overflow:hidden;white-space:nowrap;}
.e1 {background-color:#000;color:#ffd;font-weight:bold;}
.framedinfo {border:2px solid #225;background-color:#180a0a;font-size:0.8em;padding:0.3em;margin:0.5em;display:inline-block;}
.geob {font-size:0.5em;display:inline-block;color:#f00;vertical-align:top;}
.libig {font-size:1.5em;color:#66a;}
.inl {display:inline;}
.nwr {white-space:nowrap;min-width:12em;text-align:left;}
.r,a.r {text-align:right;display:block;}
.sm,a.sm {font-size:0.8em;display:inline-block;}
.sm2,a.sm2 {font-size:0.65em;display:inline-block;}
.smlink {font-size:0.5em;display:block;color:#aaaae1;font-family:Verdana,Arial,Helvetica;display:none;}
.subnotes,a.subnotes {font-size:0.6em;display:inline-block;}
.u,a.u {text-decoration:underline;font-size:1em;}

.lnk {line-height:150%;font-size:2em;}
.let {font-size:3em;color:#603;font-family: Comic Sans MS;}

#cookieDiv {position: fixed;font-size:1em;left: 0;bottom: 0;width: 100%;padding:0.5em;background-color: #602;color:#fff;z-index:999;}
#cookieText {text-align: left;float:left;width:70%}
#cookiegotit {display:inline-block;text-align:right;background-color:#333;color:#ffa;font-size:1.3em;padding:0.2em;margin:1em;border:1px solid #aaa;}

/* overrides */
.emp {border:3px solid #d44;background:linear-gradient(to right,#435,#214);}
.nbtn.emp2 {border:3px solid #4d4;background:linear-gradient(to right,#435,#214);}
.tbtn.emp2 {background-color:#23622a;}

@media (orientation:portrait) {
  tr,td,th {padding:4px;text-align:center}
  header,#tab {font-size:0.77em;}}

@media (max-width:1200px) {
  tr,td,th {padding:10px;text-align:center}  
  #nav1 {display:inline-block;}
  .nbtn {font-size:1em;}
  }  

@media (max-width:768px) {
  tr,td,th {padding:5px;text-align:center}
  .cmgrid {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .nbtn {font-size:0.85em;}
  }
  
@media (max-width:500px) {
  tr,td,th {padding:2px;text-align:center}}