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 lang="en">3 <head>4 <meta charset="utf-8">5 <!--[if lt IE 9]>6 7 <![endif]-->8 <title>9 Mission Concepcion 4 - San Antonio, Texas | San Antonio | Images from Texas10 </title>11 <meta content="A full moon rises over San Antonio's Mission Concepcion, just south of downtown. As part of the National Historic Park system, this mission is the best perserved despite being nearly 300 years old..." name="description">12 <meta content="WideRange Galleries 5.9" name="generator">13 <meta content="Rob Greebon" name="copyright">14 <meta content="initial-scale=1.0, width=device-width" name="viewport">15 <meta content="" property="og:image">16 <meta content="image/jpeg" property="og:image:type">17 <meta content="1200" property="og:image:width">18 <meta content="960" property="og:image:height">19 <meta content="" property="og:url">20 <meta content="Mission Concepcion 4 - San Antonio, Texas | San Antonio" property="og:title">21 <meta content="A full moon rises over San Antonio's Mission Concepcion, just south of downtown. As part of the National Historic Park system, this mission is the best perserved despite being nearly 300 years old..." property="og:description">22 <meta content="Images from Texas" property="og:site_name">23 <meta content="summary_large_image" name="twitter:card">24 <style>25 @font-face {26 font-family: 'Droid Serif';27 font-style: normal;28 font-weight: 400;29 font-display: swap;30 src: url(https://fonts.gstatic.com/s/droidserif/v19/tDbI2oqRg1oM3QBjjcaDkNr6.ttf) format('truetype');31}32@font-face {33 font-family: 'Droid Serif';34 font-style: normal;35 font-weight: 700;36 font-display: swap;37 src: url(https://fonts.gstatic.com/s/droidserif/v19/tDbV2oqRg1oM3QBjjcaDkOJGiSD8.ttf) format('truetype');38}39@font-face {40 font-family: 'Lato';41 font-style: normal;42 font-weight: 300;43 font-display: swap;44 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USew8.ttf) format('truetype');45}46@font-face {47 font-family: 'Lato';48 font-style: normal;49 font-weight: 400;50 font-display: swap;51 src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHvxk.ttf) format('truetype');52}53 54 55 56/* avoid browser default inconsistent heading font-sizes */57/* and pre/code too */58h1,h2,h3,h4,h5,h6,pre,code {59 font-size: 1em;60}61/* remove the inconsistent (among browsers) default ul,ol padding or margin */62/* the default spacing on headings does not match nor align with63 normal interline spacing at all, so let's get rid of it. */64/* zero out the spacing around pre, form, body, html, p, blockquote as well */65/* form elements are oddly inconsistent, and not quite CSS emulatable. */66/* nonetheless strip their margin and padding as well */67/* ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { */68h1,h2,h3,h4,h5,h6,pre,form,body,html,p,fieldset,input,figure,figcaption {69 margin: 0;70 padding: 0;71}72figure {73 margin-before: 0;74 margin-after: 0;75 margin-start: 0;76 margin-end: 0;77}78/* whoever thought blue linked image borders were a good idea? */79a img,:link img,:visited img, img {80 border: none;81}82a:hover {83 cursor: pointer;84}85/* Make HTML 5 elements display block-level for consistent styling */86header, nav, article, main, footer, address, figure, figcaption {87 display: block;88}89html {90 font-size: 62.5%;91 -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */92 scroll-behavior: smooth;93}94a {95 outline: none;96}97/* prevent html5 strict doctype img spaces under images */98img {99 vertical-align: bottom;100 height: auto;101}102/* set a standard bottom margin on common html elements and others */103p,104h1, h2, h3, h4, h5, h6,105.galleryParagraph,106.pageNav,107.pageNav1,108.photoCaption,109.photoGals,110.photoRelated {111 margin-bottom: 12px;112 margin-bottom: 1.2rem;113}114/* all cleared elements */115.clear,116h1,117footer,118.galleryParagraph,119.newsHeader,120.pageNav,121.photoActions,122.submenusIntro {123 clear: both;124}125/* images 100% */126figure, .img, .imgLarge, .main img {127 max-width: 100%;128}129.img,130.imgLarge,131.content figure img,132.galleryParagraph figure img {133 -moz-box-sizing: border-box;134 -webkit-box-sizing: border-box;135 box-sizing: border-box;136}137 138/* ===================== SEARCH ============================ */139 140.searchBkg {141 margin-top: 40px;142 margin-top: 4rem;143}144.searchBkg li, .searchBkg ul {145 list-style: none;146 margin: 0;147 padding: 0;148 text-align: left;149}150.searchBkg ul {151 margin: 0 40px 40px 0;152 margin: 0 4rem 4rem 0;153 float: left;154}155.searchBkg li ul {156 margin: 0;157 float: none;158}159.searchBkg li li {160 padding-left: 20px;161 padding-left: 2rem;162 padding-top: 10px;163 padding-top: 1rem;164 border-top: 1px solid #1E1E1C;165 margin-top: 10px;166 margin-top: 1rem;167}168.searchBkg li li li {169 border: none;170 padding-top: 0;171 margin: 0;172}173 174/* ===================== BLOG =============================== */175 176.categoriesMenu,177.categoriesSpan {178 white-space: nowrap;179}180.categoriesSelect {181 max-width: 200px;182 max-width: 20rem;183}184.galNavShell {185 padding: 10px 0;186 padding: 1rem 0;187 margin-top: 40px;188 margin-top: 4rem;189}190.galNavLinks {191 width: 100%;192}193.galNavLeft {194 max-width: 48%;195 float: left;196 padding-right: 10px;197 padding-right: 1rem;198 text-align: left;199}200.galNavRight {201 max-width: 48%;202 float: right;203 text-align: right;204 padding-left: 10px;205 padding-left: 1rem;206 text-align: right;207}208.journalMenuTiled .captionTeaser {209 margin-top: 10px;210 margin-top: 1rem;211}212.menuContent .captionDate {213 margin-bottom: 12px;214 margin-bottom: 1.2rem;215}216.pageNav1 {217 line-height: 2;218}219.subtitle {220 margin-top: -12px;221 margin-top: -1.2rem;222 margin-bottom: 24px;223 margin-bottom: 2.4rem;224}225.tagline {226 clear: both;227 margin-top: 60px;228 margin-top: 6rem;229}230.relatedGals {231 margin-top: 100px;232 margin-top: 10rem;233}234.relatedGal {235 display: inline-block;236 vertical-align: top;237}238.relatedText {239 margin-top: 10px;240 margin-top: 1rem;241}242.wg-comments {243 clear: both;244 padding-top: 100px;245 padding-top: 10rem;246 margin-bottom: 60px;247 margin-bottom: 6rem;248}249 250/* ===================== REDACTOR CONTENT & PHOTOS ============================ */251 252.content h1,253.linkCat {254 clear: both;255 margin-top: 40px;256 margin-top: 4rem;257}258.content h1:first-of-type,259.linkCat:first-of-type {260 margin-top: 0;261}262.content h2,263.content h3,264.content h4,265.content h5,266.content h6 {267 clear: none;268 text-align: left;269 margin-top: 24px;270 margin-top: 2.4rem;271}272.content li {273 text-align: left !important;274}275.content > ol,276.content > ul,277.content div > ol,278.content div > ul {279 padding-left: 1em;280}281/*.content p {282 text-align: left;283}*/284.content figcaption {285 font-style: italic;286 margin-top: 12px;287 margin-top: 1.2rem;288 padding-left: 12px;289 padding-left: 1.2rem;290 padding-right: 12px;291 padding-right: 1.2rem;292}293.content figcaption h1,294.content figcaption h2,295.content figcaption h3,296.content figcaption h4,297.content figcaption h5,298.content figcaption h6 {299 font-style: normal;300}301.content figcaption .photoTitle {302 margin: 16px 0 -6px 0;303 margin: 1.6rem 0 -0.6rem 0;304}305.content figcaption .photoLocation,306.content figcaption .photoCaption {307 margin-top: 12px;308 margin-top: 1.2rem;309}310.content figcaption .printsLink {311 /*margin-top: -6px !important;312 margin-top: -0.6rem !important;*/313 margin-top: 8px;314 margin-top: 0.8rem;315}316.image-full {317 margin-top: 40px;318 margin-top: 4rem;319 margin-bottom: 40px;320 margin-bottom: 4rem;321 clear: both;322}323.footerCell .image-full,324.footerCell .image-full img {325 margin-top: 10px;326 margin-top: 1rem;327 margin-bottom: 20px;328 margin-bottom: 2rem;329 max-width: 100%;330 margin-left: 0;331 -webkit-transform: none;332 -moz-transform: none;333 -ms-transform: none;334 -o-transform: none;335 transform: none;336}337.image-center {338 margin-left: auto;339 margin-right: auto;340}341.image-left {342 float: left;343 max-width: 55%;344 margin: 0 20px 20px 0 !important;345 margin: 0 2rem 2rem 0 !important;346}347.image-right {348 float: right;349 max-width: 55%;350 margin: 0 0 20px 20px !important;351 margin: 0 0 2rem 2rem !important;352}353.image-center img,354.image-left img,355.image-right img {356 max-width: 100% !important;357 height: auto !important;358}359.image-resized {360 margin-bottom: 20px;361 margin-bottom: 2rem;362}363.video-container {364 overflow: hidden;365 padding-bottom: 56.25%;366 position: relative;367 height: 0;368 margin-top: 40px;369 margin-top: 4rem;370 margin-bottom: 40px;371 margin-bottom: 4rem;372 clear: both;373}374.video-container iframe {375 left: 0;376 top: 0;377 height: 100%;378 width: 100%;379 position: absolute;380}381 382/* ===================== SLIDESHOWS ============================= */383 384.fotorama img {385 -moz-box-sizing: border-box;386 -webkit-box-sizing: border-box;387 box-sizing: border-box;388}389.fotorama__html div,390.fotorama__html a {391 display: block;392 height: 100%;393 /* Transparent links are not clickable in IE,394 but non-existent background fixes this.395 (Put an empty 1Ã1 image here to avoid396 errors in console.) */397 background: url(https://www.widerangegalleries.com/widerange/5.0/images/blank.gif);398}399.fotorama__nav {400 overflow: hidden !important;401 margin-top: 20px !important;402 margin-top: 2rem !important;403}404.fotorama__nav::before, .fotorama__stage::before,405.fotorama__nav::after, .fotorama__stage::after {406 background-image: none !important;407}408.sliderContainer {409 margin-bottom: 40px;410 margin-bottom: 4rem;411}412 413/* ===================== RESPONSIVE STANDARD STUFF ============================= */414body {415 line-height: 1.5;416}417footer {418 clear: both;419 padding-top: 50px;420 padding-top: 5rem;421}422header {423 margin-bottom: 32px;424 margin-bottom: 3.2rem;425}426hr {427 clear: both;428 margin-top: 30px;429 margin-top: 3rem;430 margin-bottom: 30px;431 margin-bottom: 3rem;432}433img[src$=".png"] {434 background-color: transparent !important;435 border: none !important;436 -moz-box-shadow: none !important;437 -webkit-box-shadow: none !important;438 box-shadow: none !important;439}440nav {441 line-height: 2;442 margin-top: 12px;443 margin-top: 1.2rem;444}445h1 {446 margin-bottom: 18px;447 margin-bottom: 1.8rem;448}449#logo img {450 max-width: 100%;451}452#page2 {453 margin: 0 20px 20px 20px;454 margin: 0 2rem 2rem 2rem;455}456.agreement {457 clear: both;458 padding: 10px;459 padding: 1rem;460 max-width: 300px;461 max-width: 30rem;462 margin-top: 20px;463 margin-top: 2rem;464 margin-bottom: 20px;465 margin-bottom: 2rem;466 line-height: 1.5;467}468.captionTeaser ul,469.printsCategory ul {470 list-style-position: inside;471 padding-left: 0;472}473.captionTitle,474.thumbLinkSub {475 margin-top: 12px;476 margin-top: 1.2rem;477}478.captionTitle a:link,479.captionTitle a:visited,480.captionTitle a:hover,481.thumbLinkSub a:link,482.thumbLinkSub a:visited,483.thumbLinkSub a:hover {484 text-decoration: none;485}486.center,487.center h1 {488 text-align: center;489}490.contactForm {491 clear: both;492 margin-top: 24px;493 margin-top: 2.4rem;494}495.copyright {496 font-size: 10px;497 font-size: 1rem;498}499.error {500 color: #FF0000;501}502.fancybox {503 cursor: pointer;504}505.floatLeft {506 text-align: left;507 float: left;508 margin: 0 12px 12px 0;509 margin: 0 1.2rem 1.2rem 0;510}511.floatRight {512 float: right;513 margin: 0 0 12px 12px;514 margin: 0 0 1.2rem 1.2rem;515}516.googleSearch {517 text-align: left;518}519.hidden {520 display: none;521}522.input {523 width: 360px;524 width: 36rem;525 max-width: 100%;526}527.input2 {528 width: 150px;529 width: 15rem;530 max-width: 100%;531}532.input3 {533 width: 200px;534 width: 20rem;535 max-width: 100%;536}537.input4 {538 width: 196px;539 width: 19.6rem;540 max-width: 100%;541}542.journalText .price {543 margin-top: 36px;544 margin-top: 3.6rem;545}546.largeLink {547 font-weight: bold;548 text-transform: uppercase;549}550.largePhotos {551 margin-top: 40px;552 margin-top: 4rem;553}554.left,555.left h2,556.left h3,557.left p {558 text-align: left;559}560.linkSection {561 margin-bottom: 32px;562 margin-bottom: 3.2rem;563}564.menu {565 margin: 40px 0 0 0;566 margin: 4rem 0 0 0;567}568.menuItem {569 clear: both;570 overflow: hidden;571 width: 100%;572}573.menuThumb {574 margin-bottom: 16px;575 margin-bottom: 1.6rem;576}577.narrow {578 width: 360px;579 width: 36rem;580 text-align: justify;581}582.nav2 {583 margin: 6px 0 6px 0;584 margin: .6rem 0 .6rem 0;585}586.newsHeader {587 clear: both;588 text-align: left !important;589 margin: 30px 0 12px 0;590 margin: 3rem 0 1.2rem 0;591}592.newsItem {593 margin-bottom: 24px;594 margin-bottom: 2.4rem;595 clear: both;596}597.newsPic {598 float: left;599 margin: 0 20px 20px 0;600 margin: 0 2rem 2rem 0;601 max-width: 50%;602 height: auto;603}604.newsText, .newsText p {605 text-align: left;606}607.newsThumbs {608 float: left;609}610.newsTitle {611 text-align: left;612 margin-bottom: 12px;613 margin-bottom: 1.2rem;614}615.noBorder {616 border: none;617}618.notice,619.vacation {620 color: #00ccff;621 font-size: 1.1em;622 font-weight: bold;623}624.padding-none {625 padding: 0;626}627.pageColumn1 {628 float: left;629}630.pageNav,631.pageNav1 {632 word-wrap: break-word;633}634.pageSidebar {635 float: right;636 text-align: left;637}638.pageNav {639 font-size: 15px;640 font-size: 1.5rem;641 letter-spacing: .1em;642 margin-top: 24px;643 margin-top: 2.4rem;644}645.pageNav a {646 font-size: 14px;647 font-size: 1.4rem;648}649.pageNav2 {650 clear: both;651 margin: 18px 0 12px 0;652 margin: 1.8rem 0 1.2rem 0;653}654.pageNumbers,655.pageNumbers1 {656 word-wrap: normal;657}658.pageNumbers a {659 font-size: 24px;660 font-size: 2.4rem;661}662.peeps {663 visibility: hidden;664 display: none;665}666.photo1 {667 max-width: 100%;668}669.photoCell {670 max-width: 86%;671 display: inline-block;672}673.photoNavText {674 margin-top: 12px;675 margin-top: 1.2rem;676}677.photoNav-left {678 display: inline-block;679 max-width: 6%;680 margin-left: -1px;681 margin-left: -0.1rem;682}683.photoNav-right {684 display: inline-block;685 max-width: 6%;686 margin-right: -1px;687 margin-right: -0.1rem;688}689.photoNav-left img,690.photoNav-right img {691 max-width: 100%;692}693.photo,694.photo1,695.contentPhoto,696.defaultimg {697 margin-bottom: 20px;698 margin-bottom: 2rem;699}700.photoActions {701 font-weight: bold;702 margin: 24px 0;703 margin: 2.4rem 0;704 line-height: 2;705}706.photoActionItem {707 display: inline-block;708 padding: 0 16px;709 padding: 0 1.6rem;710}711.photoLocation {712 padding: 0;713 text-transform: none;714 font-variant: normal;715 font-weight: normal;716 letter-spacing: 0;717}718.photoNav {719 margin: 36px 0;720 margin: 3.6rem 0;721}722.photoNav a {723 text-decoration: none;724}725.photoNavText {726 margin-top: 12px;727 margin-top: 1.2rem;728}729.photoTitle {730 margin: 18px 0 0 0;731 margin: 1.8rem 0 0 0;732}733.photoTitle a:link,734.photoTitle a:visited,735.photoTitle a:hover {736 text-decoration: none;737}738.price {739 line-height: 2;740 margin-top: 40px;741 margin-top: 4rem;742}743.price-select {744 line-height: 2;745 margin-top: 20px;746 margin-top: 2rem;747}748.prints {749 margin-top: 40px;750 margin-top: 4rem;751}752.printColumn1 {753 margin-bottom: 32px;754 margin-bottom: 3.2rem;755}756.printForm {757 margin-bottom: 20px;758 margin-bottom: 2rem;759}760.printForm h3 {761 margin-bottom: 0;762}763.printFormSolo {764 max-width: 400px;765 max-width: 40rem;766 margin: 0 auto;767}768.printTable {769 clear: both;770 margin-top: 50px;771 margin-top: 5rem;772}773.printThumb {774 margin-top: 24px;775 margin-top: 2.4rem;776 margin-bottom: 36px;777 margin-bottom: 3.6rem;778}779.printsCategory img {780 max-width: 50%;781}782.printsCategory .price {783 text-align: left;784}785.previewImg {786 max-width: 100% !important;787 margin-top: 4px;788 margin-top: 0.4rem;789 margin-bottom: 12px;790 margin-bottom: 1.2rem;791}792.right {793 text-align: right;794}795.selectPrints {796 width: 100%;797 max-width: 300px;798 max-width: 30rem;799}800.selectShipping {801 max-width: 180px;802 max-width: 18rem;803}804.subgallery,805.subgalleryTease {806 clear: both;807 padding-top: 3rem;808}809.subgalleryTease {810 clear: both;811 padding-top: 2rem;812}813.siteTitle {814 margin-top: 30px;815 margin-top: 3rem;816}817.siteTitle a:link,818.siteTitle a:visited {819 text-decoration: none;820}821.text-center {822 text-align: center !important;823}824.text-left {825 text-align: left !important;826}827.text-right {828 text-align: right !important;829}830.thumbButton {831 margin-bottom: 3rem;832}833.thumbNumber {834 font-size: 10px;835 font-size: 1rem;836 margin-top: 4px;837 margin-top: .4rem;838}839.thumbLinkSub {840 font-size: 1.15em;841}842.thumbNumber {843 margin-top: 0;844}845.tinyText {846 font-size: 12px;847 font-size: 1.2rem;848}849.welcome {850 margin-top: 24px;851 margin-top: 2.4rem;852}853 854 855body {856 margin: 0;857 line-height: 1.4;858}859footer {860 background-color: #2A3974;861 color: #f2f1ef;862 background-image: url("");863 background-position: 50% 50%;864 background-repeat: no-repeat;865 font-size: .9em;866}867footer a:link, footer a:visited, footer a:hover {868 color: #FFF;869 text-decoration: underline;870}871header {872 padding-top: 50px;873 padding-top: 5rem;874}875nav {876 padding: 0 20px 0 20px;877 padding: 0 2rem 0 2rem;878 line-height: 32px;879 line-height: 3.2rem;880}881nav ul li a {882 padding: 0 0.7em;883}884p {885 font-weight: 300;886}887.captionTitle, .thumbLinkSub {888 font-variant: small-caps;889}890.captionTitle a:link, .captionTitle a:visited, .thumbLinkSub a:link, .thumbLinkSub a:visited {891 color: #333;892 text-decoration: none;893}894.captionTitle a:hover, .thumbLinkSub a:hover {895 color: #2341a8;896 text-decoration: none;897}898.copyright {899 padding-bottom: 12px;900 padding-bottom: 1.2rem;901}902.fancybox-skin {903 border-radius: 0;904}905.footerTable {906 max-width: 1060px;907 max-width: 106rem;908 margin: 0 auto;909}910.footerCell {911 padding: 50px 20px 0 20px;912 padding: 5rem 2rem 0 2rem;913}914.footerCell h1 {915 color: #f2f1ef;916 margin-top: 0;917 font-size: 22px;918 font-size: 2.2rem;919}920.footerCell p {921 text-align: left;922}923.f3 {924 margin-bottom: 50px;925 margin-bottom: 5rem;926}927.galleryParagraph,928.galleryParagraph p {929 text-align: left;930}931.nav2 {932 clear: both;933}934.pageInner-prints {935 margin: 0 auto;936}937.photoGals {938 font-family: 'Droid Serif', serif;939 text-transform: uppercase;940 font-weight: normal;941 font-size: .9em;942 letter-spacing: 0.1em;943}944.photoGals a:link, .photoGals a:visited {945 text-decoration: none;946}947.photoLocation {948 font-weight: 300;949 margin: 6px 0 18px 0;950 margin: 0.6rem 0 1.8rem 0;951}952.photoNavIcons {953 margin-top: 24px;954 margin-top: 2.4rem;955}956.photoRelated {957 font-weight: 300;958}959.photoTitle {960 margin-top: 30px;961 margin-top: 3rem;962}963.siteTitle {964 text-transform: uppercase;965 color: #000;966 text-align: center;967 letter-spacing: 1em;968 line-height: 30px;969 line-height: 3rem;970 padding-left: 24px;971 padding-left: 2.4rem;972 margin-bottom: 10px;973 margin-bottom: 1rem;974}975.siteTitle a:link, .siteTitle a:visited, .siteTitle a:hover {976 color: #000;977 text-decoration: none !important;978}979.siteTag {980 font-family: 'Lato', sans-serif;981 font-weight: 300;982 font-style: italic;983 font-variant: normal;984 font-size: 15px;985 font-size: 1.5rem;986 letter-spacing: 0.1em;987 text-align: center;988 color: #666;989 margin-bottom: 26px;990 margin-bottom: 2.6rem;991}992.thumbNumber {993 color: #666;994}995@media screen and (min-width: 600px) {996 .footerCell {997 width: 27.672956%;998 float: left;999 text-align: left;1000 padding: 50px 2.8301887%;1001 padding: 5rem 2.8301887%;1002 }1003 .f3 {1004 margin-bottom: 0;1005 }1006}1007/* styles for printFormDisplaysFirst.php */1008.printsCategory {1009 text-align: left;1010 margin: 32px auto 0 auto;1011 margin: 3.2rem auto 0 auto;1012 background-color: #FFF;1013 padding: 32px;1014 padding: 3.2rem;1015 display: block;1016 clear: both;1017 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);1018 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);1019 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);1020}1021.printsCategory h3, .printsInfo h3 {1022 padding: 0;1023 margin-bottom: 12px;1024 margin-bottom: 1.2rem;1025}1026.printsCategory p {1027 text-align: left;1028}1029.imgNoBorder {1030 margin: 0 22px 16px 0;1031 margin: 0 2.2rem 1.6rem 0;1032 float: left;1033}1034.printsInfo {1035 text-align: center;1036 margin: 0 auto 0 auto;1037 padding: 32px;1038 padding: 3.2rem;1039}1040/* add buttons */1041.add {1042 max-width: 295px;1043 max-width: 29.5rem;1044 margin: 60px auto 0 auto;1045 margin: 6rem auto 0 auto;1046 padding-bottom: 0;1047 line-height: 16px;1048 line-height: 1.6rem;1049 font-weight: 300;1050}1051.addbuttons {1052 max-width: 295px;1053 max-width: 29.5rem;1054}1055.addshare {1056 max-width: 150px;1057 max-width: 15rem;1058}1059.addshare .addtext {1060 text-align: right;1061 width: 50px;1062 width: 5rem;1063 margin-left: 10px;1064 margin-left: 1rem;1065}1066.addshare .addthis {1067 width: 60px;1068 width: 6rem;1069}1070.addfollow {1071 max-width: 170px;1072 max-width: 17rem;1073}1074.addfollow .addtext {1075 text-align: right;1076 width: 60px;1077 width: 6rem;1078 margin-left: 10px;1079 margin-left: 1rem;1080}1081.addfollow .addthis {1082 width: 80px;1083 width: 8rem;1084}1085.addshare, .addfollow {1086 float: left;1087}1088.addtext {1089 float: left;1090}1091.addthis {1092 float: right;1093}1094.addthis_button img {1095 vertical-align: top;1096 margin: 0;1097 border-radius: 0;1098}1099 1100 1101 html {1102 position: relative;1103 min-height: 100%;1104 }1105 #top {1106 padding-bottom: 60px;1107 padding-bottom: 6rem;1108 }1109 .footer {1110 width: 100%;1111 clear: both;1112 padding: 0;1113 }1114 .stickyFooter {1115 position: absolute;1116 bottom: 0;1117 }1118 body {1119 font-family: 'Lato', sans-serif;1120 font-size: 16px;1121 font-size: 1.6rem;1122 color: #333333;1123 background-color: #f2f1ef;1124 background-image: url("");1125 background-position: 50% 0%;1126 background-repeat: no-repeat;1127 }1128 a:link,1129 a:visited,1130 .pageNumbers1 a,1131 .pageNumbers1 a:link,1132 .pageNumbers1 a:visited {1133 color: #2341a8;1134 text-decoration: none;1135 }1136 a:hover,1137 a:focus,1138 .pageNumbers1 a:hover,1139 .pageNumbers1 a:focus {1140 color: #2341a8;1141 text-decoration: underline;1142 }1143 h1, h2, h3, h4, h5,1144 .journalMenuTiled .captionTitle {1145 font-family: 'Droid Serif', serif;1146 color: #111111;1147 }1148 h1 {1149 font-size: 25px;1150 font-size: 2.5rem;1151 line-height: 1;1152 font-weight: normal;1153 font-variant: small-caps;1154 letter-spacing: .2em;1155 }1156 h1 a:link, h1 a:visited,1157 h2 a:link, h2 a:visited,1158 h3 a:link, h3 a:visited {1159 color: #2341a8;1160 text-decoration: none;1161 }1162 h1 a:hover, h1 a:focus,1163 h2 a:hover, h2 a:focus,1164 h3 a:hover, h3 a:focus {1165 color: #2341a8;1166 text-decoration: underline;1167 }1168 hr {1169 border: 0;1170 height: 1px;1171 background: #333333;1172 }1173 .menuContent h2 a:link, .menuContent h2 a:visited,1174 .noLinkColor a:link, .noLinkColor a:visited {1175 color: #111111;1176 }1177 .menuContent h2 a:hover, .menuContent h2 a:focus,1178 .noLinkColor a:hover, .noLinkColor a:focus {1179 color: #2341a8;1180 }1181 h2, h3, h4, h5,1182 .journalMenuTiled .captionTitle {1183 font-size: 19px;1184 font-size: 1.9rem;1185 line-height: 1.1;1186 font-weight: normal;1187 font-variant: small-caps;1188 letter-spacing: .2em;1189 }1190 .parentTitle h2 {1191 font-size: 16px;1192 font-size: 1.6rem;1193 }1194 nav {1195 color: #000000;1196 font-family: 'Droid Serif', serif;1197 font-size: 14px;1198 font-size: 1.4rem;1199 font-weight: normal;1200 text-transform: uppercase;