SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html class="js" dir="ltr" lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 /*6based from http://mayerweb.com/eric/thoughts/2007/04/12/reset-styles7*/8html,body,div, /*span,*/9applet,object,iframe,10h1,h2,h3,h4,h5,h6,p,blockquote,pre,11a,abbr,acronym,address,big,cite,code,12del,dfn,font,img,ins,kbd,q,s,samp,13small, /*strike,*/ sub,sup,tt,var,14dd,dl,dt,li,ol,ul,15fieldset,form,label,legend /*16table,caption,tbody,tfoot,thead,tr,th,td*/ {17 margin: 0;18 padding: 0;19 border: 0;20 font-weight: normal;21 font-style: normal;22 font-size: 100%;23 line-height: 1;24 font-family: inherit;25 text-align: left;26}27table {28 border-collapse: collapse;29 border-spacing: 0;30}31ol,ul {32 list-style: none;33}34q:before,q:after,35blockquote:before,blockquote:after {36 content: "";37}38 39 40 41/*42** HTML elements43*/44body.drag {45 cursor: move;46}47th.active img {48 display: inline;49}50tr.even, tr.odd {51 background-color: #eee;52 border-bottom: 1px solid #ccc;53 padding: 0.1em 0.6em;54}55tr.drag {56 background-color: #fffff0;57}58tr.drag-previous {59 background-color: #ffd;60}61td.active {62 background-color: #ddd;63}64td.checkbox, th.checkbox {65 text-align: center;66}67tbody {68 border-top: 1px solid #ccc;69}70tbody th {71 border-bottom: 1px solid #ccc;72}73thead th {74 text-align: left; /* LTR */75 padding-right: 1em; /* LTR */76 border-bottom: 3px solid #ccc;77}78 79/*80** Other common styles81*/82.breadcrumb {83 padding-bottom: .5em84}85div.indentation {86 width: 20px;87 height: 1.7em;88 margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */89 padding: 0.42em 0 0.42em 0.6em; /* LTR */90 float: left; /* LTR */91}92div.tree-child {93 background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */94}95div.tree-child-last {96 background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */97}98div.tree-child-horizontal {99 background: url(../../misc/tree.png) no-repeat -11px center;100}101.error {102 color: #e55;103}104div.error {105 border: 1px solid #d77;106}107div.error, tr.error {108 background: #fcc;109 color: #200;110 padding: 2px;111}112.warning {113 color: #e09010;114}115div.warning {116 border: 1px solid #f0c020;117}118div.warning, tr.warning {119 background: #ffd;120 color: #220;121 padding: 2px;122}123.ok {124 color: #008000;125}126div.ok {127 border: 1px solid #00aa00;128}129div.ok, tr.ok {130 background: #dfd;131 color: #020;132 padding: 2px;133}134.item-list .icon {135 color: #555;136 float: right; /* LTR */137 padding-left: 0.25em; /* LTR */138 clear: right; /* LTR */139}140.item-list .title {141 font-weight: bold;142}143.item-list ul {144 margin: 0 0 0.75em 0;145 padding: 0;146}147.item-list ul li {148 margin: 0 0 0.25em 1.5em; /* LTR */149 padding: 0;150 list-style: disc;151}152ol.task-list li.active {153 font-weight: bold;154}155.form-item {156 margin-top: 1em;157 margin-bottom: 1em;158}159tr.odd .form-item, tr.even .form-item {160 margin-top: 0;161 margin-bottom: 0;162 white-space: nowrap;163}164tr.merge-down, tr.merge-down td, tr.merge-down th {165 border-bottom-width: 0 !important;166}167tr.merge-up, tr.merge-up td, tr.merge-up th {168 border-top-width: 0 !important;169}170.form-item input.error, .form-item textarea.error, .form-item select.error {171 border: 2px solid red;172}173.form-item .description {174 font-size: 0.85em;175}176.form-item label {177 display: block;178 font-weight: bold;179}180.form-item label.option {181 display: inline;182 font-weight: normal;183}184.form-checkboxes, .form-radios {185 margin: 1em 0;186}187.form-checkboxes .form-item, .form-radios .form-item {188 margin-top: 0.4em;189 margin-bottom: 0.4em;190}191.marker, .form-required {192 color: #f00;193}194.more-link {195 text-align: right; /* LTR */196}197.more-help-link {198 font-size: 0.85em;199 text-align: right; /* LTR */200}201.nowrap {202 white-space: nowrap;203}204.item-list .pager {205 clear: both;206 text-align: center;207}208.item-list .pager li {209 background-image:none;210 display:inline;211 list-style-type:none;212 padding: 0.5em;213}214.pager-current {215 font-weight:bold;216}217.tips {218 margin-top: 0;219 margin-bottom: 0;220 padding-top: 0;221 padding-bottom: 0;222 font-size: 0.9em;223}224dl.multiselect dd.b, dl.multiselect dd.b .form-item, dl.multiselect dd.b select {225 font-family: inherit;226 font-size: inherit;227 width: 14em;228}229dl.multiselect dd.a, dl.multiselect dd.a .form-item {230 width: 10em;231}232dl.multiselect dt, dl.multiselect dd {233 float: left; /* LTR */234 line-height: 1.75em;235 padding: 0;236 margin: 0 1em 0 0; /* LTR */237}238dl.multiselect .form-item {239 height: 1.75em;240 margin: 0;241}242 243/*244** Inline items (need to override above)245*/246.container-inline div, .container-inline label {247 display: inline;248}249 250/*251** Tab navigation252*/253ul.primary {254 border-collapse: collapse;255 padding: 0 0 0 1em; /* LTR */256 white-space: nowrap;257 list-style: none;258 margin: 5px;259 height: auto;260 line-height: normal;261 border-bottom: 1px solid #bbb;262}263ul.primary li {264 display: inline;265}266ul.primary li a {267 background-color: #ddd;268 border-color: #bbb;269 border-width: 1px;270 border-style: solid solid none solid;271 height: auto;272 margin-right: 0.5em; /* LTR */273 padding: 0 1em;274 text-decoration: none;275}276ul.primary li.active a {277 background-color: #fff;278 border: 1px solid #bbb;279 border-bottom: #fff 1px solid;280}281ul.primary li a:hover {282 background-color: #eee;283 border-color: #ccc;284 border-bottom-color: #eee;285}286ul.secondary {287 border-bottom: 1px solid #bbb;288 padding: 0.5em 1em;289 margin: 5px;290}291ul.secondary li {292 display: inline;293 padding: 0 1em;294 border-right: 1px solid #ccc; /* LTR */295}296ul.secondary a {297 padding: 0;298 text-decoration: none;299}300ul.secondary a.active {301 border-bottom: 4px solid #999;302}303 304/*305** Autocomplete styles306*/307/* Suggestion list */308#autocomplete {309 position: absolute;310 border: 1px solid;311 overflow: hidden;312 z-index: 100;313}314#autocomplete ul {315 margin: 0;316 padding: 0;317 list-style: none;318}319#autocomplete li {320 background: #fff;321 color: #000;322 white-space: pre;323 cursor: default;324}325#autocomplete li.selected {326 background: #0072b9;327 color: #fff;328}329/* Animated throbber */330html.js input.form-autocomplete {331 background-image: url(../../misc/throbber.gif);332 background-repeat: no-repeat;333 background-position: 100% 2px; /* LTR */334}335html.js input.throbbing {336 background-position: 100% -18px; /* LTR */337}338 339/*340** Collapsing fieldsets341*/342html.js fieldset.collapsed {343 border-bottom-width: 0;344 border-left-width: 0;345 border-right-width: 0;346 margin-bottom: 0;347 height: 1em;348}349html.js fieldset.collapsed * {350 display: none;351}352html.js fieldset.collapsed legend {353 display: block;354}355html.js fieldset.collapsible legend a {356 padding-left: 15px; /* LTR */357 background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */358}359html.js fieldset.collapsed legend a {360 background-image: url(../../misc/menu-collapsed.png); /* LTR */361 background-position: 5px 50%; /* LTR */362}363/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */364* html.js fieldset.collapsed legend,365* html.js fieldset.collapsed legend *,366* html.js fieldset.collapsed table * {367 display: inline;368}369/* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */370html.js fieldset.collapsible {371 position: relative;372}373html.js fieldset.collapsible legend a {374 display: block;375}376/* Avoid jumping around due to margins collapsing into collapsible fieldset border */377html.js fieldset.collapsible .fieldset-wrapper {378 overflow: auto;379}380 381/*382** Resizable text areas383*/384.resizable-textarea {385 width: 95%;386}387.resizable-textarea .grippie {388 height: 9px;389 overflow: hidden;390 background: #eee url(../../misc/grippie.png) no-repeat center 2px;391 border: 1px solid #ddd;392 border-top-width: 0;393 cursor: s-resize;394}395html.js .resizable-textarea textarea {396 margin-bottom: 0;397 width: 100%;398 display: block;399}400 401/*402** Table drag and drop.403*/404.draggable a.tabledrag-handle {405 cursor: move;406 float: left; /* LTR */407 height: 1.7em;408 margin: -0.4em 0 -0.4em -0.5em; /* LTR */409 padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */410 text-decoration: none;411}412a.tabledrag-handle:hover {413 text-decoration: none;414}415a.tabledrag-handle .handle {416 margin-top: 4px;417 height: 13px;418 width: 13px;419 background: url(../../misc/draggable.png) no-repeat 0 0;420}421a.tabledrag-handle-hover .handle {422 background-position: 0 -20px;423}424 425/*426** Teaser splitter427*/428.joined + .grippie {429 height: 5px;430 background-position: center 1px;431 margin-bottom: -2px;432}433/* Keeps inner content contained in Opera 9. */434.teaser-checkbox {435 padding-top: 1px;436}437div.teaser-button-wrapper {438 float: right; /* LTR */439 padding-right: 5%; /* LTR */440 margin: 0;441}442.teaser-checkbox div.form-item {443 float: right; /* LTR */444 margin: 0 5% 0 0; /* LTR */445 padding: 0;446}447textarea.teaser {448 display: none;449}450html.js .no-js {451 display: none;452}453 454/*455** Progressbar styles456*/457.progress {458 font-weight: bold;459}460.progress .bar {461 background: #fff url(../../misc/progress.gif);462 border: 1px solid #00375a;463 height: 1.5em;464 margin: 0 0.2em;465}466.progress .filled {467 background: #0072b9;468 height: 1em;469 border-bottom: 0.5em solid #004a73;470 width: 0%;471}472.progress .percentage {473 float: right; /* LTR */474}475.progress-disabled {476 float: left; /* LTR */477}478.ahah-progress {479 float: left; /* LTR */480}481.ahah-progress .throbber {482 width: 15px;483 height: 15px;484 margin: 2px;485 background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;486 float: left; /* LTR */487}488tr .ahah-progress .throbber {489 margin: 0 2px;490}491.ahah-progress-bar {492 width: 16em;493}494 495/*496** Formatting for welcome page497*/498#first-time strong {499 display: block;500 padding: 1.5em 0 .5em;501}502 503/*504** To be used with tableselect.js505*/506tr.selected td {507 background: #ffc;508}509 510/*511** Floating header for tableheader.js512*/513table.sticky-header {514 margin-top: 0;515 background: #fff;516}517 518/*519** Installation clean URLs520*/521#clean-url.install {522 display: none;523}524 525/*526** For anything you want to hide on page load when JS is enabled, so527** that you can use the JS to control visibility and avoid flicker.528*/529html.js .js-hide {530 display: none;531}532 533/*534** Styles for the system modules page (admin/build/modules)535*/536#system-modules div.incompatible {537 font-weight: bold;538}539 540/*541** Styles for the system themes page (admin/build/themes)542*/543#system-themes-form div.incompatible {544 font-weight: bold;545}546 547/*548** Password strength indicator549*/550span.password-strength {551 visibility: hidden;552}553input.password-field {554 margin-right: 10px; /* LTR */555}556div.password-description {557 padding: 0 2px;558 margin: 4px 0 0 0;559 font-size: 0.85em;560 max-width: 500px;561}562div.password-description ul {563 margin-bottom: 0;564}565.password-parent {566 margin: 0 0 0 0;567}568/*569** Password confirmation checker570*/571input.password-confirm {572 margin-right: 10px; /* LTR */573}574.confirm-parent {575 margin: 5px 0 0 0;576}577span.password-confirm {578 visibility: hidden;579}580span.password-confirm span {581 font-weight: normal;582}583 584 585 586/* TimeEntry styles */587.timeEntry_control {588 vertical-align: middle;589 margin-left: 2px;590}591* html .timeEntry_control { /* IE only */592 margin-top: -4px;593}594 595 596 597 598/**599 * Formatter styles600 */601 602.filefield-icon {603 margin: 0 2px 0 0; /* RTL */604}605 606/* End formatter styles. */607 608/**609 * General widget form styles (applicable to all widgets).610 */611.filefield-element {612 margin: 1em 0;613 white-space: normal;614}615 616.filefield-element .widget-preview {617 float: left; /* RTL */618 padding: 0 10px 0 0; /* RTL */619 margin: 0 10px 0 0; /* RTL */620 border-width: 0 1px 0 0; /* RTL */621 border-style: solid;622 border-color: #CCC;623 max-width: 30%;624}625 626.filefield-element .widget-edit {627 float: left; /* RTL */628 max-width: 70%;629}630 631.filefield-element .filefield-preview {632 width: 16em;633 overflow: hidden;634}635 636.filefield-element .widget-edit .form-item {637 margin: 0 0 1em 0;638}639 640.filefield-element input.form-submit,641.filefield-element input.form-file {642 margin: 0;643}644 645.filefield-element input.progress-disabled {646 float: none;647 display: inline;648}649 650.filefield-element div.ahah-progress,651.filefield-element div.throbber {652 display: inline;653 float: none;654 padding: 1px 13px 2px 3px; /* RTL */655}656 657.filefield-element div.ahah-progress-bar {658 display: none;659 margin-top: 4px;660 width: 28em;661 padding: 0;662}663 664.filefield-element div.ahah-progress-bar div.bar {665 margin: 0;666}667 668/* End general widget form styles. */669 670 671 672/**673 * Default alignment styles674 */675.video-left {676 float: left;677}678 679.video-right {680 float: right;681}682 683.video-center {684 display: block;685 margin: 0 auto;686}687 688body#video_filter {689 padding: 2em;690}691 692 693 694 695#elements tr.region-message {696 font-weight: normal;697 color: #999;698}699#elements tr.region-populated {700 display: none;701}702 703fieldset.custom_search-popup {704 display: none;705 position: absolute;706}707 708input.custom-search-default-value { color:#999;}709.element-invisible {710 height: 0;711 overflow: hidden;712 position: absolute;713}714 715 716/* MUST OVER RIDE THE NEXT TWO */717#block-cms-mb-1 {718 position: relative; bottom: 0; right: 0; width: 100%;719}720#block-cms-mb-2 {721 position: absolute; top: 0; right: 0;722}723/* non size specific declarations */724ul.cms-mb, ul.cms-mb li {725 list-style: none; list-style-image: none; margin: 0; padding: 0; -webkit-padding-start: 0; -webkit-margin-before: 0;-webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0;726}727/* next two rules fix the 4px spacing issue */728ul.cms-mb {729 letter-spacing: -4px;730}731ul.cms-mb li {732 letter-spacing: 0;733}734 735/* horizontal */736ul.cms-mb.horizontal li {737 display: inline-block; text-indent: 0; padding: 0; margin: 0;738}739ul.cms-mb.horizontal li a {740 padding: 0.3em 1em; display: block;741}742ul.cms-mb.horizontal li.active-trail a.active,743ul.cms-mb.horizontal li a:hover {744 background: rgba(0,0,0,0.4); color: #fff;745}746 747/* ddso */748ul.cms-mb.ddso li ul {749 display: none;750}751 752/* vertical */753 754@media only screen and (min-width: 980px) {755 /* desktop */756 ul.cms-mb.ddso li {757 display: inline-block;758 }759 ul.cms-mb.ddso li a {760 padding: 10px 1em; /* may need adjustment */761 height: 10px; /* may need adjustment */762 background: rgba(0,0,0,0.6); /* may need adjustment */763 border: 1px solid rgba(255,255,255,0.8); /* may need adjustment */764 }765 ul.cms-mb.ddso li li a {766 display: block; white-space: nowrap;767 height: 1em; /* may need adjustment */768 padding: 0.5em 1em 0.9em; /* may need adjustment */769 }770 ul.cms-mb.ddso li:hover {771 position: relative;772 }773 ul.cms-mb.ddso li:hover ul {774 display: block; text-indent: 0; margin: 0; padding: 0; position: absolute; left: 0;775 top: 28px; /* may need adjustment */776 border: 1px solid rgba(255,255,255,0.8); /* may need adjustment */777 border-top: none;778 }779 ul.cms-mb.ddso li:hover ul ul {780 display: none;781 }782 ul.cms-mb.ddso li li:hover ul {783 display: block; text-indent: 0; margin: 0; padding: 0; position: absolute; top: 0; left: 100%;784 }785 ul.cms-mb.ddso li ul li {786 margin: 0; padding: 0; display: list-item; list-style: none; list-style-image: none;787 }788}789 790@media only screen and (max-width: 979px) {791 /* tablets large phones */792 #small-nav-menu {793 display: block;794 }795 #expand {796 position: absolute; display: block; width: 50px; height: 50px; background: transparent url(nav-sprite.png) no-repeat 0 0;797 top: 0; /* may need adjustment */798 right: 0; /* may need adjustment */799 }800 #small-nav-menu ul.cms-mb {801 display: none;802 }803 #small-nav-menu ul.expanded {804 display: block; margin: 0; padding: 0;805 }806 #small-nav-menu ul.cms-mb.ddso.expanded li.active-trail.menuparent ul {807 display: block; margin: 0; padding: 0;808 }809 .touch-menu ul.cms-mb.expanded {810 min-height: 1em; z-index: inherit; display: normal;811 }812 ul.cms-mb.ddso li a {813 display: block; padding: 0.3em 1em;814 }815 ul.cms-mb.ddso li li a {816 padding: 0.3em 0 0.3em 2em;817 }818}819 820 821 822body,div,p,blockquote,pre,823a,abbr,acronym,address,big,cite,code,824del,dfn,font,img,ins,kbd,q,s,samp,825small, sub,sup,tt,826dd,dl,dt,li,ol,ul,827fieldset,form,label,legend {828 line-height: 1.3em;829}830body {831 font: normal normal normal 10pt/1em Arial, sans-serif; /* font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar */832 color: #000;833 background: #e3e3e3;834}835 836#site-map {837}838#site-map ul.site-map {839}840#site-map ul.site-map-menu li.leaf {841}842form {843 padding: 1em 0;844}845#user-pass,846#user-login {847 width: 600px;848 margin: 0 auto;849 background: transparent;850}851#user-pass input.form-text,852#user-login input.form-text {853 width: 350px;854}855#user-pass .form-item label {856 width: 200px;857 text-align: right;858 float: left;859 background: transparent;860 padding-right: 0.9em;861 padding-top: 3px;862}863#user-login .form-item label {864 width: 150px;865 text-align: right;866 float: left;867 background: transparent;868 padding-right: 0.9em;869 padding-top: 3px;870}871#user-pass .form-item .description,872#user-login .form-item .description {873 margin-left: 165px;874 background: transparent;875 font-style: italic;876}877#user-pass input.form-submit {878 width: 200px;879 margin-left: 150px;880}881#user-login input.form-submit {882 width: 75px;883 margin-left: 200px;884}885 886h1, h2, h3, h4, h5, h6 {887 display: block;888 margin: 0.75em 0;889 font-weight: bold;890 page-break-after: avoid;891}892h1 {893 font-size: 2em;894}895h2 {896 font-size: 1.5em;897}898h3 {899 font-size: 1.17em;900}901h4 {902 font-size: 1.12em;903}904h5 {905 font-size: 0.83em;906}907h6 {908 font-size: 0.75em;909}910 911div {912 background: transparent;913}914span {915 display: inline;916 font-style: inherit;917}918p {919 display: block;920 margin: 1em 0;921}922fieldset {923 margin: 0 0 1em 0;924 padding: 0.5em;925}926img {927 border: 0;928}929 930ul {931 margin: 1em 0 1em 30px;932}933ul li {934 list-style-type: disc; 935}936ol {937 margin: 1em 0 1em 30px;938}939ol li {940 list-style-type: decimal;941}942 943s, strike {944 text-decoration: line-through;945}946tbody {947 border-top: none;948}949 950/*951table {952 display: table;953 border-spacing: 2px;954}955th {956 display: table-cell;957 font-weight: bold;958 text-align: center;959 vertical-align: inherit;960}961thead {962 display: table-row-group;963 vertical-align: middle;964}965tbody {966 display: table-row-group;967 vertical-align: middle;968 border-top: none;969}970tr {971 display: table-row;972}973td {974 display: table-cell;975 vertical-align: inherit;976}977tfoot {978 display: table-footer-group;979 vertical-align: middle;980}981 982/*formfield generic styling*/983form input,984form select,985form textarea {986 border-top: 1px solid #0e0e0e;987 border-left: 1px solid #0e0e0e;988}989form.webform-client-form {990 width: 600px;991 margin: 0 auto;992}993.webform-client-form .webform-component-textfield label {994 float: left;995 width: 150px;996 padding-top: 4px;997 text-align: right;998}999.webform-client-form .webform-component-webform_email label,1000.webform-client-form .webform-component-email label {1001 float: left;1002 width: 150px;1003 padding-top: 4px;1004 text-align: right;1005}1006.webform-client-form .webform-component-textfield input.form-text {1007 margin-left: 15px;1008}1009.webform-client-form .webform-component-webform_email input.form-text,1010.webform-client-form .webform-component-email input.form-text {1011 margin-left: 15px;1012}1013.webform-client-form input.form-submit {1014 width: 75px;1015 margin-left: 250px;1016}1017 1018/*clearfix*/1019.clearfix:after,1020.clear-block:after {1021 content: ".";1022 display: block;1023 height: 0;1024 clear: both;1025 visibility: hidden;1026}1027* html .clearfix,1028* html .clear-block {height: 1%;}1029.clearfix, .clear-block {display: block;}1030/*end clearfix*/1031/*scrollbar link fix*/1032html {overflow: scroll;}1033html a:focus {outline: none;}1034/*end scrollbar*/1035 1036/* system menus */1037ul.menu {1038 list-style: none;1039 border: none;1040 text-align:left; /* LTR */1041}1042ul.menu li {1043 margin: 0 0 0 0.5em; /* LTR */1044}1045li.expanded {1046 list-style-type: circle;1047 list-style-image: url(img/menu-expanded.png);1048 padding: 0.2em 0.5em 0 0; /* LTR */1049 margin: 0;1050}1051li.collapsed {1052 list-style-type: disc;1053 list-style-image: url(img/menu-collapsed.png); /* LTR */1054 padding: 0.2em 0.5em 0 0; /* LTR */1055 margin: 0;1056}1057li.leaf {1058 list-style-type: square;1059 list-style-image: url(img/menu-leaf.png);1060 padding: 0.2em 0.5em 0 0; /* LTR */1061 margin: 0;1062}1063li a.active {1064 color: #000;1065}1066td.menu-disabled {1067 background: #ccc;1068}1069ul.links {1070 margin: 0;1071 padding: 0;1072}1073ul.links.inline {1074 display: inline;1075}1076ul.links li {1077 display: inline;1078 list-style-type: none;1079 padding: 0 0.5em;1080}1081.block ul {1082 margin: 0;1083 padding: 0 0 0.25em 1em; /* LTR */1084}1085 1086/* user */1087/* $Id: user.css,v 1.7 2007/06/21 04:38:41 unconed Exp $ */1088 1089#permissions td.module {1090 font-weight: bold;1091}1092#permissions td.permission {1093 padding-left: 1.5em; /* LTR */1094}1095#access-rules .access-type, #access-rules .rule-type {1096 margin-right: 1em; /* LTR */1097 float: left; /* LTR */1098}1099#access-rules .access-type .form-item, #access-rules .rule-type .form-item {1100 margin-top: 0;1101}1102#access-rules .mask {1103 clear: both;1104}1105#user-login-form {1106 text-align: center;1107}1108#user-admin-filter ul {1109 list-style-type: none;1110 padding: 0;1111 margin: 0;1112 width: 100%;1113}1114#user-admin-buttons {1115 float: left; /* LTR */1116 margin-left: 0.5em; /* LTR */1117 clear: right; /* LTR */1118}1119#user-admin-settings fieldset .description {1120 font-size: 0.85em;1121 padding-bottom: .5em;1122}1123 1124/* Generated by user.module but used by profile.module: */1125.profile {1126 clear: both;1127 margin: 1em 0;1128}1129.profile .picture {1130 float: right; /* LTR */1131 margin: 0 1em 1em 0; /* LTR */1132}1133.profile h3 {1134 border-bottom: 1px solid #ccc;1135}1136.profile dl {1137 margin: 0 0 1.5em 0;1138}1139.profile dt {1140 margin: 0 0 0.2em 0;1141 font-weight: bold;1142}1143.profile dd {1144 margin: 0 0 1em 0;1145}1146 1147/*date and calendar*/1148/* Fixes for date popup css so it will behave in Drupal */1149#calendar_div, #calendar_div td, #calendar_div th {1150 margin:0;1151 padding:0;1152}1153#calendar_div,1154.calendar_control,1155.calendar_links,1156.calendar_header,1157.calendar {1158 width: 185px;1159 border-collapse: separate;1160 margin: 0;1161}1162.calendar td {1163 padding: 0;1164}1165 1166/* formatting for from/to dates in nodes and views */1167span.date-display-single {1168}1169span.date-display-start {1170}1171span.date-display-end {1172}1173span.date-display-separator {1174}1175 1176.date-repeat-input {1177 float: left; /* LTR */1178 width:auto;1179 margin-right: 5px; /* LTR */1180}1181.date-repeat-input select {1182 min-width:7em;1183}1184.date-repeat fieldset {1185 clear:both;1186 float:none;1187}1188 1189.date-views-filter-wrapper {1190 min-width:250px;1191}1192.date-views-filter input {1193 float: left !important; /* LTR */1194 margin-right: 2px !important; /* LTR */1195 padding:0 !important;1196 width:12em;1197 min-width:12em;1198}1199 1200.date-nav {