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 class="cufon-active cufon-ready" xmlns="">3 <head>4 <style>5 /*6- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -7[Table of contents]8 91. Body102. Top / #top-bg113. Wrapper / #wrapper124. Header / #header13 - Logo14 - Navigation155. Slider / #slide166. About / #about177. Content / #container18 - Article body19 - Article footer20 - Post types21 - Entry meta: list22 - Entry meta: post23 - Paginator24 - Comments25 - Gallery26 - Folio278. Partners / #partners289. Aside / #aside2910. Footer / #footer3011. Bottom / #bottom3112. Widgets32- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -33*/34/* [1. Body] */35* {36 margin: 0;37 padding: 0;38}39html {40 height: 100%;41}42body{43 margin: 0;44 padding: 0;45 border: 0 !important;46}47 48header, nav, section, article, aside, footer {49 display: block;50}51 52a {53 outline: none;54 text-decoration: underline;55 cursor:pointer;56}57a:hover {58 text-decoration: none;59}60p {61 margin: 0 0 10px62}63img {64 border: none;65}66input {67 vertical-align: middle;68}69input, textarea {70 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;71 font-size:12px;72 color:#1C1C1C;73}74ul {75 margin: 20px 0 20px 20px;76}77ul li {78 list-style:none;79 background-image:url(../images/bullet.png);80 background-repeat:no-repeat;81 background-position:0 5px;82 padding:0 0 0 17px;83}84ol {85 margin: 20px 0 20px 37px;86}87h1, h2, h3, h4, h5, h6{88 font-family: Arial, Helvetica, sans-serif;89 font-weight: normal;90 color: #181818;91}92h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {93 text-decoration:none;94}95h1{96 line-height: 40px;97}98h1 cufon{99 top: 0px !important;100}101h2{102 line-height: 30px;103 padding: 0 0 10px 0;104}105h3{106 line-height: 30px;107 padding: 0 0 10px 0;108}109h4{110 line-height: 30px;111 padding: 0 0 10px 0;112}113h4 cufon{114 top: -7px !important;115}116h5{117 line-height: 30px;118 padding: 0 0 10px 0;119}120h6{121 line-height: 30px;122 padding: 0 0 10px 0;123}124.cufon-loading h1, .cufon-loading h2, .cufon-loading h3, .cufon-loading h4, .cufon-loading h5, .cufon-loading h6, .cufon-loading .post_type div, .cufon-loading .post_type span, .cufon-loading .header{125 visibility: hidden;126}127 128/*******************************************************************/129/* [2. Top] */130#top-bg {131 height:29px;132 position:relative;133 width:100%;134}135 .top-cont {136 width: 960px;137 margin: 0 auto;138 padding:4px 0 0 0139 }140 .right-top {141 float:left;142 margin:1px 0 0 0;143 }144 .right-top a {145 float:left;146 display:block;147 font-size:12px;148 text-shadow:#000 1px 1px 0;149 background: url(../images/top-a.png) no-repeat 0 7px;150 padding:0 0 0 9px;151 margin:0 5px 0 0;152 text-decoration:none;153 }154 .right-top a:hover {155 text-decoration:underline;156 }157 .right-top a:first-child {158 background:none;159 padding:0 0 0 0px;160 }161 .search-f {162 float: right;163 padding:0;164 margin:0px 0 0 0;165 position:relative;166 }167 .search-f .p {168 float:left;169 margin: 0 4px 0 0;170 overflow: hidden;171 }172 form .i-s {173 /*background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#fff));174 background: -moz-linear-gradient(top, #f0f0f0, #fff);175 background: -linear-gradient(top, #f0f0f0, #fff); 176 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff');*/177 background:url("../images/input-bg.png") no-repeat 0 0;178 height:22px;179 width:83px;180 181 }182 183 form .i-s input {184 float: left;185 border: none;186 background:none;187 padding:4px 0 3px 0;188 width:100%;189 max-width:180px;190 font-style:italic;191 font-size:11px;192 margin:0px 3px 0 4px;193 outline: 0 none;194 -webkit-appearance: none;195 line-height:13px;196 }197 input[type="search"]::-webkit-search-cancel-button { /* пÑевдо ÑÑо-Ñо, ÑÑо оÑвеÑÐ°ÐµÑ Ð·Ð° ÐºÐ½Ð¾Ð¿ÐºÑ Ð¾ÑиÑÑки */198 -webkit-appearance: none; /* без ÑбÑоÑа оÑоÑмление не пÑимениÑÑÑ */ 199 background: none;200 }201 202 203 .c_search .i-l {204 padding:0 0 0px 8px;205 margin:0 -2px 0 0;206 height:21px;207 min-width:17px;208 }209 .c_search .i-l span {210 padding:2px 5px 19px 1px;211 }212 .c_search .i-l:hover {213 background-position: 0 -22px;214 }215 .c_search .i-l:hover span{216 background-position: right -22px;217 }218 .search {219 background: url(../images/search.png) no-repeat 0 0;220 width:11px;221 height:12px;222 float:left;223 margin:3px 0 0 0;224 }225/*******************************************************/226/* [3. Wrapper] */ 227#wrapper {228 width: 960px;229 margin: 0 auto;230 min-height: 100%;231 height: auto !important;232/* height: 100%; */233 position:relative;234}235/*******************************************************/236 237/* [4. Header] */238#header {239 position:relative;240 margin:0 auto;241 width:960px;242}243 .contact-block {244 position:relative;245 float:right;246 margin:78px 0 0 0;247 padding:4px 1px 6px 1px;248 }249 .contact-block a {250 float:left;251 display:block;252 padding:0 0 0 23px;253 background-position:0 2px;254 background-repeat:no-repeat;255 text-decoration:none;256 color:#003663;257 font-weight:bold;258 font-size:18px;259 margin:0 10px 0 9px;260 }261 .contact-block a.ico-skype {262 background-image:url(../images/ico-skype.png);263 }264 .contact-block a.ico-phone {265 background-image:url(../images/ico-phone.png);266 }267 .contact-block a.ico-mail {268 background-image:url(../images/ico-mail.png);269 }270 .contact-block a.adress {271 background-image:url(../images/ico-adress.png);272 }273 274 /*Navigation menu*/275 nav {276 position:relative;277 float:left;278 width: 962px;279 height: 43px;280 list-style: none;281 padding:0;282 background: url(../images/nav_bg.png) no-repeat 0px 0;283 z-index:101;284 font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;285 }286 nav ul {287 margin:0;288 float: left;289 }290 nav ul ul {291 float: none;292 }293 #nav li{294 background: url(../images/li_line.png) no-repeat right 0px;295 float: left;296 position:relative;297 z-index:1001;298 padding-right: 0px;299 margin:1px 0px 0 0;300 text-align:center;301 padding: 0px;302 }303 ul#nav li a{304 padding: 10px 19px 18px 19px;305 margin:0 2px 0 0px;306 display:block;307 text-decoration: none;308 color:#1a1a1a;309 text-shadow:1px 1px 0 #f7f6f3;310 font-weight:bold;311 position:relative; 312 }313 #nav li a span {314 background:url(../images/dd.png) no-repeat 0px 10px;315 width:7px;316 height:5px;317 padding:5px 11px 5px 0px;318 position:absolute;319 right:-2px;320 top:8px;321 }322 ul#nav > li.first > a {323 padding: 10px 18px 18px 21px;324 }325 326 ul#nav > li.dd > a {327 background: url(../images/dd.png) no-repeat right 20px;328 }329 ul#nav > li.act > a, ul#nav > li.act:hover > a {330 background: url(../images/li_act.png) repeat-x 0 0px;331 }332 ul#nav > li > a:hover {333 background: url(../images/li_h.png) repeat-x 0 0;334 }335 ul#nav > li:first-child > a:hover {336 background: url(../images/li_h-first.png) no-repeat 1px 0;337 }338 339 #nav li div{340 position: absolute;341 top: 40px;342 left: -1px;343 width: 222px;344 display: none;345 z-index: 1002;346 347 }348 #nav > li.first > div {349 left: 0px;350 }351 /*#nav li:hover div{352 display: block;353 }*/354 #nav li i{355 display: block;356 height: 6px;357 line-height: 6px;358 background: url(../images/ddmenu_b.png) no-repeat 0 bottom;359 }360 #nav li div ul{361 background: url(../images/ddmenu_bg.png) no-repeat 0 0px;362 padding: 10px 0px 12px 0px;363 z-index: 1003;364 }365 #nav li div ul li{366 background: url(../images/nav_ul_li.png) no-repeat 1px 5px;367 float: none;368 margin: 0;369 padding: 10px 0 0px 19px;370 list-style:none;371 text-align:left;372 }373 374 #nav li div ul li a, #nav li div ul li div ul li a {375 background: url(../images/nav-a.png) no-repeat 0 4px;376 padding:0 36px 0 16px;377 -o-transition: padding-right 0.3s, margin-left 0.3s;378 -moz-transition: padding-right 0.3s, margin-left 0.3s;379 -webkit-transition: padding-right 0.3s, margin-left 0.3s;380 transition: padding-right 0.3s, margin-left 0.3s;381 }382 #nav li div ul li a span {383 background:url(../images/bulet-3level.png) no-repeat 0 8px;384 width:10px;385 height:10px;386 padding:5px 5px 5px 5px;387 position:absolute;388 right:-5px;389 top:0;390 }391 #nav li div ul li.first {392 background: none repeat 0 0;393 padding: 5px 0 0px 19px;394 }395 #nav > li > div > ul > li:hover > a, #nav > li > div > ul > li > div > ul > li:hover > a {396 background: url(../images/nav-a.png) no-repeat 0 4px;397 margin:0 0 0 10px;398 padding:0 36px 0 16px;399 }400 #nav li ul i {401 background: url(../images/ddmenu_b.png) no-repeat 0px bottom;402 }403 #nav li div div {404 left: 223px;405 top: -14px;406 width: 222px;407 display: none;408 z-index: 1002;409 position: absolute;410 }411 #nav li:hover div div {412 display:none;413 }414 #nav div li:hover div{415 display: block;416 }417 #nav li div ul li div ul{418 background: url(../images/ddmenu_bg-2.png) no-repeat 0 9px;419 padding: 19px 0 12px 0px;420 z-index: 1003;421 422 }423 424 425 /*end Navigation menu*/ 426 .soc-ico {427 float:right;428 margin:12px 14px 0 0;429 overflow: hidden;430 height: 15px;431 }432 .soc-ico span{433 display: none;434 }435 436 .soc-ico li {437 float:left;438 display:block;439 background:none;440 padding:0;441 position:relative;442 }443 .soc-ico li a {444 float:left;445 display:block;446 height:17px;447 width:18px;448 margin:0 0 0 5px;449 position:relative;450 }451 452 .soc-ico li a.rss {453 background:url(../images/soc-ico/rss.png) no-repeat 0 0;454 }455 .soc-ico li a.dribble {456 background:url(../images/soc-ico/dribble.png) no-repeat 0 0;457 }458 .soc-ico li a.facebook {459 background:url(../images/soc-ico/facebook.png) no-repeat 0 0;460 }461 .soc-ico li a.twitter {462 background:url(../images/soc-ico/twitter.png) no-repeat 0 0;463 }464 .soc-ico li a.delicious {465 background:url(../images/soc-ico/Delicious.png) no-repeat 0 0;466 }467 .soc-ico li a.flickr {468 background:url(../images/soc-ico/flickr.png) no-repeat 0 0;469 }470 .soc-ico li a.forrst {471 background:url(../images/soc-ico/forrst.png) no-repeat 0 0;472 }473 .soc-ico li a.google {474 background:url(../images/soc-ico/google.png) no-repeat 0 1px;475 }476 .soc-ico li:hover a.google {477 background-position:0 -24px;478 }479 .soc-ico li a.lastFM {480 background:url(../images/soc-ico/LastFM.png) no-repeat 0 0;481 }482 .soc-ico li a.linkedin {483 background:url(../images/soc-ico/linkedin.png) no-repeat 0 0;484 }485 .soc-ico li a.mySpace {486 background:url(../images/soc-ico/MySpace.png) no-repeat 0 0;487 }488 .soc-ico li a.vimeo {489 background:url(../images/soc-ico/Vimeo.png) no-repeat 0 0;490 }491 .soc-ico li a.youTube {492 background:url(../images/soc-ico/YouTube.png) no-repeat 0 0;493 }494 .soc-ico li:hover a {495 background-position:0 -25px;496 }497 .soc-info {498 /*background-color:rgba(255,255,255,0.9);499 *background: transparent;500 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; 501 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); 502 zoom: 1;503 -webkit-border-radius:3px;504 -moz-border-radius: 3px;505 border-radius: 3px;*/506 507 display: none;508 position: absolute;509 left: 0px;510 top: 0px;511 white-space: nowrap;512 }513 .soc-cont {514 font-size:10px;515 background:url(../images/soc-bg.png) no-repeat 0 0px;516 position:relative;517 float:left;518 display:block;519 padding:0px 4px 10px 8px;520 }521 .soc-b {522 position:relative;523 padding:0 2px 22px 2px;524 margin:0px -8px -13px 0px;525 z-index: 2;526 float:right;527 background:url(../images/soc-bg-r.png) no-repeat right 0px;528 }529 530/*******************************************************************************/ 531 532/* [5. Slider] */533 #slide {534 width:960px;535 position:relative;536 margin:20px auto 0px;537 z-index:95;538 }539 #slider ul {540 position:relative;541 z-index:99;542 }543 #slider ul li {544 margin:6px 0 0 8px;545 float:left;546 display:block;547 }548 .mask {549 background: url(../images/mask.png) no-repeat 0 0px;550 position:absolute;551 left:0px;552 top:-6px;553 width:964px;554 height:457px;555 z-index:9;556 }557 .grid {558 background: url(../images/grid.png) no-repeat 6px 6px;559 position:absolute;560 left:0px;561 top:-6px;562 width:964px;563 height:457px;564 z-index:999;565 display: none566 }567 568 569/****************************************************************/ 570/* [6. About] */571 572 .about{573 float:left;574 }575 576 577 .about p{578 margin: 0;579 padding: 0;580 }581/****************************************************************/582 583/* [6. Container] */584#container.full-width {585 width: 960px;586 margin:9px auto 3px;587 padding:37px 0 0 0;588 float:none;589}590#container.full-width.for-gal {591 margin:1px auto 48px;592 padding:0px 0 0 0;593 background:none;594}595#container.full-width.for-gal.in {596 margin:1px auto 38px;597}598#container.full-width-wide {599 width: 1160px;600 margin:9px auto 3px;601 padding:37px 0 0 0;602 float:center;603}604#container {605 width: 712px;606 float:left;607 margin: 1px 35px 38px 0;608 609}610#container:after{611 display: block;612 height: 0px;613 content: '';614 clear: both;615}616 .full {617 display:block;618 float:left;619 width:960px;620 margin:0 0px 20px 0px;621 }622 #footer .full {623 margin:0 0px 0px 0px;624 }625 #container.full-width .half, #footer.full-width .half {626 display:block;627 float:left;628 width:460px;629 margin:0 20px 20px 20px;630 position:relative;631 z-index:100;632 }633 #footer .half {634 margin:0 20px 0px 20px;635 }636 .half {637 display:block;638 float:left;639 width:346px;640 margin:0 0px 20px 20px;641 position:relative;642 z-index:100;643 }644 .half.first {645 margin:0 0px 20px 0px;646 }647 648 #container.full-width .half.first {649 margin:0 20px 20px 20px;650 }651 #footer .half.first {652 margin:0 40px 0px 0px;653 }654 .two-thirds {655 display:block;656 float:left;657 width:470px;658 margin:0 0px 20px 20px;659 }660 .two-thirds.first {661 margin:0 0px 20px 0px;662 }663 #container.full-width .two-thirds, #footer .two-thirds {664 display:block;665 float:left;666 width:620px;667 margin:0 20px 20px 20px;668 }669 #footer .two-thirds {670 margin:0 0px 0px 0px;671 }672 .one-third {673 display:block;674 float:left;675 width:222px;676 margin:0 0px 20px 20px;677 }678 #container.full-width .one-third, #footer .one-third {679 display:block;680 float:left;681 width:310px;682 margin:0 10px 20px 10px;683 }684 685 #footer .one-third {686 margin:0 10px 0px 10px;687 }688 .gallery .textwidget.one-third, #container.full-width .gallery .textwidget.one-third{689 690 margin:0px 20px 39px 0px;691 display:inline-block;692 float:none;693 vertical-align:top;694 }695 #container.full-width .gallery .textwidget.one-third {696 width:304px;697 }698 #container.full-width .one-fourth, #footer .one-fourth {699 display:block;700 float:left;701 width:210px;702 margin:0 20px 20px 20px;703 }704 .one-fourth {705 width:158px;706 margin:0 0px 20px 20px;707 float:left708 }709 .one-fourth.first {710 margin:0 0px 20px 0px;711 }712 #container.full-width .three-fourth {713 display:block;714 float:left;715 width:710px;716 margin:0 20px 20px 20px;717 }718 #container.full-width .three-fourth.first { 719 margin:0 0px 20px 20px;720 }721 #container .three-fourth.first { 722 margin:0 0px 20px 0px;723 }724 #container .three-fourth {725 display:block;726 float:left;727 width:534px; 728 margin:0 0px 20px 20px;729 }730 #container.full-width .half .one-fourth.text-inline {731 display:inline-block;732 float:none;733 margin:0 18px 20px 0px;734 vertical-align:top;735 }736 #container.full-width .half .one-fourth.text-inline.first {737 margin:10px 18px 20px 0px;738 }739 #footer .one-fourth {740 margin:0 20px 0px 20px;741 }742 .half .one-fourth {743 margin:0 20px 10px 0px;744 }745 /*Textwidget*/746 .textwidget {747 display:inline-block;748 margin:5px 0 13px 20px;749 position:relative;750 }751 .half .textwidget {752 float:left;753 display:block;754 }755 .gallery .textwidget .hide-me {756 display:none;757 }758 .gallery .textwidget .widget-info .hide-me {759 display:block;760 }761 .gallery .textwidget .widget-info .head {762 display:none;763 }764 .gallery .textwidget.one-fourth {765 width:221px;766 display:inline-block;767 float:none;768 vertical-align:top;769 }770 .gallery .textwidget.text {771 padding:16px 0 0 0;772 margin:0px 0 17px 0px;773 }774 .gallery .textwidget.text a.head, .gallery .textwidget.text .hide-me {775 font-size:21px;776 text-decoration:none;777 margin:0 0 13px 0;778 }779 .gallery .textwidget.text .widget-info a.head{780 font-size:12px;781 margin:0;782 }783 .gallery .textwidget.text.first {784 background:none;785 padding:0;786 margin:-5px 0 18px 0px;787 }788 .gallery .textwidget {789 margin:0 18px 18px 0px;790 }791 .textwidget.first {792 margin:5px 0 13px 0;793 }794 .textwidget-photo {795 position:relative;796 padding:4px 4px 4px 4px;797 display:inline-block;798 }799 .textwidget.one-fourth .textwidget-photo, .textwidget.one-third .textwidget-photo {800 margin:0 0 15px 0;801 }802 .textwidget.text .textwidget-photo {803 margin:5px 0 0 0;804 }805 .textwidget.text.first .textwidget-photo {806 margin:5px 0 0 0;807 }808 .widget-info .textwidget-photo {809 padding:0;810 margin:0 0 5px 0;811 background:none;812 box-shadow:none;813 }814 .textwidget a.photo {815 position:relative;816 display:block;817 line-height:0;818 font-size:0;819 }820 .textwidget .widget-info a.photo i, a.photo i, .alignleft i {821 position:absolute;822 display:block;823 left:0;824 top:0;825 width:100%;826 height:100%;827 /* -webkit-border-radius: 5px;828 -moz-border-radius: 5px;829 border-radius: 5px;*/830 }831 .widget-info a.photo i {832 left:0;833 top:0;834 }835 .textwidget-photo a.photo i {836 left:0;837 top:0;838 }839 a.alignleft i, a.photo i {840 background:url(../images/zoom-bg.png) no-repeat center center;841 /**background: url(../images/zoom.png) no-repeat center center;842 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000)";843 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 844 zoom: 1;*/ 845 left:4px;846 top:4px; 847 } 848 a.alignleft.text i {849 background:url(../images/zoom-tex-bgt.png) no-repeat center center;850 /* *background: url(../images/zoom-text.png) no-repeat center centert;851 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)"; 852 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 853 zoom: 1;*/854 }855 a.alignleft.photo i {856 background: url(../images/zoom-photo-bg.png) no-repeat center center;857 /* *background: url(../images/zoom-photo.png) no-repeat center center;858 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)";859 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 860 zoom: 1;*/861 }862 a.alignleft.video i {863 background:url(../images/zoom-video-bg.png) no-repeat center center;864 /* *background: url(../images/zoom-video.png) no-repeat center center;865 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)"; 866 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 867 zoom: 1;*/868 }869 870 a.like {871 background: url("../images/like-bg.png") no-repeat 0 0px;872 text-decoration:none;873 height:17px;874 color:#fff;875 font-size:10px;876 text-shadow:none;877 position:absolute;878 right:4px;879 bottom:2px;880 width:41px;881 text-align:center;882 line-height:13px;883 padding:2px 0 0 0; 884 }885 .textwidget .widget-info .like {886 right:0px;887 bottom:3px;888 }889 .widget-info .like {890 bottom:4px;891 right:0px;892 }893 a.like span {894 position: relative;895 padding: 0 0 0 10px;896 background:url(../images/ico-like.png) no-repeat 0 2px;897 font-weight:bold;898 } 899 900 a.like:hover span, a.like.act span {901 background:url(../images/ico-like-h.png) no-repeat 0 2px;902 }903 .widget-info {904 /*background-color:rgba(255,255,255,0.9);*/905 background:url(../images/widget-info-bg.png) repeat 0 0;906 -moz-box-shadow: 0 0 2px #888;907 -webkit-box-shadow: 0 0 2px #888;908 box-shadow: 0 0 2px #888;909 -webkit-border-radius: 3px;910 -moz-border-radius: 3px;911 border-radius: 3px;912 padding:9px 9px 15px 9px;913 display:none;914 position:absolute; 915 left:-5px;916 top:-5px; 917 z-index:90;918 color:#1a1a1a919 }920 921 .gallery .textwidget.first .widget-info {922 margin:0px 0 18px 0;923 }924 .gallery .textwidget .widget-info {925 padding:9px 9px 15px 9px;926 margin:0px 0 0 0;927 }928 a.head, .head-capt {929 text-decoration:underline;930 }931 a.head:hover, .head-capt:hover{932 text-decoration:none;933 }934 .info.half, #container.full-width .info.half{935 display:inline-block;936 width:342px;937 position:relative;938 margin:10px 0 0 17px;939 float:none;940 vertical-align:top;941 }942 .info.one-fourth {943 margin:0 0 0 0;944 width:auto;945 }946 .info.one-third {947 margin:0 0 0 0;948 width:auto;949 }950 #container.full-width .info.one-third{951 width:278px;952 margin:0 0 0 0;953 }954 955 .textwidget .widget-info .info.half {956 width:320px;957 margin:0;958 }959 #container.full-width .textwidget .widget-info .info.half{960 width:auto;961 }962 #container.full-width .info.half{963 width:470px;964 }965 .info a.button, .textwidget.one-fourth a.button, .textwidget.one-third a.button {966 margin:3px 2px 0px 0;967 }968 .widget-info .photo {969 margin:0 0 5px 0;970 }971 .details {972 font-size:11px;973 font-weight:bold;974 }975 .head, .head-capt, .hide-me {976 font-weight:bold;977 margin: 0 0 10px 0;978 display:block;979 }980 .text .head, .text .head-capt {981 margin: 0 0 1px 0;982 }983 984/*********************************************/985 /*Entry-meta*/986 .entry-meta {987 margin:13px 0 7px;988 padding:21px 0 0 0;989 overflow:hidden;990 }991 .item-blog .entry-meta {992 background:none;993 margin:0 0 11px 0;994 padding:4px 0 2px 0;995 }996 .entry-meta .ico-link {997 background-position:0 1px;998 background-repeat:no-repeat;999 display:block;1000 float:left;1001 font-size:10px;1002 margin-right:8px;1003 padding-left:23px;1004 text-decoration:none;1005 }1006 1007 .entry-meta .ico-link.comments {1008 float:right;1009 padding:2px 0 0 0;1010 margin:-4px 0 0 0;1011 font-size:12px;1012 font-weight:bold;1013 width:33px;1014 height:29px;1015 text-align:center;1016 }1017 1018 .entry-meta .ico-link a {1019 color:#141414;1020 text-decoration:none;1021 }1022 .entry-meta .ico-link a:hover, .entry-meta a.ico-link:hover {1023 text-decoration:underline;1024 }1025 .entry-meta .ico-link.date {1026 background-image:url(../images/meta_date.png);1027 }1028 .entry-meta .ico-link.comments {1029 background:url(../images/meta_comments.png) no-repeat 0 -31px;1030 }1031 .entry-meta .ico-link.comments:hover {1032 background-position:0 0px;1033 text-decoration:none;1034 }1035 .entry-meta .ico-link.tags {1036 background-image:url(../images/meta_tags.png);1037 }1038 .entry-meta .ico-link.author {1039 background-image:url(../images/meta_author.png);1040 }1041 .entry-meta .ico-link.likes {1042 background-image:url(../images/meta_like.png);1043 }1044 .entry-meta .ico-link.type {1045 background-image:url(../images/meta_type.png);1046 }1047 .entry-meta .ico-link.categories {1048 background-image:url(../images/meta_categories.png);1049 }1050/******************************************************************************/1051 .entry-content { 1052 padding:0 0 44px 0;1053 margin:0 0 30px 0;1054 }1055 .entry-content.t-work {1056 padding:0 0 26px 0;1057 }1058 .entry-content.type {1059 padding:0 0 25px 0;1060 }1061 .entry-content:after {1062 content: '.';1063 display: block;1064 clear: both;1065 visibility: hidden;1066 height: 0;1067 }1068 .entry-content #partners {1069 margin:0;1070 }1071 .entry-content.cont {1072 margin:13px 0 0 0;1073 padding:37px 0 0 0;1074 }1075 .soc-button {1076 margin:4px 0 0 0;1077 float:right;1078 }1079 .full-left .soc-button {1080 float:left;1081 clear:both;1082 margin:15px 0 0 0;1083 }1084 .google-plus iframe {1085 width:92px !important;1086 }1087 .twit iframe {1088 width:122px !important;1089 }1090 .soc-button div {1091 float:left;1092 display:inline-block;1093 }1094 .full-left .soc-button div {1095 display:block;1096 float:none;1097 margin:0 0 4px 0;1098 }1099 .facebook {1100 margin:-1px 0 0 0;1101 }1102 .fb_share_count_hidden .fb_share_count_nub_top, .fb_share_count_hidden .fb_share_count_top, .fb_share_count_hidden .fb_share_count_nub_right, .fb_share_count_hidden .fb_share_count_right {1103 visibility:visible !important;1104 }1105 .fb_share_size_Small {1106 margin:3px 0 0 0;1107 float:right;1108 }1109 .fb_share_no_count {1110 display:inline-block !important;1111 }1112 .fb_share_count_nub_right {1113 margin:0px 2px 0 0 !important;1114 }1115 1116 .alignleft {1117 float:left;1118 margin:5px 20px 15px 0;1119 }1120 .alignleft.caption{1121 padding: 5px 5px 0px;1122 width: 202px;1123 font-size:11px;1124 line-height:20px;1125 text-decoration:none;1126 }1127 .alignright {1128 float:right;1129 margin:5px 0px 15px 20px;1130 }1131 .alignnone {1132 float:none;1133 } 1134 .alignleft, .alignright, .aligncenter, .alignnone {1135 padding:4px;1136 font-size:0;1137 line-height:0;1138 position:relative;1139 display:block;1140 }1141 1142 1143 .about-autor, .related-post {1144 padding:0 0 29px 0;1145 margin:6px 0 29px 0;1146 overflow:hidden;1147 }1148 .about-autor {1149 padding:6px 0 29px 0;1150 }1151 1152 .related-post {1153 padding:0 0 34px 0;1154 margin:0 0 29px 0;1155 }1156 .autor-head {1157 font-weight:bold;1158 margin:0 0 0px 0;1159 }1160 .type-post {1161 margin:10px 0 6px;1162 padding:4px 0 0px 0;1163 clear:both;1164 }1165 .type-post.first{1166 background:none;1167 margin:1px 0 10px;1168 padding:0px 0 15px 0;1169 }1170 .type-post a {1171 background-position:0 2px;1172 background-repeat:no-repeat;1173 padding:1px 0 5px 25px;1174 text-decoration:none;1175 display:block;1176 position:relative;1177 float:left;1178 }1179 .post a:hover, #footer .post a:hover, .type-post a:hover {1180 text-decoration:underline;1181 }1182 .goto-post a{1183 float:left;1184 }1185 .type-post a.post-status, .post a.status {1186 background-image:url(../images/post-type/type-status.png);1187 }1188 .type-post a.post-photo, .post a.photo {1189 background-image:url(../images/post-type/type-photo.png);1190 }1191 .type-post a.post-video, .post a.video {1192 background-image:url(../images/post-type/type-video.png);1193 }1194 .type-post a.post-common, .post a.common {1195 background-image:url(../images/post-type/type-common.png);1196 }1197 .type-post a.post-quote {1198 background-image:url(../images/post-type/type-quota.png);1199 }1200 .type-post a.comments, .type-post a.likes {