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="de">3 <!--4 use class="debug" here if you develope a template and want to check-->5 <head>6 <style>7 @charset "UTF-8";8/*------------------------------------*\9 INUIT.CSS10\*------------------------------------*/11/*12Author: Harry Roberts13Twitter: @inuitcss14Author URL: csswizardry.com15Project URL: inuitcss.com16Version: 3.217Date: 24 November 201118 19Copyright 2011 Harry Roberts20 21Licensed under the Apache License, Version 2.0 (the "License");22you may not use this file except in compliance with the License.23You may obtain a copy of the License at24 25 http://apache.org/licenses/LICENSE-2.026 27Unless required by applicable law or agreed to in writing, software28distributed under the License is distributed on an "AS IS" BASIS,29WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.30See the License for the specific language governing permissions and31limitations under the License.32 33*/34/*------------------------------------*\35 CONTENTS36\*------------------------------------*/37/*38RESET39SHARED40MAIN41GRIDS42CLEARFIX43ISLAND44MEDIA45LOGO46NAV47TYPE48IMAGES49FORMS50TABLES51MESSAGES52MISC53CLASSES54DIAGNOSTICS55NARROW56MOBILE57PRINT58*/59 60 61 62 63 64/*------------------------------------*\65 $RESET66\*------------------------------------*/67/*68A more considered reset; more of a restart... csswizardry.com/2011/10/reset-restarted69*/70html,body,div,span,applet,object,iframe,71h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,72a,abbr,address,cite,code,73del,dfn,em,img,ins,kbd,q,s,samp,74small,strong,sub,sup,tt,var,75b,u,i,76dl,dt,dd,ol,ul,li,77fieldset,form,label,legend,78table,caption,tbody,tfoot,thead,tr,th,td,79article,aside,canvas,details,figcaption,figure,80footer,header,hgroup,menu,nav,section,summary,81time,mark,audio,video{82 margin:0;83 padding:0;84}85article,aside,details,figcaption,figure,footer,86header,hgroup,menu,nav,section{87 display:block;88}89h1,h2,h3,h4,h5,h6{90 font-size:1em;91}92table{93 border-collapse:collapse;94 border-spacing:0;95}96strong,b,mark{97 font-weight:bold;98 font-style:inherit;99}100em,i,cite,q,address,dfn,var{101 font-style:italic;102 font-weight:inherit;103}104abbr[title],dfn[title]{105 cursor:help;106 border-bottom:1px dotted;107}108ins{109 border-bottom:1px solid;110}111a,u,ins{112 text-decoration:none;113}114del,s{115 text-decoration:line-through;116}117pre,code,samp,kbd{118 font-family:monospace;119}120small{121 font-size:0.75em;122}123img{124 border:none;125 font-style:italic;126}127input,128select,option,optgroup,129textarea{130 font:inherit;131}132 133 134 135 136 137/*------------------------------------*\138 $SHARED139\*------------------------------------*/140/*141Rather than repeating declarations over and over, let’s make a shared section.142*/143h1,h2,h3,h4,h5,h6,144ul,ol,dl,p,address,figure,pre,fieldset,table,hr,145.nav,.island,.media{146 margin-bottom:24px;147 margin-bottom:1.5rem;148}149figcaption,small{150 font-size:12px;151 font-size:0.75rem;152}153ul,ol,dd{154 margin-left:3em;155}156small,code{157 line-height:1;158}159pre,code,160input,textarea{161 font:inherit;162}163 164 165 166 167 168/*------------------------------------*\169 $MAIN170\*------------------------------------*/171html{172 overflow-y:scroll; /* Force scrollbars 100% of the time */173 font-size:100%; /* Use 16px as per informationarchitects.jp/en/100e2r/ and wilsonminer.com/posts/2008/oct/20/relative-readability/ */174 line-height:1.5; /* A safe default for type of any size. */175 /* You should always specify a colour and background, override these in your own stylesheet if desired. */176 background-color:#fff;177 color:#333;178}179body{180 min-height:100%;181}182 183 184 185 186 187/*------------------------------------*\188 $GRIDS189\*------------------------------------*/190/*191Build a custom grid-system igloo at inuitcss.com192Include this igloo in igloos.css193*/194 195 196 197 198 199/*------------------------------------*\200 $CLEARFIX201\*------------------------------------*/202/*203Fix clearing issues as per: nicolasgallagher.com/micro-clearfix-hack/204*/205.cf,206.grids,207.media{208 zoom:1;209}210.cf:before,211.grids:before,212.media:before,213 214.cf:after,215.grids:after,216.media:after{217 content:"";218 display:table;219}220.cf:after,221.grids:after,222.media:after{223 clear:both;224}225 226 227 228 229 230/*------------------------------------*\231 $ISLAND232\*------------------------------------*/233/*234Use a class of .island whenever you want to box off an area of content as per: csswizardry.com/2011/10/the-island-object/235Extend with classes like .promo to apply different colours etc to draw attention.236*/237.island{238 padding:1.5em;239}240 .island > :last-child{241 margin-bottom:0;242 }243 244 245 246 247 248/*------------------------------------*\249 $MEDIA250\*------------------------------------*/251/*252Based on @stubbornella’s media object: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/253<a class="media promo">254 <img src=product.jpg alt="" class=img>255 <p class=body>Get Product for half price!</p>256</a>257*/258.media{259 display:block;260}261 .media .img{262 float:left;263 margin-right:10px;264 }265 .media .body{266 overflow:hidden;267 margin-bottom:0;268 }269 270 271 272 273 274/*------------------------------------*\275 $LOGO276\*------------------------------------*/277/*278Your logo is an image, not a h1: csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/279*/280.logo,281.logo img{282 display:block;283 width:auto; /* Width of your logo in pixels (ideally a round grid-number) */284 height:auto; /* Height of your logo in pixels */285}286/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */287.logo{288 background:url(/path/to/logo);289}290 .logo:hover{291 /* Hover states */292 background-position:0 -00px;293 }294.logo img{295 position:absolute;296 left:-99999px;297}298 299 300 301 302 303/*------------------------------------*\304 $NAV305\*------------------------------------*/306/*307Create an abstraction, as per: csswizardry.com/2011/09/the-nav-abstraction/308*/309.nav{310 list-style:none;311}312.nav li{313 display:inline;314}315.nav a{316 display:inline-block;317}318 319 320 321 322 323/*------------------------------------*\324 $TYPE325\*------------------------------------*/326/*--- HEADINGS ---*/327h1,.alpha{328 font-size:2em; /* 32px */329 line-height:1.5; /* 48px */330}331h2,.beta{332 font-size:1.5em; /* 24px */333 line-height:1; /* 24px */334}335h3,.gamma{336 font-size:1.25em; /* 20px */337 line-height:1.2; /* 24px */338}339h4,.delta{340 font-size:1.125em; /* 18px */341 line-height:1.333; /* 24px */342}343h5,.epsilon{344 font-weight:bold;345}346h5,.epsilon,347h6,.zeta{348 font-size:1em; /* 16px */349 line-height:1.5; /* 24px */350}351 352/*--- PARAGRAPHS ---*/353/*354Mo’ robust paragraph indenting: csswizardry.com/2010/12/mo-robust-paragraph-indenting/355Uncomment to activate356p+p{357 text-indent:2em;358 margin-top:-1.5em;359}360*/361 362/*--- FIGURES ---*/363figure img{364 display:block;365 margin-bottom:0;366}367 368/*--- LINKS ---*/369/*370Say no to negative hovers: csswizardry.com/2011/05/on-negative-hovers/371A negative hover is one whose appearance is subtracted from on hover rather than added to.372*/373a:visited{374 opacity:0.8; /* A bit basic, but it’s a bare minumum... */375}376a:hover{377 text-decoration:underline;378}379a:active,380a:focus{381 /* Give clicked links a depressed effect. */382 position:relative;383 top:1px;384}385 386/*--- LISTS ---*/387li > ul,388li > ol{389 /* Let’s take care of lists in lists */390 margin-bottom:0;391}392 393/*394A numbered list is NOT the same as an ordered one: csswizardry.com/2011/09/ordered-and-numbered-lists-the-differences/395Use this class when you want a list to be numbered but it has no order.396*/397ul.numbered{398 list-style:decimal outside;399}400dt{401 font-weight:bold;402}403 404/*--- QUOTES ---*/405/*406Big up @boblet: html5doctor.com/blockquote-q-cite/407*/408q{ quotes:"‘" "’" "“" "”"; }409 410q:before{ content:"‘"; content:open-quote; }411q:after{ content:"’"; content:close-quote; }412 413q q:before{ content: "“"; content: open-quote; }414q q:after{ content: "”"; content: close-quote; }415 416blockquote{ quotes: "“" "”"; }417blockquote p:before{ content: "“"; content: open-quote; }418blockquote p:after{ content: ""; content: no-close-quote; }419blockquote p:last-of-type:after{ content: "”"; content: close-quote; }420 421blockquote{422 text-indent:-0.4em;423}424 425/*426Mark up the source of a quote with .source:427<blockquote>428 <p>Lorem ipsum dolor sit amet. <b class=source>Joe Bloggs</b></p>429</blockquote>430*/431.source{432 display:block;433 text-indent:0;434 margin-top:-24px;435 margin-top:-1.5rem;436}437 .source:before{438 content:"—";439 }440 441/*--- GENERAL ---*/442mark{443 background-color:#ffc;444 color:#333;445}446 447/*--- CODE ---*/448pre,449code{450 font-family:"Inconsolata", "Monaco", "Consolas", "Courier New", Courier, monospace;451}452pre{453 overflow:auto;454 line-height:24px; /* Having to define explicit pixel values :( */455}456 457 458 459 460 461/*------------------------------------*\462 $IMAGES463\*------------------------------------*/464img{465 max-width:100%;466 height:auto;467 /* Give it some text styles to offset alt text */468 color:#c00;469}470img.left { margin:0 1.5em 0 0; }471img.right { margin:0 0 0 1.5em; }472 473/*--- FLASH/VIDEO ---*/474object,475embed,476video{477 max-width:100%;478 height:auto;479}480 481 482 483 484 485/*------------------------------------*\486 $FORMS487\*------------------------------------*/488/*489Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...490*/491/*fieldset{492 padding:1.5em;493 border:1px solid #ccc;494}495label{496 display:block;497}498.text-input{499 500}501label,502.text-input,503textarea,504.btn{505 cursor:pointer;506}507 .text-input:active,508 .text-input:focus,509 textarea:active,510 textarea:focus{511 cursor:text;512 }513 514.check-list{515 width:100%;516 overflow:hidden;517 list-style:none;518 margin-left:0;519}520.check-list li{521 width:25%;522 float:left;523}524.check-label{525 display:inline;526}527fieldset > :last-child{528 529 margin-bottom:0;530}*/531 532/*------------------------------------*\533 $TABLES534\*------------------------------------*/535/*536Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...537*/538table{539 width:100%;540 max-width:100%;541}542thead tr:last-of-type th{543 /* Thicker border on the table-headers of the last row in the table head. */544 border-bottom-width:2px;545}546tbody th{547 /* Thicker right border on table-headers in the table body. */548 border-right-width:2px;549}550th:empty{551 /* Hide the borders on any empty table-headers. */552 border:none;553}554th,td{555 vertical-align:top;556 padding:0.75em;557 border:1px solid #ccc;558}559th{560 font-weight:bold;561 text-align:center562}563table [colspan]{564 text-align:center;565}566table [rowspan]{567 vertical-align:middle;568}569/*570Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.571See jsfiddle.net/csswizardry/UJJay/572*/573[colspan="1"]{574 text-align:left;575}576[rowspan="1"]{577 vertical-align:top;578}579tbody tr:nth-of-type(odd){580 background:rgba(0,0,0,0.05);581}582tfoot{583 text-align:center;584}585tfoot td{586 border-top-width:2px;587}588 589 590 591 592 593/*------------------------------------*\594 $MESSAGES595\*------------------------------------*/596/*597Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...598*/599.message{600 font-weight:normal;601 display:block;602 padding:10px 10px 10px 36px;603 border:1px solid #ccc;604 margin-left:0;605 606 -moz-border-radius:2px;607 -webkit-border-radius:2px;608 border-radius:2px;609 -moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;610 -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;611 box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;612}613 /*614 With multiple errors it’s nice to group them:615 <ul class=message>616 <li>Please provide a surname.</li>617 <li>Please enter a valid email address.</li>618 </ul>619 */620 ul.message{621 list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */622 padding:10px 10px 10px 56px;623 }624.error{625 border-color:#fb5766;626 background:url(../img/css/icons/error.png) 10px center no-repeat #fab;627}628.success{629 border-color:#83ba77;630 background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;631}632.info{633 border-color:#85a5be;634 background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;635}636.warning{637 border-color:#d8d566;638 background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;639}640 641 642 643 644 645/*------------------------------------*\646 $MISC647\*------------------------------------*/648.accessibility{649 /* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */650 position:absolute;651 left:-99999px;652}653.more-link:after{654 /* Too many people use » in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */655 content:" »";656}657 658 659 660 661 662/*------------------------------------*\663 $CLASSES664\*------------------------------------*/665/*666Some not-too-pretty and insemantic classes to do odd jobs.667*/668.left { float:left; }669.right { float:right; }670.clear { clear:both; float:none; }671 672.text-left { text-align:left; }673.text-right { text-align:right; }674.text-center,675.text-centre { text-align:center; }676 677 678 679 680 681/*------------------------------------*\682 $DIAGNOSTICS683\*------------------------------------*/684/*685Apply a class of .debug to the html element ONLY WHEN YOUR SITE IS ON DEV.686*/687 688/*689Red border == something is wrong690Yellow border == something may be wrong, you should double check.691Green border == perfect, nice one!692*/693 694/*--- STYLES ---*/695.debug [style],696.debug style{697 /* Inline styles aren’t great, can this be avoided? */698 outline:5px solid yellow;699}700 .debug style{701 display:block;702 }703 704/*--- IMAGES ---*/705.debug img{706 /* Images without alt attributes are bad! */707 outline:5px solid red;708}709.debug img[alt]{710 /* Images with alt attributes are good! */711 outline-color:green;712}713.debug img[alt=""]{714 /* Images with empty alt attributes are okay in the right circumstances. */715 outline-color:yellow;716}717 718/*--- LINKS ---*/719.debug a{720 /* Links without titles are yellow, does your link need one? */721 outline:5px solid yellow;722}723.debug a[title]{724 /* Links with titles are green, title attributes can be very useful! */725 outline-color:green;726}727.debug a[]{728 /* Were you meant to leave that hash in there? */729 outline-color:yellow;730}731.debug a[target]/*,732.debug a[onclick],733.debug a[href*=javascript]*/{734 /* What were you thinking?! */735 outline-color:red;736}737 738/*--- CLASSES/IDS ---*/739.debug [class=""],740.debug [id=""]{741 /* Is this element meant to have an empty class/ID? */742 outline:5px solid yellow;743}744 745 746 747 748 749/*------------------------------------*\750 $NARROW751\*------------------------------------*/752/*753CSS for tablets and narrower devices754*/755@media (min-width: 721px) and (max-width: 960px){756}757/*--- END NARROW ---*/758 759 760 761 762 763/*------------------------------------*\764 $MOBILE765\*------------------------------------*/766/*767CSS for mobile devices.768Linearise it!769*/770@media (max-width: 720px){771/*------------------------------------*\772 MAIN773\*------------------------------------*/774html{775 font-size:1.125em; /* Make text slightly larger for smaller devices to improve readability. */776}777body{778 -webkit-text-size-adjust:none;779}780.wrapper{781 width:auto;782}783.grids{784 margin:0;785 width:auto;786}787[class^="grid-"],788.grids [class^="grid-"]{789 width:auto;790 float:none;791 margin:0;792}793 794 795 796 797 798/*------------------------------------*\799 LOGO800\*------------------------------------*/801.logo{802 margin-left:auto;803 margin-right:auto;804}805 806 807 808 809 810/*------------------------------------*\811 TYPE812\*------------------------------------*/813/*--- LISTS ---*/814ul,815ol,816dl{817 margin-left:1.5em;818}819 820 821 822 823 824/*------------------------------------*\825 IMAGES826\*------------------------------------*/827img.left,828img.right { max-width:50%; height:auto; }829}830/*--- END MOBILE ---*/831 832 833 834 835 836/*------------------------------------*\837 $PRINT838\*------------------------------------*/839/*840Good ol’ fashioned paper...841*/842@media print{843/*------------------------------------*\844 MAIN845\*------------------------------------*/846/*847Give everything some decent contrast.848*/849*{850 background-color:#fff;851 color:#000;852 text-shadow:none!important;853}854/*855Set a nice measure and take the font down to print-acceptable sizes.856*/857body{858 font-size:0.75em; /* 12px (if base font-size was 16px) */859}860.wrapper{861 width:75%;862 margin:0 auto;863}864/*865A list of things you don’t want printing. Add to/subtract from as necessary. 866*/867.nav,868.footer{869 display:none;870}871.logo img{872 position:static;873}874/*875Linearise876*/877.grids{878 width:auto;879}880[class^="grid-"]{881 width:auto;882 float:none;883 clear:both;884}885/*886Don’t let images break anything.887*/888img{889 max-width:100%;890 height:auto;891}892/*893Messages look odd with just borders.894*/895.message{896 border:none;897 font-weight:bold;898}899/*900Display the href of any links.901*/902a:link:after,a:visited:after{903 content:" (" attr(href) ")";904 font-size:smaller;905}906/*907Any links that are root relative to your site need prepending with your URL.908*/909a[href^="/"]:after{910 content:" (http://yoururlhere.com" attr(href) ")";911 font-size:smaller;912}913/*914Any Flash/video content can’t be printed so leave a message.915*/916object:after{917 content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";918 display:block;919 font-weight:bold;920 margin-bottom:1.5em;921}922}923/*--- END PRINT ---*/924 925 926/*927Page container928*/929.wrapper{930 max-width:1080px;931 margin:0 auto;932 padding:1.5em 1em;933}934 935/*------------------------------------*\936 GRIDS937\*------------------------------------*/938/*939Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...940We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>941*/942.grids{943 max-width:1120px;944 clear:both;945 margin:0 0 0 -2.679%;946 list-style:none; /* So we can make grids out of lists. */947}948 949/*950Here we are using an attribute selector to detect the string 'grid-' in an element's class.951This works by assuming that anything we call grid- we also want to be a grid item. It means less code and less for you to remember!952 953Ensure any grid item's FIRST class is a grid- class. e.g.954VALID: class="grid-4 text-centre"955INVALID: class="left grid-4"956*/957[class^="grid-"]{958 float:left;959 margin:0 2.679% 0 0;960}961.grids [class^="grid-"]{962 margin:0 0 0 2.679%;963}964 965/*966Nested grids won't work with fluid layouts :(967*/968 969.grid-1{ width:3.571% }970.grid-2{ width:9.821% }971.grid-3{ width:16.071% }972.grid-4{ width:22.321% }973.grid-5{ width:28.571% }974.grid-6{ width:34.821% }975.grid-7{ width:41.071% }976.grid-8{ width:47.321% }977.grid-9{ width:53.571% }978.grid-10{ width:59.821% }979.grid-11{ width:66.071% }980.grid-12{ width:72.321% }981.grid-13{ width:78.571% }982.grid-14{ width:84.821% }983.grid-15{ width:91.071% }984.grid-16{ width:97.321%; margin:0; }985 986 987@charset "utf-8";988/*------------------------------------*\989 eve-styles.css990\*------------------------------------*/991 992/* Design of Template ResponseEve (eve-styles.css) by Silvia Gamsjäger (SiGa)*/993/*994Twitter: @sg_layout995Author URL: sg-layout.com996Project URL: sg-layout.com997Version: 1.0998Date: January 2012999License: MIT License (X11)1000 http://www.opensource.org/licenses/MIT1001 1002Copyright (c) 2012 Silvia Gamsjäger (SiGa)1003 1004You´ll find a copy of the license in the files1005you´ve downloaded.1006*/1007 1008div.main-content1009{1010 text-align:center;1011}1012/*------------------------------------*\1013 MAIN1014\*------------------------------------*/1015html{font-family: Arial, sans-serif;color: #888;}1016body{background:url(../img/bg.jpg) repeat;}1017 1018.social {text-align: right; position: relative; margin: 4px 0;}1019.social img {margin-bottom: 0;}1020 1021#footer {border-radius: 10px; background-color: #A5C100; color: #fff; padding: 10px 0;}1022#footer p {margin: 0; padding: 10px 0;}1023 1024/*------------------------------------*\1025 LOGO1026\*------------------------------------*/1027 1028#logo, #logo img{display:block;width:200px; height:100px;}1029#logo{float: left; background:url(../img/logo.png) top center no-repeat; position: relative; margin: 0; z-index: 120; display: inline; /* fixes IE6 margin bug */}1030#logo img{position:absolute; left:-99999px;}1031 1032/*------------------------------------*\1033 TOP NAVIGATION1034\*------------------------------------*/1035.nav {list-style:none; margin:0 0 1.5em 0;}1036 1037/*Add a class of centred/centered to create a centred nav.*/1038 1039#nav.main{1040 float: right;1041 text-align:center;1042 margin: 0.5em 0 0 0;1043 padding: 0.4em 0;1044 font-family:'Oswald', Arial, sans-serif;1045}1046#nav.main li {display:inline; float:none;}1047 1048#nav.main a{1049 display:inline-block;1050 padding: 0.6em 1.2em;1051 background-color: #EFEFEF;1052 border-radius: 10px;1053 border-right: 1px solid #bbb;1054 border-bottom: 2px solid #bbb;1055 color: #666;text-decoration:none; 1056 text-transform:uppercase; 1057 text-shadow: 1px 1px 1px #fff;1058 font-size: 1.1em;1059 margin: 0 0 0.6em 0; 1060}1061#nav.main a:hover{color: #666; text-shadow: 1px 1px 0px #fff; background-color: #EAFFC4; }1062 1063#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #A5C100; letter-spacing: 1px;}1064 1065#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}1066 1067/*------------------------------------*\1068 TYPE1069\*------------------------------------*/1070/* @font-face kit by Fonts2u (http://www.fonts2u.com/oswald.schriftart) */1071/* Font Oswald, SIL-licenced, author Vernon Adams */ 1072@font-face {font-family:"Oswald";src:url("Oswald.eot?") format("eot"),url("Oswald.woff") format("woff"),url("Oswald.ttf") format("truetype"),url("Oswald.svg#Oswald") format("svg");font-weight:normal;font-style:normal;}1073 1074/*--- HEADINGS ---*/1075h1, h2, h3, h4, h5, h6 {1076 font-family: 'Oswald', Arial, sans-serif;1077 font-style: normal;1078 font-weight: 500;1079 color: #A5C100;1080 text-shadow: 1px 1px 0px #6D8901;1081}1082 1083h1{font-size:2.5em; margin-bottom:0.75em; line-height:1.5;}1084h2{font-size:2.3em; margin-bottom:1em; line-height:1.4em;}1085h3{font-size:2em; margin-bottom:1em; line-height:1.3;}1086h4{font-size:1.5em; margin-bottom:0.8em; line-height:auto; text-shadow: none; font-weight:bold;}1087h5{font-size:1.3em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}1088h6{font-size:1.2em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}1089/*------------------------------------*\1090 CLASSES1091\*------------------------------------*/1092/*1093Some not-too-pretty and insemantic classes to do odd jobs.1094*/1095.left { float:left!important; }1096.right { float:right!important; }1097 1098.intro {padding: 10px 0; color: #999;}1099.intro h2 {font-size: 3em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}1100.intro p {font-family: 'Oswald', Arial, sans-serif; font-size: 1.9em; line-height: 1.2em; letter-spacing: -2px; padding-right: 15px;}1101 1102.quote {font-family: Arial, sans-serif; font-size: 1.4em; letter-spacing: -1px; font-style: italic; line-height: 1.3em; } /*a styled quote in addition to blockquote*/1103.quote span {display: block; font-size: 0.7em; padding-top: 10px; font-style: normal;}1104 1105/*Colored boxes, green and grey*/1106.green, .grey {-webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; zoom: 1; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 15px!important;}1107.green {background-color: #EAFFC4;}1108.grey {background-color: #EFEFEF;}1109.green p, .grey p {padding:10px 30px 0;}1110.green h2, .grey h2, .green h3, .grey h3, .green h4, .grey h4 {border-bottom: 5px solid #fff; margin-bottom: 0; }1111.green h2, .grey h2, .green h3, .grey h3, .green h4, .grey h4, .green h5, .grey h5, .green h6, .grey h6 {padding: 0px 30px; line-height: 1.7em;}1112 1113/*Additional whitespace top,bottom or both for any element. You don´t have to use hr or lots of <br />*/1114.top {margin-top: 30px!important;}1115.bottom {margin-bottom: 30px!important;}1116 1117.ticker {border: none!important; background: none!important; line-height: auto;}1118 1119/*------------------------------------*\1120 LINKS and BUTTON1121\*------------------------------------*/1122 1123a{ color: #669B02;text-decoration:none;}1124 1125a.button {1126 font-family: Arial, sans-serif;1127 font-size: 1em;1128 line-height: auto;1129 background-color: #6D8901;/* fallback for browsers that don´t support gradients */1130 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C100), to(#6D8901));/* Safari 4+, Chrome 1-9 */1131 background-image: -moz-linear-gradient(top, #A5C100, #6D8901);/* Firefox 3.6+ */1132 background-image: -o-linear-gradient(top, #A5C100, #6D8901);/* Opera 11.10+ */1133 background-image: -webkit-linear-gradient(top, #A5C100, #6D8901);/* Safari 5.1+, Mobile Safari, Chrome 10+ */1134 background-image: -ms-linear-gradient(top, #A5C100, #6D8901);/* IE 10+ */1135 border: 1px solid #799C01;1136 border-radius: 5px;1137 box-shadow: 0 1px 0 0 #9BCB76 inset;1138 color: white;1139 position: relative;1140 text-shadow: 0 1px 0 #424F1C;1141 text-decoration: none;1142 margin: 15px 0;1143 text-align: center;1144 font-weight: bold;1145 padding: 0.3em 0.7em;1146 display: inline-block;}1147 1148a.button:hover {1149 background-color: #A5C100;1150 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6D8901), to(#A5C100));1151 background-image: -moz-linear-gradient(#6D8901, #A5C100);1152 background-image: -moz-linear-gradient(top, #6D8901, #A5C100);1153 background-image: -o-linear-gradient(top, #6D8901, #A5C100);1154 background-image: -webkit-linear-gradient(top, #6D8901, #A5C100);1155 background-image: -ms-linear-gradient(top, #6D8901, #A5C100);}1156 1157/*------------------------------------*\1158 LISTS1159\*------------------------------------*/1160ul.check {list-style:none;1161 list-style-image:url(../img/check.png);1162 list-style-position: inside;1163 }1164/*------------------------------------*\1165 IMAGES1166\*------------------------------------*/1167img{margin-bottom: 10px;}1168table img1169{margin:0;1170}1171img.left { margin:0 20px 10px 0; }1172img.right { margin:0 0 10px 20px; }1173/* due to article of Chris Coyier 1174http://css-tricks.com/441-resizeable-images-at-full-resolution/ */1175img.expand { width: 24em; margin: 0; }1176 1177/*-------------------------------------------*\1178 No borders and background for form-tables1179\*-------------------------------------------*/1180.form th, .form td {border:none; background:none; padding: 0.75em 0;}1181.form tbody tr:nth-of-type(odd){background:none;}1182/*------------------------------------*\1183 hr with image (leaf)1184\*------------------------------------*/1185hr{margin:1em 0; width: 100%; height: 26px; background: url(../img/hr.png) no-repeat top center; border:none;}1186 1187/******************************************************************************************************1188TABS by Sohtanaka, CSS tweaked by SiGa1189*******************************************************************************************************/1190ul.tabs {1191 margin: 0;1192 padding: 0;1193 list-style: none;1194 height: 32px; /*--Set height of tabs--*/1195 width: 100%;1196 display: block;1197}1198ul.tabs li {1199 float: left;1200 margin: 0;