/*
8"""8 8"""" 8"""8  8""""8 8""""8   8   8 8""""8 8""""
8   8 8     8   8  8    8 8    8   8   8 8    8 8
8e  8 8eeee 8eee8e 8e   8 8eeee8ee 8e  8 8e   8 8eeee
88  8 88    88   8 88   8 88     8 88  8 88   8 88
88  8 88    88   8 88   8 88     8 88  8 88   8 88
88  8 88eee 88   8 88eee8 88eeeee8 88ee8 88eee8 88eee

[website] https://www.clickclackhack.de
[mail] post@nerdbude.com
[twitter] @PH_0x17
[github] https://www.github.com/nerdbude
*/
@font-face {
   font-family: 'share_tech_monoregular';
   src: url('/fonts/ShareTechMono-Regular.ttf') format('ttf'),
   	url('/fonts/sharetechmono-regular-webfont.woff2') format('woff2'),
	url('/fonts/sharetechmono-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
  background-image: url("/images/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'share_tech_monoregular';
  background-color: #333333;
  color: #d7d7d7;
  font-size: 16px;
  font-weight: 100;
  min-height: 100%;
  margin-left: 15%;
  margin-right: 15%;
  z-index: 999;
  {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
}

.header {
  background-color: #333333;
  box-shadow: 0 4px 8px 0 #333333, 0 6px 20px 0 #333333;}

.nav-bar {
  background-color: #333333;
  box-shadow: 0 4px 8px 0 #333333, 0 6px 20px 0 #333333;}

.content {
  padding-top: 15px;
  box-shadow: 0 4px 8px 0 #333333, 0 6px 20px 0 #333333;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #333333;}

.footer {
  background-color: #333333;
  padding-top: 20px;
  box-shadow: 0 4px 8px 0 #333333, 0 6px 20px 0 #333333;}

h1 {color: #875fff; background-color: #333333;}
h2 {color: #875fff; background-color: #333333;}
h3 {color: #875fff; background-color: #333333;}


  a {
    text-decoration: underline;
    color: #875fff;
    transition-duration: 0.2s;
    padding-top: 3px;
  }

  a.front {
    text-decoration: none;
    color: #d7d7d7;
    transition-duration: 0.2s;
    padding-top: 3px;}

  a:hover {
    color: #333333;
    background-color: #875fff;
  }

  a.front:hover {
    color: #333333;
    background-color: #875fff;
  }

  a:active {
    color: #8787ff;
  }

  a.front:active {
    color: #8787ff;
  }

  b {
    color: #ff00b6;
  }

  p {
    padding: 0;
    background-color: #333333;
    font-size: 16px;
  }

  .nbgreen {
    color: #afd75f;
  }

  img {
    max-width: 100%;
    margin-bottom: 0px;
  }

  .imgdistance {
    margin-right: 20px;
    margin-bottom: 15px;
    padding: 5px;
    border-style: solid;
    border-color: #875fff;
    border-width: 1px;
  }

  th {
    text-align: left;
    font-weight: 100;
    vertical-align: top;
  }

  td.maintitle {color: #875fff; font-size: 14px}
  td.episodenr {color: #875fff; font-size: 22px;}
  td.title {color: #875fff; font-size: 22px;}
  td.playtime {color: #d7d7d7;}
  td.subtitle {color: #8a8a8a;}
  td.separator {color: #d7d7d7; font-size: 22px;}
  td.abo {color: #875fff; font-size: 18px;}

  th.desc {color: #8a8a8a;}
  th.date {color: #8a8a8a;}
  th.time {color: #8a8a8a;}
  th.change {color: #d7d7d7;}
  th.red {color: #ff5f5f;}
  th.green {color: #5fd75f;}
  th.yellow {color: #ffff5f;}
  th.user {color: #8787ff;}

  #content {
    margin-left: 15%;
    margin-right: 15%;
  }



  /* MENU BUTTON */

  .button {
    background-color: #875fff;
    color: #272727;
    border-color: #875fff;
    border-width: 2px;
    border-style: solid;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }

  .button:hover {
    background-color: #333333;
    border-color: #875fff;
    border-width: 2px;
    border-style: solid;
    color: #875fff;
  }
  
  /* LIVE BUTTON */

  .livebutton {
    background-color: #ff00b6;
    color: #272727;
    border-color: #ff00b6;
    border-width: 2px;
    border-style: solid;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }

  .livebutton:hover {
    background-color: #333333;
    border-color: #ff00b6;
    border-width: 2px;
    border-style: solid;
    color: #ff00b6;
  }

  .nextlive {
    background-color: #ff00b6;
    border-color: #ff00b6;
    border-width: 2px;
    border-style: solid;
    color: #333333;
    border-radius: 20px;
    padding: 5px;
  
  }

  /* POD BUTTON */

  .buttonepisode {
    background-color: #875fff;
    color: #333333;
    border-color: #875fff;
    border-width: 2px;
    border-style: solid;
    padding: 8px 10px;
    margin-right: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;

  }

  .buttonepisode:hover {
    background-color: #333333;
    border-color: #875fff;
    border-width: 2px;
    border-style: solid;
    color: #875fff;
  }