SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html dir="ltr" xmlns="" xmlns:b="" xmlns:data="" xmlns:expr="">3 <head>4 <style>5 </style>6 <meta content="p4eE9d3p-7GAeVVFhnqc0vmHjaLePj09s_mIQIkNVTM" name="google-site-verification">7 <meta content="width=device-width, initial-scale=1" name="viewport">8 <title>9 Popular10 </title>11 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">12 <!-- Chrome, Firefox OS and Opera -->13 <meta content="#000000" name="theme-color">14 <!-- Windows Phone -->15 <meta content="#000000" name="msapplication-navbutton-color">16 <meta content="blogger" name="generator">17 <!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->18 <meta content="" property="og:url">19 <meta content="Popular" property="og:title">20 <meta content="Science Fiction, Fantasy, Horror, and Humor" property="og:description">21 <style type="text/css">22 @font-face{font-family:'Damion';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/damion/v14/hv-XlzJ3KEUe_YZkamw2.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;src:url(//fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsunDTbtPY_Q.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;src:url(//fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsunDYbtPY_Q.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;src:url(//fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsunDZbtPY_Q.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;src:url(//fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsunDXbtM.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}23 </style>24 <style id="page-skin-1" type="text/css">25 <!--26.skip-navigation {27background-color: #fff;28box-sizing: border-box;29color: #000;30display: block;31height: 0;32left: 0;33line-height: 50px;34overflow: hidden;35padding-top: 0;36position: fixed;37text-align: center;38top: 0;39-webkit-transition: box-shadow .3s , height .3s , padding-top .3s;40transition: box-shadow .3s , height .3s , padding-top .3s;41width: 100%;42z-index: 900;43}44.skip-navigation:focus {45box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14) , 0 1px 10px 0 rgba(0,0,0,0.12) , 0 2px 4px -1px rgba(0,0,0,0.2);46height: 50px;47}48#main {49outline: none;50}51body {52overflow-wrap: break-word;53word-break: break-word;54word-wrap: break-word;55}56.hidden {57display: none;58}59.invisible {60visibility: hidden;61}62.container:after, .float-container:after {63clear: both;64content: "";65display: table;66}67.clearboth {68clear: both;69}70.dim-overlay {71background-color: rgba(0,0,0,0.54);72height: 100vh;73left: 0;74position: fixed;75top: 0;76width: 100%;77}78#sharing-dim-overlay {79background-color: transparent;80}81.main-heading {82position: absolute;83clip: rect(1px,1px,1px,1px);84padding: 0;85border: 0;86height: 1px;87width: 1px;88overflow: hidden;89}90.loading-spinner-large {91-webkit-animation: mspin-rotate 1568.63ms infinite linear;92animation: mspin-rotate 1568.63ms infinite linear;93height: 48px;94overflow: hidden;95position: absolute;96width: 48px;97z-index: 200;98}99.loading-spinner-large>div {100-webkit-animation: mspin-revrot 5332ms infinite steps(4);101animation: mspin-revrot 5332ms infinite steps(4);102}103.loading-spinner-large>div>div {104-webkit-animation: mspin-singlecolor-large-film 1333ms infinite steps(81);105animation: mspin-singlecolor-large-film 1333ms infinite steps(81);106background-size: 100%;107height: 48px;108width: 3888px;109}110.mspin-black-large>div>div, .mspin-grey_54-large>div>div {111background-image: url(https://www.blogblog.com/indie/mspin_black_large.svg);112}113.mspin-white-large>div>div {114background-image: url(https://www.blogblog.com/indie/mspin_white_large.svg);115}116.mspin-grey_54-large {117opacity: .54;118}119@-webkit-keyframes mspin-singlecolor-large-film {1200% {121-webkit-transform: translateX(0);122transform: translateX(0);123}124to {125-webkit-transform: translateX(-3888px);126transform: translateX(-3888px);127}128}129@keyframes mspin-singlecolor-large-film {1300% {131-webkit-transform: translateX(0);132transform: translateX(0);133}134to {135-webkit-transform: translateX(-3888px);136transform: translateX(-3888px);137}138}139@-webkit-keyframes mspin-rotate {1400% {141-webkit-transform: rotate(0deg);142transform: rotate(0deg);143}144to {145-webkit-transform: rotate(360deg);146transform: rotate(360deg);147}148}149@keyframes mspin-rotate {1500% {151-webkit-transform: rotate(0deg);152transform: rotate(0deg);153}154to {155-webkit-transform: rotate(360deg);156transform: rotate(360deg);157}158}159@-webkit-keyframes mspin-revrot {1600% {161-webkit-transform: rotate(0deg);162transform: rotate(0deg);163}164to {165-webkit-transform: rotate(-360deg);166transform: rotate(-360deg);167}168}169@keyframes mspin-revrot {1700% {171-webkit-transform: rotate(0deg);172transform: rotate(0deg);173}174to {175-webkit-transform: rotate(-360deg);176transform: rotate(-360deg);177}178}179input::-ms-clear {180display: none;181}182.blogger-logo, .svg-icon-24.blogger-logo {183fill: #ff9800;184opacity: 1;185}186.widget.Attribution {187margin-top: 1em;188text-align: center;189}190.widget.Attribution .blogger img, .widget.Attribution .blogger svg {191vertical-align: bottom;192}193.widget.Attribution .blogger img {194margin-right: .5em;195}196.widget.Attribution div {197line-height: 24px;198margin-top: .5em;199}200.widget.Attribution .image-attribution, .widget.Attribution .copyright {201font-size: .7em;202margin-top: 1.5em;203}204.item-control {205display: none;206}207.BLOG_mobile_video_class {208display: none;209}210.bg-photo {211background-attachment: scroll !important;212}213body .CSS_LIGHTBOX {214z-index: 900;215}216.extendable .show-more, .extendable .show-less {217border-color: #064573;218color: #064573;219margin-top: 8px;220}221.extendable .show-more.hidden, .extendable .show-less.hidden {222display: none;223}224.inline-ad {225display: none;226max-width: 100%;227overflow: hidden;228}229.adsbygoogle {230display: block;231}232#cookieChoiceInfo {233bottom: 0;234top: auto;235}236iframe.b-hbp-video {237border: none;238}239.post-body img {240max-width: 100%;241}242.post-body iframe {243max-width: 100%;244}245.post-body a[imageanchor="1"] {246display: inline-block;247}248.byline {249margin-right: 1em;250}251.byline:last-child {252margin-right: 0;253}254.paging-control-container {255margin-bottom: 16px;256}257.paging-control-container .paging-control {258display: inline-block;259}260.paging-control-container .paging-control, .paging-control-container .comment-range-text:after {261color: #064573;262}263.paging-control-container .paging-control, .paging-control-container .comment-range-text {264margin-right: 8px;265}266.paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {267content: "\b7";268cursor: default;269pointer-events: none;270}271.paging-control-container .comment-range-text:last-child:after, .paging-control-container .paging-control:last-child:after {272content: none;273}274.paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {275padding-left: 8px;276}277.byline.reactions iframe {278height: 20px;279}280.b-notification {281color: #000;282background-color: white;283border-bottom: solid 1px #000;284box-sizing: border-box;285padding: 16px 32px;286text-align: center;287}288.b-notification.visible {289-webkit-transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);290transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);291}292.b-notification.invisible {293position: absolute;294}295.b-notification-close {296position: absolute;297right: 8px;298top: 8px;299}300.no-posts-message {301line-height: 40px;302text-align: center;303}304@media screen and (max-width: 800px) {305body.item-view .post-body a[imageanchor="1"][style*="float: left;"], body.item-view .post-body a[imageanchor="1"][style*="float: right;"] {306float: none !important;307clear: none !important;308}309body.item-view .post-body a[imageanchor="1"] img {310display: block;311height: auto;312margin: 0 auto;313}314body.item-view .post-body a[imageanchor="1"][style*="float: left;"] img, body.item-view .post-body .separator[style*="text-align: left"] a[imageanchor="1"] img {315margin: 0 auto 0 0;316}317body.item-view .post-body a[imageanchor="1"][style*="float: right;"] img, body.item-view .post-body .separator[style*="text-align: right"] a[imageanchor="1"] img {318margin: 0 0 0 auto;319}320.post-body a[imageanchor] {321display: block;322}323body.item-view .post-body a[imageanchor="1"] {324margin-left: 0 !important;325margin-right: 0 !important;326}327body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {328margin-top: 16px;329}330}331#comments {332border-top: 1px dashed rgba(0,0,0,0.54);333margin-top: 20px;334padding: 20px;335}336#comments .comment-thread ol {337margin: 0;338padding-left: 0;339}340#comments .comment-thread ol {341padding-left: 0;342}343#comments .comment-thread .comment-replies, #comments .comment .comment-replybox-single {344margin-left: 60px;345}346#comments .comment-thread .thread-count {347display: none;348}349#comments .comment {350list-style-type: none;351padding: 0 0 30px;352position: relative;353}354#comments .comment .comment {355padding-bottom: 8px;356}357.comment .avatar-image-container {358position: absolute;359}360.comment .avatar-image-container img {361border-radius: 50%;362}363.avatar-image-container svg, .comment .avatar-image-container .avatar-icon {364border-radius: 50%;365border: solid 1px #6f6f6f;366box-sizing: border-box;367fill: #6f6f6f;368height: 35px;369margin: 0;370padding: 7px;371width: 35px;372}373.comment .comment-block {374margin-top: 10px;375padding-bottom: 0;376}377.comment .comment-block {378margin-left: 60px;379}380#comments .comment-author-header-wrapper {381margin-left: 40px;382}383#comments .comment .thread-expanded .comment-block {384padding-bottom: 20px;385}386#comments .comment .comment-header .user, #comments .comment .comment-header .user a {387color: #000000;388font-style: normal;389font-weight: bold;390}391#comments .comment .comment-actions {392background: transparent;393border: none;394box-shadow: none;395color: #064573;396cursor: pointer;397font-size: 14px;398font-weight: bold;399outline: none;400text-decoration: none;401text-transform: uppercase;402width: auto;403bottom: 0;404margin-bottom: 15px;405position: absolute;406}407#comments .comment .comment-actions>* {408margin-right: 8px;409}410#comments .comment .comment-header .datetime {411bottom: 0;412color: rgba(0,0,0,0.54);413display: inline-block;414font-size: 13px;415font-style: italic;416}417#comments .comment .comment-header .datetime {418margin-left: 8px;419}420#comments .comment .comment-header .datetime a, #comments .comment .comment-footer .comment-timestamp a {421color: rgba(0,0,0,0.54);422}423.comment .comment-body, #comments .comment .comment-content {424margin-top: 12px;425word-break: break-word;426}427.comment-body {428margin-bottom: 12px;429}430#comments.embed[data-num-comments="0"] {431border: none;432margin-top: 0;433padding-top: 0;434}435#comments.embed[data-num-comments="0"] #comment-post-message, #comments.embed[data-num-comments="0"] div.comment-form>p, #comments.embed[data-num-comments="0"] p.comment-footer {436display: none;437}438#comment-editor-src {439display: none;440}441.comments .comments-content .loadmore.loaded {442max-height: 0;443opacity: 0;444overflow: hidden;445}446.extendable .remaining-items {447height: 0;448overflow: hidden;449-webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);450transition: height .3s cubic-bezier(0.4,0.0,0.2,1);451}452.extendable .remaining-items.expanded {453height: auto;454}455.svg-icon-24, .svg-icon-24-button {456cursor: pointer;457height: 24px;458width: 24px;459min-width: 24px;460}461.touch-icon {462margin: -12px;463padding: 12px;464}465html[dir=rtl] .rtl-reversible-icon {466-webkit-transform: scaleX(-1);467-ms-transform: scaleX(-1);468transform: scaleX(-1);469}470svg:not(:root).touch-icon {471overflow: visible;472}473.touch-icon:focus, .touch-icon:active {474background-color: rgba(153,153,153,.4);475border-radius: 50%;476}477.touch-icon-button, .svg-icon-24-button {478background: transparent;479border: none;480margin: 0;481outline: none;482padding: 0;483}484.touch-icon-button .touch-icon:focus, .touch-icon-button .touch-icon:active {485background-color: transparent;486}487.touch-icon-button:focus .touch-icon, .touch-icon-button:active .touch-icon {488background-color: rgba(153,153,153,.4);489border-radius: 50%;490}491.widget.Profile .default-avatar-wrapper .avatar-icon {492border-radius: 50%;493border: solid 1px #6f6f6f;494box-sizing: border-box;495fill: #6f6f6f;496margin: 0;497}498.widget.Profile .individual .profile-img, .widget.Profile .individual .avatar-icon {499height: 120px;500width: 120px;501}502.widget.Profile .team .profile-img, .widget.Profile .team .avatar-icon, .widget.Profile .team .default-avatar-wrapper {503height: 40px;504width: 40px;505}506.widget.Profile .individual .default-avatar-wrapper .avatar-icon {507padding: 25px;508}509.widget.Profile .team .default-avatar-wrapper .avatar-icon {510padding: 8px;511}512.snippet-container {513margin: 0;514position: relative;515overflow: hidden;516}517.snippet-fade {518bottom: 0;519box-sizing: border-box;520position: absolute;521width: 96px;522}523.snippet-fade {524right: 0;525}526.snippet-fade:after {527content: '\2026';528}529.snippet-fade:after {530float: right;531}532.post-bottom {533-webkit-box-align: center;534-webkit-align-items: center;535-ms-flex-align: center;536align-items: center;537display: -webkit-box;538display: -webkit-flex;539display: -ms-flexbox;540display: flex;541-webkit-flex-wrap: wrap;542-ms-flex-wrap: wrap;543flex-wrap: wrap;544}545.post-footer {546-webkit-box-flex: 1;547-webkit-flex: 1 1 auto;548-ms-flex: 1 1 auto;549flex: 1 1 auto;550-webkit-flex-wrap: wrap;551-ms-flex-wrap: wrap;552flex-wrap: wrap;553-webkit-box-ordinal-group: 2;554-webkit-order: 1;555-ms-flex-order: 1;556order: 1;557}558.post-footer>* {559-webkit-box-flex: 0;560-webkit-flex: 0 1 auto;561-ms-flex: 0 1 auto;562flex: 0 1 auto;563}564.post-footer .byline:last-child {565margin-right: 1em;566}567.jump-link {568-webkit-box-flex: 0;569-webkit-flex: 0 0 auto;570-ms-flex: 0 0 auto;571flex: 0 0 auto;572-webkit-box-ordinal-group: 3;573-webkit-order: 2;574-ms-flex-order: 2;575order: 2;576}577.centered-top-container.sticky {578left: 0;579position: fixed;580right: 0;581top: 0;582width: auto;583z-index: 50;584-webkit-transition-property: opacity , -webkit-transform;585transition-property: opacity , -webkit-transform;586transition-property: transform , opacity;587transition-property: transform , opacity , -webkit-transform;588-webkit-transition-duration: .2s;589transition-duration: .2s;590-webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);591transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);592}593.centered-top-placeholder {594display: none;595}596.collapsed-header .centered-top-placeholder {597display: block;598}599.centered-top-container .Header .replaced h1, .centered-top-placeholder .Header .replaced h1 {600display: none;601}602.centered-top-container.sticky .Header .replaced h1 {603display: block;604}605.centered-top-container.sticky .Header .header-widget {606background: none;607}608.centered-top-container.sticky .Header .header-image-wrapper {609display: none;610}611.centered-top-container img, .centered-top-placeholder img {612max-width: 100%;613}614.collapsible {615-webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);616transition: height .3s cubic-bezier(0.4,0.0,0.2,1);617}618.collapsible, .collapsible>summary {619display: block;620overflow: hidden;621}622.collapsible>:not(summary) {623display: none;624}625.collapsible[open]>:not(summary) {626display: block;627}628.collapsible:focus, .collapsible>summary:focus {629outline: none;630}631.collapsible>summary {632cursor: pointer;633display: block;634padding: 0;635}636.collapsible:focus>summary, .collapsible>summary:focus {637background-color: transparent;638}639.collapsible>summary::-webkit-details-marker {640display: none;641}642.collapsible-title {643-webkit-box-align: center;644-webkit-align-items: center;645-ms-flex-align: center;646align-items: center;647display: -webkit-box;648display: -webkit-flex;649display: -ms-flexbox;650display: flex;651}652.collapsible-title .title {653-webkit-box-flex: 1;654-webkit-flex: 1 1 auto;655-ms-flex: 1 1 auto;656flex: 1 1 auto;657-webkit-box-ordinal-group: 1;658-webkit-order: 0;659-ms-flex-order: 0;660order: 0;661overflow: hidden;662text-overflow: ellipsis;663white-space: nowrap;664}665.collapsible-title .chevron-down, .collapsible[open] .collapsible-title .chevron-up {666display: block;667}668.collapsible-title .chevron-up, .collapsible[open] .collapsible-title .chevron-down {669display: none;670}671.flat-button {672cursor: pointer;673display: inline-block;674font-weight: bold;675text-transform: uppercase;676border-radius: 2px;677padding: 8px;678margin: -8px;679}680.flat-icon-button {681background: transparent;682border: none;683margin: 0;684outline: none;685padding: 0;686margin: -12px;687padding: 12px;688cursor: pointer;689box-sizing: content-box;690display: inline-block;691line-height: 0;692}693.flat-icon-button, .flat-icon-button .splash-wrapper {694border-radius: 50%;695}696.flat-icon-button .splash.animate {697-webkit-animation-duration: .3s;698animation-duration: .3s;699}700.overflowable-container {701max-height: 47.2px;702overflow: hidden;703position: relative;704}705.overflow-button {706cursor: pointer;707}708#overflowable-dim-overlay {709background: transparent;710}711.overflow-popup {712box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);713background-color: #ffffff;714left: 0;715max-width: calc(100% - 32px);716position: absolute;717top: 0;718visibility: hidden;719z-index: 101;720}721.overflow-popup ul {722list-style: none;723}724.overflow-popup li, .overflow-popup .tabs li {725display: block;726height: auto;727}728.overflow-popup .tabs li {729padding-left: 0;730padding-right: 0;731}732.overflow-button.hidden, .overflow-popup li.hidden, .overflow-popup .tabs li.hidden {733display: none;734}735.pill-button {736background: transparent;737border: 1px solid;738border-radius: 12px;739cursor: pointer;740display: inline-block;741padding: 4px 16px;742text-transform: uppercase;743}744.ripple {745position: relative;746}747.ripple>* {748z-index: 1;749}750.splash-wrapper {751bottom: 0;752left: 0;753overflow: hidden;754pointer-events: none;755position: absolute;756right: 0;757top: 0;758z-index: 0;759}760.splash {761background: hsl(0,0%,80%);762border-radius: 100%;763display: block;764opacity: .6;765position: absolute;766-webkit-transform: scale(0);767-ms-transform: scale(0);768transform: scale(0);769}770.splash.animate {771-webkit-animation: ripple-effect .4s linear;772animation: ripple-effect .4s linear;773}774@-webkit-keyframes ripple-effect {775to {776opacity: 0;777-webkit-transform: scale(2.5);778transform: scale(2.5);779}780}781@keyframes ripple-effect {782to {783opacity: 0;784-webkit-transform: scale(2.5);785transform: scale(2.5);786}787}788.search {789display: -webkit-box;790display: -webkit-flex;791display: -ms-flexbox;792display: flex;793line-height: 24px;794width: 24px;795}796.search form {797z-index: 101;798}799.search h3 {800display: none;801}802.search.focused {803width: 100%;804}805.search.focused .section {806width: 100%;807}808.search-expand {809-webkit-box-flex: 0;810-webkit-flex: 0 0 auto;811-ms-flex: 0 0 auto;812flex: 0 0 auto;813}814.search-expand-text {815display: none;816}817.search-close {818display: inline;819vertical-align: middle;820}821.search form {822display: -webkit-box;823display: -webkit-flex;824display: -ms-flexbox;825display: flex;826-webkit-box-flex: 1;827-webkit-flex: 1 0 0;828-ms-flex: 1 0 0px;829flex: 1 0 0;830border-bottom: solid 1px transparent;831padding-bottom: 8px;832}833.search form>* {834display: none;835}836.search.focused form>* {837display: block;838}839.search .search-input label {840display: none;841}842.centered-top-placeholder.cloned .search form {843z-index: 30;844}845.search.focused form {846border-color: #ffffff;847position: relative;848width: auto;849}850.collapsed-header .centered-top-container .search.focused form {851border-bottom-color: transparent;852}853.search-input {854-webkit-box-flex: 1;855-webkit-flex: 1 0 1px;856-ms-flex: 1 0 1px;857flex: 1 0 1px;858}859.search-input input {860background: none;861border: none;862box-sizing: border-box;863color: #ffffff;864display: inline-block;865outline: none;866width: calc(100% - 48px);867}868.search-input input.no-cursor {869color: transparent;870text-shadow: 0 0 0 #ffffff;871}872.collapsed-header .centered-top-container .search-action, .collapsed-header .centered-top-container .search-input input {873color: #000000;874}875.collapsed-header .centered-top-container .search-input input.no-cursor {876color: transparent;877text-shadow: 0 0 0 #000000;878}879.search-input input.no-cursor:focus, .collapsed-header .centered-top-container .search-input input.no-cursor:focus {880outline: none;881}882.search-focused>* {883visibility: hidden;884}885.search-focused .search, .search-focused .search-icon {886visibility: visible;887}888.search.focused .search-action {889display: block;890}891.search.focused .search-action:disabled {892opacity: .3;893}894.widget.Sharing .sharing-button {895display: none;896}897.widget.Sharing .sharing-buttons li {898padding: 0;899}900.widget.Sharing .sharing-buttons li span {901display: none;902}903.post-share-buttons {904position: relative;905}906.share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {907fill: #064573;908}909.sharing-open.touch-icon-button:focus .touch-icon, .sharing-open.touch-icon-button:active .touch-icon {910background-color: transparent;911}912.share-buttons {913background-color: #ffffff;914border-radius: 2px;915box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);916color: #064573;917list-style: none;918margin: 0;919padding: 8px 0;920position: absolute;921top: -11px;922min-width: 200px;923z-index: 101;924}925.share-buttons.hidden {926display: none;927}928.sharing-button {929background: transparent;930border: none;931margin: 0;932outline: none;933padding: 0;934cursor: pointer;935}936.share-buttons li {937margin: 0;938height: 48px;939}940.share-buttons li:last-child {941margin-bottom: 0;942}943.share-buttons li .sharing-platform-button {944box-sizing: border-box;945cursor: pointer;946display: block;947height: 100%;948margin-bottom: 0;949padding: 0 16px;950position: relative;951width: 100%;952}953.share-buttons li .sharing-platform-button:focus, .share-buttons li .sharing-platform-button:hover {954background-color: rgba(128,128,128,0.1);955outline: none;956}957.share-buttons li svg[class^="sharing-"], .share-buttons li svg[class*=" sharing-"] {958position: absolute;959top: 10px;960}961.share-buttons li span.sharing-platform-button, .share-buttons li span.sharing-platform-button {962position: relative;963top: 0;964}965.share-buttons li .platform-sharing-text {966display: block;967font-size: 16px;968line-height: 48px;969white-space: nowrap;970}971.share-buttons li .platform-sharing-text {972margin-left: 56px;973}974.sidebar-container {975background-color: #ffffff;976max-width: 284px;977overflow-y: auto;978-webkit-transition-property: -webkit-transform;979transition-property: -webkit-transform;980transition-property: transform;981transition-property: transform, -webkit-transform;982-webkit-transition-duration: .3s;983transition-duration: .3s;984-webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);985transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);986width: 284px;987z-index: 101;988-webkit-overflow-scrolling: touch;989}990.sidebar-container .navigation {991line-height: 0;992padding: 20px;993}994.sidebar-container .widget {995background: none;996margin: 0 16px;997padding: 1em 0;998}999.sidebar-container .widget .title {1000color: #000000;1001margin: 0;1002}1003.sidebar-container .widget ul {1004list-style: none;1005margin: 0;1006padding: 0;1007}1008.sidebar-container .widget ul ul {1009margin-left: 1em;1010}1011.sidebar-container .widget ul li {1012font-size: 16px;1013line-height: normal;1014}1015.BlogArchive li {1016margin: 16px 0;1017}1018.BlogArchive li:last-child {1019margin-bottom: 0;1020}1021.Label .label-count:before, .BlogArchive .post-count:before {1022content: '(';1023}1024.Label .label-count:after, .BlogArchive .post-count:after {1025content: ')';1026}1027.Label .label-count, .BlogArchive .post-count {1028float: right;1029margin-left: .25em;1030}1031.Label li a {1032display: inline-block;1033}1034.widget.Translate .skiptranslate>div {1035display: block !important;1036}1037.widget.Profile .profile-link {1038background-image: none !important;1039display: -webkit-box;1040display: -webkit-flex;1041display: -ms-flexbox;1042display: flex;1043}1044.widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {1045-webkit-box-flex: 0;1046-webkit-flex: 0 0 auto;1047-ms-flex: 0 0 auto;1048flex: 0 0 auto;1049}1050.widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {1051margin-right: 1em;1052}1053.widget.Profile .individual .profile-link {1054-webkit-box-orient: vertical;1055-webkit-box-direction: normal;1056-webkit-flex-direction: column;1057-ms-flex-direction: column;1058flex-direction: column;1059}1060.widget.Profile .team .profile-link .profile-name {1061-webkit-align-self: center;1062-ms-flex-item-align: center;1063-ms-grid-row-align: center;1064align-self: center;1065display: block;1066-webkit-box-flex: 1;1067-webkit-flex: 1 1 auto;1068-ms-flex: 1 1 auto;1069flex: 1 1 auto;1070}1071.sidebar-container .sidebar-back {1072cursor: pointer;1073}1074.sidebar-container .widget+.widget {1075border-top: 1px dashed #cccccc;1076}1077.dim-overlay {1078background-color: rgba(0,0,0,0.54);1079z-index: 100;1080}1081body.sidebar-visible {1082overflow-y: hidden;1083}1084@media screen and (max-width: 1439px) {1085.sidebar-container {1086bottom: 0;1087position: fixed;1088top: 0;1089}1090.sidebar-container {1091left: 0;1092right: auto;1093}1094.sidebar-container.sidebar-invisible {1095-webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);1096transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);1097}1098.sidebar-container.sidebar-invisible {1099-webkit-transform: translateX(-284px);1100-ms-transform: translateX(-284px);1101transform: translateX(-284px);1102}1103}1104@media screen and (min-width: 1440px) {1105.sidebar-container {1106position: absolute;1107top: 0;1108}1109.sidebar-container {1110left: 0;1111right: auto;1112}1113.sidebar-container .navigation {1114display: none;1115}1116}1117.dialog {1118box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);1119background: #ffffff;1120box-sizing: border-box;1121padding: 30px;1122position: fixed;1123text-align: center;1124width: calc(100% - 24px);1125z-index: 101;1126}1127.dialog input[type=text], .dialog input[type=email] {1128background-color: transparent;1129border-bottom: solid 1px rgba(116,116,116,0.12);1130border-left: none;1131border-right: none;1132border-top: none;1133color: #747474;1134display: block;1135font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;1136font-size: 16px;1137line-height: 24px;1138margin: auto;1139padding-bottom: 7px;1140outline: none;1141text-align: center;1142width: 100%;1143}1144.dialog input[type=text]::-webkit-input-placeholder, .dialog input[type=email]::-webkit-input-placeholder {1145color: #747474;1146}1147.dialog input[type=text]::-moz-placeholder, .dialog input[type=email]::-moz-placeholder {1148color: #747474;1149}1150.dialog input[type=text]:-ms-input-placeholder, .dialog input[type=email]:-ms-input-placeholder {1151color: #747474;1152}1153.dialog input[type=text]::placeholder, .dialog input[type=email]::placeholder {1154color: #747474;1155}1156.dialog input[type=text]:focus, .dialog input[type=email]:focus {1157border-bottom: solid 2px #064573;1158padding-bottom: 6px;1159}1160.dialog input[type=submit] {1161font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;1162}1163.dialog input.no-cursor {1164color: transparent;1165text-shadow: 0 0 0 #747474;1166}1167.dialog input.no-cursor:focus {1168outline: none;1169}1170.subscribe-popup {1171max-width: 364px;1172}1173.subscribe-popup h3 {1174color: #000000;1175font-size: 1.8em;1176margin-top: 0;1177}1178.subscribe-popup div.widget.FollowByEmail h3 {1179display: none;1180}1181.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit {1182background: transparent;1183border: none;1184box-shadow: none;1185color: #064573;1186cursor: pointer;1187font-size: 14px;1188font-weight: bold;1189outline: none;1190text-decoration: none;1191text-transform: uppercase;1192width: auto;1193color: #064573;1194display: inline-block;1195margin: 0 auto;1196margin-top: 24px;1197width: auto;1198white-space: normal;1199}1200.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit:disabled {