From 040f54e2f0953e01de744d1503bbb27ec4730f20 Mon Sep 17 00:00:00 2001
From: Ethan Sherbondy <sherbondye@gmail.com>
Date: Tue, 14 Dec 2010 21:43:48 -0500
Subject: [PATCH] Restylized. Now using less.js

---
 index.html         |  43 ++--
 less-1.0.40.min.js |  69 +++++++
 style.css          | 503 ++++++++++++++++++++++++---------------------
 style.less         | 361 ++++++++++++++++++++++++++++++++
 4 files changed, 719 insertions(+), 257 deletions(-)
 create mode 100644 less-1.0.40.min.js
 create mode 100644 style.less

diff --git a/index.html b/index.html
index 614b5c7..420377a 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,14 @@
 	<meta charset="utf-8">
 	<link href="http://fonts.googleapis.com/css?family=Arvo&subset=latin" 
 	    rel="stylesheet" type="text/css">
-	<link rel="stylesheet" href="style.css" type="text/css">
 	<link rel="icon" type="img/png" href="favicon.png">
-	
+	<link rel="stylesheet" type="text/css" href="style.css" type="text/css">
+		
 	<script src="processing-1.0.0.min.js" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" 
         type="text/javascript"></script>
     
-    <script type="text/javascript">
+    <script type="text/javascript">		
 		// Array Remove - By John Resig (MIT Licensed)
 		Array.prototype.remove = function(from, to) {
 		  var rest = this.slice((to || from) + 1 || this.length);
@@ -51,10 +51,11 @@
 			if (location.hash != hash) {
 				hash = location.hash;
 				$("header a").removeClass("current");
-				$("#main > div").not(location.hash).fadeOut();
-				$(location.hash).fadeIn();
-				$(location.hash).trigger("generate");
-				$("a[href='"+hash+"']").addClass("current");
+				$("#main > div").not(location.hash).fadeOut(function() {
+					$(location.hash).fadeIn();
+					$(location.hash).trigger("generate");
+					$("a[href='"+hash+"']").addClass("current");
+				});
 			}
 		}
 		
