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 lang="en">3 <head>4 <title>5 Graham Llewellyn Art: Welcome6 </title>7 <meta content="index,follow" name="robots">8 <meta content="width=device-width, initial-scale=1.0" name="viewport">9 <meta content="General" name="rating">10 <meta content="text/html; charset=utf-8" http-equiv="content-type">11 <style>12 13 14@font-face {15 font-family: 'Adam';16 src: url('/_common/_fonts/adam/adam.eot');17 src: url('/_common/_fonts/adam/adam.eot?#iefix') format('embedded-opentype'),18 url('/_common/_fonts/adam/adam.woff') format('woff'),19 url('/_common/_fonts/adam/adam.ttf') format('truetype');20 font-weight: normal;21 font-style: normal;22}23@font-face {24 font-family: 'Impact';25 src: url('/_common/_fonts/impact/impact.eot');26 src: url('/_common/_fonts/impact/impact.eot?#iefix') format('embedded-opentype'),27 url('/_common/_fonts/impact/impact.woff') format('woff'),28 url('/_common/_fonts/impact/impact.ttf') format('truetype');29 font-weight: normal;30 font-style: normal;31}/* Clik Site Standard */32html, body, div, span, applet, object, iframe,33h1, h2, h3, h4, h5, h6, p, blockquote, pre,34a, abbr, acronym, address, big, cite, code,35del, dfn, em, img, ins, kbd, q, s, samp,36small, strike, strong, sub, sup, tt, var,37b, u, i, center, input, textarea, button, select,38dl, dt, dd, ol, ul, li,39fieldset, form, label, legend,40table, caption, tbody, tfoot, thead, tr, th, td,41article, aside, canvas, details, embed, 42figure, figcaption, footer, header, hgroup, 43menu, nav, output, ruby, section, summary,44time, mark, audio, video {45 margin: 0;46 padding: 0;47 border: 0;48 font-size: 100%;49 font: inherit;50}51 52html {53 box-sizing: border-box;54 height:100%;55 position:relative;56}57 58body { 59 min-height: 100vh;60 -webkit-font-smoothing: antialiased;61}62 63*, *:before, *:after {64 box-sizing: inherit;65}66 67 68/*69tried this to stop margin collapse between inner and outer.70 71div {72 overflow:hidden;73}74 75div.outer {76 overflow:visible; 77}*/78 79 80 81*, *:before, *:after {82 box-sizing: inherit;83}84 85p {86 margin-bottom: 1em;87}88 89h1, h2, h3, h4, h5, h6 {90 font-weight: bold;91}92 93h1 {94 font-size: 1.8em;95 margin-bottom:0.625em;96}97 98h2 {99 font-size: 1.6em;100 margin-bottom:0.625em;101}102 103h3 {104 font-size: 1.4em;105 margin-bottom:0.714em;106}107 108h4 {109 font-size: 1.2em;110}111 112h4 {113 font-size: 1.1em;114}115 116b,strong {117 font-weight: bold;118}119i,em {120 font-style: italic;121}122 123img {124 display:block;125}126 127.contentsection:after, .container:after, .clearfix:after {128 content: " ";129 display: block;130 height: 0;131 clear: both;132 visibility: hidden;133 overflow: hidden;134}135 136/* common elements */137 138/* These were originally inserted just to get it to behave139when sizing. They're not a long term solution. I've taken them out and any issues140with the sizing will need to be resolved properly */141 142/*#footer {143 overflow:hidden;144}145 146#header {147 overflow:hidden;148 margin-top:0 !important;149}150*/151 152img {153 display:block;154}155 156div.clearing {157 clear: both;158 display: block;159 margin: 0;160 padding: 0;161 height: 0;162 line-height: 1px;163 font-size: 1px;164}165 166.clear {167 clear:both;168}169 170.print {171 display:none;172}173 174table {175 border-spacing: 0;176 border-collapse: collapse;177}178 179th,td {180 vertical-align:top;181}182 183th {184 font-weight: bold;185}186 187ol, ul {188 margin:1em 0;189 padding-left: 2em;190 text-indent:0px;191}192 193ul {194 list-style: disc;195}196ul ul {197 list-style: circle;198}199ol {200 list-style: decimal;201}202ol ol {203 list-style: lower-alpha;204}205 206 207/* Column Widths */208 209#body.col-SM #xcol, #body.col-M #xcol, #body.col-MX #subcol, #body.col-M #subcol, #body.col-XM #subcol, #body.col-MS #xcol, #body.col-B #contentOuter, #body.col-B #content {210 display:none;211}212/* Viewport: main */213#body.col-MX .xcol_wrap, #body.col-SMX .xcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row;}214#body.col-XM .xcol_wrap, #body.col-SXM .xcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row-reverse;}215#body.col-SM .subcol_wrap,#body.col-SMX .subcol_wrap,#body.col-SXM .subcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row;}216#body.col-MS .subcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row-reverse;}217#body.col-SMX #wrap, #body.col-SM #wrap, #body.col-XM #maincol, #body.col-SXM #maincol{margin-left: auto;}218#body.col-MS #wrap, #body.col-MSX #wrap, #body.col-SMX #maincol, #body.col-MX #maincol{margin-right: auto;}219 #body #subcol, #body.col-SM #wrap,220#body.col-SXM #wrap,221#body.col-SMX #wrap,#body.col-MS #wrap,222#body.col-XSM #wrap { width: auto; }223 #body #xcol, #body.col-MX #maincol,#body.col-SMX #maincol, #body.col-SXM #maincol, #body.col-XM #maincol {width: auto}224 #body.type_gallery.action_view #subcol, #body.type_gallery.action_view.col-SM #wrap,225#body.type_gallery.action_view.col-SXM #wrap,226#body.type_gallery.action_view.col-SMX #wrap,#body.type_gallery.action_view.col-MS #wrap,227#body.type_gallery.action_view.col-XSM #wrap { width: auto; }228 #body.type_gallery.action_view #xcol {229 flex:0 0 40%;230} #body.type_gallery.action_view.col-MX #maincol,#body.type_gallery.action_view.col-SMX #maincol {231 flex-grow:0;flex-shrink:0;flex-basis:calc( 100% - 40% - 2% ); width: calc( 100% - 40% - 2% );232}233 #body.type_gallery.action_view.col-SXM #maincol, #body.type_gallery.action_view.col-XM #maincol {234 flex-grow:0;flex-shrink:0;flex-basis:calc( 100% - 40% - 2% ); width: calc( 100% - 40% - 2% );235}236 #body.type_cart #subcol, #body.type_cart.col-SM #wrap,237#body.type_cart.col-SXM #wrap,238#body.type_cart.col-SMX #wrap,#body.type_cart.col-MS #wrap,239#body.type_cart.col-XSM #wrap { width: auto; }240 #body.type_cart #xcol, #body.type_cart.col-MX #maincol,#body.type_cart.col-SMX #maincol, #body.type_cart.col-SXM #maincol, #body.type_cart.col-XM #maincol {width: auto}241/* Viewport: mid */242@media screen and (max-width:980px) {#body.col-MX .xcol_wrap, #body.col-SMX .xcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row;}243#body.col-XM .xcol_wrap, #body.col-SXM .xcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row-reverse;}244#body.col-SM .subcol_wrap,#body.col-SMX .subcol_wrap,#body.col-SXM .subcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row;}245#body.col-MS .subcol_wrap{position:relative;align-items:stretch;display:flex;flex-direction:row-reverse;}246#body.col-SMX #wrap, #body.col-SM #wrap, #body.col-XM #maincol, #body.col-SXM #maincol{margin-left: auto;}247#body.col-MS #wrap, #body.col-MSX #wrap, #body.col-SMX #maincol, #body.col-MX #maincol{margin-right: auto;}248 #body #subcol, #body.col-SM #wrap,249#body.col-SXM #wrap,250#body.col-SMX #wrap,#body.col-MS #wrap,251#body.col-XSM #wrap { width: auto; }252 #body #xcol, #body.col-MX #maincol,#body.col-SMX #maincol, #body.col-SXM #maincol, #body.col-XM #maincol {width: auto}253 #body.type_gallery.action_view #subcol, #body.type_gallery.action_view.col-SM #wrap,254#body.type_gallery.action_view.col-SXM #wrap,255#body.type_gallery.action_view.col-SMX #wrap,#body.type_gallery.action_view.col-MS #wrap,256#body.type_gallery.action_view.col-XSM #wrap { width: auto; }257 #body.type_gallery.action_view #xcol, #body.type_gallery.action_view.col-MX #maincol,#body.type_gallery.action_view.col-SMX #maincol, #body.type_gallery.action_view.col-SXM #maincol, #body.type_gallery.action_view.col-XM #maincol {width: auto}258 #body.type_cart #subcol, #body.type_cart.col-SM #wrap,259#body.type_cart.col-SXM #wrap,260#body.type_cart.col-SMX #wrap,#body.type_cart.col-MS #wrap,261#body.type_cart.col-XSM #wrap { width: auto; }262 #body.type_cart #xcol, #body.type_cart.col-MX #maincol,#body.type_cart.col-SMX #maincol, #body.type_cart.col-SXM #maincol, #body.type_cart.col-XM #maincol {width: auto}263}264/* Viewport: mobile */265@media screen and (max-width:600px) {#body.col-MX .xcol_wrap, #body.col-SMX .xcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row;}266#body.col-XM .xcol_wrap, #body.col-SXM .xcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row-reverse;}267#body.col-SM .subcol_wrap,#body.col-SMX .subcol_wrap,#body.col-SXM .subcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row;}268#body.col-MS .subcol_wrap{position:relative;align-items:stretch;display:block;flex-direction:row-reverse;}269#body.col-SMX #wrap, #body.col-SM #wrap, #body.col-XM #maincol, #body.col-SXM #maincol{margin-left: auto;}270#body.col-MS #wrap, #body.col-MSX #wrap, #body.col-SMX #maincol, #body.col-MX #maincol{margin-right: auto;}271 #body #subcol, #body.col-SM #wrap,272#body.col-SXM #wrap,273#body.col-SMX #wrap,#body.col-MS #wrap,274#body.col-XSM #wrap { width: auto; }275 #body #xcol, #body.col-MX #maincol,#body.col-SMX #maincol, #body.col-SXM #maincol, #body.col-XM #maincol {width: auto}276 #body.type_gallery.action_view #subcol, #body.type_gallery.action_view.col-SM #wrap,277#body.type_gallery.action_view.col-SXM #wrap,278#body.type_gallery.action_view.col-SMX #wrap,#body.type_gallery.action_view.col-MS #wrap,279#body.type_gallery.action_view.col-XSM #wrap { width: auto; }280 #body.type_gallery.action_view #xcol, #body.type_gallery.action_view.col-MX #maincol,#body.type_gallery.action_view.col-SMX #maincol, #body.type_gallery.action_view.col-SXM #maincol, #body.type_gallery.action_view.col-XM #maincol {width: auto}281 #body.type_cart #subcol, #body.type_cart.col-SM #wrap,282#body.type_cart.col-SXM #wrap,283#body.type_cart.col-SMX #wrap,#body.type_cart.col-MS #wrap,284#body.type_cart.col-XSM #wrap { width: auto; }285 #body.type_cart #xcol, #body.type_cart.col-MX #maincol,#body.type_cart.col-SMX #maincol, #body.type_cart.col-SXM #maincol, #body.type_cart.col-XM #maincol {width: auto}286}287/* Check expand Height */288/* Height expand: True */289body{height: 100%;}290div#ubercontainer {flex-grow: 1;display: flex;min-height: 100%;flex-direction: column;}291div#ubercontainer>* {flex-grow: 0;}292div#ubercontainer div.expandHeightContainer,div#ubercontainer div.expandHeightContainerOuter {flex-grow: 1;}293/* general content CSS for content sections TEST */294 295.container:not(.contentsection-container):not(.contentsection-popup_container) {296 position:relative;297 display: flex;298 flex-direction: column;299}300 301/* We need to set the width so that we can then use `margin-left/right: auto`*/302.container:not(.contentsection-container):not(.contentsection-popup_container)>.container:not(.contentsection-container):not(.contentsection-popup_container) {303 flex-grow: 0;304 width: 100%;305}306 307@media screen and (max-width:600px) {308 .container:not(.contentsection-container):not(.contentsection-popup_container) {309 display: block;310 }311 .container:not(.contentsection-container):not(.contentsection-popup_container)>.container:not(.contentsection-container):not(.contentsection-popup_container) {312 width: auto;313 }314}315 316.height-max {317 flex-grow: 1 !important;318}319 320#maincol_left, #maincol_right {321 position: relative;322}323 324.contentsection .contentInnerCollapsible {325 display: none;326}327 328.contentsection {329 /*text-align: left;*/330 zoom: 1;331 overflow:visible;332}333 334.contentsection.empty {335display: none;336}337 338body:before, .container:before, .contentsection-container:before { /*margin collapse fix*/339 content: " ";340 display: block;341 height: 1px;342 margin-bottom: -1px;343 background: 0;344 border: 0;345 float: none;346 position: static;347 overflow: hidden;348}349 350.contentpadding:after, .contentsection-general .contentInner:after, .container:after {/*clearing for floated images*/351 content: " ";352 display: block;353 height: 0px;354 /*margin-top: -2px;355 margin-bottom:1px;*/356 border: 0;357 clear: both;358 visibility: hidden;359 overflow: hidden;360}361 362.contentSectionImage.empty {363 display: none;364}365 366.contentsection .contenttitle {367 zoom: 1;368 margin:0;369}370 371.overide, .contentheader h3.contenttitle , .contentheader .contenttitle a, .item .title a, .contentsection-photogrid a {372 font-weight:inherit !important;373 font-style:inherit !important;374 font-family:inherit !important;375 font-size:inherit !important;376 text-decoration:inherit !important;377 text-align:inherit !important;378 text-transform: inherit !important;379 color:inherit !important;380 padding:0 !important;381 margin:0 !important;382 border:0 !important;383}384 385body .inherit {386 font-weight:inherit;387 font-style:inherit;388 font-family:inherit;389 font-size:inherit;390 text-decoration:inherit;391 text-align:inherit;392 text-transform: inherit;393 color:inherit;394 padding:0;395 margin:0;396 border:0;397}398 399.contentsection .autoimagewidth img {400 max-width:100%;401 height:auto;402}403 404.contentsection>.contentpadding, .containerWrap {405 position: relative;406 zoom: 1;407}408.contentsection>.contentpadding .containerWrap {409 position: static;410}411.contentsection-popup_container>.containerWrap {412 position: static;413}414.contentsection-popup_container p {415margin:0;416}417 418.paginationControl {419 /*overflow:hidden;*/420 width: 100%;421 clear:both;422}423 424.container, .contentsection-container, .container >.contentpadding {425 position: relative;426}427 428.contentsection .paginationControl .pageLink a {429 display: inline;430 zoom: 1;431}432html>body .contentsection .paginationControl .pageLink a {433 display: inline-block;434 *display: inline;435}436 437.contentsection-photo {438 font-size: inherit !important;439}440 441.contentsection-photo .photo a,442.contentsection-photo .photo .crop,443.contentsection-flickr_gallery .photo a,444.contentsection-flickr_gallery .photo .crop {445 display: block;446 overflow: hidden;447 line-height: 0;448 zoom: 1;449}450.contentsection-photo .photo {451 line-height: 0;452}453 454 455div.contentsection .flickrCaption h1{456 border-width:0;457 background:transparent;458 margin:0;459 padding:0;460}461div.contentsection .flickrItem div.crop img,462div.contentsection .flickr_spacegallery div.crop img,463div.contentsection .flickr_rotator a img {464 border:none;465}466 467.inlineContainer.halign-center{468 margin-left:auto;469 margin-right:auto;470}471.inlineContainer.orientation_h-right{472 margin-left:auto;473}474 475.contentsection-button {476 cursor: pointer;477}478 479.contentsection-button .next, .contentsection-button .previous {480 position: static !important;481 margin: 0 !important;482 display: inline-block !important;483 background: none !important;484 text-decoration: inherit;485 font-style: inherit;486 font-weight: inherit;487 color: inherit;488}489 490.contentsection-button a {491 border: none !important;492}493 494input[type="submit"], input[type="button"] {495 -webkit-appearance: none;496 -moz-appearance: none;497 appearance: none;498}499 500.contentsection-popup_container {501 display: none;502}503 504a.link-icon {505 background-position: left center;506 background-repeat: no-repeat;507 padding-left: 20px;508}509a.link-icon.link-type_pdf {510 background-image: url("_graphics/filetypes/pdf.gif");511}512a.link-icon.link-type_word {513 background-image: url("_graphics/filetypes/doc.gif");514}515a.link-icon.link-type_excel {516 background-image: url("_graphics/filetypes/xls.gif");517}518a.link-icon.link-type_music {519 background-image: url("_graphics/filetypes/mp3.gif");520}521a.link-icon.link-type_rtf {522 background-image: url("_graphics/filetypes/rtf.gif");523}524a.link-icon.link-type_power_point {525 background-image: url("_graphics/filetypes/pps.gif");526}527a.link-icon.link-type_zip {528 background-image: url("_graphics/filetypes/zip.gif");529}530a.link-icon.link-type_image {531 background-image: url("_graphics/filetypes/jpg.gif");532}533a.link-icon.link-type_other {534 background-image: url("_graphics/filetypes/other.gif");535}536a.link-icon.link-type_mp3 {537 background-image: url("_graphics/filetypes/mp3.gif");538}539.clik_media_embed iframe{540 border:none;541}542 543.itemlist .item:after {544 content: ".";545 display: block;546 height: 0;547 clear: both;548 visibility: hidden;549}550 551/* if this has a margin, then we this applied on top of item margin due to margin collapse fix above. */552.contentsection-links .itemlist .item p.link {553 margin-bottom: 0;554}555 556.imageWrap {557 position: relative;558}559 560 561.imageWrap img, .itemimageWrap img, .inlineArticle img {562 max-width:100%;563 height:auto;564}565 566.captionbottom .caption, .captiontop .caption {567 position: absolute;568 bottom:0;569 visibility: hidden;570 width: 100%;571}572 573.captiontop .caption {574 bottom:initial;575 top:0;576}577 578.captionbottom:hover .caption, .captiontop:hover .caption {579 visibility: visible;580}581 582/* this is the mechanism for removing the space for the image in listings. The cs or listing div must have583class of noimagestyle or noimagelist, then the noimage or noimage item class is applied to the div around the cs or the listing584*/585 586 587.noimagestyle .noimage .textWrap, .noimagelist .noimage .itemtextWrap {588 margin: 0 !important;589}590 591.noimagestyle .noimage .imageWrap, .noimagelist .noimage .itemimageWrap {592 display: none;593}594 595.inlineImage img {596 max-width: 100%;597}598 599div.contentsection-text ul, div.contentsection-text ol, div.contentsection-general ul, div.contentsection-general ol {600 overflow:hidden;601}602 603.ArticleImageRight {604 float:right;605 margin-right: 0 !important;606}607 608.ArticleImageLeft {609 float:left;610 margin-left: 0 !important;611}612 613.ArticleImageCenter img {614 margin-left:auto !important;615 margin-right:auto !important;616}617 618@media screen and (max-width:600px) {619 .ArticleImageRight, .ArticleImageLeft {620 float:none;621 } 622 div.inlineImage {623 margin-left:0px;624 margin-right:0px;625 626 }627 628}629 630 631 632 633/* grids */634 635 636c,ce, sc, gm, gi {637 display: block;638 min-height:1px;639}640 641g gi > a, g gi c h3 a {642 font-weight:inherit !important;643 font-style:inherit !important;644 font-family:inherit !important;645 font-size:inherit !important;646 text-decoration:inherit !important; 647 text-align:inherit !important;648 text-transform: inherit !important;649 color:inherit !important;650 padding:0 !important;651 margin:0 !important;652 border:0 !important;653}654 655gm,gi {656 vertical-align: middle;657 text-align: center;658 width:100%;659}660gi {661 height: 100%;662}663 664gm img {665 max-width:100%;666 max-height:100%;667 height:auto;668 width:auto;669 margin:0 auto;670}671/*.grid0 > g, .grid0 > .row > g, .grid1 > g, .grid1 > .row > g {672 width:auto !important;673}*/674 675/*.grid4 {676 display: grid;677 grid-template-columns: 1fr 1fr 1fr 1fr;678}*/679.marginCollapseFix {680 height: 1px;681 margin-bottom: -1px;682 background: 0;683 border: 0;684 float: none;685 position: static;686 _display: inline;687}688 689table.contenttable {690 border-collapse: collapse;691 width: 100%;692}693 694 695 696@media screen and (min-width:600px) {697 .fixed {698 position: fixed;699 top:0; left:0;700 width:100%;701 z-index: 1000;702 }703}704 705 706 707@media screen and (max-width:600px) {708 709 710 .grid:not(.mobilegrid)>g,.grid:not(.mobilegrid)>page>g {711 display: block !important;712 width: auto !important;713 margin-left: 0 !important;714 margin-right: 0 !important;715 }716 717 .grid:not(.mobilegrid),.grid:not(.mobilegrid)>page {718 display: grid !important;719 grid-template-columns: 1fr !important;720 }721 722}723 724.clikScroll .controls .button .icon {725 display: inline-block;726}727.clikScroll .controls .button svg {728 display:block;729 width:100%;730 height:100%;731 fill:inherit;732 stroke:inherit;733}734.clikScroll .scrollBarMiddle {735 width: 100%;736}737 738div#background {739 position: fixed;740 z-index: -99999999999999;741 top:0;742 left:0;743 width:100%;744 height: 100%;745}746 747.paginationControl .paginationButton {748 display: inline-block;749 vertical-align: middle;750}751.paginationControl .paginationButton .button .icon {752 display: inline-block;753}754.paginationControl .paginationButton .button svg {755display: block;756width: 100%;757height: 100%;758fill: inherit;759stroke: inherit;760}761 762.scheme-carousels div[data-cycle-fx="scrollVert"]~.carouselButtons .button span.icon {763 transform: rotate(90deg);764}765 766@-webkit-keyframes spinner {767 to {transform: rotate(360deg);}768}769@-moz-keyframes spinner {770 to {transform: rotate(360deg);}771}772@-o-keyframes spinner {773 to {transform: rotate(360deg);}774}775@keyframes spinner {776 to {transform: rotate(360deg);}777}778 779.loading{780 position: relative;781}782.loading:before {783 content: '';784 box-sizing: border-box;785 position: absolute;786 top: 50%;787 left: 50%;788 width: 20px;789 height: 20px;790 margin-top: -10px;791 margin-left: -10px;792 border-radius: 50%;793 border-width: 2px;794 border-style:solid;795 -webkit-animation: spinner .6s linear infinite;796 -moz-animation: spinner .6s linear infinite;797 -o-animation: spinner .6s linear infinite;798 animation: spinner .6s linear infinite;799}800 801.contentsection-links a.articleLink {802 -ms-overflow-wrap: break-word;803 -webkit-overflow-wrap: break-word;804 overflow-wrap: break-word;805}806 807/*.gridEqualHeights>g>.contentsection {808 height: 100%;809}*/.contentsection-container .carouselButtons,810.contentsection-inline_container .carouselButtons {811 cursor: pointer;812 z-index:999999999;813}814.contentsection-container .carouselButtons .button .icon ,815.contentsection-inline_container .carouselButtons .button .icon {816 display: inline-block;817}818.contentsection-container .carouselButtons .button svg ,819.contentsection-inline_container .carouselButtons .button svg {820 display:block;821 width:100%;822 height:100%;823 fill:inherit;824 stroke:inherit;825}826.contentsection-container .cycle-pager ,827.contentsection-inline_container .cycle-pager { 828 overflow: hidden;829 z-index:999999998;830}831.contentsection-container .cycle-pager span ,832.contentsection-inline_container .cycle-pager span { 833 display: inline-block;834 cursor: pointer;835}836 837/* Hide all but first page of cycle2 slideshows */838.contentsection-container.cycle-slideshow > div.contentsection,839.contentsection-inline_container.cycle-slideshow > div.contentsection,840.contentsection-container > .cycle-slideshow > page ,841.contentsection-inline_container > .cycle-slideshow > page {842 display: none;843}844.contentsection-container.cycle-slideshow > div.contentsection:first-child,845.contentsection-inline_container.cycle-slideshow > div.contentsection:first-child,846.contentsection-container > .cycle-slideshow > page:first-child ,847.contentsection-inline_container > .cycle-slideshow > page:first-child {848 display: block;849}850/*{}*/851 852.contentsection-popup_container>.containerWrap {853 position: static;854}855 856.contentsection-popup_container p {857margin:0;858}859 860.contentsection-popup_container {861 display: none;862}863.contentsection-popup_container {864/* displaying position: position is absolute */865 position:absolute;866 -webkit-transform: translateX(-50%) translateY(0); -moz-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); left:50%;867 right:auto;868 top:0px;869 bottom:auto;870 max-width:98%;871 padding: 20px;872 margin: 20px 0px 0px 0px;873 background-color:#f7f7f7874;}875 876.contentsection-popup_container .overlay_popup {877 background-color:#000000;878background-color: rgba(0,0,0,0.8);879*background-color: transparent;880filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000);881zoom: 1882;}883.js_lb_overlay{ background-color:#000000;884background-color: rgba(0,0,0,0.8);885*background-color: transparent;886filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000);887zoom: 1888;}/* static common css for button content section types */889.contentsection-button, .contentsection-minicart {890 display:inline-block;891 position:relative;892}893 894.contentsection-button .button a, .contentsection-button .button span.caption ,895.contentsection-minicart .button a, .contentsection-minicart .button span.caption {896 text-decoration: inherit;897 font-style: inherit;898 font-size: inherit;899 font-weight: inherit;900 color:inherit;901 stroke:inherit;902 fill:inherit;903}904 905.contentsection-button .icon,906.contentsection-minicart .icon {907 font-family: 'FontAwesome';908}909 910.contentsection-button .button.top, .contentsection-button .button.bottom,911.contentsection-minicart .button.top, .contentsection-minicart .button.bottom {912 text-align: center;913}914 915.contentsection-button .button span ,916.contentsection-minicart .button span {917 float: left;918}919 920.contentsection-button .button.right span ,921.contentsection-minicart .button.right span {922 float: right;923}924 925.contentsection-button .button .icon ,926.contentsection-minicart .button .icon {927 width:1em;928 height:1em;929 padding:0.2em;930}931 932.contentsection-button .button svg ,933.contentsection-minicart .button svg {934 display:block;935 width:100%;936 height:100%;937 fill:inherit;938 stroke:inherit;939 overflow: visible;940}941 942.contentsection-minicart span.caption span {943 float:none;944}945.contentsection-button {946 line-height:1em;947 color:#ffffff;948 fill:#ffffff;949 stroke:#ffffff;950 padding: 0px;951 margin: 0px;952}953.contentsection-button .caption {954 font-size:110%;955 padding: 0.5em 0px 0px 0px;956}957 958 959.contentsection-button:hover {960 color:#ffffff;961 fill:#ffffff;962 stroke:#ffffff;963}964 965.contentsection-button {966 line-height:1em;967 color:#ffffff;968 fill:#ffffff;969 stroke:#ffffff;970 padding: 0px;971 margin: 0px;972}973.contentsection-button .button span.caption {974 display:none;975 font-size:110%;976 padding: 0.5em 0px 0px 0px;977}978.contentsection-button .button.left span.caption {margin-left:4px}979.contentsection-button .button.right span.caption {margin-right:4px}980.contentsection-button .button span.icon {981 width:26px;982 height:40px;983 color:#ffffff;984 fill:#ffffff;985 stroke:#ffffff;986 padding: 8px 4px;987 background-color:#4f4f4f988; border-style:solid;989border-width: 0px;990border-color:#4f4f4f;991}992.contentsection-button:not(.disabled):hover {993 color:#ffffff;994 fill:#ffffff;995 stroke:#ffffff;996}997.contentsection-button:not(.disabled):hover .button span.icon {998 color:#ffffff;999 fill:#ffffff;1000 stroke:#ffffff;1001 background-color:#6363631002; border-style:solid;1003border-color:#4f4f4f;1004}1005.contentsection-button.disabled {1006 visibility:hidden;1007 -ms-filter:"alpha(opacity=20)";1008 filter:alpha(opacity=20);1009 -moz-opacity: 0.2;1010 opacity: 0.2;1011 transition: opacity 1s;1012 -webkit-transition: opacity 1s;1013}1014/* needed to for the surrounding div to keep it to width of table */1015/*div.shoppingCart {1016 display:inline-block;1017}*/1018 1019div#confirmContainer{1020 /*padding-bottom: 12px;*/1021 height:16px;1022}1023 1024div#backLink{1025 padding-bottom:6px;1026}1027 1028html>body div#confirmContainer{1029 min-height:16px;1030 height:auto;1031}1032/* Not sure why this was needed?! Problem is rounding errors may lead to unnecessary hiding1033#paymentForm {1034 overflow: hidden;1035}*/1036 1037.payment .clearing {1038 clear:none;1039}1040 1041div#paymentConfirm{1042 /*opacity:0;1043 -moz-opacity:0;1044 -khtml-opacity:0;1045 filter:alpha(opacity=0);1046 position: absolute;*/1047 display:inline;1048}1049 1050.contentsection-cart .hideInDesktop {1051 display: none;1052}1053.contentsection-cart td.image {1054 max-width: 10%;1055}1056.contentsection-cart td svg {1057 width: 1.5em; height: 1.5em;1058 cursor: pointer;1059}1060.contentsection-cart .cartInputField {1061 width: 3em;1062}1063.contentsection-cart .pricelabel {1064 text-align:right;1065}1066 1067.submitBtns {1068 text-align:right;1069 margin: 1em 0px;1070}1071 1072.contentsection-comments {1073 margin: 1em 0px;1074}1075 1076 1077 1078/* To be used with cookieCuttr by Chris Wharton (http://cookiecuttr.com) */1079 1080.contentsection-cookie { 1081 display: none;1082 /*text-shadow: 0 -1px 0 rgba(0,0,0,0.35);*/1083}1084 1085/*.contentsection-cookie a, .contentsection-cookie a:hover {1086 color: #fff;1087 text-decoration: underline;1088}*/1089/*.contentsection-cookie a:hover {1090 text-decoration: none;1091}*/1092.contentsection-cookie a.cookie-accept, .contentsection-cookie a.cookie-decline, .contentsection-cookie a.cookie-reset {1093 display: inline-block;1094 1095 /*text-shadow: 0 -1px 0 rgba(0,0,0,0.35);*/1096 -o-transition: background 0.5s ease-in;1097 -webkit-transition: background 0.25s ease-in;1098 -moz-transition: background 0.25s ease-in;1099 transition: background 0.25s ease-in;1100}1101.contentsection-cookie a.cookie-reset {1102 background: #f15b00;1103}1104.contentsection-cookie a:hover.cookie-accept, .contentsection-cookie a:hover.cookie-decline, .contentsection-cookie a:hover.cookie-reset {1105 -o-transition: background 0.5s ease-in;1106 -webkit-transition: background 0.25s ease-in;1107 -moz-transition: background 0.25s ease-in;1108 transition: background 0.25s ease-in;1109}1110.contentsection-cookie.discreet {1111 width: auto;1112 padding: 0.5em 1em;1113 left: auto;1114 top: auto;1115}1116.contentsection-cookie.discreet a.cookie-reset {1117 background: none;1118 text-shadow: none;1119 padding: 0;1120 text-decoration: underline;1121}1122.contentsection-cookie.discreet a:hover.cookie-reset {1123 text-decoration: none;1124}1125 1126 1127@media screen and (max-width:600px) {1128 .contentsection-cookie a.cookie-accept, .contentsection-cookie a.cookie-decline, .contentsection-cookie a.cookie-reset {1129 display: block;1130 }1131}1132.contentsection-cookie {1133/* displaying position: position is fixed */1134 position:fixed;1135 -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left:0px;1136 right:auto;1137 top:0px;1138 bottom:auto;1139 z-index:99;1140 width:100%;1141 text-align:center;1142 color:#ffffff;1143 fill:#ffffff;1144 stroke:#ffffff;1145 padding: 0.5em 5%;1146 background-color:#565656;1147background-color: rgba(86,86,86,0.95);1148*background-color: transparent;1149filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2565656,endColorstr=#f2565656);1150zoom: 11151;}1152 1153.contentsection-cookie .cookie-accept {1154text-decoration:none;1155 color:#fff;1156 fill:#fff;1157 stroke:#fff;1158 padding: 0.5em 0.75em;1159 background-color:#7DAF3B1160;-moz-border-radius: 3px;1161-khtml-border-radius: 3px;1162-webkit-border-radius: 3px;1163border-radius: 3px;1164/* shadow */1165 -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1.333333333333,Enabled=false) progid:DXImageTransform.Microsoft.DropShadow(OffX=0,OffY=0,Enabled=false,Color=#000)";1166filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1.333333333333,Enabled=false) progid:DXImageTransform.Microsoft.DropShadow(OffX=0,OffY=0,Enabled=false,Color=#000);1167 box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1168 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1169 -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1170}1171.contentsection-cookie a.cookie-accept:hover {1172 background-color:#0001173;}1174.contentsection-cookie .cookie-decline {1175text-decoration:none;1176 color:#fff;1177 fill:#fff;1178 stroke:#fff;1179 padding: 0.5em 0.75em;1180 margin: 0px 0px 0px 0.5em;1181 background-color:#af3b3b1182;-moz-border-radius: 3px;1183-khtml-border-radius: 3px;1184-webkit-border-radius: 3px;1185border-radius: 3px;1186/* shadow */1187 -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1.333333333333,Enabled=false) progid:DXImageTransform.Microsoft.DropShadow(OffX=0,OffY=0,Enabled=false,Color=#000)";1188filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1.333333333333,Enabled=false) progid:DXImageTransform.Microsoft.DropShadow(OffX=0,OffY=0,Enabled=false,Color=#000);1189 box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1190 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1191 -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.35);1192}1193.contentsection-cookie a.cookie-accept:hover {1194 background-color:#0001195;}1196.contentsection-cookie a.cookie-decline:hover {1197 background-color:#0001198;}1199.contentsection-flickr_gallery.hasClikEnlarge {1200 cursor: pointer;