diff --git a/.gitignore b/.gitignore
index 3ad75cd5324ba62d8bb28654017bf4a24ca392d7..190fac0aad4ae69e75b4f5ca4b96da448fcf861b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 /sass/.DS_Store
 
 /.sass-cache
+
+/sass/.sass-cache/
diff --git a/less/buttons.less b/less/buttons.less
index 137893208c975431a8594054ca98a2f0395ab512..f00aa60802cd217898380df7b208be365338f462 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -1,32 +1,21 @@
 .btn {
-	background: #fff;
+	background: #999;
+	border-radius: 10px; /* rounded corners */
+	border: 0;
 	color: #fff;
+	cursor: pointer;
 	display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
-	font-size: 2.5em; 
+	font-size: 2.5em;
+	margin: .2em .3em .2em 0;
 	padding: 15px 40px 16px;
-	text-decoration: none; 
-	margin: .3em .2em 0 0;
-	cursor: pointer;
-	border: 0;
-	outline: 0; /* when the button is focused, don't show an outline */
-	border-radius: 10px; /* rounded corners */
 }
 
 .btn:hover {
-	background: #eee;
+	background: #888;
 }
 
 .btn:active,.btn:focus {
-	background: #ddd;
-}
-
-.btn:not([class*='btn-']) {
-	color: #000;
-	border: 2px solid;
-	padding: 13px 38px 14px; /* This way we don't change the button size, as there's no border on other buttons */
-	&.small-btn {
-		padding: 8px 14px 9px; /* This padding is 2px smaller than the normal small-btn padding to account for the border */
-	}
+	background: #777;
 }
 
 .btn-a {
@@ -60,8 +49,8 @@
 	}
 }
 
