@font-face {
    font-family: 'FranklinITCPro';
    src: url('fonts/franklinitcpro-thin.woff') format('woff'),
        url('fonts/franklinitcpro-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinITCPro';
    src: url('fonts/franklinitcpro-light.woff') format('woff'),
        url('fonts/franklinitcpro-light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinITCPro';
    src: url('fonts/franklinitcpro-medium.woff') format('woff'),
        url('fonts/franklinitcpro-medium.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

#contentBox {
    margin-bottom: 2em;
}

#contentBox img.publication-helper {
    border: 1px solid gray;
    box-shadow: none;
    float: left;
    margin-right: 1em;
    max-width: 65px;
}

#contentBox p.post-image {
    clear: both;
    padding-top: 1em;
}

/*

   Bootstrap overrides.

*/
body {
    font-family: 'FranklinITCPro',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2 {
    font-weight: 700;
}

.container > .row > .col-sm-2.logo-container {
    float: right;
    padding-left: 0;
}

@media (min-width:768px) {
    .container > .row > .col-sm-2.logo-container {
        float: left;
    }
}

.container > .row > [class*="col-"] {
    padding-left: 15px;
}

@media (min-width:768px) {
    .container > .row > [class*="col-"] {
        padding-left: 3em;
    }
}

blockquote {
    font-size: 14px;
}

blockquote p {
    font-weight: 300;
    line-height: 1.25;
}

/*

   Header styles.

*/
#banner-left img {
    margin: 1ex 0 0 1.5ex;
    width: 48px;
}

@media (min-width:768px) {
    #banner-left img {
        margin: 1em 0;
        width: 100%;
    }
}

#banner-right {
    margin-bottom: 1em;
}

.fullname {
    font-size: 24px;
    margin-top: 1ex;
    margin-bottom: 0;
}

@media (min-width:768px) {
    .fullname {
        font-size: 36px;
    }
}

/*

   Sidebar styles (outside of what Bootstrap provides).

*/
#sidebar, nav.sidebar {
    margin-left: 1em;
    margin-right: 1em;
    padding: 1ex 0;
}

@media (min-width:768px) {
    #sidebar, nav.sidebar {
        margin-left: 0;
        margin-right: 0;
    }
}

nav.sidebar .nav-pills.nav-stacked,
#sidebar .nav-pills.nav-stacked {
    margin-bottom: 1em;
    padding-left: 15px;
    padding-right: 15px;
}

nav.sidebar .nav-pills.nav-stacked:last-child,
#sidebar .nav-pills.nav-stacked:last-child {
    margin-bottom: 0.25em;
}

/* Deeper nav levels get tweaked margin/padding. */
nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked {
    padding: 0 5px;
}

nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked {
    font-size: 90%;
}

/* We go down 3 levels because that's as far as our menus go. */
nav.sidebar .nav-pills.nav-stacked > li > a,
#sidebar .nav-pills.nav-stacked > li > a {
    background-image: none;
    background-repeat: no-repeat;
    background-position: 7px 12px;
    margin-left: -15px;
    margin-right: -15px;
}

nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 18px;
}

nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a {
    background-position-x: 12px;
    margin-left: -25px;
    margin-right: -25px;
    padding-left: 23px;
}

nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li > a {
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 30px;
}

nav.sidebar .nav-pills.nav-stacked > li.expanded > a,
        nav.sidebar .nav-pills.nav-stacked > li.expanded > a:hover,
#sidebar .nav-pills.nav-stacked > li.expanded > a,
        #sidebar .nav-pills.nav-stacked > li.expanded > a:hover {
    background-image: url(../images/expanded.png);
}

nav.sidebar .nav-pills.nav-stacked > li.collapsed > a,
        nav.sidebar .nav-pills.nav-stacked > li.collapsed > a:hover,
#sidebar .nav-pills.nav-stacked > li.collapsed > a,
        #sidebar .nav-pills.nav-stacked > li.collapsed > a:hover {
    background-image: url(../images/collapsed.png);
    background-position: 9px 11px;
}

nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li.collapsed > a,
        nav.sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li.collapsed > a:hover,
#sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li.collapsed > a,
        #sidebar > .nav-pills.nav-stacked .nav-pills.nav-stacked .nav-pills.nav-stacked > li.collapsed > a:hover {
    background-position: 15px 10px;
}

