amp_notes.scss

$default-has-layout-approach: "block";
@import "compass";
@import "theatlantic/css/variables";
@import "theatlantic/css/article-styles";

$facebook-color: #3d5ba8;
$twitter-color: #55acee;

body {
    font-family: $serif;
    font-size: 18px;
    margin: 0;
}

a {
    color: $link-color;
    text-decoration: none;

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

h1, h2, h3, h4, h5, h6 {
    font-family: $header-serif;
}

amp-img {
    vertical-align: middle;
}

.ad-wrapper {
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;

    &:before {
        content: "Article continues after advertisement";
        display: block;
        border-bottom: 1px solid #ccc;
        color: #999;
        font-family: $sans;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
}

amp-ad {
    vertical-align: middle;
}

#site-header {
    background: #000;
    overflow: hidden;
    z-index: 1000000;
}

#site-header .logo {
    margin: 0;
    color: #fff;
    text-indent: -10000px;
    background-image: url("../../theatlantic/common/img/logo-small.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 40px;
    float: left;
}

#notes .fluid-container {
    width: 90%;
    max-width: 630px;
    margin: 0 auto;
    background-color: white;
    padding: 10px;

}

body#notes {
    background-color: #EEE;
}

#notes .byline,
#notes .byline a {
    line-height: 1;
    font-family: $sans !important;
    font-size: 14px;
    color: black;
}

#notes .byline-wrapper {
    text-align: right;
    line-height: 1;
    margin: 10px 0 0 0;
}

#notes .timestamp {
    font-family: $sans;
    font-size: 11px;
    color: #999;
}

#notes article .hed {
    font-family: $header-serif;
    font-size: 18px;
    margin: 10px 0;
    line-height: 30px;
    font-weight: bold;
}

#notes article .hed a {
    color: black;
}

#notes article .dek {
    font-family: $sans;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: lighter;
    line-height: 1.2;
}

#notes article .lead-img {
    margin: 0 auto 1em;
    width: 100%;
    max-width: 960px;
}

#notes article .lead-img figcaption {
    font-family: $sans;
    font-size: 12px;
    color: #666;
    text-align: left;
}

#notes article .lead-img .credit {
    text-align: right;
    display: block;
}

#notes article .lead-img .caption + .credit {
    display: inline;

    &:before {
        content: "(";
    }

    &:after {
        content: ")";
    }
}

// Social Icons
.social-buttons {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    text-align: center;
}

.social-buttons li {
    padding: 10px 0 20px;
    display: inline-block;
}

.social-buttons a {
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: $sans;
    font-size: 14px;
}

.social-buttons a.facebook { background: $facebook-color; }
.social-buttons a.twitter { background: $twitter-color; }

.article-body {
    margin: 0 auto;
}

.article-body .full-width {
    width: inherit;
}

//most popular

#notes .more-stories-wrapper a.more-stories,
#notes .most-popular-article h3.hed {
    font-weight: bold;
}

#notes li.most-popular-article:nth-child(n+6) {
    display: none;
}

#notes .most-popular-footer-wrapper {
    margin-bottom: 10px;
}

// Site footer
#notes #site-footer {
    font-family: $sans;
    background: #000;
    color: #fff;
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
}

#notes #site-footer .fluid-container {
    background-color: #000;
}

notes.scss

@import "theatlantic/css/variables.scss";
@import "common/icons/css/atl-icons";

@media (max-width: $mobile-breakpoint) {
    body.notes {
        background-color: #EEE
    }

    #notes div.note-detail,
    #notes div.thread-hed {
        background-color: white;
        padding: 10px;
        width: 90%;
        margin: 5px auto;
    }

    #notes div.note-list {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    #notes .module-bottom-rows.bottom-latest {
        margin-top: 30px;
        padding-bottom: 15px;
    }
}

#notes {
    @media (max-width: $notes-tablet-breakpoint) {
        margin-top: 100px;
    }
    @media (max-width: $mobile-header-breakpoint) {
        margin-top: 10px;
    }
}

#notes .river {
    width: 630px;
    float: left;
    margin: 60px 10px 30px 30px;
    @media (max-width: $notes-tablet-breakpoint) {
        margin-left: auto;
        margin-right: auto;
        float: none;
        margin-top: 0;
    }
    @media (max-width: $mobile-breakpoint) {
        width: 100%;
    }
}

