body { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; padding-top: 70px; } p { text-align: justify; } #header { margin-top: 20px; margin-bottom: 20px; } h1 { font-size: 30px; font-weight: 300; text-align: center; } h2 { font-size: 25px; /* font-weight: 300; */ font-weight: bold; color: #8c1515; } .schedule-playlist { color: #333; font-size: 16px; font-weight: 300; } h3 { font-size: 20px; font-weight: bold; } .term-line { font-size: 20px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; text-align: center; } #header .term-line > span { display: block; margin-left: 0 !important; margin-top: 4px; } .lhead { font-weight: normal; margin-top: 5px; } .litem { margin-top: 5px; } #footer { height: 100px; padding-top: 50px; text-align: center; position: relative; } .instructorphoto img { width: 120px; height: 120px; object-fit: cover; border-radius: 100px; margin-bottom: 10px; } .logo-row { width: 100%; } .logo-left { width: auto; height:60px; float: left; margin-left: 50px; } .logo-right { width: auto; height:60px; float: right; margin-right: 50px; } .instructor { display: inline-block; width: 140px; text-align: center; margin-right: 20px; margin-bottom: 5px; font-size: 14px; } .sec { margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; } .sechighlight { background-color: #f7f6f1; } .tt { color: #060; display: inline-block; } #inputlayer { width: 65px; } .layer { width: 35px; display: inline-block; vertical-align: middle; margin-left: 10px; margin-bottom: 5px; } .actmap { display: block; border: 2px solid #FFF; } #convnetvis { text-align: center; } .pp { color: white; text-align: left; padding: 5px; height: 32px; margin: 2px; background-color: rgb(85,187,85); overflow: visible !important; } #convask { position: absolute; top: 360px; right: 16px; color: white; font-size: 25px; cursor: pointer; } #explain { display: none; background-color: #FF9; border-radius: 10px; margin: 10px; padding: 10px; } .qq { color: #060; } .qa { font-style: italic; } .qqa { margin-bottom: 20px; } .spanh { font-weight: normal; } #coursedesc { text-align: justify; } #classicons { position: absolute; bottom: 20px; right: 20px; } .bold { font-weight: bold; } .red { color: #b00020; } .status-out { color: #006400; } .status-due { color: #b00020; } /* Navbar color / spacing */ .navbar-default { background-color: #8c1515; border-color: #c0392b; text-align: center; } .navbar-default .navbar-brand { color: #ecf0f1; font-weight: bold; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #fbcbcc; } .navbar-default .navbar-text { color: #ecf0f1; } .navbar-default .navbar-collapse > ul { width: 80%; } .navbar-default .navbar-collapse > ul > li { width: 16%; } .navbar-default .navbar-nav > li > a { color: #ecf0f1; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fbcbcc; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #fbcbcc; background-color: #c0392b; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #fbcbcc; background-color: #c0392b; } .navbar-default .navbar-toggle { border-color: #c0392b; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #c0392b; } .navbar-default .navbar-toggle .icon-bar { background-color: #ecf0f1; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ecf0f1; } .navbar-default .navbar-link { color: #ecf0f1; } .navbar-default .navbar-link:hover { color: #fbcbcc; } /* Handle formatting on mobile */ @media (max-width: 767px) { .navbar-default .navbar-collapse > ul > li { width: 100%; text-align: left; } #header { display: flex; flex-direction: column; align-items: center; } .logo-row { display: flex; justify-content: center; gap: 16px; width: auto; } .logo-left, .logo-right { float: none; margin: 0; } #header { margin-bottom: 10px; } #header h1 { margin-top: 20px; margin-bottom: 4px; } #header .term-line { margin-top: 4px; } /* Force table to not be like tables anymore */ #schedule table, #schedule thead, #schedule tbody, #schedule th, #schedule td, #schedule tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #schedule thead tr { position: absolute; top: -9999px; left: -9999px; } /* Make each row a clean card */ #schedule table tr { margin-bottom: 12px; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; } /* Default cell: label on left, value on right */ #schedule .table td { border: none; border-bottom: 1px solid #f0f0f0; position: relative; padding: 6px 12px 6px 80px; } #schedule .table td:last-child { border-bottom: none; } /* Hide cells with no content */ #schedule .table td:empty { display: none; padding: 0; } /* Position labels on the left */ #schedule .table td:before { position: absolute; top: 6px; left: 12px; width: 68px; padding-right: 8px; white-space: nowrap; color: #666; /* font-size: 14px; */ } /* --- Header line: date (left) + lecture # (right) --- */ #schedule .table td:nth-of-type(1) { float: right; padding: 8px 12px 8px 0; border: none; font-weight: 600; /* color: #999; */ /* font-size: 14px; */ } #schedule .table td:nth-of-type(1):before { content: none; } #schedule .table td:nth-of-type(2) { padding: 8px 12px; font-weight: 500; border: none; } #schedule .table td:nth-of-type(2):before { content: none; } /* --- Content rows below the header --- */ #schedule .table td:nth-of-type(3) { clear: both; border-top: 1px solid #e8e8e8; } #schedule td:nth-of-type(3):before { content: "Topic"; } #schedule td:nth-of-type(4):before { content: "Materials"; } #schedule td:nth-of-type(5):before { content: "Due"; } } #unreleased-message { background: #d62728; box-sizing: border-box; color: #fff; font-weight: bold; text-align: center; left: 0; min-height: 3em; padding: 0.5em; position: fixed; bottom: 0; width: 100%; z-index: 10000; } #unreleased-message + div { margin-top: 3em; } #unreleased-message a { color: #fff; text-decoration:underline; }