@@ -122,7 +123,7 @@
 				var the_complexity = complexity_clone.rand();
 	            							
 				$("canvas").each(function() {
-				    $(this).removeClass("rotate");
+				    $(this).removeClass();
 				    
 				    var my_id = $(this).attr("id");
 					
@@ -150,6 +151,7 @@
 					if (the_rotation == true) {
 					    $(this).addClass("rotate");
 				    }
+					$(this).addClass("_"+the_dimensions[0]+"x"+the_dimensions[1]);
 				
 					$.get(the_style+".pde", function(code) {
 						var canvas = document.getElementById(my_id);
@@ -203,7 +205,8 @@
             });
             
             $("#images a").click(function() {
-				$("#image_src").removeClass("rotate");
+				$(this).hide();
+				$("#image_src").removeClass();
 				
                 var source = document.getElementById($(this).attr("href").slice(1)).toDataURL();
                 $("#image_src").attr("src", source);
@@ -211,6 +214,7 @@
 					$("#image_src").addClass("rotate");
 				}
                 $("#upload").show();
+
                 return false;
             });
 
@@ -220,6 +224,7 @@
 				$("#image_name").val("").removeClass("error");
 				$("#errors").text("").hide();
                 $("#upload").hide();
+				$("#images a").show();
 			}
             
             $("#cancel").click(function() {
@@ -314,35 +319,27 @@ <h1><a href="#content">Mondrian Automaton</a></h1>
 	<div id="main">
 	    <div id="content">
 	        <h2>Choose the image you prefer, and we&rsquo;ll hone in on your tastes.</h2>
-			<h2>If you love one, add it to <a href="#gallery">the Gallery</a>.</h2>
+			<h2>If you love one, add it to <a href="#gallery">your Gallery</a>.</h2>
             
 	        <ol id="images">
 	            <li>
-					<div>
-	                	<canvas id="c1"></canvas>
-					</div>
-	                <a href="#c1">Add to gallery</a>
+					<a href="#c1">Add to gallery</a>
+	                <canvas id="c1"></canvas>
 	            </li>
         
 	            <li>
-					<div>
-	                	<canvas id="c2"></canvas>
-					</div>
 	                <a href="#c2">Add to gallery</a>
+	                <canvas id="c2"></canvas>
 	            </li>
             
 	            <li>
-					<div>
-	                	<canvas id="c3"></canvas>
-					</div>
 	                <a href="#c3">Add to gallery</a>
+	                <canvas id="c3"></canvas>
 	            </li>
         
 	            <li>
-					<div>
-	                	<canvas id="c4"></canvas>
-					</div>
 	                <a href="#c4">Add to gallery</a>
+	                <canvas id="c4"></canvas>
 	            </li>
 	        </ol>
 	    </div>
diff --git a/less-1.0.40.min.js b/less-1.0.40.min.js
new file mode 100644
index 0000000..e812bfc
--- /dev/null
+++ b/less-1.0.40.min.js
@@ -0,0 +1,69 @@
+//
+// LESS - Leaner CSS v1.0.40
+// http://lesscss.org
+// 
+// Copyright (c) 2010, Alexis Sellier
+// Licensed under the Apache 2.0 License.
+//
+(function(y){function q(d){return y.less[d.split("/")[1]]}function U(){for(var d=document.getElementsByTagName("style"),b=0;b<d.length;b++)if(d[b].type.match(V))(new o.Parser).parse(d[b].innerHTML||"",function(e,g){d[b].type="text/css";d[b].innerHTML=g.toCSS()})}function W(d,b){for(var e=0;e<o.sheets.length;e++)X(o.sheets[e],d,b,o.sheets.length-(e+1))}function X(d,b,e,g){var a=y.location.href.replace(/[#?].*$/,""),h=d.href.replace(/\?.*$/,""),j=D&&D.getItem(h),i=D&&D.getItem(h+":timestamp"),n={css:j,
+timestamp:i};/^(https?|file):/.test(h)||(h=a.slice(0,a.lastIndexOf("/")+1)+h);$(d.href,d.type,function(r,w){if(!e&&n&&w&&(new Date(w)).valueOf()===(new Date(n.timestamp)).valueOf()){N(n.css,d);b(null,d,{local:true,remaining:g})}else try{(new o.Parser({optimization:o.optimization,paths:[h.replace(/[\w\.-]+$/,"")],mime:d.type})).parse(r,function(t,E){if(t)return Q(t,h);try{b(E,d,{local:false,lastModified:w,remaining:g});aa(document.getElementById("less-error-message:"+R(h)))}catch(O){Q(O,h)}})}catch(v){Q(v,
+h)}},function(r,w){throw new Error("Couldn't load "+w+" ("+r+")");})}function R(d){return d.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function N(d,b,e){var g,a=b.href?b.href.replace(/\?.*$/,""):"",h="less:"+(b.title||R(a));if((g=document.getElementById(h))===null){g=document.createElement("style");g.type="text/css";g.media=b.media||"screen";g.id=h;document.getElementsByTagName("head")[0].appendChild(g)}if(g.styleSheet)try{g.styleSheet.cssText=
+d}catch(j){throw new Error("Couldn't reassign styleSheet.cssText.");}else(function(i){if(g.childNodes.length>0)g.firstChild.nodeValue!==i.nodeValue&&g.replaceChild(i,g.firstChild);else g.appendChild(i)})(document.createTextNode(d));if(e&&D){I("saving "+a+" to cache.");D.setItem(a,d);D.setItem(a+":timestamp",e)}}function $(d,b,e,g){function a(i,n,r){if(i.status>=200&&i.status<300)n(i.responseText,i.getResponseHeader("Last-Modified"));else typeof r==="function"&&r(i.status,d)}var h=ba(),j=P?false:o.async;
+typeof h.overrideMimeType==="function"&&h.overrideMimeType("text/css");h.open("GET",d,j);h.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5");h.send(null);if(P)h.status===0?e(h.responseText):g(h.status,d);else if(j)h.onreadystatechange=function(){h.readyState==4&&a(h,e,g)};else a(h,e,g)}function ba(){if(y.XMLHttpRequest)return new XMLHttpRequest;else try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(d){I("browser doesn't support AJAX.");return null}}function aa(d){return d&&
+d.parentNode.removeChild(d)}function I(d){o.env=="development"&&typeof console!=="undefined"&&console.log("less: "+d)}function Q(d,b){var e="less-error-message:"+R(b),g=document.createElement("div"),a;g.id=e;g.className="less-error-message";b="<h3>"+(d.message||"There is an error in your .less file")+'</h3><p><a href="'+b+'">'+b+"</a> ";if(d.extract)b+="on line "+d.line+", column "+(d.column+1)+":</p>"+'<ul>\n<li><label>[-1]</label><pre class="ctx">{0}</pre></li>\n<li><label>[0]</label><pre>{current}</pre></li>\n<li><label>[1]</label><pre class="ctx">{2}</pre></li>\n</ul>'.replace(/\[(-?\d)\]/g,
+function(h,j){return parseInt(d.line)+parseInt(j)||""}).replace(/\{(\d)\}/g,function(h,j){return d.extract[parseInt(j)]||""}).replace(/\{current\}/,d.extract[1].slice(0,d.column)+'<span class="error">'+d.extract[1].slice(d.column)+"</span>");g.innerHTML=b;N(".less-error-message ul, .less-error-message li {\nlist-style-type: none;\nmargin-right: 15px;\npadding: 4px 0;\nmargin: 0;\n}\n.less-error-message label {\nfont-size: 12px;\nmargin-right: 15px;\npadding: 4px 0;\ncolor: #cc7777;\n}\n.less-error-message pre {\ncolor: #ee4444;\npadding: 4px 0;\nmargin: 0;\ndisplay: inline-block;\n}\n.less-error-message pre.ctx {\ncolor: #dd4444;\n}\n.less-error-message h3 {\nfont-size: 20px;\nfont-weight: bold;\npadding: 15px 0 5px 0;\nmargin: 0;\n}\n.less-error-message a {\ncolor: #10a\n}\n.less-error-message .error {\ncolor: red;\nfont-weight: bold;\npadding-bottom: 2px;\nborder-bottom: 1px dashed red;\n}",
+{title:"error-message"});g.style.cssText="font-family: Arial, sans-serif;border: 1px solid #e00;background-color: #eee;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;color: #e00;padding: 15px;margin-bottom: 15px";if(o.env=="development")a=setInterval(function(){if(document.body){document.getElementById(e)?document.body.replaceChild(g,document.getElementById(e)):document.body.insertBefore(g,document.body.firstChild);clearInterval(a)}},10)}if(!Array.isArray)Array.isArray=function(d){return Object.prototype.toString.call(d)===
+"[object Array]"||d instanceof Array};if(!Array.prototype.forEach)Array.prototype.forEach=function(d,b){for(var e=this.length>>>0,g=0;g<e;g++)g in this&&d.call(b,this[g],g,this)};if(!Array.prototype.map)Array.prototype.map=function(d,b){for(var e=this.length>>>0,g=new Array(e),a=0;a<e;a++)if(a in this)g[a]=d.call(b,this[a],a,this);return g};if(!Array.prototype.filter)Array.prototype.filter=function(d,b){for(var e=[],g=0;g<this.length;g++)d.call(b,this[g])&&e.push(this[g]);return e};if(!Array.prototype.reduce)Array.prototype.reduce=
+function(d){var b=this.length>>>0,e=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var g=arguments[1];else{do{if(e in this){g=this[e++];break}if(++e>=b)throw new TypeError;}while(1)}for(;e<b;e++)if(e in this)g=d.call(null,g,this[e],e,this);return g};if(!Array.prototype.indexOf)Array.prototype.indexOf=function(d,b){var e=this.length;b=b||0;if(!e)return-1;if(b>=e)return-1;if(b<0)b+=e;for(;b<e;b++)if(Object.prototype.hasOwnProperty.call(this,b))if(d===this[b])return b;return-1};
+if(!Object.keys)Object.keys=function(d){var b=[];for(var e in d)Object.prototype.hasOwnProperty.call(d,e)&&b.push(e);return b};if(!String.prototype.trim)String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")};var o,m;if(typeof y==="undefined"){o=exports;m=q("less/tree")}else{if(typeof y.less==="undefined")y.less={};o=y.less;m=y.less.tree={}}o.Parser=function(d){function b(){r=t[n];E=w=i}function e(){t[n]=r;E=i=w}function g(){if(i>E){t[n]=t[n].slice(i-E);E=i}}
+function a(f){var k,l,p;if(f instanceof Function)return f.call(O.parsers);else if(typeof f==="string"){f=j.charAt(i)===f?f:null;k=1;g()}else{g();if(f=f.exec(t[n]))k=f[0].length;else return null}if(f){mem=i+=k;for(p=i+t[n].length-k;i<p;){l=j.charCodeAt(i);if(!(l===32||l===10||l===9))break;i++}t[n]=t[n].slice(k+(i-mem));E=i;t[n].length===0&&n<t.length-1&&n++;return typeof f==="string"?f:f.length===1?f[0]:f}}function h(f){return typeof f==="string"?j.charAt(i)===f:f.test(t[n])?true:false}var j,i,n,r,
+w,v,t,E,O,Y=function(){},S=this.imports={paths:d&&d.paths||[],queue:[],files:{},mime:d&&d.mime,push:function(f,k){var l=this;this.queue.push(f);o.Parser.importer(f,this.paths,function(p){l.queue.splice(l.queue.indexOf(f),1);l.files[f]=p;k(p);l.queue.length===0&&Y()},d)}};this.env=d=d||{};this.optimization="optimization"in this.env?this.env.optimization:1;this.env.filename=this.env.filename||null;return O={imports:S,parse:function(f,k){var l,p,K=null;i=n=E=v=0;t=[];j=f.replace(/\r\n/g,"\n");t=function(L){for(var G=
+0,H=/[^"'`\{\}\/]+/g,A=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,B=0,x,z=L[0],C,s=0,u;s<j.length;s++){H.lastIndex=s;if(x=H.exec(j))if(x.index===s){s+=x[0].length;z.push(x[0])}u=j.charAt(s);A.lastIndex=s;if(!C&&u==="/"){x=j.charAt(s+1);if(x==="/"||x==="*")if(x=A.exec(j))if(x.index===s){s+=x[0].length;z.push(x[0]);u=j.charAt(s)}}if(u==="{"&&!C){B++;z.push(u)}else if(u==="}"&&!C){B--;z.push(u);L[++G]=z=[]}else{if(u==='"'||u==="'"||u==="`")C=C?C===u?false:C:u;z.push(u)}}if(B>0)throw{type:"Syntax",message:"Missing closing `}`",
+filename:d.filename};return L.map(function(F){return F.join("")})}([[]]);l=new m.Ruleset([],a(this.parsers.primary));l.root=true;l.toCSS=function(L){var G,H;return function(A,B){function x(u){return u?(j.slice(0,u).match(/\n/g)||"").length:null}var z=[];A=A||{};if(typeof B==="object"&&!Array.isArray(B)){B=Object.keys(B).map(function(u){var F=B[u];if(!(F instanceof m.Value)){F instanceof m.Expression||(F=new m.Expression([F]));F=new m.Value([F])}return new m.Rule("@"+u,F,false,0)});z=[new m.Ruleset(null,
+B)]}try{var C=L.call(this,{frames:z}).toCSS([],{compress:A.compress||false})}catch(s){H=j.split("\n");G=x(s.index);A=s.index;for(z=-1;A>=0&&j.charAt(A)!=="\n";A--)z++;throw{type:s.type,message:s.message,filename:d.filename,index:s.index,line:typeof G==="number"?G+1:null,callLine:s.call&&x(s.call)+1,callExtract:H[x(s.call)],stack:s.stack,column:z,extract:[H[G-1],H[G],H[G+1]]};}return A.compress?C.replace(/(\s)+/g,"$1"):C}}(l.eval);if(i<j.length-1){i=v;p=j.split("\n");f=(j.slice(0,i).match(/\n/g)||
+"").length+1;for(var T=i,Z=-1;T>=0&&j.charAt(T)!=="\n";T--)Z++;K={name:"ParseError",message:"Syntax Error on line "+f,filename:d.filename,line:f,column:Z,extract:[p[f-2],p[f-1],p[f]]}}if(this.imports.queue.length>0)Y=function(){k(K,l)};else k(K,l)},parsers:{primary:function(){for(var f,k=[];(f=a(this.mixin.definition)||a(this.rule)||a(this.ruleset)||a(this.mixin.call)||a(this.comment)||a(this.directive))||a(/^[\s\n]+/);)f&&k.push(f);return k},comment:function(){var f;if(j.charAt(i)==="/")if(j.charAt(i+
+1)==="/")return new m.Comment(a(/^\/\/.*/),true);else if(f=a(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new m.Comment(f)},entities:{quoted:function(){var f;if(!(j.charAt(i)!=='"'&&j.charAt(i)!=="'"))if(f=a(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new m.Quoted(f[0],f[1]||f[2])},keyword:function(){var f;if(f=a(/^[A-Za-z-]+/))return new m.Keyword(f)},call:function(){var f,k;if(f=/^([\w-]+|%)\(/.exec(t[n])){f=f[1].toLowerCase();if(f==="url")return null;else i+=f.length+1;if(f==="alpha")return a(this.alpha);
+k=a(this.entities.arguments);if(a(")"))if(f)return new m.Call(f,k)}},arguments:function(){for(var f=[],k;k=a(this.expression);){f.push(k);if(!a(","))break}return f},literal:function(){return a(this.entities.dimension)||a(this.entities.color)||a(this.entities.quoted)},url:function(){var f;if(!(j.charAt(i)!=="u"||!a(/^url\(/))){f=a(this.entities.quoted)||a(this.entities.variable)||a(this.entities.dataURI)||a(/^[-\w%@$\/.&=:;#+?]+/)||"";if(!a(")"))throw new Error("missing closing ) for url()");return new m.URL(f.value||
+f.data||f instanceof m.Variable?f:new m.Anonymous(f),S.paths)}},dataURI:function(){var f;if(a(/^data:/)){f={};f.mime=a(/^[^\/]+\/[^,;)]+/)||"";f.charset=a(/^;\s*charset=[^,;)]+/)||"";f.base64=a(/^;\s*base64/)||"";f.data=a(/^,\s*[^)]+/);if(f.data)return f}},variable:function(){var f,k=i;if(j.charAt(i)==="@"&&(f=a(/^@[\w-]+/)))return new m.Variable(f,k)},color:function(){var f;if(j.charAt(i)==="#"&&(f=a(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new m.Color(f[1])},dimension:function(){var f;f=j.charCodeAt(i);
+if(!(f>57||f<45||f===47))if(f=a(/^(-?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new m.Dimension(f[1],f[2])},javascript:function(){var f;if(j.charAt(i)==="`")if(f=a(/^`([^`]*)`/))return new m.JavaScript(f[1],i)}},variable:function(){var f;if(j.charAt(i)==="@"&&(f=a(/^(@[\w-]+)\s*:/)))return f[1]},shorthand:function(){var f,k;if(h(/^[@\w.%-]+\/[@\w.-]+/))if((f=a(this.entity))&&a("/")&&(k=a(this.entity)))return new m.Shorthand(f,k)},mixin:{call:function(){var f=[],k,l,p,K=
+i;k=j.charAt(i);if(!(k!=="."&&k!=="#")){for(;k=a(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/);){f.push(new m.Element(l,k));l=a(">")}a("(")&&(p=a(this.entities.arguments))&&a(")");if(f.length>0&&(a(";")||h("}")))return new m.mixin.Call(f,p,K)}},definition:function(){var f,k=[],l,p;if(!(j.charAt(i)!=="."&&j.charAt(i)!=="#"||h(/^[^{]*(;|})/)))if(f=a(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){for(f=f[1];l=a(this.entities.variable)||a(this.entities.literal)||a(this.entities.keyword);){if(l instanceof
+m.Variable)if(a(":"))if(p=a(this.expression))k.push({name:l.name,value:p});else throw new Error("Expected value");else k.push({name:l.name});else k.push({value:l});if(!a(","))break}if(!a(")"))throw new Error("Expected )");if(l=a(this.block))return new m.mixin.Definition(f,k,l)}}},entity:function(){return a(this.entities.literal)||a(this.entities.variable)||a(this.entities.url)||a(this.entities.call)||a(this.entities.keyword)||a(this.entities.javascript)},end:function(){return a(";")||h("}")},alpha:function(){var f;
+if(a(/^opacity=/i))if(f=a(/^\d+/)||a(this.entities.variable)){if(!a(")"))throw new Error("missing closing ) for alpha()");return new m.Alpha(f)}},element:function(){var f;c=a(this.combinator);if(f=a(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||a("*")||a(this.attribute)||a(/^\([^)@]+\)/))return new m.Element(c,f)},combinator:function(){var f=j.charAt(i);if(f===">"||f==="&"||f==="+"||f==="~"){for(i++;j.charAt(i)===" ";)i++;return new m.Combinator(f)}else if(f===":"&&j.charAt(i+
+1)===":"){for(i+=2;j.charAt(i)===" ";)i++;return new m.Combinator("::")}else return j.charAt(i-1)===" "?new m.Combinator(" "):new m.Combinator(null)},selector:function(){for(var f,k=[],l;f=a(this.element);){l=j.charAt(i);k.push(f);if(l==="{"||l==="}"||l===";"||l===",")break}if(k.length>0)return new m.Selector(k)},tag:function(){return a(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||a("*")},attribute:function(){var f="",k,l,p;if(a("[")){if(k=a(/^[a-zA-Z-]+/)||a(this.entities.quoted))f=(p=a(/^[|~*$^]?=/))&&(l=a(this.entities.quoted)||
+a(/^[\w-]+/))?[k,p,l.toCSS?l.toCSS():l].join(""):k;if(a("]"))if(f)return"["+f+"]"}},block:function(){var f;if(a("{")&&(f=a(this.primary))&&a("}"))return f},ruleset:function(){var f=[],k,l;b();if(k=/^([.#: \w-]+)[\s\n]*\{/.exec(t[n])){i+=k[0].length-1;f=[new m.Selector([new m.Element(null,k[1])])]}else{for(;k=a(this.selector);){f.push(k);if(!a(","))break}k&&a(this.comment)}if(f.length>0&&(l=a(this.block)))return new m.Ruleset(f,l);else{v=i;e()}},rule:function(){var f,k;f=j.charAt(i);var l;b();if(!(f===
+"."||f==="#"||f==="&"))if(f=a(this.variable)||a(this.property)){if(f.charAt(0)!="@"&&(match=/^([^@+\/'"*`(;{}-]*);/.exec(t[n]))){i+=match[0].length-1;k=new m.Anonymous(match[1])}else k=f==="font"?a(this.font):a(this.value);l=a(this.important);if(k&&a(this.end))return new m.Rule(f,k,l,w);else{v=i;e()}}},"import":function(){var f;if(a(/^@import\s+/)&&(f=a(this.entities.quoted)||a(this.entities.url))&&a(";"))return new m.Import(f,S)},directive:function(){var f,k,l;if(j.charAt(i)==="@")if(k=a(this["import"]))return k;
+else if(f=a(/^@media|@page/)){l=(a(/^[^{]+/)||"").trim();if(k=a(this.block))return new m.Directive(f+" "+l,k)}else if(f=a(/^@[-a-z]+/))if(f==="@font-face"){if(k=a(this.block))return new m.Directive(f,k)}else if((k=a(this.entity))&&a(";"))return new m.Directive(f,k)},font:function(){for(var f=[],k=[],l;l=a(this.shorthand)||a(this.entity);)k.push(l);f.push(new m.Expression(k));if(a(","))for(;l=a(this.expression);){f.push(l);if(!a(","))break}return new m.Value(f)},value:function(){for(var f,k=[];f=a(this.expression);){k.push(f);
+if(!a(","))break}if(k.length>0)return new m.Value(k)},important:function(){if(j.charAt(i)==="!")return a(/^! *important/)},sub:function(){var f;if(a("(")&&(f=a(this.expression))&&a(")"))return f},multiplication:function(){var f,k,l,p;if(f=a(this.operand)){for(;(l=a("/")||a("*"))&&(k=a(this.operand));)p=new m.Operation(l,[p||f,k]);return p||f}},addition:function(){var f,k,l,p;if(f=a(this.multiplication)){for(;(l=a(/^[-+]\s+/)||j.charAt(i-1)!=" "&&(a("+")||a("-")))&&(k=a(this.multiplication));)p=new m.Operation(l,
+[p||f,k]);return p||f}},operand:function(){return a(this.sub)||a(this.entities.dimension)||a(this.entities.color)||a(this.entities.variable)||a(this.entities.call)},expression:function(){for(var f,k=[];f=a(this.addition)||a(this.entity);)k.push(f);if(k.length>0)return new m.Expression(k)},property:function(){var f;if(f=a(/^(\*?-?[-a-z_0-9]+)\s*:/))return f[1]}}}};if(typeof y!=="undefined")o.Parser.importer=function(d,b,e,g){if(d.charAt(0)!=="/"&&b.length>0)d=b[0]+d;X({href:d,title:d,type:g.mime},
+e,true)};(function(d){function b(a){return d.functions.hsla(a.h,a.s,a.l,a.a)}function e(a){if(a instanceof d.Dimension)return parseFloat(a.unit=="%"?a.value/100:a.value);else if(typeof a==="number")return a;else throw{error:"RuntimeError",message:"color functions take numbers as parameters"};}function g(a){return Math.min(1,Math.max(0,a))}d.functions={rgb:function(a,h,j){return this.rgba(a,h,j,1)},rgba:function(a,h,j,i){a=[a,h,j].map(function(n){return e(n)});i=e(i);return new d.Color(a,i)},hsl:function(a,
+h,j){return this.hsla(a,h,j,1)},hsla:function(a,h,j,i){function n(v){v=v<0?v+1:v>1?v-1:v;return v*6<1?w+(r-w)*v*6:v*2<1?r:v*3<2?w+(r-w)*(2/3-v)*6:w}a=e(a)%360/360;h=e(h);j=e(j);i=e(i);var r=j<=0.5?j*(h+1):j+h-j*h,w=j*2-r;return this.rgba(n(a+1/3)*255,n(a)*255,n(a-1/3)*255,i)},hue:function(a){return new d.Dimension(Math.round(a.toHSL().h))},saturation:function(a){return new d.Dimension(Math.round(a.toHSL().s*100),"%")},lightness:function(a){return new d.Dimension(Math.round(a.toHSL().l*100),"%")},
+alpha:function(a){return new d.Dimension(a.toHSL().a)},saturate:function(a,h){a=a.toHSL();a.s+=h.value/100;a.s=g(a.s);return b(a)},desaturate:function(a,h){a=a.toHSL();a.s-=h.value/100;a.s=g(a.s);return b(a)},lighten:function(a,h){a=a.toHSL();a.l+=h.value/100;a.l=g(a.l);return b(a)},darken:function(a,h){a=a.toHSL();a.l-=h.value/100;a.l=g(a.l);return b(a)},fadein:function(a,h){a=a.toHSL();a.a+=h.value/100;a.a=g(a.a);return b(a)},fadeout:function(a,h){a=a.toHSL();a.a-=h.value/100;a.a=g(a.a);return b(a)},
+spin:function(a,h){a=a.toHSL();h=(a.h+h.value)%360;a.h=h<0?360+h:h;return b(a)},mix:function(a,h,j){j=j.value/100;var i=j*2-1,n=a.toHSL().a-h.toHSL().a;i=((i*n==-1?i:(i+n)/(1+i*n))+1)/2;n=1-i;return new d.Color([a.rgb[0]*i+h.rgb[0]*n,a.rgb[1]*i+h.rgb[1]*n,a.rgb[2]*i+h.rgb[2]*n],a.alpha*j+h.alpha*(1-j))},greyscale:function(a){return this.desaturate(a,new d.Dimension(100))},e:function(a){return new d.Anonymous(a instanceof d.JavaScript?a.evaluated:a)},"%":function(a){for(var h=Array.prototype.slice.call(arguments,
+1),j=a.value,i=0;i<h.length;i++)j=j.replace(/%s/,h[i].value).replace(/%[da]/,h[i].toCSS());j=j.replace(/%%/g,"%");return new d.Quoted('"'+j+'"',j)}}})(q("less/tree"));(function(d){d.Alpha=function(b){this.value=b};d.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(){return this}}})(q("less/tree"));(function(d){d.Anonymous=function(b){this.value=b.value||b};d.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}})(q("less/tree"));
+(function(d){d.Call=function(b,e){this.name=b;this.args=e};d.Call.prototype={eval:function(b){var e=this.args.map(function(g){return g.eval(b)});return this.name in d.functions?d.functions[this.name].apply(d.functions,e):new d.Anonymous(this.name+"("+e.map(function(g){return g.toCSS()}).join(", ")+")")},toCSS:function(b){return this.eval(b).toCSS()}}})(q("less/tree"));(function(d){d.Color=function(b,e){this.rgb=Array.isArray(b)?b:b.length==6?b.match(/.{2}/g).map(function(g){return parseInt(g,16)}):
+b.split("").map(function(g){return parseInt(g+g,16)});this.alpha=typeof e==="number"?e:1};d.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(b){return Math.round(b)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(b){b=Math.round(b);b=(b>255?255:b<0?0:b).toString(16);return b.length===1?"0"+b:b}).join("")},operate:function(b,e){var g=[];e instanceof d.Color||(e=e.toColor());for(var a=0;a<3;a++)g[a]=d.operate(b,this.rgb[a],
+e.rgb[a]);return new d.Color(g)},toHSL:function(){var b=this.rgb[0]/255,e=this.rgb[1]/255,g=this.rgb[2]/255,a=this.alpha,h=Math.max(b,e,g),j=Math.min(b,e,g),i,n=(h+j)/2,r=h-j;if(h===j)i=j=0;else{j=n>0.5?r/(2-h-j):r/(h+j);switch(h){case b:i=(e-g)/r+(e<g?6:0);break;case e:i=(g-b)/r+2;break;case g:i=(b-e)/r+4;break}i/=6}return{h:i*360,s:j,l:n,a:a}}}})(q("less/tree"));(function(d){d.Comment=function(b,e){this.value=b;this.silent=!!e};d.Comment.prototype={toCSS:function(b){return b.compress?"":this.value},
+eval:function(){return this}}})(q("less/tree"));(function(d){d.Dimension=function(b,e){this.value=parseFloat(b);this.unit=e||null};d.Dimension.prototype={eval:function(){return this},toColor:function(){return new d.Color([this.value,this.value,this.value])},toCSS:function(){return this.value+this.unit},operate:function(b,e){return new d.Dimension(d.operate(b,this.value,e.value),this.unit||e.unit)}}})(q("less/tree"));(function(d){d.Directive=function(b,e){this.name=b;if(Array.isArray(e))this.ruleset=
+new d.Ruleset([],e);else this.value=e};d.Directive.prototype={toCSS:function(b,e){if(this.ruleset){this.ruleset.root=true;return this.name+(e.compress?"{":" {\n  ")+this.ruleset.toCSS(b,e).trim().replace(/\n/g,"\n  ")+(e.compress?"}":"\n}\n")}else return this.name+" "+this.value.toCSS()+";\n"},eval:function(b){b.frames.unshift(this);this.ruleset=this.ruleset&&this.ruleset.eval(b);b.frames.shift();return this},variable:function(b){return d.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return d.Ruleset.prototype.find.apply(this.ruleset,
+arguments)},rulesets:function(){return d.Ruleset.prototype.rulesets.apply(this.ruleset)}}})(q("less/tree"));(function(d){d.Element=function(b,e){this.combinator=b instanceof d.Combinator?b:new d.Combinator(b);this.value=e.trim()};d.Element.prototype.toCSS=function(b){return this.combinator.toCSS(b||{})+this.value};d.Combinator=function(b){this.value=b===" "?" ":b?b.trim():""};d.Combinator.prototype.toCSS=function(b){return{"":""," ":" ","&":"",":":" :","::":"::","+":b.compress?"+":" + ","~":b.compress?
+"~":" ~ ",">":b.compress?">":" > "}[this.value]}})(q("less/tree"));(function(d){d.Expression=function(b){this.value=b};d.Expression.prototype={eval:function(b){return this.value.length>1?new d.Expression(this.value.map(function(e){return e.eval(b)})):this.value[0].eval(b)},toCSS:function(b){return this.value.map(function(e){return e.toCSS(b)}).join(" ")}}})(q("less/tree"));(function(d){d.Import=function(b,e){var g=this;this._path=b;this.path=b instanceof d.Quoted?/\.(le?|c)ss$/.test(b.value)?b.value:
+b.value+".less":b.value.value||b.value;(this.css=/css$/.test(this.path))||e.push(this.path,function(a){if(!a)throw new Error("Error parsing "+g.path);g.root=a})};d.Import.prototype={toCSS:function(){return this.css?"@import "+this._path.toCSS()+";\n":""},eval:function(b){var e;if(this.css)return this;else{e=new d.Ruleset(null,this.root.rules.slice(0));for(var g=0;g<e.rules.length;g++)e.rules[g]instanceof d.Import&&Array.prototype.splice.apply(e.rules,[g,1].concat(e.rules[g].eval(b)));return e.rules}}}})(q("less/tree"));
+(function(d){d.JavaScript=function(b,e){this.expression=b;this.index=e};d.JavaScript.prototype={toCSS:function(){return JSON.stringify(this.evaluated)},eval:function(b){var e=new Function("return ("+this.expression+")"),g={};for(var a in b.frames[0].variables())g[a.slice(1)]={value:b.frames[0].variables()[a].value,toJS:function(){return this.value.eval(b).toCSS()}};try{this.evaluated=e.call(g)}catch(h){throw{message:"JavaScript evaluation error: '"+h.name+": "+h.message+"'",index:this.index};}return this}}})(q("less/tree"));
+(function(d){d.Keyword=function(b){this.value=b};d.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value}}})(q("less/tree"));(function(d){d.mixin={};d.mixin.Call=function(b,e,g){this.selector=new d.Selector(b);this.arguments=e;this.index=g};d.mixin.Call.prototype={eval:function(b){for(var e,g=[],a=false,h=0;h<b.frames.length;h++)if((e=b.frames[h].find(this.selector)).length>0){for(h=0;h<e.length;h++)if(e[h].match(this.arguments,b))try{Array.prototype.push.apply(g,e[h].eval(b,
+this.arguments).rules);a=true}catch(j){throw{message:j.message,index:j.index,stack:j.stack,call:this.index};}if(a)return g;else throw{message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(i){return i.toCSS()}).join(", ")+")`",index:this.index};}throw{message:this.selector.toCSS().trim()+" is undefined",index:this.index};}};d.mixin.Definition=function(b,e,g){this.name=b;this.selectors=[new d.Selector([new d.Element(null,b)])];this.params=e;this.arity=
+e.length;this.rules=g;this._lookups={};this.required=e.reduce(function(a,h){return h.name&&!h.value?a+1:a},0);this.parent=d.Ruleset.prototype;this.frames=[]};d.mixin.Definition.prototype={toCSS:function(){return""},variable:function(b){return this.parent.variable.call(this,b)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},eval:function(b,e){for(var g=new d.Ruleset(null,
+[]),a=0,h;a<this.params.length;a++)if(this.params[a].name)if(h=e&&e[a]||this.params[a].value)g.rules.unshift(new d.Rule(this.params[a].name,h.eval(b)));else throw{message:"wrong number of arguments for "+this.name+" ("+e.length+" for "+this.arity+")"};return(new d.Ruleset(null,this.rules.slice(0))).eval({frames:[this,g].concat(this.frames,b.frames)})},match:function(b,e){var g=b&&b.length||0;if(g<this.required)return false;g=Math.min(g,this.arity);for(var a=0;a<g;a++)if(!this.params[a].name)if(b[a].eval(e).toCSS()!=
+this.params[a].value.eval(e).toCSS())return false;return true}}})(q("less/tree"));(function(d){d.Operation=function(b,e){this.op=b.trim();this.operands=e};d.Operation.prototype.eval=function(b){var e=this.operands[0].eval(b);b=this.operands[1].eval(b);var g;if(e instanceof d.Dimension&&b instanceof d.Color)if(this.op==="*"||this.op==="+"){g=b;b=e;e=g}else throw{name:"OperationError",message:"Can't substract or divide a color from a number"};return e.operate(this.op,b)};d.operate=function(b,e,g){switch(b){case "+":return e+
+g;case "-":return e-g;case "*":return e*g;case "/":return e/g}}})(q("less/tree"));(function(d){d.Quoted=function(b,e){this.value=e||"";this.quote=b.charAt(0)};d.Quoted.prototype={toCSS:function(){return this.quote+this.value+this.quote},eval:function(){return this}}})(q("less/tree"));(function(d){d.Rule=function(b,e,g,a){this.name=b;this.value=e instanceof d.Value?e:new d.Value([e]);this.important=g?" "+g.trim():"";this.index=a;this.variable=b.charAt(0)==="@"?true:false};d.Rule.prototype.toCSS=function(b){return this.variable?
+"":this.name+(b.compress?":":": ")+this.value.toCSS(b)+this.important+";"};d.Rule.prototype.eval=function(b){return new d.Rule(this.name,this.value.eval(b),this.important,this.index)};d.Shorthand=function(b,e){this.a=b;this.b=e};d.Shorthand.prototype={toCSS:function(b){return this.a.toCSS(b)+"/"+this.b.toCSS(b)},eval:function(){return this}}})(q("less/tree"));(function(d){d.Ruleset=function(b,e){this.selectors=b;this.rules=e;this._lookups={}};d.Ruleset.prototype={eval:function(b){var e=new d.Ruleset(this.selectors,
+this.rules.slice(0));e.root=this.root;b.frames.unshift(e);if(e.root)for(var g=0;g<e.rules.length;g++)e.rules[g]instanceof d.Import&&Array.prototype.splice.apply(e.rules,[g,1].concat(e.rules[g].eval(b)));for(g=0;g<e.rules.length;g++)if(e.rules[g]instanceof d.mixin.Definition)e.rules[g].frames=b.frames.slice(0);for(g=0;g<e.rules.length;g++)e.rules[g]instanceof d.mixin.Call&&Array.prototype.splice.apply(e.rules,[g,1].concat(e.rules[g].eval(b)));g=0;for(var a;g<e.rules.length;g++){a=e.rules[g];a instanceof
+d.mixin.Definition||(e.rules[g]=a.eval?a.eval(b):a)}b.frames.shift();return e},match:function(b){return!b||b.length===0},variables:function(){return this._variables?this._variables:(this._variables=this.rules.reduce(function(b,e){if(e instanceof d.Rule&&e.variable===true)b[e.name]=e;return b},{}))},variable:function(b){return this.variables()[b]},rulesets:function(){return this._rulesets?this._rulesets:(this._rulesets=this.rules.filter(function(b){return b instanceof d.Ruleset||b instanceof d.mixin.Definition}))},
+find:function(b,e){e=e||this;var g=[],a=b.toCSS();if(a in this._lookups)return this._lookups[a];this.rulesets().forEach(function(h){if(h!==e)for(var j=0;j<h.selectors.length;j++)if(b.match(h.selectors[j])){b.elements.length>1?Array.prototype.push.apply(g,h.find(new d.Selector(b.elements.slice(1)),e)):g.push(h);break}});return this._lookups[a]=g},toCSS:function(b,e){var g=[],a=[],h=[],j=[];if(!this.root)if(b.length===0)j=this.selectors.map(function(r){return[r]});else for(var i=0;i<this.selectors.length;i++)for(var n=
+0;n<b.length;n++)j.push(b[n].concat([this.selectors[i]]));for(i=0;i<this.rules.length;i++){b=this.rules[i];if(b.rules||b instanceof d.Directive)h.push(b.toCSS(j,e));else if(b instanceof d.Comment)b.silent||(this.root?h.push(b.toCSS(e)):a.push(b.toCSS(e)));else if(b.toCSS&&!b.variable)a.push(b.toCSS(e));else b.value&&!b.variable&&a.push(b.value.toString())}h=h.join("");if(this.root)g.push(a.join(e.compress?"":"\n"));else if(a.length>0){j=j.map(function(r){return r.map(function(w){return w.toCSS(e)}).join("").trim()}).join(e.compress?
+",":j.length>3?",\n":", ");g.push(j,(e.compress?"{":" {\n  ")+a.join(e.compress?"":"\n  ")+(e.compress?"}":"\n}\n"))}g.push(h);return g.join("")+(e.compress?"\n":"")}}})(q("less/tree"));(function(d){d.Selector=function(b){this.elements=b;if(this.elements[0].combinator.value==="")this.elements[0].combinator.value=" "};d.Selector.prototype.match=function(b){return this.elements[0].value===b.elements[0].value?true:false};d.Selector.prototype.toCSS=function(b){if(this._css)return this._css;return this._css=
+this.elements.map(function(e){return typeof e==="string"?" "+e.trim():e.toCSS(b)}).join("")}})(q("less/tree"));(function(d){d.URL=function(b,e){if(b.data)this.attrs=b;else{if(!/^(?:https?:\/|file:\/)?\//.test(b.value)&&e.length>0&&typeof y!=="undefined")b.value=e[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value);this.value=b;this.paths=e}};d.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+
+")"},eval:function(b){return this.attrs?this:new d.URL(this.value.eval(b),this.paths)}}})(q("less/tree"));(function(d){d.Value=function(b){this.value=b;this.is="value"};d.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new d.Value(this.value.map(function(e){return e.eval(b)}))},toCSS:function(b){return this.value.map(function(e){return e.toCSS(b)}).join(b.compress?",":", ")}}})(q("less/tree"));(function(d){d.Variable=function(b,e){this.name=b;this.index=e};d.Variable.prototype=
+{eval:function(b){var e,g,a=this.name;if(e=d.find(b.frames,function(h){if(g=h.variable(a))return g.value.eval(b)}))return e;else throw{message:"variable "+this.name+" is undefined",index:this.index};}}})(q("less/tree"));q("less/tree").find=function(d,b){for(var e=0,g;e<d.length;e++)if(g=b.call(d,d[e]))return g;return null};var P=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="resource:";o.env=o.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname==
+"localhost"||location.port.length>0||P?"development":"production");o.async=false;o.poll=o.poll||(P?1E3:1500);o.watch=function(){return this.watchMode=true};o.unwatch=function(){return this.watchMode=false};if(o.env==="development"){o.optimization=0;/!watch/.test(location.hash)&&o.watch();o.watchTimer=setInterval(function(){o.watchMode&&W(function(d,b,e){d&&N(d.toCSS(),b,e.lastModified)})},o.poll)}else o.optimization=3;var D;try{D=typeof y.localStorage==="undefined"?null:y.localStorage}catch(ca){D=
+null}var M=document.getElementsByTagName("link"),V=/^text\/(x-)?less$/;o.sheets=[];for(var J=0;J<M.length;J++)if(M[J].rel==="stylesheet/less"||M[J].rel.match(/stylesheet/)&&M[J].type.match(V))o.sheets.push(M[J]);o.refresh=function(d){var b=endTime=new Date;W(function(e,g,a){if(a.local)I("loading "+g.href+" from cache.");else{I("parsed "+g.href+" successfully.");N(e.toCSS(),g,a.lastModified)}I("css for "+g.href+" generated in "+(new Date-endTime)+"ms");a.remaining===0&&I("css generated in "+(new Date-
+b)+"ms");endTime=new Date},d);U()};o.refreshStyles=U;o.refresh(o.env==="development")})(window);
diff --git a/style.css b/style.css
index 8afb67a..5a5a2e4 100644
--- a/style.css
+++ b/style.css
@@ -2,352 +2,387 @@
 	http://eps.local/~ethan/mondrian/style.css
 	http://emac.local/~emac/mondrian/style.css
 */
-
 /* @group Meyer's CSS Reset */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-weight: inherit;
-	font-style: inherit;
-	font-size: 100%;
-	font-family: inherit;
-	vertical-align: baseline;
-}
-
-
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
 /* remember to define focus styles! */
 :focus {
-	outline: 0;
+  outline: 0;
 }
 body {
-	line-height: 1;
-	color: black;
-	background: white;
-	font-family: Arvo, 'Helvetica Neue', Helvetica;
+  line-height: 1;
+  color: black;
+  background: white;
+  font-family: Arvo, 'Helvetica Neue', Helvetica;
 }
 ol, ul {
-	list-style: none;
+  list-style: none;
 }
 /* tables still need 'cellspacing="0"' in the markup */
 table {
-	border-collapse: separate;
-	border-spacing: 0;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 caption, th, td {
-	text-align: left;
-	font-weight: normal;
+  text-align: left;
+  font-weight: normal;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: "";
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
 }
 blockquote, q {
-	quotes: "" "";
+  quotes: "" "";
 }
-
 /* @end */
-
-* {
-    -webkit-transition: opacity 0.5s linear;
-    -webkit-transition: -webkit-box-shadow 0.2s linear;
-}
-
 @font-face {
-    font-family: Distill;
-    src: url('DistillCdBd.otf');
-    font-weight: bold;
+  font-family: Distill;
+  src: url('DistillCdBd.otf');
+  font-weight: bold;
 }
-
 header {
-    background: #f0f0f0;
-    border-bottom: 6px solid #000;
-    overflow: hidden;
-    width: 100%;
-    padding: 16px 0 8px;
+  background: #f0f0f0;
+  border-bottom: 6px solid #000;
+  overflow: hidden;
+  width: 100%;
+  padding: 16px 0 8px;
 }
-
 h1 {
-    font-size: 64px;
-    float: left;
-    margin-left: 32px;
-    font-family: Distill;
+  font-size: 64px;
+  float: left;
+  margin-left: 32px;
+  font-family: Distill;
 }
 h1 a {
-	position: relative;
-    text-decoration: none;
-    color: #000;
+  position: relative;
+  text-decoration: none;
+  color: #000;
 }
 .red {
-	color: rgb(175,25,25);
+  color: #af1919;
 }
 .blue {
-	color: rgb(28,24,160);
+  color: #1c18a0;
 }
 .yellow {
-	color: rgb(240,204,22);
+  color: #f0cc16;
 }
 .black {
-	color: rgb(18,13,10);
+  color: #120d0a;
 }
 .grey {
-	color: rgb(187,189,194);
+  color: #bbbdc2;
 }
 h1 a:hover span {
-	color: #000;
+  color: #000;
 }
-
 #gal, #i {
-   	display: block;
-    float: right;
-    text-indent: -9999px;
-    opacity: 0.5;
-    position: relative;
-    margin: 16px;
+  display: block;
+  float: right;
+  text-indent: -9999px;
+  opacity: 0.5;
+  position: relative;
+  margin: 16px;
 }
 #gal {
-	width: 34px;
-    height: 25px;
-    margin-top: 18px;
-    margin-right: 32px;
-    background: url('gallery.png') no-repeat;
+  width: 34px;
+  height: 25px;
+  margin-top: 18px;
+  margin-right: 32px;
+  background: url('gallery.png') no-repeat;
 }
 #i {
-	width: 28px;
-    height: 28px;
-    background: url('info.png') no-repeat;
+  width: 28px;
+  height: 28px;
+  background: url('info.png') no-repeat;
 }
 #gal.current, #i.current {
