/*
SimpleYouTubePlayer
by John E Maddox
*/

/* === media list === */

/* BOF For demo, centers video list on screen */

#mList {
    max-width: 295px;
    margin: auto;
}

@media screen and (orientation: landscape) and (min-width: 801px) {

    #mList {
        max-width: 600px;
    }
}

/* EOF demo */


#mList A {
    color: #FFF;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-table;
}

    #mList A:hover {
        border: none;
        text-decoration: none;
    }
    /* media list title overlay */
    #mList A DIV {
        visibility: visible;
        background: rgba(0, 0, 0, .8);
    }

    /* On hover actions */


    #mList A:hover DIV {
        visibility: hidden;
    }

/* === popup media player === */

/* background overlay */

#mPlayer {
    display: none;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 20;
    z-index: 999;

}

#mPlayer DIV {
     position: fixed;
     background: #000;
}
 #mPlayer DIV {
     left: 0;
     top: 50px;
}
 #mPlayer DIV, #mPlayer DIV iframe {
     width: 100%;
     height: 200px;
}
 #mPlayer DIV iframe {
     padding: 10px;
}
 @media screen and (min-width: 500px) {
     #mPlayer DIV {
         width: 400px;
         height: 200px;
         left: calc(50vw - 200px);
         top: 100px;
    }
     #mPlayer DIV iframe {
         width: 400px;
         height: 200px;
    }
     #mPlayer DIV iframe {
         padding: 0;
    }
}
 @media screen and (min-width: 650px) {
     #mPlayer DIV {
         width: 600px;
         height: 350px;
         left: calc(50vw - 300px);
         top: calc(50vh - 125px);
    }
     #mPlayer DIV iframe {
         width: 600px;
         height: 350px;
    }
}
 @media screen and (min-width: 901px) {
     #mPlayer DIV {
         width: 800px;
         height: 450px;
         left: calc(50vw - 400px);
         top: calc(50vh - 225px);
    }
     #mPlayer DIV iframe {
         width: 800px;
         height: 450px;
    }
}


@media screen and (max-height: 401px) {
    #mPlayer DIV {
        height: 250px;
        top: calc(50vh - 100px);
    }

        #mPlayer DIV iframe {
            height: 250px;
        }
}

@media screen and (max-height: 500px) {
    #mPlayer DIV {
        height: 300px;
        top: calc(50vh - 150px);
    }

        #mPlayer DIV iframe {
            height: 300px;
        }
}

@media screen and (max-height: 600px) {
    #mPlayer DIV {
        height: 300px;
        top: calc(50vh - 170px);
    }

        #mPlayer DIV iframe {
            height: 300px;
        }
}