#notes #content-wrapper {
    margin: 0 auto;
    max-width: 1345px;
    @media (max-width: $notes-drop-right-rail) {
        max-width: 1010px;
    }
    @media (max-width: $mobile-breakpoint) {
        width: 100%;
    }
}

#notes .river .note-detail {
    overflow: hidden;
    border-bottom: 10px solid #E8E8E8;
    @media (max-width: $mobile-breakpoint) {
        border: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

#notes .river .note-detail:nth-child(2) {
    //2nd child to account for skipped anchor link
    padding-top: 0;
}

#notes .anchor,
#notes .note-anchor:not(:first-child) {
    margin-top: -40px;
    height: 40px;
    content: " ";
    display: block;
    visibility: hidden;
}

#notes .river .lead-img img {
    width: 100%;
}

#notes .river .caption {
    font-size: 12px;
    line-height: normal;
    margin-top: 15px;
}

#notes .river .credit {
    float: right;
    font-size: 12px;
    line-height: normal;
    position: static;
    white-space: nowrap;
}

#notes .river .has-caption .credit {
    float: left;
    margin-bottom: 5px;
}

#notes .river .byline,
#notes .river .byline a {
    line-height: 1;
    font-family: $sans;
    font-size: 14px;
    color: black;

}

#notes .river .byline-wrapper {
    text-align: right;
    line-height: 1;
    margin: 15px 0 0 0;
    @media (max-width: $mobile-breakpoint) {
        margin-top: 10px;
    }
}

#notes .river .timestamp {
    font-family: $sans;
    font-size: 11px;
    color: #999;
}

#notes .river .hed {
    font-family: $header-serif;
    font-size: 26px;
    margin: 10px 0;
    line-height: 30px;
    @media (max-width: $mobile-breakpoint) {
        font-size: 18px;
    }
}

#notes .river div.hed a {
    color: black;
}

#notes .river .content {
    font-family: $serif;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
    clear: both;
}

#notes .river .small-red {
    color: $atlantic-red;
    font-family: $sans;
    font-size: 14px;
    margin-bottom: 30px;
}

#notes .river .read-on {
    float: left;
    cursor: pointer;
}

#notes .river .to-thread {
    float: right;
    @media (max-width: $mobile-breakpoint) {
        clear: both;
        float: left;
    }
}

#notes .extended.hidden {
    display: none;
    margin-bottom: 30px;
}

#notes .load-new,
#notes .show-all {
    border: 1px solid $atlantic-red;
    color: $atlantic-red;
    width: 588px;
    text-transform: uppercase;
    font-family: $sans;
    font-size: 11px;
    padding: 7px 20px;
    font-weight: bold;
    text-align: center;
    line-height: 15px;
    display: none;
    cursor: pointer;
    @media (max-width: $mobile-breakpoint) {
        background-color: white;
        width: 280px;
        margin: 0 auto;
    }
}

#notes .sharekit ul {
    list-style: none;
    clear: left;
    padding: 0;
}

#notes .sharekit li {
    float: left;
    margin-right: 10px;
}

#notes .module-bottom-rows {
    font-family: $serif;
    margin-top: 30px;
    margin-bottom: 30px;
    @media (max-width: $mobile-breakpoint) {
        background-color: white;
        border: none;
        width: 90%;
        margin: 10px auto 0;
        padding: 10px;
    }
}

#notes .module-bottom-rows:last-child {
    border-bottom: none;
}

#notes div.module-bottom-rows.most-popular-footer > a,
#notes .module-bottom-rows .heading {
    text-transform: uppercase;
    font-size: 16px;
    font-family: $sans;
    @media (max-width: $mobile-breakpoint) {
        margin: 0 auto;
        width: 260px;
        display: block;
    }
}

#notes .module-bottom-rows .heading {
    @media (max-width: $mobile-breakpoint) {
        padding-top: 10px;
    }
}

#notes .module-bottom-rows ul {
    list-style: none;
    padding: 0;
}

#notes .module-bottom-rows li {
    display: table;
    width: 570px;
    height: 60px;
    background-color: #E8E8E8;
    margin: 2px 0;
    padding: 0 30px;
    @media (max-width: $mobile-breakpoint) {
        width: 100%;
        padding: 0;
        margin: 2px auto;
    }
}
#notes .module-bottom-rows li a {
    display: table-cell;
    vertical-align: middle;
    padding: 16px 0;
}