-	opacity: 1;
+  opacity: 1;
 }
 h1 a:hover, #gal:hover, #i:hover {
-    opacity: 1.0;
+  opacity: 1.0;
 }
 header a:active {
-    top: 1px;
+  top: 1px;
 }
-
 details {
-	z-index: 1;
-	display: none;
-    position: absolute;
-    right: 0;
-    top: 92px;
-    border-left: 6px solid #000;
-    border-bottom: 6px solid #000;
-    width: 320px;
-    background: #fff;
+  z-index: 1;
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 92px;
+  border-left: 6px solid #000;
+  border-bottom: 6px solid #000;
+  width: 320px;
+  background: #fff;
 }
 details p {
-	line-height: 1.5;
-    padding: 16px 16px 0;
+  line-height: 1.5;
+  padding: 16px 16px 0;
 }
 details a, h2 a {
-    color: #1c18a0;
-    position: relative;
-    text-decoration: none;
+  color: #1c18a0;
+  position: relative;
+  text-decoration: none;
 }
 details a:hover, h2 a:hover {
-    color: #af1919;
+  color: #af1919;
 }
 details a:active, h2 a:active {
-    top: 1px;
+  top: 1px;
 }
 details:target {
-    opacity: 1;
+  opacity: 1;
 }
-
 #x {
