html {
    border-top: 0.25em solid $body_font_color;
}
body {
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    font:$body_p_font;
    color: $body_font_color;
    text-align: left;
    background-color: $body_color;
}
ul {
    text-align: left;
}
// eliminate touch delay on mobile safari
a, button, input, select, textarea, label, summary {
    touch-action: manipulation;
}
a {
    color: $body_font_color;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
    text-decoration-color: $link_color;
    &:hover {
        text-decoration: none;
    }
    &:visited {
        color: $body_font_color;
    }
}
p {
    @include fancy_serif;
    @include fontsize(20);
    text-align: left;
    @include breakpoint(alpha){
        @include fontsize(22);
        line-height: 1.5;
    }
    @include breakpoint(beta){
        @include fontsize(24);
        line-height: 1.6;
    }
}
time {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    @include fontsize(11);
    span {
        @include fontsize(13);
    }
}
abbr {
    cursor: help;
}
pre {
    text-align: left;
    @include breakpoint(alpha){
        @include fontsize(18);
        line-height: 1.5;
    }
}
p code {
    font-family: Inconsolata, Consolas, Courier New, monospace;
    font-size: 96%;
    background: darken($body_color, 8);
    padding: 1px 3px;
}
object, embed, video {
    max-width: 100%;
    width: 100%;
    height: auto;
}
audio {
    max-width: 100%;
    width: 100%;
}
blockquote {
    @include fontsize(18);
    display: block;
    margin: 3rem 0;
    padding-left: 1rem;
    border-left: 2px solid lighten($body_font_color, 40);
    position: relative;
    text-align: left;
    font-style: italic;
    cite {
      display: block;
      text-align: right;
    }
    p {
        @include fontsize(18);
    }
    @include breakpoint(alpha){
        @include fontsize(20);
        line-height: 1.5;
    }
    @include breakpoint(beta){
        @include fontsize(22);
        line-height: 1.6;
        margin-left: 1rem;
        p {
            @include fontsize(20);
        }
    }
}
hr {
    border: 0; 
    height: 1px;
    @include faded_line_after;
    margin: 3rem 0;
}
img {
    max-width: 100%;
}
figure {
    margin: 0;
}
figcaption {
    text-align: left;
}
figcaption, figcaption a {
    @include fancy_sans;
    @include fontsize(16);
    text-align: left;
    line-height: 1.9;
    padding: .3rem .5rem .3rem 0;
    color: #666;
    border-bottom: 1px lighten($body_font_color, 40) solid;
    margin-bottom: 1rem;
}
figcaption a:visited {
    color: #666;
}
h1 {
    @include fancy_serif;
    @include fontsize(36);
    font-weight: normal;
}
h2 {
    @include fancy_serif;
    @include fontsize(28);
    font-weight: normal;
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(30);
        line-height: 1.6;
    }
}
h3 {
    @include fancy_sans;
    @include fontsize(24);
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(28);
        line-height: 1.4;
    }
}
h4 {
    @include fontsize(20);
    @include fancy_sans;
    font-weight: bold;
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(22);
        line-height: 1.4;
    }
}
h5 {
    @include fontsize(16);
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(18);
        line-height: 1.4;
    }
}
//**************  Universals ************************
.hed-primary {
    @include fancy_serif;
    @include fontsize(28);
    margin: .25rem 0;
    line-height: 1.2;
    font-weight: 400;
    @include breakpoint(delta) {
        @include fontsize(32);
        margin-top: 0;
    }
}
.hed-secondary {
    @include fancy_serif;
    @include fontsize(20);
    margin: 0;
    font-style: italic;
    line-height: 1.2;
}
.hed-tertiary, .nav-menu {
    @include fancy_sans;
    @include fontsize(14);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.3;
    color: lighten($body_font_color, 40);
    a {
        color: lighten($body_font_color, 40);
    }
}
.blok {
    display: block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    @include fontsize(13);
    @include fancy_sans;
    letter-spacing: 1px;
    font-weight: bold;
    color: lighten($body_font_color, 40);
    text-align: left;
}
.hide {
    display: none;
}
.strike {
    text-decoration: line-through;
}
.yes {
    background: green !important;
    color: white;
}
.no {
    background: red !important;
    color: white;
}
.alert {
    color: red !important;
}
.small {
    font-size: 90%;
}
.content {
    @include constrain_wide; 
}
.narrow {
    @include constrain_narrow;
}
//****************  Page Breadcrumbs  ************************

#breadcrumbs {
    @include constrain_wide();
    padding: 0;
    list-style-type: none;
    text-align: center;
    li {
        display: inline;
    }
    a {
        color: $secondary-link-color;
    }
    @include breakpoint(gamma) {
        text-align: left;
    }
}


.list-inline {
    @extend %clearfix;
    list-style-type: none;
    padding: none;
    li {
        margin: 1rem;
    }
}