-.small-btn {
-	padding: 10px 15px 11px;
-	font-size: .9em;
+.btn-sm {
 	border-radius: 4px; /* rounded corners */
+	font-size: .9em;
+	padding: 10px 15px 11px;
 }
diff --git a/less/general.less b/less/general.less
index 313c3bed0628adcaa4c4c199a059843f79e78dc7..ed85c6b1aa730ec315522e1e32e3ea927d81ee79 100644
--- a/less/general.less
+++ b/less/general.less
@@ -1,18 +1,18 @@
 body, textarea {
-	font-family: Arial, sans-serif;
+	font: 16px Arial, sans-serif; /* Arial is used so that the navbar looks nice on iOS. */
 	margin: 0;
-	font-size: 16px;
 }
 
 .smooth {
 	transition: all .2s;
 }
 
-@media (max-width:870px) {
-	.row column {
-		width: 100%;
-		margin: 1% auto;
-	}
+.btn, .nav a {
+	text-decoration: none;
+}
+
+.btn, .nav {
+	outline: 0; /* when the button or navbar is focused, don't show an outline */
 }
 
 .container {
diff --git a/less/grid.less b/less/grid.less
index e9ecf75d3cfb4cf0d6da302e50855ad30b12cc6a..e0c019aa9362417c3bffa2709b809b8b14490b29 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,12 +1,14 @@
 /* Grid system responsive code is in general.less */
 
-/* Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%. */
+/*
+	Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%.
+*/
 
 .row {
-	line-height: 2em;
 	margin-top: 2%;
-	overflow: auto;
+	overflow: auto; /* required - without this, the page layout is screwed up */
 }
+
 column {
 	float: left;
 	margin: auto 1%;
@@ -50,3 +52,11 @@ column {
 .c1 {
 	width: 6.33%;
 }
+
+/* For smaller screens, change all columns to 100% width */
+@media (max-width:870px) {
+	.row column {
+		margin: 1% auto;
+		width: 100%;
+	}
+}
diff --git a/less/icons.less b/less/icons.less
index f6fc2b96a0ea0f57933d6c2aba9689ab1b039e97..3d28e3610c5aa7116ec7ad85a51c8a03677b99ce 100644
--- a/less/icons.less
+++ b/less/icons.less
@@ -1,4 +1,3 @@
 ico {
-	font-size: 2.04em;
-	font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif; /* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
+	font: 2.04em Arial Unicode MS, Lucida Sans Unicode; /* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
 }
diff --git a/less/inputs.less b/less/inputs.less
index 62812f071e14ef3942a5105dbcde23d7dc2c8f26..6395bc8007c8f2b5b7ccd78dd3d6a81b16e990ad 100644
--- a/less/inputs.less
+++ b/less/inputs.less
@@ -1,8 +1,13 @@
+textarea, input, .addon-front {
+	border: 1px solid #ccc;
+	font-size: .8em;
+}
+
 textarea, input {
 	outline: 0;
 	padding: 6px;
 	&:focus {
-		border: 1px solid #5ab;
+		border-color: #5ab;
 	}
 }
 
@@ -11,12 +16,6 @@ textarea, input[type='text'] {
 }
 
 .addon-front {
-	padding: 6px 11px 6px 10px;
-	margin-right: -2px;
+	padding: 6px 11px;
 	border-right: 0;
 }
-
-textarea, input, .addon-front {
-	border: 1px solid #ccc;
-	font-size: .8em;
-}
diff --git a/less/navbar.less b/less/navbar.less
index 2b196f93fc1593dd93e78c18783d1541a4f1ff2c..031386ea5821607fe576ccc9643e3983d7af8e4d 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -1,93 +1,70 @@
-nav {
+.nav, .nav-link:hover, .nav .pagename {
 	background: #000;
+	color: #fff;
 }
 
-.navbar {
-	color: #fff;
+.nav {
 	height: 1.5em;
 	padding: .7em 0 .95em;
-	outline: 0;
-}
-
-.navbar a {
-	text-decoration: none;
+	/* Uncomment for animations
+	max-height: 1.5em;
+	*/
 }
 
-.navbar-link {
+.nav a {
 	padding-right: 1em;
 	color: #aaa;
 	top: -1px;
-	position: relative;
 	font-size: 14px;
-	&:hover {
-		color: #fff;
-	}
+	position: relative;
 }
 
-button.btn.close.small-btn {
+.btn.btn-close {
 	background: #000;
 	visibility: hidden;
 	float: right;
-	margin-right: 4px;
-	margin-top: -51px;
+	margin-top: -54px;
 	font-size: 25px;
-	color: #fff;
-	border: 0;
 }
 
 .current {
-	color: #fff; /* make current page white */
+	color: #fff; /* make current page link white */
 }
 
-.pagename {
-	color: #fff;
+.nav .pagename {
 	font-size: 22px;
 	top: 1px;
-	position: relative;
-}
-
-.navbar input, .navbar .btn {
-	margin-top: -20px;
-	/* This ensures that any buttons and inputs in the navbar will not mess up its vertical alignment */
-}
-
-/* Necessary for animations
-.navbar {
-	max-height: 1.5em;
 }
-*/
 
 @media (max-width:500px) {
-	button.btn.close.small-btn {
+	.btn.btn-close {
 		visibility: visible;
 	}
-	.navbar {
+	.nav {
 		/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
 		overflow: hidden;
 	}
 	.pagename {
 		margin-top: -11px;
 	}
-	.navbar:focus {
+	.nav:focus {
 		/* Necesary for animations
 		max-height: 500px;
 		height: 100%;
 		*/
 		height: auto;
 	}
-	.navbar:before {
+	.nav div:before {
 		content: '_';
-		font-weight: bold;
 		border-bottom: 10px double;
-		line-height: 0;
 		float: right;
-		font-size: 32px;
-		margin-top: -10px;
+		top: 1px;
 		position: relative;
 		background: #000;
 		height: 21px;
+		font: bold 32px/0 sans-serif; /* bold, 32px sans-serif text with a line-height of zero */
 	}
-	.navbar a {
+	.nav a {
 		padding: .5em 0;
 		width: 50%;
 		display: block;
diff --git a/sass/_button.scss b/sass/_button.scss
index f6cfd1a0efd71f734db6a97bd04ce396f5758642..af76f139a57eae626c03eb48767f5707526ce88e 100644
--- a/sass/_button.scss
+++ b/sass/_button.scss
@@ -15,36 +15,26 @@
 }
 
 
+
 @if $import-buttons == true {
 //-------------------------------------------------------------------
 // Button Styles & Classes
 //-------------------------------------------------------------------
 
-
-
 // Set Generic <button> and .btn styling.
 // use .btn on any element to give it the styling of a button
 .btn {
-  @include btn-style(#fff, #eee, #ddd);
-  border-radius: 10px; /* rounded corners */
+  @extend %no-underline;
+  @extend outline-0;
+  @include btn-style(#999, #888, #777);
   border: 0;
+  border-radius: 10px; // rounded corners
   color: #fff;
   cursor: pointer;
-  display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
+  display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
   font-size: 2.5em;
-  margin: .3em .7em;
-  outline: 0; /* when the button is focused, don't show an outline */
+  margin: .2em .3em .2em 0;
   padding: 15px 40px 16px;
-  text-decoration: none;
-
-  // to make sure buttons are visible when not paired with a coloring
-  // class, we give the <button> and .btn a dark border and text color
-  &:not([class*='btn-']) {
-    box-shadow: 0 0 0 2px inset;
-    color: #000;
-    // We use box shadow here because then we can
-    // apply a border without changing the element height
-  }
 }
 
 
@@ -65,10 +55,10 @@
 
 // Add this class to a <button> or element with a .btn class
 // to create a smaller sized button.
-.btn-small {
-  border-radius: 7px; /* rounded corners */
-  font-size: 1em;
-  padding: 7px 19px 8px;
+.btn-sm {
+  border-radius: 4px; /* rounded corners */
+  font-size: .9em;
+  padding: 10px 15px 11px;
 }
 
 
diff --git a/sass/_general.scss b/sass/_general.scss
index ab1944ee9682359f28b95926ea79e82c97a311e2..4a91f746709aa3cec563c5b111156e8d9676fa3d 100644
--- a/sass/_general.scss
+++ b/sass/_general.scss
@@ -2,51 +2,36 @@
 //  General Min Styling
 //-------------------------------------------------------------------
 
-body {
-  font: 16px sans-serif;
+body, textarea {
+  font: 16px Arial, sans-serif;
   margin: 0;
+  // Arial is used so the nav bar looks nice in iOS
 }
 
+
+// apply a smooth transition effect to an element's state change
 .smooth {
   transition: all .2s;
 }
 
-hr {
-  margin: 2.5em auto;
+.container {
+  margin: auto;
+  width: 1270px;
 
-  &.mediumwidth {
-    margin: 2.5em auto;
+  @media(max-width:1310px) {
+    margin: 0 20px;
+    width: auto;
   }
 }
 
-.mediumwidth {
-  margin-bottom: .3em;
-  margin-left: 30%;
-  margin-top: .3em;
-  width: 40%;
-}
 
-@media (max-width:870px) {
-  .mediumwidth {
-    margin-left: 15%;
-    width: 70%;
-  }
-  .row [class*='c']{
-    display: block;
-    margin: 1% auto;
-    width: 100%;
-  }
-  .row:last-child column {
-    margin-bottom: 2.5em;
-  }
+
+// shared styling between btn and links in nav bars
+%outline-0 {
+  outline: 0;
+  // when button or nav bar is focused don't show an outline
 }
 
-@media (max-width:520px) {
-  .mediumwidth {
-    margin-left: 0;
-    width: 100%;
-  }
-  hr.mediumwidth {
-    width: auto;
-  }
+%no-underline {
+  text-decoration: none;
 }
diff --git a/sass/_grid.scss b/sass/_grid.scss
index 037c871003338ad37748ebaa6c87778f6c5beee1..5e384c476edbbc52493ffb5f49fad69e567ffa9b 100644
--- a/sass/_grid.scss
+++ b/sass/_grid.scss
@@ -2,12 +2,16 @@
 //-------------------------------------------------------------------
 //  Grid system responsive code is in _general.scss
 //  A hack (for old IEs) for the grid system is located in _iehacks.scss
+//
+//
+//  Every column has 2% padding (1% on each side) its width is
+//  (((its number/12) * 100)-2) percent (truncated, to avoid spillage.)
+//  Thus, c12 has width 98%.
 //-------------------------------------------------------------------
 
 .row {
-  line-height: 2em;
   margin-top: 2%;
-  overflow: auto;
+  overflow: auto; // needed for proper formed layout
 }
 
 column {
@@ -15,6 +19,11 @@ column {
   margin: auto 1%;
 }
 
+// IE Grid Fix
+.ie column {
+  margin: auto .7%;
+}
+
 .c12 {
 	width: 98%;
 }
@@ -52,6 +61,14 @@ column {
 	width: 6.33%;
 }
 
+
+@media (max-width:870px) {
+  .row column {
+    margin: 1% auto;
+    width: 100%;
+  }
+}
+
 //-------------------------------------------------------------------
 // End @if
 }
diff --git a/sass/_headings.scss b/sass/_headings.scss
index de33d5ea16289988ab406c769e21e3108c918bfd..8bf369bb2d350f463043a441eca2aa4ea69d2338 100644
--- a/sass/_headings.scss
+++ b/sass/_headings.scss
@@ -3,8 +3,7 @@
 //  Headings
 //-------------------------------------------------------------------
 
-/* Make the default heading style larger */
-// Set style for <h1>
+// Set style for <h1> -- larger than 'normal'
 h1 {
   font-size: 4em;
 }
diff --git a/sass/_icons.scss b/sass/_icons.scss
index e72a220e5a505c711012641f9bedd9c2758e2f63..73df59d0d6db5a29f3915e2a77294db5a2407f37 100644
--- a/sass/_icons.scss
+++ b/sass/_icons.scss
@@ -1,11 +1,12 @@
-@if $import-icons == true{
+@if $import-icons == true {
 //-------------------------------------------------------------------
 //  Icons
 //-------------------------------------------------------------------
 
 ico {
-  font-size: 2.04em;
-  font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif; /* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
+  font: 2.04em Arial Unicode MS, Lucida Sans Unicode;
+  // This combo of Unicode fonts means Min's icons support
+  // OSX 10.5+, Windows 98+, and Ubuntu.
 }
 
 
diff --git a/sass/_iehacks.scss b/sass/_iehacks.scss
index 220dee60a29a6881d67488bf17643fa4d0cf3676..e0bd4b297ccfd2df2b865faf1eda57f8b88b3650 100644
--- a/sass/_iehacks.scss
+++ b/sass/_iehacks.scss
@@ -1,24 +1,9 @@
-@if $import-ie-hacks == true{
+@if $import-ie-hacks == true {
 //-------------------------------------------------------------------
 //  Internet Explorer Hacks
 //-------------------------------------------------------------------
 
-// IE Medium Width
-.ie .mediumwidth {
-  margin-left: 0;
-  width: 70%;
-
-  hr {
-    margin: 100px auto;
-    padding-left: 200px;
-  }
-}
-
-
-// IE Grid System
-.ie column {
-  margin: auto .7%;
-}
+//  no hacks (outside of the ie grid hack found in the grid.scss file)
 
 //-------------------------------------------------------------------
 // End @if
diff --git a/sass/_inputs.scss b/sass/_inputs.scss
index 678a7a52c88349f40b2ed24d1330d781c69b87b3..84eb7ebe7a0c2dc52c14f904dddd4efdaf9d1dde 100644
--- a/sass/_inputs.scss
+++ b/sass/_inputs.scss
@@ -12,12 +12,11 @@
 
 textarea, input {
   @extend %global-inputs;
-  font-family: sans-serif;
-  outline: none;
+  outline: 0;
   padding: 6px;
 
   &:focus {
-    border: 1px solid #5ab;
+    border-color: #5ab;
   }
 }
 
@@ -30,8 +29,7 @@ textarea, input[type='text'] {
 .addon-front {
   @extend %global-inputs;
   border-right: 0;
-  margin-right: -2px;
-  padding: 6px 11px 6px 10px;
+  padding: 6px 11px;
 }
 
 
diff --git a/sass/_navbar.scss b/sass/_navbar.scss
index e56c68ae36b428ee814343fde231ddcb064018f7..030cd564e656a46e100f2cef6d394ca640def374 100644
--- a/sass/_navbar.scss
+++ b/sass/_navbar.scss
@@ -1,54 +1,95 @@
-@if $import-navbar == true{
+@if $import-navbar == true {
 //-------------------------------------------------------------------
 //  Navigation Bar
 //-------------------------------------------------------------------
 
-.navbar {
+// CSS reused in multiple selectors
+%nav-global {
   background: #000;
   color: #fff;
+}
+
+
+
+.nav {
+  @extend %nav-global;
   height: 1.5em;
-  padding: 1em 0 .6em;
-  text-align: left;
-  width: 100%;
+  padding: .7em 0 .95em;
+  // max-height: 1.5em; // needed for animations, uncomment to use
 
   a {
-    text-decoration: none;
+    @extend %no-underline;
+    @extend %nav-global;
+    color: #aaa;
+    font-size: 14px;
+    padding-right: 1em;
+    position: relative;
+    top: -1px;
   }
 
-  input, button, .btn {
-    margin-top: -20px;
-    // This ensures that any buttons and inputs in the
-    // navbar will not mess up its vertical alignment
+  .pagename {
+    @extend %nav-global;
+    font-size: 22px;
+    top: 1px;
   }
 
-  // Update styling of .navbar for small screens
-  @media(max-width:500px) {
-    height: 7.5em;
-
-    a {
-      display: block;
-      text-align: center;
-    }
+  .current {
+    @extend %nav-global;
   }
 }
 
-
-.pagename {
-  color: #fff;
-  padding: 0 1em 0 2em;
-  font-weight: bold;
+.btn.btn-close {
+  @extend %nav-global;
+  float: right;
+  font-size: 25px;
+  margin-top: -54px;
+  visibility: hidden;
 }
 
 
-.navbar-link {
-  color: #aaa;
-  padding: .5em;
 
-  &:hover {
-    color: #fff;
+// Update styling of .nav for small screens
+@media (max-width:500px) {
+  .btn.btn-close {
+    visibility: visible;
   }
-}
 
+  .nav {
+    overflow: hidden;
+    // transition: max-height .5s ease-in-out, height .5s ease-in-out;
+
+    &:focus {
+      /* Necesary for animations
+      max-height: 500px;
+      height: 100%;
+      */
+      height: auto;
+    }
+
+    & div:before {
+      background: #000;
+      border-top: 3px solid;
+      border-bottom: 10px double;
+      content: '';
+      float: right;
+      height: 4px;
+      position: relative;
+      right: 3px;
+      top: 14px;
+      width: 20px;
+    }
+
+    a {
+      display: block;
+      padding: .5em 0;
+      width: 50%;
+    }
+  }
+
+  .pagename {
+    margin-top: -11px;
+  }
+}
 
 //-------------------------------------------------------------------
 // End @if
diff --git a/sass/_table.scss b/sass/_table.scss
index 8f6b9e1daa502a26243babf0fad0b73fcb332ced..ae0aacbbfa41ff8e07534f1e46f295743298b94e 100644
--- a/sass/_table.scss
+++ b/sass/_table.scss
@@ -8,19 +8,21 @@ table {
   width: 100%;
 }
 
+
 tbody tr:nth-child(2n-1) {
-  background: #ccc; /* Shade every other table row */
+  background: #ccc; // Shade every other table row
+  // We use tbody to ensure that we don't shade the heading
+  // this preserves the order of the shading
 }
 
-.table {
-  th, td {
-    line-height: 1.4em;
-    padding: .5em;
-    text-align: left;
-  }
+
+th, td {
+  padding: .5em;
+  text-align: left;
 }
 
 
+
 //-------------------------------------------------------------------
 // End @if
 }
diff --git a/sass/min-master.scss b/sass/min-master.scss
index 58d0acc20c12824c1fdc36dda54dc04b587346e1..cc05888939c780faf71a0c4f1e21b1b93b56bae5 100644
--- a/sass/min-master.scss
+++ b/sass/min-master.scss
@@ -5,6 +5,7 @@
 @import 'general.scss';
 
 
+
 // ------------------------------------------------------------------
 //  Customize Optional Components
 //
@@ -28,19 +29,18 @@ $import-icons:                            true!default;
 
 $import-grid:                             true!default;
 
-$import-ie-hacks:                         true!default;
+$import-ie-hacks:                         false!default;
 
 
 // ------------------------------------------------------------------
 //  Import Components based on above customization
 // ------------------------------------------------------------------
 
-@import 'button.scss';
-@import 'grid.scss';
-@import 'headings.scss';
-@import 'icons.scss';
-@import 'inputs.scss';
-@import 'messages.scss';
-@import 'navbar.scss';
-@import 'table.scss';
-@import 'iehacks.scss';
+@import 'button';
+@import 'grid';
+@import 'headings';
+@import 'icons';
+@import 'inputs';
+@import 'navbar';
+@import 'table';
+@import 'iehacks';