nicholas@2224: /* structure.css
nicholas@2224:  * Define the structure for classes and objects in HTML
nicholas@2224:  */
nicholas@2224: 
nicholas@2224: div.title {
n@2580:     width: 100%;
n@2580:     height: 50px;
n@2580:     margin-bottom: 10px;
n@2580:     font-size: 2em;
nicholas@2224: }
nicholas@2224: div.indicator-box {
n@2580:     position: absolute;
n@2580:     left: 150px;
n@2580:     top: 10px;
n@2580:     width: 300px;
n@2580:     height: 60px;
n@2580:     padding: 20px;
n@2580:     border-radius: 10px;
n@2580:     background-color: rgb(100, 200, 200);
nicholas@2224: }
nicholas@2224: div.comment-div {
n@2580:     border: 1px solid #444444;
n@2580:     max-width: 600px;
n@2580:     min-width: 400px;
n@2580:     float: left;
n@2580:     margin: 5px 10px 5px 5px;
n@2580:     height: 90px;
nicholas@2224:     border-radius: 10px;
nicholas@2224: }
nicholas@2224: div.comment-div span {
n@2580:     margin-left: 15px;
nicholas@2224: }
nicholas@2224: div.popupHolder {
n@2580:     width: 500px;
n@2580:     min-height: 250px;
n@2580:     max-height: 400px;
n@2580:     background-color: #fff;
n@2580:     border-radius: 10px;
n@2580:     box-shadow: 0px 0px 50px #000;
n@2580:     z-index: 10;
n@2580:     position: fixed;
nicholas@2224: }
nicholas@2224: div#popupContent {
nicholas@2224:     margin-top: 20px;
nicholas@2224:     margin-bottom: 35px;
giuliomoro@2339:     overflow: auto;
nicholas@2224: }
nicholas@2491: div#popupContent iframe {
nicholas@2491:     width: 100%;
nicholas@2491:     border: 0px none;
nicholas@2491:     height: 290px;
nicholas@2491: }
nicholas@2285: div#popupTitleHolder {
nicholas@2224:     width: inherit;
nicholas@2224:     min-height: 25px;
nicholas@2224:     max-height: 250px;
nicholas@2224:     overflow: auto;
nicholas@2224:     margin-bottom: 5px;
giuliomoro@2339:     padding: 8px;
nicholas@2344:     text-align: center;
giuliomoro@2339: }
giuliomoro@2339: #popupTitle {
giuliomoro@2339:     white-space: pre-line;
nicholas@2224: }
nicholas@2224: div#popupResponse {
nicholas@2224:     width: inherit;
nicholas@2224:     min-height: 50px;
nicholas@2224:     max-height: 320px;
nicholas@2224:     overflow: auto;
nicholas@2224:     position: relative;
nicholas@2224: }
nicholas@2224: button.popupButton {
n@2580:     /* Button for popup window
nicholas@2224: 	 */
n@2580:     width: 50px;
n@2580:     height: 25px;
n@2580:     position: absolute;
n@2580:     border-radius: 5px;
n@2580:     border: #444;
n@2580:     border-width: 1px;
n@2580:     border-style: solid;
n@2580:     background-color: #fff;
nicholas@2224: }
nicholas@2224: div.popup-option-checbox {
nicholas@2224:     /* Popup window checkbox */
nicholas@2224:     padding: 5px;
nicholas@2224:     width: fit-content;
nicholas@2224:     width: -moz-fit-content;
nicholas@2224:     width: -webkit-fit-content;
nicholas@2224: }
n@2580: div.popup-option-checbox input {
nicholas@2224:     /* Popup window checkbox */
nicholas@2224:     margin-right: 15px;
nicholas@2224: }
nicholas@2346: table.popup-option-list {
nicholas@2346:     margin: auto;
nicholas@2346: }
nicholas@2346: table.popup-option-list tr {
nicholas@2346:     padding: 5px;
nicholas@2346: }
nicholas@2346: table.popup-option-list tr td {
nicholas@2346:     padding: 5px;
nicholas@2346: }
nicholas@2224: button#popup-proceed {
nicholas@2224:     bottom: 10px;
nicholas@2224:     right: 10px;
nicholas@2224: }
nicholas@2224: button#popup-previous {
nicholas@2224:     bottom: 10px;
nicholas@2224:     left: 10px;
nicholas@2224: }
nicholas@2224: div.testHalt {
n@2580:     /* Specify any colouring during the test halt for pre/post questions */
n@2580:     background-color: rgba(0, 0, 0, 0.5);
n@2580:     /* Don't mess with this bit */
n@2580:     z-index: 9;
n@2580:     width: 100%;
n@2580:     height: 100%;
n@2580:     position: fixed;
n@2580:     left: 0px;
n@2580:     top: 0px;
nicholas@2224: }
nicholas@2360: div#lightbox-root {
nicholas@2360:     visibility: hidden;
nicholas@2360:     z-index: 20;
nicholas@2360:     top: 25px;
nicholas@2360:     min-height: 50px;
nicholas@2360:     max-height: 250px;
nicholas@2360: }
nicholas@2360: div.lightbox-error {
nicholas@2360:     margin: 25px;
nicholas@2360:     margin-bottom: 50px;
nicholas@2360:     padding: 5px;
nicholas@2360:     border-radius: 5px;
n@2580:     background-color: rgb(255, 220, 220);
n@2580:     border: 2px rgb(200, 0, 0) solid;
nicholas@2360: }
nicholas@2360: div.lightbox-warning {
nicholas@2360:     margin: 25px;
nicholas@2360:     margin-bottom: 50px;
nicholas@2360:     padding: 5px;
nicholas@2360:     border-radius: 5px;
n@2580:     background-color: rgb(255, 255, 220);
n@2580:     border: 2px rgb(255, 250, 0) solid;
nicholas@2360: }
nicholas@2360: div.lightbox-message {
nicholas@2360:     margin: 25px;
nicholas@2360:     margin-bottom: 50px;
nicholas@2360:     padding: 5px;
nicholas@2360:     border-radius: 5px;
n@2580:     background-color: rgb(200, 220, 255);
n@2580:     border: 2px rgb(50, 100, 250) solid;
nicholas@2360: }
nicholas@2360: div#lightbox-blanker {
nicholas@2360:     visibility: hidden;
nicholas@2360:     z-index: 19;
nicholas@2360: }
nicholas@2224: button.outside-reference {
n@2580:     width: 120px;
n@2580:     height: 20px;
n@2580:     margin-bottom: 5px;
n@2580:     position: absolute;
nicholas@2224: }
nicholas@2224: textarea.trackComment {
n@2580:     max-width: 594px;
n@2580:     min-width: 350px;
n@2580:     max-height: 60px;
nicholas@2224:     resize: none;
nicholas@2224: }
nicholas@2224: div.playhead {
n@2580:     width: 500px;
n@2580:     height: 50px;
n@2580:     background-color: #eee;
n@2580:     border-radius: 10px;
n@2580:     padding: 10px;
nicholas@2224: }
nicholas@2224: div.playhead-scrub-track {
n@2580:     width: 100%;
n@2580:     height: 10px;
n@2580:     border-style: solid;
n@2580:     border-width: 1px;
nicholas@2224: }
nicholas@2224: div#playhead-scrubber {
n@2580:     width: 10px;
n@2580:     height: 10px;
n@2580:     position: relative;
n@2580:     background-color: #000;
nicholas@2224: }
nicholas@2352: div.master-volume-holder-inline {
nicholas@2352:     width: 100%;
nicholas@2352:     padding: 5px;
nicholas@2352: }
nicholas@2352: div.master-volume-holder-float {
nicholas@2352:     position: absolute;
nicholas@2352:     top: 20px;
nicholas@2352:     left: 50px;
nicholas@2352:     width: 250px%;
nicholas@2352:     padding: 5px;
nicholas@2352: }
nicholas@2352: div#master-volume-root {
n@2580:     margin: auto;
nicholas@2224:     border: black 1px solid;
nicholas@2224:     border-radius: 5px;
nicholas@2352:     width: 250px;
nicholas@2352:     height: 40px;
nicholas@2224: }
nicholas@2224: input#master-volume-control {
nicholas@2224:     width: 200px;
nicholas@2224:     height: 25px;
nicholas@2224:     float: left;
nicholas@2224:     margin: 0px;
nicholas@2224:     padding: 0px;
nicholas@2224: }
nicholas@2224: span#master-volume-feedback {
nicholas@2224:     width: 45px;
nicholas@2224:     height: 25px;
nicholas@2224:     margin-left: 5px;
nicholas@2224:     float: left;
nicholas@2224: }
nicholas@2224: div.error-colour {
nicholas@2224:     background-color: #FF8F8F;
nicholas@2224: }
nicholas@2224: button.error-colour {
nicholas@2224:     background-color: #FF8F8F;
nicholas@2224:     color: black;
nicholas@2224: }
nicholas@2224: div.calibration-holder {
nicholas@2224:     text-align: center;
nicholas@2224:     align-content: center;
nicholas@2224:     height: auto;
nicholas@2224: }
nicholas@2224: div.calibration-slider {
nicholas@2224:     width: 50px;
nicholas@2224:     margin: 2px;
nicholas@2224:     text-align: center;
nicholas@2224:     align-content: center;
nicholas@2224:     float: left;
nicholas@2224: }
n@2580: div.calibration-slider input[type=range][orient=vertical] {
n@2580:     writing-mode: bt-lr;
n@2580:     /* IE */
n@2580:     -webkit-appearance: slider-vertical;
n@2580:     /* WebKit */
nicholas@2224:     width: 8px;
nicholas@2224:     padding: 0 5px;
nicholas@2224:     height: 290px;
giuliomoro@2339: }
n@2580: 
n@2580: /*  Comment Boxes */
n@2580: 
n@2580: div.comment-slider-text-holder {
n@2580:     display: flex;
n@2580:     flex-direction: row;
n@2580:     justify-content: space-between;
n@2580: }
n@2580: div.comment-slider-text-holder span {
n@2580:     margin: 0px 5px;
n@2580: }