/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

    html,body,div,span,applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,em,img,ins,kbd,q,s,samp,
    small,strike,strong,sub,sup,tt,var,
    b,u,i,center,
    dl,dt,dd,ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td,
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary,
    time,mark,audio,video{
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section{
        display:block;
    }
    body{
        line-height:1;
    }
    ol,ul{
        list-style:none;
    }
    blockquote,q{
        quotes:none;
    }
    blockquote:before,blockquote:after,
    q:before,q:after{
        content:’’;
        content:none;
    }
    /* remember to define visible focus styles! 
    :focus{
        outline:?????;
    } */
    
    /* remember to highlight inserts somehow! */
    ins{
        text-decoration:none;
    }
    del{
        text-decoration:line-through;
    }
    
    table{
        border-collapse:collapse;
        border-spacing:0;
    }
    
    
    
    
    
    /*------------------------------------*\
        $MAIN
    \*------------------------------------*/
    body {
        background-color: #000000;
        color: #FFFFFF;
        font-family: 'Courier New', Courier, monospace;
        padding: 2em;
    }

    #home {
        position: relative;
        height:100%;width:100%;
    }

    #credentials {
        text-align:center;
    }
    #credentials p{
        margin-bottom: 0.5em;
    }

    .verticalhorizontal {
        position: fixed;
        top:50%;left:50%;
        transform:translate(-50%,-50%);
    }

    #player {
        width:80%;
        display:inline-block;
    }
    #chat {
        max-width:18%;
        height:100%;
        display:inline-block;
    }

    .player .player-video {
        padding-top: 56.25%;
        position: relative;
        height: 0;
    }
    .player .player-video iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }
    .player .player-chat {
        height: 400px;
    }
    .player .player-chat iframe {
        width: 100%;
        height: 100%;
    }
    @media screen and (min-width: 850px) {
        .player {
          position: relative;
        }
        
        .player .player-video {
          width: 75%;
          padding-top: 42.1875%;
        }
      
        .player .player-chat {
          width: 25%;
          height: auto;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }