body { 
  background-color: white;
}

.horizontalsplit.textleft.pwd-mode #bottom-container, 
.horizontalsplit.textright.pwd-mode #bottom-container,
.verticalsplit.pwd-mode #bottom-container
 {
  display: none;
}

.pwd-mode #title-toolbar {
  display: none;
}

.horizontalsplit #bottom-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

    width: 100%;
}

.horizontalsplit.textleft #bottom-container { 
   -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;  
}

.horizontalsplit #container1, .horizontalsplit #container2 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;

    width: 50%;
    }

#container1, #questioncontainer { 
  position: relative;
}

.verticalsplit #bottom-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }

.verticalsplit #container1, .verticalsplit #container2 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 400px;
    -ms-flex: 1 1 400px;
    flex: 1 1 400px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;

    min-height: 50px;
    width: 100%;
    height: 50%;
    }

.right-to-left div.wtSpreader {
  left: initial !important; /* Make HandsOnTable play nice with RTL languages */
}

.quizwidget input[type=text], .quizwidget textarea{ 
  -webkit-user-select: text;
}

.quizwidget select {
  -webkit-appearance: none;
}

.quizwidget {
  position: relative;
  border-top: none;
}

.quizwidget a {
  text-decoration: none;
  outline-width: 0;
}


.quizwidget .question-content.readonly-mode .content {
  pointer-events: none;
}

.quizwidget .question-content.readonly-mode .content .rtlink,
.quizwidget .question-content.readonly-mode .content .audiowrapper,
.quizwidget .question-content.readonly-mode .content .videowrapper,
.quizwidget .question-content.readonly-mode .content .youtubeplaceholder,
.quizwidget .question-content.readonly-mode .content .mejs-container,
.quizwidget .question-content.readonly-mode .content video,
.quizwidget .question-content.readonly-mode .content .picture  {
  pointer-events: auto;
}

.quizwidget .content, .quizwidget .submitpage {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-top: 10px;
}

.quizwidget .content {
  padding-bottom: 10px;
}

h1 { 
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  margin: 20px
}

/* Picture Multiple Choice */

.horizontalsplit .quizwidget .pmc-cover {
  width: 481px;
  max-width: 100%;
}
.verticalsplit .quizwidget .pmc-cover {
  width: 100%;
}

.quizwidget .pmc-cover .pmc-quiz {
  height: 160px;
  width: 160px;
  margin: 0px 16px 16px 0px;
}

/* Single line */

.quizwidget .the-answer {
  margin: 20px;
}

.quizwidget .sl-cover .the-answer h4 {
  color: green;
}

/* Rich text */
.quizwidget .btn-group+.btn-group {
  margin-left: 0px; 
}

/* Picture ordering */

.horizontalsplit .quizwidget .po-cover .display {
  margin: 5px;
}

.horizontalsplit .quizwidget .po-cover .target {
  margin: 5px;
}

.horizontalsplit .quizwidget .po-cover .po-quiz, .horizontalsplit .quizwidget .po-cover .target-box {
  margin: 5px;
  width: 100px;
  height: 100px;
}

.horizontalsplit .quizwidget .po-cover .answer {
  margin: 24px auto 0px auto;
}

/* Fill-in-text */

.fit-sentence { 
  margin-left: 10px;
}

/* Word ordering */
.quizwidget .ms-cover .the-answer h4 {
  color: green;
}

.quizwidget .check-mode .the-answer {
  display: block;
}

.quizwidget .ms-cover .words.sentence { 
  margin-left: 10px;
  padding-left: 0px;
}

.quizwidget .sentence .wordwrapper { 
  width: 450px;
}

#container1 { 
  -webkit-transform: scale(1);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

#quizname {  
  width: 100%;
  text-align: center;
}

#quizname h1 { 
  -webkit-margin-before: 10px;
  -webkit-margin-after: 10px;
}

.small .picture-left {
  -webkit-flex: 1 1 700px;
  -ms-flex: 1 1 700px;
  flex: 1 1 700px;
}

.small .picture-right {
  -webkit-flex: 1 1 300px;
  -ms-flex: 1 1 300px;
  flex: 1 1 300px;
}

.medium .picture-left {
  -webkit-flex: 1 1 600px;
  -ms-flex: 1 1 600px;
  flex: 1 1 600px;
}

.medium .picture-right {
  -webkit-flex: 1 1 400px;
  -ms-flex: 1 1 400px;
  flex: 1 1 400px;
}

.picture { 
  display:block; 
  margin:0 auto; 
  text-align: center;
}

.ininepicture { 
  display:inline-block; 
  margin:0 auto; 
  float: right;
}

.horizontalsplit .picture img { 
  margin: 2px;
}
.verticalsplit .picture img { 
  margin: 10px;
}


.picture-right-s img { 
}

.horizontalsplit .picture-right-s img { 
  margin: 10px;
}
.verticalsplit .picture-right-s img { 
  margin: 10px;
}

.verticalsplit .picture-right-m img { 
  margin: 20px;
}

html, body {
  height:100%;
}

#container2 { 
  -webkit-overflow-scrolling: touch;
  padding: 0px;
  padding-left: 2px;
}

#container2.allow-copy * {  
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;  
}

.ibw-platform-osx-ibooks.horizontalsplit #container1, .ibw-platform-osx-ibooks.horizontalsplit #container2 { 
  height: 768px;
}

