/*
#subtitle_quelle
        {
                background-color: black;
                position: absolute;
                width: 500px;
                height: 25px;
                top: 30px;
                left: 18px;
                color: #000000;
                font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
                z-index: 999;
                font-size: 12px;
                color: white;
        }
 */
/*
td.playlist:hover { background-color:#efefef !important;}
*/

.p1 {background-color:rgba(255, 128, 0, 0.2);}

td.playlist:hover { background-color:rgba(255, 128, 0, 0.2) !important;}
hr {border-style: dotted;}
/*
td. {background-color:#efefef; font-family: Arial; font-size: 12px;}
*/
td.header {background-color: transparent; border-bottom: 1px dotted;}
td.header2 {background-color: transparent; font-family: Arial; font-size: 12px; font: #000000;}
td.header_info {background-color: transparent; font-family: Arial; font-size: 12px; border: 1px dotted;}
tr.playlist {border-bottom: 1px dotted;}
td.playlist { background-color:transparent; font-family: Arial; font-size: 12px; color: #000000;}
/*
a:link { color:black; text-decoration:none; }
a:visited { color:black; text-decoration:none;}
a:link { color:#086A87; text-decoration:none; }
a:visited { color:#086A87; text-decoration:none;}
*/
a:link { color:#000000; text-decoration:none; }
a:visited { color:#000000; text-decoration:none;}

/* Fade In */
@-moz-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.myfadeIn {
-moz-animation: fade 3s ;
-webkit-animation: fade 3s ;
animation: fade 3s ;
}

.myvisible {
  visibility: visible;
  opacity: 1;
  /* When showing the content we only need to transition the
     opacity, and everything else should be applied instantly */
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.myhidden {
  visibility: hidden;
  opacity: 0;
  /* When hiding the content we should delay the transition
     of the visibility value, so that it happens at the end
     of the opacity transition. Note that even though it works
     with visibility, the same trick doesn’t work with display,
     position, or height (barring a fixed height). */
  -webkit-transition: visibility 0s 1s, opacity 1s linear;
  -moz-transition: visibility 0s 1s, opacity 1s linear;
  -o-transition: visibility 0s 1s, opacity 1s linear;
  -ms-transition: visibility 0s 1s, opacity 1s linear;
 transition: visibility 0s 1s, opacity 1s linear;

}

#myImg
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
            -ms-transition: opacity 0.5s ease-in;
        }
#myImg.fade-out
        {
            opacity:0;
        }
#myImg.fade-in
        {
            opacity:1;
        }

/*
.myfadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;

}
*/

#video_overlays {
  position: absolute;
  border: 1px dotted grey;
  display: none;
  z-index: 2;
  left: 10%;
  top: 68%;
  bottom: 0;
  width: 100px;
  height: 28px;
}

#video_overlays2 {
  position: absolute;
  border: 1px dotted grey;
  display: none;
  z-index: 2;
  left: 3%;
  top: 8%;
  bottom: 0;
  width: 250px;
  height: 110px;
}

#video_box{position: relative;}