diff --git a/.gitignore b/.gitignore
index 6927238..7ddae85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
-/320andup (Git).esproj/
+/.esproj/
 /.dropbox
-/Icon
\ No newline at end of file
+/Icon
\ No newline at end of file
diff --git a/.sass-cache/03a1edd726be3fb84a61415e9eb206639df30f76/_shared.scssc b/.sass-cache/03a1edd726be3fb84a61415e9eb206639df30f76/_shared.scssc
new file mode 100644
index 0000000..9ba4ed5
Binary files /dev/null and b/.sass-cache/03a1edd726be3fb84a61415e9eb206639df30f76/_shared.scssc differ
diff --git a/.sass-cache/456158f61ae34c7c9f5c62b9af41f0ce642dc602/_ellipsis.scssc b/.sass-cache/456158f61ae34c7c9f5c62b9af41f0ce642dc602/_ellipsis.scssc
new file mode 100644
index 0000000..74f5152
Binary files /dev/null and b/.sass-cache/456158f61ae34c7c9f5c62b9af41f0ce642dc602/_ellipsis.scssc differ
diff --git a/.sass-cache/542558ecc268dff7bf1b90af83cbceab28f41eb5/ellipsis.scssc b/.sass-cache/542558ecc268dff7bf1b90af83cbceab28f41eb5/ellipsis.scssc
new file mode 100644
index 0000000..9a0b51c
Binary files /dev/null and b/.sass-cache/542558ecc268dff7bf1b90af83cbceab28f41eb5/ellipsis.scssc differ
diff --git a/.sass-cache/5a5bea4d1ffaec0c7e6e1e3d522ac991499b6778/_support.scssc b/.sass-cache/5a5bea4d1ffaec0c7e6e1e3d522ac991499b6778/_support.scssc
new file mode 100644
index 0000000..acb0f68
Binary files /dev/null and b/.sass-cache/5a5bea4d1ffaec0c7e6e1e3d522ac991499b6778/_support.scssc differ
diff --git a/320andup.html b/320andup.html
index d5b6ee9..9595cd3 100755
--- a/320andup.html
+++ b/320andup.html
@@ -44,6 +44,8 @@
 <!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
 <!-- For iPad 1-->
 <!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
+<!-- For the new iPad -->
+<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
 <!-- For iPhone 3G, iPod Touch and Android -->
 <!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
 <!-- For Nokia -->
@@ -75,6 +77,107 @@ <h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h
 
 <h1 class="h1">&#8216;320 and Up&#8217; styles</h1>
 
+<section>
+<h1 class="h2">Colour</h1>
+
+<h2 class="h3">Base colour</h2>
+<div class="swatch swatch-base">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Alert</h2>
+<div class="swatch swatch-alert">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Error</h2>
+<div class="swatch swatch-error">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Info</h2>
+<div class="swatch swatch-info">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Success</h2>
+<div class="swatch swatch-success">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+<h2 class="h3">Warning</h2>
+<div class="swatch swatch-warning">
+<div class="swatch-row swatch-row-one clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+<div class="swatch-row swatch-row-two clearfix">
+<span></span>
+<span></span>
+<span></span>
+<span></span>
+</div>
+</div>
+
+</section>
+
 <section>
 
 <h1 class="h2">Typography</h1>
diff --git a/css/320andup.css b/css/320andup.css
index d21d402..99babf1 100755
--- a/css/320andup.css
+++ b/css/320andup.css
@@ -285,7 +285,7 @@ dt {
   width: 20.25%;
   text-align: right;
 }
-.dl-horizontal .dl-horizontal dd {
+.dl-horizontal dd {
   margin-left: 22.78%;
 }
 abbr[title] {
@@ -358,6 +358,110 @@ a:hover,
 a:active {
   outline: 0;
 }
+::-moz-selection {
+  background-color: #d6dbe1;
+  color: #2d353e;
+  text-shadow: none;
+}
+::selection {
+  background-color: #d6dbe1;
+  color: #2d353e;
+  text-shadow: none;
+}
+.swatch {
+  margin: 0 0 1.5em 0;
+  padding: 0;
+}
+.swatch-row {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 200px;
+}
+.swatch-row-one {
+  background-color: #000000;
+}
+.swatch-row-two {
+  background-color: #ffffff;
+}
+.swatch-row span {
+  display: block;
+  float: left;
+  width: 50px;
+  height: 50px;
+}
+.swatch-base span:nth-child(1) {
+  background-color: rgba(45, 53, 62, 0.9);
+}
+.swatch-base span:nth-child(2) {
+  background-color: rgba(45, 53, 62, 0.8);
+}
+.swatch-base span:nth-child(3) {
+  background-color: rgba(45, 53, 62, 0.7);
+}
+.swatch-base span:nth-child(4) {
+  background-color: rgba(45, 53, 62, 0.6);
+}
+.swatch-alert span:nth-child(1) {
+  background-color: rgba(252, 248, 227, 0.9);
+}
+.swatch-alert span:nth-child(2) {
+  background-color: rgba(252, 248, 227, 0.8);
+}
+.swatch-alert span:nth-child(3) {
+  background-color: rgba(252, 248, 227, 0.7);
+}
+.swatch-alert span:nth-child(4) {
+  background-color: rgba(252, 248, 227, 0.6);
+}
+.swatch-error span:nth-child(1) {
+  background-color: rgba(218, 78, 73, 0.9);
+}
+.swatch-error span:nth-child(2) {
+  background-color: rgba(218, 78, 73, 0.8);
+}
+.swatch-error span:nth-child(3) {
+  background-color: rgba(218, 78, 73, 0.7);
+}
+.swatch-error span:nth-child(4) {
+  background-color: rgba(218, 78, 73, 0.6);
+}
+.swatch-info span:nth-child(1) {
+  background-color: rgba(217, 237, 247, 0.9);
+}
+.swatch-info span:nth-child(2) {
+  background-color: rgba(217, 237, 247, 0.8);
+}
+.swatch-info span:nth-child(3) {
+  background-color: rgba(217, 237, 247, 0.7);
+}
+.swatch-info span:nth-child(4) {
+  background-color: rgba(217, 237, 247, 0.6);
+}
+.swatch-success span:nth-child(1) {
+  background-color: rgba(92, 183, 92, 0.9);
+}
+.swatch-success span:nth-child(2) {
+  background-color: rgba(92, 183, 92, 0.8);
+}
+.swatch-success span:nth-child(3) {
+  background-color: rgba(92, 183, 92, 0.7);
+}
+.swatch-success span:nth-child(4) {
+  background-color: rgba(92, 183, 92, 0.6);
+}
+.swatch-warning span:nth-child(1) {
+  background-color: rgba(250, 167, 51, 0.9);
+}
+.swatch-warning span:nth-child(2) {
+  background-color: rgba(250, 167, 51, 0.8);
+}
+.swatch-warning span:nth-child(3) {
+  background-color: rgba(250, 167, 51, 0.7);
+}
+.swatch-warning span:nth-child(4) {
+  background-color: rgba(250, 167, 51, 0.6);
+}
 /* Texture =================================================== */
 .alert {
   margin-bottom: 1.5em;
@@ -1096,7 +1200,7 @@ svg:not(:root) {
 figure {
   margin-bottom: 1.5em;
 }
-figure figure img {
+figure img {
   margin-bottom: 0.375em;
 }
 figure figcaption {
diff --git a/css/320andup_sass.css b/css/320andup_sass.css
index 98c6ee2..4474b4e 100644
--- a/css/320andup_sass.css
+++ b/css/320andup_sass.css
@@ -1,4 +1,4 @@
-/* ============================================================  320 and Up by Andy Clarke Version: 3.0 URL: http://stuffandnonsense.co.uk/projects/320andup/  Sass Port by Jina Bolton URL: http://sushiandrobots.com  Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0  ============================================================ */
+/* ============================================================  320 and Up by Andy Clarke Version: 3.0 URL: http://stuffandnonsense.co.uk/projects/320andup/ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0  ============================================================ */
 /* Reset =================================================== */
 html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
 
@@ -33,8 +33,8 @@ h5, .h5 { font-size: 16px; font-size: 1.6rem; margin-bottom: 1.5em; }
 h6, .h6 { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; }
 
 .header h1, .header h2, .header h3 { float: left; margin-right: 24px; }
-.header a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
-.header:hover { background-color: #f3f5f6; }
+.header h1 a, .header h2 a, .header h3 a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
+.header h1:hover, .header h2:hover, .header h3:hover { background-color: #f3f5f6; }
 
 .header .a-rss, .header .a-rss:hover { float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
 
@@ -43,6 +43,7 @@ p, ol, ul, dl, address { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4re
 small { font-size: 14px; font-size: 1.4rem; }
 
 ul, ol { margin: 0 0 1.5em -24px; padding: 0 0 0 24px; }
+
 li ul, li ol { margin: 0; font-size: 16px; font-size: 1.6rem; }
 
 blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 2px solid #c7ced6; font-family: Cambria, Georgia, Times, "Times New Roman"; font-style: normal; }
@@ -58,7 +59,7 @@ dl, dd { margin-bottom: 1.5em; }
 dt { font-weight: bold; }
 
 .dl-horizontal dt { float: left; clear: left; width: 20.25%; text-align: right; }
-.dl-horizontal .dl-horizontal dd { margin-left: 22.78%; }
+.dl-horizontal dd { margin-left: 22.78%; }
 
 abbr[title] { border-bottom: 1px dotted #c7ced6; cursor: help; }
 
@@ -87,6 +88,68 @@ a:hover { text-decoration: underline; color: #011b35; }
 a:focus { outline: thin dotted; color: black; }
 a:hover, a:active { outline: 0; }
 
+::-moz-selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+::selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+.swatch { margin: 0 0 1.5em 0; padding: 0; }
+
+.swatch-row { display: block; margin: 0; padding: 0; width: 200px; }
+
+.swatch-row-one { background-color: black; }
+
+.swatch-row-two { background-color: white; }
+
+.swatch-row span { display: block; float: left; width: 50px; height: 50px; }
+
+.swatch-base span:nth-child(1) { background-color: rgba(45, 53, 62, 0.9); }
+
+.swatch-base span:nth-child(2) { background-color: rgba(45, 53, 62, 0.8); }
+
+.swatch-base span:nth-child(3) { background-color: rgba(45, 53, 62, 0.7); }
+
+.swatch-base span:nth-child(4) { background-color: rgba(45, 53, 62, 0.6); }
+
+.swatch-alert span:nth-child(1) { background-color: rgba(252, 248, 227, 0.9); }
+
+.swatch-alert span:nth-child(2) { background-color: rgba(252, 248, 227, 0.8); }
+
+.swatch-alert span:nth-child(3) { background-color: rgba(252, 248, 227, 0.7); }
+
+.swatch-alert span:nth-child(4) { background-color: rgba(252, 248, 227, 0.6); }
+
+.swatch-error span:nth-child(1) { background-color: rgba(218, 79, 73, 0.9); }
+
+.swatch-error span:nth-child(2) { background-color: rgba(218, 79, 73, 0.8); }
+
+.swatch-error span:nth-child(3) { background-color: rgba(218, 79, 73, 0.7); }
+
+.swatch-error span:nth-child(4) { background-color: rgba(218, 79, 73, 0.6); }
+
+.swatch-info span:nth-child(1) { background-color: rgba(217, 237, 247, 0.9); }
+
+.swatch-info span:nth-child(2) { background-color: rgba(217, 237, 247, 0.8); }
+
+.swatch-info span:nth-child(3) { background-color: rgba(217, 237, 247, 0.7); }
+
+.swatch-info span:nth-child(4) { background-color: rgba(217, 237, 247, 0.6); }
+
+.swatch-success span:nth-child(1) { background-color: rgba(91, 183, 91, 0.9); }
+
+.swatch-success span:nth-child(2) { background-color: rgba(91, 183, 91, 0.8); }
+
+.swatch-success span:nth-child(3) { background-color: rgba(91, 183, 91, 0.7); }
+
+.swatch-success span:nth-child(4) { background-color: rgba(91, 183, 91, 0.6); }
+
+.swatch-warning span:nth-child(1) { background-color: rgba(250, 167, 50, 0.9); }
+
+.swatch-warning span:nth-child(2) { background-color: rgba(250, 167, 50, 0.8); }
+
+.swatch-warning span:nth-child(3) { background-color: rgba(250, 167, 50, 0.7); }
+
+.swatch-warning span:nth-child(4) { background-color: rgba(250, 167, 50, 0.6); }
+
 /* Texture =================================================== */
 .alert { margin-bottom: 1.5em; padding: 8px 35px 8px 14px; background-color: #fcf8e3; border: 1px solid #f2e187; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; color: #9c8611; }
 .alert .alert-heading { color: inherit; }
@@ -130,7 +193,7 @@ a:hover, a:active { outline: 0; }
 
 .well-small { padding: 6px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
 
-/* Font Awesome: http://fortawesome.github.com/Font-Awesome/  Sass Port by Jina Bolton URL: http://sushiandrobots.com   License ------------------------------------------------------- The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0: http://creativecommons.org/licenses/by/3.0/ A mention of 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software). */
+/* Font Awesome: http://fortawesome.github.com/Font-Awesome/  License ------------------------------------------------------- The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0: http://creativecommons.org/licenses/by/3.0/ A mention of 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software). */
 @font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot"); src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("../fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg"); font-weight: normal; font-style: normal; }
 
 [class^="icon-"], [class*=" icon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; }
@@ -443,7 +506,7 @@ img { max-width: 100%; border-width: 0; vertical-align: middle; -ms-interpolatio
 svg:not(:root) { overflow: hidden; }
 
 figure { margin-bottom: 1.5em; }
-figure figure img { margin-bottom: 0.375em; }
+figure img { margin-bottom: 0.375em; }
 figure figcaption { display: block; font-weight: normal; font-size: 14px; font-size: 1.4rem; color: gray; }
 
 .list-bordered { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
@@ -474,14 +537,19 @@ input:hover, textarea:hover, select:hover { border-color: #586879; }
 .input-small { width: 90px; }
 
 input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0 \9; }
+
 input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+
 input[type="image"] { border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
 input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
 input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; }
 
 select, input[type="file"] { height: 28px; *margin-top: 4px; line-height: 28px; }
 
 select { width: auto; background-color: white; font-size: 13px; font-size: 1.3rem; }
+
 select[multiple], select[size] { height: auto; }
 
 textarea { resize: vertical; overflow: auto; height: auto; overflow: auto; vertical-align: top; }
@@ -493,6 +561,7 @@ input[type="hidden"] { display: none; }
 .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; }
 
 .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; }
+
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
 
 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; cursor: not-allowed; }
@@ -512,14 +581,21 @@ input:-moz-placeholder { font-size: 14px; font-size: 1.4rem; }
 .help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; }
 
 .form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; }
+
 .form-inline label { display: inline-block; }
+
 .form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
 .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 .form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; }
+
 .form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; }
+
 .form-search label { display: inline-block; }
-.form-search .radio, .form-search .checkbox, .form-search .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
 .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 /* Buttons =================================================== */
@@ -556,22 +632,28 @@ input[type="submit"].btn:hover { border-color: #cccccc; }
 .btn-mini { padding: 3px 5px; font-size: 11px; font-size: 1.1rem; line-height: 14px; }
 
 .btn-group { position: relative; *zoom: 1; *margin-left: 0.3em; margin-bottom: 1.5em; }
+
 .btn-group .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
+
 .btn-group .btn:first-child { margin-left: 0; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 2px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 2px; -moz-border-radius-topleft: 0; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 2px; border-top-left-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn:last-child { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 2px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 2px; border-top-right-radius: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 0; border-top-left-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn.large:first-child { margin-left: 0; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topleft: 0; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 4px; border-top-left-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn.large:last-child { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 4px; border-top-right-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 0; border-top-left-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
 
 .btn-toolbar { clear: both; margin-top: 0.75em; margin-bottom: 0.75em; }
+
 .btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
 
 /* Tables =================================================== */
 table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: collapse; border-spacing: 0; background-color: transparent; }
 table th, table td { padding: 8px; vertical-align: top; border-top: 1px solid #8c9bab; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; text-align: left; }
 table th { font-weight: bold; }
-thead table th { vertical-align: bottom; }
+table thead th { vertical-align: bottom; }
 table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }
-table tbody + table tbody { border-top: 2px solid #8c9bab; }
+table tbody + tbody { border-top: 2px solid #8c9bab; }
 table tbody tr td, table tbody tr th { -webkit-transition: background-color 0.25s 0 linear; -moz-transition: background-color 0.25s 0 linear; -ms-transition: background-color 0.25s 0 linear; -o-transition: background-color 0.25s 0 linear; transition: background-color 0.25s 0 linear; }
 table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 
@@ -628,14 +710,12 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/* */
-/* Sass Port by Jina Bolton */
-/* URL: http://sushiandrobots.com */
-/* */
 .grid { margin-bottom: 1.5em; border-bottom: 1px dashed #c7ced6; }
+
 .grid:last-child { margin-bottom: 0; border-bottom-width: 0; }
 
 .furniture-letter { overflow: hidden; }
+
 .furniture-letter span { display: block; float: left; margin: 0 12px 0 0; height: 44px; width: 44px; background-color: #2d353e; color: white; font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 44px; text-align: center; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
@@ -658,11 +738,8 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/* */
-/* Sass Port by Jina Bolton */
-/* URL: http://sushiandrobots.com */
-/* */
 .full { margin-bottom: 1.5em; padding: 1.5em; background-color: #f3f5f6; border-top: 2px solid #c7ced6; border-bottom: 2px solid #c7ced6; }
+
 .full .grids { width: 90%; margin: 0 auto; padding: 1.5em 0; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
diff --git a/css/320andup_sass_compass.css b/css/320andup_sass_compass.css
new file mode 100644
index 0000000..ff1158e
--- /dev/null
+++ b/css/320andup_sass_compass.css
@@ -0,0 +1,750 @@
+/* ============================================================  320 and Up by Andy Clarke Version: 3.0 URL: http://stuffandnonsense.co.uk/projects/320andup/ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0  ============================================================ */
+/* Reset =================================================== */
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
+
+article, aside, figure, footer, header, hgroup, nav, section { display: block; }
+
+/* Variables =================================================== */
+/* Mixins =================================================== */
+.clearfix { *zoom: 1; }
+.clearfix:before, .clearfix:after { display: table; content: ""; }
+.clearfix:after { clear: both; }
+
+/* Page =================================================== */
+html { background: white; font-size: 62.5%; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: #f3f5f6; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; padding: 0; width: 100%; background-color: transparent; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5em; color: black; }
+
+/* Typography =================================================== */
+h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; font-weight: bold; color: inherit; text-rendering: optimizelegibility; }
+
+h1 small, h2 small { font-weight: normal; color: #bfbfbf; }
+
+h1, .h1 { margin-bottom: 0.75em; font-size: 32px; font-size: 3.2rem; line-height: 1.2; }
+
+h2, .h2 { margin-bottom: 0.75em; font-size: 24px; font-size: 2.4rem; line-height: 1.2; }
+
+h3, .h3 { margin-bottom: 1em; font-size: 21px; font-size: 2.1rem; line-height: 1.3; }
+
+h4, .h4 { margin-bottom: 1.5em; font-size: 18px; font-size: 1.8rem; line-height: 1.25; }
+
+h5, .h5 { font-size: 16px; font-size: 1.6rem; margin-bottom: 1.5em; }
+
+h6, .h6 { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; }
+
+.header h1, .header h2, .header h3 { float: left; margin-right: 24px; }
+.header a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
+.header:hover { background-color: #f3f5f6; }
+
+.header .a-rss, .header .a-rss:hover { float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
+
+p, ol, ul, dl, address { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; }
+
+small { font-size: 14px; font-size: 1.4rem; }
+
+ul, ol { margin: 0 0 1.5em -24px; padding: 0 0 0 24px; }
+
+li ul, li ol { margin: 0; font-size: 16px; font-size: 1.6rem; }
+
+blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 2px solid #c7ced6; font-family: Cambria, Georgia, Times, "Times New Roman"; font-style: normal; }
+
+q { quotes: none; }
+
+blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
+
+cite { font-style: normal; }
+
+dl, dd { margin-bottom: 1.5em; }
+
+dt { font-weight: bold; }
+
+.dl-horizontal dt { float: left; clear: left; width: 20.25%; text-align: right; }
+.dl-horizontal dd { margin-left: 22.78%; }
+
+abbr[title] { border-bottom: 1px dotted #c7ced6; cursor: help; }
+
+b, strong { font-weight: bold; }
+
+dfn { font-style: italic; }
+
+ins { background-color: #f3f5f6; color: black; text-decoration: none; }
+
+mark { background-color: #f3f5f6; color: black; font-style: italic; font-weight: bold; }
+
+pre, code, kbd, samp { font-family: Monaco, Courier New, monospace; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+sub, sup { position: relative; font-size: 12px; font-size: 1.2rem; line-height: 0; vertical-align: baselineheight; }
+
+sup { top: -0.5em; }
+
+sub { bottom: -0.25em; }
+
+/* Colour =================================================== */
+a { text-decoration: none; color: #013568; }
+a:visited { color: #000203; }
+a:hover { text-decoration: underline; color: #011b35; }
+a:focus { outline: thin dotted; color: black; }
+a:hover, a:active { outline: 0; }
+
+::-moz-selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+::selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+.swatch { margin: 0 0 1.5em 0; padding: 0; }
+
+.swatch-row { display: block; margin: 0; padding: 0; width: 200px; }
+
+.swatch-row-one { background-color: black; }
+
+.swatch-row-two { background-color: white; }
+
+.swatch-row span { display: block; float: left; width: 50px; height: 50px; }
+
+.swatch-base span:nth-child(1) { background-color: rgba(45, 53, 62, 0.9); }
+
+.swatch-base span:nth-child(2) { background-color: rgba(45, 53, 62, 0.8); }
+
+.swatch-base span:nth-child(3) { background-color: rgba(45, 53, 62, 0.7); }
+
+.swatch-base span:nth-child(4) { background-color: rgba(45, 53, 62, 0.6); }
+
+.swatch-alert span:nth-child(1) { background-color: rgba(252, 248, 227, 0.9); }
+
+.swatch-alert span:nth-child(2) { background-color: rgba(252, 248, 227, 0.8); }
+
+.swatch-alert span:nth-child(3) { background-color: rgba(252, 248, 227, 0.7); }
+
+.swatch-alert span:nth-child(4) { background-color: rgba(252, 248, 227, 0.6); }
+
+.swatch-error span:nth-child(1) { background-color: rgba(218, 79, 73, 0.9); }
+
+.swatch-error span:nth-child(2) { background-color: rgba(218, 79, 73, 0.8); }
+
+.swatch-error span:nth-child(3) { background-color: rgba(218, 79, 73, 0.7); }
+
+.swatch-error span:nth-child(4) { background-color: rgba(218, 79, 73, 0.6); }
+
+.swatch-info span:nth-child(1) { background-color: rgba(217, 237, 247, 0.9); }
+
+.swatch-info span:nth-child(2) { background-color: rgba(217, 237, 247, 0.8); }
+
+.swatch-info span:nth-child(3) { background-color: rgba(217, 237, 247, 0.7); }
+
+.swatch-info span:nth-child(4) { background-color: rgba(217, 237, 247, 0.6); }
+
+.swatch-success span:nth-child(1) { background-color: rgba(91, 183, 91, 0.9); }
+
+.swatch-success span:nth-child(2) { background-color: rgba(91, 183, 91, 0.8); }
+
+.swatch-success span:nth-child(3) { background-color: rgba(91, 183, 91, 0.7); }
+
+.swatch-success span:nth-child(4) { background-color: rgba(91, 183, 91, 0.6); }
+
+.swatch-warning span:nth-child(1) { background-color: rgba(250, 167, 50, 0.9); }
+
+.swatch-warning span:nth-child(2) { background-color: rgba(250, 167, 50, 0.8); }
+
+.swatch-warning span:nth-child(3) { background-color: rgba(250, 167, 50, 0.7); }
+
+.swatch-warning span:nth-child(4) { background-color: rgba(250, 167, 50, 0.6); }
+
+/* Texture =================================================== */
+.alert { margin-bottom: 1.5em; padding: 8px 35px 8px 14px; background-color: #fcf8e3; border: 1px solid #f2e187; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; color: #9c8611; }
+.alert .alert-heading { color: inherit; }
+.alert .close { position: relative; top: -2px; right: -21px; float: right; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 18px; color: inherit; }
+
+.alert-success { background-color: #c5e6c5; border-color: #a2d6a2; color: #347834; }
+
+.alert-warning { background-color: #fee7c7; border-color: #fcd296; color: #c17305; }
+
+.alert-error { background-color: #f4cac8; border-color: #eba19e; color: #da4f49; }
+
+.alert-inverse { background-color: #414141; border-color: black; color: white; }
+
+.alert-block { padding-top: 14px; padding-bottom: 14px; }
+.alert-block .alert-heading { margin-bottom: 0.188em; font-size: inherit; font-weight: bold; }
+.alert-block > p, .alert-block > ul { margin-bottom: 0; }
+.alert-block p + p { margin-top: 5px; }
+
+.badge { padding: 1px 9px 2px; font-size: 12px; font-size: 1.2rem; font-weight: bold; white-space: nowrap; color: gray; background-color: #e6e6e6; -moz-border-radius: 9px; -webkit-border-radius: 9px; -o-border-radius: 9px; -ms-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; -moz-transition: background-color 0.25s 0 linear; -webkit-transition: background-color 0.25s 0 linear; -o-transition: background-color 0.25s 0 linear; transition: background-color 0.25s 0 linear; }
+.badge:hover { color: gray; text-decoration: none; cursor: pointer; }
+
+.badge-error { background-color: #da4f49; color: white; }
+.badge-error:hover { background-color: #9d2520; color: white; }
+
+.badge-warning { background-color: #faa732; color: white; }
+.badge-warning:hover { background-color: #c17305; color: white; }
+
+.badge-success { background-color: #5bb75b; color: white; }
+.badge-success:hover { background-color: #347834; color: white; }
+
+.badge-info { background-color: #d9edf7; color: #247fad; }
+.badge-info:hover { background-color: #85c5e5; }
+
+.badge-inverse { background-color: #414141; color: white; }
+.badge-inverse:hover { background-color: #0e0e0e; color: white; }
+
+.well { min-height: 21px; padding: 11px; margin-bottom: 1.5em; background-color: #f3f5f6; border: 1px solid #b8c1cb; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 1px 10px #d6dbe1; -webkit-box-shadow: inset 0 1px 10px #d6dbe1; -o-box-shadow: inset 0 1px 10px #d6dbe1; box-shadow: inset 0 1px 10px #d6dbe1; }
+.well p:last-child { margin-bottom: 0; }
+
+.well-large { padding: 22px; }
+
+.well-small { padding: 6px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }
+
+/* Font Awesome: http://fortawesome.github.com/Font-Awesome/  License ------------------------------------------------------- The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0: http://creativecommons.org/licenses/by/3.0/ A mention of 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software). */
+@font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot"); src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("../fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg"); font-weight: normal; font-style: normal; }
+
+[class^="icon-"], [class*=" icon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; }
+
+li[class^="icon-"], li[class*=" icon-"] { display: block; }
+
+[class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; }
+
+a [class^="icon-"], a [class*=" icon-"] { display: inline-block; text-decoration: inherit; }
+
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before { vertical-align: top; font-size: 4/3em; }
+
+.btn [class^="icon-"], .btn [class*=" icon-"] { /* keeps button heights with and without icons the same */ line-height: 0.9em; }
+
+li [class^="icon-"], li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; }
+li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] { /* 1.5 increased font size for icon-large * 1.25 width */ width: 1.875em; }
+
+li[class^="icon-"], li[class*=" icon-"] { margin-left: 0; list-style-type: none; }
+li[class^="icon-"]:before, li[class*=" icon-"]:before { text-indent: -2em; text-align: center; }
+li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before { text-indent: -4/3em; }
+
+/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */
+.icon-glass:before { content: "\f000"; }
+
+.icon-music:before { content: "\f001"; }
+
+.icon-search:before { content: "\f002"; }
+
+.icon-envelope:before { content: "\f003"; }
+
+.icon-heart:before { content: "\f004"; }
+
+.icon-star:before { content: "\f005"; }
+
+.icon-star-empty:before { content: "\f006"; }
+
+.icon-user:before { content: "\f007"; }
+
+.icon-film:before { content: "\f008"; }
+
+.icon-th-large:before { content: "\f009"; }
+
+.icon-th:before { content: "\f00a"; }
+
+.icon-th-list:before { content: "\f00b"; }
+
+.icon-ok:before { content: "\f00c"; }
+
+.icon-remove:before { content: "\f00d"; }
+
+.icon-zoom-in:before { content: "\f00e"; }
+
+.icon-zoom-out:before { content: "\f010"; }
+
+.icon-off:before { content: "\f011"; }
+
+.icon-signal:before { content: "\f012"; }
+
+.icon-cog:before { content: "\f013"; }
+
+.icon-trash:before { content: "\f014"; }
+
+.icon-home:before { content: "\f015"; }
+
+.icon-file:before { content: "\f016"; }
+
+.icon-time:before { content: "\f017"; }
+
+.icon-road:before { content: "\f018"; }
+
+.icon-download-alt:before { content: "\f019"; }
+
+.icon-download:before { content: "\f01a"; }
+
+.icon-upload:before { content: "\f01b"; }
+
+.icon-inbox:before { content: "\f01c"; }
+
+.icon-play-circle:before { content: "\f01d"; }
+
+.icon-repeat:before { content: "\f01e"; }
+
+/* \f020 is not a valid unicode character. all shifted one down */
+.icon-refresh:before { content: "\f021"; }
+
+.icon-list-alt:before { content: "\f022"; }
+
+.icon-lock:before { content: "\f023"; }
+
+.icon-flag:before { content: "\f024"; }
+
+.icon-headphones:before { content: "\f025"; }
+
+.icon-volume-off:before { content: "\f026"; }
+
+.icon-volume-down:before { content: "\f027"; }
+
+.icon-volume-up:before { content: "\f028"; }
+
+.icon-qrcode:before { content: "\f029"; }
+
+.icon-barcode:before { content: "\f02a"; }
+
+.icon-tag:before { content: "\f02b"; }
+
+.icon-tags:before { content: "\f02c"; }
+
+.icon-book:before { content: "\f02d"; }
+
+.icon-bookmark:before { content: "\f02e"; }
+
+.icon-print:before { content: "\f02f"; }
+
+.icon-camera:before { content: "\f030"; }
+
+.icon-font:before { content: "\f031"; }
+
+.icon-bold:before { content: "\f032"; }
+
+.icon-italic:before { content: "\f033"; }
+
+.icon-text-height:before { content: "\f034"; }
+
+.icon-text-width:before { content: "\f035"; }
+
+.icon-align-left:before { content: "\f036"; }
+
+.icon-align-center:before { content: "\f037"; }
+
+.icon-align-right:before { content: "\f038"; }
+
+.icon-align-justify:before { content: "\f039"; }
+
+.icon-list:before { content: "\f03a"; }
+
+.icon-indent-left:before { content: "\f03b"; }
+
+.icon-indent-right:before { content: "\f03c"; }
+
+.icon-facetime-video:before { content: "\f03d"; }
+
+.icon-picture:before { content: "\f03e"; }
+
+.icon-pencil:before { content: "\f040"; }
+
+.icon-map-marker:before { content: "\f041"; }
+
+.icon-adjust:before { content: "\f042"; }
+
+.icon-tint:before { content: "\f043"; }
+
+.icon-edit:before { content: "\f044"; }
+
+.icon-share:before { content: "\f045"; }
+
+.icon-check:before { content: "\f046"; }
+
+.icon-move:before { content: "\f047"; }
+
+.icon-step-backward:before { content: "\f048"; }
+
+.icon-fast-backward:before { content: "\f049"; }
+
+.icon-backward:before { content: "\f04a"; }
+
+.icon-play:before { content: "\f04b"; }
+
+.icon-pause:before { content: "\f04c"; }
+
+.icon-stop:before { content: "\f04d"; }
+
+.icon-forward:before { content: "\f04e"; }
+
+.icon-fast-forward:before { content: "\f050"; }
+
+.icon-step-forward:before { content: "\f051"; }
+
+.icon-eject:before { content: "\f052"; }
+
+.icon-chevron-left:before { content: "\f053"; }
+
+.icon-chevron-right:before { content: "\f054"; }
+
+.icon-plus-sign:before { content: "\f055"; }
+
+.icon-minus-sign:before { content: "\f056"; }
+
+.icon-remove-sign:before { content: "\f057"; }
+
+.icon-ok-sign:before { content: "\f058"; }
+
+.icon-question-sign:before { content: "\f059"; }
+
+.icon-info-sign:before { content: "\f05a"; }
+
+.icon-screenshot:before { content: "\f05b"; }
+
+.icon-remove-circle:before { content: "\f05c"; }
+
+.icon-ok-circle:before { content: "\f05d"; }
+
+.icon-ban-circle:before { content: "\f05e"; }
+
+.icon-arrow-left:before { content: "\f060"; }
+
+.icon-arrow-right:before { content: "\f061"; }
+
+.icon-arrow-up:before { content: "\f062"; }
+
+.icon-arrow-down:before { content: "\f063"; }
+
+.icon-share-alt:before { content: "\f064"; }
+
+.icon-resize-full:before { content: "\f065"; }
+
+.icon-resize-small:before { content: "\f066"; }
+
+.icon-plus:before { content: "\f067"; }
+
+.icon-minus:before { content: "\f068"; }
+
+.icon-asterisk:before { content: "\f069"; }
+
+.icon-exclamation-sign:before { content: "\f06a"; }
+
+.icon-gift:before { content: "\f06b"; }
+
+.icon-leaf:before { content: "\f06c"; }
+
+.icon-fire:before { content: "\f06d"; }
+
+.icon-eye-open:before { content: "\f06e"; }
+
+.icon-eye-close:before { content: "\f070"; }
+
+.icon-warning-sign:before { content: "\f071"; }
+
+.icon-plane:before { content: "\f072"; }
+
+.icon-calendar:before { content: "\f073"; }
+
+.icon-random:before { content: "\f074"; }
+
+.icon-comment:before { content: "\f075"; }
+
+.icon-magnet:before { content: "\f076"; }
+
+.icon-chevron-up:before { content: "\f077"; }
+
+.icon-chevron-down:before { content: "\f078"; }
+
+.icon-retweet:before { content: "\f079"; }
+
+.icon-shopping-cart:before { content: "\f07a"; }
+
+.icon-folder-close:before { content: "\f07b"; }
+
+.icon-folder-open:before { content: "\f07c"; }
+
+.icon-resize-vertical:before { content: "\f07d"; }
+
+.icon-resize-horizontal:before { content: "\f07e"; }
+
+.icon-bar-chart:before { content: "\f080"; }
+
+.icon-twitter-sign:before { content: "\f081"; }
+
+.icon-facebook-sign:before { content: "\f082"; }
+
+.icon-camera-retro:before { content: "\f083"; }
+
+.icon-key:before { content: "\f084"; }
+
+.icon-cogs:before { content: "\f085"; }
+
+.icon-comments:before { content: "\f086"; }
+
+.icon-thumbs-up:before { content: "\f087"; }
+
+.icon-thumbs-down:before { content: "\f088"; }
+
+.icon-star-half:before { content: "\f089"; }
+
+.icon-heart-empty:before { content: "\f08a"; }
+
+.icon-signout:before { content: "\f08b"; }
+
+.icon-linkedin-sign:before { content: "\f08c"; }
+
+.icon-pushpin:before { content: "\f08d"; }
+
+.icon-external-link:before { content: "\f08e"; }
+
+.icon-signin:before { content: "\f090"; }
+
+.icon-trophy:before { content: "\f091"; }
+
+.icon-github-sign:before { content: "\f092"; }
+
+.icon-upload-alt:before { content: "\f093"; }
+
+.icon-lemon:before { content: "\f094"; }
+
+/* Elements =================================================== */
+hr { display: block; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #c7ced6; border-bottom: 1px solid white; }
+
+img { max-width: 100%; border-width: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }
+
+svg:not(:root) { overflow: hidden; }
+
+figure { margin-bottom: 1.5em; }
+figure img { margin-bottom: 0.375em; }
+figure figcaption { display: block; font-weight: normal; font-size: 14px; font-size: 1.4rem; color: gray; }
+
+.list-bordered { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
+.list-bordered li { margin-bottom: 0.375em; padding-bottom: 0.375em; border-bottom: 1px dashed #c7ced6; }
+.list-bordered li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom-width: 0; }
+
+/* Forms =================================================== */
+form { margin: 0 0 1.5em 0; }
+form fieldset { margin-bottom: 1.5em; padding: 0; border-width: 0; }
+form legend { display: block; width: 100%; margin-bottom: 3em; *margin-left: -7px; padding: 0; color: black; border: 0; border-bottom: 1px solid #8c9bab; white-space: normal; }
+form legend small { font-size: 14px; font-size: 1.4rem; color: #bfbfbf; }
+form p { margin-bottom: 0.75em; }
+form ul { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
+form br { display: none; }
+
+label, input, button, select, textarea { font-size: 14px; font-size: 1.4rem; vertical-align: baseline; *vertical-align: middle; }
+
+input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
+
+label { display: block; margin-bottom: 0.188em; font-weight: bold; color: black; cursor: pointer; }
+label input, label textarea, label select { display: block; }
+
+input, textarea, select { display: inline-block; width: 100%; padding: 4px; margin-bottom: 0.375em; background-color: white; border: 1px solid #8c9bab; color: black; }
+input:hover, textarea:hover, select:hover { border-color: #586879; }
+
+.input-mini { width: 60px; }
+
+.input-small { width: 90px; }
+
+input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; border: 0 \9; }
+
+input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+
+input[type="image"] { border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+
+input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+
+input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; }
+
+select, input[type="file"] { height: 28px; *margin-top: 4px; line-height: 28px; }
+
+select { width: auto; background-color: white; font-size: 13px; font-size: 1.3rem; }
+
+select[multiple], select[size] { height: auto; }
+
+textarea { resize: vertical; overflow: auto; height: auto; overflow: auto; vertical-align: top; }
+
+input[type="hidden"] { display: none; }
+
+.radio, .checkbox { padding-left: 18px; font-weight: normal; }
+
+.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; }
+
+.radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; }
+
+.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
+
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: not-allowed; }
+
+input:focus, textarea:focus { border-color: #2d353e, 40%; outline: 0; outline: thin dotted \9; }
+
+input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+
+::-webkit-input-placeholder { font-size: 14px; font-size: 1.4rem; }
+
+input:-moz-placeholder { font-size: 14px; font-size: 1.4rem; }
+
+.help-block, .help-inline { color: gray; }
+
+.help-block { display: block; margin-bottom: 0.75em; }
+
+.help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; }
+
+.form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; }
+
+.form-inline label { display: inline-block; }
+
+.form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
+
+.form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; }
+
+.form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -moz-border-radius: 14; -webkit-border-radius: 14; -o-border-radius: 14; -ms-border-radius: 14; -khtml-border-radius: 14; border-radius: 14; }
+
+.form-search label { display: inline-block; }
+
+.form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
+
+/* Buttons =================================================== */
+.btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 6px 11px 6px; margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1.5em; color: #404040; text-align: center; vertical-align: middle; background-color: #e6e6e6; background-color: #d9d9d9; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#ffffff, #d9d9d9); background-image: -moz-linear-gradient(#ffffff, #d9d9d9); background-image: -o-linear-gradient(#ffffff, #d9d9d9); background-image: -ms-linear-gradient(#ffffff, #d9d9d9); background-image: linear-gradient(#ffffff, #d9d9d9); background-repeat: repeat-x; border: 1px solid #cccccc; border-bottom-color: #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; cursor: pointer; *margin-left: 0.3em; }
+.btn:visited, .btn:hover { color: #404040; text-decoration: none; }
+
+input[type="submit"].btn:hover { border-color: #cccccc; }
+
+.btn:first-child { *margin-left: 0; }
+
+.btn-disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: default; }
+
+.btn-info { background-color: #afd9ee; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9edf7), color-stop(100%, #afd9ee)); background-image: -webkit-linear-gradient(#d9edf7, #afd9ee); background-image: -moz-linear-gradient(#d9edf7, #afd9ee); background-image: -o-linear-gradient(#d9edf7, #afd9ee); background-image: -ms-linear-gradient(#d9edf7, #afd9ee); background-image: linear-gradient(#d9edf7, #afd9ee); background-repeat: repeat-x; border-color: #9acfea; border-bottom-color: #85c5e5; color: #247fad; }
+.btn-info:visited, .btn-info:hover { color: #247fad; }
+
+.btn-inverse { background-color: #272727; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(100%, #272727)); background-image: -webkit-linear-gradient(#414141, #272727); background-image: -moz-linear-gradient(#414141, #272727); background-image: -o-linear-gradient(#414141, #272727); background-image: -ms-linear-gradient(#414141, #272727); background-image: linear-gradient(#414141, #272727); background-repeat: repeat-x; border-color: #1b1b1b; border-bottom-color: #0e0e0e; color: white; }
+.btn-inverse:visited, .btn-inverse:hover { color: white; }
+
+.btn-primary { background-color: #181c20; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d353e), color-stop(100%, #181c20)); background-image: -webkit-linear-gradient(#2d353e, #181c20); background-image: -moz-linear-gradient(#2d353e, #181c20); background-image: -o-linear-gradient(#2d353e, #181c20); background-image: -ms-linear-gradient(#2d353e, #181c20); background-image: linear-gradient(#2d353e, #181c20); background-repeat: repeat-x; border-color: #0d0f12; border-bottom-color: #020203; color: white; }
+.btn-primary:visited, .btn-primary:hover { color: white; }
+
+.btn-success { background-color: #449b44; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bb75b), color-stop(100%, #449b44)); background-image: -webkit-linear-gradient(#5bb75b, #449b44); background-image: -moz-linear-gradient(#5bb75b, #449b44); background-image: -o-linear-gradient(#5bb75b, #449b44); background-image: -ms-linear-gradient(#5bb75b, #449b44); background-image: linear-gradient(#5bb75b, #449b44); background-repeat: repeat-x; border-color: #3c893c; border-bottom-color: #347834; }
+
+.btn-warning { background-color: #f39106; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #faa732), color-stop(100%, #f39106)); background-image: -webkit-linear-gradient(#faa732, #f39106); background-image: -moz-linear-gradient(#faa732, #f39106); background-image: -o-linear-gradient(#faa732, #f39106); background-image: -ms-linear-gradient(#faa732, #f39106); background-image: linear-gradient(#faa732, #f39106); background-repeat: repeat-x; border-color: #da8205; border-bottom-color: #c17305; }
+
+.btn-extlarge { padding: 11px 22px; font-size: 21px; font-size: 2.1rem; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
+
+.btn.btn-large { *padding-top: 7px; *padding-bottom: 7px; }
+
+.btn-large { padding: 11px 22px; font-size: 14px; font-size: 1.4rem; line-height: normal; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
+
+.btn-small { padding: 6px 10px; font-size: 11px; font-size: 1.1rem; line-height: 16px; }
+
+.btn-mini { padding: 3px 5px; font-size: 11px; font-size: 1.1rem; line-height: 14px; }
+
+.btn-group { position: relative; *zoom: 1; *margin-left: 0.3em; margin-bottom: 1.5em; }
+
+.btn-group .btn { position: relative; float: left; margin-left: -1px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+
+.btn-group .btn:first-child { margin-left: 0; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -o-border-top-left-radius: 2px; -ms-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -o-border-bottom-left-radius: 2px; -ms-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
+
+.btn-group .btn:last-child { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -o-border-top-right-radius: 2px; -ms-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -o-border-bottom-right-radius: 2px; -ms-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
+
+.btn-group .btn.large:first-child { margin-left: 0; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+
+.btn-group .btn.large:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+
+.btn-toolbar { clear: both; margin-top: 0.75em; margin-bottom: 0.75em; }
+
+.btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
+
+/* Tables =================================================== */
+table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: collapse; border-spacing: 0; background-color: transparent; }
+table th, table td { padding: 8px; vertical-align: top; border-top: 1px solid #8c9bab; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; text-align: left; }
+table th { font-weight: bold; }
+table thead th { vertical-align: bottom; }
+table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }
+table tbody + tbody { border-top: 2px solid #8c9bab; }
+table tbody tr td, table tbody tr th { -moz-transition: background-color 0.25s 0 linear; -webkit-transition: background-color 0.25s 0 linear; -o-transition: background-color 0.25s 0 linear; transition: background-color 0.25s 0 linear; }
+table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
+
+.table-condensed th, .table-condensed td { padding: 4px 5px; }
+
+.table-bordered { border: 1px solid #8c9bab; border-left: 0; border-collapse: separate; *border-collapse: collapsed; }
+.table-bordered th, .table-bordered td { border-left: 1px solid #8c9bab; }
+.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0; }
+
+.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #c7ced6; }
+
+/* Banner =================================================== */
+[role="banner"] { margin: 0 auto; padding-top: 1.5em; width: 90%; }
+[role="banner"] a[href="#navigation"] { display: block; position: absolute; top: 11px; right: 22px; width: 43px; height: 43px; white-space: nowrap; overflow: hidden; background-color: #586879; border: 1px solid #4d5b6a; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; color: #f3f5f6; font-size: 32px; font-size: 3.2rem; line-height: 42px; text-align: center; text-decoration: none; }
+
+/* Navigation =================================================== */
+[role="navigation"] { margin: 0 auto 1.5em; width: 90%; background-color: #586879; border: 1px solid #4d5b6a; }
+[role="navigation"] p { margin-bottom: 0; padding: 6px 11px; color: white; }
+[role="navigation"] a { color: white; }
+
+/* Content =================================================== */
+.content { margin: 0 auto; width: 90%; }
+
+/* contentinfo =================================================== */
+[role="contentinfo"] { padding: 1.5em 0; border-top: 3px solid #c7ced6; }
+[role="contentinfo"] small { display: block; margin: 0 auto 1.5em; width: 90%; }
+
+@media print { /* Print =================================================== */
+  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
+  @page { margin: 0.5cm; }
+  h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; }
+  p { orphans: 3; widows: 3; }
+  pre, blockquote { border: 1px solid gray; page-break-inside: avoid; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+  img { max-width: 100% !important; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  tr { page-break-inside: avoid; } }
+@media only screen and (min-width: 480px) { /* 480 =================================================== */ }
+@media only screen and (min-width: 600px) { /* 600 =================================================== */ }
+@media only screen and (min-width: 768px) { /* 768 =================================================== */
+  body { display: table; border-collapse: collapse; }
+  [role="banner"] a[href="#navigation"] { display: none !important; visibility: hidden; }
+  [role="navigation"] { display: table-header-group; }
+  [role="navigation"] p { margin: 0 auto; width: 90%; } }
+@media only screen and (min-width: 992px) { /* 992 =================================================== */ }
+@media only screen and (min-width: 1382px) { /* 1382 =================================================== */
+  body { max-width: 1440px; } }
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* 2x =================================================== */ }
+/* 320 and Up */
+/* Modules upstart */
+/* Version: 1.0 */
+/* Author: Andy Clarke */
+/* URL: http://stuffandnonsense.co.uk/projects/320andup */
+.grid { margin-bottom: 1.5em; border-bottom: 1px dashed #c7ced6; }
+
+.grid:last-child { margin-bottom: 0; border-bottom-width: 0; }
+
+.furniture-letter { overflow: hidden; }
+
+.furniture-letter span { display: block; float: left; margin: 0 12px 0 0; height: 44px; width: 44px; background-color: #2d353e; color: white; font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 44px; text-align: center; }
+
+@media only screen and (min-width: 480px) { /* Styles */ }
+@media only screen and (min-width: 600px) { /* Styles */ }
+@media only screen and (min-width: 768px) { .grids-two .grid { width: 43.03%; margin-bottom: 0; border-bottom-width: 0; }
+  .grids-two .grid-1 { float: left; }
+  .grids-two .grid-2 { float: right; }
+  .grids-three .grid-a { float: left; width: 31.64%; margin-right: 2.53%; }
+  .grids-four .grid-a { float: left; width: 31.64%; margin-right: 2.53%; } }
+@media only screen and (min-width: 992px) { .grids-three .grid { float: left; width: 31.64%; margin: 0 2.53% 0 0; border-bottom-width: 0; }
+  .grids-three .grid-3 { float: right; margin-right: 0; }
+  .grids-three .grid .grid-a { float: none; width: 100%; margin-right: 0; margin-bottom: 0.75em; }
+  .grids-four .grid { float: left; width: 20.25%; margin: 0 6.32% 0 0; border-bottom-width: 0; }
+  .grids-four .grid-4 { float: right; margin-right: 0; }
+  .grids-four .grid .grid-a { float: none; width: 100%; margin-right: 0; } }
+@media only screen and (min-width: 1382px) { /* Styles */ }
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }
+/* 320 and Up */
+/* Panels Upstart */
+/* Version: 1.0 */
+/* Author: Andy Clarke */
+/* URL: http://stuffandnonsense.co.uk/projects/320andup */
+.full { margin-bottom: 1.5em; padding: 1.5em; background-color: #f3f5f6; border-top: 2px solid #c7ced6; border-bottom: 2px solid #c7ced6; }
+
+.full .grids { width: 90%; margin: 0 auto; padding: 1.5em 0; }
+
+@media only screen and (min-width: 480px) { /* Styles */ }
+@media only screen and (min-width: 600px) { /* Styles */ }
+@media only screen and (min-width: 768px) { .special .grids-three .grid-a, .special .grids-four .grid-a { width: 43.03%; } }
+@media only screen and (min-width: 992px) { .special .grids-three .grid-a, .special .grids-four .grid-a { width: 100%; } }
+@media only screen and (min-width: 1382px) { /* Styles */ }
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }
diff --git a/css/320andup_scss.css b/css/320andup_scss.css
index 8893312..9b94076 100644
--- a/css/320andup_scss.css
+++ b/css/320andup_scss.css
@@ -3,10 +3,6 @@
 320 and Up by Andy Clarke
 Version: 3.0
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com
-
 Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 ============================================================ */
@@ -44,8 +40,8 @@ h5, .h5 { font-size: 16px; font-size: 1.6rem; margin-bottom: 1.5em; }
 h6, .h6 { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; }
 
 .header h1, .header h2, .header h3 { float: left; margin-right: 24px; }
-.header a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
-.header:hover { background-color: #f3f5f6; }
+.header h1 a, .header h2 a, .header h3 a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
+.header h1:hover, .header h2:hover, .header h3:hover { background-color: #f3f5f6; }
 
 .header .a-rss, .header .a-rss:hover { float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
 
@@ -54,6 +50,7 @@ p, ol, ul, dl, address { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4re
 small { font-size: 14px; font-size: 1.4rem; }
 
 ul, ol { margin: 0 0 1.5em -24px; padding: 0 0 0 24px; }
+
 li ul, li ol { margin: 0; font-size: 16px; font-size: 1.6rem; }
 
 blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 2px solid #c7ced6; font-family: Cambria, Georgia, Times, "Times New Roman"; font-style: normal; }
@@ -69,7 +66,7 @@ dl, dd { margin-bottom: 1.5em; }
 dt { font-weight: bold; }
 
 .dl-horizontal dt { float: left; clear: left; width: 20.25%; text-align: right; }
-.dl-horizontal .dl-horizontal dd { margin-left: 22.78%; }
+.dl-horizontal dd { margin-left: 22.78%; }
 
 abbr[title] { border-bottom: 1px dotted #c7ced6; cursor: help; }
 
@@ -98,6 +95,68 @@ a:hover { text-decoration: underline; color: #011b35; }
 a:focus { outline: thin dotted; color: black; }
 a:hover, a:active { outline: 0; }
 
+::-moz-selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+::selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+.swatch { margin: 0 0 1.5em 0; padding: 0; }
+
+.swatch-row { display: block; margin: 0; padding: 0; width: 200px; }
+
+.swatch-row-one { background-color: black; }
+
+.swatch-row-two { background-color: white; }
+
+.swatch-row span { display: block; float: left; width: 50px; height: 50px; }
+
+.swatch-base span:nth-child(1) { background-color: rgba(45, 53, 62, 0.9); }
+
+.swatch-base span:nth-child(2) { background-color: rgba(45, 53, 62, 0.8); }
+
+.swatch-base span:nth-child(3) { background-color: rgba(45, 53, 62, 0.7); }
+
+.swatch-base span:nth-child(4) { background-color: rgba(45, 53, 62, 0.6); }
+
+.swatch-alert span:nth-child(1) { background-color: rgba(252, 248, 227, 0.9); }
+
+.swatch-alert span:nth-child(2) { background-color: rgba(252, 248, 227, 0.8); }
+
+.swatch-alert span:nth-child(3) { background-color: rgba(252, 248, 227, 0.7); }
+
+.swatch-alert span:nth-child(4) { background-color: rgba(252, 248, 227, 0.6); }
+
+.swatch-error span:nth-child(1) { background-color: rgba(218, 79, 73, 0.9); }
+
+.swatch-error span:nth-child(2) { background-color: rgba(218, 79, 73, 0.8); }
+
+.swatch-error span:nth-child(3) { background-color: rgba(218, 79, 73, 0.7); }
+
+.swatch-error span:nth-child(4) { background-color: rgba(218, 79, 73, 0.6); }
+
+.swatch-info span:nth-child(1) { background-color: rgba(217, 237, 247, 0.9); }
+
+.swatch-info span:nth-child(2) { background-color: rgba(217, 237, 247, 0.8); }
+
+.swatch-info span:nth-child(3) { background-color: rgba(217, 237, 247, 0.7); }
+
+.swatch-info span:nth-child(4) { background-color: rgba(217, 237, 247, 0.6); }
+
+.swatch-success span:nth-child(1) { background-color: rgba(91, 183, 91, 0.9); }
+
+.swatch-success span:nth-child(2) { background-color: rgba(91, 183, 91, 0.8); }
+
+.swatch-success span:nth-child(3) { background-color: rgba(91, 183, 91, 0.7); }
+
+.swatch-success span:nth-child(4) { background-color: rgba(91, 183, 91, 0.6); }
+
+.swatch-warning span:nth-child(1) { background-color: rgba(250, 167, 50, 0.9); }
+
+.swatch-warning span:nth-child(2) { background-color: rgba(250, 167, 50, 0.8); }
+
+.swatch-warning span:nth-child(3) { background-color: rgba(250, 167, 50, 0.7); }
+
+.swatch-warning span:nth-child(4) { background-color: rgba(250, 167, 50, 0.6); }
+
 /* Texture =================================================== */
 .alert { margin-bottom: 1.5em; padding: 8px 35px 8px 14px; background-color: #fcf8e3; border: 1px solid #f2e187; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; color: #9c8611; }
 .alert .alert-heading { color: inherit; }
@@ -142,10 +201,6 @@ a:hover, a:active { outline: 0; }
 .well-small { padding: 6px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
 
 /* Font Awesome: http://fortawesome.github.com/Font-Awesome/
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 
 License
 -------------------------------------------------------
@@ -468,7 +523,7 @@ img { max-width: 100%; border-width: 0; vertical-align: middle; -ms-interpolatio
 svg:not(:root) { overflow: hidden; }
 
 figure { margin-bottom: 1.5em; }
-figure figure img { margin-bottom: 0.375em; }
+figure img { margin-bottom: 0.375em; }
 figure figcaption { display: block; font-weight: normal; font-size: 14px; font-size: 1.4rem; color: gray; }
 
 .list-bordered { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
@@ -499,14 +554,19 @@ input:hover, textarea:hover, select:hover { border-color: #586879; }
 .input-small { width: 90px; }
 
 input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0 \9; }
+
 input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+
 input[type="image"] { border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
 input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
 input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; }
 
 select, input[type="file"] { height: 28px; *margin-top: 4px; line-height: 28px; }
 
 select { width: auto; background-color: white; font-size: 13px; font-size: 1.3rem; }
+
 select[multiple], select[size] { height: auto; }
 
 textarea { resize: vertical; overflow: auto; height: auto; overflow: auto; vertical-align: top; }
@@ -518,6 +578,7 @@ input[type="hidden"] { display: none; }
 .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; }
 
 .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; }
+
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
 
 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; cursor: not-allowed; }
@@ -537,14 +598,21 @@ input:-moz-placeholder { font-size: 14px; font-size: 1.4rem; }
 .help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; }
 
 .form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; }
+
 .form-inline label { display: inline-block; }
+
 .form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
 .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 .form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; }
+
 .form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; }
+
 .form-search label { display: inline-block; }
-.form-search .radio, .form-search .checkbox, .form-search .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
 .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 /* Buttons =================================================== */
@@ -581,22 +649,28 @@ input[type="submit"].btn:hover { border-color: #cccccc; }
 .btn-mini { padding: 3px 5px; font-size: 11px; font-size: 1.1rem; line-height: 14px; }
 
 .btn-group { position: relative; *zoom: 1; *margin-left: .3em; margin-bottom: 1.5em; }
+
 .btn-group .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
+
 .btn-group .btn:first-child { margin-left: 0; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 2px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 2px; -moz-border-radius-topleft: 0; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 2px; border-top-left-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn:last-child { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 2px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 2px; border-top-right-radius: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 0; border-top-left-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn.large:first-child { margin-left: 0; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topleft: 0; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 4px; border-top-left-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
+
 .btn-group .btn.large:last-child { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 4px; border-top-right-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 0; border-top-left-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
 
 .btn-toolbar { clear: both; margin-top: 0.75em; margin-bottom: 0.75em; }
+
 .btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
 
 /* Tables =================================================== */
 table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: collapse; border-spacing: 0; background-color: transparent; }
 table th, table td { padding: 8px; vertical-align: top; border-top: 1px solid #8c9bab; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; text-align: left; }
 table th { font-weight: bold; }
-thead table th { vertical-align: bottom; }
+table thead th { vertical-align: bottom; }
 table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }
-table tbody + table tbody { border-top: 2px solid #8c9bab; }
+table tbody + tbody { border-top: 2px solid #8c9bab; }
 table tbody tr td, table tbody tr th { -webkit-transition: background-color 0.25s 0 linear; -moz-transition: background-color 0.25s 0 linear; -ms-transition: background-color 0.25s 0 linear; -o-transition: background-color 0.25s 0 linear; transition: background-color 0.25s 0 linear; }
 table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 
@@ -656,9 +730,11 @@ only screen and (min-device-pixel-ratio: 1.5) { /* 2x ==========================
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
 .grid { margin-bottom: 1.5em; border-bottom: 1px dashed #c7ced6; }
+
 .grid:last-child { margin-bottom: 0; border-bottom-width: 0; }
 
 .furniture-letter { overflow: hidden; }
+
 .furniture-letter span { display: block; float: left; margin: 0 12px 0 0; height: 44px; width: 44px; background-color: #2d353e; color: white; font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 44px; text-align: center; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
@@ -684,6 +760,7 @@ only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
 .full { margin-bottom: 1.5em; padding: 1.5em; background-color: #f3f5f6; border-top: 2px solid #c7ced6; border-bottom: 2px solid #c7ced6; }
+
 .full .grids { width: 90%; margin: 0 auto; padding: 1.5em 0; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
diff --git a/css/320andup_scss_compass.css b/css/320andup_scss_compass.css
index a85c298..1eac4fe 100644
--- a/css/320andup_scss_compass.css
+++ b/css/320andup_scss_compass.css
@@ -7,18 +7,16 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 ============================================================ */
 /* Reset =================================================== */
-article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr, h1, h2, h3, h4, h5, h6, html, body, body div, span, object, iframe, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 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-size: 100%; font: inherit; vertical-align: baseline; background: transparent; }
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
 
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
+article, aside, figure, footer, header, hgroup, nav, section { display: block; }
 
 /* Variables =================================================== */
-/* Mixins & Extends =================================================== */
+/* Mixins =================================================== */
 .clearfix { *zoom: 1; }
 .clearfix:before, .clearfix:after { display: table; content: ""; }
 .clearfix:after { clear: both; }
 
-.hide-text, .header .a-rss, .header .a-rss:hover { text-indent: 100%; white-space: nowrap; overflow: hidden; }
-
 /* Page =================================================== */
 html { background: white; font-size: 62.5%; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: #f3f5f6; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 
@@ -29,38 +27,37 @@ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; font-weight: bold; col
 
 h1 small, h2 small { font-weight: normal; color: #bfbfbf; }
 
-h1, .h1, h2, .h2 { margin-bottom: 0.75em; line-height: 1.2; }
-
-h1, .h1 { font-size: 32px; font-size: 3.2rem; }
+h1, .h1 { margin-bottom: 0.75em; font-size: 32px; font-size: 3.2rem; line-height: 1.2; }
 
-h2, .h2 { font-size: 24px; font-size: 2.4rem; }
+h2, .h2 { margin-bottom: 0.75em; font-size: 24px; font-size: 2.4rem; line-height: 1.2; }
 
 h3, .h3 { margin-bottom: 1em; font-size: 21px; font-size: 2.1rem; line-height: 1.3; }
 
-h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1.5em; }
+h4, .h4 { margin-bottom: 1.5em; font-size: 18px; font-size: 1.8rem; line-height: 1.25; }
 
-h4, .h4 { font-size: 18px; font-size: 1.8rem; line-height: 1.25; }
+h5, .h5 { font-size: 16px; font-size: 1.6rem; margin-bottom: 1.5em; }
 
-h5, .h5 { font-size: 16px; font-size: 1.6rem; }
+h6, .h6 { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; }
 
-h6, .h6 { font-size: 14px; font-size: 1.4rem; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; }
+.header h1, .header h2, .header h3 { float: left; margin-right: 24px; }
+.header a { display: block; position: relative; top: 6px; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
+.header:hover { background-color: #f3f5f6; }
 
-.header h1, .header h2, .header h3 { display: inline; float: left; margin-right: 24px; }
-.header a { display: block; position: relative; top: 6px; display: inline; float: right; padding: 4px 12px; font-size: 14px; font-size: 1.4rem; background-color: #f3f5f6; }
-.header a:hover { background-color: #f3f5f6; }
-.header .a-rss, .header .a-rss:hover { display: inline; float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; }
+.header .a-rss, .header .a-rss:hover { float: left; width: 16px; height: 16px; padding: 0; background: transparent url(../img/a-rss.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
 
 p, ol, ul, dl, address { margin-bottom: 1.5em; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; }
 
 small { font-size: 14px; font-size: 1.4rem; }
 
 ul, ol { margin: 0 0 1.5em -24px; padding: 0 0 0 24px; }
+
 li ul, li ol { margin: 0; font-size: 16px; font-size: 1.6rem; }
 
 blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 2px solid #c7ced6; font-family: Cambria, Georgia, Times, "Times New Roman"; font-style: normal; }
 
-blockquote, q { quotes: none; }
-blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
+q { quotes: none; }
+
+blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
 
 cite { font-style: normal; }
 
@@ -68,8 +65,8 @@ dl, dd { margin-bottom: 1.5em; }
 
 dt { font-weight: bold; }
 
-.dl-horizontal dt { display: inline; float: left; clear: left; width: 20.25%; text-align: right; }
-.dl-horizontal .dl-horizontal dd { margin-left: 22.78%; }
+.dl-horizontal dt { float: left; clear: left; width: 20.25%; text-align: right; }
+.dl-horizontal dd { margin-left: 22.78%; }
 
 abbr[title] { border-bottom: 1px dotted #c7ced6; cursor: help; }
 
@@ -83,7 +80,7 @@ mark { background-color: #f3f5f6; color: black; font-style: italic; font-weight:
 
 pre, code, kbd, samp { font-family: Monaco, Courier New, monospace; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; }
 
-pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; word-wrap: break-word; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
 
 sub, sup { position: relative; font-size: 12px; font-size: 1.2rem; line-height: 0; vertical-align: baselineheight; }
 
@@ -93,18 +90,77 @@ sub { bottom: -0.25em; }
 
 /* Colour =================================================== */
 a { text-decoration: none; color: #013568; }
-a:hover { text-decoration: underline; }
 a:visited { color: #000203; }
-a:focus { color: black; }
-a:hover { color: #011b35; }
-a:active { color: black; }
-a:focus { outline: thin dotted; }
+a:hover { text-decoration: underline; color: #011b35; }
+a:focus { outline: thin dotted; color: black; }
 a:hover, a:active { outline: 0; }
 
+::-moz-selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+::selection { background-color: #d6dbe1; color: #2d353e; text-shadow: none; }
+
+.swatch { margin: 0 0 1.5em 0; padding: 0; }
+
+.swatch-row { display: block; margin: 0; padding: 0; width: 200px; }
+
+.swatch-row-one { background-color: black; }
+
+.swatch-row-two { background-color: white; }
+
+.swatch-row span { display: block; float: left; width: 50px; height: 50px; }
+
+.swatch-base span:nth-child(1) { background-color: rgba(45, 53, 62, 0.9); }
+
+.swatch-base span:nth-child(2) { background-color: rgba(45, 53, 62, 0.8); }
+
+.swatch-base span:nth-child(3) { background-color: rgba(45, 53, 62, 0.7); }
+
+.swatch-base span:nth-child(4) { background-color: rgba(45, 53, 62, 0.6); }
+
+.swatch-alert span:nth-child(1) { background-color: rgba(252, 248, 227, 0.9); }
+
+.swatch-alert span:nth-child(2) { background-color: rgba(252, 248, 227, 0.8); }
+
+.swatch-alert span:nth-child(3) { background-color: rgba(252, 248, 227, 0.7); }
+
+.swatch-alert span:nth-child(4) { background-color: rgba(252, 248, 227, 0.6); }
+
+.swatch-error span:nth-child(1) { background-color: rgba(218, 79, 73, 0.9); }
+
+.swatch-error span:nth-child(2) { background-color: rgba(218, 79, 73, 0.8); }
+
+.swatch-error span:nth-child(3) { background-color: rgba(218, 79, 73, 0.7); }
+
+.swatch-error span:nth-child(4) { background-color: rgba(218, 79, 73, 0.6); }
+
+.swatch-info span:nth-child(1) { background-color: rgba(217, 237, 247, 0.9); }
+
+.swatch-info span:nth-child(2) { background-color: rgba(217, 237, 247, 0.8); }
+
+.swatch-info span:nth-child(3) { background-color: rgba(217, 237, 247, 0.7); }
+
+.swatch-info span:nth-child(4) { background-color: rgba(217, 237, 247, 0.6); }
+
+.swatch-success span:nth-child(1) { background-color: rgba(91, 183, 91, 0.9); }
+
+.swatch-success span:nth-child(2) { background-color: rgba(91, 183, 91, 0.8); }
+
+.swatch-success span:nth-child(3) { background-color: rgba(91, 183, 91, 0.7); }
+
+.swatch-success span:nth-child(4) { background-color: rgba(91, 183, 91, 0.6); }
+
+.swatch-warning span:nth-child(1) { background-color: rgba(250, 167, 50, 0.9); }
+
+.swatch-warning span:nth-child(2) { background-color: rgba(250, 167, 50, 0.8); }
+
+.swatch-warning span:nth-child(3) { background-color: rgba(250, 167, 50, 0.7); }
+
+.swatch-warning span:nth-child(4) { background-color: rgba(250, 167, 50, 0.6); }
+
 /* Texture =================================================== */
 .alert { margin-bottom: 1.5em; padding: 8px 35px 8px 14px; background-color: #fcf8e3; border: 1px solid #f2e187; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; color: #9c8611; }
 .alert .alert-heading { color: inherit; }
-.alert .close { position: relative; top: -2px; right: -21px; display: inline; float: right; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 18px; color: inherit; }
+.alert .close { position: relative; top: -2px; right: -21px; float: right; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 18px; color: inherit; }
 
 .alert-success { background-color: #c5e6c5; border-color: #a2d6a2; color: #347834; }
 
@@ -137,7 +193,7 @@ a:hover, a:active { outline: 0; }
 .badge-inverse { background-color: #414141; color: white; }
 .badge-inverse:hover { background-color: #0e0e0e; color: white; }
 
-.well { min-height: 21px; height: auto !important; height: 21px; padding: 11px; margin-bottom: 1.5em; background-color: #f3f5f6; border: 1px solid #b8c1cb; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 1px 10px #d6dbe1; -webkit-box-shadow: inset 0 1px 10px #d6dbe1; -o-box-shadow: inset 0 1px 10px #d6dbe1; box-shadow: inset 0 1px 10px #d6dbe1; }
+.well { min-height: 21px; padding: 11px; margin-bottom: 1.5em; background-color: #f3f5f6; border: 1px solid #b8c1cb; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 1px 10px #d6dbe1; -webkit-box-shadow: inset 0 1px 10px #d6dbe1; -o-box-shadow: inset 0 1px 10px #d6dbe1; box-shadow: inset 0 1px 10px #d6dbe1; }
 .well p:last-child { margin-bottom: 0; }
 
 .well-large { padding: 22px; }
@@ -155,23 +211,25 @@ source code is considered acceptable attribution (most common on the web).
 If human readable source code is not available to the end user, a mention in
 an 'About' or 'Credits' screen is considered acceptable (most common in desktop
 or mobile software). */
-@font-face { font-family: "FontAwesome"; src: url(/fonts/fontawesome-webfont.eot); src: url(/fonts/fontawesome-webfont.eot?iefix) format('eot'), url(/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/fontawesome-webfont.svgz#FontAwesomeRegular) format('svg'), url(/fonts/fontawesome-webfont.svg#FontAwesomeRegular) format('svg'); }
+@font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot"); src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("../fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg"); font-weight: normal; font-style: normal; }
 
 [class^="icon-"], [class*=" icon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; }
 
 li[class^="icon-"], li[class*=" icon-"] { display: block; }
 
-[class^="icon-"]:before, [class*=" icon-"]:before { font-style: normal; font-weight: normal; font-family: FontAwesome; display: inline-block; text-decoration: inherit; }
+[class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; }
+
 a [class^="icon-"], a [class*=" icon-"] { display: inline-block; text-decoration: inherit; }
 
 /* makes the font 33% larger relative to the icon container */
 .icon-large:before { vertical-align: top; font-size: 4/3em; }
 
 .btn [class^="icon-"], .btn [class*=" icon-"] { /* keeps button heights with and without icons the same */ line-height: .9em; }
+
 li [class^="icon-"], li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; }
-li [class^="icon-"].icon-large, li [class*=" icon-"].icon-large { /* 1.5 increased font size for icon-large * 1.25 width */ width: 1.875em; }
+li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] { /* 1.5 increased font size for icon-large * 1.25 width */ width: 1.875em; }
 
-li[class^="icon-"], li[class*=" icon-"] { list-style-image: none; list-style-type: none; margin-left: 0px; }
+li[class^="icon-"], li[class*=" icon-"] { margin-left: 0; list-style-type: none; }
 li[class^="icon-"]:before, li[class*=" icon-"]:before { text-indent: -2em; text-align: center; }
 li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before { text-indent: -4/3em; }
 
@@ -236,6 +294,7 @@ li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before { te
 
 .icon-repeat:before { content: "\f01e"; }
 
+/* \f020 is not a valid unicode character. all shifted one down */
 .icon-refresh:before { content: "\f021"; }
 
 .icon-list-alt:before { content: "\f022"; }
@@ -467,8 +526,7 @@ figure { margin-bottom: 1.5em; }
 figure img { margin-bottom: 0.375em; }
 figure figcaption { display: block; font-weight: normal; font-size: 14px; font-size: 1.4rem; color: gray; }
 
-.list-bordered { list-style: none; margin: 0 0 1.5em; padding: 0; }
-.list-bordered li { list-style-image: none; list-style-type: none; margin-left: 0px; }
+.list-bordered { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
 .list-bordered li { margin-bottom: 0.375em; padding-bottom: 0.375em; border-bottom: 1px dashed #c7ced6; }
 .list-bordered li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom-width: 0; }
 
@@ -478,8 +536,7 @@ form fieldset { margin-bottom: 1.5em; padding: 0; border-width: 0; }
 form legend { display: block; width: 100%; margin-bottom: 3em; *margin-left: -7px; padding: 0; color: black; border: 0; border-bottom: 1px solid #8c9bab; white-space: normal; }
 form legend small { font-size: 14px; font-size: 1.4rem; color: #bfbfbf; }
 form p { margin-bottom: 0.75em; }
-form ul { list-style: none; margin: 0 0 1.5em; padding: 0; }
-form ul li { list-style-image: none; list-style-type: none; margin-left: 0px; }
+form ul { list-style-type: none; margin: 0 0 1.5em 0; padding: 0; }
 form br { display: none; }
 
 label, input, button, select, textarea { font-size: 14px; font-size: 1.4rem; vertical-align: baseline; *vertical-align: middle; }
@@ -497,14 +554,19 @@ input:hover, textarea:hover, select:hover { border-color: #586879; }
 .input-small { width: 90px; }
 
 input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; border: 0 \9; }
+
 input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+
 input[type="image"] { border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+
 input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+
 input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; }
 
 select, input[type="file"] { height: 28px; *margin-top: 4px; line-height: 28px; }
 
 select { width: auto; background-color: white; font-size: 13px; font-size: 1.3rem; }
+
 select[multiple], select[size] { height: auto; }
 
 textarea { resize: vertical; overflow: auto; height: auto; overflow: auto; vertical-align: top; }
@@ -513,12 +575,13 @@ input[type="hidden"] { display: none; }
 
 .radio, .checkbox { padding-left: 18px; font-weight: normal; }
 
-.radio input[type="radio"], .checkbox input[type="checkbox"] { display: inline; float: left; margin-left: -18px; }
+.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; }
 
 .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; }
+
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; }
 
-input[disabled], input[readonly], select[disabled], select[readonly], textarea[disabled], textarea[readonly] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: not-allowed; }
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: not-allowed; }
 
 input:focus, textarea:focus { border-color: #2d353e, 40%; outline: 0; outline: thin dotted \9; }
 
@@ -535,18 +598,25 @@ input:-moz-placeholder { font-size: 14px; font-size: 1.4rem; }
 .help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; }
 
 .form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; }
+
 .form-inline label { display: inline-block; }
-.form-inline .radio, .form-inline .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
-.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { display: inline; float: left; margin-left: 0; margin-right: 3px; }
+
+.form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 .form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; }
-.form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -moz-border-radius: 14px; -webkit-border-radius: 14px; -o-border-radius: 14px; -ms-border-radius: 14px; -khtml-border-radius: 14px; border-radius: 14px; }
+
+.form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -moz-border-radius: 14; -webkit-border-radius: 14; -o-border-radius: 14; -ms-border-radius: 14; -khtml-border-radius: 14; border-radius: 14; }
+
 .form-search label { display: inline-block; }
-.form-search .radio, .form-search .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
-.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { display: inline; float: left; margin-left: 0; margin-right: 3px; }
+
+.form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; }
+
+.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; }
 
 /* Buttons =================================================== */
-.btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 6px 11px 6px; margin-bottom: 0; *margin-left: .3em; font-size: 12px; font-size: 1.2rem; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.5em; color: #404040; text-align: center; vertical-align: middle; background-color: #e6e6e6; background-color: #d9d9d9; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFD9D9D9'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#ffffff, #d9d9d9); background-image: -moz-linear-gradient(#ffffff, #d9d9d9); background-image: -o-linear-gradient(#ffffff, #d9d9d9); background-image: -ms-linear-gradient(#ffffff, #d9d9d9); background-image: linear-gradient(#ffffff, #d9d9d9); border: 1px solid #cccccc; border-bottom-color: #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; cursor: pointer; }
+.btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 6px 11px 6px; margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1.5em; color: #404040; text-align: center; vertical-align: middle; background-color: #e6e6e6; background-color: #d9d9d9; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#ffffff, #d9d9d9); background-image: -moz-linear-gradient(#ffffff, #d9d9d9); background-image: -o-linear-gradient(#ffffff, #d9d9d9); background-image: -ms-linear-gradient(#ffffff, #d9d9d9); background-image: linear-gradient(#ffffff, #d9d9d9); background-repeat: repeat-x; border: 1px solid #cccccc; border-bottom-color: #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; cursor: pointer; *margin-left: .3em; }
 .btn:visited, .btn:hover { color: #404040; text-decoration: none; }
 
 input[type="submit"].btn:hover { border-color: #cccccc; }
@@ -555,18 +625,18 @@ input[type="submit"].btn:hover { border-color: #cccccc; }
 
 .btn-disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: default; }
 
-.btn-info { background-color: #afd9ee; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9EDF7', endColorstr='#FFAFD9EE'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9edf7), color-stop(100%, #afd9ee)); background-image: -webkit-linear-gradient(#d9edf7, #afd9ee); background-image: -moz-linear-gradient(#d9edf7, #afd9ee); background-image: -o-linear-gradient(#d9edf7, #afd9ee); background-image: -ms-linear-gradient(#d9edf7, #afd9ee); background-image: linear-gradient(#d9edf7, #afd9ee); border-color: #9acfea; border-bottom-color: #85c5e5; color: #247fad; }
+.btn-info { background-color: #afd9ee; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9edf7), color-stop(100%, #afd9ee)); background-image: -webkit-linear-gradient(#d9edf7, #afd9ee); background-image: -moz-linear-gradient(#d9edf7, #afd9ee); background-image: -o-linear-gradient(#d9edf7, #afd9ee); background-image: -ms-linear-gradient(#d9edf7, #afd9ee); background-image: linear-gradient(#d9edf7, #afd9ee); background-repeat: repeat-x; border-color: #9acfea; border-bottom-color: #85c5e5; color: #247fad; }
 .btn-info:visited, .btn-info:hover { color: #247fad; }
 
-.btn-inverse { background-color: #272727; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF414141', endColorstr='#FF272727'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(100%, #272727)); background-image: -webkit-linear-gradient(#414141, #272727); background-image: -moz-linear-gradient(#414141, #272727); background-image: -o-linear-gradient(#414141, #272727); background-image: -ms-linear-gradient(#414141, #272727); background-image: linear-gradient(#414141, #272727); border-color: #1b1b1b; border-bottom-color: #0e0e0e; color: white; }
+.btn-inverse { background-color: #272727; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #414141), color-stop(100%, #272727)); background-image: -webkit-linear-gradient(#414141, #272727); background-image: -moz-linear-gradient(#414141, #272727); background-image: -o-linear-gradient(#414141, #272727); background-image: -ms-linear-gradient(#414141, #272727); background-image: linear-gradient(#414141, #272727); background-repeat: repeat-x; border-color: #1b1b1b; border-bottom-color: #0e0e0e; color: white; }
 .btn-inverse:visited, .btn-inverse:hover { color: white; }
 
-.btn-primary { background-color: #181c20; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2D353E', endColorstr='#FF181C20'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d353e), color-stop(100%, #181c20)); background-image: -webkit-linear-gradient(#2d353e, #181c20); background-image: -moz-linear-gradient(#2d353e, #181c20); background-image: -o-linear-gradient(#2d353e, #181c20); background-image: -ms-linear-gradient(#2d353e, #181c20); background-image: linear-gradient(#2d353e, #181c20); border-color: #0d0f12; border-bottom-color: #020203; color: white; }
+.btn-primary { background-color: #181c20; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d353e), color-stop(100%, #181c20)); background-image: -webkit-linear-gradient(#2d353e, #181c20); background-image: -moz-linear-gradient(#2d353e, #181c20); background-image: -o-linear-gradient(#2d353e, #181c20); background-image: -ms-linear-gradient(#2d353e, #181c20); background-image: linear-gradient(#2d353e, #181c20); background-repeat: repeat-x; border-color: #0d0f12; border-bottom-color: #020203; color: white; }
 .btn-primary:visited, .btn-primary:hover { color: white; }
 
-.btn-success { background-color: #449b44; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BB75B', endColorstr='#FF449B44'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bb75b), color-stop(100%, #449b44)); background-image: -webkit-linear-gradient(#5bb75b, #449b44); background-image: -moz-linear-gradient(#5bb75b, #449b44); background-image: -o-linear-gradient(#5bb75b, #449b44); background-image: -ms-linear-gradient(#5bb75b, #449b44); background-image: linear-gradient(#5bb75b, #449b44); border-color: #3c893c; border-bottom-color: #347834; }
+.btn-success { background-color: #449b44; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bb75b), color-stop(100%, #449b44)); background-image: -webkit-linear-gradient(#5bb75b, #449b44); background-image: -moz-linear-gradient(#5bb75b, #449b44); background-image: -o-linear-gradient(#5bb75b, #449b44); background-image: -ms-linear-gradient(#5bb75b, #449b44); background-image: linear-gradient(#5bb75b, #449b44); background-repeat: repeat-x; border-color: #3c893c; border-bottom-color: #347834; }
 
-.btn-warning { background-color: #f39106; background-repeat: repeat-x; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFAA732', endColorstr='#FFF39106'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #faa732), color-stop(100%, #f39106)); background-image: -webkit-linear-gradient(#faa732, #f39106); background-image: -moz-linear-gradient(#faa732, #f39106); background-image: -o-linear-gradient(#faa732, #f39106); background-image: -ms-linear-gradient(#faa732, #f39106); background-image: linear-gradient(#faa732, #f39106); border-color: #da8205; border-bottom-color: #c17305; }
+.btn-warning { background-color: #f39106; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #faa732), color-stop(100%, #f39106)); background-image: -webkit-linear-gradient(#faa732, #f39106); background-image: -moz-linear-gradient(#faa732, #f39106); background-image: -o-linear-gradient(#faa732, #f39106); background-image: -ms-linear-gradient(#faa732, #f39106); background-image: linear-gradient(#faa732, #f39106); background-repeat: repeat-x; border-color: #da8205; border-bottom-color: #c17305; }
 
 .btn-extlarge { padding: 11px 22px; font-size: 21px; font-size: 2.1rem; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
 
@@ -579,22 +649,28 @@ input[type="submit"].btn:hover { border-color: #cccccc; }
 .btn-mini { padding: 3px 5px; font-size: 11px; font-size: 1.1rem; line-height: 14px; }
 
 .btn-group { position: relative; *zoom: 1; *margin-left: .3em; margin-bottom: 1.5em; }
-.btn-group .btn { position: relative; display: inline; float: left; margin-left: -1px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
-.btn-group .btn:first-child { margin-left: 0; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -o-border-top-right-radius: 2px; -ms-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -o-border-bottom-left-radius: 2px; -ms-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
-.btn-group .btn:last-child { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -o-border-bottom-right-radius: 2px; -ms-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -o-border-top-left-radius: 2px; -ms-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
-.btn-group .btn.large:first-child { margin-left: 0; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
-.btn-group .btn.large:last-child { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
+
+.btn-group .btn { position: relative; float: left; margin-left: -1px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+
+.btn-group .btn:first-child { margin-left: 0; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -o-border-top-left-radius: 2px; -ms-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -o-border-bottom-left-radius: 2px; -ms-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
+
+.btn-group .btn:last-child { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -o-border-top-right-radius: 2px; -ms-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -o-border-bottom-right-radius: 2px; -ms-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
+
+.btn-group .btn.large:first-child { margin-left: 0; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+
+.btn-group .btn.large:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
 
 .btn-toolbar { clear: both; margin-top: 0.75em; margin-bottom: 0.75em; }
+
 .btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
 
 /* Tables =================================================== */
 table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: collapse; border-spacing: 0; background-color: transparent; }
 table th, table td { padding: 8px; vertical-align: top; border-top: 1px solid #8c9bab; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; text-align: left; }
 table th { font-weight: bold; }
-thead table th { vertical-align: bottom; }
+table thead th { vertical-align: bottom; }
 table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }
-table tbody + table tbody { border-top: 2px solid #8c9bab; }
+table tbody + tbody { border-top: 2px solid #8c9bab; }
 table tbody tr td, table tbody tr th { -moz-transition: background-color 0.25s 0 linear; -webkit-transition: background-color 0.25s 0 linear; -o-transition: background-color 0.25s 0 linear; transition: background-color 0.25s 0 linear; }
 table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 
@@ -602,9 +678,9 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 
 .table-bordered { border: 1px solid #8c9bab; border-left: 0; border-collapse: separate; *border-collapse: collapsed; }
 .table-bordered th, .table-bordered td { border-left: 1px solid #8c9bab; }
-.table-bordered thead:first-child, .table-bordered tbody:first-child ', '   tr  : first-child    th  , tbody  : first-child    tr  : first-child    td  { border-top: 0; }
+.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0; }
 
-.table-striped tbody tr:nth-child(odd) ', 'td, th { background-color: #c7ced6; }
+.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #c7ced6; }
 
 /* Banner =================================================== */
 [role="banner"] { margin: 0 auto; padding-top: 1.5em; width: 90%; }
@@ -623,10 +699,10 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 [role="contentinfo"] small { display: block; margin: 0 auto 1.5em; width: 90%; }
 
 @media print { /* Print =================================================== */
-  * { background: transparent !important; color: black !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -o-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
+  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
   @page { margin: 0.5cm; }
-  h2, h3, p { orphans: 3; widows: 3; }
-  h2, h3 { page-break-after: avoid; }
+  h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; }
+  p { orphans: 3; widows: 3; }
   pre, blockquote { border: 1px solid gray; page-break-inside: avoid; }
   abbr[title]:after { content: " (" attr(title) ")"; }
   a, a:visited { text-decoration: underline; }
@@ -654,23 +730,26 @@ only screen and (min-device-pixel-ratio: 1.5) { /* 2x ==========================
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
 .grid { margin-bottom: 1.5em; border-bottom: 1px dashed #c7ced6; }
+
 .grid:last-child { margin-bottom: 0; border-bottom-width: 0; }
 
 .furniture-letter { overflow: hidden; }
-.furniture-letter span { display: block; display: inline; float: left; margin: 0 12px 0 0; height: 44px; width: 44px; background-color: #2d353e; color: white; font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 44px; text-align: center; }
+
+.furniture-letter span { display: block; float: left; margin: 0 12px 0 0; height: 44px; width: 44px; background-color: #2d353e; color: white; font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 44px; text-align: center; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
 @media only screen and (min-width: 600px) { /* Styles */ }
 @media only screen and (min-width: 768px) { .grids-two .grid { width: 43.03%; margin-bottom: 0; border-bottom-width: 0; }
-  .grids-two .grid-1 { display: inline; float: left; }
-  .grids-two .grid-2 { display: inline; float: right; }
-  .grids-three .grid-a, .grids-four .grid-a { display: inline; float: left; width: 31.64%; margin-right: 2.53%; } }
-@media only screen and (min-width: 992px) { .grids-three .grid { display: inline; float: left; width: 31.64%; margin: 0 2.53% 0 0; border-bottom-width: 0; }
-  .grids-three .grid-3 { display: inline; float: right; margin-right: 0; }
-  .grids-three .grid .grid-a { float: none; display: block; width: 100%; margin-right: 0; margin-bottom: 0.75em; }
-  .grids-four .grid { display: inline; float: left; width: 20.25%; margin: 0 6.32% 0 0; border-bottom-width: 0; }
-  .grids-four .grid-4 { display: inline; float: right; margin-right: 0; }
-  .grids-four .grid .grid-a { float: none; display: block; width: 100%; margin-right: 0; } }
+  .grids-two .grid-1 { float: left; }
+  .grids-two .grid-2 { float: right; }
+  .grids-three .grid-a { float: left; width: 31.64%; margin-right: 2.53%; }
+  .grids-four .grid-a { float: left; width: 31.64%; margin-right: 2.53%; } }
+@media only screen and (min-width: 992px) { .grids-three .grid { float: left; width: 31.64%; margin: 0 2.53% 0 0; border-bottom-width: 0; }
+  .grids-three .grid-3 { float: right; margin-right: 0; }
+  .grids-three .grid .grid-a { float: none; width: 100%; margin-right: 0; margin-bottom: 0.75em; }
+  .grids-four .grid { float: left; width: 20.25%; margin: 0 6.32% 0 0; border-bottom-width: 0; }
+  .grids-four .grid-4 { float: right; margin-right: 0; }
+  .grids-four .grid .grid-a { float: none; width: 100%; margin-right: 0; } }
 @media only screen and (min-width: 1382px) { /* Styles */ }
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
@@ -681,6 +760,7 @@ only screen and (min-device-pixel-ratio: 1.5) { /* Styles */ }
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
 .full { margin-bottom: 1.5em; padding: 1.5em; background-color: #f3f5f6; border-top: 2px solid #c7ced6; border-bottom: 2px solid #c7ced6; }
+
 .full .grids { width: 90%; margin: 0 auto; padding: 1.5em 0; }
 
 @media only screen and (min-width: 480px) { /* Styles */ }
diff --git a/css/theme.css b/css/theme.css
new file mode 100644
index 0000000..e69de29
diff --git a/img/h/apple-touch-icon-144x144-precomposed.png b/img/h/apple-touch-icon-144x144-precomposed.png
new file mode 100755
index 0000000..be6ead0
Binary files /dev/null and b/img/h/apple-touch-icon-144x144-precomposed.png differ
diff --git a/index.html b/index.html
index 4ac7f6d..da6cf89 100755
--- a/index.html
+++ b/index.html
@@ -44,6 +44,8 @@
 <!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
 <!-- For iPad 1-->
 <!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
+<!-- For the new iPad -->
+<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
 <!-- For iPhone 3G, iPod Touch and Android -->
 <!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
 <!-- For Nokia -->
diff --git a/less/320andup.less b/less/320andup.less
index 6c9f24f..47c9167 100755
--- a/less/320andup.less
+++ b/less/320andup.less
@@ -10,87 +10,87 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 // 1. ROOT 					==============================
 
 // CSS reset
-@import "reset";
+@import "reset.less";
 
 // Variables and mixins
-@import "variables";
-@import "mixins";
+@import "variables.less";
+@import "mixins.less";
 
 // Site wide styles (html, body)
-@import "site";
+@import "site.less";
 
 // 2. TYPOGRAPHY 			==============================
 
 // Block level (h1, p) and text-level (em, strong) type
-@import "typography";
+@import "typography.less";
 
 // 3. COLOUR 				==============================
 
 // Colour interaction semantics
-@import "colour";
+@import "colour.less";
 
 // 4. TEXTURE 				==============================
 
 // Alerts, badges, boxes and gradients
-@import "texture";
+@import "texture.less";
 
 // Font Awesome icon fonts (optional)
-@import "font-awesome";
+@import "font-awesome.less";
 
 // 5. ELEMENTS 				==============================
 
 // Figures, images and other elements
-@import "elements";
+@import "elements.less";
 
 // Standard form controls
-@import "forms";
+@import "forms.less";
 
 // Button styles (optional)
-@import "buttons";
+@import "buttons.less";
 
 // Tables
-@import "tables";
+@import "tables.less";
 
 // 6. LAYOUT 			==============================
 
 // Page level layout styles (banner, navigation, content, contentinfo)
-@import "page";
+@import "page.less";
 
 //  7. VENDOR-SPECIFIC 		==============================
 //  8. MODERNIZR 			==============================
 
-// @import "modernizr";
+// @import "modernizr.less";
 
 //  9. TEMPLATE SPECIFICS 	==============================
 //  10. MEDIA QUERIES 		==============================
 
 @media print {
-@import "print";
+@import "print.less";
 }
 
 // 480px
 @media only screen and (min-width: 480px) {
-@import "480";
+@import "480.less";
 }
 
 // 600px
 @media only screen and (min-width: 600px) {
-@import "600";
+@import "600.less";
 }
 
 // 768px
 @media only screen and (min-width: 768px) {
-@import "768";
+@import "768.less";
 }
 
 // 992px
 @media only screen and (min-width: 992px) {
-@import "992";
+@import "992.less";
 }
 
 // 1382px
 @media only screen and (min-width: 1382px) {
-@import "1382";
+@import "1382.less";
 }
 
 // 2x
@@ -98,9 +98,9 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 only screen and (-webkit-min-device-pixel-ratio: 1.5), 
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-@import "2x"; }
+@import "2x.less"; }
 
 //  11. UPSTARTS 			==============================
 
-@import "upstarts/320andup-modules/upstart";
-@import "upstarts/320andup-panels/upstart";
\ No newline at end of file
+@import "upstarts/320andup-modules/upstart.less";
+@import "upstarts/320andup-panels/upstart.less";
\ No newline at end of file
diff --git a/less/colour.less b/less/colour.less
index abc0783..f47a37d 100755
--- a/less/colour.less
+++ b/less/colour.less
@@ -33,6 +33,124 @@ color : @linkcolorfocus; }
 outline : 0; }
 }
 
+::-moz-selection { 
+background-color : lighten(@basecolor, 65%); 
+color : @basecolor; 
+text-shadow : none; }  
+	
+::selection { 
+background-color : lighten(@basecolor, 65%); 
+color : @basecolor; 
+text-shadow : none; }
+
+// swatches
+
+.swatch {
+margin : 0 0 @baselineheight 0;
+padding : 0; }
+
+.swatch-row {
+display : block; 
+margin : 0;
+padding : 0;
+width : 200px; }
+
+.swatch-row-one {
+background-color : @black; }
+
+.swatch-row-two {
+background-color : @white; }
+
+.swatch-row span {
+display : block;
+float : left; 
+width : 50px;
+height : 50px; }
+
+// base
+
+.swatch-base span:nth-child(1) {
+.background-alpha(@basecolor, .9); }
+
+.swatch-base span:nth-child(2) {
+.background-alpha(@basecolor, .8); }
+
+.swatch-base span:nth-child(3) {
+.background-alpha(@basecolor, .7); }
+
+.swatch-base span:nth-child(4) {
+.background-alpha(@basecolor, .6); }
+
+// alert
+
+.swatch-alert span:nth-child(1) {
+.background-alpha(@alertcolor, .9); }
+
+.swatch-alert span:nth-child(2) {
+.background-alpha(@alertcolor, .8); }
+
+.swatch-alert span:nth-child(3) {
+.background-alpha(@alertcolor, .7); }
+
+.swatch-alert span:nth-child(4) {
+.background-alpha(@alertcolor, .6); }
+
+// error
+
+.swatch-error span:nth-child(1) {
+.background-alpha(@errorcolor, .9); }
+
+.swatch-error span:nth-child(2) {
+.background-alpha(@errorcolor, .8); }
+
+.swatch-error span:nth-child(3) {
+.background-alpha(@errorcolor, .7); }
+
+.swatch-error span:nth-child(4) {
+.background-alpha(@errorcolor, .6); }
+
+// info
+
+.swatch-info span:nth-child(1) {
+.background-alpha(@infocolor, .9); }
+
+.swatch-info span:nth-child(2) {
+.background-alpha(@infocolor, .8); }
+
+.swatch-info span:nth-child(3) {
+.background-alpha(@infocolor, .7); }
+
+.swatch-info span:nth-child(4) {
+.background-alpha(@infocolor, .6); }
+
+// success
+
+.swatch-success span:nth-child(1) {
+.background-alpha(@successcolor, .9); }
+
+.swatch-success span:nth-child(2) {
+.background-alpha(@successcolor, .8); }
+
+.swatch-success span:nth-child(3) {
+.background-alpha(@successcolor, .7); }
+
+.swatch-success span:nth-child(4) {
+.background-alpha(@successcolor, .6); }
+
+// warning
+
+.swatch-warning span:nth-child(1) {
+.background-alpha(@warningcolor, .9); }
+
+.swatch-warning span:nth-child(2) {
+.background-alpha(@warningcolor, .8); }
+
+.swatch-warning span:nth-child(3) {
+.background-alpha(@warningcolor, .7); }
+
+.swatch-warning span:nth-child(4) {
+.background-alpha(@warningcolor, .6); }
+
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
diff --git a/less/elements.less b/less/elements.less
index 0404245..c6544a4 100755
--- a/less/elements.less
+++ b/less/elements.less
@@ -36,7 +36,7 @@ overflow : hidden; }
 figure {
 margin-bottom : @baselineheight; 
 
-figure img {
+img {
 margin-bottom : @baselineheight / 4; }
 
 figcaption {
@@ -62,4 +62,5 @@ li:last-child {
 margin-bottom : 0; 
 padding-bottom : 0; 
 border-bottom-width : 0; }
+} 0; }
 }
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index eaf487c..76739ba 100755
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -165,6 +165,11 @@ transform : translate(@x, @y, @z); }
 
 // 5. ELEMENTS 				==============================
 
+// .background-alpha(VALUE VALUE);
+
+.background-alpha(@color: @white, @alpha: 1) {
+background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
+
 // .background-size(VALUE VALUE);
 
 .background-size(@size){
diff --git a/sass/320andup_sass.sass b/sass/320andup_sass.sass
index a613642..c39da86 100644
--- a/sass/320andup_sass.sass
+++ b/sass/320andup_sass.sass
@@ -3,10 +3,6 @@
  *320 and Up by Andy Clarke
  *Version: 3.0
  *URL: http://stuffandnonsense.co.uk/projects/320andup/
- *
- *Sass Port by Jina Bolton
- *URL: http://sushiandrobots.com
- *
  *Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
  *
  *============================================================
@@ -94,7 +90,7 @@
 // 2x
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
-  @import "2x"
+  @import 2x
 
 //  11. UPSTARTS 			==============================
 
diff --git a/sass/_1382.sass b/sass/_1382.sass
index af16f28..453b9ea 100644
--- a/sass/_1382.sass
+++ b/sass/_1382.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_2x.sass b/sass/_2x.sass
index 7c44459..9c3aa2c 100644
--- a/sass/_2x.sass
+++ b/sass/_2x.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_480.sass b/sass/_480.sass
index 6061ecd..4c5bed5 100644
--- a/sass/_480.sass
+++ b/sass/_480.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_600.sass b/sass/_600.sass
index c080c12..79f34c9 100644
--- a/sass/_600.sass
+++ b/sass/_600.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_768.sass b/sass/_768.sass
index 4ca4825..4489f94 100644
--- a/sass/_768.sass
+++ b/sass/_768.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_992.sass b/sass/_992.sass
index 1580821..8bc14b8 100644
--- a/sass/_992.sass
+++ b/sass/_992.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_buttons.sass b/sass/_buttons.sass
index a4c4763..5a57757 100644
--- a/sass/_buttons.sass
+++ b/sass/_buttons.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -130,27 +126,33 @@ input[type="submit"].btn:hover
   *zoom: 1
   *margin-left: .3em
   margin-bottom: $baseline
-  .btn
-    position: relative
-    float: left
-    margin-left: -1px
-    +rounded(0)
-    &:first-child
-      margin-left: 0
-      +border-radius(2px, 0, 2px, 0)
-    &:last-child
-      +border-radius(0, 2px, 0, 2px)
-    &.large:first-child
-      margin-left: 0
-      +border-radius(4px, 0, 4px, 0)
-    &.large:last-child
-      +border-radius(0, 4px, 0, 4px)
+
+.btn-group .btn
+  position: relative
+  float: left
+  margin-left: -1px
+  +rounded(0)
+
+.btn-group .btn:first-child
+  margin-left: 0
+  +border-radius(2px, 0, 2px, 0)
+
+.btn-group .btn:last-child
+  +border-radius(0, 2px, 0, 2px)
+
+.btn-group .btn.large:first-child
+  margin-left: 0
+  +border-radius(4px, 0, 4px, 0)
+
+.btn-group .btn.large:last-child
+  +border-radius(0, 4px, 0, 4px)
 
 .btn-toolbar
   clear: both
   margin-top: $baselineheight / 2
   margin-bottom: $baselineheight / 2
-  .btn-group
-    display: inline-block
-    *display: inline
-    *zoom: 1
+
+.btn-toolbar .btn-group
+  display: inline-block
+  *display: inline
+  *zoom: 1
diff --git a/sass/_colour.sass b/sass/_colour.sass
index 5f02a8f..36d9e97 100644
--- a/sass/_colour.sass
+++ b/sass/_colour.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -28,10 +24,128 @@ a
   &:focus
     outline: thin dotted
     color: $linkcolorfocus
-  &:hover,
+  &:hover, 
   &:active
     outline: 0
 
+\::-moz-selection
+  background-color: lighten($basecolor, 65%)
+  color: $basecolor
+  text-shadow: none
+
+\::selection
+  background-color: lighten($basecolor, 65%)
+  color: $basecolor
+  text-shadow: none
+
+// swatches
+
+.swatch
+  margin: 0 0 $baselineheight 0
+  padding: 0
+
+.swatch-row
+  display: block
+  margin: 0
+  padding: 0
+  width: 200px
+
+.swatch-row-one
+  background-color: $black
+
+.swatch-row-two
+  background-color: $white
+
+.swatch-row span
+  display: block
+  float: left
+  width: 50px
+  height: 50px
+
+// base
+
+.swatch-base span:nth-child(1)
+  +background-alpha($basecolor, 0.9)
+
+.swatch-base span:nth-child(2)
+  +background-alpha($basecolor, 0.8)
+
+.swatch-base span:nth-child(3)
+  +background-alpha($basecolor, 0.7)
+
+.swatch-base span:nth-child(4)
+  +background-alpha($basecolor, 0.6)
+
+// alert
+
+.swatch-alert span:nth-child(1)
+  +background-alpha($alertcolor, 0.9)
+
+.swatch-alert span:nth-child(2)
+  +background-alpha($alertcolor, 0.8)
+
+.swatch-alert span:nth-child(3)
+  +background-alpha($alertcolor, 0.7)
+
+.swatch-alert span:nth-child(4)
+  +background-alpha($alertcolor, 0.6)
+
+// error
+
+.swatch-error span:nth-child(1)
+  +background-alpha($errorcolor, 0.9)
+
+.swatch-error span:nth-child(2)
+  +background-alpha($errorcolor, 0.8)
+
+.swatch-error span:nth-child(3)
+  +background-alpha($errorcolor, 0.7)
+
+.swatch-error span:nth-child(4)
+  +background-alpha($errorcolor, 0.6)
+
+// info
+
+.swatch-info span:nth-child(1)
+  +background-alpha($infocolor, 0.9)
+
+.swatch-info span:nth-child(2)
+  +background-alpha($infocolor, 0.8)
+
+.swatch-info span:nth-child(3)
+  +background-alpha($infocolor, 0.7)
+
+.swatch-info span:nth-child(4)
+  +background-alpha($infocolor, 0.6)
+
+// success
+
+.swatch-success span:nth-child(1)
+  +background-alpha($successcolor, 0.9)
+
+.swatch-success span:nth-child(2)
+  +background-alpha($successcolor, 0.8)
+
+.swatch-success span:nth-child(3)
+  +background-alpha($successcolor, 0.7)
+
+.swatch-success span:nth-child(4)
+  +background-alpha($successcolor, 0.6)
+
+// warning
+
+.swatch-warning span:nth-child(1)
+  +background-alpha($warningcolor, 0.9)
+
+.swatch-warning span:nth-child(2)
+  +background-alpha($warningcolor, 0.8)
+
+.swatch-warning span:nth-child(3)
+  +background-alpha($warningcolor, 0.7)
+
+.swatch-warning span:nth-child(4)
+  +background-alpha($warningcolor, 0.6)
+
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
diff --git a/sass/_elements.sass b/sass/_elements.sass
index 3d12077..c259cd9 100644
--- a/sass/_elements.sass
+++ b/sass/_elements.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -39,7 +35,7 @@ svg:not(:root)
 
 figure
   margin-bottom: $baselineheight
-  figure img
+  img
     margin-bottom: $baselineheight / 4
   figcaption
     display: block
@@ -57,7 +53,7 @@ figure
     margin-bottom: $baselineheight / 4
     padding-bottom: $baselineheight / 4
     border-bottom: 1px dashed $bordercolor
-    &:last-child
-      margin-bottom: 0
-      padding-bottom: 0
-      border-bottom-width: 0
+  li:last-child
+    margin-bottom: 0
+    padding-bottom: 0
+    border-bottom-width: 0
diff --git a/sass/_font-awesome.sass b/sass/_font-awesome.sass
index c274eb1..a3f20c4 100644
--- a/sass/_font-awesome.sass
+++ b/sass/_font-awesome.sass
@@ -1,10 +1,6 @@
 // ==========================================================
 
 /* Font Awesome: http://fortawesome.github.com/Font-Awesome/
- *
- * Sass Port by Jina Bolton
- * URL: http://sushiandrobots.com
- *
  *
  *License
  *-------------------------------------------------------
diff --git a/sass/_forms.sass b/sass/_forms.sass
index 20d6990..c1d979e 100644
--- a/sass/_forms.sass
+++ b/sass/_forms.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -87,43 +83,46 @@ select
 .input-small
   width: 90px
 
-input
-  &[type="image"],
-  &[type="checkbox"],
-  &[type="radio"]
-    width: auto
-    height: auto
-    padding: 0
-    margin: 3px 0
-    *margin-top: 0
-    line-height: normal
-    cursor: pointer
-    +rounded(0)
-    border: 0 \9
-  &[type="checkbox"],
-  &[type="radio"]
-    +box-sizing(border-box)
-    padding: 0
-    *width: 13px
-    *height: 13px
-  &[type="image"]
-    border: 0
-    +box-shadow(none)
-  &[type="file"]
-    width: auto
-    padding: initial
-    line-height: initial
-    border: initial
-    background-color: transparent
-    background-color: initial
-    +box-shadow(none)
-  &[type="button"],
-  &[type="reset"],
-  &[type="submit"]
-    width: auto
-    height: auto
-    cursor: pointer
-    *overflow: visible
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"]
+  width: auto
+  height: auto
+  padding: 0
+  margin: 3px 0
+  *margin-top: 0
+  line-height: normal
+  cursor: pointer
+  +rounded(0)
+  border: 0 \9
+
+input[type="checkbox"], 
+input[type="radio"]
+  +box-sizing(border-box)
+  padding: 0
+  *width: 13px
+  *height: 13px
+
+input[type="image"]
+  border: 0
+  +box-shadow(none)
+
+input[type="file"]
+  width: auto
+  padding: initial
+  line-height: initial
+  border: initial
+  background-color: transparent
+  background-color: initial
+  +box-shadow(none)
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"]
+  width: auto
+  height: auto
+  cursor: pointer
+  *overflow: visible
 
 select,
 input[type="file"]
@@ -135,9 +134,10 @@ select
   width: auto
   background-color: $inputbackground
   +font-size(13)
-  &[multiple],
-  &[size]
-    height: auto
+
+select[multiple],
+select[size]
+  height: auto
 
 textarea
   +resize(vertical)
@@ -158,14 +158,16 @@ input[type="hidden"]
   float: left
   margin-left: -18px
 
-.radio, .checkbox
-  &.inline
-    display: inline-block
-    padding-top: 5px
-    margin-bottom: 0
-    vertical-align: middle
-    & + &
-      margin-left: 10px
+.radio.inline,
+.checkbox.inline
+  display: inline-block
+  padding-top: 5px
+  margin-bottom: 0
+  vertical-align: middle
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline
+  margin-left: 10px
 
 // disabled
 
@@ -180,15 +182,17 @@ textarea[readonly]
 
 // focus and active
 
-input, textarea
-  &:focus
-    border-color: $inputfocus
-    outline: 0
-    outline: thin dotted \9
+input:focus,
+textarea:focus
+  border-color: $inputfocus
+  outline: 0
+  outline: thin dotted \9
 
-input[type="file"], input[type="radio"], input[type="checkbox"], select
-  &:focus
-    +box-shadow(none)
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus
+  +box-shadow(none)
 
 \::-webkit-input-placeholder
   +font-size(14)
@@ -213,49 +217,54 @@ input:-moz-placeholder
 
 // .form-inline
 
-.form-inline
-  input,
-  textarea,
-  select
-    display: inline-block
-    margin-bottom: 0
-  label
-    display: inline-block
-  .radio,
-  .checkbox,
-  .radio
-    padding-left: 0
-    margin-bottom: 0
-    vertical-align: middle
-  .radio input[type="radio"],
-  .checkbox input[type="checkbox"]
-    float: left
-    margin-left: 0
-    margin-right: 3px
+.form-inline input,
+.form-inline textarea,
+.form-inline select
+  display: inline-block
+  margin-bottom: 0
+
+.form-inline label
+  display: inline-block
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio
+  padding-left: 0
+  margin-bottom: 0
+  vertical-align: middle
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"]
+  float: left
+  margin-left: 0
+  margin-right: 3px
 
 // .form-search
 
-.form-search
-  input,
-  textarea,
-  select
-    display: inline-block
-    margin-bottom: 0
-  .search-query
-    padding-left: 14px
-    padding-right: 14px
-    margin-bottom: 0
-    +rounded(14px)
-  label
-    display: inline-block
-  .radio,
-  .checkbox,
-  .radio
-    padding-left: 0
-    margin-bottom: 0
-    vertical-align: middle
-  .radio input[type="radio"],
-  .checkbox input[type="checkbox"]
-    float: left
-    margin-left: 0
-    margin-right: 3px
+.form-search input,
+.form-search textarea,
+.form-search select
+  display: inline-block
+  margin-bottom: 0
+
+.form-search .search-query
+  padding-left: 14px
+  padding-right: 14px
+  margin-bottom: 0
+  +rounded(14px)
+
+.form-search label
+  display: inline-block
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio
+  padding-left: 0
+  margin-bottom: 0
+  vertical-align: middle
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"]
+  float: left
+  margin-left: 0
+  margin-right: 3px
diff --git a/sass/_mixins.sass b/sass/_mixins.sass
index b3a55d6..548f100 100644
--- a/sass/_mixins.sass
+++ b/sass/_mixins.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -76,7 +72,7 @@
   // W3C
   background-repeat: repeat-x
 
-// .bordered(COLOR, COLOR, COLOR, COLOR);
+// @include bordered(COLOR, COLOR, COLOR, COLOR);
 
 =bordered($top-color: #eeeeee, $right-color: #eeeeee, $bottom-color: #eeeeee, $left-color: #eeeeee)
   border-top: solid 1px $top-color
@@ -84,14 +80,14 @@
   border-right: solid 1px $right-color
   border-bottom: solid 1px $bottom-color
 
-// .rounded(VALUE);
+// @mixin rounded(VALUE);
 
 =rounded($radius: 4px)
   -webkit-border-radius: $radius
   -moz-border-radius: $radius
   border-radius: $radius
 
-// .border-radius(VALUE,VALUE,VALUE,VALUE);
+// @mixin border-radius(VALUE,VALUE,VALUE,VALUE);
 
 =border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0)
   -webkit-border-top-right-radius: $topright
@@ -110,28 +106,28 @@
   -moz-background-clip: padding
   background-clip: padding-box
 
-// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+// @mixin box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
 
 =box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25))
   -webkit-box-shadow: $shadow
   -moz-box-shadow: $shadow
   box-shadow: $shadow
 
-// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
 
 =drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1)
   -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha)
   -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha)
   box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha)
 
-// .opacity(VALUE);
+// @mixin opacity(VALUE);
 
 =opacity($opacity: 0.5)
   -webkit-opacity: $opacity
   -moz-opacity: $opacity
   opacity: $opacity
 
-// .rotate(VALUEdeg);
+// @include rotate(VALUEdeg);
 
 =rotate($deg)
   -webkit-transform: rotate($deg)
@@ -140,7 +136,7 @@
   -o-transform: rotate($deg)
   transform: rotate($deg)
 
-// .scale(VALUE);
+// @include scale(VALUE);
 
 =scale($ratio)
   -webkit-transform: scale($ratio)
@@ -149,7 +145,7 @@
   -o-transform: scale($ratio)
   transform: scale($ratio)
 
-// .skew(VALUE, VALUE);
+// @include skew(VALUE, VALUE);
 
 =skew($x: 0, $y: 0)
   -webkit-transform: skew($x, $y)
@@ -158,7 +154,7 @@
   -o-transform: skew($x, $y)
   transform: skew($x, $y)
 
-// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+// @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
 
 =transition($transition)
   -webkit-transition: $transition
@@ -167,7 +163,7 @@
   -o-transition: $transition
   transition: $transition
 
-// .translate(VALUE, VALUE)
+// @include translate(VALUE, VALUE)
 
 =translate($x: 0, $y: 0)
   -webkit-transform: translate($x, $y)
@@ -185,7 +181,12 @@
 
 // 5. ELEMENTS 				==============================
 
-// .background-size(VALUE VALUE);
+// @include background-alpha(VALUE VALUE);
+
+=background-alpha($color: $white, $alpha: 1)
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
+
+// @include background-size(VALUE VALUE);
 
 =background-size($size)
   -webkit-background-size: $size
@@ -193,14 +194,14 @@
   -o-background-size: $size
   background-size: $size
 
-// .background-clip(VALUE); (border-box, padding-box, content-box)
+// @include background-clip(VALUE); (border-box, padding-box, content-box)
 
 =background-clip($clip)
   -webkit-background-clip: $clip
   -moz-background-clip: $clip
   background-clip: $clip
 
-// .box-sizing(VALUE); (border-box, padding-box, content-box)
+// @include box-sizing(VALUE); (border-box, padding-box, content-box)
 
 =box-sizing($boxsize: border-box)
   -webkit-box-sizing: $boxsize
@@ -218,7 +219,6 @@
 
 // Contain floats
 
-// The clearfix can be used as a mixin but I added a class here so it can work in the markup as well. — Jina
 =clearfix
   *zoom: 1
   &:before,
@@ -249,13 +249,13 @@
 =invisible
   visibility: hidden
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 =resize($direction: both)
   resize: $direction
   overflow: auto
 
-// .userselect(VALUE) (all, element, none, text)
+// @include userselect(VALUE) (all, element, none, text)
 
 =user-select($select)
   -webkit-user-select: $select
@@ -286,7 +286,7 @@
 
 // 6. LAYOUT 				==============================
 
-// .columns(250px, 0, 24px, COLOR, solid, 1px)
+// @include columns(250px, 0, 24px, COLOR, solid, 1px)
 
 =columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eeeeee, $columnRuleStyle: solid, $columnRuleWidth: 1px)
   -webkit-column-width: $colwidth
diff --git a/sass/_modernizr.sass b/sass/_modernizr.sass
index a7a8d65..d25fa5e 100644
--- a/sass/_modernizr.sass
+++ b/sass/_modernizr.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_page.sass b/sass/_page.sass
index 2a201e7..cf12f18 100644
--- a/sass/_page.sass
+++ b/sass/_page.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_print.sass b/sass/_print.sass
index a564ef9..879a9c2 100644
--- a/sass/_print.sass
+++ b/sass/_print.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -47,14 +43,15 @@ abbr[title]:after
 
 // 3. COLOUR 				==============================
 
-a
-  &, &:visited
-    text-decoration: underline
-  &[href]:after
-    content: " (" attr(href) ")"
-  &[href^="javascript:"]:after,
-  &[href^="#"]:after
-    content: ""
+a, a:visited
+  text-decoration: underline
+
+a[href]:after
+  content: " (" attr(href) ")"
+
+a[href^="javascript:"]:after, 
+a[href^="#"]:after
+  content: ""
 
 // 4. TEXTURE 				==============================
 
diff --git a/sass/_reset.sass b/sass/_reset.sass
index f1e2bf9..3eb8ea1 100644
--- a/sass/_reset.sass
+++ b/sass/_reset.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_site.sass b/sass/_site.sass
index 001475a..e4ab335 100644
--- a/sass/_site.sass
+++ b/sass/_site.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/sass/_tables.sass b/sass/_tables.sass
index b2cff6f..15f585b 100644
--- a/sass/_tables.sass
+++ b/sass/_tables.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -30,22 +26,21 @@ table
     text-align: left
   th
     font-weight: bold
-    thead &
-      vertical-align: bottom
+  thead th
+    vertical-align: bottom
   colgroup + thead tr:first-child th,
   colgroup + thead tr:first-child td,
   thead:first-child tr:first-child th,
   thead:first-child tr:first-child td
     border-top: 0
-  tbody
-    & + &
-      border-top: $tableborderwidth * 2 $tableborderstyle $tableborder
-    tr
-      td, th
-        +transition(background-color 0.25s 0 linear)
-      &:hover
-        td, th
-          background-color: $tablehover
+  tbody + tbody
+    border-top: $tableborderwidth * 2 $tableborderstyle $tableborder
+  tbody tr td,
+  tbody tr th
+    +transition(background-color 0.25s 0 linear)
+  tbody tr:hover td,
+  tbody tr:hover th
+    background-color: $tablehover
 
 // CONDENSED ====================================================
 
@@ -72,6 +67,6 @@ table
 // STRIPED ====================================================
 
 .table-striped
-  tbody tr:nth-child(odd)
-    td, th
-      background-color: $tablestripe
+  tbody tr:nth-child(odd) td,
+  tbody tr:nth-child(odd) th
+    background-color: $tablestripe
diff --git a/sass/_texture.sass b/sass/_texture.sass
index 21d1342..1ddb772 100644
--- a/sass/_texture.sass
+++ b/sass/_texture.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -17,7 +13,7 @@
 
 // For more alert styles:
 // http://twitter.github.com/bootstrap/components.html#alerts"
-// https://github.com/twitter/bootstrap/blob/master/less/alerts.less"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts"
 
 .alert
   margin-bottom: $baselineheight
@@ -145,7 +141,7 @@
 =warninggrad
   +vertical($warningcolor, darken($warningcolor, 10%))
 
-// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins
 
 // WELL ====================================================
 
diff --git a/sass/_typography.sass b/sass/_typography.sass
index 655acbc..83276ba 100644
--- a/sass/_typography.sass
+++ b/sass/_typography.sass
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -27,11 +23,10 @@ h6
   color: $baseheadingfontcolor
   text-rendering: optimizelegibility
 
-h1,
-h2
-  small
-    font-weight: normal
-    color: $lightgrey
+h1 small,
+h2 small
+  font-weight: normal
+  color: $lightgrey
 
 h1,
 .h1
@@ -72,10 +67,11 @@ h6,
 
 // header
 
-.header
-  h1, h2, h3
-    float: left
-    margin-right: $gutterwidth
+.header h1,
+.header h2,
+.header h3
+  float: left
+  margin-right: $gutterwidth
   a
     display: block
     position: relative
@@ -87,15 +83,14 @@ h6,
   &:hover
     background-color: lighten($basecolor, 75%)
 
-.header
-  .a-rss
-    &, &:hover
-      float: left
-      width: 16px
-      height: 16px
-      padding: 0
-      background: transparent url(../img/a-rss.png) no-repeat 0 0
-      +hide-text
+.header .a-rss,
+.header .a-rss:hover
+  float: left
+  width: 16px
+  height: 16px
+  padding: 0
+  background: transparent url(../img/a-rss.png) no-repeat 0 0
+  +hide-text
 
 // TYPOGRAPHY ====================================================
 
@@ -115,9 +110,11 @@ ul,
 ol
   margin: 0 0 $baselineheight #{-$gutterwidth}
   padding: 0 0 0 $gutterwidth
-  li &
-    margin: 0
-    +font-size(16)
+
+li ul,
+li ol
+  margin: 0
+  +font-size(16)
 
 // blockquote
 
@@ -131,10 +128,12 @@ blockquote
 q
   quotes: none
 
-blockquote, q
-  &:before, &:after
-    content: ''
-    content: none
+blockquote:before,
+blockquote:after,
+q:before,
+q:after
+  content: ''
+  content: none
 
 cite
   font-style: normal
@@ -154,7 +153,7 @@ dt
     clear: left
     width: 20.25%
     text-align: right
-  .dl-horizontal dd
+  dd
     margin-left: 22.78%
 
 // text-level
diff --git a/sass/_variables.sass b/sass/_variables.sass
index f8562bc..c958809 100644
--- a/sass/_variables.sass
+++ b/sass/_variables.sass
@@ -3,29 +3,12 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 /* Variables ===================================================
 
-// 1. COLOUR 				==============================
-
-$basecolor: rgb(45, 53, 62)
-$compcolor: invert($basecolor)
-$bordercolor: lighten($basecolor, 60%)
-
-// Links
-
-$linkcolor: rgb(1, 53, 104)
-$linkcolorhover: darken($linkcolor, 10)
-$linkcolorvisited: darken($linkcolorhover, 10)
-$linkcolorfocus: darken($linkcolorvisited, 10)
-
 // greyscale
 
 $black: rgb(0, 0, 0)
@@ -35,21 +18,12 @@ $lightgrey: lighten($black, 75%)
 $lightergrey: lighten($black, 90%)
 $white: rgb(255, 255, 255)
 
-// colour palettes
-
-$alertcolor: rgb(252, 248, 227)
-$errorcolor: rgb(218, 79, 73)
-$infocolor: rgb(217, 237, 247)
-$inverscolor: rgb(65, 65, 65)
-$successcolor: rgb(91, 183, 91)
-$warningcolor: rgb(250, 167, 50)
-
-// 2. ROOT 					==============================
+// 1. ROOT 					==============================
 
 $bodycolor: $white
 $textcolor: black
 
-// 3. TYPOGRAPHY 			==============================
+// 2. TYPOGRAPHY 			==============================
 
 $basefont: "Helvetica Neue", Helvetica, Arial, sans-serif
 $basefontsize: 16
@@ -63,6 +37,28 @@ $altlineheight: 1.35em
 
 $codefont: Monaco, Courier New, monospace
 
+// 3. COLOUR 				==============================
+
+$basecolor: rgb(45, 53, 62)
+$compcolor: adjust-hue($basecolor, 180)
+$bordercolor: lighten($basecolor, 60%)
+
+// Links
+
+$linkcolor: rgb(1, 53, 104)
+$linkcolorhover: darken($linkcolor, 10)
+$linkcolorvisited: darken($linkcolorhover, 10)
+$linkcolorfocus: darken($linkcolorvisited, 10)
+
+// colour palettes
+
+$alertcolor: rgb(252, 248, 227)
+$errorcolor: rgb(218, 79, 73)
+$infocolor: rgb(217, 237, 247)
+$inverscolor: rgb(65, 65, 65)
+$successcolor: rgb(91, 183, 91)
+$warningcolor: rgb(250, 167, 50)
+
 // 4. TEXTURE 				==============================
 
 // alert
diff --git a/sass/upstarts/320andup-modules/_upstart.sass b/sass/upstarts/320andup-modules/_upstart.sass
index d5d5f0d..9af81c5 100644
--- a/sass/upstarts/320andup-modules/_upstart.sass
+++ b/sass/upstarts/320andup-modules/_upstart.sass
@@ -5,10 +5,6 @@
 /* Version: 1.0
 /* Author: Andy Clarke
 /* URL: http://stuffandnonsense.co.uk/projects/320andup
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,24 +12,26 @@
 .grid
   margin-bottom: $baseline
   border-bottom: 1px dashed lighten($basecolor, 60%)
-  &:last-child
-    margin-bottom: 0
-    border-bottom-width: 0
+
+.grid:last-child
+  margin-bottom: 0
+  border-bottom-width: 0
 
 .furniture-letter
   overflow: hidden
-  & span
-    display: block
-    float: left
-    margin: 0 12px 0 0
-    height: 44px
-    width: 44px
-    background-color: $basecolor
-    color: $white
-    +font-size(32)
-    font-weight: bold
-    line-height: 44px
-    text-align: center
+
+.furniture-letter span
+  display: block
+  float: left
+  margin: 0 12px 0 0
+  height: 44px
+  width: 44px
+  background-color: $basecolor
+  color: $white
+  +font-size(32)
+  font-weight: bold
+  line-height: 44px
+  text-align: center
 
 // 480px
 @media only screen and (min-width: 480px)
@@ -46,15 +44,14 @@
 // 768px
 @media only screen and (min-width: 768px)
   // .grids-two
-  .grids-two
-    .grid
-      width: 43.03%
-      margin-bottom: 0
-      border-bottom-width: 0
-    .grid-1
-      float: left
-    .grid-2
-      float: right
+  .grids-two .grid
+    width: 43.03%
+    margin-bottom: 0
+    border-bottom-width: 0
+  .grids-two .grid-1
+    float: left
+  .grids-two .grid-2
+    float: right
   // grids-three
   .grids-three .grid-a
     float: left
@@ -69,34 +66,32 @@
 // 992px
 @media only screen and (min-width: 992px)
   // grids-three
-  .grids-three
-    .grid
-      float: left
-      width: 31.64%
-      margin: 0 2.53% 0 0
-      border-bottom-width: 0
-    .grid-3
-      float: right
-      margin-right: 0
-    .grid .grid-a
-      float: none
-      width: 100%
-      margin-right: 0
-      margin-bottom: $baseline / 2
+  .grids-three .grid
+    float: left
+    width: 31.64%
+    margin: 0 2.53% 0 0
+    border-bottom-width: 0
+  .grids-three .grid-3
+    float: right
+    margin-right: 0
+  .grids-three .grid .grid-a
+    float: none
+    width: 100%
+    margin-right: 0
+    margin-bottom: $baseline / 2
   // grids-four
-  .grids-four
-    .grid
-      float: left
-      width: 20.25%
-      margin: 0 6.32% 0 0
-      border-bottom-width: 0
-    .grid-4
-      float: right
-      margin-right: 0
-    .grid .grid-a
-      float: none
-      width: 100%
-      margin-right: 0
+  .grids-four .grid
+    float: left
+    width: 20.25%
+    margin: 0 6.32% 0 0
+    border-bottom-width: 0
+  .grids-four .grid-4
+    float: right
+    margin-right: 0
+  .grids-four .grid .grid-a
+    float: none
+    width: 100%
+    margin-right: 0
 
 // 1382px
 @media only screen and (min-width: 1382px)
diff --git a/sass/upstarts/320andup-modules/example.html b/sass/upstarts/320andup-modules/example.html
index edd227b..87abbb7 100755
--- a/sass/upstarts/320andup-modules/example.html
+++ b/sass/upstarts/320andup-modules/example.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
diff --git a/sass/upstarts/320andup-modules/index.html b/sass/upstarts/320andup-modules/index.html
index 5b423dd..8c2a79a 100755
--- a/sass/upstarts/320andup-modules/index.html
+++ b/sass/upstarts/320andup-modules/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 <meta http-equiv="cleartype" content="on">
diff --git a/sass/upstarts/320andup-panels/_upstart.sass b/sass/upstarts/320andup-panels/_upstart.sass
index 4a1eca7..aea75f6 100644
--- a/sass/upstarts/320andup-panels/_upstart.sass
+++ b/sass/upstarts/320andup-panels/_upstart.sass
@@ -5,10 +5,6 @@
 /* Version: 1.0
 /* Author: Andy Clarke
 /* URL: http://stuffandnonsense.co.uk/projects/320andup
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // HEADS UP: 320 and Up Panels Upstart is dependent on
@@ -26,10 +22,11 @@
   background-color: lighten($basecolor, 75%)
   border-top: 2px solid lighten($basecolor, 60%)
   border-bottom: 2px solid lighten($basecolor, 60%)
-  .grids
-    width: 90%
-    margin: 0 auto
-    padding: $baseline 0
+
+.full .grids
+  width: 90%
+  margin: 0 auto
+  padding: $baseline 0
 
 // 480px
 @media only screen and (min-width: 480px)
@@ -42,18 +39,16 @@
 // 768px
 @media only screen and (min-width: 768px)
   // Extra wide grid units
-  .special
-    .grids-three, .grids-four
-      .grid-a
-        width: 43.03%
+  .special .grids-three .grid-a,
+  .special .grids-four .grid-a
+    width: 43.03%
 
 // 992px
 @media only screen and (min-width: 992px)
   // Extra wide grid units
-  .special
-    .grids-three, .grids-four
-      .grid-a
-        width: 100%
+  .special .grids-three .grid-a,
+  .special .grids-four .grid-a
+    width: 100%
 
 // 1382px
 @media only screen and (min-width: 1382px)
diff --git a/sass/upstarts/320andup-panels/index.html b/sass/upstarts/320andup-panels/index.html
index 9854266..0e7b377 100755
--- a/sass/upstarts/320andup-panels/index.html
+++ b/sass/upstarts/320andup-panels/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
diff --git a/sass_compass/320andup_sass_compass.sass b/sass_compass/320andup_sass_compass.sass
new file mode 100644
index 0000000..91801a6
--- /dev/null
+++ b/sass_compass/320andup_sass_compass.sass
@@ -0,0 +1,101 @@
+/* ============================================================
+ *
+ *320 and Up by Andy Clarke
+ *Version: 3.0
+ *URL: http://stuffandnonsense.co.uk/projects/320andup/
+ *Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *============================================================
+
+// 1. ROOT 					==============================
+
+// Compass
+@import compass
+
+// CSS reset
+@import reset
+
+// Variables and mixins
+@import variables
+@import mixins
+
+// Site wide styles (html, body)
+@import site
+
+// 2. TYPOGRAPHY 			==============================
+
+// Block level (h1, p) and text-level (em, strong) type
+@import typography
+
+// 3. COLOUR 				==============================
+
+// Colour interaction semantics
+@import colour
+
+// 4. TEXTURE 				==============================
+
+// Alerts, badges, boxes and gradients
+@import texture
+
+// Font Awesome icon fonts (optional)
+@import font-awesome
+
+// 5. ELEMENTS 				==============================
+
+// Figures, images and other elements
+@import elements
+
+// Standard form controls
+@import forms
+
+// Button styles (optional)
+@import buttons
+
+// Tables
+@import tables
+
+// 6. LAYOUT 			==============================
+
+// Page level layout styles (banner, navigation, content, contentinfo)
+@import page
+
+//  7. VENDOR-SPECIFIC 		==============================
+//  8. MODERNIZR 			==============================
+
+// @import "modernizr";
+
+//  9. TEMPLATE SPECIFICS 	==============================
+//  10. MEDIA QUERIES 		==============================
+
+@media print
+  @import print
+
+// 480px
+@media only screen and (min-width: 480px)
+  @import 480
+
+// 600px
+@media only screen and (min-width: 600px)
+  @import 600
+
+// 768px
+@media only screen and (min-width: 768px)
+  @import 768
+
+// 992px
+@media only screen and (min-width: 992px)
+  @import 992
+
+// 1382px
+@media only screen and (min-width: 1382px)
+  @import 1382
+
+// 2x
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
+  @import 2x
+
+//  11. UPSTARTS 			==============================
+
+@import upstarts/320andup-modules/upstart
+@import upstarts/320andup-panels/upstart
diff --git a/scss-compass/_992.scss b/sass_compass/_1382.sass
similarity index 79%
rename from scss-compass/_992.scss
rename to sass_compass/_1382.sass
index 4ecd28c..453b9ea 100644
--- a/scss-compass/_992.scss
+++ b/sass_compass/_1382.sass
@@ -3,17 +3,17 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* 992 =================================================== */
+/* 1382 ===================================================
 
 // 1. ROOT 					==============================
+
+body
+  max-width: 1440px
+
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
@@ -21,4 +21,4 @@
 // 6. LAYOUT 				==============================
 // 7. VENDOR-SPECIFIC 		==============================
 // 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/scss-compass/_480.scss b/sass_compass/_2x.sass
similarity index 79%
rename from scss-compass/_480.scss
rename to sass_compass/_2x.sass
index b659ac0..9c3aa2c 100644
--- a/scss-compass/_480.scss
+++ b/sass_compass/_2x.sass
@@ -3,15 +3,11 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* 480 =================================================== */
+/* 2x ===================================================
 
 // 1. ROOT 					==============================
 // 2. TYPOGRAPHY 			==============================
@@ -21,4 +17,4 @@
 // 6. LAYOUT 				==============================
 // 7. VENDOR-SPECIFIC 		==============================
 // 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/scss-compass/_1382.scss b/sass_compass/_480.sass
similarity index 76%
rename from scss-compass/_1382.scss
rename to sass_compass/_480.sass
index 7cf3ee7..4c5bed5 100644
--- a/scss-compass/_1382.scss
+++ b/sass_compass/_480.sass
@@ -3,21 +3,13 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* 1382 =================================================== */
+/* 480 ===================================================
 
 // 1. ROOT 					==============================
-
-body {
-max-width : 1440px; }
-
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
@@ -25,4 +17,4 @@ max-width : 1440px; }
 // 6. LAYOUT 				==============================
 // 7. VENDOR-SPECIFIC 		==============================
 // 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/scss-compass/_600.scss b/sass_compass/_600.sass
similarity index 74%
rename from scss-compass/_600.scss
rename to sass_compass/_600.sass
index 7c247b6..79f34c9 100644
--- a/scss-compass/_600.scss
+++ b/sass_compass/_600.sass
@@ -3,31 +3,18 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* 600 =================================================== */
+/* 600 ===================================================
 
 // 1. ROOT 					==============================
 // 2. TYPOGRAPHY 			==============================
-
-p, 
-ol, 
-ul, 
-dl, 
-address,
-small {
-line-height : 1.45; }
-
 // 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
 // 7. VENDOR-SPECIFIC 		==============================
 // 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/scss-compass/_768.scss b/sass_compass/_768.sass
similarity index 68%
rename from scss-compass/_768.scss
rename to sass_compass/_768.sass
index 417fd32..4489f94 100644
--- a/scss-compass/_768.scss
+++ b/sass_compass/_768.sass
@@ -3,32 +3,19 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* 768 =================================================== */
+/* 768 ===================================================
 
 // 1. ROOT 					==============================
 
-body {
-display : table; 
-border-collapse : collapse; }
+body
+  display: table
+  border-collapse: collapse
 
 // 2. TYPOGRAPHY 			==============================
-
-p, 
-ol, 
-ul, 
-dl, 
-address,
-small {
-line-height : 1.5; }
-
 // 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
@@ -36,22 +23,22 @@ line-height : 1.5; }
 
 //   BANNER 				==============================
 
-[role="banner"] a[href="#navigation"] {
-@include hidden; }
+[role="banner"] a[href="#navigation"]
+  +hidden
 
 //   NAVIGATION 			==============================
 
-[role="navigation"] {
-display : table-header-group; }
-
-[role="navigation"] p {
-margin : 0 auto;
-width : 90%; }
+[role="navigation"]
+  display: table-header-group
+  p
+    margin: 0 auto
+    width: 90%
 
 //   CONTENT 				==============================
 //   11 MAIN 				==============================
 //   COMPLEMENTARY 			==============================
 //   CONTENTINFO 			==============================
+
 //  7. VENDOR-SPECIFIC 		==============================
 //  8. MODERNIZR 			==============================
-//  9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+//  9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/_992.sass b/sass_compass/_992.sass
new file mode 100644
index 0000000..8bc14b8
--- /dev/null
+++ b/sass_compass/_992.sass
@@ -0,0 +1,20 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* 992 ===================================================
+
+// 1. ROOT 					==============================
+// 2. TYPOGRAPHY 			==============================
+// 3. COLOUR 				==============================
+// 4. TEXTURE 				==============================
+// 5. ELEMENTS 				==============================
+// 6. LAYOUT 				==============================
+// 7. VENDOR-SPECIFIC 		==============================
+// 8. MODERNIZR 			==============================
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/_buttons.sass b/sass_compass/_buttons.sass
new file mode 100644
index 0000000..f2fd1c9
--- /dev/null
+++ b/sass_compass/_buttons.sass
@@ -0,0 +1,158 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Buttons ===================================================
+
+.btn
+  display: inline-block
+  *display: inline
+  /* IE7 inline-block hack
+  *zoom: 1
+  padding: 6px 11px 6px
+  margin-bottom: 0
+  font-family: $basefont
+  +font-size(12)
+  font-weight: bold
+  line-height: $baselineheight
+  color: $buttoncolor
+  text-align: center
+  vertical-align: middle
+  background-color: $buttonbackground
+  +greygrad
+  border: $buttonborderwidth $buttonborderstyle $buttonbordercolor
+  border-bottom-color: $buttonbottombordercolor
+  +border-radius(4px)
+  cursor: pointer
+  *margin-left: .3em
+  &:visited,
+  &:hover
+    color: $buttoncolor
+    text-decoration: none
+
+input[type="submit"].btn:hover
+  border-color: $buttonbordercolor
+
+.btn:first-child
+  *margin-left: 0
+
+// disabled
+
+.btn-disabled
+  +opacity(0.5)
+  cursor: default
+
+// info
+
+.btn-info
+  +infograd
+  border-color: darken($infocolor, 15%)
+  border-bottom-color: darken($infocolor, 20%)
+  color: darken($infocolor, 50%)
+  &:visited,
+  &:hover
+    color: darken($infocolor, 50%)
+
+// inverse
+
+.btn-inverse
+  +inversegrad
+  border-color: darken($inverscolor, 15%)
+  border-bottom-color: darken($inverscolor, 20%)
+  color: $white
+  &:visited,
+  &:hover
+    color: $white
+
+// primary
+
+.btn-primary
+  +basegrad
+  border-color: darken($basecolor, 15%)
+  border-bottom-color: darken($basecolor, 20%)
+  color: $white
+  &:visited,
+  &:hover
+    color: $white
+
+// success
+
+.btn-success
+  +successgrad
+  border-color: darken($successcolor, 15%)
+  border-bottom-color: darken($successcolor, 20%)
+
+// warning
+
+.btn-warning
+  +warninggrad
+  border-color: darken($warningcolor, 15%)
+  border-bottom-color: darken($warningcolor, 20%)
+
+// sizes
+
+.btn-extlarge
+  padding: 11px 22px
+  +font-size(21)
+  +border-radius(4px)
+
+.btn.btn-large
+  *padding-top: 7px
+  *padding-bottom: 7px
+
+.btn-large
+  padding: 11px 22px
+  +font-size(14)
+  line-height: normal
+  +border-radius(4px)
+
+.btn-small
+  padding: 6px 10px
+  +font-size(11)
+  line-height: 16px
+
+.btn-mini
+  padding: 3px 5px
+  +font-size(11)
+  line-height: 14px
+
+.btn-group
+  position: relative
+  *zoom: 1
+  *margin-left: .3em
+  margin-bottom: $baseline
+
+.btn-group .btn
+  position: relative
+  float: left
+  margin-left: -1px
+  +border-radius(0)
+
+.btn-group .btn:first-child
+  margin-left: 0
+  +border-left-radius(2px)
+
+.btn-group .btn:last-child
+  +border-right-radius(2px)
+
+.btn-group .btn.large:first-child
+  margin-left: 0
+  +border-left-radius(4px)
+
+.btn-group .btn.large:last-child
+  +border-right-radius(4px)
+
+.btn-toolbar
+  clear: both
+  margin-top: $baselineheight / 2
+  margin-bottom: $baselineheight / 2
+
+.btn-toolbar .btn-group
+  display: inline-block
+  *display: inline
+  *zoom: 1
diff --git a/sass_compass/_colour.sass b/sass_compass/_colour.sass
new file mode 100644
index 0000000..36d9e97
--- /dev/null
+++ b/sass_compass/_colour.sass
@@ -0,0 +1,154 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Colour ===================================================
+
+// 1. ROOT 					==============================
+// 2. TYPOGRAPHY 			==============================
+// 3. COLOUR 				==============================
+
+a
+  text-decoration: none
+  color: $linkcolor
+  &:visited
+    color: $linkcolorvisited
+  &:hover
+    text-decoration: underline
+    color: $linkcolorhover
+  &:focus
+    outline: thin dotted
+    color: $linkcolorfocus
+  &:hover, 
+  &:active
+    outline: 0
+
+\::-moz-selection
+  background-color: lighten($basecolor, 65%)
+  color: $basecolor
+  text-shadow: none
+
+\::selection
+  background-color: lighten($basecolor, 65%)
+  color: $basecolor
+  text-shadow: none
+
+// swatches
+
+.swatch
+  margin: 0 0 $baselineheight 0
+  padding: 0
+
+.swatch-row
+  display: block
+  margin: 0
+  padding: 0
+  width: 200px
+
+.swatch-row-one
+  background-color: $black
+
+.swatch-row-two
+  background-color: $white
+
+.swatch-row span
+  display: block
+  float: left
+  width: 50px
+  height: 50px
+
+// base
+
+.swatch-base span:nth-child(1)
+  +background-alpha($basecolor, 0.9)
+
+.swatch-base span:nth-child(2)
+  +background-alpha($basecolor, 0.8)
+
+.swatch-base span:nth-child(3)
+  +background-alpha($basecolor, 0.7)
+
+.swatch-base span:nth-child(4)
+  +background-alpha($basecolor, 0.6)
+
+// alert
+
+.swatch-alert span:nth-child(1)
+  +background-alpha($alertcolor, 0.9)
+
+.swatch-alert span:nth-child(2)
+  +background-alpha($alertcolor, 0.8)
+
+.swatch-alert span:nth-child(3)
+  +background-alpha($alertcolor, 0.7)
+
+.swatch-alert span:nth-child(4)
+  +background-alpha($alertcolor, 0.6)
+
+// error
+
+.swatch-error span:nth-child(1)
+  +background-alpha($errorcolor, 0.9)
+
+.swatch-error span:nth-child(2)
+  +background-alpha($errorcolor, 0.8)
+
+.swatch-error span:nth-child(3)
+  +background-alpha($errorcolor, 0.7)
+
+.swatch-error span:nth-child(4)
+  +background-alpha($errorcolor, 0.6)
+
+// info
+
+.swatch-info span:nth-child(1)
+  +background-alpha($infocolor, 0.9)
+
+.swatch-info span:nth-child(2)
+  +background-alpha($infocolor, 0.8)
+
+.swatch-info span:nth-child(3)
+  +background-alpha($infocolor, 0.7)
+
+.swatch-info span:nth-child(4)
+  +background-alpha($infocolor, 0.6)
+
+// success
+
+.swatch-success span:nth-child(1)
+  +background-alpha($successcolor, 0.9)
+
+.swatch-success span:nth-child(2)
+  +background-alpha($successcolor, 0.8)
+
+.swatch-success span:nth-child(3)
+  +background-alpha($successcolor, 0.7)
+
+.swatch-success span:nth-child(4)
+  +background-alpha($successcolor, 0.6)
+
+// warning
+
+.swatch-warning span:nth-child(1)
+  +background-alpha($warningcolor, 0.9)
+
+.swatch-warning span:nth-child(2)
+  +background-alpha($warningcolor, 0.8)
+
+.swatch-warning span:nth-child(3)
+  +background-alpha($warningcolor, 0.7)
+
+.swatch-warning span:nth-child(4)
+  +background-alpha($warningcolor, 0.6)
+
+// 4. TEXTURE 				==============================
+// 5. ELEMENTS 				==============================
+// 6. LAYOUT 				==============================
+// 7. VENDOR-SPECIFIC 		==============================
+// 8. MODERNIZR 			==============================
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/_elements.sass b/sass_compass/_elements.sass
new file mode 100644
index 0000000..c259cd9
--- /dev/null
+++ b/sass_compass/_elements.sass
@@ -0,0 +1,59 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Elements ===================================================
+
+// FIGURES & IMAGES =============================================================================
+
+hr
+  display: block
+  margin: 1em 0
+  padding: 0
+  height: 1px
+  border: 0
+  border-top: 1px solid $bordercolor
+  border-bottom: 1px solid $white
+
+// img
+
+img
+  max-width: 100%
+  border-width: 0
+  vertical-align: middle
+  -ms-interpolation-mode: bicubic
+
+svg:not(:root)
+  overflow: hidden
+
+// figure
+
+figure
+  margin-bottom: $baselineheight
+  img
+    margin-bottom: $baselineheight / 4
+  figcaption
+    display: block
+    font-weight: normal
+    +font-size(14)
+    color: $grey
+
+// list-bordered
+
+.list-bordered
+  list-style-type: none
+  margin: 0 0 $baselineheight 0
+  padding: 0
+  li
+    margin-bottom: $baselineheight / 4
+    padding-bottom: $baselineheight / 4
+    border-bottom: 1px dashed $bordercolor
+  li:last-child
+    margin-bottom: 0
+    padding-bottom: 0
+    border-bottom-width: 0
diff --git a/sass_compass/_font-awesome.sass b/sass_compass/_font-awesome.sass
new file mode 100644
index 0000000..16db632
--- /dev/null
+++ b/sass_compass/_font-awesome.sass
@@ -0,0 +1,509 @@
+// ==========================================================
+
+/* Font Awesome: http://fortawesome.github.com/Font-Awesome/
+ *
+ *License
+ *-------------------------------------------------------
+ *The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
+ *http://creativecommons.org/licenses/by/3.0/ A mention of
+ *'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
+ *source code is considered acceptable attribution (most common on the web).
+ *If human readable source code is not available to the end user, a mention in
+ *an 'About' or 'Credits' screen is considered acceptable (most common in desktop
+ *or mobile software).
+
+// ==========================================================
+
+// TO DO: Implement Compass font styles: http://compass-style.org/examples/compass/css3/font-face/
+
+@font-face
+  font-family: 'FontAwesome'
+  src: url("../fonts/fontawesome-webfont.eot")
+  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("../fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg")
+  font-weight: normal
+  font-style: normal
+
+
+[class^="icon-"],
+[class*=" icon-"]
+  display: inline
+  width: auto
+  height: auto
+  line-height: inherit
+  vertical-align: baseline
+  background-image: none
+  background-position: 0 0
+  background-repeat: repeat
+
+li[class^="icon-"],
+li[class*=" icon-"]
+  display: block
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before
+  font-family: FontAwesome
+  font-weight: normal
+  font-style: normal
+  display: inline-block
+  text-decoration: inherit
+
+a [class^="icon-"],
+a [class*=" icon-"]
+  display: inline-block
+  text-decoration: inherit
+
+/* makes the font 33% larger relative to the icon container
+.icon-large:before
+  vertical-align: top
+  font-size: 4 / 3em
+
+.btn
+  [class^="icon-"],
+  [class*=" icon-"]
+    /* keeps button heights with and without icons the same
+    line-height: .9em
+
+li
+  [class^="icon-"],
+  [class*=" icon-"]
+    display: inline-block
+    width: 1.25em
+    text-align: center
+  .icon-large[class^="icon-"],
+  .icon-large[class*=" icon-"]
+    /* 1.5 increased font size for icon-large * 1.25 width
+    width: 1.5 * 1.25em
+
+li[class^="icon-"],
+li[class*=" icon-"]
+  margin-left: 0
+  list-style-type: none
+  &:before
+    text-indent: -2em
+    text-align: center
+  &.icon-large:before
+    text-indent: -4 / 3em
+
+/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ *  readers do not read off random characters that represent icons
+
+.icon-glass:before
+  content: "\f000"
+
+.icon-music:before
+  content: "\f001"
+
+.icon-search:before
+  content: "\f002"
+
+.icon-envelope:before
+  content: "\f003"
+
+.icon-heart:before
+  content: "\f004"
+
+.icon-star:before
+  content: "\f005"
+
+.icon-star-empty:before
+  content: "\f006"
+
+.icon-user:before
+  content: "\f007"
+
+.icon-film:before
+  content: "\f008"
+
+.icon-th-large:before
+  content: "\f009"
+
+.icon-th:before
+  content: "\f00a"
+
+.icon-th-list:before
+  content: "\f00b"
+
+.icon-ok:before
+  content: "\f00c"
+
+.icon-remove:before
+  content: "\f00d"
+
+.icon-zoom-in:before
+  content: "\f00e"
+
+.icon-zoom-out:before
+  content: "\f010"
+
+.icon-off:before
+  content: "\f011"
+
+.icon-signal:before
+  content: "\f012"
+
+.icon-cog:before
+  content: "\f013"
+
+.icon-trash:before
+  content: "\f014"
+
+.icon-home:before
+  content: "\f015"
+
+.icon-file:before
+  content: "\f016"
+
+.icon-time:before
+  content: "\f017"
+
+.icon-road:before
+  content: "\f018"
+
+.icon-download-alt:before
+  content: "\f019"
+
+.icon-download:before
+  content: "\f01a"
+
+.icon-upload:before
+  content: "\f01b"
+
+.icon-inbox:before
+  content: "\f01c"
+
+.icon-play-circle:before
+  content: "\f01d"
+
+.icon-repeat:before
+  content: "\f01e"
+
+/* \f020 is not a valid unicode character. all shifted one down
+.icon-refresh:before
+  content: "\f021"
+
+.icon-list-alt:before
+  content: "\f022"
+
+.icon-lock:before
+  content: "\f023"
+
+.icon-flag:before
+  content: "\f024"
+
+.icon-headphones:before
+  content: "\f025"
+
+.icon-volume-off:before
+  content: "\f026"
+
+.icon-volume-down:before
+  content: "\f027"
+
+.icon-volume-up:before
+  content: "\f028"
+
+.icon-qrcode:before
+  content: "\f029"
+
+.icon-barcode:before
+  content: "\f02a"
+
+.icon-tag:before
+  content: "\f02b"
+
+.icon-tags:before
+  content: "\f02c"
+
+.icon-book:before
+  content: "\f02d"
+
+.icon-bookmark:before
+  content: "\f02e"
+
+.icon-print:before
+  content: "\f02f"
+
+.icon-camera:before
+  content: "\f030"
+
+.icon-font:before
+  content: "\f031"
+
+.icon-bold:before
+  content: "\f032"
+
+.icon-italic:before
+  content: "\f033"
+
+.icon-text-height:before
+  content: "\f034"
+
+.icon-text-width:before
+  content: "\f035"
+
+.icon-align-left:before
+  content: "\f036"
+
+.icon-align-center:before
+  content: "\f037"
+
+.icon-align-right:before
+  content: "\f038"
+
+.icon-align-justify:before
+  content: "\f039"
+
+.icon-list:before
+  content: "\f03a"
+
+.icon-indent-left:before
+  content: "\f03b"
+
+.icon-indent-right:before
+  content: "\f03c"
+
+.icon-facetime-video:before
+  content: "\f03d"
+
+.icon-picture:before
+  content: "\f03e"
+
+.icon-pencil:before
+  content: "\f040"
+
+.icon-map-marker:before
+  content: "\f041"
+
+.icon-adjust:before
+  content: "\f042"
+
+.icon-tint:before
+  content: "\f043"
+
+.icon-edit:before
+  content: "\f044"
+
+.icon-share:before
+  content: "\f045"
+
+.icon-check:before
+  content: "\f046"
+
+.icon-move:before
+  content: "\f047"
+
+.icon-step-backward:before
+  content: "\f048"
+
+.icon-fast-backward:before
+  content: "\f049"
+
+.icon-backward:before
+  content: "\f04a"
+
+.icon-play:before
+  content: "\f04b"
+
+.icon-pause:before
+  content: "\f04c"
+
+.icon-stop:before
+  content: "\f04d"
+
+.icon-forward:before
+  content: "\f04e"
+
+.icon-fast-forward:before
+  content: "\f050"
+
+.icon-step-forward:before
+  content: "\f051"
+
+.icon-eject:before
+  content: "\f052"
+
+.icon-chevron-left:before
+  content: "\f053"
+
+.icon-chevron-right:before
+  content: "\f054"
+
+.icon-plus-sign:before
+  content: "\f055"
+
+.icon-minus-sign:before
+  content: "\f056"
+
+.icon-remove-sign:before
+  content: "\f057"
+
+.icon-ok-sign:before
+  content: "\f058"
+
+.icon-question-sign:before
+  content: "\f059"
+
+.icon-info-sign:before
+  content: "\f05a"
+
+.icon-screenshot:before
+  content: "\f05b"
+
+.icon-remove-circle:before
+  content: "\f05c"
+
+.icon-ok-circle:before
+  content: "\f05d"
+
+.icon-ban-circle:before
+  content: "\f05e"
+
+.icon-arrow-left:before
+  content: "\f060"
+
+.icon-arrow-right:before
+  content: "\f061"
+
+.icon-arrow-up:before
+  content: "\f062"
+
+.icon-arrow-down:before
+  content: "\f063"
+
+.icon-share-alt:before
+  content: "\f064"
+
+.icon-resize-full:before
+  content: "\f065"
+
+.icon-resize-small:before
+  content: "\f066"
+
+.icon-plus:before
+  content: "\f067"
+
+.icon-minus:before
+  content: "\f068"
+
+.icon-asterisk:before
+  content: "\f069"
+
+.icon-exclamation-sign:before
+  content: "\f06a"
+
+.icon-gift:before
+  content: "\f06b"
+
+.icon-leaf:before
+  content: "\f06c"
+
+.icon-fire:before
+  content: "\f06d"
+
+.icon-eye-open:before
+  content: "\f06e"
+
+.icon-eye-close:before
+  content: "\f070"
+
+.icon-warning-sign:before
+  content: "\f071"
+
+.icon-plane:before
+  content: "\f072"
+
+.icon-calendar:before
+  content: "\f073"
+
+.icon-random:before
+  content: "\f074"
+
+.icon-comment:before
+  content: "\f075"
+
+.icon-magnet:before
+  content: "\f076"
+
+.icon-chevron-up:before
+  content: "\f077"
+
+.icon-chevron-down:before
+  content: "\f078"
+
+.icon-retweet:before
+  content: "\f079"
+
+.icon-shopping-cart:before
+  content: "\f07a"
+
+.icon-folder-close:before
+  content: "\f07b"
+
+.icon-folder-open:before
+  content: "\f07c"
+
+.icon-resize-vertical:before
+  content: "\f07d"
+
+.icon-resize-horizontal:before
+  content: "\f07e"
+
+.icon-bar-chart:before
+  content: "\f080"
+
+.icon-twitter-sign:before
+  content: "\f081"
+
+.icon-facebook-sign:before
+  content: "\f082"
+
+.icon-camera-retro:before
+  content: "\f083"
+
+.icon-key:before
+  content: "\f084"
+
+.icon-cogs:before
+  content: "\f085"
+
+.icon-comments:before
+  content: "\f086"
+
+.icon-thumbs-up:before
+  content: "\f087"
+
+.icon-thumbs-down:before
+  content: "\f088"
+
+.icon-star-half:before
+  content: "\f089"
+
+.icon-heart-empty:before
+  content: "\f08a"
+
+.icon-signout:before
+  content: "\f08b"
+
+.icon-linkedin-sign:before
+  content: "\f08c"
+
+.icon-pushpin:before
+  content: "\f08d"
+
+.icon-external-link:before
+  content: "\f08e"
+
+.icon-signin:before
+  content: "\f090"
+
+.icon-trophy:before
+  content: "\f091"
+
+.icon-github-sign:before
+  content: "\f092"
+
+.icon-upload-alt:before
+  content: "\f093"
+
+.icon-lemon:before
+  content: "\f094"
diff --git a/sass_compass/_forms.sass b/sass_compass/_forms.sass
new file mode 100644
index 0000000..77f9c16
--- /dev/null
+++ b/sass_compass/_forms.sass
@@ -0,0 +1,270 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Forms ===================================================
+
+form
+  margin: 0 0 $baselineheight 0
+  fieldset
+    margin-bottom: $baselineheight
+    padding: 0
+    border-width: 0
+  legend
+    display: block
+    width: 100%
+    margin-bottom: $baselineheight * 2
+    *margin-left: -7px
+    padding: 0
+    color: $textcolor
+    border: 0
+    border-bottom: $inputborderwidth $inputborderstyle $inputborder
+    white-space: normal
+    small
+      +font-size(14)
+      color: $lightgrey
+  p
+    margin-bottom: $baselineheight / 2
+  ul
+    list-style-type: none
+    margin: 0 0 $baselineheight 0
+    padding: 0
+  br
+    display: none
+
+label,
+input,
+button,
+select,
+textarea
+  +font-size(14)
+  vertical-align: baseline
+  *vertical-align: middle
+
+input,
+button,
+select,
+textarea
+  font-family: $basefont
+  +box-sizing(border-box)
+
+label
+  display: block
+  margin-bottom: $baseline / 8
+  font-weight: bold
+  color: $textcolor
+  cursor: pointer
+  input,
+  textarea,
+  select
+    display: block
+
+input,
+textarea,
+select
+  display: inline-block
+  width: 100%
+  padding: 4px
+  margin-bottom: $baselineheight / 4
+  background-color: $inputbackground
+  border: $inputborderwidth $inputborderstyle $inputborder
+  color: $textcolor
+  &:hover
+    border-color: $inputhover
+
+.input-mini
+  width: 60px
+
+.input-small
+  width: 90px
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"]
+  width: auto
+  height: auto
+  padding: 0
+  margin: 3px 0
+  *margin-top: 0
+  line-height: normal
+  cursor: pointer
+  +border-radius(0)
+  border: 0 \9
+
+input[type="checkbox"],
+input[type="radio"]
+  +box-sizing(border-box)
+  padding: 0
+  *width: 13px
+  *height: 13px
+
+input[type="image"]
+  border: 0
+  +box-shadow(none)
+
+input[type="file"]
+  width: auto
+  padding: initial
+  line-height: initial
+  border: initial
+  background-color: transparent
+  background-color: initial
+  +box-shadow(none)
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"]
+  width: auto
+  height: auto
+  cursor: pointer
+  *overflow: visible
+
+select,
+input[type="file"]
+  height: 28px
+  *margin-top: 4px
+  line-height: 28px
+
+select
+  width: auto
+  background-color: $inputbackground
+  +font-size(13)
+
+select[multiple],
+select[size]
+  height: auto
+
+textarea
+  +resize(vertical)
+  height: auto
+  overflow: auto
+  vertical-align: top
+
+input[type="hidden"]
+  display: none
+
+.radio,
+.checkbox
+  padding-left: 18px
+  font-weight: normal
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"]
+  float: left
+  margin-left: -18px
+
+.radio.inline,
+.checkbox.inline
+  display: inline-block
+  padding-top: 5px
+  margin-bottom: 0
+  vertical-align: middle
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline
+  margin-left: 10px
+
+// disabled
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly]
+  +opacity(0.5)
+  cursor: not-allowed
+
+// focus and active
+
+input:focus,
+textarea:focus
+  border-color: $inputfocus
+  outline: 0
+  outline: thin dotted \9
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus
+  +box-shadow(none)
+
+\::-webkit-input-placeholder
+  +font-size(14)
+
+input:-moz-placeholder
+  +font-size(14)
+
+// help text
+
+.help-block,
+.help-inline
+  color: $grey
+
+.help-block
+  display: block
+  margin-bottom: $baselineheight / 2
+
+.help-inline
+  display: inline-block
+  vertical-align: middle
+  padding-left: 5px
+
+// .form-inline
+
+.form-inline input,
+.form-inline textarea,
+.form-inline select
+  display: inline-block
+  margin-bottom: 0
+
+.form-inline label
+  display: inline-block
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio
+  padding-left: 0
+  margin-bottom: 0
+  vertical-align: middle
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"]
+  float: left
+  margin-left: 0
+  margin-right: 3px
+
+// .form-search
+
+.form-search input,
+.form-search textarea,
+.form-search select
+  display: inline-block
+  margin-bottom: 0
+
+.form-search .search-query
+  padding-left: 14px
+  padding-right: 14px
+  margin-bottom: 0
+  +border-radius(14)
+
+.form-search label
+  display: inline-block
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio
+  padding-left: 0
+  margin-bottom: 0
+  vertical-align: middle
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"]
+  float: left
+  margin-left: 0
+  margin-right: 3px
diff --git a/sass_compass/_mixins.sass b/sass_compass/_mixins.sass
new file mode 100644
index 0000000..3766426
--- /dev/null
+++ b/sass_compass/_mixins.sass
@@ -0,0 +1,153 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Mixins ===================================================
+
+// 1. ROOT 					==============================
+// 2. TYPOGRAPHY 			==============================
+
+=font-size($font-size: 16)
+  font-size: #{$font-size}px
+  font-size: #{$font-size / 10}rem
+
+=text-overflow
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+// 3. COLOUR 				==============================
+// 4. TEXTURE 				==============================
+
+// gradients
+
+=horizontal($startColor: $white, $endColor: $lightergrey)
+  background-color: $endColor
+  +background-image(linear-gradient(left, $startColor, $endColor))
+  background-repeat: repeat-x
+
+=vertical($startColor: $white, $endColor: $lightergrey)
+  background-color: $endColor
+  +background-image(linear-gradient($startColor, $endColor))
+  background-repeat: repeat-x
+
+=directional($startColor: $white, $endColor: $lightergrey, $deg: 45deg)
+  background-color: $endColor
+  +background-image(linear-gradient($deg, $startColor, $endColor))
+  background-repeat: repeat-x
+
+// @include bordered(COLOR, COLOR, COLOR, COLOR);
+
+=bordered($top-color: #eeeeee, $right-color: #eeeeee, $bottom-color: #eeeeee, $left-color: #eeeeee)
+  border-top: solid 1px $top-color
+  border-left: solid 1px $left-color
+  border-right: solid 1px $right-color
+  border-bottom: solid 1px $bottom-color
+
+// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// Leaving this in, though Compass includes box-shadow already, in case you just want to define an alpha of black. — Jina
+=drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1)
+  +box-shadow($x-axis $y-axis $blur rgba(0, 0, 0, $alpha))
+
+// 5. ELEMENTS 				==============================
+
+// @include background-alpha(VALUE VALUE);
+
+=background-alpha($color: $white, $alpha: 1)
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
+
+// Chrome Frame
+
+=chromeframe
+  margin: .2em 0
+  background: $lightgrey
+  color: $black
+  padding: .2em 0
+
+// Contain floats
+
+=clearfix
+  *zoom: 1
+  &:before,
+  &:after
+    display: table
+    content: ""
+  &:after
+    clear: both
+
+.clearfix
+  +clearfix
+
+// For image replacement
+
+=hide-text
+  text-indent: 100%
+  white-space: nowrap
+  overflow: hidden
+
+// Hide from visual and speaking browsers
+
+=hidden
+  display: none !important
+  visibility: hidden
+
+// Hide but maintain layout
+
+=invisible
+  visibility: hidden
+
+// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
+
+=resize($direction: both)
+  resize: $direction
+  overflow: auto
+
+// @include userselect(VALUE) (all, element, none, text)
+
+=user-select($select)
+  -webkit-user-select: $select
+  -moz-user-select: $select
+  -o-user-select: $select
+  user-select: $select
+
+// Hidden but available to speaking browsers
+
+=visuallyhidden
+  overflow: hidden
+  position: absolute
+  clip: rect(0 0 0 0)
+  height: 1px
+  width: 1px
+  margin: -1px
+  padding: 0
+  border: 0
+  // Make visuallyhidden focusable with a keyboard
+  &.focusable:active,
+  &.focusable:focus
+    position: static
+    clip: auto
+    height: auto
+    width: auto
+    margin: 0
+    overflow: visible
+
+// 6. LAYOUT 				==============================
+
+// @include columns(250px, 0, 24px, COLOR, solid, 1px)
+
+=columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eeeeee, $columnRuleStyle: solid, $columnRuleWidth: 1px)
+  +column-count($colcount)
+  +column-gap($colgap)
+  +column-width($colwidth)
+  +column-rule-color($columnRuleColor)
+  +column-rule-style($columnRuleStyle)
+  +column-rule-width($columnRuleWidth)
+
+//  7. VENDOR-SPECIFIC 		==============================
+//  8. MODERNIZR 			==============================
+//  9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/_modernizr.sass b/sass_compass/_modernizr.sass
new file mode 100644
index 0000000..d25fa5e
--- /dev/null
+++ b/sass_compass/_modernizr.sass
@@ -0,0 +1,51 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Modernizr ===================================================
+
+/* audio
+/* applicationcache
+/* backgroundsize
+/* borderimage
+/* borderradius
+/* boxshadow
+/* canvas
+/* canvastext
+/* cssanimations
+/* csscolumns
+/* cssgradients
+/* cssreflections
+/* csstransforms
+/* csstransforms3d
+/* csstransitions
+/* draganddrop
+/* flexbox
+/* fontface
+/* geolocation
+/* hashchange
+/* history
+/* hsla
+/* indexeddb
+/* inlinesvg
+/* localstorage
+/* multiplebgs
+/* opacity
+/* postmessage
+/* rgba
+/* sessionstorage
+/* smil
+/* svg
+/* svgclippaths
+/* textshadow
+/* touch
+/* video
+/* webgl
+/* websqldatabase
+/* websockets
+/* webworkers
diff --git a/sass_compass/_page.sass b/sass_compass/_page.sass
new file mode 100644
index 0000000..686f2a3
--- /dev/null
+++ b/sass_compass/_page.sass
@@ -0,0 +1,62 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Banner ===================================================
+
+[role="banner"]
+  margin: 0 auto
+  padding-top: $baselineheight
+  width: 90%
+  a[href="#navigation"]
+    display: block
+    position: absolute
+    top: 11px
+    right: 22px
+    width: 43px
+    height: 43px
+    white-space: nowrap
+    overflow: hidden
+    background-color: lighten($basecolor, 20%)
+    border: 1px solid lighten($basecolor, 15%)
+    +border-radius(4px)
+    color: lighten($basecolor, 75%)
+    +font-size(32)
+    line-height: 42px
+    text-align: center
+    text-decoration: none
+
+/* Navigation ===================================================
+
+[role="navigation"]
+  margin: 0 auto $baselineheight
+  width: 90%
+  background-color: lighten($basecolor, 20%)
+  border: 1px solid lighten($basecolor, 15%)
+  p
+    margin-bottom: 0
+    padding: 6px 11px
+    color: $white
+  a
+    color: $white
+
+/* Content ===================================================
+
+.content
+  margin: 0 auto
+  width: 90%
+
+/* contentinfo ===================================================
+
+[role="contentinfo"]
+  padding: $baselineheight 0
+  border-top: 3px solid lighten($basecolor, 60%)
+  small
+    display: block
+    margin: 0 auto $baselineheight
+    width: 90%
diff --git a/sass_compass/_print.sass b/sass_compass/_print.sass
new file mode 100644
index 0000000..879a9c2
--- /dev/null
+++ b/sass_compass/_print.sass
@@ -0,0 +1,72 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Print ===================================================
+
+// 1. ROOT 					==============================
+
+*
+  background: transparent !important
+  color: black !important
+  box-shadow: none !important
+  text-shadow: none !important
+  filter: none !important
+  -ms-filter: none !important
+
+@page
+  margin: 0.5cm
+
+
+// 2. TYPOGRAPHY 			==============================
+
+h2, h3
+  orphans: 3
+  widows: 3
+  page-break-after: avoid
+
+p
+  orphans: 3
+  widows: 3
+
+pre, blockquote
+  border: 1px solid $grey
+  page-break-inside: avoid
+
+abbr[title]:after
+  content: " (" attr(title) ")"
+
+// 3. COLOUR 				==============================
+
+a, a:visited
+  text-decoration: underline
+
+a[href]:after
+  content: " (" attr(href) ")"
+
+a[href^="javascript:"]:after, 
+a[href^="#"]:after
+  content: ""
+
+// 4. TEXTURE 				==============================
+
+img
+  max-width: 100% !important
+  page-break-inside: avoid
+
+thead
+  display: table-header-group
+
+tr
+  page-break-inside: avoid
+
+// 5. ELEMENTS 				==============================
+// 6. LAYOUT 				==============================
+// 7. VENDOR-SPECIFIC 		==============================
+// 8. MODERNIZR 			==============================
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/scss-compass/_reset.scss b/sass_compass/_reset.sass
similarity index 66%
rename from scss-compass/_reset.scss
rename to sass_compass/_reset.sass
index 23e5dfd..3eb8ea1 100644
--- a/scss-compass/_reset.scss
+++ b/sass_compass/_reset.sass
@@ -3,23 +3,20 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* Reset =================================================== */
+/* Reset ===================================================
 
-html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
-margin : 0;
-padding : 0;
-border : 0;
-outline : 0;
-font-size : 100%;
-vertical-align : baseline;
-background : transparent; }									
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video
+  margin: 0
+  padding: 0
+  border: 0
+  outline: 0
+  font-size: 100%
+  vertical-align: baseline
+  background: transparent
 
-article, aside, figure, footer, header, hgroup, nav, section { display : block; }
\ No newline at end of file
+article, aside, figure, footer, header, hgroup, nav, section
+  display: block
diff --git a/scss-compass/_colour.scss b/sass_compass/_site.sass
similarity index 59%
rename from scss-compass/_colour.scss
rename to sass_compass/_site.sass
index ef4b8a0..e4ab335 100644
--- a/scss-compass/_colour.scss
+++ b/sass_compass/_site.sass
@@ -3,40 +3,37 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* Colour =================================================== */
+/* Page ===================================================
 
 // 1. ROOT 					==============================
-// 2. TYPOGRAPHY 			==============================
-// 3. COLOUR 				==============================
-
-a { 
-color : $linkcolor; }
 
-a:visited { 
-color : $linkcolorvisited; }
-
-a:hover { 
-color : $linkcolorhover; }
-
-a:focus { 
-outline : thin dotted; 
-color : $linkcolorfocus; }
-
-a:hover, 
-a:active { 
-outline : 0; }
+html
+  background: $bodycolor
+  font-size: 62.5%
+  -webkit-overflow-scrolling: touch
+  -webkit-tap-highlight-color: lighten($basecolor, 75%)
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+
+body
+  margin: 0
+  padding: 0
+  width: 100%
+  background-color: transparent
+  font-family: $basefont
+  +font-size
+  line-height: $baselineheight
+  color: $textcolor
 
+// 2. TYPOGRAPHY 			==============================
+// 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
 // 7. VENDOR-SPECIFIC 		==============================
 // 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
+// 9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/_tables.sass b/sass_compass/_tables.sass
new file mode 100644
index 0000000..15f585b
--- /dev/null
+++ b/sass_compass/_tables.sass
@@ -0,0 +1,72 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Tables ===================================================
+
+table
+  width: 100%
+  max-width: 100%
+  margin-bottom: $baselineheight
+  border-collapse: collapse
+  border-spacing: 0
+  background-color: $tablebackground
+  th,
+  td
+    padding: 8px
+    vertical-align: top
+    border-top: $tableborderwidth $tableborderstyle $tableborder
+    +font-size(14)
+    line-height: $baselineheight
+    text-align: left
+  th
+    font-weight: bold
+  thead th
+    vertical-align: bottom
+  colgroup + thead tr:first-child th,
+  colgroup + thead tr:first-child td,
+  thead:first-child tr:first-child th,
+  thead:first-child tr:first-child td
+    border-top: 0
+  tbody + tbody
+    border-top: $tableborderwidth * 2 $tableborderstyle $tableborder
+  tbody tr td,
+  tbody tr th
+    +transition(background-color 0.25s 0 linear)
+  tbody tr:hover td,
+  tbody tr:hover th
+    background-color: $tablehover
+
+// CONDENSED ====================================================
+
+.table-condensed
+  th,
+  td
+    padding: 4px 5px
+
+// BORDERED ====================================================
+
+.table-bordered
+  border: $tableborderwidth $tableborderstyle $tableborder
+  border-left: 0
+  border-collapse: separate
+  *border-collapse: collapsed
+  th,
+  td
+    border-left: $tableborderwidth $tableborderstyle $tableborder
+  thead:first-child tr:first-child th,
+  tbody:first-child tr:first-child th,
+  tbody:first-child tr:first-child td
+    border-top: 0
+
+// STRIPED ====================================================
+
+.table-striped
+  tbody tr:nth-child(odd) td,
+  tbody tr:nth-child(odd) th
+    background-color: $tablestripe
diff --git a/sass_compass/_texture.sass b/sass_compass/_texture.sass
new file mode 100644
index 0000000..363a4fd
--- /dev/null
+++ b/sass_compass/_texture.sass
@@ -0,0 +1,164 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Texture ===================================================
+
+// ALERT ====================================================
+
+// For more alert styles:
+// http://twitter.github.com/bootstrap/components.html#alerts"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts"
+
+.alert
+  margin-bottom: $baselineheight
+  padding: 8px 35px 8px 14px
+  background-color: $alertcolor
+  border: $alertborderwidth $alertborderstyle $alertbordercolor
+  +border-radius(2px)
+  font-family: $basefont
+  +font-size(14)
+  color: $alerttext
+  .alert-heading
+    color: inherit
+  .close
+    position: relative
+    top: -2px
+    right: -21px
+    float: right
+    +font-size(21)
+    font-weight: bold
+    line-height: 18px
+    color: inherit
+
+.alert-success
+  background-color: $alertsuccesscolor
+  border-color: $alertsuccessborder
+  color: $alertsuccesstext
+
+.alert-warning
+  background-color: $alertwarningcolor
+  border-color: $alertwarningborder
+  color: $alertwarningtext
+
+.alert-error
+  background-color: $alerterrorcolor
+  border-color: $alerterrorborder
+  color: $alerterrortext
+
+.alert-inverse
+  background-color: $alertinversecolor
+  border-color: $alertinverseborder
+  color: $alertinversetext
+
+// alert block
+
+.alert-block
+  padding-top: 14px
+  padding-bottom: 14px
+  .alert-heading
+    margin-bottom: $baselineheight / 8
+    font-size: inherit
+    font-weight: bold
+  > p,
+  > ul
+    margin-bottom: 0
+  p + p
+    margin-top: 5px
+
+// BADGES ====================================================
+
+.badge
+  padding: 1px 9px 2px
+  +font-size(12)
+  font-weight: bold
+  white-space: nowrap
+  color: $badgecolor
+  background-color: $badgebackground
+  +border-radius(9px)
+  +transition(background-color 0.25s 0 linear)
+  &:hover
+    color: $badgecolor
+    text-decoration: none
+    cursor: pointer
+
+.badge-error
+  background-color: $errorcolor
+  color: $white
+  &:hover
+    background-color: darken($errorcolor, 20%)
+    color: $white
+
+.badge-warning
+  background-color: $warningcolor
+  color: $white
+  &:hover
+    background-color: darken($warningcolor, 20%)
+    color: $white
+
+.badge-success
+  background-color: $successcolor
+  color: $white
+  &:hover
+    background-color: darken($successcolor, 20%)
+    color: $white
+
+.badge-info
+  background-color: $infocolor
+  color: darken($infocolor, 50%)
+  &:hover
+    background-color: darken($infocolor, 20%)
+
+.badge-inverse
+  background-color: $inverscolor
+  color: $white
+  &:hover
+    background-color: darken($inverscolor, 20%)
+    color: $white
+
+// GRADIENTS ====================================================
+
+=greygrad
+  +vertical($white, darken($lightergrey, 5%))
+
+=basegrad
+  +vertical($basecolor, darken($basecolor, 10%))
+
+=infograd
+  +vertical($infocolor, darken($infocolor, 10%))
+
+=inversegrad
+  +vertical($inverscolor, darken($inverscolor, 10%))
+
+=successgrad
+  +vertical($successcolor, darken($successcolor, 10%))
+
+=warninggrad
+  +vertical($warningcolor, darken($warningcolor, 10%))
+
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins
+
+// WELL ====================================================
+
+.well
+  min-height: 21px
+  padding: 11px
+  margin-bottom: $baselineheight
+  background-color: $wellbackground
+  border: $wellborderwidth $wellborderstyle $wellbordercolor
+  +border-radius(4px)
+  +box-shadow(inset 0 1px $wellshadowblur $wellshadow)
+  p:last-child
+    margin-bottom: 0
+
+.well-large
+  padding: 22px
+
+.well-small
+  padding: 6px
+  +border-radius(2px)
diff --git a/sass_compass/_typography.sass b/sass_compass/_typography.sass
new file mode 100644
index 0000000..56400ae
--- /dev/null
+++ b/sass_compass/_typography.sass
@@ -0,0 +1,200 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Typography ===================================================
+
+// HEADINGS ====================================================
+
+#{headings()}
+  margin: 0
+  font-family: $baseheadingfont
+  font-weight: $baseheadingfontweight
+  color: $baseheadingfontcolor
+  text-rendering: optimizelegibility
+
+h1 small,
+h2 small
+  font-weight: normal
+  color: $lightgrey
+
+h1,
+.h1
+  margin-bottom: $baselineheight / 2
+  +font-size(32)
+  line-height: 1.2
+
+h2,
+.h2
+  margin-bottom: $baselineheight / 2
+  +font-size(24)
+  line-height: 1.2
+
+h3,
+.h3
+  margin-bottom: $baselineheight / 1.5
+  +font-size(21)
+  line-height: 1.3
+
+h4,
+.h4
+  margin-bottom: $baselineheight
+  +font-size(18)
+  line-height: 1.25
+
+h5,
+.h5
+  +font-size(16)
+  margin-bottom: $baselineheight
+
+h6,
+.h6
+  margin-bottom: $baselineheight
+  +font-size(14)
+  font-weight: normal
+  letter-spacing: 1px
+  text-transform: uppercase
+
+// header
+
+.header
+  #{headings(3)}
+    float: left
+    margin-right: $gutterwidth
+  a
+    display: block
+    position: relative
+    top: 6px
+    float: right
+    padding: 4px 12px
+    +font-size(14)
+    background-color: lighten($basecolor, 75%)
+  &:hover
+    background-color: lighten($basecolor, 75%)
+
+.header .a-rss,
+.header .a-rss:hover
+  float: left
+  width: 16px
+  height: 16px
+  padding: 0
+  background: transparent url(../img/a-rss.png) no-repeat 0 0
+  +hide-text
+
+// TYPOGRAPHY ====================================================
+
+p,
+ol,
+ul,
+dl,
+address
+  margin-bottom: $baselineheight
+  +font-size(14)
+  line-height: $baselineheight
+
+small
+  +font-size(14)
+
+ul,
+ol
+  margin: 0 0 $baselineheight #{-$gutterwidth}
+  padding: 0 0 0 $gutterwidth
+
+li ul,
+li ol
+  margin: 0
+  +font-size(16)
+
+// blockquote
+
+blockquote
+  margin: 0 0 $baselineheight #{-$gutterwidth}
+  padding-left: $gutterwidth
+  border-left: 2px solid $bordercolor
+  font-family: $altfont
+  font-style: normal
+
+q
+  quotes: none
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after
+  content: ''
+  content: none
+
+cite
+  font-style: normal
+
+// definition lists
+
+dl,
+dd
+  margin-bottom: $baselineheight
+
+dt
+  font-weight: bold
+
+.dl-horizontal
+  dt
+    float: left
+    clear: left
+    width: 20.25%
+    text-align: right
+  dd
+    margin-left: 22.78%
+
+// text-level
+
+abbr[title]
+  border-bottom: 1px dotted $bordercolor
+  cursor: help
+
+b, strong
+  font-weight: bold
+
+dfn
+  font-style: italic
+
+ins
+  background-color: lighten($basecolor, 75%)
+  color: $textcolor
+  text-decoration: none
+
+mark
+  background-color: lighten($basecolor, 75%)
+  color: $textcolor
+  font-style: italic
+  font-weight: bold
+
+pre,
+code,
+kbd,
+samp
+  font-family: $codefont
+  +font-size(14)
+  line-height: $baselineheight
+
+pre
+  white-space: pre
+  white-space: pre-wrap
+  word-wrap: break-word
+
+sub,
+sup
+  position: relative
+  +font-size(12)
+  line-height: 0
+  vertical-align: baselineheight
+
+sup
+  top: -0.5em
+
+sub
+  bottom: -0.25em
diff --git a/sass_compass/_variables.sass b/sass_compass/_variables.sass
new file mode 100644
index 0000000..c958809
--- /dev/null
+++ b/sass_compass/_variables.sass
@@ -0,0 +1,145 @@
+// ==========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+/* Variables ===================================================
+
+// greyscale
+
+$black: rgb(0, 0, 0)
+$darkgrey: lighten($black, 25%)
+$grey: lighten($black, 50%)
+$lightgrey: lighten($black, 75%)
+$lightergrey: lighten($black, 90%)
+$white: rgb(255, 255, 255)
+
+// 1. ROOT 					==============================
+
+$bodycolor: $white
+$textcolor: black
+
+// 2. TYPOGRAPHY 			==============================
+
+$basefont: "Helvetica Neue", Helvetica, Arial, sans-serif
+$basefontsize: 16
+$baselineheight: 1.5em
+$baseheadingfont: inherit
+$baseheadingfontweight: bold
+$baseheadingfontcolor: inherit
+
+$altfont: Cambria, Georgia, Times, "Times New Roman"
+$altlineheight: 1.35em
+
+$codefont: Monaco, Courier New, monospace
+
+// 3. COLOUR 				==============================
+
+$basecolor: rgb(45, 53, 62)
+$compcolor: adjust-hue($basecolor, 180)
+$bordercolor: lighten($basecolor, 60%)
+
+// Links
+
+$linkcolor: rgb(1, 53, 104)
+$linkcolorhover: darken($linkcolor, 10)
+$linkcolorvisited: darken($linkcolorhover, 10)
+$linkcolorfocus: darken($linkcolorvisited, 10)
+
+// colour palettes
+
+$alertcolor: rgb(252, 248, 227)
+$errorcolor: rgb(218, 79, 73)
+$infocolor: rgb(217, 237, 247)
+$inverscolor: rgb(65, 65, 65)
+$successcolor: rgb(91, 183, 91)
+$warningcolor: rgb(250, 167, 50)
+
+// 4. TEXTURE 				==============================
+
+// alert
+
+$alertbordercolor: darken($alertcolor, 20%)
+$alertborderwidth: 1px
+$alertborderstyle: solid
+$alerttext: darken($alertcolor, 60%)
+
+// alert-error
+$alerterrorcolor: lighten($errorcolor, 30%)
+$alerterrorborder: lighten($errorcolor, 20%)
+$alerterrortext: $errorcolor
+
+// alert-info
+$alertinfocolor: $infocolor
+$alertinfoborder: lighten($infocolor, 20%)
+$alertinfotext: darken($infocolor, 50%)
+
+// alert-inverse
+$alertinversecolor: $inverscolor
+$alertinverseborder: $black
+$alertinversetext: $white
+
+// alert-success
+$alertsuccesscolor: lighten($successcolor, 30%)
+$alertsuccessborder: lighten($successcolor, 20%)
+$alertsuccesstext: darken($successcolor, 20%)
+
+// alert-warning
+$alertwarningcolor: lighten($warningcolor, 30%)
+$alertwarningborder: lighten($warningcolor, 20%)
+$alertwarningtext: darken($warningcolor, 20%)
+
+// badges
+
+$badgebackground: $lightergrey
+$badgecolor: $grey
+
+// buttons
+
+$buttonbackground: $lightergrey
+$buttonbordercolor: darken($buttonbackground, 10%)
+$buttonbottombordercolor: darken($buttonbordercolor, 10%)
+$buttoncolor: $darkgrey
+$buttonborderwidth: 1px
+$buttonborderstyle: solid
+
+// boxes (well)
+
+$wellbackground: lighten($basecolor, 75%)
+$wellbordercolor: darken($wellbackground, 20%)
+$wellborderwidth: 1px
+$wellborderstyle: solid
+$wellshadow: darken($wellbackground, 10%)
+$wellshadowblur: 10px
+
+// tables
+
+$tablebackground: transparent
+$tablestripe: lighten($basecolor, 60%)
+$tablehover: lighten($basecolor, 50%)
+$tableborder: lighten($basecolor, 40%)
+$tableborderwidth: 1px
+$tableborderstyle: solid
+
+// forms
+
+$inputbackground: $white
+$inputborder: lighten($basecolor, 40%)
+$inputborderwidth: 1px
+$inputborderstyle: solid
+$inputhover: lighten($basecolor, 20%)
+$inputfocus: $basecolor, 40%
+$placeholdercolor: $lightgrey
+
+// 6. LAYOUT 				==============================
+
+$baseline: $baselineheight
+$gutterwidth: 24px
+
+//  7. VENDOR-SPECIFIC 		==============================
+//  8. MODERNIZR 			==============================
+//  9. TEMPLATE SPECIFICS 	==============================
diff --git a/sass_compass/upstarts/320andup-modules/_upstart.sass b/sass_compass/upstarts/320andup-modules/_upstart.sass
new file mode 100644
index 0000000..9af81c5
--- /dev/null
+++ b/sass_compass/upstarts/320andup-modules/_upstart.sass
@@ -0,0 +1,103 @@
+// ==========================================================
+
+/* 320 and Up
+/* Modules upstart
+/* Version: 1.0
+/* Author: Andy Clarke
+/* URL: http://stuffandnonsense.co.uk/projects/320andup
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// ==========================================================
+
+.grid
+  margin-bottom: $baseline
+  border-bottom: 1px dashed lighten($basecolor, 60%)
+
+.grid:last-child
+  margin-bottom: 0
+  border-bottom-width: 0
+
+.furniture-letter
+  overflow: hidden
+
+.furniture-letter span
+  display: block
+  float: left
+  margin: 0 12px 0 0
+  height: 44px
+  width: 44px
+  background-color: $basecolor
+  color: $white
+  +font-size(32)
+  font-weight: bold
+  line-height: 44px
+  text-align: center
+
+// 480px
+@media only screen and (min-width: 480px)
+  /* Styles
+
+// 600px
+@media only screen and (min-width: 600px)
+  /* Styles
+
+// 768px
+@media only screen and (min-width: 768px)
+  // .grids-two
+  .grids-two .grid
+    width: 43.03%
+    margin-bottom: 0
+    border-bottom-width: 0
+  .grids-two .grid-1
+    float: left
+  .grids-two .grid-2
+    float: right
+  // grids-three
+  .grids-three .grid-a
+    float: left
+    width: 31.64%
+    margin-right: 2.53%
+  // grids-four
+  .grids-four .grid-a
+    float: left
+    width: 31.64%
+    margin-right: 2.53%
+
+// 992px
+@media only screen and (min-width: 992px)
+  // grids-three
+  .grids-three .grid
+    float: left
+    width: 31.64%
+    margin: 0 2.53% 0 0
+    border-bottom-width: 0
+  .grids-three .grid-3
+    float: right
+    margin-right: 0
+  .grids-three .grid .grid-a
+    float: none
+    width: 100%
+    margin-right: 0
+    margin-bottom: $baseline / 2
+  // grids-four
+  .grids-four .grid
+    float: left
+    width: 20.25%
+    margin: 0 6.32% 0 0
+    border-bottom-width: 0
+  .grids-four .grid-4
+    float: right
+    margin-right: 0
+  .grids-four .grid .grid-a
+    float: none
+    width: 100%
+    margin-right: 0
+
+// 1382px
+@media only screen and (min-width: 1382px)
+  /* Styles
+
+// 2x
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
+  /* Styles
diff --git a/scss-compass/upstarts/320andup-modules/example.html b/sass_compass/upstarts/320andup-modules/example.html
old mode 100644
new mode 100755
similarity index 90%
rename from scss-compass/upstarts/320andup-modules/example.html
rename to sass_compass/upstarts/320andup-modules/example.html
index 7400eac..87abbb7
--- a/scss-compass/upstarts/320andup-modules/example.html
+++ b/sass_compass/upstarts/320andup-modules/example.html
@@ -6,10 +6,6 @@
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-http://sushiandrobots.com
-
 License: http://creativecommons.org/licenses/MIT/
 -->
 
@@ -44,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.0.6.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
@@ -151,13 +147,12 @@ <h2>Four</h2>
 </div><!-- / content -->
 
 <footer role="contentinfo">
-<small>320 and Up, a Fashionably Flexible responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
-<small>Sass Port by <a href="http://sushiandrobots.com/">Jina Bolton</a></small>
-<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://lessframework.com/">Less Framework 4</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://creativecommons.org/licenses/MIT/">Creative Commons MIT</a> license.</small>
+<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
+<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
 </footer>
 
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.1.min.js"><\/script>')</script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.2.min.js"><\/script>')</script>
 
 <script src="../../../js/plugins.js"></script>
 <script src="../../../js/script.js"></script>
diff --git a/scss-compass/upstarts/320andup-modules/index.html b/sass_compass/upstarts/320andup-modules/index.html
old mode 100644
new mode 100755
similarity index 87%
rename from scss-compass/upstarts/320andup-modules/index.html
rename to sass_compass/upstarts/320andup-modules/index.html
index 0724832..8c2a79a
--- a/scss-compass/upstarts/320andup-modules/index.html
+++ b/sass_compass/upstarts/320andup-modules/index.html
@@ -6,10 +6,6 @@
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-http://sushiandrobots.com/
-
 License: http://creativecommons.org/licenses/MIT/
 -->
 
@@ -44,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.0.6.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 <meta http-equiv="cleartype" content="on">
@@ -122,13 +118,12 @@ <h2>Four columns</h2>
 </div><!-- / content -->
 
 <footer role="contentinfo">
-<small>320 and Up, a Fashionably Flexible responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
-<small>Sass Port by <a href="http://sushiandrobots.com/">Jina Bolton</a></small>
-<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://lessframework.com/">Less Framework 4</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://creativecommons.org/licenses/MIT/">Creative Commons MIT</a> license.</small>
+<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
+<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
 </footer>
 
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="../../js/jquery-1.7.1.min.js"><\/script>')</script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.2.min.js"><\/script>')</script>
 
 <script src="../../../js/plugins.js"></script>
 <script src="../../../js/script.js"></script>
diff --git a/sass_compass/upstarts/320andup-panels/_upstart.sass b/sass_compass/upstarts/320andup-panels/_upstart.sass
new file mode 100644
index 0000000..aea75f6
--- /dev/null
+++ b/sass_compass/upstarts/320andup-panels/_upstart.sass
@@ -0,0 +1,60 @@
+// ==========================================================
+
+/* 320 and Up
+/* Panels Upstart
+/* Version: 1.0
+/* Author: Andy Clarke
+/* URL: http://stuffandnonsense.co.uk/projects/320andup
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+
+// HEADS UP: 320 and Up Panels Upstart is dependent on
+// grid styles from Modules Upstart. If you’re importing it
+// you’re ready to go. Otherwise, import it or copy and paste
+// its styles here.
+
+// ==========================================================
+
+// Full width panel containers
+
+.full
+  margin-bottom: $baseline
+  padding: $baseline
+  background-color: lighten($basecolor, 75%)
+  border-top: 2px solid lighten($basecolor, 60%)
+  border-bottom: 2px solid lighten($basecolor, 60%)
+
+.full .grids
+  width: 90%
+  margin: 0 auto
+  padding: $baseline 0
+
+// 480px
+@media only screen and (min-width: 480px)
+  /* Styles
+
+// 600px
+@media only screen and (min-width: 600px)
+  /* Styles
+
+// 768px
+@media only screen and (min-width: 768px)
+  // Extra wide grid units
+  .special .grids-three .grid-a,
+  .special .grids-four .grid-a
+    width: 43.03%
+
+// 992px
+@media only screen and (min-width: 992px)
+  // Extra wide grid units
+  .special .grids-three .grid-a,
+  .special .grids-four .grid-a
+    width: 100%
+
+// 1382px
+@media only screen and (min-width: 1382px)
+  /* Styles
+
+// 2x
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
+  /* Styles
diff --git a/scss-compass/upstarts/320andup-panels/index.html b/sass_compass/upstarts/320andup-panels/index.html
old mode 100644
new mode 100755
similarity index 91%
rename from scss-compass/upstarts/320andup-panels/index.html
rename to sass_compass/upstarts/320andup-panels/index.html
index ce30838..0e7b377
--- a/scss-compass/upstarts/320andup-panels/index.html
+++ b/sass_compass/upstarts/320andup-panels/index.html
@@ -6,10 +6,6 @@
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com
-
 License: http://creativecommons.org/licenses/MIT/
 -->
 
@@ -44,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.0.6.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
@@ -202,13 +198,12 @@ <h3 class="entry-title h4"><a href="#">Entry title</a></h3>
 </div><!-- / full -->
 
 <footer role="contentinfo">
-<small>320 and Up, a Fashionably Flexible responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
-<small>Sass Port by <a href="http://sushiandrobots.com/">Jina Bolton</a></small>
-<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://lessframework.com/">Less Framework 4</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://creativecommons.org/licenses/MIT/">Creative Commons MIT</a> license.</small>
+<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
+<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
 </footer>
 
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.1.min.js"><\/script>')</script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="../../../js/jquery-1.7.2.min.js"><\/script>')</script>
 
 <script src="../../../js/plugins.js"></script>
 <script src="../../../js/script.js"></script>
diff --git a/scss-compass/320andup.scss b/scss-compass/320andup.scss
deleted file mode 100644
index f6ee4fa..0000000
--- a/scss-compass/320andup.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-/* ============================================================
-
-320 and Up by Andy Clarke
-Version: 3.0
-URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com/
-
-Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-============================================================ */
-
-// 1. ROOT 					==============================
-
-// Compass
-@import "compass";
-
-// CSS reset
-@import "reset";
-
-// Variables and mixins
-@import "variables";
-@import "mixins";
-
-// Site level styles (html, body)
-@import "site";
-
-// 2. TYPOGRAPHY 			==============================
-
-// Block level (h1, p) and text-level (em, strong) type
-@import "typography";
-
-// 3. COLOUR 				==============================
-
-// Colour interaction semantics
-@import "colour";
-
-// 4. TEXTURE 				==============================
-
-// Alerts, badges, boxes and gradients
-@import "texture";
-
-// Font Awesome icon fonts (optional)
-@import "font-awesome";
-
-// 5. ELEMENTS 				==============================
-
-// Figures, images and other elements
-@import "elements";
-
-// Standard foem controls
-@import "forms";
-
-// Button styles (optional)
-@import "buttons";
-
-// Tables
-@import "tables";
-
-// 6. LAYOUT 			==============================
-
-// Page level layout styles (banner, navigation, content, contentinfo)
-@import "page";
-
-//  7. VENDOR-SPECIFIC 		==============================
-//  8. MODERNIZR 			==============================
-
-@import "modernizr";
-
-//  9. TEMPLATE SPECIFICS 	==============================
-//  10. MEDIA QUERIES 		==============================
-
-@media print {
-@import "print";
-}
-
-// 480px
-@media only screen and (min-width: 480px) {
-@import "480";
-}
-
-// 600px
-@media only screen and (min-width: 600px) {
-@import "600";
-}
-
-// 768px
-@media only screen and (min-width: 768px) {
-@import "768";
-}
-
-// 992px
-@media only screen and (min-width: 992px) {
-@import "992";
-}
-
-// 1382px
-@media only screen and (min-width: 1382px) {
-@import "1382";
-}
-
-// 2x
-@media
-only screen and (-webkit-min-device-pixel-ratio: 1.5), 
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {}
-
-//  11. UPSTARTS 			==============================
-
-@import "upstarts/320andup-modules/upstart";
-@import "upstarts/320andup-panels/upstart";
\ No newline at end of file
diff --git a/scss-compass/_buttons.scss b/scss-compass/_buttons.scss
deleted file mode 100644
index 0b4b714..0000000
--- a/scss-compass/_buttons.scss
+++ /dev/null
@@ -1,209 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Buttons =================================================== */
-
-.btn {
-display : inline-block;
-*display : inline;
-/* IE7 inline-block hack */
-*zoom : 1;
-padding : 6px 11px 6px;
-margin-bottom : 0;
-@include sans-serif;
-@include font-size(12);
-font-weight : bold;
-line-height : 1.5;
-color : $darkgrey;
-text-align : center;
-vertical-align : middle;
-background-color : $lightergrey;
-@include greygrad;
-border : 1px solid darken($lightergrey, 10%);
-border-bottom-color : darken($lightergrey, 20%);
-@include border-radius(4px);
-@include box-shadow(0 1px 0 rgba(255,255,255,.25) inset);
-cursor : pointer;
-*margin-left : .3em; 
-
-&:visited,
-&:hover {
-color : $darkgrey;
-text-decoration : none; }
-}
-
-.btn:first-child {
-*margin-left : 0; }
-
-// danger
-
-.btn-danger {
-background-color : $dangercolor;
-@include dangergrad;
-border : 1px solid darken($dangercolor, 30%);
-border-bottom-color : darken($dangercolor, 25%);
-color : lighten($dangercolor, 50%); 
-
-&:visited,
-&:hover {
-color : $white; }
-}
-
-// disabled
-
-.btn-disabled {
-background-color : $lightergrey;
-@include greygrad;
-border : 1px solid darken($lightgrey, 15%);
-border-bottom-color : darken($lightgrey, 20%); 
-color : darken($lightgrey, 50%);
-text-shadow : 0 1px 1px rgba(255,255,255,.5); 
-
-&:visited,
-&:hover {
-color : darken($lightgrey, 50%); }
-}
-
-// info
-
-.btn-info {
-background-color : $infocolor;
-@include infograd;
-border : 1px solid darken($infocolor, 15%);
-border-bottom-color : darken($infocolor, 20%); 
-color : darken($infocolor, 50%);
-text-shadow : 0 1px 1px rgba(255,255,255,.5); 
-
-&:visited,
-&:hover {
-color : darken($infocolor, 50%); }
-}
-
-// inverse
-
-.btn-inverse {
-background-color : $inverscolor;
-@include inversegrad;
-border : 1px solid darken($inverscolor, 15%);
-border-bottom-color : darken($inverscolor, 20%); 
-color : $white; 
-
-&:visited,
-&:hover {
-color : $white; }
-}
-
-// primary
-
-.btn-primary {
-background-color : $linkcolor;
-@include linkgrad;
-border : 1px solid darken($linkcolor, 30%);
-border-bottom-color : darken($linkcolor, 25%);
-color : $white; 
-
-&:visited,
-&:hover {
-color : $white; }
-}
-
-// success
-
-.btn-success {
-background-color : $successcolor; 
-@include successgrad;
-border : 1px solid darken($successcolor, 15%);
-border-bottom-color : darken($successcolor, 20%); }
-
-// warning
-
-.btn-warning {
-background-color : $warningcolor;
-@include warninggrad;
-border : 1px solid darken($warningcolor, 15%);
-border-bottom-color : darken($warningcolor, 20%); }
-
-// sizes
-
-.btn-extlarge {
-padding : 11px 22px;
-background-color : $basecolor;
-@include basegrad;
-border : 1px solid darken($basecolor, 10%);
-border-bottom-color : darken($basecolor, 15%);
-@include font-size(21);
-font-weight : 200;
-letter-spacing : 1px; 
-line-height : normal;
-color : $white;
-@include border-radius(4px); }
-
-a.btn-extlarge,
-a.btn-extlarge:hover {
-color : $white; }
-
-.btn.btn-large {
-*padding-top : 7px;
-*padding-bottom : 7px; }
-
-.btn-large {
-padding : 11px 22px;
-@include font-size(14);
-line-height : normal;
-@include border-radius(4px); }
-
-.btn-small {
-padding : 6px 10px;
-@include font-size(11); 
-line-height : 16px; }
-
-.btn-mini {
-padding : 3px 5px;
-@include font-size(11); 
-line-height : 14px; }
-
-.btn-group {
-position : relative;
-*zoom : 1;
-*margin-left : .3em;
-margin-bottom : $baseline; }
-
-.btn-group .btn {
-position : relative;
-float : left;
-margin-left : -1px;
-@include border-radius(0); }
-
-.btn-group .btn:first-child {
-margin-left: 0;
-@include border-left-radius(2px); } 
-
-.btn-group .btn:last-child {
-@include border-right-radius(2px); }
-
-.btn-group .btn.large:first-child {
-margin-left : 0;
-@include border-left-radius(4px); }
-
-.btn-group .btn.large:last-child {
-@include border-right-radius(4px); }
-
-.btn-toolbar {
-clear : both;
-margin-top : $baseline / 2;
-margin-bottom : $baseline / 2; }
-
-.btn-toolbar .btn-group {
-display : inline-block;
-*display : inline;
-*zoom : 1; }
\ No newline at end of file
diff --git a/scss-compass/_elements.scss b/scss-compass/_elements.scss
deleted file mode 100644
index 588e45e..0000000
--- a/scss-compass/_elements.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Elements =================================================== */
-
-// FIGURES & IMAGES =============================================================================
-
-img {
-max-width : 100%;
-border-width : 0; 
-vertical-align : middle; 
--ms-interpolation-mode : bicubic; }
-
-svg:not(:root) {
-overflow : hidden; }
-
-figure {
-margin-bottom : $baseline; }
-
-figure img {
-margin-bottom : $baseline / 4; }
-
-figcaption {
-display : block;
-font-weight : normal;
-@include font-size(14); 
-color : $grey; }
-
-// list-bordered
-
-.list-bordered {
-list-style-type : none; 
-margin : 0 0 $baseline 0;
-padding : 0; }
-
-.list-bordered li {
-margin-bottom : $baseline / 4; 
-padding-bottom : $baseline / 4; 
-border-bottom : 1px dashed lighten($basecolor, 60%); }
-
-.list-bordered li:last-child {
-margin-bottom : 0; 
-padding-bottom : 0; 
-border-bottom-width : 0; }
\ No newline at end of file
diff --git a/scss-compass/_extends.scss b/scss-compass/_extends.scss
deleted file mode 100644
index b738338..0000000
--- a/scss-compass/_extends.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// =================================================
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-// =================================================
-
-// =================================================
-// Extends
-// =================================================
-
-
-
-// Contain floats
-.clearfix {
-  &:before,
-  &:after {
-    display: table;
-    content : "";
-  }
-
-  &:after {
-    clear : both;
-  }
-
-  *zoom : 1;
-}
\ No newline at end of file
diff --git a/scss-compass/_font-awesome.scss b/scss-compass/_font-awesome.scss
deleted file mode 100755
index d3e5774..0000000
--- a/scss-compass/_font-awesome.scss
+++ /dev/null
@@ -1,240 +0,0 @@
-// ==========================================================
-
-/* Font Awesome: http://fortawesome.github.com/Font-Awesome/
-
-License
--------------------------------------------------------
-The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
-http://creativecommons.org/licenses/by/3.0/ A mention of
-'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
-source code is considered acceptable attribution (most common on the web).
-If human readable source code is not available to the end user, a mention in
-an 'About' or 'Credits' screen is considered acceptable (most common in desktop
-or mobile software). */
-
-// ==========================================================
-
-@font-face {
-font-family: 'FontAwesome';
-src: url('../fonts/fontawesome-webfont.eot');
-src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
-url('../fonts/fontawesome-webfont.woff') format('woff'),
-url('../fonts/fontawesome-webfont.ttf') format('truetype'),
-url('../fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
-url('../fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
-font-weight : normal;
-font-style : normal; }
-
-[class^="icon-"],
-[class*=" icon-"] {
-display : inline;
-width : auto;
-height : auto;
-line-height : inherit;
-vertical-align : baseline;
-background-image : none;
-background-position : 0 0;
-background-repeat : repeat; }
-
-li[class^="icon-"],
-li[class*=" icon-"] {
-display : block; }
-
-[class^="icon-"]:before,
-[class*=" icon-"]:before {
-font-family : FontAwesome;
-font-weight : normal;
-font-style : normal;
-display : inline-block;
-text-decoration : inherit; }
-
-a [class^="icon-"],
-a [class*=" icon-"] {
-display : inline-block;
-text-decoration : inherit; }
-
-/* makes the font 33% larger relative to the icon container */
-.icon-large:before {
-vertical-align : top;
-font-size : 4/3em; }
-
-.btn {
-[class^="icon-"],
-[class*=" icon-"] {
-/* keeps button heights with and without icons the same */
-line-height : .9em; }
-}
-
-li {
-[class^="icon-"],
-[class*=" icon-"] {
-display : inline-block;
-width : 1.25em;
-text-align : center; }
-
-.icon-large[class^="icon-"],
-.icon-large[class*=" icon-"]  {
-/* 1.5 increased font size for icon-large * 1.25 width */
-width : 1.5*1.25em; }
-}
-
-li[class^="icon-"],
-li[class*=" icon-"] {
-margin-left: 0;
-list-style-type: none;
-
-&:before {
-text-indent: -2em;
-text-align: center;
-}
-&.icon-large:before {
-text-indent: -4/3em;
-}
-}
-
-/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-    readers do not read off random characters that represent icons */
-    
-.icon-glass:before              { content: "\f000"; }
-.icon-music:before              { content: "\f001"; }
-.icon-search:before             { content: "\f002"; }
-.icon-envelope:before           { content: "\f003"; }
-.icon-heart:before              { content: "\f004"; }
-.icon-star:before               { content: "\f005"; }
-.icon-star-empty:before         { content: "\f006"; }
-.icon-user:before               { content: "\f007"; }
-.icon-film:before               { content: "\f008"; }
-.icon-th-large:before           { content: "\f009"; }
-.icon-th:before                 { content: "\f00a"; }
-.icon-th-list:before            { content: "\f00b"; }
-.icon-ok:before                 { content: "\f00c"; }
-.icon-remove:before             { content: "\f00d"; }
-.icon-zoom-in:before            { content: "\f00e"; }
-.icon-zoom-out:before           { content: "\f010"; }
-.icon-off:before                { content: "\f011"; }
-.icon-signal:before             { content: "\f012"; }
-.icon-cog:before                { content: "\f013"; }
-.icon-trash:before              { content: "\f014"; }
-.icon-home:before               { content: "\f015"; }
-.icon-file:before               { content: "\f016"; }
-.icon-time:before               { content: "\f017"; }
-.icon-road:before               { content: "\f018"; }
-.icon-download-alt:before       { content: "\f019"; }
-.icon-download:before           { content: "\f01a"; }
-.icon-upload:before             { content: "\f01b"; }
-.icon-inbox:before              { content: "\f01c"; }
-.icon-play-circle:before        { content: "\f01d"; }
-.icon-repeat:before             { content: "\f01e"; }
-/* \f020 is not a valid unicode character. all shifted one down */
-.icon-refresh:before            { content: "\f021"; }
-.icon-list-alt:before           { content: "\f022"; }
-.icon-lock:before               { content: "\f023"; }
-.icon-flag:before               { content: "\f024"; }
-.icon-headphones:before         { content: "\f025"; }
-.icon-volume-off:before         { content: "\f026"; }
-.icon-volume-down:before        { content: "\f027"; }
-.icon-volume-up:before          { content: "\f028"; }
-.icon-qrcode:before             { content: "\f029"; }
-.icon-barcode:before            { content: "\f02a"; }
-.icon-tag:before                { content: "\f02b"; }
-.icon-tags:before               { content: "\f02c"; }
-.icon-book:before               { content: "\f02d"; }
-.icon-bookmark:before           { content: "\f02e"; }
-.icon-print:before              { content: "\f02f"; }
-.icon-camera:before             { content: "\f030"; }
-.icon-font:before               { content: "\f031"; }
-.icon-bold:before               { content: "\f032"; }
-.icon-italic:before             { content: "\f033"; }
-.icon-text-height:before        { content: "\f034"; }
-.icon-text-width:before         { content: "\f035"; }
-.icon-align-left:before         { content: "\f036"; }
-.icon-align-center:before       { content: "\f037"; }
-.icon-align-right:before        { content: "\f038"; }
-.icon-align-justify:before      { content: "\f039"; }
-.icon-list:before               { content: "\f03a"; }
-.icon-indent-left:before        { content: "\f03b"; }
-.icon-indent-right:before       { content: "\f03c"; }
-.icon-facetime-video:before     { content: "\f03d"; }
-.icon-picture:before            { content: "\f03e"; }
-.icon-pencil:before             { content: "\f040"; }
-.icon-map-marker:before         { content: "\f041"; }
-.icon-adjust:before             { content: "\f042"; }
-.icon-tint:before               { content: "\f043"; }
-.icon-edit:before               { content: "\f044"; }
-.icon-share:before              { content: "\f045"; }
-.icon-check:before              { content: "\f046"; }
-.icon-move:before               { content: "\f047"; }
-.icon-step-backward:before      { content: "\f048"; }
-.icon-fast-backward:before      { content: "\f049"; }
-.icon-backward:before           { content: "\f04a"; }
-.icon-play:before               { content: "\f04b"; }
-.icon-pause:before              { content: "\f04c"; }
-.icon-stop:before               { content: "\f04d"; }
-.icon-forward:before            { content: "\f04e"; }
-
-.icon-fast-forward:before       { content: "\f050"; }
-.icon-step-forward:before       { content: "\f051"; }
-.icon-eject:before              { content: "\f052"; }
-.icon-chevron-left:before       { content: "\f053"; }
-.icon-chevron-right:before      { content: "\f054"; }
-.icon-plus-sign:before          { content: "\f055"; }
-.icon-minus-sign:before         { content: "\f056"; }
-.icon-remove-sign:before        { content: "\f057"; }
-.icon-ok-sign:before            { content: "\f058"; }
-.icon-question-sign:before      { content: "\f059"; }
-.icon-info-sign:before          { content: "\f05a"; }
-.icon-screenshot:before         { content: "\f05b"; }
-.icon-remove-circle:before      { content: "\f05c"; }
-.icon-ok-circle:before          { content: "\f05d"; }
-.icon-ban-circle:before         { content: "\f05e"; }
-
-.icon-arrow-left:before         { content: "\f060"; }
-.icon-arrow-right:before        { content: "\f061"; }
-.icon-arrow-up:before           { content: "\f062"; }
-.icon-arrow-down:before         { content: "\f063"; }
-.icon-share-alt:before          { content: "\f064"; }
-.icon-resize-full:before        { content: "\f065"; }
-.icon-resize-small:before       { content: "\f066"; }
-.icon-plus:before               { content: "\f067"; }
-.icon-minus:before              { content: "\f068"; }
-.icon-asterisk:before           { content: "\f069"; }
-.icon-exclamation-sign:before   { content: "\f06a"; }
-.icon-gift:before               { content: "\f06b"; }
-.icon-leaf:before               { content: "\f06c"; }
-.icon-fire:before               { content: "\f06d"; }
-.icon-eye-open:before           { content: "\f06e"; }
-.icon-eye-close:before          { content: "\f070"; }
-.icon-warning-sign:before       { content: "\f071"; }
-.icon-plane:before              { content: "\f072"; }
-.icon-calendar:before           { content: "\f073"; }
-.icon-random:before             { content: "\f074"; }
-.icon-comment:before            { content: "\f075"; }
-.icon-magnet:before             { content: "\f076"; }
-.icon-chevron-up:before         { content: "\f077"; }
-.icon-chevron-down:before       { content: "\f078"; }
-.icon-retweet:before            { content: "\f079"; }
-.icon-shopping-cart:before      { content: "\f07a"; }
-.icon-folder-close:before       { content: "\f07b"; }
-.icon-folder-open:before        { content: "\f07c"; }
-.icon-resize-vertical:before    { content: "\f07d"; }
-.icon-resize-horizontal:before  { content: "\f07e"; }
-.icon-bar-chart:before          { content: "\f080"; }
-.icon-twitter-sign:before       { content: "\f081"; }
-.icon-facebook-sign:before      { content: "\f082"; }
-.icon-camera-retro:before       { content: "\f083"; }
-.icon-key:before                { content: "\f084"; }
-.icon-cogs:before               { content: "\f085"; }
-.icon-comments:before           { content: "\f086"; }
-.icon-thumbs-up:before          { content: "\f087"; }
-.icon-thumbs-down:before        { content: "\f088"; }
-.icon-star-half:before          { content: "\f089"; }
-.icon-heart-empty:before        { content: "\f08a"; }
-.icon-signout:before            { content: "\f08b"; }
-.icon-linkedin-sign:before      { content: "\f08c"; }
-.icon-pushpin:before            { content: "\f08d"; }
-.icon-external-link:before      { content: "\f08e"; }
-.icon-signin:before             { content: "\f090"; }
-.icon-trophy:before             { content: "\f091"; }
-.icon-github-sign:before        { content: "\f092"; }
-.icon-upload-alt:before         { content: "\f093"; }
-.icon-lemon:before              { content: "\f094"; }
\ No newline at end of file
diff --git a/scss-compass/_forms.scss b/scss-compass/_forms.scss
deleted file mode 100644
index 8192682..0000000
--- a/scss-compass/_forms.scss
+++ /dev/null
@@ -1,279 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Forms =================================================== */
-
-form { 
-margin : 0 0 $baseline 0; }
-
-fieldset { 
-margin-bottom : $baseline; 
-padding : 0; 
-border-width : 0; }
-
-legend { 
-display : block;
-width : 100%;
-margin-bottom : $baseline * 2;
-*margin-left : -7px; 
-padding : 0;
-color : $darkgrey;
-border : 0;
-border-bottom : 1px solid lighten($basecolor, 60%);
-white-space : normal; }
-
-legend small {
-@include font-size(14);
-color : $lightgrey; }
-
-form p {
-margin-bottom : $baseline / 2; }
-
-form ul {
-list-style-type : none; 
-margin : 0 0 $baseline 0;
-padding : 0; }
-
-form br {
-display : none; }
-
-label,
-input,
-button,
-select,
-textarea {
-@include font-size(14); 
-vertical-align : baseline; 
-*vertical-align : middle; }
-
-input,
-button,
-select,
-textarea {
-@include sans-serif(); 
-@include box-sizing(border-box); }
-
-label {
-display : block;
-margin-bottom : $baseline / 8;
-font-weight : bold;
-color : $darkgrey;
-cursor : pointer; }
-
-input,
-textarea,
-select {
-display : inline-block;
-width : 100%;
-padding : 4px;
-margin-bottom : $baseline / 4;
-background-color : $inputbackgroundcolor;
-border : 1px solid lighten($basecolor, 60%);
-color : $darkgrey; }
-
-label input,
-label textarea,
-label select {
-display : block; }
-
-.input-mini { 
-width : 60px; }
-
-.input-small { 
-width : 90px; }
-
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
-width : auto;
-height : auto;
-padding : 0;
-margin : 3px 0;
-*margin-top : 0;
-line-height : normal;
-cursor : pointer;
-@include border-radius(0);
-border : 0 \9; }
-
-input[type="checkbox"], 
-input[type="radio"] {  
-@include box-sizing(border-box);
-padding : 0; 
-*width : 13px; 
-*height : 13px; }
-
-input[type="image"] {
-border : 0; 
-@include box-shadow(none); }
-
-input[type="file"] {
-width : auto;
-padding : initial;
-line-height : initial;
-border : initial;
-background-color : transparent;
-background-color : initial;
-@include box-shadow(none); }
-
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-width : auto;
-height : auto;
-cursor : pointer;
-*overflow : visible; }
-
-select,
-input[type="file"] {
-height : 28px; 
-*margin-top : 4px; 
-line-height : 28px; }
-
-select {
-width : auto;
-background-color : $inputbackgroundcolor;
-@include font-size(13); }
-
-select[multiple],
-select[size] {
-height : auto; }
-
-textarea {
-@include resize(vertical);
-height : auto;
-overflow : auto; 
-vertical-align : top; }
-
-input[type="hidden"] {
-display : none; }
-
-.radio,
-.checkbox {
-padding-left : 18px; 
-font-weight : normal; }
-
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
-float : left;
-margin-left : -18px; }
-
-.radio.inline,
-.checkbox.inline {
-display : inline-block;
-padding-top : 5px;
-margin-bottom : 0;
-vertical-align : middle; }
-
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
-margin-left : 10px; }
-
-// disabled
-
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-@include opacity(.5);
-cursor : not-allowed; }
-
-// focus and active
-
-input:focus,
-textarea:focus {
-border-color : darken($inputbordercolor, 60%);
-outline : 0;
-outline : thin dotted \9; }
-
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus {
-@include box-shadow(none); }
-
-::-webkit-input-placeholder {
-@include font-size(14); }
-
-input:-moz-placeholder { 
-@include font-size(14); }
-
-// help text
-
-.help-block,
-.help-inline {
-color : $grey; }
-
-.help-block {
-display : block; 
-margin-bottom : $baseline / 2; }
-
-.help-inline {
-display : inline-block;
-vertical-align : middle;
-padding-left : 5px; }
-
-// .form-inline
-
-.form-inline input,
-.form-inline textarea,
-.form-inline select {
-display : inline-block;
-margin-bottom : 0; }
-
-.form-inline label {
-display : inline-block; }
-
-.form-inline .radio,
-.form-inline .checkbox,
-.form-inline .radio {
-padding-left : 0;
-margin-bottom : 0;
-vertical-align : middle; }
-
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-float : left;
-margin-left : 0;
-margin-right : 3px; }
-
-// .form-search
-
-.form-search input,
-.form-search textarea,
-.form-search select {
-display : inline-block;
-margin-bottom : 0; }
-
-.form-search .search-query {
-padding-left : 14px;
-padding-right : 14px;
-margin-bottom : 0; 
-@include border-radius(14px); }
-
-.form-search label {
-display : inline-block; }
-
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio {
-padding-left : 0;
-margin-bottom : 0;
-vertical-align : middle; }
-
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"] {
-float : left;
-margin-left : 0;
-margin-right : 3px; }
\ No newline at end of file
diff --git a/scss-compass/_mixins.scss b/scss-compass/_mixins.scss
deleted file mode 100644
index bd3cd4b..0000000
--- a/scss-compass/_mixins.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Mixins =================================================== */
-
-// 1. ROOT 					==============================
-// 2. TYPOGRAPHY 			==============================
-
-@mixin font-size($font-size: 16){
-font-size : $font-size * 1px;
-font-size : #{$font-size / 10}rem; }
-
-@mixin sans-serif() {
-font-family : "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
-@mixin serif() {
-font-family : Cambria, Georgia, Times, "Times New Roman"; }
-
-@mixin monospace() {
-font-family : "Monaco", Courier New, monospace; }
-
-@mixin text-overflow() {
-overflow : hidden;
-text-overflow : ellipsis;
-white-space : nowrap; }
-
-// 3. COLOUR 				==============================
-// 4. TEXTURE 				==============================
-
-// .bordered(COLOR, COLOR, COLOR, COLOR);
-
-@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
-border-top : solid 1px $top-color;
-border-left : solid 1px $left-color;
-border-right : solid 1px $right-color;
-border-bottom : solid 1px $bottom-color; }
-
-// .opacity(.5);
-
-@mixin opacity($opacity : .5) {
--webkit-opacity : $opacity;
--moz-opacity : $opacity;
-opacity : $opacity; }
-
-// .rotate(15deg);
-
-@mixin rotate($deg) {
--webkit-transform : rotate($deg);
--moz-transform : rotate($deg);
--ms-transform : rotate($deg);
--o-transform : rotate($deg);
-transform : rotate($deg); }
-
-// .scale(.5);
-
-@mixin scale($ratio) {
--webkit-transform : scale($ratio);
--moz-transform : scale($ratio);
--ms-transform : scale($ratio);
--o-transform : scale($ratio);
-transform : scale($ratio); }
-
-// .skew(VALUE, VALUE);
-
-@mixin skew($x: 0, $y: 0) {
--webkit-transform : skew($x, $y);
--moz-transform : skew($x, $y);
--ms-transform : skew($x, $y);
--o-transform : skew($x, $y);
-transform : skew($x, $y); }
-
-// .transition(2s, ease-out);
-
-@mixin transition($duration : .2s, $ease:ease-out) {
--webkit-transition : all $duration $ease;
--moz-transition : all $duration $ease;
--ms-transition : all $duration $ease;
--o-transition : all $duration $ease;
-transition : all $duration $ease; }
-
-// .translate(VALUE, VALUE)
-
-@mixin translate($x: 0, $y: 0) {
--webkit-transform : translate($x, $y);
--moz-transform : translate($x, $y);
--ms-transform : translate($x, $y);
--o-transform : translate($x, $y);
-transform : translate($x, $y); }
-
-@mixin translate3d($x: 0, $y: 0, $z: 0) {
--webkit-transform : translate($x, $y, $z);
--moz-transform : translate($x, $y, $z);
--ms-transform : translate($x, $y, $z);
--o-transform : translate($x, $y, $z);
-transform : translate($x, $y, $z); }
-
-// 5. ELEMENTS 				==============================
-
-// Chrome Frame
-
-@mixin chromeframe() { 
-margin : .2em 0; 
-background : $lightgrey; 
-color : $black; 
-padding : .2em 0; }
-
-// Contain floats
-
-.clearfix {
-*zoom : 1;
-&:before,
-&:after {
-display: table;
-content : ""; }
-&:after {
-clear : both; } }
-
-// For image replacement
-
-@mixin hide-text() {
-text-indent : 100%;
-white-space : nowrap;
-overflow : hidden; }
-
-// Hide from visual and speaking browsers
-
-@mixin hidden() {
-display : none !important; 
-visibility : hidden; }
-
-// Hide but maintain layout
-
-@mixin invisible() { 
-visibility : hidden; }
-
-// Resize eg: textareas
-
-@mixin resize($direction: both) {
-resize : $direction;
-overflow : auto; }
-
-// Hidden but available to speaking browsers
-
-@mixin visuallyhidden() { 
-overflow : hidden; 
-position : absolute;
-clip : rect(0 0 0 0); 
-height : 1px; 
-width : 1px;
-margin : -1px; 
-padding : 0; 
-border : 0; }
-
-// Make visuallyhidden focusable with a keyboard
-
-.visuallyhidden.focusable:active, 
-.visuallyhidden.focusable:focus { 
-position : static;
-clip : auto; 
-height : auto; 
-width : auto;
-margin : 0; 
-overflow: visible; }
-
-// 6. LAYOUT 				============================== 
-
-// .columns(250px, 0, 24px, COLOR, solid, 1px)
-
-@mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eee, $columnRuleStyle: solid, $columnRuleWidth: 1px) {
-@include column-width($colwidth);
-@include column-count($colcount);
-@include column-gap($colgap);
-@include column-rule($columnRuleWidth, $columnRuleStyle, $columnRuleColor); }
-
-//  7. VENDOR-SPECIFIC 		==============================
-//  8. MODERNIZR 			==============================
-//  9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
diff --git a/scss-compass/_modernizr.scss b/scss-compass/_modernizr.scss
deleted file mode 100644
index 78f14cb..0000000
--- a/scss-compass/_modernizr.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Modernizr =================================================== */
-
-/* audio */
-/* applicationcache */
-/* backgroundsize */ 
-/* borderimage */
-/* borderradius */
-/* boxshadow */
-/* canvas */
-/* canvastext */
-/* cssanimations */
-/* csscolumns */
-/* cssgradients */
-/* cssreflections */
-/* csstransforms */
-/* csstransforms3d */
-/* csstransitions */
-/* draganddrop */
-/* flexbox */
-/* fontface */
-/* geolocation */
-/* hashchange */
-/* history */
-/* hsla */
-/* indexeddb */
-/* inlinesvg */
-/* localstorage */
-/* multiplebgs */
-/* opacity */
-/* postmessage */
-/* rgba */
-/* sessionstorage */
-/* smil */
-/* svg */
-/* svgclippaths */
-/* textshadow */
-/* touch */
-/* video */
-/* webgl */
-/* websqldatabase */
-/* websockets */
-/* webworkers */
\ No newline at end of file
diff --git a/scss-compass/_page.scss b/scss-compass/_page.scss
deleted file mode 100644
index 60d0e5c..0000000
--- a/scss-compass/_page.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Banner =================================================== */
-
-[role="banner"] {
-margin : 0 auto;
-padding-top : $baseline; 
-width : 90%; }
-
-[role="banner"] a[href="#navigation"] {
-display : block;
-position : absolute;
-top : 11px;
-right : 22px;
-width : 43px;
-height : 43px;
-white-space : nowrap;
-overflow : hidden;
-background-color : lighten($basecolor, 20%);
-border : 1px solid lighten($basecolor, 15%); 
-@include border-radius(4px);
-color : lighten($basecolor, 75%);
-@include font-size(32);
-line-height : 42px;
-text-align : center;
-text-decoration : none; }
-
-/* Navigation =================================================== */
-
-[role="navigation"] {
-margin : 0 auto $baseline;
-width : 90%;
-background-color : lighten($basecolor, 20%);
-border : 1px solid lighten($basecolor, 15%); }
-
-[role="navigation"] p {
-margin-bottom : 0; 
-padding : 6px 11px;
-color : $white; }
-
-[role="navigation"] a {
-color : $white; }
-
-/* Content =================================================== */
-
-.content {
-margin : 0 auto;
-width : 90%; }
-
-/* contentinfo =================================================== */
-
-[role="contentinfo"] {
-padding : $baseline 0; 
-border-top : 3px solid lighten($basecolor, 60%); }
-
-[role="contentinfo"] small {
-display : block;
-margin : 0 auto $baseline;
-width : 90%; }
\ No newline at end of file
diff --git a/scss-compass/_print.scss b/scss-compass/_print.scss
deleted file mode 100644
index 2f2f61a..0000000
--- a/scss-compass/_print.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Print =================================================== */
-
-// 1. ROOT 					==============================
-
-* { 
-background : transparent !important; 
-color : black !important; 
-@include box-shadow(none !important);
-text-shadow : none !important; 
-filter : none !important; 
--ms-filter : none !important; }
-
-@page { 
-margin : 0.5cm; }
-
-// 2. TYPOGRAPHY 			==============================
-
-h2, h3 { 
-orphans : 3; 
-widows : 3; 
-page-break-after : avoid; }
-
-p { 
-orphans : 3; 
-widows : 3; }
-
-pre, blockquote { 
-border : 1px solid $grey; 
-page-break-inside : avoid; }
-
-abbr[title]:after { 
-content: " (" attr(title) ")"; }
-
-// 3. COLOUR 				==============================
-
-a, a:visited { 
-text-decoration : underline; }
-
-a[href]:after { 
-content : " (" attr(href) ")"; }
-
-a[href^="javascript:"]:after, 
-a[href^="#"]:after { 
-content : ""; }
-
-// 4. TEXTURE 				==============================
-
-img { 
-max-width : 100% !important;
-page-break-inside : avoid; }
-
-thead { 
-display : table-header-group; } 
-
-tr { 
-page-break-inside : avoid; }
-
-// 5. ELEMENTS 				==============================
-// 6. LAYOUT 				==============================
-// 7. VENDOR-SPECIFIC 		==============================
-// 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
diff --git a/scss-compass/_site.scss b/scss-compass/_site.scss
deleted file mode 100644
index cbe48eb..0000000
--- a/scss-compass/_site.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Page =================================================== */
-
-// 1. ROOT 					==============================
-
-html {
-background : $white; 
-font-size : 62.5%;
--webkit-overflow-scrolling : touch; 
--webkit-tap-highlight-color : lighten($basecolor, 75%); 
--webkit-text-size-adjust : 100%; 
--ms-text-size-adjust : 100%; }
-
-body { 
-margin : 0;
-padding : 0;
-width : 100%;
-@include font-size();
-@include sans-serif();
-line-height : 1.4;
-color : $darkgrey; 
-background-color : transparent; }
-
-// 2. TYPOGRAPHY 			==============================
-// 3. COLOUR 				==============================
-// 4. TEXTURE 				==============================
-// 5. ELEMENTS 				==============================
-// 6. LAYOUT 				==============================
-// 7. VENDOR-SPECIFIC 		==============================
-// 8. MODERNIZR 			==============================
-// 9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
diff --git a/scss-compass/_tables.scss b/scss-compass/_tables.scss
deleted file mode 100644
index 76e11c2..0000000
--- a/scss-compass/_tables.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Tables =================================================== */
-
-table {
-width : 100%;
-max-width : 100%;
-margin-bottom : $baseline;
-border-collapse: collapse;
-border-spacing : 0;
-background-color : transparent; }
-
-table th,
-table td {
-padding : 8px;
-vertical-align : top;
-border-top : 1px solid lighten($basecolor, 60%); 
-@include font-size(14);
-line-height : 1.5;
-text-align : left; }
-
-table th {
-font-weight : bold; }
-
-table thead th {
-vertical-align : bottom; }
-
-table colgroup + thead tr:first-child th,
-table colgroup + thead tr:first-child td,
-table thead:first-child tr:first-child th,
-table thead:first-child tr:first-child td {
-border-top : 0; }
-
-table tbody + tbody {
-border-top : 2px solid lighten($basecolor, 60%); }
-
-// CONDENSED ====================================================
-
-.table-condensed th,
-.table-condensed td {
-padding : 4px 5px; }
-
-// BORDERED ====================================================
-
-.table-bordered {
-border : 1px solid lighten($basecolor, 60%);
-border-left : 0;
-border-collapse : separate;
-*border-collapse : collapsed; }
-
-.table-bordered th,
-.table-bordered td {
-border-left : 1px solid lighten($basecolor, 70%); }
-
-.table-bordered thead:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child td {
-border-top : 0; }
-
-// STRIPED ====================================================
-
-.table-striped tbody tr:nth-child(odd) td,
-.table-striped tbody tr:nth-child(odd) th {
-background-color : lighten($basecolor, 70%); }
-
-.table tbody tr td,
-.table tbody tr th {
--webkit-transition : background-color .25s 0 linear;
--moz-transition : background-color .25s 0 linear;
--o-transition : background-color .25s 0 linear;
-transition : background-color .25s 0 linear; }
-
-.table tbody tr:hover td,
-.table tbody tr:hover th {
-background-color : lighten($basecolor, 70%); }
\ No newline at end of file
diff --git a/scss-compass/_texture.scss b/scss-compass/_texture.scss
deleted file mode 100644
index 5f23a67..0000000
--- a/scss-compass/_texture.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Texture =================================================== */
-
-// ALERT ====================================================
-
-.alert {
-margin-bottom : $baseline;
-padding : 8px 35px 8px 14px;
-background-color : $alertcolor;
-border : 1px solid darken($alertcolor, 20%);
-@include border-radius(2px);
-@include sans-serif;
-@include font-size(14);
-color : darken($alertcolor, 60%); }
-
-.alert-heading {
-color : inherit; }
-
-.alert .close {
-position : relative;
-top : -2px;
-right : -21px;
-float : right;
-@include font-size(21);
-font-weight : bold;
-line-height : 18px;
-color : inherit; }
-
-.alert-success {
-background-color : lighten($successcolor, 30%);
-border : 1px solid lighten($successcolor, 20%);
-color : darken($successcolor, 20%); }
-
-.alert-warning {
-background-color : lighten($warningcolor, 30%);
-border : 1px solid lighten($warningcolor, 20%);
-color : darken($warningcolor, 20%); }
-
-.alert-error {
-background-color : lighten($dangercolor, 30%);
-border : 1px solid lighten($dangercolor, 20%);
-color : $dangercolor; }
-
-.alert-info {
-background-color : $infocolor;
-border : 1px solid darken($infocolor, 20%);
-color : darken($infocolor, 50%); }
-
-.alert-inverse {
-background-color : $inverscolor;
-border : 1px solid $black;
-color : $white; }
-
-.alert-block {
-padding-top : 14px;
-padding-bottom : 14px; }
-
-.alert-block .alert-heading {
-margin-bottom : $baseline / 8;
-font-size : inherit;
-font-weight : bold; }
-
-.alert-block > p,
-.alert-block > ul {
-margin-bottom : 0; }
-
-.alert-block p + p {
-margin-top : 5px; }
-
-// BADGES ====================================================
-
-.badge {
-padding : 1px 9px 2px;
-@include font-size(12);
-font-weight : bold;
-white-space : nowrap;
-color : $white;
-background-color : $lightgrey;
-@include border-radius(9px); }
-
-.badge:hover {
-color : $white;
-text-decoration : none;
-cursor : pointer; }
-
-.badge-error {
-background-color : $errorcolor; }
-
-.badge-error:hover {
-background-color : darken($errorcolor, 20%); }
-
-.badge-warning {
-background-color : $warningcolor; }
-
-.badge-warning:hover {
-background-color : darken($warningcolor, 20%); }
-
-.badge-success {
-background-color : $successcolor; }
-
-.badge-success:hover {
-background-color : darken($successcolor, 20%); }
-
-.badge-info {
-background-color : $infocolor;
-color : darken($infocolor, 50%); }
-
-.badge-info:hover {
-background-color : darken($infocolor, 20%); }
-
-.badge-inverse {
-background-color : $inverscolor; }
-
-.badge-inverse:hover {
-background-color : darken($inverscolor, 20%); }
-
-// GRADIENTS ====================================================
-
-@mixin greygrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($white), to(darken($lightergrey, 5%)));
-background-image : -webkit-linear-gradient(top, $white, darken($lightergrey, 5%));
-background-image : -moz-linear-gradient(top, $white darken($lightergrey, 5%));
-background-image : -ms-linear-gradient(top, $white, darken($lightergrey, 5%));
-background-image : -o-linear-gradient(top, $white, darken($lightergrey, 5%));
-background-image : linear-gradient(top, $white, darken($lightergrey, 5%));
-background-repeat : repeat-x; }
-
-@mixin linkgrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($linkcolor), to(darken($linkcolor, 10%)));
-background-image : -webkit-linear-gradient(top, $linkcolor, darken($linkcolor, 10%));
-background-image : -moz-linear-gradient(top, $linkcolor darken($linkcolor, 10%));
-background-image : -ms-linear-gradient(top, $linkcolor, darken($linkcolor, 10%));
-background-image : -o-linear-gradient(top, $linkcolor, darken($linkcolor, 10%));
-background-image : linear-gradient(top, $linkcolor, darken($linkcolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin basegrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($basecolor), to(darken($basecolor, 10%)));
-background-image : -webkit-linear-gradient(top, $basecolor, darken($basecolor, 10%));
-background-image : -moz-linear-gradient(top, $basecolor darken($basecolor, 10%));
-background-image : -ms-linear-gradient(top, $basecolor, darken($basecolor, 10%));
-background-image : -o-linear-gradient(top, $basecolor, darken($basecolor, 10%));
-background-image : linear-gradient(top, $basecolor, darken($basecolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin dangergrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($dangercolor), to(darken($dangercolor, 10%)));
-background-image : -webkit-linear-gradient(top, $dangercolor, darken($dangercolor, 10%));
-background-image : -moz-linear-gradient(top, $dangercolor darken($dangercolor, 10%));
-background-image : -ms-linear-gradient(top, $dangercolor, darken($dangercolor, 10%));
-background-image : -o-linear-gradient(top, $dangercolor, darken($dangercolor, 10%));
-background-image : linear-gradient(top, $dangercolor, darken($dangercolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin infograd {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($infocolor), to(darken($infocolor, 10%)));
-background-image : -webkit-linear-gradient(top, $infocolor, darken($infocolor, 10%));
-background-image : -moz-linear-gradient(top, $infocolor darken($infocolor, 10%));
-background-image : -ms-linear-gradient(top, $infocolor, darken($infocolor, 10%));
-background-image : -o-linear-gradient(top, $infocolor, darken($infocolor, 10%));
-background-image : linear-gradient(top, $infocolor, darken($infocolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin inversegrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($inverscolor), to(darken($inverscolor, 10%)));
-background-image : -webkit-linear-gradient(top, $inverscolor, darken($inverscolor, 10%));
-background-image : -moz-linear-gradient(top, $inverscolor darken($inverscolor, 10%));
-background-image : -ms-linear-gradient(top, $inverscolor, darken($inverscolor, 10%));
-background-image : -o-linear-gradient(top, $inverscolor, darken($inverscolor, 10%));
-background-image : linear-gradient(top, $inverscolor, darken($inverscolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin successgrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($successcolor), to(darken($successcolor, 10%)));
-background-image : -webkit-linear-gradient(top, $successcolor, darken($successcolor, 10%));
-background-image : -moz-linear-gradient(top, $successcolor darken($successcolor, 10%));
-background-image : -ms-linear-gradient(top, $successcolor, darken($successcolor, 10%));
-background-image : -o-linear-gradient(top, $successcolor, darken($successcolor, 10%));
-background-image : linear-gradient(top, $successcolor, darken($successcolor, 10%));
-background-repeat : repeat-x; }
-
-@mixin warninggrad {
-background-image : -webkit-gradient(linear, 0 0, 0 100%, from($warningcolor), to(darken($warningcolor, 10%)));
-background-image : -webkit-linear-gradient(top, $warningcolor, darken($warningcolor, 10%));
-background-image : -moz-linear-gradient(top, $warningcolor darken($warningcolor, 10%));
-background-image : -ms-linear-gradient(top, $warningcolor, darken($warningcolor, 10%));
-background-image : -o-linear-gradient(top, $warningcolor, darken($warningcolor, 10%));
-background-image : linear-gradient(top, $warningcolor, darken($warningcolor, 10%));
-background-repeat : repeat-x; }
-
-// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
-
-// WELL ====================================================
-
-.well {
-min-height : 21px;
-padding : 11px;
-margin-bottom : $baseline;
-background-color : lighten($basecolor, 75%);
-border : 1px solid lighten($basecolor, 60%);
-@include border-radius(4px);
-@include box-shadow(0 1px 11px rgba(0,0,0,.15) inset); }
-
-.well-large {
-padding : 22px; }
-
-.well-small {
-padding : 6px;
-@include border-radius(2px); }
-
-.well p:last-child {
-margin-bottom : 0; }
\ No newline at end of file
diff --git a/scss-compass/_typography.scss b/scss-compass/_typography.scss
deleted file mode 100644
index 4c1266b..0000000
--- a/scss-compass/_typography.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Typography =================================================== */
-
-// HEADINGS ====================================================
-
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6 {
-font-weight : 200;
-text-rendering : optimizelegibility; }
-
-h1,
-.h1 { 
-margin-bottom : $baseline / 2;
-@include font-size(32);
-line-height : 1.2; }
-
-h2,
-.h2 { 
-margin-bottom : $baseline / 2;
-@include font-size(24);
-line-height : 1.2; }
-
-h3,
-.h3 { 
-margin-bottom : $baseline / 1.5;
-@include font-size(21);
-line-height : 1.3; }
-
-h4,
-.h4 { 
-margin-bottom : $baseline;
-@include font-size(18);
-line-height : 1.25; }
-
-h5,
-.h5 { 
-margin-bottom : $baseline;
-@include font-size(16);  }
-
-h6,
-.h6 { 
-margin-bottom : $baseline;
-@include font-size(12); 
-font-weight : normal;
-letter-spacing : 1px;
-text-transform : uppercase; }
-
-// header
-
-.header h1,
-.header h2 {
-float : left; 
-margin-right : 24px; }
-
-.header h1,
-.header h2,
-.header h3 {
-float : left; 
-margin-right : 24px; }
-
-.header a {
-display : block;
-position : relative;
-top : 6px;
-float : right;
-padding : 4px 12px;
-@include font-size(14);
-background-color : lighten($basecolor, 75%); }
-
-.header a:hover {
-background-color : lighten($basecolor, 75%); }
-
-.header .a-rss,
-.header .a-rss:hover {
-float : left; 
-width : 16px;
-height : 16px;
-padding : 0;
-background : transparent url(../img/a-rss.png) no-repeat 0 0;
-@include hide-text; }
-
-// TYPOGRAPHY ====================================================
-
-p, 
-ol, 
-ul, 
-dl, 
-address { 
-margin-bottom : $baseline; 
-@include font-size(14); }
-
-ul, 
-ol { 
-margin : 0 0 $baseline -24px; 
-padding : 0 0 0 24px; }
-
-li ul, 
-li ol { 
-margin : 0;
-@include font-size(16); }
-
-dl, 
-dd { 
-margin-bottom : $baseline;  }
-
-dt { 
-font-weight : normal; }
-
-blockquote  { 
-margin : 0 0 $baseline -24px; 
-padding-left : 24px; 
-border-left : 1px solid lighten($basecolor, 60%);
-@include serif();
-font-style : normal; }
-
-blockquote:before, 
-blockquote:after, 
-q:before, 
-q:after {
-content : '';
-content : none; }
-
-abbr[title] { 
-border-bottom : 1px dotted lighten($basecolor, 60%); 
-cursor : help; }
-
-b, strong { 
-font-weight : bold; }
-
-dfn { 
-font-style : italic; }
-
-hr { 
-display : block; 
-margin : 1em 0; 
-padding : 0;
-height : 1px; 
-border : 0; 
-border-top : 1px solid lighten($basecolor, 60%); }
-
-ins { 
-background-color : lighten($basecolor, 75%); 
-color : $black; 
-text-decoration : none; }
-
-mark { 
-background-color : lighten($basecolor, 75%); 
-color : $black; 
-font-style : italic; 
-font-weight : bold; }
-
-pre, 
-code, 
-kbd, 
-samp { 
-@include monospace;
-@include font-size(14);
-line-height : $baseline; }
-
-pre { 
-white-space : pre; 
-white-space : pre-wrap; 
-word-wrap : break-word; }
-
-q { 
-quotes : none; }
-
-q:before, 
-q:after { 
-content : ""; 
-content : none; }
-
-small { 
-@include font-size(14); }
-
-sub, sup { 
-@include font-size(12);
-line-height : 0; 
-position : relative; 
-vertical-align : baseline; }
-
-sup { 
-top : -.5em; }
-
-sub { 
-bottom : -.25em; }
\ No newline at end of file
diff --git a/scss-compass/_variables.scss b/scss-compass/_variables.scss
deleted file mode 100644
index 09ffb86..0000000
--- a/scss-compass/_variables.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-// ==========================================================
-
-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-/* Variables =================================================== */
-
-// 1. ROOT 					==============================
-// 2. TYPOGRAPHY 			==============================
-
-$basefontsize : 16;
-$baselineheight : 1.5em;
-
-// 3. COLOUR 				==============================
-
-// greyscale
-
-$black 			: rgb(0,0,0);
-$darkgrey 		: lighten($black, 25%);
-$grey 			: lighten($black, 50%);
-$lightgrey 		: lighten($black, 75%);
-$lightergrey 	: lighten($black, 90%);
-$white 			: rgb(255,255,255);
-
-$basecolor 		: rgb(45,53,62);	  
-$compcolor 		: adjust-hue($basecolor, 180); 
-$textColor		: $black;
-
-// Links
-
-$linkcolor 		    : rgb(1,53,104);
-$linkcolorhover 	: darken($linkcolor, 10);
-$linkcolorvisited   : $linkcolorhover;
-$linkcolorfocus 	: darken($linkcolorhover, 10);
-
-// colour palettes (for gradients see texture.less)
-
-$alertcolor 	: rgb(252,248,227);
-$errorcolor 	: rgb(218,79,73);
-$dangercolor 	: rgb(218,79,73);
-$infocolor 		: rgb(217,237,247);
-$inverscolor 	: rgb(65,65,65);
-$successcolor 	: rgb(91,183,91);
-$warningcolor 	: rgb(250,167,50);
-
-// 4. TEXTURE 				==============================
-
-$inputbackgroundcolor : $white; 
-$inputbordercolor : $basecolor;
-
-// 6. LAYOUT 				==============================
-
-$baseline : 1.5em;
-
-//  7. VENDOR-SPECIFIC 		==============================
-//  8. MODERNIZR 			==============================
-//  9. TEMPLATE SPECIFICS 	==============================
\ No newline at end of file
diff --git a/scss-compass/theme.scss b/scss-compass/theme.scss
deleted file mode 100644
index 83d2434..0000000
--- a/scss-compass/theme.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-/* ============================================================
-
-320 and Up by Andy Clarke
-Version: 3.0
-URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com/
-
-Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-Website theme for:
-http://stuffandnonsense.co.uk/projects/320andup/
-
-============================================================ */
-
-// Compass
-@import "compass";
-
-// Variables and mixins
-@import "variables";
-@import "mixins";
-$themecolour : rgb(45,53,62);
-
-// 1. ROOT 					==============================
-
-html {
-background : $themecolour url(../img/body.png) repeat 0 0;
-font-size : 62.5%;
--webkit-overflow-scrolling : touch; 
--webkit-tap-highlight-color : lighten($basecolor, 30%); 
--webkit-text-size-adjust : 100%; 
--ms-text-size-adjust : 100%; }
-
-body { 
-margin : 0;
-padding : $baseline 0 0 0;
-width : 100%;
-@include font-size();
-font-family : "facitweb-1","facitweb-2", sans-serif;
-line-height : 1.4;
-color : rgb(193,197,202); 
-background-color : transparent; }
-
-// 2. TYPOGRAPHY 			==============================
-
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6 {
-font-weight : 700; }
-
-// 3. COLOUR 				==============================
-
-a, 
-a:visited,
-a:hover,
-a:active, 
-a:focus {
-color : $white; }
- 
-a:active, 
-a:focus { 
-position : relative; 
-top : 1px; 
-outline : none; }
-
-// 4. TEXTURE 				==============================
-
-.btn {
-display : inline-block;
-*display : inline;
-/* IE7 inline-block hack */
-*zoom : 1;
-*margin-left : .3em;
-padding : 11px 22px;
-@include sans-serif;
-@include font-size(14);
-font-weight : bold;
-line-height : 1.5;
-color : $white;
-text-align : center;
-vertical-align : middle;
-background-color : darken($themecolour, 5%);
-cursor : pointer;
-text-decoration : none; }
-
-.btn:first-child {
-margin-bottom : $baseline; }
-
-// 5. ELEMENTS 				==============================
-
-.list-bordered li {
-border-bottom-color : darken($themecolour, 5%); }
-
-// 6. LAYOUT 				==============================
-
-// banner
-
-[role="banner"] {
-margin : 0 auto $baseline;
-width : 90%; 
-border-bottom : 10px solid darken($themecolour, 5%); }
-
-[role="banner"] hgroup {
-width : 100%;
-padding-top : 190px;
-background : transparent url(../img/banner-160.png) no-repeat 50% 0;
-text-align : center; }
-
-[role="banner"] h1 {
-@include font-size(48); }
-
-[role="banner"] .btn-group {
-text-align : center; }
-
-[role="banner"] a[href="#navigation"] {
-display : none; 
-background-color : lighten($themecolour, 10%);
-border : 1px solid darken($themecolour, 5%);
-color : $white; }
-
-//  content
-
-.content {
-margin : 0 auto;
-width : 90%; }
-
-//  navigation
-
-[role="navigation"] {
-background-color : lighten($themecolour, 10%);
-border : 1px solid darken($themecolour, 5%); }
-
-[role="banner"] h1 {
-margin-bottom : $baseline / 4; }
-
-[role="banner"] a[href="http://stuffandnonsense.co.uk/projects/320andup/"] {
-display : block;
-text-decoration : none; }
-
-//  grids
-
-.grids {
-width : 90%;
-margin : 0 auto $baseline;
-padding : $baseline 0;
-border-top : 5px solid darken($themecolour, 5%);
-border-bottom : 5px solid darken($themecolour, 5%); }
-
-.grid {
-border-bottom : 1px solid darken($themecolour, 5%); }
-
-.furniture-letter {
-overflow : hidden;
-margin : 0;
-line-height : 44px; }
-
-.furniture-letter span {
-display : block;
-float : left;
-margin : 0 12px 0 0;
-height : 44px;
-width : 44px;
-background-color : lighten($themecolour, 10%);
-border : 1px solid darken($themecolour, 10%);
-@include font-size(32);
-font-weight : bold;
-line-height : 44px;
-text-align : center;
-color : $white; }
-
-//  contentinfo
-
-[role="contentinfo"] {
-background-color : rgba(0,0,0,.25);
-border-top : 5px solid darken($themecolour, 5%); }
-
-//  7. VENDOR-SPECIFIC 		==============================
-//  8. MODERNIZR 			==============================
-//  9. TEMPLATE SPECIFICS 	==============================
-//  10. MEDIA QUERIES 		==============================
-
-// 480px
-@media only screen and (min-width: 480px) {
-
-.btn:first-child {
-margin-bottom : 0; }
-
-}
-
-// 600px
-@media only screen and (min-width: 600px) {
-
-[role="banner"] hgroup {
-padding-top : 0;
-padding-left : 100px;
-width : 100%;
-min-height : 100px;
-background : transparent url(../img/banner-80.png) no-repeat 0 0; 
-@include box-sizing(border-box);
-text-align : left; }
-
-[role="banner"] .btn-group {
-text-align : left;
-padding-left : 100px; }
-
-}
-
-// 768px
-@media only screen and (min-width: 768px) {
-
-[role="banner"],
-[role="navigation"] p,
-.content,
-[role="contentinfo"] small {
-width : 60%; }
-
-[role="navigation"] {
-display : table-header-group;
-background-color : rgba(0,0,0,.25);
-border-bottom-width : 5px; }
-
-}
-
-// 992px
-@media only screen and (min-width: 992px) {
-
-[role="navigation"] p,
-.content,
-[role="contentinfo"] small {
-width : 80%; }
-
-[role="banner"] {
-width : 80%;
-height : 240px;
-padding-right : 240px;
-background : transparent url(../img/header.png) no-repeat 100% 100%; 
-@include box-sizing(border-box); }
-
-[role="banner"] hgroup {
-padding-left : 0; 
-background-image : none; }
-
-[role="banner"] .btn-group {
-padding-left : 0; }
-
-.grids h2 {
-margin-bottom : $baseline;
-text-align : center; }
-
-}
-
-// 2x
-@media
-only screen and (-webkit-min-device-pixel-ratio: 1.5), 
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {}
\ No newline at end of file
diff --git a/scss-compass/upstarts/320andup-modules/.DS_Store b/scss-compass/upstarts/320andup-modules/.DS_Store
deleted file mode 100644
index 8d3675d..0000000
Binary files a/scss-compass/upstarts/320andup-modules/.DS_Store and /dev/null differ
diff --git a/scss-compass/upstarts/320andup-modules/_upstart.scss b/scss-compass/upstarts/320andup-modules/_upstart.scss
deleted file mode 100644
index 3008548..0000000
--- a/scss-compass/upstarts/320andup-modules/_upstart.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-// ==========================================================
-
-/* 320 and Up */
-/* Modules upstart */
-/* Version: 1.0 */
-/* Author: Andy Clarke */
-/* URL: http://stuffandnonsense.co.uk/projects/320andup */
-
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com/
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// ==========================================================
-
-.grid {
-margin-bottom : $baseline;
-border-bottom : 1px dashed lighten($basecolor, 60%); }
-
-.grid:last-child {
-margin-bottom : 0;
-border-bottom-width : 0; }
-
-.furniture-letter {
-overflow : hidden; }
-
-.furniture-letter span {
-display : block;
-float : left;
-margin : 0 12px 0 0;
-height : 44px;
-width : 44px;
-background-color : $basecolor;
-color : $white;
-@include font-size(32);
-font-weight : bold;
-line-height : 44px;
-text-align : center; }
-
-// 480px
-@media only screen and (min-width: 480px) {
-/* Styles */
-}
-
-// 600px
-@media only screen and (min-width: 600px) {
-/* Styles */
-}
-
-// 768px
-@media only screen and (min-width: 768px) {
-
-// .grids-two
-
-.grids-two .grid {
-width : 43.03%; 
-margin-bottom : 0;
-border-bottom-width : 0; }
-
-.grids-two .grid-1 {
-float : left; }
-
-.grids-two .grid-2 {
-float : right; }
-
-// grids-three
-
-.grids-three .grid-a {
-float : left;
-width : 31.64%; 
-margin-right : 2.53%; }
-
-// grids-four
-
-.grids-four .grid-a {
-float : left;
-width : 31.64%;
-margin-right : 2.53%; }
-
-}
-
-// 992px
-@media only screen and (min-width: 992px) {
-
-// grids-three
-
-.grids-three .grid {
-float : left;
-width : 31.64%;
-margin : 0 2.53% 0 0;
-border-bottom-width : 0; }
-
-.grids-three .grid-3 {
-float : right;
-margin-right : 0; }
-
-.grids-three .grid .grid-a {
-float : none; 
-width : 100%;
-margin-right : 0;
-margin-bottom : $baseline / 2; }
-
-// grids-four
-
-.grids-four .grid {
-float : left;
-width : 20.25%;
-margin : 0 6.32% 0 0;
-border-bottom-width : 0; }
-
-.grids-four .grid-4 {
-float : right;
-margin-right : 0; }
-
-.grids-four .grid .grid-a {
-float : none; 
-width : 100%; 
-margin-right : 0; }
-
-}
-
-// 1382px
-@media only screen and (min-width: 1382px) {
-/* Styles */
-}
-
-// 2x
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */ 
-}
\ No newline at end of file
diff --git a/scss-compass/upstarts/320andup-panels/_upstart.scss b/scss-compass/upstarts/320andup-panels/_upstart.scss
deleted file mode 100644
index f04b24d..0000000
--- a/scss-compass/upstarts/320andup-panels/_upstart.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-// ==========================================================
-
-/* 320 and Up */
-/* Panels Upstart */
-/* Version: 1.0 */
-/* Author: Andy Clarke */
-/* URL: http://stuffandnonsense.co.uk/projects/320andup */
-
-/* Sass Port by Jina Bolton */
-/* URL: http://sushiandrobots.com/ */
-
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-
-// HEADS UP: 320 and Up Panels Upstart is dependent on 
-// grid styles from Modules Upstart. If you’re importing it
-// you’re ready to go. Otherwise, import it or copy and paste 
-// its styles here.
-
-// ==========================================================
-
-// Full width panel containers
-
-.full {
-margin-bottom : $baseline;
-padding : $baseline;
-background-color : lighten($basecolor, 75%);
-border-top : 2px solid lighten($basecolor, 60%);
-border-bottom : 2px solid lighten($basecolor, 60%); }
-
-.full .grids {
-width : 90%;
-margin : 0 auto; 
-padding : $baseline 0; }
-
-// 480px
-@media only screen and (min-width: 480px) {
-/* Styles */
-}
-
-// 600px
-@media only screen and (min-width: 600px) {
-/* Styles */
-}
-
-// 768px
-@media only screen and (min-width: 768px) {
-
-// Extra wide grid units
-.special .grids-three .grid-a,
-.special .grids-four .grid-a {
-width : 43.03%; }
-
-}
-
-// 992px
-@media only screen and (min-width: 992px) {
-
-// Extra wide grid units
-.special .grids-three .grid-a,
-.special .grids-four .grid-a {
-width : 100%; }
-}
-
-// 1382px
-@media only screen and (min-width: 1382px) {
-/* Styles */
-}
-
-// 2x
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */ 
-}
\ No newline at end of file
diff --git a/scss/320andup_scss.scss b/scss/320andup_scss.scss
index f71d058..5afec85 100755
--- a/scss/320andup_scss.scss
+++ b/scss/320andup_scss.scss
@@ -3,10 +3,6 @@
 320 and Up by Andy Clarke
 Version: 3.0
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com
-
 Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 ============================================================ */
diff --git a/scss/_1382.scss b/scss/_1382.scss
index 9870077..86b0fd8 100755
--- a/scss/_1382.scss
+++ b/scss/_1382.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_2x.scss b/scss/_2x.scss
index 2669ed2..da3d729 100755
--- a/scss/_2x.scss
+++ b/scss/_2x.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_480.scss b/scss/_480.scss
index 10c34a8..e4ec055 100755
--- a/scss/_480.scss
+++ b/scss/_480.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_600.scss b/scss/_600.scss
index 91c96c1..0ad8e66 100755
--- a/scss/_600.scss
+++ b/scss/_600.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_768.scss b/scss/_768.scss
index 30e14d9..0e01478 100755
--- a/scss/_768.scss
+++ b/scss/_768.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_992.scss b/scss/_992.scss
index cb0b7cb..9a45c64 100755
--- a/scss/_992.scss
+++ b/scss/_992.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 33886e2..9ba1a6d 100755
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -33,7 +29,7 @@ border : $buttonborderwidth $buttonborderstyle $buttonbordercolor;
 border-bottom-color : $buttonbottombordercolor;
 @include rounded(4px);
 cursor : pointer;
-*margin-left : .3em;
+*margin-left : .3em; 
 
 &:visited,
 &:hover {
@@ -50,7 +46,7 @@ border-color : $buttonbordercolor; }
 // disabled
 
 .btn-disabled {
-@include opacity(.5);
+@include opacity(.5); 
 cursor : default; }
 
 // info
@@ -58,7 +54,7 @@ cursor : default; }
 .btn-info {
 @include infograd;
 border-color : darken($infocolor, 15%);
-border-bottom-color : darken($infocolor, 20%);
+border-bottom-color : darken($infocolor, 20%); 
 color : darken($infocolor, 50%);
 
 &:visited,
@@ -71,8 +67,8 @@ color : darken($infocolor, 50%); }
 .btn-inverse {
 @include inversegrad;
 border-color : darken($inverscolor, 15%);
-border-bottom-color : darken($inverscolor, 20%);
-color : $white;
+border-bottom-color : darken($inverscolor, 20%); 
+color : $white; 
 
 &:visited,
 &:hover {
@@ -85,7 +81,7 @@ color : $white; }
 @include basegrad;
 border-color : darken($basecolor, 15%);
 border-bottom-color : darken($basecolor, 20%);
-color : $white;
+color : $white; 
 
 &:visited,
 &:hover {
@@ -125,49 +121,46 @@ line-height : normal;
 
 .btn-small {
 padding : 6px 10px;
-@include font-size(11);
+@include font-size(11); 
 line-height : 16px; }
 
 .btn-mini {
 padding : 3px 5px;
-@include font-size(11);
+@include font-size(11); 
 line-height : 14px; }
 
 .btn-group {
 position : relative;
 *zoom : 1;
 *margin-left : .3em;
-margin-bottom : $baseline;
+margin-bottom : $baseline; }
 
-.btn {
+.btn-group .btn {
 position : relative;
 float : left;
 margin-left : -1px;
-@include rounded(0);
+@include rounded(0); }
 
-&:first-child {
+.btn-group .btn:first-child {
 margin-left : 0;
-@include border-radius(2px, 0, 2px, 0); }
+@include border-radius(2px, 0, 2px, 0); } 
 
-&:last-child {
+.btn-group .btn:last-child {
 @include border-radius(0, 2px, 0, 2px); }
 
-&.large:first-child {
+.btn-group .btn.large:first-child {
 margin-left : 0;
 @include border-radius(4px, 0, 4px, 0); }
 
-&.large:last-child {
+.btn-group .btn.large:last-child {
 @include border-radius(0, 4px, 0, 4px); }
-}
-}
 
 .btn-toolbar {
 clear : both;
 margin-top : $baselineheight / 2;
-margin-bottom : $baselineheight / 2;
+margin-bottom : $baselineheight / 2; }
 
-.btn-group {
+.btn-toolbar .btn-group {
 display : inline-block;
 *display : inline;
-*zoom : 1; }
-}
\ No newline at end of file
+*zoom : 1; }
\ No newline at end of file
diff --git a/scss/_colour.scss b/scss/_colour.scss
index 45c458b..2930fd5 100755
--- a/scss/_colour.scss
+++ b/scss/_colour.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -17,26 +13,144 @@
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
 
-a {
+a { 
 text-decoration : none;
-color : $linkcolor;
+color : $linkcolor; 
 
-&:visited {
+&:visited { 
 color : $linkcolorvisited; }
 
-&:hover {
+&:hover { 
 text-decoration : underline;
 color : $linkcolorhover; }
 
-&:focus {
-outline : thin dotted;
+&:focus { 
+outline : thin dotted; 
 color : $linkcolorfocus; }
 
-&:hover,
-&:active {
+&:hover, 
+&:active { 
 outline : 0; }
 }
 
+::-moz-selection { 
+background-color : lighten($basecolor, 65%); 
+color : $basecolor; 
+text-shadow : none; }  
+	
+::selection { 
+background-color : lighten($basecolor, 65%); 
+color : $basecolor; 
+text-shadow : none; }
+
+// swatches
+
+.swatch {
+margin : 0 0 $baselineheight 0;
+padding : 0; }
+
+.swatch-row {
+display : block; 
+margin : 0;
+padding : 0;
+width : 200px; }
+
+.swatch-row-one {
+background-color : $black; }
+
+.swatch-row-two {
+background-color : $white; }
+
+.swatch-row span {
+display : block;
+float : left; 
+width : 50px;
+height : 50px; }
+
+// base
+
+.swatch-base span:nth-child(1) {
+@include background-alpha($basecolor, .9); }
+
+.swatch-base span:nth-child(2) {
+@include background-alpha($basecolor, .8); }
+
+.swatch-base span:nth-child(3) {
+@include background-alpha($basecolor, .7); }
+
+.swatch-base span:nth-child(4) {
+@include background-alpha($basecolor, .6); }
+
+// alert
+
+.swatch-alert span:nth-child(1) {
+@include background-alpha($alertcolor, .9); }
+
+.swatch-alert span:nth-child(2) {
+@include background-alpha($alertcolor, .8); }
+
+.swatch-alert span:nth-child(3) {
+@include background-alpha($alertcolor, .7); }
+
+.swatch-alert span:nth-child(4) {
+@include background-alpha($alertcolor, .6); }
+
+// error
+
+.swatch-error span:nth-child(1) {
+@include background-alpha($errorcolor, .9); }
+
+.swatch-error span:nth-child(2) {
+@include background-alpha($errorcolor, .8); }
+
+.swatch-error span:nth-child(3) {
+@include background-alpha($errorcolor, .7); }
+
+.swatch-error span:nth-child(4) {
+@include background-alpha($errorcolor, .6); }
+
+// info
+
+.swatch-info span:nth-child(1) {
+@include background-alpha($infocolor, .9); }
+
+.swatch-info span:nth-child(2) {
+@include background-alpha($infocolor, .8); }
+
+.swatch-info span:nth-child(3) {
+@include background-alpha($infocolor, .7); }
+
+.swatch-info span:nth-child(4) {
+@include background-alpha($infocolor, .6); }
+
+// success
+
+.swatch-success span:nth-child(1) {
+@include background-alpha($successcolor, .9); }
+
+.swatch-success span:nth-child(2) {
+@include background-alpha($successcolor, .8); }
+
+.swatch-success span:nth-child(3) {
+@include background-alpha($successcolor, .7); }
+
+.swatch-success span:nth-child(4) {
+@include background-alpha($successcolor, .6); }
+
+// warning
+
+.swatch-warning span:nth-child(1) {
+@include background-alpha($warningcolor, .9); }
+
+.swatch-warning span:nth-child(2) {
+@include background-alpha($warningcolor, .8); }
+
+.swatch-warning span:nth-child(3) {
+@include background-alpha($warningcolor, .7); }
+
+.swatch-warning span:nth-child(4) {
+@include background-alpha($warningcolor, .6); }
+
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
diff --git a/scss/_elements.scss b/scss/_elements.scss
index bdacef7..2365d9f 100755
--- a/scss/_elements.scss
+++ b/scss/_elements.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -40,7 +36,7 @@ overflow : hidden; }
 figure {
 margin-bottom : $baselineheight;
 
-figure img {
+img {
 margin-bottom : $baselineheight / 4; }
 
 figcaption {
@@ -60,11 +56,10 @@ padding : 0;
 li {
 margin-bottom : $baselineheight / 4;
 padding-bottom : $baselineheight / 4;
-border-bottom : 1px dashed $bordercolor;
+border-bottom : 1px dashed $bordercolor; }
 
-&:last-child {
+li:last-child {
 margin-bottom : 0;
 padding-bottom : 0;
 border-bottom-width : 0; }
-}
 }
\ No newline at end of file
diff --git a/scss/_font-awesome.scss b/scss/_font-awesome.scss
index cfa5651..8299b3d 100755
--- a/scss/_font-awesome.scss
+++ b/scss/_font-awesome.scss
@@ -1,10 +1,6 @@
-// ==========================================================
-
+// ==========================================================
+
 /* Font Awesome: http://fortawesome.github.com/Font-Awesome/
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 
 License
 -------------------------------------------------------
@@ -97,8 +93,8 @@ text-indent: -4/3em;
 }
 
 /*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-    readers do not read off random characters that represent icons */
-
+    readers do not read off random characters that represent icons */
+    
 .icon-glass:before              { content: "\f000"; }
 .icon-music:before              { content: "\f001"; }
 .icon-search:before             { content: "\f002"; }
diff --git a/scss/_forms.scss b/scss/_forms.scss
index b35931e..5535dc2 100755
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -3,34 +3,30 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 /* Forms =================================================== */
 
-form {
+form { 
 margin : 0 0 $baselineheight 0;
 
-fieldset {
-margin-bottom : $baselineheight;
-padding : 0;
+fieldset { 
+margin-bottom : $baselineheight; 
+padding : 0; 
 border-width : 0; }
 
-legend {
+legend { 
 display : block;
 width : 100%;
 margin-bottom : $baselineheight * 2;
-*margin-left : -7px;
+*margin-left : -7px; 
 padding : 0;
 color : $textcolor;
 border : 0;
 border-bottom : $inputborderwidth $inputborderstyle $inputborder;
-white-space : normal;
+white-space : normal; 
 
 small {
 @include font-size(14);
@@ -41,7 +37,7 @@ p {
 margin-bottom : $baselineheight / 2; }
 
 ul {
-list-style-type : none;
+list-style-type : none; 
 margin : 0 0 $baselineheight 0;
 padding : 0; }
 
@@ -54,15 +50,15 @@ input,
 button,
 select,
 textarea {
-@include font-size(14);
-vertical-align : baseline;
+@include font-size(14); 
+vertical-align : baseline; 
 *vertical-align : middle; }
 
 input,
 button,
 select,
 textarea {
-font-family : $basefont;
+font-family : $basefont; 
 @include box-sizing(border-box); }
 
 label {
@@ -70,7 +66,7 @@ display : block;
 margin-bottom : $baseline / 8;
 font-weight : bold;
 color : $textcolor;
-cursor : pointer;
+cursor : pointer; 
 
 input,
 textarea,
@@ -87,22 +83,21 @@ padding : 4px;
 margin-bottom : $baselineheight / 4;
 background-color : $inputbackground;
 border : $inputborderwidth $inputborderstyle $inputborder;
-color : $textcolor;
+color : $textcolor; 
 
 &:hover {
 border-color : $inputhover; }
 }
 
-.input-mini {
+.input-mini { 
 width : 60px; }
 
-.input-small {
+.input-small { 
 width : 90px; }
 
-input {
-&[type="image"],
-&[type="checkbox"],
-&[type="radio"] {
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
 width : auto;
 height : auto;
 padding : 0;
@@ -113,18 +108,18 @@ cursor : pointer;
 @include rounded(0);
 border : 0 \9; }
 
-&[type="checkbox"],
-&[type="radio"] {
+input[type="checkbox"], 
+input[type="radio"] {  
 @include box-sizing(border-box);
-padding : 0;
-*width : 13px;
+padding : 0; 
+*width : 13px; 
 *height : 13px; }
 
-&[type="image"] {
-border : 0;
+input[type="image"] {
+border : 0; 
 @include box-shadow(none); }
 
-&[type="file"] {
+input[type="file"] {
 width : auto;
 padding : initial;
 line-height : initial;
@@ -133,35 +128,33 @@ background-color : transparent;
 background-color : initial;
 @include box-shadow(none); }
 
-&[type="button"],
-&[type="reset"],
-&[type="submit"] {
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
 width : auto;
 height : auto;
 cursor : pointer;
 *overflow : visible; }
-}
 
 select,
 input[type="file"] {
-height : 28px;
-*margin-top : 4px;
+height : 28px; 
+*margin-top : 4px; 
 line-height : 28px; }
 
 select {
 width : auto;
 background-color : $inputbackground;
-@include font-size(13);
+@include font-size(13); }
 
-&[multiple],
-&[size] {
+select[multiple],
+select[size] {
 height : auto; }
-}
 
 textarea {
 @include resize(vertical);
 height : auto;
-overflow : auto;
+overflow : auto; 
 vertical-align : top; }
 
 input[type="hidden"] {
@@ -169,7 +162,7 @@ display : none; }
 
 .radio,
 .checkbox {
-padding-left : 18px;
+padding-left : 18px; 
 font-weight : normal; }
 
 .radio input[type="radio"],
@@ -177,17 +170,16 @@ font-weight : normal; }
 float : left;
 margin-left : -18px; }
 
-.radio, .checkbox {
-&.inline {
+.radio.inline,
+.checkbox.inline {
 display : inline-block;
 padding-top : 5px;
 margin-bottom : 0;
-vertical-align : middle;
+vertical-align : middle; }
 
-& + & {
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
 margin-left : 10px; }
-}
-}
 
 // disabled
 
@@ -202,22 +194,22 @@ cursor : not-allowed; }
 
 // focus and active
 
-input, textarea {
-&:focus {
+input:focus,
+textarea:focus {
 border-color : $inputfocus;
 outline : 0;
 outline : thin dotted \9; }
-}
 
-input[type="file"], input[type="radio"], input[type="checkbox"], select {
-&:focus {
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
 @include box-shadow(none); }
-}
 
 ::-webkit-input-placeholder {
 @include font-size(14); }
 
-input:-moz-placeholder {
+input:-moz-placeholder { 
 @include font-size(14); }
 
 // help text
@@ -227,7 +219,7 @@ input:-moz-placeholder {
 color : $grey; }
 
 .help-block {
-display : block;
+display : block; 
 margin-bottom : $baselineheight / 2; }
 
 .help-inline {
@@ -237,58 +229,54 @@ padding-left : 5px; }
 
 // .form-inline
 
-.form-inline {
-input,
-textarea,
-select {
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
 display : inline-block;
 margin-bottom : 0; }
 
-label {
+.form-inline label {
 display : inline-block; }
 
-.radio,
-.checkbox,
-.radio {
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
 padding-left : 0;
 margin-bottom : 0;
 vertical-align : middle; }
 
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
 float : left;
 margin-left : 0;
 margin-right : 3px; }
-}
 
 // .form-search
 
-.form-search {
-input,
-textarea,
-select {
+.form-search input,
+.form-search textarea,
+.form-search select {
 display : inline-block;
 margin-bottom : 0; }
 
-.search-query {
+.form-search .search-query {
 padding-left : 14px;
 padding-right : 14px;
-margin-bottom : 0;
+margin-bottom : 0; 
 @include rounded(14px); }
 
-label {
+.form-search label {
 display : inline-block; }
 
-.radio,
-.checkbox,
-.radio {
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
 padding-left : 0;
 margin-bottom : 0;
 vertical-align : middle; }
 
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"] {
 float : left;
 margin-left : 0;
-margin-right : 3px; }
-}
\ No newline at end of file
+margin-right : 3px; }
\ No newline at end of file
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index e501474..26fe47a 100755
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -18,7 +14,7 @@
 
 @mixin font-size($font-size: 16){
 font-size : #{$font-size}px;
-font-size : #{($font-size / 10)}rem; }
+font-size : #{$font-size / 10}rem; }
 
 @mixin text-overflow() {
 overflow : hidden;
@@ -59,7 +55,7 @@ background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// O
 background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
 background-repeat : repeat-x; }
 
-// .bordered(COLOR, COLOR, COLOR, COLOR);
+// @include bordered(COLOR, COLOR, COLOR, COLOR);
 
 @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
 border-top : solid 1px $top-color;
@@ -67,14 +63,14 @@ border-left : solid 1px $left-color;
 border-right : solid 1px $right-color;
 border-bottom : solid 1px $bottom-color; }
 
-// .rounded(VALUE);
+// @mixin rounded(VALUE);
 
 @mixin rounded($radius:4px) {
 -webkit-border-radius : $radius;
 -moz-border-radius : $radius;
 border-radius : $radius; }
 
-// .border-radius(VALUE,VALUE,VALUE,VALUE);
+// @mixin border-radius(VALUE,VALUE,VALUE,VALUE);
 
 @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
 -webkit-border-top-right-radius : $topright;
@@ -93,28 +89,28 @@ border-top-left-radius : $topleft;
 -moz-background-clip : padding;
 background-clip : padding-box; }
 
-// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+// @mixin box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
 
 @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
 -webkit-box-shadow : $shadow;
 -moz-box-shadow : $shadow;
 box-shadow : $shadow; }
 
-// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
 
 @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
 -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
 
-// .opacity(VALUE);
+// @mixin opacity(VALUE);
 
 @mixin opacity($opacity : .5) {
 -webkit-opacity : $opacity;
 -moz-opacity : $opacity;
 opacity : $opacity; }
 
-// .rotate(VALUEdeg);
+// @include rotate(VALUEdeg);
 
 @mixin rotate($deg) {
 -webkit-transform : rotate($deg);
@@ -123,7 +119,7 @@ opacity : $opacity; }
 -o-transform : rotate($deg);
 transform : rotate($deg); }
 
-// .scale(VALUE);
+// @include scale(VALUE);
 
 @mixin scale($ratio) {
 -webkit-transform : scale($ratio);
@@ -132,7 +128,7 @@ transform : rotate($deg); }
 -o-transform : scale($ratio);
 transform : scale($ratio); }
 
-// .skew(VALUE, VALUE);
+// @include skew(VALUE, VALUE);
 
 @mixin skew($x: 0, $y: 0) {
 -webkit-transform : skew($x, $y);
@@ -141,7 +137,7 @@ transform : scale($ratio); }
 -o-transform : skew($x, $y);
 transform : skew($x, $y); }
 
-// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+// @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
 
 @mixin transition($transition) {
 -webkit-transition : $transition;
@@ -150,7 +146,7 @@ transform : skew($x, $y); }
 -o-transition : $transition;
 transition : $transition; }
 
-// .translate(VALUE, VALUE)
+// @include translate(VALUE, VALUE)
 
 @mixin translate($x: 0, $y: 0) {
 -webkit-transform : translate($x, $y);
@@ -168,7 +164,12 @@ transform : translate($x, $y, $z); }
 
 // 5. ELEMENTS 				==============================
 
-// .background-size(VALUE VALUE);
+// @include background-alpha(VALUE VALUE);
+
+@mixin background-alpha($color: $white, $alpha: 1) {
+background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
+
+// @include background-size(VALUE VALUE);
 
 @mixin background-size($size){
 -webkit-background-size : $size;
@@ -176,14 +177,14 @@ transform : translate($x, $y, $z); }
 -o-background-size : $size;
 background-size : $size; }
 
-// .background-clip(VALUE); (border-box, padding-box, content-box)
+// @include background-clip(VALUE); (border-box, padding-box, content-box)
 
 @mixin background-clip($clip) {
 -webkit-background-clip : $clip;
 -moz-background-clip : $clip;
 background-clip : $clip; }
 
-// .box-sizing(VALUE); (border-box, padding-box, content-box)
+// @include box-sizing(VALUE); (border-box, padding-box, content-box)
 
 @mixin box-sizing($boxsize: border-box) {
 -webkit-box-sizing : $boxsize;
@@ -201,7 +202,6 @@ padding : .2em 0; }
 
 // Contain floats
 
-// The clearfix can be used as a mixin but I added a class here so it can work in the markup as well. — Jina
 @mixin clearfix {
 *zoom : 1;
 &:before,
@@ -212,8 +212,7 @@ content : ""; }
 clear : both; } }
 
 .clearfix {
-@include clearfix;
-}
+@include clearfix; }
 
 // For image replacement
 
@@ -233,13 +232,13 @@ visibility : hidden; }
 @mixin invisible() {
 visibility : hidden; }
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 @mixin resize($direction: both) {
 resize : $direction;
 overflow : auto; }
 
-// .userselect(VALUE) (all, element, none, text)
+// @include userselect(VALUE) (all, element, none, text)
 
 @mixin user-select($select) {
 -webkit-user-select : $select;
@@ -258,6 +257,7 @@ width : 1px;
 margin : -1px;
 padding : 0;
 border : 0;
+
 // Make visuallyhidden focusable with a keyboard
 
 &.focusable:active,
@@ -267,12 +267,11 @@ clip : auto;
 height : auto;
 width : auto;
 margin : 0;
-overflow: visible; }
-}
+overflow: visible; } }
 
 // 6. LAYOUT 				==============================
 
-// .columns(250px, 0, 24px, COLOR, solid, 1px)
+// @include columns(250px, 0, 24px, COLOR, solid, 1px)
 
 @mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eee, $columnRuleStyle: solid, $columnRuleWidth: 1px) {
 -webkit-column-width : $colwidth;
diff --git a/scss/_modernizr.scss b/scss/_modernizr.scss
index 8e30fa1..e0d11f8 100755
--- a/scss/_modernizr.scss
+++ b/scss/_modernizr.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -15,7 +11,7 @@
 
 /* audio */
 /* applicationcache */
-/* backgroundsize */
+/* backgroundsize */ 
 /* borderimage */
 /* borderradius */
 /* boxshadow */
diff --git a/scss/_page.scss b/scss/_page.scss
index a732c06..bb728ca 100755
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -15,8 +11,8 @@
 
 [role="banner"] {
 margin : 0 auto;
-padding-top : $baselineheight;
-width : 90%;
+padding-top : $baselineheight; 
+width : 90%; 
 
 a[href="#navigation"] {
 display : block;
@@ -28,7 +24,7 @@ height : 43px;
 white-space : nowrap;
 overflow : hidden;
 background-color : lighten($basecolor, 20%);
-border : 1px solid lighten($basecolor, 15%);
+border : 1px solid lighten($basecolor, 15%); 
 @include rounded(4px);
 color : lighten($basecolor, 75%);
 @include font-size(32);
@@ -43,10 +39,10 @@ text-decoration : none; }
 margin : 0 auto $baselineheight;
 width : 90%;
 background-color : lighten($basecolor, 20%);
-border : 1px solid lighten($basecolor, 15%);
+border : 1px solid lighten($basecolor, 15%); 
 
 p {
-margin-bottom : 0;
+margin-bottom : 0; 
 padding : 6px 11px;
 color : $white; }
 
@@ -63,8 +59,8 @@ width : 90%; }
 /* contentinfo =================================================== */
 
 [role="contentinfo"] {
-padding : $baselineheight 0;
-border-top : 3px solid lighten($basecolor, 60%);
+padding : $baselineheight 0; 
+border-top : 3px solid lighten($basecolor, 60%); 
 
 small {
 display : block;
diff --git a/scss/_print.scss b/scss/_print.scss
index 4893b9a..e8544ac 100755
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -15,59 +11,57 @@
 
 // 1. ROOT 					==============================
 
-* {
-background : transparent !important;
-color : black !important;
-box-shadow : none !important;
-text-shadow : none !important;
-filter : none !important;
+* { 
+background : transparent !important; 
+color : black !important; 
+box-shadow : none !important; 
+text-shadow : none !important; 
+filter : none !important; 
 -ms-filter : none !important; }
 
-@page {
+@page { 
 margin : 0.5cm; }
 
 // 2. TYPOGRAPHY 			==============================
 
-h2, h3 {
-orphans : 3;
-widows : 3;
+h2, h3 { 
+orphans : 3; 
+widows : 3; 
 page-break-after : avoid; }
 
-p {
-orphans : 3;
+p { 
+orphans : 3; 
 widows : 3; }
 
-pre, blockquote {
-border : 1px solid $grey;
+pre, blockquote { 
+border : 1px solid $grey; 
 page-break-inside : avoid; }
 
-abbr[title]:after {
+abbr[title]:after { 
 content: " (" attr(title) ")"; }
 
 // 3. COLOUR 				==============================
 
-a {
-&, &:visited {
+a, a:visited { 
 text-decoration : underline; }
 
-&[href]:after {
+a[href]:after { 
 content : " (" attr(href) ")"; }
 
-&[href^="javascript:"]:after,
-&[href^="#"]:after {
+a[href^="javascript:"]:after, 
+a[href^="#"]:after { 
 content : ""; }
-}
 
 // 4. TEXTURE 				==============================
 
-img {
+img { 
 max-width : 100% !important;
 page-break-inside : avoid; }
 
-thead {
-display : table-header-group; }
+thead { 
+display : table-header-group; } 
 
-tr {
+tr { 
 page-break-inside : avoid; }
 
 // 5. ELEMENTS 				==============================
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 91ec6d3..251119a 100755
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -14,6 +10,6 @@
 /* Reset =================================================== */
 
 html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%;
-vertical-align : baseline; background : transparent; }
+vertical-align : baseline; background : transparent; }									
 
 article, aside, figure, footer, header, hgroup, nav, section { display : block; }
\ No newline at end of file
diff --git a/scss/_site.scss b/scss/_site.scss
index 490e08d..7c79568 100755
--- a/scss/_site.scss
+++ b/scss/_site.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,14 +12,14 @@
 // 1. ROOT 					==============================
 
 html {
-background : $bodycolor;
+background : $bodycolor; 
 font-size : 62.5%;
--webkit-overflow-scrolling : touch;
--webkit-tap-highlight-color : lighten($basecolor, 75%);
--webkit-text-size-adjust : 100%;
+-webkit-overflow-scrolling : touch; 
+-webkit-tap-highlight-color : lighten($basecolor, 75%); 
+-webkit-text-size-adjust : 100%; 
 -ms-text-size-adjust : 100%; }
 
-body {
+body { 
 margin : 0;
 padding : 0;
 width : 100%;
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 89bcfd3..9d2bb4b 100755
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -31,11 +27,10 @@ line-height : $baselineheight;
 text-align : left; }
 
 th {
-font-weight : bold;
+font-weight : bold; }
 
-thead & {
+thead th {
 vertical-align : bottom; }
-}
 
 colgroup + thead tr:first-child th,
 colgroup + thead tr:first-child td,
@@ -43,21 +38,17 @@ thead:first-child tr:first-child th,
 thead:first-child tr:first-child td {
 border-top : 0; }
 
-tbody {
-& + & {
+tbody + tbody {
 border-top : $tableborderwidth * 2 $tableborderstyle $tableborder; }
 
-tr {
-td, th {
+tbody tr td,
+tbody tr th {
 @include transition(background-color .25s 0 linear); }
 
-&:hover {
-td, th {
+tbody tr:hover td,
+tbody tr:hover th {
 background-color : $tablehover; }
 }
-}
-}
-}
 
 // CONDENSED ====================================================
 
@@ -90,11 +81,10 @@ border-top : 0; }
 
 .table-striped {
 
-tbody tr:nth-child(odd) {
-td, th {
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
 background-color : $tablestripe; }
 }
-}
 
 
 
diff --git a/scss/_texture.scss b/scss/_texture.scss
index 96cf62b..c7f0711 100755
--- a/scss/_texture.scss
+++ b/scss/_texture.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -17,7 +13,7 @@
 
 // For more alert styles:
 // http://twitter.github.com/bootstrap/components.html#alerts"
-// https://github.com/twitter/bootstrap/blob/master/less/alerts.less"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts"
 
 .alert {
 margin-bottom : $baselineheight;
@@ -164,7 +160,7 @@ color : $white; }
 @mixin warninggrad {
 @include vertical($warningcolor, darken($warningcolor, 10%)); }
 
-// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins
 
 // WELL ====================================================
 
diff --git a/scss/_typography.scss b/scss/_typography.scss
index dce0aba..ad61476 100755
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -27,12 +23,10 @@ font-weight : $baseheadingfontweight;
 color : $baseheadingfontcolor;
 text-rendering : optimizelegibility; }
 
-h1,
-h2 {
-small {
+h1 small,
+h2 small {
 font-weight : normal;
 color : $lightgrey; }
-}
 
 h1,
 .h1 {
@@ -73,17 +67,17 @@ text-transform : uppercase; }
 
 // header
 
-.header {
-h1, h2, h3 {
+.header h1,
+.header h2,
+.header h3 {
 float : left;
 margin-right : $gutterwidth;
-}
 
 a {
 display : block;
 position : relative;
 top : 6px;
-float: right;
+float : right;
 padding : 4px 12px;
 @include font-size(14);
 background-color : lighten($basecolor, 75%); }
@@ -92,17 +86,14 @@ background-color : lighten($basecolor, 75%); }
 background-color : lighten($basecolor, 75%); }
 }
 
-.header {
-.a-rss {
-&, &:hover {
+.header .a-rss,
+.header .a-rss:hover {
 float : left;
 width : 16px;
 height : 16px;
 padding : 0;
 background : transparent url(../img/a-rss.png) no-repeat 0 0;
 @include hide-text; }
-}
-}
 
 // TYPOGRAPHY ====================================================
 
@@ -121,12 +112,12 @@ small {
 ul,
 ol {
 margin : 0 0 $baselineheight #{-$gutterwidth};
-padding : 0 0 0 $gutterwidth;
+padding : 0 0 0 $gutterwidth; }
 
-li & {
+li ul,
+li ol {
 margin : 0;
 @include font-size(16); }
-}
 
 // blockquote
 
@@ -140,11 +131,12 @@ font-style : normal; }
 q {
 quotes : none; }
 
-blockquote, q {
-&:before, &:after {
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
 content : '';
 content : none; }
-}
 
 cite {
 font-style : normal; }
@@ -166,7 +158,7 @@ clear : left;
 width : 20.25%;
 text-align : right; }
 
-.dl-horizontal dd {
+dd {
 margin-left : 22.78%; }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 40ea78b..18f9b5f 100755
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -3,29 +3,12 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 /* Variables =================================================== */
 
-// 1. COLOUR 				==============================
-
-$basecolor 		: rgb(45,53,62);
-$compcolor 		: invert($basecolor);
-$bordercolor    : lighten($basecolor, 60%);
-
-// Links
-
-$linkcolor 		    : rgb(1,53,104);
-$linkcolorhover 	: darken($linkcolor, 10);
-$linkcolorvisited   : darken($linkcolorhover, 10);
-$linkcolorfocus 	: darken($linkcolorvisited, 10);
-
 // greyscale
 
 $black 			: rgb(0,0,0);
@@ -35,21 +18,12 @@ $lightgrey 		: lighten($black, 75%);
 $lightergrey 	: lighten($black, 90%);
 $white 			: rgb(255,255,255);
 
-// colour palettes
-
-$alertcolor 	: rgb(252,248,227);
-$errorcolor 	: rgb(218,79,73);
-$infocolor 		: rgb(217,237,247);
-$inverscolor 	: rgb(65,65,65);
-$successcolor 	: rgb(91,183,91);
-$warningcolor 	: rgb(250,167,50);
-
-// 2. ROOT 					==============================
+// 1. ROOT 					==============================
 
 $bodycolor : $white;
 $textcolor : black;
 
-// 3. TYPOGRAPHY 			==============================
+// 2. TYPOGRAPHY 			==============================
 
 $basefont : "Helvetica Neue", Helvetica, Arial, sans-serif;
 $basefontsize : 16;
@@ -63,6 +37,28 @@ $altlineheight : 1.35em;
 
 $codefont : Monaco, Courier New, monospace;
 
+// 3. COLOUR 				==============================
+
+$basecolor 		: rgb(45,53,62);
+$compcolor 		: adjust-hue($basecolor, 180);
+$bordercolor    : lighten($basecolor, 60%);
+
+// Links
+
+$linkcolor 		    : rgb(1,53,104);
+$linkcolorhover 	: darken($linkcolor, 10);
+$linkcolorvisited   : darken($linkcolorhover, 10);
+$linkcolorfocus 	: darken($linkcolorvisited, 10);
+
+// colour palettes
+
+$alertcolor 	: rgb(252,248,227);
+$errorcolor 	: rgb(218,79,73);
+$infocolor 		: rgb(217,237,247);
+$inverscolor 	: rgb(65,65,65);
+$successcolor 	: rgb(91,183,91);
+$warningcolor 	: rgb(250,167,50);
+
 // 4. TEXTURE 				==============================
 
 // alert
diff --git a/scss/upstarts/320andup-modules/.DS_Store b/scss/upstarts/320andup-modules/.DS_Store
deleted file mode 100644
index 8d3675d..0000000
Binary files a/scss/upstarts/320andup-modules/.DS_Store and /dev/null differ
diff --git a/scss/upstarts/320andup-modules/_upstart.scss b/scss/upstarts/320andup-modules/_upstart.scss
index c95ae6f..8834882 100755
--- a/scss/upstarts/320andup-modules/_upstart.scss
+++ b/scss/upstarts/320andup-modules/_upstart.scss
@@ -5,27 +5,22 @@
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 .grid {
 margin-bottom : $baseline;
-border-bottom : 1px dashed lighten($basecolor, 60%);
+border-bottom : 1px dashed lighten($basecolor, 60%); }
 
-&:last-child {
+.grid:last-child {
 margin-bottom : 0;
 border-bottom-width : 0; }
-}
 
 .furniture-letter {
-overflow : hidden;
+overflow : hidden; }
 
-& span {
+.furniture-letter span {
 display : block;
 float : left;
 margin : 0 12px 0 0;
@@ -37,7 +32,6 @@ color : $white;
 font-weight : bold;
 line-height : 44px;
 text-align : center; }
-}
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -54,24 +48,22 @@ text-align : center; }
 
 // .grids-two
 
-.grids-two {
-.grid {
-width : 43.03%;
+.grids-two .grid {
+width : 43.03%; 
 margin-bottom : 0;
 border-bottom-width : 0; }
 
-.grid-1 {
+.grids-two .grid-1 {
 float : left; }
 
-.grid-2 {
-float: right; }
-}
+.grids-two .grid-2 {
+float : right; }
 
 // grids-three
 
 .grids-three .grid-a {
 float : left;
-width : 31.64%;
+width : 31.64%; 
 margin-right : 2.53%; }
 
 // grids-four
@@ -88,42 +80,39 @@ margin-right : 2.53%; }
 
 // grids-three
 
-.grids-three {
-.grid {
+.grids-three .grid {
 float : left;
 width : 31.64%;
 margin : 0 2.53% 0 0;
 border-bottom-width : 0; }
 
-.grid-3 {
-float: right;
+.grids-three .grid-3 {
+float : right;
 margin-right : 0; }
 
-.grid .grid-a {
-float : none;
+.grids-three .grid .grid-a {
+float : none; 
 width : 100%;
 margin-right : 0;
 margin-bottom : $baseline / 2; }
-}
 
 // grids-four
 
-.grids-four {
-.grid {
-float: left;
+.grids-four .grid {
+float : left;
 width : 20.25%;
 margin : 0 6.32% 0 0;
 border-bottom-width : 0; }
 
-.grid-4 {
-float: right;
+.grids-four .grid-4 {
+float : right;
 margin-right : 0; }
 
-.grid .grid-a {
-float : none;
-width : 100%;
+.grids-four .grid .grid-a {
+float : none; 
+width : 100%; 
 margin-right : 0; }
-}
+
 }
 
 // 1382px
@@ -135,5 +124,5 @@ margin-right : 0; }
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */
+/* Styles */ 
 }
\ No newline at end of file
diff --git a/scss/upstarts/320andup-modules/example.html b/scss/upstarts/320andup-modules/example.html
index edd227b..87abbb7 100755
--- a/scss/upstarts/320andup-modules/example.html
+++ b/scss/upstarts/320andup-modules/example.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
diff --git a/scss/upstarts/320andup-modules/index.html b/scss/upstarts/320andup-modules/index.html
index 5b423dd..8c2a79a 100755
--- a/scss/upstarts/320andup-modules/index.html
+++ b/scss/upstarts/320andup-modules/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 <meta http-equiv="cleartype" content="on">
diff --git a/scss/upstarts/320andup-panels/_upstart.scss b/scss/upstarts/320andup-panels/_upstart.scss
index b65f462..654a1fa 100755
--- a/scss/upstarts/320andup-panels/_upstart.scss
+++ b/scss/upstarts/320andup-panels/_upstart.scss
@@ -5,15 +5,11 @@
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
-// HEADS UP: 320 and Up Panels Upstart is dependent on
+// HEADS UP: 320 and Up Panels Upstart is dependent on 
 // grid styles from Modules Upstart. If you’re importing it
-// you’re ready to go. Otherwise, import it or copy and paste
+// you’re ready to go. Otherwise, import it or copy and paste 
 // its styles here.
 
 // ==========================================================
@@ -25,13 +21,12 @@ margin-bottom : $baseline;
 padding : $baseline;
 background-color : lighten($basecolor, 75%);
 border-top : 2px solid lighten($basecolor, 60%);
-border-bottom : 2px solid lighten($basecolor, 60%);
+border-bottom : 2px solid lighten($basecolor, 60%); }
 
-.grids {
+.full .grids {
 width : 90%;
-margin : 0 auto;
+margin : 0 auto; 
 padding : $baseline 0; }
-}
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -47,25 +42,20 @@ padding : $baseline 0; }
 @media only screen and (min-width: 768px) {
 
 // Extra wide grid units
-.special {
-.grids-three, .grids-four {
-.grid-a {
+.special .grids-three .grid-a,
+.special .grids-four .grid-a {
 width : 43.03%; }
-}
-}
+
 }
 
 // 992px
 @media only screen and (min-width: 992px) {
 
 // Extra wide grid units
-.special {
-.grids-three, .grids-four {
-.grid-a {
+.special .grids-three .grid-a,
+.special .grids-four .grid-a {
 width : 100%; }
 }
-}
-}
 
 // 1382px
 @media only screen and (min-width: 1382px) {
@@ -76,5 +66,5 @@ width : 100%; }
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */
+/* Styles */ 
 }
\ No newline at end of file
diff --git a/scss/upstarts/320andup-panels/index.html b/scss/upstarts/320andup-panels/index.html
index 9854266..0e7b377 100755
--- a/scss/upstarts/320andup-panels/index.html
+++ b/scss/upstarts/320andup-panels/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
diff --git a/scss_compass/320andup_scss_compass.scss b/scss_compass/320andup_scss_compass.scss
index df29352..f67cbe2 100755
--- a/scss_compass/320andup_scss_compass.scss
+++ b/scss_compass/320andup_scss_compass.scss
@@ -3,10 +3,6 @@
 320 and Up by Andy Clarke
 Version: 3.0
 URL: http://stuffandnonsense.co.uk/projects/320andup/
-
-Sass Port by Jina Bolton
-URL: http://sushiandrobots.com
-
 Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 ============================================================ */
@@ -20,7 +16,8 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 @import "reset";
 
 // Variables and mixins
-@import "variables", "mixins";
+@import "variables";
+@import "mixins";
 
 // Site wide styles (html, body)
 @import "site";
@@ -71,32 +68,32 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 //  10. MEDIA QUERIES 		==============================
 
 @media print {
-  @import "print";
+@import "print";
 }
 
 // 480px
 @media only screen and (min-width: 480px) {
-  @import "480";
+@import "480";
 }
 
 // 600px
 @media only screen and (min-width: 600px) {
-  @import "600";
+@import "600";
 }
 
 // 768px
 @media only screen and (min-width: 768px) {
-  @import "768";
+@import "768";
 }
 
 // 992px
 @media only screen and (min-width: 992px) {
-  @import "992";
+@import "992";
 }
 
 // 1382px
 @media only screen and (min-width: 1382px) {
-  @import "1382";
+@import "1382";
 }
 
 // 2x
@@ -104,9 +101,9 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-  @import "2x";
-}
+@import "2x"; }
 
 //  11. UPSTARTS 			==============================
 
-@import "upstarts/320andup-modules/upstart", "upstarts/320andup-panels/upstart";
\ No newline at end of file
+@import "upstarts/320andup-modules/upstart";
+@import "upstarts/320andup-panels/upstart";
\ No newline at end of file
diff --git a/scss_compass/_1382.scss b/scss_compass/_1382.scss
index 71e91b0..86b0fd8 100755
--- a/scss_compass/_1382.scss
+++ b/scss_compass/_1382.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,8 +12,7 @@
 // 1. ROOT 					==============================
 
 body {
-  max-width : 1440px;
-}
+max-width : 1440px; }
 
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
diff --git a/scss_compass/_2x.scss b/scss_compass/_2x.scss
index 2669ed2..da3d729 100755
--- a/scss_compass/_2x.scss
+++ b/scss_compass/_2x.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss_compass/_480.scss b/scss_compass/_480.scss
index 10c34a8..e4ec055 100755
--- a/scss_compass/_480.scss
+++ b/scss_compass/_480.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss_compass/_600.scss b/scss_compass/_600.scss
index 91c96c1..0ad8e66 100755
--- a/scss_compass/_600.scss
+++ b/scss_compass/_600.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss_compass/_768.scss b/scss_compass/_768.scss
index e48e299..0e01478 100755
--- a/scss_compass/_768.scss
+++ b/scss_compass/_768.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,9 +12,8 @@
 // 1. ROOT 					==============================
 
 body {
-  display : table;
-  border-collapse : collapse;
-}
+display : table;
+border-collapse : collapse; }
 
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
@@ -29,18 +24,16 @@ body {
 //   BANNER 				==============================
 
 [role="banner"] a[href="#navigation"] {
-  @include hidden;
-}
+@include hidden; }
 
 //   NAVIGATION 			==============================
 
 [role="navigation"] {
-  display : table-header-group;
+display : table-header-group;
 
-  p {
-    margin : 0 auto;
-    width : 90%;
-  }
+p {
+margin : 0 auto;
+width : 90%; }
 }
 
 //   CONTENT 				==============================
diff --git a/scss_compass/_992.scss b/scss_compass/_992.scss
index cb0b7cb..9a45c64 100755
--- a/scss_compass/_992.scss
+++ b/scss_compass/_992.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
diff --git a/scss_compass/_buttons.scss b/scss_compass/_buttons.scss
index 71a4d0e..a045c80 100755
--- a/scss_compass/_buttons.scss
+++ b/scss_compass/_buttons.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -14,202 +10,158 @@
 /* Buttons =================================================== */
 
 .btn {
-  display : inline-block;
-  *display : inline;
-  /* IE7 inline-block hack */
-  @include has-layout-zoom;
-  padding : 6px 11px 6px;
-  margin-bottom : 0;
-  *margin-left : .3em;
-  @include font-size(12);
-  font: {
-    weight : bold;
-    family : $basefont;
-  }
-  line-height : $baselineheight;
-  color : $buttoncolor;
-  text-align : center;
-  vertical-align : middle;
-  background-color : $buttonbackground;
-  @include greygrad;
-  border : $buttonborderwidth $buttonborderstyle $buttonbordercolor {
-    bottom-color : $buttonbottombordercolor;
-  }
-  @include border-radius(4px);
-  cursor : pointer;
-
-  &:visited,
-  &:hover {
-    color : $buttoncolor;
-    text-decoration : none;
-  }
+display : inline-block;
+*display : inline;
+/* IE7 inline-block hack */
+*zoom : 1;
+padding : 6px 11px 6px;
+margin-bottom : 0;
+font-family : $basefont;
+@include font-size(12);
+font-weight : bold;
+line-height : $baselineheight;
+color : $buttoncolor;
+text-align : center;
+vertical-align : middle;
+background-color : $buttonbackground;
+@include greygrad;
+border : $buttonborderwidth $buttonborderstyle $buttonbordercolor;
+border-bottom-color : $buttonbottombordercolor;
+@include border-radius(4px);
+cursor : pointer;
+*margin-left : .3em;
+
+&:visited,
+&:hover {
+color : $buttoncolor;
+text-decoration : none; }
 }
 
 input[type="submit"].btn:hover {
-  border-color : $buttonbordercolor;
-}
+border-color : $buttonbordercolor; }
 
 .btn:first-child {
-  *margin-left : 0;
-}
+*margin-left : 0; }
 
 // disabled
 
 .btn-disabled {
-  @include opacity(.5);
-  cursor : default;
-}
+@include opacity(.5);
+cursor : default; }
 
 // info
 
 .btn-info {
-  @include infograd;
-  border: {
-    color : darken($infocolor, 15%);
-    bottom-color : darken($infocolor, 20%);
-  }
-  color : darken($infocolor, 50%);
-
-  &:visited,
-  &:hover {
-    color : darken($infocolor, 50%);
-  }
+@include infograd;
+border-color : darken($infocolor, 15%);
+border-bottom-color : darken($infocolor, 20%);
+color : darken($infocolor, 50%);
+
+&:visited,
+&:hover {
+color : darken($infocolor, 50%); }
 }
 
 // inverse
 
 .btn-inverse {
-  @include inversegrad;
-  border: {
-    color : darken($inverscolor, 15%);
-    bottom-color : darken($inverscolor, 20%);
-  }
-  color : $white;
-
-  &:visited,
-  &:hover {
-    color : $white;
-  }
+@include inversegrad;
+border-color : darken($inverscolor, 15%);
+border-bottom-color : darken($inverscolor, 20%);
+color : $white;
+
+&:visited,
+&:hover {
+color : $white; }
 }
 
 // primary
 
 .btn-primary {
-  @include basegrad;
-  border: {
-    color : darken($basecolor, 15%);
-    bottom-color : darken($basecolor, 20%);
-  }
-  color : $white;
-
-  &:visited,
-  &:hover {
-    color : $white;
-  }
+@include basegrad;
+border-color : darken($basecolor, 15%);
+border-bottom-color : darken($basecolor, 20%);
+color : $white;
+
+&:visited,
+&:hover {
+color : $white; }
 }
 
 // success
 
 .btn-success {
-  @include successgrad;
-  border: {
-    color : darken($successcolor, 15%);
-    bottom-color : darken($successcolor, 20%);
-  }
-}
+@include successgrad;
+border-color : darken($successcolor, 15%);
+border-bottom-color : darken($successcolor, 20%); }
 
 // warning
 
 .btn-warning {
-  @include warninggrad;
-  border: {
-    color : darken($warningcolor, 15%);
-    bottom-color : darken($warningcolor, 20%);
-  }
-}
+@include warninggrad;
+border-color : darken($warningcolor, 15%);
+border-bottom-color : darken($warningcolor, 20%); }
 
 // sizes
 
 .btn-extlarge {
-  padding : 11px 22px;
-  @include font-size(21);
-  @include border-radius(4px);
-}
+padding : 11px 22px;
+@include font-size(21);
+@include border-radius(4px); }
 
 .btn.btn-large {
-  *padding: {
-    top : 7px;
-    bottom : 7px;
-  }
-}
+*padding-top : 7px;
+*padding-bottom : 7px; }
 
 .btn-large {
-  padding : 11px 22px;
-  @include font-size(14);
-  line-height : normal;
-  @include border-radius(4px);
-}
+padding : 11px 22px;
+@include font-size(14);
+line-height : normal;
+@include border-radius(4px); }
 
 .btn-small {
-  padding : 6px 10px;
-  @include font-size(11);
-  line-height : 16px;
-}
+padding : 6px 10px;
+@include font-size(11);
+line-height : 16px; }
 
 .btn-mini {
-  padding : 3px 5px;
-  @include font-size(11);
-  line-height : 14px;
-}
+padding : 3px 5px;
+@include font-size(11);
+line-height : 14px; }
 
 .btn-group {
-  position : relative;
-  @include has-layout-zoom;
-  *margin-left : .3em;
-  margin-bottom : $baseline;
-
-  .btn {
-    position : relative;
-    @include float-left;
-    margin-left : -1px;
-    @include border-radius(0);
-
-    &:first-child {
-      margin-left : 0;
-      @include border-corner-radius(top, right, 2px);
-      @include border-corner-radius(bottom, left, 2px);
-    }
-
-    &:last-child {
-      @include border-corner-radius(bottom, right, 2px);
-      @include border-corner-radius(top, left, 2px);
-    }
-
-    &.large {
-      &:first-child {
-        margin-left : 0;
-        @include border-corner-radius(top, right, 4px);
-        @include border-corner-radius(bottom, left, 4px);
-      }
-
-      &:last-child {
-        @include border-corner-radius(bottom, right, 4px);
-        @include border-corner-radius(top, left, 4px);
-      }
-    }
-  }
+position : relative;
+*zoom : 1;
+*margin-left : .3em;
+margin-bottom : $baseline; }
+
+.btn-group .btn {
+position : relative;
+float : left;
+margin-left : -1px;
+@include border-radius(0); }
+
+.btn-group .btn:first-child {
+margin-left : 0;
+@include border-left-radius(2px);
 }
 
+.btn-group .btn:last-child {
+@include border-right-radius(2px); }
+
+.btn-group .btn.large:first-child {
+margin-left : 0;
+@include border-left-radius(4px); }
+
+.btn-group .btn.large:last-child {
+@include border-right-radius(4px); }
+
 .btn-toolbar {
-  clear : both;
-  margin: {
-    top : $baselineheight / 2;
-    bottom : $baselineheight / 2;
-  }
-
-  .btn-group {
-    display : inline-block;
-    *display : inline;
-    @include has-layout-zoom;
-  }
-}
\ No newline at end of file
+clear : both;
+margin-top : $baselineheight / 2;
+margin-bottom : $baselineheight / 2; }
+
+.btn-toolbar .btn-group {
+display : inline-block;
+*display : inline;
+*zoom : 1; }
\ No newline at end of file
diff --git a/scss_compass/_colour.scss b/scss_compass/_colour.scss
index 72e6a03..2930fd5 100755
--- a/scss_compass/_colour.scss
+++ b/scss_compass/_colour.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -17,20 +13,144 @@
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
 
-a {
-  @include hover-link;
-  @include link-colors($linkcolor, $linkcolorhover, $linkcolorfocus, $linkcolorvisited, $linkcolorfocus);
+a { 
+text-decoration : none;
+color : $linkcolor; 
 
-  &:focus {
-    outline : thin dotted;
-  }
+&:visited { 
+color : $linkcolorvisited; }
 
-  &:hover,
-  &:active {
-    @include reset-focus;
-  }
+&:hover { 
+text-decoration : underline;
+color : $linkcolorhover; }
+
+&:focus { 
+outline : thin dotted; 
+color : $linkcolorfocus; }
+
+&:hover, 
+&:active { 
+outline : 0; }
 }
 
+::-moz-selection { 
+background-color : lighten($basecolor, 65%); 
+color : $basecolor; 
+text-shadow : none; }  
+	
+::selection { 
+background-color : lighten($basecolor, 65%); 
+color : $basecolor; 
+text-shadow : none; }
+
+// swatches
+
+.swatch {
+margin : 0 0 $baselineheight 0;
+padding : 0; }
+
+.swatch-row {
+display : block; 
+margin : 0;
+padding : 0;
+width : 200px; }
+
+.swatch-row-one {
+background-color : $black; }
+
+.swatch-row-two {
+background-color : $white; }
+
+.swatch-row span {
+display : block;
+float : left; 
+width : 50px;
+height : 50px; }
+
+// base
+
+.swatch-base span:nth-child(1) {
+@include background-alpha($basecolor, .9); }
+
+.swatch-base span:nth-child(2) {
+@include background-alpha($basecolor, .8); }
+
+.swatch-base span:nth-child(3) {
+@include background-alpha($basecolor, .7); }
+
+.swatch-base span:nth-child(4) {
+@include background-alpha($basecolor, .6); }
+
+// alert
+
+.swatch-alert span:nth-child(1) {
+@include background-alpha($alertcolor, .9); }
+
+.swatch-alert span:nth-child(2) {
+@include background-alpha($alertcolor, .8); }
+
+.swatch-alert span:nth-child(3) {
+@include background-alpha($alertcolor, .7); }
+
+.swatch-alert span:nth-child(4) {
+@include background-alpha($alertcolor, .6); }
+
+// error
+
+.swatch-error span:nth-child(1) {
+@include background-alpha($errorcolor, .9); }
+
+.swatch-error span:nth-child(2) {
+@include background-alpha($errorcolor, .8); }
+
+.swatch-error span:nth-child(3) {
+@include background-alpha($errorcolor, .7); }
+
+.swatch-error span:nth-child(4) {
+@include background-alpha($errorcolor, .6); }
+
+// info
+
+.swatch-info span:nth-child(1) {
+@include background-alpha($infocolor, .9); }
+
+.swatch-info span:nth-child(2) {
+@include background-alpha($infocolor, .8); }
+
+.swatch-info span:nth-child(3) {
+@include background-alpha($infocolor, .7); }
+
+.swatch-info span:nth-child(4) {
+@include background-alpha($infocolor, .6); }
+
+// success
+
+.swatch-success span:nth-child(1) {
+@include background-alpha($successcolor, .9); }
+
+.swatch-success span:nth-child(2) {
+@include background-alpha($successcolor, .8); }
+
+.swatch-success span:nth-child(3) {
+@include background-alpha($successcolor, .7); }
+
+.swatch-success span:nth-child(4) {
+@include background-alpha($successcolor, .6); }
+
+// warning
+
+.swatch-warning span:nth-child(1) {
+@include background-alpha($warningcolor, .9); }
+
+.swatch-warning span:nth-child(2) {
+@include background-alpha($warningcolor, .8); }
+
+.swatch-warning span:nth-child(3) {
+@include background-alpha($warningcolor, .7); }
+
+.swatch-warning span:nth-child(4) {
+@include background-alpha($warningcolor, .6); }
+
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
diff --git a/scss_compass/_elements.scss b/scss_compass/_elements.scss
index 1f02207..2365d9f 100755
--- a/scss_compass/_elements.scss
+++ b/scss_compass/_elements.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,62 +12,54 @@
 // FIGURES & IMAGES =============================================================================
 
 hr {
-  display : block;
-  margin : 1em 0;
-  padding : 0;
-  height : 1px;
-  border: 0 {
-    top : 1px solid $bordercolor;
-    bottom : 1px solid $white;
-  }
-}
+display : block;
+margin : 1em 0;
+padding : 0;
+height : 1px;
+border : 0;
+border-top : 1px solid $bordercolor;
+border-bottom : 1px solid $white; }
 
 // img
 
 img {
-  max-width : 100%;
-  border-width : 0;
-  vertical-align : middle;
-  -ms-interpolation-mode : bicubic;
-}
+max-width : 100%;
+border-width : 0;
+vertical-align : middle;
+-ms-interpolation-mode : bicubic; }
 
 svg:not(:root) {
-  overflow : hidden;
-}
+overflow : hidden; }
 
 // figure
 
 figure {
-  margin-bottom : $baselineheight;
-
-  & img {
-    margin-bottom : $baselineheight / 4;
-  }
-
-  figcaption {
-    display : block;
-    font-weight : normal;
-    @include font-size(14);
-    color : $grey;
-  }
+margin-bottom : $baselineheight;
+
+img {
+margin-bottom : $baselineheight / 4; }
+
+figcaption {
+display : block;
+font-weight : normal;
+@include font-size(14);
+color : $grey; }
 }
 
 // list-bordered
 
 .list-bordered {
-  @include no-bullets;
-  margin : 0 0 $baselineheight;
-  padding : 0;
-
-  li {
-    margin-bottom : $baselineheight / 4;
-    padding-bottom : $baselineheight / 4;
-    border-bottom : 1px dashed $bordercolor;
-
-    &:last-child {
-      margin-bottom : 0;
-      padding-bottom : 0;
-      border-bottom-width : 0;
-    }
-  }
+list-style-type : none;
+margin : 0 0 $baselineheight 0;
+padding : 0;
+
+li {
+margin-bottom : $baselineheight / 4;
+padding-bottom : $baselineheight / 4;
+border-bottom : 1px dashed $bordercolor; }
+
+li:last-child {
+margin-bottom : 0;
+padding-bottom : 0;
+border-bottom-width : 0; }
 }
\ No newline at end of file
diff --git a/scss_compass/_font-awesome.scss b/scss_compass/_font-awesome.scss
index e0231f1..06c9aad 100755
--- a/scss_compass/_font-awesome.scss
+++ b/scss_compass/_font-awesome.scss
@@ -1,10 +1,6 @@
 // ==========================================================
 
 /* Font Awesome: http://fortawesome.github.com/Font-Awesome/
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 
 License
 -------------------------------------------------------
@@ -18,234 +14,229 @@ or mobile software). */
 
 // ==========================================================
 
-@include font-face('FontAwesome', font-files('/fonts/fontawesome-webfont.woff', woff, '/fonts/fontawesome-webfont.ttf', truetype, '/fonts/fontawesome-webfont.svgz#FontAwesomeRegular', svg, '/fonts/fontawesome-webfont.svg#FontAwesomeRegular', svg), '/fonts/fontawesome-webfont.eot');
+// TO DO: Implement Compass font styles: http://compass-style.org/examples/compass/css3/font-face/
+
+@font-face {
+font-family: 'FontAwesome';
+src: url('../fonts/fontawesome-webfont.eot');
+src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
+url('../fonts/fontawesome-webfont.woff') format('woff'),
+url('../fonts/fontawesome-webfont.ttf') format('truetype'),
+url('../fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
+url('../fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
+font-weight : normal;
+font-style : normal; }
 
 [class^="icon-"],
 [class*=" icon-"] {
-  display : inline;
-  width : auto;
-  height : auto;
-  line-height : inherit;
-  vertical-align : baseline;
-  background: {
-    image : none;
-    position : 0 0;
-    repeat : repeat;
-  }
-}
+display : inline;
+width : auto;
+height : auto;
+line-height : inherit;
+vertical-align : baseline;
+background-image : none;
+background-position : 0 0;
+background-repeat : repeat; }
 
 li[class^="icon-"],
 li[class*=" icon-"] {
-  display : block;
-}
+display : block; }
 
-[class^="icon-"],
-[class*=" icon-"] {
-  &:before {
-    font: {
-      style : normal;
-      weight : normal;
-      family : FontAwesome;
-    }
-    display : inline-block;
-    text-decoration : inherit;
-  }
-
-  a & {
-    display : inline-block;
-    text-decoration : inherit;
-  }
-}
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+font-family : FontAwesome;
+font-weight : normal;
+font-style : normal;
+display : inline-block;
+text-decoration : inherit; }
+
+a [class^="icon-"],
+a [class*=" icon-"] {
+display : inline-block;
+text-decoration : inherit; }
 
 /* makes the font 33% larger relative to the icon container */
 .icon-large:before {
-  vertical-align : top;
-  font-size : 4/3em;
+vertical-align : top;
+font-size : 4/3em; }
+
+.btn {
+[class^="icon-"],
+[class*=" icon-"] {
+/* keeps button heights with and without icons the same */
+line-height : .9em; }
 }
 
+li {
 [class^="icon-"],
 [class*=" icon-"] {
-  .btn & {
-    /* keeps button heights with and without icons the same */
-    line-height : .9em;
-  }
-
-  li & {
-    display : inline-block;
-    width : 1.25em;
-    text-align : center;
-
-    &.icon-large  {
-      /* 1.5 increased font size for icon-large * 1.25 width */
-      width : 1.5*1.25em;
-    }
-  }
+display : inline-block;
+width : 1.25em;
+text-align : center; }
+
+.icon-large[class^="icon-"],
+.icon-large[class*=" icon-"]  {
+/* 1.5 increased font size for icon-large * 1.25 width */
+width : 1.5*1.25em; }
 }
 
 li[class^="icon-"],
 li[class*=" icon-"] {
-  @include no-bullet;
-
-  &:before {
-    text: {
-      indent: -2em;
-      align: center;
-    }
-  }
-  &.icon-large:before {
-    text-indent: -4/3em;
-  }
+margin-left: 0;
+list-style-type: none;
+
+&:before {
+text-indent: -2em;
+text-align: center;
+}
+&.icon-large:before {
+text-indent: -4/3em;
+}
 }
 
 /*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
     readers do not read off random characters that represent icons */
 
-
-$i-set: glass, music, search, envelope, heart, star, star-empty, user, film, th-large, th, th-list, ok, remove, zoom-in, zoom-out, off, signal, cog, trash, home, file, time, road, download-alt, download, upload, inbox, play-circle, repeat, refresh, list-alt, lock, flag, headphones, volume-off, volume-down, volume-up, qrcode, barcode, tag, tags, book, bookmark, print, camera, font, bold, italic, text-height, text-width, align-left, align-center, align-right, align-justify, list, indent-left, indent-right, facetime-video, picture, pencil, map-marker, adjust, tint, edit, share, check, move, step-backward, fast-backward, backward, play, pause, stop, forward, fast-forward, step-forward, eject, chevron-left, chevron-right, plus-sign, minus-sign, remove-sign, ok-sign, question-sign, info-sign, screenshot, remove-circle, ok-circle, ban-circle, arrow-left, arrow-right, arrow-up, arrow-down, share-alt, resize-full, resize-small, plus, minus, asterisk, exclamation-sign, gift, leaf, fire, eye-open, eye-close, warning-sign, plane, calendar, random, comment, magnet, chevron-up, chevron-down, retweet, shopping-cart, folder-close, folder-open, resize-vertical, resize-horizontal, bar-chart, twitter-sign, facebook-sign, camera-retro, key, cogs, comments, thumbs-up, thumbs-down, star-half, heart-empty, signout, linkedin-sign, pushpin, external-link, signin, trophy, github-sign, upload-alt, lemon;
-$i-value: false;
-
-@each $i-name in $i-set {
-
-  @if $i-name == glass             { $i-value: #{0}#{0}; }
-  @if $i-name == music             { $i-value: #{0}#{1}; }
-  @if $i-name == search            { $i-value: #{0}#{2}; }
-  @if $i-name == envelope          { $i-value: #{0}#{3}; }
-  @if $i-name == heart             { $i-value: #{0}#{4}; }
-  @if $i-name == star              { $i-value: #{0}#{5}; }
-  @if $i-name == star-empty        { $i-value: #{0}#{6}; }
-  @if $i-name == user              { $i-value: #{0}#{7}; }
-  @if $i-name == film              { $i-value: #{0}#{8}; }
-  @if $i-name == th-large          { $i-value: #{0}#{9}; }
-  @if $i-name == th                { $i-value: #{0}#{a}; }
-  @if $i-name == th-list           { $i-value: #{0}#{b}; }
-  @if $i-name == ok                { $i-value: #{0}#{c}; }
-  @if $i-name == remove            { $i-value: #{0}#{d}; }
-  @if $i-name == zoom-in           { $i-value: #{0}#{e}; }
-  @if $i-name == zoom-out          { $i-value: #{1}#{0}; }
-  @if $i-name == off               { $i-value: #{1}#{1}; }
-  @if $i-name == signal            { $i-value: #{1}#{2}; }
-  @if $i-name == cog               { $i-value: #{1}#{3}; }
-  @if $i-name == trash             { $i-value: #{1}#{4}; }
-  @if $i-name == home              { $i-value: #{1}#{5}; }
-  @if $i-name == file              { $i-value: #{1}#{6}; }
-  @if $i-name == time              { $i-value: #{1}#{7}; }
-  @if $i-name == road              { $i-value: #{1}#{8}; }
-  @if $i-name == download-alt      { $i-value: #{1}#{9}; }
-  @if $i-name == download          { $i-value: #{1}#{a}; }
-  @if $i-name == upload            { $i-value: #{1}#{b}; }
-  @if $i-name == inbox             { $i-value: #{1}#{c}; }
-  @if $i-name == play-circle       { $i-value: #{1}#{d}; }
-  @if $i-name == repeat            { $i-value: #{1}#{e}; }
-  @if $i-name == refresh           { $i-value: #{2}#{1}; }
-  @if $i-name == list-alt          { $i-value: #{2}#{2}; }
-  @if $i-name == lock              { $i-value: #{2}#{3}; }
-  @if $i-name == flag              { $i-value: #{2}#{4}; }
-  @if $i-name == headphones        { $i-value: #{2}#{5}; }
-  @if $i-name == volume-off        { $i-value: #{2}#{6}; }
-  @if $i-name == volume-down       { $i-value: #{2}#{7}; }
-  @if $i-name == volume-up         { $i-value: #{2}#{8}; }
-  @if $i-name == qrcode            { $i-value: #{2}#{9}; }
-  @if $i-name == barcode           { $i-value: #{2}#{a}; }
-  @if $i-name == tag               { $i-value: #{2}#{b}; }
-  @if $i-name == tags              { $i-value: #{2}#{c}; }
-  @if $i-name == book              { $i-value: #{2}#{d}; }
-  @if $i-name == bookmark          { $i-value: #{2}#{e}; }
-  @if $i-name == print             { $i-value: #{2}#{f}; }
-  @if $i-name == camera            { $i-value: #{3}#{0}; }
-  @if $i-name == font              { $i-value: #{3}#{1}; }
-  @if $i-name == bold              { $i-value: #{3}#{2}; }
-  @if $i-name == italic            { $i-value: #{3}#{3}; }
-  @if $i-name == text-height       { $i-value: #{3}#{4}; }
-  @if $i-name == text-width        { $i-value: #{3}#{5}; }
-  @if $i-name == align-left        { $i-value: #{3}#{6}; }
-  @if $i-name == align-center      { $i-value: #{3}#{7}; }
-  @if $i-name == align-right       { $i-value: #{3}#{8}; }
-  @if $i-name == align-justify     { $i-value: #{3}#{9}; }
-  @if $i-name == list              { $i-value: #{3}#{a}; }
-  @if $i-name == indent-left       { $i-value: #{3}#{b}; }
-  @if $i-name == indent-right      { $i-value: #{3}#{c}; }
-  @if $i-name == facetime-video    { $i-value: #{3}#{d}; }
-  @if $i-name == picture           { $i-value: #{3}#{e}; }
-  @if $i-name == pencil            { $i-value: #{4}#{0}; }
-  @if $i-name == map-marker        { $i-value: #{4}#{1}; }
-  @if $i-name == adjust            { $i-value: #{4}#{2}; }
-  @if $i-name == tint              { $i-value: #{4}#{3}; }
-  @if $i-name == edit              { $i-value: #{4}#{4}; }
-  @if $i-name == share             { $i-value: #{4}#{5}; }
-  @if $i-name == check             { $i-value: #{4}#{6}; }
-  @if $i-name == move              { $i-value: #{4}#{7}; }
-  @if $i-name == step-backward     { $i-value: #{4}#{8}; }
-  @if $i-name == fast-backward     { $i-value: #{4}#{9}; }
-  @if $i-name == backward          { $i-value: #{4}#{a}; }
-  @if $i-name == play              { $i-value: #{4}#{b}; }
-  @if $i-name == pause             { $i-value: #{4}#{c}; }
-  @if $i-name == stop              { $i-value: #{4}#{d}; }
-  @if $i-name == forward           { $i-value: #{4}#{e}; }
-  @if $i-name == fast-forward      { $i-value: #{5}#{0}; }
-  @if $i-name == step-forward      { $i-value: #{5}#{1}; }
-  @if $i-name == eject             { $i-value: #{5}#{2}; }
-  @if $i-name == chevron-left      { $i-value: #{5}#{3}; }
-  @if $i-name == chevron-right     { $i-value: #{5}#{4}; }
-  @if $i-name == plus-sign         { $i-value: #{5}#{5}; }
-  @if $i-name == minus-sign        { $i-value: #{5}#{6}; }
-  @if $i-name == remove-sign       { $i-value: #{5}#{7}; }
-  @if $i-name == ok-sign           { $i-value: #{5}#{8}; }
-  @if $i-name == question-sign     { $i-value: #{5}#{9}; }
-  @if $i-name == info-sign         { $i-value: #{5}#{a}; }
-  @if $i-name == screenshot        { $i-value: #{5}#{b}; }
-  @if $i-name == remove-circle     { $i-value: #{5}#{c}; }
-  @if $i-name == ok-circle         { $i-value: #{5}#{d}; }
-  @if $i-name == ban-circle        { $i-value: #{5}#{e}; }
-  @if $i-name == arrow-left        { $i-value: #{6}#{0}; }
-  @if $i-name == arrow-right       { $i-value: #{6}#{1}; }
-  @if $i-name == arrow-up          { $i-value: #{6}#{2}; }
-  @if $i-name == arrow-down        { $i-value: #{6}#{3}; }
-  @if $i-name == share-alt         { $i-value: #{6}#{4}; }
-  @if $i-name == resize-full       { $i-value: #{6}#{5}; }
-  @if $i-name == resize-small      { $i-value: #{6}#{6}; }
-  @if $i-name == plus              { $i-value: #{6}#{7}; }
-  @if $i-name == minus             { $i-value: #{6}#{8}; }
-  @if $i-name == asterisk          { $i-value: #{6}#{9}; }
-  @if $i-name == exclamation-sign  { $i-value: #{6}#{a}; }
-  @if $i-name == gift              { $i-value: #{6}#{b}; }
-  @if $i-name == leaf              { $i-value: #{6}#{c}; }
-  @if $i-name == fire              { $i-value: #{6}#{d}; }
-  @if $i-name == eye-open          { $i-value: #{6}#{e}; }
-  @if $i-name == eye-close         { $i-value: #{7}#{0}; }
-  @if $i-name == warning-sign      { $i-value: #{7}#{1}; }
-  @if $i-name == plane             { $i-value: #{7}#{2}; }
-  @if $i-name == calendar          { $i-value: #{7}#{3}; }
-  @if $i-name == random            { $i-value: #{7}#{4}; }
-  @if $i-name == comment           { $i-value: #{7}#{5}; }
-  @if $i-name == magnet            { $i-value: #{7}#{6}; }
-  @if $i-name == chevron-up        { $i-value: #{7}#{7}; }
-  @if $i-name == chevron-down      { $i-value: #{7}#{8}; }
-  @if $i-name == retweet           { $i-value: #{7}#{9}; }
-  @if $i-name == shopping-cart     { $i-value: #{7}#{a}; }
-  @if $i-name == folder-close      { $i-value: #{7}#{b}; }
-  @if $i-name == folder-open       { $i-value: #{7}#{c}; }
-  @if $i-name == resize-vertical   { $i-value: #{7}#{d}; }
-  @if $i-name == resize-horizontal { $i-value: #{7}#{e}; }
-  @if $i-name == bar-chart         { $i-value: #{8}#{0}; }
-  @if $i-name == twitter-sign      { $i-value: #{8}#{1}; }
-  @if $i-name == facebook-sign     { $i-value: #{8}#{2}; }
-  @if $i-name == camera-retro      { $i-value: #{8}#{3}; }
-  @if $i-name == key               { $i-value: #{8}#{4}; }
-  @if $i-name == cogs              { $i-value: #{8}#{5}; }
-  @if $i-name == comments          { $i-value: #{8}#{6}; }
-  @if $i-name == thumbs-up         { $i-value: #{8}#{7}; }
-  @if $i-name == thumbs-down       { $i-value: #{8}#{8}; }
-  @if $i-name == star-half         { $i-value: #{8}#{9}; }
-  @if $i-name == heart-empty       { $i-value: #{8}#{a}; }
-  @if $i-name == signout           { $i-value: #{8}#{b}; }
-  @if $i-name == linkedin-sign     { $i-value: #{8}#{c}; }
-  @if $i-name == pushpin           { $i-value: #{8}#{d}; }
-  @if $i-name == external-link     { $i-value: #{8}#{e}; }
-  @if $i-name == signin            { $i-value: #{9}#{0}; }
-  @if $i-name == trophy            { $i-value: #{9}#{1}; }
-  @if $i-name == github-sign       { $i-value: #{9}#{2}; }
-  @if $i-name == upload-alt        { $i-value: #{9}#{3}; }
-  @if $i-name == lemon             { $i-value: #{9}#{4}; }
-
-  .icon-#{$i-name}:before { content: "\f#{0}#{$i-value}"; }
-}
\ No newline at end of file
+.icon-glass:before              { content: "\f000"; }
+.icon-music:before              { content: "\f001"; }
+.icon-search:before             { content: "\f002"; }
+.icon-envelope:before           { content: "\f003"; }
+.icon-heart:before              { content: "\f004"; }
+.icon-star:before               { content: "\f005"; }
+.icon-star-empty:before         { content: "\f006"; }
+.icon-user:before               { content: "\f007"; }
+.icon-film:before               { content: "\f008"; }
+.icon-th-large:before           { content: "\f009"; }
+.icon-th:before                 { content: "\f00a"; }
+.icon-th-list:before            { content: "\f00b"; }
+.icon-ok:before                 { content: "\f00c"; }
+.icon-remove:before             { content: "\f00d"; }
+.icon-zoom-in:before            { content: "\f00e"; }
+.icon-zoom-out:before           { content: "\f010"; }
+.icon-off:before                { content: "\f011"; }
+.icon-signal:before             { content: "\f012"; }
+.icon-cog:before                { content: "\f013"; }
+.icon-trash:before              { content: "\f014"; }
+.icon-home:before               { content: "\f015"; }
+.icon-file:before               { content: "\f016"; }
+.icon-time:before               { content: "\f017"; }
+.icon-road:before               { content: "\f018"; }
+.icon-download-alt:before       { content: "\f019"; }
+.icon-download:before           { content: "\f01a"; }
+.icon-upload:before             { content: "\f01b"; }
+.icon-inbox:before              { content: "\f01c"; }
+.icon-play-circle:before        { content: "\f01d"; }
+.icon-repeat:before             { content: "\f01e"; }
+/* \f020 is not a valid unicode character. all shifted one down */
+.icon-refresh:before            { content: "\f021"; }
+.icon-list-alt:before           { content: "\f022"; }
+.icon-lock:before               { content: "\f023"; }
+.icon-flag:before               { content: "\f024"; }
+.icon-headphones:before         { content: "\f025"; }
+.icon-volume-off:before         { content: "\f026"; }
+.icon-volume-down:before        { content: "\f027"; }
+.icon-volume-up:before          { content: "\f028"; }
+.icon-qrcode:before             { content: "\f029"; }
+.icon-barcode:before            { content: "\f02a"; }
+.icon-tag:before                { content: "\f02b"; }
+.icon-tags:before               { content: "\f02c"; }
+.icon-book:before               { content: "\f02d"; }
+.icon-bookmark:before           { content: "\f02e"; }
+.icon-print:before              { content: "\f02f"; }
+.icon-camera:before             { content: "\f030"; }
+.icon-font:before               { content: "\f031"; }
+.icon-bold:before               { content: "\f032"; }
+.icon-italic:before             { content: "\f033"; }
+.icon-text-height:before        { content: "\f034"; }
+.icon-text-width:before         { content: "\f035"; }
+.icon-align-left:before         { content: "\f036"; }
+.icon-align-center:before       { content: "\f037"; }
+.icon-align-right:before        { content: "\f038"; }
+.icon-align-justify:before      { content: "\f039"; }
+.icon-list:before               { content: "\f03a"; }
+.icon-indent-left:before        { content: "\f03b"; }
+.icon-indent-right:before       { content: "\f03c"; }
+.icon-facetime-video:before     { content: "\f03d"; }
+.icon-picture:before            { content: "\f03e"; }
+.icon-pencil:before             { content: "\f040"; }
+.icon-map-marker:before         { content: "\f041"; }
+.icon-adjust:before             { content: "\f042"; }
+.icon-tint:before               { content: "\f043"; }
+.icon-edit:before               { content: "\f044"; }
+.icon-share:before              { content: "\f045"; }
+.icon-check:before              { content: "\f046"; }
+.icon-move:before               { content: "\f047"; }
+.icon-step-backward:before      { content: "\f048"; }
+.icon-fast-backward:before      { content: "\f049"; }
+.icon-backward:before           { content: "\f04a"; }
+.icon-play:before               { content: "\f04b"; }
+.icon-pause:before              { content: "\f04c"; }
+.icon-stop:before               { content: "\f04d"; }
+.icon-forward:before            { content: "\f04e"; }
+
+.icon-fast-forward:before       { content: "\f050"; }
+.icon-step-forward:before       { content: "\f051"; }
+.icon-eject:before              { content: "\f052"; }
+.icon-chevron-left:before       { content: "\f053"; }
+.icon-chevron-right:before      { content: "\f054"; }
+.icon-plus-sign:before          { content: "\f055"; }
+.icon-minus-sign:before         { content: "\f056"; }
+.icon-remove-sign:before        { content: "\f057"; }
+.icon-ok-sign:before            { content: "\f058"; }
+.icon-question-sign:before      { content: "\f059"; }
+.icon-info-sign:before          { content: "\f05a"; }
+.icon-screenshot:before         { content: "\f05b"; }
+.icon-remove-circle:before      { content: "\f05c"; }
+.icon-ok-circle:before          { content: "\f05d"; }
+.icon-ban-circle:before         { content: "\f05e"; }
+
+.icon-arrow-left:before         { content: "\f060"; }
+.icon-arrow-right:before        { content: "\f061"; }
+.icon-arrow-up:before           { content: "\f062"; }
+.icon-arrow-down:before         { content: "\f063"; }
+.icon-share-alt:before          { content: "\f064"; }
+.icon-resize-full:before        { content: "\f065"; }
+.icon-resize-small:before       { content: "\f066"; }
+.icon-plus:before               { content: "\f067"; }
+.icon-minus:before              { content: "\f068"; }
+.icon-asterisk:before           { content: "\f069"; }
+.icon-exclamation-sign:before   { content: "\f06a"; }
+.icon-gift:before               { content: "\f06b"; }
+.icon-leaf:before               { content: "\f06c"; }
+.icon-fire:before               { content: "\f06d"; }
+.icon-eye-open:before           { content: "\f06e"; }
+.icon-eye-close:before          { content: "\f070"; }
+.icon-warning-sign:before       { content: "\f071"; }
+.icon-plane:before              { content: "\f072"; }
+.icon-calendar:before           { content: "\f073"; }
+.icon-random:before             { content: "\f074"; }
+.icon-comment:before            { content: "\f075"; }
+.icon-magnet:before             { content: "\f076"; }
+.icon-chevron-up:before         { content: "\f077"; }
+.icon-chevron-down:before       { content: "\f078"; }
+.icon-retweet:before            { content: "\f079"; }
+.icon-shopping-cart:before      { content: "\f07a"; }
+.icon-folder-close:before       { content: "\f07b"; }
+.icon-folder-open:before        { content: "\f07c"; }
+.icon-resize-vertical:before    { content: "\f07d"; }
+.icon-resize-horizontal:before  { content: "\f07e"; }
+.icon-bar-chart:before          { content: "\f080"; }
+.icon-twitter-sign:before       { content: "\f081"; }
+.icon-facebook-sign:before      { content: "\f082"; }
+.icon-camera-retro:before       { content: "\f083"; }
+.icon-key:before                { content: "\f084"; }
+.icon-cogs:before               { content: "\f085"; }
+.icon-comments:before           { content: "\f086"; }
+.icon-thumbs-up:before          { content: "\f087"; }
+.icon-thumbs-down:before        { content: "\f088"; }
+.icon-star-half:before          { content: "\f089"; }
+.icon-heart-empty:before        { content: "\f08a"; }
+.icon-signout:before            { content: "\f08b"; }
+.icon-linkedin-sign:before      { content: "\f08c"; }
+.icon-pushpin:before            { content: "\f08d"; }
+.icon-external-link:before      { content: "\f08e"; }
+.icon-signin:before             { content: "\f090"; }
+.icon-trophy:before             { content: "\f091"; }
+.icon-github-sign:before        { content: "\f092"; }
+.icon-upload-alt:before         { content: "\f093"; }
+.icon-lemon:before              { content: "\f094"; }
\ No newline at end of file
diff --git a/scss_compass/_forms.scss b/scss_compass/_forms.scss
index e242b30..82916c8 100755
--- a/scss_compass/_forms.scss
+++ b/scss_compass/_forms.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -14,45 +10,39 @@
 /* Forms =================================================== */
 
 form {
-  margin : 0 0 $baselineheight 0;
-
-  fieldset {
-    margin-bottom : $baselineheight;
-    padding : 0;
-    border-width : 0;
-  }
-
-  legend {
-    display : block;
-    width : 100%;
-    margin-bottom : $baselineheight * 2;
-    *margin-left : -7px;
-    padding : 0;
-    color : $textcolor;
-    border : 0 {
-      bottom : $inputborderwidth $inputborderstyle $inputborder;
-    }
-    white-space : normal;
-
-    small {
-      @include font-size(14);
-      color : $lightgrey;
-    }
-  }
-
-  p {
-    margin-bottom : $baselineheight / 2;
-  }
-
-  ul {
-    @include no-bullets;
-    margin : 0 0 $baselineheight;
-    padding : 0;
-  }
-
-  br {
-    display : none;
-  }
+margin : 0 0 $baselineheight 0;
+
+fieldset {
+margin-bottom : $baselineheight;
+padding : 0;
+border-width : 0; }
+
+legend {
+display : block;
+width : 100%;
+margin-bottom : $baselineheight * 2;
+*margin-left : -7px;
+padding : 0;
+color : $textcolor;
+border : 0;
+border-bottom : $inputborderwidth $inputborderstyle $inputborder;
+white-space : normal;
+
+small {
+@include font-size(14);
+color : $lightgrey; }
+}
+
+p {
+margin-bottom : $baselineheight / 2; }
+
+ul {
+list-style-type : none;
+margin : 0 0 $baselineheight 0;
+padding : 0; }
+
+br {
+display : none; }
 }
 
 label,
@@ -60,286 +50,233 @@ input,
 button,
 select,
 textarea {
-  @include font-size(14);
-  vertical-align : baseline;
-  *vertical-align : middle;
-}
+@include font-size(14);
+vertical-align : baseline;
+*vertical-align : middle; }
 
 input,
 button,
 select,
 textarea {
-  font-family : $basefont;
-  @include box-sizing(border-box);
-}
+font-family : $basefont;
+@include box-sizing(border-box); }
 
 label {
-  display : block;
-  margin-bottom : $baseline / 8;
-  font-weight : bold;
-  color : $textcolor;
-  cursor : pointer;
-
-  input,
-  textarea,
-  select {
-    display : block;
-  }
+display : block;
+margin-bottom : $baseline / 8;
+font-weight : bold;
+color : $textcolor;
+cursor : pointer;
+
+input,
+textarea,
+select {
+display : block; }
 }
 
 input,
 textarea,
 select {
-  display : inline-block;
-  width : 100%;
-  padding : 4px;
-  margin-bottom : $baselineheight / 4;
-  background-color : $inputbackground;
-  border : $inputborderwidth $inputborderstyle $inputborder;
-  color : $textcolor;
-
-  &:hover {
-    border-color : $inputhover;
-  }
+display : inline-block;
+width : 100%;
+padding : 4px;
+margin-bottom : $baselineheight / 4;
+background-color : $inputbackground;
+border : $inputborderwidth $inputborderstyle $inputborder;
+color : $textcolor;
+
+&:hover {
+border-color : $inputhover; }
 }
 
 .input-mini {
-  width : 60px;
-}
+width : 60px; }
 
 .input-small {
-  width : 90px;
-}
+width : 90px; }
 
-input {
-  &[type="image"],
-  &[type="checkbox"],
-  &[type="radio"] {
-    width : auto;
-    height : auto;
-    padding : 0;
-    margin : 3px 0;
-    *margin-top : 0;
-    line-height : normal;
-    cursor : pointer;
-    @include border-radius(0);
-    border : 0 \9;
-  }
-
-  &[type="checkbox"],
-  &[type="radio"] {
-    @include box-sizing(border-box);
-    padding : 0;
-    *width : 13px;
-    *height : 13px;
-  }
-
-  &[type="image"] {
-    border : 0;
-    @include box-shadow(none);
-  }
-
-  &[type="file"] {
-    width : auto;
-    padding : initial;
-    line-height : initial;
-    border : initial;
-    background: {
-      color : transparent;
-      color : initial;
-    }
-    @include box-shadow(none);
-  }
-
-  &[type="button"],
-  &[type="reset"],
-  &[type="submit"] {
-    width : auto;
-    height : auto;
-    cursor : pointer;
-    *overflow : visible;
-  }
-}
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+width : auto;
+height : auto;
+padding : 0;
+margin : 3px 0;
+*margin-top : 0;
+line-height : normal;
+cursor : pointer;
+@include border-radius(0);
+border : 0 \9; }
+
+input[type="checkbox"],
+input[type="radio"] {
+@include box-sizing(border-box);
+padding : 0;
+*width : 13px;
+*height : 13px; }
+
+input[type="image"] {
+border : 0;
+@include box-shadow(none); }
+
+input[type="file"] {
+width : auto;
+padding : initial;
+line-height : initial;
+border : initial;
+background-color : transparent;
+background-color : initial;
+@include box-shadow(none); }
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+width : auto;
+height : auto;
+cursor : pointer;
+*overflow : visible; }
 
 select,
 input[type="file"] {
-  height : 28px;
-  *margin-top : 4px;
-  line-height : 28px;
-}
+height : 28px;
+*margin-top : 4px;
+line-height : 28px; }
 
 select {
-  width : auto;
-  background-color : $inputbackground;
-  @include font-size(13);
-
-  &[multiple],
-  &[size] {
-    height : auto;
-  }
-}
+width : auto;
+background-color : $inputbackground;
+@include font-size(13); }
+
+select[multiple],
+select[size] {
+height : auto; }
 
 textarea {
-  @include resize(vertical);
-  height : auto;
-  overflow : auto;
-  vertical-align : top;
-}
+@include resize(vertical);
+height : auto;
+overflow : auto;
+vertical-align : top; }
 
 input[type="hidden"] {
-  display : none;
-}
+display : none; }
 
 .radio,
 .checkbox {
-  padding-left : 18px;
-  font-weight : normal;
-}
+padding-left : 18px;
+font-weight : normal; }
 
 .radio input[type="radio"],
 .checkbox input[type="checkbox"] {
-  @include float-left;
-  margin-left : -18px;
-}
+float : left;
+margin-left : -18px; }
 
-.radio,
-.checkbox {
-  &.inline {
-    display : inline-block;
-    padding-top : 5px;
-    margin-bottom : 0;
-    vertical-align : middle;
-
-    & + & {
-      margin-left : 10px;
-    }
-  }
-}
+.radio.inline,
+.checkbox.inline {
+display : inline-block;
+padding-top : 5px;
+margin-bottom : 0;
+vertical-align : middle; }
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+margin-left : 10px; }
 
 // disabled
 
-#{append-selector('input, select, textarea', '[disabled], [readonly]')} {
-  @include opacity(.5);
-  cursor : not-allowed;
-}
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+@include opacity(.5);
+cursor : not-allowed; }
 
 // focus and active
 
-input,
-textarea {
-  &:focus {
-    border-color : $inputfocus;
-    @include reset-focus;
-    outline : thin dotted \9;
-  }
-}
-
-input[type="file"],
-input[type="radio"],
-input[type="checkbox"],
-select {
-  &:focus {
-    @include box-shadow(none);
-  }
-}
+input:focus,
+textarea:focus {
+border-color : $inputfocus;
+outline : 0;
+outline : thin dotted \9; }
 
-@mixin placeholder-text {
-  @include font-size(14);
-}
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+@include box-shadow(none); }
 
 ::-webkit-input-placeholder {
-  @include placeholder-text;
-}
+@include font-size(14); }
 
 input:-moz-placeholder {
-  @include placeholder-text;
-}
+@include font-size(14); }
 
 // help text
 
 .help-block,
 .help-inline {
-  color : $grey;
-}
+color : $grey; }
 
 .help-block {
-  display : block;
-  margin-bottom : $baselineheight / 2;
-}
+display : block;
+margin-bottom : $baselineheight / 2; }
 
 .help-inline {
-  display : inline-block;
-  vertical-align : middle;
-  padding-left : 5px;
-}
+display : inline-block;
+vertical-align : middle;
+padding-left : 5px; }
 
 // .form-inline
 
-.form-inline {
-  input,
-  textarea,
-  select {
-    display : inline-block;
-    margin-bottom : 0;
-  }
-
-  label {
-    display : inline-block;
-  }
-
-  .radio,
-  .checkbox {
-    padding-left : 0;
-    margin-bottom : 0;
-    vertical-align : middle;
-  }
-
-  .radio input[type="radio"],
-  .checkbox input[type="checkbox"] {
-    @include float-left;
-    margin: {
-      left : 0;
-      right : 3px;
-    }
-  }
-}
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
+display : inline-block;
+margin-bottom : 0; }
+
+.form-inline label {
+display : inline-block; }
+
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
+padding-left : 0;
+margin-bottom : 0;
+vertical-align : middle; }
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+float : left;
+margin-left : 0;
+margin-right : 3px; }
 
 // .form-search
 
-.form-search {
-  input,
-  textarea,
-  select {
-    display : inline-block;
-    margin-bottom : 0;
-  }
-
-  .search-query {
-    padding: {
-      left : 14px;
-      right : 14px;
-    }
-    margin-bottom : 0;
-    @include border-radius(14px);
-  }
-
-  label {
-    display : inline-block;
-  }
-
-  .radio,
-  .checkbox {
-    padding-left : 0;
-    margin-bottom : 0;
-    vertical-align : middle;
-  }
-
-  .radio input[type="radio"],
-  .checkbox input[type="checkbox"] {
-    @include float-left;
-    margin: {
-      left : 0;
-      right : 3px;
-    }
-  }
-}
\ No newline at end of file
+.form-search input,
+.form-search textarea,
+.form-search select {
+display : inline-block;
+margin-bottom : 0; }
+
+.form-search .search-query {
+padding-left : 14px;
+padding-right : 14px;
+margin-bottom : 0;
+@include border-radius(14); }
+
+.form-search label {
+display : inline-block; }
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
+padding-left : 0;
+margin-bottom : 0;
+vertical-align : middle; }
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"] {
+float : left;
+margin-left : 0;
+margin-right : 3px; }
\ No newline at end of file
diff --git a/scss_compass/_mixins.scss b/scss_compass/_mixins.scss
index aa7d907..ac67dac 100755
--- a/scss_compass/_mixins.scss
+++ b/scss_compass/_mixins.scss
@@ -3,29 +3,23 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
-/* Mixins & Extends =================================================== */
+/* Mixins =================================================== */
 
 // 1. ROOT 					==============================
 // 2. TYPOGRAPHY 			==============================
 
 @mixin font-size($font-size: 16){
-  font: {
-    size : #{$font-size}px;
-    size : #{($font-size / 10)}rem;
-  }
-}
+font-size : #{$font-size}px;
+font-size : #{$font-size / 10}rem; }
 
-$use-mozilla-ellipsis-binding: true;
-
-@import "compass/typography/text/ellipsis";
+@mixin text-overflow() {
+overflow : hidden;
+text-overflow : ellipsis;
+white-space : nowrap; }
 
 // 3. COLOUR 				==============================
 // 4. TEXTURE 				==============================
@@ -33,139 +27,128 @@ $use-mozilla-ellipsis-binding: true;
 // gradients
 
 @mixin horizontal($startColor : $white, $endColor : $lightergrey) {
-  background: {
-    color: $endColor;
-    repeat : repeat-x;
-  }
-  @include filter-gradient($startColor, $endColor, $orientation: horizontal);
-  @include background-image(linear-gradient(left, $startColor, $endColor));
-}
+background-color: $endColor;
+@include background-image(linear-gradient(left, $startColor, $endColor));
+background-repeat : repeat-x; }
 
 @mixin vertical($startColor : $white, $endColor:  $lightergrey) {
-  background: {
-    color  : $endColor;
-    repeat : repeat-x;
-  }
-  @include filter-gradient($startColor, $endColor);
-  @include background-image(linear-gradient($startColor, $endColor));
-}
+background-color  : $endColor;
+@include background-image(linear-gradient($startColor, $endColor));
+background-repeat : repeat-x; }
 
 @mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
-  background: {
-    color  : $endColor;
-    repeat : repeat-x;
-  }
-  @include filter-gradient($startColor, $endColor, $orientation: diagonal);
-  @include background-image(linear-gradient(left top, $startColor, $endColor));
-}
+background-color  : $endColor;
+@include background-image(linear-gradient($deg, $startColor, $endColor));
+background-repeat : repeat-x; }
 
-// .bordered(COLOR, COLOR, COLOR, COLOR);
+// @include bordered(COLOR, COLOR, COLOR, COLOR);
 
 @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
-  border: {
-    width: 1px;
-    style: solid;
-    color: $top-color $right-color $bottom-color $left-color;
-  }
-}
+border-top : solid 1px $top-color;
+border-left : solid 1px $left-color;
+border-right : solid 1px $right-color;
+border-bottom : solid 1px $bottom-color; }
+
+// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// Leaving this in, though Compass includes box-shadow already, in case you just want to define an alpha of black. — Jina
+@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
+@include box-shadow($x-axis $y-axis $blur rgba(0, 0, 0, $alpha)); }
 
 // 5. ELEMENTS 				==============================
 
+// @include background-alpha(VALUE VALUE);
+
+@mixin background-alpha($color: $white, $alpha: 1) {
+background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
+
 // Chrome Frame
 
 @mixin chromeframe() {
-  margin : .2em 0;
-  background : $lightgrey;
-  color : $black;
-  padding : .2em 0;
-}
+margin : .2em 0;
+background : $lightgrey;
+color : $black;
+padding : .2em 0; }
 
 // Contain floats
 
-.clearfix {
-  @include has-layout-zoom;
-
-  &:before,
-  &:after {
-    display: table;
-    content : "";
-  }
+@mixin clearfix {
+*zoom : 1;
+&:before,
+&:after {
+display: table;
+content : ""; }
+&:after {
+clear : both; } }
 
-  &:after {
-    clear : both;
-  }
-}
+.clearfix {
+@include clearfix; }
 
 // For image replacement
 
-.hide-text {
-  text-indent : 100%;
-  white-space : nowrap;
-  overflow : hidden;
-}
+@mixin hide-text() {
+text-indent : 100%;
+white-space : nowrap;
+overflow : hidden; }
 
 // Hide from visual and speaking browsers
-@mixin hidden {
-  display : none !important;
-  visibility : hidden;
-}
+
+@mixin hidden() {
+display : none !important;
+visibility : hidden; }
 
 // Hide but maintain layout
 
 @mixin invisible() {
-  visibility : hidden;
-}
+visibility : hidden; }
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 @mixin resize($direction: both) {
-  resize : $direction;
-  overflow : auto;
-}
+resize : $direction;
+overflow : auto; }
 
-// .userselect(VALUE) (all, element, none, text)
+// @include userselect(VALUE) (all, element, none, text)
 
 @mixin user-select($select) {
-  $select: unquote($select);
-  @include experimental(user-select, $select,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
-}
+-webkit-user-select : $select;
+-moz-user-select : $select;
+-o-user-select : $select;
+user-select : $select; }
 
 // Hidden but available to speaking browsers
 
 @mixin visuallyhidden() {
-  overflow : hidden;
-  position : absolute;
-  clip : rect(0 0 0 0);
-  height : 1px;
-  width : 1px;
-  margin : -1px;
-  padding : 0;
-  border : 0;
-  // Make visuallyhidden focusable with a keyboard
-
-  &.focusable:active,
-  &.focusable:focus {
-    position : static;
-    clip : auto;
-    height : auto;
-    width : auto;
-    margin : 0;
-    overflow: visible;
-  }
-}
+overflow : hidden;
+position : absolute;
+clip : rect(0 0 0 0);
+height : 1px;
+width : 1px;
+margin : -1px;
+padding : 0;
+border : 0;
+
+// Make visuallyhidden focusable with a keyboard
+
+&.focusable:active,
+&.focusable:focus {
+position : static;
+clip : auto;
+height : auto;
+width : auto;
+margin : 0;
+overflow: visible; } }
 
 // 6. LAYOUT 				==============================
 
-// .columns(250px, 0, 24px, COLOR, solid, 1px)
+// @include columns(250px, 0, 24px, COLOR, solid, 1px)
 
 @mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eee, $columnRuleStyle: solid, $columnRuleWidth: 1px) {
-  @include column-width($colwidth);
-  @include column-count($colcount);
-  @include column-gap($colgap);
-  @include column-rule($columnRuleWidth, $columnRuleStyle, $columnRuleColor);
-}
+@include column-count($colcount);
+@include column-gap($colgap);
+@include column-width($colwidth);
+@include column-rule-color($columnRuleColor);
+@include column-rule-style($columnRuleStyle);
+@include column-rule-width($columnRuleWidth); }
 
 //  7. VENDOR-SPECIFIC 		==============================
 //  8. MODERNIZR 			==============================
diff --git a/scss_compass/_modernizr.scss b/scss_compass/_modernizr.scss
index 8e30fa1..e0d11f8 100755
--- a/scss_compass/_modernizr.scss
+++ b/scss_compass/_modernizr.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -15,7 +11,7 @@
 
 /* audio */
 /* applicationcache */
-/* backgroundsize */
+/* backgroundsize */ 
 /* borderimage */
 /* borderradius */
 /* boxshadow */
diff --git a/scss_compass/_page.scss b/scss_compass/_page.scss
index 4f56e82..b3358f4 100755
--- a/scss_compass/_page.scss
+++ b/scss_compass/_page.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -14,67 +10,60 @@
 /* Banner =================================================== */
 
 [role="banner"] {
-  margin : 0 auto;
-  padding-top : $baselineheight;
-  width : 90%;
+margin : 0 auto;
+padding-top : $baselineheight;
+width : 90%;
 
-  a[href="#navigation"] {
-    display : block;
-    position : absolute;
-    top : 11px;
-    right : 22px;
-    width : 43px;
-    height : 43px;
-    white-space : nowrap;
-    overflow : hidden;
-    background-color : lighten($basecolor, 20%);
-    border : 1px solid lighten($basecolor, 15%);
-    @include border-radius(4px);
-    color : lighten($basecolor, 75%);
-    @include font-size(32);
-    line-height : 42px;
-    text: {
-      align : center;
-      decoration : none;
-    }
-  }
+a[href="#navigation"] {
+display : block;
+position : absolute;
+top : 11px;
+right : 22px;
+width : 43px;
+height : 43px;
+white-space : nowrap;
+overflow : hidden;
+background-color : lighten($basecolor, 20%);
+border : 1px solid lighten($basecolor, 15%);
+@include border-radius(4px);
+color : lighten($basecolor, 75%);
+@include font-size(32);
+line-height : 42px;
+text-align : center;
+text-decoration : none; }
 }
 
 /* Navigation =================================================== */
 
 [role="navigation"] {
-  margin : 0 auto $baselineheight;
-  width : 90%;
-  background-color : lighten($basecolor, 20%);
-  border : 1px solid lighten($basecolor, 15%);
+margin : 0 auto $baselineheight;
+width : 90%;
+background-color : lighten($basecolor, 20%);
+border : 1px solid lighten($basecolor, 15%);
 
-  p {
-    margin-bottom : 0;
-    padding : 6px 11px;
-    color : $white;
-  }
+p {
+margin-bottom : 0;
+padding : 6px 11px;
+color : $white; }
 
-  a {
-    color : $white;
-  }
+a {
+color : $white; }
 }
 
 /* Content =================================================== */
 
 .content {
-  margin : 0 auto;
-  width : 90%;
-}
+margin : 0 auto;
+width : 90%; }
 
 /* contentinfo =================================================== */
 
 [role="contentinfo"] {
-  padding : $baselineheight 0;
-  border-top : 3px solid lighten($basecolor, 60%);
+padding : $baselineheight 0;
+border-top : 3px solid lighten($basecolor, 60%);
 
-  small {
-    display : block;
-    margin : 0 auto $baselineheight;
-    width : 90%;
-  }
+small {
+display : block;
+margin : 0 auto $baselineheight;
+width : 90%; }
 }
\ No newline at end of file
diff --git a/scss_compass/_print.scss b/scss_compass/_print.scss
index dcdce0d..e8544ac 100755
--- a/scss_compass/_print.scss
+++ b/scss_compass/_print.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -15,70 +11,58 @@
 
 // 1. ROOT 					==============================
 
-* {
-  background : transparent !important;
-  color : black !important;
-  @include box-shadow(none !important);
-  text-shadow : none !important;
-  filter : none !important;
-  -ms-filter : none !important;
-}
+* { 
+background : transparent !important; 
+color : black !important; 
+box-shadow : none !important; 
+text-shadow : none !important; 
+filter : none !important; 
+-ms-filter : none !important; }
 
-@page {
-  margin : 0.5cm;
-}
+@page { 
+margin : 0.5cm; }
 
 // 2. TYPOGRAPHY 			==============================
 
-h2, h3, p {
-  orphans : 3;
-  widows : 3;
-}
+h2, h3 { 
+orphans : 3; 
+widows : 3; 
+page-break-after : avoid; }
 
-h2, h3 {
-  page-break-after : avoid;
-}
+p { 
+orphans : 3; 
+widows : 3; }
 
-pre, blockquote {
-  border : 1px solid $grey;
-  page-break-inside : avoid;
-}
+pre, blockquote { 
+border : 1px solid $grey; 
+page-break-inside : avoid; }
 
-abbr[title]:after {
-  content: " (" attr(title) ")";
-}
+abbr[title]:after { 
+content: " (" attr(title) ")"; }
 
 // 3. COLOUR 				==============================
 
-a {
-  &, &:visited {
-    text-decoration : underline;
-  }
+a, a:visited { 
+text-decoration : underline; }
 
-  &[href]:after {
-    content : " (" attr(href) ")";
-  }
+a[href]:after { 
+content : " (" attr(href) ")"; }
 
-  &[href^="javascript:"]:after,
-  &[href^="#"]:after {
-    content : "";
-  }
-}
+a[href^="javascript:"]:after, 
+a[href^="#"]:after { 
+content : ""; }
 
 // 4. TEXTURE 				==============================
 
-img {
-  max-width : 100% !important;
-  page-break-inside : avoid;
-}
+img { 
+max-width : 100% !important;
+page-break-inside : avoid; }
 
-thead {
-  display : table-header-group;
-}
+thead { 
+display : table-header-group; } 
 
-tr {
-  page-break-inside : avoid;
-}
+tr { 
+page-break-inside : avoid; }
 
 // 5. ELEMENTS 				==============================
 // 6. LAYOUT 				==============================
diff --git a/scss_compass/_reset.scss b/scss_compass/_reset.scss
index bbda90a..251119a 100755
--- a/scss_compass/_reset.scss
+++ b/scss_compass/_reset.scss
@@ -3,70 +3,13 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 /* Reset =================================================== */
 
-@import "compass/reset/utilities";
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%;
+vertical-align : baseline; background : transparent; }									
 
-#{elements-of-type(html5)},
-#{headings()},
-html,
-body,
-body div,
-span,
-object,
-iframe,
-p,
-blockquote,
-pre,
-abbr,
-address,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-samp,
-small,
-strong,
-sub,
-sup,
-var,
-b,
-i,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td {
-  @include reset-box-model;
-  @include reset-focus;
-  @include reset-font;
-  background : transparent;
-}
-
-@include reset-html5;
\ No newline at end of file
+article, aside, figure, footer, header, hgroup, nav, section { display : block; }
\ No newline at end of file
diff --git a/scss_compass/_site.scss b/scss_compass/_site.scss
index fd6a8e5..7c79568 100755
--- a/scss_compass/_site.scss
+++ b/scss_compass/_site.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,24 +12,22 @@
 // 1. ROOT 					==============================
 
 html {
-  background : $bodycolor;
-  font-size : 62.5%;
-  -webkit-overflow-scrolling : touch;
-  -webkit-tap-highlight-color : lighten($basecolor, 75%);
-  -webkit-text-size-adjust : 100%;
-  -ms-text-size-adjust : 100%;
-}
+background : $bodycolor; 
+font-size : 62.5%;
+-webkit-overflow-scrolling : touch; 
+-webkit-tap-highlight-color : lighten($basecolor, 75%); 
+-webkit-text-size-adjust : 100%; 
+-ms-text-size-adjust : 100%; }
 
-body {
-  margin : 0;
-  padding : 0;
-  width : 100%;
-  background-color : transparent;
-  font-family : $basefont;
-  @include font-size();
-  line-height : $baselineheight;
-  color : $textcolor;
-}
+body { 
+margin : 0;
+padding : 0;
+width : 100%;
+background-color : transparent;
+font-family : $basefont;
+@include font-size();
+line-height : $baselineheight;
+color : $textcolor; }
 
 // 2. TYPOGRAPHY 			==============================
 // 3. COLOUR 				==============================
diff --git a/scss_compass/_tables.scss b/scss_compass/_tables.scss
index d656474..9d2bb4b 100755
--- a/scss_compass/_tables.scss
+++ b/scss_compass/_tables.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -14,85 +10,81 @@
 /* Tables =================================================== */
 
 table {
-  width : 100%;
-  max-width : 100%;
-  margin-bottom : $baselineheight;
-  @include reset-table;
-  background-color : $tablebackground;
-
-  th,
-  td {
-    padding : 8px;
-    vertical-align : top;
-    border-top : $tableborderwidth $tableborderstyle $tableborder;
-    @include font-size(14);
-    line-height : $baselineheight;
-    text-align : left;
-  }
-
-  th {
-    font-weight : bold;
-
-    thead & {
-      vertical-align : bottom;
-    }
-  }
-
-  #{append-selector('colgroup + thead tr, thead:first-child tr', ':first-child th, :first-child td')} {
-    border-top : 0;
-  }
-
-  tbody {
-    & + & {
-      border-top : $tableborderwidth * 2 $tableborderstyle $tableborder;
-    }
-
-    tr {
-      td, th {
-        @include transition(background-color .25s 0 linear);
-      }
-
-      &:hover {
-        td, th {
-          background-color : $tablehover;
-        }
-      }
-    }
-  }
+width : 100%;
+max-width : 100%;
+margin-bottom : $baselineheight;
+border-collapse : collapse;
+border-spacing : 0;
+background-color : $tablebackground;
+
+th,
+td {
+padding : 8px;
+vertical-align : top;
+border-top : $tableborderwidth $tableborderstyle $tableborder;
+@include font-size(14);
+line-height : $baselineheight;
+text-align : left; }
+
+th {
+font-weight : bold; }
+
+thead th {
+vertical-align : bottom; }
+
+colgroup + thead tr:first-child th,
+colgroup + thead tr:first-child td,
+thead:first-child tr:first-child th,
+thead:first-child tr:first-child td {
+border-top : 0; }
+
+tbody + tbody {
+border-top : $tableborderwidth * 2 $tableborderstyle $tableborder; }
+
+tbody tr td,
+tbody tr th {
+@include transition(background-color .25s 0 linear); }
+
+tbody tr:hover td,
+tbody tr:hover th {
+background-color : $tablehover; }
 }
 
 // CONDENSED ====================================================
 
 .table-condensed {
 
-  th,
-  td {
-    padding : 4px 5px;
-  }
+th,
+td {
+padding : 4px 5px; }
 }
 
 // BORDERED ====================================================
 
 .table-bordered {
-  border : $tableborderwidth $tableborderstyle $tableborder {
-    left : 0;
-    collapse : separate;
-  }
-  *border-collapse : collapsed;
-
-  th,
-  td {
-    border-left : $tableborderwidth $tableborderstyle $tableborder;
-  }
-
-  #{nest("thead:first-child, tbody:first-child', 'tr:first-child th")},
-  tbody:first-child tr:first-child td {
-    border-top : 0;
-  }
+border : $tableborderwidth $tableborderstyle $tableborder;
+border-left : 0;
+border-collapse : separate;
+*border-collapse : collapsed;
+
+th,
+td {
+border-left : $tableborderwidth $tableborderstyle $tableborder; }
+
+thead:first-child tr:first-child th,
+tbody:first-child tr:first-child th,
+tbody:first-child tr:first-child td {
+border-top : 0; }
 }
 
 // STRIPED ====================================================
 
-#{nest(".table-striped tbody tr:nth-child(odd)', 'td, th")} {
-  background-color : $tablestripe;
-}
\ No newline at end of file
+.table-striped {
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+background-color : $tablestripe; }
+}
+
+
+
diff --git a/scss_compass/_texture.scss b/scss_compass/_texture.scss
index 914c45a..7c85a6e 100755
--- a/scss_compass/_texture.scss
+++ b/scss_compass/_texture.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -17,201 +13,173 @@
 
 // For more alert styles:
 // http://twitter.github.com/bootstrap/components.html#alerts"
-// https://github.com/twitter/bootstrap/blob/master/less/alerts.less"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts"
 
 .alert {
-  margin-bottom : $baselineheight;
-  padding : 8px 35px 8px 14px;
-  background-color : $alertcolor;
-  border : $alertborderwidth $alertborderstyle $alertbordercolor;
-  @include border-radius(2px);
-  font-family : $basefont;
-  @include font-size(14);
-  color : $alerttext;
-
-  .alert-heading {
-    color : inherit;
-  }
-
-  .close {
-    position : relative;
-    top : -2px;
-    right : -21px;
-    @include float-right;
-    @include font-size(21);
-    font-weight : bold;
-    line-height : 18px;
-    color : inherit;
-  }
+margin-bottom : $baselineheight;
+padding : 8px 35px 8px 14px;
+background-color : $alertcolor;
+border : $alertborderwidth $alertborderstyle $alertbordercolor;
+@include border-radius(2px);
+font-family : $basefont;
+@include font-size(14);
+color : $alerttext;
+
+.alert-heading {
+color : inherit; }
+
+.close {
+position : relative;
+top : -2px;
+right : -21px;
+float : right;
+@include font-size(21);
+font-weight : bold;
+line-height : 18px;
+color : inherit; }
 }
 
 .alert-success {
-  background-color : $alertsuccesscolor;
-  border-color : $alertsuccessborder;
-  color : $alertsuccesstext;
-}
+background-color : $alertsuccesscolor;
+border-color : $alertsuccessborder;
+color : $alertsuccesstext; }
 
 .alert-warning {
-  background-color : $alertwarningcolor;
-  border-color : $alertwarningborder;
-  color : $alertwarningtext;
-}
+background-color : $alertwarningcolor;
+border-color : $alertwarningborder;
+color : $alertwarningtext; }
 
 .alert-error {
-  background-color : $alerterrorcolor;
-  border-color : $alerterrorborder;
-  color : $alerterrortext;
-}
+background-color : $alerterrorcolor;
+border-color : $alerterrorborder;
+color : $alerterrortext; }
 
 .alert-inverse {
-  background-color : $alertinversecolor;
-  border-color : $alertinverseborder;
-  color : $alertinversetext;
-}
+background-color : $alertinversecolor;
+border-color : $alertinverseborder;
+color : $alertinversetext; }
 
 // alert block
 
 .alert-block {
-  padding: {
-    top : 14px;
-    bottom : 14px;
-  }
-
-  .alert-heading {
-    margin-bottom : $baselineheight / 8;
-    font: {
-      size : inherit;
-      weight : bold;
-    }
-  }
-
-  > p,
-  > ul {
-    margin-bottom : 0;
-  }
-
-  p + p {
-    margin-top : 5px;
-  }
+padding-top : 14px;
+padding-bottom : 14px;
+
+.alert-heading {
+margin-bottom : $baselineheight / 8;
+font-size : inherit;
+font-weight : bold; }
+
+> p,
+> ul {
+margin-bottom : 0; }
+
+p + p {
+margin-top : 5px; }
 }
 
 // BADGES ====================================================
 
 .badge {
-  padding : 1px 9px 2px;
-  @include font-size(12);
-  font-weight : bold;
-  white-space : nowrap;
-  color : $badgecolor;
-  background-color : $badgebackground;
-  @include border-radius(9px);
-  @include transition(background-color .25s 0 linear);
-
-  &:hover {
-    color : $badgecolor;
-    text-decoration : none;
-    cursor : pointer;
-  }
+padding : 1px 9px 2px;
+@include font-size(12);
+font-weight : bold;
+white-space : nowrap;
+color : $badgecolor;
+background-color : $badgebackground;
+@include border-radius(9px);
+@include transition(background-color .25s 0 linear);
+
+&:hover {
+color : $badgecolor;
+text-decoration : none;
+cursor : pointer; }
 }
 
 .badge-error {
-  background-color : $errorcolor;
-  color : $white;
+background-color : $errorcolor;
+color : $white;
 
-  &:hover {
-    background-color : darken($errorcolor, 20%);
-    color : $white;
-  }
+&:hover {
+background-color : darken($errorcolor, 20%);
+color : $white; }
 }
 
 .badge-warning {
-  background-color : $warningcolor;
-  color : $white;
+background-color : $warningcolor;
+color : $white;
 
-  &:hover {
-    background-color : darken($warningcolor, 20%);
-    color : $white;
-  }
+&:hover {
+background-color : darken($warningcolor, 20%);
+color : $white; }
 }
 
 .badge-success {
-  background-color : $successcolor;
-  color : $white;
+background-color : $successcolor;
+color : $white;
 
-  &:hover {
-    background-color : darken($successcolor, 20%);
-    color : $white;
-  }
+&:hover {
+background-color : darken($successcolor, 20%);
+color : $white; }
 }
 
 .badge-info {
-  background-color : $infocolor;
-  color : darken($infocolor, 50%);
+background-color : $infocolor;
+color : darken($infocolor, 50%);
 
-  &:hover {
-    background-color : darken($infocolor, 20%);
-  }
+&:hover {
+background-color : darken($infocolor, 20%); }
 }
 
 .badge-inverse {
-  background-color : $inverscolor;
-  color : $white;
+background-color : $inverscolor;
+color : $white;
 
-  &:hover {
-    background-color : darken($inverscolor, 20%);
-    color : $white;
-  }
+&:hover {
+background-color : darken($inverscolor, 20%);
+color : $white; }
 }
 
 // GRADIENTS ====================================================
 
 @mixin greygrad {
-  @include vertical($white, darken($lightergrey, 5%));
-}
+@include vertical($white, darken($lightergrey, 5%)); }
 
 @mixin basegrad {
-  @include vertical($basecolor, darken($basecolor, 10%));
-}
+@include vertical($basecolor, darken($basecolor, 10%)); }
 
 @mixin infograd {
-  @include vertical($infocolor, darken($infocolor, 10%));
-}
+@include vertical($infocolor, darken($infocolor, 10%)); }
 
 @mixin inversegrad {
-  @include vertical($inverscolor, darken($inverscolor, 10%));
-}
+@include vertical($inverscolor, darken($inverscolor, 10%)); }
 
 @mixin successgrad {
-  @include vertical($successcolor, darken($successcolor, 10%));
-}
+@include vertical($successcolor, darken($successcolor, 10%)); }
 
 @mixin warninggrad {
-  @include vertical($warningcolor, darken($warningcolor, 10%));
-}
+@include vertical($warningcolor, darken($warningcolor, 10%)); }
 
-// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins
 
 // WELL ====================================================
 
 .well {
-  @include min-height(21px);
-  padding : 11px;
-  margin-bottom : $baselineheight;
-  background-color : $wellbackground;
-  border : $wellborderwidth $wellborderstyle $wellbordercolor;
-  @include border-radius(4px);
-  @include box-shadow(inset 0 1px $wellshadowblur $wellshadow);
-
-  p:last-child {
-    margin-bottom : 0;
-  }
+min-height : 21px;
+padding : 11px;
+margin-bottom : $baselineheight;
+background-color : $wellbackground;
+border : $wellborderwidth $wellborderstyle $wellbordercolor;
+@include border-radius(4px);
+@include box-shadow(inset 0 1px $wellshadowblur $wellshadow);
+
+p:last-child {
+margin-bottom : 0; }
 }
 
 .well-large {
-  padding : 22px;
-}
+padding : 22px; }
 
 .well-small {
-  padding : 6px;
-  @include border-radius(2px);
-}
\ No newline at end of file
+padding : 6px;
+@include border-radius(2px); }
\ No newline at end of file
diff --git a/scss_compass/_typography.scss b/scss_compass/_typography.scss
index 6ee5e47..cff8414 100755
--- a/scss_compass/_typography.scss
+++ b/scss_compass/_typography.scss
@@ -3,10 +3,6 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
@@ -16,110 +12,83 @@
 // HEADINGS ====================================================
 
 #{headings()} {
-  margin : 0;
-  font: {
-    family : $baseheadingfont;
-    weight : $baseheadingfontweight;
-  }
-  color : $baseheadingfontcolor;
-  text-rendering : optimizelegibility;
-}
-
-h1,
-h2 {
-  small {
-    font-weight : normal;
-    color : $lightgrey;
-  }
-}
+margin : 0;
+font-family : $baseheadingfont;
+font-weight : $baseheadingfontweight;
+color : $baseheadingfontcolor;
+text-rendering : optimizelegibility; }
 
-h1,
-.h1,
-h2,
-.h2 {
-  margin-bottom : $baselineheight / 2;
-  line-height : 1.2;
-}
+h1 small,
+h2 small {
+font-weight : normal;
+color : $lightgrey; }
 
 h1,
 .h1 {
-  @include font-size(32);
-}
+margin-bottom : $baselineheight / 2;
+@include font-size(32);
+line-height : 1.2; }
 
 h2,
 .h2 {
-  @include font-size(24);
-}
+margin-bottom : $baselineheight / 2;
+@include font-size(24);
+line-height : 1.2; }
 
 h3,
 .h3 {
-  margin-bottom : $baselineheight / 1.5;
-  @include font-size(21);
-  line-height : 1.3;
-}
-
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  margin-bottom : $baselineheight;
-}
+margin-bottom : $baselineheight / 1.5;
+@include font-size(21);
+line-height : 1.3; }
 
 h4,
 .h4 {
-  @include font-size(18);
-  line-height : 1.25;
-}
+margin-bottom : $baselineheight;
+@include font-size(18);
+line-height : 1.25; }
 
 h5,
 .h5 {
-  @include font-size(16);
-}
+@include font-size(16);
+margin-bottom : $baselineheight; }
 
 h6,
 .h6 {
-  @include font-size(14);
-  font-weight : normal;
-  letter-spacing : 1px;
-  text-transform : uppercase;
-}
+margin-bottom : $baselineheight;
+@include font-size(14);
+font-weight : normal;
+letter-spacing : 1px;
+text-transform : uppercase; }
 
 // header
 
 .header {
 #{headings(3)} {
-  @include float-left;
-  margin-right : $gutterwidth;
+float : left;
+margin-right : $gutterwidth;
 }
 
 a {
-  display : block;
-  position : relative;
-  top : 6px;
-  @include float-right;
-  padding : 4px 12px;
-  @include font-size(14);
-  background-color : lighten($basecolor, 75%);
-
-  &:hover {
-    background-color : lighten($basecolor, 75%);
-  }
-}
-
-  .a-rss {
-    &,
-    &:hover {
-      @include float-left;
-      width : 16px;
-      height : 16px;
-      padding : 0;
-      background : transparent url(../img/a-rss.png) no-repeat 0 0;
-      @extend .hide-text;
-    }
-  }
-}
+display : block;
+position : relative;
+top : 6px;
+float : right;
+padding : 4px 12px;
+@include font-size(14);
+background-color : lighten($basecolor, 75%); }
+
+&:hover {
+background-color : lighten($basecolor, 75%); }
+}
+
+.header .a-rss,
+.header .a-rss:hover {
+float : left;
+width : 16px;
+height : 16px;
+padding : 0;
+background : transparent url(../img/a-rss.png) no-repeat 0 0;
+@include hide-text; }
 
 // TYPOGRAPHY ====================================================
 
@@ -128,127 +97,111 @@ ol,
 ul,
 dl,
 address {
-  margin-bottom : $baselineheight;
-  @include font-size(14);
-  line-height : $baselineheight;
-}
+margin-bottom : $baselineheight;
+@include font-size(14);
+line-height : $baselineheight; }
 
 small {
-  @include font-size(14);
-}
+@include font-size(14); }
 
 ul,
 ol {
-  margin : 0 0 $baselineheight #{-$gutterwidth};
-  padding : 0 0 0 $gutterwidth;
+margin : 0 0 $baselineheight #{-$gutterwidth};
+padding : 0 0 0 $gutterwidth; }
 
-  li & {
-    margin : 0;
-    @include font-size(16);
-  }
-}
+li ul,
+li ol {
+margin : 0;
+@include font-size(16); }
 
 // blockquote
 
 blockquote  {
-  margin : 0 0 $baselineheight #{-$gutterwidth};
-  padding-left : $gutterwidth;
-  border-left : 2px solid $bordercolor;
-  font: {
-    family : $altfont;
-    style : normal;
-  }
-}
+margin : 0 0 $baselineheight #{-$gutterwidth};
+padding-left : $gutterwidth;
+border-left : 2px solid $bordercolor;
+font-family : $altfont;
+font-style : normal; }
 
-blockquote,
 q {
-  @include reset-quotation;
-}
+quotes : none; }
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+content : '';
+content : none;}
 
 cite {
-  font-style : normal;
-}
+font-style : normal; }
 
 // definition lists
 
 dl,
 dd {
-  margin-bottom : $baselineheight;
-}
+margin-bottom : $baselineheight;  }
 
 dt {
-  font-weight : bold;
-}
+font-weight : bold; }
 
 .dl-horizontal {
-  dt {
-    @include float-left;
-    clear : left;
-    width : 20.25%;
-    text-align : right;
-  }
-
-  .dl-horizontal dd {
-    margin-left : 22.78%;
-  }
+
+dt {
+float : left;
+clear : left;
+width : 20.25%;
+text-align : right; }
+
+dd {
+margin-left : 22.78%; }
 }
 
 // text-level
 
 abbr[title] {
-  border-bottom : 1px dotted $bordercolor;
-  cursor : help;
-}
+border-bottom : 1px dotted $bordercolor;
+cursor : help; }
 
-b,
-strong {
-  font-weight : bold;
-}
+b, strong {
+font-weight : bold; }
 
 dfn {
-  font-style : italic;
-}
+font-style : italic; }
 
 ins {
-  background-color : lighten($basecolor, 75%);
-  color : $textcolor;
-  text-decoration : none;
-}
+background-color : lighten($basecolor, 75%);
+color : $textcolor;
+text-decoration : none; }
 
 mark {
-  background-color : lighten($basecolor, 75%);
-  color : $textcolor;
-  font: {
-    style : italic;
-    weight : bold;
-  }
-}
+background-color : lighten($basecolor, 75%);
+color : $textcolor;
+font-style : italic;
+font-weight : bold; }
 
 pre,
 code,
 kbd,
 samp {
-  font-family : $codefont;
-  @include font-size(14);
-  line-height : $baselineheight;
-}
+font-family : $codefont;
+@include font-size(14);
+line-height : $baselineheight; }
 
 pre {
-  @include force-wrap;
-}
+white-space : pre;
+white-space : pre-wrap;
+word-wrap : break-word; }
 
 sub,
 sup {
-  position : relative;
-  @include font-size(12);
-  line-height : 0;
-  vertical-align : baselineheight;
-}
+position : relative;
+@include font-size(12);
+line-height : 0;
+vertical-align : baselineheight; }
 
 sup {
-  top : -0.5em;
-}
+top : -.5em; }
 
 sub {
-  bottom : -0.25em;
-}
\ No newline at end of file
+bottom : -.25em; }
\ No newline at end of file
diff --git a/scss_compass/_variables.scss b/scss_compass/_variables.scss
index b7bc874..18f9b5f 100755
--- a/scss_compass/_variables.scss
+++ b/scss_compass/_variables.scss
@@ -3,145 +3,141 @@
 // 320 and Up by Andy Clarke
 // Version: 3.0
 // URL: http://stuffandnonsense.co.uk/projects/320andup/
-//
-// Sass Port by Jina Bolton
-// URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 /* Variables =================================================== */
 
-// 1. COLOUR 				==============================
-
-$basecolor   : rgb(45,53,62);
-$compcolor   : invert($basecolor);
-$bordercolor : lighten($basecolor, 60%);
-
-// Links
-
-$linkcolor        : rgb(1,53,104);
-$linkcolorhover   : darken($linkcolor, 10);
-$linkcolorvisited : darken($linkcolorhover, 10);
-$linkcolorfocus   : darken($linkcolorvisited, 10);
-
 // greyscale
 
-$black       : rgb(0,0,0);
-$darkgrey    : lighten($black, 25%);
-$grey        : lighten($black, 50%);
-$lightgrey   : lighten($black, 75%);
-$lightergrey : lighten($black, 90%);
-$white       : rgb(255,255,255);
-
-// colour palettes
-
-$alertcolor   : rgb(252,248,227);
-$errorcolor   : rgb(218,79,73);
-$infocolor    : rgb(217,237,247);
-$inverscolor  : rgb(65,65,65);
-$successcolor : rgb(91,183,91);
-$warningcolor : rgb(250,167,50);
+$black 			: rgb(0,0,0);
+$darkgrey 		: lighten($black, 25%);
+$grey 			: lighten($black, 50%);
+$lightgrey 		: lighten($black, 75%);
+$lightergrey 	: lighten($black, 90%);
+$white 			: rgb(255,255,255);
 
-// 2. ROOT 					==============================
+// 1. ROOT 					==============================
 
 $bodycolor : $white;
 $textcolor : black;
 
-// 3. TYPOGRAPHY 			==============================
+// 2. TYPOGRAPHY 			==============================
 
-$basefont              : "Helvetica Neue", Helvetica, Arial, sans-serif;
-$basefontsize          : 16;
-$baselineheight        : 1.5em;
-$baseheadingfont       : inherit;
+$basefont : "Helvetica Neue", Helvetica, Arial, sans-serif;
+$basefontsize : 16;
+$baselineheight : 1.5em;
+$baseheadingfont : inherit;
 $baseheadingfontweight : bold;
-$baseheadingfontcolor  : inherit;
+$baseheadingfontcolor : inherit;
 
-$altfont       : Cambria, Georgia, Times, "Times New Roman";
+$altfont : Cambria, Georgia, Times, "Times New Roman";
 $altlineheight : 1.35em;
 
 $codefont : Monaco, Courier New, monospace;
 
+// 3. COLOUR 				==============================
+
+$basecolor 		: rgb(45,53,62);
+$compcolor 		: adjust-hue($basecolor, 180);
+$bordercolor    : lighten($basecolor, 60%);
+
+// Links
+
+$linkcolor 		    : rgb(1,53,104);
+$linkcolorhover 	: darken($linkcolor, 10);
+$linkcolorvisited   : darken($linkcolorhover, 10);
+$linkcolorfocus 	: darken($linkcolorvisited, 10);
+
+// colour palettes
+
+$alertcolor 	: rgb(252,248,227);
+$errorcolor 	: rgb(218,79,73);
+$infocolor 		: rgb(217,237,247);
+$inverscolor 	: rgb(65,65,65);
+$successcolor 	: rgb(91,183,91);
+$warningcolor 	: rgb(250,167,50);
+
 // 4. TEXTURE 				==============================
 
 // alert
 
-$alertbordercolor : darken($alertcolor, 20%);
-$alertborderwidth : 1px;
-$alertborderstyle : solid;
-$alerttext        : darken($alertcolor, 60%);
+$alertbordercolor	: darken($alertcolor, 20%);
+$alertborderwidth 	: 1px;
+$alertborderstyle 	: solid;
+$alerttext			: darken($alertcolor, 60%);
 
 // alert-error
-$alerterrorcolor  : lighten($errorcolor, 30%);
-$alerterrorborder : lighten($errorcolor, 20%);
-$alerterrortext   : $errorcolor;
+$alerterrorcolor 	: lighten($errorcolor, 30%);
+$alerterrorborder  	: lighten($errorcolor, 20%);
+$alerterrortext 	: $errorcolor;
 
 // alert-info
-$alertinfocolor  : $infocolor;
-$alertinfoborder : lighten($infocolor, 20%);
-$alertinfotext   : darken($infocolor, 50%);
+$alertinfocolor 	: $infocolor;
+$alertinfoborder  	: lighten($infocolor, 20%);
+$alertinfotext 		: darken($infocolor, 50%);
 
 // alert-inverse
-$alertinversecolor  : $inverscolor;
+$alertinversecolor 	: $inverscolor;
 $alertinverseborder : $black;
-$alertinversetext   : $white;
+$alertinversetext 	: $white;
 
 // alert-success
-$alertsuccesscolor  : lighten($successcolor, 30%);
+$alertsuccesscolor 	: lighten($successcolor, 30%);
 $alertsuccessborder : lighten($successcolor, 20%);
-$alertsuccesstext   : darken($successcolor, 20%);
+$alertsuccesstext 	: darken($successcolor, 20%);
 
 // alert-warning
-$alertwarningcolor  : lighten($warningcolor, 30%);
+$alertwarningcolor 	: lighten($warningcolor, 30%);
 $alertwarningborder : lighten($warningcolor, 20%);
-$alertwarningtext   : darken($warningcolor, 20%);
+$alertwarningtext 	: darken($warningcolor, 20%);
 
 // badges
 
-$badgebackground : $lightergrey;
-$badgecolor      : $grey;
+$badgebackground 	: $lightergrey;
+$badgecolor 		: $grey;
 
 // buttons
 
-$buttonbackground        : $lightergrey;
-$buttonbordercolor       : darken($buttonbackground, 10%);
+$buttonbackground 	: $lightergrey;
+$buttonbordercolor 	: darken($buttonbackground, 10%);
 $buttonbottombordercolor : darken($buttonbordercolor, 10%);
-$buttoncolor             : $darkgrey;
-$buttonborderwidth       : 1px;
-$buttonborderstyle       : solid;
+$buttoncolor 		: $darkgrey;
+$buttonborderwidth	: 1px;
+$buttonborderstyle	: solid;
 
 // boxes (well)
 
-$wellbackground  : lighten($basecolor, 75%);
-$wellbordercolor : darken($wellbackground, 20%);
-$wellborderwidth : 1px;
-$wellborderstyle : solid;
-$wellshadow      : darken($wellbackground, 10%);
-$wellshadowblur  : 10px;
+$wellbackground		: lighten($basecolor, 75%);
+$wellbordercolor	: darken($wellbackground, 20%);
+$wellborderwidth	: 1px;
+$wellborderstyle	: solid;
+$wellshadow			: darken($wellbackground, 10%);
+$wellshadowblur		: 10px;
 
 // tables
 
-$tablebackground  : transparent;
-$tablestripe      : lighten($basecolor, 60%);
-$tablehover       : lighten($basecolor, 50%);
-$tableborder      : lighten($basecolor, 40%);
-$tableborderwidth : 1px;
-$tableborderstyle : solid;
+$tablebackground 	: transparent;
+$tablestripe 		: lighten($basecolor, 60%);
+$tablehover 		: lighten($basecolor, 50%);
+$tableborder 		: lighten($basecolor, 40%);
+$tableborderwidth	: 1px;
+$tableborderstyle	: solid;
 
 // forms
 
-$inputbackground  : $white;
-$inputborder      : lighten($basecolor, 40%);
-$inputborderwidth : 1px;
-$inputborderstyle : solid;
-$inputhover       : lighten($basecolor, 20%);
-$inputfocus       : $basecolor, 40%;
-$placeholdercolor : $lightgrey;
+$inputbackground 	: $white;
+$inputborder 		: lighten($basecolor, 40%);
+$inputborderwidth	: 1px;
+$inputborderstyle	: solid;
+$inputhover 		: lighten($basecolor, 20%);
+$inputfocus 		: $basecolor, 40%;
+$placeholdercolor 	: $lightgrey;
 
 // 6. LAYOUT 				==============================
 
-$baseline    : $baselineheight;
+$baseline : $baselineheight;
 $gutterwidth : 24px;
 
 //  7. VENDOR-SPECIFIC 		==============================
diff --git a/scss_compass/upstarts/320andup-modules/_upstart.scss b/scss_compass/upstarts/320andup-modules/_upstart.scss
index 8772ccb..8834882 100755
--- a/scss_compass/upstarts/320andup-modules/_upstart.scss
+++ b/scss_compass/upstarts/320andup-modules/_upstart.scss
@@ -5,41 +5,33 @@
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-//
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
 // ==========================================================
 
 .grid {
-  margin-bottom : $baseline;
-  border-bottom : 1px dashed lighten($basecolor, 60%);
+margin-bottom : $baseline;
+border-bottom : 1px dashed lighten($basecolor, 60%); }
 
-  &:last-child {
-    margin-bottom : 0;
-    border-bottom-width : 0;
-  }
-}
+.grid:last-child {
+margin-bottom : 0;
+border-bottom-width : 0; }
 
 .furniture-letter {
-  overflow : hidden;
-
-  span {
-    display : block;
-    @include float-left;
-    margin : 0 12px 0 0;
-    height : 44px;
-    width : 44px;
-    background-color : $basecolor;
-    color : $white;
-    @include font-size(32);
-    font-weight : bold;
-    line-height : 44px;
-    text-align : center;
-  }
-}
+overflow : hidden; }
+
+.furniture-letter span {
+display : block;
+float : left;
+margin : 0 12px 0 0;
+height : 44px;
+width : 44px;
+background-color : $basecolor;
+color : $white;
+@include font-size(32);
+font-weight : bold;
+line-height : 44px;
+text-align : center; }
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -54,84 +46,73 @@
 // 768px
 @media only screen and (min-width: 768px) {
 
-  // .grids-two
+// .grids-two
+
+.grids-two .grid {
+width : 43.03%; 
+margin-bottom : 0;
+border-bottom-width : 0; }
+
+.grids-two .grid-1 {
+float : left; }
 
-  .grids-two {
-    .grid {
-      width : 43.03%;
-      margin-bottom : 0;
-      border-bottom-width : 0;
-    }
+.grids-two .grid-2 {
+float : right; }
 
-    .grid-1 {
-      @include float-left;
-    }
+// grids-three
 
-    .grid-2 {
-      @include float-right;
-    }
-  }
+.grids-three .grid-a {
+float : left;
+width : 31.64%; 
+margin-right : 2.53%; }
 
-  // grids-three & grids-four
+// grids-four
 
-  .grids-three .grid-a,
-  .grids-four .grid-a {
-    @include float-left;
-    width : 31.64%;
-    margin-right : 2.53%;
-  }
+.grids-four .grid-a {
+float : left;
+width : 31.64%;
+margin-right : 2.53%; }
 
 }
 
 // 992px
 @media only screen and (min-width: 992px) {
 
-  // grids-three
-
-  .grids-three {
-    .grid {
-      @include float-left;
-      width : 31.64%;
-      margin : 0 2.53% 0 0;
-      border-bottom-width : 0;
-    }
-
-    .grid-3 {
-      @include float-right;
-      margin-right : 0;
-    }
-
-    .grid .grid-a {
-      @include reset-float;
-      width : 100%;
-      margin: {
-        right : 0;
-        bottom : $baseline / 2;
-      }
-    }
-  }
-
-  // grids-four
-
-  .grids-four {
-    .grid {
-      @include float-left;
-      width : 20.25%;
-      margin : 0 6.32% 0 0;
-      border-bottom-width : 0;
-    }
-
-    .grid-4 {
-      @include float-right;
-      margin-right : 0;
-    }
-
-    .grid .grid-a {
-      @include reset-float;
-      width : 100%;
-      margin-right : 0;
-    }
-  }
+// grids-three
+
+.grids-three .grid {
+float : left;
+width : 31.64%;
+margin : 0 2.53% 0 0;
+border-bottom-width : 0; }
+
+.grids-three .grid-3 {
+float : right;
+margin-right : 0; }
+
+.grids-three .grid .grid-a {
+float : none; 
+width : 100%;
+margin-right : 0;
+margin-bottom : $baseline / 2; }
+
+// grids-four
+
+.grids-four .grid {
+float : left;
+width : 20.25%;
+margin : 0 6.32% 0 0;
+border-bottom-width : 0; }
+
+.grids-four .grid-4 {
+float : right;
+margin-right : 0; }
+
+.grids-four .grid .grid-a {
+float : none; 
+width : 100%; 
+margin-right : 0; }
+
 }
 
 // 1382px
@@ -143,5 +124,5 @@
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */
+/* Styles */ 
 }
\ No newline at end of file
diff --git a/scss_compass/upstarts/320andup-modules/example.html b/scss_compass/upstarts/320andup-modules/example.html
index edd227b..87abbb7 100755
--- a/scss_compass/upstarts/320andup-modules/example.html
+++ b/scss_compass/upstarts/320andup-modules/example.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 
diff --git a/scss_compass/upstarts/320andup-modules/index.html b/scss_compass/upstarts/320andup-modules/index.html
index 5b423dd..8c2a79a 100755
--- a/scss_compass/upstarts/320andup-modules/index.html
+++ b/scss_compass/upstarts/320andup-modules/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">
 <meta http-equiv="cleartype" content="on">
diff --git a/scss_compass/upstarts/320andup-panels/_upstart.scss b/scss_compass/upstarts/320andup-panels/_upstart.scss
index e2afce9..654a1fa 100755
--- a/scss_compass/upstarts/320andup-panels/_upstart.scss
+++ b/scss_compass/upstarts/320andup-panels/_upstart.scss
@@ -5,15 +5,11 @@
 /* Version: 1.0 */
 /* Author: Andy Clarke */
 /* URL: http://stuffandnonsense.co.uk/projects/320andup */
-/*
-/* Sass Port by Jina Bolton
-/* URL: http://sushiandrobots.com
-/*
 // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 
-// HEADS UP: 320 and Up Panels Upstart is dependent on
+// HEADS UP: 320 and Up Panels Upstart is dependent on 
 // grid styles from Modules Upstart. If you’re importing it
-// you’re ready to go. Otherwise, import it or copy and paste
+// you’re ready to go. Otherwise, import it or copy and paste 
 // its styles here.
 
 // ==========================================================
@@ -21,20 +17,16 @@
 // Full width panel containers
 
 .full {
-  margin-bottom : $baseline;
-  padding : $baseline;
-  background-color : lighten($basecolor, 75%);
-  border: {
-    top : 2px solid lighten($basecolor, 60%);
-    bottom : 2px solid lighten($basecolor, 60%);
-  }
+margin-bottom : $baseline;
+padding : $baseline;
+background-color : lighten($basecolor, 75%);
+border-top : 2px solid lighten($basecolor, 60%);
+border-bottom : 2px solid lighten($basecolor, 60%); }
 
-  .grids {
-    width : 90%;
-    margin : 0 auto;
-    padding : $baseline 0;
-  }
-}
+.full .grids {
+width : 90%;
+margin : 0 auto; 
+padding : $baseline 0; }
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -49,19 +41,20 @@
 // 768px
 @media only screen and (min-width: 768px) {
 
-  // Extra wide grid units
-  #{nest('.special ', '.grids-three, .grids-four', '.grid-a')} {
-    width : 43.03%;
-  }
+// Extra wide grid units
+.special .grids-three .grid-a,
+.special .grids-four .grid-a {
+width : 43.03%; }
+
 }
 
 // 992px
 @media only screen and (min-width: 992px) {
 
-  // Extra wide grid units
-  #{nest('.special ', '.grids-three, .grids-four', '.grid-a')} {
-    width : 100%;
-  }
+// Extra wide grid units
+.special .grids-three .grid-a,
+.special .grids-four .grid-a {
+width : 100%; }
 }
 
 // 1382px
@@ -73,5 +66,5 @@
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
-/* Styles */
+/* Styles */ 
 }
\ No newline at end of file
diff --git a/scss_compass/upstarts/320andup-panels/index.html b/scss_compass/upstarts/320andup-panels/index.html
index 9854266..0e7b377 100755
--- a/scss_compass/upstarts/320andup-panels/index.html
+++ b/scss_compass/upstarts/320andup-panels/index.html
@@ -40,7 +40,7 @@
 <![endif]-->
 
 <!-- JavaScript -->
-<script src="../../../js/modernizr-2.5.3.min.js"></script>
+<script src="../../../js/modernizr-2.5.3-min.js"></script>
 
 <link rel="shortcut icon" href="/favicon.ico">