/* 
    Document   : olaController
    Created on : Jun 22, 2017, 10:48:43 AM
    Author     : Kevin
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color:#000000;
  margin:0px;
  /*font-size:100%;*/
  padding-top: 70px;
}

@media screen and (max-width: 727px) {
  /*.trytopnav {top:70px;}*/
  /* #contentContainer {top:108px;} */
  #viewerContent {top:108px;}
  

}
@media screen and (max-width: 467px) {
  /*.trytopnav {top:60px;}*/
  /* #contentContainer {top:98px;} */
  #viewerContent {top:98px;}
  /*.w3-dropdown-content {width:100%}*/
}
@media only screen and (max-device-width: 768px) {
  #question-framewrapper {overflow-y: auto;}
  /* #contentContainer     {min-width:320px;} */
  #viewerContent     {min-width:320px;}
  
  .stack         {display:none;}
  /*#tryhome       {display:block;}*/
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



#dragbar{
  position:absolute;
  cursor: col-resize;
  z-index:3;
  padding:5px;
}
#shield {
  display:none;
  top:0;
  left:0;
  width:100%;
  position:absolute;
  height:100%;
  z-index:4;
}
/*
#framesize span {
  font-family:Consolas, monospace;
}
*/
#viewerContent {
  background-color: #eee; /*#666666;*/
  width:100%;
  overflow: auto;
  position:absolute;
  top: 60px; /* 110px; */
  bottom:0;
  height: auto; 
  padding-top:5px;
  margin-bottom:55px;
}

#contentContainer {
  background-color: #eee; /*#666666;*/
  width:100%;
  overflow:auto;
  position:absolute; 
  top: 85px; /* 110px; */
  bottom:0;
  height:auto;
  padding-top:5px;
  margin-bottom:0px;
}

.assessment-name {
    background-color: #fff;
    border-bottom-left-radius: 8em;
    border-bottom-right-radius: 8em;
    margin: 0px 0px 5px 0px;
    padding-bottom: 5px;
    font-weight: 600;
}
#passage-container, #question-container {
  float:left;
  height:100%;
  width:50%;
}
#passagesOuter, #question-frame {
  height:100%;
  width:100%;
  padding-bottom:10px;
  padding-top:1px;
}
#passagesOuter {
  padding-left:10px;
  padding-right:5px;  
}
#question-frame {
  padding-left:5px;
  padding-right:10px;  
}
#passageWrapper {
  width:100%;
  height:100%;
  background-color: #ffffff;
  position:relative;
  -webkit-overflow-scrolling: auto;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  overflow:scroll;
  padding:15px;
}
#question-framewrapper {
  width:100%;
  height:100%;
  position: relative;
  -webkit-overflow-scrolling: auto;
  background-color: #ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding:15px;
  /*overflow:scroll;*/
  overflow-y: auto;
}

div#question {
    max-width:1020px;
}
#question-framewrapper textarea {
    width: 95%;
    min-height: 100px;
}
#question-framewrapper textarea,select,input[type="text"] {
    background-color: lightyellow;
}
#question-framewrapper select {
    min-width:150px;
    max-width:90%;
    /*
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
    */
}


#question-frameResult, #question-frameSource {
  background-color: #ffffff;
  height:100%;
  width:100%;  
}
div#question table td {
    border: 1px solid;
}
div#passageWrapper table td {
    /*border: 1px solid;*/  
}

#stackV {background-color:#999999;}
#stackV:hover {background-color:#BBBBBB !important;}
#stackV.horizontal {background-color:transparent;}
#stackV.horizontal:hover {background-color:#BBBBBB !important;}
#stackH.horizontal {background-color:#999999;}
#stackH.horizontal:hover {background-color:#999999 !important;}
#passage-container.horizontal,#question-container.horizontal{
  height:50%;
  float:none;
  width:100%;
}
#passagesOuter.horizontal{
  height:100%;
  padding-left:10px;
  padding-right:10px;
}
#question-frame.horizontal{
  height:100%;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;  
}
#contentContainer.horizontal{
  min-height:200px;
  margin-left:0;
}




  #fieldsAvailable, #fieldsSelected {
    border: 1px solid #eee;
    min-width: 95%;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #fieldsAvailable li, #fieldsSelected li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1 em;
    /* width: 120px; */
  }
  .close{
      font-size: 16px;
  }
  
