/********************************************************************************************************************
 *
 * proman-general.css
 *
 * Main CSS file for Gti ProMan.
 *
 * @author Ray O'Donnell <ray@teladesign.ie>
 *         January 2012
 * Based on http://www.webresourcesdepot.com/free-admin-template-for-web-applications
 *
 ********************************************************************************************************************/

body {
    margin: 0;
    padding: 0;
    background: #bbd9ee;
    color: #000;
    font-family: tahoma, arial, sans-serif;
    font-size: 13px;
}

form {
    margin: 0;
    padding: 0
}

img {
    border: none;
}

a {
    color: #36c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/********************************************************************************************************************
 * Container & header area.
 ********************************************************************************************************************/

#main {
    width: 98%;
    margin: 0 auto;
}

#header {
    position: relative;
    background: transparent url(../images/top-banner.png) no-repeat left top;
    height: 86px;
}

a.logo {
    position: absolute;
    top: 5px;
    left: 20px;
}

#login-area {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 300px;
    font-size: 110%;
}

#login-area-toggle {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 20px;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
    border: 1px solid transparent;
}

#login-area-toggle.open {
    background-color: #fff;
    border: 1px solid #f70;
    border-bottom-color: #fff;
}

#login-area .login-name {
    padding-top: 4px;
    text-align: right;
    margin-right: 38px;
}

#login-area-menu {
    display: none;
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 12px 12px 0 12px;
    list-style-type: none;
    background-color: #fff;
    border: 1px solid #f70;
    -moz-box-shadow: 3px 3px 15px #666;
    -webkit-box-shadow: 3px 3px 15px #666;
    box-shadow: 3px 3px 15px #666;
}

#login-area-menu li {
    padding-bottom: 12px;
}

/* Main menu. */

#top-navigation {
    position: absolute;
    top: 53px;
    left: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#top-navigation li {
    float: left;
    margin: 0 4px 0 0;
    height: 34px;
}

#top-navigation li a {
    float: left;
    display: block;
    height: 20px;
    line-height: 19px;
    margin-top: 9px;
    color: #606060;
    padding: 4px 10px 0 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    background: #e7f1f8;
}

#top-navigation li a:hover {
    border: 1px #ff7300 solid;
    border-bottom: none;
    background: #fff;
    margin: 8px -1px;
}

#top-navigation li a.active {
    padding: 6px 10px 0 10px;
    height: 27px;
    border: 1px #ff7300 solid;
    border-bottom: none;
    margin: 0;
    background: white;
}

/********************************************************************************************************************
 * Container for main page.
 ********************************************************************************************************************/

#middle {
    width: 100%;
    background: #fff;
    border: 1px solid #ff6f00;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-box-shadow: 3px 3px 9px #666;
    -webkit-box-shadow: 3px 3px 9px #666;
    box-shadow: 3px 3px 9px #666;
    padding: 10px 0 0 0;
}

/********************************************************************************************************************
 * Left column.
 ********************************************************************************************************************/

#left-column {
    float: left;
    padding: 1px 14px 0 12px;
    width: 155px;
    position: relative;
}

#left-column a {
    color: #3e3e3e;
}

#left-column h3 {
    font-size: 11px;
    margin: 0;
    color: #fff;
    background: #ff9500;
    background: linear-gradient(
            rgb(255, 149, 0) 0%,
            rgb(255, 111, 0) 100%
    );
    background: -webkit-linear-gradient(
            color-stop(0, rgb(255, 149, 0)),
            color-stop(1, rgb(255, 111, 0))
    );
    background: -moz-linear-gradient(
            rgb(255, 149, 0) 0%,
            rgb(255, 111, 0) 100%
    );
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    height: 25px;
    line-height: 23px;
    padding: 0 0 0 9px;
}

ul.nav {
    display: none;
    margin: 0 0 11px 0;
    border-bottom: 2px solid #FF9600;
    background: #ECEFE7;
    list-style: none;
    padding: 0 2px;
}

ul.nav li {
    padding: 4px 4px 6px 5px;
    border-bottom: 1px #666 dashed;
}

