@charset "UTF-8";
/* Default stylesheet for Portfolio */

/* ######### BEGIN: all.css     ######### */
p { margin-top: 1em; margin-bottom: 1em; }
strong { font-weight:bold; }
em { font-style: italic; }
ul, ol, dl { margin: 0.5em 2em; }

h1,h2,h3,h4,h5,h6 { margin: 0; }
h1 { font-size:1.6em;}
h2 { font-size:1.4em; }
h3 { font-size:1.25em; }
h4 { font-size:1.1em; }
h5 { font-size:1.05em; }
h6 { font-size:1em; }

/* Proper Q and BLOCKQUOTE tag formatting
   Quotes removed, see #1369.
 */
/*
q:before,blockquote:before { content: open-quote; font-weight: bold; }
q:after,blockquote:after { content: close-quote; font-weight: bold; }
*/
q,blockquote { font-style: italic; /* quotes: "\201C" "\201D"; */ }
blockquote {
    margin: 1em;
    padding: 0.5em;
}

/* Used by e.g. Zip object download/unpack feature */
dl.inline dt { margin-top: 0.75em; }
dl.inline dd { margin-top: 0.25em; margin-left: 2em; }

/* normalize.css sets width to a fixed value, get rid of that */
textarea { width: auto; }

/* Embedded header object types in container */
.inline_introduction {
  margin-bottom:0.5em;
}

.container_object_list {
  clear:both;
  padding-top: 0.5em;
  margin: 0 0 0.5em 0;
  list-style: none;
}

