sostler prod commit, add isotope

4 files changed, 703 insertions, 11 deletions

diff --git a/static/css/isostyle.css b/static/css/isostyle.css
new file mode 100644
index 0000000..f24322e
--- /dev/null
+++ b/static/css/isostyle.css
@@ -0,0 +1,644 @@
+/**** Base styles ****/
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  padding: 20px;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.7em;
+  background: #1F1E1D;
+  color: #FFF;
+}
+
+section, nav, header, footer {
+  display: block;
+}
+
+
+h1, h2, h3, p, ul, ol, pre, dl {
+  margin-bottom: 1.0em;
+}
+
+h1, h2, #super-list, .element, .tagline {
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 1.1em;
+}
+
+h2 {
+  font-size: 24px;
+  line-height: 1.1em;
+}
+
+ul, ol {
+  margin-left: 1.5em;
+}
+
+
+a,
+a code {
+  color: #FB4;
+  text-decoration: none;
+}
+
+a:hover,
+a:hover code { 
+  color: #4BF; 
+}
+
+a:active,
+a:active code {
+  color: #1FB;
+  background: black;
+}
+
+a img { border: none; }
+
+/**** Isotope styles ****/
+
+/* required for containers to inherit vertical size from window */
+html,
+body {
+  height: 100%;
+}
+
+#container {
+  border: 1px solid #666;
+  padding: 5px;
+  margin-bottom: 20px;
+}
+
+.element {
+  width: 110px;
+  height: 110px;
+  margin: 5px;
+  float: left;
+  overflow: hidden;
+  position: relative;
+  background: #888;
+  color: #222;
+  -webkit-border-top-right-radius: 1.2em;
+      -moz-border-radius-topright: 1.2em;
+          border-top-right-radius: 1.2em;
+}
+
+.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
+.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
+.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
+.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
+.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
+.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
+.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
+.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
+.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
+.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
+
+
+.element * {
+  position: absolute;
+  margin: 0;
+}
+
+.element .symbol {
+  left: 0.2em;
+  top: 0.4em;
+  font-size: 3.8em;
+  line-height: 1.0em;
+  color: #FFF;
+}
+.element.large .symbol {
+  font-size: 4.5em;
+}
+
+.element.fake .symbol {
+  color: #000;
+}
+
+.element .name {
+  left: 0.5em;
+  bottom: 1.6em;
+  font-size: 1.05em;
+}
+
+.element .weight {
+  font-size: 0.9em;
+  left: 0.5em;
+  bottom: 0.5em;
+}
+
+.element .number {
+  font-size: 1.25em;
+  font-weight: bold;
+  color: hsla(0,0%,0%,.5);
+  right: 0.5em;
+  top: 0.5em;
+}
+
+.variable-sizes .element.width2 { width: 230px; }
+
+.variable-sizes .element.height2 { height: 230px; }
+
+.variable-sizes .element.width2.height2 {
+  font-size: 2.0em;
+}
+
+.element.large,
+.variable-sizes .element.large,
+.variable-sizes .element.large.width2.height2 {
+  font-size: 3.0em;
+  width: 350px;
+  height: 350px;
+  z-index: 100;
+}
+
+.clickable .element:hover {
+  cursor: pointer;
+}
+
+.clickable .element:hover h3 {
+  text-shadow:
+    0 0 10px white,
+    0 0 10px white
+  ;
+}
+
+.clickable .element:hover h2 {
+  color: white;
+}
+
+/**** Isotope Filtering ****/
+
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+/**** Isotope CSS3 transitions ****/
+
+.isotope,
+.isotope .isotope-item {
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+/*     -o-transition-duration: 0.8s;*/
+          transition-duration: 0.8s;
+
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+/*     -o-transition-property: height, width;*/
+          transition-property: height, width;
+}
+
+/* disable CSS transitions for containers with infinite scrolling*/
+.isotope.infinite-scrolling {
+  -webkit-transition: none;
+     -moz-transition: none;
+       -o-transition: none;
+          transition: none;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+/*     -o-transition-property:      -o-transform, opacity;*/
+          transition-property:         transform, opacity;
+}
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+/*     -o-transition-duration: 0s;*/
+          transition-duration: 0s;
+}
+
+/**** Example Options ****/
+
+#options {
+  padding-bottom: 1.0em;
+}
+
+#options h3 {
+  margin-bottom: 0.2em;
+}
+
+#options ul {
+  margin: 0;
+  list-style: none;
+}
+
+#options ul ul {
+  margin-left: 1.5em;
+}
+
+#options .floated li {
+  float: left;
+}
+
+
+
+#options li {
+}
+
+#options li a {
+  display: inline-block;
+  padding: 0.4em 0.5em;
+  background-color: #DDD;
+  color: #222;
+  font-weight: bold;
+  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
+  background-image: -moz-linear-gradient(-90deg, 
+    hsla( 0, 0%, 100%, 0.5 ) , 
+    hsla( 0, 0%, 100%, 0.0 ) 
+  );
+  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
+    from( hsla( 0, 0%, 100%, 0.5 ) ), 
+    to(   hsla( 0, 0%, 100%, 0.0 ) )
+  );
+    margin-bottom: 0.2em;
+}
+
+#options li a:hover {
+  background-color: #5BF;
+}
+
+#options li a:active {
+  background-color: #39D;
+  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+}
+
+#options .floated li a {
+  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
+  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
+}
+
+#options .floated li:first-child a {
+  border-radius: 7px 0 0 7px;
+  border-left: none;
+}
+
+#options .floated li:last-child a {
+  border-radius: 0 7px 7px 0;
+}
+
+#options .option-set li a.selected {
+  background-color: #13F;
+  text-shadow: none;
+  color: white;
+}
+
+/**** Horizontal ****/
+
+.horizontal #container {
+  height: 80%;
+}
+
+#copy {
+  max-width: 640px;
+}
+
+/**** Photo demo ****/
+
+.photos .photo {
+  width: 320px;
+  margin: 5px;
+  float: left;
+}
+
+.photos .photo img {
+  display: block;
+  width: 100%;
+}
+
+/**** Docs ****/
+
+body.doc {
+  max-width: 640px;
+}
+
+.doc #content {
+/*  font-size: 14px;
+  line-height: 1.7em;*/
+  margin-bottom: 20px;
+}
+
+.doc a:hover {
+  border-bottom: 1px dotted;
+}
+
+
+body.doc {
+  margin-left: 220px;
+}
+
+.doc nav {
+  width: 210px;
+  position: fixed;
+  left: 10px;
+  top: 0px;
+  padding-top: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.doc nav h1 {
+  margin-top: 0;
+}
+
+@media screen and (max-width: 768px) {
+
+  body.doc {
+    margin-left: 0px;
+  }
+  
+  .doc nav {
+    width: auto;
+    position: relative;
+    left: auto;
+    top: auto;
+    padding-top: 0px;
+    height: auto;
+    margin-bottom: 20px;
+  }
+
+}
+
+/**** Doc page nav ****/
+
+#docs-nav h1 {
+  font-size: 19px;
+  margin-bottom: 0.5em;
+}
+
+#docs-nav h1 a,
+#demo-nav a { color: #4FB; }
+#docs-nav h1 a:hover,
+#demo-nav a:hover { color: #4BF; }
+
+#demo-nav {
+  font-size: 16px;
+  font-weight: bold;
+  padding-bottom: 0.5em;
+  margin-bottom: 0.5em;
+  border-bottom: 1px solid #333;
+}
+
+#docs-nav ul {
+  list-style: none;
+  margin: 0;
+  font-weight: bold;
+}
+
+#docs-nav ul a {
+  display: block;
+  border: none;
+  padding: 1px 5px;
+}
+
+#docs-nav ul .current a {
+  background: hsla( 0, 0%, 0%, 0.3 );
+  color: #1BF;
+}
+#docs-nav ul a:hover,
+#docs-nav ul .current a:hover { color: white; }
+  
+#docs-nav ul .current .toc a {
+  font-size: 12px;
+  padding-left: 1.2em;
+  font-weight: normal;
+}
+
+/**** Doc content ****/
+
+.doc h2,
+.doc footer {
+  border-top: 1px solid #333;
+  padding-top: 0.8em;
+}
+
+.doc h2:target { 
+  padding: 10px;
+  background: white;
+  color: #222;
+}
+
+.doc h3 {
+  color: #FEC;
+  background: hsla( 0, 0%, 75%, 0.05 );
+  padding: 2px 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.doc h4 {
+  margin-bottom: 0.5em;
+  font-size: 14px;
+}
+
+
+footer {
+  font-size: 12px;
+  border-top: 1px solid #333;
+  padding-top: 0.8em;
+}
+
+pre {
+  padding: 10px;
+}
+
+pre, code {
+  background: black;
+  color: white;
+  font-family: 'Monaco', monospace, sans-serif;
+}
+
+.doc #content code {
+  font-size: 12px;
+}
+
+.doc #content pre {
+  line-height: 1.6em;
+}
+
+h3#options {
+  padding-bottom: 0;
+}
+
+.option-def dl {
+/*  margin-top: 1.8em;*/
+/*  padding-top: 0.5em;*/
+/*  border-top: 1px solid #333;*/
+}
+
+
+.option-def dl dt,
+.option-def dl dd {
+  float: left;
+  padding: 0 1.2em;;
+  background: #161616;
+/*  height: 2.0em;*/
+  line-height: 36px;
+  height: 36px;
+}
+
+.option-def dl.header dt,
+.option-def dl.header dd {
+  background: #444;
+}
+
+.option-def dl dt {
+/*  font-size: 14px;*/
+}
+
+.option-def dl .option-type {
+/*  width: 60px;*/
+  font-size: 13px;
+  color: #AAA;
+  font-style: italic;
+}
+
+.option-def dl dd {
+  border-left: 1px solid #222;
+}
+
+/* Tagline */
+
+.doc .tagline {
+  font-size: 22px;
+  font-weight: 300;
+}
+
+/* as-is from MIT */
+
+.doc .as-is {
+  font-size: 95%;
+}
+
+/* Commercial license blurb */
+
+.doc #commercial {
+  background: white;
+  padding: 10px;
+  font-size: 14px;
+  color: #1F1F1D;
+}
+
+.doc #commercial a { font-weight: bold;}
+
+/**** Pygments ****/
+
+code .s1,
+code .s { color: #78BD55; } /* string */
+code .mi, /* integer */
+code .cp, /* doctype */
+code .kc { color: #5298D4; } /*boolean*/
+code .k { color: #E39B79; } /* keyword */
+code .kd, /* storage */
+code .na { color: #A9D866; } /* markup attribute */
+code .p  { color: #EDB; } /* punctuation */
+code .o  { color: #F63; }   /* operator */
+code .nb { color: #AA97AC;} /* support */
+
+/* comment */
+code .c,
+code .c1 { color: #666; font-style: italic; }
+
+code .nt { color: #A0C8FC; } /* Markup open tag */
+
+code .nf { color: #9EA8B8; } /* css id */
+code .nc { color: #A78352; }  /* CSS class */
+code .m  { color: #DE8E50; } /* CSS value */
+code .nd { color: #9FAD7E; } /* CSS pseudo selector */
+
+
+
+/**** Super list ****/
+
+#super-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 40px;
+}
+
+#super-list li {
+  display: inline-block;
+  float: left;
+  font-size: 28px;
+  line-height: 1.2em;
+  margin: 2px;
+  font-weight: 300;
+}
+
+#super-list li.feature { background: #111; }
+#super-list li span,
+#super-list li a {
+  display: block;
+  padding: 0.2em 0.5em;
+}
+#super-list li a {
+  color: #222;
+}
+#super-list li.doc  a { background: #3CF; }
+#super-list li.demo a { background: #FC3; }
+#super-list li.link a { background: #E58; color: white; }
+
+#super-list li a:hover {
+  background: white;
+}
+
+#super-list li.link a:hover { color: #222; }
+
+#super-list.masonry li {
+  width: 216px;
+}
+#super-list.masonry li.feature,
+#super-list.masonry li.link {
+  width: 436px;
+}
+
+/**************************
+**  Infinite Scroll
+**************************/
+
+
+#infscr-loading {
+  position: fixed;
+  bottom: 30px;
+  left: 42%;
+  z-index: 100;
+  background: white;
+  background: hsla( 0, 0%, 100%, 0.9 );
+  padding: 20px;
+  color: #222;
+  font-size: 15px;
+  font-weight: bold;
+  -webkit-border-radius: 10px;
+     -moz-border-radius: 10px;
+          border-radius: 10px;
+}
+
+
+
+/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
+.clearfix:after { clear: both; }
+/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
+.clearfix { zoom: 1; }
+
+
diff --git a/static/js/jquery.isotope.min.js b/static/js/jquery.isotope.min.js
new file mode 100644
index 0000000..16ba2ef
--- /dev/null
+++ b/static/js/jquery.isotope.min.js
@@ -0,0 +1,39 @@
+/**
+ * Isotope v1.0.110211
+ * An exquisite jQuery plugin for magical layouts
+ * http://isotope.metafizzy.co
+ *
+ * Commercial use requires one-time license fee
+ * http://metafizzy.co/#licenses
+ *
+ * Copyright 2011 David DeSandro / Metafizzy
+ */
+(function(n,f,t){var o=function(){var a=["Moz","Webkit","Khtml","O","Ms"],b={};return function(c,d){d=d||document.documentElement;var e=d.style,g,h,i,j;if(arguments.length===1&&typeof b[c]==="string")return b[c];if(typeof e[c]==="string")return b[c]=c;h=c.charAt(0).toUpperCase()+c.slice(1);i=0;for(j=a.length;i<j;i++){g=a[i]+h;if(typeof e[g]==="string")return b[c]=g}}}();n.Modernizr=n.Modernizr||function(a,b){var c={},d=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),e=[],g=document.documentElement,
+h,i,j=[{name:"csstransforms",result:function(){return!!o("transform")}},{name:"csstransforms3d",result:function(){var k=!!o("perspective");if(k){var p=document.createElement("style"),l=document.createElement("div");k="@media ("+d.join("transform-3d),(")+"modernizr)";p.textContent=k+"{#modernizr{height:3px}}";(b.head||b.getElementsByTagName("head")[0]).appendChild(p);l.id="modernizr";g.appendChild(l);k=l.offsetHeight===3;p.parentNode.removeChild(p);l.parentNode.removeChild(l)}return!!k}},{name:"csstransitions",
+result:function(){return!!o("transitionProperty")}}];h=0;for(i=j.length;h<i;h++){var q=j[h],u=q.result();c[q.name]=u;e.push((u?"":"no-")+q.name)}g.className+=" "+e.join(" ");return c}(this,this.document);var m={transformProp:o("transform"),fnUtils:Modernizr.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+
+") "}},set:function(a,b,c){var d=f(a).data("transform")||{},e={},g,h={};e[b]=c;f.extend(d,e);for(g in d)h[g]=(0,m.fnUtils[g])(d[g]);b=(h.translate||"")+(h.scale||"");f(a).data("transform",d);a.style[m.transformProp]=b}};f.cssNumber.scale=true;f.cssHooks.scale={set:function(a,b){if(typeof b==="string")b=parseFloat(b);m.set(a,"scale",b)},get:function(a){return(a=f.data(a,"transform"))&&a.scale?a.scale:1}};f.fx.step.scale=function(a){f.cssHooks.scale.set(a.elem,a.now+a.unit)};f.cssNumber.translate=true;
+f.cssHooks.translate={set:function(a,b){m.set(a,"translate",b)},get:function(a){return(a=f.data(a,"transform"))&&a.translate?a.translate:[0,0]}};var r=f.event,s;r.special.smartresize={setup:function(){f(this).bind("resize",r.special.smartresize.handler)},teardown:function(){f(this).unbind("resize",r.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize";s&&clearTimeout(s);s=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}};f.fn.smartresize=
+function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])};f.Isotope=function(a,b){this.element=f(b);this._create(a);this._init()};f.Isotope.prototype={options:{resizable:true,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!f.browser.opera?{opacity:0,scale:0.0010}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!f.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:f.browser.opera?
+"jquery":"best-available",animationOptions:{queue:false,duration:800},sortBy:"original-order",sortAscending:true,resizesContainer:true},_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=f.extend(true,{},this.options,a);this.isNew={};this.styleQueue=[];this.elemCount=0;this.$allAtoms=this._filterFind(this.element.children(),this.options.itemSelector);this.element.css({overflow:"hidden",position:"relative"});a=false;switch(this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,
+"")){case "none":this.applyStyleFnName="css";break;case "jquery":this.applyStyleFnName="animate";a=true;break;default:this.applyStyleFnName=Modernizr.csstransitions?"css":"animate"}this.positionFn=(this.usingTransforms=Modernizr.csstransforms&&Modernizr.csstransitions&&!a)?this._translate:this._positionAbs;this.options.getSortData=f.extend(this.options.getSortData,{"original-order":function(c,d){return d.elemCount}});this._setupAtoms(this.$allAtoms);a=f(document.createElement("div"));this.element.prepend(a);
+this.posTop=Math.round(a.position().top);this.posLeft=Math.round(a.position().left);a.remove();var b=this;setTimeout(function(){b.element.addClass(b.options.containerClass)},0);this.options.resizable&&f(n).bind("smartresize.isotope",function(){b.element.isotope("resize")})},_isNewProp:function(a){return this.prevOpts?this.options[a]!==this.prevOpts[a]:true},_init:function(a){var b=this;f.each(["filter","sortBy","sortAscending"],function(c,d){b.isNew[d]=b._isNewProp(d)});this.$filteredAtoms=this.isNew.filter?
+this._filter(this.$allAtoms):this.$allAtoms;if(this.isNew.filter||this.isNew.sortBy||this.isNew.sortAscending)this._sort();this.reLayout(a)},option:function(a,b){if(f.isPlainObject(a))this.options=f.extend(true,this.options,a);else if(a&&typeof b==="undefined")return this.options[a];else this.options[a]=b;return this},_setupAtoms:function(a){var b={position:"absolute"};if(this.usingTransforms){b.left=0;b.top=0}a.css(b).addClass(this.options.itemClass);this.updateSortData(a,true)},_filter:function(a){var b=
+this.options.filter===""?"*":this.options.filter;if(b){var c=this.options.hiddenClass,d="."+c,e=a.not(d),g=a.filter(d);d=g;a=a.filter(b);if(b!=="*"){d=g.filter(b);b=e.not(b).toggleClass(c);b.addClass(c);this.styleQueue.push({$el:b,style:this.options.hiddenStyle})}this.styleQueue.push({$el:d,style:this.options.visibleStyle});d.removeClass(c)}return a},updateSortData:function(a,b){var c=this,d=this.options.getSortData,e,g,h;a.each(function(){g=f(this);h={};for(e in d)h[e]=d[e](g,c);g.data("isotope-sort-data",
+h);b&&c.elemCount++})},_sort:function(){var a=this,b=function(d){return f(d).data("isotope-sort-data")[a.options.sortBy]},c=this.options.sortAscending?1:-1;sortFn=function(d,e){var g=b(d),h=b(e);return(g>h?1:g<h?-1:0)*c};this.$filteredAtoms.sort(sortFn);return this},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b}},_pushPosition:function(a,b,c){b=this.positionFn(b,c);this.styleQueue.push({$el:a,style:b})},layout:function(a,b){var c=this.options.layoutMode;
+this["_"+c+"Layout"](a);this.options.resizesContainer&&this.styleQueue.push({$el:this.element,style:this["_"+c+"GetContainerSize"]()});var d=this.applyStyleFnName==="animate"&&!this.isLaidOut?"css":this.applyStyleFnName,e=this.options.animationOptions;f.each(this.styleQueue,function(g,h){h.$el[d](h.style,f.extend({},e))});this.styleQueue=[];b&&b.call(a);this.isLaidOut=true;return this},resize:function(){return this["_"+this.options.layoutMode+"Resize"]()},reLayout:function(a){return this["_"+this.options.layoutMode+
+"Reset"]().layout(this.$filteredAtoms,a)},addItems:function(a,b){var c=this._filterFind(a,this.options.itemSelector);this._setupAtoms(c);this.$allAtoms=this.$allAtoms.add(c);b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(d){$filteredAtoms=c._filter(d);c.$filteredAtoms=c.$filteredAtoms.add($filteredAtoms)});this._sort().reLayout(b)},appended:function(a,b){var c=this;this.addItems(a,function(d){c.$filteredAtoms=c.$filteredAtoms.add(d);c.layout(d,b)})},remove:function(a){this.$allAtoms=
+this.$allAtoms.not(a);this.$filteredAtoms=this.$filteredAtoms.not(a);a.remove()},_shuffleArray:function(a){var b,c,d=a.length;if(d)for(;--d;){c=~~(Math.random()*(d+1));b=a[c];a[c]=a[d];a[d]=b}return a},shuffle:function(a){this.options.sortBy="shuffle";this.$allAtoms=this._shuffleArray(this.$allAtoms);this.$filteredAtoms=this._filter(this.$allAtoms);return this.reLayout(a)},destroy:function(){var a=f.extend(this.options.visibleStyle,{position:"relative",top:"auto",left:"auto"});if(this.usingTransforms)a[m.transformProp]=
+"none";this.$allAtoms.css(a).removeClass(this.options.hiddenClass);this.element.css({width:"auto",height:"auto"}).unbind(".isotope").removeClass(this.options.containerClass).removeData("isotope");f(n).unbind(".isotope")},_getSegments:function(a,b){var c=b?"rowHeight":"columnWidth",d=b?"height":"width",e=b?"rows":"cols";this[a][c]=this.options[a]&&this.options[a][c]||this.$allAtoms["outer"+(b?"Height":"Width")](true);if(!this[a][c]){f.error(c+" calculated to be zero. Stopping Isotope plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.");
+return this}this[d]=this.element[d]();this[a][e]=Math.floor(this[d]/this[a][c]);this[a][e]=Math.max(this[a][e],1);return this},_masonryPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerHeight(true),e=c.length,g=e,h=this.masonry.cols+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,this.masonry.columnWidth*g+this.posLeft,b);for(e=0;e<h;e++)this.masonry.colYs[g+e]=d},_masonryLayout:function(a){var b=this;a.each(function(){var c=f(this),d=Math.ceil(c.outerWidth(true)/b.masonry.columnWidth);
+d=Math.min(d,b.masonry.cols);if(d===1)b._masonryPlaceBrick(c,b.masonry.cols,b.masonry.colYs);else{var e=b.masonry.cols+1-d,g=[],h,i;for(i=0;i<e;i++){h=b.masonry.colYs.slice(i,i+d);g[i]=Math.max.apply(Math,h)}b._masonryPlaceBrick(c,e,g)}})},_masonryReset:function(){this.masonry={};this._getSegments("masonry");var a=this.masonry.cols;for(this.masonry.colYs=[];a--;)this.masonry.colYs.push(this.posTop);return this},_masonryResize:function(){var a=this.masonry.cols;this._getSegments("masonry");this.masonry.cols!==
+a&&this.reLayout();return this},_masonryGetContainerSize:function(){return{height:Math.max.apply(Math,this.masonry.colYs)-this.posTop}},_fitRowsLayout:function(a){this.width=this.element.width();var b=this;return a.each(function(){var c=f(this),d=c.outerWidth(true),e=c.outerHeight(true);if(b.fitRows.x!==0&&d+b.fitRows.x>b.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=
+d})},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=
+f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!==a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown=
+{y:0};return this},_straightDownLayout:function(a){var b=this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]===
+b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(e=0;e<h;e++)this.masonryHorizontal.rowXs[g+e]=d},_masonryHorizontalLayout:function(a){var b=this;a.each(function(){var c=f(this),d=Math.ceil(c.outerHeight(true)/b.masonryHorizontal.rowHeight);d=Math.min(d,b.masonryHorizontal.rows);if(d===1)b._masonryHorizontalPlaceBrick(c,b.masonryHorizontal.rows,b.masonryHorizontal.rowXs);else{var e=b.masonryHorizontal.rows+1-d,g=[],h,i;for(i=0;i<e;i++){h=b.masonryHorizontal.rowXs.slice(i,
+i+d);g[i]=Math.max.apply(Math,h)}b._masonryHorizontalPlaceBrick(c,e,g)}})},_masonryHorizontalReset:function(){this.masonryHorizontal={};this._getSegments("masonryHorizontal",true);var a=this.masonryHorizontal.rows;for(this.masonryHorizontal.rowXs=[];a--;)this.masonryHorizontal.rowXs.push(this.posLeft);return this},_masonryHorizontalResize:function(){var a=this.masonryHorizontal.rows;this._getSegments("masonryHorizontal",true);this.masonryHorizontal.rows!==a&&this.reLayout();return this},_masonryHorizontalGetContainerSize:function(){return{width:Math.max.apply(Math,
+this.masonryHorizontal.rowXs)-this.posLeft}},_fitColumnsReset:function(){this.fitColumns={x:0,y:0,width:0};return this},_fitColumnsLayout:function(a){var b=this;this.height=this.element.height();return a.each(function(){var c=f(this),d=c.outerWidth(true),e=c.outerHeight(true);if(b.fitColumns.y!==0&&e+b.fitColumns.y>b.height){b.fitColumns.x=b.fitColumns.width;b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width);
+b.fitColumns.y+=e})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true);return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e=f(this),g=
+(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout();return this}};
+f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===t){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.widget=f.widget||{};f.widget.bridge=f.widget.bridge||function(a,b){f.fn[a]=function(c){var d=typeof c==="string",e=Array.prototype.slice.call(arguments,1),g=this;c=!d&&e.length?f.extend.apply(null,[true,c].concat(e)):
+c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=f.data(this,a);if(!h)return f.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+c+"'");if(!f.isFunction(h[c]))return f.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,e);if(i!==h&&i!==t){g=i;return false}}):this.each(function(){var h=f.data(this,a);h?h.option(c||{})._init():f.data(this,a,new b(c,this))});return g}};f.widget.bridge("isotope",f.Isotope)})(window,jQuery);
diff --git a/template/log_dump.st b/template/log_dump.st
index 1b90d6b..d1fce95 100644
--- a/template/log_dump.st
+++ b/template/log_dump.st
@@ -6,7 +6,7 @@ $endif$
 
 
 $dump.created_on$  -- by <a href="/$dump.nick$"><b>$dump.nick$</b></a>
