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>3 <head>4 <style>5 /* Magnific Popup CSS */6 7.mfp-bg {8 top: 0;9 left: 0;10 width: 100%;11 height: 100%;12 z-index: 1042;13 overflow: hidden;14 position: fixed;15 background: #0b0b0b;16 opacity: 0.8;17 filter: alpha(opacity=80); }18 19.mfp-wrap {20 top: 0;21 left: 0;22 width: 100%;23 height: 100%;24 z-index: 1043;25 position: fixed;26 outline: none !important;27 -webkit-backface-visibility: hidden; }28 29.mfp-container {30 text-align: center;31 position: absolute;32 width: 100%;33 height: 100%;34 left: 0;35 top: 0;36 padding: 0 8px;37 -webkit-box-sizing: border-box;38 -moz-box-sizing: border-box;39 box-sizing: border-box; }40 41.mfp-container:before {42 content: '';43 display: inline-block;44 height: 100%;45 vertical-align: middle; }46 47.mfp-align-top .mfp-container:before {48 display: none; }49 50.mfp-content {51 position: relative;52 display: inline-block;53 vertical-align: middle;54 margin: 0 auto;55 text-align: left;56 z-index: 1045; }57 58.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {59 width: 100%;60 cursor: auto; }61 62.mfp-ajax-cur {63 cursor: progress; }64 65.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {66 cursor: -moz-zoom-out;67 cursor: -webkit-zoom-out;68 cursor: zoom-out; }69 70.mfp-zoom {71 cursor: pointer;72 cursor: -webkit-zoom-in;73 cursor: -moz-zoom-in;74 cursor: zoom-in; }75 76.mfp-auto-cursor .mfp-content {77 cursor: auto; }78 79.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {80 -webkit-user-select: none;81 -moz-user-select: none;82 user-select: none; }83 84.mfp-loading.mfp-figure {85 display: none; }86 87.mfp-hide {88 display: none !important; }89 90.mfp-preloader {91 color: #CCC;92 position: absolute;93 top: 50%;94 width: auto;95 text-align: center;96 margin-top: -0.8em;97 left: 8px;98 right: 8px;99 z-index: 1044; }100 .mfp-preloader a {101 color: #CCC; }102 .mfp-preloader a:hover {103 color: #FFF; }104 105.mfp-s-ready .mfp-preloader {106 display: none; }107 108.mfp-s-error .mfp-content {109 display: none; }110 111button.mfp-close, a.mfp-arrow {112 overflow: visible;113 cursor: pointer;114 border: 0;115 display: block;116 padding: 0;117 z-index: 1046;118 -webkit-box-shadow: none;119 box-shadow: none; }120 121 122.mfp-close {123 width: 44px;124 height: 44px;125 line-height: 44px;126 position: absolute;127 right: 0;128 top: 0;129 text-decoration: none;130 text-align: center;131 opacity: 0.65;132 filter: alpha(opacity=65);133 padding: 0 0 18px 10px;134 color: #FFF;135 font-style: normal;136 font-size: 28px;137 font-family: Arial, Baskerville, monospace; }138 .mfp-close:hover, .mfp-close:focus {139 background: none;140 border: 0px;141 opacity: 1;142 filter: alpha(opacity=100); }143 .mfp-close:active {144 top: 1px; }145 146.mfp-close svg {147 fill: #FFF; 148 height: 18px;149 width: 18px;150 position: relative;151 z-index: -1;152}153 154.mfp-close-btn-in .mfp-close {155 color: #333; }156 157.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {158 color: #FFF;159 right: -6px;160 text-align: right;161 padding-right: 6px;162 width: 100%; }163 164.mfp-counter {165 position: absolute;166 top: 16px;167 left: 0;168 color: #CCC;169 font-size: 14px;170 line-height: 18px;171 white-space: nowrap; }172 173.mfp-arrow {174 position: absolute;175background: rgba(0,0,0,0.5);176 opacity: .8;177 filter: alpha(opacity=65);178 margin: 0;179 top: 50%;180 margin-top: -55px;181 padding: 0;182 width: 80px;183 height: 80px;184 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }185 .mfp-arrow:active {186 margin-top: -54px; }187 .mfp-arrow:hover, .mfp-arrow:focus {188 background: #000;189 opacity: 1;190 filter: alpha(opacity=100); }191 .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {192 content: '';193 display: block;194 width: 0;195 height: 0;196 position: absolute;197 left: 0;198 top: 0;199 margin-top: 35px;200 margin-left: 35px;201 border: medium inset transparent; }202 .mfp-arrow:after, .mfp-arrow .mfp-a {203 204 top: 8px; }205 .mfp-arrow:before, .mfp-arrow .mfp-b {206 207 opacity: 0.7; }208 209.mfp-arrow-left {210 left: 20px;border-radius:2px; }211 .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {212 margin-left: 31px; }213 .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {214 margin-left: 25px;215 }216 217.mfp-arrow-right {218 right: 20px;219 border-radius:2px; }220 .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {221 margin-left: 39px; }222 .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {223 }224 225.mfp-iframe-holder {226 padding-top: 40px;227 padding-bottom: 40px; }228 .mfp-iframe-holder .mfp-content {229 line-height: 0;230 width: 100%;231 max-width: 900px; }232 .mfp-iframe-holder .mfp-close {233 top: -40px; }234 235.mfp-iframe-scaler {236 width: 100%;237 height: 0;238 overflow: hidden;239 padding-top: 56.25%; }240 .mfp-iframe-scaler iframe {241 position: absolute;242 display: block;243 top: 0;244 left: 0;245 width: 100%;246 height: 100%;247 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);248 background: #000; }249 250/* Main image in popup */251img.mfp-img {252 width: auto;253 max-width: 100%;254 height: auto;255 display: block;256 line-height: 0;257 -webkit-box-sizing: border-box;258 -moz-box-sizing: border-box;259 box-sizing: border-box;260 padding: 40px 0 40px;261 margin: 0 auto; }262 263/* The shadow behind the image */264.mfp-figure {265 line-height: 0; }266 .mfp-figure:after {267 content: '';268 position: absolute;269 left: 0;270 top: 40px;271 bottom: 40px;272 display: block;273 right: 0;274 width: auto;275 height: auto;276 z-index: -1;277 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);278 background: #444; }279 .mfp-figure small {280 color: #BDBDBD;281 display: block;282 font-size: 12px;283 line-height: 14px; }284 .mfp-figure figure {285 margin: 0; }286 287.mfp-bottom-bar {288 margin-top: 0;289 position: absolute;290 top: 0;291 left: 0;292 width: 100%;293 cursor: auto; }294 295.mfp-title {296 text-align: left;297 line-height: 18px;298 color: #F3F3F3;299 word-wrap: break-word;300 padding-right: 36px; }301 302.mfp-image-holder .mfp-content {303 max-width: 100%; }304 305.mfp-gallery .mfp-image-holder .mfp-figure {306 cursor: pointer; }307 308@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {309 /**310 * Remove all paddings around the image on small screen311 */312 .mfp-img-mobile .mfp-image-holder {313 padding-left: 0;314 padding-right: 0; }315 .mfp-img-mobile img.mfp-img {316 padding: 0; }317 .mfp-img-mobile .mfp-figure:after {318 top: 0;319 bottom: 0; }320 .mfp-img-mobile .mfp-figure small {321 display: inline;322 margin-left: 5px; }323 .mfp-img-mobile .mfp-bottom-bar {324 background: rgba(0, 0, 0, 0.6);325 bottom: 0;326 margin: 0;327 top: auto;328 padding: 3px 5px;329 position: fixed;330 -webkit-box-sizing: border-box;331 -moz-box-sizing: border-box;332 box-sizing: border-box; }333 .mfp-img-mobile .mfp-bottom-bar:empty {334 padding: 0; }335 .mfp-img-mobile .mfp-counter {336 right: 5px;337 top: 3px; }338 .mfp-img-mobile .mfp-close {339 top: 0;340 right: 0;341 width: 35px;342 height: 35px;343 line-height: 35px;344 background: rgba(0, 0, 0, 0.6);345 position: fixed;346 text-align: center;347 padding: 0; }348 }349.mfp-arrow svg {350 height: 32px;351 width: 32px;352 fill: #FFF;353 position: relative;354 z-index: -1;355top: 50%;356 -webkit-transform: translateY(-50%);357 -ms-transform: translateY(-50%);358 transform: translateY(-50%);359}360@media all and (max-width: 900px) {361 .mfp-arrow {362 -webkit-transform: scale(0.50);363 transform: scale(0.50);364 background: rgba(0,0,0,0.5);365 opacity: .8366 }367 .mfp-arrow svg { 368 height: 40px;369 width: 40px;370 }371 372 .mfp-arrow-left {373 -webkit-transform-origin: 0;374 transform-origin: 0;375 left: 6px376 }377 378 .mfp-arrow-right {379 -webkit-transform-origin: 100%;380 transform-origin: 100%;381 right: 6px;382 }383 384 .mfp-container {385 padding-left: 6px;386 padding-right: 6px; }387 }388 389.mfp-ie7 .mfp-img {390 padding: 0; }391.mfp-ie7 .mfp-bottom-bar {392 width: 600px;393 left: 50%;394 margin-left: -300px;395 margin-top: 5px;396 padding-bottom: 5px; }397.mfp-ie7 .mfp-container {398 padding: 0; }399.mfp-ie7 .mfp-content {400 padding-top: 44px; }401.mfp-ie7 .mfp-close {402 top: 0;403 right: 0;404 padding-top: 0; }405 406/*! normalize.css v2.1.0 | MIT License | git.io/normalize */407 408/* ==========================================================================409 HTML5 display definitions410 ========================================================================== */411 412/**413 * Correct `block` display not defined in IE 8/9.414 */415 416 417article,418aside,419details,420figcaption,421figure,422footer,423header,424hgroup,425main,426nav,427section,428summary {429 display: block;430}431 432/**433 * Correct `inline-block` display not defined in IE 8/9.434 */435 436audio,437canvas,438video {439 display: inline-block;440}441 442/**443 * Prevent modern browsers from displaying `audio` without controls.444 * Remove excess height in iOS 5 devices.445 */446 447audio:not([controls]) {448 display: none;449 height: 0;450}451 452/**453 * Address styling not present in IE 8/9.454 */455 456[hidden] {457 display: none;458}459 460/* ==========================================================================461 Base462 ========================================================================== */463 464/**465 * 1. Set default font family to sans-serif.466 * 2. Prevent iOS text size adjust after orientation change, without disabling467 * user zoom.468 */469 470html {471 font-family: sans-serif; /* 1 */472 -webkit-text-size-adjust: 100%; /* 2 */473 -ms-text-size-adjust: 100%; /* 2 */474}475 476/**477 * Remove default margin.478 */479 480body {481 margin: 0;482}483 484/* ==========================================================================485 Links486 ========================================================================== */487 488/**489 * Address `outline` inconsistency between Chrome and other browsers.490 */491 492a:focus {493 outline: thin dotted;494}495 496/**497 * Improve readability when focused and also mouse hovered in all browsers.498 */499 500a:active,501a:hover {502 outline: 0;503}504 505/* ==========================================================================506 Typography507 ========================================================================== */508 509/**510 * Address variable `h1` font-size and margin within `section` and `article`511 * contexts in Firefox 4+, Safari 5, and Chrome.512 */513 514h1 {515 font-size: 2em;516 margin: 0.67em 0;517}518 519/**520 * Address styling not present in IE 8/9, Safari 5, and Chrome.521 */522 523abbr[title] {524 border-bottom: 1px dotted;525}526 527/**528 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.529 */530 531b,532strong {533 font-weight: bold;534}535 536/**537 * Address styling not present in Safari 5 and Chrome.538 */539 540dfn {541 font-style: italic;542}543 544/**545 * Address differences between Firefox and other browsers.546 */547 548hr {549 -moz-box-sizing: content-box;550 box-sizing: content-box;551 height: 0;552}553 554/**555 * Address styling not present in IE 8/9.556 */557 558mark {559 background: #ff0;560 color: #000;561}562 563/**564 * Correct font family set oddly in Safari 5 and Chrome.565 */566 567code,568kbd,569pre,570samp {571 font-family: monospace, serif;572 font-size: 1em;573}574 575/**576 * Improve readability of pre-formatted text in all browsers.577 */578 579pre {580 white-space: pre-wrap;581}582 583/**584 * Set consistent quote types.585 */586 587q {588 quotes: "\201C" "\201D" "\2018" "\2019";589}590 591/**592 * Address inconsistent and variable font size in all browsers.593 */594 595small {596 font-size: 80%;597}598 599/**600 * Prevent `sub` and `sup` affecting `line-height` in all browsers.601 */602 603sub,604sup {605 font-size: 75%;606 line-height: 0;607 position: relative;608 vertical-align: baseline;609}610 611sup {612 top: -0.5em;613}614 615sub {616 bottom: -0.25em;617}618 619/* ==========================================================================620 Embedded content621 ========================================================================== */622 623/**624 * Remove border when inside `a` element in IE 8/9.625 */626 627img {628 border: 0;629}630 631/**632 * Correct overflow displayed oddly in IE 9.633 */634 635svg:not(:root) {636 overflow: hidden;637}638 639/* ==========================================================================640 Figures641 ========================================================================== */642 643/**644 * Address margin not present in IE 8/9 and Safari 5.645 */646 647figure {648 margin: 0;649}650 651/* ==========================================================================652 Forms653 ========================================================================== */654 655/**656 * Define consistent border, margin, and padding.657 */658 659fieldset {660 border: 1px solid #c0c0c0;661 margin: 0 2px;662 padding: 0.35em 0.625em 0.75em;663}664 665/**666 * 1. Correct `color` not being inherited in IE 8/9.667 * 2. Remove padding so people aren't caught out if they zero out fieldsets.668 */669 670legend {671 border: 0; /* 1 */672 padding: 0; /* 2 */673}674 675/**676 * 1. Correct font family not being inherited in all browsers.677 * 2. Correct font size not being inherited in all browsers.678 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.679 */680 681button,682input,683select,684textarea {685 font-family: inherit; /* 1 */686 font-size: 100%; /* 2 */687 margin: 0; /* 3 */688}689 690/**691 * Address Firefox 4+ setting `line-height` on `input` using `!important` in692 * the UA stylesheet.693 */694 695button,696input {697 line-height: normal;698}699 700/**701 * Address inconsistent `text-transform` inheritance for `button` and `select`.702 * All other form control elements do not inherit `text-transform` values.703 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.704 * Correct `select` style inheritance in Firefox 4+ and Opera.705 */706 707button,708select {709 text-transform: none;710}711 712/**713 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`714 * and `video` controls.715 * 2. Correct inability to style clickable `input` types in iOS.716 * 3. Improve usability and consistency of cursor style between image-type717 * `input` and others.718 */719 720button,721html input[type="button"], /* 1 */722input[type="reset"],723input[type="submit"] {724 -webkit-appearance: button; /* 2 */725 cursor: pointer; /* 3 */726}727 728/**729 * Re-set default cursor for disabled elements.730 */731 732button[disabled],733html input[disabled] {734 cursor: default;735}736 737/**738 * 1. Address box sizing set to `content-box` in IE 8/9.739 * 2. Remove excess padding in IE 8/9.740 */741 742input[type="checkbox"],743input[type="radio"] {744 box-sizing: border-box; /* 1 */745 padding: 0; /* 2 */746}747 748/**749 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.750 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome751 * (include `-moz` to future-proof).752 */753 754input[type="search"] {755 -webkit-appearance: textfield; /* 1 */756 -moz-box-sizing: content-box;757 -webkit-box-sizing: content-box; /* 2 */758 box-sizing: content-box;759}760 761/**762 * Remove inner padding and search cancel button in Safari 5 and Chrome763 * on OS X.764 */765 766input[type="search"]::-webkit-search-cancel-button,767input[type="search"]::-webkit-search-decoration {768 -webkit-appearance: none;769}770 771/**772 * Remove inner padding and border in Firefox 4+.773 */774 775button::-moz-focus-inner,776input::-moz-focus-inner {777 border: 0;778 padding: 0;779}780 781/**782 * 1. Remove default vertical scrollbar in IE 8/9.783 * 2. Improve readability and alignment in all browsers.784 */785 786textarea {787 overflow: auto; /* 1 */788 vertical-align: top; /* 2 */789}790 791/* ==========================================================================792 Tables793 ========================================================================== */794 795/**796 * Remove most spacing between table cells.797 */798 799table {800 border-collapse: collapse;801 border-spacing: 0;802}803.slideshow {804 position: relative;805}806.slideshow .slides-container {807 display: none;808}809.slideshow .scrollable {810 *zoom: 1;811 position: relative;812 top: 0;813 left: 0;814 overflow-y: auto;815 -webkit-overflow-scrolling: touch;816 height: 100%;817}818.slideshow .scrollable:after {819 content: "";820 display: table;821 clear: both;822}823 824.slides-navigation {825 margin: 0 auto;826 position: absolute;827 z-index: 3;828 top: 46%;829 width: 100%;830}831.slides-navigation a {832 position: absolute;833 display: block;834}835.slides-navigation a.prev {836 left: 0;837}838.slides-navigation a.next {839 right: 0;840}841 842.slides-pagination {843 position: absolute;844 z-index: 3;845 bottom: 0;846 text-align: center;847 width: 100%;848}849.slides-pagination a {850 border: 2px solid #222;851 border-radius: 15px;852 width: 10px;853 height: 10px;854 display: -moz-inline-stack;855 display: inline-block;856 vertical-align: middle;857 *vertical-align: auto;858 zoom: 1;859 *display: inline;860 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");861 margin: 2px;862 overflow: hidden;863 text-indent: -100%;864}865.slides-pagination a.current {866 background: #222;867}868html, body {869 height: 100%;870}871 872body {873 background: #ffffff;874 color: #1b1b1b;875 font: normal 100%/1.5 "Open Sans", sans-serif;876 -webkit-font-smoothing: antialiased;877}878 879hr {880 background-color: 1px solid #e2e2e2;881 border-style: none;882 border: none;883 box-sizing: border-box;884 height: 1px;885 margin: 16px 0;886 padding: 0;887 width: 100%;888}889 890header:after {891 -webkit-transition-property: all;892 -moz-transition-property: all;893 -o-transition-property: all;894 transition-property: all;895 -webkit-transition-duration: 0.5s;896 -moz-transition-duration: 0.5s;897 -o-transition-duration: 0.5s;898 transition-duration: 0.5s;899 -webkit-transition-timing-function: ease-in;900 -moz-transition-timing-function: ease-in;901 -o-transition-timing-function: ease-in;902 transition-timing-function: ease-in;903}904 905a,906header a:after,907.slideshow div a,908.button, submit, input[type='submit'], button, select, path, circle, .select {909 -webkit-transition-property: all;910 -moz-transition-property: all;911 -o-transition-property: all;912 transition-property: all;913 -webkit-transition-duration: 0.25s;914 -moz-transition-duration: 0.25s;915 -o-transition-duration: 0.25s;916 transition-duration: 0.25s;917 -webkit-transition-timing-function: ease-in-out;918 -moz-transition-timing-function: ease-in-out;919 -o-transition-timing-function: ease-in-out;920 transition-timing-function: ease-in-out;921}922 923a {924 color: #919191;925 text-decoration: none;926}927 928a:hover {929 color: #1b1b1b;930}931 932.button, submit, input[type='submit'], button {933 -webkit-border-radius: 0;934 -moz-border-radius: 0;935 -ms-border-radius: 0;936 -o-border-radius: 0;937 border-radius: 0;938 font-size: 14px;939 line-height: 21px;940 font-size: 0.875rem;941 line-height: 1.3125rem;942 background-color: transparent;943 border: 1px solid #919191;944 box-sizing: border-box;945 color: #919191;946 display: inline-block;947 font-weight: 600;948 height: 56px;949 line-height: 56px;950 margin: 0;951 outline: 0;952 padding: 0 16px;953 white-space: nowrap;954 width: 100%;955}956.button:hover, .button:focus, submit:hover, submit:focus, input[type='submit']:hover, input[type='submit']:focus, button:hover, button:focus {957 background-color: #1b1b1b;958 border: 1px solid #1b1b1b;959 color: #ffffff;960}961 962form, input, textarea, submit, input[type='submit'], input[type='text'], button, select {963 font-family: "Open Sans", sans-serif;964 font-size: 14px;965 line-height: 21px;966 font-size: 0.875rem;967 line-height: 1.3125rem;968 font-style: normal;969 -webkit-font-smoothing: antialiased;970 -webkit-appearance: none;971 -moz-appearance: none;972 appearance: none;973}974 975input[type='text'], input[type='textarea'], textarea {976 -webkit-border-radius: 0;977 -moz-border-radius: 0;978 -ms-border-radius: 0;979 -o-border-radius: 0;980 border-radius: 0;981 font-size: 16px;982 line-height: 24px;983 font-size: 1rem;984 line-height: 1.5rem;985 background-color: rgba(255, 255, 255, 0);986 border: 1px solid #919191;987 box-sizing: border-box;988 color: #919191;989 margin: 0;990 outline: 0;991 white-space: nowrap;992 text-indent: 16px;993}994input[type='text']:focus, input[type='textarea']:focus, textarea:focus {995 border: 1px solid #1b1b1b;996 color: #1b1b1b;997}998 999input[type='textarea'], textarea {1000 padding: 16px;1001 text-indent: 0px;1002 white-space: normal;1003}1004 1005.select {1006 *zoom: 1;1007 border: 1px solid #919191;1008 box-sizing: border-box;1009 color: #919191;1010 margin-bottom: 16px;1011 position: relative;1012}1013.select:after {1014 content: "";1015 display: table;1016 clear: both;1017}1018.select:hover {1019 background-color: #1b1b1b;1020 border: 1px solid #1b1b1b;1021 color: #ffffff;1022}1023.select:hover select {1024 color: #ffffff;1025}1026.select select {1027 background: none;1028 border: 0px;1029 border-radius: 0px;1030 color: #919191;1031 font-weight: 600;1032 height: 56px;1033 line-height: 56px;1034 padding: 0 55px 0 12px;1035 position: relative;1036 width: 100%;1037 z-index: 2;1038}1039.select select option {1040 color: black;1041 background: white;1042}1043.select select:focus {1044 outline: none;1045}1046.select select::-ms-expand {1047 display: none;1048}1049.select svg {1050 fill: #919191;1051 position: absolute;1052 right: 32px;1053 top: 26px;1054 z-index: 1;1055}1056.select:hover svg {1057 fill: #ffffff;1058}1059 1060h1, h2, h3, h4, h5, h6, strong {1061 font-family: "Questrial", sans-serif;1062 text-transform: uppercase;1063 letter-spacing: 0.5em;1064 text-indent: 0.5em;1065}1066@media only screen and (max-width: 800px) {1067 h1, h2, h3, h4, h5, h6, strong {1068 letter-spacing: 0;1069 text-indent: 0;1070 white-space: normal;1071 }1072}1073 1074strong {1075 letter-spacing: 0.125em;1076 text-indent: 0;1077}1078 1079cite {1080 font-style: normal;1081}1082 1083h1 {1084 font-size: 28px;1085 line-height: 42px;1086 font-size: 1.75rem;1087 line-height: 2.625rem;1088}1089 1090h2 {1091 font-size: 24px;1092 line-height: 36px;1093 font-size: 1.5rem;1094 line-height: 2.25rem;1095}1096 1097h3 {1098 font-size: 20px;1099 line-height: 30px;1100 font-size: 1.25rem;1101 line-height: 1.875rem;1102}1103 1104h4 {1105 font-size: 16px;1106 line-height: 24px;1107 font-size: 1rem;1108 line-height: 1.5rem;1109}1110 1111h5 {1112 font-size: 12px;1113 line-height: 18px;1114 font-size: 0.75rem;1115 line-height: 1.125rem;1116}1117 1118h6 {1119 font-size: 12px;1120 line-height: 18px;1121 font-size: 0.75rem;1122 line-height: 1.125rem;1123}1124 1125.errors {1126 background: #f25749;1127 color: #ffffff;1128 list-style-type: none;1129 text-align: center;1130 padding: 16px;1131}1132 1133.standalone {1134 height: auto;1135 margin: 0 auto;1136 max-width: 500px;1137 padding-top: 120px;1138 text-align: center;1139}1140.standalone div {1141 padding: 0 32px;1142}1143div.wrap {1144 height: 100%;1145 width: 100%;1146}1147 1148header {1149 *zoom: 1;1150 font-family: "Open Sans", sans-serif;1151 font-weight: 600;1152 height: 88px;1153 position: relative;1154 width: 100%;1155 z-index: 999;1156}1157header:after {1158 content: "";1159 display: table;1160 clear: both;1161}1162header.home {1163 position: fixed;1164}1165@media only screen and (max-width: 800px) {1166 header.home {1167 position: absolute ;1168 }1169}1170header.home:after {1171 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);1172 opacity: 0;1173 background-color: #ffffff;1174 border-bottom: 1px solid #e2e2e2;1175 content: " ";1176 display: block;1177 height: 100%;1178 position: absolute;1179 width: 100%;1180 z-index: 96;1181}1182header.overlay, header.page {1183 position: fixed;1184}1185header.overlay:after, header.page:after {1186 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);1187 opacity: 1;1188 background-color: #ffffff;1189 border-bottom: 1px solid #e2e2e2;1190 content: " ";1191 display: block;1192 height: 100%;1193 position: absolute;1194 width: 100%;1195 z-index: 96;1196}1197@media only screen and (max-width: 800px) {1198 header.overlay, header.page {1199 position: relative;1200 }