.info, .warning, .error { border-width: 1px; border-style: solid; padding: 0.5em; border-radius: 5px; }
.info { background-color: #ccffcc; border-color: #008800; }
.warning { background-color: #ffe8be; border-color: #ffa500; }
.error { background-color: #ffc0c0; border-color: #ff0000; }
span.info, span.warning, span.error { margin: 0.1em; display: inline-block; }

#request_add_edit table,
#request_add_edit_container table,
#request_add_edit_course table,
#request_add_edit_institution table,
#select_view table,
#request_read_message table,
#request_read_account table,
#request_add_edit_site table,
#request_new_message table,
#request_list_log form table,
#request_add_course_element table { margin: 0; }

#request_add_edit table td,
#request_add_edit_container table th,
#request_add_edit_container table td,
#request_add_edit_course table th,
#request_add_edit_course table td,
#request_add_edit_institution table th,
#request_add_edit_institution table td,
#select_view table td,
#request_read_message table th,
#request_read_message table td,
#request_read_account table td,
#request_add_edit_site table td,
#request_new_message table td,
#request_list_log form table td,
#request_add_course_element table th,
#request_add_course_element table td { border: 0; padding: 0; text-align: left; }

#request_read_account table td { padding: 0.125em; }
#request_read_account table td.element_header { border: 1px solid #999999; padding: 2px; text-align: center; }
#request_add_edit_site table td { padding: 0.125em; }
#request_read_message #message_content table th,
#request_read_message #message_content table td { padding: 0.2em; }

th { font-weight: bold; padding: 0.2em; }

#element_content { font-size: 1em; }
#element_content table { margin-top: 0.5em; margin-bottom: 0.5em; }
#element_content div.introduction { font-weight: bold; margin: 1em 0 1em 0; padding: 0.2em; }
#element_content div.introduction img { margin-bottom: 0.5em; }
#element_content p.blog_introduction { margin: 0; padding: 0.2em; }

.highlight { font-weight: bold; }
.highlight_changes {background-color:#ff0; }

.system_form table { width: 100%; }
.system_form th { width: 10%; padding:0 1em 0.5em 0; }
.system_form td { padding: 0 1em 0.5em 0; }
.system_form input[type="text"] { width: 98%; }
.system_form select { width: 99%; }
.system_form textarea { width: 99%; }

.quiz_solution {
  border: 0.185em solid #d4d0c8;
  background-color: #fee;
  margin-top: 1em;
  margin-bottom: 1em;
}

.glossary_playback {
margin-right:0.4em;
}

.filter_info {
  background-color: #ececec;
  border-top: 0.125em solid #ccc;
  padding: 0.25em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: right;
}

fieldset.border {
  border: 1px solid #ccc;
  padding: 0.25em;
  margin-bottom: 0.5em;
}

ul.horizontal { margin-left: 0; margin-right: 0; }
.horizontal li { display: inline; }

.quiz_answer_textarea_show {
 text-align: left; font-weight: normal !important; border: thin solid black; padding: 0.5em;
 font-family: "Courier New", Courier, monospace;
}

/* https://app.liquidplanner.com/space/35293/projects/show/16611294P */
div[dir="rtl"] div.quiz input[type="radio"] { margin-left: 1em; }

.report_score dt { margin-top: 0.5em; }
.report_score dd { margin-left: 1em; font-style: italic; }

dl.object_license { margin: 0; }
dl.object_license dt { margin-left: 0; }
dl.object_license dd { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0; background-color: #ffffcc; padding: 0.25em; }

.wide-table, .wide {
    width: 100%;
}
.wide-auto {
    width: auto;
}
.relative {
    position: relative;
}
.red-color {
    color: red;
}
.show-inline {
    display: inline;
}
.show-block {
    display: block;
}
.align-top { vertical-align: top; }
.fixed-nowrap {
    width:8em;white-space:nowrap;
}
.right-tiny {
    text-align:right;width:1em;
}
.small-fieldset {
    width: 48%;
}
input.inline {
    width:1.5em; padding-left:0.2em; border:none;
}
textarea.csv {
    width:100%; height:20em; display:block;
}
.strong-text {
    font-weight:bold;
}
.pad-right-small {
    padding-right: 0.5em;
}
.pad-top-small {
    padding-top: 0.5em;
}
.color-good {
    color: green;
}
.color-bad {
    color: red;
}
.tiny-input {
    width: 1.5em;
}
li.disc {
    list-style-type: disc;
}
.text-right { text-align: right;}
.text-center { text-align: center;}

/* Narrow forms with inputs aligned */
form.narrow { display: inline-block; text-align: right; }
form.narrow legend { text-align: left; }
form.narrow label { display: block; margin: .5em; }
form.narrow input,
form.narrow select,
form.narrow textarea { margin-left: .5em; }
form.narrow button { margin: .5em; }

/* Wide forms with labels on separate line before input element */
form.wide { display: block; }
form.wide fieldset { padding: 0 0.75em; margin-top: 0.5em; border-radius: 5px; background: #eeeeee; }
form.wide label { display: block; font-weight: bold; margin-top: 0.5em; }
form.wide input,
form.wide select,
form.wide textarea { display: block; font-weight: normal; width: 100%; }
form.wide button { margin: .5em 0; }

/* Workaround for YUI Base setting a fixed width on input/textarea
 * with higher selector precedence */
input.wide,
textarea.wide { width: 100%; }

/* CSS3 Font Embed */
@font-face {
    font-family: 'NafeesNastaleeqRegular';
    src: url('/static/fonts/nafees/nafees-nastaleeq-v1-02-webfont.eot');
    src: local('☺'),
         url('/static/fonts/nafees/nafees-nastaleeq-v1-02-webfont.woff') format('woff'),
         url('/static/fonts/nafees/nafees-nastaleeq-v1-02-webfont.ttf') format('truetype'),
         url('/static/fonts/nafees/nafees-nastaleeq-v1-02-webfont.svg#webfont3OZiJD0Z') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PakNastaleeqRegular';
    src: url('/static/fonts/pak_nastaleeq/pak_nastaleeq_beta_release-webfont.eot');
    src: local('☺'),
         url('/static/fonts/pak_nastaleeq/pak_nastaleeq_beta_release-webfont.woff') format('woff'),
         url('/static/fonts/pak_nastaleeq/pak_nastaleeq_beta_release-webfont.ttf') format('truetype'),
         url('/static/fonts/pak_nastaleeq/pak_nastaleeq_beta_release-webfont.svg#webfontuOIp2Bam') format('svg');
    font-weight: normal;
    font-style: normal;
}


.NafeesNastaleeq {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'Nafees Nastaleeq', Nafees, 'NafeesNastaleeqRegular', sans-serif;
}

.PakNastaleeq {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Pak Nastaleeq', 'PakNastaleeqRegular', sans-serif;
}

#request_read_institution dl dt,
#request_read_institution dl dd { display: inline-block; margin-bottom: 5px; }
#request_read_institution dl dt { width: 105px; }
#request_read_institution dl dd { width: 450px; vertical-align: text-top; }
#request_read_institution dl dd ul { margin: 0; list-style-type: none; }

form.element-group-enrollment-ui { text-align: left; }
form.element-course-enrollment-ui { text-align: left; }
form.element-manage-user-config { text-align: left; }

#request_enroll_into_institution_course dl { display: inline-block; margin: 0.5em 0; }
#request_enroll_into_institution_course dt { display: block; background-color: #ddd; padding: 0.5em; font-weight: bold; margin-top: 0.5em; border-radius: 5px; }
#request_enroll_into_institution_course dd { margin-left: 1em; background-color: #eee; padding: 0.25em 1em; border-radius: 5px; }
#request_enroll_into_institution_course ul { list-style-type: none; margin: 0.25em 0; }
#request_enroll_into_institution_course button { display: block; }

#request_list_institution_courses .license-overflow { color: red; }
#request_list_institution_courses .license-warning { color: orange; }
#request_list_institution_courses .license-ok { color: green; }
#request_list_institution_courses .license-count { max-width: 4em; text-align: right; }

#request_add_edit_class input,
#request_add_edit_class select,
#request_add_edit_class textarea { width: 20em; }
#request_add_edit_class input[type="checkbox"] { width: auto; margin-right: 19em; }

#element_comments { clear: both; padding: 1em 0; }
#element_comments .comments { margin-top: 1em; display: flex; flex-direction: column; }
#element_comments .comments > * { display: flex; flex-direction: row; }
#element_comments .comments > fieldset { border: 1px solid #cccccc; border-radius: 5px; padding: 0.5em; color: black; background-color: white; }
#element_comments .comment > legend { font-weight: bold; }
#element_comments .comment-main { display: flex; flex-direction: column; flex: 1; margin-left: 0.5em; }
#element_comments .comment .avatar { padding: 0; }
#element_comments .comment-header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; }
#element_comments .comment-info { line-height: 1.5em; font-style: italic; font-size: smaller; }
#element_comments .comment-info select { font-style: italic; border: none; }
#element_comments .comment-delete { align-self: flex-end; }
#element_comments .comment-content { overflow-wrap: anywhere; }

#request_list_student .col-checkbox { text-align: center; }
#request_list_student .col-link,
#request_list_student .col-date { white-space: nowrap; text-align: right; }
#request_list_student ul.reveal { margin: 0 0 0 1.25em; }
#request_list_student ul.reveal li { list-style-type: disc; }

/* jQuery DataTables interactive table */
table.display .col-checkbox { text-align: center; }
table.display .col-text {}
table.display .col-number { white-space: nowrap; text-align: right; }
table.display .col-link { white-space: nowrap; text-align: center; }
table.display .col-date { white-space: nowrap; text-align: center; }
table.display .col-actions { white-space: nowrap; }
/* Fix displacement of checkbox invert selection button */
table.display .col-checkbox .DataTables_sort_wrapper { padding-right: 10px; }
table.display td { vertical-align: top; border: 0; }

div.dataTables_wrapper { margin-top: 0.5em; margin-bottom: 0.5em; }

#request_list_config dl { margin: 0.5em 1em; }
#request_list_config dt { font-weight: bold; margin-top: 0.25em; }
#request_list_config dd { font-style: italic; margin-left: 1em; margin-right: 1em;}

fieldset.divider { border: 0; margin: 0.5em 0 1em 0; padding: 0.25em 0;}
fieldset.divider legend { font-size: larger; padding: 0.25em 0.5em; border-radius: 5px; }

#request_user_activity form.period-selector { margin: 1em 0; }
#request_user_activity form.period-selector input[name="period_started_at"] { width: 6em; }

#request_page_view_log .user-info { text-align: right; position: relative; top: -1.5em; margin-bottom: -1.5em; margin-right: 1em; }

#request_page_view_log .aggregates th,
#request_page_view_log .aggregates td { text-align: right; }

#request_page_view_log .details .col-viewed-at,
#request_page_view_log .details .col-time-spent { white-space: nowrap; text-align: center; }
#request_page_view_log .details .col-handler { white-space: nowrap; text-align: left; }
#request_page_view_log .details .col-interactivity { white-space: nowrap; text-align: right; }
#request_page_view_log .details .col-date { text-align: right; }
#request_page_view_log .details .active * { color: #888; }

div.meter { position: relative; background-color: #ccc; height: 1.25em; border-radius: 5px; display: inline-block; vertical-align: middle; width: 50px; margin-left: 0.25em; }
div.meter > span { display: block; background-color: green; height: 100%; overflow: hidden; border-radius: 5px; }

.no_javascript #request_course_result .total-time { display: none; }
.no_javascript #request_course_result .average-score { margin-top: 1em; }
#request_course_result .total-time { margin: 1em auto 0.25em auto; }
#request_course_result .average-score { margin: 0.25em auto 1em auto; }
#request_course_result .average-score .meter { width: 200px; }
#request_course_result a.button { margin-top: .5em; display: inline-block; }
#request_course_result ul { list-style-type: none; }
#request_course_result ul.hover { margin: 0 0 0 1.25em; list-style-type: disc; }
#request_course_result .col-date { text-align: right; }

#request_list > a.button { display: none; }
#request_list .ui-toolbar a.button { margin-right: 0.25em; padding-left: 0.5em; padding-right: 0.5em; }
#request_list h2 { margin-top: 1em; }
#request_list fieldset { border-radius: 3px; border: thin solid #ccc; background-color: #eee; padding: 0.5em; margin-top: 1em; }
#request_list fieldset fieldset { background-color: white; margin-top: 0; }
#request_list fieldset legend { border-radius: 3px; border: thin solid #ccc; background-color: #eee; color: #383838; padding: 0.2em 0.5em; font-weight: bold; }
#request_list fieldset label { margin: 0.25em 0; display: block; }
#request_list fieldset.narrow { display: inline-block; }
#request_list fieldset.manage-ownership { clear: both; float: left; margin-top: 0.5em; margin-right: 0.5em; }
#request_list fieldset.manage-ownership label { display: inline; }
#request_list fieldset.deletion { float: left; margin-top: 0.5em; }
#request_list fieldset.move-to-folder input[type=button] { background-color: white; min-width:20em; text-align: left; }
#request_list fieldset.permissions { float: left; margin-right: 0.5em; margin-top: 0.5em; }
#request_list fieldset.permission-actions { float: left; margin-right: 0.5em; margin-top: 0.5em; }
#request_list fieldset.permission-actions button { display: block; width: 100%; }
#request_list fieldset.permission-actions button.add { margin-bottom: 0.5em; }
#request_list label.recursion { clear: both; margin-left: 0.25em; padding-top: 0.5em; }
#request_list fieldset.modify-course label { margin-left: 0.25em; }
/* ######### END:   all.css     ######### */

/* ######### BEGIN: screen.css  ######### */
@media screen {
    /* ======= FONT FAMILY ========= */
    /* Variable width text */
    body,
    .inline_feed,
    .w3cbutton
    { font-family: Arial, Helvetica, sans-serif; }

    #wrapper_object_content img {
    padding:0.25em 0.5em;
    }

    /* Fixed width text */
    pre
    { font-family: 'Courier New', Courier, monospace; }

    /* ========= FONT STYLE ============= */
    .inline_feed a,
    .w3cbutton,
    .quiz_message,
    .quiz_answer,
    .quiz_question,
    #element_top_row,
    #element_usermenu label
    { font-weight: bold; }

    .inline_feed a:visited { font-weight: normal; }

    a,
    .w3c:link,
    .w3c:visited,
    .w3c:hover,
    .w3cspec:link,
    .w3cspec:visited,
    .w3cspec:hover,
    #element_usermenu a,
    #element_usermenu a:hover,
    #element_usermenu ul,
    #element_usermenu ul ul
    { text-decoration: none; }

    #element_usermenu a:hover,
    a.popup:hover
    { text-decoration: underline; }

    /* ========= ELEMENT DISPLAY ========== */
    /* Hidden elements */
    #element_menu .noaccess,
    #pf_manipulate_elements,
    .element_tidy_message_list
    { display: none; }

    /* Inline elements */
    .element_actions_toolbar form,
    #element_header h1,
    #user_menu,
    #element_usermenu form
    { display: inline; }

    /* Block elements */
    .quiz_submission,
    #element_search,
    .element_actions_toolbar
    { display: block; }

    /* =========== CURSOR ============= */
    /* Hand */
    .element_actions table td,
    .icon,
    .quiz input,
    .quiz label,
    #element_menu .icon,
    #element_usermenu .icon,
    #element_contacts .icon
    { cursor: pointer; }

    /* ============== FOREGROUND COLORS ============== */

    a:hover
    { color: red; }

    .w3cspec:link,
    .w3cspec:visited,
    .w3cspec:hover,
    .invalid_value,
    .not_implemented,
    .access_denied,
    .template_error,
    #element_top_row,
    #element_header a,
    #element_nav a,
    #element_rootmenu_containers a,
    #element_menu,
    #element_menu a,
    #element_usermenu,
    #element_usermenu h1,
    #element_usermenu ul,
    #element_usermenu ul ul,
    #element_contacts,
    #tooltip,
    #tooltip_content h1,
    #element_content
    { color: black; }

    .hairline,
    .internal_error,
    .quiz_not_implemented,
    #element_status
    { color: white; }

    .w3c:link,
    .w3c:visited,
    .w3c:hover
    { color: #0c479d; }

    .quiz_message
    { color: #00f; }

    a.popup { color:#300; }

    #element_header,
    #element_header h2
    { color: #333366; }

    .element_header
    { color: #333333; }

    #element_header .pad {
        padding: 1em;
    }
    .list_object h2,
    .list_object h2 a
    { color: #444; }

    /* ============== BACKGROUND (COLORS/IMAGES) ============== */
    #element_top_row
    { background: transparent; }

    #element_search_container
    { background: none; }

    .w3c:link,
    .w3c:visited,
    .w3c:hover,
    #element_header,
    table.grid,
    #tooltip,
    #element_top_row_first_line,
    #element_content
    { background-color: white; }

    #element_content .adjust {
        width:96.5%;padding:0;
    }

    .hairline,
    #element_status
    { background-color: black; }

    .invalid_value,
    .not_implemented,
    a:hover
    { background-color: yellow; }

    .access_denied,
    .template_error,
    .quiz_not_implemented
    { background-color: red; }

    #element_top_row_inline_table,
    #element_top_row_inline_table tr,
    #element_top_line
    { background-color: #79A800; }

    #element_nav a:hover,
    #element_menu a:hover,
    #tooltip_content h1
    { background-color: #c6d3ef; }

    .internal_error
    { background-color: #c00; }

    .list_group,
    .list_user,
    .list_object,
    .list_container
    { background-color:#ececec; }

    .element_actions table,
    #element_contacts
    { background-color: #eee; }

    #element_rootmenu_containers table,
    #element_usermenu
    { background-color: #eeeeee; }

    a.popup:hover
    { background-color: #c6d3ef; }

    .element_header
    { background-color: #ccc; }

    .w3cspec:link,
    .w3cspec:visited,
    .w3cspec:hover
    { background-color: #fc6; }

    a.popup
    { background-color:#ffd; }

    table.grid th,
    table.grid td
    { background-color: rgb(250, 250, 250); }

    #element_header
    { background-image: url('../gfx/left_logo_bg.png'); }

    #element_nav_container {
     padding-top: 2px;
     background-color:#eee;
    }

    #element_nav_container table {
     vertical-align: middle;
    }

    /* ============== OTHER =============== */

    iframe { border: 0; }

    /* This one makes sure list items in list items aren't getting sized on each invocation */
    form, input, th, td, li li, li p, td p, blockquote p { font-size:1em; }

    /* Make sure fixed size text use browser default monospace font */

    /* Container for top elements */
    #element_top_row {
     font-size: 1em;
     margin:0;
     padding:0;
     border:solid 0.1em black;
    }

    #element_top_row_first_line {
     border:solid #79A800 1px;
     padding:1px;
    }

    #element_top_row_inline_table {
     width: 100%;
     padding: 0;
    }

    #element_top_row_inline_table tr {
     padding:0;
     width:100%;
    }

    #element_top_menu {
     padding:0 0 0 1em;
    }

    /* Page title, usually located top-left */
    #element_header {
     overflow:hidden;
     height:48px;
     margin:0;
     padding:0 0 0 1em;
     border:none;
     float:left;
     text-align:center;
    }

    #element_header table {
     padding:0;
     margin:0;
     border:0;
    }

    #element_header img {
     padding:0;
     margin:0;
     border:none;
    }

    /* Search this site */
    #element_search_container {
     margin: 0;
     border: none;
     padding: 1.2em 1em 0.8em 1em;
     white-space: nowrap;
     text-align: right;
     vertical-align: middle;
    }

    #element_search > * { vertical-align: middle; margin-left: 0.25em; }
    #element_search select { width: 14em; font-size: 80%; background-color: #eee; }
    #element_search input.query { width: 7em; }
    #element_search button { max-width: 4em; padding: 0; }
    #element_search button .icon { margin: 0; padding: 0; }

    #element_top_line {
     height:1em;
    }

    .filter_info {
    clear: both;
    background-color:#fff;
    border:none;
    font-size:0.8em;
    height:1.5em;
    }
    .filter_info form {
    position:absolute;
    right:0;
    }
    .filter_info select {
    font-size:1em;
    background-color:#eee;
    }

    #element_online {
     float: right;
     text-align:right;
     padding:0 0.5em 0 0.5em;
     margin-top: 0.25em;
     font-weight: bold;
    }

    .element_exam_status.compact { padding:2px 5px 2px 5px; border-width: 1px 0 1px 0; border-style: solid; }
    .element_exam_status.compact.started  { background-color: #ccffcc; border-color: #008800; }
    .element_exam_status.compact.ahead    { background-color: #ccffcc; border-color: #008800; }
    .element_exam_status.compact.behind   { background-color: #ffffcc; border-color: #888800; }
    .element_exam_status.compact.finished { background-color: #ffcccc; border-color: #880000; }

    /* Navigation frame, located underneath both the title and logo, span full page width */
    #element_nav {
     padding: 0 0 0 0.5em;
     margin: 0;
     white-space:nowrap;
    }

    #element_nav a {
     padding:1px;
     border:none;
    }

    #element_nav a:hover {
     padding:0;
     border: solid 1px #3169c6;
    }

    #element_rootmenu_containers {
     position:absolute;
     height:350px;
     width:200px;
     overflow:auto;
    /* OPERA SEEMS TO NOT UNDERSTAND overflow-x and overflow-y */
    /* overflow-x:hidden;*/
     z-index:48;
    }

    #element_rootmenu_containers table {
     border:outset white;
    }

    /* Container for middle elements */
    #element_middle_row
    { clear:both; width:100%; }

    table.grid {
        border-width: 1px;
        border-spacing: 0px;
        border-style: solid;
        border-color: black;
        border-collapse: collapse;
    }

    table.grid th {
        border-width: 1px 1px 1px 1px;
        padding: 5px;
        border-style: solid;
        border-color: black;
    }

    table.grid td {
        vertical-align:top;
        border-width: 1px 1px 1px 1px;
        padding: 5px;
        border-style: solid;
        border-color: black;
    }

    /* Folder/navigation menu, usually located left under navigation bar */
    #element_menu {
        font-size: 0.85em;
        border: none;
        margin: 0;
        text-overflow: ellipsis;
    }

    .no_javascript #element_menu { display: block; }
    .javascript    #element_menu { display: none;  }

    .no_javascript #element_menu_loading { display: none;  }
    .javascript    #element_menu_loading { display: block; }

    #element_menu ul {
     list-style-type: none;
     margin: 0 0 0 0.3em;
     padding: 0;
     white-space: nowrap;
    }

    #element_menu ul ul {
     margin-left: 0.6em;
     white-space: nowrap;
    }

    #element_menu ul ul ul {
     white-space: nowrap;
     margin-left: 1.8em;
    }

    #element_menu li {
     white-space: nowrap;
     text-overflow: clip;
     margin: 0;
     padding: 0;
    }

    #element_menu a {
        white-space: nowrap;
        text-overflow: clip;
        border: solid 1px #eee;
    }

    #element_menu a:hover {
     border: solid 1px #3169C6;
    }

    #element_root_menu select {
    width:177px;
    background-color:#eeeeee;
    }

    #element_cell_left { vertical-align: top; }
    #element_cell_content { vertical-align: top; width: 100%; }
    #element_cell_right { vertical-align: top; }

    /* Attention div in element_usermenu */
    #element_userattention
    { font-size: 0.75em; padding: 2px; }

    /* Custom user menu. Contains functions to access the users content */
    #element_usermenu {
        font-size:0.85em;
        padding: 2px;
    }

    #element_usermenu h1 {
        border:double #999999;
    }

    #element_usermenu h2 {
        margin:0;
        padding:0.2em;
        text-align:center;
        width:85%;
    }

    #element_usermenu form {
        padding:0;
        margin-top: -1em;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #element_usermenu fieldset {
        padding:0.2em;
    }

    #element_usermenu label {
        font-size:1em;
    }

    #element_usermenu button {
     width: 97%;
    }

    #element_usermenu ul {
        margin:0;
        padding:0;
        list-style: none outside;
    }

    #element_usermenu ul ul {
        margin-left:1.4em;
        padding:0;
        list-style: none outside;
    }
    #element_usermenu .expander {
        float: right;
    }
    #login_button {
        margin-top:0.3em;
        margin-bottom:0.3em;
    }

    button.logout {
        margin-top:0.3em;
        margin-bottom:0.3em;
    }

    #element_contacts ul {
     list-style-type: none;
     margin: 0;
     padding: 2px;
    }

    /* Functions to manipulate the current element (if you have access) */
    .element_actions {
     float: right;
     white-space: nowrap;
     padding: 0;
     margin-left: .5em;
     border: 1px solid #ccc;
     background-color: #eee;
    }

    .element_actions_toolbar { padding-left:1px; margin:1px;}
    .element_actions_activator { vertical-align:top; padding:2px}

    /*
     Conflicts with #element_content table in all.css,
     !important used to prefer this value over the other
    */
    .element_actions table {
     margin: 0 !important;
     padding: 0;
     border: solid 0.1em #bbb;
    }

    /* Container element for bottom elements */
    #element_bottom_info {
     margin:0;
     border:none;
     padding:0;
     width:100%;
    }

    #element_bottom_status { margin:0; padding:0; }

    /* Page status bar */
    #element_status {
     font-size: 0.75em;
     padding: 2px;
     text-align: center;
     float: none;
     clear: both;
     height:2.5em;
     overflow: auto;
    }

    #element_status ul { margin: 0; list-style-type: disc; list-style-position: inside; }
    #element_status li { display: inline; }

    /* Basic footer, usually located under menu and content area, spans entire width */
    #element_footer {
     margin: 0;
     padding: 0;
     font-size: 0.75em;
     text-align: center;
    }

    #element_footer p {
     margin: 0.1em;
     padding: 0.1em;
    }

    /* Class for function buttons */
    .icon {
     vertical-align:middle;
     padding: 0;
     margin-top:0.1em;
     margin-bottom:0.1em;
     margin-left:0.1em;
     margin-right:0.3em;
    }

    /* Headers in all element boxes */
    .element_header {
     border: solid 1px #999999;
     padding: 2px;
     margin-bottom: 2px;
    }

    h1.element_header { font-size: 1.1em; }
    h2.element_header { font-size: 1em; }
    h3.element_header { font-size: 0.95em; }
    h4.element_header { font-size: 0.875em; }
    h5.element_header { font-size: 0.75em; }
    h6.element_header { font-size: 0.625em; }

    /* Embedded newsfeeds (RSS/Atom) */
    .inline_feed {
     font-size:1em;
     margin:0.1em;
     width:45%;
     border:solid 1px silver;
     padding:0.3em;
    }

    /* Lists of groups, users and objects */
    .list_group,
    .list_user,
    .list_object,
    .list_container {
        border: solid 0.05em #B2B2B2;
        margin-bottom: 0.75em;
        clear: both;
    }

    /* Object list on container view */
    #element_content div.list_object { margin-bottom: 1em; }

    .list_object h2 a img { vertical-align:middle; }

    .permissionedit {
     float:left;
     clear:left;
    }

    #element_access_control .permission_icons {
        text-align:right;
        vertical-align:bottom;
        width:25px;
        filter:alpha(opacity=40);
        -moz-opacity:.40;
        opacity:.40;
    }

    #permission_content {
        height:230px;
        overflow:auto;
        padding-bottom:0.3em;
    }

    #pf_access_control .permission_row {
        text-align:center;width:25px;
    }

    #pf_access_control .permission_row input {
        vertical-align:middle;
    }

    #pf_access_control .header {
        background-color:#99c;border-top:outset 0.2em #ddd;
    }

    /* This is the class for the link/anchor of a popup */

    a.popup:hover {
      border: none;
    /* Removed because the border is unwanted when the anchor is an image */
    /* border: solid 1px #3169C6; */
    }

    #tooltip_iframe {
    margin:0px;
    padding-right: 2px;
    padding-bottom:5px;
    }

    #tooltip {
      margin: 0;
      border: 1px solid #3169C6 !important;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      padding: 0;
    }

    #tooltip > #tooltip_content {
    width:auto;
    margin:8px;
    padding: 0;
    }

    #tooltip_content h1 {
      font-size: 1em;
      margin-bottom: 0.5em;
      white-space: nowrap;
    }

    .hairline {
     border: 0;
     height: 0.08em;
    }


    #div_Accounts,
    #div_Groups {
     float:left;
     clear:left;
    }

    /* W3C style buttons */

    .w3cbutton {
     border: outset 1px black;
    }

    /* Style used on errors when the user tries to embed content that doesn't link to a valid ID */
    .invalid_value {
     border: solid thin black;
     padding: 0.1em;
    }

    /* Style used on errors when the user tries to do something that isn't implemented */
    .not_implemented {
     border: solid thin black;
     padding: 0.1em;
    }

    /* Style used when the user tries to link to unavailable content */
    .access_denied {
     border: solid thin black;
     padding: 0.1em;
    }

    /* Style used when the user tries to render template that is causing errors */
    .template_error {
     border: solid thin black;
     padding: 0.1em;
    }

    /* Generic errors should use this style */
    .internal_error {
     border: solid medium black;
     padding: 0.2em;
    }

    .quiz_block .quiz_answer_correct {
     margin-top: 0.5em;
     padding-left: 1.5em;
     padding-bottom: 0.1em;
     background-image: url('/get_icon/quiz/answer/correct');
     background-repeat: no-repeat;
     background-position: top left;
     display: block;
    }

    .quiz_block .quiz_answer_wrong {
     margin-top: 0.5em;
     padding-left: 1.5em;
     padding-bottom: 0.1em;
     background-image: url('/get_icon/quiz/answer/wrong');
     background-repeat: no-repeat;
     background-position: top left;
     display: block;
    }

    .quiz_block label {
        display: block;
        padding-left: 20px;
    }
    .quiz_block.quiz_type_radio input[type="radio"] {
        margin-left: -20px;
        margin-right: 7px;
    }
    .quiz_block.quiz_type_check input[type="checkbox"] {
        margin-left: -20px;
        margin-right: 3px;
    }
    .quiz_block.quiz_type_check .quiz_answer_correct,
    .quiz_block.quiz_type_check .quiz_answer_wrong,
    .quiz_block.quiz_type_check .quiz_answer {
        padding-left: 39px;
    }

    .quiz_inline .quiz,
    .quiz_inline .quiz_answer_wrong {
        display: inline-block;
        vertical-align: middle;
    }

    .quiz_inline .quiz_answer_correct {
        color: green;
        font-weight: normal;
    }

    .quiz_inline .quiz_answer_wrong {
        color: red;
        font-weight: normal;
    }

    .quiz_inline .quiz_answer_wrong input, .quiz_inline .quiz_answer_wrong select {
        border: 1px solid red;
    }

    .quiz li,
    .quiz_answer_wrong li {
     list-style-type: none !important;
    }

    .quiz ul,
    .quiz_answer_wrong ul {
     margin: 0;
    }

    .quiz_feedback {
     margin-left: 1em;
     font-style: italic;
    }

    .quiz_feedback_block {
      margin-left: 2em;
      display: block;
      margin-top: 0.25em;
      margin-bottom: 0.5em;
    }

    .quiz input {
      margin-right: 0.13em;
    }

    .quiz_inline label { margin-right: .5em; }

    .quiz_not_implemented { padding: 0.2em; }
    .quiz_submission { padding: 1em; text-align: center; }

    .list_object h2
    { font-size: 1.15em; }

    .notification {
      background-color:red;
      color:white;
    }

    .tab-page fieldset, .tab-page legend { background-color: #eee; }

    .screen_only { display: inline; }
    .print_only  { display: none; }

    /* from template element_usermenu */
    .menu_header {
    width:98%;
    cursor:pointer;
    background-color: #ddd;
    margin-top:0.2em;
    border: solid 1px #ddd;
    }

    .menu_header a:hover {
    background-color: #c6d3ef;
    border: solid 1px #3169C6;
    text-decoration:none !important;
    }

    #element_usermenu .menu_header a.selected {
        background-color: #4a68a1;
        color: white;
    }

    .menu_content {
    background-color:#fff;
    width:100%;
    max-height:15em;
    overflow:auto;
    white-space:nowrap;
    margin: 0 !important;
    padding: 0.3em 0 0 0 !important;
    display:block;
    }

    .origin_object {
     padding: 0.25em;
     margin-top: 0.25em;
    }


    table.standard {
     border: thin solid black;
    }

    table.standard thead {
     background-color: #EEE;
    }

    table.standard thead th {
     font-weight: bold;
    }

    table.standard .divider {
     border-top: thin solid #ccc;
    }

    table.standard tbody td {
     vertical-align: middle;
     padding-left: 0.25em;
     padding-right: 0.25em;
     padding-bottom: 0.125em;
    }

    table.standard tbody td.center {
     text-align: center;
    }

    table.standard tbody td.right {
     text-align: right;
    }

    table.standard tbody td.left {
     text-align: left;
    }

    table.standard tbody tr.even {
      background-color: #eee;
    }

    table.standard tbody tr.odd {
      background-color: #fff;
    }

    table.standard tbody .missing-info {
      background-color: #eeeeee;
    }

    #element_forgotten_pw button {
     background-color: #ededed;
     color: #000;
     border-color: #ff0000;
     padding-top: 0.05em;
     padding-bottom: 0.05em;
    }

    .break_float {
      clear: both;
    }

    .wrapper_object_content,
    .wrapper_request_handler { clear: both; }

    #element_speech_synthesis {
      float: right;
      position: relative;
      z-index: 10;
      width: auto;
      height: 1.2em;
      vertical-align: top;
      padding: 0.2em;
      background-color: inherit;
      border: none;
    }

    .flush_left {
      float: left;
    }

    .flush_right {
      float: right;
    }

    .divider_right {
     margin-right: 0.5em;
     padding-right: 0.5em;
     border-right: thin solid #cccccc;
    }

    .divider_left {
     margin-left: 0.5em;
     padding-left: 0.5em;
     border-left: thin solid #cccccc;
    }

    .inbox_unread_messages_highlight {
      border: 0.25em solid #ff0000 !important;
    }

    #element_adjacent_objects {
      margin: 0.5em auto 2em auto;
      width: 6em;
    }

    #element_adjacent_objects .prev_object {
      float: left;
      text-align: left;
      width: 49%;
    }

    #element_adjacent_objects .next_object {
      float: right;
      text-align: right;
      width: 49%;
    }

    #element_adjacent_objects .icon {
      margin: 0.2em;
    }

    /* Items that should be built are initially hidden */
    .builder > * {
      display: none;
    }

    #wrapper_object_content {
        margin-top: 1em;
    }

    /* #1484: Give popups with content some more air to the browser chrome */
    .no-framework #wrapper_page > h1,
    .no-framework #wrapper_object_content,
    .no-framework .wrapper_request_handler {
      margin: 5px;
    }

    /* moved from request_manage_institution.tt */
    #portfolio_table_ui table {
      width: 100%;
      margin: 0 0 0.5em 0;
      padding: 0;
      border: 0;
    }

    #portfolio_table_ui thead th input {
      width: 1em;
      background-color: #ccc;
    }

    #portfolio_table_ui tbody th input {
      width: 1em;
      border: none;
    }

    #portfolio_table_ui table td,
    #portfolio_table_ui table th  {
      text-align: center;
      padding: 0;
      margin: 0;
      border: 0;
    }

    #portfolio_table_ui table th {
     padding-bottom: 2px;
    }

    #portfolio_table_ui table td input {
      width: 91%;
      padding: 0;
      margin: 0;
      border: solid 1px black;
    }

    #wrapper_middle_row {
     position:relative;
     top:0;
     left:0;
     margin-top: 0;
     margin-bottom: 0;
    /*
     margin-left/right is set dynamically with PORTFOLIO.FLAG.wrapperHack()
     need to correspond with width on right_nav and left_nav NB! 1 extra pixel because of border
    */
     margin-right: 151px;
     margin-left: 176px;
     height:100%;
    }

    .wrapper_middle_row_margin_left_hack {
    /* margin-left: 176px !important; */
     margin-left: 0 !important;
    }

    .wrapper_middle_row_margin_right_hack {
    /* margin-right: 151px !important; */
     margin-right: 0 !important;
    }

    a.button {
        display: inline-block;
        border: 1px outset #888;
        border-radius: 3px;
        padding: 3px;
        margin: 1px;
        color: #000;
        background-color: #eee;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none;
    }

    a.button:hover {
        color: #000;
        border-style: inset;
    }

    .quiz_message {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
    }

    .quiz_advance {
        margin: 1em 1em 1em 0;
        padding: 0.5em 1em;
        width: 50%;
        max-width: 40em;
        color: #000;
        background-color: #ffffcc;
        border: solid 1px #bbb;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .element_manage_language a:hover {
        background-color: transparent;
    }

    .element_manage_language li.selected {
        font-weight: bold;
        list-style-image: url('/get_icon/action/select?use_large_size=1');
    }

    .element_manage_language li.remove_option {
        margin-top: 0.5em;
    }

    .element_manage_language .icon {
        margin-top: 0;
        vertical-align: text-bottom;
    }

    .element_manage_language .icon + span {
        vertical-align: super;
    }

    .element_manage_language ul {
        list-style-type: none;
    }
    .element_manage_language ul.compact_layout li {
        display: inline;
        white-space: nowrap;
    }

    .element_manage_language ul.compact_layout li.selected .icon {
        background-color: #eee;
        border: solid 1px black;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .element_manage_language ul.compact_layout .icon {
        vertical-align: middle;
    }

    /* PORTFOLIO.init_object_license() will build this element's presentation */
    .javascript dl.object_license dd { display: none; }

    #element_action_menu .ui-button-text { padding: 0.4em 1em; }
    #element_action_menu .ui-widget { font-size: 1em; }

    /* Color picker common */
    div.color_picker {
      height: 16px;
      width: 16px;
      padding: 0 !important;
      border: 1px solid #ccc;
      cursor: pointer;
      line-height: 16px;
      display: inline-block;
    }

    div#color_selector {
      width: 110px;
      position: absolute;
      border: 1px solid #598FEF;
      background-color: #EFEFEF;
      padding: 2px;
    }

    div#color_custom {width: 100%; float:left }
    div#color_custom label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
    div#color_custom input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

    div.color_swatch {
      height: 12px;
      width: 12px;
      border: 1px solid #000;
      margin: 2px;
      float: left;
    }

    /* Message System commons */
    .message-navigation-bar { padding-top: 0.5px; }
    #request_read_message table.message-navigation-bar td,
    #request_new_message table.message-navigation-bar td,
    .message-navigation-bar td { border:outset 2px #ccc; border-bottom:none; padding:0.2em; }
    .message-navigation-bar .tab-active { background-color:#EEE; cursor:default; }
    .message-navigation-bar .tab { background-color: #D4D0C8; cursor:pointer; }

    #message-panel-wrapper { padding-top: 0.5em; background-color: #eee; margin-top: -0.5em; width: 100%; }

    #request_new_message { width: 100%; padding: 0 0.5em 0 0 }
    #request_new_message .form-wrapper { padding: 0 1em 0 0.5em; background-color: #eee; margin-top: -0.5em; width: auto; }
    #request_new_message input.button { background-color: #eee; }
    #request_new_message input.text { width: 40em; }
    #request_new_message .fixed { width: 4em; }

    #request_list_message .mark_label { height: 12px; margin: 2px; padding: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
    #request_list_message .message-control-bar { float: right; margin-top: -30px; }
    #request_list_message .message-list-link { text-decoration: none; text-decoration: none; display: block; height: 100%; width: 100%; }
    #request_list_message .message-list-link-small { min-width: 50px; text-decoration: none; display: block; height: 100%; width: 100%; }
    #request_list_message table .title_row { max-width: 380px; }

    #request_read_message #message { margin-top: -0.5em; }
    #request_read_message div table { width: 100%; }
    #request_read_message fieldset { padding-bottom: 0.2em; }
    #request_read_message input.button, input.submit { background-color: #eee; }
    #request_read_message #message_content { height: 225px; overflow: auto; margin: 0.5em; background-color: white; }
    #request_read_message .fixed { width: 4em; }

    /* Contact manager (request_contact_manager) */
    #contact-manager .hidden { display: none; }
    #contact-manager .contacts { height: 200px; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
    #contact-manager input[type=text] { width: 200px; font-family: Arial, Sans-Serif; font-size: 13px; margin-bottom: 5px; padding: 4px; }
    #contact-manager .contacts ul { list-style-type: none; margin: 0; }

    /* Top menu styles */
    .menu-logout { padding: 10px; }
    .menu-logout span { display:block; white-space:normal; }

    .pf_search_wrapper form { margin-top: 1em; margin-bottom: 1em; }

    /* Read container folder (request_read_container_folder) */
    .container-owner-link { float: right; color: black; font-size: 0.8em; }
    .portfolio_object_header { background-color: #ccc; width: 100%; }
    .portfolio-object-owner-name { position: absolute; right: 0.5em; }

    .paginator { margin-left: auto; margin-right: auto; text-align: center; }
    .paginator td { border: 0; padding: 0; }
    .paginator td.first { text-align: right; padding-right: 0.5em; }
    .paginator td.last { text-align: left; padding-left: 0.5em; }
    .paginator td.prev { text-align: right; }
    .paginator td.next { text-align: left; }
    .paginator td.page { text-align: center; padding-left: 0.5em; padding-right: 0.5em; }
    .paginator ul { list-style-type: none; margin-left: 0; margin-right: 0; }
    .paginator li { display: inline; margin-left: 0.25em; margin-right: 0.25em; }

    /* Read container folder (request_read_container_blog) */
    .portfolio-object-blog-wrapper { background-color: #ccc; }
    .portfolio-object-blog-title { padding-bottom: 0.2em;}
    .portfolio-object-blog-actions-read { float: right; text-align: right; }
    .portfolio-object-blog-comments { margin-top: 0.5em; }

    /* Read container folder (request_read_container_album) */
    .portfolio-album-item { font-size: 80%; line-height: 110%; position: relative; width: 150px; height: 255px; margin: 0.2em; padding: 2px 2px 0 2px; border: solid 1px #ccc; display: inline-block; overflow: auto; vertical-align: top; text-align: center; }
    .portfolio-album-item > a { display: block; }
    .portfolio-object-album-actions-read { position: relative; float: right; white-space: nowrap; margin-bottom: 0.5em; margin-left: 0.5em; }
    .portfolio-object-album-intro { text-align: left; display: inline-block; line-height: 100%; }
    .portfolio-album-item .media_tags { margin: 0.5em; list-style-type: none; }

    /* Read Account aka Profile (request_read_account) */
    .photo-area { vertical-align: top; padding: 0.5em; width: 100px; }
    .photo-avatar { width: 150px; height: 200px; }
    .profile-about { border: solid thin #eee; padding: 0.5em 0.5em 0 0.5em; }

    /* Manage Course  (request_manage_course) */
    td.right-padding { padding-right: 0.25em; }
    #element_list_select, #element_list_aux_select { width: 270px; height: 300px; }
    .table-inside { height: 300px; }
    #sdv_view textarea { font-family: monospace; font-size: 75%; width: 100%; height: 150px; white-space: pre; overflow: auto; }
    #wipe_order { margin-left: 0.5em; }

    #request_list_student .button-bar { margin-top: 1em; margin-bottom: 1em; }

    /* List log (request_list_log) */
    #log_account_id, #log_object_id { width: 15em; height: 8em; }
    #log_class_id, #log_container_id { width: 8em; height: 8em; }
    #log_action_id { width: 13em; height: 8em; }
    td.log-score { vertical-align: middle; width: 100px; white-space: nowrap; padding: 0; }
    td.log-score img { margin-right: 0px; padding-right: 0px; height:1em; }
    #request_list_course_users form { background-color: #eee; padding: 0.25em 0.5em 0.25em 0.5em; border: 0.15em solid black; }
    #request_list_course_users table tr.gap-row td { padding-right: 0.5em; }
    #request_list_course_users li { margin-right: 0.5em; }
    #request_list_class_membership .heading { margin-top: 0.5em; margin-bottom: 0.5em; }
    #request_add_edit_institution input[type=text] { width: 98%; }
    #request_add_edit_course input[type=text] { width: 98%; }

    /* Element nav course(element_nav_course) */
    #element_nav_course { width: 13.2em; font-size: 80%; text-align: center; border: none; padding: 0; margin: 0 auto; background-color: #eee; }
    #element_nav_course table { width: 100%; border: solid 1px #ccc; text-align: left; margin: 0; white-space: normal; }
    #element_nav_course th { background-color: #ccc; text-align: left; border: 0; padding: 1px; }
    #element_nav_course td { border: 0; padding: 1px; white-space: normal; }
    #element_nav_course td.pagebar { border-top: solid 1px #ccc; border-right: solid 1px #ccc; width: 50%; }

    .tidy-fieldset { border: 1px solid gray; margin:0.75em 0; padding: 0.5em; }
    .tidy-legend { padding: 0.2em 0.5em; margin-left: 3px; border:1px solid gray; color: #383838; }
    .tidy-label { display: block; font-weight: bold; text-align: right; width: 140px; float: left; }

    /* LP: 1890987 - make play/stop button look more inconspicuous */
    .play_stop_button { background-color: transparent; border: 0; }

    .hidden { display: none; }

    #wrapper_object_content .object_license img { padding: 0; }
    #wrapper_object_content dl.object_license { padding: 0.25em 0.5em; }

    .pointer { cursor: pointer;}
    .input-small { width: 5em;}

    #wrapper_object_content .tts:hover {
        text-decoration: underline;
        cursor: help;
    }

    /* Quiz of type matchbox */

    .matchbox {
        border: 5px solid #fff;
        border-collapse: separate;
        margin: 0 auto;
    }

    .matchbox th {
        padding: 0;
        margin: 0;
        background-color: inherit;
        border: 1px solid #ccc;
    }

    .matchbox th.progress {
        background-color: #fff;
        position: relative;
    }

    .matchbox th img {
        height: 10px;
        width: 0;
        padding: 0 !important;
        margin: 0;
        border: none;
    }

    .matchbox th.reshuffle_container {
        text-align: center;
        vertical-align: middle;
        border: none;
    }

    .matchbox td {
        text-align: center;
        border-width: 3px;
        padding: 0;
        margin: 5px;
        background-color: inherit;
        border-style: outset;
        border-collapse: separate;
        cursor: pointer;
        overflow: hidden;
    }

    .matchbox td img {
        padding: 0 !important;
    }

    .matchbox .cell_content {
        padding: 0;
        font-size: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .matchbox .cell_a {
        background-color: #ffffcc;
    }

    .matchbox .cell_b {
        background-color: inherit;
    }

    #request_add_edit textarea,
    #request_add_edit_container textarea {
        font-family: "Consolas", "Courier New", monospace;
        line-height: 1.25em;
    }

    #request_list_institution_courses .add-entry-ui { margin: 1em 0; }
    #request_list_institution_courses .add-entry-ui label { display: inline-block; padding: 0.5em; margin-top: 0.5em; margin-right: 0.5em; border-radius: 5px; background-color: #eee; text-align: center; }
    #request_list_institution_courses .add-entry-ui select { display: block; margin-top: 0.25em; }
    #request_list_institution_courses .add-entry-ui button { margin-top: 0.5em; }
    #request_list_institution_courses .form-buttons { display: block; }

    /* Hide comment UI initially if we have JavaScript support */
    .javascript #element_comments form.comment-ui { display: none; }
    .no_javascript #element_comments form.comment-ui { display: block; }
    /* Hide comment author membership UI initially if we have JavaScript support */
    .javascript #element_comments .comment-author-membership { display: none; }
    .no_javascript #element_comments .comment-author-membership { display: inline; }
    #element_comments form.comment-ui button.use-recorder .icon { margin: 0; padding-top: 0; padding-bottom: 0; }
    #element_comments form.comment-ui button { height: 26px; margin-top: 2px; margin-bottom: 2px; }
    .no_javascript #element_comments form.comment-ui button.use-recorder { display: none; }

    #request_manage_institution form .highlight { border: 1px solid red; }
    #request_manage_institution form ul { list-style-type: none; margin: 0; }

    .javascript #request_course_result .highlight { border: thin solid black; font-weight: normal; }
    .javascript #request_course_result .hover { display: none; }
    .javascript #request_course_result .highlight .hover { display: block; }
    .javascript #request_course_result .highlight .hover-hide { display: none; }

    .javascript #request_list_student .highlight { border: thin solid black; font-weight: normal; }
    .javascript #request_list_student .reveal { display: none; }
    .javascript #request_list_student .highlight .reveal { display: block; }
    .javascript #request_list_student .group-filter { display: inline-block; }

    .flash-messages { margin: 0; margin-bottom: 0.25em; padding: 0; border: 0; list-style-type: none; }
    .flash-messages li { padding: 0.5em; border-radius: 5px; border-width: 1px; border-style: solid; margin-bottom: 0.125em; }

    #collectable_window table { margin: 0; }
    #collectable_window table thead tr { background-color: #ccc; }
    #collectable_window table th,
    #collectable_window table td { border: 0; padding: 0; text-align: left; }

    .list_object.is-unread { border-left: 4px solid #444; }
}
/* ######### END:   screen.css  ######### */

/* ######### BEGIN: print.css   ######### */
@media print {
    body {
      font-family: "Times New Roman", Times, serif;
      font-size: 12pt;
      background: white;
      overflow:visible;
    }

    a { text-decoration : underline; color : #888; }
    /* a:after { font-style: italic; content: " (" attr(href) ") "; } */

    .element_actions,
    .permissionedit,
    #element_header,
    #element_search_container,
    #element_status,
    #div_Accounts,
    #div_Groups,
    #document_title {
      float:none !important;
    }

    #element_content {
      display:block;
      overflow:visible !important;
      position:static;
      float: none !important;
      width:97% !important;
      height:100% !important;
    }

    #element_nav{
      margin-bottom:2em;
      font-size:10pt;
    }

    /* These elements should be hidden in print mode */
    #content_actions,
    #document_header_break,
    #element_action_menu,
    #element_adjacent_objects,
    #element_bottom_info,
    #element_cell_left,
    #element_cell_right,
    #element_header,
    #element_nav_container,
    #element_nav_course,
    #element_online,
    #element_search,
    #element_speech_synthesis,
    #element_top_menu,
    #top_banner,
    .show-comment-ui,
    .hide-comment-ui,
    #element_comments .comment-ui,
    a.button,
    span.audio_mpeg,
    div.audio_mpeg,
    .element_actions,
    .element_exam_status.compact {
      display:none;
    }

    #document_title {
     width: auto;
    }

    .list_object { margin-bottom: 1em; }

    .filter_info { clear: both; }
    .table_current_users { display:none }

    .screen_only { display: none; }
    .print_only { display: inline; }

    .pagebreak { page-break-before: always; }
}
/* ######### END:   print.css   ######### */

/* ######### BEGIN: content.css ######### */
.float_left { float:left; }
.float_left_padding_all { float:left; padding:1em; }
.float_left_padding_bottom { float:left; padding-bottom:1em; }
.float_left_padding_left { float:left; padding-left:1em; }
.float_left_padding_right { float:left; padding-right:1em; }
.float_left_padding_top { float:left; padding-top:1em; }
.float_right { float:right; }
.float_right_padding_all { float:right; padding:1em; }
.float_right_padding_bottom { float:right; padding-bottom:1em; }
.float_right_padding_left { float:right; padding-left:1em; }
.float_right_padding_right { float:right; padding-right:1em; }
.float_right_padding_top { float:right; padding-top:1em; }
.padding_all { padding:1em; }
.padding_bottom { padding-bottom:1em; }
.padding_left { padding-left:1em;}
.padding_right { padding-right:1em; }
.padding_top { padding-top:1em;}
/* ######### END:   content.css ######### */

/* ######### BEGIN: layout.css  ######### */
@media screen {
    html.framework,
    .framework body {
     height: 100%;
     width:100%;
     overflow:auto;
     margin: 0;
     padding: 0;
     border:0;
    }
    .no-framework #wrapper_page {
     padding: 0.25em;
     overflow: auto !important;
    }
    .framework #wrapper_page {
     height: 100%;
     width: 100%;
     max-width: 1024px;
     margin: 0 auto;
     padding: 0;
     position: relative;
    }
    .framework #wrapper_top_row {
     width: 100%;
     height: 50px;
     padding: 0;
     border-left:solid 1px #ccc;
     border-right:solid 1px #ccc;
     background-color:#ced4da;
     white-space:nowrap;
     overflow: hidden;
     background-image: url('../gfx/top_bg.png');
     background-repeat: repeat-x;
    }
    .framework #element_header {
      overflow:hidden;
      position:relative;
      top:0;
      left:0;
      background-image: url('../gfx/left_logo_bg.png');
      background-color:#ced4da;
      width:395px;
      height:48px;
      text-align:left;
      font-size:1.2em;
    }
    .framework #logo_background {
     overflow:hidden;
     float:left;
     width:460px;
     height:48px;
     background-image: url('../gfx/right_logo_bg.png');
     background-repeat: no-repeat;
     background-position: right;
    }
    .framework #element_search_container {
     overflow: hidden;
     float: right;
     max-width: 500px;
    }
    .framework #element_action_menu_container {
     width: 100%;
     height: 25px;
     border-bottom: solid 1px #ccc;
     background-color: #eee;
     border-left: solid 1px #ccc;
     border-right: solid 1px #ccc;
    }
    .framework #element_top_nav {
     height:22px;
     border-left:solid 1px #ccc;
     border-right:solid 1px #ccc;
     border-bottom:outset 1px #ccc;
     background-color:#eee;
    }
    .framework #element_middle_row {
     position: relative;
     width:100%;
     height:79%;
    }
    .framework #wrapper_element_content {
     position: relative; /* needed to further position divs inside element_content (inheritance) */
     width:100%;
     height:100%;
     overflow: auto;
     background-color:#fff;
    }
    .framework #wrapper_all_content {
     /* needed only to set padding and margin. avoid padding and margin on positioned layout div's */
     position:relative; /* to secure inheritance */
     margin:0.5em 0.5em 0.5em 1em;
    }
    .framework #wrapper_object_content img { padding: 0.25em 0.5em; }
    /* Force no padding on icons when used in ancestor path */
    .framework #wrapper_object_content ul.ancestor-path .icon { padding: 0; }
    .framework #element_cell_left,
    .framework #element_cell_right {
     position: absolute;
     top:0;
     background-color:#eee;
     height: 100%;
     white-space:nowrap;
     overflow:auto;
     padding:0;
     margin:0;
     border:none;
    }
    .framework #element_cell_left {
     left: 0;
     width: 175px; /* need to correspond with left margin on wrapper_middle_row above */
     border-left: solid 1px #ccc;
     padding-left: 0;
     border-right: solid 1px #ccc;
    }
    .framework #element_cell_right {
     right: 0;
     width: 149px; /* need to correspond with right margin on wrapper_middle_row above */
     border-left:solid 1px #ccc;
     border-right:solid 1px #ccc;
    }
    .framework #element_cell_right ul {
     position:relative;
     top:0;
     padding:0;
     margin:0;
     border:none;
    }
    .framework #element_cell_right ul ul {
     position:relative;
     top:0;
     margin:0;
     padding:0;
     overflow:auto;
    }
    .framework #element_cell_right ul ul li {
     width:100%;
     overflow:hidden;
     margin:0;
     padding:0;
     white-space:nowrap;
    }
    .framework #element_cell_right a {
     cursor:pointer;
     color:black;
     text-decoration:none;
     padding:0;
     display:block;
     margin:1px;
    }
    .framework #element_cell_right a:hover {
     background-color: #c6d3ef;
     margin:0;
     border: solid 1px #3169C6;
     text-decoration:none !important;
    }
    .framework #element_bottom_info {
      position:absolute;
      left:0;
      bottom:0;
      width: 100%;
      height: 2.2em;
      overflow:auto;
    }
    .framework #element_bottom_info p {
     margin:0;
     padding:0;
    }
    .framework .menu_header {
     background-color: #ddd;
     border-top: solid 1px #ddd;
     border-bottom: solid 1px #ddd;
    }
    .framework .spacer {
     cursor:pointer;
     width:1em;
     height:1em;
     border:solid 1px #eee;
     text-align:center;
     padding-bottom:0.2em;
     float:left;
     clear:both;
    }
    .framework .ui-autocomplete {
        max-height: 150px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .framework input[type='text'].ui-autocomplete-loading {
        background: url('../gfx/spinner.gif') no-repeat right center;
    }
    .framework #request_list_config table.display td.wide,
    .framework #request_page_view_log table.display td.col-handler,
    .framework #request_page_view_log table.display td.col-resource {
        word-break: break-all;
    }
    #element_usermenu a.highlight {
        color: red;
    }
    #element_usermenu #element_collection_req_link a {
        color: blue;
    }
    #wrapper_object_content .mceEditor img.mceIcon { padding: 0; }
    #wrapper_object_content .mceEditor table.mceToolbar { margin: 0; }
}
/* ######### END:   layout.css  ######### */