-	margin-top: 16px;
-    display: block;
-    text-decoration: none;
-    background: #af1919;
-    float: left;
-    color: #fff;
-    padding: 8px;
-    font-weight: bold;
-    font-size: 32px;
-    position: relative;
+  margin-top: 16px;
+  display: block;
+  text-decoration: none;
+  background: #af1919;
+  float: left;
+  color: #fff;
+  padding: 8px;
+  font-weight: bold;
+  font-size: 32px;
+  position: relative;
 }
 #x:active {
-    top: 1px;
+  top: 1px;
 }
-
 #content, #gallery {
-    width: 996px;
-    padding: 16px;
-    margin: 16px auto;
+  padding: 16px;
+  margin: 16px auto;
 }
-
 h2 {
-    font-weight: bold;
-    font-size: 24px;
-    line-height: 1.5;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 1.5;
+}
+#content > h2 {
+  margin-left: 32px;
 }
 canvas {
-	display: block;
-    margin: 16px auto;
+  position: relative;
+  display: block;
+  margin: 16px auto;
 }
 canvas, #images li a {
-	position: relative;
+  -webkit-transition: -webkit-box-shadow 0.2s linear;
 }
 canvas:hover, #images li a:hover {
-    cursor: pointer;
-    -webkit-box-shadow: 0px 0px 16px #00a5bf;
-    -moz-box-shadow: 0px 0px 16px #00a5bf;
-    box-shadow: 0px 0px 16px #00a5bf;
+  cursor: pointer;
+  -webkit-box-shadow: 0px 0px 16px #00a5bf;
+  -moz-box-shadow: 0px 0px 16px #00a5bf;
+  box-shadow: 0px 0px 16px #00a5bf;
 }
