html {
    border-top: 0.25em solid $brown;
}

body {
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    font:$body_p_font;
    color: $body_font_color;
    text-align: center;
    background-color: transparent
}
ul {
    padding: 0;
}
// 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: $orange;
    &:hover {
        text-decoration: none;
    }
    &:visited {
        color: $body_font_color;
    }
}
p {
    text-align: left;
    @include fontsize(18);
    @include breakpoint(alpha){
        @include fontsize(20);
        line-height: 1.5;
    }
    @include breakpoint(beta){
        @include fontsize(22);
        line-height: 1.6;
    }
}
time {
    @include smcaps;
    @include fontsize(11);
    display: block;
    span {
        @include fontsize(13);
    }
}
abbr {
    cursor: help;
}
pre {
    text-align: left;
    @include breakpoint(alpha){
        @include fontsize(18);
        line-height: 1.5;
    }
}
object, embed, video {
    max-width: 100%;
    width: 100%;
    height: auto;
}
blockquote {
    @include fontsize(18);
    display: block;
    border-top: 4px solid lighten($body_font_light, 20);
    border-bottom: 4px solid lighten($body_font_light, 20);
    margin: 3rem 0;
    position: relative;
    text-align: left;
    font-style: italic;
    cite {
      display: block;
      text-align: right;
    }
    @include breakpoint(alpha){
        @include fontsize(20);
        line-height: 1.5;
    }
    @include breakpoint(beta){
        @include fontsize(22);
        line-height: 1.6;
    }
}
blockquote:before {
    @include fancy_sans;
    @include fontsize(68);
    content: '\201C';
    position: absolute;
    top: -1.35rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 2rem;
    color: #666;
    text-align: center;
}
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(14);
    text-align: left;
    line-height: 1.9;
    padding: .3rem .5rem .3rem 0;
    color: #666;
    border-bottom: 1px lighten($body_font_light, 20) solid;
    margin-bottom: 1rem;
}
figcaption a:visited {
    color: #666;
}
h1 {
    font-family: $headline_font_serif;
    @include fontsize(36);
    font-weight: normal;
}
h2 {
    font-family: $headline_font_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);
    font-weight: normal;
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(28);
        line-height: 1.4;
    }
}
h4 {
    @include fontsize(20);
    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 ************************
.hide {
    display: none;
}

.strike {
    text-decoration: line-through;
}

.yes {
    background: green !important;
    color: white;
}

.no {
    background: red !important;
    color: white;
}

.alert {
    color: red !important;
}
//**************  other global classes ************************
.sans {
    @include generic_sans;
}
.bl {
    @include smcaps;
    @include fontsize(12);
    font-weight: 600;
    color: $secondary-link-color;
}
.italic {
    font-style: italic;
}
.small {
    font-size: 90%;
}
.divide-after:after {
    margin-bottom: 3em;
    @include faded_line_after;
}
.margin-left-none {
    margin-left: 0 !important;
}
//****************  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;
    }
}

.black #breadcrumbs a, .dark #breadcrumbs a {
    color: $body_font_light;
}
//************* Dark Pages *********************

.dark body {
    background: $brown;
    color: $body_font_light
}

.black body {
    background: #000;
    color: $body_font_light
}