-<div class="content">       <a href="#"class="expand">$dump.content$</a></div>
+<div class="content" data-category="posts">$dump.content$</div>
 <hr />
 $share_buttons()$
 </div>
diff --git a/template/simplerlog.st b/template/simplerlog.st
index 92b2abf..c5851f5 100644
--- a/template/simplerlog.st
+++ b/template/simplerlog.st
@@ -15,6 +15,8 @@
 <link rel="image_src" href="$domain$/static/img/thumbs/heartover.gif" > 
 <script type="text/javascript" src="$domain$/static/js/pichat.js"></script>
       <script src="$domain$/static/js/jquery.masonry.min.js"type="text/javascript"></script> 
+        <script src="$domain$/static/js/jquery.isotope.min.js"></script>
+    <!--     <link rel="stylesheet" href="$domain$/static/css/isostyle.css" type="text/css" media="screen" />-->
 <script>Domain = "$domain$"</script>
 $if(!user_nick)$
 <!--<link href="$domain$/static/css/front.css" media="screen, projection" rel="stylesheet" type="text/css">-->
@@ -43,16 +45,17 @@ $endif$
 
 body{margin:0px;    background-image:url(http://dump.fm/static/img/bg.dither.gif);	background-color:f1f1f1;/*background:#f0f9ff url(/static/img/fade-blue.png) top center repeat-x;
 	background-repeat:repeat-x;
-	background-position:top;*/background-attachment:fixed;min-width:900px;}
+	background-position:top;*/background-attachment:fixed;min-width:900px;  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
+  font-size: 13px;  line-height: 1.5em;}
 img{border:0px;}