-canvas:active, #images li a:active, 
-#cancel:active, #submit:active {
-    top: 2px;
+canvas:active, #cancel:active, #submit:active {
+  top: 2px;
 }
-
 #main > div {
-	display: none;
+  display: none;
 }
-
 #images, #gallery ul {
-	overflow: hidden;
-	padding-top: 16px;
-    margin-bottom: 16px;
+  overflow: hidden;
+  padding-top: 16px;
+  margin-bottom: 16px;
 }
-
 #images li, #gallery li {
-	width: 480px;
-    float: left;
-    padding: 0 8px;
-}
-
-#images li div {
-	height: 480px;
-	padding: 32px 0 16px;
+  float: left;
+  padding: 32px 48px;
+  overflow: hidden;
+  height: 480px;
 }
 #images li a {
-	position: relative;
-    display: block;
-    background: #00a5bf;
-    color: #fff;
-    text-decoration: none;
-    padding: 16px;
-    font-size: 18px;
-    text-align: center;
-    -webkit-border-radius: 16px;
-    -moz-border-radius: 16px;
-    border-radius: 16px;
-    width: 240px;
-    margin: 16px auto;
-}
-
-#gallery li {
-	padding-bottom: 64px;
-	height: 560px;
+  -webkit-transition: opacity 0.2s linear;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+  background: #00a5bf;
+  color: #fff;
+  text-decoration: none;
+  padding: 16px;
+  font-size: 18px;
+  text-align: center;
+  -webkit-border-radius: 16px;
+  -moz-border-radius: 16px;
+  border-radius: 16px;
+  margin: 32px;
+}
+#images li a:active {
+  margin-top: 33px;
+}
+#images li:hover a {
+  opacity: 1;
 }
 #gallery h3 {
