diff --git a/css/320andup_sass.css b/css/320andup-sass.css
similarity index 99%
rename from css/320andup_sass.css
rename to css/320andup-sass.css
index 4474b4e..e2466bf 100644
--- a/css/320andup_sass.css
+++ b/css/320andup-sass.css
@@ -6,10 +6,6 @@ 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%; }
 
@@ -698,7 +694,7 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 @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="banner"] a[href="#navigation"] { @page; }
   [role="navigation"] { display: table-header-group; }
   [role="navigation"] p { margin: 0 auto; width: 90%; } }
 @media only screen and (min-width: 992px) { /* 992 =================================================== */ }
diff --git a/css/320andup_scss.css b/css/320andup-scss.css
similarity index 99%
rename from css/320andup_scss.css
rename to css/320andup-scss.css
index 9b94076..edccd38 100644
--- a/css/320andup_scss.css
+++ b/css/320andup-scss.css
@@ -13,10 +13,6 @@ 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%; }
 
@@ -715,7 +711,7 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 @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="banner"] a[href="#navigation"] { @page; }
   [role="navigation"] { display: table-header-group; }
   [role="navigation"] p { margin: 0 auto; width: 90%; } }
 @media only screen and (min-width: 992px) { /* 992 =================================================== */ }
diff --git a/css/320andup_sass_compass.css b/css/320andup_sass_compass.css
index ff1158e..b507357 100644
--- a/css/320andup_sass_compass.css
+++ b/css/320andup_sass_compass.css
@@ -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,7 +43,6 @@ 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; }
@@ -103,51 +102,33 @@ a:hover, a:active { outline: 0; }
 .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 =================================================== */
@@ -537,19 +518,14 @@ 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; }
@@ -562,7 +538,7 @@ input[type="hidden"] { display: none; }
 
 .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; }
+.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; }
 
@@ -581,21 +557,14 @@ 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; -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, .form-search .checkbox, .form-search .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 =================================================== */
@@ -632,19 +601,13 @@ 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; -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 =================================================== */
@@ -652,8 +615,8 @@ table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: col
 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; }
+tr:first-child table th colgroup + thead, tr:first-child table th thead:first-child, tr:first-child table td colgroup + thead, tr:first-child table td thead:first-child { border-top: 0; }
+table tbody + table 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; }
 
@@ -711,11 +674,9 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 /* 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 */ }
@@ -739,7 +700,6 @@ table tbody tr:hover td, table tbody tr:hover th { background-color: #a9b4c1; }
 /* 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 1eac4fe..82183d5 100644
--- a/css/320andup_scss_compass.css
+++ b/css/320andup_scss_compass.css
@@ -40,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; }
 
@@ -50,7 +50,6 @@ 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; }
@@ -110,51 +109,33 @@ a:hover, a:active { outline: 0; }
 .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 =================================================== */
@@ -554,19 +535,14 @@ 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; }
@@ -579,7 +555,7 @@ input[type="hidden"] { display: none; }
 
 .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; }
+.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; }
 
@@ -598,21 +574,14 @@ 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; -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, .form-search .checkbox, .form-search .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 =================================================== */
@@ -649,19 +618,13 @@ 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; -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 =================================================== */
@@ -669,8 +632,8 @@ table { width: 100%; max-width: 100%; margin-bottom: 1.5em; border-collapse: col
 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; }
+tr:first-child table th colgroup + thead, tr:first-child table th thead:first-child, tr:first-child table td colgroup + thead, tr:first-child table td thead:first-child { border-top: 0; }
+table tbody + table 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; }
 
@@ -730,11 +693,9 @@ 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 */ }
@@ -760,7 +721,6 @@ 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
deleted file mode 100644
index e69de29..0000000
diff --git a/css/xml/ellipsis.xml b/css/xml/ellipsis.xml
deleted file mode 100644
index 3f94b6e..0000000
--- a/css/xml/ellipsis.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0"?>
-<bindings
-  xmlns="http://www.mozilla.org/xbl"
-  xmlns:xbl="http://www.mozilla.org/xbl"
-  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
->
-	<binding id="ellipsis">
-		<content>
-			<xul:window>
-				<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
-			</xul:window>
-		</content>
-	</binding>
-</bindings>
\ No newline at end of file
diff --git a/less/elements.less b/less/elements.less
index c6544a4..56dc780 100755
--- a/less/elements.less
+++ b/less/elements.less
@@ -62,5 +62,4 @@ li:last-child {
 margin-bottom : 0; 
 padding-bottom : 0; 
 border-bottom-width : 0; }
-} 0; }
 }
\ No newline at end of file
diff --git a/sass/320andup_sass.sass b/sass/320andup-sass.sass
similarity index 100%
rename from sass/320andup_sass.sass
rename to sass/320andup-sass.sass
diff --git a/sass/_768.sass b/sass/_768.sass
index 4489f94..effb04d 100644
--- a/sass/_768.sass
+++ b/sass/_768.sass
@@ -24,7 +24,7 @@ body
 //   BANNER 				==============================
 
 [role="banner"] a[href="#navigation"]
-  +hidden
+  @page
 
 //   NAVIGATION 			==============================
 
diff --git a/sass/_colour.sass b/sass/_colour.sass
index 36d9e97..4d913ed 100644
--- a/sass/_colour.sass
+++ b/sass/_colour.sass
@@ -24,7 +24,7 @@ a
   &:focus
     outline: thin dotted
     color: $linkcolorfocus
-  &:hover, 
+  &:hover,
   &:active
     outline: 0
 
diff --git a/sass/_mixins.sass b/sass/_mixins.sass
index 548f100..3013b9b 100644
--- a/sass/_mixins.sass
+++ b/sass/_mixins.sass
@@ -72,7 +72,7 @@
   // W3C
   background-repeat: repeat-x
 
-// @include bordered(COLOR, COLOR, COLOR, COLOR);
+// .bordered(COLOR, COLOR, COLOR, COLOR);
 
 =bordered($top-color: #eeeeee, $right-color: #eeeeee, $bottom-color: #eeeeee, $left-color: #eeeeee)
   border-top: solid 1px $top-color
@@ -80,14 +80,14 @@
   border-right: solid 1px $right-color
   border-bottom: solid 1px $bottom-color
 
-// @mixin rounded(VALUE);
+// @include rounded(VALUE);
 
 =rounded($radius: 4px)
   -webkit-border-radius: $radius
   -moz-border-radius: $radius
   border-radius: $radius
 
-// @mixin border-radius(VALUE,VALUE,VALUE,VALUE);
+// @include border-radius(VALUE,VALUE,VALUE,VALUE);
 
 =border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0)
   -webkit-border-top-right-radius: $topright
@@ -106,28 +106,28 @@
   -moz-background-clip: padding
   background-clip: padding-box
 
-// @mixin box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+// @include 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
 
-// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// .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)
 
-// @mixin opacity(VALUE);
+// @include opacity(VALUE);
 
 =opacity($opacity: 0.5)
   -webkit-opacity: $opacity
   -moz-opacity: $opacity
   opacity: $opacity
 
