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" xmlns="">3 <head>4 <style>5 @font-face {6 font-family: 'Titillium Web';7 font-style: normal;8 font-weight: 300;9 src: url(https://fonts.gstatic.com/s/titilliumweb/v17/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGItzZg.ttf) format('truetype');10}11@font-face {12 font-family: 'Titillium Web';13 font-style: normal;14 font-weight: 400;15 src: url(https://fonts.gstatic.com/s/titilliumweb/v17/NaPecZTIAOhVxoMyOr9n_E7fdMPmCA.ttf) format('truetype');16}17@font-face {18 font-family: 'Titillium Web';19 font-style: normal;20 font-weight: 600;21 src: url(https://fonts.gstatic.com/s/titilliumweb/v17/NaPDcZTIAOhVxoMyOr9n_E7ffBzCGItzZg.ttf) format('truetype');22}23@font-face {24 font-family: 'Titillium Web';25 font-style: normal;26 font-weight: 700;27 src: url(https://fonts.gstatic.com/s/titilliumweb/v17/NaPDcZTIAOhVxoMyOr9n_E7ffHjDGItzZg.ttf) format('truetype');28}29 </style>30 <title>31 Scaffolding | Breck Construction | Saskatoon | Industrial Contractor32 </title>33 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">34 <!--removes skype highlighting on phone numbers-->35 <meta content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" name="SKYPE_TOOLBAR">36 <!--makes sure search engines use the meta information we provide, and not their own-->37 <meta content="noodp, noydir" name="robots">38 <!-- Firefox for Android doesn't report its viewport properly -->39 <meta content="width=device-width, initial-scale=0.6, user-scalable=no" name="viewport">40 <meta content="7mtKxlnBmNkhVBDPeI7ra84PiIXIocUaKlzLv7ant_8" name="google-site-verification">41 <meta content="Scaffolding Saskatchewan,
Industrial Construction
, Civil Construction
, Asbestos Removal,
Industrial Insulation,
Industrial Contractor,Scaffolding Saskatchewan,
Industrial Construction
, Civil Construction
, Asbestos Removal,
Industrial Insulation,
Industrial Contractor" id="pageMetaKeywords" name="keywords">42 <meta content="Breck Construction commercial and industrial contractors work with some of Canada's largest companies on a diverse range of services and efficient project management. Submit your project today.,Breck Construction commercial and industrial contractors work with some of Canada's largest companies on a diverse range of services and efficient project management. Submit your project today." id="pageMetaDesc" name="description">43 <meta content="Breck Construction" property="og:site_name">44 <meta content="" property="og:url">45 <meta content="1089879104416281" property="fb:app_id">46 <meta content="" property="og:image">47 <meta content="218" property="og:image:width">48 <meta content="92" property="og:image:height">49 <meta content="Breck Construction" property="og:title">50 <meta content="Breck Construction commercial and industrial contractors work with some of Canada's largest companies on a diverse range of services and efficient project management. Submit your project today." property="og:description">51 <!--must be first style tag in doc-->52 <style title="moduleStyles" type="text/css">53 /*HIDE CHILDREN NAV BY DEFAULT*/ 54.navOuter:not(.mobileNav) .ec{ 55 display:none;56 opacity:0;57}58 59/*SHOW ON HOVER*/ 60.navOuter:not(.mobileNav) .ec.hover{ 61 display:inline-block;62 opacity:1;63}64 65.responsiveBtn{66 display:none;67}68 69.mobileNav .responsiveBtn{70 background: #037695;71 cursor: pointer;72 display: block !important;73 height: 100px;74 position: fixed;75 right: 0;76 top: 0;77 width: 100px;78 z-index: 50000;79 border:none;80}81 82 83#navOuter-sNavSide{84 display: block;85 left: -800px;86 margin: 0 auto;87 position: absolute;88 right: 0;89 top: 480px;90 width: 190px;91}92 93#navOuter-sNavSide ul {94 display: none;95}96 97#pageText2252 ~ #navOuter-sNavSide, #pageText2259 ~ #navOuter-sNavSide {98 display: none;99}100 101#navInner-sNavSide ul {102 margin-left: 0; 103}104 105#navHeader-sNavSide{106 color: rgb(51, 51, 51);107 display: block !important;108 text-transform: uppercase;109}110 111#navInner-sNavSide {112 overflow: hidden;113}114 115.snl2{116 display: block;117 float: left;118 height: 53px;119 text-align: center;120 width: 200px;121}122 123.snl2 > a {124 border: 1px solid rgb(2, 81, 197);125 color: rgb(2, 81, 197);126 display: block;127 height: 100%;128 line-height: 53px;129 position: relative;130 width: 100%;131 132 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */133 -moz-box-sizing: border-box; /* Firefox, other Gecko */134 box-sizing: border-box; /* Opera/IE 8+ */135}136 137.snl2 > a:hover, #navInner-sNavSide .fakeHover > a {138 background-color: #0251c5;139 color: #fff;140}141 142#snid_sNavSide2259 {143 margin: 0 182px;144}145 146#navHeader-sNavSide + .snl2{147 border:none;148}149 </style>150 <style type="text/css">151 /*reset css**********/152html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,153abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,154small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,155fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,156article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, 157section, summary, time, mark, audio, video, select, input[type="text"], input[type="password"] {158 margin:0;159 padding:0;160 border:0;161 font-size:100%;162 vertical-align:baseline;163 background: transparent;164 position:relative;165 166 -webkit-box-sizing: border-box;167 -moz-box-sizing: border-box;168 box-sizing: border-box;169}170 171main{172 display:block;173}174 175form{176 position:static;177}178 179:focus{180 outline:0;181}182 183article,aside,details,figcaption,figure,184footer,header,hgroup,nav,section { 185 display:block;186}187 188nav ul {189 list-style:none;190}191 192ul{193 list-style-position: inside;194}195 196blockquote, q {197 quotes:none;198}199 200blockquote::before, blockquote::after,201q::before, q::after {202 content:'';203}204 205a {206 margin:0;207 padding:0;208 font-size:100%;209 vertical-align:baseline;210 background:transparent;211}212 213del {214 text-decoration: line-through;215}216 217abbr[title], dfn[title] {218 border-bottom:1px dotted;219 cursor:help;220}221 222table {223 border-collapse:collapse;224 border-spacing:0;225}226 227sub, sup {228 font-size: 75%;229 line-height: 0;230 vertical-align: baseline;231}232 233sup {234 top: -0.5em;235}236 237sub {238 bottom: -0.25em;239}240 241/**validation modal display**/242 243.modal{244 245 246}247 248 249 250.modal .modalInner{251 252 background-color: #FFF;253 254 border: 1px solid #F0F0F0;255 256 border-radius: 1px;257 258 -webkit-box-shadow:0 0 10px 5px rgb(79, 193, 240);259 260 -moz-box-shadow:0 0 10px 5px rgb(79, 193, 240);261 262 -o-box-shadow:0 0 10px 5px rgb(79, 193, 240);263 264 box-shadow:0 0 10px 5px rgb(79, 193, 240);265 266 color: #000;267 268 overflow-x:hidden;269 270 padding-bottom: 8px;271 272 text-align: center;273 274}275 276 277 278.modal-formError .modalInner > span{279 280 display: block;281 282 color: #CCC;283 284 font: italic 400 13px/13px "Arial","Helvetica",sans-serif;285 286 margin-bottom: 12px;287 288}289 290 291 292.modal-formError .modalInner > div{293 294 height: 90%;295 296 overflow-x: hidden;297 298 overflow-y: scroll;299 300}301 302 303 304.modal-formError .modalInner > span:first-child{305 306 color: #000;307 308 font-size: 22px;309 310 line-height: 22px;311 312 margin: 12px 0 2px;313 314}315 316 317 318.modal-formError ul li{319 320 font-style: italic; 321 322 padding: 0px 20px 6px 20px;323 324 position: relative;325 326 text-align: left;327 328}329 330 331 332.modalInner ul{333 334 margin-top: 12px;335 336}337 338 339 340.modal-formError ul li > span{341 342 font: 600 14px/14px "Arial","Helvetica",sans-serif;343 344 margin-right: 10px;345 346 text-align: left;347 348}349 350 351 352.modalInner li span{353 354 font-style: normal;355 356 padding-right: 13px;357 358}359 360 361 362.modalInner li{363 364 font-style: italic;365 366}367 368 369 370.modalErrorMsg{371 372 font-size: 12px;373 374 font-weight: 700;375 376}377 378 379 380.modalInner{381 382 margin-top: 5px;383 384 padding-top: 20px;385 386}387 388 389 390/**quick add/edit modal display**/391 392#quickAddEdit{393 394}395 396 397 398#quickAddEdit .modalInner{399 400 height: auto !important;401 402 left: 0 !important;403 404 margin: 0 auto;405 406 overflow: auto !important;407 408 position: absolute !important;409 410 right: 0;411 412 top: 10px !important;413 414 width: 95% !important;415 416}417 418 419 420#quickAddEdit .mi{421 422 height: auto !important;423 424 overflow: auto;425 426}427 428 429 430.modalClose{431 432 background:#018AFF;433 434 cursor:pointer;435 436 height: 15px;437 438 padding: 5px;439 440 position: absolute;441 442 right:0px;443 444 top: 0;445 446 width: 15px;447 448 z-index: 10;449 450 451 452}/*CMS Defaults**********/453 454/*makes sure the height is always at least the height of the window*/455html, body { 456 font-size:16px;457 height: 100%;458 line-height:1.5rem;459}460 461.pc { 462 min-height:100%; 463}464 465.sb {466 display:inline-block;467}468 469#li {470 opacity: 0;471 display:none;472}473 474.clss, .pgcHidden {475 display:none !important;476}477 478input, select {479 vertical-align:middle;480}481 482.moduleQuickEdit{483 margin: 0 !important;484 position: absolute;485 right: 0;486 top: 0;487 z-index: 495;488 cursor:pointer;489}490 491/*slider buttons*/492.mcl{493 position:absolute;494 cursor:pointer;495 width:30px;496 height:65px;497 background:#000;498 margin:auto;499 top:0px;500 bottom:0px;501 z-index:100;502}503 504.mcl::before{505 display:block;506 width:100%;507 height:100%;508 position:absolute;509 top:0px;510 left:0px;511 line-height:65px;512}513 514.mcll{515 left:0px;516}517 518.mcll::before{519 content:"<";520}521 522.mclr{523 right:0px;524}525 526.mclr::before{527 content:">";528}529 530.modRecNumSep{531 display:inline-block;532}533 534.modRecNumSep::before{535 display:inline-block;536 content:"/";537}538 539/*Accordion styles**********************/540.expandBtn{541 cursor:pointer;542}543 544/*Module Item/Form for quick edits**********************/545#pc + .mi{546 position:absolute;547 left:0px;548 right:0px;549 margin:0px auto;550 z-index:10000;551}552 553/*.ec{554 display:none;555}*/556 557.ec.expand {558 display:block;559}560 561input[type="button"] {562 -webkit-appearance: none;563 -webkit-border-radius: 0;564}565 566/*input defaults**********************/567input[type="text"], input[type="tel"], input[type="email"], 568input[type="number"], input[type="password"], input[type="date"], select {569 570}571 572input[type="radio"] {573 margin: 1px 0 4px 10px;574}575 576input[type="checkbox"]{577 578}579 580textarea{581 height: 145px;582 padding: 10px;583}584 585.modDspQtyContainer {586 display: none;587}588 589.invalidLabel {590 color: red;591}592 593 594.subAddEditFrame{595 min-width:100%;596 min-height:100%;597}598 599.quickEditContainer{600 601}602 603.hidden {604 display: none;605}.multilevelpushmenu_wrapper {606 position: absolute;607 overflow: hidden;608 min-width: 100%;609 min-height: 100%;610 margin: 0;611 padding: 0;612}613 614.multilevelpushmenu_wrapper .levelHolderClass {615 position: absolute;616 overflow: hidden;617 top: 0;618 background: #336ca6;619 width: auto;620 min-height: 100%;621 font-family: 'Open Sans Condensed', sans-serif;622 font-size: 1em;623 zoom: 1;624}625 626.multilevelpushmenu_wrapper .ltr {627 margin-left: -100%;628 left: 0;629 -moz-box-shadow: 5px 0 5px -5px #1f4164;630 -webkit-box-shadow: 5px 0 5px -5px #1f4164;631 box-shadow: 5px 0 5px -5px #1f4164;632 filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2);633}634 635.multilevelpushmenu_wrapper .rtl {636 margin-right: -100%;637 right: 0;638 -moz-box-shadow: 5px 0 5px 5px #1f4164;639 -webkit-box-shadow: 5px 0 5px 5px #1f4164;640 box-shadow: 5px 0 5px 5px #1f4164;641 filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2);642}643 644.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {645 background: #2e6196;646}647 648.multilevelpushmenu_wrapper h2 {649 font-size: 1.5em;650 line-height: 1em;651 font-weight: bold;652 color: #1f4164;653 padding: 0 .4em 0 .4em;654}655 656.multilevelpushmenu_wrapper ul {657 list-style: none;658 padding: 0;659 margin: 0;660}661 662.multilevelpushmenu_wrapper li {663 cursor: pointer;664 border-top: 1px solid #295685;665 padding: .4em .4em .4em .4em;666}667 668.multilevelpushmenu_wrapper li:last-child {669 border-bottom: 1px solid #295685;670}671 672.multilevelpushmenu_wrapper li:hover {673 background-color: #295685;674}675 676.multilevelpushmenu_wrapper a {677 display: block;678 outline: none;679 overflow: hidden;680 font-size: 1.5em;681 line-height: 1em;682 padding: .2em .2em;683 text-decoration: none;684 color: #fff;685}686 687.multilevelpushmenu_wrapper a:hover {688 color: #ffe;689}690 691.multilevelpushmenu_wrapper .backItemClass {692 display: block;693 padding: .4em .4em .4em .4em;694 background: #2e6196;695 border-top: 1px solid #295685;696}697 698.multilevelpushmenu_wrapper .floatRight {699 float: right;700}701 702.multilevelpushmenu_wrapper .floatLeft {703 float: left;704}705 706.multilevelpushmenu_wrapper .cursorPointer {707 cursor: pointer;708}709 710.multilevelpushmenu_wrapper .iconSpacing_ltr {711 padding: 0 .4em 0 0;712}713 714.multilevelpushmenu_wrapper .iconSpacing_rtl {715 padding: 0 0 0 .4em;716}.backItemClass i {717 display: none;718}719 720.backItemClass a {721 color: #fff !important;722 display: inline-block !important;723 line-height: 40px;724 width: 85%;725}726 727.backItemClass a:hover{728 color: #252525 !important;729}730 731.multilevelpushmenu_wrapper ul {732 position: static;733}734 735.multilevelpushmenu_wrapper li {736 position: static;737 min-height: 60px;738 padding:10px;739}740 741.multilevelpushmenu_wrapper a {742 display: inline-block;743 padding-bottom: 15px;744 padding-top: 15px;745 vertical-align: middle;746 747 -webkit-box-sizing: border-box;748 -moz-box-sizing: border-box;749 box-sizing: border-box;750}751 752.childShow {753 background: transparent url("/images/Mobile-plus-01.png") no-repeat scroll center center / 32px auto;754 height: 40px;755 padding-bottom: 10px !important;756 padding-top: 10px !important;757 width: 15%;758}759 760.multilevelpushmenu_wrapper .ntp{761 width:85%;762}763 764/*this is the button that we click to go a specific open level*/765.cMenu > h2 > i {766 display: block;767 height: 4000px;768 position: absolute;769 right: 0;770 top: 0;771 width: 40px;772}773 774#navOuter-tNav_multilevelpushmenu.multilevelpushmenu_wrapper > .ltr{775 -moz-box-shadow: none;776 -webkit-box-shadow: none;777 box-shadow: none;778}779 780/*makes long navs scrollable*/781.levelHolderClass ul {782 height:calc(100vh - 85px);783 overflow-x: hidden;784 overflow-y: auto;785}786 787/*this pseudoelement is so we can use vertical align on the text without a children link*/788.multilevelpushmenu_wrapper li:not(.hc)::after{789 content: "";790 display: inline-block;791 height: 60px;792 vertical-align: middle;793 width: 1px;794}795 796.multilevelpushmenu_wrapper .backItemClass {797 min-height: 60px;798}799/*Button to open Mobile Nav*/800#navOuter-tNav.mobileNav .responsiveBtn {801 background-color: #fff !important;802} 803#navOuter-tNav .multilevelpushmenu_wrapper a {804 color: #e24d25; 805}806#navOuter-tNav .multilevelpushmenu_wrapper .levelHolderClass {807 background: #fff none repeat scroll 0 0;808}809#navOuter-tNav .multilevelpushmenu_wrapper li a:hover{810 color: #252525;811}812#navOuter-tNav .multilevelpushmenu_wrapper li:hover{813 background-color: #fff;814}815#navOuter-tNav .multilevelpushmenu_wrapper .backItemClass {816 background: #e24d25 none repeat scroll 0 0;817}818#navOuter-tNav .multilevelpushmenu_wrapper .childShow {819 background-color: #fff;820 border: 1px solid #fff;821 height: 48px;822}823 824/*Lines Under Navigation Lables*/825#navOuter-tNav .multilevelpushmenu_wrapper li {826 border-top: 1px solid #eee;827}828#navOuter-tNav .multilevelpushmenu_wrapper li:last-child {829 border-bottom: 1px solid #eee;830}/*! jQuery UI - v1.11.4 - 2015-03-11831* http://jqueryui.com832* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css833* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px834* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */835 836/* Layout helpers837----------------------------------*/838.ui-helper-hidden {839 display: none;840}841.ui-helper-hidden-accessible {842 border: 0;843 clip: rect(0 0 0 0);844 height: 1px;845 margin: -1px;846 overflow: hidden;847 padding: 0;848 position: absolute;849 width: 1px;850}851.ui-helper-reset {852 margin: 0;853 padding: 0;854 border: 0;855 outline: 0;856 line-height: 1.3;857 text-decoration: none;858 font-size: 100%;859 list-style: none;860}861.ui-helper-clearfix:before,862.ui-helper-clearfix:after {863 content: "";864 display: table;865 border-collapse: collapse;866}867.ui-helper-clearfix:after {868 clear: both;869}870.ui-helper-clearfix {871 min-height: 0; /* support: IE7 */872}873.ui-helper-zfix {874 width: 100%;875 height: 100%;876 top: 0;877 left: 0;878 position: absolute;879 opacity: 0;880}881 882.ui-front {883 z-index: 100;884}885 886 887/* Interaction Cues888----------------------------------*/889.ui-state-disabled {890 cursor: default !important;891}892 893 894/* Icons895----------------------------------*/896 897/* states and images */898.ui-icon {899 display: block;900 text-indent: -99999px;901 overflow: hidden;902 background-repeat: no-repeat;903}904 905 906/* Misc visuals907----------------------------------*/908 909/* Overlays */910.ui-widget-overlay {911 position: fixed;912 top: 0;913 left: 0;914 width: 100%;915 height: 100%;916}917.ui-accordion .ui-accordion-header {918 display: block;919 cursor: pointer;920 position: relative;921 margin: 2px 0 0 0;922 padding: .5em .5em .5em .7em;923 min-height: 0; /* support: IE7 */924 font-size: 100%;925}926.ui-accordion .ui-accordion-icons {927 padding-left: 2.2em;928}929.ui-accordion .ui-accordion-icons .ui-accordion-icons {930 padding-left: 2.2em;931}932.ui-accordion .ui-accordion-header .ui-accordion-header-icon {933 position: absolute;934 left: .5em;935 top: 50%;936 margin-top: -8px;937}938.ui-accordion .ui-accordion-content {939 padding: 1em 2.2em;940 border-top: 0;941 overflow: auto;942}943.ui-autocomplete {944 position: absolute;945 top: 0;946 left: 0;947 cursor: default;948}949.ui-button {950 display: inline-block;951 position: relative;952 padding: 0;953 line-height: normal;954 margin-right: .1em;955 cursor: pointer;956 vertical-align: middle;957 text-align: center;958 overflow: visible; /* removes extra width in IE */959}960.ui-button,961.ui-button:link,962.ui-button:visited,963.ui-button:hover,964.ui-button:active {965 text-decoration: none;966}967/* to make room for the icon, a width needs to be set here */968.ui-button-icon-only {969 width: 2.2em;970}971/* button elements seem to need a little more width */972button.ui-button-icon-only {973 width: 2.4em;974}975.ui-button-icons-only {976 width: 3.4em;977}978button.ui-button-icons-only {979 width: 3.7em;980}981 982/* button text element */983.ui-button .ui-button-text {984 display: block;985 line-height: normal;986}987.ui-button-text-only .ui-button-text {988 padding: .4em 1em;989}990.ui-button-icon-only .ui-button-text,991.ui-button-icons-only .ui-button-text {992 padding: .4em;993 text-indent: -9999999px;994}995.ui-button-text-icon-primary .ui-button-text,996.ui-button-text-icons .ui-button-text {997 padding: .4em 1em .4em 2.1em;998}999.ui-button-text-icon-secondary .ui-button-text,1000.ui-button-text-icons .ui-button-text {1001 padding: .4em 2.1em .4em 1em;1002}1003.ui-button-text-icons .ui-button-text {1004 padding-left: 2.1em;1005 padding-right: 2.1em;1006}1007/* no icon support for input elements, provide padding by default */1008input.ui-button {1009 padding: .4em 1em;1010}1011 1012/* button icon element(s) */1013.ui-button-icon-only .ui-icon,1014.ui-button-text-icon-primary .ui-icon,1015.ui-button-text-icon-secondary .ui-icon,1016.ui-button-text-icons .ui-icon,1017.ui-button-icons-only .ui-icon {1018 position: absolute;1019 top: 50%;1020 margin-top: -8px;1021}1022.ui-button-icon-only .ui-icon {1023 left: 50%;1024 margin-left: -8px;1025}1026.ui-button-text-icon-primary .ui-button-icon-primary,1027.ui-button-text-icons .ui-button-icon-primary,1028.ui-button-icons-only .ui-button-icon-primary {1029 left: .5em;1030}1031.ui-button-text-icon-secondary .ui-button-icon-secondary,1032.ui-button-text-icons .ui-button-icon-secondary,1033.ui-button-icons-only .ui-button-icon-secondary {1034 right: .5em;1035}1036 1037/* button sets */1038.ui-buttonset {1039 margin-right: 7px;1040}1041.ui-buttonset .ui-button {1042 margin-left: 0;1043 margin-right: -.3em;1044}1045 1046/* workarounds */1047/* reset extra padding in Firefox, see h5bp.com/l */1048input.ui-button::-moz-focus-inner,1049button.ui-button::-moz-focus-inner {1050 border: 0;1051 padding: 0;1052}1053.ui-datepicker {1054 width: 17em;1055 padding: .2em .2em 0;1056 display: none;1057}1058.ui-datepicker .ui-datepicker-header {1059 position: relative;1060 padding: .2em 0;1061}1062.ui-datepicker .ui-datepicker-prev,1063.ui-datepicker .ui-datepicker-next {1064 position: absolute;1065 top: 2px;1066 width: 1.8em;1067 height: 1.8em;1068}1069.ui-datepicker .ui-datepicker-prev-hover,1070.ui-datepicker .ui-datepicker-next-hover {1071 top: 1px;1072}1073.ui-datepicker .ui-datepicker-prev {1074 left: 2px;1075}1076.ui-datepicker .ui-datepicker-next {1077 right: 2px;1078}1079.ui-datepicker .ui-datepicker-prev-hover {1080 left: 1px;1081}1082.ui-datepicker .ui-datepicker-next-hover {1083 right: 1px;1084}1085.ui-datepicker .ui-datepicker-prev span,1086.ui-datepicker .ui-datepicker-next span {1087 display: block;1088 position: absolute;1089 left: 50%;1090 margin-left: -8px;1091 top: 50%;1092 margin-top: -8px;1093}1094.ui-datepicker .ui-datepicker-title {1095 margin: 0 2.3em;1096 line-height: 1.8em;1097 text-align: center;1098}1099.ui-datepicker .ui-datepicker-title select {1100 font-size: 1em;1101 margin: 1px 0;1102}1103.ui-datepicker select.ui-datepicker-month,1104.ui-datepicker select.ui-datepicker-year {1105 width: 45%;1106}1107.ui-datepicker table {1108 width: 100%;1109 font-size: .9em;1110 border-collapse: collapse;1111 margin: 0 0 .4em;1112}1113.ui-datepicker th {1114 padding: .7em .3em;1115 text-align: center;1116 font-weight: bold;1117 border: 0;1118}1119.ui-datepicker td {1120 border: 0;1121 padding: 1px;1122}1123.ui-datepicker td span,1124.ui-datepicker td a {1125 display: block;1126 padding: .2em;1127 text-align: right;1128 text-decoration: none;1129}1130.ui-datepicker .ui-datepicker-buttonpane {1131 background-image: none;1132 margin: .7em 0 0 0;1133 padding: 0 .2em;1134 border-left: 0;1135 border-right: 0;1136 border-bottom: 0;1137}1138.ui-datepicker .ui-datepicker-buttonpane button {1139 float: right;1140 margin: .5em .2em .4em;1141 cursor: pointer;1142 padding: .2em .6em .3em .6em;1143 width: auto;1144 overflow: visible;1145}1146.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {1147 float: left;1148}1149 1150/* with multiple calendars */1151.ui-datepicker.ui-datepicker-multi {1152 width: auto;1153}1154.ui-datepicker-multi .ui-datepicker-group {1155 float: left;1156}1157.ui-datepicker-multi .ui-datepicker-group table {1158 width: 95%;1159 margin: 0 auto .4em;1160}1161.ui-datepicker-multi-2 .ui-datepicker-group {1162 width: 50%;1163}1164.ui-datepicker-multi-3 .ui-datepicker-group {1165 width: 33.3%;1166}1167.ui-datepicker-multi-4 .ui-datepicker-group {1168 width: 25%;1169}1170.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,1171.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {1172 border-left-width: 0;1173}1174.ui-datepicker-multi .ui-datepicker-buttonpane {1175 clear: left;1176}1177.ui-datepicker-row-break {1178 clear: both;1179 width: 100%;1180 font-size: 0;1181}1182 1183/* RTL support */1184.ui-datepicker-rtl {1185 direction: rtl;1186}1187.ui-datepicker-rtl .ui-datepicker-prev {1188 right: 2px;1189 left: auto;1190}1191.ui-datepicker-rtl .ui-datepicker-next {1192 left: 2px;1193 right: auto;1194}1195.ui-datepicker-rtl .ui-datepicker-prev:hover {1196 right: 1px;1197 left: auto;1198}1199.ui-datepicker-rtl .ui-datepicker-next:hover {1200 left: 1px;