-#banner{z-index:2;top:0;margin:1px;min-width:900px;width:75%;position:fixed;border-bottom:1px ridge #333;display:inline-block;height:35px;clear: both;}
+#banner{z-index:2;top:0;margin:2px;margin-left:9px;min-width:900px;width:77%;max-width:970px;position:fixed;border-bottom:1px ridge #333;display:inline-block;height:35px;clear: both;}
 #banner a{font-size:69%;text-decoration:none;font-family: Monaco, "Courier New", Courier, monospace;letter-spacing:3.5px;color:#333;}
 #banner a:hover{background-color:#eee;color:black;text-decoration:none;}
 #fblike{margin-top:7px;margin-left:5px;}
 #logo{float:left;margin:1px;}
 #logobig{float:left;margin-top:-9px;margin-left:-5px;}
 #toplinks{float:left;margin-top:7px;margin-left:5px;}
-#logout{position:fixed;right:0px;font-size:12px;top:4px;}
+#logout{position:fixed;right:0px;font-size:12px;top:0px;padding:3px;line-height: 1em;}
 #searchbox{float:left;margin-top:7px;margin-left:5px;}
 #search-query{background-color:lightyellow;}
 #posts{font-family: Monaco, "Courier New", Courier, monospace;color:#333;font-size:8px;height:auto;padding:1px;margin-top:45px;}