.elim-div {
  background-color: red;

  width:18px;
  height:18px;

}
.elim-div span {
      color: white;
      padding:0px 0px 0px 3px;
}
.choiceElement {
    width: 100%;
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.choiceItem {
    text-align: left;
    display: table-cell;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    float: left;
}
.choiceText {
    text-align: left;
    word-wrap: normal;
    padding-left: 30px;
    margin-bottom: 20px;

}
.choiceElement .choiceText.elimMode {
    cursor:not-allowed;  
}
.choiceElement .elim-div.show {
    cursor:not-allowed;
}
.choiceElement .choiceItem, .choiceElement .choiceItem input {
    cursor: pointer;      
}
#elimButton.active {
    background-color:red;
    color:white;
}


    div.passage-column {
        border-right:4px solid #999999;
    }
    div.passage-column {
        display: table-cell;
        min-width: 400px;
        max-width: 800px;
        /*overflow-y: scroll;*/
    }
    div.question-column {
        display: table-cell;
        min-width: 400px;
    }
    div.passage-column, div.question-column {
        background-color:#fff;
        /*max-width: 800px;*/
        /*overflow-y: scroll;*/
    }
    div.item-viewer {
        background-color: #999999;
        padding:8px;
    }

    .btn-tool {
        /*max-width:40px; */
    }
    div#lineReader {
        background-color: rgba(255,255,255, .01);
        border-top:20px solid rgba(3,3,3,.8);
        border-right:20px solid rgba(3,3,3,.8);
        border-bottom:80px solid rgba(3,3,3,.8);
        border-left:20px solid rgba(3,3,3,.8);
        min-height:120px;
        border-radius: 8px;
        z-index: 1000;
        position: absolute;
        top:120px;
        width:500px;
    }
    
    button.tool-border-right {
        border-right:2px solid !important;
    }
    .navbar-tool {
        /*margin-right:20px !important;        */
    }
    .navbar-tool.active {
        background-color: #00cc33 !important;
    }
    .ola-header {
        /* border-bottom: 3px solid #eee; */ /*#666;*/
    }
    .ola-header .navbar-header{
        color: #0074c8;
    }
    .ola-footer, .item-navigator {
        background-color: #eee; /*#666666; */
    }
    .ola-footer .navbar-btn.btn-sm {
        margin-top:5px !important;
    }
    
    #item-navigator ul {
        cursor:pointer;
    } 

    nav > * {
        max-height: 55px !important;
    }
    nav > .btn-group {
        padding-left: 10px;
    }
    p#assessmentMenu {
        margin-right: 25px;
    }
    p#assessmentNavigator {
        margin-right: 25px;
        margin-left: 25px;
    }    
    p#assessmentNavigator h5 {
        color: #ffffff;
    }
    #itemProgress {
        color: #ffffff;
        text-weight:bold;
    }
    
    
    
    #bookmarkButton.is-on, #noteButton.is-on {
        border: 2px solid #18bc9c;
        color: #fff; 
        background-color: #18bc9c;
    }
    #numberButtonBar > button.is-active {
        border: 4px solid #f39c12;
    }
    #numberButtonBar > button.is-answered {
        background-color: #217dbb;
        color: #FFF;
    }    
    
    
