@font-face {
	font-family: 'Helvetica';
   
	src: url('helveticaneueltstd-bdcn.eot');
	src: url('HelveticaNeueLTStd-BdCn.eot?#iefix') format('embedded-opentype'),
		 url('HelveticaNeueLTStd-BdCn.ttf') format('truetype'),
		 url('HelveticaNeueLTStd-BdCn.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {font-family:Tahoma, Geneva, sans-serif;overflow:hidden;margin: 0; padding: 0;  text-align: center; width:100%;height:100%;background-image:url(../activities/assets/MenuItems/BG_Tile.png) ;background-repeat:repeat;
           -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none; 
}
h2 {font-family:Tahoma, Geneva, sans-serif; font-size:1.2em;color:#565656;font-weight:normal;line-height:1.5em}
/* disable pointer*/
.disablePointer{cursor:none;}
.disablePointer .focusItem{cursor:none;pointer-events: none!important;}
.disablePointer canvas {pointer-events: none!important;}
/* splash screen */
#splashCanvas{z-index:0;position:absolute;top:0;left:0;-moz-user-select: none;-webkit-user-select: none;width:100%;height:100%}
 #swiffycontainer div {background: none !important;}
#loader{display:none;position:absolute;z-index:30000;width:300px;height:300px;margin:auto;background-color:transparent;}
#loader div{background-color:transparent !important;}

/* top menu */
.divHeaderTable {position:relative; z-index:100;width: 96%;padding:0 4%;  display:block;} 
.divHeaderRow { position:absolute;z-index:10000;width: 100%; /* add extra that you want to for header column */ display:block;  }
.divHeaderRow.activeZone {background-color: rgb(224, 242, 252);border-bottom:solid 1px rgb(230, 230, 230); }
.divHeaderColumnRight { float:right; text-align:right; width: 40%; display:block; margin-right: 13%;} 
.divHeaderColumnLeft { position:absolute;left:0;width:100%; text-align:left;  display:block; } 
#topMenu{position:absolute;text-align:left;left:1%;font-weight:500;font-size:1.2em;cursor:pointer;width:50%;pointer-events:none}
#menuRight{float:left;position: absolute;right: 1%;text-align: right;font-weight: 500;width: 50%;font-size: 1.2em;cursor: pointer;pointer-events:none }
#teacherBTN  {float:left;pointer-events:all }
#menuBTN  {float:left;pointer-events:all }
#infoBTN  {float:left;pointer-events:all}
#skipBTN  {float:left;pointer-events:all}
#refreshBTN  {float:left;pointer-events:all}
/* main menu (topics screen) */
.divTable { width: 96%; display:block; padding-top: 5%;}
#topicTable{display:block; padding-top: 0%;margin:auto}
.divRowTopics { width: 94%; display:block;text-align:center;float:left;text-align:left;padding:0 3% }
.divMainColumn {  width: 23.5%; float:left; cursor: pointer;margin-right: 1.5%;position:relative;margin-bottom:2.5% } 
.divMainColumn img{margin-top:5%;width:100%;	}
.topicLabel {   font-size:.9em;color:#5c5c5c;width:100%;text-align:center;position:absolute;bottom:5%} 

/* subtopics menu screen */
.divRowSubTopics { clear:left; width: 100%; display:block;text-align:center;position:absolute;bottom:5%; }
.subTopicLabel { font-size:0.9em;color:#c3c3c3;margin-bottom:1.2em} 

/* activities menu screen */
.divRowActivities { clear:left; width: 100%; display:block;text-align:center;position:absolute;bottom:5%;} 
/* used for both subtopic menu screen and activity menu screen */
.divColumn {  width: 16.66%; display:inline-block; cursor: pointer;height:100%;position:relative } 
.divColumn img{height:50%;}

/* Featured topic related classes */
.featuredTopics{ width: 75%;height:100%;float:left;text-align:left;position:absolute;top:82%;left: 9%;}
.divFeaturedColumn{ width:16.5%;text-align:center;display:block;float:left;cursor: pointer;margin:1em 1em 0 0}
.featuredTopicLabel { width: 100%;font-size:.9em;color:#5c5c5c;text-align: center;float: left;}     
#featuredImage { width: 100%;font-size:1.05em;color:#5c5c5c;text-align: center;}

/* navigation and Focus */
.navItemSelected { background-color:#ddd; } .crsName {  font-weight:500; font-size:1.2em; cursor: pointer; } 
.navLabelNumber {font-weight:bold; color: #94C3DE; font-size:2.1em; bottom:-0.2em;padding-right: 0.35em;position:relative;top:0.15em} 
.activeFocus .navLabelNumber {color: #000;  } 


#overlay_frame{z-index:1;position:absolute;width:100%; height:100%;margin: 0; top:0} 
#overlay #preview img{height:80%;margin:auto}
#overlay #preview {width:100%;height:100%;cursor:pointer}	
#overlay { z-index:1000; position:absolute; top:15%; width:100%; }

#gallery
{
    position: absolute;
    display:none;
    z-index:1000;
    width:100%;
    height:100%;
    background-color:white;
    left:0%;
    top:0%;

    
}
  
#sample_html #centered { width: 100%; text-align: left; border: 0px; padding: 0; margin: 0 auto; }
#topMenu .activeFocus{color:#94C3DE;}

/* top menu*/
.menu{padding-left:0.5%;font-size: 1em;color:Black;text-decoration:none;}
.back{float:left;margin-left:3%;display:none}
.welcomeMessage{font-size: 1.8em;color:Black;}
.mtopic{font-size: 1.3em;white-space:nowrap;color:Black;text-decoration:none;display:inline;padding-left: 0.5%;}

.mactivity{font-size: 1.3em;white-space:nowrap;color:Black;text-decoration:none;display:inline}
.topNavInterface{float: right;}


.enterBtn ,.cancelBtn {position:relative;display:inline-block;height:100%;}
#startActivity img{height:100%;}
.startActivityLabel {position:absolute;z-index: 1;left: 30%;top: 23%;font-size: 2.2em;   color: white;  }

#startActivity{position: absolute;}
/* login screen */
.loginScreen  { margin:auto;font-size: 1.5em;height:100%}
.loginPanel  {position:relative;text-align:left !important;float:left;width: 30%;padding:2% 30%;height:80%;font-size: 1.0em;text-align:center;display: inline;}
.loginPanelGroup  {display:none;position:relative;text-align:left !important;float:left;width: 30%;padding:2% 10%;height:80%;font-size: 1.0em;text-align:center;}
.loginPanel form {height:55%}
#loginGroupImg{width:100%;margin:14% 0 0 0}
.loginPanel label{font-size:0.8em;color:#565656}
.loginInput  {color:#565656;font-size: 1.0em;border: 0.1em solid #AEAEAE;line-height: 1.60em;width: 95%;padding: 2%;}
.loginInput.activeFocus{border: 0.1em solid #b7d6e8;}
.standardButton {position:relative;cursor:pointer}
.standardButton img {width:100%}
.standardButton .btnLabel{width:100%;position:absolute;left:0;top:0;text-align:center;color:White;line-height: 2.5em;}


/* drop down related styles */
.dropDownMenu li{padding:0px 0px;color:White;}
.dropDownMenu li:hover{background-color: #304a5a;}
.dropDownMenu li:last-child .inner{border-bottom:none;}
.dropDownMenu li .inner{padding:10px;font-size: 0.5em;border-bottom: 1px dashed #b7d6e8;}
.dropDownMenu li .menulbl{float:left;display: block;float: left;font-size:2em;}
.pointer{background:url("../images/Cut.png") no-repeat;background-position:-14px -1072px;position:absolute;right: 6px;top: -42px;z-index:1000;height:45px;width:49px;}
.menuIcons{float:left;padding-right: 25px;}


/* teachers screen - list of interactions*/
.TeacherScreen{width: 96%;height:90%; display:block; padding:3% 3% 0%;background-color:white;	z-index:10000;}
.interactionColumn{width: 30%;float: left;text-align: center;padding-bottom: 3%;height:10%}
.interactionCell{    float: left;    border: 2px solid #545454;  width: 80%;cursor:pointer;box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */}
.interactionRow {width: 100%; padding: 5%; height:100%;display:block;text-align:center;}
.interactionNumber{width: 10%; float:left;font-size: 1.5em;}
    .interactionNumber.current
    {
        background-color: #93BF54;
        color: white;
    }
.interactionIcon{width: 24%; border-right  : 2px solid #545454;vertical-align:top}

.interactionIcon  img{width:100%;float:left}
.interactionDetails{  text-align:left;}
.interactionName{border-bottom:2px solid  #545454;background-color:#f1ede5;padding-left: 0.5em;}
.interactionInfo{float:right;width: 76%;}
.activeFocus .interactionName {background-color:#9fd1f0 !important}
.interactionLevel{font-size: 100%;color: #545454;padding-left: 0.5em;text-align:left;height:100%}
.interactionName:hover{background-color:#9fd1f0;}
.interactionText{font-family: Tahoma;color: #545454;display: block;text-align: left;}
.interactionText:hover{color:#2d2d2d;}
.TeacherTipsWrapper{height: 100%;width: 100%;position: absolute;margin: 7% 10%;}
.tipslabel{font-size: 2em;align-content: left;width: 0%;height: 8%;font-color;#AEAEAE;}
.TeacherTips{overflow: hidden;border-top: solid #AEAEAE;border-bottom: solid #AEAEAE;height: 70%;width:80%;display: block;z-index: 10000;}
#topMenuTips{position:absolute;text-align:left;left:1%;font-weight:500;font-size:1.2em;cursor:pointer;width:50%;pointer-events:none;display:none;}
.TeacherTipsData{}
.TeacherTipsNav{border-bottom: solid #AEAEAE;float:left;width :80%;}
.TipsNavItem{display: inline-block;padding: 15px; width:14%  }
.TipsNavItemPages{display: inline-block;
padding: 1.0em;
width: 10%;
line-height: 2.2em;
vertical-align: top;
  }
.tipsOuter{text-align:left}

/* Menu Button drop Down */
#MenuDrop {position:absolute;right:0.5%;top:10%;background-color:#6eacd0;z-index:100001;min-width:20%;padding: 0.3em;border: 7px solid white;box-shadow: -2px 2px 5px #888888;display:none;}
.dd_images {height :3em;}
/* Teacher Button drop Down */
#TeacherDrop {position:absolute;right:4.5%;top:10%;background-color:#6eacd0;z-index:100001;;min-width:20%;padding: 0.3em;border: 7px solid white;box-shadow: -2px 2px 5px #888888;display:none;}
/* congratulations */
.congratulations{width:100%;height:100%;}

#homeFooter{ width: 100%;position:absolute;text-align:center;bottom:0;}/*background-image:url(../images/main_bottom.png);background-repeat:repeat-x;background-position:bottom;*/
#courseLogo{position:absolute;bottom:0;display:none;}
.menuTable { bottom:0;position:absolute;width:100%;z-index:100;background-image:url(../images/Topic_Bottom.png);background-repeat:repeat-x }
.focusItem{ pointer-events:all;}
#bg_img { position:absolute;top:0;z-index:-1;}
#bg_ani { position:absolute;top:0;z-index:-1;}
/* Authoring Tool*/
.authoringTool #topicTable
{
    width:100%!important;

}
.authoringTool .interactionRow
{
    padding:0 5em;
}
.authoringTool .divMainColumn
{
    width:20% !important;
    margin-right:0;margin-left:0;
}
.authoringTool .divMainColumn img
{
    width:70% !important;
    margin:0 15%;
    border-bottom:solid 2px black;
}
.authoringTool .topButtonLine
{
    width:100%;
    text-align:left;
    padding:1.5em 5em;
       margin-bottom:1.5em
}
    .authoringTool .topButtonLine .standardButton
    {
      display: inline-block;
         width:11em;
       background-image:url(../images/button_regular_tile.png);
       background-repeat:repeat;
       border:solid 0.2em white;
       height:2.0em;
       -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
       
    }
        .authoringTool .topButtonLine .standardButton .dictionaryItem
        {
            line-height:2em!important;
        }
        .authoringTool .topButtonLine .standardButton:hover
        {
             background-color: #9fd1f0!important;
             background-image:none!important;
          
        }
.authoringTool .bottomButtonLine
{
    border-top:solid 0.15em black;
    clear:both;
    /*text-align:right!important*/
}
.authoringTool .at_activity
{
    width: 60%;
margin: 0 15%;
padding: 5%;

}
.authoringTool h2
{
    text-align:left;
    margin:1em 5em;
}
.authoringTool .engineSelectorLink
{
    float:none!important;
    display:inline-block;
}
.authoringTool .minorBtn
{
    border:solid 0.2em white!important;
    background-color:white!important;
    background-image:none!important;
    
}
    .authoringTool .minorBtn .dictionaryItem
    {
        color:black!important;
    }
    /* Match*/
#matchItemsContainer
{
    width: 100%;
text-align: left;
padding: 0em 5em;
margin-bottom: 1.5em;
box-sizing: border-box;
}
.authoringTool .matchCouple
{
    width:24%;
    margin:0 0.5%;
    display:inline-block;
    line-height:100%;
    font-size:200%;
        vertical-align:middle;
        margin-bottom:1em;
            
}
    .authoringTool .matchCouple .matchItem
    {
        width:35%;

        display:inline-block;
         -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
        border:solid 0.2em white;
        background-color:white;
        vertical-align:middle;
            box-sizing:border-box;
    }
        .authoringTool .matchCouple .matchItem .uploadBtn
        {
            visibility:hidden;
            position:absolute;
        }
         .authoringTool .matchCouple  .matchTitle
            {
                 width:35%;

            display:inline-block;
             -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
            -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
            box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.25);
            border:solid 0.2em transparent;
            background-color:white;
            box-sizing:border-box;
            }
        .authoringTool .matchCouple  .equals
        {
            border-top:solid 0.1em  black;
             border-bottom:solid 0.1em  black;
            width:8%;
            height:0.2em;
            display:inline-block;
            margin:2.5%

        }
        .authoringTool .matchCouple  .sep
        {
          
            width:8%;
            height:0.3em;
            display:inline-block;
            margin:2.5%

        }
 .authoringTool .matchCouple .droppedimage
{
    width:100%;height:100%;
    background-image:url(../images/AuthoringTool/match_upload_image.png);
    background-size:100% 100%;
}
    .authoringTool .matchCouple .droppedimage img
    {
        width:100%;height:100%;
    }
    .authoringTool .matchCouple .media-drop
    {
        width:100%;height:100%;
    }
    /* puzzle authoring tool*/
#puzzleItemsContainer
{
    width: 100%;
text-align: left;
padding: 0em 5em;
margin-bottom: 1.5em;
box-sizing: border-box;
}
.authoringTool #puzzleUploadImage
{
    float:left;
    width:40%;
    background-image:url(../images/AuthoringTool/puzzle_upload_image.png);
    background-size:100% 100%;
    margin-bottom:2em;
}
.authoringTool #puzzleOptions
{
    float:left;
}
 .authoringTool #Puzzle .uploadBtn
        {
            visibility:hidden;
            position:absolute;
        }
 .authoringTool #puzzleUploadImage .media-drop
    {
        width:100%;height:100%;
    }
 .authoringTool #puzzleUploadImage .droppedimage img
    {
        width:100%;height:100%;
    }
.authoringTool .ui-dialog .ui-dialog-title
{
    text-overflow:inherit!important;
    text-align:left!important;
    white-space:inherit!important;
}
/* trivia authoring tool*/
.authoringTool #triviaOptions
{
    float: right;
    margin-right: 12.6em;
}
.authoringTool #newQuestionBtn
{
    float:left;
    
}
.authoringTool #triviaUploadImage
{
    float:left;
    width:25%;
    background-image:url(../images/AuthoringTool/puzzle_upload_image.png);
    background-size:100% 100%;
    margin-bottom:2em;
    cursor:pointer;
}

 .authoringTool #Trivia .uploadBtn
        {
            visibility:hidden;
            position:absolute;
        }
 .authoringTool #triviaUploadImage .media-drop
    {
        width:100%;height:100%;
    }
 .authoringTool #triviaUploadImage .droppedimage img
    {
        width:100%;height:100%;
    }
.authoringTool #triviaLayoutContainer
{
    height:100%;
    padding: 0em 5em;
    margin-bottom:2.5em;
}
.authoringTool #triviaQuestions
{
    width:30%;
    height:100%;
    float:left;
        box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.authoringTool #triviaQuestionsList
{
    height:100%;
    width:100%;
    
    overflow-x:hidden;
    overflow-y:scroll;
}
.authoringTool #triviaQuestionForm
{
    width:70%;
    float:left;
        box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding:0 1em;
}
    .authoringTool #triviaQuestionForm textarea
    {
        width: 100%;
        float: left;
       
        margin-bottom:1em;
    }
    .authoringTool #triviaQuestionForm .btnLabel
    {
        float:left;
    }
    .authoringTool #triviaQuestionForm #innerForm
    {
         margin-left: 3%;
         width:67%;
         float:right;
    }
.authoringTool .triviaQuestionBtn
{
    display:block;
    height:3em;
    max-width:95%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    background-color:#ced0cf;
    text-overflow:ellipsis;
    overflow:hidden;
    margin-bottom:0.2em;
    white-space:nowrap;
    font-size:1.0em;
    cursor:pointer;
    font-family:Tahoma;
    text-align:left;
    padding:0.2em;
    line-height:2.2em;
      box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.authoringTool .triviaQuestionBtn:hover
{
    border:solid 1px #2d2d2d
}
.authoringTool .triviaQuestionBtn.selected
{
    display:block;
    
    background-color:#6eacd1
}
.authoringTool #triviaItemsContainer .topButtonLine
{
    clear:both;
    text-align: right;
    margin-top:2.5em;
    width:86%;
}