:root {
  --colorNotice: #A52A2A;

  --color1: #005e80;
  --color2: #0e789e;
  --color3: #218fb8;

  --colorCodeBg: #f7f7f9;
  --colorCodeBorder: #e1e1e8;
}

font.optional {
  color: #009600;
}

font.notice {
  color: var(--colorNotice);
}

font.snippet {
  font-family: Consolas, Monospace !important;
}

/* ---------- Overriding bootstrap.min.css components ---------- */

a {
  color: var(--color3);
  text-decoration: underline
}

a:hover,
a:focus {
  color: var(--color1);
  text-decoration: underline
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--color1)
}

/* Headings and navigational lists should not carry link underlines. */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.breadcrumb a,
.list-unstyled a,
.toc a,
.lesson-nav a,
.staff-grid a {
  text-decoration: none
}

.navbar-default {
  background-color: var(--color2);
  border-color: var(--color1)
}

.navbar-default .navbar-brand {
  color: #ffffff;
  text-decoration: none
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
  background-color: none
}

.navbar-default .navbar-text {
  color: #dddddd
}

.navbar-default .navbar-nav>li>a {
  color: #ffffff;
  text-decoration: none
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #ffffff;
  background-color: var(--color1)
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #ffffff;
  background-color: var(--color1)
}

.navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:hover,
.navbar-default .navbar-nav>.disabled>a:focus {
  color: #dddddd;
  background-color: transparent
}

.navbar-default .navbar-toggle {
  border-color: var(--color1)
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--color1)
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: var(--color1)
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: var(--color1);
  color: #ffffff
}

.navbar-default .navbar-nav .dropdown-menu>li>a {
  text-decoration: none
}

.navbar-default .navbar-nav .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .dropdown-menu>li>a:focus {
  color: #ffffff;
  background-color: var(--color2)
}

@media (max-width:767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #ffffff
  }

  .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #ffffff;
    background-color: var(--color2)
  }

  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
    color: #ffffff;
    background-color: var(--color1)
  }

  .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
    color: #dddddd;
    background-color: transparent
  }
}

.navbar {
  background-image: -webkit-linear-gradient(var(--color2), var(--color2) 20%, var(--color1));
  background-image: -o-linear-gradient(var(--color2), var(--color2) 20%, var(--color1));
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color3)), color-stop(60%, var(--color2)), to(var(--color1)));
  background-image: linear-gradient(var(--color3), var(--color2) 20%, var(--color1));
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color1);
  -webkit-filter: none;
  filter: none;
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1)
}

.navbar-default .badge {
  background-color: #fff;
  color: var(--color2)
}

/* ---------- Page layout ---------- */

body {
  position: relative;
  padding-top: 75px;
}

p,
li,
td,
th {
  font-size: 110%;
}

.page-title {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.page-footer {
  margin-top: 60px;
  padding: 25px 0 60px;
  border-top: 1px solid #dddddd;
  color: #777777;
}

.page-footer a {
  color: var(--color3);
}

/* Keeps anchor targets clear of the fixed navbar when jumped to. */
[id] {
  scroll-margin-top: 80px;
}

/* ---------- Table of contents ---------- */

.toc {
  margin-bottom: 30px;
}

.toc>ul {
  margin-bottom: 0;
}

.toc ul {
  list-style: none;
  padding-left: 20px;
}

.toc>ul {
  padding-left: 0;
}

.toc li {
  font-size: 100%;
  line-height: 1.8;
}

/* ---------- Lesson navigation ---------- */

.lesson-nav {
  margin: 30px 0;
}

.lesson-nav .lesson-nav-prev {
  float: left;
}

.lesson-nav .lesson-nav-next {
  float: right;
}

.breadcrumb {
  background-color: var(--colorCodeBg);
}

/* ---------- Content typography ---------- */

.content h1,
.content h2 {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 8px;
  margin-top: 40px;
}

.content h3,
.content h4 {
  margin-top: 30px;
}

.content img {
  max-width: 100%;
  height: auto;
  margin: 15px 0;
}

.content blockquote {
  border-left-color: var(--color3);
  font-size: 100%;
}

.content table {
  width: 100%;
}

.content dt {
  color: var(--color1);
}

/* ---------- Code ---------- */

code {
  background-color: var(--colorCodeBg);
  color: #bd4147;
  border: 1px solid var(--colorCodeBorder);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 90%;
}

pre {
  background-color: var(--colorCodeBg);
  border-color: var(--colorCodeBorder);
  font-size: 95%;
}

pre code {
  background-color: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  font-size: 100%;
}

kbd {
  font-size: 90%;
}

/* ---------- Staff directory ---------- */

.staff-grid {
  margin-top: 20px;
}

.staff-grid .staff-member {
  text-align: center;
  margin-bottom: 35px;
}

.staff-grid .staff-member img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  margin-bottom: 12px;
}

.staff-grid .staff-member h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.staff-grid .staff-member p {
  margin: 0;
  color: #777777;
  font-size: 100%;
}

.staff-photos img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

/* ---------- Topic listing ---------- */

.topic-list .topic-entry {
  margin-bottom: 35px;
}

.topic-list .topic-entry>p {
  color: #555555;
}