-	font-size: 24px;
-	font-weight: bold;
-	line-height: 2;
-	margin-bottom: 32px;
+  font-size: 24px;
+  line-height: 2;
+  font-weight: bold;
+  margin-bottom: 16px;
 }
 #gallery .clicks {
-	margin-left: 16px;
-	font-size: 18px;
-	margin-top: 16px;
-	color: #00a5bf;
+  margin-left: 16px;
+  font-size: 18px;
+  margin-top: 16px;
+  color: #00a5bf;
 }
-
 #upload {
-	z-index: 1;
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	display: none;
-	background: rgba(0,0,0,0.75);
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: none;
+  background: rgba(0, 0, 0, 0.75);
 }
 #upload form {
-	position: fixed;
-	z-index: 2;
-    width: 480px;
-    padding: 16px;
-    background: #f0f0f0;
-    left: 50%;
-    top: 0;
-    margin-left: -256px;
+  position: fixed;
+  z-index: 2;
+  width: 480px;
+  padding: 16px;
+  background: #f0f0f0;
+  left: 50%;
+  top: 0;
+  margin-left: -256px;
 }
 #upload img {
-    display: block;
-    margin: 32px auto;
+  display: block;
+  margin: 16px auto;
 }
 #upload input {
-	font-family: Arvo, 'Helvetica Neue', Helvetica;
+  font-family: Arvo, 'Helvetica Neue', Helvetica;
 }
 #image_name {
