styles.css

/* Styling for the header widget
----------------------------------------- */
body {
    font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cvt-module-banner__top a {
    color: var(--cvt-white);
}

.hwid-container {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;
    padding: 10px;*/
}

/*.hwid-column */
.hwid-title-column,
.hwid-wayfinding-col {
    /*flex-grow: 1;
    margin: 10px; ADD ME BACK? */
    padding: 0px;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* used for the left column */
.hwid-title-column {
    /*flex-basis: 100%;  Initial width of 100% for the first column */
    flex:1;
}

/* used for the right column */
.hwid-wayfinding-col {
    flex-basis: 60%;
    text-align: right;
}

@media (max-width: 769px) {
    .hwid-title-column,
    .hwid-wayfinding-col {
        flex-basis: 100%;
    }
}

.cvt-module-banner__below {
    background: var(--cvt-blue-lt);
    color: var(--cvt-black);
    padding: 0.5rem 1rem;
}

/* Define color variables
----------------------------------------- */
:root {
    --cvt-blue-dk: #00355f;
    --cvt-blue-md: #007DB1;
    --cvt-blue-lt: #a9d7eb;
    --cvt-blue-brt: #007bff;
    --cvt-gray-dk: #cccccc;
    --cvt-gray-md: #dddddd;
    --cvt-gray-lt: #f5f6f7;
    --cvt-gray-dkr: #606a71;
    --cvt-gray-dkt: #31363a;
    --cvt-orange-shib: #EE5135;
    --cvt-purple: purple;
    --cvt-green: #4bad83;
    --cvt-teal: #17a2b8;
    --cvt-text: #2e2f3e;
    --cvt-white: #ffffff;
    --cvt-black: #000000;
    --cvt-warning: rgb(250, 197, 162);
}


/* Define responsive breakpoints
----------------------------------------- */
:root {
    --cvt-breakpoint-xs: 0;
    --cvt-breakpoint-sm: 576px;
    --cvt-breakpoint-md: 768px;
    --cvt-breakpoint-lg: 992px;
    --cvt-breakpoint-xl: 1200px;
}


/* Background color classes 
----------------------------------------- */
.cvt-bg-blue-dk {
    background: var(--cvt-blue-dk);
}

.cvt-bg-blue-md {
    background: var(--cvt-blue-md);
}

.cvt-bg-gray-dk {
    background: var(--cvt-gray-dk);
}

.cvt-bg-gray-md {
    background: var(--cvt-gray-md);
}

.cvt-bg-gray-lt {
    background: var(--cvt-gray-lt);
}

.cvt-bg-orange {
    background: var(--cvt-orange-shib);
}


/* Reading content
----------------------------------------- */
/* Constrains the width to a good reading width */
.cvt-reading-content {
    color: var(--cvt-text);
    font-size: 1.2rem; 
    font-weight: 400; 
    line-height: 1.7; 
    max-width: 55rem; 
    margin: 0 auto 2rem 0;
}


/* Course banner
----------------------------------------- */
.cvt-course-banner {}

.cvt-course-banner__top {
    background: var(--cvt-gray-dk);
    padding: 1rem 2rem;
}

.cvt-course-banner__middle {
    background: var(--cvt-blue-dk);
    height: 1rem;
}

.cvt-course-banner__bottom {
    background: var(--cvt-blue-md);
    color: var(--cvt-white);
    padding: 4rem 2rem 1rem 2rem;
}

.cvt-course-banner__title {
    color: var(--cvt-white);
    font-size: 2.5rem;
    font-weight: 600;
}


/* Module banner
----------------------------------------- */
.cvt-module-banner {}

.cvt-module-banner__top {
    background: var(--cvt-blue-dk);
    color: var(--cvt-white);
    padding: 0.5rem 1rem;
}

.cvt-module-banner__bottom {
    background: var(--cvt-blue-md);
    color: var(--cvt-white);
    padding: 1rem;
}

.cvt-module-banner__title {
    color: var(--cvt-white);
    font-size: 2.5rem;
    font-weight: 600;
}


/* Module header
----------------------------------------- */
.cvt-module-header {
    background: var(--cvt-gray-lt);
    border-bottom: 2px solid var(--cvt-blue-md);
    color: var(--cvt-gray-dkr);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
}

.cvt-module-header__number,
.cvt-module-header__title
 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
    padding: 0.2rem 0.75rem;
}

.cvt-module-header__number {
    text-align: center;
}

.cvt-module-header__title {
    padding-left: 0;
}


/* Headings
----------------------------------------- */
.cvt-heading-1,
.cvt-heading-2,
.cvt-heading-3 {
    font-weight: 600 !important; 
    margin-top: 2rem !important;
}

.cvt-heading-1 {
    color: var(--cvt-blue-md);
    font-size: 2rem;
}

.cvt-heading-1 > .cvt-heading-icon {
    background: var(--cvt-blue-md);
    color: var(--cvt-blue-lt);
    display: inline-block; 
    font-weight: 600;
    padding: 0 0.75rem;
}

.cvt-heading-2 {
    color: var(--cvt-blue-dk);
    font-size: 1.75rem;
}

.cvt-heading-2 > .cvt-heading-icon {
    background: var(--cvt-blue-md);
    color: var(--cvt-blue-lt);
    display: inline-block; 
    font-weight: 600;
    padding: 0 0.75rem;
}

.cvt-heading-3 {
    font-size: 1.5rem;
}

.cvt-heading-important {
    color: var(--cvt-orange-shib);
}

.cvt-heading-important > .cvt-heading-icon {
    background: var(--cvt-orange-shib);
    color: var(--cvt-white);
}

/* Lead paragraph
----------------------------------------- */
.cvt-lead {
    font-size: 1.5rem;
    font-weight: 300;
}


/* Buttons
----------------------------------------- */
.cvt-btn {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem; 
    line-height: 1.5;
    padding: 0.375rem 0.75rem; 
    text-align: center;
    text-decoration: none !important;
    transition: 
        color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
    vertical-align: middle;
}

.cvt-btn:hover {
    background: brightness(0.6);
}

.cvt-btn-block {
    display: block;
}

.cvt-btn-gray-dkr {
    background: var(--cvt-gray-dkt);
    border-color: var(--cvt-gray-dkt);
    color: var(--cvt-white);
}

.cvt-btn-gray-dkt {
    background: var(--cvt-gray-dkt);
    border-color: var(--cvt-gray-dkt);
    color: var(--cvt-white);
}

.cvt-btn-blue-md {
    background: var(--cvt-blue-md);
    border-color: var(--cvt-blue-md);
    color: var(--cvt-white);
}

.cvt-btn-blue-dk {
    background: var(--cvt-blue-dk);
    border-color: var(--cvt-blue-dk);
    color: var(--cvt-white);
}


/* Card
----------------------------------------- */
.cvt-card {
    background-color: var(--cvt-white); 
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0.25rem;
    color: rgba(0,0,0,0.8);
}

.cvt-card-body {
    padding: 1.25rem;
}

.cvt-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.cvt-card-gray {
    background-color: var(--cvt-gray-dkr);
    color: var(--cvt-white);
}

.cvt-card-gray-lt,
.cvt-card-example {
    background-color: var(--cvt-gray-lt);
}

.cvt-card-blue {
    background-color: var(--cvt-blue-md);
    color: var(--cvt-white);
}

.cvt-card-example,
.cvt-card-info,
.cvt-card-warning {
    border-width: 2px;
}

.cvt-card-info {
    background-color: var(--cvt-blue-lt);
    
}

.cvt-card-warning {
    background-color: var(--cvt-warning);
}


/* Course outcomes
----------------------------------------- */
.cvt-outcome__icon {
    color: var(--cvt-blue-md);
    float: left; 
    font-size: 1.4rem;
    margin-right: 1rem; 
}

.cvt-outcome__text {
    margin-left: 2rem;
}


/* Instructor cards
----------------------------------------- */
.cvt-instructors {
    margin-bottom: 2rem;
}

.cvt-instructor {
    background: var(--cvt-gray-lt);
    text-align: center;
}

.cvt-instructor__top {
    background: var(--cvt-gray-dk);
    height: 90px;
}

.cvt-instructor__bottom {
    padding: 1rem;
}

.cvt-instructor__avatar {
    border: 2px solid var(--cvt-white);
    border-radius: 50%;
    display: inline-block;
    height: 90px;
    width: 90px;
    position: relative;
    top: 20px;
}

.cvt-instructor__avatar > img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
}