#request_collection ul,
#request_list_icons ul,
#request_list_account ul,
#request_list_course_users ul,
#request_manage_course ul,
#request_filesystem ul,
#request_unpack ul,
#request_filesystem ul.tree { margin: 5px 0; }
#request_filesystem ul ul { margin: 5px 20px; }
ul.legend { list-style-type: none; margin: 0.5em 0;}

#request_aicc_au h2,
#request_aicc_au h3 { clear: both; padding-top: 1em; }
#request_aicc_au dl dt { font-weight: bold; clear: both; }
#request_aicc_au dl > * { display: inline-block; float: left; }

#request_manage_site_containers h2 { margin-top: 1em; }

#request_doc h1 { margin-bottom: 13px; }
#request_doc pre,
#request_doc code { background-color: #eee; }
#request_doc code { line-height: 120%; padding: 2px; }
#request_doc pre { overflow-x: auto; padding: 5px; }

#request_cookies dl { margin: 0; }
#request_cookies dt { font-weight: bold; clear: left; float: left; margin-right: 5px; }
#request_cookies dd { font-style: italic; margin-left: 0; }

#request_read_exam dl dt,
#request_read_exam dl dd { display: inline-block; margin-bottom: 5px; }
#request_read_exam dl dt { width: 105px; }
#request_read_exam dl dd { width: 450px; vertical-align: text-top; }
#request_read_exam dl dd ul { margin: 0; list-style-type: none; }