/* 
    Document   : dragmatch
    Created on : Sep 23, 2014, 10:34:32 AM
    Author     : Kevin
    Description:
        Purpose of the stylesheet follows.
*/

	div.drag-match {
		font-family: calibri, arial;
		font-size: 18px;
		font-weight: bold;
                padding-top:10px; /* provide a little space after the question prompt */
	}
		
	div.drag-match ul.sourcechoices {
		/* min-width: 250px; 400px; */
                /* max-width: 600px;  */
                width:48%;
                min-width:200px;
                float:left;
		background-color: #2d6ca2; /*#A7B6F3; */
		min-height:100px;
		padding-bottom: 20px;
                border-radius: 5px;
		margin: 0 auto;
                padding:0px;  /* allow to start more to the left */
                margin-right:5px;
	}

    
        
	div.drag-match ul.sourcechoices li {
		cursor: move;
		min-width: 90px;
                float:left;
		padding: 4px 4px;
		margin: 4px 8px;
		vertical-align: top;
		text-decoration: none;
		background: #F3F3F3;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

        
                
	div.drag-match ul.targetchoices {
		/* min-width: 250px; 
                max-width: 600px;
                */
                width: 48%; 
                min-width:200px;
                padding-left:2px;
                float: left;
		background-color: #419641; /*#999; */
		/*min-height:100px; */
		border-radius: 5px;
		display: inline-block;
		margin: 0 auto 18px;
		text-align: center;
	}

	li.choice {
		display: inline-block;
                list-style: none;
                z-index: 100;
		/* margin: 5px; */
		
	}
	.targetchoices li.target {
		background-color: #FFF;
		/*display: inline-block; */
		margin: 4px 4px 4px 4px;
		min-height: 5em;
		text-decoration: none;
		padding: 5px 4px;
		vertical-align: top;
		color: #666;
		background: #FEFEFE;
		border-radius: 5px;
                overflow:auto;
                z-index: -1;
	}
        ul.choicelist {
                list-style: none;
                padding-left: 0px;
            
        }
	.choicelist li {
		float: left;
		cursor: move;
		min-width: 90px;
		padding: 4px 4px;
		margin: 4px 8px;
		vertical-align: top;
		text-decoration: none;
		background: #F3F3F3;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
                border: 1px solid #000099;
	}
	
	.drop-focus {
		/*background-color: #428BCA;*/
		border:2px solid red !important; /*#428BCA*/
                z-index: -1;
	}
        li.choice.ui-draggable-dragging {
            width:30%;
        }
li.ui-helper-class { 
                font-family: calibri, arial;
                max-width: 40%;
                z-index:100;
		cursor: move;
		min-width: 90px;
		padding: 4px 4px;
		margin: 4px 8px;
		vertical-align: top;
		text-decoration: none;
		background: #fcf8e3; /*#F3F3F3;*/
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
                border: 1px solid #000099;
}
.dragHeadingLabel {
    font-weight:bold;
    font-size: medium;
    display:block;
}

/* 
    Created on : Sep 23, 2016, 10:31:31 AM
    Author     : ddunagan
*/

.list-container {
    float: left;
    min-width: 100px;
    max-width: 300px;
}

.svg-container {
    float: left;
    /*width: 250px;  shouldn't need this as the width is scripted in the drawing of this area */
}

.listView {
    margin: 0 auto;
}

.source {
    min-height: 40px;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 0px;
    padding-right: 0px;
    margin-top: 10px;
    border: solid black 1px;
    background-color: #FFFFFF;
}

.target {
    min-height: 40px;
    text-align: center;
    padding-top: 8px;
    padding-left: 0px;
    margin-top: 10px;
    min-height: 40px;
    border: solid black 1px;
    background-color: #FFFFFF;
}

.answers {
    display: none;
}


div.spoken-text {
  display: none;
}

div.alt-spoken-text {
  background-image: url("../images/stop_hand.png");
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
}

/* special hacks to handle Pearson class issues */
.fs-21pt { font-size: 14pt; }
.fs-20pt { font-size: 14pt; }
.fs-19pt { font-size: 14pt; }
.fs-18pt { font-size: 14pt; }
.fs-17pt { font-size: 14pt; }
.fs-16pt { font-size: 14pt; }
.fs-15pt { font-size: 13pt; }
.fs-14pt { font-size: 12pt; }
.fs-13pt { font-size: 12pt; }
.fs-12pt { font-size: 11pt; }
.fs-11pt { font-size: 11pt; }
.fs-10pt { font-size: 10pt; }
.fs-9pt { font-size: 9pt; }
.fs-8pt { font-size: 8pt; }

.fs-underline {text-decoration:underline;}
.fs-bold {font-weight:bold;}
.fs-normal {font-weight:normal;}
.fs-italic {font-style:italic;}

.fs-15\.555556297302246px  { font-size: 11pt; }
.fs-medium { font-size: 11pt; }