ul.nav a {
    padding: 0 0 0 12px;
    background: url(../images/arrow.png) no-repeat 0 4px;
}

ul.nav li:last-child {
    border: none;
}

#left-column .link a {
    display: block;
    width: 142px;
    height: 25px;
    background: #c7cdbe;
    background: linear-gradient(
            rgb(235, 239, 227) 0%,
            rgb(199, 205, 190) 100%
    );
    background: -webkit-linear-gradient(
            color-stop(0, rgb(235, 239, 227)),
            color-stop(1, rgb(199, 205, 190))
    );
    background: -moz-linear-gradient(
            rgb(235, 239, 227) 0%,
            rgb(199, 205, 190) 100%
    );
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    margin: 0 0 4px 0;
    font-weight: bold;
    padding: 0 0 0 9px;
    line-height: 25px;
    color: #60635A;
}

#left-column .left-col-group {
    position: absolute;
}

#left-column .left-col-group h3,
#left-column .left-col-group ul {
    width: 150px;
}

#left-column .left-col-group h3 {
    cursor: default;
}

/********************************************************************************************************************
 * Centre column.
 ********************************************************************************************************************/

#centre-column {
    min-height: 584px;
    padding: 12px 16px 20px 13px;
    margin: 0 175px 20px 181px;
    background-image: linear-gradient(left top, rgb(229, 229, 229), rgb(255, 255, 255) 400px);
    background-image: -o-linear-gradient(left top, rgb(229, 229, 229), rgb(255, 255, 255) 400px);
    background-image: -moz-linear-gradient(left top, rgb(229, 229, 229), rgb(255, 255, 255) 500px);
    background-image: -webkit-linear-gradient(left top, rgb(229, 229, 229), rgb(255, 255, 255) 400px);
    background-image: -ms-linear-gradient(left top, rgb(229, 229, 229) 12%, rgb(255, 255, 255) 400px);
    background-image: -webkit-linear-gradient(
            color-stop(0, rgb(229, 229, 229)),
            color-stop(400, rgb(255, 255, 255))
    );
    border-radius: 4px;
    border: 1px solid rgb(197, 197, 197);
}

* html #centre-column {
    height: 584px;
}

.top-bar {
    border-left: 2px solid #f70;
    padding: 0 0 0 9px;
    margin: 0 0 4px 0;
}

.top-bar h1 {
    font: 20px/21px verdana, sans-serif;
    color: #43729F;
    margin: 0 0 4px 0;
}

.subhead-bar {
    border-top: 2px solid #f70;
    border-bottom: 2px solid #f70;
    padding: 5px 0 6px 0;
    margin: 0 0 17px 0;
}

#system-test-flag {
    margin: 1.5rem 0;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background-color: #f00;
    font-size: 1.2rem;
    font-weight: bold;
}

h3 {
    color: #f70;
    font-weight: bold;
    font-size: 120%;
    margin: 20px 0 10px 0;
    border-top: 1px dotted #f70;
    padding-top: 4px;
}

/********************************************************************************************************************
 * Right column.
 ********************************************************************************************************************/

#right-column {
    float: right;
    padding: 0 9px 0 0;
    width: 155px;
}

/********************************************************************************************************************
 * Footer.
 ********************************************************************************************************************/

#footer {
    width: 100%;
    margin: 10px 0 20px 0;
}

#footer-left {
    float: left;
    padding-left: 10px;
}

#footer-right {
    float: right;
    text-align: right;
    padding-right: 10px;
}

#footer-middle {
    text-align: center;
}

/********************************************************************************************************************
 * Icons.
 ********************************************************************************************************************/

.icon {
    width: 16px;
    height: 16px;
}

.icon.small {
    width: 10px;
    height: 10px;
}

.icon.button {
    cursor: pointer;
}

.reconcile-icon,
.unreconcile-icon {
    float: right;
    margin-right: 4px;
    cursor: pointer;
}

.reconcile-label.unreconciled {
    color: #f00;
    font-weight: bold;
    text-transform: uppercase;
}


/********************************************************************************************************************
 * Listings filter, heading tables & student notes.
 ********************************************************************************************************************/

