[{"data":1,"prerenderedAt":93},["ShallowReactive",2],{"room:07-web-standards":3},{"path":4,"meta":5,"html":82,"css":83,"snippets":84},"07-web-standards",{"id":6,"slug":4,"title":7,"years":8,"cta":9,"summary":12,"context":13,"traits":17,"tech":42,"thenVsNow":48,"snippets":49,"sources":64,"recreated":80},"07","Web standards & CSS layouts","2001–2007",{"next":10,"prev":11},"Next chapter →","← Previous chapter","Designers threw out layout tables and proved one clean XHTML document could wear completely different designs, using nothing but floats, clever background images and a stylesheet.",{"screens":14,"connection":15,"browsers":16},"800×600 giving way to 1024×768; the 760 px fixed-width page was the safe default","Early broadband (DSL, cable) for many, dial-up still common; small CSS files beat table soup","Internet Explorer 6 dominant and buggy; Firefox 1.0 (2004) and Safari pushed standards support",[18,21,24,27,30,33,36,39],{"id":19,"label":20},"semantic","Semantic XHTML: headings, lists, no layout tables",{"id":22,"label":23},"style-switcher","One document, many stylesheets",{"id":25,"label":26},"floats","Float-based columns cleared with a clearfix",{"id":28,"label":29},"faux-columns","Faux columns: a tiled background fakes equal heights",{"id":31,"label":32},"sliding-doors","Sliding-doors tabs that stretch with their text",{"id":34,"label":35},"image-replacement","Image replacement with text-indent: -9999px",{"id":37,"label":38},"liquid-elastic","Fixed, liquid and elastic widths",{"id":40,"label":41},"badges","\"Valid XHTML \u002F Valid CSS\" badges",[43,44,45,46,47],"XHTML 1.0 Strict with lowercase, closed, quoted markup","CSS floats and the :after clearfix hack","Background-image sprites for tabs, logos and faux columns","Em-based elastic layouts and percentage-based liquid layouts","Alternate stylesheets and JavaScript style switchers (here: radio buttons with :has())","Floats, clearfix and faux columns were replaced by flexbox and grid; image replacement by web fonts and SVG; the idea of separating content from presentation won outright.",[50,55,59,62],{"file":51,"lang":52,"caption":53,"region":54},"demo.html","html","The one shared document: no tables, no font tags","markup",{"file":56,"lang":57,"caption":58,"region":31},"era.css","css","Sliding doors: two background images per tab",{"file":56,"lang":57,"caption":60,"region":61},"Floats, clearfix and liquid faux columns","clearfix",{"file":56,"lang":57,"caption":63,"region":34},"Phark image replacement",[65,68,71,74,77],{"label":66,"url":67},"Douglas Bowman, “Sliding Doors of CSS” (A List Apart, 2003)","https:\u002F\u002Falistapart.com\u002Farticle\u002Fslidingdoors\u002F",{"label":69,"url":70},"Dan Cederholm, “Faux Columns” (A List Apart, 2004)","https:\u002F\u002Falistapart.com\u002Farticle\u002Ffauxcolumns\u002F",{"label":72,"url":73},"CSS Zen Garden","https:\u002F\u002Fwww.csszengarden.com\u002F",{"label":75,"url":76},"Web Standards Project (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_Standards_Project",{"label":78,"url":79},"XHTML 1.0 (W3C Recommendation)","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002F",[81],"Period style switchers swapped \u003Clink rel=\"alternate stylesheet\"> elements with JavaScript and a cookie; here three scoped themes are chosen with radio buttons and :has(), so it works without JS.","\u003Cdiv class=\"sg\" id=\"sg\">\n  \u003Cform class=\"sg__switcher\" action=\"#sg\" data-trait=\"style-switcher liquid-elastic\" aria-label=\"Style switcher\">\n    \u003Cfieldset>\n      \u003Clegend>Stylesheet\u003C\u002Flegend>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-theme\" id=\"sgt-a\" value=\"a\" checked> Wisteria\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-theme\" id=\"sgt-b\" value=\"b\"> Raster\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-theme\" id=\"sgt-c\" value=\"c\"> Afterhours\u003C\u002Flabel>\n    \u003C\u002Ffieldset>\n    \u003Cfieldset>\n      \u003Clegend>Layout\u003C\u002Flegend>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-width\" id=\"sgw-fixed\" value=\"fixed\" checked> Fixed 760px\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-width\" id=\"sgw-liquid\" value=\"liquid\"> Liquid %\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-width\" id=\"sgw-elastic\" value=\"elastic\"> Elastic em\u003C\u002Flabel>\n    \u003C\u002Ffieldset>\n    \u003Cfieldset>\n      \u003Clegend>Text size\u003C\u002Flegend>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-size\" id=\"sgs-s\" value=\"s\"> A\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-size\" id=\"sgs-m\" value=\"m\" checked> A+\u003C\u002Flabel>\n      \u003Clabel>\u003Cinput type=\"radio\" name=\"sg-size\" id=\"sgs-l\" value=\"l\"> A++\u003C\u002Flabel>\n    \u003C\u002Ffieldset>\n    \u003Cp class=\"sg__hint\">Same XHTML, three stylesheets. Try \u003Cem>Elastic\u003C\u002Fem> and then change the text size. On a phone, the fixed 760px page scrolls sideways, just as it did in 2005: pick \u003Cem>Liquid\u003C\u002Fem>.\u003C\u002Fp>\n  \u003C\u002Fform>\n\n  \u003Cdiv class=\"sg__stage\">\n\u003Cdiv id=\"sg-page\" class=\"sg__page\" data-trait=\"semantic\">\n  \u003Cdiv id=\"header\">\n\u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 07\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">2001–2007\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Web standards & CSS layouts\u003C\u002Fspan>\u003C\u002Fp>\n    \u003Ch1 id=\"logo\" data-trait=\"image-replacement\">\u003Cspan>The Semantic Garden\u003C\u002Fspan>\u003C\u002Fh1>\n    \u003Cp id=\"tagline\">One document. Many gardens. Plant a stylesheet and watch it grow.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\n  \u003Cul id=\"nav\" class=\"clearfix\" data-trait=\"sliding-doors\">\n    \u003Cli class=\"current\">\u003Ca href=\"#sg-page\">\u003Cspan>Home\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#sg-why\">\u003Cspan>Why CSS?\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#sg-prune\">\u003Cspan>Pruning\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#sg-join\">\u003Cspan>Submit a design\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\n  \u003Cdiv id=\"wrap\" class=\"clearfix\" data-trait=\"floats faux-columns\">\n    \u003Cdiv id=\"content\">\n      \u003Cp class=\"intro\">Your boss says tables are how websites are built. Your boss also prints out\n        his email. This page has \u003Cstrong>no layout tables\u003C\u002Fstrong>, no \u003Ccode><font>\u003C\u002Fcode> tags and\n        no spacer GIFs. Everything you see is decided by one external stylesheet.\u003C\u002Fp>\n\u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F08-blogs-myspace\u002F\">\u003Cspan class=\"era-cta__label\">Next chapter →\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2003–2008 · Blogs & MySpace\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F06-y2k\u002F\">\u003Cspan class=\"era-cta__label\">← Previous chapter\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">1998–2003 · Y2K chrome & futurism\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n\n      \u003Ch2 id=\"sg-why\">\u003Cspan class=\"num\">01\u003C\u002Fspan> Why plant in CSS?\u003C\u002Fh2>\n      \u003Cp>Structure goes in the markup; presentation goes in the stylesheet. Keep them apart and a\n        redesign becomes a single file upload, your pages shrink by a third, and screen readers finally\n        hear headings instead of nested \u003Ccode><td>\u003C\u002Fcode> soup.\u003C\u002Fp>\n      \u003Cblockquote>\u003Cp>“Markup is a promise about meaning. Style is a suggestion about looks.”\u003C\u002Fp>\n        \u003Ccite>overheard at a web standards meetup, 2004\u003C\u002Fcite>\u003C\u002Fblockquote>\n\n      \u003Ch2 id=\"sg-prune\">\u003Cspan class=\"num\">02\u003C\u002Fspan> Pruning the markup\u003C\u002Fh2>\n      \u003Cul class=\"checklist\">\n        \u003Cli>Headings are \u003Ccode><h1>\u003C\u002Fcode> to \u003Ccode><h3>\u003C\u002Fcode>, in order. No more \u003Ccode><b><font size=\"4\">\u003C\u002Fcode>.\u003C\u002Fli>\n        \u003Cli>Navigation is a list, because it \u003Cem>is\u003C\u002Fem> a list.\u003C\u002Fli>\n        \u003Cli>Lowercase tags, quoted attributes, every element closed. \u003Ccode><br \u002F>\u003C\u002Fcode> included.\u003C\u002Fli>\n        \u003Cli>The logo is real text, swapped for a picture with \u003Ccode>text-indent\u003C\u002Fcode>.\u003C\u002Fli>\n      \u003C\u002Ful>\n\n      \u003Ch3>Hacks every gardener knows by heart\u003C\u002Fh3>\n      \u003Cdl class=\"hacks\">\n        \u003Cdt>The box model hack\u003C\u002Fdt>\n        \u003Cdd>Internet Explorer 5 puts padding \u003Cem>inside\u003C\u002Fem> the width. Feed it one width, then hide the right one behind a parser bug.\u003C\u002Fdd>\n        \u003Cdt>The clearfix\u003C\u002Fdt>\n        \u003Cdd>Floats escape their parent. A generated \u003Ccode>:after\u003C\u002Fcode> block with \u003Ccode>clear: both\u003C\u002Fcode> pulls the parent back around them.\u003C\u002Fdd>\n        \u003Cdt>The double-margin float bug\u003C\u002Fdt>\n        \u003Cdd>IE6 doubles the margin on a floated box. Add \u003Ccode>display: inline\u003C\u002Fcode>; nobody else minds.\u003C\u002Fdd>\n      \u003C\u002Fdl>\n\n      \u003Ch2 id=\"sg-join\">\u003Cspan class=\"num\">03\u003C\u002Fspan> Submit a design\u003C\u002Fh2>\n      \u003Cp>Download the XHTML and the sample CSS. You may change \u003Cem>only\u003C\u002Fem> the stylesheet and your own\n        images. Make it beautiful, make it strange, make it validate. Then send it in.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv id=\"sidebar\">\n      \u003Ch3>Select a garden\u003C\u002Fh3>\n      \u003Cul class=\"designs\">\n        \u003Cli>\u003Clabel for=\"sgt-a\">\u003Cb>Wisteria\u003C\u002Fb> by Hazel Moorcroft\u003C\u002Flabel>\u003C\u002Fli>\n        \u003Cli>\u003Clabel for=\"sgt-b\">\u003Cb>Raster\u003C\u002Fb> by Kaj Lindqvist\u003C\u002Flabel>\u003C\u002Fli>\n        \u003Cli>\u003Clabel for=\"sgt-c\">\u003Cb>Afterhours\u003C\u002Fb> by DJ Semicolon\u003C\u002Flabel>\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Ch3>Archives\u003C\u002Fh3>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"#sg-page\">March 2005\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#sg-page\">February 2005\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#sg-page\">January 2005\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Ch3>Resources\u003C\u002Fh3>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"#sg-page\">View this design's CSS\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#sg-page\">Standards FAQ\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#sg-page\">Translations\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv id=\"footer\" data-trait=\"badges\">\n    \u003Cp class=\"badges\">\n      \u003Cspan class=\"badge\">\u003Cb>XHTML\u003C\u002Fb>\u003Ci>1.0 valid\u003C\u002Fi>\u003C\u002Fspan>\n      \u003Cspan class=\"badge\">\u003Cb>CSS\u003C\u002Fb>\u003Ci>valid\u003C\u002Fi>\u003C\u002Fspan>\n      \u003Cspan class=\"badge\">\u003Cb>WCAG\u003C\u002Fb>\u003Ci>AA\u003C\u002Fi>\u003C\u002Fspan>\n      \u003Cspan class=\"badge\">\u003Cb>RSS\u003C\u002Fb>\u003Ci>2.0\u003C\u002Fi>\u003C\u002Fspan>\n    \u003C\u002Fp>\n    \u003Cp>Last tended 14 March 2005. Best viewed in \u003Cem>any\u003C\u002Fem> browser that respects the standards.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 07: Web standards. One XHTML document, three stylesheets, built only with\n   floats, clearfix, faux columns, sliding doors and image replacement. *\u002F\n[data-era=\"07\"] {\n  background: #d6d3cc;\n  color: #222;\n  font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;\n  transition: background-color 0.4s;\n\n  .sg {\n    padding: 16px 0 32px;\n  }\n\n  \u002F* ---------- The style switcher widget (a 2005 standardista staple) ---------- *\u002F\n  .sg__switcher {\n    max-width: 760px;\n    margin: 0 auto 16px;\n    padding: 8px 12px;\n    background: #fff;\n    border: 1px solid #999;\n    font: 12px\u002F1.4 Verdana, Geneva, sans-serif;\n    color: #333;\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px 18px;\n    align-items: center;\n  }\n  .sg__switcher fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 2px 10px;\n    align-items: center;\n  }\n  .sg__switcher legend {\n    float: left;\n    margin-right: 6px;\n    font-weight: bold;\n    text-transform: uppercase;\n    font-size: 10px;\n    letter-spacing: 0.1em;\n    color: #4f6b34;\n  }\n  .sg__switcher label {\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .sg__switcher input {\n    accent-color: #4f6b34;\n    margin: 0 3px 0 0;\n    vertical-align: -2px;\n  }\n  .sg__hint {\n    margin: 0;\n    flex-basis: 100%;\n    color: #555;\n    font-size: 11px;\n  }\n  .sg__switcher :focus-visible {\n    outline: 2px solid #4f6b34;\n    outline-offset: 2px;\n  }\n\n  \u002F* Fixed widths need room: the stage scrolls sideways on small screens. *\u002F\n  .sg__stage {\n    overflow-x: auto;\n    padding: 0 8px;\n  }\n\n  \u002F* ---------- Structure, shared by every design ---------- *\u002F\n  .clearfix:after {\n    content: '.';\n    display: block;\n    height: 0;\n    clear: both;\n    visibility: hidden;\n  }\n  #wrap {\n    background-repeat: repeat-y;\n    background-position: 70% 0; \u002F* liquid faux columns: the seam sits at 70% *\u002F\n  }\n  #content {\n    float: left;\n    width: 70%;\n  }\n  #sidebar {\n    float: right;\n    width: 30%;\n  }\n\n  #sg-page {\n    margin: 0 auto;\n    width: 760px;\n    font-size: 80%;\n    line-height: 1.6;\n    transition: width 0.35s ease, font-size 0.2s;\n  }\n  #content > *,\n  #sidebar > * {\n    margin-left: 1.6em;\n    margin-right: 1.6em;\n  }\n  #content {\n    padding-bottom: 1.5em;\n  }\n  #sidebar ul {\n    list-style: none;\n    padding: 0;\n  }\n  #sidebar li {\n    margin: 0 0 0.3em;\n  }\n  #sidebar label {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n  #footer {\n    clear: both;\n    padding: 1em 1.6em;\n  }\n  #footer p {\n    margin: 0.4em 0;\n  }\n  .hacks dt {\n    font-weight: bold;\n    margin-top: 0.6em;\n  }\n  .hacks dd {\n    margin: 0 0 0 1.4em;\n  }\n  #content h3 {\n    font-size: 1.1em;\n    margin-top: 1.4em;\n    margin-bottom: 0.2em;\n  }\n  code {\n    font-family: 'Courier New', Courier, monospace;\n    font-size: 1.05em;\n  }\n\n  \u002F* Phark image replacement: real text for robots and screen readers,\n     shoved off-screen; a picture of the text sits in the background. *\u002F\n  #logo {\n    margin: 0;\n    height: 84px;\n    text-indent: -9999px;\n    overflow: hidden;\n    background-repeat: no-repeat;\n    background-position: 0 0;\n  }\n  :root.readable & #logo {\n    text-indent: 0;\n    height: auto;\n  }\n\n  \u002F* Sliding doors: a wide left image on the \u003Ca>, a narrow right cap on the\n     \u003Cspan>. The tab grows with its text; hover slides both sprites up 40px. *\u002F\n  #nav {\n    margin: 0;\n    padding: 0 0 0 1.6em;\n    list-style: none;\n  }\n  #nav li {\n    float: left;\n    margin: 0 3px 0 0;\n  }\n  #nav a {\n    float: left;\n    padding-left: 12px;\n    text-decoration: none;\n    background-repeat: no-repeat;\n    background-position: 0 0;\n  }\n  #nav a span {\n    float: left;\n    display: block;\n    height: 40px;\n    line-height: 42px;\n    padding: 0 16px 0 4px;\n    background-repeat: no-repeat;\n    background-position: 100% 0;\n  }\n  #nav a:hover,\n  #nav a:hover span,\n  #nav a:focus-visible,\n  #nav a:focus-visible span {\n    background-position-y: -40px;\n  }\n  #nav .current a,\n  #nav .current a span {\n    background-position-y: -80px;\n  }\n  #nav a:focus-visible {\n    outline: 2px dotted currentColor;\n    outline-offset: -4px;\n  }\n\n  \u002F* ---------- Era stamp: a quiet dateline above the logo ---------- *\u002F\n  .era-stamp {\n    margin: 0 0 0.4em;\n    font-size: 0.85em;\n    line-height: 1.4;\n    color: var(--sg-stamp, #555);\n  }\n  .era-stamp__no {\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n    color: var(--sg-stamp-no, #333);\n  }\n  .era-stamp__years:before,\n  .era-stamp__title:before {\n    content: '\\00b7  ';\n  }\n\n  \u002F* ---------- Travel buttons: a sprite-gradient button and a plain text link ---------- *\u002F\n  \u002F* The gradient is one tall \"sprite\"; hover slides it up, the way 2005 rollovers\n     swapped halves of a single background image. *\u002F\n  .era-cta {\n    margin: 1.2em 1.6em 0.4em;\n  }\n  .era-cta__next {\n    display: inline-block;\n    padding: 0.55em 1.1em 0.5em;\n    border: 1px solid var(--sg-cta-edge, #3b5226);\n    border-radius: 4px;\n    color: var(--sg-cta-ink, #fff);\n    text-decoration: none;\n    background: linear-gradient(var(--sg-cta-hi, #5e7a43), var(--sg-cta-lo, #3b5226) 50%, var(--sg-cta-hover-hi, #4a6532) 50%, var(--sg-cta-hover-lo, #26371a)) 0 0 \u002F 100% 200% no-repeat;\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.35);\n  }\n  .era-cta__next:hover,\n  .era-cta__next:focus-visible {\n    background-position: 0 100%;\n  }\n  .era-cta__next .era-cta__label {\n    display: block;\n    font-weight: bold;\n    font-size: 1.15em;\n  }\n  .era-cta__next .era-cta__to {\n    display: block;\n    font-size: 0.85em;\n    opacity: 0.95;\n  }\n  .era-cta__prev {\n    display: block;\n    width: fit-content;\n    margin: 0.7em 0 0;\n    color: var(--sg-cta-link, #4f6b34);\n    font-size: 0.9em;\n  }\n  .era-cta__prev .era-cta__to {\n    color: var(--sg-stamp, #555);\n  }\n  .era-cta__prev .era-cta__to:before {\n    content: '(';\n  }\n  .era-cta__prev .era-cta__to:after {\n    content: ')';\n  }\n  .era-cta a:focus-visible {\n    outline: 2px dotted var(--sg-focus, #222);\n    outline-offset: 3px;\n  }\n\n  .badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  .badge {\n    display: inline-flex;\n    font: 10px\u002F15px Verdana, Geneva, sans-serif;\n    border: 1px solid #555;\n    height: 15px;\n    overflow: hidden;\n  }\n  .badge b,\n  .badge i {\n    padding: 0 4px;\n    font-style: normal;\n  }\n  .badge b {\n    background: #fff;\n    color: #333;\n  }\n  .badge i {\n    background: #5e7a43;\n    color: #fff;\n  }\n\n  \u002F* ---------- Layout toggles: fixed, liquid, elastic ---------- *\u002F\n  .sg:has(#sgw-fixed:checked) #sg-page { width: 760px; }   \u002F* pixels: the \"safe\" 800x600 width *\u002F\n  .sg:has(#sgw-liquid:checked) #sg-page { width: 92%; }    \u002F* percent: fills any window *\u002F\n  .sg:has(#sgw-elastic:checked) #sg-page { width: 58em; }  \u002F* ems: grows with the text size *\u002F\n  .sg:has(#sgs-s:checked) #sg-page { font-size: 68%; }\n  .sg:has(#sgs-m:checked) #sg-page { font-size: 80%; }\n  .sg:has(#sgs-l:checked) #sg-page { font-size: 96%; }\n\n  \u002F* =========================================================\n     DESIGN A: \"Wisteria\" by Hazel Moorcroft. Organic floral.\n     ========================================================= *\u002F\n  &:has(#sgt-a:checked) {\n    background: #c9c2d4 url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='24' height='24'>\u003Ccircle cx='6' cy='6' r='1.5' fill='%23b7aec6'\u002F>\u003Ccircle cx='18' cy='18' r='1.5' fill='%23b7aec6'\u002F>\u003C\u002Fsvg>\");\n  }\n  .sg:has(#sgt-a:checked) {\n    --sg-stamp: #6b5a7e;\n    --sg-stamp-no: #4f6b34;\n    --sg-cta-link: #5b3f7d;\n    --sg-focus: #5b3f7d;\n    .era-stamp {\n      font-style: italic;\n    }\n    .era-stamp__no {\n      font-style: normal;\n      font-size: 0.85em;\n    }\n    .era-cta__next {\n      font-style: italic;\n    }\n    #sg-page {\n      background: #fbf8ef;\n      border: 1px solid #a99bbd;\n      font-family: Georgia, 'Times New Roman', serif;\n      color: #3b3346;\n      box-shadow: 0 0 0 6px #ece5f2;\n    }\n    #header {\n      min-height: 150px;\n      padding: 22px 1.6em 0;\n      box-sizing: border-box;\n      background: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='260' height='150'>\u003Cpath d='M260 4C200 10 170 30 150 60S100 100 60 96' fill='none' stroke='%237d9a5b' stroke-width='3'\u002F>\u003Cpath d='M150 60c6-14 22-16 30-10-10 2-20 8-30 10zM110 86c-4-14 6-24 16-24-4 8-8 18-16 24z' fill='%237d9a5b'\u002F>\u003Cg fill='%23a385c9'>\u003Ccircle cx='200' cy='30' r='7'\u002F>\u003Ccircle cx='194' cy='44' r='6'\u002F>\u003Ccircle cx='204' cy='54' r='5'\u002F>\u003Ccircle cx='198' cy='66' r='4'\u002F>\u003Ccircle cx='202' cy='76' r='3'\u002F>\u003C\u002Fg>\u003Cg fill='%23b99ad8'>\u003Ccircle cx='130' cy='76' r='6'\u002F>\u003Ccircle cx='124' cy='88' r='5'\u002F>\u003Ccircle cx='132' cy='98' r='4'\u002F>\u003Ccircle cx='127' cy='108' r='3'\u002F>\u003Ccircle cx='131' cy='116' r='2'\u002F>\u003C\u002Fg>\u003Cg fill='%238e6ab8'>\u003Ccircle cx='72' cy='100' r='5'\u002F>\u003Ccircle cx='68' cy='111' r='4'\u002F>\u003Ccircle cx='73' cy='120' r='3'\u002F>\u003Ccircle cx='70' cy='128' r='2'\u002F>\u003C\u002Fg>\u003C\u002Fsvg>\") no-repeat 100% 0;\n      border-bottom: 0;\n    }\n    #logo {\n      width: 420px;\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='420' height='84'>\u003Ctext x='4' y='30' font-family='Georgia,serif' font-style='italic' font-size='22' fill='%237d9a5b'>the\u003C\u002Ftext>\u003Ctext x='36' y='70' font-family='Georgia,serif' font-style='italic' font-size='44' fill='%235b3f7d'>Semantic Garden\u003C\u002Ftext>\u003Cpath d='M40 78q60 8 120 0t130 0' fill='none' stroke='%237d9a5b' stroke-width='1.5'\u002F>\u003Ccircle cx='298' cy='78' r='3' fill='%23a385c9'\u002F>\u003C\u002Fsvg>\");\n    }\n    #tagline {\n      margin: 0.2em 0 0;\n      font-style: italic;\n      color: #6b5a7e;\n    }\n    #nav {\n      border-bottom: 4px solid #7d9a5b;\n    }\n    #nav a {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='120'>\u003Cpath d='M0 40V12Q0 2 12 2H400V40Z' fill='%23a2b98a'\u002F>\u003Cpath d='M0 80V52Q0 42 12 42H400V80Z' fill='%237d9a5b'\u002F>\u003Cpath d='M0 120V92Q0 82 12 82H400V120Z' fill='%237d9a5b'\u002F>\u003C\u002Fsvg>\");\n    }\n    #nav a span {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='14' height='120'>\u003Cpath d='M0 2H2Q14 2 14 12V40H0Z' fill='%23a2b98a'\u002F>\u003Cpath d='M0 42H2Q14 42 14 52V80H0Z' fill='%237d9a5b'\u002F>\u003Cpath d='M0 82H2Q14 82 14 92V120H0Z' fill='%237d9a5b'\u002F>\u003C\u002Fsvg>\");\n      color: #24331a;\n      font-style: italic;\n      font-size: 1.1em;\n    }\n    #nav a:hover span,\n    #nav .current a span {\n      color: #fbf8ef;\n    }\n    #wrap {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='2000' height='4'>\u003Crect width='1400' height='4' fill='%23fbf8ef'\u002F>\u003Crect x='1400' width='600' height='4' fill='%23efe8f3'\u002F>\u003Crect x='1400' width='1' height='2' fill='%23a99bbd'\u002F>\u003C\u002Fsvg>\");\n    }\n    .intro {\n      font-size: 1.15em;\n      margin-top: 1.4em;\n    }\n    .intro:first-letter {\n      float: left;\n      font-size: 3.4em;\n      line-height: 0.9;\n      margin: 0.05em 0.08em 0 0;\n      color: #5b3f7d;\n    }\n    h2 {\n      font-weight: normal;\n      font-style: italic;\n      color: #5b3f7d;\n      font-size: 1.6em;\n      margin-top: 1.2em;\n      margin-bottom: 0.3em;\n      padding-bottom: 0.1em;\n      border-bottom: 1px dotted #a385c9;\n    }\n    .num {\n      font-size: 0.6em;\n      color: #6f8c4f;\n      vertical-align: 0.4em;\n    }\n    blockquote {\n      background: #f0ecdf;\n      border-left: 4px solid #b79fd1;\n      padding: 0.4em 1em;\n      font-size: 1.1em;\n      font-style: italic;\n    }\n    blockquote p {\n      margin: 0.3em 0;\n    }\n    cite {\n      font-size: 0.8em;\n      color: #6b5a7e;\n    }\n    .checklist {\n      list-style: none;\n      padding-left: 0;\n    }\n    .checklist li {\n      padding-left: 1.4em;\n      background: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='12' height='12'>\u003Cpath d='M1 11C1 5 5 1 11 1 11 7 7 11 1 11Z' fill='%237d9a5b'\u002F>\u003C\u002Fsvg>\") no-repeat 0 0.35em;\n      margin-bottom: 0.4em;\n    }\n    #sidebar h3 {\n      font-weight: normal;\n      font-style: italic;\n      color: #5b3f7d;\n      font-size: 1.2em;\n      margin-top: 1.2em;\n      margin-bottom: 0.3em;\n    }\n    #sidebar a,\n    #sidebar label {\n      color: #4f6b34;\n    }\n    #content a:not(.era-cta a) {\n      color: #5b3f7d;\n    }\n    #footer {\n      background: #5e7a43;\n      color: #fbf8ef;\n      font-style: italic;\n    }\n  }\n\n  \u002F* =========================================================\n     DESIGN B: \"Raster\" by Kaj Lindqvist. Swiss modernist.\n     ========================================================= *\u002F\n  &:has(#sgt-b:checked) {\n    background: #ececec;\n  }\n  .sg:has(#sgt-b:checked) {\n    --sg-stamp: #444;\n    --sg-stamp-no: #c41c14;\n    --sg-cta-edge: #111;\n    --sg-cta-hi: #333;\n    --sg-cta-lo: #111;\n    --sg-cta-hover-hi: #e2231a;\n    --sg-cta-hover-lo: #b01a12;\n    --sg-cta-link: #c41c14;\n    --sg-focus: #111;\n    .era-stamp {\n      margin-left: 34px;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      font-size: 0.75em;\n    }\n    .era-cta__next {\n      border-radius: 0;\n      box-shadow: none;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    #sg-page {\n      background: #fff;\n      border-top: 14px solid #e2231a;\n      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      color: #111;\n    }\n    #header {\n      padding: 28px 1.6em 18px;\n      background: #fff;\n    }\n    #logo {\n      width: 520px;\n      height: 122px;\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='520' height='122'>\u003Crect x='0' y='8' width='22' height='22' fill='%23e2231a'\u002F>\u003Ctext x='34' y='52' font-family='Helvetica Neue,Helvetica,Arial,sans-serif' font-weight='700' font-size='54' letter-spacing='-3' fill='%23111'>semantic\u003C\u002Ftext>\u003Ctext x='34' y='104' font-family='Helvetica Neue,Helvetica,Arial,sans-serif' font-weight='700' font-size='54' letter-spacing='-3' fill='%23111'>garden\u003Ctspan fill='%23e2231a'>.\u003C\u002Ftspan>\u003C\u002Ftext>\u003Ctext x='300' y='100' font-family='Helvetica Neue,Helvetica,Arial,sans-serif' font-size='11' letter-spacing='2' fill='%23111'>NO.2 \u002F RASTER\u003C\u002Ftext>\u003C\u002Fsvg>\");\n    }\n    #tagline {\n      margin: 0.6em 0 0 34px;\n      text-transform: uppercase;\n      letter-spacing: 0.15em;\n      font-size: 0.85em;\n      font-weight: bold;\n    }\n    #nav {\n      background: #111;\n      padding-top: 8px;\n    }\n    #nav a {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='120'>\u003Crect y='0' width='400' height='40' fill='%23333'\u002F>\u003Crect y='40' width='400' height='40' fill='%23e2231a'\u002F>\u003Crect y='80' width='400' height='40' fill='%23fff'\u002F>\u003C\u002Fsvg>\");\n    }\n    #nav a span {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='14' height='120'>\u003Cpath d='M0 0H2L14 40H0Z' fill='%23333'\u002F>\u003Cpath d='M0 40H2L14 80H0Z' fill='%23e2231a'\u002F>\u003Cpath d='M0 80H2L14 120H0Z' fill='%23fff'\u002F>\u003C\u002Fsvg>\");\n      color: #fff;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: bold;\n      font-size: 0.85em;\n      padding-right: 22px;\n    }\n    #nav .current a span {\n      color: #111;\n    }\n    #wrap {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='2000' height='4'>\u003Crect width='1400' height='4' fill='%23fff'\u002F>\u003Crect x='1400' width='600' height='4' fill='%23111'\u002F>\u003C\u002Fsvg>\");\n    }\n    .intro {\n      font-size: 1.35em;\n      line-height: 1.35;\n      font-weight: bold;\n      letter-spacing: -0.01em;\n      margin-top: 1.2em;\n    }\n    h2 {\n      font-size: 1.15em;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      margin: 1.6em 1.6em 0.4em;\n      padding-top: 0.4em;\n      border-top: 3px solid #111;\n    }\n    .num {\n      display: block;\n      font-size: 3.2em;\n      line-height: 1;\n      letter-spacing: -0.05em;\n      color: #e2231a;\n    }\n    blockquote {\n      margin: 1.2em 1.6em;\n      padding: 0 0 0 1em;\n      border-left: 6px solid #e2231a;\n      font-size: 1.4em;\n      line-height: 1.25;\n      font-weight: bold;\n    }\n    blockquote p {\n      margin: 0;\n    }\n    cite {\n      font-size: 0.55em;\n      font-style: normal;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      font-weight: normal;\n    }\n    .checklist {\n      list-style: square;\n    }\n    .checklist li::marker {\n      color: #e2231a;\n    }\n    #sidebar {\n      color: #fff;\n    }\n    #sidebar h3 {\n      font-size: 0.8em;\n      text-transform: uppercase;\n      letter-spacing: 0.2em;\n      color: #ff7a72;\n      margin-top: 2em;\n    }\n    #sidebar a,\n    #sidebar label {\n      color: #fff;\n    }\n    #content a:not(.era-cta a) {\n      color: #c41c14;\n    }\n    #footer {\n      border-top: 14px solid #111;\n      font-size: 0.85em;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n    }\n    .badge {\n      border-color: #111;\n    }\n    .badge i {\n      background: #e2231a;\n    }\n  }\n\n  \u002F* =========================================================\n     DESIGN C: \"Afterhours\" by DJ Semicolon. A dark nightclub.\n     ========================================================= *\u002F\n  &:has(#sgt-c:checked) {\n    background: #07050d repeating-linear-gradient(135deg, #0d0918 0 2px, transparent 2px 9px);\n  }\n  .sg:has(#sgt-c:checked) {\n    --sg-stamp: #b8a6e6;\n    --sg-stamp-no: #00e5ff;\n    --sg-cta-edge: #ff2fa8;\n    --sg-cta-ink: #120c1f;\n    --sg-cta-hi: #ff8fd2;\n    --sg-cta-lo: #ff2fa8;\n    --sg-cta-hover-hi: #8ff4ff;\n    --sg-cta-hover-lo: #00c4dc;\n    --sg-cta-link: #8ff4ff;\n    --sg-focus: #00e5ff;\n    .era-stamp {\n      font-variant: small-caps;\n      letter-spacing: 0.1em;\n    }\n    .era-cta__next {\n      border-radius: 14px;\n      box-shadow: 0 0 14px rgb(255 47 168 \u002F 0.5), inset 0 1px 0 rgb(255 255 255 \u002F 0.4);\n    }\n    .sg__switcher {\n      background: #1d1233;\n      color: #e8e0ff;\n      border-color: #ff2fa8;\n    }\n    .sg__switcher legend {\n      color: #00e5ff;\n    }\n    .sg__hint {\n      color: #c6b8e8;\n    }\n    #sg-page {\n      background: #120c1f;\n      color: #d9d2ee;\n      font-family: 'Trebuchet MS', 'Lucida Sans', Verdana, sans-serif;\n      border: 1px solid #3a2560;\n      box-shadow: 0 0 40px rgb(255 47 168 \u002F 0.25);\n    }\n    #header {\n      min-height: 140px;\n      padding: 26px 1.6em 0;\n      box-sizing: border-box;\n      background: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='140'>\u003Cg fill='%2300e5ff' opacity='.8'>\u003Crect x='40' y='80' width='10' height='40'\u002F>\u003Crect x='56' y='50' width='10' height='70'\u002F>\u003Crect x='72' y='92' width='10' height='28'\u002F>\u003Crect x='88' y='30' width='10' height='90'\u002F>\u003Crect x='104' y='64' width='10' height='56'\u002F>\u003C\u002Fg>\u003Cg fill='%23ff2fa8' opacity='.8'>\u003Crect x='120' y='40' width='10' height='80'\u002F>\u003Crect x='136' y='76' width='10' height='44'\u002F>\u003Crect x='152' y='56' width='10' height='64'\u002F>\u003Crect x='168' y='96' width='10' height='24'\u002F>\u003C\u002Fg>\u003C\u002Fsvg>\") no-repeat 100% 0;\n    }\n    #logo {\n      width: 470px;\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='470' height='84'>\u003Cg font-family='Trebuchet MS,Verdana,sans-serif' font-weight='700' font-size='40' letter-spacing='2'>\u003Ctext x='4' y='46' fill='none' stroke='%23ff2fa8' stroke-width='7' opacity='.3'>SEMANTIC GARDEN\u003C\u002Ftext>\u003Ctext x='4' y='46' fill='none' stroke='%23ff7ccc' stroke-width='1.6'>SEMANTIC GARDEN\u003C\u002Ftext>\u003C\u002Fg>\u003Ctext x='250' y='76' font-family='Georgia,serif' font-style='italic' font-size='22' fill='%2300e5ff'>after hours\u003C\u002Ftext>\u003C\u002Fsvg>\");\n    }\n    #tagline {\n      margin: 0.3em 0 0;\n      font-variant: small-caps;\n      letter-spacing: 0.12em;\n      color: #b8a6e6;\n    }\n    #nav {\n      padding-top: 6px;\n      border-bottom: 2px solid #ff2fa8;\n    }\n    #nav a {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='120'>\u003Cpath d='M0 40V20Q0 4 16 4H400V40Z' fill='%232a1745'\u002F>\u003Cpath d='M0 80V60Q0 44 16 44H400V80Z' fill='%23ff2fa8'\u002F>\u003Cpath d='M0 120V100Q0 84 16 84H400V120Z' fill='%2300e5ff'\u002F>\u003C\u002Fsvg>\");\n    }\n    #nav a span {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='16' height='120'>\u003Cpath d='M0 4Q16 4 16 20V40H0Z' fill='%232a1745'\u002F>\u003Cpath d='M0 44Q16 44 16 60V80H0Z' fill='%23ff2fa8'\u002F>\u003Cpath d='M0 84Q16 84 16 100V120H0Z' fill='%2300e5ff'\u002F>\u003C\u002Fsvg>\");\n      color: #e8e0ff;\n      font-variant: small-caps;\n      letter-spacing: 0.1em;\n      font-size: 1.1em;\n    }\n    #nav a:hover span,\n    #nav .current a span {\n      color: #120c1f;\n    }\n    #wrap {\n      background-image: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='2000' height='4'>\u003Crect width='1400' height='4' fill='%23120c1f'\u002F>\u003Crect x='1400' width='600' height='4' fill='%231d1233'\u002F>\u003Crect x='1400' width='2' height='4' fill='%23ff2fa8'\u002F>\u003C\u002Fsvg>\");\n    }\n    .intro {\n      margin-top: 1.4em;\n      font-size: 1.1em;\n      color: #f1ecff;\n    }\n    h2 {\n      color: #00e5ff;\n      text-transform: uppercase;\n      letter-spacing: 0.15em;\n      font-size: 1.15em;\n      text-shadow: 0 0 8px rgb(0 229 255 \u002F 0.6);\n      margin-top: 1.6em;\n    }\n    .num {\n      color: #ff2fa8;\n      text-shadow: 0 0 8px rgb(255 47 168 \u002F 0.8);\n    }\n    blockquote {\n      border: 1px dashed #ff2fa8;\n      padding: 0.2em 1em;\n      color: #ffd0ec;\n      font-style: italic;\n    }\n    cite {\n      color: #b8a6e6;\n    }\n    code {\n      color: #8ff4ff;\n    }\n    strong {\n      color: #ff7ccc;\n    }\n    .checklist {\n      list-style: none;\n      padding-left: 0;\n    }\n    .checklist li::before {\n      content: '\\266A  ';\n      color: #ff2fa8;\n    }\n    #sidebar h3 {\n      color: #ff7ccc;\n      font-variant: small-caps;\n      letter-spacing: 0.15em;\n      margin-top: 1.6em;\n    }\n    #sidebar a,\n    #sidebar label,\n    #content a:not(.era-cta a) {\n      color: #8ff4ff;\n    }\n    #footer {\n      background: #07050d;\n      border-top: 2px solid #ff2fa8;\n      color: #b8a6e6;\n      font-variant: small-caps;\n    }\n    .badge {\n      border-color: #ff2fa8;\n    }\n    .badge b {\n      background: #120c1f;\n      color: #e8e0ff;\n    }\n    .badge i {\n      background: #ff2fa8;\n      color: #120c1f;\n    }\n  }\n\n  \u002F* A brief \"loading the new stylesheet\" flash when JS swaps designs. *\u002F\n  .sg__page.is-swapping {\n    animation: e07-swap 0.45s ease-out;\n  }\n\n  @container screen (max-width: 600px) {\n    .sg {\n      padding-top: 8px;\n    }\n    .sg__switcher {\n      margin: 0 8px 12px;\n    }\n  }\n}\n\n@keyframes e07-swap {\n  from {\n    opacity: 0.2;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n}",[85,87,89,91],{"caption":53,"file":51,"html":86},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sg__page\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"semantic\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"header\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"logo\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"image-replacement\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>The Semantic Garden<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"tagline\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>One document. Many gardens. Plant a stylesheet and watch it grow.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"nav\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"clearfix\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sliding-doors\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"current\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Home<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-why\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Why CSS?<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-prune\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Pruning<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-join\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Submit a design<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"wrap\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"clearfix\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"floats faux-columns\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"content\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"intro\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Your boss says tables are how websites are built. Your boss also prints out\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        his email. This page has <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>no layout tables<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>, no <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">font\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> tags and\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        no spacer GIFs. Everything you see is decided by one external stylesheet.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sg-why\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"num\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>01<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> Why plant in CSS?<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Structure goes in the markup; presentation goes in the stylesheet. Keep them apart and a\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        redesign becomes a single file upload, your pages shrink by a third, and screen readers finally\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        hear headings instead of nested <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">td\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> soup.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">blockquote\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">“\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">Markup is a promise about meaning. Style is a suggestion about looks.\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">”\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">cite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>overheard at a web standards meetup, 2004<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">cite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">blockquote\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sg-prune\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"num\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>02<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> Pruning the markup<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"checklist\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Headings are <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> to <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>, in order. No more <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">b\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">font size=\"4\"\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Navigation is a list, because it <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>is<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> a list.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Lowercase tags, quoted attributes, every element closed. <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">br \u002F\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> included.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>The logo is real text, swapped for a picture with <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>text-indent<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Hacks every gardener knows by heart<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dl\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"hacks\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>The box model hack<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Internet Explorer 5 puts padding <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>inside<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> the width. Feed it one width, then hide the right one behind a parser bug.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>The clearfix<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Floats escape their parent. A generated <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>:after<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> block with <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>clear: both<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> pulls the parent back around them.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>The double-margin float bug<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dt\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>IE6 doubles the margin on a floated box. Add <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>display: inline<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>; nobody else minds.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dd\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">dl\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sg-join\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"num\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>03<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> Submit a design<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Download the XHTML and the sample CSS. You may change <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>only<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> the stylesheet and your own\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        images. Make it beautiful, make it strange, make it validate. Then send it in.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sidebar\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Select a garden<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"designs\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sgt-a\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Wisteria<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> by Hazel Moorcroft<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sgt-b\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Raster<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> by Kaj Lindqvist<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"sgt-c\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Afterhours<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> by DJ Semicolon<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Archives<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>March 2005<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>February 2005<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>January 2005<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Resources<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>View this design's CSS<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Standards FAQ<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#sg-page\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Translations<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"footer\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badges\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badges\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badge\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>XHTML<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>1.0 valid<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badge\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>CSS<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>valid<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badge\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>WCAG<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>AA<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"badge\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>RSS<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>2.0<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Last tended 14 March 2005. Best viewed in <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>any<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> browser that respects the standards.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":58,"file":56,"html":88},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* Sliding doors: a wide left image on the <a>, a narrow right cap on the\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">   <span>. The tab grows with its text; hover slides both sprites up 40px. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1.6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  list-style\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding-left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  text-decoration\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">no-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">block\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">40\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  line-height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">42\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">no-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:hover\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:hover\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:focus-visible\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:focus-visible\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position-y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-40\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> .current\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#nav\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> .current\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> a\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position-y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-80\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":60,"file":56,"html":90},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.clearfix:after\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  content\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">block\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  clear\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">both\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  visibility\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#wrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">repeat-y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">70\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#768390\">\u002F* liquid faux columns: the seam sits at 70% *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#content\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">70\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#sidebar\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">right\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">30\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":63,"file":56,"html":92},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* Phark image replacement: real text for robots and screen readers,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">   shoved off-screen; a picture of the text sits in the background. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">#logo\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">84\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  text-indent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-9999\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  overflow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">no-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232160974]