.cvt-instructor__name {
    font-size: 1.25rem; 
    font-weight: 300;
}

.cvt-instructor__email {
    font-size: 0.9rem;
}

.cvt-office-hours {
    font-size: 0.9rem; 
}

.cvt-office-hours__title {
    font-size: 0.9rem;
    font-weight: 600; 
    margin-top: 1rem;
}

.cvt-office-hours__day {}

.cvt-office-hours__time,
.cvt-office-hours__tz {
    display: inline-block;
    margin: 0 0.1rem;
}

.cvt-live-sessions {
    background: var(--cvt-gray-md);
    font-size: 1rem;
    padding: 1rem;
    text-align: center;
}

.cvt-live-sessions__title {
    font-size: 1rem;
    font-weight: 600; 
    margin-top: 1rem;
}

.cvt-live-sessions__day,
.cvt-live-sessions__time,
.cvt-live-sessions__tz {
    display: inline-block;
    margin: 0 0.1rem;
}


/* Course modules
----------------------------------------- */
.cvt-modules {}

.cvt-module {}

.cvt-module__btn {}

.cvt-module__icon-wrapper {
    margin-top: 1rem;
    text-align: center;
}

.cvt-module__icon-wrapper > img {
    width: 50%;
}

.cvt-module__title {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 0;
    text-align: center;
}


