body { font-size: 14px; font-family: Arial, sans-serif; color: #404040; background: aliceblue; padding: 0; margin: 0; }

h1 { font-size: 32px; text-shadow: 2px 2px 2px lightgray; margin: 0; margin-right: 120px; padding: 10px 15px; display: block; }
    h1 .course { color: #007fff; font-weight: normal !important; display: block; }
    h1 .semester { color: #404040; font-weight: normal !important; font-size: 26px; padding-top: 5px; display: block; }
    h1 .title { color: #404040; font-weight: normal !important; padding-top: 5px; display: block; }
h2 { font-size: 26px; color: #007fff; padding-bottom: 5px; }
/*
h2 { font-size: 24px; color: RoyalBlue; border-bottom: 1px dotted RoyalBlue; text-align: center; }
*/
h3 { font-size: 20px; color: DarkSlateBlue; text-align: center; }
h4 { font-size: 18px; color: black; text-align: center; }
h5 { font-size: 16px; color: black; text-decoration: underline; }

code { font-family: Consola, Courier New, Monospace; }

#shortcuts { position: fixed; top: 5px; right: 0; font-size: 11px; margin: 0; padding: 10px; padding-left: 25px; background: white; border-radius: 10px 0 0 10px; box-shadow: 2px 2px 2px #808080; z-index: 999; }
    #shortcuts > button#collapse-button { position: absolute; color: #808080; background: #f0f0f0; top: 0; left: 0; border: none; border-radius: 10px 0 0 10px; width: 15px; height: 100%; padding: 0; }
    #shortcuts > button#collapse-button:focus { outline: none; }
    #shortcuts > div { margin-bottom: 5px; }
    #shortcuts > div:last-child { margin-bottom: 0; }

div.content { margin: 10px 15px; }

div.table { }
    div.table div.col-header,
    div.table div.col-data { background: white; padding: 5px; }
    div.table div.col-header { font-weight: bold; text-align: center; background: #e4e0dc; }
    div.table div.col-data { border-left: 1px solid #e4e0dc; border-top: 1px solid #e0e0e0; }
    div.table div.col-data:last-child { border-right: 1px solid #e4e0dc; }
    div.table div.row:last-child div.col-data { border-bottom: 1px solid #e0e0e0; }

div.main-table { }
    div.main-table div.row-break div.col { background: none; }
@media (max-width: 767.98px) {
    div.main-table div.col-sub { background: none; }
    div.main-table div.col-sub span.sub-title { text-decoration: underline; }
    div.main-table div.col-data { border-top: none; border-right: 1px solid #e4e0dc; }
    div.main-table div.col-data:last-child { border-bottom: 1px solid #e4e0dc !important; }
    div.main-table div.row:last-child div.col-data { border-bottom: none; }
}

div.week { padding: 5px 0; width: 100%; text-align: center; font-weight: bold; }

table.calendar { border-top: 1px solid gray; border-bottom: 1px solid gray; border-spacing: 0; border-collapse: collapse; width: 100%; margin-bottom: 10px; }
    table.calendar th, table.calendar td { width: 14.28%; text-align: center; border: none; padding: 2px 0; font-size: 11px; background: white; font-weight: bold; }
    table.calendar th.month { color: blue; padding: 2px 5px; }
    table.calendar td.dim { color: #c0c0c0; background: #f0f0f0; }
    table.calendar th.sunday, table.calendar td.sunday { color: red; }
    table.calendar th.holiday, table.calendar td.holiday { color: red; background: #f0c000; }

table.schedule { border-spacing: 0; border-collapse: collapse; margin: auto; width: auto; background: white; }
    table.schedule th, table.schedule td { border: none; font-size: 9px; background: white; text-align: left; padding: 0; padding-bottom: 1px; }
    table.schedule tr:last-child th, table.schedule tr:last-child td { padding-bottom: 10px; }
    table.schedule td { padding-left: 4px; }

table.zoom-links { border-spacing: 0; border-collapse: collapse; width: 100%; background: white; padding-top: 5px; border-top: 1px solid gray; border-bottom: 1px solid gray; }
    table.zoom-links th, table.zoom-links td { border: none; font-size: 12px; text-align: left; padding: 0; padding-left: 4px; }
    table.zoom-links th { padding-bottom: 5px; }
    table.zoom-links > tr:first-child > th, table.zoom-links > tr:first-child > td { padding-top: 5px; }
    table.zoom-links > tr:last-child > th, table.zoom-links > tr:last-child > td { padding-bottom: 5px; }
    table.zoom-links > tr:nth-child(4n+2), table.zoom-links > tr:nth-child(4n+3) { background: #eee; }
    table.zoom-links td.section { font-size: 16px; text-align: center; vertical-align: middle; padding: 0; }
    table.zoom-links td.cancelled { color: darkgray; }
    table.zoom-links-inner { border-spacing: 0; border-collapse: collapse; width: 100%; background: none; }
    table.zoom-links-inner td { vertical-align: middle; width: 50%; }
    table.zoom-links-inner td:first-child { padding-left: 0; }

ul.main, ul.sub { padding: 0; margin: 0; margin-left: 30px; list-style: none; line-height: 18px; }
    ul.sub { padding-top: 0; margin-left: 20px; color: #444; }
    ul.main li:before, ul.sub li:before { content: ""; background: url(silk_icons.png) no-repeat -145px -937px; display: block; top: 16px; height: 16px; width: 16px; margin-top: -15px; margin-left: -22px; position: relative; }
    ul.main li { margin: 10px 0; }
    ul.sub li { font-size: 13px; margin: 0.25em 0; }
    li.pdf:before { background-position: -985px -1176px !important; }
    li.info:before { background-position: -845px -105px !important; }
    li.book:before { background-position: -145px -207px !important; }
    li.archive:before { background-position: -985px -700px !important; }
    li.folder:before { background-position: -705px -376px !important; }
    li.lab:before { background-position: -425px -241px !important; }
    li.schedule:before { background-position: -285px -20px !important; }
    li.film:before { background-position: -705px -88px !important; }
    li.game:before { background-position: -425px -480px !important; }
    li.list:before { background-position: -5px -614px !important; }
    li.important:before { background-position: -565px -1227px !important; }
    /*li.exam:before { background-position: -145px -377px !important; }*/
    li.exam:before { background-position: -425px -292px !important; }
    li.excel:before { background: url(excel_icon.png) no-repeat 0 0 !important; }
    li.html:before { background-position: -985px -802px !important; }
    li.zoom-lecture-links:before { background-position: -1545px -1040px !important; }
    li.zoom-lecture-videos:before { background-position: -425px -733px !important; }
    li.examples:before { background-position: -1265px -904px !important; }
    li.interactive-questions:before { background-position: -1405px -683px !important; }
    li.clickable-index:before { background-position: -5px -564px !important; }
    li.revision-tasks:before { background-position: -5px -224px !important; }
    li.timetable:before { background-position: -286px -21px !important; }


li.book { color: darkgreen; font-size: 12px !important; }

div.examples { border: 1px solid #e4e0dc; background: white; }
li.example ul.sub { padding-top: 5px; }

div.information { overflow-y: auto; max-height: 7.5em; }
div.information ul.main li { margin: 5px 0; }

span.title { font-weight: bold; }
span.pdfs, span.link { font-size: 11px; font-weight: normal; white-space: nowrap; }
li.lab span.link { font-size: 11px; }

div.remark { font-size: 80%; font-style: italic; }

span.timetable, a.timetable { background: url(silk_icons.png) no-repeat -286px -21px; display: inline-block; margin-bottom: -3px; height: 15px; width: 15px; }

.L1, .L2, .L3, .L4, .L5, .L6, .L7, .L8, .L9, .L10, .L11, .L12 { color: green; }
.LA1, .LA2, .LA3, .LA4, .LA5, .LA6, .LA7, .LA8, .LA9, .LA10, .LA11, .LA12 { color: maroon; }

/*
.L1 { color: red; }
.L2 { color: magenta; }
.L3 { color: blue; }
.L4 { color: lime; }
.L5 { color: orange; }
.L6 { color: brown; }
.L7 { color: navy; }
.L8 { color: olive; }
.L9 { color: pink; }
.L10 { color: orchid; }
.L11 { color: cyan; }
.L12 { color: green; }

.LA1 { color: orange; }
.LA2 { color: cyan; }
.LA3 { color: maroon; }
.LA4 { color: green; }
.LA5 { color: blue; }
.LA6 { color: magenta; }
.LA7 { color: brown; }
.LA8 { color: navy; }
.LA9 { color: red; }
.LA10 { color: olive; }
.LA11 { color: orchid; }
*/

a img { border: none; }

/* The following is added for the example pages on 20140207 */
h2.title { margin: 10px; }

/* The following is added by Wallace */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color:#0000C7; }

.center { text-align: center; }
.box { border: 1px solid black; background: white; }

.highlight { background: yellow; }