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 class="" lang="en" style="height: 100%;">3 <head>4 <style>5 @charset "utf-8";6 7@font-face {8 font-family: 'Libre Franklin';9 font-style: normal;10 font-weight: 400;11 font-display: swap;12 src: local('Libre Franklin'), local('LibreFranklin-Regular'),13 url(/tech/fonts/librefranklin/librefranklin-regular.woff) format('woff'),14 url(/tech/fonts/librefranklin/librefranklin-regular.ttf) format('truetype');15}16@font-face {17 font-family: 'Libre Franklin';18 font-style: normal;19 font-weight: 700;20 font-display: swap;21 src: local('Libre Franklin Bold'), local('LibreFranklin-Bold'),22 url(/tech/fonts/librefranklin/librefranklin-bold.woff) format('woff'),23 url(/tech/fonts/librefranklin/librefranklin-bold.ttf) format('truetype');24}25@font-face {26 font-family: 'Libre Franklin';27 font-style: italic;28 font-weight: 400;29 font-display: swap;30 src: local('Libre Franklin Italic'), local('LibreFranklin-Italic'),31 url(/tech/fonts/librefranklin/librefranklin-italic.woff) format('woff'),32 url(/tech/fonts/librefranklin/librefranklin-italic.ttf) format('truetype');33}34@font-face {35 font-family: 'Libre Franklin';36 font-style: italic;37 font-weight: 700;38 font-display: swap;39 src: local('Libre Franklin Bold Italic'), local('LibreFranklin-BoldItalic'),40 url(/tech/fonts/librefranklin/librefranklin-bolditalic.woff) format('woff'),41 url(/tech/fonts/librefranklin/librefranklin-bolditalic.ttf) format('truetype');42}43 44/* Font icons - from Fontello */45@font-face {46 font-family: 'hcplc_icons';47 src: url('/tech/fontello/font/fontello.eot');48 src: url('/tech/fontello/font/fontello.eot?#iefix') format('embedded-opentype'),49 url('/tech/fontello/font/fontello.woff2') format('woff2'),50 url('/tech/fontello/font/fontello.woff?v=2') format('woff'),51 url('/tech/fontello/font/fontello.ttf?v=2') format('truetype');52 font-weight: normal;53 font-style: normal;54}55 56/* HCPLC.org Styles */57/* ----- reset styles begin ------ */58/* http://meyerweb.com/eric/tools/css/reset/ 59 v2.0 | 2011012660 License: none (public domain)61*/62html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {63 margin:0;64 padding:0;65 border:0;66 font-size:100%;67 font-family:inherit;68 vertical-align:baseline;69}70/* HTML5 display-role reset for older browsers */71article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {display:block;}72body { 73 -webkit-box-sizing: border-box;74 -moz-box-sizing: border-box;75 box-sizing: border-box;76}77ol, ul {list-style:none;}78blockquote,q {quotes:none;}79blockquote:before,blockquote:after,q:before,q:after {content:''; content:none;}80table {border-collapse:collapse; border-spacing:0;}81[type="text"], [type="submit"], [type="button"], [type="password"], textarea {82 -webkit-appearance: none;83 -moz-appearance: none;84 appearance: none;85 border-radius: 0;86}87input {font-size: 100%;}88/* ----- reset styles end ------ */89 90/* Font icons - from Fontello */91[class^="icon-"]:before,92[class*=" icon-"]:before {93 font-family: "hcplc_icons";94 font-style: normal;95 font-weight: normal;96 display: inline-block;97 text-decoration: inherit;98 width: 1em;99 margin-right: .2em;100 text-align: center;101 /* For safety - reset parent styles, that can break glyph codes*/102 font-variant: normal;103 text-transform: none;104 /* fix buttons height, for twitter bootstrap */105 line-height: 1em;106 /* Font smoothing. That was taken from TWBS */107 -webkit-font-smoothing: antialiased;108 -moz-osx-font-smoothing: grayscale;109}110.icon-android:before {content: '\f17b';}111.icon-apple:before {content: '\f179';}112.icon-attention:before {content: '\e817';}113.icon-calendar:before {content: '\e81b';}114.icon-cancel:before {content: '\e850';}115.icon-cancel-circled:before {content: '\e80a';}116.icon-cog:before {content: '\e819';}117.icon-ellipsis:before {content: '\f141';}118.icon-ellipsis-vert:before {content: '\f142';}119.icon-help-circled:before {content: '\e80d';}120.icon-home:before {content: '\e80e';}121.icon-info-circled:before {content: '\e80c';}122.icon-keyboard:before {content: '\f11c';}123.icon-location:before {content: '\e816';}124.icon-mail:before {content: '\e802';}125.icon-menu:before {content: '\f0c9';}126.icon-ok:before {content: '\e809';}127.icon-phone:before {content: '\e81a';}128.icon-plus-circled:before {content: '\e837';}129.icon-search:before {content: '\e801';}130.icon-th:before {content: '\e806';} /* app menu */131.icon-thumbs-up:before {content: '\e845';}132.icon-videocam:before {content: '\e851';}133/* directional icons */134.icon-right-open:before {content: '\e83b';}135.icon-left-open:before {content: '\e83c';}136.icon-down-open:before {content: '\e83d';}137.icon-up-open:before {content: '\e820';}138.icon-left-circled:before {content: '\f0a8';}139.icon-right-circled:before {content: '\f0a9';}140.icon-up-circled:before {content: '\f0aa';}141.icon-down-circled:before {content: '\f0ab';}142.icon-angle-circled-left:before {content: '\f137';}143.icon-angle-circled-right:before {content: '\f138';}144.icon-angle-circled-up:before {content: '\f139';}145.icon-angle-circled-down:before {content: '\f13a';}146/* social media icons */147.icon-facebook-squared:before {content: '\f308';}148.icon-instagram:before {content: '\f16d';}149.icon-linkedin-squared:before {content: '\f30c';}150.icon-pinterest-squared:before {content: '\f0d3';}151.icon-twitter:before {content: '\f099';}152.icon-youtube-play:before {content: '\f16a';}153 154*, *:before, *:after {155 box-sizing: border-box;156}157body {158 line-height: 1.25em;159 font-family: "Libre Franklin", Arial, Helvetica, sans-serif;160 background-color: #ffffff;161}162a {163 text-decoration: underline;164 color: #185370;165 cursor: pointer;166}167a:hover {168 color: #187061;169}170a img {171 -webkit-transition: -webkit-opacity 0.25s;172 transition: opacity 0.25s;173}174a:hover img {175 -webkit-opacity: 0.88;176 opacity: 0.88;177}178address {179 font-style: normal;180}181caption {182 caption-side: bottom;183 margin-top: 0.5em;184}185figure {186 text-align: center;187}188figure figcaption {189 text-align: center;190}191h1, h2, h3, h4, h5, h6 {192 margin: 0.75em 0;193 clear: both;194 line-height: 1.125em;195 color: #222222;196}197h1 {198 font-size: 160%;199}200h2 {201 font-size: 140%;202}203h3 {204 font-size: 120%;205}206h4 {207 font-size: 110%;208}209h5 {210 font-size: 100%;211}212img {213 -webkit-backface-visibility: hidden; /* fixes movement on hover in Chrome */214 backface-visibility: hidden;215 max-width: 100%;216 border: none;217 padding: 0;218 height: auto;219}220input,221select,222textarea {223 font-family: inherit;224}225li {226 padding: 0.25em 0;227 -webkit-break-inside: avoid;228 break-inside: avoid;229}230ol {231 list-style-type: decimal;232 margin: 0 0 0.5em 2em;233}234p {235 margin-bottom: 1em;236 line-height: 1.375em;237}238p + ul {239 margin-top: -0.5em;240}241table td,242table th {243 padding: 0.5em 0.75em;244}245table caption {246 font-size: 92%;247 font-style: italic;248}249ul {250 list-style: none;251 margin-left: 0.5em;252}253 254/*HCPLC grid system*/255.row {256 clear: both;257 overflow: hidden;258}259.column-span1 {260 width: 8.33333333%;261}262.column-span2 {263 width: 16.66666666%;264}265.column-span3 {266 width: 25%;267}268.column-span4 {269 width: 33.33333333%;270}271.column-span5 {272 width: 41.66666666%;273}274.column-span6 {275 width: 50%;276}277.column-span7 {278 width: 58.33333333%;279}280.column-span8 {281 width: 66.66666666%;282}283.column-span9 {284 width: 75%;285}286.column-span10 {287 width: 83.33333333%;288}289.column-span12 {290 width: 100%;291}292.column-halfspan {/* stays width: 50% until screen-width 33em */293 width: 50%;294} 295.column-span2,.column-span3,.column-span4,296.column-span5,.column-span6,.column-span7,297.column-span8,.column-span9,.column-span10,298.column-span12, .column-halfspan {299 float: left;300 padding: 0.5em 1em;301 overflow: hidden;302}303.cspan-left {304 padding-right: 2em;305}306.cspan-right {307 padding-left: 2em;308}309 310/*#container {311 position: relative;312 margin: 0;313}*/314.wrapper {315 max-width: 82em;316 margin: 0 auto;317 overflow: hidden;318}319 320.main,321#main {322 overflow: hidden;323 clear: both;324 min-height: 36em;325 max-width: 82em;326 margin: 0 auto;327 padding-bottom: 2em;328}329.main--fullwidth,330#main.main--fullwidth {331 max-width: none;332}333/* for pop-up overlays */334.overlay {335 display: flex;336 position: fixed;337 z-index: 100;338 -webkit-display: flex;339 -webkit-justify-content: center;340 -webkit-align-items: center;341 justify-content: center;342 align-items: center;343 top: 0;344 left: 0;345 width: 100%;346 height: 100%;347 background: #242424;348 background: rgba(51, 51, 51, 0.88);349 display: none;350}351.noscroll { /*apply to body when overlay visible*/352 margin-right: 17px;353 overflow: hidden;354}355.overlay-close {356 position: fixed;357 top: 8px;358 right: 12px;359 z-index: 105;360 color: #ffffff;361 font-size: 36px;362 margin: 0;363 padding: 0;364 text-decoration: none;365 border: 0;366 background: transparent;367 -webkit-appearance: none;368 appearance: none;369}370.overlay-close:hover {371 color: #fbcc0a372}373.lightbox {374 position: relative;375 margin: 0 auto;376 max-width: 100%;377 max-width: calc(100% - 32px);378 -webkit-flex: 0 0 auto;379 flex: 0 0 auto;380 background-color: #ffffff;381 margin: 56px 24px;382}383.iframe-close {384 color: #ffffff;385 text-decoration: none;386 border: 0;387 background: transparent;388 -webkit-appearance: none;389 appearance: none;390}391 392#back-to-top {393 display: none;394 position: fixed;395 z-index: 5;396 bottom: 2em;397 right: 1em;398 text-decoration: none;399}400#back-to-top svg {401 width: 3.5em;402 height: 3.5em;403 -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,1));404 filter: drop-shadow(0 1px 2px rgba(0,0,0,1));405}406#back-to-top:hover svg {407 -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));408 filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));409}410 411/*---Loading graphic---*/412.hcplc_loading {413 display: block;414 width: 6em;415 height: 6em;416 -webkit-opacity: 0.88;417 opacity: 0.88;418 margin: 2em auto;419}420 421/*--general use---*/422#hptfspm,423.hptfspm {424 display: none;425}426.app-faq-link {427 margin-top: 0.325em;428 font-style: italic;429}430.app-store-links a {431 display: inline-block;432 width: 2.5em;433 height: 2.5em;434 padding: .25em;435 text-decoration: none;436 color: #ffffff;437 background-color: #717171;438 margin-left: 0.5em;439}440.app-store-links a:first-child {441 margin-left: 0;442}443.big-text {444 font-size: 120%;445}446.blocksection {447 padding: 0.5em 1em;448 margin-bottom: 0.5em;449}450.blocksection:nth-child(odd) {451 background-color: #e9edee;452}453.bordered {454 border: 1px solid #484848;455}456.bordered-light {457 border: 1px solid #d6d7d7;458}459.cardstyle {/* appearance of .mcard */460 background-color: #f5f7f7;461 border-radius: 2px;462 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25), 0 1px 5px 0 rgba(0, 0, 0, 0.25);463}464.centered {text-align: center;}465.columns2 {466 -moz-columns: 20em 2;467 -webkit-columns: 20em 2;468 columns: 20em 2;469}470.columns3 {471 -moz-columns: 16em 3;472 -webkit-columns: 16em 3;473 columns: 16em 3;474}475.columns4 {476 -moz-columns: 10em 4;477 -webkit-columns: 10em 4;478 columns: 10em 4;479}480.emphasized {481 background-color: #c7bdbd; 482}483.float-left {484 float: left;485}486.float-right {487 float: right;488}489.float-left--img {490 margin: 0 1.5em 1em 0;491}492.float-right--img {493 margin: 0 0 1em 1.5em;494}495.float-logo {496 float: right;497}498.float-logo2 {499 float: left;500 margin: 0 1em;501}502.glyph-text,503.hidden-text {/* font icon & accessibility fallback */504 position: absolute;505 overflow: hidden;506 height: 1px;507 width: 1px;508 clip: rect(0 0 0 0);509}510.h-card {511 line-height: 1.375em;512 font-size: 106.25%;513}514.hero-div {515 position: relative;516}517.hero-div__title {518 position: absolute;519 color: #ffffff;520 font-size: 48px;521 margin: 8px;522 top: 0;523 left: 0;524 background-color: rgba(0,0,0,.8);525 text-shadow: 1px 1px 3px #000000;526 padding: 0.125em 0.325em;527}528.hero-div__bckimg {529 display: block;530 width: 100%;531}532.hide-noscript,533.hidden {534 display: none;535}536.icon-standalone:before { /* font icons not preceding text */537 margin: 0 !important;538}539.linkgallery {540 display: -webkit-flex;541 display: flex;542 -webkit-flex-wrap: wrap;543 flex-wrap: wrap;544 overflow: hidden;545 padding: 2px;546}547.linkgallery a {548 position: relative;549 float: left;550 margin: 0 2em 2em 0;551 text-align: center;552 text-decoration: none;553}554.linkgallery--3per a {555 margin: 0 0 2em 0;556 padding: 0 0.75em;557 width: 33.33333%;558 -webkit-flex: 1 1 auto;559 flex: 1 1 auto;560 min-width: 240px;561}562.linkgallery a:hover {563 text-decoration: underline564}565.location-note {566 margin-left: 0.2em;567 font-size: 0.8em;568 font-style: italic;569}570.mobile-only {571 display: none; 572}573.no-bottom {574 margin-bottom: 0 !important;575}576.no-break {577 -webkit-column-break-inside: avoid;578 page-break-inside: avoid;579 break-inside: avoid;580}581.no-crowd {582 margin-bottom: 2em !important;583}584.no-crowd-plus {585 margin-bottom: 3em !important;586}587.no-flow {588 overflow: hidden;589}590.note {591 font-size: 90%;592 font-style: italic;593}594.offset-box {595 margin-bottom: 2em;596 padding: 1em;597 background-color: #e9edee;598}599.offset-box h2,600.offset-box h3,601.offset-box h4 {602 margin-top: 0;603}604.offset-box p:last-child, 605.offset-box ul:last-child {606 margin-bottom: 0;607}608.red-text {609 color: #b30000;610}611.shaded {612 background-color: #e9edee;613}614.shaded-light {615 background-color: #f5f7f7;616}617.title {618 font-style: italic;619}620.video-container {621 position: relative;622 padding-bottom: 56.25%;623 height: 0;624 overflow: hidden;625}626.video-container iframe, 627.video-container object, 628.video-container embed {629 position: absolute;630 top: 0;631 left: 0;632 width: 100%;633 height: 100%;634}635 636/*--buttons--*/637.button1,638.button2 {639 white-space: nowrap;640 color: #ffffff;641 text-decoration: none;642 cursor: pointer;643 border: none;644 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25), 0 1px 5px 0 rgba(0, 0, 0, 0.25);645 -webkit-transition: background-color 0.125s linear, box-shadow 0.125s linear;646 transition: background-color 0.125s linear, box-shadow 0.125s linear;647}648.button1 {649 display: inline-block;650 margin: 0.5em 1em 0.5em 0;651 padding: 0.5em 0.75em;652 font-size: 1em;653 line-height: 1.5em;654 background-color: #457424;655}656.button1.float-right {657 margin-right: 0;658 margin-left: 1em;659}660.button2 {661 font-size: 120%;662 margin: 2em 0 1em 0;663 line-height: 2em;664 padding: 0.75em 1.25em;665 background-color: #187061;666 text-align: center;667}668.button1:hover,669.button2:hover {670 text-decoration: none;671 color: #ffffff;672 box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.44), 0 2px 4px 0 rgba(0, 0, 0, 0.44);673}674.button1:hover {675 background-color: #32541a;676}677.button2:hover {678 background-color: #0f463d;679}680.button3 {681 color: #333;682 background-color: #e9edee;683 text-decoration: none;684 color: #333;685 padding: 0.5rem 0.75rem;686 box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);687 transition: background-color 0.125s linear, box-shadow 0.125s linear;688}689.button3:hover {690 color: #000;691 background-color: #ddd;692 box-shadow: 1px 2px 2px 0 rgb(0 0 0 / 25%), 0 2px 3px 0 rgb(0 0 0 / 25%);693}694 695/*--Tiles, new style --*/696.tile-container {697 display: -webkit-flex;698 display: flex;699 -webkit-flex-wrap: wrap;700 flex-wrap: wrap;701 -webkit-justify-content: flex-start;702 justify-content: flex-start;703}704.tile {705 display: block;706 position: relative;707 -webkit-flex: 0 1 23%;708 flex: 0 1 23%;709 margin: 0 1% 1em 1%;710 padding: 0;711 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);712 -webkit-transition: box-shadow 0.125s linear;713 transition: box-shadow 0.125s linear;714}715.tile--2c {716 flex: 0 1 48%;717}718.tile--3c {719 flex: 0 1 32%;720}721.tile:hover {722 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);723}724.tile__img {725 display: block;726 aspect-ratio: 3 / 2;727}728.tile__title {729 position: absolute;730 bottom: 4px;731 left: 4px;732 padding: 8px;733 color: #000000;734 font-size: 1.25em;735 font-weight: 700;736 background-color: rgba(255, 255, 255, 0.95);737 border: 1px solid #242424;738 max-width: 88%;739}740.tile:hover .tile__title {741 color: #242424;742}743@supports (display: grid) {744 .tile-container {745 display: grid;746 grid-template-columns: 1fr 1fr 1fr 1fr;747 grid-gap: 24px;748 }749 .tile-container--2c {750 grid-template-columns: 1fr 1fr;751 }752 .tile-container--3c {753 grid-template-columns: 1fr 1fr 1fr;754 }755 .tile {756 margin: 0;757 }758}759.tile--db {760 text-align: center;761 padding: 8px;762 background-color: #fcfcfc;763 text-decoration: none;764 color: #000000;765}766.tile--db:hover {767 text-decoration: underline;768}769.tile--db img {770 margin-bottom: 12px;771}772 773/*--Cards--*/774.card {775 float: left;776 margin: 0 1% 1em 1%;777 -webkit-transition: all 0.25s linear;778 transition: all 0.25s linear;779}780.card a {781 display: block;782 width: 100%;783 height: 100%;784 text-decoration: none;785}786.card-image {787 position: relative;788 background-size: cover;789 background-position: center;790 background-repeat: no-repeat;791 background-color: transparent;792 filter: contrast(85%);793 transition: filter .25s;794}795.card:hover .card-image {796 filter: contrast(100%);797}798.card-title {799 text-align: center;800 margin: 0;801 padding: .25em .5em;802 color: #ffffff;803 -webkit-transition: color 0.25s;804 transition: color 0.25s;805}806.card-title h3,807.card-title span {808 font-size: 112.5%;809 color: #ffffff;810 margin: 0;811 line-height: 1.25em;812 font-weight: 400;813 vertical-align: middle;814}815.card-title p {816 font-size: 95%;817}818.card:hover .card-title h3,819.card:hover .card-title span {820 color: #fbcc0a;821}822.vertical-card {823 width: 31.3333333%;824}825.vertical-card .card-image {826 height: 12em;827}828.vertical-card .card-title {829 height: 5em;830 width: 100%;831 display: -webkit-flex;832 display: flex;833 -webkit-flex-direction: column;834 flex-direction: column;835 -webkit-justify-content: center;836 justify-content: center;837 font-size: 105%;838}839.horizontal-card {840 width: 48%;841 margin-bottom: 1.5em;842 display: -webkit-flex;843 display: flex;844 -webkit-flex-direction: column;845 flex-direction: column;846 -webkit-justify-content: center;847 justify-content: center;848}849.horizontal-card a {850 display: -webkit-flex;851 display: flex;852 /* flex-direction: row-reverse */853 align-items: center;854 855}856.horizontal-card .card-image {857 width: 60%;858 -webkit-flex: 0 1 60%;859 flex: 0 1 60%;860 display: block; /* for IE11 */861 height: 12em;862}863.horizontal-card .card-title {864 width: 40%;865 font-size: 108%;866}867.horizontal-card.single-card {868 margin: 1em 26%;869}870 871/*--card colors--*/872.vertical-card,873.horizontal-card {874 background-color: #185370;875}876.vertical-card:nth-of-type(5n-3),877.horizontal-card:nth-of-type(5n-3) {878 background-color: #187061;879}880.vertical-card:nth-of-type(5n-2),881.horizontal-card:nth-of-type(5n-2) {882 background-color: #484848;883}884.vertical-card:nth-of-type(5n-1),885.horizontal-card:nth-of-type(5n-1) {886 background-color: #457424;887}888.vertical-card:nth-of-type(5n),889.horizontal-card:nth-of-type(5n) {890 background-color: #664900;891}892 893.small-card-container {894 display: -webkit-flex;895 display: flex;896 -webkit-flex-flow: row wrap;897 flex-flow: row wrap;898 -webkit-justify-content: flex-start;899 justify-content: flex-start;900}901 902/*-- mcards --*/903.mcard-holder {904 clear: both;905 display: -webkit-flex;906 display: flex;907 -webkit-flex-flow: row wrap;908 flex-flow: row wrap;909 -webkit-justify-content: space-between;910 justify-content: space-between;911 padding: 1em 0;912}913.mcard {914 box-sizing: border-box; /* Safari bug fix */915 overflow: hidden;916 z-index: 2;917 width: 49%;918 margin: 0 0 1em 0;919 padding: 1em 1.25em;920 background-color: #f5f7f7;921 border-radius: 2px;922 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.25),0 1px 5px 0 rgba(0,0,0,0.25),0 3px 1px -2px rgba(0,0,0,0.325);923}924.mcard--1col {925 width: 100%;926 margin: 0 0 1.5em 0;927}928.mcard--plain {929 background-color: transparent;930 box-shadow: none;931}932.mcard > h2,933.mcard > h3,934.mcard > h4 {935 margin: 0 0 0.75em 0;936}937 938/* mcards with footer links */939.mcard--hasfooter {940 padding-bottom: 0;941}942.mcard-col {943 display: -webkit-flex;944 display: flex;945 -webkit-flex-direction: column;946 flex-direction: column;947 height: 100%;948}949.mcard-col__main {950 padding-bottom: 1em;951}952.mcard-col__footer {953 margin: auto -1.25em 0 -1.25em;954 padding: 0.5em 1.25em;955 background-color: #e9edee;956 border-top: 1px solid #ccc;957}958.mcard-col__footer li {959 display: inline-block;960 margin-right: 1em;961}962 963/*mcards for featured events*/964.feature1__img {965 display: block;966 float: left;967 margin: 0 1.5em 0.5em 0;968 max-width: 16.5em;969}970.feature1__img--right {971 float: right;972 margin: 0 0 0.5em 1.5em;973}974.feature1__desc h2,975.feature1__desc h3,976.feature1__desc h4 {977 clear: none;978 margin-top: 0;979}980.feature1__desc .std-list {981 overflow: hidden;982 padding-left: 1em;983}984.feature2 {985 background-color: transparent;986 box-shadow: none;987}988.feature2__img {989 display: block;990 float: right;991 margin: 0 0 1em 0.5em;992}993.feature2__linkhead {994 display: inline-block;995 margin-bottom: 0.5em;996 font-weight: 700;997 text-decoration: underline;998 font-size: 112.5%;999 color: #123e54;1000}1001.feature2__linkhead:hover {1002 text-decoration: underline;1003}1004 1005/*---header---*/1006header {1007 width: 100%;1008 position: static; /* for search toggle when under 44em */1009 background-position: 50% 38%;1010 background-size: cover;1011 background-image: url(/images/header-background-1920w.jpg);1012}1013.logo {1014 float: left;1015 overflow: hidden;1016 margin: 0;1017 padding-left: .25em;1018 width: 28%;1019}1020.logo-img {1021 float: left;1022 clear: left;1023 max-width: 15em;1024 overflow: hidden;1025 margin: 0.5em 0 0.25em 0; 1026}1027.logo-img img {/* must specify svg width for Firefox */1028 width: 15em;1029}1030.utilities {1031 float: left;1032 margin: 0 0 0 0.25em;1033}1034.utilities a {1035 font-weight: 400;1036 margin-top: 0;1037}1038.utilities a:last-child {1039 margin-right: 0;1040}1041nav {1042 overflow: hidden;1043 width: 72%;1044}1045.primary-nav {1046 position: relative;1047 float: right;1048 width: 100%;1049 font-size: 110%;1050 max-width: 41em;1051 margin: 0 0 0.5em 0;1052 padding: 0;1053}1054.primary-nav li {1055 position: relative;1056 float: left;1057 width: 16.1666%;1058 margin-right: .5%;1059 height: 7.5em;1060 padding: 0;1061 text-align: left;1062}1063.primary-nav li a {1064 display: block;1065 width: 100%;1066 height: 100%;1067 margin: 0;1068 padding: 2.5em 0.5em 0 0.5em;1069 overflow: hidden;1070 cursor: pointer;1071 text-decoration: none;1072 color: #ffffff;1073 background-color: #185370;1074 -webkit-transition: background-color 0.75s;1075 transition: background-color 0.75s;1076}1077.primary-nav li a:hover {1078 background-color: #457424;1079}1080.primary-nav li a span {1081 display: inline-block;1082 font-size: 92%;1083 letter-spacing: 0.0675em;1084 -webkit-transform: scale(1,1.175);1085 transform: scale(1,1.175);1086}1087 1088/*---search bar 2021---*/1089.multisrch-container {1090 width: 100%;1091 margin: 0;1092 padding: 0;1093 background-color: #363946;1094}1095.show-search {1096 position: absolute;1097 top: 2.75em;1098 font-size: 150%;1099 right: 0.25em;1100 border: 0;1101 padding: 0.5em;1102 color: #f5f7f7;1103 background-color: #373138;1104 cursor: pointer;1105 display: none;1106}1107.multisrch-form-container {1108 padding: 0.5em 0;1109}1110.multisrch-form-container form {1111 display: block;1112}1113.multisrch-form {1114 display: none;1115 position: relative;1116 max-width: 36em;1117 padding: 0;1118 margin: -1px auto 0 auto;1119}1120.multisrch-form.active {1121 display: block;1122}1123.search-tabs { 1124 overflow: hidden;1125 margin: 0 auto;1126 font-size: 100%;1127 max-width: 36em;1128 padding-left: 1px;1129}1130.search-tabs li {1131 float: left;1132 font-size: 90%;1133 margin-right: 0.25em;1134 padding: 0.5em 1em;1135 color: #222222;1136 background-color: #e9edee;1137 cursor: pointer;1138}1139.search-tabs li.active {1140 background-color: #ffffff;1141 border-bottom: none;1142}1143.search-tabs label {1144 cursor: pointer;1145}1146.search-input-holder {1147 width: 100%;1148 position: relative;1149 margin-right: 0.5em;1150 overflow: hidden;1151}1152.search-input {1153 width: 100%;1154 padding: 0.625em 0.5em;1155 border: none;1156 height: 2.25em;1157 background-color: #ffffff;1158 border-top: 1px solid #484848;1159}1160.search-submit {1161 position: absolute;1162 top: 0;1163 right: 0;1164 margin: 0;1165 padding: 0.375em 0.75em;1166 border-top: 1px solid #484848;1167}1168.catalog-search-form {1169 background-color: #ffffff;1170}1171.catalog-input {1172 padding-left: 6.25em;1173}1174.catalog-search-type {1175 position: absolute;1176 top: 0;1177 left: 0;1178 font-size: 86%;1179 height: 2.7em;1180 width: 6.5em;1181 padding-left: 0.5em;1182 background-color: transparent;1183 border: 1px solid #484848;1184 border-radius: 0;1185 border-bottom: none;1186 -webkit-appearance: none;1187 -moz-appearance: none;1188 appearance: none;1189 cursor: pointer;1190 z-index: 1;1191}1192.catalog-search-type::-ms-expand {1193 display: none;1194}1195.search-input-catalog::after {1196 font-family: "hcplc_icons";1197 content: '\e83d';1198 position: absolute;1199 top: 0;1200 left: 0;