diff --git a/new-racket-web/sass/_base.scss b/new-racket-web/sass/_base.scss
index 8b707de6df..0526bb8e7e 100644
--- a/new-racket-web/sass/_base.scss
+++ b/new-racket-web/sass/_base.scss
@@ -42,11 +42,22 @@ html, body {
 
 .fixed {
   position: fixed;
+  &.pinned {
+    position: absolute;
+  }
   @include respond(portrait-tablets) {
     position: relative !important;
+    top: auto !important;
+    left: auto !important;
   }
 }
 
+.unfixed {
+  position: relative !important;
+  top: auto !important;
+  left: auto !important;
+}
+
 .text-center {
   text-align: center;
 }
diff --git a/new-racket-web/sass/_custom.scss b/new-racket-web/sass/_custom.scss
index 9548b6c609..0d5d753451 100644
--- a/new-racket-web/sass/_custom.scss
+++ b/new-racket-web/sass/_custom.scss
@@ -1 +1,3 @@
 // Your custom SCSS should be written here...
+
+
diff --git a/new-racket-web/sass/_fonts.scss b/new-racket-web/sass/_fonts.scss
index 357c3abc4c..c4f72b5829 100644
--- a/new-racket-web/sass/_fonts.scss
+++ b/new-racket-web/sass/_fonts.scss
@@ -1,8 +1,7 @@
 /* Fonts */
 
 // Import Google Web Fonts
-@import url(//fonts.googleapis.com/css?family=Open+Sans:500,400,300,600,700);
-@import url(//fonts.googleapis.com/css?family=Inconsolata);
+@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
 
 
 // Set local icon font
diff --git a/new-racket-web/sass/_grid.scss b/new-racket-web/sass/_grid.scss
index b1b487d6bd..2db88ed164 100755
--- a/new-racket-web/sass/_grid.scss
+++ b/new-racket-web/sass/_grid.scss
@@ -240,7 +240,7 @@ img {
       }
     }
     .centered {
-      margin:0 !important;
+      margin-left: 0 !important;
     }
   }
   .column, .columns {
diff --git a/new-racket-web/sass/functions/_responsivity.scss b/new-racket-web/sass/functions/_responsivity.scss
index b36777add7..7aab35dfa9 100644
--- a/new-racket-web/sass/functions/_responsivity.scss
+++ b/new-racket-web/sass/functions/_responsivity.scss
@@ -16,6 +16,9 @@
   @else if $media == tablets {
   	@media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; }
   }
+  @else if $media == desktop {
+    @media only screen and (min-width: $tablet-device-width) { @content; }
+  }
   @else if $media == document-width {
     @media only screen and (max-width: $document-width + 20) { @content; }
   }
diff --git a/new-racket-web/sass/functions/_semantic-grid.scss b/new-racket-web/sass/functions/_semantic-grid.scss
index aa00b1753a..ae3f2f9d15 100644
--- a/new-racket-web/sass/functions/_semantic-grid.scss
+++ b/new-racket-web/sass/functions/_semantic-grid.scss
@@ -45,10 +45,11 @@
 
 @mixin column($columns:$columns, $alignment: false, $behavior: false) {
   @if $alignment == center   {
-    float: none;
-    margin: 0 auto !important;
-    width: columns($columns);
     @extend %columnconfig;
+    float: none;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: columns($columns);
     @include respond(all-phones) {
       float: left;
       margin-left: 0;
@@ -56,17 +57,17 @@
     }
   }
   @else if $behavior == collapse {
-    width: columns($columns);
     @extend %columnconfig;
     @extend %collapse;
+    width: columns($columns);
     @include respond(all-phones) {
       float: left;
       width: 100%;
     }
   }
   @else {
-    width: columns($columns);
     @extend %columnconfig;
+    width: columns($columns);
     @include respond(all-phones) {
       float: left;
       margin-left: 0;
@@ -77,10 +78,11 @@
 
 @mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
   @if $alignment == center   {
-    float: none;
-    margin: 0 auto !important;
-    width: columns($columns, true);
     @extend %columnconfig;
+    float: none;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: columns($columns, true);
     @include respond(all-phones) {
       float: left;
       margin-left: 0;
@@ -88,17 +90,17 @@
     }
   }
   @else if $behavior == collapse {
-    width: columns($columns, true);
     @extend %columnconfig;
     @extend %collapse;
+    width: columns($columns, true);
     @include respond(all-phones) {
       float: left;
       width: 100%;
     }
   }
   @else {
-    width: columns($columns, true);
     @extend %columnconfig;
+    width: columns($columns, true);
     @include respond(all-phones) {
       float: left;
       margin-left: 0;
diff --git a/new-racket-web/sass/ui/_all.scss b/new-racket-web/sass/ui/_all.scss
index 8ba4d01c19..b05ce34cbe 100644
--- a/new-racket-web/sass/ui/_all.scss
+++ b/new-racket-web/sass/ui/_all.scss
@@ -7,3 +7,4 @@
 @import "images";
 @import "video";
 @import "toggles";
+@import "tables";
diff --git a/new-racket-web/sass/ui/_forms.scss b/new-racket-web/sass/ui/_forms.scss
index ce508b5ba8..79f822661e 100644
--- a/new-racket-web/sass/ui/_forms.scss
+++ b/new-racket-web/sass/ui/_forms.scss
@@ -3,7 +3,7 @@
 @import "../functions/forms";
 
 
-form { 
+form {
   margin: 0 0 18px;
   label {
     display: block;
@@ -35,7 +35,7 @@ form {
     }
   }
 }
-  
+
 .field {
   position: relative;
   max-width: 100%;
@@ -205,6 +205,10 @@ form {
     @include border-radius(0px 4px 4px 0);
   }
 
+  &.append button, &.prepend button {
+    display: inline-block;
+  }
+
   &.append input:first-child {
     margin-right: 0;
   }
@@ -239,6 +243,10 @@ form {
         }
       }
 
+      &.no-icon:after {
+        display: none;
+      }
+
       // <input> does not allow :before & :after
       // pseudo elements. Removing validation
       // icons from those elements to avoid
@@ -275,7 +283,7 @@ form {
       }
     }
   }
-  
+
   .radio, & .checkbox {
     @each $error in danger $danger-color, warning $warning-color, success $success-color {
       &.#{nth($error, 1)} {
@@ -316,14 +324,14 @@ form {
     line-height: 16px;
   }
 }
-  
+
 .field .text input[type="search"] {
   -webkit-appearance: textfield;
 }
-  
+
 
 /* Form Picker Element (<select>) */
-  
+
 .picker {
   position: relative;
   width: auto;
diff --git a/new-racket-web/sass/ui/_navbar.scss b/new-racket-web/sass/ui/_navbar.scss
index 3283728f6d..35cef83e09 100644
--- a/new-racket-web/sass/ui/_navbar.scss
+++ b/new-racket-web/sass/ui/_navbar.scss
@@ -59,6 +59,9 @@
       padding: 0 0 0 $norm;
       overflow: hidden;
       @include line-and-height(height-calc($larger - 3));
+      img {
+        max-height: 95%;
+      }
     }
 
     // Navbar Logo Mobile Styles
@@ -132,6 +135,9 @@
                      0 1px 0 darken($navbar-color, 20%);
         @include line-and-height(height-calc($larger - 3));
         @include font-size($norm);
+        i.icon-popup {
+          position: absolute;
+        }
       }
       .btn {
         border-color: darken($navbar-color, 30%) !important;
@@ -226,7 +232,7 @@
   @include background-image(linear-gradient(lighten($navbar-color, 20%),darken($navbar-color, 10%)));
   @include box-shadow(inset 0 1px 1px lighten($navbar-color, 20%),
           0 1px 2px rgba(0,0,0,0.80) !important); /* Remove this line if you dont want a dropshadow on your navigation*/
-  
+
   // Pretty Nav Toggle Styles
   @include respond(all-phones) {
     a.toggle {
@@ -303,14 +309,15 @@
   }
 }
 
-.no-touch .navbar ul li:hover > a {
+.gumby-no-touch .navbar ul li:hover > a,
+.gumby-touch .navbar ul li.active > a {
   position: relative;
   background: $info-hover-color;
   z-index: 1000;
 }
 
-.no-touch .navbar ul li:hover .dropdown, 
-.touch .navbar ul li.active .dropdown {
+.gumby-no-touch .navbar ul li:hover .dropdown,
+.gumby-touch .navbar ul li.active .dropdown {
   min-height: 50px;
   max-height: $tablet-device-width - 207;
   overflow: visible;
@@ -321,7 +328,7 @@
   @include box-shadow(0px 3px 4px rgba(0,0,0,.3));
 }
 
-.no-touch .navbar ul li:hover .dropdown ul {
+.gumby-no-touch .navbar ul li:hover .dropdown ul {
   position: relative;
   top: 0;
   min-height: 50px;
@@ -354,8 +361,8 @@
   }
 }
 
-.no-touch .navbar li .dropdown ul > li:hover .dropdown,
-.touch .navbar li .dropdown ul > li.active .dropdown {
+.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown,
+.gumby-touch .navbar li .dropdown ul > li.active .dropdown {
   border-top: none;
   display: block;
   position: absolute;
@@ -372,11 +379,11 @@
   }
 }
 
-.no-touch .navbar li .dropdown ul li a:hover {
+.gumby-no-touch .navbar li .dropdown ul li a:hover {
   background: $default-color;
 }
 
-.touch .navbar a:hover {
+.gumby-touch .navbar a:hover {
   color: $navbar-link-color !important;
 }
 
diff --git a/new-racket-web/sass/ui/_tables.scss b/new-racket-web/sass/ui/_tables.scss
new file mode 100644
index 0000000000..000ee5a75a
--- /dev/null
+++ b/new-racket-web/sass/ui/_tables.scss
@@ -0,0 +1,87 @@
+table {
+	display: table;
+	background-color: $table-bgcolor;
+	border-collapse: collapse;
+	border-spacing: 0;
+	margin-bottom: 20px;
+	width: 100%;
+	border: $table-border-size $table-border-style $table-border-color;
+
+	caption {
+		text-align: center;
+		font-size: $larger;
+		padding: .75em;
+	}
+
+	thead th,
+	tbody td,
+	tr td {
+		display: table-cell;
+		padding: 10px;
+		vertical-align: top;
+		text-align: left;
+		border-top: $table-cell-border-size $table-cell-border-style $table-cell-border-color;
+	}
+
+	tr td, tbody tr td {
+		font-size: $norm;
+	}
+
+	tr td:first-child {
+		font-weight: $table-row-first-cell-font-weight;
+	}
+
+	thead {
+		background-color: $table-thead-bgcolor;
+		color: #fff;
+
+		tr th {
+			font-size: $norm;
+			font-weight: bold;
+			vertical-align: bottom;
+		}
+	}
+
+	&.striped tr:nth-of-type(even),
+	table tr.stripe,
+	table tr.striped {
+		background-color: $table-stripe-bgcolor;
+	}
+
+	&.rounded {
+		border-radius: $table-border-radius;
+		border-collapse: separate;
+
+		caption + thead tr:first-child th:first-child,
+		caption + tr td:first-child,
+		> thead tr:first-child th:first-child,
+		> thead tr:first-child td:first-child,
+		> tr:first-child td:first-child {
+			border-top-left-radius: $table-border-radius;
+		}
+
+		caption + thead tr:first-child th:last-child,
+		caption + tr td:last-child,
+		> thead tr:first-child th:last-child,
+		> thead tr:first-child td:last-child,
+		> tr:first-child td:last-child {
+			border-top-right-radius: $table-border-radius;
+		}
+
+		thead ~ tr:last-child td:last-child,
+		tbody tr:last-child td:last-child {
+			border-bottom-right-radius: $table-border-radius;
+		}
+
+		thead ~ tr:last-child td:first-child,
+		tbody tr:last-child td:first-child {
+			border-bottom-left-radius: $table-border-radius;
+		}
+
+		thead th, thead td,
+		caption + tbody tr:first-child td,
+		> tbody:first-child tr:first-child td {
+			border-top: 0;
+		}
+	}
+}
diff --git a/new-racket-web/sass/ui/_tabs.scss b/new-racket-web/sass/ui/_tabs.scss
index 4ac794ec86..0ee305c97f 100644
--- a/new-racket-web/sass/ui/_tabs.scss
+++ b/new-racket-web/sass/ui/_tabs.scss
@@ -40,6 +40,7 @@
       &.active > a {
         @include line-and-height($tab-height + 1);
         background: $white;
+        cursor: default;
       }
       &:last-child {
         margin-right: 0;
diff --git a/new-racket-web/sass/ui/_toggles.scss b/new-racket-web/sass/ui/_toggles.scss
index 0cdc117fec..a9399d1a9b 100644
--- a/new-racket-web/sass/ui/_toggles.scss
+++ b/new-racket-web/sass/ui/_toggles.scss
@@ -24,22 +24,21 @@
 	top: 0;
 	left: 0;
 	z-index: -999999;
-	display: none;
   background: rgb(0, 0, 0);
   background: $modal-overlay-color;
  	> .content {
- 		width: 85%;
+ 		width: 50%;
  		min-height: 50%;
-    max-height: 95%;
+    max-height: 65%;
  		position: relative;
- 		top: 5%;
+ 		top: 25%;
  		margin: 0 auto;
- 		padding: 10px;
+ 		padding: $gutter-in-px;
  		background: $modal-window-color;
  		z-index: 2;
  		overflow: auto;
     @include respond(portrait-tablets) {
-      width: 90%;
+      width: 80%;
       min-height: 80%;
       max-height: 80%;
       top: 10%;
@@ -59,10 +58,9 @@
   }
   &, > .content {
     @include opacity(0);
-    @include transition-duration(.1s);
+    @include transition-duration(.3s);
   }
  	&.active {
-	        display: block;
  		z-index: 999999;
     &, > .content {
       @include opacity(1);
diff --git a/new-racket-web/sass/var/_settings.scss b/new-racket-web/sass/var/_settings.scss
index c138224ff1..84dcd0959c 100755
--- a/new-racket-web/sass/var/_settings.scss
+++ b/new-racket-web/sass/var/_settings.scss
@@ -26,13 +26,12 @@ $font-smoothing: antialiased;
 // Font Weights
 $font-weight-bold: 700;
 $font-weight-semibold: 600;
-$font-weight-heavy: 500;
 $font-weight-medium: 400;
 $font-weight-regular: 400;
 $font-weight-light: 300;
 $font-weight-thin: 300;
 
-$header-font-weight: $font-weight-heavy;
+$header-font-weight: $font-weight-thin;
 $body-font-weight: $font-weight-regular;
 $type-font-weight: $font-weight-regular;
 $link-font-weight: $font-weight-regular;
@@ -129,6 +128,21 @@ $drawer-inner-shadow-y-offset: 2px;
 $drawer-inner-shadow-blur: 5px;
 $drawer-inner-shadow-color: #313436;
 
+// Tables
+$table-bgcolor: #fff;
+$table-thead-bgcolor: $primary-color;
+$table-row-first-cell-font-weight: bold;
+$table-border-size: 1px;
+$table-border-style: solid;
+$table-border-color: #e5e5e5;
+$table-cell-border-size: 1px;
+$table-cell-border-color: #e5e5e5;
+$table-cell-border-style: solid;
+// .rounded
+$table-border-radius: 4px;
+// .striped
+$table-stripe-bgcolor: #e5e5e5;
+
 // Floats
 $default-float: left;
 $switch-float: right;