.element_exam_status.verbose dl { margin-left: 0; }
.element_exam_status.verbose dl dt,
.element_exam_status.verbose dl dd { display: inline-block; margin-bottom: 5px; }
.element_exam_status.verbose dl dt { width: 200px; font-weight: bold; }
.element_exam_status.verbose dl dd { width: 420px; vertical-align: text-top; }
.element_exam_status.verbose dl dd ul { margin: 0; list-style-type: none; }

#wrapper_object_content form.set-assignment-score textarea { width: 100%; height: 100px; }

.CodeMirror { border: 1px solid #ccc; }

#request_add_edit .language_metadata_select,
#request_add_edit_container .language_metadata_select { float: right; margin-top: -13px; margin-bottom: 1px; }
#request_add_edit input[name='title'],
#request_add_edit_container input[name='title'] { font-size: 120%; }

#request_measure div.measurements { margin-top: 1em; margin-bottom: 1em; }
#request_measure canvas { cursor: pointer; border: solid 1px #ccc; }
#request_measure canvas:active { cursor: crosshair; }
#request_measure img.canvas-src { display: none; }
.CodeMirror + .word-counter,
.textarea-wrapper + .word-counter { float: right; }
td.mceStatusbar div:first-child { display: none; }

#bulkedit_request_read_container .edit_field input { width: 100%; }
#bulkedit_request_read_container table.bulkedit tr td { position: relative; }
#bulkedit_request_read_container table.bulkedit tr td.nopadl { padding-left: 0px; }
#bulkedit_request_read_container table.bulkedit tr td.nopadr { padding-right: 0px; }
#bulkedit_request_read_container table.bulkedit tr td span.status { position: absolute; right: 10px; top: 3px; }

#request_read_message table.job-set-ownership th,
#request_read_message table.job-set-ownership td { white-space: nowrap; border-bottom: solid 1px #ccc; }
#request_read_message table.job-set-ownership td.status.keep { background-color: #dfd; }
#request_read_message table.job-set-ownership td.status.change,
#request_read_message table.job-set-ownership td.status.set { background-color: #fee8e9; }
#request_read_message table.job-set-ownership td.label { white-space: normal; }
#request_read_message table.job-set-ownership .status,
#request_read_message table.job-set-ownership .owner-old,
#request_read_message table.job-set-ownership .owner-new { text-align: center; }

#request_add_edit_macro .top-buttons { display: flex; flex-direction: row-reverse; }
#request_add_edit_macro .bottom-buttons { display: flex; }
#request_add_edit_macro .prow { display: flex; }
#request_add_edit_macro .prow > * { flex: 0 1 auto; width: inherit; margin: auto 5px; }
#request_add_edit_macro .prow .desc { flex: 2 1 auto; }
#request_add_edit_macro .prow > label { display: flex; align-items: center; font-weight: normal; }
#request_add_edit_macro .prow > label > * { margin: auto 3px; }

#request_read_macro h2 { margin: 10px auto 5px; }
#request_read_macro dl { margin: 10px 1em 5px; }
#request_read_macro dt { margin: 5px auto 2.5px; }
#request_read_macro dd { font-style: italic; }

#request_list_macro table ul,
#request_list_macro table ol { margin: 0.25em; }

.daterange-selector { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.daterange-selector > * { margin: 3px; flex-grow: 1; }
.daterange-selector .inputs { display: flex; flex-direction: column; justify-content: center; }
.daterange-selector .inputs label { display: flex; justify-content: flex-end; margin: 3px; }
.daterange-selector .inputs label > input { flex-basis: 120px; margin: auto 3px; }

#request_course_result .period-selector { display: flex; flex-wrap: wrap; justify-content: space-between; }
#request_course_result .period-selector > * { flex-basis: auto; flex-grow: 1; }
#request_course_result .period-selector button[type="submit"] { margin: 3px; }

#request_user_activity .period-selector-ui { display: flex; flex-wrap: wrap; justify-content: space-between; }
#request_user_activity .period-selector-ui > button[type="submit"] { flex-basis: auto; margin: 3px; }
#request_user_activity .period-type-selector-ui { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; }
#request_user_activity .period-type-selector-ui > label { display: block; margin: 3px; }

#request_user_object_scores .course-selector-ui ul { list-style-type: none; margin: 1em 0 0.5em; }
#request_user_object_scores table .col-score { text-align: right; }
#request_user_object_scores ul.ancestor-path { flex-direction: column-reverse; }

#request_user_course_progress ul.ancestor-path { flex-direction: column-reverse; }

#request_user_submissions .course-selector-ui ul { list-style-type: none; margin: 1em 0 0.5em; }
#request_user_submissions ul.ancestor-path { flex-direction: column-reverse; }

#request_read_account fieldset.border { padding: 0.5em; }
#request_read_account form.set-avatar-permission { display: inline; }
#request_read_account form.set-avatar-permission button { border: none; background: inherit; cursor: pointer; padding: 0; }
#request_read_account .modify-buttons { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-bottom: 0.5em; }
#request_read_account .modify-buttons > * { flex: 0 1 auto; }

#request_user_memberships dl { margin: 0; }
#request_user_memberships dl.course-list > dd { margin-left: 3.5em; }
#request_user_memberships dl.institution-list { position: relative; }
#request_user_memberships dl.institution-list > dt { clear: left; float: left; width: 48%; margin-top: 1.5em; }
#request_user_memberships dl.institution-list > dd { float: left; width: 49%; margin-top: 1.5em; }

#request_new_message .choose_attachment_folder,
#request_new_message #choose_existing_file { padding: 0.5em 0px; }
#request_new_message #choose_existing_file,
#request_new_message .message_attachment { background: #fff; }
#request_new_message .message_attachment .file-upload { margin: 0px; }
#request_new_message .message_attachment #attached_files { padding-left: 10px;  }
#request_new_message .message_attachment #attached_files ul { list-style-type: none; margin: 0.25em 0px; }
#request_new_message .message_attachment #attached_files ul li { padding: 0.25em 0 }
#request_new_message .message_attachment,
#request_new_message .choose_attachment_folder { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; padding-top: 0px; }
#request_new_message .choose_attachment_folder label { margin-right: 1em; }

#request_list_message_conversation .conversation-view { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; }
#request_list_message_conversation .conversation-view h2 { font-size: 1em; min-height: 50px; }
#request_list_message_conversation .conversation-view ul { list-style-type: none; margin: 0; }
#request_list_message_conversation .conversation-view .conversation,
#request_list_message_conversation .conversation-view .contacts { background-color: #f1f1f1; border: 2px solid white; padding: 10px; }
#request_list_message_conversation .conversation-view .contacts #search_contact { width: 85%; padding: 10px; margin: 10px 0px; }
#request_list_message_conversation .conversation-view .conversation { flex-grow: 2; min-height: 400px; width: 80%; }
#request_list_message_conversation .conversation-view .conversation #loading,
#request_list_message_conversation .conversation-view .conversation .footer,
#request_list_message_conversation .conversation-view .conversation .header { display: none; }
#request_list_message_conversation .conversation-view .conversation #select_contact { font-size: 1.5em; color: #ccc; margin-top: 7%; }
#request_list_message_conversation .conversation-view .conversation.view #loading { display: block; }
#request_list_message_conversation .conversation-view .conversation.view #select_contact { display: none; }
#request_list_message_conversation .conversation-view .conversation.view .footer,
#request_list_message_conversation .conversation-view .conversation.view .header { display: block; }
#request_list_message_conversation .conversation-view .contacts { width: 200px; }
#request_list_message_conversation .conversation-view .contacts li.contact { height: 55px; margin-bottom: 10px; border-bottom: 1px solid #fff; padding: 10px;}
#request_list_message_conversation .conversation-view .contacts li.contact:last-child{ border-bottom: none; }
#request_list_message_conversation .conversation-view .contacts li.active a { color:#CA0000; }
#request_list_message_conversation .conversation-view .contacts li a:hover { color:#CA0000; }
#request_list_message_conversation .conversation-view .contact h2 { padding-top: 10px; }
#request_list_message_conversation .conversation-view img.profile-pic { border-radius: 50%; width: 55px; height: 55px; float: left; margin-right: 15px; }
#request_list_message_conversation .conversation-view .message-row { margin: 14px 0px; }
#request_list_message_conversation .conversation-view .message-row .message { background: #fff; padding: 10px; }
#request_list_message_conversation .conversation-view .message-row .message .subject { font-weight: bold; }
#request_list_message_conversation .conversation-view .message-row.me .author { text-align:right; }
#request_list_message_conversation .conversation-view .message-row.me .message { margin-left: 5%; }
#request_list_message_conversation .conversation-view .message-row .author h2,
#request_list_message_conversation .conversation-view .message-row .author h3 { font-size: 1em; display: inline; }
#request_list_message_conversation .conversation-view .message-row .author span,
#request_list_message_conversation .conversation-view .message-row .author h3 { color:#bbb; }
#request_list_message_conversation .conversation-view .message-row .triangle { width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: #ffffff transparent; }
#request_list_message_conversation .conversation-view .message-row.you .triangle {  margin-left:5%; }
#request_list_message_conversation .conversation-view .message-row.me .triangle { margin-left:90%; }
#request_list_message_conversation table.message-navigation-bar { margin-bottom: 0em; }
#request_list_message_conversation .conversation-view .not-found { padding-top: 20px; }

#request_add_edit .flex-container { display: flex; padding: 0.3em 0; justify-content: space-between; }
#request_add_edit .flex-container div.container-title { padding-right: 1em; }
#request_add_edit .flex-container div.container-button { flex-grow: 8; text-align: right; }
#request_add_edit .flex-container button { padding: 0px 0.5em; cursor: pointer; }
#request_add_edit .flex-container button.select-container{ background: transparent; border: none; }

#request_new_message .badges .badge.recipient{ display: inline-block; padding: 3px; margin-right: 5px; border: 1px dotted; background: #fff; margin-bottom: 4px; }
#request_new_message .badges .badge.recipient .remove_recipient{ margin-left: 5px; font-size: 11px; cursor: pointer; padding: 0px 3px; }
#request_new_message input#attach-recording { margin-bottom: 5px; }

#request_eportal_oidc_user_sync .sync-progressbar-label { text-align: center; position: absolute; padding: 5px; }

.content-editor .textarea-wrapper { display: flex; }
.content-editor .textarea-wrapper .CodeMirror { flex: 4 1 auto; }
.content-editor .textarea-wrapper .reference-list { flex: 1; min-width: 15em; background-color: #ffffff; overflow-y: auto; overflow-x: hidden; padding: 0 5px; white-space: nowrap; }
.content-editor .textarea-wrapper .reference-list ul { margin-left: 5px; margin-right: 5px; }
.content-editor .textarea-wrapper .reference-list li { list-style: none; }
.content-editor .textarea-wrapper .reference-list .src-offset { display: inline-block; width: 3em; text-align: right; }

.framework #element_cell_right a.eportal-login:hover,
.framework #element_cell_right a.eportal-login { padding:inherit; text-align: center; margin: 4px 0; }