#notes .most-popular-footer .hed,
#notes .module-bottom-rows a,
#notes .module-bottom-rows .hed {
    font-size: 16px;
    color: black;
    font-family: $header-serif;
    font-weight: normal;
}

#notes .module-bottom-rows .latest-foot {
    text-transform: uppercase;
    font-family: $sans;
    color: $atlantic-red;
}

#notes .module-bottom-rows ul {
    position: relative;
}

#notes .module-bottom-rows a {
    @media (max-width: $mobile-breakpoint) {
        width: 100%;
        margin: 0 auto 2px auto;
    }
}

#notes .module-bottom-rows.most-popular-footer ul a {
    @media (max-width: $mobile-breakpoint) {
        width: 260px;
        padding-left: 30px;
    }
}

#notes .module-bottom-rows li a {
    @media (max-width: $mobile-breakpoint) {
        line-height: 1.25;
        padding: 0 20px 0 30px;
    }
}

#notes .module-bottom-rows .latest-foot a {
    color: $atlantic-red;
}

#notes .module-bottom-rows .latest-link:hover {
    text-decoration: none;
}

#notes .module-bottom-rows .title:hover {
    text-decoration: underline;
}

#notes .module-bottom-rows .timestamp {
    color: #616F81;
    font-family: $sans;
    font-size: 14px;
    margin-left: 5px;
}

#notes .module-bottom-rows li span:last-child:after {
    float: right;
    content: ">";
    font-family: $serif;
    font-size: 16px;
}

#notes .most-popular-footer {
    @media (max-width: $mobile-breakpoint) {
        border: 0;
        padding-bottom: 10px;
    }
}

#notes .most-popular-footer .hed {
    margin: 0;
    padding-left: 20px;
    @media (max-width: $mobile-breakpoint) {
        line-height: 1.25;
        padding-left: 0;
        width: 80%;
    }
}

#notes .most-popular-footer .hed:after {
    content: ">";
    float: right;
    @media (max-width: $mobile-breakpoint) {
        position: absolute;
        right: 20px;
        top: 20px;
    }
}

#notes .most-popular-footer .most-popular li:before {
    left: 15px;
    font-family: $sans;
    font-size: 16px;
    width: 20px;
    float: right;
    line-height: 60px;
}

#notes .right-rail-wrapper {
    width: calc(100% - 630px - 300px - 115px);
    max-width: 300px;
    float: left;
    margin: 10px;
    margin-top: 60px;
    @media (max-width: $notes-drop-right-rail) {
        display: none;
    }
}

#notes .toc {
    background-color: white;
    margin-bottom: 5px;
    border: 1px solid #E8E8E8;
    padding: 20px 20px 0 20px;
    @media (max-width: $notes-tablet-breakpoint) {
        display: none;
    }
}

#notes .right-rail .latest li.hed {
    padding-left: 0;
}

#notes .right-rail .latest .more {
    font-family: $sans;
    text-transform: uppercase;
    font-size: 12px;
    color: black;
    text-decoration: underline;
}

#notes .toc ul,
#notes .right-rail ul {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

#notes .right-rail .notes-right-rail-content-container {
    background-color: #E8E8E8;
    margin-bottom: 0;
    padding: 30px 25px 5px 25px;

}

#notes .right-rail .most-popular-list {
    font-size: 14px;
    margin-top: 16px;
    color: black;
}

#notes .right-rail .notes-right-rail-content-container li {
    position: relative;
    padding-top: 0;
    padding-left: 25px;
    font-family: $sans;
    color: #666;
}

//follow us
#notes .right-rail .follow-us {
    margin: 20px 0;
    text-align: center;
    border: 1px solid #E8E8E8;
    overflow: hidden;
}

#notes .right-rail .follow-us .social {
    text-transform: uppercase;
    background-color: black;
    color: white;
    font-family: $sans-condensed;
    letter-spacing: 2px;
    font-size: 15px;
    padding: 15px;
}

#notes .right-rail .follow-us .social ul {
    display: inline;
}

#notes .right-rail .follow-us .social li {
    display: inline;
    letter-spacing: normal;
    margin-left: 3px;
}

