Last active
August 29, 2015 14:05
-
-
Save clintfisher/eebfd06de5cae650f6ec to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .media-lede { | |
| margin-bottom: 45px; | |
| } | |
| .media-lede .caption { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 17px; | |
| line-height: 1.0625rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .media-lede .credit { | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .media-layout-small-horizontal-lede { | |
| width: 300px; | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-small-horizontal-lede .caption, | |
| .media-layout-small-horizontal-lede .credit { | |
| font-size: 12px; | |
| font-size: 0.75rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-small-horizontal-lede, .has-half-page .media-layout-small-horizontal-lede { | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .media-layout-small-vertical-lede { | |
| width: 180px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| } | |
| .media-layout-small-vertical-lede .caption, | |
| .media-layout-small-vertical-lede .credit { | |
| font-size: 12px; | |
| font-size: 0.75rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-small-vertical-lede { | |
| padding: 0 120px 7px 0; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .has-big-ad .media-layout-small-vertical-lede .caption { | |
| width: 105px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-small-vertical-lede { | |
| width: 150px; | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-large-horizontal-lede { | |
| width: 720px; | |
| } | |
| .media-layout-large-horizontal-lede .image, | |
| .media-layout-large-horizontal-lede .video-bind { | |
| width: 585px; | |
| } | |
| .media-layout-large-horizontal-lede .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede, .has-half-page .media-layout-large-horizontal-lede { | |
| width: 300px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 45px 40px; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede .image, | |
| .has-big-ad .media-layout-large-horizontal-lede .video-bind, .has-half-page .media-layout-large-horizontal-lede .image, | |
| .has-half-page .media-layout-large-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede .caption, .has-half-page .media-layout-large-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .has-half-page .media-layout-large-horizontal-lede { | |
| width: 390px; | |
| float: left; | |
| clear: left; | |
| margin: 5px -10px 45px 0; | |
| } | |
| .media-layout-large-vertical-lede { | |
| width: 345px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede, .has-half-page .media-layout-large-vertical-lede { | |
| width: 180px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede { | |
| padding: 0 120px 7px 0; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede .caption { | |
| width: 105px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-large-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| width: 720px; | |
| } | |
| .media-layout-jumbo-horizontal-lede .caption { | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| max-width: 615px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .caption, .has-half-page .media-layout-jumbo-horizontal-lede .caption, .has-xxl .media-layout-jumbo-horizontal-lede .caption { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 17px; | |
| line-height: 1.0625rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede { | |
| margin-bottom: 30px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .image, | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .video-bind { | |
| width: 585px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-jumbo-horizontal-lede { | |
| width: 390px; | |
| float: left; | |
| clear: left; | |
| margin: 5px -10px 45px 0; | |
| } | |
| .media-embedded { | |
| margin-left: 105px; | |
| margin-top: 45px; | |
| margin-bottom: 45px; | |
| } | |
| .moz .media-embedded { | |
| clear: both; | |
| } | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-small-vertical-embedded { | |
| margin-left: 0px; | |
| margin-right: 30px; | |
| float: left; | |
| clear: left; | |
| margin-top: 6px; | |
| } | |
| .media-layout-small-horizontal-embedded { | |
| width: 315px; | |
| } | |
| .media-layout-small-vertical-embedded { | |
| width: 180px; | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| width: 420px; | |
| margin-left: 150px; | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| width: 510px; | |
| } | |
| .media-layout-large-horizontal-embedded .image, | |
| .media-layout-large-horizontal-embedded .video-bind { | |
| width: 510px; | |
| } | |
| .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 287px; | |
| } | |
| .media-layout-large-vertical-embedded { | |
| width: 450px; | |
| } | |
| .media-layout-large-vertical-embedded .image { | |
| width: 315px; | |
| } | |
| .media-layout-large-vertical-embedded .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| width: 720px; | |
| margin-left: 0px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded .image { | |
| width: 720px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 600px; | |
| } | |
| .media-inline { | |
| width: 225px; | |
| float: left; | |
| clear: left; | |
| margin: 0 30px 30px 0; | |
| margin-left: 0 !important; | |
| } | |
| .media-inline.first-inline { | |
| margin-top: 22px; | |
| } | |
| .media-inline.last-inline { | |
| margin-bottom: 37px; | |
| } | |
| .media-inline .caption, | |
| .media-inline .credit { | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| line-height: 14px; | |
| line-height: 0.875rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .viewport-medium-30 .media-layout-small-horizontal-lede { | |
| width: 270px; | |
| } | |
| .viewport-medium-30 .media-layout-small-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 30px 45px 0; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede { | |
| width: 540px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 45px 30px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .image, | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30 .media-layout-large-vertical-lede { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-lede { | |
| width: 945px; | |
| } | |
| .viewport-medium-30 .media-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-medium-30.moz .media-embedded { | |
| clear: none; | |
| } | |
| .viewport-medium-30.moz .media-inline { | |
| clear: left; | |
| } | |
| .viewport-medium-30.moz .media-layout-jumbo-horizontal-embedded { | |
| clear: both; | |
| } | |
| .viewport-medium-30 .media-layout-small-vertical-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-medium-30 .media-layout-horizontal-inset-embedded { | |
| width: 405px; | |
| margin-left: 165px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded .image, | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-medium-30 .media-layout-small-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded { | |
| width: 945px; | |
| margin-left: 0px; | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 945px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 615px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 810px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 26px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-small-horizontal-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-lede { | |
| width: 450px; | |
| float: left; | |
| clear: left; | |
| margin: 0 0 45px 0; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 450px; | |
| float: left; | |
| clear: left; | |
| margin: 0 0 45px 0; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 240px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 330px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 330px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 186px; | |
| } | |
| .viewport-medium-30.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-small-vertical-lede, | |
| .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-small-vertical-lede .caption, | |
| .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .image, | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-small-vertical-lede { | |
| width: 180px; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-small-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-small-horizontal-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-large-horizontal-lede { | |
| width: 615px; | |
| float: left; | |
| clear: left; | |
| margin: 0 15px 45px 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-vertical-lede, .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede { | |
| width: 315px; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 615px; | |
| float: left; | |
| clear: left; | |
| margin: 0 15px 45px 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-vertical-lede, .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede, .viewport-medium-30.has-xxl .media-layout-large-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded .image { | |
| width: 315px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded .caption { | |
| margin-left: 330px; | |
| right: auto; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 315px; | |
| position: static; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-slideshow-in-page-player { | |
| width: 495px; | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-lede { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 615px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 825px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 255px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 345px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 345px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 194px; | |
| } | |
| .viewport-medium-40.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-40.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-medium-50 .media-layout-jumbo-horizontal-lede { | |
| width: 960px; | |
| } | |
| .viewport-medium-50.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-50.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-medium-50.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 615px; | |
| } | |
| .viewport-medium-50.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-50.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-lede { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 840px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-medium-60.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 480px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 270px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 360px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 360px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 203px; | |
| } | |
| .viewport-medium-60.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-60.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-lede { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-lede .caption { | |
| max-width: 660px; | |
| } | |
| .viewport-large .media-layout-horizontal-inset-embedded { | |
| width: 450px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded { | |
| width: 735px; | |
| margin-left: 90px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded .image, | |
| .viewport-large .media-layout-large-horizontal-embedded .video-bind { | |
| width: 600px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 338px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 120px; | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .image, | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency.youtube .video-bind { | |
| height: 304px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-large .media-layout-large-vertical-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-vertical-embedded .image { | |
| width: 405px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded .image { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 855px; | |
| } | |
| .viewport-large.has-xxl .media-layout-small-horizontal-lede { | |
| width: 270px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 285px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 375px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 375px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 211px; | |
| } | |
| .viewport-large.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 240px; | |
| } | |
| .viewport-large.has-half-page .media-layout-large-horizontal-lede, | |
| .viewport-large.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-large.has-big-ad .media-layout-large-horizontal-lede, | |
| .viewport-large.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 660px; | |
| } | |
| .viewport-large.has-half-page .media-layout-large-vertical-lede, .viewport-large.has-big-ad .media-layout-large-vertical-lede { | |
| width: 360px; | |
| margin-right: 30px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| width: 405px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 0px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| margin-left: 0px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-lede { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-lede .caption { | |
| max-width: 675px; | |
| } | |
| .viewport-large-10 .media-embedded { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-small-vertical-embedded { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-horizontal-inset-embedded { | |
| margin-left: 180px; | |
| } | |
| .viewport-large-10 .media-layout-large-horizontal-embedded { | |
| margin-left: 105px; | |
| } | |
| .viewport-large-10 .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 885px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 525px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 300px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 390px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 390px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 219px; | |
| } | |
| .viewport-large-10.has-half-page .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-large-10.has-big-ad .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 675px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-horizontal-inset-lede { | |
| width: 450px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 540px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 304px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 540px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 540px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-lede { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 915px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large-30.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 555px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 330px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 420px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 420px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 236px; | |
| } | |
| .viewport-large-30.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 270px; | |
| } | |
| .viewport-large-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 540px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 630px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 495px; | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| margin-left: 165px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 630px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 630px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 675px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-small-vertical-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-small-horizontal-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-vertical-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| width: 450px; | |
| margin-left: 180px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 305px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 675px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 675px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.1) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // typography | |
| // monochrome - dark to light | |
| $black: #000; | |
| $gray-10: #121212; | |
| $gray-20: #333; | |
| $gray-30: #666; | |
| $gray-40: #999; | |
| $gray-45: #b3b3b3; | |
| $gray-50: #ccc; | |
| $gray-60: #e2e2e2; | |
| $gray-70: #ebebeb; | |
| $gray-80: #f3f3f3; | |
| $gray-90: #f7f7f7; | |
| $white: #fff; | |
| // blue - dark to light | |
| $blue-10: #004276; | |
| $blue-20: #326891; | |
| $blue-30: #6288a5; | |
| $blue-40: #879cb4; | |
| $blue-50: #f0f8fc; | |
| // red - dark to light | |
| $red-10: #a81817; | |
| $red-20: #d31e25; | |
| // yellow - dark to light | |
| $yellow-10: #c5a257; | |
| $yellow-20: #f8f8d4; | |
| $yellow-30: #fbfbea; | |
| // misc - dark to light | |
| $newsprint-10: #bab8b3; | |
| $newsprint-20: #e9ebe4; | |
| $newsprint-25: #f4f5f2; | |
| $newsprint-30: #f7f7f5; | |
| $text-color: $gray-20; | |
| $link-color: $blue-20; | |
| $link-visited-color: $blue-20; | |
| // font weights | |
| $bold: 700; | |
| $medium-bold: 600; | |
| $medium: 500; | |
| $normal: 400; | |
| $light: 300; | |
| $extra-light: 200; | |
| $base-font-size: 16; //px | |
| // font stacks | |
| $sans-base: arial, helvetica, sans-serif; | |
| $sans-franklin: "nyt-franklin", $sans-base; | |
| $sans: $sans-franklin; | |
| $serif-base: georgia, "times new roman", times, serif; | |
| $serif-chelt: "nyt-cheltenham", $serif-base; | |
| $serif-chelt-x-cn-bd: "nyt-cheltenham-extra-cn-bd", $serif-base; | |
| $serif-chelt-sh: "nyt-cheltenham-sh", $serif-base; | |
| $serif-karnak: "nyt-karnak-display", "nyt-karnak-display-130124", $serif-base; | |
| $serif-stymie: "nyt-stymie", $serif-base; | |
| $serif: $serif-chelt; | |
| $base-font-family: $serif; | |
| $alt-font-family: $sans; | |
| // grid system | |
| $grid-unit: 45px; | |
| $grid-unit-mini: 15px; | |
| $grid-unit-micro: 7px; | |
| // shorthand for font size / line height | |
| @mixin font($family, $size, $line-height, $weight: $normal, $base-size: $base-font-size) { | |
| $new-size: ($size / $base-size); | |
| $new-line-height: ($line-height / $base-size); | |
| font-size: ($size + px); | |
| font-size: ($new-size + rem); | |
| line-height: ($line-height + px); | |
| line-height: ($new-line-height + rem); | |
| font-weight: $weight; | |
| font-family: $family; | |
| } | |
| @mixin inset ($top: 10px, $right: 10px, $bottom: 10px, $left: 10px) { | |
| padding: $top $right $bottom $left; | |
| } | |
| @mixin no-inset { | |
| padding: 0; | |
| } | |
| @mixin runaround ($direction, $top, $right, $bottom, $left) { | |
| float: $direction; | |
| clear: $direction; | |
| margin: $top $right $bottom $left; | |
| } | |
| // grid | |
| @mixin span ($standard: 0, $mini: 0, $micro: 0) { | |
| width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| } | |
| @mixin span-max-width ($standard: 0, $mini: 0, $micro: 0) { | |
| max-width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| } | |
| // offsets | |
| @mixin offset ($standard: 0, $mini: 0, $micro: 0, $direction: left) { | |
| $total: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| @if $direction == top { | |
| margin-top: $total; | |
| } | |
| @if $direction == right { | |
| margin-right: $total; | |
| } @else if $direction == bottom { | |
| margin-bottom: $total; | |
| } @else if $direction == left { | |
| margin-left: $total; | |
| } | |
| } | |
| @mixin offset-positioned ($standard: 0, $mini: 0, $micro: 0, $direction: left) { | |
| $total: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| @if $direction == top { | |
| top: $total; | |
| } @else if $direction == right { | |
| right: $total; | |
| } @else if $direction == bottom { | |
| bottom: $total; | |
| } @else if $direction == left { | |
| left: $total; | |
| } | |
| } | |
| @mixin single-rule ($border-width: 1px, $border-style: solid, $border-color: $gray-50, $location: top) { | |
| $border-properties: $border-width $border-style $border-color; | |
| @if $location == top { | |
| border-top: $border-properties; | |
| padding-top: $grid-unit-micro; | |
| } @else if $location == bottom { | |
| border-bottom: $border-properties; | |
| padding-bottom: $grid-unit-micro; | |
| } @else if $location == right { | |
| border-right: $border-properties; | |
| padding-right: $grid-unit-micro; | |
| } @else if $location == left { | |
| border-left: $border-properties; | |
| padding-left: $grid-unit-micro; | |
| } | |
| } // end single-rule | |
| @mixin no-single-rule ($location: top) { | |
| @if $location == top { | |
| border-top: none; | |
| padding-top: 0; | |
| } @else if $location == bottom { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } @else if $location == right { | |
| border-right: none; | |
| padding-right: 0; | |
| } @else if $location == left { | |
| border-left: none; | |
| padding-left: 0; | |
| } | |
| } | |
| // media | |
| .media {} | |
| // lede media | |
| .media-lede { | |
| @include offset(1, 0, 0, bottom); | |
| .caption { | |
| @include font($serif-chelt-sh, 13, 17, $light); | |
| } | |
| .credit { | |
| @include font($serif-chelt-sh, 11, 18); | |
| } | |
| } // end media-lede | |
| .media-layout-small-horizontal-lede { | |
| @include span(6, 2); // 300 | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 12, 16); | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| } | |
| } // end media-layout-small-horizontal-lede | |
| .media-layout-small-vertical-lede { | |
| @include span(4); // 180 | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 12, 16); | |
| } | |
| // ad conditions | |
| .has-big-ad & { | |
| @include inset(0, 120px, $grid-unit-micro, 0); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| .caption { | |
| @include span(2, 1); // 105 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } | |
| .has-half-page & { | |
| @include span(3, 1); // 150 | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end media-layout-small-vertical-lede | |
| .media-layout-large-horizontal-lede { | |
| @include span(16); // 720 (includes gutter and caption) | |
| .image, | |
| .video-bind { | |
| @include span(13); // 585 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include span(6, 2); // 300 | |
| @include runaround(right, 5px, 0, $grid-unit, 40px); | |
| @include no-single-rule(bottom); | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end has-big-ad | |
| .has-half-page & { | |
| @include span(8, 2); // 390 | |
| @include runaround(left, 5px, -10px, $grid-unit, 0); | |
| } | |
| } // end media-layout-large-horizontal-lede | |
| .media-layout-large-vertical-lede { | |
| @include span(7, 2); // 345 | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include span(4); // 180 | |
| } | |
| .has-big-ad & { | |
| @include inset(0, 120px, $grid-unit-micro, 0); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| .caption { | |
| @include span(2, 1); // 105 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } // end has-big-ad | |
| .has-half-page & { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end media-layout-large-vertical-lede | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(16); // 720 | |
| .caption { | |
| @include font($serif-chelt-sh, 14, 18, $light); | |
| @include span-max-width(13, 2, 0); // 615 | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page &, | |
| .has-xxl & { | |
| .caption { | |
| @include font($serif-chelt-sh, 13, 17, $light); | |
| } | |
| } | |
| .has-big-ad & { | |
| @include offset(0, 2, 0, bottom); | |
| .image, | |
| .video-bind { | |
| @include span(13); // 585 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } | |
| .has-half-page & { | |
| @include span(8, 2); // 390 | |
| @include runaround(left, 5px, -10px, $grid-unit, 0); | |
| } | |
| } // media-layout-jumbo-horizontal-lede | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 1, 0, left); // 105 | |
| @include offset(1, 0, 0, top); | |
| @include offset(1, 0, 0, bottom); | |
| // ff will overlap a non floated, non clearing element (media) with a floated element (sharetools, ad, marginialia) | |
| // when there is not enough horizontal space to fit both, instead of rendering on a new line like other browsers | |
| // so here we will have ff clear in both directions so that it behaves like other browsers | |
| // if ff ever fixes this render issue we can remove these clearing hacks | |
| .moz & { | |
| clear: both; | |
| } | |
| } // end media-embedded | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-small-vertical-embedded { | |
| @include offset(0, 0, 0, left); | |
| @include offset(0, 2, 0, right); | |
| float: left; | |
| clear: left; | |
| margin-top: 6px; | |
| } | |
| .media-layout-small-horizontal-embedded { | |
| @include span(6, 3); // 315 | |
| } | |
| .media-layout-small-vertical-embedded { | |
| @include span(4); // 180 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9, 1); // 420 | |
| @include offset(3, 1, 0, left); // 150 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11, 1); // 510 | |
| .image, | |
| .video-bind { | |
| @include span(11, 1); // 510 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 287px; // video-bind uses 16:9 ratio | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded { | |
| @include span(10); // 450 (includes gutter and caption) | |
| .image { | |
| @include span(6, 3); // 315 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } // media-layout-large-vertical-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(16); // 720 | |
| @include offset(0); | |
| .image { | |
| @include span(16); // 720 | |
| } | |
| .caption { | |
| @include span(13, 1); // 600 | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // inline media // shares .media-embedded class | |
| .media-inline { | |
| @include span(5); // 225 | |
| @include runaround(left, 0, ($grid-unit-mini * 2), ($grid-unit-mini * 2), 0); | |
| margin-left: 0 !important; | |
| &.first-inline { | |
| @include offset(0, 1, 1, top); | |
| } | |
| &.last-inline { | |
| @include offset(0, 2, 1, bottom); | |
| } | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 11, 14); | |
| } | |
| } // end media-inline | |
| // responsive | |
| // 960 | |
| .viewport-medium-30 { | |
| // lede media | |
| .media-layout-small-horizontal-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| .media-layout-small-vertical-lede { | |
| @include runaround(left, 5px, ($grid-unit-mini * 2), $grid-unit, 0); | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(12); // 540 | |
| @include runaround(right, 5px, 0, $grid-unit, ($grid-unit-mini * 2)); | |
| // return caption to bottom | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end media-layout-large-horizontal-lede | |
| .media-layout-large-vertical-lede { | |
| @include span(11); // 495 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21); // 945 | |
| } | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| &.moz { | |
| // now that we are wider we can have ff not clear embedded media | |
| // because there is room for the elements to render correctly in ff | |
| // so we dont want embedded media to clear except inline embedded media | |
| .media-embedded { | |
| clear: none; | |
| } | |
| // restore inline clear left from runaround mixin (see inline rule) | |
| // otherwise moz rule above will override it | |
| .media-inline { | |
| clear: left; | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| clear: both; | |
| } | |
| } // end moz | |
| .media-layout-small-vertical-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9); // 405 | |
| @include offset(3, 2, 0, left); // 165 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-small-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21); // 945 | |
| @include offset(0, 0, 0, left); | |
| @include offset(0, 2, 0, top); | |
| @include offset(0, 2, 0, bottom); | |
| .image { | |
| @include span(21); // 945 | |
| } | |
| .caption { | |
| @include span(13, 2); // 615 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18); // 810 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 26px; | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| .media-layout-small-horizontal-lede { | |
| @include span(5); // 225 | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(10); // 450 | |
| @include runaround(left, 0, 0, $grid-unit, 0); | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10); // 450 | |
| @include runaround(left, 0, 0, $grid-unit, 0); | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(5,1); // 240 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,1); // 330 | |
| .image, | |
| .video-bind { | |
| @include span(7, 1); // 330 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 186px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5); // 225: should be 330 but using medium-50 value till NWP-1026 | |
| } | |
| } | |
| &.has-big-ad { | |
| .media-layout-small-vertical-lede, | |
| .media-layout-large-vertical-lede { | |
| @include no-single-rule(bottom); | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } | |
| } // end has-big-ad | |
| &.has-half-page { | |
| .media-layout-small-vertical-lede { | |
| @include span(4); // 180 | |
| } | |
| } // end has-half-page | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-small-horizontal-lede { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| @include no-single-rule(bottom); | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| @include runaround(left, 0, $grid-unit-mini, $grid-unit, 0); | |
| @include no-single-rule(bottom); | |
| } | |
| .media-layout-large-vertical-lede { | |
| @include span(6, 3); // 315 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| @include runaround(left, 0, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end has-half-page | |
| &.has-half-page, | |
| &.has-big-ad, | |
| &.has-xxl { | |
| .media-layout-large-vertical-lede { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(7); // 315 | |
| } | |
| .caption { | |
| @include offset(7, 1, 0, left); // 330 | |
| right: auto; | |
| } | |
| } // media-layout-large-vertical-embedded | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| .caption { | |
| @include span(7); // 315 | |
| position: static; | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(11); // 495 | |
| @include offset(0); | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-30 | |
| // 1005 | |
| .viewport-medium-40 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 1); // 960 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21, 1); // 960 | |
| .image { | |
| @include span(21, 1); // 960 | |
| } | |
| .caption { | |
| @include span(13, 2); // 120 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18, 1); // 825 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(5,2); // 255 | |
| } | |
| } // end media-layout-horizontal-inset-embedded | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,2); // 345 | |
| .image, | |
| .video-bind { | |
| @include span(7,2); // 345 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 194px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-40 | |
| // 1020 | |
| .viewport-medium-50 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 1); // 960 | |
| } | |
| // embedded media | |
| // ad conditions | |
| &.has-xxl { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| } | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| } | |
| } | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5); // 225 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end viewport-medium-50 | |
| // 1050 | |
| .viewport-medium-60 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 2); // 975 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21, 2); // 975 | |
| .image { | |
| @include span(21, 2); // 975 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18, 2); // 840 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 2); // 480 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6); // 270 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8); // 360 | |
| .image, | |
| .video-bind { | |
| @include span(8); // 360 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 203px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-60 | |
| // 1080 | |
| .viewport-large { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22); // 990 | |
| .caption { | |
| @include span-max-width(13, 5, 0); // 660 | |
| } | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(10); // 450 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(16, 1); // 735 (includes gutter and caption) | |
| @include offset(2, 0, 0, left); // 90 | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .image, | |
| .video-bind { | |
| @include span(13, 1); // 600 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 338px; | |
| } | |
| } | |
| &.has-adjacency { | |
| @include offset(2, 2, 0, left); // 120 | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 304px; | |
| } | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end has-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(9); // 405 | |
| } | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(22); // 990 | |
| .image { | |
| @include span(22); // 990 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(19); // 855 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-small-horizontal-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6, 1); // 285 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8, 1); // 375 | |
| .image, | |
| .video-bind { | |
| @include span(8, 1); // 375 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 211px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5, 1); // 240 | |
| } | |
| } | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 5); // 660 | |
| } | |
| .media-layout-large-vertical-lede { | |
| @include span(7, 3); // 360 | |
| @include offset(0, 2, 0, right); // 30 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9); // 405 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| &.has-adjacency { | |
| @include offset(0); | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include offset(0); | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large | |
| // 1125 | |
| .viewport-large-10 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22, 2); // 1020 | |
| .caption { | |
| @include span-max-width(15, 0, 0); // 675 | |
| } | |
| } | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| .media-layout-small-vertical-embedded { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include offset(4, 0, 0, left); // 180 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(2, 1, 0, left); // 105 | |
| &.has-adjacency { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(22, 2); // 1020 | |
| .image { | |
| @include span(22, 2); // 1020 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(19, 2); // 885 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11, 2); // 525 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6,2); // 300 | |
| } | |
| } // end media-layout-horizontal-inset-embedded | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8,2); // 390 | |
| .image, | |
| .video-bind { | |
| @include span(8,2); // 390 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 219px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(15); // 675 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-10 | |
| // 1215 | |
| .viewport-large-21 { | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-horizontal-inset-lede { | |
| @include span(10); // 450 | |
| } | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(12); // 540 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(12); // 540 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 304px; | |
| } | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(12); // 540 | |
| @include offset(0); | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0, 0, 0, left); | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(12); // 540 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-21 | |
| // 1245 | |
| .viewport-large-30 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22, 4); // 1050 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(23, 1); // 1050 | |
| .image { | |
| @include span(23, 1); // 1050 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(20, 1); // 915 | |
| } | |
| } | |
| } // end layout-jumbo-horizontal | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(12, 1); // 555 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,1); // 330 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(9,1); // 420 | |
| .image, | |
| .video-bind { | |
| @include span(9,1); // 420 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 236px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(12); // 540 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-30 | |
| // 1335 | |
| .viewport-large-41 { | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(14); // 630 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(11); // 495 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.has-adjacency { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } // end youtube | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(11); // 495 | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-horizontal-inset-embedded { | |
| @include offset(3, 2, 0, left); // 165 | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(14); // 630 | |
| .image { | |
| @include span(14); // 630 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-41 | |
| // 1410 | |
| .viewport-large-51 { | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(15); // 675 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-small-vertical-embedded, | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-large-horizontal-embedded, | |
| .media-layout-large-vertical-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(10); // 450 | |
| @include offset(4, 0, 0, left); // 180 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 305px; | |
| } | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(12); // 540 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(15); // 675 | |
| .image { | |
| @include span(15); // 675 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-51 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.1) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // typography | |
| // monochrome - dark to light | |
| $black: #000; | |
| $gray-10: #121212; | |
| $gray-20: #333; | |
| $gray-30: #666; | |
| $gray-40: #999; | |
| $gray-45: #b3b3b3; | |
| $gray-50: #ccc; | |
| $gray-60: #e2e2e2; | |
| $gray-70: #ebebeb; | |
| $gray-80: #f3f3f3; | |
| $gray-90: #f7f7f7; | |
| $white: #fff; | |
| // blue - dark to light | |
| $blue-10: #004276; | |
| $blue-20: #326891; | |
| $blue-30: #6288a5; | |
| $blue-40: #879cb4; | |
| $blue-50: #f0f8fc; | |
| // red - dark to light | |
| $red-10: #a81817; | |
| $red-20: #d31e25; | |
| // yellow - dark to light | |
| $yellow-10: #c5a257; | |
| $yellow-20: #f8f8d4; | |
| $yellow-30: #fbfbea; | |
| // misc - dark to light | |
| $newsprint-10: #bab8b3; | |
| $newsprint-20: #e9ebe4; | |
| $newsprint-25: #f4f5f2; | |
| $newsprint-30: #f7f7f5; | |
| $text-color: $gray-20; | |
| $link-color: $blue-20; | |
| $link-visited-color: $blue-20; | |
| // font weights | |
| $bold: 700; | |
| $medium-bold: 600; | |
| $medium: 500; | |
| $normal: 400; | |
| $light: 300; | |
| $extra-light: 200; | |
| $base-font-size: 16; //px | |
| // font stacks | |
| $sans-base: arial, helvetica, sans-serif; | |
| $sans-franklin: "nyt-franklin", $sans-base; | |
| $sans: $sans-franklin; | |
| $serif-base: georgia, "times new roman", times, serif; | |
| $serif-chelt: "nyt-cheltenham", $serif-base; | |
| $serif-chelt-x-cn-bd: "nyt-cheltenham-extra-cn-bd", $serif-base; | |
| $serif-chelt-sh: "nyt-cheltenham-sh", $serif-base; | |
| $serif-karnak: "nyt-karnak-display", "nyt-karnak-display-130124", $serif-base; | |
| $serif-stymie: "nyt-stymie", $serif-base; | |
| $serif: $serif-chelt; | |
| $base-font-family: $serif; | |
| $alt-font-family: $sans; | |
| // grid system | |
| $grid-unit: 45px; | |
| $grid-unit-mini: 15px; | |
| $grid-unit-micro: 7px; | |
| // shorthand for font size / line height | |
| @mixin font($family, $size, $line-height, $weight: $normal, $base-size: $base-font-size) { | |
| $new-size: ($size / $base-size); | |
| $new-line-height: ($line-height / $base-size); | |
| font-size: ($size + px); | |
| font-size: ($new-size + rem); | |
| line-height: ($line-height + px); | |
| line-height: ($new-line-height + rem); | |
| font-weight: $weight; | |
| font-family: $family; | |
| } | |
| @mixin inset ($top: 10px, $right: 10px, $bottom: 10px, $left: 10px) { | |
| padding: $top $right $bottom $left; | |
| } | |
| @mixin no-inset { | |
| padding: 0; | |
| } | |
| @mixin runaround ($direction, $top, $right, $bottom, $left) { | |
| float: $direction; | |
| clear: $direction; | |
| margin: $top $right $bottom $left; | |
| } | |
| // grid | |
| @mixin span ($standard: 0, $mini: 0, $micro: 0) { | |
| width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| } | |
| @mixin span-max-width ($standard: 0, $mini: 0, $micro: 0) { | |
| max-width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| } | |
| // offsets | |
| @mixin offset ($standard: 0, $mini: 0, $micro: 0, $direction: left) { | |
| $total: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| @if $direction == top { | |
| margin-top: $total; | |
| } | |
| @if $direction == right { | |
| margin-right: $total; | |
| } @else if $direction == bottom { | |
| margin-bottom: $total; | |
| } @else if $direction == left { | |
| margin-left: $total; | |
| } | |
| } | |
| @mixin offset-positioned ($standard: 0, $mini: 0, $micro: 0, $direction: left) { | |
| $total: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro)); | |
| @if $direction == top { | |
| top: $total; | |
| } @else if $direction == right { | |
| right: $total; | |
| } @else if $direction == bottom { | |
| bottom: $total; | |
| } @else if $direction == left { | |
| left: $total; | |
| } | |
| } | |
| @mixin single-rule ($border-width: 1px, $border-style: solid, $border-color: $gray-50, $location: top) { | |
| $border-properties: $border-width $border-style $border-color; | |
| @if $location == top { | |
| border-top: $border-properties; | |
| padding-top: $grid-unit-micro; | |
| } @else if $location == bottom { | |
| border-bottom: $border-properties; | |
| padding-bottom: $grid-unit-micro; | |
| } @else if $location == right { | |
| border-right: $border-properties; | |
| padding-right: $grid-unit-micro; | |
| } @else if $location == left { | |
| border-left: $border-properties; | |
| padding-left: $grid-unit-micro; | |
| } | |
| } // end single-rule | |
| @mixin no-single-rule ($location: top) { | |
| @if $location == top { | |
| border-top: none; | |
| padding-top: 0; | |
| } @else if $location == bottom { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } @else if $location == right { | |
| border-right: none; | |
| padding-right: 0; | |
| } @else if $location == left { | |
| border-left: none; | |
| padding-left: 0; | |
| } | |
| } | |
| // media | |
| .media {} | |
| // lede media | |
| .media-lede { | |
| @include offset(1, 0, 0, bottom); | |
| .caption { | |
| @include font($serif-chelt-sh, 13, 17, $light); | |
| } | |
| .credit { | |
| @include font($serif-chelt-sh, 11, 18); | |
| } | |
| } // end media-lede | |
| .media-layout-small-horizontal-lede { | |
| @include span(6, 2); // 300 | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 12, 16); | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| } | |
| } // end media-layout-small-horizontal-lede | |
| .media-layout-small-vertical-lede { | |
| @include span(4); // 180 | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 12, 16); | |
| } | |
| // ad conditions | |
| .has-big-ad & { | |
| @include inset(0, 120px, $grid-unit-micro, 0); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| .caption { | |
| @include span(2, 1); // 105 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } | |
| .has-half-page & { | |
| @include span(3, 1); // 150 | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end media-layout-small-vertical-lede | |
| .media-layout-large-horizontal-lede { | |
| @include span(16); // 720 (includes gutter and caption) | |
| .image, | |
| .video-bind { | |
| @include span(13); // 585 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include span(6, 2); // 300 | |
| @include runaround(right, 5px, 0, $grid-unit, 40px); | |
| @include no-single-rule(bottom); | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end has-big-ad | |
| .has-half-page & { | |
| @include span(8, 2); // 390 | |
| @include runaround(left, 5px, -10px, $grid-unit, 0); | |
| } | |
| } // end media-layout-large-horizontal-lede | |
| .media-layout-large-vertical-lede { | |
| @include span(7, 2); // 345 | |
| @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit); | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page & { | |
| @include span(4); // 180 | |
| } | |
| .has-big-ad & { | |
| @include inset(0, 120px, $grid-unit-micro, 0); | |
| @include single-rule(1px, solid, $gray-60, bottom); | |
| .caption { | |
| @include span(2, 1); // 105 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } // end has-big-ad | |
| .has-half-page & { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end media-layout-large-vertical-lede | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(16); // 720 | |
| .caption { | |
| @include font($serif-chelt-sh, 14, 18, $light); | |
| @include span-max-width(13, 2, 0); // 615 | |
| } | |
| // ad conditions | |
| .has-big-ad &, | |
| .has-half-page &, | |
| .has-xxl & { | |
| .caption { | |
| @include font($serif-chelt-sh, 13, 17, $light); | |
| } | |
| } | |
| .has-big-ad & { | |
| @include offset(0, 2, 0, bottom); | |
| .image, | |
| .video-bind { | |
| @include span(13); // 585 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } | |
| .has-half-page & { | |
| @include span(8, 2); // 390 | |
| @include runaround(left, 5px, -10px, $grid-unit, 0); | |
| } | |
| } // media-layout-jumbo-horizontal-lede | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 1, 0, left); // 105 | |
| @include offset(1, 0, 0, top); | |
| @include offset(1, 0, 0, bottom); | |
| // ff will overlap a non floated, non clearing element (media) with a floated element (sharetools, ad, marginialia) | |
| // when there is not enough horizontal space to fit both, instead of rendering on a new line like other browsers | |
| // so here we will have ff clear in both directions so that it behaves like other browsers | |
| // if ff ever fixes this render issue we can remove these clearing hacks | |
| .moz & { | |
| clear: both; | |
| } | |
| } // end media-embedded | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-small-vertical-embedded { | |
| @include offset(0, 0, 0, left); | |
| @include offset(0, 2, 0, right); | |
| float: left; | |
| clear: left; | |
| margin-top: 6px; | |
| } | |
| .media-layout-small-horizontal-embedded { | |
| @include span(6, 3); // 315 | |
| } | |
| .media-layout-small-vertical-embedded { | |
| @include span(4); // 180 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9, 1); // 420 | |
| @include offset(3, 1, 0, left); // 150 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11, 1); // 510 | |
| .image, | |
| .video-bind { | |
| @include span(11, 1); // 510 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 287px; // video-bind uses 16:9 ratio | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded { | |
| @include span(10); // 450 (includes gutter and caption) | |
| .image { | |
| @include span(6, 3); // 315 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| } // media-layout-large-vertical-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(16); // 720 | |
| @include offset(0); | |
| .image { | |
| @include span(16); // 720 | |
| } | |
| .caption { | |
| @include span(13, 1); // 600 | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // inline media // shares .media-embedded class | |
| .media-inline { | |
| @include span(5); // 225 | |
| @include runaround(left, 0, ($grid-unit-mini * 2), ($grid-unit-mini * 2), 0); | |
| margin-left: 0 !important; | |
| &.first-inline { | |
| @include offset(0, 1, 1, top); | |
| } | |
| &.last-inline { | |
| @include offset(0, 2, 1, bottom); | |
| } | |
| .caption, | |
| .credit { | |
| @include font($serif-chelt-sh, 11, 14); | |
| } | |
| } // end media-inline | |
| // responsive | |
| // 960 | |
| .viewport-medium-30 { | |
| // lede media | |
| .media-layout-small-horizontal-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| .media-layout-small-vertical-lede { | |
| @include runaround(left, 5px, ($grid-unit-mini * 2), $grid-unit, 0); | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(12); // 540 | |
| @include runaround(right, 5px, 0, $grid-unit, ($grid-unit-mini * 2)); | |
| // return caption to bottom | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end media-layout-large-horizontal-lede | |
| .media-layout-large-vertical-lede { | |
| @include span(11); // 495 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21); // 945 | |
| } | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| &.moz { | |
| // now that we are wider we can have ff not clear embedded media | |
| // because there is room for the elements to render correctly in ff | |
| // so we dont want embedded media to clear except inline embedded media | |
| .media-embedded { | |
| clear: none; | |
| } | |
| // restore inline clear left from runaround mixin (see inline rule) | |
| // otherwise moz rule above will override it | |
| .media-inline { | |
| clear: left; | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| clear: both; | |
| } | |
| } // end moz | |
| .media-layout-small-vertical-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9); // 405 | |
| @include offset(3, 2, 0, left); // 165 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-small-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21); // 945 | |
| @include offset(0, 0, 0, left); | |
| @include offset(0, 2, 0, top); | |
| @include offset(0, 2, 0, bottom); | |
| .image { | |
| @include span(21); // 945 | |
| } | |
| .caption { | |
| @include span(13, 2); // 615 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18); // 810 | |
| } | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 26px; | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| .media-layout-small-horizontal-lede { | |
| @include span(5); // 225 | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(10); // 450 | |
| @include runaround(left, 0, 0, $grid-unit, 0); | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10); // 450 | |
| @include runaround(left, 0, 0, $grid-unit, 0); | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(5,1); // 240 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,1); // 330 | |
| .image, | |
| .video-bind { | |
| @include span(7, 1); // 330 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 186px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5); // 225: should be 330 but using medium-50 value till NWP-1026 | |
| } | |
| } | |
| &.has-big-ad { | |
| .media-layout-small-vertical-lede, | |
| .media-layout-large-vertical-lede { | |
| @include no-single-rule(bottom); | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| .image, | |
| .video-bind { | |
| width: auto; | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } | |
| } // end has-big-ad | |
| &.has-half-page { | |
| .media-layout-small-vertical-lede { | |
| @include span(4); // 180 | |
| } | |
| } // end has-half-page | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-small-horizontal-lede { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| @include no-single-rule(bottom); | |
| } | |
| .media-layout-large-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| @include runaround(left, 0, $grid-unit-mini, $grid-unit, 0); | |
| @include no-single-rule(bottom); | |
| } | |
| .media-layout-large-vertical-lede { | |
| @include span(6, 3); // 315 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| @include runaround(left, 0, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } // end has-half-page | |
| &.has-half-page, | |
| &.has-big-ad, | |
| &.has-xxl { | |
| .media-layout-large-vertical-lede { | |
| @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0); | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(7); // 315 | |
| } | |
| .caption { | |
| @include offset(7, 1, 0, left); // 330 | |
| right: auto; | |
| } | |
| } // media-layout-large-vertical-embedded | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| .caption { | |
| @include span(7); // 315 | |
| position: static; | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(11); // 495 | |
| @include offset(0); | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-30 | |
| // 1005 | |
| .viewport-medium-40 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 1); // 960 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21, 1); // 960 | |
| .image { | |
| @include span(21, 1); // 960 | |
| } | |
| .caption { | |
| @include span(13, 2); // 120 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18, 1); // 825 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(5,2); // 255 | |
| } | |
| } // end media-layout-horizontal-inset-embedded | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,2); // 345 | |
| .image, | |
| .video-bind { | |
| @include span(7,2); // 345 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 194px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-40 | |
| // 1020 | |
| .viewport-medium-50 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 1); // 960 | |
| } | |
| // embedded media | |
| // ad conditions | |
| &.has-xxl { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 1); // 465 | |
| } | |
| } | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 2); // 615 | |
| } | |
| } | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5); // 225 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end viewport-medium-50 | |
| // 1050 | |
| .viewport-medium-60 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(21, 2); // 975 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(21, 2); // 975 | |
| .image { | |
| @include span(21, 2); // 975 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(18, 2); // 840 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(10, 2); // 480 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6); // 270 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8); // 360 | |
| .image, | |
| .video-bind { | |
| @include span(8); // 360 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 203px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-medium-60 | |
| // 1080 | |
| .viewport-large { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22); // 990 | |
| .caption { | |
| @include span-max-width(13, 5, 0); // 660 | |
| } | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(10); // 450 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(16, 1); // 735 (includes gutter and caption) | |
| @include offset(2, 0, 0, left); // 90 | |
| .caption { | |
| @include span(2, 2); // 120 | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .image, | |
| .video-bind { | |
| @include span(13, 1); // 600 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 338px; | |
| } | |
| } | |
| &.has-adjacency { | |
| @include offset(2, 2, 0, left); // 120 | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 304px; | |
| } | |
| } | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| } // end has-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(9); // 405 | |
| } | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(22); // 990 | |
| .image { | |
| @include span(22); // 990 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(19); // 855 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-small-horizontal-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6, 1); // 285 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8, 1); // 375 | |
| .image, | |
| .video-bind { | |
| @include span(8, 1); // 375 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 211px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5, 1); // 240 | |
| } | |
| } | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(13, 5); // 660 | |
| } | |
| .media-layout-large-vertical-lede { | |
| @include span(7, 3); // 360 | |
| @include offset(0, 2, 0, right); // 30 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(9); // 405 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| &.has-adjacency { | |
| @include offset(0); | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include offset(0); | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large | |
| // 1125 | |
| .viewport-large-10 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22, 2); // 1020 | |
| .caption { | |
| @include span-max-width(15, 0, 0); // 675 | |
| } | |
| } | |
| // embedded media | |
| .media-embedded { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| .media-layout-small-vertical-embedded { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include offset(4, 0, 0, left); // 180 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(2, 1, 0, left); // 105 | |
| &.has-adjacency { | |
| @include offset(2, 3, 0, left); // 135 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(22, 2); // 1020 | |
| .image { | |
| @include span(22, 2); // 1020 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(19, 2); // 885 | |
| } | |
| } | |
| } // end media-layout-jumbo-horizontal-embedded | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11, 2); // 525 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(6,2); // 300 | |
| } | |
| } // end media-layout-horizontal-inset-embedded | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(8,2); // 390 | |
| .image, | |
| .video-bind { | |
| @include span(8,2); // 390 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 219px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-half-page, | |
| &.has-big-ad { | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(15); // 675 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(11); // 495 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image { | |
| @include span(11); // 495 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-10 | |
| // 1215 | |
| .viewport-large-21 { | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-horizontal-inset-lede { | |
| @include span(10); // 450 | |
| } | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(12); // 540 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0); | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(12); // 540 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 304px; | |
| } | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(12); // 540 | |
| @include offset(0); | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(0, 0, 0, left); | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(12); // 540 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-21 | |
| // 1245 | |
| .viewport-large-30 { | |
| // lede media | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(22, 4); // 1050 | |
| } | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(23, 1); // 1050 | |
| .image { | |
| @include span(23, 1); // 1050 | |
| } | |
| .caption { | |
| @include span(15); // 675 | |
| } | |
| &.ratio-tall { | |
| .image { | |
| @include span(20, 1); // 915 | |
| } | |
| } | |
| } // end layout-jumbo-horizontal | |
| // ad conditions | |
| &.has-xxl { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(12, 1); // 555 | |
| } | |
| // embedded media | |
| .media-layout-horizontal-inset-embedded { | |
| &.has-lede-adjacency { | |
| @include span(7,1); // 330 | |
| } | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| &.has-lede-adjacency { | |
| @include span(9,1); // 420 | |
| .image, | |
| .video-bind { | |
| @include span(9,1); // 420 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 236px; | |
| } | |
| } | |
| } // end has-lede-adjacency | |
| } // end media-layout-large-horizontal-embedded | |
| } // end has-xxl | |
| &.has-xxl.comments-panel-opened { | |
| .media-layout-large-vertical-lede { | |
| @include span(5, 3); // 270 | |
| } | |
| } | |
| // comments panel opened | |
| &.comments-panel-opened { | |
| // embedded media | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image { | |
| @include span(12); // 540 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-30 | |
| // 1335 | |
| .viewport-large-41 { | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(14); // 630 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-large-vertical-embedded, | |
| .media-layout-large-horizontal-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-large-vertical-embedded { | |
| @include span(11); // 495 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(11); // 495 | |
| .image, | |
| .video-bind { | |
| @include span(11); // 495 | |
| } | |
| &.has-adjacency { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 278px; | |
| } | |
| } // end youtube | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(11); // 495 | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-horizontal-inset-embedded { | |
| @include offset(3, 2, 0, left); // 165 | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(14); // 630 | |
| .image { | |
| @include span(14); // 630 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-41 | |
| // 1410 | |
| .viewport-large-51 { | |
| &.comments-panel-opened { | |
| // lede media | |
| .media-layout-large-horizontal-lede, | |
| .media-layout-jumbo-horizontal-lede { | |
| @include span(15); // 675 | |
| @include offset(0); | |
| } | |
| // embedded media | |
| .media-layout-small-vertical-embedded, | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-large-horizontal-embedded, | |
| .media-layout-large-vertical-embedded { | |
| @include offset(2, 2, 0, left); // 120 | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| @include span(10); // 450 | |
| @include offset(4, 0, 0, left); // 180 | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| @include span(12); // 540 | |
| .image, | |
| .video-bind { | |
| @include span(12); // 540 | |
| } | |
| &.youtube { | |
| .video-bind { | |
| height: 305px; | |
| } | |
| } | |
| // CLINT: NOTE - slideshow should be in slideshow scss file not here | |
| .media-slideshow-in-page-player { | |
| @include span(12); // 540 | |
| } | |
| } // end media-layout-large-horizontal-embedded | |
| .media-layout-jumbo-horizontal-embedded { | |
| @include span(15); // 675 | |
| .image { | |
| @include span(15); // 675 | |
| } | |
| } | |
| } // end comments-panel-opened | |
| } // end viewport-large-51 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .media-lede { | |
| margin-bottom: 45px; | |
| } | |
| .media-lede .caption { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 17px; | |
| line-height: 1.0625rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .media-lede .credit { | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .media-layout-small-horizontal-lede { | |
| width: 300px; | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-small-horizontal-lede .caption, | |
| .media-layout-small-horizontal-lede .credit { | |
| font-size: 12px; | |
| font-size: 0.75rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-small-horizontal-lede, .has-half-page .media-layout-small-horizontal-lede { | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .media-layout-small-vertical-lede { | |
| width: 180px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| } | |
| .media-layout-small-vertical-lede .caption, | |
| .media-layout-small-vertical-lede .credit { | |
| font-size: 12px; | |
| font-size: 0.75rem; | |
| line-height: 16px; | |
| line-height: 1rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-small-vertical-lede { | |
| padding: 0 120px 7px 0; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .has-big-ad .media-layout-small-vertical-lede .caption { | |
| width: 105px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-small-vertical-lede { | |
| width: 150px; | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-large-horizontal-lede { | |
| width: 720px; | |
| } | |
| .media-layout-large-horizontal-lede .image, | |
| .media-layout-large-horizontal-lede .video-bind { | |
| width: 585px; | |
| } | |
| .media-layout-large-horizontal-lede .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede, .has-half-page .media-layout-large-horizontal-lede { | |
| width: 300px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 45px 40px; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede .image, | |
| .has-big-ad .media-layout-large-horizontal-lede .video-bind, .has-half-page .media-layout-large-horizontal-lede .image, | |
| .has-half-page .media-layout-large-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .has-big-ad .media-layout-large-horizontal-lede .caption, .has-half-page .media-layout-large-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .has-half-page .media-layout-large-horizontal-lede { | |
| width: 390px; | |
| float: left; | |
| clear: left; | |
| margin: 5px -10px 45px 0; | |
| } | |
| .media-layout-large-vertical-lede { | |
| width: 345px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 15px 45px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede, .has-half-page .media-layout-large-vertical-lede { | |
| width: 180px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede { | |
| padding: 0 120px 7px 0; | |
| border-bottom: 1px solid #e2e2e2; | |
| padding-bottom: 7px; | |
| } | |
| .has-big-ad .media-layout-large-vertical-lede .caption { | |
| width: 105px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-large-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .media-layout-jumbo-horizontal-lede { | |
| width: 720px; | |
| } | |
| .media-layout-jumbo-horizontal-lede .caption { | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| line-height: 18px; | |
| line-height: 1.125rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| max-width: 615px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .caption, .has-half-page .media-layout-jumbo-horizontal-lede .caption, .has-xxl .media-layout-jumbo-horizontal-lede .caption { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: 17px; | |
| line-height: 1.0625rem; | |
| font-weight: 300; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede { | |
| margin-bottom: 30px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .image, | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .video-bind { | |
| width: 585px; | |
| } | |
| .has-big-ad .media-layout-jumbo-horizontal-lede .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .has-half-page .media-layout-jumbo-horizontal-lede { | |
| width: 390px; | |
| float: left; | |
| clear: left; | |
| margin: 5px -10px 45px 0; | |
| } | |
| .media-embedded { | |
| margin-left: 105px; | |
| margin-top: 45px; | |
| margin-bottom: 45px; | |
| } | |
| .moz .media-embedded { | |
| clear: both; | |
| } | |
| .media-layout-small-horizontal-embedded, | |
| .media-layout-small-vertical-embedded { | |
| margin-left: 0px; | |
| margin-right: 30px; | |
| float: left; | |
| clear: left; | |
| margin-top: 6px; | |
| } | |
| .media-layout-small-horizontal-embedded { | |
| width: 315px; | |
| } | |
| .media-layout-small-vertical-embedded { | |
| width: 180px; | |
| } | |
| .media-layout-horizontal-inset-embedded { | |
| width: 420px; | |
| margin-left: 150px; | |
| } | |
| .media-layout-large-horizontal-embedded { | |
| width: 510px; | |
| } | |
| .media-layout-large-horizontal-embedded .image, | |
| .media-layout-large-horizontal-embedded .video-bind { | |
| width: 510px; | |
| } | |
| .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 287px; | |
| } | |
| .media-layout-large-vertical-embedded { | |
| width: 450px; | |
| } | |
| .media-layout-large-vertical-embedded .image { | |
| width: 315px; | |
| } | |
| .media-layout-large-vertical-embedded .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded { | |
| width: 720px; | |
| margin-left: 0px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded .image { | |
| width: 720px; | |
| } | |
| .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 600px; | |
| } | |
| .media-inline { | |
| width: 225px; | |
| float: left; | |
| clear: left; | |
| margin: 0 30px 30px 0; | |
| margin-left: 0 !important; | |
| } | |
| .media-inline.first-inline { | |
| margin-top: 22px; | |
| } | |
| .media-inline.last-inline { | |
| margin-bottom: 37px; | |
| } | |
| .media-inline .caption, | |
| .media-inline .credit { | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| line-height: 14px; | |
| line-height: 0.875rem; | |
| font-weight: 400; | |
| font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif; | |
| } | |
| .viewport-medium-30 .media-layout-small-horizontal-lede { | |
| width: 270px; | |
| } | |
| .viewport-medium-30 .media-layout-small-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 30px 45px 0; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede { | |
| width: 540px; | |
| float: right; | |
| clear: right; | |
| margin: 5px 0 45px 30px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .image, | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30 .media-layout-large-vertical-lede { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-lede { | |
| width: 945px; | |
| } | |
| .viewport-medium-30 .media-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-medium-30.moz .media-embedded { | |
| clear: none; | |
| } | |
| .viewport-medium-30.moz .media-inline { | |
| clear: left; | |
| } | |
| .viewport-medium-30.moz .media-layout-jumbo-horizontal-embedded { | |
| clear: both; | |
| } | |
| .viewport-medium-30 .media-layout-small-vertical-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-medium-30 .media-layout-horizontal-inset-embedded { | |
| width: 405px; | |
| margin-left: 165px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded .image, | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-medium-30 .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-medium-30 .media-layout-small-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded { | |
| width: 945px; | |
| margin-left: 0px; | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 945px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 615px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 810px; | |
| } | |
| .viewport-medium-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 26px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-small-horizontal-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-lede { | |
| width: 450px; | |
| float: left; | |
| clear: left; | |
| margin: 0 0 45px 0; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 450px; | |
| float: left; | |
| clear: left; | |
| margin: 0 0 45px 0; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 240px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 330px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 330px; | |
| } | |
| .viewport-medium-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 186px; | |
| } | |
| .viewport-medium-30.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-small-vertical-lede, | |
| .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-small-vertical-lede .caption, | |
| .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .image, | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .video-bind { | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-small-vertical-lede { | |
| width: 180px; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-small-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-small-horizontal-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-large-horizontal-lede { | |
| width: 615px; | |
| float: left; | |
| clear: left; | |
| margin: 0 15px 45px 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-vertical-lede, .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede { | |
| width: 315px; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-medium-30.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 615px; | |
| float: left; | |
| clear: left; | |
| margin: 0 15px 45px 0; | |
| } | |
| .viewport-medium-30.has-half-page .media-layout-large-vertical-lede, .viewport-medium-30.has-big-ad .media-layout-large-vertical-lede, .viewport-medium-30.has-xxl .media-layout-large-vertical-lede { | |
| float: left; | |
| clear: left; | |
| margin: 5px 15px 45px 0; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded .image { | |
| width: 315px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-vertical-embedded .caption { | |
| margin-left: 330px; | |
| right: auto; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 315px; | |
| position: static; | |
| } | |
| .viewport-medium-30.comments-panel-opened .media-slideshow-in-page-player { | |
| width: 495px; | |
| margin-left: 0px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-lede { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 960px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 615px; | |
| } | |
| .viewport-medium-40 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 825px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 255px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 345px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 345px; | |
| } | |
| .viewport-medium-40.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 194px; | |
| } | |
| .viewport-medium-40.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-40.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-medium-50 .media-layout-jumbo-horizontal-lede { | |
| width: 960px; | |
| } | |
| .viewport-medium-50.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 465px; | |
| } | |
| .viewport-medium-50.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-medium-50.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 615px; | |
| } | |
| .viewport-medium-50.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 225px; | |
| } | |
| .viewport-medium-50.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-lede { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 975px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-medium-60 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 840px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-medium-60.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 480px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 270px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 360px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 360px; | |
| } | |
| .viewport-medium-60.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 203px; | |
| } | |
| .viewport-medium-60.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-medium-60.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-lede { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-lede .caption { | |
| max-width: 660px; | |
| } | |
| .viewport-large .media-layout-horizontal-inset-embedded { | |
| width: 450px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded { | |
| width: 735px; | |
| margin-left: 90px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded .caption { | |
| width: 120px; | |
| position: absolute; | |
| right: 0; | |
| bottom: 23px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded .image, | |
| .viewport-large .media-layout-large-horizontal-embedded .video-bind { | |
| width: 600px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 338px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 120px; | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .image, | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency.youtube .video-bind { | |
| height: 304px; | |
| } | |
| .viewport-large .media-layout-large-horizontal-embedded.has-adjacency .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-large .media-layout-large-vertical-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large .media-layout-large-vertical-embedded .image { | |
| width: 405px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded .image { | |
| width: 990px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 855px; | |
| } | |
| .viewport-large.has-xxl .media-layout-small-horizontal-lede { | |
| width: 270px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 285px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 375px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 375px; | |
| } | |
| .viewport-large.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 211px; | |
| } | |
| .viewport-large.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 240px; | |
| } | |
| .viewport-large.has-half-page .media-layout-large-horizontal-lede, | |
| .viewport-large.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-large.has-big-ad .media-layout-large-horizontal-lede, | |
| .viewport-large.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 660px; | |
| } | |
| .viewport-large.has-half-page .media-layout-large-vertical-lede, .viewport-large.has-big-ad .media-layout-large-vertical-lede { | |
| width: 360px; | |
| margin-right: 30px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| width: 405px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded .caption { | |
| position: static; | |
| width: auto; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 0px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| margin-left: 0px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-lede { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-lede .caption { | |
| max-width: 675px; | |
| } | |
| .viewport-large-10 .media-embedded { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-small-vertical-embedded { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-horizontal-inset-embedded { | |
| margin-left: 180px; | |
| } | |
| .viewport-large-10 .media-layout-large-horizontal-embedded { | |
| margin-left: 105px; | |
| } | |
| .viewport-large-10 .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 135px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 1020px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large-10 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 885px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 525px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 300px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 390px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 390px; | |
| } | |
| .viewport-large-10.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 219px; | |
| } | |
| .viewport-large-10.has-half-page .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-half-page .media-layout-jumbo-horizontal-lede, .viewport-large-10.has-big-ad .media-layout-large-horizontal-lede, | |
| .viewport-large-10.has-big-ad .media-layout-jumbo-horizontal-lede { | |
| width: 675px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 495px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-10.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 495px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-horizontal-inset-lede { | |
| width: 450px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 540px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 304px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 540px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-21.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 0px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-21.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 540px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-lede { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded .image { | |
| width: 1050px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded .caption { | |
| width: 675px; | |
| } | |
| .viewport-large-30 .media-layout-jumbo-horizontal-embedded.ratio-tall .image { | |
| width: 915px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-lede, | |
| .viewport-large-30.has-xxl .media-layout-jumbo-horizontal-lede { | |
| width: 555px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-horizontal-inset-embedded.has-lede-adjacency { | |
| width: 330px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency { | |
| width: 420px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .image, | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency .video-bind { | |
| width: 420px; | |
| } | |
| .viewport-large-30.has-xxl .media-layout-large-horizontal-embedded.has-lede-adjacency.youtube .video-bind { | |
| height: 236px; | |
| } | |
| .viewport-large-30.has-xxl.comments-panel-opened .media-layout-large-vertical-lede { | |
| width: 270px; | |
| } | |
| .viewport-large-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-30.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 540px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 630px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-vertical-embedded, | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-vertical-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 495px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded.has-adjacency { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 278px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 495px; | |
| margin-left: 120px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| margin-left: 165px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 630px; | |
| } | |
| .viewport-large-41.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 630px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-lede, | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-lede { | |
| width: 675px; | |
| margin-left: 0px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-small-vertical-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-small-horizontal-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-vertical-embedded { | |
| margin-left: 120px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-horizontal-inset-embedded { | |
| width: 450px; | |
| margin-left: 180px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .image, | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .video-bind { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded.youtube .video-bind { | |
| height: 305px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-large-horizontal-embedded .media-slideshow-in-page-player { | |
| width: 540px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-embedded { | |
| width: 675px; | |
| } | |
| .viewport-large-51.comments-panel-opened .media-layout-jumbo-horizontal-embedded .image { | |
| width: 675px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment