/**
 * Syntax highlighting styles
 */
.highlight {
    @extend %vertical-rhythm;

    .c     { color: #998; font-style: italic } // Comment
    .err   { color: #a61717; background-color: #e3d2d2 } // Error
    .k     { font-weight: bold } // Keyword
    .o     { font-weight: bold } // Operator
    .cm    { color: #998; font-style: italic } // Comment.Multiline
    .cp    { color: #999; font-weight: bold } // Comment.Preproc
    .c1    { color: #998; font-style: italic } // Comment.Single
    .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
    .gd    { color: #000; background-color: #fdd } // Generic.Deleted
    .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
    .ge    { font-style: italic } // Generic.Emph
    .gr    { color: #a00 } // Generic.Error
    .gh    { color: #999 } // Generic.Heading
    .gi    { color: #000; background-color: #dfd } // Generic.Inserted
    .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
    .go    { color: #888 } // Generic.Output
    .gp    { color: #555 } // Generic.Prompt
    .gs    { font-weight: bold } // Generic.Strong
    .gu    { color: #aaa } // Generic.Subheading
    .gt    { color: #a00 } // Generic.Traceback
    .kc    { font-weight: bold } // Keyword.Constant
    .kd    { font-weight: bold } // Keyword.Declaration
    .kp    { font-weight: bold } // Keyword.Pseudo
    .kr    { font-weight: bold } // Keyword.Reserved
    .kt    { color: #458; font-weight: bold } // Keyword.Type
    .m     { color: #099 } // Literal.Number
    .s     { color: #d14 } // Literal.String
    .na    { color: #008080 } // Name.Attribute
    .nb    { color: #0086B3 } // Name.Builtin
    .nc    { color: #458; font-weight: bold } // Name.Class
    .no    { color: #008080 } // Name.Constant
    .ni    { color: #800080 } // Name.Entity
    .ne    { color: #900; font-weight: bold } // Name.Exception
    .nf    { color: #900; font-weight: bold } // Name.Function
    .nn    { color: #555 } // Name.Namespace
    .nt    { color: #000080 } // Name.Tag
    .nv    { color: #008080 } // Name.Variable
    .ow    { font-weight: bold } // Operator.Word
    .w     { color: #bbb } // Text.Whitespace
    .mf    { color: #099 } // Literal.Number.Float
    .mh    { color: #099 } // Literal.Number.Hex
    .mi    { color: #099 } // Literal.Number.Integer
    .mo    { color: #099 } // Literal.Number.Oct
    .sb    { color: #d14 } // Literal.String.Backtick
    .sc    { color: #d14 } // Literal.String.Char
    .sd    { color: #d14 } // Literal.String.Doc
    .s2    { color: #d14 } // Literal.String.Double
    .se    { color: #d14 } // Literal.String.Escape
    .sh    { color: #d14 } // Literal.String.Heredoc
    .si    { color: #d14 } // Literal.String.Interpol
    .sx    { color: #d14 } // Literal.String.Other
    .sr    { color: #009926 } // Literal.String.Regex
    .s1    { color: #d14 } // Literal.String.Single
    .ss    { color: #990073 } // Literal.String.Symbol
    .bp    { color: #999 } // Name.Builtin.Pseudo
    .vc    { color: #008080 } // Name.Variable.Class
    .vg    { color: #008080 } // Name.Variable.Global
    .vi    { color: #008080 } // Name.Variable.Instance
    .il    { color: #099 } // Literal.Number.Integer.Long
}

.figure-caption {
    font-style: italic; /* Make the text italic */
    text-align: center; /* Center the caption */
    font-size: 0.9em; /* Slightly smaller font size than the body text */
    color: #555; /* A lighter shade of black for the caption text */
    margin-top: 0.5em; /* Add some space above the caption */
    margin-bottom: 5em; /* Add some space below the caption */
  }

/**
 * Site header
 */
.site-header {
    border-top: 1px solid $grey-color-light;
    border-bottom: 1px solid $grey-color-light;
    min-height: 140px;
    background-color: white;
    margin-top: -50px;
    margin-left: 30px;
    padding-top: -50px;

    // Positioning context for the mobile navigation icon
    position: relative;
}

.site-title {
    font-size: 26px;
    letter-spacing: -1px;
    margin-bottom: 10px;
    float: left;
    color: #ffffff;
    text-decoration: none;

    &,
    &:visited {
        color: $grey-color-dark;
    }
}


.site-nav {

    clear:both;
    float:left;


    .menu-icon {
        display: none;
    }

    .page-link {
        color: $text-color;
        line-height: 2.5;//$base-line-height;
        font-weight: 500;
        text-decoration: none;
        font-size: 1em;

        // Gaps between nav items, but not on the first one
        &:not(:first-child) {
            margin-right: 20px;
        }

        &:hover{
          color: #000000;
          border-bottom: solid 1px #8f8f8f;
          padding-bottom: 5px;
        }
    }


    @include media-query($on-palm) {
        position: absolute;
        top: 60px;
        right: 30px;
        background-color: $background-color;
        border: 1px solid $grey-color-light;
        border-radius: 5px;
        text-align: right;

        .menu-icon {
            display: block;
            float: right;
            width: 36px;
            height: 26px;
            line-height: 0;
            padding-top: 10px;
            text-align: center;

            > svg {
                width: 18px;
                height: 15px;

                path {
                    fill: $grey-color-dark;
                }
            }
        }

        .trigger {
            clear: both;
            display: none;
        }

        &:hover .trigger {
            display: block;
            padding-bottom: 5px;
        }

        .page-link {
            display: block;
            padding: 5px 10px;
        }
    }
}



/**
 * Site footer
 */
.site-footer {
    border-top: 1px solid $grey-color-light;
    padding: $spacing-unit 0;
    background-color: $grey-color-dark;
}

.footer-heading {
    font-size: 18px;
    margin-bottom: $spacing-unit / 2;
}

.contact-list,
.social-media-list {
    list-style: none;
    margin-left: 0;
}

.social-media-list a{
    color: white;
}

.footer-col-wrapper {
    font-size: 12px;
    color: white;
    margin-left: -$spacing-unit / 2;
    @extend %clearfix;
}

.footer-col {
    float: left;
    margin-bottom: $spacing-unit / 2;
    padding-left: $spacing-unit / 2;
}

.footer-col-1 {
    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
    width:         calc(35% - (#{$spacing-unit} / 2));
}

.footer-col-2 {
    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
    width:         calc(20% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
    width:         calc(45% - (#{$spacing-unit} / 2));
}

.footer-col-4 {
    width: -webkit-calc(30% - (#{$spacing-unit} / 2));
    width:         calc(30% - (#{$spacing-unit} / 2));
}

.footer-col-5 {
    width: -webkit-calc(10% - (#{$spacing-unit} / 2));
    width:         calc(10% - (#{$spacing-unit} / 2));
}

.copyright-col {
    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
    width:         calc(100% - (#{$spacing-unit} / 2));
    text-align:center;
    color: white;
}

.social-col {
    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
    width:         calc(100% - (#{$spacing-unit} / 2));
    text-align:center;
}

.social-col .fa {
  margin-left: 10px;
  color: white;
  &:hover{
    color: $grey-color;
  }
}

.social-col .ai {
  margin-left: 10px;
  color: white;
  &:hover{
    color: $grey-color;
  }
}


@include media-query($on-laptop) {
    .footer-col-1,
    .footer-col-2 {
        width: -webkit-calc(50% - (#{$spacing-unit} / 2));
        width:         calc(50% - (#{$spacing-unit} / 2));
    }

    .footer-col-3 {
        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
        width:         calc(100% - (#{$spacing-unit} / 2));
    }
    .footer-col-4 {
        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
        width:         calc(100% - (#{$spacing-unit} / 2));
    }
}

@include media-query($on-palm) {
    .footer-col {
        float: none;
        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
        width:         calc(100% - (#{$spacing-unit} / 2));
    }
}



/**
 * Page content
 */
.page-content {
    padding: $spacing-unit 0;
    min-height: 600px;
}

.page-heading {
    font-size: 20px;
}

.post-list {
    margin-left: 0;
    list-style: none;

    > li {
        margin-bottom: $spacing-unit;
    }
}

.post-meta {
    font-size: $small-font-size;
    color: $grey-color;
}

.post-link {
    display: block;
    font-size: 24px;
}



/**
 * Posts
 */
.post-header {
    margin-bottom: $spacing-unit;
}

.post-title{
    letter-spacing: -1px;
    line-height: 1.4;
    color: #000000;
    text-align: center;
    margin: 0 auto;
    display: block;
    @include media-query($on-laptop) {
        font-size: 36px;
    }
}

.post-content {
    margin-bottom: $spacing-unit;

    h2 {
        font-size: 32px;

        @include media-query($on-laptop) {
            font-size: 28px;
        }
    }

    h3 {
        font-size: 26px;

        @include media-query($on-laptop) {
            font-size: 22px;
        }
    }

    h4 {
        font-size: 20px;

        @include media-query($on-laptop) {
            font-size: 18px;
        }
    }
}

.regular-image {
    max-width: 70%;
}

.center {
    display: flex;
    justify-content: center;
    }

.center-image {
    margin: 0 auto;
    display: block;
}

.center-image-30 {
    margin: 0 auto;
    display: block;
    max-width: 30%;
}

.image-10 { max-width: 10%; }

.image-20 { max-width: 20%; }

.image-30 { max-width: 30%; }

.image-35 { max-width: 35%; }

.image-40 { max-width: 40%; }

.image-50 { max-width: 50%; }

.image-60 { max-width: 60%; }

.image-70 { max-width: 70%; }

.image-80 { max-width: 80%; }

.image-90 { max-width: 90%; }


.right-image {
    float: right;
    padding: 1em 1em 1em 1em;
    display: block;
    clear:both;
}

.right-image-aligned-with-shadow {
    float: right;
    margin: 0 2em 2em 4em;
    max-width: 30%;
    clear:both;
}

.right-image-30 {
    float: right;
    padding: 1em 1em 1em 1em;
    display: block;
    max-width: 30%;
    clear:both;
}

.right-image-40 {
    float: right;
    padding: 1em 1em 1em 1em;
    display: block;
    max-width: 40%;
}

.left-image-30 {
    float: left;
    margin: 2em 2em 2em 0em;
    max-width: 30%;
}

.left-image-shadow-30 {
    float: left;
    margin: 2em 2em 2em 0em;
    max-width: 30%;
    box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    clear:both;
}

.right-image-shadow-30 {
    float: right;
    margin: 0 2em 2em 4em;
    max-width: 30%;
    box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    clear:both;
}

.stack-image-shadow-30 {
    float: left;
    margin: 0 2em 2em 4em;
    max-width: 30%;
    box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
}

.stack-image-shadow-20 {
    float: left;
    margin: 0 2em 2em 4em;
    max-width: 20%;
    box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75);
}


.image-attribution {
    font-size: 14px;
}





.gsc{
      line-height: 1em;
}

/**
.gsc-input {
    width: 15%;
    margin: 3px auto;
}
 */

.search_form {
    width: 100%;
    margin: -23px auto;
    min-height: 42px;
    line-height: 1em;

}

#cse .gsc-clear-button {
    width: 15px;
}

.gsc-branding {
    display: none;
}

.cse input.gsc-input, input.gsc-input {
      background-image:url(/images/logos/white.gif) !important;
      background-repeat:no-repeat;
      background-color:#fff;
}



/**
 * Link placement and hover behavior.
 */

.anchorjs-link {
  color: inherit !important;
  text-decoration: none !important; // do not underline
}

@media (max-width: 768px) {
  // do not display AnchorJS icon on less than 768px view point
  .anchorjs-link {
    display: none;
  }
}

*:hover > .anchorjs-link {
  opacity: .75;
  // To fade links as they appear, change transition-property from 'color' to 'all'
  transition: color .16s linear;
}

*:hover > .anchorjs-link:hover,
.anchorjs-link:focus {
  text-decoration: none !important; // do not underline
  opacity: 1;
}



.banner {
    background-image: url("/images/banner.jpg");
    background-size: 150%;
}



.post-content .post-date {
  display: block;
  font-size: 0.8em;
  padding-bottom: 0.3em;
  padding-top: 2em;
  color: $grey-color;
}

.posts-by-year ul {
  list-style: none;
  padding: 0;
}

.post-description {
  display: block;
  padding-top: 0.7em;
  font-size: 0.7em;
  line-height: 1.5em;
}


.whatsnext{
    font-size: 0.8em;
}

.whatsnext li{
    margin: 0 0 7px 0;
}


.boxed {
  border: 1px solid black;
  padding-top: 2em;
  padding-right: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
}


// VIDEO TABLE

.video-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.video-table thead tr {
    background-color: #C5050D;
    color: #ffffff;
    text-align: left;
}

.video-table th,
.video-table td {
    padding: 12px 15px;
}

.video-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.video-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.video-table tbody tr:last-of-type {
    border-bottom: 2px solid #C5050D;
}

.video-table tbody tr.active-row {
    font-weight: bold;
    color: #C5050D;
}



/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

h1 {
font-size: 2.5em;
padding: 1.5em 0 0 0;
}

h2 {
font-size: 2.0em;
padding: 1em 0 0 0;
}

h3 {
font-size: 1.5em;
padding: 0.5em 0 0 0;
}

h4 {
font-size: 1.2em;
padding: 0.5em 0 0 0;
}


/**
 * Basic styling
 */
body {
    font-family: $base-font-family;
    font-size: $base-font-size;
    line-height: $base-line-height;
    font-weight: 400;
    color: $text-color;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
}



/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
    margin-bottom: $spacing-unit / 2;
}



/**
 * Images
 */
img {
    max-width: 100%;
    vertical-align: middle;
}



/**
 * Figures
 */
figure > img {
    display: block;
}

figcaption {
    font-size: $small-font-size;
    margin-bottom: 5em;
}



/**
 * Lists
 */
ul, ol {
    margin-left: $spacing-unit;
}

li {
    > ul,
    > ol {
         margin-bottom: 0;
    }
}



/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}



/**
 * Links
 */
a {
    color: $brand-color;
    text-decoration: none;

    &:visited {
        color: darken($brand-color, 0%);
    }

    &:hover {
        color: $text-color;
        text-decoration: underline;
    }
}



/**
 * Blockquotes
 */

/**
blockquote {
    color: $grey-color;
    border-left: 4px solid $grey-color-light;
    padding-left: $spacing-unit / 2;
    font-size: 1em;
    letter-spacing: -1px;
    font-style: italic;

    > :last-child {
        margin-bottom: 0;
    }
}
*/
blockquote {
    margin: 1em 0;
    padding: 0 0 0 1em;
    border: 1px solid #383838;
    border-width: 0 0 0 1px;
    font-style: normal;
    color: black;
    font-size: 90%;
    color: $grey-color-dark;
}


/**
 * Code formatting
 */
pre,
code {


}



code {
    padding: 0.5px 2px;
    color: #be616a;
    font-size: 90%;
}

pre {
    font-size: 90%;
    border: 1px solid #ffffff;
    background: #f9f9f9;
    border-radius: 3px;
    border-width: 1px 1px 1px 1px;
    padding: 8px 12px;
    overflow-x: scroll;

    > code {
        border: 0;
        padding-right: 0;
        padding-left: 0;
        color: #515151;
    }
}



/**
 * Wrapper
 */
.wrapper {
    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
    max-width:         calc(800px - (#{$spacing-unit} * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: $spacing-unit;
    padding-left: $spacing-unit;
    @extend %clearfix;

    @include media-query($on-laptop) {
        max-width: -webkit-calc(800px - (#{$spacing-unit}));
        max-width:         calc(800px - (#{$spacing-unit}));
        padding-right: $spacing-unit / 2;
        padding-left: $spacing-unit / 2;
    }
}



/**
 * Clearfix
 */
%clearfix {

    &:after {
        content: "";
        display: table;
        clear: both;
    }
}



/**
 * Icons
 */
.icon {

    > svg {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        path {
            fill: $grey-color;
        }
    }
}

.cleantable1 {
  th, td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
  }
  padding: 15px;
}

// Hover for anchor links
h1:hover a, h2:hover a, h3:hover a,
h4:hover a, h5:hover a, h6:hover a {
  opacity: 1;
}
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  opacity: 0;
}
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";



// Our variables
$base-font-family: Helvetica, Arial, sans-serif;
$base-font-size:   16px;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5; // change back to 1.5 for normal behavior

$spacing-unit:     30px;

$text-color:       #111;
$background-color: #fdfdfd;
$brand-color:      #0479a8; //uw-blue

$grey-color:       #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark:  darken($grey-color, 25%);

$on-palm:          0px; // change back to 600px for normal behavior
$on-laptop:        0px; // change back to 800px for normal behavior



// Using media queries with like this:
// @include media-query($palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }
@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}



// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting"
;

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

h1 { font-size: 2.5em; padding: 1.5em 0 0 0; }

h2 { font-size: 2.0em; padding: 1em 0 0 0; }

h3 { font-size: 1.5em; padding: 0.5em 0 0 0; }

h4 { font-size: 1.2em; padding: 0.5em 0 0 0; }

/** Basic styling */
body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; color: #111; background-color: #ffffff; -webkit-text-size-adjust: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #0479a8; text-decoration: none; }

a:visited { color: #0479a8; }

a:hover { color: #111; text-decoration: underline; }

/** Blockquotes */
/** blockquote { color: $grey-color; border-left: 4px solid $grey-color-light; padding-left: $spacing-unit / 2; font-size: 1em; letter-spacing: -1px; font-style: italic; > :last-child { margin-bottom: 0; } } */
blockquote { margin: 1em 0; padding: 0 0 0 1em; border: 1px solid #383838; border-width: 0 0 0 1px; font-style: normal; color: black; font-size: 90%; color: #424242; }

/** Code formatting */
code { padding: 0.5px 2px; color: #be616a; font-size: 90%; }

pre { font-size: 90%; border: 1px solid #ffffff; background: #f9f9f9; border-radius: 3px; border-width: 1px 1px 1px 1px; padding: 8px 12px; overflow-x: scroll; }

pre > code { border: 0; padding-right: 0; padding-left: 0; color: #515151; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }

@media screen and (max-width: 0px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.footer-col-wrapper:after, .wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.icon > svg path { fill: #828282; }

.cleantable1 { padding: 15px; }

.cleantable1 th, .cleantable1 td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; }

h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { opacity: 1; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { opacity: 0; }

/** Site header */
.site-header { border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; min-height: 140px; background-color: white; margin-top: -50px; margin-left: 30px; padding-top: -50px; position: relative; }

.site-title { font-size: 26px; letter-spacing: -1px; margin-bottom: 10px; float: left; color: #ffffff; text-decoration: none; }

.site-title, .site-title:visited { color: #424242; }

.site-nav { clear: both; float: left; }

.site-nav .menu-icon { display: none; }

.site-nav .page-link { color: #111; line-height: 2.5; font-weight: 500; text-decoration: none; font-size: 1em; }

.site-nav .page-link:not(:first-child) { margin-right: 20px; }

.site-nav .page-link:hover { color: #000000; border-bottom: solid 1px #8f8f8f; padding-bottom: 5px; }

@media screen and (max-width: 0px) { .site-nav { position: absolute; top: 60px; right: 30px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon > svg { width: 18px; height: 15px; } .site-nav .menu-icon > svg path { fill: #424242; } .site-nav .trigger { clear: both; display: none; } .site-nav:hover .trigger { display: block; padding-bottom: 5px; } .site-nav .page-link { display: block; padding: 5px 10px; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; background-color: #424242; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.social-media-list a { color: white; }

.footer-col-wrapper { font-size: 12px; color: white; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }

.footer-col-4 { width: -webkit-calc(30% - (30px / 2)); width: calc(30% - (30px / 2)); }

.footer-col-5 { width: -webkit-calc(10% - (30px / 2)); width: calc(10% - (30px / 2)); }

.copyright-col { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); text-align: center; color: white; }

.social-col { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); text-align: center; }

.social-col .fa { margin-left: 10px; color: white; }

.social-col .fa:hover { color: #828282; }

.social-col .ai { margin-left: 10px; color: white; }

.social-col .ai:hover { color: #828282; }

.rss a { color: black; }

.rss a:hover { color: #828282; }

@media screen and (max-width: 0px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } .footer-col-4 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

@media screen and (max-width: 0px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

/** Page content */
.page-content { padding: 30px 0; min-height: 600px; }

.page-heading { font-size: 20px; }

.post-list { margin-left: 0; list-style: none; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { letter-spacing: -1px; line-height: 1.4; color: #000000; text-align: center; margin: 0 auto; display: block; }

@media screen and (max-width: 0px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }

.post-content h2 { font-size: 32px; }

@media screen and (max-width: 0px) { .post-content h2 { font-size: 28px; } }

.post-content h3 { font-size: 26px; }

@media screen and (max-width: 0px) { .post-content h3 { font-size: 22px; } }

.post-content h4 { font-size: 20px; }

@media screen and (max-width: 0px) { .post-content h4 { font-size: 18px; } }

.regular-image { max-width: 70%; }

.center { display: flex; justify-content: center; }

.center-image { margin: 0 auto; display: block; }

.center-image-30 { margin: 0 auto; display: block; max-width: 30%; }

.image-30 { max-width: 30%; }

.image-40 { max-width: 40%; }

.image-50 { max-width: 50%; }

.image-60 { max-width: 60%; }

.image-70 { max-width: 70%; }

.image-80 { max-width: 80%; }

.image-90 { max-width: 90%; }

.right-image { float: right; padding: 1em 1em 1em 1em; display: block; }

.right-image-aligned-with-shadow { float: right; margin: 0 2em 2em 4em; max-width: 30%; clear: both; }

.right-image-40 { float: right; padding: 1em 1em 1em 1em; display: block; max-width: 40%; }

.left-image-shadow-30 { float: left; margin: 2em 2em 2em 0em; max-width: 30%; box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); clear: both; }

.right-image-shadow-30 { float: right; margin: 0 2em 2em 4em; max-width: 30%; box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); clear: both; }

.stack-image-shadow-30 { float: left; margin: 0 2em 2em 4em; max-width: 30%; box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); }

.stack-image-shadow-20 { float: left; margin: 0 2em 2em 4em; max-width: 20%; box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -moz-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 4px 5px 10px 1px rgba(119, 119, 119, 0.75); }

.image-attribution { font-size: 14px; }

.gsc { line-height: 1em; }

/** .gsc-input { width: 15%; margin: 3px auto; } */
.search_form { width: 100%; margin: -23px auto; min-height: 42px; line-height: 1em; }

#cse .gsc-clear-button { width: 15px; }

.gsc-branding { display: none; }

.cse input.gsc-input, input.gsc-input { background-image: url(/images/logos/white.gif) !important; background-repeat: no-repeat; background-color: #fff; }

/** Link placement and hover behavior. */
.anchorjs-link { color: inherit !important; text-decoration: none !important; }

@media (max-width: 768px) { .anchorjs-link { display: none; } }

*:hover > .anchorjs-link { opacity: .75; transition: color .16s linear; }

*:hover > .anchorjs-link:hover, .anchorjs-link:focus { text-decoration: none !important; opacity: 1; }

.banner { background-image: url("/images/banner.jpg"); background-size: 150%; }

.post-content .post-date { display: block; font-size: 0.8em; padding-bottom: 0.3em; padding-top: 2em; color: #828282; }

.posts-by-year ul { list-style: none; padding: 0; }

.post-description { display: block; padding-top: 0.7em; font-size: 0.7em; line-height: 1.5em; }

.whatsnext { font-size: 0.8em; }

.whatsnext li { margin: 0 0 7px 0; }

.boxed { border: 1px solid black; padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; }

.video-table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }

.video-table thead tr { background-color: #C5050D; color: #ffffff; text-align: left; }

.video-table th, .video-table td { padding: 12px 15px; }

.video-table tbody tr { border-bottom: 1px solid #dddddd; }

.video-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; }

.video-table tbody tr:last-of-type { border-bottom: 2px solid #C5050D; }

.video-table tbody tr.active-row { font-weight: bold; color: #C5050D; }

/** Syntax highlighting styles */
.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }