/* Styles for our Super Article template (article-super.tpl) */



#super-lead-image {
  width            : 100%;
  height           : 100px;
  background-size  : cover;
  background-repeat: no-repeat;
  opacity          : 0;
}
#page, #content-wrap {
  float    : none;
  margin   : 0;
  width    : 100% !important;
  max-width: none !important;
}

.row {
margin   : 0 auto 20px;
float    : none;
max-width: 960px;
}

.content {
  margin         : 0 auto !important;
  max-width      : none !important;
  float          : none !important;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/*Page black fixes*/

.page-black .content.container {
  background     : white;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  width          : 100% !important;
}
.page-black .content footer {
  color: black;
}

.page-black article.super header {
  background: black;
}
.page-black article.super header h1.headline,
.page-black article.super header h2.deck {
  color: #e5e5e5;
}

/* End page black fixes */

.article-meta .share-link {
  margin-bottom: 10px;
}

.super-image-caption {
  float: right;
  width: 100px;
  font-family: 'Verlag 4r', 'Verlag A', 'Verlag B', sans-serif !important;
}
.super-image-caption .photo-credit {
  white-space: normal;
  display: block;
  line-height: normal !important;
  margin-top: 3px;
}
.super-image-caption em {
  font-style: italic;
}
article.super {
  margin-top: -90px;
  z-index   : 100;
  position  : relative;
  width     : 100%;
  max-width : none !important;
}
article.super.no-lead-image {
  margin-top: 0;
}
body.super-article .comments-block,
body.super-article #related-articles {
  max-width   : 600px;
  margin-left : auto;
  margin-right: auto;
}
.super .content .comments-block li {
  width: auto;
}

article.super header {
  float     : none !important;
  margin    : 0 auto 20px !important;
  max-width : 900px !important;
  padding   : 20px 0 0 !important;
  background: white;
  text-align: center;
}
.super-label {
  font-family  : 'Verlag 4i','Verlag A','Verlag B';
  font-size    : 18px;
  /*font-style   : italic;*/
  text-align   : center;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.super-label a {
  color: black;
}
.super-label a:hover {
  color: #ff0000;
}

article.super header h1 {
  font-size: 60px;
  line-height: 64px;
  width: 800px;
  margin: 20px auto;
}

article.super header h2 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 20px;
  font-size: 24px;
  line-height: normal;
}

header p {
  width: 100% !important;
}
.article-meta {
  text-align: left;
  margin-left: 150px;
  width: 600px;
}
p.byline {
  width: 100%;
  text-align: center;
}

aside p.byline {
  text-align: left;
}

article.super .newsletter-reveal.pull-right {
  -moz-box-sizing : border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  padding         : 10px;
  display         : block;
  background-color: #eee;
  max-width       : 300px;
  margin-left     : 20px;
}

.super .content > p,
.super .content > li,
.super .content > ol,
.super .content > ul,
.super .content > h2,
.super .content > h3,
.super .content > h4,
.super .content > div.kicker,
.super .content > blockquote
{
  width       : 100%;
  max-width   : 600px;
  margin-left : auto;
  margin-right: auto;
}
.super .content > blockquote {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.super .related .content h2 {
  width: auto !important;
}

.super .related .content {
  max-width: 350px !important;
}

.super .content footer {
  width    : 100%;
  max-width: 600px;
  margin   : 0 auto 20px;
}

.commentsorder.pagination li {
  width: auto;
}
.ad.sq h2 {
  width      : 300px !important;
  margin-left: 0 !important;
}
/* When we squeeze in a leaderboard after the header.global */
header.global + style + div.ad.ban {
  margin-top: 20px;
}
.super-600 p,
.super-600 li,
.super-600 ol,
.super-600 h2,
.super-600 h3,
.super-600 h4
{
  margin-left : 0px !important;
  margin-right: 0px !important;
}

.super-600 .story-share-buttons li {
  margin-right: 10px !important;
}

#fbShare {
  margin-top: 10px;
  text-align: left;
}

#share-mini {
  margin-bottom: 10px;
}
.btn-fb-mobile {
  display: none;
  margin: 10px auto;
}


/* Share widget is too wide, hinky to override */
@media screen and (max-width: 470px){
  #fbShare {
    display: none;
  }
  .btn-fb-mobile {
    display: inline-block;
  }
}
.ad-sq-super {
  width: 300px;
  margin       : 3px 0 20px 20px !important;
  float        : right;
  padding      : 5px 0 10px;
  border-bottom: 1px solid #aaa;
  border-top   : 1px solid #aaa;
}
.ad-ban-super {
  margin-left: 89px !important;
  margin-top : 20px;
}
#super-map {
  width: 100%;
  height: 200px;
}
.map-wrap-inner {
  width: 400px;
  height: 400px;
}
.map-fullwidth {
  margin-bottom: 20px;
}
.map-fullwidth figcaption {
  width        : 600px;
  margin       : 0 auto;
  border-bottom: 1px solid #aaa;
}
.commentFormContainer {
  width: 600px;
}

.map-wrap {
  width: 400px;
  float: right;
  margin: 6px 0 20px 20px !important;
}
.map-wrap img {
  max-width: none;
}

div.lazyload-photo {
  max-height: 2000px;
}

.super .content .map-infowindow h3,
.super .content .map-infowindow p {
  width      : auto;
  margin-left: 0;
}

.map-infowindow h3 {
  font-size: 18px !important
}
/*article.super aside {
  max-width: none;
}*/
article.super aside p {
  margin-bottom: 1em;
}
aside.corrections,
aside.editorsnote {
  max-width: 600px;
  margin: 0 auto 20px;
}




article.super aside.pull-right {
  float: right;
  padding-top: 0;
  margin: 6px 0 40px 40px;
  width: 300px;
}
article.super aside.pull-right.related-content {
  padding-top: 10px;
}


article.super aside.pull-quote
 {
  width: 200px;
  margin: 6px 40px  40px 0;
}
article.super aside h1 {
  margin-top: 0;
  font-size: 24px;
  line-height: normal;
}

article.super aside.pull-quote-left {
  float: left;
  margin: 6px 40px 40px 0;
}
article.super aside.pull-quote.pull-right {
  float: left;
  margin: 6px 0 40px 40px;
}

article.super aside.pull-quote p {
  width: 200px;
  margin-left: 0;
}

article.super table {
  max-width: 840px;
}
article.super aside.full-width {
  max-width: none;
}
article.super aside.story-nav-aside {
  float: none !important;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.super-600{
  float: none;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 600px !important;
  width: 100%;
}
.super-900 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
  width: 100%;
}
.super-1200 {
    margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  width: 100%;
}
.super-1500 {
    margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1500px !important;
  width: 100%;
}
article.super .grid {
  max-width: 600px;
  margin: 0 auto;
}

h2 a, a h2 {
  color: black;
}
h2 a:hover, a:hover h2 {
  color: #ff0000;
}

.map-super figcaption {
  padding: 3px 0 5px;
}