#filters-container {
    position: relative;
    width: 80%;
    padding: 10px;
    margin: 10px auto 20px auto;
    border: 1px solid #9097A9;
}

#filter-toggle-icon {
    position: absolute;
    top: 8px;
    right: 5px;
    cursor: pointer;
    z-index: 10;
}

#filter-toggle-icon.filters-shown {
    background-color: #fff;
}

#filter-collapsible {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 8;
    padding: 8px 30px 8px 8px;
    background-color: #fff;
    border: 1px solid #f70;
    -moz-box-shadow: 3px 3px 9px #666;
    -webkit-box-shadow: 3px 3px 9px #666;
    box-shadow: 3px 3px 9px #666;
}

#filter-collapsible h4 {
    font-size: 100%;
    color: #f70;
    font-weight: bold;
    margin: 10px 0;
    padding: 4px 0;
    border-top: 1px #999 solid;
}

#filter-collapsible table {
    font-weight: normal;
    color: #000;
}

#filter-collapsible th {
    text-align: left;
    font-weight: normal;
    color: #f70;
    padding: 1px 5px;
}

#filter-collapsible td {
    padding: 2px 5px;
    vertical-align: top;
}

#filter-table .item-caption {
    padding-right: 15px;
    color: #666;
}

#filter-table .item-caption.disabled {
    color: #aaa;
    font-style: italic;
}

#filter-collapsible .description {
    color: #666;
    margin-left: 10px;
}

#filter-apply {
    text-align: right;
    margin-top: 8px;
}

#filter-apply input {
    font-size: 95%;
}

#listings-description {
    font-size: 110%;
}

/**
 * Header table.
 */

#listings-description td {
    vertical-align: top;
}

#listings-description td:first-child,
#listings-description td.item-caption {
    padding-right: 20px;
    color: #f70;
}


/**
 * Duplicate some of the above so that we can have more than one
 * on a page. Sigh.
 */

.feature-box {
    width: 80%;
    padding: 10px;
    margin: 10px auto 20px auto;
    border: 1px solid #9097A9;
    font-size: 110%;
}


/**
 * Student notes.
 */

#notes-anchor {
    position: relative;
    /*margin-top: px;*/
}

.notes-anchor {
    float: right;
    position: relative;
}

.notes-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    width: 130px;
}

.notes-container.expanded {
    background-color: #fff;
    border: 1px solid #f70;
    -moz-box-shadow: 3px 3px 9px #666;
    -webkit-box-shadow: 3px 3px 9px #666;
    box-shadow: 3px 3px 9px #666;
    z-index: 20;
}

.notes-container-title {
    background-color: #7e878a;
    padding: 4px;
    color: #fff;
}

.notes-dropdown {
    display: none;
    border-top: 1px solid #fff;
}

.notes-container .icon {
    cursor: pointer;
    float: right;
}

.notes-new-icon {
    margin: 4px 4px 0 0;
}

.notes-dropdown .note-metadata {
    color: #aaa;
}

.notes-list {
    padding-top: 16px;
}

.notes-dropdown .note {
    margin: 10px;
    padding: 4px 10px 10px 10px;
    background-color: #ebebeb;
}

.notes-dropdown .note .note-metadata {
    margin-bottom: 4px;
}

.notes-dropdown .note .ui-icon {
    float: right;
    cursor: pointer;
    margin-left: 8px;
}

/********************************************************************************************************************
  * Scratchpads.
 ********************************************************************************************************************/

.hints {
    margin: 4px 0;
    color: #aaa;
}

.item-caption {
    color: #666;
}

.scratchpad {
    margin: 15px 0;
    position: relative;
}

.scratchpad .sp-notes-popup {
    position: absolute;
    display: none;
    width: 200px;
    right: 20px;
    top: -20px;
    z-index: 10;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #f70;
    -moz-box-shadow: 3px 3px 9px #666;
    -webkit-box-shadow: 3px 3px 9px #666;
    box-shadow: 3px 3px 9px #666;
}

.scratchpad .ui-icon {
    float: right;
    background-color: #fff;
    cursor: pointer;
    margin: 1px;
}

