/* 
    Created on : 15-Mar-2015, 20:45:01
    Author     : Matt
*/

@media screen and (max-width: 99999px){
    .viewPort{
        position: relative;
        margin: auto;
        width: 807px;
        height: 100%;
        margin-top: 1%;
        color: black;
        text-align: center;
    } 
    .viewSoundFile{
        width: 100%;
        height: 315px; 
    }
    .viewSoundFileTranscript{
        width: 800px;
        height: 1175px; 
    }
    .viewSoundFileWithSubtitles{

        width: 807px;
        height: 300px; 
        margin-top: 5%;
    }
    .video{
        width: 100%;
        height: 100%;
    }
    .viewPDF{
        width: 100%;
        height: 1000px;
    }
    .viewPDF object{
        width: 807px;
        height: 1000px;    
    }
    .viewAnimation{
        position: relative;
        background-image: url("../images/TV-BASE_807.png");
        //background-image: none;
        background-repeat: no-repeat;
        height: 672px;
        width: 807px;
        margin: auto;
        top : 0px;
        pointer-events:auto;
    }
    .viewAnimation video{
        position: relative;
        width: 700px;
        height: 650px;
        top: -20px;
        left: 0px;


    }
    .viewAnimation a{
        color: black;
    }

    .viewTranscript{


    }



    .youHaveSelected{

        margin: auto;
        border: 2px solid black;
        //padding: 10px 40px; 
        background: rgba(163, 204, 255, 1);
        width: 807px;
        height: 50px;
        display: table-cell;
        white-space: nowrap;
        border-radius: 10px;
        text-align: center;
        //display: inline-block;
        vertical-align: middle;
        pointer-events:auto;

    }

    .productTitle{
        font-size: 3EM;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1%;
    }

    .productTitle_ReducedFont{
        font-size: 2EM;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1%;
    }

    .buttonSelect{
        margin: 5px;
        margin-top: 8px;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 6em;
        height: 1.5em;
        vertical-align: middle;
        font-weight: normal;
        background: rgba(163, 204, 255, 1);
        font: inherit;
        float: right;
        pointer-events:auto;


    }
    .buttonSelect:hover{
        cursor: pointer;
    }

    .backButton{
        position: relative;
        background-image: url("../images/BACK_BUTTON.png");
        background-repeat: no-repeat;
        width: 69px;
        float: right;
        height: 50px;
        margin-right: 1%;
        margin-top: -7%;
    }
    .backButton:hover{
        background-image: url("../images/BACK_BUTTON_rollover.png");
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .backButton:active{
        background-image: url("../images/BACK_BUTTON_active.png");
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .backButtonLabel{
        position: relative;
        vertical-align: middle;
        top:17px;
        left: 10px;
        font-size: 0.9em;
        color: black;
        font-weight: bold;
    }
    .audioPicture{
        position: relative;
        background-image: url("../images/ChoiceMP3.png");
        background-repeat: no-repeat;
        cursor: pointer;
        width: 119px;
        height: 119px;
        margin-left: 40%;
        margin-top: 0%;
   } 
   .classRoomCollectionPicture{
        position: relative;
        background-image: url("../images/chalkboard_120.png");
        background-repeat: no-repeat;
        cursor: pointer;
        width: 119px;
        height: 119px;
        margin-left: 40%;
        margin-top: 0%;
   } 


    .viewStyleButtonSelect{
        position: relative;
        background-color:#548dd3;
        border: 3px solid #1e5abe;
        height:100px;
        width:100px;
        border-radius: 105px;
        -webkit-border-radius:105px;
        -moz-border-radius:105px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 

        margin: 5px;
        //margin-top: -19.5%;
        //margin-right: -23.7%;
        //display: inline-block;
        float: right;

    }
    .viewStyleButtonSelect:hover{
        background-color: #3f96e9;
        cursor: pointer;
    }
    .viewStyleButtonSelect:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
        cursor: pointer;
    }
    .viewStyleButtonSelectTitle{
        margin-top: 30%;
        color: white;
    }
    .choiceButtons{
        position: relative;
        margin-left: 20%;
        height: 150px;
        width: 350px;
        display: inline-block;
        margin-right: 20%;

    }

    .transcript{
        margin: 5%;
    }

    .buttonInfo{
        position: relative;
        background-color:#548dd3;
        border: 3px solid #1e5abe;
        height:70px;
        width:70px;
        border-radius: 75px;
        -webkit-border-radius:75px;
        -moz-border-radius:75px;
        display: inline-block;
        vertical-align: middle;
        font-weight: bolder;
        pointer-events:auto;
        margin-right: 5px;
        margin-top: -1%;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    .buttonInfo:hover{
        background-color: #3f96e9;
    }
    .buttonInfo:active{

        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    .buttonInfoText{
        font-family: Consolas, monospace;
        color: white;
        font-size: 2.5em;
        margin-top: 10%;
        cursor: pointer;
    }

    table {  
        color: #333;
        width: 100%; 
        border: 2px solid black;
        border-collapse: 
            collapse; border-spacing: 0; 
    }

    td, th {  
        border: 1px solid transparent; /* No more visible border */
        height: 60px; 
        transition: all 0.3s;  /* Simple transition for hover effect */
    }

    th {  
        background:  rgba(84, 141, 211, 1);  /* Darken header a bit */
        font-weight: bold;
        color: white;
    }

    td {  
        background: #FAFAFA;
        text-align: center;
        
        
    }

    /* Cells in even rows (2,4,6...) are one color */        
    tr:nth-child(even) td { background: rgba(163, 204, 255, 1); }   

    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */        
    tr:nth-child(odd) td { background:  white }  

    /*tr td:hover { background: #666; color: #FFF; }  */
    /* Hover cell effect! */


    .megaPhone_Stacked{
        background-image: url("../images/megaphone_72_stacked.png");
        background-repeat: no-repeat;
        width: 72px;
        height: 73px;
        position: relative;
        left: 10%;
        top: 5%;
        
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 

        
    }

    .megaPhone_Stacked:hover{
        background-position: 0 -73px;
        cursor: pointer;
    }

    .megaPhone_Stacked:active{
        cursor: pointer;
       -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
        
    }
        
    #tracktime{
        margin-top: 20%;
    }   
    
    .td_freelistening{
        text-align: left; 
        width: 38%;
    }
    
    .youtubelink{
        margin-top: 5%;
        font-size: 1.5EM;
    }
    
    
    

}
@media screen and (max-width: 840px){
    .viewPort{
        width: 640px;
    }
    .viewPDF object{
        width: 640px
    }
    
    .youHaveSelected{
        height: 120px;
        width: 640px;
    }

    .viewSoundFileWithSubtitles{

        width: 640px;
        height: 300px; 
        margin-top: 5%;
    }

    .viewSoundFileTranscript{
        width: 640px;
        height: 1160px; 
    }

    .viewAnimation{
        background-image: url("../images/TV-BASE_640.png");
        height: 533px;
        width: 640px;
    }

    .viewAnimation video{
        width: 520px;
        height: 500px;
        top: 0%;
        left: 0%;
    }
    
    .backButton{
        margin-top: 0%;
    }
    
    .td_freelistening{
       
        width: 35%;
    }

}
@media screen and (max-width: 680px){
    .viewPort{
        width: 480px;
    }

    .viewPDF object{
        width: 480px
    }

    .viewAnimation{
        background-image: url("../images/TV-BASE_480.png");
        height: 400px;
        width: 480px;
        top : 0%;
    }
    .viewSoundFileTranscript{
        width: 480px;
        height: 1160px; 
    }
    .viewSoundFileWithSubtitles{

        width: 480px;
        height: 300px; 
        margin-top: 5%;
    }

    .viewAnimation video{
        width: 400px;
        height: 380px;
        top: 0px;
        left: 0px;
    }

    .choiceButtons{
        margin-left: 15%;
        margin-right: 20%;
    }

    .youHaveSelected{
        
        height: 120px;
        width: 480px;
    }
    
    .productTitle_ReducedFont{
        font-size: 1.5EM;
    }
    
    
    .backButton{
        margin-top: 0%;
    }
    
    .td_freelistening{
       
        width: 31%;
    }


}
@media screen and (max-width: 520px){
    .viewPort{
        width: 310px;
    }
    .viewPDF object{
        width: 310px
    }
    .viewSoundFileTranscript{
        width: 310px;
        height: 1160px; 
    }

    .viewSoundFileWithSubtitles{
        width: 310px;
        height: 300px; 
        margin-top: 5%;
    }

    .viewAnimation{
        background-image: url("../images/TV-BASE_310.png");
        height: 258px;
        width: 310px;

    }

    .viewAnimation video{
        width: 270px;
        height: 254px;
        top: 0px;
        left: 0px;
    }
    .choiceButtons{
        margin-left: -5%;
        margin-right: 20%;
    }
    .productTitle{
        font-size: 2EM;

    }
    .youHaveSelected{
        height: 120px;
        width: 310px;
    }
    
    .productTitle_ReducedFont{
        font-size: 1EM;
    }
    
    .backButton{
        margin-top: 0%;
    }
    table {
        width: 310px;
        font-size: 0.9EM;
    }
    
    .classRoomCollectionPicture{    
        margin-left: 30%;
        margin-top: 0%;
   } 
   .audioPicture{
       margin-left: 30%;
       margin-top:0%;
   }
   .td_freelistening{
       
        
    }

}