#textdiv { 
  background-color : white;
  padding: 6px;
}


/* Connect questions */


.horizontalsplit .match_source .connectword, .match_source .connectpicture { 
  padding-right: 25px;
}

.horizontalsplit .match_target .connectword, .match_target .connectpicture { 
  padding-left: 25px;
}

.horizontalsplit .match_table .match_source {
  padding-right: 25px;
}

.horizontalsplit .match_table .match_target {
  padding-left: 25px;
}

.horizontalsplit .match_table[resize-mode=None] img { 
  max-width: 300px;
}

.verticalsplit .match_table[resize-mode=None] img { 
  max-width: 150px;
}


/* Drag Drop */

.horizontalsplit .ddbox { 
  width: 220px;
  float: left;  
}

.horizontalsplit .ddbox_box_header { 
  font-size: 125%;
  margin: 5px;
}

.verticalsplit .quizwidget .dd-cover .words {
  margin: 20px;
  padding: 20px;
  min-height: 70px;
}

.horizontalsplit .quizwidget .dd-cover .dd-boxes {
  display: inline-block;
  width: 500px;
}

.verticalsplit .quizwidget .dd-cover .dd-boxes {
  width: 1024px;
}

.horizontalsplit .quizwidget .dditem { 
  padding: 5px;
  margin: 5px;
}

/* Whiteboard */

.horizontalsplit .w-cover { 
  margin: 5px;
}

.horizontalsplit .w-cover .tool-button-bar {
  margin-right: 10px;
}


.verticalsplit #clear { 
  padding: 5px;
}
.horizontalsplit .quizwidget .check-mode .wm-missing-answer path { stroke-dasharray: 3, 3}


.scoretext { 
}
.score { 
  text-align:center;
  font-size:1.5em;
  font-weight:bold;
}


/* Video */

.horizontalsplit .videodiv {   
  width: 426px;
  height: 240px;
}

.verticalsplit .videodiv {   
  width: 640px;
  height: 320px;
}

.horizontalsplit .videodiv iframe { 
  width: 426px;
  height: 240px;
}

.verticalsplit .videodiv iframe { 
  width: 640px;
  height: 320px;
}

/* Calculator */
#calcbutton.Top-left { 
  z-index: 1000;
}

#calcbutton.Bottom-left { 
  z-index: 1000;
}

.ui-dialog input {  
  -webkit-user-select: text;
  box-sizing:border-box;
  width: 100%;
}

.linkbutton {
  -webkit-tap-highlight-color: rgba(200,0,0,0.0)
}

#bwcountdown {
  display: inline-block;
  position: relative;
  top: -6px;
  margin: 4px;
}

.right-to-left #bwcountdown {
  left: 50px;
}

#textdiv {
  background: transparent;
}

#infobutton {
  display:none;	
}

.submitpage { 
  text-align: center;
}

.check-mode .submitpage, .readonly-mode .submitpage { 
  display: none;
}

.textbutton { 
  display: inline-block;
  min-width: 150px;  
}

.quizwidget .submitpage {
  padding-bottom: 10px;
}

.picture .big { 
  max-height: 400px;
  max-width: 90%;
}

.picture .medium { 
  max-height: 300px;
  max-width: 90%;
}

.picture .small { 
  max-height: 200px;
  max-width: 90%;
}

.question-points {
  float: right;
  text-align: right;
  margin: 0px 10px 10px 10px;
}


.submitpage .question-points {
  float: initial;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: flex-end;
  align-self: flex-end;  
}

.answer-keys-dlg #start_code { 
  display: none;
}

.view-results-dlg #start_pwd, .start-code-dlg #start_pwd { 
  display: none;
}

@media print {
  body { 
    display: block!important;
    overflow: visible;
    height: initial;
    position: relative;
    top: 0px;
    left: 0px;
  }

  .bw #container,
  #scrolling-container,
  #bottom-container,
  #container1,
  #container2{
    display: block!important;
    overflow: visible;
    height: initial;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%!important;
  }

  #container1 { 
    page-break-after: always;
  }

  #container2 { 
    padding: 40px;
    box-sizing: border-box;
  }

  html, body, #container {
    background: white!important;
  }
} 

@media only screen and (max-width: 750px) {
  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #textdiv {
    word-wrap:break-word;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container { 
    display: block;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container #container1 {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container #container2 {
    display: none;
    position: absolute;
    left: -100%;
    top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #infobutton {
    display: block;
    float:left;    
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container.show-info #container2 { 
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    animation-name: slidefromleft;
    animation-duration: 0.5s;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container.hide-info #container2 { 
    display: block;
    animation-name: slidetoleft;
    animation-duration: 0.5s;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container.show-info #container1 { 
    opacity: 0;
    animation-name: maketransparent;
    animation-duration: 0.5s;
  }

  html:not(.ibw-platform-osx-ibooks) .horizontalsplit #bottom-container.hide-info #container1 { 
    opacity: 1;
    animation-name: makeopaque;
    animation-duration: 0.5s;
  }
}

@keyframes slidefromleft {
    from {left: -100%;}
    to {left: 0%;}
}
@keyframes slidetoleft {
    from {left: 0%;}
    to {left: -100%;}
}

@keyframes maketransparent {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes makeopaque {
    from {opacity: 0;}
    to {opacity: 1;}
}
