sample-style.css

html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0;
    -webkit-text-size-adjust:100%;
    color:#404040;
    background-color:#f5f5f5;
    line-height: 1;
    font-family: monospace;
    font-weight: 100;
    letter-spacing: -0.1em;
    -webkit-font-smoothing: antialiased;
}
content {
    margin: 0 auto;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
a{
    background-color:transparent
}
a:active,a:hover{
    outline:0
}
b,strong{
    font-weight:700
}
h1{
    font-size: 3.4375rem;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    color: #d3002d;
    line-height: 1;
    letter-spacing: -0.1em;
    font-weight: 100;
}
hr{
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
legend{
    border:0;
    padding:0
}
.article-header{
    width:97.22222%;
    float:left;
    margin-left:1.38889%;
    margin-right:1.38889%;
    border-bottom:1px solid #ededed;
}
@media (min-width:750px){
    .article-header{
        padding-bottom:1rem;
    }
}
.article-header .flag{
    margin-bottom:1.25rem
}
.article-header .dek{
    width:100%;
    float:none;
    color:#999;
    margin-bottom:.625rem;
    font-size:1.125rem
}
@media (min-width:600px){
    .article-header .dek{
        float:left;
        float:none;
        font-size:1.25rem
    }
}
.article-header .date{
    display:inline;
    font-size:.9375rem;
    color:#666
}
.article-header.reverse{
    background-color:#e6e6e6;
    padding-bottom:0;
    border-bottom:none;
    margin-bottom:0
}
.article-header.reverse .breadcrumb,.article-header.reverse .byline,.article-header.reverse .byline span a,.article-header.reverse .date,.article-header.reverse .dek,.article-header.reverse .title{
    color:#fff
}
.continued .article-header{
    padding-bottom:1rem;
    margin-bottom:0
}
.continued .article-header .title{
    font-size:1.5rem;
    margin-left:0
}
@media (min-width:600px){
    .continued .article-header .title{
        font-size:2rem
    }
}
@media (min-width:750px){
    .continued .article-header .title{
        font-size:2.5rem;
        padding-top:.625rem
    }
}
@media (min-width:1000px){
    .continued .article-header .title{
        font-size:2.8125rem
    }
}
.continued .article-header .sponsor{
    font-size:.9375rem
}
.article-body [data-type=toc]{
    counter-reset:chapter
}
.article-body [data-type=toc]:before{
    content:"Table of Contents";
    margin-left:.5em;
    font-size:1.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:100
}
.article-body [data-type=toc] ol{
    font-size:1rem;
    list-style-type:none;
    margin-bottom:0;
    margin-top:0
}
.article-body [data-type=toc] ol a{
    border-bottom:none!important;
    text-shadow:none!important
}
.article-body [data-type=toc] ol a:hover{
    color:#666
}
.article-body [data-type=toc] ol li{
    margin-bottom:.3125rem
}
.article-body [data-type=toc] [data-type=part]{
    font-size:1.4375em;
    margin-top:1.25rem
}
.article-body [data-type=toc] [data-type=chapter]{
    font-weight:700
}
.article-body [data-type=toc] [data-type=chapter]:before{
    counter-increment:chapter;
    content:counter(chapter) " ";
    text-transform:uppercase;
    font-weight:400;
    font-size:.75rem;
    position:relative;
    top:-.05rem;
    display:inline-block;
    min-width:1em
}
.article-body [data-type=toc] [data-type=chapter] li{
    font-weight:400
}
.article-body [data-type=toc] [data-type=sect1]{
    display:none
}
.article-body [data-type=toc] [data-type=sect2],.article-body [data-type=toc] [data-type=sect3],.article-body [data-type=toc] [data-type=sect4]{
    display:none
}
.article-meta{
    max-width:750px
}
@media (min-width:600px){
    .article-meta{
        margin-left:9.72222%;
        padding-right:1.25rem
    }
}
.article-meta .block-common.person{
    margin:0
}
.article-meta .block-common.person .thumb{
    margin-left:0;
    width:20%;
    -ms-flex-negative:0;
    flex-shrink:0;
    margin-right:1.25rem
}
.article-meta .block-common.person .text-group{
    margin-top:0;
    padding-left:0!important;
    padding-top:0!important;
    padding-right:0!important
}
.article-meta .block-common.person .dek{
    line-height:1.6
}
@media (max-width:750px){
    .article-meta .block-common.person{
        display:block;
        margin-top:1.25rem
    }
    .article-meta .block-common.person .thumb{
        width:22.22222%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        clear:both;
        padding-left:0
    }
    .article-meta .block-common.person .text-group{
        width:97.22222%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        padding-left:0
    }
}
@media (max-width:600px){
    .article-meta .block-common.person .thumb{
        width:30.55556%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%
    }
}
.article-body {
    margin-left: 1rem;
}
.article-body dl a,.article-body ol:not(.a-pagination) a,.article-body p a,.article-body ul a,.nice-underline{
    border-bottom:1px solid #c9c9c9;
    text-shadow:1px 1px #fff,-1px 1px #fff,2px 1px #fff,-2px 1px #fff
}
.article-body dl a::-moz-selection,.article-body ol:not(.a-pagination) a::-moz-selection,.article-body p a::-moz-selection,.article-body ul a::-moz-selection,.nice-underline::-moz-selection{
    text-shadow:1px 1px #b4d2ff,-1px 1px #b4d2ff,2px 1px #b4d2ff,-2px 1px #b4d2ff
}
.article-body dl a::selection,.article-body ol:not(.a-pagination) a::selection,.article-body p a::selection,.article-body ul a::selection,.nice-underline::selection{
    text-shadow:1px 1px #b4d2ff,-1px 1px #b4d2ff,2px 1px #b4d2ff,-2px 1px #b4d2ff
}
.article-body dl a::-moz-selection,.article-body ol:not(.a-pagination) a::-moz-selection,.article-body p a::-moz-selection,.article-body ul a::-moz-selection,.nice-underline::-moz-selection{
    text-shadow:1px 1px #b4d2ff,-1px 1px #b4d2ff,2px 1px #b4d2ff,-2px 1px #b4d2ff
}
.article-body dl,.article-body ol,.article-body p,.article-body ul{
    line-height:1.6;
    font-size:1.0625rem
}
@media (min-width:600px){
    .article-body dl,.article-body ol,.article-body p,.article-body ul{
        font-size:1.25rem
    }
}
.article-body sub,.article-body sup{
    line-height:0
}
.article-body dl a,.article-body ol:not(.a-pagination) a,.article-body p a,.article-body ul a{
    color:#404040
}
.article-body .full,.article-body .split{
    width:100%
}
.article-body .right{
    width:97.22222%;
    float:left;
    margin-left:1.38889%;
    margin-right:1.38889%;
    float:none;
    padding-left:0;
    margin:0 auto
}
@media (min-width:450px){
    .article-body .right{
        width:63.88889%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        margin-left:18.05556%;
        float:none
    }
}
@media (min-width:600px){
    .article-body .right{
        max-width:31.25rem;
        width:29.72222%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        float:right;
        clear:right;
        margin-left:2.5rem
    }
}
@media (min-width:1000px){
    .article-body .right{
        width:22.22222%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        float:right;
        clear:right
    }
}.article-body pre.right{
    padding:1.25rem
}
.article-body pre b{
    display:none
}
.article-body iframe{
    margin-bottom:1.25rem
}
.article-body p [data-type=footnote]{
    float:none;
    margin:0 0 .625rem 2.5rem;
    max-width:500px;
    width:auto;
    display:block
}
.article-body p [data-type=footnote]:first-of-type{
    margin-top:.625rem
}
.responsive-video{
    position:relative;
    padding-bottom:56.25%;
    padding-top:25px;
    height:0
}
.responsive-video iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.video-body{
    width:100%;
    float:left;
    margin-bottom:2.5rem;
    position:relative
}
.video-body .video-player{
    width:97.22222%;
    float:left;
    margin-left:1.38889%;
    margin-right:1.38889%
}
@media (max-width:1000px){
    .video-body .video-player{
        margin-bottom:1.25rem
    }
}
.video-body .video-meta{
    width:47.22222%;
    float:left;
    margin-left:1.38889%;
    margin-right:1.38889%;
    margin-left:26.38889%;
    margin-right:26.38889%
}
@media (min-width:1000px){
    .video-body .video-player{
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        margin-bottom:2.5rem
    }
    .video-body .video-meta{
        width:22.22222%;
        float:left;
        margin-left:1.38889%;
        margin-right:1.38889%;
        position:absolute;
        top:0;
        right:0
    }
}
@media (min-width:1000px) and (min-width:1000px){
    .video-body .video-meta .kicker{
        margin-top:0
    }
}