/* 
 * https://colorschemedesigner.com/csd-3.5/#4X51TtksHw0w0
 */

body {
   font-family: "SuisseIntlMono", "PrestigeElite", "Courier New", Courier, monospace;
   background-color: #000;
   font-size: 11pt;
   padding: 0;
   margin: 0;
   color: #2370ff;
   height: 100%;
}


.title, h1, #nav, #player_container {
  font-family: "PrestigeElite", "Courier New", Courier, monospace;
}

.emph {
  color: #e649ff;
  }


body.day,
body.day .shoutbox li span.shoutbox-comment-ago {
    background-color: #FFF;
   color: #2370ff;
}


a, #controls
{
   color: #e649ff;
   text-decoration: none;
  -webkit-text-fill-color: #e649ff;
}

body.day a,
body.day .emph, .emph,
body.day #player_container,
    body.day #controls a,
    body #controls a {
   color: #e649ff;
   text-decoration: none;
  -webkit-text-fill-color: #e649ff;
}

h3 {
    font-size: 100%;
    font-weight: normal;
}

body.day h3 {
    font-weight: bold;
}

#main {
  /*max-width: 1280px;
  margin: 0 auto;#*/
}

#content, #header {
  max-width: 1200px;
  width: 100%;
  clear: both;
  padding: 2em 0;
  margin: 0 auto;
}

#edito, #show{
  width: 30%;
  margin-right: 3%;
  float: left;
  clear: both;
}

#edito, #show, #program, .chat, .shoutbox{
  margin-top: 1em;
}

#about {
        max-width: 40%
}


.shoutbox, #week, #about {
    margin-bottom: 2em;
}

#nav a {
  -webkit-text-fill-color: transparent;
  }

.socials img {
    height: 32px;
}

body img.day {
    display: none;
}

body.day img.day {
    display: inline;
}

body.day img.night {
    display: none;
}

bodyimg.night {
    display: inline;
}

body.day img.night {
    display: none;
}

rien 
{
    background-image: -webkit-linear-gradient(left, #2370ff, #e649ff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #2370ff, #e649ff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #2370ff, #e649ff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #2370ff, #e649ff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #2370ff, #e649ff); /* Standard syntax; must be last */
    color:transparent; 
    -webkit-background-clip: text;
    background-clip: text;
  -webkit-text-fill-color: transparent;
  }

h1, h3, .title a, #player_container, body.day #player_container,
.shoutbox li span.shoutbox-comment-ago,
.shoutbox li span.shoutbox-username,
a, body.day a, h3, hr, #nowplaying
{
    background-image: -webkit-linear-gradient(left, #e649ff, #2370ff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #e649ff, #2370ff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #e649ff, #2370ff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #e649ff, #2370ff); /* For old Opera (11.1 to 12.0) */
    background-image:      linear-gradient(to right, #e649ff, #2370ff); /* Standard syntax; must be last */
    color:transparent; 
    -webkit-background-clip: text;
    background-clip: text;
  -webkit-text-fill-color: transparent;
  }

a:hover {
  font-weight: bold;
}

h1, h3 {
    display: inline-block;
    font-weight: normal;
}

h1 {
    font-weight: bold;
    font-size: 130%;
    margin: 0;
}

hr {
  border-top: 1px solid #e649ff;
  }

#nav, #footer {
    background-image: -webkit-linear-gradient(left, #e649ff, #2370ff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #e649ff, #2370ff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #e649ff, #2370ff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #e649ff, #2370ff); /* For old Opera (11.1 to 12.0) */
    background-image:      linear-gradient(to right, #e649ff, #2370ff); /* Standard syntax; must be last */
    max-width: 100%;
    font-weight: bold;
    font-size: 140%;
    clear: both;
    margin-bottom: 1.0em;
    padding: 0.8em 0em 0.5em 0em;
    margin-left: -0em;
    margin-right: -0em;
}

#footer {
    position: fixed;
    bottom: 1em;
    height: 1em;
}
    

#nav_inner {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

#nav a {
    background-image: none;
    text-decoration: none;
    text-align: center;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #000;
  -webkit-text-fill-color: #000;
}

body.day #nav a {
    color: #FFF;
  -webkit-text-fill-color: #FFF;
}

#nav a:first-child{
  text-align: left;
}

#nav a:last-child{
  text-align: right;
}

#week {
    width: 100%;
}

#week .day {
    float: left;
    width: 100%;
}

table {
  border-collapse: collapse;
  table-layout: auto;
      max-width: none;
    width: auto;
    min-width: 100%;
  margin-top: 1em;
}  

table td {
    padding: 0;
}

table td a {
    display: inline-block;
}

td.showname { 
}

td.hour {
  width: 1px;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 1em;
}

tr:first-child {
  border-top: none;
}

tr:last-child {
  border-bottom: none;
}

tr {
}

