diff --git a/index.html b/index.html index 1c023e6..2a5a136 100644 --- a/index.html +++ b/index.html @@ -28,171 +28,174 @@

CSS1K

diff --git a/js/switcher.js b/js/switcher.js index 480d4ca..0e33a9f 100644 --- a/js/switcher.js +++ b/js/switcher.js @@ -3,8 +3,11 @@ var hash = window.location.hash; var switchStyle = function() { - var styleSlug = window.location.hash.slice(1) || 'default' - , styleUrl = 'styles/' + styleSlug + '.css'; + var styleSlug = window.location.hash.slice(1) || 'default', + styleUrl = 'styles/' + styleSlug + '.css', + tags = $('a[href="#'+styleSlug+'"]').parent().data('tags'), + firstTag = tags && tags.split(",")[0]; + // Use PrefixFree to add vendor prefixes if it exists and is functional. $.get(styleUrl, function(data) { $('style').first().text( @@ -13,6 +16,9 @@ var switchStyle = function() { ); $('html, body').animate({ scrollTop: 0 }); }); + + $('header nav ul').data('filteredby', firstTag); + if (window.location.host === 'css1k.net' && styleSlug !== 'default') { ga('send', 'pageview', styleSlug); } @@ -21,14 +27,14 @@ var switchStyle = function() { var navigateStyles = function(type) { var curStyleLink = window.location.hash || './', $curStyleLink = $('a[href="'+curStyleLink+'"]'), - $nextStyleLink = $curStyleLink.parent().next('li').find('a:first-child'), - $prevStyleLink = $curStyleLink.parent().prev('li').find('a:first-child'); + $nextStyleLink = $curStyleLink.parent().next('li:not([data-filter])').find('a:first-child'), + $prevStyleLink = $curStyleLink.parent().prev('li:not([data-filter])').find('a:first-child'); if (!$nextStyleLink.length) { $nextStyleLink = $('header nav li:first-child a:first-child'); } if (!$prevStyleLink.length) { - $prevStyleLink = $('header nav li:last-child a:first-child'); + $prevStyleLink = $('header nav li:not([data-filter])').last().find('a:first-child'); } if (type === 'prev') { @@ -39,6 +45,48 @@ var navigateStyles = function(type) { } }; +var isInData = function(data, value) { + if (data) { + var dataItems = data.split(","); + return ($.inArray(value, dataItems) !== -1); + } + return false; +}; + +var filterByTag = function($items, tag) { + var $newItems = [], + $itemsParent = $items.parent(); + + $items.each(function(){ + var $this = $(this), + tags = $this.data('tags'); + + if (isInData(tags, tag)) { + $newItems.push($this); + } + }); + + $items.detach(); + $itemsParent.append($newItems); + $itemsParent.data('filteredby', tag); +}; + +var filterStyles = function() { + var $navList = $('header nav ul'), + $navItems = $('li', $navList), + activeFilter = $navList.data('filteredby') || 'featured', + $filterLinks = $('[data-filter] a', $navList); + + filterByTag($navItems, activeFilter); + + $filterLinks.on('click', function(e){ + var $this = $(this); + var filter = $this.parent().parent().data('filter'); + filterByTag($navItems, filter); + }); +}; + + $(function() { $('#zengarden-age').text(new Date().getFullYear() - 2003); @@ -67,6 +115,8 @@ $(function() { } }, 250); } + + filterStyles(); }); })(); diff --git a/styles/blue_square.css b/styles/blue_square.css index d282f29..fc62ed9 100644 --- a/styles/blue_square.css +++ b/styles/blue_square.css @@ -1 +1 @@ -body{font-family:sans-serif}h1{background:#EEE;height:100%;left:50%;margin:0 0 0 -60px;position:fixed;text-align:center;top:0;width:120px}h2{color:#999}article{left:50%;padding:0 15px 0 80px;position:absolute;right:0;top:0}nav ul{margin:75px 50% 75px auto;padding-right:85px;width:450px}nav li{box-align:center;box-orient:vertical;box-pack:center;display:box!important;float:left;height:150px;position:relative;transform:rotateZ(-45deg);width:150px}nav li:nth-child(5n-1){margin-left:75px}nav ul:after{clear:both;content:"";display:block}nav a{display:block}nav a:first-child{background:#FFF;border-radius:5px;font-weight:700;padding:4px 6px}nav a:last-child{color:#FFF;text-align:center;width:150px}nav li:nth-child(6n+1){background:#1F1F4C}nav li:nth-child(6n+2){background:#333380}nav li:nth-child(6n+3){background:#4747B2}nav li:nth-child(6n+4){background:#5C5CE6}nav li:nth-child(6n+5){background:#7575FF}nav li:nth-child(6n){background:#9494FF} \ No newline at end of file +body{font-family:sans-serif}h1{background:#EEE;height:100%;left:50%;margin:0 0 0 -60px;position:fixed;text-align:center;top:0;width:120px}h2{color:#999}article{left:50%;padding:0 15px 0 80px;position:absolute;right:0;top:0}nav ul{margin:75px 50% 75px auto;padding-right:85px;width:450px}nav li{box-align:center;box-orient:vertical;box-pack:center;display:box!important;float:left;height:150px;position:relative;transform:rotateZ(-45deg);width:150px}nav li:nth-child(5n-1){margin-left:75px}nav ul:after{clear:both;content:"";display:block}nav a{display:block}nav a:first-child{background:#FFF;border-radius:5px;font-weight:700;padding:4px 6px}nav li>a:last-child{color:#FFF;text-align:center;width:150px}nav li:nth-child(6n+1){background:#1F1F4C}nav li:nth-child(6n+2){background:#333380}nav li:nth-child(6n+3){background:#4747B2}nav li:nth-child(6n+4){background:#5C5CE6}nav li:nth-child(6n+5){background:#7575FF}nav li:nth-child(6n){background:#9494FF} \ No newline at end of file diff --git a/styles/casoy.css b/styles/casoy.css index 5db6ada..8c0361b 100644 --- a/styles/casoy.css +++ b/styles/casoy.css @@ -1 +1 @@ -body{background:#2F312C;color:#DBD2B1;font-family:Arial;font-size:13px}nav{float:left;clear:both}nav,header h1{width:300px;background:#BB9E66;border-right:1px solid #333;margin:-10px 0 0 -10px;padding-top:10px}nav h2,header h1{padding-left:20px}nav ul{list-style-type:none;padding:0 20px 0 20px;font-weight:700}nav ul li{margin-top:5px;border-bottom:1px dashed #2F312C}nav a:last-child{float:right;color:#DBD2B1}nav a:last-child:hover{color:#A56657}nav a:hover{color:#DBD2B1}header h1{width:280px;color:#A56657}article{margin-left:300px;width:600px;float:left;position:fixed;padding:0 0 0 15px}footer{margin-left:300px;position:fixed;bottom:5px;padding-left:15px}a{text-decoration:none;color:#A56657} \ No newline at end of file +body{background:#2F312C;color:#DBD2B1;font-family:Arial;font-size:13px}nav{float:left;clear:both}nav,header h1{width:300px;background:#BB9E66;border-right:1px solid #333;margin:-10px 0 0 -10px;padding-top:10px}nav h2,header h1{padding-left:20px}nav ul{list-style-type:none;padding:0 20px 0 20px;font-weight:700}nav ul li{margin-top:5px;border-bottom:1px dashed #2F312C}nav li>a:last-child{float:right;color:#DBD2B1}nav a:last-child:hover{color:#A56657}nav a:hover{color:#DBD2B1}header h1{width:280px;color:#A56657}article{margin-left:300px;width:600px;float:left;position:fixed;padding:0 0 0 15px}footer{margin-left:300px;position:fixed;bottom:5px;padding-left:15px}a{text-decoration:none;color:#A56657} \ No newline at end of file diff --git a/styles/default.css b/styles/default.css index 0730db4..de4085f 100644 --- a/styles/default.css +++ b/styles/default.css @@ -1 +1 @@ -h1{font:700 300% monospace}h1,nav h2{text-align:center}a:hover,h2{color:#b12}a{color:#38b;text-decoration:none}body,nav ul{margin:0 auto}body{width:50%;max-width:55em;font:95%/1.5 sans-serif;color:#311}body:after,body:before{position:fixed;content:'';display:block;top:0;left:-8px;width:23%;height:110%;background:repeating-linear-gradient(45deg,#bcd,#bcd 30px,#cde 30px,#cde 60px);box-shadow:inset 0 -12px 24px #000}body:after{right:-8px;left:auto;background:repeating-linear-gradient(135deg,#bcd,#bcd 30px,#cde 30px,#cde 60px)}nav{position:fixed;top:0;left:0;right:0;max-height:100%;width:200px;background:rgba(50,50,50,.8);overflow:auto}nav ul{padding:3%}nav li,nav h2{font-size:90%;margin-bottom:10px}nav h2,nav a{color:#fff}nav a:first-child{color:#333;display:block;background:#fff;border-radius:3px;padding:2px 5px;font-weight:700}nav a:first-child:hover{background:#b12;color:#fff}nav a:last-child:before{content:'by ';display:inline;color:#ccc}footer{border-top:1px solid #aaa;text-align:center;font-size:85%} \ No newline at end of file +h1{font:700 300% monospace}h1,nav h2{text-align:center}a:hover,h2{color:#b12}a{color:#38b;text-decoration:none}body,nav ul{margin:0 auto}body{width:50%;max-width:55em;font:95%/1.5 sans-serif;color:#311}body:after,body:before{position:fixed;content:'';display:block;top:0;left:-8px;width:23%;height:110%;background:repeating-linear-gradient(45deg,#bcd,#bcd 30px,#cde 30px,#cde 60px);box-shadow:inset 0 -12px 24px #000}body:after{right:-8px;left:auto;background:repeating-linear-gradient(135deg,#bcd,#bcd 30px,#cde 30px,#cde 60px)}nav{position:fixed;top:0;left:0;right:0;max-height:100%;width:200px;background:rgba(50,50,50,.8);overflow:auto}nav ul{padding:3%}nav li,nav h2{font-size:90%;margin-bottom:10px}nav h2,nav a{color:#fff}nav a:first-child{color:#333;display:block;background:#fff;border-radius:3px;padding:2px 5px;font-weight:700}nav a:first-child:hover{background:#b12;color:#fff}nav li>a:last-child:before{content:'by ';display:inline;color:#ccc}footer{border-top:1px solid #aaa;text-align:center;font-size:85%} \ No newline at end of file diff --git a/styles/greymatter.css b/styles/greymatter.css index b43fcdb..217474f 100644 --- a/styles/greymatter.css +++ b/styles/greymatter.css @@ -1 +1 @@ -BODY,NAV H2{margin:auto;border-radius:8px;font:12px/1.5 Arial}NAV H2:before{content:'◀ '}BODY{padding:3em 0 3em 8em;width:60em;background:#92A5A9}A,H1:after{color:#F66;text-decoration:none}H1{float:right;margin:-24px 0;width:340px;font-size:0;color:#92A5A9}H1:before,H1:after{font-size:80px;content:'CSS'}H1:after{content:'1K'}NAV,NAV H2{position:relative;float:left}NAV H2,UL LI{padding:6px 1em;background:#667476;white-space:nowrap}UL{position:absolute;right:-8px;display:none;margin:0 100%;list-style:none;text-align:right}UL A,BODY,H1:before{color:#FFF}UL LI:last-child{border-radius:0 0 8px 8px}UL A:last-child:before{content:'by ';color:#CCC}NAV:hover H2,UL LI:hover{background:#F66}NAV:hover UL{display:block}[role],FOOTER{clear:both}[role] HEADER,SECTION{float:left;margin:-2em 30em 0 10em;padding:0 2em 6px;border:1em solid #667476;border-radius:2em;background:#576365}[role]>HEADER+*{position:absolute;margin:3em 0 0 32em;width:22em}[role]>*+*+*{margin:2em 30em 4em 2em}FOOTER{text-align:center;color:#555} \ No newline at end of file +BODY,NAV H2{margin:auto;border-radius:8px;font:12px/1.5 Arial}NAV H2:before{content:'◀ '}BODY{padding:3em 0 3em 8em;width:60em;background:#92A5A9}A,H1:after{color:#F66;text-decoration:none}H1{float:right;margin:-24px 0;width:340px;font-size:0;color:#92A5A9}H1:before,H1:after{font-size:80px;content:'CSS'}H1:after{content:'1K'}NAV,NAV H2{position:relative;float:left}NAV H2,UL LI{padding:6px 1em;background:#667476;white-space:nowrap}UL{position:absolute;right:-8px;display:none;margin:0 100%;list-style:none;text-align:right}UL A,BODY,H1:before{color:#FFF}UL LI:last-child{border-radius:0 0 8px 8px}UL LI>A:last-child:before{content:'by ';color:#CCC}NAV:hover H2,UL LI:hover{background:#F66}NAV:hover UL{display:block}[role],FOOTER{clear:both}[role] HEADER,SECTION{float:left;margin:-2em 30em 0 10em;padding:0 2em 6px;border:1em solid #667476;border-radius:2em;background:#576365}[role]>HEADER+*{position:absolute;margin:3em 0 0 32em;width:22em}[role]>*+*+*{margin:2em 30em 4em 2em}FOOTER{text-align:center;color:#555} \ No newline at end of file diff --git a/styles/lessismore.css b/styles/lessismore.css index a30737e..fe39453 100644 --- a/styles/lessismore.css +++ b/styles/lessismore.css @@ -1 +1 @@ -body{font:14px/1.9 Palatino Linotype,Book Antiqua3,Palatino,serif;background:#f5f5f5;width:960px;margin:0 auto;color:#444;padding-top:140px}a{color:#444;text-decoration:none;border-bottom:1px dotted #444}a:hover{color:#DD4B39;border-color:#DD4B39}h1{font-size:500%;padding:0;position:fixed;top:-50px;background:#f5f5f5;background:rgba(245,245,245,.9);width:960px}h1:after{content:" *Less is more.";font-size:20%}nav{width:250px;float:left;margin-right:30px}nav a{border:0}nav ul,nav ul li{list-style:none;padding:0}nav ul li{display:block;margin-bottom:10px;padding:5px 0;overflow:hidden;transition:.2s padding;border-radius:2px}nav ul li a:hover{color:#fff;border-bottom:1px dotted #fff}nav ul li a:last-child:before{content:" by "}nav ul li:hover{background:#DD4B39;padding-left:10px}nav ul li:hover a,nav ul li:hover a:last-child:before{color:#fff}[role]{float:left;width:660px;padding-right:20px}ol{margin:0;padding:0}footer{clear:both;text-align:center} \ No newline at end of file +body{font:14px/1.9 Palatino Linotype,Book Antiqua3,Palatino,serif;background:#f5f5f5;width:960px;margin:0 auto;color:#444;padding-top:140px}a{color:#444;text-decoration:none;border-bottom:1px dotted #444}a:hover{color:#DD4B39;border-color:#DD4B39}h1{font-size:500%;padding:0;position:fixed;top:-50px;background:#f5f5f5;background:rgba(245,245,245,.9);width:960px}h1:after{content:" *Less is more.";font-size:20%}nav{width:250px;float:left;margin-right:30px}nav a{border:0}nav ul,nav ul li{list-style:none;padding:0}nav ul li{display:block;margin-bottom:10px;padding:5px 0;overflow:hidden;transition:.2s padding;border-radius:2px}nav ul li a:hover{color:#fff;border-bottom:1px dotted #fff}nav ul li>a:last-child:before{content:" by "}nav ul li:hover{background:#DD4B39;padding-left:10px}nav ul li:hover a,nav ul li:hover a:last-child:before{color:#fff}[role]{float:left;width:660px;padding-right:20px}ol{margin:0;padding:0}footer{clear:both;text-align:center} \ No newline at end of file diff --git a/styles/lucuma.css b/styles/lucuma.css index fa43f6d..51e4d01 100644 --- a/styles/lucuma.css +++ b/styles/lucuma.css @@ -1 +1 @@ -body,ul,ol{font:20px/1.4 "Hoefler Text",Constantia,Georgia,serif;background:#f7f7f7;padding:0;margin:0;text-align:justify;list-style-type:none}body>header{border-bottom:1px dashed #ccc;background:#fff;font-size:1.4em;min-width:900px}nav,footer{font-size:.65em}article,nav{width:800px;margin:30px auto}nav a:visited{color:#791a56}nav h2{border:0}nav h2:before{content:" \2665 "}nav h2:first-letter{color:#a32323;padding-right:5px}ul{background:#fff;overflow:hidden}ul li{display:inline-block;width:30%;padding:8px 0;line-height:1.2;text-align:left;vertical-align:top}ul li a:last-child{font-size:.8em;color:#222}ul li a:last-child:before{content:"by "}h1,h2{font-variant:small-caps;font-weight:400;line-height:1;border-bottom:1px solid;padding-top:30px}a{color:#a32323}ol li{margin-bottom:20px;list-style-type:decimal}header h1,footer{padding:20px 0;background:#f7f7f7;border-bottom:1px dashed #ccc;text-align:center}article{padding:0 5%}h2+p{text-indent:1em}footer{border-top:1px dashed #ccc} +body,ul,ol{font:20px/1.4 "Hoefler Text",Constantia,Georgia,serif;background:#f7f7f7;padding:0;margin:0;text-align:justify;list-style-type:none}body>header{border-bottom:1px dashed #ccc;background:#fff;font-size:1.4em;min-width:900px}nav,footer{font-size:.65em}article,nav{width:800px;margin:30px auto}nav a:visited{color:#791a56}nav h2{border:0}nav h2:before{content:" \2665 "}nav h2:first-letter{color:#a32323;padding-right:5px}ul{background:#fff;overflow:hidden}ul li{display:inline-block;width:30%;padding:8px 0;line-height:1.2;text-align:left;vertical-align:top}ul li a:last-child{font-size:.8em;color:#222}ul li>a:last-child:before{content:"by "}h1,h2{font-variant:small-caps;font-weight:400;line-height:1;border-bottom:1px solid;padding-top:30px}a{color:#a32323}ol li{margin-bottom:20px;list-style-type:decimal}header h1,footer{padding:20px 0;background:#f7f7f7;border-bottom:1px dashed #ccc;text-align:center}article{padding:0 5%}h2+p{text-indent:1em}footer{border-top:1px dashed #ccc} diff --git a/styles/molokai.css b/styles/molokai.css index 98b1645..b2fce40 100644 --- a/styles/molokai.css +++ b/styles/molokai.css @@ -1 +1 @@ -body,nav ul{background:#272822;font:88%/1.5 Palatino Linotype,Palatino;color:#fff}a{color:#ae3;text-decoration:none}a:hover{color:#fff}article p{text-indent:6px}h1,article,footer{width:825px;margin:0 auto}h1{color:#f27;font-size:94px;margin-bottom:-1.34em;text-shadow:0 1px 0 #444,0 2px 0 #666,0 3px 0 #666,0 4px 0 #666,0 5px 0 #666}h1:hover{color:#f92}h1:before{content:'✿';color:#ee7}nav{float:right;margin-left:-50%;overflow:hidden}nav h2{color:#6de;text-align:right;transform:rotate(-90deg);transform-origin:right bottom;opacity:.6}nav ul{position:relative;left:100%;opacity:0;color:#272822}h1,nav h2,nav ul{transition:all .5s ease}nav:hover ul{left:0;opacity:1}nav:hover h2{transform:rotate(0deg);opacity:1}nav ul li a:first-child{color:#f92;font-size:16px;display:block}nav ul li a:last-child:before{content:'by ';margin-left:2em}section{float:right;width:48%}article header{margin-left:52%}header+section{float:left}article h2{color:#e53;border-bottom:1px dotted #b8f}footer{border-top:1px dotted #b8f;clear:both} \ No newline at end of file +body,nav ul{background:#272822;font:88%/1.5 Palatino Linotype,Palatino;color:#fff}a{color:#ae3;text-decoration:none}a:hover{color:#fff}article p{text-indent:6px}h1,article,footer{width:825px;margin:0 auto}h1{color:#f27;font-size:94px;margin-bottom:-1.34em;text-shadow:0 1px 0 #444,0 2px 0 #666,0 3px 0 #666,0 4px 0 #666,0 5px 0 #666}h1:hover{color:#f92}h1:before{content:'✿';color:#ee7}nav{float:right;margin-left:-50%;overflow:hidden}nav h2{color:#6de;text-align:right;transform:rotate(-90deg);transform-origin:right bottom;opacity:.6}nav ul{position:relative;left:100%;opacity:0;color:#272822}h1,nav h2,nav ul{transition:all .5s ease}nav:hover ul{left:0;opacity:1}nav:hover h2{transform:rotate(0deg);opacity:1}nav ul li a:first-child{color:#f92;font-size:16px;display:block}nav ul li>a:last-child:before{content:'by ';margin-left:2em}section{float:right;width:48%}article header{margin-left:52%}header+section{float:left}article h2{color:#e53;border-bottom:1px dotted #b8f}footer{border-top:1px dotted #b8f;clear:both} \ No newline at end of file diff --git a/styles/summersun.css b/styles/summersun.css index b0c484d..6946e9b 100644 --- a/styles/summersun.css +++ b/styles/summersun.css @@ -1 +1 @@ -a{color:#fff;font-weight:700}a:hover,h2,h1{text-shadow:#666 1px 0 1px}article{float:left;width:600px;background:#292;border-radius:160px;border-top-right-radius:60px;border-bottom-left-radius:60px;padding:20px 50px;border:8px solid #cec;margin:8px 40px 8px -50px;transform:skew(-20deg)}article p,article h2,ol{transform:skew(20deg)}body{background:#49e;color:#fff;font-family:Calibri,sans-serif;background:linear-gradient(to bottom,#9cf 0,#49e 100%)}footer{clear:both;text-align:right;margin:20px}h1{padding:50px 10px;float:left;font-size:400%;background:radial-gradient(#ff0,#f93);border-radius:100px;margin:auto}h2{margin-bottom:0}nav a:last-child:before{content:' by '}nav h2{float:right}nav h2:before{content:'\27A3\A0'}nav li{display:inline;margin:8px 15px 0 0}nav ul{display:none}nav:hover ul{border-radius:20px;padding:20px;display:block;position:absolute;margin:20px;background:rgba(0,0,0,.65);z-index:2}p,ol{margin-top:0} \ No newline at end of file +a{color:#fff;font-weight:700}a:hover,h2,h1{text-shadow:#666 1px 0 1px}article{float:left;width:600px;background:#292;border-radius:160px;border-top-right-radius:60px;border-bottom-left-radius:60px;padding:20px 50px;border:8px solid #cec;margin:8px 40px 8px -50px;transform:skew(-20deg)}article p,article h2,ol{transform:skew(20deg)}body{background:#49e;color:#fff;font-family:Calibri,sans-serif;background:linear-gradient(to bottom,#9cf 0,#49e 100%)}footer{clear:both;text-align:right;margin:20px}h1{padding:50px 10px;float:left;font-size:400%;background:radial-gradient(#ff0,#f93);border-radius:100px;margin:auto}h2{margin-bottom:0}nav li>a:last-child:before{content:' by '}nav h2{float:right}nav h2:before{content:'\27A3\A0'}nav li{display:inline;margin:8px 15px 0 0}nav ul{display:none}nav:hover ul{border-radius:20px;padding:20px;display:block;position:absolute;margin:20px;background:rgba(0,0,0,.65);z-index:2}p,ol{margin-top:0} \ No newline at end of file diff --git a/styles/toolbar.css b/styles/toolbar.css index 1597ceb..c29bb03 100644 --- a/styles/toolbar.css +++ b/styles/toolbar.css @@ -1 +1 @@ -BODY{position:relative;margin:0;min-height:100%;background:#EEE;color:#333;font:14px sans-serif}BODY>HEADER,FOOTER{position:fixed;top:0;right:5%;left:5%;background:#AAA;background:linear-gradient(#CCC 0,#AAA 100%) 0 0;box-shadow:0 2px 3px #666;text-shadow:0 1px 0 #DDD}FOOTER{top:auto;bottom:0;box-shadow:0 -2px 3px #666;padding:0 49px}A{color:#000}A:hover,NAV A:last-child{text-decoration:none}H1{float:left;margin:15px 49px;font-size:24px}NAV{float:right;padding:0 49px 0 185px}NAV H2{margin:18px 0;border-bottom:1px dotted #333;font-size:18px}NAV:hover H2{padding:0 0 1px;border:0}NAV UL{position:absolute;top:56px;right:0;height:500%;display:none;margin:0;padding:0;background:#AAA;box-shadow:0 4px 3px #666;list-style:none;text-align:left;overflow-y:scroll}NAV:hover UL{display:block}NAV LI{overflow:hidden;margin:9px 50px;text-align:right}NAV A:first-child{float:left;margin:0 50px 0 0}NAV A:last-child:before{content:"by "}ARTICLE{padding:5% 9%}ARTICLE HEADER,SECTION{display:block;margin:5% 0} \ No newline at end of file +BODY{position:relative;margin:0;min-height:100%;background:#EEE;color:#333;font:14px sans-serif}BODY>HEADER,FOOTER{position:fixed;top:0;right:5%;left:5%;background:#AAA;background:linear-gradient(#CCC 0,#AAA 100%) 0 0;box-shadow:0 2px 3px #666;text-shadow:0 1px 0 #DDD}FOOTER{top:auto;bottom:0;box-shadow:0 -2px 3px #666;padding:0 49px}A{color:#000}A:hover,NAV LI>A:last-child{text-decoration:none}H1{float:left;margin:15px 49px;font-size:24px}NAV{float:right;padding:0 49px 0 185px}NAV H2{margin:18px 0;border-bottom:1px dotted #333;font-size:18px}NAV:hover H2{padding:0 0 1px;border:0}NAV UL{position:absolute;top:56px;right:0;height:500%;display:none;margin:0;padding:0;background:#AAA;box-shadow:0 4px 3px #666;list-style:none;text-align:left;overflow-y:scroll}NAV:hover UL{display:block}NAV LI{overflow:hidden;margin:9px 50px;text-align:right}NAV A:first-child{float:left;margin:0 50px 0 0}NAV LI>A:last-child:before{content:"by "}ARTICLE{padding:5% 9%}ARTICLE HEADER,SECTION{display:block;margin:5% 0} \ No newline at end of file