nicholas@2224: /* structure.css
nicholas@2224:  * Define the structure for classes and objects in HTML
nicholas@2224:  */
nicholas@2224: 
nicholas@2224: div.title {
nicholas@2538:     width: 100%;
nicholas@2538:     height: 50px;
nicholas@2538:     margin-bottom: 10px;
nicholas@2538:     font-size: 2em;
nicholas@2224: }
nicholas@2842: div#footer {
nicholas@2842:     position: fixed;
nicholas@2842:     bottom: 0px;
nicholas@2842:     width: 100%;
nicholas@2842:     text-align: center;
nicholas@2842: }
nicholas@2224: div.indicator-box {
nicholas@2538:     position: absolute;
nicholas@2538:     left: 150px;
nicholas@2538:     top: 10px;
nicholas@2538:     width: 300px;
nicholas@2538:     height: 60px;
nicholas@2538:     padding: 20px;
nicholas@2538:     border-radius: 10px;
nicholas@2538:     background-color: rgb(100, 200, 200);
nicholas@2224: }
nicholas@2224: div.comment-div {
nicholas@2538:     border: 1px solid #444444;
nicholas@2538:     max-width: 600px;
nicholas@2538:     min-width: 400px;
nicholas@2538:     float: left;
nicholas@2538:     margin: 5px 10px 5px 5px;
nicholas@2538:     height: 90px;
nicholas@2224:     border-radius: 10px;
nicholas@2224: }
nicholas@2224: div.comment-div span {
nicholas@2538:     margin-left: 15px;
nicholas@2224: }
nicholas@2224: div.popupHolder {
nicholas@2538:     width: 500px;
nicholas@2538:     min-height: 250px;
nicholas@2538:     max-height: 400px;
nicholas@2538:     background-color: #fff;
nicholas@2538:     border-radius: 10px;
nicholas@2538:     box-shadow: 0px 0px 50px #000;
nicholas@2538:     z-index: 10;
nicholas@2538:     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: }
nicholas@2224: div#popupResponse {
nicholas@2224:     width: inherit;
nicholas@2224:     min-height: 50px;
nicholas@2738:     max-height: 270px;
nicholas@2224:     overflow: auto;
nicholas@2224:     position: relative;
nicholas@2738:     margin-bottom: 10px;
nicholas@2224: }
nicholas@2224: button.popupButton {
nicholas@2538:     /* Button for popup window
nicholas@2224: 	 */
nicholas@2538:     width: 50px;
nicholas@2538:     height: 25px;
nicholas@2538:     position: absolute;
nicholas@2538:     border-radius: 5px;
nicholas@2538:     border: #444;
nicholas@2538:     border-width: 1px;
nicholas@2538:     border-style: solid;
nicholas@2538:     background-color: #fff;
nicholas@2224: }
n@2926: div.popup-option-checkbox {
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@2926: div.popup-option-checkbox 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: }
n@2583: div.survey-slider-text-holder {
n@2583:     display: flex;
n@2583:     flex-direction: row;
n@2583:     justify-content: space-between;
n@2583:     padding: 0px 15px;
n@2583: }
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 {
nicholas@2538:     /* Specify any colouring during the test halt for pre/post questions */
nicholas@2538:     background-color: rgba(0, 0, 0, 0.5);
nicholas@2538:     /* Don't mess with this bit */
nicholas@2538:     z-index: 9;
nicholas@2538:     width: 100%;
nicholas@2538:     height: 100%;
nicholas@2538:     position: fixed;
nicholas@2538:     left: 0px;
nicholas@2538:     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;
nicholas@2538:     background-color: rgb(255, 220, 220);
nicholas@2538:     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;
nicholas@2538:     background-color: rgb(255, 255, 220);
nicholas@2538:     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;
nicholas@2538:     background-color: rgb(200, 220, 255);
nicholas@2538:     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 {
nicholas@2538:     width: 120px;
nicholas@2538:     height: 20px;
nicholas@2538:     margin-bottom: 5px;
nicholas@2538:     position: absolute;
nicholas@2224: }
nicholas@2224: textarea.trackComment {
nicholas@2538:     max-width: 594px;
nicholas@2538:     min-width: 350px;
nicholas@2538:     max-height: 60px;
nicholas@2224:     resize: none;
nicholas@2224: }
nicholas@2224: div.playhead {
nicholas@2538:     width: 500px;
nicholas@2538:     height: 50px;
nicholas@2538:     background-color: #eee;
nicholas@2538:     border-radius: 10px;
nicholas@2538:     padding: 10px;
nicholas@2224: }
nicholas@2224: div.playhead-scrub-track {
nicholas@2538:     width: 100%;
nicholas@2538:     height: 10px;
nicholas@2538:     border-style: solid;
nicholas@2538:     border-width: 1px;
nicholas@2224: }
nicholas@2224: div#playhead-scrubber {
nicholas@2538:     width: 10px;
nicholas@2538:     height: 10px;
nicholas@2538:     position: relative;
nicholas@2538:     background-color: #000;
nicholas@2224: }
nicholas@2352: div.master-volume-holder-inline {
nicholas@2352:     width: 100%;
nicholas@2352:     padding: 5px;
nicholas@3044:     float: left;
nicholas@2352: }
nicholas@2352: div.master-volume-holder-float {
nicholas@2352:     position: absolute;
nicholas@2352:     top: 20px;
nicholas@2352:     left: 50px;
nicholas@2773:     width: 250px;
nicholas@2352:     padding: 5px;
nicholas@2352: }
nicholas@2352: div#master-volume-root {
nicholas@2538:     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@2669:     width: 190px;
nicholas@2224:     height: 25px;
nicholas@2224:     float: left;
nicholas@2224:     margin: 0px;
nicholas@2224:     padding: 0px;
nicholas@3132:     background-color: rgba(0,0,0,0);
nicholas@2224: }
nicholas@2224: span#master-volume-feedback {
nicholas@2224:     height: 25px;
nicholas@2669:     margin: 0px 5px;
nicholas@2669:     float: right;
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 {
n@3102:     width: 44px;
nicholas@2224:     margin: 2px;
nicholas@2224:     text-align: center;
nicholas@2224:     align-content: center;
nicholas@2224:     float: left;
nicholas@2224: }
nicholas@2538: div.calibration-slider input[type=range][orient=vertical] {
nicholas@2538:     writing-mode: bt-lr;
nicholas@2538:     /* IE */
nicholas@2538:     -webkit-appearance: slider-vertical;
nicholas@2538:     /* WebKit */
nicholas@2224:     width: 8px;
nicholas@2224:     padding: 0 5px;
n@3102:     height: 200px;
n@3102: }
n@3102: button.calibration-button {
n@3102:     height: 25px;
n@3102:     border-radius: 5px;
n@3102:     border: #444;
n@3102:     border-width: 1px;
n@3102:     border-style: solid;
n@3102:     background-color: white;
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: }
nicholas@2711: div.comment-checkbox-inputs-holder {
nicholas@2711:     display: flex;
nicholas@2711:     flex-direction: row;
nicholas@2711:     justify-content: space-around;
nicholas@2711:     margin: 10px 5px;
nicholas@2711: }
nicholas@2711: div.comment-checkbox-inputs-flex {
nicholas@2711:     display: flex;
nicholas@2711:     flex-direction: column;
nicholas@2711:     justify-content: space-between;
nicholas@2711:     align-items: center;
nicholas@2726: }
nicholas@2726: div.comment-box-playing {
nicholas@2726:     background-color: #FFDDDD;
nicholas@2726: }
nicholas@2779: div#imageController {
nicholas@2779:     align-content: center;
nicholas@2779:     text-align: center;
nicholas@2779:     height: 250px;
nicholas@2779: }
nicholas@2779: div#imageController img {
nicholas@2779:     max-height: 250px;
nicholas@2779: }