.scratchpad h3 {
    background: #7e878a;
    padding: 2px 3px;
    margin: 0;
    color: #fff;
    font-size: 100%;
    font-weight: normal;
    cursor: pointer;
}

.scratchpad .content {
    padding: 3px;
    background: #ebebeb;
}

.scratchpad .tools {
    padding-bottom: 4px;
    border-bottom: 1px dotted #7e878a;
}

.scratchpad .tools .ui-icon {
    background-color: transparent;
    border: none;
}

.scratchpad .tools a {
    margin: 0 6px 0 0;
    display: block;
    float: left;
}

.scratchpad .tools > span {
    margin: 0 6px 0 0;
    cursor: pointer;
}

.scratchpad .tools > span.last {
    margin: 0;
}

.scratchpad .notes {
    display: none;
}

.scratchpad ul {
    clear: both;
    padding: 0;
    margin: 4px 0 0 0;
    list-style-type: none;
}

.scratchpad li {
    padding: 0;
    margin: 2px 0;
}

.scratchpad li .icon {
    margin-right: 4px;
    cursor: pointer;
}

.scratchpad .summary {
    padding: 2px 3px;
    background: #ebebeb;
    text-align: right;
    border-top: 1px solid #fff;
}

.scratchpad .content li:hover {
    background-color: #fff;
}

/********************************************************************************************************************
 * Forms.
 ********************************************************************************************************************/

.general-form {
    margin-bottom: 20px;
}

.general-form td {
    padding: 5px;
    vertical-align: top;
}

.general-form .itemcaption {
    color: #666;
    padding-right: 15px;
}

.general-form .description {
    color: #666;
    margin-left: 15px;
}

.general-form p.description {
    margin: 0;
}

.general-form td.section-row {
    padding-top: 30px;
    color: #f70;
    border-bottom: 1px dotted #f70;
}

.general-form .length-warning {
    color: #f00;
    margin-left: 15px;
}

.general-form ul.errors {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #f00;
}

.general-form ul.errors li {
    padding: 0 0 0 5px;
}

label {
    margin-bottom: 6px;
}

input {
    vertical-align: middle;
    font-size: 95%;
}

input.text,
select,
textarea {
    font-family: arial, sans-serif;
    color: #333;
    font-size: 95%;
    vertical-align: middle;
}

input.text {
    padding: 1px 0 0 4px;
    height: 14px;
    font-weight: normal;
}

optgroup {
    font-style: normal;
}

optgroup > option {
    padding-left: 10px;
}

/** Line items in credit & debit page. */

#line-item-add {
    margin: 10px 0;
}

#line-item-add .item {
    padding-right: 10px;
}

#line-item-add label {
    margin-right: 3px;
}

.button-row {
    text-align: center;
}

.button-row input {
    margin: 0 20px;
}

/** Forms on search pages. */

.search-form {
    border: 1px solid #9097A9;
    margin: 20px 0;
    padding: 10px;
    display: flex;
    align-items: center;
}

.search-form .search-right {
    margin-left: auto;
}


.search-form label {
    margin: 0 10px 4px 0;
    font-weight: normal;
    font-family: inherit;
}

.search-form input.search-input {

}

.search-form input.search-submit {
    align-self: flex-end;
    margin: 0 0 0 5px;
}

/** Reconciliation form. */

.reconciliation-form .payment label {
    width: 100%;
}

.reconciliation-form .refund label {
    width: 35%;
    display: inline-block;
}

.reconciliation-form .refund input {
    display: inline-block;
}

/** Message form. */

.guardian-contact {
    margin-left: 1rem;
}


/********************************************************************************************************************
 * Tables.
 ********************************************************************************************************************/

table {
    font-size: 14px;
    border-collapse: collapse;
}

table.listing {
    margin: 0 0 20px 0;
    border: 1px solid #9097a9;
    width: 100%;
}


table.listing th {
    padding: 5px 8px;
    background-color: #9097a9;
    color: #fff;
    border-right: 1px solid #fff;
    text-align: left;
}

table.listing th.full {
    border-left: none;
    border-right: none !important;
    text-align: left;
    text-transform: uppercase;
}