-	color: #000;
-    display: block;
-    width: 460px;
-    border: 2px solid #666;
-    font-size: 20px;
-    padding: 4px 8px;
-	margin-bottom: 8px;
+  color: #000;
+  display: block;
+  width: 460px;
+  border: 2px solid #666;
+  font-size: 20px;
+  padding: 4px 8px;
+  margin-bottom: 8px;
 }
 #image_name.error {
-	border-color: #af1919;
+  border-color: #af1919;
 }
 #image_name:focus {
-    border-color: #00a5bf;
+  border-color: #00a5bf;
 }
-
 #cancel, #submit {
-	position: relative;
-	border: none;
-	color: #fff;
-	cursor: pointer;
-    -webkit-border-radius: 16px;
-    -moz-border-radius: 16px;
-    border-radius: 16px;
+  position: relative;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  -webkit-border-radius: 16px;
+  -moz-border-radius: 16px;
+  border-radius: 16px;
 }
 #cancel {
-	float: right;
-	background: #af1919;
-	font-size: 16px;
-	padding: 4px 8px;
-	margin-top: 8px;
+  float: right;
+  background: #af1919;
+  font-size: 16px;
+  padding: 4px 8px;
+  margin-top: 8px;
 }
 #cancel:hover {
-	-webkit-box-shadow: 0px 0px 16px #af1919;
-	-moz-box-shadow: 0px 0px 16px #af1919;
-	box-shadow: 0px 0px 16px #af1919;
+  -webkit-box-shadow: 0px 0px 16px #af1919;
+  -moz-box-shadow: 0px 0px 16px #af1919;
+  box-shadow: 0px 0px 16px #af1919;
 }
 #submit {
-    background: #00a5bf;
-    font-size: 20px;
-    padding: 8px 16px;
-    margin-right: 32px;
+  background: #00a5bf;
+  font-size: 20px;
+  padding: 8px 16px;
+  margin-right: 32px;
 }
 #submit:hover {
-	-webkit-box-shadow: 0px 0px 16px #00a5bf;
-	-moz-box-shadow: 0px 0px 16px #00a5bf;
-	box-shadow: 0px 0px 16px #00a5bf;
+  -webkit-box-shadow: 0px 0px 16px #00a5bf;
+  -moz-box-shadow: 0px 0px 16px #00a5bf;
+  box-shadow: 0px 0px 16px #00a5bf;
 }
-
 #errors {
-	display: none;
-	background: #af1919;
-	padding: 8px 16px;
-	color: #fff;
-	margin-bottom: -2px;
+  display: none;
+  background: #af1919;
+  padding: 8px 16px;
+  color: #fff;
+  margin-bottom: -2px;
 }