-// @include rotate(VALUEdeg);
+// .rotate(VALUEdeg);
 
 =rotate($deg)
   -webkit-transform: rotate($deg)
@@ -136,7 +136,7 @@
   -o-transform: rotate($deg)
   transform: rotate($deg)
 
-// @include scale(VALUE);
+// .scale(VALUE);
 
 =scale($ratio)
   -webkit-transform: scale($ratio)
@@ -145,7 +145,7 @@
   -o-transform: scale($ratio)
   transform: scale($ratio)
 
-// @include skew(VALUE, VALUE);
+// .skew(VALUE, VALUE);
 
 =skew($x: 0, $y: 0)
   -webkit-transform: skew($x, $y)
@@ -163,7 +163,7 @@
   -o-transition: $transition
   transition: $transition
 
-// @include translate(VALUE, VALUE)
+// .translate(VALUE, VALUE)
 
 =translate($x: 0, $y: 0)
   -webkit-transform: translate($x, $y)
@@ -186,7 +186,7 @@
 =background-alpha($color: $white, $alpha: 1)
   background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
 
-// @include background-size(VALUE VALUE);
+// .background-size(VALUE VALUE);
 
 =background-size($size)
   -webkit-background-size: $size
@@ -194,7 +194,7 @@
   -o-background-size: $size
   background-size: $size
 
-// @include background-clip(VALUE); (border-box, padding-box, content-box)
+// .background-clip(VALUE); (border-box, padding-box, content-box)
 
 =background-clip($clip)
   -webkit-background-clip: $clip
@@ -228,9 +228,6 @@
   &:after
     clear: both
 
-.clearfix
-  +clearfix
-
 // For image replacement
 
 =hide-text
@@ -249,13 +246,13 @@
 =invisible
   visibility: hidden
 
-// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 =resize($direction: both)
   resize: $direction
   overflow: auto
 
-// @include userselect(VALUE) (all, element, none, text)
+// .userselect(VALUE) (all, element, none, text)
 
 =user-select($select)
   -webkit-user-select: $select
@@ -275,18 +272,19 @@
   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
+  &.focusable
+    &:active,
+    &:focus
+      position: static
+      clip: auto
+      height: auto
+      width: auto
+      margin: 0
+      overflow: visible
 
 // 6. LAYOUT 				==============================
 
-// @include columns(250px, 0, 24px, COLOR, solid, 1px)
+// .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/_print.sass b/sass/_print.sass
index 879a9c2..97d508d 100644
--- a/sass/_print.sass
+++ b/sass/_print.sass
@@ -49,7 +49,7 @@ a, a:visited
 a[href]:after
   content: " (" attr(href) ")"
 
-a[href^="javascript:"]:after, 
+a[href^="javascript:"]:after,
 a[href^="#"]:after
   content: ""
 
diff --git a/sass/_texture.sass b/sass/_texture.sass
index 1ddb772..ddf036e 100644
--- a/sass/_texture.sass
+++ b/sass/_texture.sass
@@ -13,7 +13,7 @@
 
 // For more alert styles:
 // http://twitter.github.com/bootstrap/components.html#alerts"
-// https://github.com/twitter/bootstrap/blob/master/less/alerts"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts.less"
 
 .alert
   margin-bottom: $baselineheight
@@ -141,7 +141,7 @@
 =warninggrad
   +vertical($warningcolor, darken($warningcolor, 10%))
 
-// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
 
 // WELL ====================================================
 
diff --git a/sass/_variables.sass b/sass/_variables.sass
index c958809..d408270 100644
--- a/sass/_variables.sass
+++ b/sass/_variables.sass
@@ -40,7 +40,7 @@ $codefont: Monaco, Courier New, monospace
 // 3. COLOUR 				==============================
 
 $basecolor: rgb(45, 53, 62)
-$compcolor: adjust-hue($basecolor, 180)
+$compcolor: spin($basecolor, 180)
 $bordercolor: lighten($basecolor, 60%)
 
 // Links
diff --git a/sass/upstarts/320andup-modules/.DS_Store b/sass/upstarts/320andup-modules/.DS_Store
deleted file mode 100644
index 5008ddf..0000000
Binary files a/sass/upstarts/320andup-modules/.DS_Store and /dev/null differ
diff --git a/sass/upstarts/320andup-modules/example.html b/sass/upstarts/320andup-modules/example.html
index 87abbb7..ecfa28f 100755
--- a/sass/upstarts/320andup-modules/example.html
+++ b/sass/upstarts/320andup-modules/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-sass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/sass/upstarts/320andup-modules/index.html b/sass/upstarts/320andup-modules/index.html
index 8c2a79a..5e070ca 100755
--- a/sass/upstarts/320andup-modules/index.html
+++ b/sass/upstarts/320andup-modules/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-sass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/sass_compass/_buttons.sass b/sass_compass/_buttons.sass
index f2fd1c9..06896d8 100644
--- a/sass_compass/_buttons.sass
+++ b/sass_compass/_buttons.sass
@@ -126,33 +126,28 @@ input[type="submit"].btn:hover
   *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
+    position: relative
+    float: left
+    margin-left: -1px
+    +border-radius(0)
+    &:first-child
+      margin-left: 0
+      +border-left-radius(2px)
+    &:last-child
+      +border-right-radius(2px)
+    &.large
+      &:first-child
+        margin-left: 0
+        +border-left-radius(4px)
+      &: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
+  .btn-group
+    display: inline-block
+    *display: inline
+    *zoom: 1
diff --git a/sass_compass/_colour.sass b/sass_compass/_colour.sass
index 36d9e97..df19769 100644
--- a/sass_compass/_colour.sass
+++ b/sass_compass/_colour.sass
@@ -24,7 +24,7 @@ a
   &:focus
     outline: thin dotted
     color: $linkcolorfocus
-  &:hover, 
+  &:hover,
   &:active
     outline: 0
 
@@ -64,87 +64,75 @@ a
 
 // 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)
