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" lang="en">3 <head>4 <meta content="width=device-width, initial-scale=1" name="viewport">5 <title>6 Axel's corner7 </title>8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">9 <!-- Chrome, Firefox OS and Opera -->10 <meta content="#ffffff" name="theme-color">11 <!-- Windows Phone -->12 <meta content="#ffffff" name="msapplication-navbutton-color">13 <meta content="blogger" name="generator">14 <!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->15 <meta content="A blog about plastic scale modelling" name="description">16 <meta content="" property="og:url">17 <meta content="Axel's corner" property="og:title">18 <meta content="A blog about plastic scale modelling" property="og:description">19 <meta content="" property="og:image">20 <meta content="" property="og:image">21 <meta content="" property="og:image">22 <style type="text/css">23 @font-face{font-family:'Lora';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJMkq1umA.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:'Lora';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJFkq1umA.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Lora';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJOkq1umA.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:'Lora';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJPkq1umA.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:'Lora';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkq0.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:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWV0ewJER.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:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWVQewJER.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWVwewJER.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWVMewJER.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWVIewJER.woff2)format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWV8ewJER.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:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWV4ewJER.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:'Open Sans';font-style:italic;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjWVAewA.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:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2)format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.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:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.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:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2)format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.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:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.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:'Open Sans';font-style:normal;font-weight:600;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.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:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2)format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.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:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.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:'Open Sans';font-style:normal;font-weight:700;font-stretch:100%;src:url(//fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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;}24 </style>25 <style id="page-skin-1" type="text/css">26 <!--27/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}28body{29overflow-wrap:break-word;30word-break:break-word;31word-wrap:break-word32}33.hidden{34display:none35}36.invisible{37visibility:hidden38}39.container::after,.float-container::after{40clear:both;41content:"";42display:table43}44.clearboth{45clear:both46}47#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link{48background:0 0;49border:0;50box-shadow:none;51color:#78a024;52cursor:pointer;53font-size:14px;54font-weight:700;55outline:0;56text-decoration:none;57text-transform:uppercase;58width:auto59}60.dim-overlay{61background-color:rgba(0,0,0,.54);62height:100vh;63left:0;64position:fixed;65top:0;66width:100%67}68#sharing-dim-overlay{69background-color:transparent70}71input::-ms-clear{72display:none73}74.blogger-logo,.svg-icon-24.blogger-logo{75fill:#ff9800;76opacity:177}78.loading-spinner-large{79-webkit-animation:mspin-rotate 1.568s infinite linear;80animation:mspin-rotate 1.568s infinite linear;81height:48px;82overflow:hidden;83position:absolute;84width:48px;85z-index:20086}87.loading-spinner-large>div{88-webkit-animation:mspin-revrot 5332ms infinite steps(4);89animation:mspin-revrot 5332ms infinite steps(4)90}91.loading-spinner-large>div>div{92-webkit-animation:mspin-singlecolor-large-film 1333ms infinite steps(81);93animation:mspin-singlecolor-large-film 1333ms infinite steps(81);94background-size:100%;95height:48px;96width:3888px97}98.mspin-black-large>div>div,.mspin-grey_54-large>div>div{99background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg)100}101.mspin-white-large>div>div{102background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg)103}104.mspin-grey_54-large{105opacity:.54106}107@-webkit-keyframes mspin-singlecolor-large-film{108from{109-webkit-transform:translateX(0);110transform:translateX(0)111}112to{113-webkit-transform:translateX(-3888px);114transform:translateX(-3888px)115}116}117@keyframes mspin-singlecolor-large-film{118from{119-webkit-transform:translateX(0);120transform:translateX(0)121}122to{123-webkit-transform:translateX(-3888px);124transform:translateX(-3888px)125}126}127@-webkit-keyframes mspin-rotate{128from{129-webkit-transform:rotate(0);130transform:rotate(0)131}132to{133-webkit-transform:rotate(360deg);134transform:rotate(360deg)135}136}137@keyframes mspin-rotate{138from{139-webkit-transform:rotate(0);140transform:rotate(0)141}142to{143-webkit-transform:rotate(360deg);144transform:rotate(360deg)145}146}147@-webkit-keyframes mspin-revrot{148from{149-webkit-transform:rotate(0);150transform:rotate(0)151}152to{153-webkit-transform:rotate(-360deg);154transform:rotate(-360deg)155}156}157@keyframes mspin-revrot{158from{159-webkit-transform:rotate(0);160transform:rotate(0)161}162to{163-webkit-transform:rotate(-360deg);164transform:rotate(-360deg)165}166}167.skip-navigation{168background-color:#fff;169box-sizing:border-box;170color:#000;171display:block;172height:0;173left:0;174line-height:50px;175overflow:hidden;176padding-top:0;177position:fixed;178text-align:center;179top:0;180-webkit-transition:box-shadow .3s,height .3s,padding-top .3s;181transition:box-shadow .3s,height .3s,padding-top .3s;182width:100%;183z-index:900184}185.skip-navigation:focus{186box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);187height:50px188}189#main{190outline:0191}192.main-heading{193position:absolute;194clip:rect(1px,1px,1px,1px);195padding:0;196border:0;197height:1px;198width:1px;199overflow:hidden200}201.Attribution{202margin-top:1em;203text-align:center204}205.Attribution .blogger img,.Attribution .blogger svg{206vertical-align:bottom207}208.Attribution .blogger img{209margin-right:.5em210}211.Attribution div{212line-height:24px;213margin-top:.5em214}215.Attribution .copyright,.Attribution .image-attribution{216font-size:.7em;217margin-top:1.5em218}219.BLOG_mobile_video_class{220display:none221}222.bg-photo{223background-attachment:scroll!important224}225body .CSS_LIGHTBOX{226z-index:900227}228.extendable .show-less,.extendable .show-more{229border-color:#78a024;230color:#78a024;231margin-top:8px232}233.extendable .show-less.hidden,.extendable .show-more.hidden{234display:none235}236.inline-ad{237display:none;238max-width:100%;239overflow:hidden240}241.adsbygoogle{242display:block243}244#cookieChoiceInfo{245bottom:0;246top:auto247}248iframe.b-hbp-video{249border:0250}251.post-body img{252max-width:100%253}254.post-body iframe{255max-width:100%256}257.post-body a[imageanchor="1"]{258display:inline-block259}260.byline{261margin-right:1em262}263.byline:last-child{264margin-right:0265}266.link-copied-dialog{267max-width:520px;268outline:0269}270.link-copied-dialog .modal-dialog-buttons{271margin-top:8px272}273.link-copied-dialog .goog-buttonset-default{274background:0 0;275border:0276}277.link-copied-dialog .goog-buttonset-default:focus{278outline:0279}280.paging-control-container{281margin-bottom:16px282}283.paging-control-container .paging-control{284display:inline-block285}286.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{287color:#78a024288}289.paging-control-container .comment-range-text,.paging-control-container .paging-control{290margin-right:8px291}292.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{293content:"\b7";294cursor:default;295padding-left:8px;296pointer-events:none297}298.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{299content:none300}301.byline.reactions iframe{302height:20px303}304.b-notification{305color:#000;306background-color:#fff;307border-bottom:solid 1px #000;308box-sizing:border-box;309padding:16px 32px;310text-align:center311}312.b-notification.visible{313-webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);314transition:margin-top .3s cubic-bezier(.4,0,.2,1)315}316.b-notification.invisible{317position:absolute318}319.b-notification-close{320position:absolute;321right:8px;322top:8px323}324.no-posts-message{325line-height:40px;326text-align:center327}328@media screen and (max-width:968px){329body.item-view .post-body a[imageanchor="1"][style*="float: left;"],body.item-view .post-body a[imageanchor="1"][style*="float: right;"]{330float:none!important;331clear:none!important332}333body.item-view .post-body a[imageanchor="1"] img{334display:block;335height:auto;336margin:0 auto337}338body.item-view .post-body>.separator:first-child>a[imageanchor="1"]:first-child{339margin-top:20px340}341.post-body a[imageanchor]{342display:block343}344body.item-view .post-body a[imageanchor="1"]{345margin-left:0!important;346margin-right:0!important347}348body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"]{349margin-top:16px350}351}352.item-control{353display:none354}355#comments{356border-top:1px dashed rgba(0,0,0,.54);357margin-top:20px;358padding:20px359}360#comments .comment-thread ol{361margin:0;362padding-left:0;363padding-left:0364}365#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{366margin-left:60px367}368#comments .comment-thread .thread-count{369display:none370}371#comments .comment{372list-style-type:none;373padding:0 0 30px;374position:relative375}376#comments .comment .comment{377padding-bottom:8px378}379.comment .avatar-image-container{380position:absolute381}382.comment .avatar-image-container img{383border-radius:50%384}385.avatar-image-container svg,.comment .avatar-image-container .avatar-icon{386border-radius:50%;387border:solid 1px #78a024;388box-sizing:border-box;389fill:#78a024;390height:35px;391margin:0;392padding:7px;393width:35px394}395.comment .comment-block{396margin-top:10px;397margin-left:60px;398padding-bottom:0399}400#comments .comment-author-header-wrapper{401margin-left:40px402}403#comments .comment .thread-expanded .comment-block{404padding-bottom:20px405}406#comments .comment .comment-header .user,#comments .comment .comment-header .user a{407color:rgba(0, 0, 0, 0.83);408font-style:normal;409font-weight:700410}411#comments .comment .comment-actions{412bottom:0;413margin-bottom:15px;414position:absolute415}416#comments .comment .comment-actions>*{417margin-right:8px418}419#comments .comment .comment-header .datetime{420bottom:0;421color:rgba(0, 0, 0, 0.54);422display:inline-block;423font-size:13px;424font-style:italic;425margin-left:8px426}427#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{428color:rgba(0, 0, 0, 0.54)429}430#comments .comment .comment-content,.comment .comment-body{431margin-top:12px;432word-break:break-word433}434.comment-body{435margin-bottom:12px436}437#comments.embed[data-num-comments="0"]{438border:0;439margin-top:0;440padding-top:0441}442#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{443display:none444}445#comment-editor-src{446display:none447}448.comments .comments-content .loadmore.loaded{449max-height:0;450opacity:0;451overflow:hidden452}453.extendable .remaining-items{454height:0;455overflow:hidden;456-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);457transition:height .3s cubic-bezier(.4,0,.2,1)458}459.extendable .remaining-items.expanded{460height:auto461}462.svg-icon-24,.svg-icon-24-button{463cursor:pointer;464height:24px;465width:24px;466min-width:24px467}468.touch-icon{469margin:-12px;470padding:12px471}472.touch-icon:active,.touch-icon:focus{473background-color:rgba(153,153,153,.4);474border-radius:50%475}476svg:not(:root).touch-icon{477overflow:visible478}479html[dir=rtl] .rtl-reversible-icon{480-webkit-transform:scaleX(-1);481-ms-transform:scaleX(-1);482transform:scaleX(-1)483}484.svg-icon-24-button,.touch-icon-button{485background:0 0;486border:0;487margin:0;488outline:0;489padding:0490}491.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{492background-color:transparent493}494.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{495background-color:rgba(153,153,153,.4);496border-radius:50%497}498.Profile .default-avatar-wrapper .avatar-icon{499border-radius:50%;500border:solid 1px #000000;501box-sizing:border-box;502fill:#000000;503margin:0504}505.Profile .individual .default-avatar-wrapper .avatar-icon{506padding:25px507}508.Profile .individual .avatar-icon,.Profile .individual .profile-img{509height:120px;510width:120px511}512.Profile .team .default-avatar-wrapper .avatar-icon{513padding:8px514}515.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{516height:40px;517width:40px518}519.snippet-container{520margin:0;521position:relative;522overflow:hidden523}524.snippet-fade{525bottom:0;526box-sizing:border-box;527position:absolute;528width:96px529}530.snippet-fade{531right:0532}533.snippet-fade:after{534content:"\2026"535}536.snippet-fade:after{537float:right538}539.post-bottom{540-webkit-box-align:center;541-webkit-align-items:center;542-ms-flex-align:center;543align-items:center;544display:-webkit-box;545display:-webkit-flex;546display:-ms-flexbox;547display:flex;548-webkit-flex-wrap:wrap;549-ms-flex-wrap:wrap;550flex-wrap:wrap551}552.post-footer{553-webkit-box-flex:1;554-webkit-flex:1 1 auto;555-ms-flex:1 1 auto;556flex:1 1 auto;557-webkit-flex-wrap:wrap;558-ms-flex-wrap:wrap;559flex-wrap:wrap;560-webkit-box-ordinal-group:2;561-webkit-order:1;562-ms-flex-order:1;563order:1564}565.post-footer>*{566-webkit-box-flex:0;567-webkit-flex:0 1 auto;568-ms-flex:0 1 auto;569flex:0 1 auto570}571.post-footer .byline:last-child{572margin-right:1em573}574.jump-link{575-webkit-box-flex:0;576-webkit-flex:0 0 auto;577-ms-flex:0 0 auto;578flex:0 0 auto;579-webkit-box-ordinal-group:3;580-webkit-order:2;581-ms-flex-order:2;582order:2583}584.centered-top-container.sticky{585left:0;586position:fixed;587right:0;588top:0;589width:auto;590z-index:8;591-webkit-transition-property:opacity,-webkit-transform;592transition-property:opacity,-webkit-transform;593transition-property:transform,opacity;594transition-property:transform,opacity,-webkit-transform;595-webkit-transition-duration:.2s;596transition-duration:.2s;597-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);598transition-timing-function:cubic-bezier(.4,0,.2,1)599}600.centered-top-placeholder{601display:none602}603.collapsed-header .centered-top-placeholder{604display:block605}606.centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{607display:none608}609.centered-top-container.sticky .Header .replaced h1{610display:block611}612.centered-top-container.sticky .Header .header-widget{613background:0 0614}615.centered-top-container.sticky .Header .header-image-wrapper{616display:none617}618.centered-top-container img,.centered-top-placeholder img{619max-width:100%620}621.collapsible{622-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);623transition:height .3s cubic-bezier(.4,0,.2,1)624}625.collapsible,.collapsible>summary{626display:block;627overflow:hidden628}629.collapsible>:not(summary){630display:none631}632.collapsible[open]>:not(summary){633display:block634}635.collapsible:focus,.collapsible>summary:focus{636outline:0637}638.collapsible>summary{639cursor:pointer;640display:block;641padding:0642}643.collapsible:focus>summary,.collapsible>summary:focus{644background-color:transparent645}646.collapsible>summary::-webkit-details-marker{647display:none648}649.collapsible-title{650-webkit-box-align:center;651-webkit-align-items:center;652-ms-flex-align:center;653align-items:center;654display:-webkit-box;655display:-webkit-flex;656display:-ms-flexbox;657display:flex658}659.collapsible-title .title{660-webkit-box-flex:1;661-webkit-flex:1 1 auto;662-ms-flex:1 1 auto;663flex:1 1 auto;664-webkit-box-ordinal-group:1;665-webkit-order:0;666-ms-flex-order:0;667order:0;668overflow:hidden;669text-overflow:ellipsis;670white-space:nowrap671}672.collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{673display:block674}675.collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{676display:none677}678.overflowable-container{679max-height:58.286px;680overflow:hidden;681position:relative682}683.overflow-button{684cursor:pointer685}686#overflowable-dim-overlay{687background:0 0688}689.overflow-popup{690box-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);691background-color:#ffffff;692left:0;693max-width:calc(100% - 32px);694position:absolute;695top:0;696visibility:hidden;697z-index:101698}699.overflow-popup ul{700list-style:none701}702.overflow-popup .tabs li,.overflow-popup li{703display:block;704height:auto705}706.overflow-popup .tabs li{707padding-left:0;708padding-right:0709}710.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{711display:none712}713.ripple{714position:relative715}716.ripple>*{717z-index:1718}719.splash-wrapper{720bottom:0;721left:0;722overflow:hidden;723pointer-events:none;724position:absolute;725right:0;726top:0;727z-index:0728}729.splash{730background:#ccc;731border-radius:100%;732display:block;733opacity:.6;734position:absolute;735-webkit-transform:scale(0);736-ms-transform:scale(0);737transform:scale(0)738}739.splash.animate{740-webkit-animation:ripple-effect .4s linear;741animation:ripple-effect .4s linear742}743@-webkit-keyframes ripple-effect{744100%{745opacity:0;746-webkit-transform:scale(2.5);747transform:scale(2.5)748}749}750@keyframes ripple-effect{751100%{752opacity:0;753-webkit-transform:scale(2.5);754transform:scale(2.5)755}756}757.search{758display:-webkit-box;759display:-webkit-flex;760display:-ms-flexbox;761display:flex;762line-height:24px;763width:24px764}765.search.focused{766width:100%767}768.search.focused .section{769width:100%770}771.search form{772z-index:101773}774.search h3{775display:none776}777.search form{778display:-webkit-box;779display:-webkit-flex;780display:-ms-flexbox;781display:flex;782-webkit-box-flex:1;783-webkit-flex:1 0 0;784-ms-flex:1 0 0px;785flex:1 0 0;786border-bottom:solid 1px transparent;787padding-bottom:8px788}789.search form>*{790display:none791}792.search.focused form>*{793display:block794}795.search .search-input label{796display:none797}798.centered-top-placeholder.cloned .search form{799z-index:30800}801.search.focused form{802border-color:rgba(0, 0, 0, 0.83);803position:relative;804width:auto805}806.collapsed-header .centered-top-container .search.focused form{807border-bottom-color:transparent808}809.search-expand{810-webkit-box-flex:0;811-webkit-flex:0 0 auto;812-ms-flex:0 0 auto;813flex:0 0 auto814}815.search-expand-text{816display:none817}818.search-close{819display:inline;820vertical-align:middle821}822.search-input{823-webkit-box-flex:1;824-webkit-flex:1 0 1px;825-ms-flex:1 0 1px;826flex:1 0 1px827}828.search-input input{829background:0 0;830border:0;831box-sizing:border-box;832color:rgba(0, 0, 0, 0.83);833display:inline-block;834outline:0;835width:calc(100% - 48px)836}837.search-input input.no-cursor{838color:transparent;839text-shadow:0 0 0 rgba(0, 0, 0, 0.83)840}841.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{842color:rgba(0, 0, 0, 0.83)843}844.collapsed-header .centered-top-container .search-input input.no-cursor{845color:transparent;846text-shadow:0 0 0 rgba(0, 0, 0, 0.83)847}848.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{849outline:0850}851.search-focused>*{852visibility:hidden853}854.search-focused .search,.search-focused .search-icon{855visibility:visible856}857.search.focused .search-action{858display:block859}860.search.focused .search-action:disabled{861opacity:.3862}863.sidebar-container{864background-color:#f7f7f7;865max-width:320px;866overflow-y:auto;867-webkit-transition-property:-webkit-transform;868transition-property:-webkit-transform;869transition-property:transform;870transition-property:transform,-webkit-transform;871-webkit-transition-duration:.3s;872transition-duration:.3s;873-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);874transition-timing-function:cubic-bezier(0,0,.2,1);875width:320px;876z-index:101;877-webkit-overflow-scrolling:touch878}879.sidebar-container .navigation{880line-height:0;881padding:16px882}883.sidebar-container .sidebar-back{884cursor:pointer885}886.sidebar-container .widget{887background:0 0;888margin:0 16px;889padding:16px 0890}891.sidebar-container .widget .title{892color:#000000;893margin:0894}895.sidebar-container .widget ul{896list-style:none;897margin:0;898padding:0899}900.sidebar-container .widget ul ul{901margin-left:1em902}903.sidebar-container .widget li{904font-size:16px;905line-height:normal906}907.sidebar-container .widget+.widget{908border-top:1px dashed #000000909}910.BlogArchive li{911margin:16px 0912}913.BlogArchive li:last-child{914margin-bottom:0915}916.Label li a{917display:inline-block918}919.BlogArchive .post-count,.Label .label-count{920float:right;921margin-left:.25em922}923.BlogArchive .post-count::before,.Label .label-count::before{924content:"("925}926.BlogArchive .post-count::after,.Label .label-count::after{927content:")"928}929.widget.Translate .skiptranslate>div{930display:block!important931}932.widget.Profile .profile-link{933display:-webkit-box;934display:-webkit-flex;935display:-ms-flexbox;936display:flex937}938.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{939-webkit-box-flex:0;940-webkit-flex:0 0 auto;941-ms-flex:0 0 auto;942flex:0 0 auto;943margin-right:1em944}945.widget.Profile .individual .profile-link{946-webkit-box-orient:vertical;947-webkit-box-direction:normal;948-webkit-flex-direction:column;949-ms-flex-direction:column;950flex-direction:column951}952.widget.Profile .team .profile-link .profile-name{953-webkit-align-self:center;954-ms-flex-item-align:center;955align-self:center;956display:block;957-webkit-box-flex:1;958-webkit-flex:1 1 auto;959-ms-flex:1 1 auto;960flex:1 1 auto961}962.dim-overlay{963background-color:rgba(0,0,0,.54);964z-index:100965}966body.sidebar-visible{967overflow-y:hidden968}969@media screen and (max-width:1619px){970.sidebar-container{971bottom:0;972position:fixed;973top:0;974left:auto;975right:0976}977.sidebar-container.sidebar-invisible{978-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);979transition-timing-function:cubic-bezier(.4,0,.6,1);980-webkit-transform:translateX(320px);981-ms-transform:translateX(320px);982transform:translateX(320px)983}984}985.dialog{986box-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);987background:#ffffff;988box-sizing:border-box;989color:rgba(0, 0, 0, 0.83);990padding:30px;991position:fixed;992text-align:center;993width:calc(100% - 24px);994z-index:101995}996.dialog input[type=email],.dialog input[type=text]{997background-color:transparent;998border:0;999border-bottom:solid 1px rgba(0,0,0,.12);1000color:rgba(0, 0, 0, 0.83);1001display:block;1002font-family:Lora, serif;1003font-size:16px;1004line-height:24px;1005margin:auto;1006padding-bottom:7px;1007outline:0;1008text-align:center;1009width:100%1010}1011.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{1012color:rgba(0, 0, 0, 0.83)1013}1014.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{1015color:rgba(0, 0, 0, 0.83)1016}1017.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{1018color:rgba(0, 0, 0, 0.83)1019}1020.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{1021color:rgba(0, 0, 0, 0.83)1022}1023.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{1024color:rgba(0, 0, 0, 0.83)1025}1026.dialog input[type=email]:focus,.dialog input[type=text]:focus{1027border-bottom:solid 2px #78a024;1028padding-bottom:6px1029}1030.dialog input.no-cursor{1031color:transparent;1032text-shadow:0 0 0 rgba(0, 0, 0, 0.83)1033}1034.dialog input.no-cursor:focus{1035outline:01036}1037.dialog input.no-cursor:focus{1038outline:01039}1040.dialog input[type=submit]{1041font-family:Lora, serif1042}1043.dialog .goog-buttonset-default{1044color:#78a0241045}1046.subscribe-popup{1047max-width:364px1048}1049.subscribe-popup h3{1050color:#ffffff;1051font-size:1.8em;1052margin-top:01053}1054.subscribe-popup .FollowByEmail h3{1055display:none1056}1057.subscribe-popup .FollowByEmail .follow-by-email-submit{1058color:#78a024;1059display:inline-block;1060margin:0 auto;1061margin-top:24px;1062width:auto;1063white-space:normal1064}1065.subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{1066cursor:default;1067opacity:.31068}1069@media (max-width:800px){1070.blog-name div.widget.Subscribe{1071margin-bottom:16px1072}1073body.item-view .blog-name div.widget.Subscribe{1074margin:8px auto 16px auto;1075width:100%1076}1077}1078body#layout .bg-photo,body#layout .bg-photo-overlay{1079display:none1080}1081body#layout .page_body{1082padding:0;1083position:relative;1084top:01085}1086body#layout .page{1087display:inline-block;1088left:inherit;1089position:relative;1090vertical-align:top;1091width:540px1092}1093body#layout .centered{1094max-width:954px1095}1096body#layout .navigation{1097display:none1098}1099body#layout .sidebar-container{1100display:inline-block;1101width:40%1102}1103body#layout .hamburger-menu,body#layout .search{1104display:none1105}1106.widget.Sharing .sharing-button{1107display:none1108}1109.widget.Sharing .sharing-buttons li{1110padding:01111}1112.widget.Sharing .sharing-buttons li span{1113display:none1114}1115.post-share-buttons{1116position:relative1117}1118.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{1119fill:#25a1861120}1121.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{1122background-color:transparent1123}1124.share-buttons{1125background-color:#ffffff;1126border-radius:2px;1127box-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);1128color:#25a186;1129list-style:none;1130margin:0;1131padding:8px 0;1132position:absolute;1133top:-11px;1134min-width:200px;1135z-index:1011136}1137.share-buttons.hidden{1138display:none1139}1140.sharing-button{1141background:0 0;1142border:0;1143margin:0;1144outline:0;1145padding:0;1146cursor:pointer1147}1148.share-buttons li{1149margin:0;1150height:48px1151}1152.share-buttons li:last-child{1153margin-bottom:01154}1155.share-buttons li .sharing-platform-button{1156box-sizing:border-box;1157cursor:pointer;1158display:block;1159height:100%;1160margin-bottom:0;1161padding:0 16px;1162position:relative;1163width:100%1164}1165.share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{1166background-color:rgba(128,128,128,.1);1167outline:01168}1169.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{1170position:absolute;1171top:10px1172}1173.share-buttons li span.sharing-platform-button{1174position:relative;1175top:01176}1177.share-buttons li .platform-sharing-text{1178display:block;1179font-size:16px;1180line-height:48px;1181white-space:nowrap1182}1183.share-buttons li .platform-sharing-text{1184margin-left:56px1185}1186.flat-button{1187cursor:pointer;1188display:inline-block;1189font-weight:700;1190text-transform:uppercase;1191border-radius:2px;1192padding:8px;1193margin:-8px1194}1195.flat-icon-button{1196background:0 0;1197border:0;1198margin:0;1199outline:0;1200padding:0;