﻿@media only screen and (orientation:landscape) {
    div#controlheader {
        min-height: 8.0vh;
        max-height: 8.0vh;
    }

    div#tabcontrol {
        padding-top: 2.4vh;
    }

    div#hamburgermenu
    {
        width:4.2vw;
        margin-top:1.2vh;
    }

    .hamburgerlink {
        margin-right:1.5vw;
    }

    .hamburgerlink>div {
        width: 3.7vw;
        height: 0.7vh;
    }

    .tab {
        height: 3.8vh;
        width: 11.5vw;
        padding-top: 1.7vh;
    }

    .menu {
        width: 35vw;
        margin-left: -31.8vw;
    }

    #loading-mask>div, #loadingoverlay>div
    {
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }

    .micspinneroverlay {
        left: 4vw;
    }

    div#speechicon {
        margin-top: 2.4vh;
        width: 6vw;
    }

    div#volumebar {
        margin-top: 2.5vh;
        margin-left: 0.2vh;
        margin-right:1.5vw;
    }

      #v1 {
        height:4vh;
    }

    #v2 {
       height:3.6vh;
       margin-top:0.2vh;
    }

    #v3 {
       height:3.2vh;
       margin-top:0.4vh;
    }

    #v4 {
      height:2.8vh;
      margin-top:0.6vh;
    }

    #v5 {
      height:2.4vh;
      margin-top:0.8vh;
    }

    .volume {
        width: 0.3vw;
        margin-left: 0.3vw;
        background: #FFF;
        float: left;
        border-radius: 3px;
    }

    .conversation-body {
        min-height: 88.7vh;
        max-height: 88.7vh;
    }


    #interact-search-text {
        width: 56vw;
        float:none;
        margin-left: 1vw;
    }

    #introOptionsButton {
        display:none;
    }

    #toggleImg {
        display: none;
    }

    video#helpagent {
        width: 100.5px;
        height: 100.5px;
    }



    div#interact-statements
    {
        width:57vw;
        margin-left:1vw;
        height:85vh;
    }

    .categorywell {
        margin-right:2.6vw;
    }

    .categorywelltitle
    {
        padding-top:1.1vh;
    }

    .categorywelltitlebox {
        font-size:0.8em;
        margin-right:0.5vw;
        float:left;
    }

    .categorywelltitletext {
        font-size:1.1em;
        
    }

    div#feedback-content.video4
    {
        height:56vh;
    }

    div#feedback-content.video16
    {
        height:62vh;
    } 

    .bubbles {
        font-size: 0.88em;
        height: 2.2vh;
        right: 0.5vw;
        line-height:2.2vh;
        top: 1.2vh;
        width: 2vw;
    }

    .substitutionleft {
        width: 30vw;
        margin-top:8px;
    }

    div.fancy-select div.trigger {
        width:30vw;
    }

    div.fancy-select ul.options {
        width:30vw;
    }

    .avatar-mini {
        width:4vw;
    }

    .historybtn {
        width:9vw;
        font-size:0.9em;
        height:3vh;

    }

    .history-table-header-turn {
        font-size:1em;
    }

    div#introTop {
        height:4.5%;
    }

    div#introWrapper {
        width:100%;
        height:94.5%;
    }
}