+.swatch-base span
+  &:nth-child(1)
+    +background-alpha($basecolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($basecolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($basecolor, 0.7)
+  &: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)
+.swatch-alert span
+  &:nth-child(1)
+    +background-alpha($alertcolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($alertcolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($alertcolor, 0.7)
+  &: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)
+.swatch-error span
+  &:nth-child(1)
+    +background-alpha($errorcolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($errorcolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($errorcolor, 0.7)
+  &: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)
+.swatch-info span
+  &:nth-child(1)
+    +background-alpha($infocolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($infocolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($infocolor, 0.7)
+  &: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)
+.swatch-success span
+  &:nth-child(1)
+    +background-alpha($successcolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($successcolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($successcolor, 0.7)
+  &: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)
+.swatch-warning span
+  &:nth-child(1)
+    +background-alpha($warningcolor, 0.9)
+  &:nth-child(2)
+    +background-alpha($warningcolor, 0.8)
+  &:nth-child(3)
+    +background-alpha($warningcolor, 0.7)
+  &:nth-child(4)
+    +background-alpha($warningcolor, 0.6)
 
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
diff --git a/sass_compass/_elements.sass b/sass_compass/_elements.sass
index c259cd9..b2b6a1f 100644
--- a/sass_compass/_elements.sass
+++ b/sass_compass/_elements.sass
@@ -53,7 +53,7 @@ figure
     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
+    &:last-child
+      margin-bottom: 0
+      padding-bottom: 0
+      border-bottom-width: 0
diff --git a/sass_compass/_forms.sass b/sass_compass/_forms.sass
index 77f9c16..f8c9258 100644
--- a/sass_compass/_forms.sass
+++ b/sass_compass/_forms.sass
@@ -83,46 +83,43 @@ select
 .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
+input
+  &[type="image"],
+  &[type="checkbox"],
+  &[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
+  &[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
 
 select,
 input[type="file"]
@@ -134,10 +131,9 @@ select
   width: auto
   background-color: $inputbackground
   +font-size(13)
-
-select[multiple],
-select[size]
-  height: auto
+  &[multiple],
+  &[size]
+    height: auto
 
 textarea
   +resize(vertical)
@@ -158,14 +154,15 @@ input[type="hidden"]
   float: left
   margin-left: -18px
 
-.radio.inline,
-.checkbox.inline
-  display: inline-block
-  padding-top: 5px
-  margin-bottom: 0
-  vertical-align: middle
+.radio,
+.checkbox
+  &.inline
+    display: inline-block
+    padding-top: 5px
+    margin-bottom: 0
+    vertical-align: middle
 
-.radio.inline + .radio.inline,
+.radio,.inline + .radio.inline,
 .checkbox.inline + .checkbox.inline
   margin-left: 10px
 
@@ -217,54 +214,49 @@ input:-moz-placeholder
 
 // .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-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-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
+.form-search
+  input,
+  textarea,
+  select
+    display: inline-block
+    margin-bottom: 0
+  .search-query
+    padding-left: 14px
+    padding-right: 14px
+    margin-bottom: 0
+    +border-radius(14)
+  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
diff --git a/sass_compass/_mixins.sass b/sass_compass/_mixins.sass
index 3766426..a21fac7 100644
--- a/sass_compass/_mixins.sass
+++ b/sass_compass/_mixins.sass
@@ -101,7 +101,7 @@
 =invisible
   visibility: hidden
 
-// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 =resize($direction: both)
   resize: $direction
@@ -127,14 +127,15 @@
   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
+  &.focusable
+    &:active,
+    &:focus
+      position: static
+      clip: auto
+      height: auto
+      width: auto
+      margin: 0
+      overflow: visible
 
 // 6. LAYOUT 				==============================
 
diff --git a/sass_compass/_print.sass b/sass_compass/_print.sass
index 879a9c2..97d508d 100644
--- a/sass_compass/_print.sass
+++ b/sass_compass/_print.sass
@@ -49,7 +49,7 @@ a, a:visited
 a[href]:after
   content: " (" attr(href) ")"
 
-a[href^="javascript:"]:after, 
+a[href^="javascript:"]:after,
 a[href^="#"]:after
   content: ""
 
diff --git a/sass_compass/_tables.sass b/sass_compass/_tables.sass
index 15f585b..f113d9d 100644
--- a/sass_compass/_tables.sass
+++ b/sass_compass/_tables.sass
@@ -28,19 +28,21 @@ table
     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
+  th,
+  td
+    colgroup + thead,
+    thead:first-child
+      tr:first-child &
+        border-top: 0
+  tbody
+    & + &
+      border-top: $tableborderwidth * 2 $tableborderstyle $tableborder
+    tr td,
+    tr th
+      +transition(background-color 0.25s 0 linear)
+    tr:hover td,
+    tr:hover th
+      background-color: $tablehover
 
 // CONDENSED ====================================================
 
@@ -67,6 +69,7 @@ table
 // STRIPED ====================================================
 
 .table-striped
-  tbody tr:nth-child(odd) td,
-  tbody tr:nth-child(odd) th
-    background-color: $tablestripe
+  tbody tr:nth-child(odd)
+    td,
+    th
+      background-color: $tablestripe
diff --git a/sass_compass/_typography.sass b/sass_compass/_typography.sass
index 56400ae..3245322 100644
--- a/sass_compass/_typography.sass
+++ b/sass_compass/_typography.sass
@@ -18,10 +18,11 @@
   color: $baseheadingfontcolor
   text-rendering: optimizelegibility
 
-h1 small,
-h2 small
-  font-weight: normal
-  color: $lightgrey
+h1,
+h2
+  small
+    font-weight: normal
+    color: $lightgrey
 
 h1,
 .h1
@@ -66,25 +67,26 @@ h6,
   #{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%)
+    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
+  &,
   &: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
+    float: left
+    width: 16px
+    height: 16px
+    padding: 0
+    background: transparent url(../img/a-rss.png) no-repeat 0 0
+    +hide-text
 
 // TYPOGRAPHY ====================================================
 
@@ -104,11 +106,9 @@ ul,
 ol
   margin: 0 0 $baselineheight #{-$gutterwidth}
   padding: 0 0 0 $gutterwidth
-
-li ul,
-li ol
-  margin: 0
-  +font-size(16)
+  li &
+    margin: 0
+    +font-size(16)
 
 // blockquote
 
@@ -122,12 +122,12 @@ blockquote
 q
   quotes: none
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after
-  content: ''
-  content: none
+blockquote,
+q
+  &:before,
+  &:after
+    content: ''
+    content: none
 
 cite
   font-style: normal
diff --git a/sass_compass/upstarts/320andup-modules/_upstart.sass b/sass_compass/upstarts/320andup-modules/_upstart.sass
index 9af81c5..694c8be 100644
--- a/sass_compass/upstarts/320andup-modules/_upstart.sass
+++ b/sass_compass/upstarts/320andup-modules/_upstart.sass
@@ -12,26 +12,24 @@
 .grid
   margin-bottom: $baseline
   border-bottom: 1px dashed lighten($basecolor, 60%)
-
-.grid:last-child
-  margin-bottom: 0
-  border-bottom-width: 0
+  &: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
+  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)
@@ -44,14 +42,15 @@
 // 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-two
+    .grid
+      width: 43.03%
+      margin-bottom: 0
+      border-bottom-width: 0
+    .grid-1
+      float: left
+    .grid-2
+      float: right
   // grids-three
   .grids-three .grid-a
     float: left
@@ -66,32 +65,34 @@
 // 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-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-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
+  .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
 
 // 1382px
 @media only screen and (min-width: 1382px)
diff --git a/sass_compass/upstarts/320andup-modules/example.html b/sass_compass/upstarts/320andup-modules/example.html
index 87abbb7..ecfa28f 100755
--- a/sass_compass/upstarts/320andup-modules/example.html
+++ b/sass_compass/upstarts/320andup-modules/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-sass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/sass_compass/upstarts/320andup-modules/index.html b/sass_compass/upstarts/320andup-modules/index.html
index 8c2a79a..5e070ca 100755
--- a/sass_compass/upstarts/320andup-modules/index.html
+++ b/sass_compass/upstarts/320andup-modules/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-sass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/sass_compass/upstarts/320andup-panels/_upstart.sass b/sass_compass/upstarts/320andup-panels/_upstart.sass
index aea75f6..680300d 100644
--- a/sass_compass/upstarts/320andup-panels/_upstart.sass
+++ b/sass_compass/upstarts/320andup-panels/_upstart.sass
@@ -22,11 +22,10 @@
   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
+  .grids
+    width: 90%
+    margin: 0 auto
+    padding: $baseline 0
 
 // 480px
 @media only screen and (min-width: 480px)
@@ -39,16 +38,20 @@
 // 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%
+  .special
+    .grids-three,
+    .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%
+  .special
+    .grids-three,
+    .grids-four
+      .grid-a
+        width: 100%
 
 // 1382px
 @media only screen and (min-width: 1382px)
diff --git a/scss/320andup_scss.scss b/scss/320andup-scss.scss
similarity index 100%
rename from scss/320andup_scss.scss
rename to scss/320andup-scss.scss
diff --git a/scss/_768.scss b/scss/_768.scss
index 0e01478..21a1d53 100755
--- a/scss/_768.scss
+++ b/scss/_768.scss
@@ -24,7 +24,7 @@ border-collapse : collapse; }
 //   BANNER 				==============================
 
 [role="banner"] a[href="#navigation"] {
-@include hidden; }
+@page; }
 
 //   NAVIGATION 			==============================
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 9ba1a6d..433bc53 100755
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -29,7 +29,7 @@ border : $buttonborderwidth $buttonborderstyle $buttonbordercolor;
 border-bottom-color : $buttonbottombordercolor;
 @include rounded(4px);
 cursor : pointer;
-*margin-left : .3em; 
+*margin-left : .3em;
 
 &:visited,
 &:hover {
@@ -46,7 +46,7 @@ border-color : $buttonbordercolor; }
 // disabled
 
 .btn-disabled {
-@include opacity(.5); 
+@include opacity(.5);
 cursor : default; }
 
 // info
@@ -54,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,
@@ -67,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 {
@@ -81,7 +81,7 @@ color : $white; }
 @include basegrad;
 border-color : darken($basecolor, 15%);
 border-bottom-color : darken($basecolor, 20%);
-color : $white; 
+color : $white;
 
 &:visited,
 &:hover {
@@ -121,12 +121,12 @@ 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 {
@@ -143,7 +143,7 @@ margin-left : -1px;
 
 .btn-group .btn:first-child {
 margin-left : 0;
-@include border-radius(2px, 0, 2px, 0); } 
+@include border-radius(2px, 0, 2px, 0); }
 
 .btn-group .btn:last-child {
 @include border-radius(0, 2px, 0, 2px); }
diff --git a/scss/_colour.scss b/scss/_colour.scss
index 2930fd5..521fc3a 100755
--- a/scss/_colour.scss
+++ b/scss/_colour.scss
@@ -13,34 +13,34 @@
 // 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; 
+::-moz-selection {
+background-color : lighten($basecolor, 65%);
+color : $basecolor;
+text-shadow : none; }
+
+::selection {
+background-color : lighten($basecolor, 65%);
+color : $basecolor;
 text-shadow : none; }
 
 // swatches
@@ -50,7 +50,7 @@ margin : 0 0 $baselineheight 0;
 padding : 0; }
 
 .swatch-row {
-display : block; 
+display : block;
 margin : 0;
 padding : 0;
 width : 200px; }
@@ -63,7 +63,7 @@ background-color : $white; }
 
 .swatch-row span {
 display : block;
-float : left; 
+float : left;
 width : 50px;
 height : 50px; }
 
diff --git a/scss/_font-awesome.scss b/scss/_font-awesome.scss
index 8299b3d..f254966 100755
--- a/scss/_font-awesome.scss
+++ b/scss/_font-awesome.scss
@@ -1,5 +1,5 @@
-// ==========================================================
-
+// ==========================================================
+
 /* Font Awesome: http://fortawesome.github.com/Font-Awesome/
 
 License
@@ -93,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 5535dc2..42f4478 100755
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -9,24 +9,24 @@
 
 /* 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);
@@ -37,7 +37,7 @@ p {
 margin-bottom : $baselineheight / 2; }
 
 ul {
-list-style-type : none; 
+list-style-type : none;
 margin : 0 0 $baselineheight 0;
 padding : 0; }
 
@@ -50,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 {
@@ -66,7 +66,7 @@ display : block;
 margin-bottom : $baseline / 8;
 font-weight : bold;
 color : $textcolor;
-cursor : pointer; 
+cursor : pointer;
 
 input,
 textarea,
@@ -83,16 +83,16 @@ 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"],
@@ -108,15 +108,15 @@ cursor : pointer;
 @include rounded(0);
 border : 0 \9; }
 
-input[type="checkbox"], 
-input[type="radio"] {  
+input[type="checkbox"],
+input[type="radio"] {
 @include box-sizing(border-box);
-padding : 0; 
-*width : 13px; 
+padding : 0;
+*width : 13px;
 *height : 13px; }
 
 input[type="image"] {
-border : 0; 
+border : 0;
 @include box-shadow(none); }
 
 input[type="file"] {
@@ -138,8 +138,8 @@ cursor : pointer;
 
 select,
 input[type="file"] {
-height : 28px; 
-*margin-top : 4px; 
+height : 28px;
+*margin-top : 4px;
 line-height : 28px; }
 
 select {
@@ -154,7 +154,7 @@ height : auto; }
 textarea {
 @include resize(vertical);
 height : auto;
-overflow : auto; 
+overflow : auto;
 vertical-align : top; }
 
 input[type="hidden"] {
@@ -162,7 +162,7 @@ display : none; }
 
 .radio,
 .checkbox {
-padding-left : 18px; 
+padding-left : 18px;
 font-weight : normal; }
 
 .radio input[type="radio"],
@@ -209,7 +209,7 @@ select:focus {
 ::-webkit-input-placeholder {
 @include font-size(14); }
 
-input:-moz-placeholder { 
+input:-moz-placeholder {
 @include font-size(14); }
 
 // help text
@@ -219,7 +219,7 @@ input:-moz-placeholder {
 color : $grey; }
 
 .help-block {
-display : block; 
+display : block;
 margin-bottom : $baselineheight / 2; }
 
 .help-inline {
@@ -262,7 +262,7 @@ margin-bottom : 0; }
 .form-search .search-query {
 padding-left : 14px;
 padding-right : 14px;
-margin-bottom : 0; 
+margin-bottom : 0;
 @include rounded(14px); }
 
 .form-search label {
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 26fe47a..68b809d 100755
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -55,7 +55,7 @@ background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// O
 background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
 background-repeat : repeat-x; }
 
-// @include bordered(COLOR, COLOR, COLOR, COLOR);
+// .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;
@@ -63,14 +63,14 @@ border-left : solid 1px $left-color;
 border-right : solid 1px $right-color;
 border-bottom : solid 1px $bottom-color; }
 
-// @mixin rounded(VALUE);
+// @include rounded(VALUE);
 
 @mixin rounded($radius:4px) {
 -webkit-border-radius : $radius;
 -moz-border-radius : $radius;
 border-radius : $radius; }
 
-// @mixin border-radius(VALUE,VALUE,VALUE,VALUE);
+// @include border-radius(VALUE,VALUE,VALUE,VALUE);
 
 @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
 -webkit-border-top-right-radius : $topright;
@@ -89,28 +89,28 @@ border-top-left-radius : $topleft;
 -moz-background-clip : padding;
 background-clip : padding-box; }
 
-// @mixin box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+// @include 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; }
 
-// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+// .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); }
 
-// @mixin opacity(VALUE);
+// @include opacity(VALUE);
 
 @mixin opacity($opacity : .5) {
 -webkit-opacity : $opacity;
 -moz-opacity : $opacity;
 opacity : $opacity; }
 
-// @include rotate(VALUEdeg);
+// .rotate(VALUEdeg);
 
 @mixin rotate($deg) {
 -webkit-transform : rotate($deg);
@@ -119,7 +119,7 @@ opacity : $opacity; }
 -o-transform : rotate($deg);
 transform : rotate($deg); }
 
-// @include scale(VALUE);
+// .scale(VALUE);
 
 @mixin scale($ratio) {
 -webkit-transform : scale($ratio);
@@ -128,7 +128,7 @@ transform : rotate($deg); }
 -o-transform : scale($ratio);
 transform : scale($ratio); }
 
-// @include skew(VALUE, VALUE);
+// .skew(VALUE, VALUE);
 
 @mixin skew($x: 0, $y: 0) {
 -webkit-transform : skew($x, $y);
@@ -146,7 +146,7 @@ transform : skew($x, $y); }
 -o-transition : $transition;
 transition : $transition; }
 
-// @include translate(VALUE, VALUE)
+// .translate(VALUE, VALUE)
 
 @mixin translate($x: 0, $y: 0) {
 -webkit-transform : translate($x, $y);
@@ -169,7 +169,7 @@ transform : translate($x, $y, $z); }
 @mixin background-alpha($color: $white, $alpha: 1) {
 background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
 
-// @include background-size(VALUE VALUE);
+// .background-size(VALUE VALUE);
 
 @mixin background-size($size){
 -webkit-background-size : $size;
@@ -177,7 +177,7 @@ background-color : hsla(hue($color), saturation($color), lightness($color), $alp
 -o-background-size : $size;
 background-size : $size; }
 
-// @include background-clip(VALUE); (border-box, padding-box, content-box)
+// .background-clip(VALUE); (border-box, padding-box, content-box)
 
 @mixin background-clip($clip) {
 -webkit-background-clip : $clip;
@@ -211,9 +211,6 @@ content : ""; }
 &:after {
 clear : both; } }
 
-.clearfix {
-@include clearfix; }
-
 // For image replacement
 
 @mixin hide-text() {
@@ -232,13 +229,13 @@ visibility : hidden; }
 @mixin invisible() {
 visibility : hidden; }
 
-// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 @mixin resize($direction: both) {
 resize : $direction;
 overflow : auto; }
 
-// @include userselect(VALUE) (all, element, none, text)
+// .userselect(VALUE) (all, element, none, text)
 
 @mixin user-select($select) {
 -webkit-user-select : $select;
@@ -257,21 +254,22 @@ width : 1px;
 margin : -1px;
 padding : 0;
 border : 0;
-
 // Make visuallyhidden focusable with a keyboard
 
-&.focusable:active,
-&.focusable:focus {
+&.focusable {
+
+&:active,
+&:focus {
 position : static;
 clip : auto;
 height : auto;
 width : auto;
 margin : 0;
-overflow: visible; } }
+overflow: visible; } } }
 
 // 6. LAYOUT 				==============================
 
-// @include columns(250px, 0, 24px, COLOR, solid, 1px)
+// .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 e0d11f8..fa28096 100755
--- a/scss/_modernizr.scss
+++ b/scss/_modernizr.scss
@@ -11,7 +11,7 @@
 
 /* audio */
 /* applicationcache */
-/* backgroundsize */ 
+/* backgroundsize */
 /* borderimage */
 /* borderradius */
 /* boxshadow */
diff --git a/scss/_page.scss b/scss/_page.scss
index bb728ca..32757ef 100755
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -11,8 +11,8 @@
 
 [role="banner"] {
 margin : 0 auto;
-padding-top : $baselineheight; 
-width : 90%; 
+padding-top : $baselineheight;
+width : 90%;
 
 a[href="#navigation"] {
 display : block;
@@ -24,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);
@@ -39,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; }
 
@@ -59,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 e8544ac..300d205 100755
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -11,57 +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, a:visited { 
+a, a:visited {
 text-decoration : underline; }
 
-a[href]:after { 
+a[href]:after {
 content : " (" attr(href) ")"; }
 
-a[href^="javascript:"]:after, 
-a[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 251119a..7310ea7 100755
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -10,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 7c79568..640c29c 100755
--- a/scss/_site.scss
+++ b/scss/_site.scss
@@ -12,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/_texture.scss b/scss/_texture.scss
index c7f0711..f2f1c82 100755
--- a/scss/_texture.scss
+++ b/scss/_texture.scss
@@ -13,7 +13,7 @@
 
 // For more alert styles:
 // http://twitter.github.com/bootstrap/components.html#alerts"
-// https://github.com/twitter/bootstrap/blob/master/less/alerts"
+// https://github.com/twitter/bootstrap/blob/master/less/alerts.less"
 
 .alert {
 margin-bottom : $baselineheight;
@@ -160,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
+// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
 
 // WELL ====================================================
 
diff --git a/scss/upstarts/320andup-modules/_upstart.scss b/scss/upstarts/320andup-modules/_upstart.scss
index 8834882..ba0c9a2 100755
--- a/scss/upstarts/320andup-modules/_upstart.scss
+++ b/scss/upstarts/320andup-modules/_upstart.scss
@@ -49,7 +49,7 @@ text-align : center; }
 // .grids-two
 
 .grids-two .grid {
-width : 43.03%; 
+width : 43.03%;
 margin-bottom : 0;
 border-bottom-width : 0; }
 
@@ -63,7 +63,7 @@ float : right; }
 
 .grids-three .grid-a {
 float : left;
-width : 31.64%; 
+width : 31.64%;
 margin-right : 2.53%; }
 
 // grids-four
@@ -91,7 +91,7 @@ float : right;
 margin-right : 0; }
 
 .grids-three .grid .grid-a {
-float : none; 
+float : none;
 width : 100%;
 margin-right : 0;
 margin-bottom : $baseline / 2; }
@@ -109,8 +109,8 @@ float : right;
 margin-right : 0; }
 
 .grids-four .grid .grid-a {
-float : none; 
-width : 100%; 
+float : none;
+width : 100%;
 margin-right : 0; }
 
 }
@@ -124,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 87abbb7..e00b4e7 100755
--- a/scss/upstarts/320andup-modules/example.html
+++ b/scss/upstarts/320andup-modules/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-scss.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/scss/upstarts/320andup-modules/index.html b/scss/upstarts/320andup-modules/index.html
index 8c2a79a..b22fc3d 100755
--- a/scss/upstarts/320andup-modules/index.html
+++ b/scss/upstarts/320andup-modules/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-scss.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/scss/upstarts/320andup-panels/_upstart.scss b/scss/upstarts/320andup-panels/_upstart.scss
index 654a1fa..6181b47 100755
--- a/scss/upstarts/320andup-panels/_upstart.scss
+++ b/scss/upstarts/320andup-panels/_upstart.scss
@@ -7,9 +7,9 @@
 /* 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 
+// 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,7 +25,7 @@ border-bottom : 2px solid lighten($basecolor, 60%); }
 
 .full .grids {
 width : 90%;
-margin : 0 auto; 
+margin : 0 auto;
 padding : $baseline 0; }
 
 // 480px
@@ -66,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 0e7b377..82b224b 100755
--- a/scss/upstarts/320andup-panels/index.html
+++ b/scss/upstarts/320andup-panels/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup-scss.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/scss_compass/_buttons.scss b/scss_compass/_buttons.scss
index a045c80..3a00518 100755
--- a/scss_compass/_buttons.scss
+++ b/scss_compass/_buttons.scss
@@ -133,35 +133,36 @@ line-height : 14px; }
 position : relative;
 *zoom : 1;
 *margin-left : .3em;
-margin-bottom : $baseline; }
+margin-bottom : $baseline;
 
-.btn-group .btn {
+.btn {
 position : relative;
 float : left;
 margin-left : -1px;
-@include border-radius(0); }
+@include border-radius(0);
 
-.btn-group .btn:first-child {
+&:first-child {
 margin-left : 0;
 @include border-left-radius(2px);
 }
 
-.btn-group .btn:last-child {
+&:last-child {
 @include border-right-radius(2px); }
 
-.btn-group .btn.large:first-child {
+&.large {
+&:first-child {
 margin-left : 0;
 @include border-left-radius(4px); }
 
-.btn-group .btn.large:last-child {
-@include border-right-radius(4px); }
+&:last-child {
+@include border-right-radius(4px); } } } }
 
 .btn-toolbar {
 clear : both;
 margin-top : $baselineheight / 2;
-margin-bottom : $baselineheight / 2; }
+margin-bottom : $baselineheight / 2;
 
-.btn-toolbar .btn-group {
+.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_compass/_colour.scss b/scss_compass/_colour.scss
index 2930fd5..e16b946 100755
--- a/scss_compass/_colour.scss
+++ b/scss_compass/_colour.scss
@@ -13,34 +13,34 @@
 // 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; 
+::-moz-selection {
+background-color : lighten($basecolor, 65%);
+color : $basecolor;
+text-shadow : none; }
+
+::selection {
+background-color : lighten($basecolor, 65%);
+color : $basecolor;
 text-shadow : none; }
 
 // swatches
@@ -50,7 +50,7 @@ margin : 0 0 $baselineheight 0;
 padding : 0; }
 
 .swatch-row {
-display : block; 
+display : block;
 margin : 0;
 padding : 0;
 width : 200px; }
@@ -63,93 +63,99 @@ background-color : $white; }
 
 .swatch-row span {
 display : block;
-float : left; 
+float : left;
 width : 50px;
 height : 50px; }
 
 // base
 
-.swatch-base span:nth-child(1) {
+.swatch-base span {
+&:nth-child(1) {
 @include background-alpha($basecolor, .9); }
 
-.swatch-base span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($basecolor, .8); }
 
-.swatch-base span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($basecolor, .7); }
 
-.swatch-base span:nth-child(4) {
-@include background-alpha($basecolor, .6); }
+&:nth-child(4) {
+@include background-alpha($basecolor, .6); } }
 
 // alert
 
-.swatch-alert span:nth-child(1) {
+.swatch-alert span {
+&:nth-child(1) {
 @include background-alpha($alertcolor, .9); }
 
-.swatch-alert span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($alertcolor, .8); }
 
-.swatch-alert span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($alertcolor, .7); }
 
-.swatch-alert span:nth-child(4) {
-@include background-alpha($alertcolor, .6); }
+&:nth-child(4) {
+@include background-alpha($alertcolor, .6); } }
 
 // error
 
-.swatch-error span:nth-child(1) {
+.swatch-error span {
+&:nth-child(1) {
 @include background-alpha($errorcolor, .9); }
 
-.swatch-error span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($errorcolor, .8); }
 
-.swatch-error span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($errorcolor, .7); }
 
-.swatch-error span:nth-child(4) {
-@include background-alpha($errorcolor, .6); }
+&:nth-child(4) {
+@include background-alpha($errorcolor, .6); } }
 
 // info
 
-.swatch-info span:nth-child(1) {
+.swatch-info span {
+&:nth-child(1) {
 @include background-alpha($infocolor, .9); }
 
-.swatch-info span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($infocolor, .8); }
 
-.swatch-info span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($infocolor, .7); }
 
-.swatch-info span:nth-child(4) {
-@include background-alpha($infocolor, .6); }
+&:nth-child(4) {
+@include background-alpha($infocolor, .6); } }
 
 // success
 
-.swatch-success span:nth-child(1) {
+.swatch-success span {
+&:nth-child(1) {
 @include background-alpha($successcolor, .9); }
 
-.swatch-success span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($successcolor, .8); }
 
-.swatch-success span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($successcolor, .7); }
 
-.swatch-success span:nth-child(4) {
-@include background-alpha($successcolor, .6); }
+&:nth-child(4) {
+@include background-alpha($successcolor, .6); } }
 
 // warning
 
-.swatch-warning span:nth-child(1) {
+.swatch-warning span {
+&:nth-child(1) {
 @include background-alpha($warningcolor, .9); }
 
-.swatch-warning span:nth-child(2) {
+&:nth-child(2) {
 @include background-alpha($warningcolor, .8); }
 
-.swatch-warning span:nth-child(3) {
+&:nth-child(3) {
 @include background-alpha($warningcolor, .7); }
 
-.swatch-warning span:nth-child(4) {
-@include background-alpha($warningcolor, .6); }
+&:nth-child(4) {
+@include background-alpha($warningcolor, .6); } }
 
 // 4. TEXTURE 				==============================
 // 5. ELEMENTS 				==============================
diff --git a/scss_compass/_elements.scss b/scss_compass/_elements.scss
index 2365d9f..8b249f9 100755
--- a/scss_compass/_elements.scss
+++ b/scss_compass/_elements.scss
@@ -56,10 +56,10 @@ padding : 0;
 li {
 margin-bottom : $baselineheight / 4;
 padding-bottom : $baselineheight / 4;
-border-bottom : 1px dashed $bordercolor; }
+border-bottom : 1px dashed $bordercolor;
 
-li:last-child {
+&:last-child {
 margin-bottom : 0;
 padding-bottom : 0;
-border-bottom-width : 0; }
+border-bottom-width : 0; } }
 }
\ No newline at end of file
diff --git a/scss_compass/_forms.scss b/scss_compass/_forms.scss
index 82916c8..8fc329e 100755
--- a/scss_compass/_forms.scss
+++ b/scss_compass/_forms.scss
@@ -95,9 +95,10 @@ width : 60px; }
 .input-small {
 width : 90px; }
 
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
+input {
+&[type="image"],
+&[type="checkbox"],
+&[type="radio"] {
 width : auto;
 height : auto;
 padding : 0;
@@ -108,18 +109,18 @@ cursor : pointer;
 @include border-radius(0);
 border : 0 \9; }
 
-input[type="checkbox"],
-input[type="radio"] {
+&[type="checkbox"],
+&[type="radio"] {
 @include box-sizing(border-box);
 padding : 0;
 *width : 13px;
 *height : 13px; }
 
-input[type="image"] {
+&[type="image"] {
 border : 0;
 @include box-shadow(none); }
 
-input[type="file"] {
+&[type="file"] {
 width : auto;
 padding : initial;
 line-height : initial;
@@ -128,13 +129,13 @@ background-color : transparent;
 background-color : initial;
 @include box-shadow(none); }
 
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+&[type="button"],
+&[type="reset"],
+&[type="submit"] {
 width : auto;
 height : auto;
 cursor : pointer;
-*overflow : visible; }
+*overflow : visible; } }
 
 select,
 input[type="file"] {
@@ -145,11 +146,11 @@ line-height : 28px; }
 select {
 width : auto;
 background-color : $inputbackground;
-@include font-size(13); }
+@include font-size(13);
 
-select[multiple],
-select[size] {
-height : auto; }
+&[multiple],
+&[size] {
+height : auto; } }
 
 textarea {
 @include resize(vertical);
@@ -170,14 +171,15 @@ font-weight : normal; }
 float : left;
 margin-left : -18px; }
 
-.radio.inline,
-.checkbox.inline {
+.radio,
+.checkbox {
+&.inline {
 display : inline-block;
 padding-top : 5px;
 margin-bottom : 0;
-vertical-align : middle; }
+vertical-align : middle; } }
 
-.radio.inline + .radio.inline,
+.radio,.inline + .radio.inline,
 .checkbox.inline + .checkbox.inline {
 margin-left : 10px; }
 
@@ -229,54 +231,56 @@ padding-left : 5px; }
 
 // .form-inline
 
-.form-inline input,
-.form-inline textarea,
-.form-inline select {
+.form-inline {
+input,
+textarea,
+select {
 display : inline-block;
 margin-bottom : 0; }
 
-.form-inline label {
+label {
 display : inline-block; }
 
-.form-inline .radio,
-.form-inline .checkbox,
-.form-inline .radio {
+.radio,
+.checkbox,
+.radio {
 padding-left : 0;
 margin-bottom : 0;
 vertical-align : middle; }
 
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
 float : left;
 margin-left : 0;
-margin-right : 3px; }
+margin-right : 3px; } }
 
 // .form-search
 
-.form-search input,
-.form-search textarea,
-.form-search select {
+.form-search {
+input,
+textarea,
+select {
 display : inline-block;
 margin-bottom : 0; }
 
-.form-search .search-query {
+.search-query {
 padding-left : 14px;
 padding-right : 14px;
 margin-bottom : 0;
 @include border-radius(14); }
 
-.form-search label {
+label {
 display : inline-block; }
 
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio {
+.radio,
+.checkbox,
+.radio {
 padding-left : 0;
 margin-bottom : 0;
 vertical-align : middle; }
 
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"] {
+.radio input[type="radio"],
+.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_compass/_mixins.scss b/scss_compass/_mixins.scss
index ac67dac..b83a713 100755
--- a/scss_compass/_mixins.scss
+++ b/scss_compass/_mixins.scss
@@ -101,7 +101,7 @@ visibility : hidden; }
 @mixin invisible() {
 visibility : hidden; }
 
-// @mixin resize(VALUE) (none, both, horizontal, vertical, inherit)
+// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
 
 @mixin resize($direction: both) {
 resize : $direction;
@@ -126,17 +126,18 @@ width : 1px;
 margin : -1px;
 padding : 0;
 border : 0;
-
 // Make visuallyhidden focusable with a keyboard
 
-&.focusable:active,
-&.focusable:focus {
+&.focusable {
+
+&:active,
+&:focus {
 position : static;
 clip : auto;
 height : auto;
 width : auto;
 margin : 0;
-overflow: visible; } }
+overflow: visible; } } }
 
 // 6. LAYOUT 				==============================
 
diff --git a/scss_compass/_modernizr.scss b/scss_compass/_modernizr.scss
index e0d11f8..fa28096 100755
--- a/scss_compass/_modernizr.scss
+++ b/scss_compass/_modernizr.scss
@@ -11,7 +11,7 @@
 
 /* audio */
 /* applicationcache */
-/* backgroundsize */ 
+/* backgroundsize */
 /* borderimage */
 /* borderradius */
 /* boxshadow */
diff --git a/scss_compass/_print.scss b/scss_compass/_print.scss
index e8544ac..300d205 100755
--- a/scss_compass/_print.scss
+++ b/scss_compass/_print.scss
@@ -11,57 +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, a:visited { 
+a, a:visited {
 text-decoration : underline; }
 
-a[href]:after { 
+a[href]:after {
 content : " (" attr(href) ")"; }
 
-a[href^="javascript:"]:after, 
-a[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_compass/_reset.scss b/scss_compass/_reset.scss
index 251119a..7310ea7 100755
--- a/scss_compass/_reset.scss
+++ b/scss_compass/_reset.scss
@@ -10,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_compass/_site.scss b/scss_compass/_site.scss
index 7c79568..640c29c 100755
--- a/scss_compass/_site.scss
+++ b/scss_compass/_site.scss
@@ -12,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_compass/_tables.scss b/scss_compass/_tables.scss
index 9d2bb4b..e7bfe5a 100755
--- a/scss_compass/_tables.scss
+++ b/scss_compass/_tables.scss
@@ -32,22 +32,24 @@ 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; }
+th,
+td {
+colgroup + thead,
+thead:first-child {
+tr:first-child & {
+border-top : 0; } } }
 
-tbody + tbody {
+tbody {
+& + & {
 border-top : $tableborderwidth * 2 $tableborderstyle $tableborder; }
 
-tbody tr td,
-tbody tr th {
+tr td,
+tr th {
 @include transition(background-color .25s 0 linear); }
 
-tbody tr:hover td,
-tbody tr:hover th {
-background-color : $tablehover; }
+tr:hover td,
+tr:hover th {
+background-color : $tablehover; } }
 }
 
 // CONDENSED ====================================================
@@ -81,9 +83,10 @@ border-top : 0; }
 
 .table-striped {
 
-tbody tr:nth-child(odd) td,
-tbody tr:nth-child(odd) th {
-background-color : $tablestripe; }
+tbody tr:nth-child(odd) {
+td,
+th {
+background-color : $tablestripe; } }
 }
 
 
diff --git a/scss_compass/_typography.scss b/scss_compass/_typography.scss
index cff8414..877cc18 100755
--- a/scss_compass/_typography.scss
+++ b/scss_compass/_typography.scss
@@ -18,10 +18,11 @@ font-weight : $baseheadingfontweight;
 color : $baseheadingfontcolor;
 text-rendering : optimizelegibility; }
 
-h1 small,
-h2 small {
+h1,
+h2 {
+small {
 font-weight : normal;
-color : $lightgrey; }
+color : $lightgrey; } }
 
 h1,
 .h1 {
@@ -66,7 +67,6 @@ text-transform : uppercase; }
 #{headings(3)} {
 float : left;
 margin-right : $gutterwidth;
-}
 
 a {
 display : block;
@@ -80,15 +80,17 @@ background-color : lighten($basecolor, 75%); }
 &:hover {
 background-color : lighten($basecolor, 75%); }
 }
+}
 
