CoolFace
Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.7kdownloads
13412.html5565 linesDownload Raw Back to root
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;

Showing the first 1,200 of 5565 lines. Download the file for the rest.