.super-wide {
  width: 100%;
  max-width: none !important;
  margin: 0 0 20px 0 !important;
  font-family: 'Verlag 4r', 'Verlag A', 'Verlag B', sans-serif !important;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.super-wide-rules, .super-rules {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 20px 0 !important;
  margin-bottom: 20px;
}

.super-wide-rules .super-600 {
  padding-top: 0;
}

.super-wide-rules .ad.ban,
.super-wide-rules .ad.sq {
  margin-bottom: 0;
}


.super-wide-video {
  background: #000;
  padding: 10px 0;
}
.super-wide-video figcaption {
  color: white;
}
.super-wide-video .photo-credit {
  color: #eee;
}

article.super  .aside-rules, article.super .aside-rules.pull-right {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 10px 0;
}

.content .super-photo-600, .content .super-aside-600 {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
  }

.super-double-photo {
  width: 100%;
  max-width: none;
}
.super-double-photo figure {
  float: left;
  width: 50%;
}
.super-double-photo figure figcaption {
  padding: 2px 10px;
}
.super-600.super-double-photo figure figcaption,
.super-900.super-double-photo figure figcaption {
  padding: 2px 5px 2px 0;
}

.super-triple-photo {
  width: 100%;
  max-width: none;
}
.super-triple-photo figure {
  float: left;
  width: 33.33333333%;
}
.super-triple-photo figure figcaption {
  padding: 2px 10px;
}
.content figure.super-figure-wide {
  margin-left: 120px;
  width: 720px;
}
.content figure.super-figure-wide.super-figure-wide-left {
  margin-left: 0;
}
@media only screen and (max-width : 970px) {
  .content figure.super-figure-wide,
  .content figure.super-figure-wide.super-figure-wide-left {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}


@media screen and (max-width: 600px) {
  .super-double-photo figure, .super-triple-photo figure {
    float: none;
    width: 100%;
    margin-bottom: 20px;

  }
  .super-double-photo figure:last-child,
  .super-triple-photo figure:last-child {
    margin-bottom: 0px;
  }
}


@media screen and (min-width: 970px) {
  article.super .content {
    padding: 0 50px;
    width: 940px !important;
  }

  #reveal-bar .container {
    width: 900px;
    padding-left: 20px;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
/*  .content .super-photo-600,
  .content .super-aside-600 {
    margin-left: 120px;
  }*/
}



@media screen and (max-width: 979px) {


  .container {
    width: 100% !important;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  body.main #page, body.land #page {
    margin-left: 0;
  }
  #page {
    padding: 0 !important;
  }

  #super-lead-image {
    /*height: 400px;*/
  }
  article.super {
    margin-top: 0;
  }
  .content.post {
    max-width: 600px;
    margin: 0 auto;
  }
  article.super header h1,
  article.super header h2 {
    width: 100%
  }
  article.super header h1 {
    margin-top: 0;
  }
  article.super header {
    padding-top: 0 !important;
    margin: 0;
    width: 100%;
    max-width: 600px;
  }
  article {
    width: 100%;
    max-width: 600px !important;
    margin: 0 auto;
  }
  article.super table {
    max-width: 100% ;
    /*width: 300px;*/
  }


  .article-meta {
  margin-left: 0;
  width: 100%;
  }
  .super-image-caption {
    margin: 6px 0 20px 20px;
    padding: 10px;
    background: #eee;
  }
    figure.pull-right {
    max-width: 300px;
  }
}
.article-gallery {
  max-width: 600px;
  margin: 0 auto;
}

.article-gallery h2 {
  font-family: 'Verlag 7r','Verlag A','Verlag B';
  font-size: 20px;
  margin: 0 0 10px;
  font-weight: 700;
}

.super #related-articles {
  max-width: 600px;
  width: 100%;
  float: none;
  margin: 0 auto;
}

article.super .related .content {
  width: auto !important;
}

.super #related-articles .related-articles {
  width: 50%;
  padding-right: 20px;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  float: left;
}

.super #related-articles .popular {
  width: 50%;
  float: left;
}
.super .content #related-articles .popular-h2 {
  margin        : 0 0 5px 0;
  padding       : 6px 15px;
  background    : #eee;
  text-transform: uppercase;
  font-weight   : 400;
  font-style    : italic;
  font-size     : 20px;
  line-height   : normal;
  display       : block;
  color         : #000;
}

.super #related-articles .related {
  margin-bottom: 10px;
}

.super #related-articles .popular a.title {
  margin-bottom: 5px;
}
.super #related-articles .popular ol {
  margin: 0;
  padding-left: 0;
  width: 100%;
}
.super .content  #related-articles .popular li {
  border-top      : 1px solid #fff;
  list-style      : none;
  list-style-image: none;
  font-family     : 'Verlag 4r','Verlag A','Verlag B';
  width           : auto;
  margin-bottom   : 0;
  margin-left: 0;

}

.super .content  #related-articles .popular li em {
    font-family: 'Verlag 4i','Verlag A','Verlag B';
    font-style: italic;
}

.super #related-articles .popular li a {
  display               : block;
  min-height            : 35px;
  padding               : 8px 35px 8px 50px;
  color                 : #000;
  font-weight           : 400;
  font-size             : 14px;
  line-height           : 17px;
  -webkit-font-smoothing: antialiased;
  background            : #eee;
}
.super #related-articles .popular li a:hover {
  color: #ff0000;
}
.super #related-articles .popular li a .icon-circle {
  position             : absolute;
  margin               : 0px 0 0 -35px;
  padding              : 4px 4px;
  border               : 1px solid #eee;
  -webkit-border-radius: 30px;
  -moz-border-radius   : 30px;
  border-radius        : 30px;
  color                : #ff0000;
  font-size            : 10px;
  line-height          : 16px;
  text-align           : center;
  vertical-align       : middle;
}



