@media screen and (max-width: 99999px){
    .topicSelection{
        position: relative;
        margin: auto;
        width: 807px;
        height: 100%;
        margin-top: 1%;
        color: white;
        text-align: center;
    }

    .youHaveSelected{
        position: relative;        
        margin: auto;
        border: 2px solid black;
        background: rgba(163, 204, 255, 1);
        //background: white;
        width: 807px;
        height: 100px;
        //display: table-cell;
        //white-space: nowrap;
        border-radius: 10px;
        text-align: center;
        vertical-align: middle;

        //font-size: 0.9em;
    }

    .youHaveSelectedText{
        position: relative;
        //display: inline-block;
        float: left;
        left:4%;
        margin-top: 4%;
        font-size: 1.4em;
        color: black;

    }

    .latestAdditionsText{
        font-size: 2em;
        margin-top: 4%;
        margin-left: 36%;
        font-weight: bold;
        color: black;
        float: left;
    }
    .languageSpecificAdditionsText{
        font-size: 1.8em;
        margin-top: 4%;
        margin-left: 28%;
        font-weight: bold;
        color: black;
        float: left;
    }

    .navButton{
        margin: 5px;
        //margin-top: 8px;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 4em;
        height: 1.5em;
        vertical-align: middle;
        font-weight: normal;
        float: right;
    }

    .navButton:hover{
        cursor: pointer;
    }

    #navselectionLightBlue{
        background: rgba(163, 204, 255, 1);
        color: black;

    }
    #navselectionDarkBlue{
        background: rgba(84, 141, 211, 1);
        color: white;
    }


    .topicLeftPane{
        position: relative;
        width: 49%;
        height: 95%;
        margin-right: 1%;
        color: white;
        float: left;
        display: inline-block;

    }
    .topicRightPane{
        position: relative;
        width: 49%;
        height: 95%;
        color: white;
        right: 0%;
        display: inline-block;

    }
    .topicLeftPane a{

        vertical-align: middle;
    }

    .topicRightPane a{
        vertical-align: middle;
    }

    .padCollection{
        //display: inline-block;
        //float: left;

    }

    .threePadStying{
        float: left; 
        margin-left: 8%
    }
    .fourPadStying{
        float: left; 
        margin-left: 3%
    }

    .topicOnePane{
        position: relative;
        width: 100%;
        height: 95%;
        //margin-right: 1%;
        color: white; 
        //display: inline-block;
    }



    .topicSelection a{

    }

    .selectionBoxPad{

        margin-bottom: 1%;
        border: 2px solid black;
        border-radius: 10px;
        position: relative;
        width: 100%;
        height: 230px;
        top: 2%;
        pointer-events: none;
        display: inline-block;


    }

    .selectionBoxPad a{
        text-transform:none;
        text-decoration: none;
        text-align: center;
        color: black;
        font-size: 0.9em;
    }
    .selectionBoxPad img{
        margin: 5px;
        vertical-align: middle;
    }

    .selectionBox{
        margin-bottom: 1%;
        border: 2px solid black;
        border-radius: 10px;
        position: relative;
        width: 100%;
        height: 110px;
        top: 2%;
        pointer-events: none;
        display: inline-block;


    }

    .selectionBox a{
        text-transform:none;
        text-decoration: none;
        text-align: center;
        //color: black;
        font-size: 1.3em;

    }
    .selectionBox img{
        margin: 5px;
        vertical-align: middle;
    }

    #selectionLightBlue{
        background: rgba(163, 204, 255, 1);
        color: black;

    }
    #selectionDarkBlue{
        background: rgba(84, 141, 211, 1);
        color: white;
    }
    #selectionWhite{
        background: white;
        color: black;
    }
    #selectionOrange{
        background: rgba(253, 177, 12, 1);
        color: black;
    }

    #selectionPaleGreen{
        background: lightgreen;
        color: black;
    }

    #selectionRedBrown{
        background: rgba(215, 60, 39, 1);
        color: black;
    }

    #selectionFrenchBlue{
        background: rgba(1, 67, 135, 1);
        color: white;
    }
    #selectionFrenchRed{
        background: rgba(213, 39, 50, 1);
        color: white;
    }
    #selectionSpanishYellow{
        background: rgba(247, 232, 16, 1);
        color: black;
    }
    #selectionSpanishYellow{
        background: rgba(247, 232, 16, 1);
        color: black;
    }
    #selectionSpanishBrown{
        background: rgba(212, 44, 24, 1);
        color: white;
    }

    #selectionEnglishBlue{
        background: rgba(0, 0, 143, 1);
        color: white;
    }
    #selectionEnglishRed{
        background: rgba(255, 0, 0, 1);
        color: white;
    }
    #selectionGermanRed{
        background: rgba(255,0,0,1);
        color: white;
    }
    #selectionGermanYellow{
        background: rgba(255,255,0,1);
        color: black;
    }
    #selectionGermanBlack{
        background: rgba(0,0,0,1);
        color: white;
    }


    #buttonSelectionLightBlue{
        background: rgba(163, 204, 255, 1);
        color: black;

    }
    #buttonSelectionLightBlue:hover{
        background: white; 
    }
    #buttonSelectionDarkBlue{
        background: rgba(84, 141, 211, 1);
        color: white;
    }
    #buttonSelectionDarkBlue:hover{
        background: white; 
        color: black;
    }


    #selectionWhite{
        background: rgba(255, 255, 255, 1); 
        color: black;

    }

    .buttonTick{

        background-color:#548dd3;
        border: 3px solid #1e5abe;
        border-radius: 75px;
        height:70px;
        width:70px;
        -webkit-border-radius:75px;
        -moz-border-radius:75px;
        margin: 5px;
        margin-top: -13.3%;
        display: inline-block;
        width: 70px;
        height: 70px;
        //vertical-align: middle;
        //font-weight: normal;
        float: right;
        pointer-events:auto;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);  


    }

    .tickSymbol{
        font-family: wingdings;
        font-size: 200%;
        color: white;
        margin-top: 5%;
    }



    .selectButton{
        background-color:#548dd3;
        border: 3px solid #1e5abe;
        height:70px;
        width:70px;
        border-radius: 75px;
        -webkit-border-radius:75px;
        -moz-border-radius:75px;
        margin: 5px;
        margin-top: -13.3%;
        display: inline-block;
        width: 70px;
        height: 70px;
        //vertical-align: middle;
        //font-weight: normal;
        float: right;
        pointer-events:auto;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }

    .selectButton:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    .selectButton:hover{
        background-color: #3f96e9;
    }

    .plusMinus{
        color: white;
        margin-top: 2%;
        font-size: 50px;
    }


    .buttonSelectText{
        margin-top: 30%;
        color: white;
    }

    .topicName{
        font-size: 2.5EM;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 65%;
        margin-left: 22%;
        margin-top: -9%;
    }



    .buttonBasket{
        margin: 5px;
        margin-top: 8px;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 10em;
        height: 1.5em;
        vertical-align: middle;
        font-weight: normal;
        float: right;
        pointer-events:auto;
    }

    .buttonBasket:hover{
        cursor: pointer;
    }


    .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;
    }



    .buttonClose{
        margin: 5px;
        border: 1px solid black;
        border-radius: 10px;
        display: inline-block;
        width: 4em;
        height: 1.5em;
        vertical-align: middle;
        font-weight: bolder;
        background: rgba(163, 204, 255, 1);
        color: black;
    }
    .buttonClose:hover{
        cursor: pointer;
        background: white;
    }

    .flagSymbol{
        position: relative; 
        width: 4em;
        height: 2em;
        vertical-align: middle;
    }

    .typeImageSymbol{
        top: -4px;
        position: relative; 
        width: 78px;
        height: 75px;


    }

    .navflagSymbol{
        margin-left: 2%;
        position: relative; 
        //width: 6em;
        //height: 3em;
        vertical-align: middle;
        float: left;
        margin-top: 10px;
    }
    .stageButtonSymbol{
        float: left;

        margin-top: 2.5%;
        margin-left: 12%;

    } 

    .typeSymbolStatusBar{
        margin-top: 2%;
        position: relative; 
        //width: 5em;
        //height: 5em;
        float: left;
        margin-left: 15%;
    }

    .choiceSymbols{
        display: inline-block;
    }

    .modalInfoTitle{
        font-size: 1.5em;
        color: white;
        background-color: red;
    }


    .padSymbol_static{
        position: relative;
        background-image: url("../images/PAD_big_stacked.png");
        background-repeat: no-repeat;
        height: 190px;
        width: 147px;
        left: 32%;
        margin-top: 5%;
        pointer-events: none;
        text-align: center;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);
    }
    .padSymbol{
        position: relative;
        background-image: url("../images/PAD_big_stacked.png");
        background-repeat: no-repeat;
        height: 190px;
        width: 147px;
        left: 32%;
        margin-top: 5%;
        pointer-events:auto;
        text-align: center;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);
    }

    .padSymbol:hover{
        background-position: 0 -192px;

    }
    .padSymbol:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 

    }



    .padWriting{
        position: relative;
        font-weight: bold;
        color: black;
        top: 30%;
        font-size: 1.6em;
    }




    .informationIconSmall{
        position: relative;
        background-image: url("../images/info_i_big.png");
        background-repeat: no-repeat;
        height: 31px;
        width: 26px; 
        top: -33%;
        left: 56%;
        z-index: 99;
        pointer-events:auto;

    }
    .informationIconSmall:hover{
        cursor: pointer;
        background-image: url("../images/info_i_small_rollover.png");
        background-repeat: no-repeat;
    }
    .informationIconSmall:active{
        cursor: pointer;
        background-image: url("../images/info_i_small_active.png");
        background-repeat: no-repeat;
    }


    .notCurrentlyAvailable{

        background-image: url("../images/comingSoon.png");
        width: 144px;
        height: 50px; 
        background-repeat: no-repeat;
        position: relative;
        margin-top: -10%;
    } 



    .backButton{

        position: relative;
        background-image: url("../images/BACK_BUTTON_stacked.png");
        background-repeat: no-repeat;
        width: 69px;
        float: right;
        height: 50px;
        margin-right: 3%;
        margin-top: 2.5%;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 


    }
    .backButton:hover{
        background-position: 0 -51px;
    }
    .backButton:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 

    }
    .backButtonLabel{
        position: relative;
        vertical-align: middle;
        top:17px;
        left: 10px;
        font-size: 0.9em;
        color: black;
        font-weight: bold;
    }

    #langFrench{
        background-image: url("../images/langFrench_stacked.png");
        background-repeat: no-repeat;  
        width:127px;
        height: 63px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 

    }
    #langFrench:hover{
        background-position: 0 -64px;
    }
    #langFrench:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 

    }

    #langGerman{
        background-image: url("../images/langGerman_stacked.png");
        background-repeat: no-repeat;  
        width:126px;
        height: 62px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    #langGerman:hover{
        background-position: 0 -62px;
    }
    #langGerman:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #langSpanish{
        background-image: url("../images/langSpanish_stacked.png");
        background-repeat: no-repeat;  
        width:125px;
        height: 63px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    #langSpanish:hover{
        background-position: 0 -64px;
    }
    #langSpanish:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #langEng{
        background-image: url("../images/langEng_stacked.png");
        background-repeat: no-repeat;  
        width:126px;
        height: 64px;
        //left:10%;
        top:5%;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    #langEng:hover{
        background-position: 0 -64px;
    }
    #langEng:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #but_home{
        background-image: url("../images/but_home_108_stacked.png");
        background-repeat: no-repeat;  
        width: 108px;
        height: 57px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    #but_home:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000);   
    }
    #but_home:hover{
        background-position: 0 -58px;
    }
    #but_preschool{
        background-image: url("../images/but_preschool_108_stacked.png");
        background-repeat: no-repeat;  
        width: 108px;
        height: 57px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 

    }
    #but_preschool:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #but_preschool:hover{
        background-position: 0 -58px; 
    }
    #but_primary{
        background-image: url("../images/but_primary_108_stacked.png");
        background-repeat: no-repeat;  
        width: 108px;
        height: 57px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 
    }
    #but_primary:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 

    }
    #but_primary:hover{
        background-position: 0 -58px; 
    }
    #but_secondary{
        background-image: url("../images/but_secondary_108_stacked.png");
        background-repeat: no-repeat;  
        width: 108px;
        height: 57px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);

    }
    #but_secondary:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #but_secondary:hover{
        background-position: 0 -58px; 
    }

    #ChoiceSHT{
        background-image: url("../images/ChoiceSHT_60_stacked.png");
        background-repeat: no-repeat; 
        height: 60px; 
        width: 72px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);
    }
    #ChoiceSHT:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #ChoiceSHT:hover{
        background-position: 0 -59px; 
    }

    #ChoiceMP3{
        background-image: url("../images/ChoiceMP3_60_stacked.png");
        background-repeat: no-repeat;  
        height: 60px; 
        width: 60px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);
    }

    #ChoiceMP3:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #ChoiceMP3:hover{
        background-position: 0 -60px; 
    }

    #ChoiceVIDEO1{
        background-image: url("../images/ChoiceVIDEO_60_stacked.png");
        background-repeat: no-repeat; 
        height: 60px; 
        width: 60px;
        max-height: 100%;
        width: 5em;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222);
    }
    #ChoiceVIDEO1:active{
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    #ChoiceVIDEO1:hover{
        background-position: 0 -60px; 
    }

    #freeListening1{
        background-image: url("../images/listeningZone.png");
        background-repeat: no-repeat;
        width: 126px;
        height: 62px;
        position: relative;

        float: left;

        margin-top: 2%;
        margin-left: 12%;


    }

    #megaphone{
        background-image: url("../images/megaphone_72_stacked.png");
        background-repeat: no-repeat;
        width: 72px;
        height: 73px;
        position: relative;
        margin-top: 1%;


        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 


    }

    #megaphone:hover{
        background-position: 0 -73px;
        cursor: pointer;
    }

    #megaphone:active{
        cursor: pointer;
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }
    
    #chalkboard{
        background-image: url("../images/chalkboard_75.png");
        background-repeat: no-repeat;
       width: 49px;
        height: 75px;
        position: relative;
        margin-top: 1.5%;
        margin-left: 20%;


        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter:         drop-shadow(5px 5px 5px #222); 


    }

    #whiteboard1:hover{
        background-position: 0 -75px;
        cursor: pointer;
    }

    #whiteboard1:active{
        cursor: pointer;
        -webkit-filter: drop-shadow(2px 2px 2px #010000);
        filter:         drop-shadow(2px 2px 2px #010000); 
    }



    .thumbnailImage img {
        width: 140px;
        height: 210px;
        background-repeat: no-repeat;
        /*        cursor: -moz-zoom-in; 
                cursor: -webkit-zoom-in; 
                cursor: zoom-in;*/
    }
    .itemPrice{
        position: relative;
        margin-top: -10%;
        margin-left: 2%;
        //font-size: 1.5em;
        z-index: 999;
        color: black;
        font-weight: bolder;
    }
     
    .nobr { 
        white-space:nowrap;
    }
    

}
@media screen and (max-width: 840px){

    .topicSelection{
        width: 640px;
    }

    .youHaveSelected{
        width:640px;
    }

    .youHaveSelectedText{
        position: relative;
        //display: inline-block;
        float: left;
        margin-left: -7%;
        margin-top: 5%;
        font-size: 1.4em;

    }

    .latestAdditionsText{
        font-size: 2em;
        margin-top: 6%;
        margin-left: 33%;

    }


    .languageSpecificAdditionsText{
        font-size: 1.8em;
        margin-top: 5%;
        margin-left: 20%;

    }


    .navflagSymbol{
        margin-left: 2%;
        margin-top: 10px;
    }



    .stageButtonSymbol{
        margin-top: 3%;
        margin-left: 8%;
    } 

    .typeSymbolStatusBar{
        margin-left: 15%;
        margin-top: 3%;
    }
    .backButton{

        margin-right: 3%;
        margin-top: 3.5%;

    }


    .selectButton{
        margin: 5px;
        margin-top: -15.2%;
    }
    .buttonInfo{
        margin-top: -1%;
    }


    .buttonTick{
        margin: 5px;
        margin-top: -15.2%;
    }

    .typeImageSymbol{
        top: -4px;
        position: relative; 
        width: 78px;
        height: 75px;
    }


    .selectionBox{

    }

    .topicName{
        font-size: 2EM;
        margin-top: -10%;
        margin-left: 30%;
        width: 55%;
    }

    .padSymbol{

        left: 27%;
        margin-top: 5%;
        pointer-events:auto;

    }

    .padSymbol_static{
        left: 27%;
        margin-top: 5%;
        pointer-events:auto;
    }


    .threePadStying{
        float: left; 
        margin-left: 5%
    }  

    .fourPadStying{
        float: left; 
        margin-left: 1%
    }
    #firstPad{
        margin-left: -2%;
    }

    #freeListening1{
        margin-top: 2.5%;
        margin-left: 13%;
        margin-right: -5%;
    }


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

    }

    .youHaveSelected{
        width: 480px;
    }

    .youHaveSelectedText{
        margin-left: -8%;
        margin-bottom: 1%;
        font-size: 1.2em;
        //float: left;
    }

    .latestAdditionsText{
        font-size: 2em;
        margin-top: 8%;
        margin-left: 24%;

    }

    .languageSpecificAdditionsText{
        font-size: 1.6em;
        margin-top: 10%;
        margin-left: 10%;

    }


    .padSymbol{

        left: 20%;
        margin-top: 5%;
        pointer-events:auto;

    }

    .padSymbol_static{
        left: 20%;
        margin-top: 5%;
        pointer-events:auto;
    }

    .threePadStying{
        float: left; 
        margin-left: 0%
    }  


    .stageButtonSymbol{
        margin-top: 4%;
        margin-left: 5%;       
    } 

    .backButton{

        margin-right: 3%;
        margin-top: 5%;
        float: right;

    }

    .topicName{
        font-size: 2EM;
        margin-top: 3%;
        margin-left: 2%;
        width: 80%;
    }

    .selectionBox{
        height: 185px;
    }

    .selectButton{
        margin: 5px;
        //margin-top: -11%;
        margin-top: -36.5%;
    }

    .buttonTick{
        margin: 5px;
        margin-top: -36.5%;
    }


    .navflagSymbol{
        margin-left: 2%;
        margin-top: 10px;
    }

    .typeImageSymbol{

        top: -4px;
    }
    .typeSymbolStatusBar{
        margin-left: 6%;

    }

    .selectionBoxPad{
        height: 230px;   
    }

    .fourPadStying{
        float: left; 
        margin-left: 1%
    }

    #firstPad{
        margin-left: 8%;
        margin-right: 10%;
    }

    #thirdPad{
        margin-top: 45%;
        margin-left: -72%;
    }

    #forthPad{
        margin-top: 45%;
        margin-left: -31%;
    }
    #freeListening1{
        margin-top: 2.5%;
        margin-left: 5%;
        margin-right: 0%;
    }
    #megaphone{
        margin-left: 13%;
    }
    #whiteboard1{
       margin-left: 15%; 
    }


}
@media screen and (max-width: 520px){
    .topicSelection{
        width: 310px;
        // font-size: 0.75em;
    }

    .youHaveSelected{
        width: 310px;
        height: 160px;
    }


    .youHaveSelectedText{
        display: none;
    }

    .latestAdditionsText{
        font-size: 1.5em;
        margin-top: 8%;
        margin-left: 15%;

    }

    .languageSpecificAdditionsText{
        font-size: 1.5em;
        margin-top: 10%;
        margin-left: 5%;

    }

    .selectionBoxPad{


        height: 430px;



    }

    .topicOnePane{
        position: relative;
        width: 100%;
        height: 440px;
        //margin-right: 1%;
        color: white; 
        //display: inline-block;
    }

    .padSymbol{

        left: 2%;
        margin-top: 5%;
        pointer-events:auto;

    }

    .padSymbol_static{
        left: 2%;
        margin-top: 5%;
        pointer-events:auto;
    }



    .navflagSymbol{
        margin-left: 5%;
        margin-top: 10px;
    }

    .typeImageSymbol{
        top: -4px;
    }

    .stageButtonSymbol{

        margin-top: 6%;
        margin-left: 15%;

    } 

    .typeSymbolStatusBar{
        float: left;
        margin-top: 4%;
        margin-left: 10%;

    }

    .backButton{

        margin-right: 15%;
        margin-top: 6%;
        float: right;

    }
    .backButtonLabel{
        top: 35%;
    }



    .selectionBox{
        height: 160px;
    }

    .topicName{
        font-size: 1.5EM;
        margin-top: 3%;
        width: 95%;

    }
    .selectButton{
        margin: 5px;
        margin-top: -48.4%;
    }

    .buttonInfoText{
        margin-top: 14%;
    }

    .buttonTick{
        margin: 5px;
        margin-top: -48.4%;
    }
    .tickSymbol{
        margin-top: 15%;
    }

    .buttonSelectText{
        margin-top: 30%;
        color: white;
        //font-size: 1.5em;
    }
    .thumbnailImage img {
        width: 240px;
        height: 360px;
        background-repeat: no-repeat;

    }

    #firstPad{
        margin-left: 2%;
        margin-right: 1%;
    }

    #secondPad{
        margin-left: -1%;
    }

    #thirdPad{
        margin-top: 65%;
        margin-left: -95%;
    }

    #forthPad{
        margin-top: 2%;
        margin-left: 0.5%;
    }
    #freeListening1{
        margin-top: 27%;
        margin-left: -40%;
        margin-right: -5%;
    }
    #megaphone{
        margin-left: 1%;
    }
    #whiteboard1{
       margin-left: 7%; 
    }

}