table.listing td {
    color: #000;
    text-align: left;
    padding: 5px 8px;
    border: 1px solid #9097a9;
}

table.listing th.centred,
table.listing td.centred {
    text-align: center;
}

table.listing tr:nth-child(odd) td {
    background-color: #ececec;
}

table.listing tr:nth-child(even) td {
    background-color: #d8d8d8;
}

table.listing .white td {
    background-color: #fff;
}

table.listing th:first-child,
table.listing td:first-child {
    border-left: 1px solid #9097a9;
}

table.listing th:last-child,
table.listing td:last-child {
    border-right: 1px solid #9097a9;
}

table.listing th:first-child {
    border-left: 0;
}

table.listing .numeric {
    text-align: right;
}

table.listing .debit-balance {
    color: #f00;
}

table.listing .numeric input {
    text-align: right;
}

table.listing .float-right {
    float: right;
}

table.listing .select-column {
    width: 35px;
    text-align: center;
}

table.listing .icon-column {
    width: 28px;
    text-align: center;
}

table.listing .sub-trx td {
    color: #777;
}

table.listing .xref {
    display: block;
    color: #777;
}

table.listing .giro-flag {
    display: block;
    color: #777;
}

table.listing td.is-error {
    background-color: #f00 !important;
}

/* Fixed (non-scrolling) header. */
#fixed-header {
    position: fixed;
    top: 0;
    display: none;

}

/* Used for PPSNs in student lists, etc. */
table.listing .sub-item {
    display: block;
    color: #999;
}

.debit-balance {
    color: #f00;
}

table.listing tr.trx-ref td {
    background-color: #ff0;
}

/** Title rows. **/

table.listing tr.title-row {
    background-color: #f70;
}

table.listing tr.title-row td {
    background-color: transparent;
    color: #fff;
    font-weight: bold;
}


/** Class header in student listing. */
table.listing td.class-name,
table.listing tr:nth-child(2n+1) td.class-name {
    background-color: #f70;
    color: #fff;
    font-weight: bold;
}

table.listing td.class-name .info-divider {
    color: #000;
    margin: 0 10px;
}

table.listing td.class-name .class-links {
    float: right;
    width: 30%;
    text-align: right;
    font-weight: normal;
}

table.listing td.class-name .class-link {
    display: block;
    float: right;
    margin-left: 5px;
}

/**
 * Summary table.
 */

table.listing th.summary-count,
table.listing td.summary-count {
    width: 33px;
    text-transform: uppercase;
    text-align: center;
}

table.listing tr.total-row td {
    background-color: #9097a9;
    border-top: none;
    border-bottom: none;
    color: #fff;
    font-weight: bold;
}

/**
 * Sortable tables.
 */

table.sortable th.sortable {
    cursor: pointer;
}

table.sortable th.sorted {
    padding-left: 18px;
}

table.sortable .asc {
    background-image: url(../images/sort-up.png);
    background-repeat: no-repeat;
    background-position: 3px center;
}

table.sortable .desc {
    background-image: url(../images/sort-down.png);
    background-repeat: no-repeat;
    background-position: 3px center;
}

/**
 * Summaries & links at top of listings.
 */

.total-area {
    width: 20%;
    float: right;
    text-align: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

.listing-top-link {
    float: right;
    text-align: right;
    margin: 5px 10px 0 0;
}

/**
 * Item-value tables.
 */

.item-value-table td {
    vertical-align: top;
    padding-top: 2px;
    padding-bottom: 2px;
}

.item-value-table.extra-vertical-padding td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.item-value-table .group-title {
    color: #f70;
    padding-top: 15px;
}

.item-value-table .item-caption {
    padding-right: 20px !important;
    color: #aaa;
}

.item-value-table .description {
    color: #aaa;
    margin-left: 10px;
}

.item-value-table .numeric input {
    text-align: right;
}


/**
 * Report tables.
 */

table.report p {
    height: 20px;
    margin: 0 0 10px 0;
    padding: 0;
}

table.report td.align-top {
    vertical-align: top;
}


/**
 * Other table stuff.
 */

td.description {
    padding-left: 20px;
}


/********************************************************************************************************************
 * Attendance.
 ********************************************************************************************************************/

table.listing.roll-call-list th {
    width: 33%;
}

table.listing.roll-call-list td {
    width: 33%;
    vertical-align: top;
}

table.listing.roll-call-list.taking-roll .student {
    border: 1px solid #999;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    cursor: default;
    background: #d8d8d8 no-repeat 5px 5px;
}

table.listing.roll-call-list.taking-roll .student p {
    margin: 0;
    padding-left: 30px;
}

#present-list .student {
    background-image: url(../images/icon-tick.png);
}

