style.scss

---
# This is where the style colors for the website are set
---
$navbar-color: #003459;
$dark-color: #003459;
$gradient-dark:  #004d85;
$gradient-light:   #004d85;
$lecture-background: #164756 ;
$lab-background:#d8e6c9;
$background: #d8e6c9;
$highlight-dark: red;
$highlight-light: lightcoral;
$highlight-darkest: #660000;
$white: white;

a {
    color: $dark-color;
}

a:visited {
    color: $gradient-dark;
    text-decoration: none;
}


.navbar .navbar-expand-lg .navbar-dark {
    background-color: $navbar-color;
}

.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
    color:   $dark-color;
}

.caption-frame {
    position: top;
    float: top;
    width: 100%;
    height: 200px;
}

.marknav { text-align: left; }
.marknav a { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.marknav a:focus, .marknav a:active { position: static; left: 0; width: auto; height: auto; overflow: visible; text-decoration: underline; }


ul#markdown-toc {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
}

ul#markdown-toc li{
    display: inline;
    padding: 5px;
    background-color: $background;
    style: bold;
}

ul li.tbd {
    color: $highlight-dark;
}

h1.tbd {
    background-image: linear-gradient(to right,  $gradient-dark, $gradient-dark,  $gradient-light);
    color: $highlight-light;
    padding: 5px;
}

p.tbd #tbd{
    color: $highlight-dark;
}

dl dd.tbd {
    color: $highlight-darkest;
}

h1.week{
    background-image:  linear-gradient(to right, $gradient-dark, $gradient-dark,  $gradient-light);
    color: $white;
    padding:5px;
}

dl dt.lecture {
    style:bold;
    font-size: large;
    background-color:   $lecture-background;
    color: $white;
    padding:5px;
}

dl dt.holiday {
    style:bold;
    font-size: large;
    background-color: $gradient-dark;
    color:   $background;
    padding:5px;
}

dl dt.cancelled {
    style:bold;
    font-size: large;
    background-color:  $highlight-dark;
    color:   $white;
    padding:5px;
}

dl dt.lab {
    style:bold;
    font-size: large;
    background-color: $lab-background;
    padding:5px;
}

.navbar {
    background-color:  $navbar-color;
}

table.schedule {
  border: 2px solid $white;
  width: 100%;
  text-align: left;
  table-layout:fixed;
  border-collapse: collapse;
}


#unpublished-warning {
   background-color: $highlight-light;
   border: 0.15em solid $highlight-dark;
   border-radius: 0.5em;
   color: $white;
   font-size: large;
   padding: 0.25em 0.5em;
   margin-bottom: 1em;
}

table.schedule td, table.schedule th {
  border: 1px solid $white;
  padding: 3px 4px;
}

table.tbd td, table.tbd th{
  background-color: $highlight-light;
  border: 2px solid $white;
  padding: 3px 4px;
}

table.schedule tbody td,table.tbd tbody td {
  font-size: 13px;
}


table.schedule td:nth-child(even) {
    background:  $lab-background;
}
table.tbd td:nth-child(even) {
  background: $gradient-light;
}

table.schedule thead {
  background: $white;
  border-bottom: 4px solid $dark-color;
}
table.schedule thead th {
  font-size: 15px;
  font-weight: bold;
  color: $dark-color;
  text-align: left;
  border-left: 2px solid $dark-color;
}
table.schedule thead th:first-child {
  border-left: none;
}

table.schedule tfoot {
  font-size: 14px;
  font-weight: bold;
  color: $dark-color;
  border-top: 4px solid $dark-color;
}
table.schedule tfoot td {
  font-size: 14px;
}

.page-header {
  background-image: linear-gradient(-120deg, $gradient-light, $gradient-dark, $gradient-dark);
  padding-top: 1rem;
}

.project-tagline {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

img.ta-picture {
  height: 80px;
  max-width: unset;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.font-14pt {
    font-size: 12pt;
}