/* Overriding the cis_default.css file */

#main ul li a {
    color: #B5121B;
}

    #main ul li a:hover {
        color: #000000;
    }

/* NAVIGATION */

#col-secondary img.icon {
    margin: 0px 0px 0.8em 0px;
}

#navigation-secondary ol {
    margin-bottom: 10px;
}

/* end of NAVIGATION */


/* FOOTER */

@media only screen and (max-width: 480px) {
    /* display the navigation at the bottom of the page */
    #resp_bottom_nav {
        display: block;
    }

        #resp_bottom_nav ul {
            margin-bottom: 10px;
        }
}

/* end of FOOTER */

/* MESSAGES */

.messageSuccess {
    border: 2px solid #009A63;
    margin: 5px 0px 10px 0px;
    padding: 10px;
}

    .messageSuccess div {
        background-image: url('/template2012/icon/32check.png');
        background-repeat: no-repeat; /*height: 2.3em;*/
        min-height: 2.4em;
        padding-left: 50px;
        text-align: left;
        margin: 0px;
    }

.messageError {
    border: 2px solid #B5121B;
    margin: 5px 0px 10px 0px;
    padding: 10px;
}

    .messageError div {
        background-image: url('/template2012/icon/32delete.png');
        background-repeat: no-repeat; /*height: 2.3em;*/
        min-height: 2.4em;
        padding-left: 50px;
        text-align: left;
        margin: 0px;
    }

.messageInformation {
    border: 2px solid #0061C7;
    margin: 5px 0px 10px 0px;
    padding: 10px;
}

    .messageInformation div {
        background-image: url('/template2012/icon/32information.png');
        background-repeat: no-repeat;
        min-height: 2.4em;
        padding-left: 50px;
        text-align: left;
        margin: 0px;
    }

.messageWarning {
    border: 2px solid #ecb805;
    margin: 5px 0px 10px 0px;
    padding: 10px;
}

    .messageWarning div {
        background-image: url('/template2012/icon/32warning.png');
        background-repeat: no-repeat; /*height: 2.3em;*/
        min-height: 2.4em;
        padding-left: 50px;
        text-align: left;
        margin: 0px;
    }

/* end of MESSAGES */

/* images */

img.helpicon {
    padding: 0px 5px 0px 0px;
    vertical-align: middle;
}

/* feedback */

