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