-.header .a-rss,
-.header .a-rss:hover {
+.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; }
+@include hide-text; } }
 
 // TYPOGRAPHY ====================================================
 
@@ -107,12 +109,11 @@ small {
 ul,
 ol {
 margin : 0 0 $baselineheight #{-$gutterwidth};
-padding : 0 0 0 $gutterwidth; }
+padding : 0 0 0 $gutterwidth;
 
-li ul,
-li ol {
+li & {
 margin : 0;
-@include font-size(16); }
+@include font-size(16); } }
 
 // blockquote
 
@@ -126,12 +127,12 @@ font-style : normal; }
 q {
 quotes : none; }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote,
+q {
+&:before,
+&:after {
 content : '';
-content : none;}
+content : none; } }
 
 cite {
 font-style : normal; }
@@ -201,7 +202,7 @@ line-height : 0;
 vertical-align : baselineheight; }
 
 sup {
-top : -.5em; }
+top : -0.5em; }
 
 sub {
-bottom : -.25em; }
\ No newline at end of file
+bottom : -0.25em; }
\ No newline at end of file
diff --git a/scss_compass/upstarts/320andup-modules/_upstart.scss b/scss_compass/upstarts/320andup-modules/_upstart.scss
index 8834882..391e00f 100755
--- a/scss_compass/upstarts/320andup-modules/_upstart.scss
+++ b/scss_compass/upstarts/320andup-modules/_upstart.scss
@@ -11,16 +11,16 @@
 
 .grid {
 margin-bottom : $baseline;
-border-bottom : 1px dashed lighten($basecolor, 60%); }
+border-bottom : 1px dashed lighten($basecolor, 60%);
 
