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>2<html>3 <head>4 <style>5 /* ------------------------------------- */6 7/* The Create theme for RapidWeaver */8 9/* is designed and developed by elixir */10 11/* Visit www.elixirgraphics.com for */12 13/* more RapidWeaver themes. */14 15/* ------------------------------------- */16 17/* @group Meyer's CSS reset */18 19/* v1.0 | 20080212 */20/* with slight modifications*/21 22html, body, div, span, applet, object, iframe,23h1, h2, h3, h4, h5, h6, p, blockquote, pre,24a, abbr, acronym, address, big, cite, code,25del, dfn, em, font, img, ins, kbd, q, s, samp,26small, strike, strong, sub, sup, tt, var,27b, u, i, center,28dl, dt, dd, fieldset, form, label, legend,29table, caption, tbody, tfoot, thead, tr, th, td {30 margin: 0;31 padding: 0;32 border: 0;33 outline: 0;34 font-size: 100%;35 vertical-align: baseline;36 background: transparent;37}38 39body {40 margin: 0;41 padding: 0;42 background: url(images/background/bkg_dark_grain.jpg) repeat;43 font-family: Verdana, "Lucida Grande", Lucida, sans-serif;44}45 46ol, ul {47}48 49blockquote, q {50 quotes: none;51}52 53/* remember to define focus styles! */54:focus {55 outline: 0;56 -moz-outline-style:none;57}58 59/* remember to highlight inserts somehow! */60ins {61 text-decoration: none;62}63 64del {65 text-decoration: line-through;66}67 68textarea {69 outline: none;70}71 72/* @end */73 74/* @group Fonts */75 76@font-face {77 font-family: 'MuseoSans500';78 src: url('fonts/museosans_500-webfont.eot');79 src: local('fonts/museosans_500-webfont'), url('fonts/museosans_500-webfont.woff') format('woff'), url('fonts/museosans_500-webfont.ttf') format('truetype'), url('fonts/museosans_500-webfont.svgz#webfont') format('svg'), url('fonts/museosans_500-webfont.svg#webfont') format('svg');80 font-weight: normal;81 font-style: normal;82}83 84@font-face {85 font-family: 'MuseoSlab500';86 src: url('fonts/museo_slab_500-webfont.eot');87 src: local('fonts/museo_slab_500-webfont'), url('fonts/museo_slab_500-webfont.woff') format('woff'), url('fonts/museo_slab_500-webfont.ttf') format('truetype'), url('fonts/museo_slab_500-webfont.svgz#webfont') format('svg'), url('fonts/museo_slab_500-webfont.svg#webfont') format('svg');88 font-weight: normal;89 font-style: normal;90}91 92@font-face {93 font-family: 'MavenProMedium';94 src: url('fonts/maven_pro_medium-webfont.eot');95 src: local('fonts/maven_pro_medium-webfont'), url('fonts/maven_pro_medium-webfont.woff') format('woff'), url('fonts/maven_pro_medium-webfont.ttf') format('truetype'), url('fonts/museo_slab_500-webfont.svg#webfont') format('svg');96 font-weight: normal;97 font-style: normal;98}99 100 101 102 103 104/* @end */105 106/* @group General Styles */107 108 109html {110 width: 100%;111 height: 100%;112 margin: 0;113 padding: 0;114}115 116body {117 height: 100%;118 margin: 0;119 width: 100%;120 padding: 0;121 font: 14px/20px Georgia, "Times New Roman", Times, serif;122}123 124:focus {125 -moz-outline-style: none;126}127 128img {129 border: none;130}131 132.image-left {133 float: left;134 margin: 3px 3px 3px 0;135 padding: 3px 12px 3px 0px;136}137 138.image-right {139 float: right;140 margin: 3px 0 3px 3px;141 padding: 3px 0 3px 12px;142}143 144a, a:visited {145 -webkit-transition-property: color;146 -webkit-transition-duration: 300ms;147 -moz-transition-property: color;148 -moz-transition-duration: 300ms;149 -o-transition-property: color;150 -o-transition-duration: 300ms;151 transition-property: color;152 transition-duration: 300ms;153 text-decoration: underline;154}155 156a:hover, a:active {157 text-decoration: none;158}159 160.clearer {161 clear: both;162}163 164.clearerLeft {165 clear: left;166}167 168.clearerRight {169 clear: right;170}171 172h1 {173 margin: 0;174 padding: 0;175 font: 36px MavenProMedium, "Lucida Grande", Lucida, Verdana, sans-serif;176 letter-spacing: -2px;177}178 179h2 {180 margin: 0;181 padding: 0;182 font: 28px MavenProMedium, "Lucida Grande", Lucida, Verdana, sans-serif;183 letter-spacing: -2px;184}185 186h3 {187 margin: 0;188 padding: 0;189 font: 22px MavenProMedium, "Lucida Grande", Lucida, Verdana, sans-serif;190 letter-spacing: -1px;191}192 193h4 {194 margin: 0;195 padding: 0;196}197 198hr {199 border-top: 1px solid #d5d5d5;200 width: 90%;201 border-right-style: none;202 border-bottom-style: none;203 border-left-style: none;204 margin-top: 12px;205 margin-bottom: 12px;206}207 208blockquote {209 margin: 0 0 0 24px;210 padding: 0 0 0 18px;211 font-style: italic;212 font-size: 20px;213 line-height: 26px;214 border-left: 3px solid #c2c2c2;215}216 217code {218 font-family: "Courier New", Courier, mono;219 margin: 0 0 0 24px;220 padding: 0 0 0 18px;221 border-left: 3px dashed #c2c2c2;222 display: block;223}224 225.blog-entry blockquote {226}227 228 229::-moz-selection {230}231 232::selection {233}234 235/* Main content area unordered list styles */236 237#contentContainer #content ul {238}239 240#contentContainer #content li {241 list-style-position: inside;242 list-style-type: disc;243}244 245ul.disc {246 list-style-type: disc;247}248 249ul.circle {250 list-style-type: circle;251}252 253ul.square {254 list-style-type: square;255}256 257ol.arabic-numbers {258 list-style-type: decimal;259}260 261ol.upper-alpha {262 list-style-type: upper-alpha;263}264 265ol.lower-alpha {266 list-style-type: lower-alpha;267}268 269ol.upper-roman {270 list-style-type: upper-roman;271}272 273ol.lower-roman {274 list-style-type: lower-roman;275}276 277/* Sidebar area unordered list styles */278#sidebarContainer #sidebar ul {279 margin: 5px 0;280 padding-left: 20px;281}282 283#sidebarContainer #sidebar li {284}285 286/* @end */287 288/* @group Layout */289 290#wrapper {291 background: url(images/background/dark_grain_fade.jpg) repeat-x 0 top;292 width: 100%;293 height: 100%;294}295 296#topper {297 width: 930px;298 margin-right: auto;299 margin-left: auto;300 padding-top: 64px;301 height: 65px;302}303 304h1.siteTitle {305 text-align: right;306 font: 42px MuseoSlab500, Georgia, "Times New Roman", Times, serif;307 float: right;308}309 310#container {311 width: 930px;312 background-color: #fff;313 -webkit-border-radius: 4px;314 -moz-border-radius: 4px;315 border-radius: 4px;316 -webkit-border-top-left-radius: 6px;317 -webkit-border-top-right-radius: 6px;318 -moz-border-radius-topleft: 6px;319 -moz-border-radius-topright: 6px;320 border-top-left-radius: 6px;321 border-top-right-radius: 6px;322 -moz-box-shadow: 0px 2px 6px #000; /* FF3.5+ */323 -webkit-box-shadow: 0px 2px 6px #000; /* Saf3.0+, Chrome */324 box-shadow: 0px 2px 6px #000;325 margin: 0 auto 24px;326 position: relative;327}328 329h2#siteSlogan {330 text-align: center;331 font-size: 28px;332 letter-spacing: 0;333 padding: 0 24px;334 margin: 0;335}336 337#header {338 -webkit-border-top-left-radius: 4px;339 -webkit-border-top-right-radius: 4px;340 -moz-border-radius-topleft: 4px;341 -moz-border-radius-topright: 4px;342 border-top-left-radius: 4px;343 border-top-right-radius: 4px;344 margin-bottom: 20px;345 text-align: center;346 position: relative;347 background: #ededed 0 center;348}349 350#slideshow {351 position:relative;352 width:930px;353 background:url(images/loading.gif) no-repeat 50% 50%;354 -webkit-border-top-left-radius: 4px;355 -webkit-border-top-right-radius: 4px;356 -moz-border-radius-topleft: 4px;357 -moz-border-radius-topright: 4px;358 border-top-left-radius: 4px;359 border-top-right-radius: 4px;360}361 362#slideshow img {363 position:absolute;364 top:0px;365 left:0px;366 display:none;367 -webkit-border-top-left-radius: 4px;368 -webkit-border-top-right-radius: 4px;369 -moz-border-radius-topleft: 4px;370 -moz-border-radius-topright: 4px;371 border-top-left-radius: 4px;372 border-top-right-radius: 4px373}374 375#extraContentBelowHeader {376 margin-bottom: 20px;377}378 379#extraContainer1 {380 margin-right: 40px;381 margin-left: 40px;382 padding-top: 20px;383 padding-bottom: 20px;384}385 386#extraContentBelowHeader, #extraContentFooter, #extraContentOutside {387 display: none;388}389 390#extraContentFooter {391}392 393#extraContainer2 {394 margin-right: 40px;395 margin-left: 40px;396}397 398#extraContentOutside {399 margin-right: auto;400 margin-left: auto;401 margin-bottom: 20px;402}403 404#extraContentBelowNav {405 background: url(images/extracontent/ecFourBkg.jpg) repeat-x;406 height: 55px;407 width: 930px;408 margin-right: auto;409 margin-left: auto;410 -webkit-border-radius: 4px;411 -moz-border-radius: 4px;412 border-radius: 4px;413 -moz-box-shadow: 0px 2px 6px #111418; /* FF3.5+ */414 -webkit-box-shadow: 0px 2px 6px #111418; /* Saf3.0+, Chrome */415 box-shadow: 0px 2px 6px #111418;416 margin-bottom: 24px;417 border: 1px solid #1d1b1b;418 color: #9398a2;419 text-shadow: #202224 0 1px 0;420 font: 16px/55px MavenProMedium, "Lucida Grande", Lucida, Verdana, sans-serif;421}422 423#extraContainer4 {424 border-top: 1px solid #50555d;425 -webkit-border-radius: 4px;426 -moz-border-radius: 4px;427 border-radius: 4px;428 height: 54px;429 overflow: hidden;430}431 432#extraContainer4 strong {433 text-transform: uppercase;434 margin-right: 12px;435}436 437TEMO {438 color: #111418;439}440 441#content {442 margin-left: 40px;443 padding-top: 20px;444 display: block;445 padding-bottom: 40px;446 margin-right: 300px;447}448 449#sidebarContainer {450 width: 200px;451 margin-right: 40px;452 padding-top: 20px;453 float: right;454 display: block;455}456 457#sidebarContent {458 margin-bottom: 20px;459}460 461#siteLogo {462 text-align: center;463}464 465#siteLogo img {466 margin-bottom: 40px;467}468 469#footer {470 font-size: 10px;471 text-align: right;472 color: #5a5b5e;473 width: 930px;474 display: block;475 position: relative;476 margin: 0 auto;477 padding-bottom: 60px;478}479 480 481/* @end */482 483/* @group Nivo */484 485/*486 487 * jQuery Nivo Slider v2.4488 489 * http://nivo.dev7studios.com490 491 *492 493 * Copyright 2011, Gilbert Pellegrom494 495 * Free to use and abuse under the MIT license.496 497 * http://www.opensource.org/licenses/mit-license.php498 499 *500 501 * March 2010502 503 */504 505 506 507 508 509/* The Nivo Slider styles */510 511.nivoSlider {512 513 position:relative;514 515}516 517.nivoSlider img {518 519 position:absolute;520 521 top:0px;522 523 left:0px;524 525}526 527/* If an image is wrapped in a link */528 529.nivoSlider a.nivo-imageLink {530 531 position:absolute;532 533 top:0px;534 535 left:0px;536 537 width:100%;538 539 height:100%;540 541 border:0;542 543 padding:0;544 545 margin:0;546 547 z-index:60;548 549 display:none;550 551}552 553/* The slices in the Slider */554 555.nivo-slice {556 557 display:block;558 559 position:absolute;560 561 z-index:50;562 563 height:100%;564 565 -webkit-border-top-left-radius: 4px;566 -webkit-border-top-right-radius: 4px;567 -moz-border-radius-topleft: 4px;568 -moz-border-radius-topright: 4px;569 border-top-left-radius: 4px;570 border-top-right-radius: 4px571}572 573/* Caption styles */574 575.nivo-caption {576 577 position:absolute;578 579 left:0px;580 581 bottom:0px;582 583 background:#000;584 585 color:#fff;586 587 opacity:0.8; /* Overridden by captionOpacity setting */588 589 width:100%;590 591 z-index:89;592 593}594 595.nivo-caption p {596 597 padding:5px;598 599 margin:0;600 601}602 603.nivo-caption a {604 605 display:inline !important;606 607}608 609.nivo-html-caption {610 611 display:none;612 613}614 615/* Direction nav styles (e.g. Next & Prev) */616 617.nivo-directionNav a {618 619 position:absolute;620 621 top:45%;622 623 z-index:99;624 625 cursor:pointer;626 627 display:block;628 629 width:40px;630 631 height:32px;632 633 background:url(images/arrows.png) no-repeat;634 635 text-indent:-9999px;636 637 border:0;638 639}640 641a.nivo-nextNav {642 643 background-position: 0 0;644 645 right: 0px;646 z-index: 202;647}648 649a.nivo-prevNav {650 651 background-position: -40px 0;652 653 left:0px;654 z-index: 202;655}656 657/* Control nav styles (e.g. 1,2,3...) */658 659.nivo-controlNav {660 position: absolute;661 margin-left: 20px;662 display: block;663}664 665.nivo-controlNav a {666 667 display:block;668 669 width: 10px;670 671 height: 10px;672 673 background: url(images/slideshow_circles.png) no-repeat 0 0;674 675 text-indent: -9999px;676 677 border: 0;678 679 margin-left: 4px;680 681 float:left;682 cursor: pointer;683 684}685 686.nivo-controlNav a.active {687 688 background-position:0 -10px;689 690}691 692 693 694/* @end */695 696/* @group Navigation */697 698.hasChild {699 background: url(images/navigation/subMenuIndicator.png) no-repeat right center;700}701 702.nav>ul>li.hasChild {703 margin-right: 5px;704}705 706.nav ul ul li.hasChild {707 background-position: 150px;708}709 710.nav {711 display: block;712 float: left;713 height: 44px;714 background: url(images/background/menu_bkg_dark_grain.jpg) repeat-x;715 border: 1px solid #1d1b1b;716 -webkit-border-radius: 4px;717 -moz-border-radius: 4px;718 border-radius: 4px;719 -moz-box-shadow: 0px 1px 0px #555b63; /* FF3.5+ */720 -webkit-box-shadow: 0px 1px 0px #555b63; /* Saf3.0+, Chrome */721 box-shadow: 0px 1px 0px #555b63;722 z-index: 300;723}724 725.nav>ul {726 list-style-type: none;727 display: block;728 position: relative;729 width: inherit;730 float: left;731 padding: 0 12px;732 margin: 0;733 border: 1px solid #383c42;734 border-top-color: #50555d;735 -webkit-border-radius: 4px;736 -moz-border-radius: 4px;737 border-radius: 4px;738 height: 42px;739 z-index: 301;740}741 742.nav>ul>li {743 float: left;744 display: inline;745 margin: 0;746 padding: 0;747 z-index: 302;748}749 750.nav>ul>li a:link, .nav>ul>li a:visited {751 text-decoration: none;752 display: block;753 text-align: center;754 font-size: 14px;755 line-height: 44px;756 margin: 0;757 padding: 0 14px;758 color: #9398a2;759 text-shadow: #202224 0 1px 0;760}761 762.nav>ul>li a:link.current, .nav>ul>li a:hover.current, .nav>ul>li a:visited.current {763 color: #d5ddeb;764}765 766.nav>ul>li a:link.currentAncestor, .nav>ul>li a:hover.currentAncestor, .nav>ul>li a:visited.currentAncestor {767 color: #d5ddeb;768}769 770.nav>ul>li a:hover {771 color: #c7cedb;772}773 774.nav>ul>li a:active {775}776 777.nav ul ul {778 list-style-type: none;779 display: none;780 width: 166px;781 position: absolute;782 line-height: 0;783 padding: 0;784 -webkit-border-bottom-right-radius: 4px;785 -webkit-border-bottom-left-radius: 4px;786 -moz-border-radius-bottomright: 4px;787 -moz-border-radius-bottomleft: 4px;788 border-bottom-right-radius: 4px;789 border-bottom-left-radius: 4px;790 border: 1px none #555b63;791 -moz-box-shadow: 0px 3px 6px #000; /* FF3.5+ */792 -webkit-box-shadow: 0px 3px 6px #000; /* Saf3.0+, Chrome */793 box-shadow: 0px 3px 6px #000;794 border-top-style: none;795 background: url(images/background/drop_down_bkg.jpg) repeat;796 margin: 0;797 z-index: 303;798}799 800.nav ul ul ul {801 z-index: 304;802}803 804.nav ul ul ul, .nav ul ul ul ul {805 margin-left: 140px;806 margin-top: -27px;807 -webkit-border-radius: 4px;808 -moz-border-radius: 4px;809 border-radius: 4px;810}811 812.nav ul ul li {813 padding: 0;814 margin: 0;815 line-height: 0;816}817 818.nav ul ul a {819 -webkit-border-radius: 0px;820 -moz-border-radius: 0px;821 border-radius: 0px;822 823}824 825.nav ul ul a:link, .nav ul ul a:visited, .nav ul ul a:hover {826 letter-spacing: 0;827 line-height: 18px;828 width: 146px;829 padding: 8px 10px;830 display: block;831 border-top: 1px solid #484d55;832 border-bottom: 1px solid #1d1b1b;833}834 835.nav ul ul ul li.firstMenuItem a:link, .nav ul ul ul li.firstMenuItem a:visited, .nav ul ul ul li.firstMenuItem a:hover {836 -webkit-border-top-left-radius: 4px;837 -webkit-border-top-right-radius: 4px;838 -moz-border-radius-topleft: 4px;839 -moz-border-radius-topright: 4px;840 border-top-left-radius: 4px;841 border-top-right-radius: 4px;842 border-top-style: none;843}844 845.nav ul ul li.lastMenuItem>a:link, .nav ul ul li.lastMenuItem>a:visited, .nav ul ul li.lastMenuItem>a:hover {846 -webkit-border-bottom-right-radius: 4px;847 -webkit-border-bottom-left-radius: 4px;848 -moz-border-radius-bottomright: 4px;849 -moz-border-radius-bottomleft: 4px;850 border-bottom-right-radius: 4px;851 border-bottom-left-radius: 4px;852 border-bottom-style: none;853}854 855.nav ul ul a:hover, .nav ul ul a:active {856 color: #c7cedb;857 background: url(images/background/menu_bkg_dark_grain.jpg) repeat-x;858}859 860 861/* @end */862 863/* @group Blog */864 865/* @group Tag Cloud */866ul.blog-tag-cloud {867 text-align: left;868 display: block;869 list-style-position: inside;870 list-style-type: none;871 line-height: 19px;872 background: url(images/blog/cloud_silhouette.jpg) no-repeat 0 24px;873 padding: 20px 0 20px 42px;874 margin: 0;875 border-top: 1px solid #ebeaeb;876}877 878ul.blog-tag-cloud a, ul.blog-tag-cloud a:visited{879 text-decoration: none;880}881 882ul.blog-tag-cloud a:hover{883 text-decoration: none;884}885 886ul.blog-tag-cloud li {887 display: inline;888 padding: 0;889 margin: 0;890 position: relative;891 list-style-position: inside;892 list-style-type: none;893}894 895.blog-tag-size-1 {896 font-size: 8px;897}898 899.blog-tag-size-2 {900 font-size: 9px;901}902 903.blog-tag-size-3 {904 font-size: 10px;905}906 907.blog-tag-size-4 {908 font-size: 11px;909}910 911.blog-tag-size-5 {912 font-size: 12px;913}914 915.blog-tag-size-6 {916 font-size: 13px;917}918 919.blog-tag-size-7 {920 font-size: 14px;921}922 923.blog-tag-size-8 {924 font-size: 15px;925}926 927.blog-tag-size-9 {928 font-size: 16px;929}930 931.blog-tag-size-10 {932 font-size: 17px;933}934 935.blog-tag-size-11 {936 font-size: 18px;937}938 939.blog-tag-size-12 {940 font-size: 19px;941}942 943.blog-tag-size-13 {944 font-size: 20px;945}946 947.blog-tag-size-14 {948 font-size: 21px;949}950 951.blog-tag-size-15 {952 font-size: 21px;953}954 955.blog-tag-size-16 {956 font-size: 21px;957}958 959.blog-tag-size-17 {960 font-size: 22px;961}962 963.blog-tag-size-18 {964 font-size: 22px;965}966 967.blog-tag-size-19 {968 font-size: 22px;969}970 971.blog-tag-size-20 {972 font-size: 23px;973}974 975/* @end */976 977/* @group Archive Page */978 979.blog-archive-background {980}981 982.blog-archive-headings-wrapper {983}984 985.blog-archive-entries-wrapper {986}987 988.blog-archive-entries-wrapper .blog-entry {989}990 991.blog-archive-month {992}993 994.blog-archive-link {995}996 997.blog-archive-link a:link, .blog-archive-link a:visited {998}999 1000.blogEntryAsideImg {1001 position: absolute;1002 margin-left: -145px;1003 top: 0;1004 width: 128px;1005 height: auto;1006}1007/* @end */1008 1009.blog-entry {1010 margin-bottom: 40px;1011 position: relative;1012}1013 1014.blog-entry .image-left,1015.blog-entry .image-right {1016}1017 1018h1.blog-entry-title {1019 text-decoration: none;1020 font: 28px MavenProMedium, "Lucida Grande", Lucida, Verdana, sans-serif;1021 letter-spacing: -2px;1022}1023 1024.blog-entry-title a {1025 text-decoration: none;1026}1027 1028.blog-entry-title a:hover {1029 text-decoration: none;1030}1031 1032.blog-entry-date {1033 margin-bottom: 14px;1034 font-size: 12px;1035 font-style: italic;1036}1037 1038.blog-entry-body {1039}1040 1041p.blog-entry-tags {1042 margin-top: 8px;1043 padding-left: 14px;1044 background: url(images/blog/tinyTag.png) no-repeat left center;1045}1046 1047p.blog-entry-tags a, p.blog-entry-tags a:visited {1048 text-decoration: none;1049}1050 1051p.blog-entry-tags a:hover {1052}1053 1054.blog-entry-comments {1055 margin-top: 8px;1056}1057 1058.blog-entry-comments a, .blog-entry-comments a:visited {1059}1060 1061.blog-entry-comments a:hover {1062}1063 1064.blog-entry-category a:link,1065.blog-entry-category a:visited,1066.blog-category-link-enabled,1067.blog-category-link-disabled {1068}1069 1070.blog-entry-category a:hover {1071}1072 1073/*styles the category link in the main entry */1074.blog-entry-category {1075}1076 1077.blog-entry-category a:link,1078.blog-entry-category a:visited {1079}1080 1081.blog-entry-category a:hover {1082}1083 1084/* styles the archives in the blog sidebar */1085#blog-archives {1086 background: url(images/blog/clock_silhouette.jpg) no-repeat 0px 24px;1087 padding: 20px 0 20px 42px;1088 margin: 0;1089 border-top: 1px solid #ebeaeb;1090}1091 1092#blog-archives br {1093 display: none;1094}1095 1096.blog-archive-link-enabled {1097 display: block;1098}1099 1100#blog-archives a, #blog-archives a:visited {1101 display: block;1102 text-decoration: none;1103}1104 1105#blog-archives a:hover {1106}1107 1108.blog-archive-link-disabled {1109 display: none;1110}1111 1112a.blog-archive-link-enabled:hover, .blog-archive-link-disabled:hover {1113}1114/* Styles the blog categories in the blog sidebar */1115#blog-categories {1116 background: url(images/blog/pencil_silhouette.jpg) no-repeat 0 24px;1117 padding: 20px 0 20px 42px;1118 margin: 0;1119 border-top: 1px solid #ebeaeb;1120}1121 1122#blog-categories a, #blog-categories a:visited {1123}1124 1125.blog-category-link-enabled, .blog-category-link-disabled {1126 display: block;1127 text-decoration: none;1128}1129 1130#blog-categories a:hover {1131}1132 1133.blog-category-link-disabled {1134 display: none;1135}1136 1137.blog-category-link-enabled:hover, .blog-category-link-disabled:hover {1138}1139 1140#blog-categories br {1141 display: none;1142}1143 1144/* Styles the blog RSS feeds in the blog sidebar */1145#blog-rss-feeds {1146 margin-top: 18px;1147 background: url(images/blog/rss_silhouette.jpg) no-repeat 0 24px;1148 padding: 20px 0 20px 42px;1149 margin: 0;1150 border-top: 1px solid #ebeaeb;1151}1152 1153#blog-rss-feeds br {1154}1155 1156a.blog-rss-link,1157a.blog-comments-rss-link {1158 display: block;1159 text-decoration: none;1160}1161 1162a.blog-rss-link:hover {1163}1164 1165/* Read More links */1166 1167.blog-read-more {1168 display: block;1169 margin-top: 8px;1170}1171 1172.blog-read-more a {1173 text-decoration: none;1174 padding-left: 14px;1175 background: url(images/blog/readMoreMag.png) no-repeat left center;1176}1177 1178/* @end */1179 1180/* @group File Sharing */1181 1182.filesharing-description {1183 margin-bottom: 20px;1184}1185 1186.filesharing-item {1187 background: #f1f1f1 no-repeat 20px 14px;1188 margin-bottom: 8px;1189 margin-top: 3px;1190 padding: 10px 20px 12px;1191 -webkit-border-radius: 2px;1192 -moz-border-radius: 2px;1193 border-radius: 2px;1194}1195 1196.filesharing-item:hover {1197 background-color: #e9e9e9;1198}1199 1200.filesharing-item-title {