/*
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;
    left: 0;
    top: 0;
}

    /* video player */

    #mPlayer DIV {
        position: fixed;
        background: #000;
        width: 800px; /* width of YouTube Player */
        height: 450px; /* height of YouTube Player */
        left: calc(50vw - 400px); /* 400 is .5(800), centers x axis*/
        top: calc(50vh - 225px); /* 225 is .5(450), centers y axis*/
    }