#partial-list .student {
    background-image: url(../images/icon-error.png);
}

#absent-list .student {
    background-image: url(../images/icon-cross.png);
}

table.listing.roll-call-list .student.in-transit {
    background-color: #fff;
}

table.listing.roll-call-list.taking-roll td.can-drop {
    background-color: #eaeaea;
}

table.listing.roll-call-list.taking-roll .attendance-summary {
    color: #666;
}

table.listing.roll-call-list textarea {
    width: 90%;
}

.icon.edit-note {
    float: right;
    margin-left: 10px;
    cursor: pointer;
}

p.attendance-name {
    margin: 10px 0 0 0;
}

.attendance-note {
    color: #666;
}

p.attendance-note {
    margin: 0 0 10px 20px;
}

span.attendance-note {
    margin: 0 0 0 15px;
}

.attendance-summary th.number-column,
.attendance-summary td.number-column {
    width: 55px;
    text-align: center;
}


/********************************************************************************************************************
 * System messages on the summary page.
 ********************************************************************************************************************/

#system-messages {
    width: 80%;
    border: 1px solid #9097a9;
    padding: 0;
    margin: 30px auto;
}

#system-messages h3 {
    padding: 10px;
    margin: 0;
    background-color: #9097a9;
    border: none;
    color: #fff;
}

#system-messages .system-message {
    padding: 10px;
    border-bottom: 1px dotted #9097a9;
    background-color: #fff;
}

#system-messages .system-message:hover {
    background-color: #e8e8e8;
}

#system-messages .system-message:last-child {
    border-bottom: none;
}

#system-messages .posted {
    color: #9097a9;
}

#system-messages .hide-for-me {
    text-align: right;
}

/* Full-page list of all current messages. */

#system-messages-all .message-count {
    margin-bottom: 30px;
}

#system-messages-all .system-message {
    padding: 4px 0 20px 0;
    border-top: 1px dotted #9097a9;
}

#system-messages-all .system-message:last-child {
    border-bottom: 1px dotted #9097a9;
}

#system-messages-all .system-message .posted {
    margin-bottom: 20px;
    color: #9097a9;
}


/********************************************************************************************************************
 * Course listing page.
 ********************************************************************************************************************/

.public-url {
    color: #999;
    margin: 4px 0;
}


/********************************************************************************************************************
 * Course descriptors and course messages on course pages.
 ********************************************************************************************************************/

.descriptor {
    background: transparent url(../images/descriptor_background.png) repeat-y top left;
    margin-bottom: 10px;
}

.descriptor .item-title {
    float: left;
    clear: left;
    width: 80px;
    padding: 10px;
    text-transform: uppercase;
    font-size: 0.8em;
    text-align: right;
    color: #fff;
}

.descriptor .item-body {
    float: left;
    width: 390px;
    padding: 10px 0 10px 10px;
}

.descriptor .item-body p {
    margin: 0;
}

.descriptor .item-body ul {
    margin: 0 0 5px 0;
    padding-left: 15px;
}

.descriptor .item-control {
    float: right;
    width: 100px;
}

.descriptor .item-control-button {
    float: right;
    margin: 4px;
    width: 16px;
}

.markdown-help {
    float: right;
    width: 150px;
    background-color: #eee;
    padding: 0 10px;
}

.markdown-help p {
    margin: 10px 0;
}

/* Course messages. */

.course-messages .item-body {
    float: left;
    width: 480px;
    padding: 10px 0;
}

.course-messages .item-body p {
    margin: 0;
}

