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 class="" lang="en-US">3 <head>4 <style>5 @font-face {6 font-family: 'BentonSansRegular';7 src: url("");8 src: url("") format("embedded-opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");9 font-display: swap;10 font-style: normal;11 font-weight: normal;12}13 14@font-face {15 font-family: 'BentonSansCondRegular';16 src: url("");17 src: url("") format("embedded-opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");18 font-display: swap;19 font-style: normal;20 font-weight: normal;21}22 23@font-face {24 font-family: 'BentonSansCondBold';25 src: url("");26 src: url("") format("embedded-opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");27 font-display: swap;28 font-style: normal;29 font-weight: normal;30}31 32@font-face {33 font-family: 'GeorgiaProBoldItalic';34 src: url("");35 src: url("") format("embedded-opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");36 font-display: swap;37 font-style: normal;38 font-weight: normal;39}40 41.visually-hidden {42 position: absolute;43 overflow: hidden;44 clip: rect(0 0 0 0);45 height: 1px;46 width: 1px;47 margin: -1px;48 padding: 0;49 border: 0;50}51 52#branding-bar,53#footer {54 -webkit-font-smoothing: initial;55 -moz-font-smoothing: initial;56 font-smoothing: initial;57}58 59#branding-bar *,60#footer * {61 -webkit-box-sizing: border-box;62 -moz-box-sizing: border-box;63 box-sizing: border-box;64}65 66#branding-bar .row,67#footer .row {68 width: 100%;69 margin-left: auto;70 margin-right: auto;71 margin-top: 0;72 margin-bottom: 0;73 max-width: 64rem;74 position: relative;75}76 77#branding-bar .row:before, #branding-bar .row:after,78#footer .row:before,79#footer .row:after {80 content: " ";81 display: table;82}83 84#branding-bar .row:after,85#footer .row:after {86 clear: both;87}88 89#branding-bar .row.pad,90#footer .row.pad {91 padding-left: 0.9375rem;92 padding-right: 0.9375rem;93 width: 100%;94}95 96#branding-bar {97 background-color: #7A1705;98 border-top: 5px solid #990000;99 position: fixed;100 top: 0;101 width: 100%;102 z-index: 10;103}104 105#branding-bar .show-on-mobile {106 display: inline;107}108 109#branding-bar .show-on-tablet,110#branding-bar .show-on-desktop {111 display: none;112}113 114#branding-bar:after {115 content: "";116 bottom: -3px;117 position: absolute;118 width: 100%;119 height: 3px;120 background: rgba(74, 61, 48, 0.3);121}122 123#branding-bar img {124 position: absolute;125 top: -5px;126 left: 0.9375rem;127 width: 43px;128 -webkit-transition: all 0.5s;129 -moz-transition: all 0.5s;130 transition: all 0.5s;131}132 133#branding-bar h1,134#branding-bar #iu-campus {135 font-family: BentonSansCondRegular, Arial, serif;136 font-weight: normal;137 color: #fff;138 font-size: 18px;139 float: left;140 line-height: 45px;141 margin: 0;142 padding-left: 58px;143 text-transform: uppercase;144 -webkit-transition: all 0.25s;145 -moz-transition: all 0.25s;146 transition: all 0.25s;147}148 149#branding-bar h1 a,150#branding-bar #iu-campus a {151 color: #fff;152 text-decoration: none;153}154 155#branding-bar h1 span,156#branding-bar #iu-campus span {157 font-family: inherit;158}159 160#branding-bar h1 .show-on-tablet,161#branding-bar h1 .show-on-mobile,162#branding-bar #iu-campus .show-on-tablet,163#branding-bar #iu-campus .show-on-mobile {164 font-size: 17px;165}166 167#branding-bar a:focus {168 outline: none;169}170 171#branding-bar a:focus span {172 border: 1px solid #fff;173 box-shadow: 0 0 3px #fff;174 padding: 2px;175}176 177#branding-bar.iupui #iu-campus {178 font-size: 27px;179}180 181#branding-bar.iupui #iu-campus .show-on-tablet,182#branding-bar.iupui #iu-campus .show-on-mobile {183 font-size: 27px;184}185 186#footer {187 padding: 24px 0;188 text-align: center;189 position: relative;190 font-family: BentonSansRegular, Arial, serif;191 font-weight: normal;192}193 194#footer a {195 color: #990000;196 text-decoration: underline;197}198 199#footer a:hover {200 text-decoration: none;201}202 203#footer a:focus {204 outline: .125rem solid #990000;205 outline-offset: .125rem;206}207 208#footer img {209 display: block;210 width: 24px;211 margin: 0 auto 10px;212}213 214#footer p {215 font-size: 75%;216 line-height: 24px;217 margin: 0;218 clear: left;219}220 221#footer .tagline {222 font-family: BentonSansCondBold, Arial, serif;223 font-weight: normal;224 -webkit-font-smoothing: antialiased;225 background: #7A1705;226 color: #fff;227 font-size: 1.375rem;228 line-height: 2.5rem;229 margin: -24px -0.9375rem 24px -0.9375rem;230 text-transform: uppercase;231 letter-spacing: 0.2em;232}233 234#footer .tagline span {235 text-transform: lowercase;236 font-family: GeorgiaProBoldItalic, Georgia, serif;237 font-size: 1rem;238 vertical-align: 2px;239 letter-spacing: 0;240 margin-left: -4px;241}242 243#footer .tagline a:focus {244 outline-color: #fff;245}246 247#footer .tagline.bicentennial {248 font-family: inherit;249 letter-spacing: .1em;250}251 252#footer .tagline.bicentennial.celebration {253 font-size: inherit;254 padding-bottom: 2px;255}256 257#footer .tagline.celebration a {258 color: #fff;259 text-decoration: none;260}261 262#footer .tagline.celebration svg {263 vertical-align: middle;264}265 266@media only screen and (min-width: 64.063em) {267 #branding-bar {268 margin-bottom: 15px;269 /* account for trident */270 position: relative;271 }272 #branding-bar:after {273 height: 0;274 }275 #branding-bar img {276 position: absolute;277 top: -5px;278 width: 65px;279 }280 #branding-bar h1,281 #branding-bar #iu-campus {282 line-height: 52px;283 padding-left: 80px;284 }285 #branding-bar .search {286 margin-top: 6px;287 float: right;288 width: 250px;289 }290 #branding-bar input[type='text'] {291 width: 80%;292 float: left;293 margin-bottom: 0;294 }295 #branding-bar input[type='submit'].button {296 width: 20%;297 float: left;298 border-radius: 0;299 }300}301 302@media screen and (max-width: 320px) {303 #footer .line-break {304 display: block;305 }306}307 308@media only screen and (min-width: 40.063em) {309 /* Campus names */310 #branding-bar .show-on-tablet {311 display: inline;312 }313 #branding-bar .show-on-mobile,314 #branding-bar .show-on-desktop {315 display: none;316 }317 #footer {318 text-align: left;319 border-top: 6px solid #7A1705;320 }321 #footer img {322 display: inline;323 margin: 0;324 position: absolute;325 left: 0.9375rem;326 top: 12px;327 width: 24px;328 }329 #footer p {330 line-height: 55px;331 clear: none;332 }333 #footer .copyright {334 float: left;335 padding-left: 39px;336 }337 #footer .privacy {338 float: right;339 text-align: right;340 }341 #footer .tagline {342 font-size: 1.5rem;343 position: absolute;344 left: 50%;345 margin: 0 -200px 0 0;346 top: -47px;347 padding: 0 24px;348 -webkit-transform: translateX(-50%);349 -moz-transform: translateX(-50%);350 -ms-transform: translateX(-50%);351 -o-transform: translateX(-50%);352 transform: translateX(-50%);353 }354 #footer .tagline.bicentennial {355 padding: 0 16px;356 }357}358 359@media only screen and (min-width: 64.063em) {360 /* Campus names */361 #branding-bar .show-on-desktop {362 display: inline !important;363 }364 #branding-bar .show-on-tablet,365 #branding-bar .show-on-desktop {366 display: none;367 }368}369 370 371 372@charset "UTF-8";373/* Slider */374.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }375 376.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }377.slick-list:focus { outline: none; }378.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }379.slick-list.dragging { cursor: pointer; cursor: hand; }380 381.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }382 383.slick-track { position: relative; left: 0; top: 0; display: block; }384.slick-track:before, .slick-track:after { content: ""; display: table; }385.slick-track:after { clear: both; }386.slick-loading .slick-track { visibility: hidden; }387.carousel-navigation .slick-slide .item-file img { display: block; padding-left: 12%; padding-right: 12%; }388.slick-slide { float: left; height: 100%; min-height: 1px; display: none; border: 7px solid #FFFFFF; border-top: 7px solid #FFFFFF !important; background-color:#FFFFFF; margin:0 -25px; }389[dir="rtl"] .slick-slide { float: right; }390/*.slick-slide img { display: block; } */391.slick-active {}392.slick-navigation .slick-slide { height:115px}393.slick-navigation .slick-slide img { width:115px; }394.slick-navigation input { border: none !important; outline: none !important; border-image-width: 0 !important; }395.slick-slide.slick-loading img { display: none; }396.slick-slide.dragging img { pointer-events: none; }397.slick-initialized .slick-slide { display: block; }398.slick-loading .slick-slide { visibility: hidden; }399.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }400/* Icons */401@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }402/* Arrows */403.slick-prev, .slick-next { position: absolute; display: block; height: 50px; width: 40px; line-height: 30px !important; font-size: 70px !important; color:#ff6600 !important; cursor: pointer; background: none!important; background-repeat: no-repeat; color: transparent; top: 30%; margin-top: -10px; padding: 0 !important; border: none; outline: none; }404.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; background-repeat: no-repeat; }405.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }406.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }407 408.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; opacity: 0.0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }409 410.slick-prev { left: 0px; }411[dir="rtl"] .slick-prev { left: auto; right: -25px; }412.slick-prev:before { content: "â"; margin-left:-28px }413[dir="rtl"] .slick-prev:before { content: "â"; }414 415.slick-next { right: 0px; }416[dir="rtl"] .slick-next { left: -25px; right: auto; }417.slick-next:before { content: "â"; margin-right: -5px }418[dir="rtl"] .slick-next:before { content: "â"; }419 420/* Dots */421.slick-slider { margin-bottom: 30px; }422 423.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; max-width:100%; max-height: 100%; width: 100%; }424.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }425.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }426.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }427.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }428.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "â¢"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }429.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }430 431/*# sourceMappingURL=slick.css.map */432.desc { font-family: "BentonSansCondensedRegular", "Arial Narrow", Arial, Helvetica, sans-serif; font-size:1em; line-height:1.5em; margin-left:2em; margin-right:2em}433.caption-left {text-align:left;}434.caption-right {text-align:right;margin-right: 12%}435.caption-center {text-align:center;}436.item-file img {437 max-width: 100%;438 width: 100%;439}440.element-set {441 margin-left: 2em;442 margin-right: 2em;443}444.item-file a {445 display: block;446 height: 100%;447}448.item-file a img {449 height: 100%;450 width: 100%;451}452 453 454 455/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */456.fancybox-wrap,457.fancybox-skin,458.fancybox-outer,459.fancybox-inner,460.fancybox-image,461.fancybox-wrap iframe,462.fancybox-wrap object,463.fancybox-nav,464.fancybox-nav span,465.fancybox-tmp466{467 padding: 0;468 margin: 0;469 border: 0;470 outline: none;471 vertical-align: top;472}473 474.fancybox-wrap {475 position: absolute;476 top: 0;477 left: 0;478 z-index: 8020;479}480 481.fancybox-skin {482 position: relative;483 background: #f9f9f9;484 color: #444;485 text-shadow: none;486 -webkit-border-radius: 4px;487 -moz-border-radius: 4px;488 border-radius: 4px;489}490 491.fancybox-opened {492 z-index: 8030;493}494 495.fancybox-opened .fancybox-skin {496 -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);497 -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);498 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);499}500 501.fancybox-outer, .fancybox-inner {502 position: relative;503}504 505.fancybox-inner {506 overflow: hidden;507}508 509.fancybox-type-iframe .fancybox-inner {510 -webkit-overflow-scrolling: touch;511}512 513.fancybox-error {514 color: #444;515 font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;516 margin: 0;517 padding: 15px;518 white-space: nowrap;519}520 521.fancybox-image, .fancybox-iframe {522 display: block;523 width: 100%;524 height: 100%;525}526 527.fancybox-image {528 max-width: 100%;529 max-height: 100%;530}531 532#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {533 background-image: url('fancybox_sprite.png');534}535 536#fancybox-loading {537 position: fixed;538 top: 50%;539 left: 50%;540 margin-top: -22px;541 margin-left: -22px;542 background-position: 0 -108px;543 opacity: 0.8;544 cursor: pointer;545 z-index: 8060;546}547 548#fancybox-loading div {549 width: 44px;550 height: 44px;551 background: url('fancybox_loading.gif') center center no-repeat;552}553 554.fancybox-close {555 position: absolute;556 top: -18px;557 right: -18px;558 width: 36px;559 height: 36px;560 cursor: pointer;561 z-index: 8040;562}563 564.fancybox-nav {565 position: absolute;566 top: 0;567 width: 40%;568 height: 100%;569 cursor: pointer;570 text-decoration: none;571 background: transparent url('blank.gif'); /* helps IE */572 -webkit-tap-highlight-color: rgba(0,0,0,0);573 z-index: 8040;574}575 576.fancybox-prev {577 left: 0;578}579 580.fancybox-next {581 right: 0;582}583 584.fancybox-nav span {585 position: absolute;586 top: 50%;587 width: 36px;588 height: 34px;589 margin-top: -18px;590 cursor: pointer;591 z-index: 8040;592 visibility: hidden;593}594 595.fancybox-prev span {596 left: 10px;597 background-position: 0 -36px;598}599 600.fancybox-next span {601 right: 10px;602 background-position: 0 -72px;603}604 605.fancybox-nav:hover span {606 visibility: visible;607}608 609.fancybox-tmp {610 position: absolute;611 top: -99999px;612 left: -99999px;613 visibility: hidden;614 max-width: 99999px;615 max-height: 99999px;616 overflow: visible !important;617}618 619/* Overlay helper */620 621.fancybox-lock {622 overflow: hidden !important;623 width: auto;624}625 626.fancybox-lock body {627 overflow: hidden !important;628}629 630.fancybox-lock-test {631 overflow-y: hidden !important;632}633 634.fancybox-overlay {635 position: absolute;636 top: 0;637 left: 0;638 overflow: hidden;639 display: none;640 z-index: 8010;641 background: url('fancybox_overlay.png');642}643 644.fancybox-overlay-fixed {645 position: fixed;646 bottom: 0;647 right: 0;648}649 650.fancybox-lock .fancybox-overlay {651 overflow: auto;652 overflow-y: scroll;653}654 655/* Title helper */656 657.fancybox-title {658 visibility: hidden;659 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;660 position: relative;661 text-shadow: none;662 z-index: 8050;663}664 665.fancybox-opened .fancybox-title {666 visibility: visible;667}668 669.fancybox-title-float-wrap {670 position: absolute;671 bottom: 0;672 right: 50%;673 margin-bottom: -35px;674 z-index: 8050;675 text-align: center;676}677 678.fancybox-title-float-wrap .child {679 display: inline-block;680 margin-right: -100%;681 padding: 2px 20px;682 background: transparent; /* Fallback for web browsers that doesn't support RGBa */683 background: rgba(0, 0, 0, 0.8);684 -webkit-border-radius: 15px;685 -moz-border-radius: 15px;686 border-radius: 15px;687 text-shadow: 0 1px 2px #222;688 color: #FFF;689 font-weight: bold;690 line-height: 24px;691 white-space: nowrap;692}693 694.fancybox-title-outside-wrap {695 position: relative;696 margin-top: 10px;697 color: #fff;698}699 700.fancybox-title-inside-wrap {701 padding-top: 10px;702}703 704.fancybox-title-over-wrap {705 position: absolute;706 bottom: 0;707 left: 0;708 color: #fff;709 padding: 10px;710 background: #000;711 background: rgba(0, 0, 0, .8);712}713 714/*Retina graphics!*/715@media only screen and (-webkit-min-device-pixel-ratio: 1.5),716 only screen and (min--moz-device-pixel-ratio: 1.5),717 only screen and (min-device-pixel-ratio: 1.5){718 719 #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {720 background-image: url('[EMAIL REDACTED]');721 background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/722 }723 724 #fancybox-loading div {725 background-image: url('[EMAIL REDACTED]');726 background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/727 }728}729 730 731#fancybox-buttons {732 position: fixed;733 left: 0;734 width: 100%;735 z-index: 8050;736}737 738#fancybox-buttons.top {739 top: 10px;740}741 742#fancybox-buttons.bottom {743 bottom: 10px;744}745 746#fancybox-buttons ul {747 display: block;748 width: 166px;749 height: 30px;750 margin: 0 auto;751 padding: 0;752 list-style: none;753 border: 1px solid #111;754 border-radius: 3px;755 -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);756 -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);757 box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);758 background: rgb(50,50,50);759 background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);760 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));761 background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);762 background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);763 background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);764 background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);765 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );766}767 768#fancybox-buttons ul li {769 float: left;770 margin: 0;771 padding: 0;772}773 774#fancybox-buttons a {775 display: block;776 width: 30px;777 height: 30px;778 text-indent: -9999px;779 background-color: transparent;780 background-image: url('fancybox_buttons.png');781 background-repeat: no-repeat;782 outline: none;783 opacity: 0.8;784}785 786#fancybox-buttons a:hover {787 opacity: 1;788}789 790#fancybox-buttons a.btnPrev {791 background-position: 5px 0;792}793 794#fancybox-buttons a.btnNext {795 background-position: -33px 0;796 border-right: 1px solid #3e3e3e;797}798 799#fancybox-buttons a.btnPlay {800 background-position: 0 -30px;801}802 803#fancybox-buttons a.btnPlayOn {804 background-position: -30px -30px;805}806 807#fancybox-buttons a.btnToggle {808 background-position: 3px -60px;809 border-left: 1px solid #111;810 border-right: 1px solid #3e3e3e;811 width: 35px812}813 814#fancybox-buttons a.btnToggleOn {815 background-position: -27px -60px;816}817 818#fancybox-buttons a.btnClose {819 border-left: 1px solid #111;820 width: 35px;821 background-position: -56px 0px;822}823 824#fancybox-buttons a.btnDisabled {825 opacity : 0.4;826 cursor: default;827}828 829 830/**831* CSS themes for simplePagination.js832* Author: Flavius Matis - http://flaviusmatis.github.com/833* URL: https://github.com/flaviusmatis/simplePagination.js834*/835 836ul.simple-pagination {837 list-style: none;838}839 840.simple-pagination {841 display: block;842 overflow: hidden;843 padding: 0 5px 5px 0;844 margin: 0;845}846 847.simple-pagination ul {848 list-style: none;849 padding: 0;850 margin: 0;851}852 853.simple-pagination li {854 list-style: none;855 padding: 0;856 margin: 0;857 float: left;858}859span.ellipse.clickable {860 cursor: pointer;861}862 863.ellipse input {864 width: 3em;865}866 867/*------------------------------------*\868 Compact Theme Styles869\*------------------------------------*/870.compact-theme span {871 cursor:pointer;872}873 874.compact-theme a, .compact-theme span {875 float: left;876 color: #333;877 font-size:14px;878 line-height:24px;879 font-weight: normal;880 text-align: center;881 border: 1px solid #AAA;882 border-left: none;883 min-width: 14px;884 padding: 0 7px;885 box-shadow: 2px 2px 2px rgba(0,0,0,0.2);886 background: #efefef; /* Old browsers */887 background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */888 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */889 background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */890 background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */891 background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */892 background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */893}894 895.compact-theme a:hover, .compact-theme li:not(.disabled):not(.active) span:hover {896 text-decoration: none;897 background: #efefef; /* Old browsers */898 background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */899 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */900 background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */901 background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */902 background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */903 background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */904}905 906.compact-theme li:first-child a, .compact-theme li:first-child span {907 border-left: 1px solid #AAA;908 border-radius: 3px 0 0 3px;909}910 911.compact-theme li:last-child a, .compact-theme li:last-child span {912 border-radius: 0 3px 3px 0;913}914 915.compact-theme .current {916 background: #bbbbbb; /* Old browsers */917 background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */918 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */919 background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */920 background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */921 background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */922 background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */923 cursor: default;924}925 926.compact-theme .ellipse {927 background: #EAEAEA;928 padding: 0 10px;929 cursor: default;930}931 932/*------------------------------------*\933 Light Theme Styles934\*------------------------------------*/935.light-theme span {936 cursor:pointer;937}938 939.light-theme a, .light-theme span {940 float: left;941 color: #666;942 font-size:14px;943 line-height:24px;944 font-weight: normal;945 text-align: center;946 border: 1px solid #BBB;947 min-width: 14px;948 padding: 0 7px;949 margin: 0 5px 0 0;950 border-radius: 3px;951 box-shadow: 0 1px 2px rgba(0,0,0,0.2);952 background: #efefef; /* Old browsers */953 background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */954 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */955 background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */956 background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */957 background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */958 background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */959}960 961.light-theme a:hover, .light-theme li:not(.disabled):not(.active) span:hover {962 text-decoration: none;963 background: #FCFCFC;964}965 966.light-theme .current {967 background: #666;968 color: #FFF;969 border-color: #444;970 box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;971 cursor: default;972}973 974.light-theme .ellipse {975 background: none;976 border: none;977 border-radius: 0;978 box-shadow: none;979 font-weight: bold;980 cursor: default;981}982 983/*------------------------------------*\984 Dark Theme Styles985\*------------------------------------*/986.dark-theme span {987 cursor:pointer;988}989 990.dark-theme a, .dark-theme span {991 float: left;992 color: #CCC;993 font-size:14px;994 line-height:24px;995 font-weight: normal;996 text-align: center;997 border: 1px solid #222;998 min-width: 14px;999 padding: 0 7px;1000 margin: 0 5px 0 0;1001 border-radius: 3px;1002 box-shadow: 0 1px 2px rgba(0,0,0,0.2);1003 background: #555; /* Old browsers */1004 background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */1005 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */1006 background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */1007 background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */1008 background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */1009 background: linear-gradient(top, #555 0%,#333 100%); /* W3C */1010}1011 1012.dark-theme a:hover, .dark-theme li:not(.disabled):not(.active) span:hover {1013 text-decoration: none;1014 background: #444;1015}1016 1017.dark-theme .current {1018 background: #222;1019 color: #FFF;1020 border-color: #000;1021 box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;1022 cursor: default;1023}1024 1025.dark-theme .ellipse {1026 background: none;1027 border: none;1028 border-radius: 0;1029 box-shadow: none;1030 font-weight: bold;1031 cursor: default;1032}1033 1034 1035 1036/* required styles */1037 1038.leaflet-pane,1039.leaflet-tile,1040.leaflet-marker-icon,1041.leaflet-marker-shadow,1042.leaflet-tile-container,1043.leaflet-pane > svg,1044.leaflet-pane > canvas,1045.leaflet-zoom-box,1046.leaflet-image-layer,1047.leaflet-layer {1048 position: absolute;1049 left: 0;1050 top: 0;1051 }1052.leaflet-container {1053 overflow: hidden;1054 }1055.leaflet-tile,1056.leaflet-marker-icon,1057.leaflet-marker-shadow {1058 -webkit-user-select: none;1059 -moz-user-select: none;1060 user-select: none;1061 -webkit-user-drag: none;1062 }1063/* Prevents IE11 from highlighting tiles in blue */1064.leaflet-tile::selection {1065 background: transparent;1066}1067/* Safari renders non-retina tile on retina better with this, but Chrome is worse */1068.leaflet-safari .leaflet-tile {1069 image-rendering: -webkit-optimize-contrast;1070 }1071/* hack that prevents hw layers "stretching" when loading new tiles */1072.leaflet-safari .leaflet-tile-container {1073 width: 1600px;1074 height: 1600px;1075 -webkit-transform-origin: 0 0;1076 }1077.leaflet-marker-icon,1078.leaflet-marker-shadow {1079 display: block;1080 }1081/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */1082/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */1083.leaflet-container .leaflet-overlay-pane svg,1084.leaflet-container .leaflet-marker-pane img,1085.leaflet-container .leaflet-shadow-pane img,1086.leaflet-container .leaflet-tile-pane img,1087.leaflet-container img.leaflet-image-layer,1088.leaflet-container .leaflet-tile {1089 max-width: none !important;1090 max-height: none !important;1091 }1092 1093.leaflet-container.leaflet-touch-zoom {1094 -ms-touch-action: pan-x pan-y;1095 touch-action: pan-x pan-y;1096 }1097.leaflet-container.leaflet-touch-drag {1098 -ms-touch-action: pinch-zoom;1099 /* Fallback for FF which doesn't support pinch-zoom */1100 touch-action: none;1101 touch-action: pinch-zoom;1102}1103.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {1104 -ms-touch-action: none;1105 touch-action: none;1106}1107.leaflet-container {1108 -webkit-tap-highlight-color: transparent;1109}1110.leaflet-container a {1111 -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);1112}1113.leaflet-tile {1114 filter: inherit;1115 visibility: hidden;1116 }1117.leaflet-tile-loaded {1118 visibility: inherit;1119 }1120.leaflet-zoom-box {1121 width: 0;1122 height: 0;1123 -moz-box-sizing: border-box;1124 box-sizing: border-box;1125 z-index: 800;1126 }1127/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */1128.leaflet-overlay-pane svg {1129 -moz-user-select: none;1130 }1131 1132.leaflet-pane { z-index: 400; }1133 1134.leaflet-tile-pane { z-index: 200; }1135.leaflet-overlay-pane { z-index: 400; }1136.leaflet-shadow-pane { z-index: 500; }1137.leaflet-marker-pane { z-index: 600; }1138.leaflet-tooltip-pane { z-index: 650; }1139.leaflet-popup-pane { z-index: 700; }1140 1141.leaflet-map-pane canvas { z-index: 100; }1142.leaflet-map-pane svg { z-index: 200; }1143 1144.leaflet-vml-shape {1145 width: 1px;1146 height: 1px;1147 }1148.lvml {1149 behavior: url(#default#VML);1150 display: inline-block;1151 position: absolute;1152 }1153 1154 1155/* control positioning */1156 1157.leaflet-control {1158 position: relative;1159 z-index: 800;1160 pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */1161 pointer-events: auto;1162 }1163.leaflet-top,1164.leaflet-bottom {1165 position: absolute;1166 z-index: 1000;1167 pointer-events: none;1168 }1169.leaflet-top {1170 top: 0;1171 }1172.leaflet-right {1173 right: 0;1174 }1175.leaflet-bottom {1176 bottom: 0;1177 }1178.leaflet-left {1179 left: 0;1180 }1181.leaflet-control {1182 float: left;1183 clear: both;1184 }1185.leaflet-right .leaflet-control {1186 float: right;1187 }1188.leaflet-top .leaflet-control {1189 margin-top: 10px;1190 }1191.leaflet-bottom .leaflet-control {1192 margin-bottom: 10px;1193 }1194.leaflet-left .leaflet-control {1195 margin-left: 10px;1196 }1197.leaflet-right .leaflet-control {1198 margin-right: 10px;1199 }1200