#notes .right-rail .follow-us .social li a {
    font-size: 10px;
}

#notes .right-rail .follow-us .social li a:before {
    padding: 7px;
}

#notes .right-rail .follow-us .signup {
    font-family: $sans;
    font-size: 15px;
    margin: 10px 5px 5px 5px;
}

#notes .right-rail .follow-us .signup a {
    font-style: italic;
}

#notes .right-rail .follow-us .newsletter-signup {
    padding: 5px 10px 60px 10px;
    position: relative;
}

#notes .right-rail .follow-us .newsletter-signup:before {
    font-family: 'atl-icons';
    content: $atl-email;
    position: absolute;
    left: 20px;
    top: 14px;
}

#notes .right-rail .follow-us .newsletter-signup input {
    height: 45px;
    float: left;
    border-radius: 0;
}

#notes .right-rail .follow-us .newsletter-signup input[type="email"] {
    background-color: #E8E8E8;
    border: none;
    width: calc(100% - 73px);
    padding-left: 35px;
    font-size: 16px;
}

#notes .right-rail .follow-us .newsletter-signup .message.success  {
    padding: 0 10px;
    margin-top: 80px;
    margin-bottom: 0;
}

#notes .right-rail .follow-us .newsletter-signup input[type="submit"] {
    background-color: black;
    font-family: $sans-condensed;
    letter-spacing: 2px;
    font-size: 12px;
}

#notes .right-rail .contribute {
    border: 1px solid #E8E8E8;
    font-family: $sans;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

#notes .right-rail .contribute span {
    font-weight: bold;
}

#notes .right-rail .contribute a {
    color: #458CD5;
}

#notes .module-bottom-rows.most-popular-footer .most-popular-list {
    margin: 0;
}

#notes .most-popular-footer li {
    position: relative;
}

#notes .most-popular-footer li:before,
#notes .right-rail .most-popular-list li:before {
    counter-increment: most-popular;
    content: counter(most-popular) ".";
    position: absolute;
    top: 0;
    left: -10px;
    text-align: right;
    width: 20px;
    float: right;
    margin-right: 10px;
    @media (max-width: $mobile-breakpoint) {
        display: none;
    }
}

#notes .right-rail .most-popular-list li:before {
    line-height: 18px;
}

#notes .right-rail .notes-right-rail-content-container .hed {
    font-family: $serif;
    font-size: 14px;
    margin: 0;
    font-weight: normal;
}

#notes .right-rail .notes-right-rail-content-container .more-stories-wrapper {
    display: none;
}

#notes .toc .hed,
#notes .right-rail .hed {
    padding: 0 0 12px 0;
    line-height: 18px;
}

#notes .toc .hed a,
#notes .right-rail .hed a {
    color: #666;
    font-size: 14px;
    display: block;
}

#notes .toc .hed a {
    color: black;
}

#notes .toc .heading,
#notes .right-rail .heading {
    font-family: $sans;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 10px;
    color: black;
}

#notes .right-rail a {
    color: black;
}

#notes .most-popular-list .most-popular .lead-img,
#notes .most-popular-list .most-popular .metadata,
#notes .most-popular-list .most-popular .article-content,
#notes .most-popular-list .most-popular .read-more {
    display: none;
}

#notes .right-ad {
    float: left;
    width: 300px;
    height: 600px;
    margin: 0 0 0 10px;
    @media (max-width: $notes-tablet-breakpoint) {
        display: none;
    }
}

#notes .right-ad .ad:before {
    font-family: $sans;
    text-transform: uppercase;
    font-size: 11px;
    display: block;
    color: #999;
    width: 94%;
    margin: 0 auto;
    content: "Advertisement";
    text-align: center;
}

#notes .right-ad.moving .ad {
    position: absolute;
    margin-top: 48px;
}

#notes .right-ad.stickytop .ad {
    top: 220px;
    position: fixed;
}

#notes .right-ad.stickybottom .ad {
    position: absolute;
}

#notes .category-title {
    font-family: $sans;
    text-transform: uppercase;
    margin: 0 auto;
    font-size: 36px;
    line-height: 1;
    @media (max-width: $mobile-breakpoint) {
        font-size: 24px;
    }

}

