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 XHTML 1.0 Strict//EN" "">2<html dir="ltr" lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 html {6 overflow: -moz-scrollbars-vertical;7 margin: 0;8 padding: 0;9}10body {11 color: #000000;12 font-family: Arial, Helvetica, sans-serif;13 margin: 0px;14 padding: 0px;15 background:#f1f1f1 url(../image/bg.png) no-repeat top center;16}17body, td, th, input, textarea, select, a {18 font-size: 12px;19}20h1, .welcome {21 22 color: #636E75;23 font: Verdana;24 margin-top: 0px;25 margin-bottom: 20px;26 font-size: 32px;27 font-weight: normal;28 text-shadow: 0 0 1px rgba(0, 0, 0, .01);29}30h2 {31 color: #000000;32 font-size: 16px;33 margin-top: 0px;34 margin-bottom: 5px;35}36p {37 margin-top: 0px;38 margin-bottom: 20px;39}40a, a:visited, a b {41 color: #c1006b;42 text-decoration: underline;43 cursor: pointer;44}45a:hover {46 text-decoration: none;color: #c1006b;47}48a img {49 border: none;50}51form {52 padding: 0;53 margin: 0;54 display: inline;55}56input[type='text'], input[type='password'], textarea {57 background: #F8F8F8;58 border: 1px solid #CCCCCC;59 padding: 3px;60 margin-left: 0px;61 margin-right: 0px;62}63select {64 background: #F8F8F8;65 border: 1px solid #CCCCCC;66 padding: 2px;67}68label {69 cursor: pointer;70}71/* layout */72#container {73 width: 980px;74 margin-left: auto;75 margin-right: auto;76 text-align: left;77}78#column-left {79 float: left;80 width: 180px;81}82#column-right {83 float: right;84 width: 180px;85}86#content {87 min-height: 400px;88 margin-bottom: 25px;89}90#column-left + #column-right + #content, #column-left + #content {91 margin-left: 195px;92}93#column-right + #content {94 margin-right: 195px;95}96/* header */97#header {98 height:70px;99 margin-bottom: 7px;100 padding-bottom: 4px;101 position: relative;102 background: url('../image/header.png') bottom repeat-x;103 z-index: 99;104}105#header #logo {106 position: absolute;107 top: 5px;108 left: 15px;109}110#language {111 position: absolute;112 top: 5px;113 left: 450px;114 width: 75px;115 color: #999;116 line-height: 17px;117}118#language img {119 cursor: pointer;120}121#currency {122 width: 150px;123 position: absolute;124 top: 5px;125 left: 530px;126 color: #999;127 line-height: 17px;128}129#currency a {130 display: inline-block;131 padding: 2px 4px;132 border: 1px solid #CCC;133 color: #999;134 text-decoration: none;135 margin-right: 2px;136 margin-bottom: 2px;137}138#currency a b {139 color: #000;140 text-decoration: none;141}142#header #cart {143 position: absolute;144 top: -15px;145 right: 0px;146 z-index: 9;147 min-width: 300px;148}149#header #cart .heading {150 float: right;151 margin-right: 0px;152 margin-top: 0px;153 padding-left: 38px;154 padding-right: 10px;155 padding-top:10px;156 width:134px;157 height:53px;158 background: url(../image/cartt.png) no-repeat;159 position: relative;160 z-index: 1;161}162#header #cart .heading h4 {163 color: #333333;164 font-size: 15px;165 font-weight: bold;166 margin-top: 0px;167 margin-bottom: 3px;168}169#header #cart .heading a {170 color: #c1006b;171 font-weight:bold;172 text-decoration: none;173}174#header #cart .heading a span {175 background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;176 padding-right: 15px;177}178#header #cart .content {179 clear: both;180 display: none;181 position: relative;182 top: -15px;183 padding: 8px;184 min-height: 150px;185 border-top: 1px solid #EEEEEE;186 border-left: 1px solid #EEEEEE;187 border-right: 1px solid #EEEEEE;188 border-bottom: 1px solid #EEEEEE;189 -webkit-border-radius: 0px 7px 7px 7px;190 -moz-border-radius: 0px 7px 7px 7px;191 -khtml-border-radius: 0px 7px 7px 7px;192 border-radius: 0px 7px 7px 7px;193 -webkit-box-shadow: 0px 2px 2px #DDDDDD;194 -moz-box-shadow: 0px 2px 2px #DDDDDD;195 box-shadow: 0px 2px 2px #DDDDDD;196 background: #FFF;197}198 199#header #cart.active .heading {200 margin-top: 5px;201 padding-top: 10px;202 padding-bottom: 6px;203 border-top: 1px solid #EEEEEE;204 border-left: 1px solid #EEEEEE;205 border-right: 1px solid #EEEEEE;206 -webkit-border-radius: 7px 7px 0px 0px;207 -moz-border-radius: 7px 7px 0px 0px;208 -khtml-border-radius: 7px 7px 0px 0px;209 border-radius: 7px 7px 0px 0px;210}211#header #cart.active .content {212 display: block;213}214#header #cart .cart {215 border-collapse: collapse;216 width: 100%;217 margin-bottom: 5px;218}219#header #cart .cart td {220 color: #000;221 vertical-align: top;222 padding: 10px 5px;223 border-bottom: 1px solid #EEEEEE;224}225#header #cart .cart .image {226 width: 1px;227}228#header #cart .cart .image img {229 border: 1px solid #EEEEEE;230 text-align: left;231}232#header #cart .cart .name small {233 color: #666;234}235#header #cart .cart .quantity {236 text-align: right;237}238#header #cart .cart td.total {239 text-align: right;240}241#header #cart .cart .remove {242 text-align: right;243}244#header #cart .cart .remove img {245 cursor: pointer;246}247#header #cart table.total {248 border-collapse: collapse;249 padding: 5px;250 float: right;251 clear: left;252 margin-bottom: 5px;253}254#header #cart table.total td {255 color: #000;256}257#header #cart .content .checkout {258 text-align: right;259 clear: both;260}261#header #cart .empty {262 padding-top: 50px;263 text-align: center;264}265#header #search {266 position: absolute;267 top: -58px;268 right: 10px;269 width: 298px;270 z-index: 15;271}272#header .button-search {273 position: absolute;274 left: 0px;275 background: url('../image/button-search.png') center center no-repeat;276 width: 28px;277 height: 24px;278 border-right: 1px solid #CCCCCC;279 cursor: pointer;280}281#header #search input {282 background: #FFF;283 padding: 1px 1px 1px 33px;284 width: 262px;285 height: 21px;286 border: 1px solid #CCCCCC;287 -webkit-border-radius: 3px 3px 3px 3px;288 -moz-border-radius: 3px 3px 3px 3px;289 -khtml-border-radius: 3px 3px 3px 3px;290 border-radius: 3px 3px 3px 3px;291 -webkit-box-shadow: 0px 2px 0px #F0F0F0;292 -moz-box-shadow: 0px 2px 0px #F0F0F0;293 box-shadow: 0px 2px 0px #F0F0F0; 294}295#header #welcome {296 background:url(../image/login.png) no-repeat top right ;297 position: absolute;298 top: 45px;299 padding-top:10px;300 padding-right:25px;301 height:45px;302 right: 0px;303 z-index: 5;304 width: 398px;305 text-align: right;306 color: #999999;307}308#header .links {309 position: absolute;310 right: 0px;311 bottom: 3px;312 font-size: 10px;313 padding-right: 10px;314}315#header .links a {316 float: left;317 display: block;318 padding: 0px 0px 0px 7px;319 color: #38B0E3;320 text-decoration: none;321 font-size: 12px;322}323#header .links a + a {324 margin-left: 8px;325 border-left: 1px solid #CCC;326}327#ustmenu{328background: url(../image/ustmenu.png) no-repeat;329width:980px;330height:67px;331margin-top:0px;332}333#ustmenu ul{334width:700px;335padding-top:15px;336padding-left:15px;337 338}339#ustmenu li{340float:left;341display:block;342list-style:none;343padding-left:15px;344}345#ustmenu a{346text-decoration:none;347float:left;348display:block;349list-style:none;350}351/* menu */352#menu {353 background: url(../image/menubg.png) no-repeat;354 355 height: 67px;356 margin-bottom: 0px;357 358 padding: 0px 5px;359}360#menu ul {361 list-style: none;362 margin: 0;363 padding: 0;364}365#menu > ul > li {366 position: relative;367 float: left;368 z-index: 20; 369}370#menu > ul > li:hover {371 background:#fff url(../image/hover.png) repeat-x;372 height:45px;373 border-top:1px solid #ccc;374 border-left:1px solid #ccc;375 border-right:1px solid #ccc;376 -webkit-border-radius: 5px 5px 0px 0px;377 -moz-border-radius: 5px 5px 0px 0px;378 -khtml-border-radius: 5px 5px 0px 0px;379 border-radius: 5px 5px 0px 0px;380}381#menu > ul > li > a {382 font-size: 13px;383 color: #c1006b;384 line-height: 14px;385 text-decoration: none;386 display: block;387 padding: 13px 15px 11px 15px;388 z-index: 6;389 position: relative;390}391#menu > ul > li > div {392 display: none;393 background: #FFFFFF ;394 position: absolute;395 z-index: 5;396 margin-top:7px;397 padding: 5px;398 border-bottom:1px solid #ccc;399 border-left:1px solid #ccc;400 border-right:1px solid #ccc;401 -webkit-border-radius: 0px 0px 5px 5px;402 -moz-border-radius: 0px 0px 5px 5px;403 -khtml-border-radius: 0px 0px 5px 5px;404 border-radius: 0px 0px 5px 5px;405 background: url('../image/submenu.png') repeat-x;406}407#menu > ul > li:hover > div {408 display: table;409}410#menu > ul > li > div > ul {411 display: table-cell;412}413#menu > ul > li ul + ul {414 padding-left: 20px;415}416#menu > ul > li ul > li > a {417 text-decoration: none;418 padding: 4px;419 color: #999;420 display: block;421 white-space: nowrap;422 min-width: 125px;423}424#menu > ul > li ul > li > a:hover {425 background: #cc0000;426 color:#fff;427 428 429}430#menu > ul > li > div > ul > li > a {431 color: #c1006b;432}433.breadcrumb {434 color: #CCCCCC;435 margin-bottom: 10px;436}437.success, .warning, .attention, .information {438 padding: 10px 10px 10px 33px;439 margin-bottom: 15px;440 color: #555555;441}442.success {443 background: #EAF7D9 url('../image/success.png') 10px center no-repeat;444 border: 1px solid #BBDF8D;445}446.warning {447 background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;448 border: 1px solid #F8ACAC;449}450.attention {451 background: #FFF5CC url('../image/attention.png') 10px center no-repeat;452 border: 1px solid #F2DD8C;453}454.information {455 background: #E8F6FF url('../image/information.png') 10px center no-repeat;456 border: 1px solid #B8E2FB;457}458.success .close, .warning .close, .attention .close, .information .close {459 float: right;460 padding-top: 4px;461 padding-right: 4px;462 cursor: pointer;463}464.required {465 color: #FF0000;466 font-weight: bold;467}468.error {469 display: block;470 color: #FF0000;471}472.help {473 color: #999;474 font-size: 10px;475 font-weight: normal;476 font-family: Verdana, Geneva, sans-serif;477 display: block;478}479table.form {480 width: 100%;481 border-collapse: collapse;482 margin-bottom: 20px;483}484table.form tr td:first-child {485 width: 150px;486}487table.form > * > * > td {488 color: #000000;489}490table.form td {491 padding: 4px;492}493input.large-field, select.large-field {494 width: 300px;495}496table.list {497 border-collapse: collapse;498 width: 100%;499 border-top: 1px solid #DDDDDD;500 border-left: 1px solid #DDDDDD;501 margin-bottom: 20px;502}503table.list td {504 border-right: 1px solid #DDDDDD;505 border-bottom: 1px solid #DDDDDD;506}507table.list thead td {508 background-color: #EFEFEF;509 padding: 0px 5px;510}511table.list thead td a, .list thead td {512 text-decoration: none;513 color: #222222;514 font-weight: bold;515}516table.list tbody td a {517 text-decoration: underline;518}519table.list tbody td {520 vertical-align: top;521 padding: 0px 5px;522}523table.list .left {524 text-align: left;525 padding: 7px;526}527table.list .right {528 text-align: right;529 padding: 7px;530}531table.list .center {532 text-align: center;533 padding: 7px;534}535table.list .asc {536 padding-right: 15px;537 background: url('../image/asc.png') right center no-repeat;538}539table.list .desc {540 padding-right: 15px;541 background: url('../image/desc.png') right center no-repeat;542}543.pagination {544 border-top: 1px solid #EEEEEE;545 padding-top: 8px;546 display: inline-block;547 width: 100%;548 margin-bottom: 10px;549}550.pagination .links {551 float: left;552}553.pagination .links a {554 display: inline-block;555 border: 1px solid #EEEEEE;556 padding: 4px 10px;557 text-decoration: none;558 color: #A3A3A3;559}560.pagination .links b {561 display: inline-block;562 border: 1px solid #269BC6;563 padding: 4px 10px;564 font-weight: normal;565 text-decoration: none;566 color: #269BC6;567 background: #FFFFFF;568}569.pagination .results {570 float: right;571 padding-top: 3px;572}573/* button */574a.button {575 display: inline-block;576 padding-left: 8px;577 background: url('../image/button-left.png') top left no-repeat;578 text-decoration: none;579 cursor: pointer;580}581a.button span {582 color: #FFFFFF;583 line-height: 12px;584 font-size: 12px;585 font-weight: bold;586 display: inline-block;587 padding: 8px 12px 8px 5px;588 background: url('../image/button-right.png') top right no-repeat;589}590a.button:hover {591 background: url('../image/button-left-active.png') top left no-repeat;592}593a.button:hover span {594 color: #FFFFFF;595 background: url('../image/button-right-active.png') top right no-repeat;596}597.buttons {598 background: #FFFFFF;599 border: 1px solid #EEEEEE;600 overflow: auto;601 padding: 6px;602 margin-bottom: 20px;603}604.buttons .left {605 float: left;606 text-align: left;607}608.buttons .right {609 float: right;610 text-align: right;611}612.buttons .center {613 text-align: center;614 margin-left: auto;615 margin-right: auto;616}617.htabs {618 height: 30px; 619 line-height: 16px;620 border-bottom: 1px solid #DDDDDD; 621}622.htabs a {623 border-top: 1px solid #DDDDDD;624 border-left: 1px solid #DDDDDD;625 border-right: 1px solid #DDDDDD; 626 background: #FFFFFF url('../image/tab.png') repeat-x;627 padding: 7px 15px 6px 15px;628 float: left;629 font-family: Arial, Helvetica, sans-serif;630 font-size: 13px;631 font-weight: bold;632 text-align: center;633 text-decoration: none;634 color: #000000;635 margin-right: 2px;636}637.htabs a.selected {638 padding-bottom: 7px;639 background: #FFFFFF;640}641.tab-content {642 background:#fff;643 border-left: 1px solid #DDDDDD;644 border-right: 1px solid #DDDDDD;645 border-bottom: 1px solid #DDDDDD;646 padding: 10px;647 margin-bottom: 20px;648 z-index: 2;649 overflow: auto;650}651/* box */652.box {653 margin-bottom: 20px;654}655.box .box-heading {656 657 658 659 background: #ddd url('../image/box_top.png') no-repeat ;660 padding: 8px 10px 7px 10px;661 font-family: Arial, Helvetica, sans-serif;662 font-size: 14px;663 font-weight: bold;664 height:25px;665 line-height: 14px;666 color: #fff;667}668 669.box .box-heading1 {670 671 -webkit-border-radius: 7px 7px 0px 0px;672 -moz-border-radius: 7px 7px 0px 0px;673 -khtml-border-radius: 7px 7px 0px 0px;674 border-radius: 7px 7px 0px 0px;675 border-left:1px solid #ccc;676 border-right:1px solid #ccc;677 border-top:1px solid #ccc;678 background: #fff url('../image/background.png') repeat-x ;679 padding: 8px 10px 7px 10px;680 font-family: Arial, Helvetica, sans-serif;681 font-size: 14px;682 font-weight: bold;683 height:20px;684 line-height: 14px;685 color: #999;686}687.box .box-content {688 background: #fff; 689 border-left:1px solid #ccc;690 border-right:1px solid #ccc;691 border-bottom:1px solid #ccc;692 -webkit-border-radius: 0px 0px 7px 7px;693 -moz-border-radius: 0px 0px 7px 7px;694 -khtml-border-radius: 0px 0px 7px 7px;695 border-radius: 0px 0px 7px 7px;696 697 padding: 10px;698}699.box .box-content:hover {700 background: #f5f5f5;701 702 -webkit-border-radius: 0px 0px 7px 7px;703 -moz-border-radius: 0px 0px 7px 7px;704 -khtml-border-radius: 0px 0px 7px 7px;705 border-radius: 0px 0px 7px 7px;706 707 padding: 10px;708}709/* box products */710.box-product {711 width: 100%;712 overflow: auto;713 text-align:center714}715.box-product > div {716 width: 130px;717 height:180px;718 float: left;719 border:1px solid #ccc;720 margin-right: 10px;721 margin-bottom: 15px;722}723.box-product .image {724 display: block;725 margin-bottom: 0px;726}727.box-product .image img {728 padding: 3px;729 /*border: 1px solid #E7E7E7;*/730}731.box-product .name a {732 color: #38B0E3;733 font-weight: bold;734 text-decoration: none;735 display: block;736 margin-bottom: 4px;737}738.box-product .price {739 display: block;740 font-weight: bold;741 color: #333333;742 margin-bottom: 4px;743}744.box-product .price s {745 color: #F00;746}747.box-product .rating {748 display: block;749 margin-bottom: 4px;750}751/* box category */752.box-category {753 margin-top: -5px;754}755.box-category ul {756 list-style: none;757 margin: 0;758 padding: 0;759}760.box-category > ul > li {761 padding: 8px 8px 8px 0px;762}763.box-category > ul > li + li {764 border-top: 1px solid #EEEEEE;765}766.box-category > ul > li > a {767 text-decoration: none;768 color: #333;769}770.box-category > ul > li ul {771 display: none;772}773.box-category > ul > li a.active {774 font-weight: bold;775}776.box-category > ul > li a.active + ul {777 display: block;778}779.box-category > ul > li ul > li {780 padding: 5px 5px 0px 10px;781}782.box-category > ul > li ul > li > a {783 text-decoration: none;784 display: block;785}786.box-category > ul > li ul > li > a.active {787 font-weight: bold;788}789/* content */790#content .content {791 padding: 10px;792 overflow: auto;793 margin-bottom: 20px;794 border: 1px solid #EEEEEE;795}796#content .content .left {797 798 float: left;799 width: 49%;800}801#content .content .right {802 float: right;803 width: 49%;804}805/* category */806.category-info {807 overflow: auto;808 margin-bottom: 20px;809 background:#fff;810}811.category-info .image {812 float: left;813 padding: 5px;814 margin-right: 15px;815 border: 1px solid #E7E7E7;816}817.category-list {818background:#fff;819 overflow: auto;820 margin-bottom: 20px;821}822.category-list ul {823 float: left;824 width: 18%;825}826.category-list .div a {827 text-decoration: underline;828 font-weight: bold;829}830/* manufacturer */831.manufacturer-list {832 border: 1px solid #DBDEE1;833 padding: 5px;834 overflow: auto;835 margin-bottom: 20px;836}837.manufacturer-heading {838 background: #F8F8F8;839 font-size: 15px;840 font-weight: bold;841 padding: 5px 8px;842 margin-bottom: 6px;843}844.manufacturer-content {845 padding: 8px;846}847.manufacturer-list ul {848 float: left;849 width: 25%;850 margin: 0;851 padding: 0;852 list-style: none;853 margin-bottom: 10px;854}855/* product */856.product-filter {857 border-bottom: 1px solid #EEEEEE;858 padding-bottom: 5px;859 overflow: auto;860}861.product-filter .display {862 margin-right: 15px;863 float: left;864 padding-top: 4px;865 color: #333;866}867.product-filter .display a {868 font-weight: bold;869}870.product-filter .sort {871 float: right;872 color: #333;873}874.product-filter .limit {875 margin-left: 15px;876 float: right;877 color: #333;878}879.product-compare {880 padding-top: 6px;881 margin-bottom: 25px;882 font-weight: bold;883}884.product-compare a {885 text-decoration: none;886 font-weight: bold;887}888.product-list > div {889 overflow: auto;890 margin-bottom: 15px;891}892.product-list .right {893 float: right;894 margin-left: 15px;895}896.product-list > div + div {897 border-top: 1px solid #EEEEEE;898 padding-top: 16px;899}900.product-list .image {901 float: left;902 margin-right: 10px;903}904.product-list .image img {905 padding: 3px;906 border: 1px solid #E7E7E7;907}908.product-list .name {909 margin-bottom: 3px;910}911.product-list .name a {912 color: #000;913 font-weight: bold;914 text-decoration: none;915}916.product-list .description {917 line-height: 15px;918 margin-bottom: 5px;919 color: #4D4D4D;920}921.product-list .rating {922 color: #7B7B7B;923}924.product-list .price {925 float: right;926 height: 50px;927 margin-left: 8px;928 text-align: right;929 color: #333333;930 font-size: 12px;931}932.product-list .price s {933 color: #F00;934}935.product-list .price span {936 font-size: 12px;937 font-weight: normal;938 color: #BBBBBB;939}940.product-list .cart {941 margin-bottom: 3px;942}943.product-list .wishlist, .product-list .compare {944 margin-bottom: 3px;945}946.product-list .wishlist a {947 color: #333333;948 text-decoration: none;949 padding-left: 18px;950 display: block;951 background: url('../image/add.png') left center no-repeat;952}953.product-list .compare a {954 color: #333333;955 text-decoration: none;956 padding-left: 18px;957 display: block;958 background: url('../image/add.png') left 60% no-repeat;959}960.product-grid {961 width: 100%;962 overflow: auto;963}964.product-grid > div {965 width: 120px;966 height: 220px;967 float: left;968 margin-right: 20px;969 margin-bottom: 15px;970}971.product-grid .image {972 display: block;973 margin-bottom: 0px;974}975.product-grid .image img {976 padding: 3px;977 border: 1px solid #E7E7E7;978}979.product-grid .name a {980 color: #38B0E3;981 font-weight: bold;982 text-decoration: none;983 display: block;984 margin-bottom: 4px;985}986.product-grid .description {987 display: none;988}989.product-grid .rating {990 display: block;991 margin-bottom: 4px;992}993.product-grid .price {994 display: block;995 font-weight: bold;996 color: #333333;997 margin-bottom: 4px;998}999.product-grid .price s {1000 color: #F00;1001}1002.product-grid .price span {1003 display: none;1004}1005.product-grid .cart {1006 margin-bottom: 3px;1007}1008.product-grid .wishlist, .product-grid .compare {1009 margin-bottom: 3px;1010}1011.product-grid .wishlist a {1012 color: #333333;1013 text-decoration: none;1014 padding-left: 18px;1015 display: block;1016 background: url('../image/add.png') left center no-repeat;1017}1018.product-grid .compare a {1019 color: #333333;1020 text-decoration: none;1021 padding-left: 18px;1022 display: block;1023 background: url('../image/add.png') left center no-repeat;1024}1025/* Product */1026.product-info {1027background:#fff;1028padding:10px;1029 overflow: auto;1030 margin-bottom: 20px;1031}1032.baslik {1033 background: url(../image/baslik.png) no-repeat;1034 margin-right: 0px;1035 height:40px;1036 margin-bottom:5px;1037 padding-left:15px;1038}1039.product-info > .left {1040 float: left;1041 margin-right: 15px;1042}1043.product-info > .left + .right {1044 margin-left: 265px;1045}1046.product-info .image {1047 border: 1px solid #E7E7E7;1048 float: left;1049 margin-bottom: 20px;1050 padding: 10px;1051 text-align: center;1052}1053.product-info .image-additional {1054 width: 260px;1055 margin-left: -10px;1056 clear: both;1057 overflow: hidden;1058}1059.product-info .image-additional img {1060 border: 1px solid #E7E7E7;1061}1062.product-info .image-additional a {1063 float: left;1064 display: block;1065 margin-left: 10px;1066 margin-bottom: 10px;1067}1068.product-info .description {1069 border-top: 1px solid #E7E7E7;1070 border-bottom: 1px solid #E7E7E7;1071 padding: 5px 5px 10px 5px;1072 margin-bottom: 10px;1073 line-height: 20px;1074 color: #4D4D4D;1075}1076.product-info .description span {1077 color: #38B0E3;1078}1079.product-info .description a {1080 color: #4D4D4D;1081 text-decoration: none;1082}1083.product-info .price {1084 overflow: auto;1085 border-bottom: 1px solid #E7E7E7;1086 padding: 0px 5px 10px 5px;1087 margin-bottom: 10px;1088 font-size: 15px;1089 font-weight: bold;1090 color: #333333;1091}1092.product-info .price s {1093 color: #F00;1094}1095.product-info .price span {1096 font-size: 12px;1097 font-weight: normal;1098 color: #999;1099}1100.product-info .price .discount {1101 font-weight: normal;1102 font-size: 12px;1103 color: #4D4D4D;1104}1105.product-info .options {1106 border-bottom: 1px solid #E7E7E7;1107 padding: 0px 5px 10px 5px;1108 margin-bottom: 10px;1109 color: #000000;1110}1111.product-info .cart {1112 border-bottom: 1px solid #E7E7E7;1113 padding: 0px 5px 10px 5px;1114 margin-bottom: 20px;1115 color: #4D4D4D;1116 overflow: auto;1117}1118.product-info .cart div {1119 float: left;1120 vertical-align: middle;1121}1122.product-info .cart div > span {1123 padding-top: 7px;1124 display: block;1125 color: #999;1126}1127.product-info .cart .minimum {1128 padding-top: 5px;1129 font-size: 11px;1130 color: #999;1131 clear: both;1132}1133.product-info .review {1134 color: #4D4D4D;1135 border-top: 1px solid #E7E7E7;1136 border-left: 1px solid #E7E7E7;1137 border-right: 1px solid #E7E7E7;1138 margin-bottom: 10px;1139}1140.product-info .review > div {1141 padding: 8px;1142 border-bottom: 1px solid #E7E7E7;1143 line-height: 20px;1144}1145.product-info .review > div > span {1146 color: #38B0E3;1147}1148.product-info .review .share {1149 overflow: auto;1150 line-height: normal;1151}1152.product-info .review .share a {1153 text-decoration: none;1154}1155.attribute {1156 border-collapse: collapse;1157 width: 100%;1158 border-top: 1px solid #DDDDDD;1159 border-left: 1px solid #DDDDDD;1160 margin-bottom: 20px;1161}1162.attribute thead td, .attribute thead tr td:first-child {1163 color: #000000;1164 font-size: 14px;1165 font-weight: bold;1166 background: #F7F7F7;1167 text-align: left;1168}1169.attribute tr td:first-child {1170 color: #000000;1171 font-weight: bold;1172 text-align: right;1173 width: 20%;1174}1175.attribute td {1176 padding: 7px;1177 color: #4D4D4D;1178 text-align: center;1179 vertical-align: top;1180 border-right: 1px solid #DDDDDD;1181 border-bottom: 1px solid #DDDDDD;1182}1183.compare-info {1184 border-collapse: collapse;1185 width: 100%;1186 border-top: 1px solid #DDDDDD;1187 border-left: 1px solid #DDDDDD;1188 margin-bottom: 20px;1189}1190.compare-info thead td, .compare-info thead tr td:first-child {1191 color: #000000;1192 font-size: 14px;1193 font-weight: bold;1194 background: #F7F7F7;1195 text-align: left;1196}1197.compare-info tr td:first-child {1198 color: #000000;1199 font-weight: bold;1200 text-align: right;