.super #related-articles .popular ol li:nth-child(2) a .icon-circle{
  color: #ff122d;
}
.super #related-articles .popular ol li:nth-child(3) a .icon-circle{
  color: #ff454f;
}
.super #related-articles .popular ol li:nth-child(4) a .icon-circle{
  color: #ff676d;
}
.super #related-articles .popular ol li:nth-child(5) a .icon-circle{
  color: #ff8388;
}
.super #related-articles .popular ol li:nth-child(6) a .icon-circle{
  color: #ff9fa1;
}.super #related-articles .popular ol li:nth-child(7) a .icon-circle{
  color: #ff9fa1;
}
.super #related-articles .popular ol li:nth-child(8) a .icon-circle{
  color: #ff9fa1;
}
.super #related-articles .popular ol li:nth-child(9) a .icon-circle{
  color: #fbbabb;
}
.super #related-articles .popular ol li:nth-child(10) a .icon-circle{
  color: #f6d4d5;
}
.super #related-articles .popular ol li a:hover .icon-circle{
  border: 1px solid #ff0000;
}


.super #related-articles .time {
  text-align: left;
  width: 100%;
}

.super .content #related-articles h2 {
  width: auto;
  margin-bottom: 0;
}

@media only screen and (max-width : 900px) {
  .super-900 {
    width: 100%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media screen and (max-width: 600px) {



  .super #related-articles .related-articles,
  .super #related-articles .popular,
  .super aside.pull-right {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 979px) and (min-width: 768px){

  .row {
    max-width: 744px;
  }
}

@media screen and (max-width: 767px) {
  .super .content footer {
    margin-left: 0;
    width: 100%;
    float: none;
  }
  article.super aside.related-content.pull-right {
    width: 100%;
    margin-left: 0;
  }

}
@media screen and (min-width: 621px) {
    article .content.post {
    width: 600px;
  }

}


@media screen and (max-width: 620px) {
.post.content {
    padding: 0 10px !important;
  }
  .super-wide-video figcaption {
  padding: 3px 10px;
  }

  article.super header h1 {
    font-size: 48px;
    line-height: normal;
  }

  article.super header h2.deck {
    font-size: 24px;
  }
    #super-lead-image {
    /*height: 300px !important;*/
  }
  .commentFormContainer {
    width: 100%;
  }
  .map-fullwidth figcaption {
    width: 100%;
  }
  .super-600, .super-900 {
    width: 100%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .content .super-600, .content .super-900 {
    padding-left: 0;
    padding-right: 0;
  }
  .ad-sq-super {
    margin-left: auto !important;
    margin-right: auto  !important;
    float: none !important;
  }
  .map-wrap,
  .map-wrap-inner {
    width: 100%;
  }
/*  .super .content p,
  .super .content li,
  .super .content ol,
  .super .content h2,
  .super .content h3,
  .super .content h4 {
  width: 100%;
  }*/
    article.super table {
    max-width: 100% !important;
    /*width: 100% !important;*/
  }
}


.content .subscribe.widget ul li {
  list-style-type: none;
  margin-bottom: 0;
}
.content .subscribe.widget ul {
  padding-left: 0;
}

.subscribe.widget.pull-right img {
  display: block;
}
.subscribe.widget .issue a {
  display: block;
  max-width: 110px;
  margin-left: auto;
  margin-right: auto;
}
.subscribe.widget.pull-right {
  margin-left: 20px;
}

.widget.subscribe::after {
  height: 1px;
}

@media screen and (max-width: 450px) {
    #super-lead-image {
    /*height: 200px !important;*/
  }
  article.super aside {
    width: 100%;
    float: none;
    max-width: none;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }

  .subscribe.widget.pull-right,
  article.super .newsletter-reveal.pull-right {
    float: none !important;
    margin-left: 0;
    width: 100%;
  }
}

@media print {
  #super-lead-image,
  #fbShare {
    display: none;
  }

  article.super header {
    background: none;
  }
  article.super {
    margin-top: 0;
  }
}