-.grid:last-child {
+&:last-child {
 margin-bottom : 0;
-border-bottom-width : 0; }
+border-bottom-width : 0; } }
 
 .furniture-letter {
-overflow : hidden; }
+overflow : hidden;
 
-.furniture-letter span {
+span {
 display : block;
 float : left;
 margin : 0 12px 0 0;
@@ -31,7 +31,7 @@ color : $white;
 @include font-size(32);
 font-weight : bold;
 line-height : 44px;
-text-align : center; }
+text-align : center; } }
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -48,22 +48,23 @@ text-align : center; }
 
 // .grids-two
 
-.grids-two .grid {
-width : 43.03%; 
+.grids-two {
+.grid {
+width : 43.03%;
 margin-bottom : 0;
 border-bottom-width : 0; }
 
-.grids-two .grid-1 {
+.grid-1 {
 float : left; }
 
-.grids-two .grid-2 {
-float : right; }
+.grid-2 {
+float : right; } }
 
 // grids-three
 
 .grids-three .grid-a {
 float : left;
-width : 31.64%; 
+width : 31.64%;
 margin-right : 2.53%; }
 
 // grids-four
@@ -80,38 +81,40 @@ 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; }
 
-.grids-three .grid-3 {
+.grid-3 {
 float : right;
 margin-right : 0; }
 
-.grids-three .grid .grid-a {
-float : none; 
+.grid .grid-a {
+float : none;
 width : 100%;
 margin-right : 0;
-margin-bottom : $baseline / 2; }
+margin-bottom : $baseline / 2; } }
 
 // grids-four
 
-.grids-four .grid {
+.grids-four {
+.grid {
 float : left;
 width : 20.25%;
 margin : 0 6.32% 0 0;
 border-bottom-width : 0; }
 
-.grids-four .grid-4 {
+.grid-4 {
 float : right;
 margin-right : 0; }
 
-.grids-four .grid .grid-a {
-float : none; 
-width : 100%; 
-margin-right : 0; }
+.grid .grid-a {
+float : none;
+width : 100%;
+margin-right : 0; } }
 
 }
 
@@ -124,5 +127,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_compass/upstarts/320andup-modules/example.html b/scss_compass/upstarts/320andup-modules/example.html
index 87abbb7..58f5e1c 100755
--- a/scss_compass/upstarts/320andup-modules/example.html
+++ b/scss_compass/upstarts/320andup-modules/example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup_scss_compass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/scss_compass/upstarts/320andup-modules/index.html b/scss_compass/upstarts/320andup-modules/index.html
index 8c2a79a..e744f50 100755
--- a/scss_compass/upstarts/320andup-modules/index.html
+++ b/scss_compass/upstarts/320andup-modules/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup_scss_compass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>
diff --git a/scss_compass/upstarts/320andup-panels/_upstart.scss b/scss_compass/upstarts/320andup-panels/_upstart.scss
index 654a1fa..dc7dfed 100755
--- a/scss_compass/upstarts/320andup-panels/_upstart.scss
+++ b/scss_compass/upstarts/320andup-panels/_upstart.scss
@@ -7,9 +7,9 @@
 /* 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 
+// 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,12 +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%);
 
-.full .grids {
+.grids {
 width : 90%;
-margin : 0 auto; 
-padding : $baseline 0; }
+margin : 0 auto;
+padding : $baseline 0; } }
 
 // 480px
 @media only screen and (min-width: 480px) {
@@ -42,19 +42,22 @@ padding : $baseline 0; }
 @media only screen and (min-width: 768px) {
 
 // Extra wide grid units
-.special .grids-three .grid-a,
-.special .grids-four .grid-a {
-width : 43.03%; }
-
+.special {
+.grids-three,
+.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%; }
+.special {
+.grids-three,
+.grids-four {
+.grid-a {
+width : 100%; } } }
 }
 
 // 1382px
@@ -66,5 +69,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_compass/upstarts/320andup-panels/index.html b/scss_compass/upstarts/320andup-panels/index.html
index 0e7b377..67edf67 100755
--- a/scss_compass/upstarts/320andup-panels/index.html
+++ b/scss_compass/upstarts/320andup-panels/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 
-<!-- 
-320 and Up 
+<!--
+320 and Up
 Author: Andy Clarke (http://stuffandnonsense.co.uk)
 Author: Keith Clark (http://twitter.com/keithclarkcouk)
 Version: 3
@@ -33,7 +33,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- For all browsers -->
-<link rel="stylesheet" href="../../../css/320andup.css">
+<link rel="stylesheet" href="../../../css/320andup_scss_compass.css">
 
 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="../../../js/selectivizr-min.js"></script>