-
 .rotate {
-	-webkit-transform: rotate(45deg) scale(0.65);
-	-moz-transform: rotate(45deg) scale(0.65);
-	transform: rotate(45deg) scale(0.65);
-}
\ No newline at end of file
+  -webkit-transform: rotate(45deg) scale(0.65);
+  -moz-transform: rotate(45deg) scale(0.65);
+  transform: rotate(45deg) scale(0.65);
+  margin-left: 16px;
+  margin-right: 16px;
+}
+._480x320, ._480x240 {
+  margin-top: 96px;
+}
+._320x480.rotate {
+  margin: 48px 16px 0;
+}
diff --git a/style.less b/style.less
new file mode 100644
index 0000000..7377766
--- /dev/null
+++ b/style.less
@@ -0,0 +1,361 @@
+/* @override 
+	http://eps.local/~ethan/mondrian/style.css
+	http://emac.local/~emac/mondrian/style.css
+*/
+
+/* @group Meyer's CSS Reset */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+body {
+	line-height: 1;
+	color: black;
+	background: white;
+	font-family: Arvo, 'Helvetica Neue', Helvetica;
+}
+ol, ul {
+	list-style: none;
+}
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+caption, th, td {
+	text-align: left;
+	font-weight: normal;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: "";
+}
+blockquote, q {
+	quotes: "" "";
+}
+
+/* @end */
+
+@font-face {
+    font-family: Distill;
+    src: url('DistillCdBd.otf');
+    font-weight: bold;
+}
+
+header {
+    background: #f0f0f0;
+    border-bottom: 6px solid #000;
+    overflow: hidden;
+    width: 100%;
+    padding: 16px 0 8px;
+}
+
+h1 {
+    font-size: 64px;
+    float: left;
+    margin-left: 32px;
+    font-family: Distill;
+}
+h1 a {
+	position: relative;
+    text-decoration: none;
+    color: #000;
+}
+.red {
+	color: rgb(175,25,25);
+}
+.blue {
+	color: rgb(28,24,160);
+}
+.yellow {
+	color: rgb(240,204,22);
+}
+.black {
+	color: rgb(18,13,10);
+}
+.grey {
+	color: rgb(187,189,194);
+}
+h1 a:hover span {
+	color: #000;
+}
+
+#gal, #i {
+   	display: block;
+    float: right;
+    text-indent: -9999px;
+    opacity: 0.5;
+    position: relative;
+    margin: 16px;
+}
+#gal {
+	width: 34px;
+    height: 25px;
+    margin-top: 18px;
+    margin-right: 32px;
+    background: url('gallery.png') no-repeat;
+}
+#i {
+	width: 28px;
+    height: 28px;
+    background: url('info.png') no-repeat;
+}
+#gal.current, #i.current {
+	opacity: 1;
+}
+h1 a:hover, #gal:hover, #i:hover {
+    opacity: 1.0;
+}
+header a:active {
+    top: 1px;
+}
+
+details {
+	z-index: 1;
+	display: none;
+    position: absolute;
+    right: 0;
+    top: 92px;
+    border-left: 6px solid #000;
+    border-bottom: 6px solid #000;
+    width: 320px;
+    background: #fff;
+}
+details p {
+	line-height: 1.5;
+    padding: 16px 16px 0;
+}
+details a, h2 a {
+    color: #1c18a0;
+    position: relative;
+    text-decoration: none;
+}
+details a:hover, h2 a:hover {
+    color: #af1919;
+}
+details a:active, h2 a:active {
+    top: 1px;
+}
+details:target {
+    opacity: 1;
+}
+
+#x {
+	margin-top: 16px;
+    display: block;
+    text-decoration: none;
+    background: #af1919;
+    float: left;
+    color: #fff;
+    padding: 8px;
+    font-weight: bold;
+    font-size: 32px;
+    position: relative;
+}
+#x:active {
+    top: 1px;
+}
+
+#content, #gallery {
+    padding: 16px;
+    margin: 16px auto;
+}
+
+h2 {
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 1.5;
+}
+#content > h2 {
+    margin-left: 32px;
+}
+
+canvas {
+    position: relative;
+	display: block;
+    margin: 16px auto;
+}
+canvas, #images li a {
+    -webkit-transition: -webkit-box-shadow 0.2s linear;
+}
+canvas:hover, #images li a:hover {
+    cursor: pointer;
+    -webkit-box-shadow: 0px 0px 16px #00a5bf;
+    -moz-box-shadow: 0px 0px 16px #00a5bf;
+    box-shadow: 0px 0px 16px #00a5bf;
+}
+canvas:active, #cancel:active, #submit:active {
+    top: 2px;
+}
+
+#main > div {
+	display: none;
+}
+
+#images, #gallery ul {
+	overflow: hidden;
+	padding-top: 16px;
+    margin-bottom: 16px;
+}
+
+#images li, #gallery li {
+    float: left;
+	padding: 32px 48px;
+	overflow: hidden;
+	height: 480px;
+}
+#images li a {
+    -webkit-transition: opacity 0.2s linear;
+    opacity: 0;
+	position: absolute;
+	z-index: 1;
+    background: #00a5bf;
+    color: #fff;
+    text-decoration: none;
+    padding: 16px;
+    font-size: 18px;
+    text-align: center;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+    margin: 32px;
+    
+    &:active {
+        margin-top: 33px;
+    }
+}
+#images li:hover a {
+    opacity: 1;
+}
+
+#gallery h3 {
+	font-size: 24px;
+	line-height: 2;
+	font-weight: bold;
+	margin-bottom: 16px;
+}
+#gallery .clicks {
+	margin-left: 16px;
+	font-size: 18px;
+	margin-top: 16px;
+	color: #00a5bf;
+}
+
+#upload {
+	z-index: 1;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	display: none;
+	background: rgba(0,0,0,0.75);
+}
+#upload form {
+	position: fixed;
+	z-index: 2;
+    width: 480px;
+    padding: 16px;
+    background: #f0f0f0;
+    left: 50%;
+    top: 0;
+    margin-left: -256px;
+}
+#upload img {
+    display: block;
+    margin: 16px auto;
+}
+#upload input {
+	font-family: Arvo, 'Helvetica Neue', Helvetica;
+}
+#image_name {
+	color: #000;
+    display: block;
+    width: 460px;
+    border: 2px solid #666;
+    font-size: 20px;
+    padding: 4px 8px;
+	margin-bottom: 8px;
+}
+#image_name.error {
+	border-color: #af1919;
+}
+#image_name:focus {
+    border-color: #00a5bf;
+}
+
+#cancel, #submit {
+	position: relative;
+	border: none;
+	color: #fff;
+	cursor: pointer;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+}
+#cancel {
+	float: right;
+	background: #af1919;
+	font-size: 16px;
+	padding: 4px 8px;
+	margin-top: 8px;
+}
+#cancel:hover {
+	-webkit-box-shadow: 0px 0px 16px #af1919;
+	-moz-box-shadow: 0px 0px 16px #af1919;
+	box-shadow: 0px 0px 16px #af1919;
+}
+#submit {
+    background: #00a5bf;
+    font-size: 20px;
+    padding: 8px 16px;
+    margin-right: 32px;
+}
+#submit:hover {
+	-webkit-box-shadow: 0px 0px 16px #00a5bf;
+	-moz-box-shadow: 0px 0px 16px #00a5bf;
+	box-shadow: 0px 0px 16px #00a5bf;
+}
+
+#errors {
+	display: none;
+	background: #af1919;
+	padding: 8px 16px;
+	color: #fff;
+	margin-bottom: -2px;
+}
+
+.rotate {
+	-webkit-transform: rotate(45deg) scale(0.65);
+	-moz-transform: rotate(45deg) scale(0.65);
+	transform: rotate(45deg) scale(0.65);
+	margin-left: 16px;
+	margin-right: 16px;
+}
+
+._480x320, ._480x240 {
+    margin-top: 96px;
+}
+
+._320x480.rotate {
+    margin: 48px 16px 0;
+}
\ No newline at end of file