@charset "UTF-8";
/* This stylesheet should ONLY contain styles that are required for bundled
 * Portfolio behavior to work.  This includes styles required to toggle
 * visibility of page components, maintain state machine enable/disable
 * buttons and things like that.  In most cases styles should be added to
 * design.css to alter the default design in Portfolio instead of modifying
 * this stylesheet.
 */

/* Importing tinymce customisations */
@import "tinymce_custom.css";

/* Ensure wide menu entries does not break out of box */
ul.jd_menu li li { overflow: hidden; }
.ping-timer { position: fixed; bottom: 0; right: 0; display: inline-block; z-index: 1000; background-color: #000000; color: #ffffff; padding: 1px; }
#element_motd,
#element_cookies {
    box-sizing: border-box; position: relative; width: 100%; min-height: 30px;
    padding: 8px; margin: 2px 0;
    border-style: solid; border-width: 2px; border-radius: 3px;
    color: black;
    background-color: #ffe8be; border-color: #ffa500;
}
#element_cookies { min-height: 25px; padding: 4px 10px; border: 0; color: white; background-color: black; }
.javascript #element_motd,
.javascript #element_cookies { display: none; } /* avoid flash of unstyled content */
#element_motd .motd a { text-decoration: underline; color: black; }
/* Ensure content use as little vertical space as possible */
#element_motd > * { display: inline; vertical-align: top; }
#element_motd .inline { display: inline; }
#element_motd .motd > div > * { margin: 0; display: inline; }
@media screen {
    #element_comments .recorder { display: none; }
    .file-upload { margin: 1em 0; }
    .file-upload .drop-zone { padding: 2em; border: 1px dotted black; display: block; text-align: center; }
    .file-upload .drop-zone.draghover { background-color: #eee; }
    .file-upload .drop-zone .message { display: block; font-size: 18pt; text-align: center; }
    .file-upload .drop-zone input { display: none;  }
    .file-upload .drop-zone button { margin-top: 1em; padding-top: 0.5em; padding-bottom: 0.5em; cursor: pointer; }
    .file-upload .upload-progress { position: relative; margin-top: 0.25em; }
    .file-upload .upload-label { position: absolute; left: 0.5em; top: 0.5em; white-space: nowrap; padding-left: 20px; }
    .file-upload iframe { display: none; }
    .file-upload .uploading { background: url("/static/gfx/spinner.gif") no-repeat; }
    .file-upload .upload-success { background: url("/get_icon/status/success") no-repeat; }
    .file-upload .upload-error { background: url("/get_icon/status/error") no-repeat; }
    #element_motd .close,
    #element_cookies .close {
        position: absolute; top: 2px; right: 2px;
        padding: 1px 3px; margin: 1px;
        text-decoration: none; cursor: pointer;
        border: 1px outset #888; border-radius: 3px;
        color: black; background-color: #eee;
    }
    #element_cookies .close {
        background-color: black; color: white;
        right: 10px;
        border: 0;
        font-size: 120%;
    }
    #element_cookies .more {
        border: 0; border-radius: 3px;
        color: white; background-color: #1e7d2e;
        cursor: pointer; text-decoration: none;
        padding: 2px 12px; white-space: nowrap;
        margin-left: 12px; margin-right: 12px;
    }
    #element_motd .close:hover,
    #element_cookies .close:hover,
    #element_cookies .more:hover { border-style: inset; }
    .javascript #element_motd,
    .javascript #element_cookies { padding-right: 20px; } /* make room for close button */
    .javascript a.audio_mpeg { display: none; }
    .javascript div.audio_mpeg.large { display: inline-block; border-radius: 3px; border: thin solid #ccc; padding: 0.5em 1em; background-color: #eee; }
    .javascript div.audio_mpeg .timer { margin-left: 0.5em; white-space: nowrap; }
    .javascript div.audio_mpeg .slider { margin: 0.5em 0; width: 100%; }
    .javascript div.audio_mpeg .play_button { padding: 0; margin-left: 0.5em; }
    .javascript div.audio_mpeg .pause_button { padding: 0; }
    .javascript div.audio_mpeg .stop_button { padding: 0; margin-right: 0.5em; }
    .javascript span.audio_mpeg .play_stop_button { padding: 0; margin-right: 0.5em; }
    .javascript .audio_mpeg > button > img { padding: 0 !important; margin: 0; }
    #request_add_edit .origin-object { position: relative; }
    #request_add_edit .origin-object .content-wrapper { position: absolute; left: 0; background-color: #ffffff; border: 1px solid grey; width: 40em; padding: 0; z-index: 5; }
    #request_add_edit .origin-object .title-wrapper { background-color: #cccccc; width: 100%; padding: 2px 0 2px 2px; }
    #request_add_edit .origin-object .close-content-wrapper { position: absolute; right: 0; font-size: 60%; }
    #request_add_edit .origin-object .content { padding: 2px; height: 350px; overflow: auto; }

    .content-editor .textarea-wrapper .reference-list { display: none; }

    #request_selector { margin: 0; font-size: 10px; box-sizing: border-box; }
    #request_selector *,
    #request_selector *:before,
    #request_selector *:after { box-sizing: inherit; }

    /* Vertical height using flexbox/viewport units to ensure table with elements overflow correctly */
    #request_selector { height: 96vh; display: flex; flex-flow: column nowrap; }
    #request_selector .ui-tabs { flex: 1 1 auto;  }
    #request_selector .selected-ui { flex: 0 0 auto; }
    #request_selector .ui-tabs { display: flex; flex-flow: column nowrap; }
    #request_selector .ui-tabs > * { flex: 0 0 auto; }
    #request_selector .ui-tabs .tab-page { flex: 1 1 auto; }
    #request_selector .ui-tabs .tab-page { display: flex; flex-flow: column nowrap; }
    #request_selector .ui-tabs .tab-page > * { flex: 0 0 auto; }
    #request_selector .ui-tabs .tab-page .selector-elements { flex: 1 1 31vh; overflow: auto; }

    #request_selector .ui-tabs .ui-tabs-anchor { padding: 2px 10px; }
    #request_selector .ui-tabs .tab-page { padding: 5px 2px 2px; }

    #request_selector .upload-ui .file-upload { margin: 0; }
    #request_selector .upload-ui .file-upload .drop-zone { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-around; padding: 0; }
    #request_selector .upload-ui .file-upload .drop-zone > * { flex: 1 1 auto; margin: 2px; }

    #request_selector .style-ui .style-controls { display: flex; flex-flow: row nowrap; }
    #request_selector .style-ui .style-controls fieldset { flex: 0 1 auto; width: 25%; display: flex; flex-flow: column nowrap; border: 1px solid #ccc; margin: 1px 3px; }
    #request_selector .style-ui .style-controls fieldset > * { flex: 0 1 auto; width: 100%; margin: 2px 0; }
    #request_selector .style-ui .style-result { margin: 5px 0; }
    #request_selector .style-ui input,
    #request_selector .style-ui select,
    #request_selector .style-ui textarea { width: 100%; overflow: auto; }

    #request_selector .selector-ui { display: flex; flex-flow: row nowrap; align-items: center; }
    #request_selector .selector-ui > * { flex: 0 1 auto; margin: 3px; }
    #request_selector .selector-ui button { cursor: pointer; }
    #request_selector .selector-ui input { flex: 1 1 auto; }

    #request_selector .selector-elements { position: relative; margin: 5px 0; }
    #request_selector .selector-elements table { width: 100%; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; font-size: 80%; }
    #request_selector .selector-elements table th,
    #request_selector .selector-elements table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; padding: 1px 2px; border: 0; }
    #request_selector .selector-elements table thead th { border: 0; border-bottom: 1px solid #ccc; }
    #request_selector .selector-elements table tbody tr { cursor: pointer; }
    #request_selector .selector-elements table tbody tr.selected { color: white; background-color: black; }
    #request_selector .selector-elements table .label { width: 57%; }
    #request_selector .selector-elements table .size { width: 8%; text-align: right; }
    #request_selector .selector-elements table .type { width: 15%; text-align: center; }
    #request_selector .selector-elements table .timestamp { width: 20%; text-align: right; }

    #request_selector .selected-ui { display: flex; flex-flow: row nowrap; background-color: #f0f0ee; }
    #request_selector .selected-ui > * { flex: 0 1 auto; display: flex; flex-flow: column nowrap; margin: 5px; background-color: #ccc; padding: 2px 5px 5px;  border-radius: 5px; }
    #request_selector .selected-ui > * > * { flex: 0 1 auto; width: 100%; }
    #request_selector .selected-ui > * > h2 { margin: 0 0 5px; padding: 0; }
    #request_selector .selected-ui .action-ui { width: 15%; justify-content: space-evenly; }
    #request_selector .selected-ui .action-ui input { margin-right: 5px; }
    #request_selector .selected-ui .preview-ui { width: 85%; }
    #request_selector .selected-ui .preview-ui .preview-wrapper { height: 100px; overflow: hidden; background-color: white; border-radius: 5px; padding: 5px; }
    #request_selector .selected-ui .preview-ui .preview-insert-point { color: red; }

    #request_quiz_editor { margin: 0; box-sizing: border-box; }
    #request_quiz_editor *,
    #request_quiz_editor *:before,
    #request_quiz_editor *:after { box-sizing: inherit; }

    /* Vertical height using flexbox/viewport units to ensure list with quiz options overflow correctly */
    #request_quiz_editor { height: 96vh; display: flex; flex-flow: column nowrap; }
    #request_quiz_editor > form { flex: 1 1 auto; display: flex; flex-flow: column nowrap; }
    #request_quiz_editor > form > * { flex: 0 0 auto; }
    #request_quiz_editor > form > .answer-ui { flex: 1 1 auto; display: flex; flex-flow: column nowrap; align-items: flex-start; }
    #request_quiz_editor > form > .answer-ui > * { flex: 0 0 auto; }
    #request_quiz_editor > form > .answer-ui ul { flex: 1 1 29vh; width: 100%; overflow: auto; }

    #request_quiz_editor h2 { margin-bottom: 5px; }

    #request_quiz_editor .quiz-type-ui { display: flex; flex-flow: row nowrap; justify-content: space-between; }
    #request_quiz_editor .quiz-type-ui > div { flex: 0 1 auto; display: flex; flex-flow: column nowrap; }
    #request_quiz_editor .quiz-type-ui > div > * { flex: 0 1 auto; }
    #request_quiz_editor .quiz-type-ui label { display: flex; flex-flow: row nowrap; margin-top: 3px; }
    #request_quiz_editor .quiz-type-ui label > * { flex: 0 1 auto; width: 33%; margin-right: 1em; }
    #request_quiz_editor .quiz-type-ui .preview > * { border: 2px outset #ddd; cursor: pointer; }
    #request_quiz_editor .quiz-type-ui .preview > *:hover { border: 2px inset #ddd; }

    #request_quiz_editor .question-ui input { width: 100%; }

    #request_quiz_editor .answer-ui ul { list-style-type: none; margin: 5px 0; overflow: auto; }
    #request_quiz_editor .answer-ui ul li { display: flex; flex-flow: row nowrap; margin-bottom: 5px; }
    #request_quiz_editor .answer-ui ul li input[type="checkbox"] { flex: 0 0 auto; margin-right: 5px; }
    #request_quiz_editor .answer-ui ul li input[type="text"] { flex: 1 1 auto; }

    #request_quiz_editor .bottom-ui { display: flex; flex-flow: row nowrap; justify-content: space-between; margin: 5px 0; }
    #request_quiz_editor .bottom-ui > * { flex: 0 0 15vw; display: flex; flex-flow: column nowrap; background-color: #ccc; padding: 5px; border-radius: 5px; }
    #request_quiz_editor .bottom-ui > .misc-ui { flex: 0 0 30vw; }
    #request_quiz_editor .bottom-ui > .playback-ui { flex: 1 1 50vw; }
    #request_quiz_editor .bottom-ui > * > * { flex: 0 1 auto; margin: 2px; }
    #request_quiz_editor .bottom-ui .playback-ui { margin-left: 10px; margin-right: 10px; }
    #request_quiz_editor .bottom-ui .misc-ui,
    #request_quiz_editor .bottom-ui .action-ui { justify-content: space-between; }
    #request_quiz_editor .bottom-ui .playback-ui label { display: flex; flex-flow: row nowrap; justify-content: space-between; }
    #request_quiz_editor .bottom-ui .playback-ui label > * { flex: 0 1 auto; width: 50%; }
    #request_quiz_editor .bottom-ui .action-ui button { font-size: 125%; }
    #request_quiz_editor .bottom-ui .action-ui button.ok { font-weight: bold; }
    #request_quiz_editor .bottom-ui .action-ui button.cancel { }

    #request_forgotten_pw label,
    #request_forgotten_pw input,
    #request_forgotten_pw button { display: block; margin: 5px 0; }
    #request_forgotten_pw label.security { display: none; }
    #request_forgotten_pw label.security_human { display: block; margin: 0.5em 0; }
    #request_forgotten_pw label.security_human input { display: inline; margin-left: 5px; vertical-align: middle; }

    #request_reset_pw label,
    #request_reset_pw input,
    #request_reset_pw button { display: block; margin: 5px 0; }

    ul.ancestor-path { display: flex; flex-wrap: wrap; margin: 0; }
    ul.ancestor-path > li { display: block; white-space: nowrap; margin: 0; }
    ul.ancestor-path > li:after { content: '»'; }
    ul.ancestor-path > li:last-child:after { content: ''; }
    ul.ancestor-path > li > a { margin: 0 5px; }
    ul.ancestor-path > li > a > img.icon { margin: 0 3px; padding: 0; }
}
@media print {
    .ping-timer,
    .file-upload,
    #element_motd .close,
    #element_cookies .close { display: none; }
    #request_add_edit .origin-object { display: none; }
}