/* Grandfathered from Bootstrap 2.x */
nav.sidebar .nav-header,
#sidebar .nav-header {
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
    text-transform: uppercase;
}

nav.sidebar .nav li + .nav-header,
#sidebar .nav li + .nav-header {
    margin-top: 0;
}

nav.sidebar .nav-pills > li > a,
#sidebar .nav-pills > li > a {
    border-radius: 0;
    padding: 5px 15px 3px;
}

nav.sidebar .btn,
#sidebar .btn {
    margin: 0.5ex 0;
}

/*

   Content area styles.

*/
/* Standardize how images are presented. */
#contentBox img {
    box-shadow: 0 4px 8px gray;
    margin: 0.5ex;
}

/* List spacing. */
#contentBox ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#contentBox ol, #contentBox li {
    margin-bottom: 0.25em;
}

#contentBox li ul {
    margin-top: 1ex;
}

/* Paragraph spacing. */
#contentBox p {
    font-size: inherit;
    margin: 0.75em 0
}

/* Due to APT limitations, we "reuse" dl/dt/dd elements to show
   announcements.  Thus we have the following... */
#contentBox > .section > dl {
    background-color: #fdd;
    border-radius: 15px;
    box-shadow: inset 0 4px 8px #dbb;
    margin: 2em;
    padding: 1em;
}

#contentBox > .section > dl > dt {
    border-bottom: solid 1px #ecc;
    margin-bottom: 0.75em;
    padding-bottom: 0.5ex;
}

#contentBox > .section > dl > dd {
    margin: 0 10px 0 20px;
}

/* Primarily used to mark external links (anchor tags). */
a.externalLink, a.externalLink:link, a.externalLink:visited,
        a.externalLink:active, a.externalLink:hover {
    background: url(../images/external-gray.png) right center no-repeat;
    padding-right: 18px;
}

a.google, a.wp {
    background-repeat: no-repeat;
    background-position: center right;
}

/* Special badge for Google search links. */
a.google {
    padding-right: 26px; /* corresponds to image width */
    background-image: url(../images/google-link.png);
}

/* Special badge for Wikipedia search links. */
a.wp {
    padding-right: 26px; /* corresponds to image width */
    background-image: url(../images/wikipedia-link.png);
}

/* Formatting tricks for course page headings---necessary because APT
   does not do HTML/CSS pass-throughs. */
#contentBox > h2,
#contentBox > .section > h2 {
    text-align: center;
}

#contentBox > .section:first-child > h2 {
    font-size: 30px;
}

#contentBox > .section:nth-child(2) > h2 {
    font-size: 38px;
    margin: 0.25em 0;
}

#contentBox > .section:nth-child(3) > h2 {
    font-size: 23px;
}

/* One last formatting trick: markup for courses with co-instructors. */
#contentBox > .section:nth-child(4) > h2:first-child {
    font-size: 22px;
    font-weight: normal;
}
/* End of formatting tricks. */

#contentBox h3 {
    border-bottom: solid 1px #bbb;
    padding-bottom: 5px;
}

#contentBox h4 {
    border-bottom: solid 1px #ddd;
    margin-top: 1em;
    padding: 4px 4px 6px 0;
    text-align: right;
}

/* Holdovers from original Maven table styles. */
#contentBox table.bodyTable {
    margin: 1ex 0;
    width: 100%;
}

#contentBox table.bodyTable tr.a {
    background-color: #ddd;
}

#contentBox table.bodyTable tr.b {
    background-color: #eee;
}

#contentBox table.bodyTable th, #contentBox table.bodyTable td {
    padding: 1ex;
}

/*

   Footer styles.

*/
#footer {
    margin-top: 2.5em;
    margin-bottom: 2em;
    padding-left: 0;
}

.poweredBy {
    display: inline-block;
}

#contentBox blockquote {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

#contentBox blockquote > p {
    margin: 1em 0;
}

/*
   Visual aids.
*/
li.written, li.code, li.task {
    list-style: none;
    margin-left: -2rem;
}

li.written::before {
    content: "✏️ ";
}

li.code::before {
    content: "⌨️ ";
}

li.task::before {
    content: "⚙️ ";
}