/* Course activities
----------------------------------------- */
.cvt-activities {}

.cvt-activity {
    background: var(--cvt-gray-lt);
    display: grid;
    grid-template-columns: 9rem 1fr;
    grid-template-rows: auto;
    line-height: 40px;
    margin-bottom: 0.5rem;
}

.cvt-activity__type {
    background: var(--cvt-gray-dk);
    border-right: 10px solid var(--cvt-gray-dkr);
    padding: 0.5rem 1rem;
}

.cvt-activity__icon {
    background: var(--cvt-gray-lt);
    display: inline-block; 
    margin-right: 0.5rem;
    padding: 0.25rem;
}

.cvt-activity__label {}

.cvt-activity__title {
    padding: 0.5rem 1rem;
}

.cvt-activity__watch .cvt-activity__type {
    border-right-color: var(--cvt-purple);
}

.cvt-activity__watch .cvt-activity__icon {
    color: var(--cvt-purple);
}

.cvt-activity__read .cvt-activity__type {
    border-right-color: var(--cvt-blue-brt);
}

.cvt-activity__read .cvt-activity__icon {
    color: var(--cvt-blue-brt);
}

.cvt-activity__do .cvt-activity__type {
    border-right-color: var(--cvt-teal);
}

.cvt-activity__do .cvt-activity__icon {
    color: var(--cvt-teal);
}

.cvt-activity__review .cvt-activity__type {
    border-right-color: var(--cvt-green);
}

.cvt-activity__review .cvt-activity__icon {
    color: var(--cvt-green);
}


/* Video
----------------------------------------- */
/* Allows for a responsive video container */
.cvt-video {
    background: var(--cvt-gray-dkt);
    margin: 3rem 0;
    padding: 1rem;
    text-align: center;
}

.cvt-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}


/* Image with caption
----------------------------------------- */
.cvt-image-with-caption {
    margin: 4rem 0;
    text-align: center;
}

.cvt-image-with-caption__image {}

.cvt-image-with-caption__caption {}