@@ -265,13 +268,14 @@ a#disregister {
     border-left-color: #FFF057;
     -webkit-box-shadow:#a0a0a0 3px 4px 4px; 
     -moz-box-shadow: #a0a0a0 3px 4px 4px; /* FF 3.5+ */
-            text-shadow: 1px 1px 3px #AAA; position:absolute;
+            text-shadow: 1px 1px 3px #AAA; margin-right:35px;
 		}
  a#disregister:hover {
-             text-shadow: 1px 1px 1px gold;color:#000;
-		font-family: cursive;font-weight:100;font-size:18px;font-style: oblique;color: #fe1409;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#E9E74A), to(#E9E74A));
-    background-image: -moz-linear-gradient(#FFFAAE 0%, #E9E74A 90%);
+
+             text-shadow: 1px 1px 1px gold;
+		font-family: cursive;font-weight:100;font-size:18px;font-style: oblique;color:black;
+    -webkit-box-shadow:#333 3px 4px 4px; 
+    -moz-box-shadow: #333 3px 4px 4px; /* FF 3.5+ */
 
 		}
 
@@ -448,16 +452,20 @@ jQuery(window).load(function(){
 <!--END BANNER-->
 
 
-          <div id="posts">
+          <div id="posts" class="clickable clearfix">
 <div id="sideinfo">$roomkey$ log
 <br><br>
 dump.fm lets you talk with pictures! Paste an image url, upload, or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love.
 <br><br>
   If you already have an account <strong><a href="http://dump.fm/login" class="signin">sign in</a></strong> If not <strong><a href="http://dump.fm/register">register</a></strong>!
+
+  
+
 </div>
      
           $if(dumps)$
-          
+           
+      
 
           $dumps: { d | $log_dump(dump=d)$ }$
 
@@ -512,6 +520,7 @@ $debug_log()$
       </div>
     </div>
 
+  
 
 <span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#eee"></span></span></span> 
 <script type="text/javascript">m00=document.getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>