#notes .thread-hed {
    margin-bottom: 5px;
    border: 1px solid #E8E8E8;
    padding: 30px;
    width: 568px;
    overflow: hidden;
    @media (max-width: $mobile-breakpoint) {
        border: none;
    }
}

#notes .thread-hed .hed {
    font-family: $header-serif;
    font-size: 30px;
    line-height: 30px;
}

#notes .thread-hed .show-about {
    display: none;
    @media (max-width: $mobile-breakpoint) {
        display: block;
    }
}

#notes .thread-hed .content {
    font-family: $serif;
    line-height: 1.3;
    margin-bottom: 20px;
    @media (max-width: $mobile-breakpoint) {
        margin-bottom: 30px;
        display: none;
    }
}

#notes .thread-hed .sort {
    float: right;
    display: table;
    font-size: 13px;
    cursor: pointer;
    @media (max-width: $mobile-breakpoint) {
        margin-top: 30px;
        float: left;
    }
}

#notes .thread-hed .sort div {
    color: #999;
    font-size: 14px;
    font-family: $sans;
    padding-right: 10px;
}

#notes .thread-hed .sort a {
    font-family: $sans;
    text-transform: uppercase;
    color: #999;
    font-size: 11px;
    padding: 10px;
    border: 1px solid #999;
    display: table-cell;
    width: 75px;
    text-align: center;
}

#notes .thread-hed .sort a.newest {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-left: 5px;
}

#notes .thread-hed .sort a.oldest {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#notes .thread-hed .sort a.active {
    background-color: #999;
    color: white;
}

#notes .thread-hed .sharekit {
    display: block;
}

#notes .thread .thread-hed .sharekit ul {
    margin: 0;
}

#notes .note-list {
    margin-top: 20px;
}

#notes .thread .to-top {
    font-family: 'atl-icons';
    float: right;
    font-size: 30px;
    color: #999;
    cursor: pointer;
}

#notes .thread .to-top:before {
    content: $atl-caret-up;
}

#notes .sharekit ul {
    float: left;
}

#notes .sharekit li {
    margin: 0 5px;
}

#notes .thread-note {
    margin-bottom: 30px;
    @media (max-width: $mobile-breakpoint) {
        border-bottom: none;
    }
}

#notes .thread-note .to-top {
    float: right;
}

//pagination
#notes ul.pagination {
    list-style: none;
    padding-left: 0;
    margin: 40px auto;
    width: 300px;
    overflow: hidden;
    text-align: center;
}

#notes .pagination li {
    width: 125px;
    height: 30px;
    background-color: #999;
    text-align: center;
    border-radius: 2px;
    display: inline-block;
    cursor: pointer;

}

#notes .pagination li a {
    color: white;
    text-transform: uppercase;
    line-height: 30px;
    font-family: $sans;
    font-size: 11px;
}

#notes .pagination .prev {
    margin-right: 20px;
}

#notes .pagination .prev:before {
    content: "<";
    color: white;
    line-height: 30px;
    font-family: $sans;
    font-size: 11px;
    margin-right: 5px;
}

#notes .pagination .next:after {
    content: ">";
    color: white;
    line-height: 30px;
    font-family: $sans;
    font-size: 11px;
    margin-left: 5px;
}


//ad junk
#notes .ad-wrapper:not(.extended) gpt-ad {
    list-style: none;
    margin-bottom: 30px;
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 10px solid #E8E8E8;
    @media (max-width: $mobile-breakpoint) {
        border: none;
        padding-bottom: 0;
    }
}

#notes .ad-wrapper:not(.extended) gpt-ad:before {
        font-family: $sans;
        text-transform: uppercase;
        font-size: 11px;
        display: block;
        color: #999;
        width: 94%;
        margin: 0 auto;
        content: "Articles Continue After Advertisement";
        text-align: center;
}

#notes .ad-wrapper.extended gpt-ad:before {
    font-family: $sans;
    text-transform: uppercase;
    font-size: 11px;
    display: block;
    color: #999;
    width: 94%;
    margin: 0 auto;
    content: "Article Continues After Advertisement";
    text-align: center;
}

#notes #taboola-container {
    margin: 0 auto;
    padding: 30px 0;
    width: 100%;
    @media (max-width: $notes-tablet-breakpoint) {
        padding: 0;
    }
    @media (max-width: $mobile-breakpoint) {
        border: none;
        width: 94%;
    }
}