SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html>2<html class="no-js" lang="en">3 <!--<![endif]-->4 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->5 <!--[if lt IE 9]>6 7 <![endif]-->8 <head>9 <style>10 /*11Librivox styles 12Author: Nudge Design13Author URI: http://nudgedesign.ca14Version: 1.015License: GNU General Public License16License URI: http://www.gnu.org/licenses/gpl-2.0.html17Description: Librivox redesign 2013 styles18 19*/20 21 22/************************************************************** 23* icon fonts24**************************************************************/25 26@charset "UTF-8";27 28@font-face {29 font-family: "librivox";30 src:url("../type/librivox.eot");31 src:url("../type/librivox.eot?#iefix") format("embedded-opentype"),32 url("../type/librivox.ttf") format("truetype"),33 url("../type/librivox.svg#librivox") format("svg"),34 url("../type/librivox.woff") format("woff");35 font-weight: normal;36 font-style: normal;37 38}39[data-icon]:before {40 font-family: "librivox";41 content: attr(data-icon);42 font-style: normal;43 font-weight: normal;44 font-variant: normal;45 text-transform: none !important;46 speak: none;47 display: inline-block;48 text-decoration: none;49 width: 1em;50 line-height: 1em;51 -webkit-font-smoothing: antialiased;52}53 54[class^="icon-"]:before,55[class*=" icon-"]:before {56 font-family: "librivox";57 font-style: normal;58 font-weight: normal;59 font-variant: normal;60 text-transform: none !important;61 speak: none;62 display: inline-block;63 text-decoration: none;64 width: 1em;65 line-height: 1em;66 -webkit-font-smoothing: antialiased;67} 68 69 70 71/************************************************************** 72* Reset73**************************************************************/74 75html, body, div, span, applet, object, iframe,76h1, h2, h3, h4, h5, h6, p, blockquote, pre,77a, abbr, acronym, address, big, cite, code,78del, dfn, em, font, ins, kbd, q, s, samp,79small, strike, strong, sub, sup, tt, var,80dl, dt, dd, ol, ul, li,81fieldset, form, label, legend,82table, caption, tbody, tfoot, thead, tr, th, td {83 border: 0;84 font-size: 100%;85 margin: 0;86 outline: 0;87 padding: 0;88 vertical-align: baseline;89} 90 91/* Paul Irish's box model http://paulirish.com/2012/box-sizing-border-box-ftw/ */92* { 93 -moz-box-sizing: border-box; 94 -webkit-box-sizing: border-box; 95 box-sizing: border-box; 96}97 98html {99 font-size: 100%; 100 overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */101 -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */102 -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */103}104body {105 background: #fff;106 color: #333;107 font: 1em/1.4em Arial, "Helvetica Neue", Helvetica, sans-serif; 108}109body, html {110 height: 100%;111 112}113article,114aside,115details,116figcaption,117figure,118footer,119header,120hgroup,121nav,122section {123 display: block;124}125 126blockquote { 127 font-style: italic;128 font-size: 0.875em ;129}130blockquote:before {131 content:"\201C";132 font-size:3em;133 line-height:.1em;134 margin-right:.25em;135 vertical-align:-0.4em;136}137blockquote p { 138 padding: 0 15px 15px 25px;139 margin-top: -1em;140}141ul {142 padding-left: 20px;143}144ul, ol, p, dl, table {145 margin-bottom: 20px;146}147ul ul, 148ol ol {149 margin-left: 10px;150}151dt {152 font-weight: 600;153}154dd {155 margin-bottom: 10px;156}157a {158 color: #2e6d7d;159 text-decoration: none;160 -webkit-transition: color 0.3s linear;161 -moz-transition: color 0.3s linear;162 -o-transition: color 0.3s linear;163 transition: color 0.3s linear;164}165a:focus {166 outline: thin dotted;167}168a:hover,169a:active { 170 outline: 0;171 text-decoration: underline;172}173 174a img {175 border: 0;176}177 178/* Text meant only for screen readers */179.assistive-text {180 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */181 clip: rect(1px, 1px, 1px, 1px);182 position: absolute !important;183}184.clear {185 clear: both;186}187 188/************************************************************** 189* Headers 190**************************************************************/191 192h1, h2, h3, h4, h5, h6 {193 font-weight: normal;194 line-height: 1em;195 margin-bottom: 15px; 196}197h1 {198 font-size: 1.375em; /* 22/16 */199 200}201h2 {202 font-size: 1.25em; /* 20/16 */203}204h3 {205 font-size: 1.125em; /* 18/16 */ 206}207h4 {208 font-size:1em;209}210h5 {211 font-size:0.875em; /* 14/16 */212 margin-bottom: 5px; 213}214h6 {215 font-size:0.875em; /* 14/16 */216 margin-bottom: 5px; 217}218img {219 max-width: 100%;220 height: auto;221}222 223.clearfix:after {224 visibility: hidden;225 display: block;226 font-size: 0;227 content: " ";228 clear: both;229 height: 0;230 }231* html .clearfix { zoom: 1; } /* IE6 */232*:first-child+html .clearfix { zoom: 1; } /* IE7 */233 234 235/************************************************************** 236* Common Styles237**************************************************************/238.site-header,239.main-menu,240.main-content,241.statistics,242.footer {243 margin: auto;244 max-width: 960px;245 overflow: hidden;246 padding: 20px 0;247 width: 100%; 248}249.main-content {250 margin: 45px auto;251 padding: 0;252}253.sidebar {254 float: left;255 margin-right: 3.125%;256 width: 25%;257}258.size {259 color: #8f8d8d;260 font-size: 0.857em; /* 12/14 */261}262.last-name {263 text-transform: uppercase;264}265/************************************************************** 266* Header section267**************************************************************/268.header-wrap {269 background-color: #f8f8f5;270 padding: 10px 0 0;271}272.site-header,273.main-menu {274 padding: 0;275 overflow: hidden;276}277.logo-wrap {278 float: left;279 margin-top: 45px;280 width: 60%;281}282.logo {283 font-size: 4em;284 line-height: 1em; 285 margin-bottom: 0;286}287.logo a {288 color: #333;289}290.logo a:hover {291 text-decoration: none;292}293.tagline {294 font-size: 0.875em; /* 14 / 16*/ 295}296.sub-menu {297 float: right;298 font: 0.875em "Helvetica Neue", Helvetica, Arial, sans-serif; /* 14/16 */299}300.sub-menu-list {301 display: inline-block;302 list-style: none;303}304.sub-menu-list li {305 border-right: 1px solid #333;306 float: left;307}308.sub-menu-list li:nth-of-type(4){309 border-right: none;310}311.sub-menu-list li a {312 color: #000;313 display: block;314 padding: 0 10px;315}316.sub-menu-list li.twitter,317.sub-menu-list li.facebook,318.sub-menu-list li.rss {319 background: url(../images/sprite.png) 0 2px no-repeat;320 border-right: none;321 margin-left: 10px;322 overflow: hidden;323 text-indent: 100%; 324 width: 21px; 325 height: 16px; 326 white-space: nowrap;327}328.sub-menu-list li.facebook {329 background-position: -100px 0;330 height: 18px;331 margin-left: 15px; 332}333.sub-menu-list li.rss {334 background-position: -200px 0;335 height: 17px;336 margin-left: 15px; 337}338.main-menu-wrap h3 {339 font-size: 0.75em; /* 12/16 */340 font-weight: bold;341 margin: 20px 0 5px;342 text-transform: uppercase;343}344.main-menu-list-wrap,345.search-filter-wrap {346 overflow: hidden;347}348.main-menu-list {349 float: left;350 list-style: none;351 margin-bottom: 0;352 padding: 0;353 width: 100%;354}355.main-menu-list li {356 background-color: #d5ebf1;357 border-right: 1px solid #f8f8f5;358 float: left;359 text-align: center;360 width: 25%;361}362.main-menu-list li:last-child {363 border-radius: none;364}365.main-menu-list a {366 color: #2e6d7d;367 display: block;368 font-size: 0.875em;369 padding: 10px 0 ; 370}371.search-filter a {372 padding: 9px 15px 5px;373}374.main-menu-list a:hover,375.main-menu-list a:active,376.main-menu-list a.active,377.main-menu-list a.current-page {378 background-color: #fff;379 text-decoration: none;380}381.search-wrap{382 clear: right;383 float: right;384 margin-top: 40px;385}386.searchform input.field {387 background-color: #fff;388 border-radius: 4px 0 0 4px;389 border: 1px solid #d5d4d4;390 border-width: 1px 0 1px 1px;391 font-size: .875em;392 float: left;393 padding-left: 5px;394 width: 250px;395 height: 35px;396 -moz-appearance: none;397 -webkit-appearance: none;398 box-shadow: none399}400#searchsubmit {401 background: #fff url(../images/sprite.png) 5px -395px no-repeat;402 border: 1px solid #d5d4d4;403 border-width: 1px 1px 1px 0;404 border-radius: 0 4px 4px 0;405 cursor: pointer;406 height: 35px;407 float: left; 408 text-indent: -9999px;409 width: 35px; 410}411.advanced-search {412 font-size: 0.6875em; /* 11/16 */413}414/************************************************************** 415* Icons416**************************************************************/417.author-icon,418.genre-icon,419.language-icon,420.reader-icon,421.title-icon {422 background: url(../images/icons.png) 0 4px no-repeat;423 display: inline-block;424 height: 24px;425 margin-right: 5px;426 vertical-align: bottom;427 width: 12px;428}429.genre-icon {430 background-position: 0 -98px;431 width: 10px; 432}433.language-icon {434 background-position: 0 -198px; 435 width: 16px;436}437.reader-icon {438 background-position: 0 -297px; 439 width: 26px;440}441.title-icon {442 background-position: 0 -395px;443 width: 20px;444}445.browse-list .author-icon,446.browse-list .genre-icon,447.browse-list .language-icon,448.browse-list .reader-icon,449.browse-list .title-icon {450 display: block;451 margin: auto;452}453 454/************************************************************** 455* Sort Menus/Book Sidebar456**************************************************************/457.sort-menu {458 float: right;459}460.sort-menu p {461 float: left;462 font-size: 0.8125em; /* 13/16 */463 font-weight: bold;464 margin-bottom: 0;465 margin-right: 10px;466}467.sort-type,468.book-page-sidebar {469 font-size: 0.8125em; /* 13/16 */470}471.book-page-sidebar {472 margin-bottom: 20px;473}474.sort-type h4,475.book-page-sidebar h4 {476 border: 1px solid #eaeadb;477 border-width: 1px 0;478 font-weight: bold;479 margin-bottom: 2px;480 padding: 5px 2px;481}482.book-page-sidebar h4 {483 margin-bottom: 10px;484}485.book-download-btn {486 background-color: #609A41;487 border-radius: 2px 2px 2px 2px;488 color: #FFFFFF;489 display: inline-block;490 font-weight: bold;491 margin-bottom: 10px;492 padding: 3px 10px;493 text-align: center;494 width: 80px;495}496a:hover.book-download-btn {497 background-color: #83b16a;498 text-decoration: none;499}500.book-page-sidebar p {501 margin-bottom: 0;502}503.book-page-sidebar dt {504 float: left;505 font-weight: normal;506 width: 50%;507}508.book-page-sidebar dd {509 float: left;510 margin-bottom: 0;511 padding-left: 5px;512 width: 50%;513}514.sort-type ul {515 list-style: none;516 padding-left: 0;517}518.sort-type ul a {519 color: #333;520 display: block; 521 list-style: none;522 padding-left: 20px; 523 width: 100%;524}525.sort-type ul a:hover {526 background-color: #f8f8f5;527 text-decoration: none; 528}529.sort-type ul a.selected {530 background-color: #f8f8f5;531 color: #2e6d7d;532 font-weight: bold;533} 534 535/************************************************************** 536* Browse Main Styles537**************************************************************/538.browse,539.page {540 float: left;541 max-width: 690px;542 width: 71.875%;543}544.browse-header-wrap,545.page-header-wrap {546 margin-bottom: 10px;547 overflow: hidden;548}549.browse-header {550 margin-bottom: 10px;551}552.browse-header-wrap .browse-header {553 float: left;554 margin-bottom: 0;555 width: 50%; 556}557.browse-header span {558 font-weight: bold; 559}560.browse-list {561 list-style: none;562 padding-left: 0;563 height: 100%;564 min-height: 100%; 565}566.catalog-result {567 background-color: #f8f8f5;568 border-radius: 4px;569 display: table;570 height: 75px;571 margin-bottom: 5px;572 position: relative;573 width: 100%;574}575.catalog-result.all {576 background: #f3f3e9; 577}578 579.catalog-result:hover.all {580 background-color: #eaeadb;581}582.catalog-result:hover {583 background: #f3f3e9;584 -webkit-transition: background-color 0.3s linear;585 -moz-transition: background-color 0.3s linear;586 -o-transition: background-color 0.3s linear;587 transition: background-color 0.3s linear; 588}589.catalog-type {590 background-color: #d5ebf1;591 border-radius: 4px 0 0 4px; 592 color: #2e6d7d;593 display: table-cell;594 font-size: 0.6875em; /* 11/16 */ 595 max-width: 65px;596 width: 9.5%;597 text-align: center;598 vertical-align: middle;599}600.book-cover,601.result-data {602 float: left;603 margin: 10px 0 10px 5px;604 line-height: 1;605}606.book-cover,607.book-cover img {608 border-radius: 4px;609}610.result-data {611 margin: 10px 10px 10px 20px;612 max-width: 430px;613 width: 63%; 614}615.result-data h3 {616 font-size: 0.9375em; /* 15/16 */617 font-weight: bold;618 margin-bottom: 5px;619 line-height: 1.2; 620}621.browse-genre .result-data h3 {622 font-weight: normal;623}624.browse-genre .result-data h3 span {625 font-weight: bold;626}627.book-author {628 font-size: 0.8125em; /* 13/16 */ 629 margin-bottom: 7px;630}631.dod-dob {632 color: #333;633 font-size: 0.6875em ; /* 11/16 */634 font-style: italic;635 font-weight: normal;636}637.native-lang {638 font-size: 0.8125em; /* 13/16 */639 line-height: 1;640 margin: -2px 0 5px 0;641}642.book-meta {643 color: #666;644 font-size: 0.6875em; /* 11/16 */645 margin-bottom: 0;646}647.book-meta span {648 font-weight: bold;649}650.download-btn {651 float: right;652 margin: 15px 15px 0 0; 653 text-align: center;654}655.download-btn span {656 display: block;657 font-size: 0.6875em; /* 11/16 */ 658}659.download-btn a {660 background-color: #609a41;661 border-radius: 2px;662 color: #fff;663 display: block;664 font-size: 0.75em; /* 12/16 */665 font-weight: bold;666 padding: 3px 10px;667 668}669.download-btn a:hover {670 background-color: #83b16a ;671 text-decoration: none;672}673.more-result {674 float: right;675 background: url(../images/sprite.png) -200px -400px;676 margin-top: -17.5px;677 overflow: hidden;678 position: absolute;679 top:50%;680 right: 0;681 text-indent: 100%; 682 width: 50px; 683 height: 35px; 684 white-space: nowrap;685}686.all .more-result {687 background-position: -200px -300px;688}689 690/************************************************************** 691* Reader page/Author page692**************************************************************/693.content-wrap {694 background-color: #f8f8f5;695 border-radius: 4px;696 border: 1px solid #eaeadb;697 font-size: 0.875em;698 margin-bottom: 20px;699 padding: 17px;700}701.content-wrap h1 {702 font-size: 1.2857em; /* 18/14 */703 font-weight: bold;704 margin-bottom: 10px;705}706.content-wrap h1 span {707 font-size: 0.667em; /* 12/18 */708 font-style: italic;709 font-weight: normal;710}711.page-header-half {712 float: left;713 width: 50%;714}715.content-wrap p {716 margin-bottom: 0;717}718.content-wrapp span {719 font-weight: bold;720}721p.description {722 line-height: 1.4;723 margin-bottom: 15px;724}725 726/************************************************************** 727* Book page728**************************************************************/729.book-page h1 {730 margin-bottom: 5px;731}732p.book-page-author {733 font-size: 1.07em; /* 15/14 */734 margin-bottom: 15px;735}736.book-page .description p {737 margin-bottom: 15px;738}739.book-page-book-cover {740 float: right;741 margin: 0 0 20px 20px;742}743.book-page-genre span {744 font-weight: bold;745}746.book-page-chapters a {747 font-weight: bold;748}749.download-cover {750 display: block;751 font-size: 0.875em;752 text-align: center;753}754 755/* Chaper Download table */756.chapter-download,757.table-list { 758 border-collapse:separate;759 border-spacing:0 5px;760 font-size: 0.875em; /* 12/16 */761 margin-bottom: 30px; 762 text-align: left;763 width: 100%;764}765.chapter-download thead tr,766.table-list thead tr {767 color: #2e6d7d;768 font-size: 11px;769 text-transform: uppercase;770}771.chapter-download thead th,772.table-list thead th {773 background-color: #D5EBF1;774 padding: 10px 0 7px 10px;775}776.chapter-download tr td:first-child,777.chapter-download tr th:first-child,778.table-list tr td:first-child,779.table-list tr th:first-child {780 border-radius: 4px 0 0 4px;781 background-color: #D5EBF1;782 width: 55px;783}784.table-list tr td:first-child {785 background-color: #f8f8f5; 786}787.chapter-download tr td:last-child,788.chapter-download tr th:last-child,789.table-list tr td:last-child,790.table-list tr th:last-child {791 border-radius: 0 4px 4px 0;792}793.chapter-download a,794.table-list a {795 font-weight: bold;796}797.chapter-download td,798.table-list td {799 background-color: #f8f8f5; 800 padding: 15px 10px;801}802.play-btn {803 background: url(../images/sprite.png) -200px -200px no-repeat;804 display: block;805 margin-left: 10px;806 overflow: hidden;807 text-indent: 100%; 808 width: 13px; 809 height: 19px; 810 white-space: nowrap;811}812/************************************************************** 813* Table list814**************************************************************/815.table-list {816 table-layout: fixed;817}818.table-list tbody {819 font-size: 0.875em;820}821.table-list thead th {822 line-height: 1.2em;823 padding: 7px;824 vertical-align: bottom;825}826.table-list.reader-view tr td:first-child,827.table-list.reader-view tr th.first,828.table-list.reader-view th.assigned, 829.table-list.pl-view tr th.first {830 width: 15%;831}832.tabs {833}834.tab-btn {835 background-color: #528F9E;836 border-radius: 4px;837 color: #fff;838 font-size: 0.75em;839 font-weight: bold;840 margin-right: 5px;841 padding: 5px 12px;842}843a:hover.tab-btn {844 background-color: #D5EBF1;845 color: #2E6D7D;846 text-decoration: none;847}848.tab-btn.selected {849 background-color: #D5EBF1;850 color: #2E6D7D;851 padding: 5px 12px 14px;852}853 854/************************************************************** 855* Advanced Search856**************************************************************/857.advanced-search-inner {858 background-color: #f8f8f5;859 border-radius: 4px;860 border: 1px solid #eaeadb;861 font-size: 0.9em;862 max-width: 800px;863 padding: 30px 30px 15px;864 margin: auto;865 width: 100%;866}867.control-group {868 margin-bottom: 15px;869 overflow: hidden;870}871.advanced-search-form label span {872 float: left;873 width: 30%;874}875.advanced-search-form input {876 background-color: #fff;877 border-radius: 4px 0 0 4px;878 border: 1px solid #d5d4d4;879 display: block; 880 margin-left: 30%;881 max-width: 500px;882 padding-left: 5px;883 width: 70%;884 height: 32px; 885} 886#exact_match {887 width: auto;888}889.buttons {890 margin: 20px auto 0;891 max-width: 160px;892 overflow: hidden;893 text-align: center;894 width: 40%;895}896.advanced-search-form .btn {897 background-color: #609a41;898 border: none; 899 border-radius: 2px;900 color: #fff;901 cursor: pointer;902 display: block;903 float: left;904 font-size: 0.9em;905 font-weight:bold;906 display: block;907 margin-right: 10px;908 padding: 5px 10px;909}910.advanced-search-form .btn.reset {911 background-color: #528f9e;912}913 914.advanced-search-form .btn:hover {915 background-color: #83b16a ;916}917 918/************************************************************** 919* Sidebar920**************************************************************/921.disclaimer {922 background-color: #f8f8f5;923 border-radius: 4px;924 border: 1px solid #eaeadb;925 color: #535353;926 font-size: 0.75em; /* 12/16 */927 line-height: 1.4em;928 margin-bottom: 20px;929 padding: 10px;930}931.thank-reader,932.donate {933 background-color: #f0f8df;934 border-radius: 2px; 935 color: #609a41;936 display: block;937 font-size: 0.75em; /* 12/16 */938 font-weight:bold;939 display: block;940 margin-bottom: 10px;941 padding: 2px 5px;942}943.thank-reader {944 background-color: #d5ebf1;945 color: #2e6d7d; 946}947.thank-reader span,948.donate span {949 background: url(../images/sprite.png) 0 -100px no-repeat;950 float: right;951 height: 12px;952 margin-top: 5px;953 width: 10px;954}955.thank-reader span {956 background-position: -100px -100px; 957}958a:hover.thank-reader,959a:hover.donate {960 color: #fff;961 background-color: #83b16a;962 text-decoration: none;963}964a:hover.thank-reader {965 background-color: #528F9E;966 color: #fff;967}968a:hover.thank-reader span,969a:hover.donate span {970 background: url(../images/sprite.png) 0 -200px no-repeat;971}972 973/************************************************************** 974* Page navigation975**************************************************************/976.page-number {977 color: #666;978 font-size: 0.75em; /* 12/16 */979 margin: 0 3px;980 padding: 5px 7px;981}982.page-number.active,983.page-number:hover {984 background: #528f9e;985 border-radius: 4px;986 color: #fff;987 text-decoration: none;988}989 990/************************************************************** 991* Footer992**************************************************************/993.footer-wrap {994 background-color: #798086;995 color: #fff;996 font-size: 0.875em; /* 14/16 */997 overflow: hidden;998}999 1000/************************************************************** 1001* Temp Fix 1002**************************************************************/1003.white {1004 background-color:#FFF !important;1005}1006 1007/************************************************************** 1008* Media queries for responsive design1009* These follow after primary styles so they will successfully override. 1010**************************************************************/1011 1012@media screen and (max-width: 960px) { 1013 .header-wrap {1014 padding: 10px 20px 40px;1015 }1016 .logo-wrap {1017 width: 40%;1018 }1019 .main-content,1020 .home .main-content {1021 padding: 0 20px 50px;1022 }1023 .statistics-wrap,1024 .footer-wrap {1025 padding: 0 20px;1026 } 1027} 1028@media screen and (max-width: 960px) { 1029 .header-wrap {1030 padding-bottom: 20px;1031 }1032 .main-content {1033 margin-top: 20px;1034 } 1035 .sidebar,1036 .browse,1037 .page {1038 clear: both;1039 float: none;1040 width: 100%;1041 max-width: inherit;1042 }1043 .sort-type,1044 .donate,1045 .thank-reader,1046 .book-page-sidebar {1047 width: 48%;1048 float: left;1049 margin-right: 2%;1050 margin-bottom: 20px;1051 }1052 .disclaimer {1053 clear: both;1054 min-height: 40px;1055 padding: 20px 10px;1056 }1057 1058} 1059@media screen and (max-width: 660px) { 1060 .site-header, .main-menu {1061 clear: both;1062 overflow: visible; 1063 position: relative; 1064 }1065 .main-small-navigation .sub-menu-list{1066 display: none;1067 }1068 .sub-menu {1069 float: none;1070 position: absolute;1071 top: 5px;1072 right: 0;1073 width: 100px;1074 z-index: 10;1075 }1076 1077 .icon-fontawesome-webfont:before {1078 content: "c";1079 }1080 .sub-menu h1 {1081 cursor: pointer;1082 font-size: 2em;1083 margin-bottom: 0;1084 text-align: right;1085 }1086 .sub-menu h1 span {1087 display: block; 1088 overflow: hidden;1089 text-indent: 100%; 1090 width: 1px; 1091 height: 1px; 1092 white-space: nowrap;1093 }1094 .sub-menu-list li {1095 background-color: #fff;1096 border-bottom: 1px solid #eee;1097 border-right: none; 1098 float: none;1099 padding: 5px 10px;1100 }1101 .sub-menu-list li.twitter, .sub-menu-list li.facebook, .sub-menu-list li.rss {1102 background: none;1103 background-color: #fff;1104 margin-left: 0;1105 overflow: visible;1106 text-indent: 0;1107 width: 100%;1108 height: auto;1109 }1110 .sub-menu-list li:hover {1111 background-color: #F4f4f4;1112 }1113 .sub-menu-list li a:hover {1114 text-decoration: none;1115 }1116 .search-wrap {1117 clear: none;1118 float: none;1119 margin: 0;1120 position: absolute;1121 left: 0;1122 top: 5px;1123}1124 .sub-menu-list {1125 padding-left: 0;1126 }1127 .logo-wrap {1128 margin: 65px 0 30px;1129 text-align: center;1130 width: 100%;1131 }1132 .searchform input.field {1133 max-width: 225px;1134 }1135}1136@media screen and (max-width: 580px) { 1137 .header-wrap {1138 overflow: hidden;1139 }1140 .logo-wrap {1141 margin-bottom: 0;1142 }1143 .main-menu-wrap,1144 .sidebar .donate,1145 .sidebar .thank-reader,1146 .sidebar .disclaimer {1147 display: none;1148 }1149 .main-content {1150 position: relative;1151 }1152 .sidebar.book-page {1153 min-height: 500px;1154 position: absolute;1155 bottom: 0;1156 left: 20px;1157 }1158 .page.book-page {1159 margin-bottom: 29em;1160 }1161 1162 .search-wrap {1163 width: 80%;1164 }1165 .searchform input.field {1166 width: 80%;1167 }1168 .advanced-search {1169 clear: both;1170 display: block;1171 }1172 .catalog-result {1173 margin-bottom: 10px;1174 }1175 .book-cover {1176 margin-right: 2%;1177 width: 15%;1178 }1179 .result-data {1180 margin: 10px 1% 10px 0;1181 max-width: inherit;1182 width: 80%;1183 }1184 .download-btn {1185 clear: both;1186 float: none;1187 margin: auto;1188 width: 75%; 1189 }1190 .download-btn a {1191 padding: 5px 10px; 1192 }1193 .main-menu-list {1194 float: none;1195 }1196 .main-menu-list li {1197 float: none;1198 text-align: left;1199 width: inherit;1200 }