#week td {
}

table a {
  text-decoration: none;
}

.insta {
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
}

#program ul, #shows ul {
    padding-left: 0;
    padding-right: 0;
}
#program li, #shows li, #archive li, #about li {
  list-style-type: none;

}

#about li h3 {
    margin:0 ;
}

#program {
  margin-top: 1em;
  width: 30%;
  margin-right: 3%;
  float: left;
}

#program a {
}

#edito img {
  background-color: white;
  padding: 10px;
}

body:not(.day) img.invert {
   -webkit-filter: invert(1);
   filter: invert(1);
   }

#shows {
  width: 60%;
  float: right;
  max-height: 300px;
  overflow-y: scroll;
}

.show_time {
   color: #2370ff;
}

.title {
  float: left;
  display: inline;
  line-height: 0.8;
}

.title a {
  text-decoration: none;
}

.title h1 {
  margin-top: 0em;
  font-size: 140%;
  font-weight: bold;
  letter-spacing: 0.65em;
  line-height: 130%;
display:inline-block; 
  
}

.title img {
    margin-left: -2.5em;
    height: 10em;
    width: 10em;
}

#player_container {
  text-align:left;
  float: right;
  margin-top: 0em;
  margin-bottom: 1em;
  margin-left: 3em;
  font-size: 140%;
  padding: 0;
}

#controls {
  margin-right: 1em;
  float: left;
  font-style: normal;
  display: block;
  padding-top: 0.0em;
  width: 1em;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#controls a {
  text-decoration: none;
  display: block;
}

#controls img {
    height: 64px;
}

#controls a {
    width: 3em;
    height: 3em;
}

#controls .play {
    background: url('/images/playradient.png') center no-repeat;
    background-size: 3em;
}

#controls .pause {
    background: url('/images/pauseradient.png') center no-repeat;
    background-size: 3em;
}

#controls a.play:hover {
    background: url('/images/playradienthover.png') center no-repeat;
    background-size: 3em;
}

#controls a.pause:hover {
    background: url('/images/pauseradienthover.png') center no-repeat;
    background-size: 3em;
}

#nowplaying {
    margin-left: 3.8em;
}

#listeners{
  font-style: normal;
}

.shoutbox {
    margin-top: 1em;
}

.shoutbox ul {
  padding: 0;
}

.shoutbox li {
  list-style-type: none;
}

.shoutbox li span.shoutbox-username{
  display: inline;
  margin: 0.5em;
   color: #2370ff;
}

body.day .shoutbox li span.shoutbox-comment-ago{

}
.shoutbox li p.shoutbox-comment{
  display: inline;
   color: #2370ff;
}

form input {
   font-family: "PrestigeElite", "Courier New", Courier, monospace;
   font-size: 100%;
   text-align: left;
}

textarea:focus, input:focus{
    outline: none;
}

.shoutbox form input {
  height: 18px;
  padding: 1px;
  border: 1px;
  margin: 1px;
  width: 28%;
  display: inline;
}

.shoutbox form input#shoutbox-comment {
  width: 70%;
}



.shoutbox {
  width: 31%;
  float: left;
  margin-right: 2%;
}

.shoutbox ul {
  padding: 0;
}

.shoutbox li {
  list-style-type: none;
}

.shoutbox li span.shoutbox-username{
  display: inline;
  margin: 0.5em;
}

.shoutbox li p.shoutbox-comment{
  display: inline;
}

.shoutbox form input {
  height: 24px;
  padding: 1px;
  border: 1px;
  margin: 1px;
  width: 28%;
  display: inline;
}

.shoutbox form input[type="submit"] {
    padding-bottom: 3px;
}

.shoutbox form input#shoutbox-comment {
  width: 70%;
}

  .shoutbox form input#shoutbox-message {
  display: none;
}


/*--------------------------------------------------------MOBILE */

@media only screen and (orientation: portrait) {
    body {
            font-size: 11pt;
    }
    
    #main {
    }

  .title{
    width: 30%;
    display: block;
    margin: 2em auto;
    float: none;
  }

  .title h1 {
      text-align: left;
      font-size: 300%;
  }

  #player_container{
      margin-top: 1em;
      margin-bottom: -1em;

      clear: both;
    max-width: 100%;
    margin-left: 3em;
  }

  #edito, #show, #program, .chat, .shoutbox{
    width: 100%;
  }

  #nav_inner{
      padding: 1em;
      display: block;
  }


  .shoutbox form input {
  height: 40px;
  padding: 1px;
  border: 1px;
  margin: 10px;
  font-size: 1.5em;
  width: 100%;
  display: inline;
  }



}

blink {
  -webkit-animation: 1s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
  animation: 1s linear infinite condemned_blink_effect;
}

/* for Safari 4.0 - 8.0 */
@-webkit-keyframes condemned_blink_effect { 
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}