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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">2<html>3 <head>4 <style>5 /*! jQuery UI - v1.12.1 - 2017-03-266* http://jqueryui.com7* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css8* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif9* Copyright jQuery Foundation and other contributors; Licensed MIT */10 11.ui-draggable-handle {12 -ms-touch-action: none;13 touch-action: none;14}15/* Layout helpers16----------------------------------*/17.ui-helper-hidden {18 display: none;19}20.ui-helper-hidden-accessible {21 border: 0;22 clip: rect(0 0 0 0);23 height: 1px;24 margin: -1px;25 overflow: hidden;26 padding: 0;27 position: absolute;28 width: 1px;29}30.ui-helper-reset {31 margin: 0;32 padding: 0;33 border: 0;34 outline: 0;35 line-height: 1.3;36 text-decoration: none;37 font-size: 100%;38 list-style: none;39}40.ui-helper-clearfix:before,41.ui-helper-clearfix:after {42 content: "";43 display: table;44 border-collapse: collapse;45}46.ui-helper-clearfix:after {47 clear: both;48}49.ui-helper-zfix {50 width: 100%;51 height: 100%;52 top: 0;53 left: 0;54 position: absolute;55 opacity: 0;56 filter:Alpha(Opacity=0); /* support: IE8 */57}58 59.ui-front {60 z-index: 100;61}62 63 64/* Interaction Cues65----------------------------------*/66.ui-state-disabled {67 cursor: default !important;68 pointer-events: none;69}70 71 72/* Icons73----------------------------------*/74.ui-icon {75 display: inline-block;76 vertical-align: middle;77 margin-top: -.25em;78 position: relative;79 text-indent: -99999px;80 overflow: hidden;81 background-repeat: no-repeat;82}83 84.ui-widget-icon-block {85 left: 50%;86 margin-left: -8px;87 display: block;88}89 90/* Misc visuals91----------------------------------*/92 93/* Overlays */94.ui-widget-overlay {95 position: fixed;96 top: 0;97 left: 0;98 width: 100%;99 height: 100%;100}101.ui-resizable {102 position: relative;103}104.ui-resizable-handle {105 position: absolute;106 font-size: 0.1px;107 display: block;108 -ms-touch-action: none;109 touch-action: none;110}111.ui-resizable-disabled .ui-resizable-handle,112.ui-resizable-autohide .ui-resizable-handle {113 display: none;114}115.ui-resizable-n {116 cursor: n-resize;117 height: 7px;118 width: 100%;119 top: -5px;120 left: 0;121}122.ui-resizable-s {123 cursor: s-resize;124 height: 7px;125 width: 100%;126 bottom: -5px;127 left: 0;128}129.ui-resizable-e {130 cursor: e-resize;131 width: 7px;132 right: -5px;133 top: 0;134 height: 100%;135}136.ui-resizable-w {137 cursor: w-resize;138 width: 7px;139 left: -5px;140 top: 0;141 height: 100%;142}143.ui-resizable-se {144 cursor: se-resize;145 width: 12px;146 height: 12px;147 right: 1px;148 bottom: 1px;149}150.ui-resizable-sw {151 cursor: sw-resize;152 width: 9px;153 height: 9px;154 left: -5px;155 bottom: -5px;156}157.ui-resizable-nw {158 cursor: nw-resize;159 width: 9px;160 height: 9px;161 left: -5px;162 top: -5px;163}164.ui-resizable-ne {165 cursor: ne-resize;166 width: 9px;167 height: 9px;168 right: -5px;169 top: -5px;170}171.ui-selectable {172 -ms-touch-action: none;173 touch-action: none;174}175.ui-selectable-helper {176 position: absolute;177 z-index: 100;178 border: 1px dotted black;179}180.ui-sortable-handle {181 -ms-touch-action: none;182 touch-action: none;183}184.ui-accordion .ui-accordion-header {185 display: block;186 cursor: pointer;187 position: relative;188 margin: 2px 0 0 0;189 padding: .5em .5em .5em .7em;190 font-size: 100%;191}192.ui-accordion .ui-accordion-content {193 padding: 1em 2.2em;194 border-top: 0;195 overflow: auto;196}197.ui-autocomplete {198 position: absolute;199 top: 0;200 left: 0;201 cursor: default;202}203.ui-menu {204 list-style: none;205 padding: 0;206 margin: 0;207 display: block;208 outline: 0;209}210.ui-menu .ui-menu {211 position: absolute;212}213.ui-menu .ui-menu-item {214 margin: 0;215 cursor: pointer;216 /* support: IE10, see #8844 */217 list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");218}219.ui-menu .ui-menu-item-wrapper {220 position: relative;221 padding: 3px 1em 3px .4em;222}223.ui-menu .ui-menu-divider {224 margin: 5px 0;225 height: 0;226 font-size: 0;227 line-height: 0;228 border-width: 1px 0 0 0;229}230.ui-menu .ui-state-focus,231.ui-menu .ui-state-active {232 margin: -1px;233}234 235/* icon support */236.ui-menu-icons {237 position: relative;238}239.ui-menu-icons .ui-menu-item-wrapper {240 padding-left: 2em;241}242 243/* left-aligned */244.ui-menu .ui-icon {245 position: absolute;246 top: 0;247 bottom: 0;248 left: .2em;249 margin: auto 0;250}251 252/* right-aligned */253.ui-menu .ui-menu-icon {254 left: auto;255 right: 0;256}257.ui-button {258 padding: .4em 1em;259 display: inline-block;260 position: relative;261 line-height: normal;262 margin-right: .1em;263 cursor: pointer;264 vertical-align: middle;265 text-align: center;266 -webkit-user-select: none;267 -moz-user-select: none;268 -ms-user-select: none;269 user-select: none;270 271 /* Support: IE <= 11 */272 overflow: visible;273}274 275.ui-button,276.ui-button:link,277.ui-button:visited,278.ui-button:hover,279.ui-button:active {280 text-decoration: none;281}282 283/* to make room for the icon, a width needs to be set here */284.ui-button-icon-only {285 width: 2em;286 box-sizing: border-box;287 text-indent: -9999px;288 white-space: nowrap;289}290 291/* no icon support for input elements */292input.ui-button.ui-button-icon-only {293 text-indent: 0;294}295 296/* button icon element(s) */297.ui-button-icon-only .ui-icon {298 position: absolute;299 top: 50%;300 left: 50%;301 margin-top: -8px;302 margin-left: -8px;303}304 305.ui-button.ui-icon-notext .ui-icon {306 padding: 0;307 width: 2.1em;308 height: 2.1em;309 text-indent: -9999px;310 white-space: nowrap;311 312}313 314input.ui-button.ui-icon-notext .ui-icon {315 width: auto;316 height: auto;317 text-indent: 0;318 white-space: normal;319 padding: .4em 1em;320}321 322/* workarounds */323/* Support: Firefox 5 - 40 */324input.ui-button::-moz-focus-inner,325button.ui-button::-moz-focus-inner {326 border: 0;327 padding: 0;328}329.ui-controlgroup {330 vertical-align: middle;331 display: inline-block;332}333.ui-controlgroup > .ui-controlgroup-item {334 float: left;335 margin-left: 0;336 margin-right: 0;337}338.ui-controlgroup > .ui-controlgroup-item:focus,339.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {340 z-index: 9999;341}342.ui-controlgroup-vertical > .ui-controlgroup-item {343 display: block;344 float: none;345 width: 100%;346 margin-top: 0;347 margin-bottom: 0;348 text-align: left;349}350.ui-controlgroup-vertical .ui-controlgroup-item {351 box-sizing: border-box;352}353.ui-controlgroup .ui-controlgroup-label {354 padding: .4em 1em;355}356.ui-controlgroup .ui-controlgroup-label span {357 font-size: 80%;358}359.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {360 border-left: none;361}362.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {363 border-top: none;364}365.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {366 border-right: none;367}368.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {369 border-bottom: none;370}371 372/* Spinner specific style fixes */373.ui-controlgroup-vertical .ui-spinner-input {374 375 /* Support: IE8 only, Android < 4.4 only */376 width: 75%;377 width: calc( 100% - 2.4em );378}379.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {380 border-top-style: solid;381}382 383.ui-checkboxradio-label .ui-icon-background {384 box-shadow: inset 1px 1px 1px #ccc;385 border-radius: .12em;386 border: none;387}388.ui-checkboxradio-radio-label .ui-icon-background {389 width: 16px;390 height: 16px;391 border-radius: 1em;392 overflow: visible;393 border: none;394}395.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,396.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {397 background-image: none;398 width: 8px;399 height: 8px;400 border-width: 4px;401 border-style: solid;402}403.ui-checkboxradio-disabled {404 pointer-events: none;405}406.ui-datepicker {407 width: 17em;408 padding: .2em .2em 0;409 display: none;410}411.ui-datepicker .ui-datepicker-header {412 position: relative;413 padding: .2em 0;414}415.ui-datepicker .ui-datepicker-prev,416.ui-datepicker .ui-datepicker-next {417 position: absolute;418 top: 2px;419 width: 1.8em;420 height: 1.8em;421}422.ui-datepicker .ui-datepicker-prev-hover,423.ui-datepicker .ui-datepicker-next-hover {424 top: 1px;425}426.ui-datepicker .ui-datepicker-prev {427 left: 2px;428}429.ui-datepicker .ui-datepicker-next {430 right: 2px;431}432.ui-datepicker .ui-datepicker-prev-hover {433 left: 1px;434}435.ui-datepicker .ui-datepicker-next-hover {436 right: 1px;437}438.ui-datepicker .ui-datepicker-prev span,439.ui-datepicker .ui-datepicker-next span {440 display: block;441 position: absolute;442 left: 50%;443 margin-left: -8px;444 top: 50%;445 margin-top: -8px;446}447.ui-datepicker .ui-datepicker-title {448 margin: 0 2.3em;449 line-height: 1.8em;450 text-align: center;451}452.ui-datepicker .ui-datepicker-title select {453 font-size: 1em;454 margin: 1px 0;455}456.ui-datepicker select.ui-datepicker-month,457.ui-datepicker select.ui-datepicker-year {458 width: 45%;459}460.ui-datepicker table {461 width: 100%;462 font-size: .9em;463 border-collapse: collapse;464 margin: 0 0 .4em;465}466.ui-datepicker th {467 padding: .7em .3em;468 text-align: center;469 font-weight: bold;470 border: 0;471}472.ui-datepicker td {473 border: 0;474 padding: 1px;475}476.ui-datepicker td span,477.ui-datepicker td a {478 display: block;479 padding: .2em;480 text-align: right;481 text-decoration: none;482}483.ui-datepicker .ui-datepicker-buttonpane {484 background-image: none;485 margin: .7em 0 0 0;486 padding: 0 .2em;487 border-left: 0;488 border-right: 0;489 border-bottom: 0;490}491.ui-datepicker .ui-datepicker-buttonpane button {492 float: right;493 margin: .5em .2em .4em;494 cursor: pointer;495 padding: .2em .6em .3em .6em;496 width: auto;497 overflow: visible;498}499.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {500 float: left;501}502 503/* with multiple calendars */504.ui-datepicker.ui-datepicker-multi {505 width: auto;506}507.ui-datepicker-multi .ui-datepicker-group {508 float: left;509}510.ui-datepicker-multi .ui-datepicker-group table {511 width: 95%;512 margin: 0 auto .4em;513}514.ui-datepicker-multi-2 .ui-datepicker-group {515 width: 50%;516}517.ui-datepicker-multi-3 .ui-datepicker-group {518 width: 33.3%;519}520.ui-datepicker-multi-4 .ui-datepicker-group {521 width: 25%;522}523.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,524.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {525 border-left-width: 0;526}527.ui-datepicker-multi .ui-datepicker-buttonpane {528 clear: left;529}530.ui-datepicker-row-break {531 clear: both;532 width: 100%;533 font-size: 0;534}535 536/* RTL support */537.ui-datepicker-rtl {538 direction: rtl;539}540.ui-datepicker-rtl .ui-datepicker-prev {541 right: 2px;542 left: auto;543}544.ui-datepicker-rtl .ui-datepicker-next {545 left: 2px;546 right: auto;547}548.ui-datepicker-rtl .ui-datepicker-prev:hover {549 right: 1px;550 left: auto;551}552.ui-datepicker-rtl .ui-datepicker-next:hover {553 left: 1px;554 right: auto;555}556.ui-datepicker-rtl .ui-datepicker-buttonpane {557 clear: right;558}559.ui-datepicker-rtl .ui-datepicker-buttonpane button {560 float: left;561}562.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,563.ui-datepicker-rtl .ui-datepicker-group {564 float: right;565}566.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,567.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {568 border-right-width: 0;569 border-left-width: 1px;570}571 572/* Icons */573.ui-datepicker .ui-icon {574 display: block;575 text-indent: -99999px;576 overflow: hidden;577 background-repeat: no-repeat;578 left: .5em;579 top: .3em;580}581.ui-dialog {582 position: absolute;583 top: 0;584 left: 0;585 padding: .2em;586 outline: 0;587}588.ui-dialog .ui-dialog-titlebar {589 padding: .4em 1em;590 position: relative;591}592.ui-dialog .ui-dialog-title {593 float: left;594 margin: .1em 0;595 white-space: nowrap;596 width: 90%;597 overflow: hidden;598 text-overflow: ellipsis;599}600.ui-dialog .ui-dialog-titlebar-close {601 position: absolute;602 right: .3em;603 top: 50%;604 width: 20px;605 margin: -10px 0 0 0;606 padding: 1px;607 height: 20px;608}609.ui-dialog .ui-dialog-content {610 position: relative;611 border: 0;612 padding: .5em 1em;613 background: none;614 overflow: auto;615}616.ui-dialog .ui-dialog-buttonpane {617 text-align: left;618 border-width: 1px 0 0 0;619 background-image: none;620 margin-top: .5em;621 padding: .3em 1em .5em .4em;622}623.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {624 float: right;625}626.ui-dialog .ui-dialog-buttonpane button {627 margin: .5em .4em .5em 0;628 cursor: pointer;629}630.ui-dialog .ui-resizable-n {631 height: 2px;632 top: 0;633}634.ui-dialog .ui-resizable-e {635 width: 2px;636 right: 0;637}638.ui-dialog .ui-resizable-s {639 height: 2px;640 bottom: 0;641}642.ui-dialog .ui-resizable-w {643 width: 2px;644 left: 0;645}646.ui-dialog .ui-resizable-se,647.ui-dialog .ui-resizable-sw,648.ui-dialog .ui-resizable-ne,649.ui-dialog .ui-resizable-nw {650 width: 7px;651 height: 7px;652}653.ui-dialog .ui-resizable-se {654 right: 0;655 bottom: 0;656}657.ui-dialog .ui-resizable-sw {658 left: 0;659 bottom: 0;660}661.ui-dialog .ui-resizable-ne {662 right: 0;663 top: 0;664}665.ui-dialog .ui-resizable-nw {666 left: 0;667 top: 0;668}669.ui-draggable .ui-dialog-titlebar {670 cursor: move;671}672.ui-progressbar {673 height: 2em;674 text-align: left;675 overflow: hidden;676}677.ui-progressbar .ui-progressbar-value {678 margin: -1px;679 height: 100%;680}681.ui-progressbar .ui-progressbar-overlay {682 background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");683 height: 100%;684 filter: alpha(opacity=25); /* support: IE8 */685 opacity: 0.25;686}687.ui-progressbar-indeterminate .ui-progressbar-value {688 background-image: none;689}690.ui-selectmenu-menu {691 padding: 0;692 margin: 0;693 position: absolute;694 top: 0;695 left: 0;696 display: none;697}698.ui-selectmenu-menu .ui-menu {699 overflow: auto;700 overflow-x: hidden;701 padding-bottom: 1px;702}703.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {704 font-size: 1em;705 font-weight: bold;706 line-height: 1.5;707 padding: 2px 0.4em;708 margin: 0.5em 0 0 0;709 height: auto;710 border: 0;711}712.ui-selectmenu-open {713 display: block;714}715.ui-selectmenu-text {716 display: block;717 margin-right: 20px;718 overflow: hidden;719 text-overflow: ellipsis;720}721.ui-selectmenu-button.ui-button {722 text-align: left;723 white-space: nowrap;724 width: 14em;725}726.ui-selectmenu-icon.ui-icon {727 float: right;728 margin-top: 0;729}730.ui-slider {731 position: relative;732 text-align: left;733}734.ui-slider .ui-slider-handle {735 position: absolute;736 z-index: 2;737 width: 1.2em;738 height: 1.2em;739 cursor: default;740 -ms-touch-action: none;741 touch-action: none;742}743.ui-slider .ui-slider-range {744 position: absolute;745 z-index: 1;746 font-size: .7em;747 display: block;748 border: 0;749 background-position: 0 0;750}751 752/* support: IE8 - See #6727 */753.ui-slider.ui-state-disabled .ui-slider-handle,754.ui-slider.ui-state-disabled .ui-slider-range {755 filter: inherit;756}757 758.ui-slider-horizontal {759 height: .8em;760}761.ui-slider-horizontal .ui-slider-handle {762 top: -.3em;763 margin-left: -.6em;764}765.ui-slider-horizontal .ui-slider-range {766 top: 0;767 height: 100%;768}769.ui-slider-horizontal .ui-slider-range-min {770 left: 0;771}772.ui-slider-horizontal .ui-slider-range-max {773 right: 0;774}775 776.ui-slider-vertical {777 width: .8em;778 height: 100px;779}780.ui-slider-vertical .ui-slider-handle {781 left: -.3em;782 margin-left: 0;783 margin-bottom: -.6em;784}785.ui-slider-vertical .ui-slider-range {786 left: 0;787 width: 100%;788}789.ui-slider-vertical .ui-slider-range-min {790 bottom: 0;791}792.ui-slider-vertical .ui-slider-range-max {793 top: 0;794}795.ui-spinner {796 position: relative;797 display: inline-block;798 overflow: hidden;799 padding: 0;800 vertical-align: middle;801}802.ui-spinner-input {803 border: none;804 background: none;805 color: inherit;806 padding: .222em 0;807 margin: .2em 0;808 vertical-align: middle;809 margin-left: .4em;810 margin-right: 2em;811}812.ui-spinner-button {813 width: 1.6em;814 height: 50%;815 font-size: .5em;816 padding: 0;817 margin: 0;818 text-align: center;819 position: absolute;820 cursor: default;821 display: block;822 overflow: hidden;823 right: 0;824}825/* more specificity required here to override default borders */826.ui-spinner a.ui-spinner-button {827 border-top-style: none;828 border-bottom-style: none;829 border-right-style: none;830}831.ui-spinner-up {832 top: 0;833}834.ui-spinner-down {835 bottom: 0;836}837.ui-tabs {838 position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */839 padding: .2em;840}841.ui-tabs .ui-tabs-nav {842 margin: 0;843 padding: .2em .2em 0;844}845.ui-tabs .ui-tabs-nav li {846 list-style: none;847 float: left;848 position: relative;849 top: 0;850 margin: 1px .2em 0 0;851 border-bottom-width: 0;852 padding: 0;853 white-space: nowrap;854}855.ui-tabs .ui-tabs-nav .ui-tabs-anchor {856 float: left;857 padding: .5em 1em;858 text-decoration: none;859}860.ui-tabs .ui-tabs-nav li.ui-tabs-active {861 margin-bottom: -1px;862 padding-bottom: 1px;863}864.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,865.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,866.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {867 cursor: text;868}869.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {870 cursor: pointer;871}872.ui-tabs .ui-tabs-panel {873 display: block;874 border-width: 0;875 padding: 1em 1.4em;876 background: none;877}878.ui-tooltip {879 padding: 8px;880 position: absolute;881 z-index: 9999;882 max-width: 300px;883}884body .ui-tooltip {885 border-width: 2px;886}887 888/* Component containers889----------------------------------*/890.ui-widget {891 font-family: Arial,Helvetica,sans-serif;892 font-size: 1em;893}894.ui-widget .ui-widget {895 font-size: 1em;896}897.ui-widget input,898.ui-widget select,899.ui-widget textarea,900.ui-widget button {901 font-family: Arial,Helvetica,sans-serif;902 font-size: 1em;903}904.ui-widget.ui-widget-content {905 border: 1px solid #c5c5c5;906}907.ui-widget-content {908 border: 1px solid #dddddd;909 background: #ffffff;910 color: #333333;911}912.ui-widget-content a {913 color: #333333;914}915.ui-widget-header {916 border: 1px solid #dddddd;917 background: #e9e9e9;918 color: #333333;919 font-weight: bold;920}921.ui-widget-header a {922 color: #333333;923}924 925/* Interaction states926----------------------------------*/927.ui-state-default,928.ui-widget-content .ui-state-default,929.ui-widget-header .ui-state-default,930.ui-button,931 932/* We use html here because we need a greater specificity to make sure disabled933works properly when clicked or hovered */934html .ui-button.ui-state-disabled:hover,935html .ui-button.ui-state-disabled:active {936 border: 1px solid #c5c5c5;937 background: #f6f6f6;938 font-weight: normal;939 color: #454545;940}941.ui-state-default a,942.ui-state-default a:link,943.ui-state-default a:visited,944a.ui-button,945a:link.ui-button,946a:visited.ui-button,947.ui-button {948 color: #454545;949 text-decoration: none;950}951.ui-state-hover,952.ui-widget-content .ui-state-hover,953.ui-widget-header .ui-state-hover,954.ui-state-focus,955.ui-widget-content .ui-state-focus,956.ui-widget-header .ui-state-focus,957.ui-button:hover,958.ui-button:focus {959 border: 1px solid #cccccc;960 background: #ededed;961 font-weight: normal;962 color: #2b2b2b;963}964.ui-state-hover a,965.ui-state-hover a:hover,966.ui-state-hover a:link,967.ui-state-hover a:visited,968.ui-state-focus a,969.ui-state-focus a:hover,970.ui-state-focus a:link,971.ui-state-focus a:visited,972a.ui-button:hover,973a.ui-button:focus {974 color: #2b2b2b;975 text-decoration: none;976}977 978.ui-visual-focus {979 box-shadow: 0 0 3px 1px rgb(94, 158, 214);980}981.ui-state-active,982.ui-widget-content .ui-state-active,983.ui-widget-header .ui-state-active,984a.ui-button:active,985.ui-button:active,986.ui-button.ui-state-active:hover {987 border: 1px solid #003eff;988 background: #007fff;989 font-weight: normal;990 color: #ffffff;991}992.ui-icon-background,993.ui-state-active .ui-icon-background {994 border: #003eff;995 background-color: #ffffff;996}997.ui-state-active a,998.ui-state-active a:link,999.ui-state-active a:visited {1000 color: #ffffff;1001 text-decoration: none;1002}1003 1004/* Interaction Cues1005----------------------------------*/1006.ui-state-highlight,1007.ui-widget-content .ui-state-highlight,1008.ui-widget-header .ui-state-highlight {1009 border: 1px solid #dad55e;1010 background: #fffa90;1011 color: #777620;1012}1013.ui-state-checked {1014 border: 1px solid #dad55e;1015 background: #fffa90;1016}1017.ui-state-highlight a,1018.ui-widget-content .ui-state-highlight a,1019.ui-widget-header .ui-state-highlight a {1020 color: #777620;1021}1022.ui-state-error,1023.ui-widget-content .ui-state-error,1024.ui-widget-header .ui-state-error {1025 border: 1px solid #f1a899;1026 background: #fddfdf;1027 color: #5f3f3f;1028}1029.ui-state-error a,1030.ui-widget-content .ui-state-error a,1031.ui-widget-header .ui-state-error a {1032 color: #5f3f3f;1033}1034.ui-state-error-text,1035.ui-widget-content .ui-state-error-text,1036.ui-widget-header .ui-state-error-text {1037 color: #5f3f3f;1038}1039.ui-priority-primary,1040.ui-widget-content .ui-priority-primary,1041.ui-widget-header .ui-priority-primary {1042 font-weight: bold;1043}1044.ui-priority-secondary,1045.ui-widget-content .ui-priority-secondary,1046.ui-widget-header .ui-priority-secondary {1047 opacity: .7;1048 filter:Alpha(Opacity=70); /* support: IE8 */1049 font-weight: normal;1050}1051.ui-state-disabled,1052.ui-widget-content .ui-state-disabled,1053.ui-widget-header .ui-state-disabled {1054 opacity: .35;1055 filter:Alpha(Opacity=35); /* support: IE8 */1056 background-image: none;1057}1058.ui-state-disabled .ui-icon {1059 filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */1060}1061 1062/* Icons1063----------------------------------*/1064 1065/* states and images */1066.ui-icon {1067 width: 16px;1068 height: 16px;1069}1070.ui-icon,1071.ui-widget-content .ui-icon {1072 background-image: url("images/ui-icons_444444_256x240.png");1073}1074.ui-widget-header .ui-icon {1075 background-image: url("images/ui-icons_444444_256x240.png");1076}1077.ui-state-hover .ui-icon,1078.ui-state-focus .ui-icon,1079.ui-button:hover .ui-icon,1080.ui-button:focus .ui-icon {1081 background-image: url("images/ui-icons_555555_256x240.png");1082}1083.ui-state-active .ui-icon,1084.ui-button:active .ui-icon {1085 background-image: url("images/ui-icons_ffffff_256x240.png");1086}1087.ui-state-highlight .ui-icon,1088.ui-button .ui-state-highlight.ui-icon {1089 background-image: url("images/ui-icons_777620_256x240.png");1090}1091.ui-state-error .ui-icon,1092.ui-state-error-text .ui-icon {1093 background-image: url("images/ui-icons_cc0000_256x240.png");1094}1095.ui-button .ui-icon {1096 background-image: url("images/ui-icons_777777_256x240.png");1097}1098 1099/* positioning */1100.ui-icon-blank { background-position: 16px 16px; }1101.ui-icon-caret-1-n { background-position: 0 0; }1102.ui-icon-caret-1-ne { background-position: -16px 0; }1103.ui-icon-caret-1-e { background-position: -32px 0; }1104.ui-icon-caret-1-se { background-position: -48px 0; }1105.ui-icon-caret-1-s { background-position: -65px 0; }1106.ui-icon-caret-1-sw { background-position: -80px 0; }1107.ui-icon-caret-1-w { background-position: -96px 0; }1108.ui-icon-caret-1-nw { background-position: -112px 0; }1109.ui-icon-caret-2-n-s { background-position: -128px 0; }1110.ui-icon-caret-2-e-w { background-position: -144px 0; }1111.ui-icon-triangle-1-n { background-position: 0 -16px; }1112.ui-icon-triangle-1-ne { background-position: -16px -16px; }1113.ui-icon-triangle-1-e { background-position: -32px -16px; }1114.ui-icon-triangle-1-se { background-position: -48px -16px; }1115.ui-icon-triangle-1-s { background-position: -65px -16px; }1116.ui-icon-triangle-1-sw { background-position: -80px -16px; }1117.ui-icon-triangle-1-w { background-position: -96px -16px; }1118.ui-icon-triangle-1-nw { background-position: -112px -16px; }1119.ui-icon-triangle-2-n-s { background-position: -128px -16px; }1120.ui-icon-triangle-2-e-w { background-position: -144px -16px; }1121.ui-icon-arrow-1-n { background-position: 0 -32px; }1122.ui-icon-arrow-1-ne { background-position: -16px -32px; }1123.ui-icon-arrow-1-e { background-position: -32px -32px; }1124.ui-icon-arrow-1-se { background-position: -48px -32px; }1125.ui-icon-arrow-1-s { background-position: -65px -32px; }1126.ui-icon-arrow-1-sw { background-position: -80px -32px; }1127.ui-icon-arrow-1-w { background-position: -96px -32px; }1128.ui-icon-arrow-1-nw { background-position: -112px -32px; }1129.ui-icon-arrow-2-n-s { background-position: -128px -32px; }1130.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }1131.ui-icon-arrow-2-e-w { background-position: -160px -32px; }1132.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }1133.ui-icon-arrowstop-1-n { background-position: -192px -32px; }1134.ui-icon-arrowstop-1-e { background-position: -208px -32px; }1135.ui-icon-arrowstop-1-s { background-position: -224px -32px; }1136.ui-icon-arrowstop-1-w { background-position: -240px -32px; }1137.ui-icon-arrowthick-1-n { background-position: 1px -48px; }1138.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }1139.ui-icon-arrowthick-1-e { background-position: -32px -48px; }1140.ui-icon-arrowthick-1-se { background-position: -48px -48px; }1141.ui-icon-arrowthick-1-s { background-position: -64px -48px; }1142.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }1143.ui-icon-arrowthick-1-w { background-position: -96px -48px; }1144.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }1145.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }1146.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }1147.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }1148.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }1149.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }1150.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }1151.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }1152.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }1153.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }1154.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }1155.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }1156.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }1157.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }1158.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }1159.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }1160.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }1161.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }1162.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }1163.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }1164.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }1165.ui-icon-arrow-4 { background-position: 0 -80px; }1166.ui-icon-arrow-4-diag { background-position: -16px -80px; }1167.ui-icon-extlink { background-position: -32px -80px; }1168.ui-icon-newwin { background-position: -48px -80px; }1169.ui-icon-refresh { background-position: -64px -80px; }1170.ui-icon-shuffle { background-position: -80px -80px; }1171.ui-icon-transfer-e-w { background-position: -96px -80px; }1172.ui-icon-transferthick-e-w { background-position: -112px -80px; }1173.ui-icon-folder-collapsed { background-position: 0 -96px; }1174.ui-icon-folder-open { background-position: -16px -96px; }1175.ui-icon-document { background-position: -32px -96px; }1176.ui-icon-document-b { background-position: -48px -96px; }1177.ui-icon-note { background-position: -64px -96px; }1178.ui-icon-mail-closed { background-position: -80px -96px; }1179.ui-icon-mail-open { background-position: -96px -96px; }1180.ui-icon-suitcase { background-position: -112px -96px; }1181.ui-icon-comment { background-position: -128px -96px; }1182.ui-icon-person { background-position: -144px -96px; }1183.ui-icon-print { background-position: -160px -96px; }1184.ui-icon-trash { background-position: -176px -96px; }1185.ui-icon-locked { background-position: -192px -96px; }1186.ui-icon-unlocked { background-position: -208px -96px; }1187.ui-icon-bookmark { background-position: -224px -96px; }1188.ui-icon-tag { background-position: -240px -96px; }1189.ui-icon-home { background-position: 0 -112px; }1190.ui-icon-flag { background-position: -16px -112px; }1191.ui-icon-calendar { background-position: -32px -112px; }1192.ui-icon-cart { background-position: -48px -112px; }1193.ui-icon-pencil { background-position: -64px -112px; }1194.ui-icon-clock { background-position: -80px -112px; }1195.ui-icon-disk { background-position: -96px -112px; }1196.ui-icon-calculator { background-position: -112px -112px; }1197.ui-icon-zoomin { background-position: -128px -112px; }1198.ui-icon-zoomout { background-position: -144px -112px; }1199.ui-icon-search { background-position: -160px -112px; }1200.ui-icon-wrench { background-position: -176px -112px; }