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