@media only screen and (orientation:portrait) {
    div#videoside
    {
        width:100vw !important;
        display:none;
    }

    div#controlside
    {
        width:100vw !important;
        background-color:#FFF;
    }
   
     div#controlheader
    {
         width:100vw;
        min-height:6.0vh;
        max-height:6.0vh;
    }

     div#timerrow
    {
        bottom:1.4vh;
        right:0.5vw;
        font-size:1em;
     }

    .tab {
        height: 4.4vh;
        width: 20vw;
        padding-top: 0.6vh;
        margin-right:1vw;
        font-size:1.1em;
    }

    .hamburgerlink {
        margin-top:0;
    }

    .hamburgerlink>div {
        width: 4.2vw;
        height: 0.6vh;
    }

    #loading-mask>div, #loadingoverlay>div
    {
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }

    div#tabcontrol {
        padding-top: 1.6vh;
        padding-left:0.8vw;
    }

    #interact-search-text 
    {
        width: 76.7vw;
        margin-top:0.5vh;
        float:left;
        margin-left:1.2vw;
    }


    #toggleImg {
        display: none;
    }

    div#hamburgermenu {
        width: 5.8vw;
        padding-top: 1.5vh;
    }
    
    .menu {
        width: 45vw;
        margin-left: -40.8vw;
    }

    div#speechicon {
        margin-top: 1.3vh;
        width: 4vw;
    }

    div#volumebar {
        margin-top: 1.5vh;
        margin-left: 0.2vh;
        margin-right:1.5vw;
    }

    .volume {
        width: 0.6vw;
        margin-left: 0.3vw;
        background: #FFF;
        float: left;
        border-radius: 3px;
    }

    div#videoside
    {
        width:100%;
    }


    div#feedback-content.video16
    {
        height:55.3vh;
    }

    .menu-right,.menu-left
    {
        float:none;
    }

    div#interact-statements
    {
        width:96.7vw !important;
        margin-left:1.2vw;
        height:85vh;
    }

    .categorywelltitlebox {
        margin-right:1vw;
    }

    div#feedback-content.video4
    {
        height:41.3vh;
    }

    div#feedback-content.video16
    {
        height:55.5vh;
    }

    .bubbles {
        font-size: 0.88em;
        height: 2.2vh;
        right: 0.5vw;
        line-height:2.2vh;
        top: 1.2vh;
        width: 3vw;
    }

    .substitutionleft {
        width: 30vw;
        margin-top:8px;
    }

    div.fancy-select div.trigger {
        width:30vw;
    }

    div.fancy-select ul.options {
        width:30vw;
    }

    .avatar-mini {
        width:6vw;
    }

    .historybtn {
        width:12vw;
        height:3vh;
    }

    .history-table-header-turn {
        font-size:1em;
    }

}


div#interact-statements {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

.scrollwindow {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

div#feedback-content
{
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

#history-table-wrapper {
    overflow-y:scroll !important;
    -webkit-overflow-scrolling: touch;
}

div#interact-categories {
    display:none !important;
}

div#feedback-content p {
    font-size:1em;
}

.feedback-avatar {
    width:20%;
}
.feedback-quote {
    width:80%;
}

div#introWrapper {
  	overflow: scroll!important;
}

div#introWrapperFull {
  	overflow: scroll!important;
}

/* Scoring */
.scoringTopButton {
    display:none!important;
}

#leftMenu {
    display:none!important;
}

.scoringprimaryviewcls {
    width: 97vw!important;
}

.qaFeedbackBox {
    width:92%!important;
}

.topMainHeaderText {
    font-size:1em!important;
    padding-top:1vh!important;
    width:98vw!important;
}

div#scoringahamburger {
    display:block!important;
}

.regularButtonWell {
    width:98vw!important;
    margin-left:0vw!important;
    border-left:0vw!important;
}

.checklistColumn
{
    width:94%!important;
    float:none!important;
}

div#scoringahamburger
{
    top:2vh!important;
}

div#scoringFeedbackWrapper {
     bottom:10vh;
}

div#timerrow
{
    font-family:Helvetica, sans-serif;
}

.helpagent {
    font-family:Helvetica, sans-serif;
}

.feedback-text-cls {
    font-family:Helvetica, sans-serif;
}

.problemtext {
    font-family:Helvetica, sans-serif;
}

#notesfieldset legend,#mofieldset legend {
    font-family:Helvetica, sans-serif;
}

div#modalbody p
{
    font-family:Helvetica, sans-serif;
}

div#videotext {
    font-family:Helvetica, sans-serif;
}

.statementlink
{
    font-family:Helvetica, sans-serif;
}

.saveloadrow td {
    font-family:Helvetica, sans-serif;
}

.trackerrow td {
    font-family:Helvetica, sans-serif;
}

.substitutionleft {
    font-family:Helvetica, sans-serif;
}

.checkright
{
    font-family:Helvetica, sans-serif;
}

.selectleft 
{
    font-family:Helvetica, sans-serif;
}

.menu a:link, .menu a:visited, .menu a:active
{
     font-family:Helvetica, sans-serif;
}