.feedback p label {
    width: 15%;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.feedback textarea {
    width: 82%;
    vertical-align: text-top;
    margin: 0px 5px;
    padding: 0px;
}

.feedback input[type=text] {
    width: 82%;
    vertical-align: text-top;
    margin: 0px;
    padding: 0px;
}

/* subscription */
.subscribecol {
    width: 40%;
}

/* iCalendar Feed */
fieldset.icalendar-feed legend {
    font-size: 1.6923em;
    line-height: 1.1818em;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'EffraLight', Arial, Helvetica, sans-serif;
    letter-spacing: -0.04em;
    color: black;
}

p.icalendar-feed-date {
    font-style: italic;
}

    p.icalendar-feed-date span {
        display: block;
    }

    p.icalendar-feed-date label {
        width: 15%;
        display: inline-block;
    }

/* instruction steps */

ol.instruction-steps li {
    margin-top: 10px;
}

    ol.instruction-steps li img {
        margin-top: 10px;
    }

table.icalendar-feed tr th.col1,
table.icalendar-feed tr td.col1 {
    width: 20%;
}

table.icalendar-feed tr th.col2,
table.icalendar-feed tr td.col2 {
    width: 40%;
}

/* timetable table */

table.timetable-matrix {
}

    table.timetable-matrix tr th,
    table.timetable-matrix tr td {
        padding: 10px;
        border-left: 1px solid #cccccc;
    }

        table.timetable-matrix tr th:first-child,
        table.timetable-matrix tr td:first-child {
            padding-left: 0px;
            border-left-width: 0px;
        }

    table.timetable-matrix tr td {
        vertical-align: middle;
    }

    table.timetable-matrix tr .detail {
        width: 49%;
    }

table.timetable-matrix2 {
}

    table.timetable-matrix2 tr th,
    table.timetable-matrix2 tr td {
        padding: 5px 10px 5px 10px;
        vertical-align: top;
    }

        table.timetable-matrix2 tr th:first-child,
        table.timetable-matrix2 tr td:first-child {
            padding-left: 0px;
        }

    table.timetable-matrix2 tr .show_mobile {
        display: none;
    }

    table.timetable-matrix2 tr .show_screen {
    }

@media only screen and (max-width: 768px) {
    table.timetable-matrix2 tr .show_mobile {
        display: table-cell;
    }

    table.timetable-matrix2 tr .show_screen {
        display: none;
    }

    .show_screen {
        display: none;
    }
}


/* room booking buttons */
div.timetable-roombooking {
    margin: 20px 0px 30px 0px;
    text-align: center;
    display: block;
    padding: 0px;
}

    div.timetable-roombooking .group {
        display: inline-block;
        width: 280px;
        max-width: 280px;
        margin: 0px 5px;
    }

    div.timetable-roombooking .group2 {
        display: inline-block;
        width: 150px;
        max-width: 150px;
        margin: 0px 5px;
    }


    div.timetable-roombooking .group h2 {
    }

    div.timetable-roombooking .group div,
    div.timetable-roombooking .group2 div {
        margin: 10px 0px 10px 0px;
        padding: 10px;
        border: 1px solid #CCCCCC;
        text-align: center;
        border-radius: 15px;
        background-image: url('/template2012/image/blend.png');
        background-repeat: repeat-x;
        background-position-y: bottom;
    }

        div.timetable-roombooking .group div a {
            display: table-cell;
            width: 222px;
            vertical-align: middle;
            height: 40px;
            padding: 0px 0px 0px 58px;
            margin: 0px;
            text-decoration: none;
            font-size: 1.2em;
        }

        div.timetable-roombooking .group2 div a {
            display: table-cell;
            width: 130px;
            vertical-align: middle;
            height: 20px;
            padding: 0px 0px 0px 0px;
            margin: 0px;
            text-decoration: none;
            font-size: 1.2em;
        }

        div.timetable-roombooking .group div.btn-wrb a {
            background-image: url('/template2012/icon/32clock.png');
            background-repeat: no-repeat;
            background-position-y: center;
        }

        div.timetable-roombooking .group div.btn-wrb span {
            font-size: small;
        }

        div.timetable-roombooking .group div.btn-rut a {
            background-image: url('/template2012/icon/32calendar.png');
            background-repeat: no-repeat;
            background-position-y: center;
        }

        div.timetable-roombooking .group div.btn-rbr a {
            background-image: url('/template2012/icon/32message.png');
            background-repeat: no-repeat;
            background-position-y: center;
        }


/* Academic Week Calendars */
div.cal_academic_week table.cal_key {
    text-align: center;
}

    div.cal_academic_week table.cal_key tbody tr td {
        font-weight: bold;
        text-align: center;
        padding-top: 0.5em;
    }

div.cal_academic_week div.cal_left {
    min-width: 300px;
    width: auto;
    display: inline;
    float: left;
    margin: 5px 3px;
    clear: both;
}

div.cal_academic_week div.cal_right {
    min-width: 300px;
    width: auto;
    display: inline;
    float: left;
    margin: 5px 3px;
}

div.cal_academic_week div div.cal_title {
    text-align: center;
    text-decoration: underline;
    font-size: 1.1em;
    padding-top: 20px;
    width: 100%;
}

div.cal_academic_week div table {
    width: 100%;
}

    div.cal_academic_week div table tbody tr td,
    div.cal_academic_week div table tbody tr th {
        padding: 3px;
    }

td.cal_term_col, th.cal_term_col {
    display: none;
}

td.cal_vacation {
    background-color: yellow;
    font-style: italic;
}

td.cal_term1 {
    background-color: lightblue;
}

td.cal_term2 {
    background-color: palegreen;
}

td.cal_term3 {
    background-color: palevioletred;
}

td.cal_bold {
    font-weight: bold;
    font-size: 1em;
}


@media print {
    div.cal_academic h1 {
        text-align: center !important;
        margin-bottom: 5px;
    }

    div.cal_academic p,
    div.cal_academic div.messageWarning,
    div.cal_academic_week table.cal_key {
        display: none;
    }

    div.cal_academic_week div table {
        margin: 0px;
        padding: 0px;
    }

        div.cal_academic_week div table tbody tr td,
        div.cal_academic_week div table tbody tr th {
            font-size: 0.8em;
            padding: 1px;
        }

    div.cal_academic_week div table {
        width: 100% !important;
    }

    div.cal_academic_week div.cal_left {
        width: 49% !important;
        display: inline !important;
        float: left !important;
        clear: both !important;
        margin: 0px;
        padding: 0px;
    }

    div.cal_academic_week div.cal_right {
        width: 50% !important;
        display: inline !important;
        float: right !important;
        margin: 0px;
        padding: 0px;
    }

    div.cal_academic_week div div.cal_title {
        text-align: center !important;
        padding: 8px 3px 3px 3px;
    }

    td.cal_term_col, th.cal_term_col {
        display: table-cell;
    }

    td.cal_vacation {
        background-color: yellow !important;
    }

    td.cal_term1 {
        background-color: lightblue !important;
    }

    td.cal_term2 {
        background-color: palegreen !important;
    }

    td.cal_term3 {
        background-color: palevioletred !important;
    }
}

/* Society List */
div.soc_list ul li {
    display: inline;
    float: left;
    width: 33%;
}


@media only screen and (max-width: 480px) {
    div.soc_list ul li {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    div.soc_list ul li {
        width: 50%;
    }
}

@media print {
    div.soc_list ul li {
        display: inline !important;
        float: left !important;
        width: 33% !important;
    }
}


/* Timetables */
#main fieldset,
.timetable_settings_popup fieldset {
    padding: 5px;
    margin: 1em 0px;
    border: #CCCCCC solid 3px;
}

    #main fieldset legend,
    .timetable_settings_popup fieldset legend {
        padding: 0px 3px;
    }

table.pagetableoptions {
    border-width: 0px;
    border-collapse: collapse;
}

    table.pagetableoptions tr td,
    table.pagetableoptions tbody tr td {
        border-width: 0px;
        vertical-align: top;
    }

        table.pagetableoptions tr td.pagetableoptions_header,
        table.pagetableoptions tbody tr td.pagetableoptions_header {
            width: 25%;
        }

        table.pagetableoptions tbody tr td select,
        table.pagetableoptions tbody tr td textarea {
            width: 99%;
        }

        table.pagetableoptions tbody tr td input[type=text] {
            width: 98%;
        }

div.copyright,
div.note {
    font-style: italic;
    font-size: 0.8em;
}

.HeaderTitleSub {
    margin-bottom: 20px;
}

.timetable_settings_popup_background {
    background-color: #666666;
    filter: alpha(opacity=50);
    opacity: 0.7;
}

.timetable_settings_popup {
    max-width: 520px;
    min-height: 150px;
    background: white;
    padding: 10px;
}



    .timetable_settings_popup table.pagetableoptions {
        width: inherit;
    }

        .timetable_settings_popup table.pagetableoptions tr td {
            padding: 5px;
        }

    .timetable_settings_popup .modal_buttons {
        text-align: right;
    }



/* understanding timetable */

span.highlight {
    font-weight: bold;
    text-decoration: underline;
}

.att_sample {
    text-align: center;
}

.att_col1 {
    width: 22%;
    padding-right: 10px;
}

/* user guide images */

img.guide-wide {
    max-width: 852px;
    width: 100%;
}

p.guide-instruction {
    font-weight: bold;
}



/* SCREEN / MOBILE settings */

#router ul li.on_screen {
    display: inherit;
}

#router ul li.on_mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    #router ul li.on_screen {
        display: none;
    }

    #router ul li.on_mobile {
        display: inherit;
    }
}

/* end of SCREEN / MOBILE settings */


/* icalendar feed list */
table.tt_table {
}

    table.tt_table tbody tr.tt_table_header th,
    table.tt_table tbody tr.tt_table_header td {
        font-weight: bold;
    }

    table.tt_table tbody tr.building_feed td {
        background-color: #EEEEEE;
    }