.course-messages .item-body ul {
    margin: 0 0 5px 0;
    padding-left: 15px;
}

.course-messages .item-control {
    float: right;
    width: 100px;
}

.course-messages .item-control-button {
    float: right;
    margin: 4px;
    width: 16px;
}


/********************************************************************************************************************
 * Mugshot on the student detail page.
 ********************************************************************************************************************/

.mugshot-container {
    float: right;
    margin-top: 80px;
}

.mugshot-container .mugshot {
    margin: 0;
    height: 150px;
    width: auto;
    border: 1px solid #000;
}

.mugshot-container .upload-link {
    text-align: right;
    margin: 0;
    position: relative;
}

#mugshot-toggle-icon {
    position: absolute;
    top: 8px;
    right: 5px;
    cursor: pointer;
    z-index: 10;
}


/********************************************************************************************************************
 * Settings page.
 ********************************************************************************************************************/

#tabs {
    width: 100%;

}

#tab-menu {
    width: 25%;
    float: left;
    list-style-type: none;
    padding: 0;
}

#tab-menu li a {
    display: block;
    padding: 1em 2em 1em 1em;
    background-color: #ccc;
    font-size: 110%;
    color: #000;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

#tab-menu li a:hover {
    background-color: #cfcfcf;
}

#tab-menu li a.active {
    background-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
}

.tab-content {
    float: left;
    width: 70%;
    padding-left: 30px;
}

/********************************************************************************************************************
 * Exam entry.
 ********************************************************************************************************************/

.exam-entry-issues {
    border: 1px solid #f00;
    padding: 20px;
}

.exam-entry-issues h4 {
    margin: 0 0 20px 0;
    color: #f00;
}


/** Exam entry form. */
.exam-entry-form {
    border: 1px solid #999;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.exam-entry-form p {
    margin: 0 0 20px 0;
}


/********************************************************************************************************************
 * October Returns.
 ********************************************************************************************************************/

.october-returns-form {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #999;
    padding: 20px;
    margin-top: 20px;
}

.october-returns-form td {
    width: 30%;
    padding-right: 30px;
}

.october-returns-form td:last-child {
    padding-right: 0;
    text-align: right;
}

.missing-value {
    color: #f00;
    margin-left: 10px;
}


/********************************************************************************************************************
 * Expunging pages.
 ********************************************************************************************************************/

.expunge-datum {
    display: block;
    height: 1.3rem;
}



/********************************************************************************************************************
 * Messages.
 ********************************************************************************************************************/

.message {
    width: 100%;
    margin: 20px auto;
    padding: 0 10px;
}

.message p {
    margin: 10px 0;
}

.notice {
    background-color: #dfd;
    border: 1px solid #0f0;
}

.warning {
    background-color: #fe0;
    border: 1px solid #f70;
}

.error {
    border: 1px solid #f00;
    background-color: #fdd;
}


/********************************************************************************************************************
 * Etc.
 ********************************************************************************************************************/

.link {
    cursor: pointer;
}

.floatleft {
    float: left !important;
}

.floatright {
    float: right !important;
}

.right-aligned {
    text-align: right !important;
}

.centred {
    text-align: center !important;
}

.gap-above {
    margin-top: 10px !important;
}

.gap-above-bigger {
    margin-top: 25px !important;
}

.gap-above-even-bigger {
    margin-top: 50px !important;
}

.extra-padding {
    padding: 10px 30px;
}

.gap-left {
    margin-left: 10px !important;
}

.gap-right {
    margin-right: 10px !important;
}

.clear {
    clear: both !important;
}

.bold {
    font-weight: bold !important
}

.red {
    color: #f00;
}

.normal {
    font-weight: normal !important;
}

.block {
    display: block !important;
}

.none {
    margin: 10px 0 20px 30px;
}

.invisible {
    display: none !important;
}

.invalid-flag {
    color: #f00;
    font-weight: bold;
}

.deleted-flag {
    color: #f00;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
}

i.fas {
    margin-right: 5px;
}

.width-100 {
    width: 100%;
}

.width-50 {
    width: 50%;
}




/********************************************************************************************************************
 * End.
 ********************************************************************************************************************/