/* Inline code
----------------------------------------- */
p code,
li code {
    background: var(--cvt-gray-lt);
    border: 1px solid var(--cvt-gray-md);
    border-radius: 0.25rem;
    color: var(--cvt-orange-shib);
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 .3rem;
}


/* Code blocks
----------------------------------------- */
/* Using highlight.js, see included styles below */
pre {
    background: #282c34;;
    border: none;
    margin: 2rem 0;
}

pre > code {
    border: none;
    font-size: 1rem;
    padding: 1rem;
}

.cvt-code-hl {
    background: #111111;
    border: 1px solid var(--cvt-white);
}


/* Styled table
----------------------------------------- */
.cvt-table {
    border-bottom: 2px solid var(--cvt-blue-md);
    margin: 2rem 0;
    width: 100%; 
}

.cvt-table caption {
    font-size: 0.85rem;
    font-style: italic;
    text-align: left;
}

.cvt-table thead tr {
    background: var(--cvt-blue-md);
    color: var(--cvt-white);
    text-transform: uppercase;
}

.cvt-table tbody tr {
    border-bottom: 1px solid var(--cvt-gray-dk);
}

.cvt-table tbody tr td {
    padding: 1rem !important;
}


/* Instructions list
----------------------------------------- */
/* Formats an ordered list, for use on assignment instructions */

.cvt-instructions-list {
    counter-reset: li; /* Initiate a counter */
    margin-left: 0;
    padding-left: 0;
}

.cvt-instructions-list > li {
    list-style: none;
    position: relative;
    background: var(--cvt-gray-lt);
    border-radius: 0.25rem;
    border-bottom: 1px solid var(--cvt-gray-md);
    margin-bottom: 0.5em;
    padding: 1rem 1rem 1rem 4.5rem;
}

.cvt-instructions-list > li:before {
    content: counter(li); /* Use the counter as content */
    counter-increment: li; /* Increment the counter by 1 */
    /* Position and style the number */
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 2.25em;
    margin-right: 8px;
    padding: 4px;
    background: var(--cvt-white);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0.25rem;
    text-align: center;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
}

.cvt-instructions-list ol,
.cvt-instructions-list ul {
    margin-top: 1rem;
}

.cvt-instructions-list li code {
    background: var(--cvt-white);
}



/* Responsive grid
----------------------------------------- */
@media (min-width: 0px) {

    .cvt-grid-2,
    .cvt-grid-3,
    .cvt-grid-4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
    }

    .cvt-grid-gap-1 {
        grid-gap: 1rem;
    }
    
    .cvt-grid-gap-2 {
        grid-gap: 2rem;
    }
    
    .cvt-grid-gap-3 {
        grid-gap: 3rem;
    }
    
    .cvt-grid-gap-4 {
        grid-gap: 4rem;
    }
    
    .cvt-grid-gap-5 {
        grid-gap: 5rem;
    }
}

@media (min-width: 768px) {
    .cvt-grid-2,
    .cvt-grid-3,
    .cvt-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .cvt-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .cvt-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Highlighjs styles
----------------------------------------- */
/*

Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b

*/

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #abb2bf;
    background: #282c34 !important;
  }
  
  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
    font-style: italic;
  }
  
  .hljs-doctag,
  .hljs-keyword,
  .hljs-formula {
    color: #c678dd;
  }
  
  .hljs-section,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-deletion,
  .hljs-subst {
    color: #e06c75;
  }
  
  .hljs-literal {
    color: #56b6c2;
  }
  
  .hljs-string,
  .hljs-regexp,
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta-string {
    color: #98c379;
  }
  
  .hljs-built_in,
  .hljs-class .hljs-title {
    color: #e6c07b;
  }
  
  .hljs-attr,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-type,
  .hljs-selector-class,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-number {
    color: #d19a66;
  }
  
  .hljs-symbol,
  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-title {
    color: #61aeee;
  }
  
  .hljs-emphasis {
    font-style: italic;
  }
  
  .hljs-strong {
    font-weight: bold;
  }
  
  .hljs-link {
    text-decoration: underline;
  }
  /* end highlightjs styles */